body {background: url(../img/back.png) top left repeat-x}
#masthead, #mid, #footer {width: 900px; float: left;}
.wrapper {
	position: relative;
	width: 900px;
	margin: 0 auto;
}
#masthead {
	height: 290px;
}
#mid {
}
#footer {
	margin-top: 15px;
	margin-bottom: 10px;
}

ul#nav {
	float: left;
	width: 235px;
	margin-left: 10px;
}
#content {
	float: left;
	width: 650px;
	margin-top: 5px;
}

/****** TYPOGRAPHY AND DESIGN *****/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	line-height: 18px;
}
strong {font-weight: bold}
p {clear: both;}
a {text-decoration: none;}

.green {color: #49a842;}
.emph {color: #000;}

#content h2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 21px;
	margin-bottom: 20px;
	color: #49a842;
}

#content p a { color:#49a842;}

#content p, #content ul, #content ol {margin-bottom: 21px;}

#content ul li {
	list-style-type: disc;
	list-style-position: inside;
}

a.view span, a.details span, a.upload span, a.back span {visibility: hidden;}

hr {width: 635px; height: 10px; background: url(../img/grass.png) center center; float: left; border: none; margin-bottom: 21px; clear: both;}

#content ol {
	list-style-type: decimal;
	padding-left: 20px;
} #content ol li {margin-bottom: 9px;}

/****** MASTHEAD ******/
#masthead .left, #masthead .right {float: left; height: 290px;}
#masthead .left {width: 310px;}
	#masthead .left .sunmato  {
		display: block;
		height: 40px;
		width: 220px;
		position: absolute;
		top: 0;
		left: 29px;
		background: url(../img/mast_sunmato.png) top left no-repeat;
	}
	#masthead .left h1 a {
		display: block;
		height: 149px;
		width: 286px;
		background: url(../img/logo.png) top left no-repeat;
		margin: 87px 0 0 12px;
	} #masthead .left h1 span {visibility: hidden;}
#masthead .right {
	width: 590px;
	background: url(../img/home_mast_banner.png);
}
#why-bn #masthead .right {background: url(../img/why_mast_banner.png);}
#products #masthead .right, #singleprod #masthead .right {background: url(../img/prod_mast_banner.png);}
#about #masthead .right {background: url(../img/about_mast_banner.png);}
#testimonials #masthead .right {background: url(../img/test_mast_banner.png);}
#news #masthead .right {background: url(../img/news_mast_banner.png);}
#resources #masthead .right {background: url(../img/res_mast_banner.png);}
#locator #masthead .right {background: url(../img/where_mast_banner.png);}
#contact #masthead .right {background: url(../img/contact_mast_banner.png);}

/******** NAVIGATION *********/
#nav a {
	display: block;
	width: 210px;
	height: 27px;
} #nav span {visibility: hidden;}
#nav li {margin-bottom: 8px;}

#nav .whybn {background: url(../img/navigation.png) 0 0 no-repeat;}
#nav .products {background: url(../img/navigation.png) 0 -35px no-repeat;}
#nav .about {background: url(../img/navigation.png) 0 -70px no-repeat;}
#nav .testimonials {background: url(../img/navigation.png) 0 -105px no-repeat;}
#nav .newspress {background: url(../img/navigation.png) 0 -140px no-repeat;}
#nav .locator {background: url(../img/navigation.png) 0 -175px no-repeat;}
#nav .resources {background: url(../img/navigation.png) 0 -210px no-repeat;}
#nav .contact {background: url(../img/navigation.png) 0 -245px no-repeat;}

#nav a.whybn:hover, #why-bn a.whybn {background-position: -210px 0;}
#nav a.products:hover, #products a.products, #singleprod a.products {background-position: -210px -35px;}
#nav a.about:hover, #about a.about {background-position: -210px -70px;}
#nav a.testimonials:hover, #testimonials a.testimonials {background-position: -210px -105px;}
#nav a.newspress:hover, #news a.newspress {background-position: -210px -140px;}
#nav a.locator:hover, #locator a.locator {background-position: -210px -175px;}
#nav a.resources:hover, #resources a.resources {background-position: -210px -210px;}
#nav a.contact:hover, #contact a.contact {background-position: -210px -245px;}

/******** MID *********/
#content .full {
	float: left;
	width: 650px;
}
#content .main {
	float: left;
	width: 415px;
	padding-right: 15px;
	border-right: 1px solid #a3d4a0;
        min-height: 700px;
}
#content .right {float: left; width: 193px; padding-left: 23px;}
#content .third {width: 206px; float: left}
#content .thirdpad {padding: 0 16px;}
#content .third ul {padding-left: 20px;}
#content .third ul li {list-style-position: outside; margin-bottom: 18px;}
#content .half {width: 325px; float: left;}
#content .half2 {width: 216px; float: left;}
#content .half3 {width: 130px; float: left;}

	/****** TESTIMONIALS *******/
	#content .right .testimonial {
		float: left;
		margin-bottom: 30px;
		width: 190px;
	}
	#content .right .testimonial span {
		display: block;
	}
	#content .right .testimonial span a {color: #49a842; text-transform: uppercase;}
	#content .right .testimonial span a:hover,
	#content .right .testimonial span a:active {text-decoration: underline;}
	#content .right .testimonial .quote {
		font-family: "Times New Roman", Times, serif;
		font-size: 21px;
		line-height: 26px;
		font-style: italic;
		margin-bottom: 15px;
	}

#content .bottom {
	float: left;
	width: 640px;
	height: 160px;
}
	#content .bottom .box {float: left; width: 213px; height: 160px;}
	#content .bottom .box span {visibility: hidden;}
	#content .bottom .one {background: url(../img/bettersoil.jpg) center center no-repeat;}
	#content .bottom .two {background: url(../img/betterresults.jpg) center center no-repeat;}
	#content .bottom .three {background: url(../img/betterwater.jpg) center center no-repeat;}


/****** FOOTER *****/
#footer .rhizogen {
	float: left;
	display: block;
	height: 49px;
	width: 181px;
	background: url(../img/rhizogen.png) top left no-repeat;
} .rhizogen span {visibility: hidden;}
#footer .inside {
	float: left;
	width: 640px;
	margin-left: 63px;
	background: url(../img/grass.png) top left no-repeat;
	padding-top: 20px;
}
#footer .inside ul {margin-bottom: 5px; display: inline-block; clear: both;}
#footer .inside ul li {display: inline-block; float: left; padding:0 1px;}
#footer .inside a {color: #333; text-decoration: none; text-transform: lowercase;}
#footer .inside a:hover, #footer .inside a:active {text-decoration: underline;}
#footer .copyright, #footer .copyright a {color: #999}
#footer .copyright {display: block;}

/* @once Why BN */
#why-bn h2.better-soil, #why-bn h2.better-results, #why-bn h2.better-water {height: 150px; width: 206px; margin-bottom: 5px;}
#why-bn h2.better-soil span, #why-bn h2.better-results span, #why-bn h2.better-water span{visibility: hidden;}
#why-bn h2.better-soil {background: url(../img/bettersoil.jpg) center center no-repeat;}
#why-bn h2.better-results {background: url(../img/betterresults.jpg) center center no-repeat;}
#why-bn h2.better-water {background: url(../img/betterwater.jpg) center center no-repeat;}

/* @once Products */
#content .product {height: 211px; margin-bottom: 95px; position: relative;}
#content .lawnfood {background: url(../img/prod_lawnfood.png) top left no-repeat;}
#content .organic {background: url(../img/prod_gardenfood.png) top left no-repeat;}
#content .potting {background: url(../img/prod_pottingsoil.png) top left no-repeat;}
#content .tree {background: url(../img/prod_tree.png) top left no-repeat;}
#content .flower {background: url(../img/prod_flower.png) top left no-repeat;}
#content .allpurp {background: url(../img/prod_allpurpose.png) top left no-repeat;}
#content .palm {background: url(../img/prod_palm.png) top left no-repeat;}
#content .tomato {background: url(../img/prod_tomato.png) top left no-repeat;}

#content .product span, #content .product input {font-weight: bold; display: block;}
#content .product .info {width: 200px; top:210px; display: block; position: absolute; right: 0; bottom: 0;}
#content .product .info2 {width: 140px; top:180px; display: block; position: absolute; left:15px; right: 0; bottom: 0;}
#products .right .howitworks {width: 182px; height:274px; margin-bottom: 18px;}
#products .right ul {margin-left: 15px;}
#products .right ul li {list-style-position: outside; font-style: italic; margin-bottom: 18px;}
#products .product .info a.view {
	display: block;
	margin-top: 3px;
	height: 25px;
	width: 100px;
	background: url(../img/button_view.png) 0 0;
}
#products .product .info a.view:hover, #products .product .info a.view:active {background-position: -101px 0;}

#products .product .info2 a.view {
	display: block;
	margin-top: 3px;
	height: 25px;
	width: 100px;
	background: url(../img/button_view.png) 0 0;
}
#products .product .info2 a.view:hover, #products .product .info a.view:active {background-position: -101px 0;}



#singleprod h2 {line-height: 21px}
#singleprod .props_lawn, #singleprod .props_soil {margin-top: 15px;	width: 650px;height: 181px;}

#singleprod .main a, #singleprod .full a {color: #333;}
#singleprod .main a:hover, #singleprod .main a:active,
#singleprod .full a:hover, #singleprod .full a:active  {text-decoration: underline;}

a.details {
	display: block;
	height: 25px;
	width: 121px;
	background: url(../img/button_details.png) 0 0;
} a.details:hover, a.details:active {background-position: -121px 0; text-decoration: none !important;}

 a.back {
	display: block;
	height: 25px;
	width: 61px;
	background: url(../img/button_back.png) 0 0;
} a.back:hover, a.back:active {background-position: -61px 0; text-decoration: none !important;}

/* @once Testimonials */
a.upload {
	display: block;
	height: 25px;
	width:141px;
	background: url(../img/button_upload.png) 0 0;
} a.upload:hover, a.upload:active {background-position: -141px 0;}

/* @once News and Press */
#news #content li {background: url(../img/strawdot.png) left 6px no-repeat; padding-left: 18px; list-style-type: none; margin-bottom: 9px;}
#news #content li a {color: #333; font-weight: bold;}
#news #content li a:hover, #news #content li a:active {text-decoration: underline;}

/* @once Resources */
#resources #content li {margin-bottom: 9px; list-style-type: none;}
#resources #content li a {color: #49a842;}
#resources #content li a:hover, #resources #content li a:active {text-decoration: underline;}
#resources #content strong {font-weight: normal}

/* @once Locator */
#locator form {margin-bottom: 18px;}
#map {height: 320px; width: 630px; border: 1px solid #a3d4a0}
#locator form .button {
	border: none;
	background: url(../img/button_locate.png) no-repeat top left;
	padding: 2px 8px;
	height: 25px;
	width: 121px;
	text-indent: -8888px;
	margin-left: 5px;
}

/* @once Contact */
#contact .right a {color: #333;}
#contact .right a:hover, #contact .right a:active {text-decoration: underline;}

input, select { padding: 2px; background-color:#e7efbb; font-size: 11px; border: 1px solid #808080; }
textarea      { padding: 2px; background-color:#e7efbb; font-size: 11px; border: 1px solid #808080; }