/*

		EcoSponsible
		Main CSS
		Alison Endacott
		October/November 2007


*/


* {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
}
	
	
body {
	background: #fff url(../images/web/bg.jpg) top center repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 75%;
	line-height: 1.3;
}

a {
	color: #255604;
}
	a:hover {
		color: #398506;
	}

#container {
	width: 788px;
	margin: 0 auto;
	background: url(/images/web/bg-container.gif) repeat-y;
}

	#content {
		background: url(../images/web/gradient.jpg) repeat-x bottom;
		margin-left: 4px;
		width: 780px;
		padding-bottom: 1em;
		min-height: 300px;
		_height: 300px;
		
	}
	
		body.home #innerContent,
		body.catalog #innerContent {
			float: left;
			_display: inline;
			margin-top: -6px;
			padding: 0;
			*margin-top: 0;
		}
			body.home #innerContent {
				margin-top: -6px;
				}
		
		#innerContent {
			padding: 0 15px;
			*margin-top: 2em;
		}

p {
	padding-top: .5em;
}

	#content li {
		position: relative;
		left: 1.5em;
	}
	
	img.left {
		float: left;
		margin: 10px 10px 10px 0;
	}
	
		body.home img.left {
			margin-bottom: 50px;
		}

/* ------------------------ 
	header/navigation
------------------------ */
#head {
	background: url(../images/web/bg-head.jpg) no-repeat top;
	position: relative;
	display: block;
	z-index: 99;
}
	p#skiplink {
		position: absolute;
		left: -9999px;
	}
	
	
	h1 a {
		display: block;
		text-indent: -9999px;
		overflow: hidden;
		width: 175px;
		height: 156px;
		margin: 0 0 0 10px;
		float: left;
		_display: inline;
	}
	
	h2 {
		position: absolute;
		top: 8px;
		left: 25px;
		width: 741px;
		height: 17px;
		background: url(../images/web/subhead.gif) no-repeat top left;
		text-indent: -9999px;
		overflow: hidden;
	}
	
	#head #topNav {
		display: block;
		width: 238px;
		height: 23px;
		position: absolute;
		right: 4px;
		top: 34px;
		list-style: none;
		z-index: 101;
		*position: relative;
		*left: 360px;
	}
		#topNav li {
			float: left;
			_display: inline;
		}
		
			#topNav li a {
				color: #fff;
				display: block;
				height: 23px;
				text-indent: -9999px;
				overflow: hidden;
				background: url(../images/web/bg-topnav.gif) no-repeat;
			}
			
			#topNav #navHome-top a {
				width: 92px;
			}
				#topNav #navHome-top a:hover {
					background-position: 0 -23px;
				}
			
			#topNav #navCart a {
				width: 90px;
				background-position: -92px 0;
			}
				#topNav #navCart a:hover {
					background-position: -92px -23px;
				}
			
			#topNav #navFaq a {
				width: 56px;
				background-position: -182px 0;
			}
				#topNav #navFaq a:hover {
					background-position: -182px -23px;
				}
		
	
	#login-form {
		width: 318px;
		height: 28px;
		float: left;
		_display: inline;
		position: relative;
		top: 129px;
		left: 188px;
		background: url(../images/web/bg-login.jpg) no-repeat;
		padding: 1px 0 0 10px;
		
		*position: absolute;
		*left: 371px;
	}
		#login-form fieldset {
			bordeR: 0;
		}
			#login-form legend {
				display: none;
			}
			
			#login-form input {
				display: inline;
				width: 80px;
			}
			
			input#Header_btnGo {
				width: 26px;
				height: 19px;
				position: relative;
				top: 5px;
				left: 19px;
			}
			
			li#navJoin a {
				display: block;
				width: 85px;
				height: 29px;
				position: absolute;
				left: 153px;
				top: 95px;
				background: url(../images/web/join-us.gif);
			}
	
	#navigation {
		background: url(../images/web/bg-nav.gif) no-repeat top left;
		clear: both;
		height: 72px;
		*height: 53px;
		padding-left: 5px;
		padding-top: 3px;
		*margin-top: -69px;
		_margin-top: 0;
		
	}
		body.home #navigation {
			*height: 72px;
		}
		
		#navigation li  {
			float: left;
			_display: inline;
			list-style: none;
			
		}
	
			#navigation li a.toplevel {
				display: block;
				height: 36px;
				background: url(../images/web/nav.gif) no-repeat;
				text-indent: -9999px;
				overflow: hidden;
			}
				#navigation li#navHome ul { width:84px;}
				#navigation li#navHome a.toplevel {
					width: 84px;
					background-position;
				}
					#navigation li#navHome a:hover {
						background-position: 0 -36px;
					}
				
				#navigation li#navAction ul {width:126px;}
				#navigation li#navAction a.toplevel {
					width: 126px;
					background-position: -84px 0;
				}
					#navigation li#navAction a:hover {
						background-position: -84px -36px;
					}
				
				#navigation li#navMembership ul {width: 108px;}
				#navigation li#navMembership a.toplevel {
					width: 108px;
					background-position: -210px 0;
				}
					#navigation li#navMembership a:hover {
						background-position: -210px -36px;
					}
					
				#navigation li#navNews ul { width: 125px;}
				#navigation li#navNews a.toplevel {
					width: 125px;
					background-position: -318px 0;
				}
					#navigation li#navNews a:hover {
						background-position: -318px -36px;
					}
				
				#navigation li#navMarketplace ul { width: 149px;}
				#navigation li#navMarketplace a.toplevel {
					width: 149px;
					background-position: -443px 0;
				}
					#navigation li#navMarketplace a:hover {
						background-position: -443px -36px;
					}
				
				#navigation li#navLinks ul {width: 66px;}
				#navigation li#navLinks a.toplevel {
					width: 66px;
					background-position: -592px 0;
				}
					#navigation li#navLinks a:hover {
						background-position: -592px -36px;
					}
					
				#navigation li#navContact ul {width:122px;}
				#navigation li#navContact a.toplevel {
					width: 122px;
					background-position: -658px 0;
				}
					#navigation li#navContact a:hover {
						background-position: -658px -36px;
					}



ul#navigation ul { /* all lists */
	list-style: none;
	font-size: 100%;
	background: #36a10f;
	
}

	ul#navigation ul li {
		font-size: 90%;
		display: block;
		text-indent: 0;
		float: none;
		height: 1%;
		margin-bottom: 1px;
		*margin-bottom: 0;
		line-height: 1;
		position: relative;
	z-index: 99;
	}
		ul#navigation ul a {
			color: #fff;
			text-decoration: none;
			display: block;
			padding: .7em 5px;
			margin: 0;
			background: #3ea917;
			text-align: center;
		}
			ul#navigation ul a:hover {
				background: #56c12f;
				color: #000;
				}
				
		ul#navigation li ul { /* second-level lists */
			position: absolute;
			left: -999em;  /*using left instead of display to hide menus because display: none isn't read by screen readers */
		}
		
		ul#navigation li:hover ul, ul#navigation li.sfhover ul { /* lists nested under hovered list items */
			left: auto;
		}			
		
		/* IE 7 drop down fix, nav will stick when you change focus on the page otherwise */
			#topNav li:hover, ul#navigation li.hover {
				*position: static;
			}

/* ------------------------ 
		homepage
------------------------ */
#sidebar {
	width: 275px;
	float: left;
	_display: inline;
	border: 1px solid #c2cebb;
	border-top: 0;
	margin: 34px 11px 0 13px;
}

	#sidebar h3 {
		background: url(../images/web/spotlight-head.gif) no-repeat top left;
		width: 277px;
		height: 34px;
		display: block;
		text-indent: -9999px;
		overflow: hidden;
		position: relative;
		top: -34px;
		left: -1px;
		margin-bottom: -34px;
		/*ie 6 & 7 hacks */
			*margin-top: -34px;
			*top: 0;
			*margin-bottom: 0;
			*position: static;
			_position: fixed;
		/* */
	}
	
	#sidebar p {
		padding: 8px;
	}
	
body.home #innerContent {
	width: 468px;
}
	body.home #innerContent h3 {
		margin-top: 1em;
	}

	#innerContent h3 {
		color: #255604;
		text-transform: uppercase;
		font-size: 130%;
		}
		
		p#more {
			margin: 0 auto;
			width: 218px;
		}
			p#more a {
				display: block;
				width: 218px;
				height: 39px;
				text-indent: -9999px;
				overflow: hidden;
				background: url(../images/web/EcoSponsible-sliced_53.gif) no-repeat top;
			}
				p#more a:hover {
					background-position: 0 -39px;
					}
				
p.more a,
p.top a {
	background: url(../images/web/tree.gif) no-repeat right;
	padding-right: 18px;
	padding-top: 18px;
	float: right;
	font-weight: bold;
	text-decoration: none;
}
	p.top a {
		float: none;
		text-align: right;
	}

.green {
	color: #5e9332;
}

.red {
	color: #c50000;
}

#featuredThumbs {
	margin-left: 8px;
	}

	#featuredThumbs dl {
		width: 66px;
		float: left;
		_display: inline;
		position: relative;
		padding-top: 68px;
		padding-bottom: 5px;
	}
		#featuredThumbs dl:hover {
			background: #cdeca6;
		}
		
		#featuredThumbs dt {
			padding: 2px;
			line-height: 1.1;
		}
		
		#featuredThumbs dt a {
			font-size: 85%;
			color: #000;
			text-decoration: none;
		}

		 #featuredThumbs dl dd {
			position: absolute;
			top: 0;
			left: 2px;
		}

/* ------------------------ 
	inner pages
------------------------ */
	
p.top {
	text-align: right;
	font-weight: bold;
}	

/* ------------------------ 
		  NEWS
------------------------ */
p.backNews {
	float: right;
	font-weight: bold;
}
	p.backNews a {
		text-decoration: none;
	}

	.news h4 {
		font-weight: normal;
		font-size: 90%;
		color: #333;
	}
	
	.news h3 {
		font-size: 115%;
		width: 100%;
		height: auto;
		padding-bottom: .3em;
	}

	div.article {
		border-top: 1px dotted #6aa436;
		padding-bottom: .5em;
		margin-bottom: .5em;
	}
	
	p.author {
		font-weight: bold;
		font-size: 90%;
		text-align: center;
		margin-top: 1em;
	}
	
	p.previous {
		float: left;
	}
	
	p.next {
		float: right;
		padding-right: 10px;
	}
	
	p.print {
		text-align: center;
		margin-top: 2em;
	}
	
ul#newsList {
	list-style: none;
	margin-top: .5em;
	padding: 5px;
}

	ul#newsList li {
		border-bottom: 1px dotted #6aa436;
		padding-bottom: .5em;
		margin-bottom: .5em;
		left: 0;
		width: 340px;
		float: left;
		margin: 1em 10px;
	}
		ul#newsList h4 {
			color: #333;
			font-size: 90%;
			font-weight: normal;
		}
		
		ul#newsList h3 {
			padding: 0;
			font-size: 100%;
			width: 100%;
			height: auto;
		}
			ul#newsList h3 a {
				text-decoration: none;
			}
			
body.news .article img {
	padding: 5px;
	border: 1px solid #6aa436;
}
/* ------------------------ 
		catalog
------------------------ */
body.catalog p#banner {
	margin-bottom: 1em;
}

body.catalog #content {
	background: url(../images/web/bg-content.jpg) no-repeat bottom;
}

#catList {
	height: 200px;
	width: 180px;
	float: left;
	
	margin-top: -21px;
	*margin: 0;
	background: url(../images/web/bg-catlist.jpg) repeat-y;
	
	position: relative;
	*position: static;
}
	#catList h3 {
		background: url(../images/web/categories.gif) no-repeat;
		width: 180px;
		height: 36px;
		text-indent: -9999px;
		*margin-top: -3px;
	}
	
	#catList ul {
		margin-top: 1em;
		list-style: none;
		font-weight: bold;
		line-height: 1.1;
		padding-right: 10px;
	}
		#catList ul li {
			margin-bottom: 5px;
			*position: static;
			*margin-left: 20px;
		}
		
		#catList ul li a {
			color: #fff;
			text-decoration: none;
		}
			#catList ul li a:hover {
				text-decoration: underline;
			}

body.catalog #innerContent{
	width: 573px;
	margin-left: 12px;
}

#productThumbs {
	border: 1px solid #bdd2b4;
	border-top: 0;
	padding-bottom: 1em;
	background: #fff url(../images/web/cat-gradient.jpg) repeat-x top;
}

	#productThumbs h3 a {
		width: 291px;
		height: 36px;
		background: url(../images/web/learn-more.gif) no-repeat;
		overflow: hidden;
		text-indent: -9999px;
		float: left;
		_display: inline;
	}


	#productThumbs #search {
		background: url(../images/web/bg-cat-search.jpg) no-repeat right;
		height: 28px;
		padding-top: 8px;
		width: 280px;
		float: left;
		_display: inline;
		position: relative;
	}
		#productThumbs #search label {
			color: #274678;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 90%;
		}
		
		#productThumbs #search input {
			width: 180px;
			}
			
			#productThumbs #search #Search_Text1_Submit {
				position: absolute;
				right: 6px;
				top: 10px;
				width: 22px;
			}
	
	#productThumbs h4 {
		padding: 1em 0 0 1em;
		clear: both;
		font-size: 105%;
		color: #5e6162;
		text-transform: uppercase;

	}
	
	#productThumbs dl {
		width: 120px;
		float: left;
		_display: inline;
		margin: 1em 11px;
		height: 14em;
		_height: 16em;
		position: relative;
		padding-top: 125px;
		font-size: 90%;
		color:#5e6162;
	}
		#productThumbs dl a {
			color: #5e6162;
			text-decoration: none;
			font-weight: bold;
		}
	
		#productThumbs dd,
		#productThumbs dt {
			text-align: center;
		}
		
		#productThumbs dd.image {
			position: absolute;
			top: 0;
			left: 2px;
			}
	
			#productThumbs img {
				display: block;
				width: 120px;
				height: 120px;
			}
			
				#productThumbs dd.image a {
					display: block;
					width: 120px;
					height: 120px;
					border: 1px solid #ccc;
				}
					#productThumbs dd.image a:hover {
						border: 1px solid #0099cc;
						}
						
		#productThumbs dd.addcart a {
			display: block;
			background: url(../images/web/addtocart-sm.gif);
			width: 79px;
			height: 12px;
			text-indent: -9999px;
			overflow: hidden;
			margin: .5em auto;
		}

.paging {
	clear: both;
	font-weight: bold;
	font-size: 90%;
	color: #5e6162;
	padding: .2em 1em;
}
	.paging a {
		color: #507abf;
	}
	
/* product page */
	
#product {
	width: 350px;
	float: left;
	margin-top: 1em;
}

#prodImages {
	width: 300px;
	float: right;
}
	#prodImages p {
		margin-bottom: 1em;
	}
	
	#prodInfo {
		margin: 1em 0;
		font-size: 90%;
	}
	
	#prodInfo li {
		padding: .2em 0;
		}
		
		#prodInfo table {
			border-collapse: collapse;
			padding: 0;
			margin: 0;
		}
	
	#prodOptions dl {
		margin-left: 1em;
	}
		#prodOptions dt {
			font-weight: bold;
			float: left;
		}
		
		#prodOptions dt,
		#prodOptions dd {
			
		}
		#prodImages img {
			border: 1px solid #ccc;
			}
			
			img#thumb1, img#thumb2, img#thumb3, img#thumb4 {
				margin-right: 5px;
				width: 60px;
				height: 60px;
				cursor: pointer;
				border: 0;
			}
		
		#txtQuantity {
			width: 30px;
			margin-bottom: .2em;
		}

#prodRelated {
	clear: both;
	padding-top: 1em;
}
	#prodRelated ul {
		list-style: none;
	}
		#prodRelated ul li {
			margin: 1em 2em;
			}
ul#checkout {
	margin: 1em 0;
	margin-lefT: -20px;
}

	ul#checkout li {
		display: inline;
		list-style: none;
	}
	
	ul#checkout input {
		border: 0;
		_text-indent: 20px;
		_position: relative;
		_left: -10px;
	}

td {
	padding: .2em;
}
	
table#dgCart {
	border: 0;
}

#ContentTable td.CartHeading {
	border-right: 0;
}
	
td.CartHeading {
	font-weight: bold;
	font-size: 1.1em;
	border-bottom: 1px solid #ccc;
	border-right: 2px solid #ccc;
	padding-left: 5px;
}

tr.CartItem:hover {
	background: #fffafd;
}

.CartItem td {
	border-right: 2px solid #ccc;
	border-top: 1px solid #ccc;
}
	.CartItem td span.prodName,
	.CartItem td a {
		text-align: left;
		}


#Totals {
	padding: 1em;
	font-size: 110%;
	font-weight: bold;
}

p#formSubmit {
	text-align: center;
	padding: 1em;
}

/* error */
#Problem {
	color: #f00;
}
#tblPayment ul,
#ValidationSummary ul{
	display: block;
	list-style: none;
	color: #f00;
	border: 1px solid #ccc;
	padding: .5em;
	background: #fdf8fb;
	
}
	#ValidationSummary ul {
		width: 300px;
		padding: .6em;
		margin: 0 auto;
		font-size: 85%;
	}
	
#invoice {
	width: 600px;
	margin: 1em auto;
	background: #E8F5FD;
	padding: 1em;
	border: 1px solid #ccc;
}

#thanks {
	text-align: center;
}

#content p.errorpage {
	text-align: center;
	padding: 5em;
}

td.CartTitle em {
	font-size: 85%;
	line-height: 1;
	font-style:normal;
}

body.payment #innerContent {
	min-height: 550px;
}

/* ------------------------ 
		Join
------------------------ */

body.join #formtest {
	width: 602px;
	margin: 0 auto;
}

body.join table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}
body.join #innerContent fieldset {
	border: 0;
	margin: .2em 0;
	padding: 1em;
}
	body.join #innerContent legend {
		display: none;
	}
	
	body.join #innerContent fieldset fieldset legend {
		position: relative;
		margin-left: -10px;
		display: inherit;
		font-weight: bold;
		color: #333;
		display: block;
	}
	
	body.join #innerContent label {
		display: block;
		font-size: 90%;
	}
	
	body.join #Email {
		width: 200px;
	}
	
	#Prefix {
		width: 30px;
	}
	
	#Middle {
		width: 60px;
	}
	
	#City, #City2 {
		width: 100px;
	}
	
	#Zip, #Zip2 {
		width: 80px;
	}
	
	#State, #State2 {
		width: 50px;
	}
	
	#AreaCode, #AreaCode2, #AreaCode3, #AreaCode4,
	#Ext, #Ext2, #Ext3, #Ext4 {
		width: 55px;
	}
	
	#webaddress {
		width: 250px;
	}

body.join fieldset p span {
	color: #f00;
}

#summary {
	font-size: 90%;
}

#comments {
	margin-bottom: 1em;
}

body #innerContent #dgSearchReturn label {
	displaY: inline;
}

p.note {
	text-align: right;
	font-size: 85%;
	color: #666;
	padding-right: 75px;
}

/* ------------------------ 
	contact form
------------------------ */

body.contact #innerContent fieldset {
	border: 0;
	margin: 1em 0;
}

	body.contact #innerContent legend {
		display: none;
	}

body.contact #innerContent label {
	display: block;
	width: 158px;
	text-align: right;
	margin-top: -5px;
}
		body.contact #innerContent label.required {
			font-weight: bold;
		}

body.contact #innerContent input, 
body.contact #innerContent select,
body.contact #innerContent textarea {
	margin-left: 165px;
	position: relative;
	top: -1.6em;
	*top: -1.9em;
	height:16px;
	width: 210px;
	font-size: 10px;
	border: 1px solid #b7baba;
}

body.contact #innerContent select {
	height: auto;
	top: -.8em;
}

body.contact #innerContent textarea {
	height: 78px;
}

	body.contact #innerContent input:focus,
	body.contact #innerContent textarea:focus {
		font-weight: bold;
		border: 1px solid #666;
	}

body.contact #innerContent input#btnSubmit{
	
	padding: 0;
	display: block;
	margin-top: 2em;
	width: 85px;
	height: 30px;
	border: 0;
	margin-left: 165px;
}
	
#summary {
	width: 98%;
	border: 1px solid #b7baba;
	padding: 1em;
	margin: 0 1em 1em 1em;
	background: #fff;
}
	#summary ul {
		padding-left: 1em;
	}


/* ------------------------ 
		footer
------------------------ */
#footer {
	background: url(../images/web/bg-footer.gif) no-repeat bottom;
	height: 41px;
	color: #fff;
	text-align: center;
	font-size: 90%;
	clear: both;
}
	#footer p {
		padding-top: 12px;
	}
	
	#footer a  {
		color: #fff;
	}
	
/* ------------------------ 
		EASY CLEARING 
------------------------ */

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {
height:1%;
}
*+html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* End hide from IE-mac */
/* ------------------------ 
 		sifr 
	.sIFR-active
------------------------ */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
	visibility: visible !important;
}

span#heading span.sIFR-alternate,
.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}