/* CSS DOCUMENT */
* 	{ margin: 0; padding: 0;}
html { min-height: 100%; margin-bottom: 1px; }
img, a img	{ border: 0; }

body { font-size: 14px; font-family: arial, helvetica, sans-serif; text-align: center; color: #333; background: #fff url(../images/bg.jpg) repeat-x 50% 0; margin: 0 0 50px;}
table, th, td { font-size: 14px; font-family: arial, helvetica, sans-serif; color: #333;}

#skip	{ display: none;}

a:link, a:visited	{ color: #4b7055; text-decoration: underline;}
a:hover		{ color: #6db43f; text-decoration: none;}

/* HEADER */
#bg_home	{ background: url(../images/bg_content_home.jpg) no-repeat 50% 180px; height: 690px;}
#bg_sub		{ background: url(../images/bg_content_sub.jpg) no-repeat 50% 180px; height: 690px;}
#container	{ position: relative; width: 760px; margin: 0 auto; text-align: left; }
#header		{ position: relative; height: 180px;}
	.callus	{ position: absolute; top: 60px; left: 300px; font-size: 18px; letter-spacing: -1px;}

/* NAVIGATION
------------------------------------------------------------------------------------- */
#nav { position: absolute; bottom: 0; left: 0; height: 48px; background: #33503d; }
#nav li { float: left; position: relative; font-size: 15px; list-style: none; height: 48px; }
#nav li a { cursor: pointer; position: relative; height: 48px; color: #fff; display: block; text-decoration: none; outline: none; }
#nav li strong { position: absolute; top: 0px; left: 0px; display: block; height: 48px; }
#nav li, #nav li a, #nav li strong { background-image: url(../images/nav.gif); }

#nav li.home, #nav li.home a, #nav li.home a strong							{ background-position: 0 0; width: 70px; }
#nav li.about, #nav li.about a, #nav li.about a strong							{ background-position: -70px 0; width: 99px; }
#nav li.products, #nav li.products a, #nav li.products a strong					{ background-position: -169px 0; width: 99px; }
#nav li.certification, #nav li.certification a, #nav li.certification a strong	{ background-position: -268px 0; width: 125px; }
#nav li.links, #nav li.links a, #nav li.links a strong							{ background-position: -393px 0; width: 67px; }
#nav li.articles, #nav li.articles a, #nav li.articles a strong					{ background-position: -390px 0; width: 90px; }
#nav li.contact, #nav li.contact a, #nav li.contact a strong					{ background-position: -393px 0; width: 111px; }

/* HOVER STATE */
#nav li.home, #nav li.home a:hover strong					{ background-position: 0 -48px; width: 70px; }
#nav li.about, #nav li.about a:hover strong					{ background-position: -70px -48px; width: 99px; }
#nav li.products, #nav li.products a:hover strong			{ background-position: -169px -48px; width: 99px; }
#nav li.certification, #nav li.certification a:hover strong	{ background-position: -268px -48px; width: 125px; }
#nav li.links, #nav li.links a:hover strong					{ background-position: -393px -48px; width: 67px; }
#nav li.articles, #nav li.articles a:hover strong			{ background-position: -390px -48px; width: 90px; }
#nav li.contact, #nav li.contact a:hover strong				{ background-position: -393px -48px; width: 111px; }

/* ON STATE */ 
#nav li.homeon a, #nav li.homeon a strong					{ background-position: 0 -96px; width: 70px; }
#nav li.abouton a, #nav li.abouton a strong					{ background-position: -70px -96px; width: 99px; }
#nav li.productson a, #nav li.productson a strong			{ background-position: -169px -96px; width: 99px; }
#nav li.certificationon a, #nav li.certificationon a strong	{ background-position: -268px -96px; width: 125px; }
#nav li.linkson a, #nav li.linkson a strong					{ background-position: -393px -96px; width: 67px; }
#nav li.articleson a, #nav li.articleson a strong			{ background-position: -390px -96px; width: 90px; }
#nav li.contacton a, #nav li.contacton a strong				{ background-position: -393px -96px; width: 111px; }

/* HOME page */
#h_content	{ position: relative; padding: 40px 0 0; font-size: 16px; font-family: helvetica, arial, sans-serif;  }
	#h_content h1	{ font-size: 18px; color: #000;}
	#h_content h1 b	{ color: #334e3c;}
	#h_content p	{ position: absolute; top: 80px; left: 290px; width:460px; z-index: 10;}
	#h_content img	{ float: left; z-index: 1;}
	
.h_products	{ margin: 0 0 30px; clear: both;  background: #fff9a5; height: 1%;}
.h_products p	{ padding: 15px; border-bottom: 2px solid #fffabb; background: #fffcd1; }

.h_benefits, .h_ideal, .h_biodegradable	{ float: left; display: inline; width: 280px; margin-right: 15px;}
.h_ideal			{ width: 200px;}
.h_biodegradable	{ width: 250px; margin: 0 0 30px;}

	.checked	{ position: relative; padding: 0 0 15px; }
	.checked li	{ list-style: none; padding: 0 0 10px 20px; background: url(../images/icon_check.gif) no-repeat 0 1px;}

#footer	{ background: url(../images/logo_foot.gif) no-repeat 0 10px; font-size: 11px; color: #666; padding: 15px 0 50px 100px; border-top: 1px solid #e6f0dc; clear: both; line-height: 18px; }
	#footer p	{ color: #c0cab5; text-transform: uppercase; }
	#footer b	{ color: #666;}
	#footer a	{ text-decoration: none; }
	#footer a:hover	{ text-decoration: underline; }
	
/* SUB page */

#subnav	{ margin: 4px 0 0; height: 28px;}
#subnav li	{ float: left; list-style: none; font-size: 12px; text-transform: uppercase; font-weight: bold;}
#subnav li a:link, #subnav li a:visited	{ display: block; float: left; height: 28px; line-height: 28px; padding: 0 8px; text-decoration: none; background: url(../images/subnav_arrow.gif) no-repeat 2px 11px; color: #4b7055;}
#subnav li a:hover	{ background: #eef7e7 url(../images/subnav_arrow.gif) no-repeat 2px 11px;}
#subnav li.on	{ height: 28px; line-height: 28px; padding: 0 8px; color: #666; background: #d9d9d9 url(../images/subnav_arrow_on.gif) no-repeat 2px 11px;}

#content	{ padding: 30px 0; font-size: 14px;}
#content p	{ padding: 0 0 15px; line-height: 22px; }
#content ul, #content ol	{ padding: 0 20px 15px;}

#content a:visited	{ color: #666; text-decoration: underline;}

.s_col	{ float: left; width: 250px; margin: 0 0 20px; }
	.s_col1	{ float: left; display: inline; width: 450px; margin: 0 20px 20px 0; border-right: 3px solid #CDD0C5; }
	.s_col1 .floatright	{ display: inline; margin-right: 20px;}
	.s_col2	{ float: left; width: 250px; margin: 0 0 20px; }

.product_item	{ float: left; display: inline; margin: 0 25px 20px 0;}
	.product_item img	{ margin: 0 0 5px; border: 3px solid #31533A;}


.highlight	{ padding: 10px; margin: 0 0 15px; background: #fffcd1; border: 1px solid #efe770;}
	.highlight h2	{ padding: 0; }


.sitemap li		{ font-weight: bold;  padding: 0 0 5px;}
	.sitemap li li	{ font-weight: normal; }
	.sitemap ul		{ padding: 5px 20px !important;}

.productimg	{ position: relative; float: right; margin: 0 0 20px 20px; width: 406px; height: 366px; background:transparent ; z-index:1;}
	.productimg img	{ border: 3px solid #31533A;}
	img.productimg	{ float: right; margin: 0 0 20px 20px; width: auto; height: auto; border: 3px solid #31533A;}

a.gallery, a.gallery:visited {display:block; text-decoration:none !important; width:80px; height:70px; margin:0 3px 0 0; float:left; color: #333;}
a.yardbag1 { background:url(../images/prod_bagtie.jpg) -150px -60px;}
a.yardbag2 { background:url(../images/prod_bagedge.jpg) -190px -90px;}
a.yardbag3 { background:url(../images/prod_yardbag2.jpg) -120px -50px;}

a.thmb3 { background:url(../images/prod_nurserypot2.jpg) -00px -40px;}

a.canliner1 { background:url(../images/prod_canliner2.jpg) -100px -60px;}
a.canliner2 { background:url(../images/prod_canliner3.jpg) -100px -60px;}

a.compostbag1 { background:url(../images/prod_dirtbag2.jpg) -150px -60px;}
a.compostbag2 { background:url(../images/prod_dirtbag3.jpg) -190px -130px;}

a.kitchenbag1 { background:url(../images/prod_kitchenbag2.jpg) -160px -40px;}
a.kitchenbag2 { background:url(../images/prod_kitchenbag3.jpg) -180px -70px;}

a.gallery span		{ display:block; position:absolute; left:0; top: 0; width:0px; height:0px; overflow:hidden; z-index:100; background: #fff;}
a.gallery:hover 	{ white-space:normal; text-decoration:none; color: #333; }
a.gallery:hover img { z-index:100;}
a.gallery:active img, a.gallery:focus img {z-index:50;}

a.gallery:hover span {display:block; position:absolute; width:406px; height:290px; top:-296px; left:0; z-index:100; }
a.gallery:active, a.gallery:focus { text-decoration:none !important;}
a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:406px; height:290px; top:-296px; left:0; z-index:50;}

#thumbs { position: absolute; bottom: 0; left: 0;}




/* MISC*/

.input	{ padding: 2px; border: 1px inset #999;}
.clear		{ clear: both; height: 1px; font-size: 1px;}
.floatright	{ float: right; margin: 0 0 10px 15px; clear: right;}
.floatleft	{ float: left; margin: 5px 15px 10px 0;}

.backtotop a	{ font-size: 11px;}
.confirm	{ color: #0C860B;}

hr	{ height: 1px; border: 0; background: #ddd; color: #ddd; margin: 0 0 15px; clear: both; }

small	{ font-size: 11px; line-height: 120%;}

h1	{ font-size: 24px; line-height: 26px; font-weight: normal; letter-spacing: -1px; padding: 0 0 10px; font-family: helvetica, arial, sans-serif;}
h2	{ font-size: 18px; font-weight: normal; padding: 0 0 10px;}
h3	{ font-size: 13px; color: #666; padding: 0 0 5px;}