﻿html, head, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

html, body{}
body { background-color:#747474; margin: 0px; padding: 0px;font-family:Verdana; }
img {border:0px;}

#wrapper {width:760px;min-width:760px; margin:0px auto;}

#page{width:100%; background: url('images/bk_shade.jpg') repeat; margin:0px auto;}
#pageend{width:100%; height:16px; background: url('images/footer_shade.jpg') repeat; margin:0px auto; }

#pagecontainer {width:740px;min-width:740px; margin:0px auto; background:#FFFFFF;}
#header .top {width:100%; height:80px; background : #2F3733 url('images/header_top_logo.jpg') no-repeat left top; }
#header .top .headermenu{float:right; width:300px; color:White; font-size:60%; padding:10px; text-align:right;vertical-align:bottom;}
#header .bottom {width:100%; height:34px; background :url('images/header_bottom_bk.jpg') repeat-x; }
#header .bottom .logo{height:34px; background : url('images/header_bottom_logo.jpg') no-repeat left top; }
#header .bottom .logo .quicklinks{height:33px; margin-left:300px; text-align:right;}
#mainmenu {width:100%; height:34px; background:#EBECEC; border-bottom:1px solid #2F3733; }

#mainmenu ul{list-style-type:none; margin:0px; padding:0px;}
#mainmenu ul li {float:right; position:relative;}
#mainmenu ul li a{float:left; font-size:71%; font-weight:bold; height:25px;}

#mainmenu ul li ul {display:none; position:absolute; top:34px; padding:5px 7px 7px 14px; min-width:160px; left:0px; background-color:#2F3733; opacity:0.85;filter:alpha(opacity=85)}
#mainmenu ul li:hover ul{display:block;}
#mainmenu ul li:hover ul li {float:none; color:White; font-size:95%; text-decoration:none; padding:3px;}
#mainmenu ul li:hover ul li a{float:none; color:White; text-decoration:none; font-weight:bold;}
#mainmenu ul li:hover ul li a:hover{float:none; color:#EBECEC; text-decoration:none; font-weight:bold;}

.menulink {  color:#747474; padding:10px 20px 0px 20px; text-decoration:none;}
.menulink:hover {color:#2F3733;  padding:10px 20px 0px 20px; text-decoration:none;}
.menulink.selected {  color:#2F3733;   padding:10px 20px 0px 20px; text-decoration:none;} 


.menu {background-color:White;}
.menu .top {width:239px; height:29px; line-height:27px; vertical-align:middle; text-indent:10px; font-weight:bold; background:url('images/menutop.jpg') no-repeat; font-size:70%; text-transform:uppercase; color:White;}
.menu .top .menuheader{float:left; width:200px; height:29px;}
.menu .top .arrow{float:right; width:38px; height:29px;line-height:27px;  background:url('images/arrowup.gif') no-repeat; background-position:center;}
.menu .top .arrow.down{float:right;width:38px; height:29px;line-height:27px;  background:url('images/arrowdown.gif') no-repeat; background-position:center;} 
.menu .linksholder{width:239px; min-height: 50px; font-size:75%; vertical-align:top; background:url('images/content_bottom_bk.jpg') repeat-x bottom; }
.menu .linksholder {padding-bottom:20px;}
.menu .linksholder ul{list-style-type:none; margin:0px; padding:0px;}
.menu .linksholder ul li {position:relative; padding: 5px 10px 5px 10px;}
.menu .linksholder ul li span { font-size:85%; font-weight:bold;}
.menu .linksholder ul li a{color:#2F3733; font-weight:bold; font-size:100%; text-decoration:none;}
.menu .linksholder ul li a:hover{color:#747474; font-weight:bold; font-size:100%; text-decoration:none;}
.menu .linksholder ul li ul li a{color:#747474; font-weight:bold; font-size:95%; text-decoration:none;}
.menu .linksholder ul li ul li a:hover{color:#A3A3A3; font-weight:bold; font-size:95%; text-decoration:none;}
.menu .linksholder ul li ul li ul li a{color:#A3A3A3; font-weight:bold; font-size:90%; text-decoration:none;}
.menu .linksholder ul li ul li ul li a:hover{color:#2F3733; font-weight:bold; font-size:90%; text-decoration:none;}

.menu .bottom { width:239px; height:8px; background:url('images/menubottom.jpg') no-repeat;}



#templates {width:100%;}

#banner {width:100%;}

.mainb {width:740px;height:253px; border-bottom:1px solid #2F3733;}
.mainb img{width:740px;height:253px;border:0px}

.submainb {width:740px;height:184px; border-bottom:1px solid #2F3733;}
.submainb img{width:740px;height:184px;border:0px}

.sub1b .imagearea {float:left; width:500px; height:125px; border-bottom:1px solid #2F3733;}
.sub1b .imagearea img{width:500px; height:125px;border:0px}
.sub1b .flasharea {float:left; width:239px; height:125px; background-color:#2F3733; border-bottom:1px solid #2F3733; border-left:1px solid #747474; }

.sub2b {width:740px; border-bottom:1px solid #2F3733;}
.sub2b img{width:740px; border:0px}

#content {position:relative; width:100%; background-color:#EBECEC; }
#content .top{width:100%}
#content .bottom{width:100%}
#content .left{float:left;width:230px;}
#content .right{float:left; width:450px; padding-left:10px;  }

.title {padding:5px;}
.title h1 {font-size : 80%; white-space:normal;line-height:15px; margin:0px; padding:7px 0 0 10px;  }
.title h2 {font-size : 80%; white-space:normal;line-height:15px; margin:0px; padding:7px 0 0 10px; }
.title.grey h2{color:#FFFFFF;}

.content { font-size : 71%; text-align:justify; white-space:normal; margin:0px; padding:0px 15px 15px 15px; }
.content a {color:black;font-weight:bold; text-decoration:underline;}
.content a:hover {color:black; font-weight:bold; text-decoration:none;}

.mainc .col1{width:246px; background-color:#ffffff; vertical-align:top; }
.mainc .col2{width:246px; vertical-align:top;background-color:#747474; border-left:1px solid #2F3733; border-right:1px solid #2F3733;}
.mainc .col2 {}
.mainc .col3{width:246px; background-color:#ffffff; vertical-align:top;  }
.mainc .title  {width:236px; background-color:#EBECEC; height:28px;}
.mainc .title.grey  {width:236px; background:#747474 url('images/menutopwithnoborder.jpg') repeat-x;   border-bottom:1px solid #2F3733; height:27px;}
.mainc .content {padding:10px }
.mainc .featureditems {padding:10px; font-size : 71%; color:White;}
.mainc .featureditems .featuredtitle {font-weight:bold;padding-bottom:5px;text-transform:uppercase;}
.mainc .featureditems a {color:White;font-weight:bold; text-decoration:none;}
.mainc .featureditems a:hover {color:Black;font-weight:bold; text-decoration:none;}
.mainc .featureditems .featuredimage {width:74px; float:left;}
.mainc .featureditems .readmore{width:100%;text-align:right;}

.submainc .col1{width:740px; vertical-align:top; background:#fff url('images/content_bottom_bk.jpg') repeat-x bottom;}
.submainc .title {width:730px;  background:url('images/content_top_bk.jpg') repeat-x top; height:33px;}


.sub1c .col1{width:500px;float:left; border-right:1px solid #2F3733; vertical-align:top; background:#fff url('images/content_bottom_bk.jpg') repeat-x bottom;}
.sub1c .col2{width:239px;float:right;  background-color:#EBECEC; vertical-align:top;}
.sub1c .title {width:490px;  background:url('images/content_top_bk.jpg') repeat-x top; height:33px;}


.sub2c .col1{width:500px;float:left;border-right:1px solid #2F3733;  vertical-align:top;  background:#fff url('images/content_bottom_bk.jpg') repeat-x bottom;}
.sub2c .col2{width:239px;float:right; background-color:#EBECEC; vertical-align:top;}
.sub2c .title {width:490px;  background:url('images/content_top_bk.jpg') repeat-x top; height:33px;}


#brands img{border:0px; width:122px;}
.vert{ width:240px; overflow:hidden;}
.horz { width:740px; margin:0px; height:66px; border-top:1px solid #2F3733; overflow:hidden;}
.vert .brandsscroll, .horz .brandsscroll {position:relative;}
.vert ul { text-indent:0px; margin:0px;padding:11px 0 0 0;list-style-type:none;}
.horz ul { text-indent:0px; margin:0px;padding:5px 0 10px 0;list-style-type:none;}
.vert ul li, .horz ul li{ text-indent:0px; margin:0px;  padding:0; line-height:0; }
.vert ul {height:270px;}
.horz ul {height:66px;}
.vert ul li{float:left; width:100%; height:66px;line-height:64px; vertical-align:middle; text-align:center;}
.horz ul li{float:left; width:185px;height:66px; line-height:64px; vertical-align:middle; text-align:center;}

.searchpanel {padding:5px 5px 5px 0px; width:300px; font-size:75%; float:right;}

.searchpanel .textbox{background:url('images/searchtextbox.gif'); color:white; width:161px; height:20px; padding-left:3px;}

.newssection {width:100%}
.newssection .AltItem{background-color:#EBECEC;}
.newssection h2 {color:#747474; font-weight:bold; line-height:18px; font-size:1.0em; margin:0px; padding-bottom:5px;}
.newssection .details { text-align:right;}
.newssection .featuredimage {width:74px; float:left;}
.newssection .featuredtext {text-align: justify; margin-left:80px;}
.newssection .featuredtext.full {text-align: justify; margin-left:0px;}
.newssection .fulltext{text-align: justify; }
.newssection h2 a {color:#747474; text-decoration:none;}
.newssection h2 a:hover {color:#747474; text-decoration:underline;}
.newssection a {color:#2f3733; text-decoration:none;}
.newssection a:hover {color:#2f3733; text-decoration:underline;}
.newssection .label {color:#2f3733;font-weight:bold;}

.seperator3{padding-top:10px; border-bottom:dotted 1px #747474; margin-bottom:15px;}
.bottomseperator{margin-top:10px; width:100%; border-bottom:dotted 1px #747474; margin-bottom:5px;}

.productssection {width:100%;}
.productssection .AltItem{background-color:#EBECEC;}
.productssection h2 {color:#747474; font-weight:bold; line-height:18px; font-size:1.0em; margin:0px; padding-bottom:5px;}
.productssection .details { text-align:right;}
.productssection .featuredimage {width:74px; float:left;}
.productssection .featuredtext {text-align: justify; margin-left:80px;}
.productssection .featuredtext.full {text-align: justify; margin-left:0px;}
.productssection .fulltext{text-align: justify; }
.productssection h2 a {color:#747474; text-decoration:none;}
.productssection h2 a:hover {color:#747474; text-decoration:underline;}

.productssection .label {color:#2f3733;font-weight:bold;}

.readmore {text-align:right;}

.backbutton{color:#747474; font-weight:bold; text-decoration:none;}
.backbutton:hover{ color:#2f3733;font-weight:bold; text-decoration:none;}

.ContactUsForm {width:100%}


.ContactUsFormHead .formError{width:420px; padding-left:155px; padding-bottom:5px}   
          
.ContactUsForm h2{border-bottom:solid 1px #002855;}
.ContactUsForm div{padding-bottom:7px;}
.ContactUsForm .formField{width:150px; float:left; font-size:80%;color:#2F3733; font-weight:bold; text-align:right; padding-right:5px;}
.ContactUsForm .formInput{}
.ContactUsForm .formInput input{ width:250px; border:solid 1px #002855; padding:2px;}
.ContactUsForm .formInput textarea{ width:250px;height:100px; border:solid 1px #002855;}
.ContactUsForm .formInput select{width:255px;}
.ContactUsForm .formInput .dropdown{border:solid 1px #002855;background-color:#FFFFFF; position: relative; width: 251px;height:10px; overflow: hidden;float:left;}
.ContactUsForm .formInput .selectlist{position: absolute; width: 255px; top: -2px; left: -2px;}
.ContactUsForm .submitbutton{background:url(images/submit.gif) no-repeat;width:92px; height:19px;}
.ContactUsForm .requiredLabel{color:#002855; vertical-align:top; padding-left:4px;}
.ContactUsForm .errorLabel{background:url(images/warning.gif) no-repeat;width:20px; height:20px; color:Red; vertical-align:top;}


#editForm { position: absolute; height: 100%; width: 100%; display: none; z-index: 997; }
#editFormbg { position: absolute; height:100%; width: 100%; filter: alpha(opacity=85); -moz-opacity: .85; opacity: .85; background-color: #333333; z-index: 997; min-height: 100%; }
#editFormcontent { position: absolute; height: 100%; width: 100%; color: white; font-weight: bolder; z-index: 999; }
#editFormcontent #iframeHolder { width: 80%; margin: auto; margin-top: 20px; }
#editFormcontent iframe { margin: auto; width: 100%; z-index: 1000; }

#pictureviewer {background-color:#000000;}
#pictureviewer .top {height:29px; line-height:27px; vertical-align:middle; text-indent:10px; font-weight:bold; background:url('images/menutop.jpg') repeat-x; font-size:90%; text-transform:uppercase; color:White;}
#pictureviewer .top .menuheader{float:left; width:350px; height:29px;}
#pictureviewer .top .arrow{float:right; width:38px; height:29px;line-height:27px;  background:url('images/arrowup.gif') no-repeat; background-position:center;}
#pictureviewer .top .arrow.down{float:right;width:38px; height:29px;line-height:27px;  background:url('images/arrowdown.gif') no-repeat; background-position:center;} 
#pictureviewer .picturearea{padding: 0px 2px 2px 2px;}
#pictureviewer .bottom {height:8px; background:url('images/menubottom.jpg') repeat-x;}


.pagesitemap{float:left; width:350px; }
.pagesitemap h2{ font-size : 100%; white-space:normal;line-height:15px; margin:0px; padding: 5px 0 5px 10px;border-bottom:dotted 1px #747474; margin-bottom:15px; }
.productsitemap{float:right; width:350px}
.productsitemap h2{ font-size : 100%; white-space:normal;line-height:15px; margin:0px; padding:5px 0 5px 10px;border-bottom:dotted 1px #747474; margin-bottom:15px; }
.sitemap ul{list-style-type:none; margin:0px; padding:0px;}
.sitemap ul li {position:relative; padding: 5px 10px 5px 10px;}
.sitemap ul li span { font-size:85%; font-weight:bold; color:#747474;padding-left:5px; padding-right:10px; background:url('images/gotoarrowgrayright.gif') no-repeat;}
.sitemap ul li a{color:#2F3733; font-weight:bold; font-size:100%; text-decoration:none;}
.sitemap ul li a:hover{color:#747474; font-weight:bold; font-size:100%; text-decoration:none;}
.sitemap ul li ul li span { font-size:85%; font-weight:bold; background:none; padding-left:10px; padding-right:10px;}
.sitemap ul li ul li a{color:#747474; font-weight:bold; font-size:95%; text-decoration:none;}
.sitemap ul li ul li a:hover{color:#A3A3A3; font-weight:bold; font-size:95%; text-decoration:none;}
.sitemap ul li ul li ul li a{color:#A3A3A3; font-weight:bold; font-size:90%; text-decoration:none;}
.sitemap ul li ul li ul li a:hover{color:#2F3733; font-weight:bold; font-size:90%; text-decoration:none;}

.searchresults {width:100%}
.searchresults h2 {color:#2F3733; font-style:normal; font-size:115%;margin:0px; white-space:normal;line-height:15px;padding:10px 0 5px 0; border-bottom:dotted 1px #747474; margin-bottom:15px;}

.searchresults .item {padding:5px 0px 0px 20px;}
.searchresults .item h3 {color:#747474; font-style:normal; font-size:100%; font-weight:bold; line-height:18px;  margin:0;}
.searchresults .item h3 a {color:#747474; font-style:normal; font-size:100%; text-decoration:none;}
.searchresults .item h3 a:hover {color:#747474; font-style:normal; font-size:100%; text-decoration:underline;}
.searchresults .item .details { text-align:right;}
.searchresults .item .featuredtext.full {text-align: justify; padding:0px;}
.searchresults .item .seperator {border-bottom:dotted 1px #747474; margin-bottom:15px;} 
.searchresults .item .readmore{text-align:right;padding:5px 0 5px 0;}



#footer{min-height:55px; font-size : 65%; background:#EBECEC; border-top:1px solid #2F3733;}
#footer a{color:#2F3733;text-decoration:underline; font-weight:bold;}
#footer a:hover{color:#2F3733;text-decoration:none; font-weight:bold;}

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

    #makeMeScrollable
	{
		width:100%;
		height: 98px;
		position: relative;	
		
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		padding:0px 0px 0px 0px;
		margin: 0;
		width:156px;		
		overflow:hidden;
	}



/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 25px;
	width: 5%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(images/arrow_left_sml.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.50; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.50; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 50); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 25px;
	width: 5%;
	height: 100%;
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(images/arrow_right_sml.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.50;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.50;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
	display:inline-block;
	
}

