/* --- */
/* --- General Layout Styles --- */
/* --- */
* { margin:0px; padding:0px; }
html { margin:0px; border:none; padding:0px; width:100%; height:100%; }
body { margin:0px; border:none; padding:0px; height:100%; background:#37411c url(../images/backgrounds/bgBody.jpg) top left repeat-x; color:#333; font-family:"Verdana", sans-serif;  font-size:12px; }

h2 {
font-family: "Century Gothic", sans-serif;
color:#125586;
font-size:24px;
font-weight:bold;
}

h3 {
font-family: "Century Gothic", sans-serif;
color:#125586;
font-size:18px;
font-weight:bold;
}

p, td {
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
}

a {
color:#637918;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}


/* --- */
/* --- Header and button bar --- */
/* --- */

#top-container {
width:1000px;
margin:0 auto;
}

#header {
width:1000px;
margin:0;
height:145px;
cursor:pointer;
}

#header img {
margin:0;
border:0;
}


#button-bar {
width: 921px;
margin-left:79px;
height:41px;
background:url(../images/backgrounds/bgButtons.jpg) no-repeat top;
}


/* --- */
/* --- Javascript drop-down menu --- */
/* --- */

#jsddm
{	margin: 0;
	padding: 0}

	#jsddm li
	{	float: left;
		height:41px;
		list-style: none;


		}

	#jsddm li.active
	{	background:url(../images/backgrounds/bgButtonOver.png) repeat-x;}



	#jsddm li a
	{	display: block;
		font-family: "Century Gothic", sans-serif;
		color:#FFFFFF;
		padding: 5px 25px 0 25px;
		text-decoration: none;
		height:36px;
		font-size:20px;

		}




	#jsddm li a:hover
	{	background:url(../images/backgrounds/bgButtonOver.png) repeat-x;}

		#jsddm li ul

		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			margin-top:-2px;
			z-index:20;



			}

		#jsddm li ul li
		{	float: none;
			display: inline;
			}

		#jsddm li ul li a
		{

		width: 240px;
	/* Width for IE makes website fluid width between 740 and 1100 px */
	/* width:expression(document.body.clientWidth < 220? "180" : document.body.clientWidth > 230? "180px" : "auto"); */
			background:#523f36;
			padding-bottom:10px;
			height:20px;
			font-size:16px;}

		#jsddm li ul li a:hover
		{	background:#503d21;}





/* --- */
/* --- Sunburst --- */
/* --- */

#sunburst {
width:100%;
background:url(../images/backgrounds/bgFlare.jpg) no-repeat  top center;
height:714px;
margin:0 auto;

}

/* --- */
/* --- Main sections --- */
/* --- */


#main-container {
width:1000px;
margin:0 auto;
text-align:left;
}

#main-container-inner {
background:url(../images/backgrounds/bgMainContent.png) repeat-y;
width:920px;
margin-left:72px;
padding-left:7px;
float:left;
text-align:left;
}

#main-container-left {
width:687px;
float:left;
}

#topspacer {
background:url(../images/backgrounds/bgMainTop.jpg);
height:18px;
width:689px;
}

#main-container-right {
float:right;
margin:0 35px 0 0;
}

#frontbanner {
background:url(../images/backgrounds/bgBannerAd.jpg) no-repeat;
width:650px;
height:81px;
padding:10px 10px 10px 20px;
margin-left:10px;
}

#frontbanner h1 {
font-size:17px;
margin-bottom:10px;
font-weight:bold;
}

#sack-top {
background:url(../images/rightcolumn/sack-top.jpg);
width:196px;
height:58px;
}

#sack-bottom {
background:url(../images/rightcolumn/sack-bottom.png);
width:194px;
height:20px;
}

#sack-gradient {
background:url(../images/rightcolumn/sack-repeat.jpg);
width:194px;
}

#sack-inner {
font-family: "Century Gothic", sans-serif;
background:url(../images/rightcolumn/sack-gradient.jpg) no-repeat;
width:179px;
color:#FFFFFF;
padding:0 5px 0 10px;
font-size:13px;
}

#sack-inner a {
color:#FFFFFF;
}

#sack-inner a:hover {
text-decoration:underline;
}

#sack-inner img {
border:0;
}

.sack-title {
background:url(../images/rightcolumn/sack-title.jpg);
width:184px;
height:25px;
margin-left:-9px;
padding:5px 0 0 10px;
font-size:13px;
font-weight:bold;
}

#featured {
background:#eff1f3;
width:689px;
height:151px;
float:left;
margin-bottom:20px;
}

#new-customer {
background:#eff1f3;
width:630px;
float:left;
margin-left:20px;
height:50px;
padding:10px;
margin-bottom:100px;
}

#featured a {color:#125586; text-decoration:none;}

#slideshow {
    position:relative;
    width:197px;
	height:129px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}


#slideshow IMG.last-active {
    z-index:9;
}


#featured-pic {
background:url(../images/backgrounds/bgFeaturedImgBg.jpg);
height:127px;
width:199px;
padding:13px;
margin:0 20px 0 20px;
float:left;
}

#featured-text {
float:left;
background:none;
width:400px;
}

#featured-title {
width:400px;
text-align:right;
color:#125586;
font-size:12px;
}

#blueline {
background:#125586;
width:100%;
height:1px;
margin-bottom:5px;
line-height:1px;
}

#featured h2 {
font-size:17px;
margin-top:10px;
font-weight:bold;
}

#content-left {
width:270px;
margin-left:20px;
float:left;
}

.blogSpotFeed {
width:650px;
}


#content-right {
width:390px;
float:left;
}

#searchbox {
background:url(../images/backgrounds/bgSearch.jpg) no-repeat;
width:231px;
height:48px;
text-align:left;
padding-top:10px;
padding-left:15px;
margin-bottom:20px;
color: #125586;
font-weight: bold;
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
font-size:10px;
}

.textinput{
width:175px;
height:18px;
border:1px solid #125586;
margin:0 4px 4px 0;
padding-top:2px;
padding-left:5px;
}

.gobutton {
border:none;
background:none;
font-family:"Century Gothic", sans-serif;
font-size:16px;
color:#125586;
cursor:pointer;
}

.gobutton:hover {
color:#637918;
}

.catbox {
width:125px;
margin:5px 5px 5px 0px;
float:left;
}

.catbox-top {
background:url(../images/categorybox/cb-top.jpg) no-repeat center;
width:125px;
height:9px;
}

.listingText {
margin-left:3px;
}


.catbox-repeat {
background:url(../images/categorybox/cb-repeat.jpg);
width:125px;
}

.catbox-inner {
background:url(../images/categorybox/cb-gradient.jpg) no-repeat;
padding:5px;
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
font-size:11px;
text-align:center;
}

#listings .catbox-inner p {margin:0; padding:0;}

#listings ul {list-style-position:inside;}

.catbox-bottom {
background:url(../images/categorybox/cb-bottom.jpg) no-repeat center;
width:125px;
height:9px;
}


#footer {
background:url(../images/backgrounds/bgFooter.jpg) no-repeat;
height:178px;
width:737px;
margin-left:61px;
padding:10px 0 0 0;
}

#banner {
font-family: "Century Gothic", sans-serif;
background:url(../images/backgrounds/bgBanner.jpg) no-repeat;
width:294px;
height:59px;
font-size:16px;
margin:0px 0 0 320px;
padding:10px 0 0 95px;
cursor:pointer;
line-height:18px;
}

#footer-lower {
margin-top:8px;
color:#FFFFFF;
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
font-size:11px;
}

#footer-lower a {
color:#FFFFFF;
}

#footer-left {
float:left;
margin-left:25px;
margin-top:4px;
}

#footer-right {
float:right;
margin-top:5px;
}

#footer-icons {
float:right;
margin:1px 25px 0 0;
}


#credits {
color:#FFFFFF;
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
font-size:11px;
text-align:center;
margin-right:118px;
padding-bottom:20px;
}

#credits a {
color:#FFFFFF;
}

#inner-title {
float:left;
width:400px;
margin-left:28px;
margin-top:10px;
}

#inner-search {
float:right;
margin-right:43px;
width:210px;
}

#navbox {
width:204px;
float:left;
margin-left:20px;
}

#navbox_top {
background:url(../images/navbox/navbox_top.jpg) no-repeat;
width:204px;
height:17px;
}

#navbox_bg {
background:url(../images/navbox/navbox_bg.jpg) repeat-y;
width:204px;
padding-bottom:10px;
}

#navbox_bg h5 {
margin-left:10px;
font-size:14px;
}

#navbox_bg a {
display:block;
width:180px;
height:20px;
text-decoration:none;
margin:0 7px 0 7px;
padding:0 5px 0 5px;
font-size:15px;
}

#navbox_bg a.navactive {
background:#efefee;
}

#navbox_bg a:hover {
background:#efefee;
}


#navbox_bottom {
background:url(../images/navbox/navbox-bottom.jpg) no-repeat;
width:204px;
height:21px;
}

#inner-text {
float:left;
width:440px;
margin:10px;
}

#listings {
margin-left:20px;
margin-right:10px;
min-height:300px;
}

#listings img {
border:0px;
}


.productImage {
float:left;
}

.productText {
font-family:"Lucida Sans", "Tahoma", "Verdana", sans-serif;
}

.usage {
float:left;
margin-left:20px;
width:250px;
}

.navlist li {
list-style:none;
}


#front-left {
float:left;
width:350px;
height:250px;
}

#front-login {
background:#eff1f3;
float:left;
width:270px;
padding:10px;
height:200px;

}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=  */
/*													    */
/* April 2010. Added extra classes for wholesale site.  */
/*													    */
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=  */

/* @todo yabs : check if these are used else where on site */
#product {
width: 600px;
background:url(../images/backgrounds/bgProducts.jpg) repeat-x;
padding:10px;
margin:10px;
border:1px solid #eeeeee;
    -webkit-border-radius: 8px;    /* for Safari */
    -moz-border-radius: 8px;       /* for Firefox */

}

#product-left {
float:left;
padding:5px;
width:140px;
}

#product-left img {
border:1px solid #eeeeee;
padding:3px;
background-color:#FFFFFF;
}

#product-right {
float:left;
padding:5px;
width:400px;
}

#product-right a {
font-weight:bold;
color:#125586;
}

#product table {
font-size:10px;
}

#product td {
width:120px;
padding:3px;

}
/* if not then they should be classes ( as below ) for validation */
.product {
width: 600px;
background:url(../images/backgrounds/bgProducts.jpg) repeat-x;
padding:10px;
margin:10px;
border:1px solid #eeeeee;
-webkit-border-radius: 8px;    /* for Safari */
-moz-border-radius: 8px;       /* for Firefox */
border-radius: 8px;       /* other browsers */
}

.product-left {
float:left;
padding:5px;
width:140px;
}

.product-left img {
border:1px solid #eeeeee;
padding:3px;
background-color:#FFFFFF;
}

.product-right {
float:left;
padding:5px;
width:400px;
}

.product-right a {
font-weight:bold;
color:#125586;
}

.product table {
font-size:10px;
}

.product td {
width:120px;
padding:3px;
}
/* /todo */
#orderForm p{
margin-bottom:1em;
}

.clearer {
clear:both;
}

.tablehead {
background:#DDDDDD;
font-weight:bold;
}


.productdetails {
display:none;
}

.slidecontrol {
font-size:18px;
color:#125586;
font-weight:bold;
}

.details-left {
float:left;
padding:10px 10px 10px 0;
text-align:center;
width:350px;
margin:0 auto;
}

.details-left img {
border:1px solid #999999;
padding:5px;
}

.details-right {
float:left;
width:420px;
margin-top:10px;
}

.ticks {
width:200px;
float:left;
}


.categorytoggle {
display:none;
}

#accordion h2 {
display:block;
width:685px;
height:31px;
padding:20px;
background:url(../images/header-inactive.jpg) no-repeat;
color:#FFFFFF;
}

#accordion h2:hover {
cursor:pointer;
}

#accordion h2.active {
background:url(../images/header-active.jpg) no-repeat;
}

#browse-footer {
position: fixed;
bottom: 0px;
width:100%;
background:url(../images/browse-footer-bg.png) top center repeat-x;
padding:20px 0 10px 0;
height:60px;
margin:0 auto;
text-align:center;
}

#browse-footer-2 {
position: fixed;
bottom: 90px;
width:100%;
background:url(../images/browse-footer-bg-top.png) top center repeat-x;
height:26px;
padding-top:20px;
margin:0 auto;
text-align:center;
}

#browse-footer-toggle {
width:1060px;
height:20px;
margin: 0 auto;
text-align:left;
}

#browse-footer-toggle-inner {
width:120px;
height:20px;
cursor:pointer;
margin:10px 0 0 10px;
}

#browse-footer-inner {
width:842px;
text-align:left;
margin:0 auto;
}

table.express-table {
font-size:11px;
}

express-table td {
}

.stripewhite {
background:#FFFFFF;
}

.stripegray {
background:url(../images/browse-footer-bg.png) top;
}



.grey-me{
padding:5px;
border-bottom:1px dashed #CCCCCC;
}