/*** Stylesheet for Natures Cover Designed by Blue Banana Designs 6-15-2006 ***/
/*** ELEMENTS ***/
html {
	margin: 0;
	padding: 0;
}

body {
	background-color: #977902;
	color: #000;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 100%;
	margin: 5px auto 0;
	padding: 0;
	text-align: center; /* IE Win 5.x */
}

p,blockquote,div,span,h1,h2,h3,h4,h5,h6,table,tr,td,th,ul,ol,li,form,a {
	margin: 0;
	padding: 0;
}

/* ----- Base font sizes ------ */
p,td,ul,ol,dl {
	font-size: .8em;
}
ul {
	margin: 0 0 5px 15px;
	padding: 0 0 0 15px;
}

li {
	padding-bottom: 6px;
}

blockquote {
	margin-left: 40px;
	margin-right: 40px;
}

dd {
	margin: 0 0 8px 15px;
}

dt {
	background-color: #fff;
	color: #314594;
	font-weight: bold;
}

h1 {
	background: #fff;
	color: #196121;
	font: normal bold small-caps 1.4em/1.2em 'new york',georgia,times,timesNR,serif;
	height: auto;
	letter-spacing: .4em;
	margin: 0px 0px 0px 0px;
	padding: 0;
}

h2 {
	background-color: #fff;
	color: #4C9454;
	font: bold 1.3em/1.2em arial,helvetica,sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0;
}

h3 {
	background-color: #fff;
	color: #1F7929;
	font: normal bold 1em/1.2em arial,verdana,helvetica,sans-serif;
	margin: 0px 0 3px 0;
	padding: 0;
}

h4 {
	background-color: #fff;
	color: #655101;
	font: normal bold .9em/1.2em arial,verdana,helvetica,sans-serif;
	margin: 16px 0 6px 0;
	padding: 0;
	text-transform: capitalize;
}

h5 {
	background-color: #fff;
	color: #196121;
	font: normal bold .8em/1.2em arial,verdana,helvetica,sans-serif;
	margin: 14px 0 4px 0;
	padding: 0;
	text-transform: capitalize;
}

ul,ol {
	margin: 8px 0px 8px 40px;
}

p {
	margin: 0px 0 8px 0;
}
p.initial-para {
	padding-top: 0px;
}
body#home p.initial-para {
	padding-top: 5px;
}
p.initial-para:first-letter {
	float: left;
	font-weight: normal;
	font-size: 400%; /* IE Win 5.5 */
	fo\nt-size: 490%;
	color: #CAA202;
	background-color: #fff;
	font-family: Georgia,'times new roman',timesNR,serif;
	padding: 0;
	margin: -12px 2px -15px 0px;
}

a {
	background-color: #fff;
	color: #1F7929;
}

a:link {
	background-color: #fff;
	color: #1F7929;
}

a:visited {
	background-color: #fff;
	color: #666666;
}

a:hover {
	text-decoration: none;
}

a:active {
	background-color: #fff;
	color: #1F7929;
}

/* ---- Non-form button --- */
a.button {
	background-color: #1F7929;
	border-bottom: 1px solid #000;
	border-left: 1px solid #79AF7F;
	border-right: 1px solid #000;
	border-top: 1px solid #79AF7F;
	color: #FDD535;
	font: bold .9em/120% Verdana,Geneva,Arial,Helvetica,sans-serif;
	padding: 3px 5px 4px 5px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}

a.button:link {
	background-color: #1F7929;
	color: #FDD535;
}

a.button:visited {
	background-color: #1F7929;
	color: #FDD535;
}

a.button:hover {
	background-color: #1F7929;
	color: #fff;
}

a.button:active {
	background-color: #1F7929;
	color: #FDD535;
}
p.button-container {
	padding:20px;
}

hr {
	background-color: #fff;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #4C9454;
	border-left: none;
	color: #4C9454;
	height: 1px;
}

hr.dashed {
	border-bottom: 2px dashed #4C9454;
	height: 2px;
}

hr.dotted {
	border-bottom: 2px dotted #4C9454;
	height: 2px;
}

/*** POSITIONING ***/
#page-wrapper {
	background: url(../images/navs/bgd-tiles.jpg) #fff 0px 170px repeat-y;
	color: #000;
	margin: 0px auto;
	text-align: left;
	width: 740px;
	border-bottom:1px solid #134919;
}

#masthead {
	height: 100px;
	width: 740px;
	color: #000;
	background-color: #977902;
	border-bottom: 5px solid #977902;
}

#masthead img {
	border: none;
}

#right-column {
	float: right;
	margin-bottom: 20px;
	padding-top: 24px;
	text-align: left;
	width: 590px;
	border-top: 1px solid #134919;
}

#left-column {
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
	width: 150px;
	border-top: 1px solid #134919;
}

/* Apply Holly Hac to zap IE/Win Peekaboo bug. This will cascade to the nested ULs. */
/* Hides from IE5-mac \*/
* html #right-column {
	height: 1%;
}
/* End hide from IE5-mac */

#content {
	padding: 0px 30px;
}

/* ---- Masthead Photos ---- */
#masthead {
	background-position:right;
	background-repeat:no-repeat;
}
body#home #masthead {
	background-image: url(/images/masthead/photos/photo_08.jpg);
}
body#products #masthead {
	background-image: url(/images/masthead/photos/photo_04.jpg);
}
body#howTos #masthead {
	background-image: url(/images/masthead/photos/photo_06.jpg);
}
body#calculationGuide #masthead {
	background-image: url(/images/masthead/photos/photo_03.jpg);
}
body#faq #masthead {
	background-image: url(/images/masthead/photos/photo_01.jpg);
}
body#aboutUs #masthead {
	background-image: url(/images/masthead/photos/photo_05.jpg);
}
body#contactUs #masthead {
	background-image: url(/images/masthead/photos/photo_07.jpg);
}

/* h1 and h2 tags format page titles and subtitles */
#page-title {
	border-bottom: 1px solid #977902;
	height: auto;
	margin: 0px 0 20px 0px;
	padding: 5px 0 5px 0;
}

/*** MAIN NAVIGATION ***/
#navs-main {
	background-color: #134919;
	color: #FDD535;
	margin: 0;
	padding: 0 0 5px 0;
	width: 150px;
}

html>body #navs-main {
	width: 150px; /* opera 5 */
}

#navs-main ul {
	margin: 0 0 0 -3px; /* shift for IE 5.5 */
	ma\rgin: 0 auto; /* hide from IE 5.5 */
	padding: 10px 0 0 0;
	width: 126px;
}

/* Apply Holly Hac to zap IE/Win Peekaboo bug. This will cascade to the nested ULs. */
/* Hides from IE5-mac \*/
* html #navs-main ul {
	height: 1%;
}
/* End hide from IE5-mac */

#navs-main ul li {
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0;
	width: 126px;
}

#navs-main ul li a {
	background-color: #1F7929;
	border: 1px solid #977902;
	color: #FDD535;
	display: block;
	font: bold 1em Arial, Helvetica, sans-serif;
	height: 100%;
	padding: 3px 5px 3px 5px;
	margin: 0;
	text-decoration: none;
}

#navs-main ul li a:link {
background-color: #1F7929;
color: #FDD535;
}

#navs-main ul li a:visited {
background-color: #1F7929;
color: #FDD535;
}

#navs-main ul li a:hover{
	background-color: #0C3010;
	color: #FDD535;
}

#navs-main ul li a:active {
background-color: #1F7929;
color: #FDD535;
}

/* ---- Active page:different glyph and color ----- */
#home #nav-home a,
#products #nav-products a,
#howTos #nav-howTos a,
#calculationGuide #nav-calculationGuide a,
#faq #nav-faq a,
#aboutUs #nav-aboutUs a,
#contactUs #nav-contactUs a {
	background-color: #FDD535;
	color: #134919;
}

/* ----- Navs:level 2 ----- */
#navs-main ul ul {
	margin: 0 0 0 -16px; /* shift for IE 5.5 */
	ma\rgin: 0 auto; /* hide from IE 5.5 */
	padding-top: 0px;
	width: 126px;
}
#navs-main ul ul li {
	margin-bottom: 0;
}

#home #nav-home ul li a,
#products #nav-products ul li a,
#howTos #nav-howTos ul li a,
#calculationGuide #nav-calculationGuide ul li a,
#faq #nav-faq ul li a,
#aboutUs #nav-aboutUs ul li a,
#contactUs #nav-contactUs ul li a {
	border-top:none;
	background-color: #FCCA03;
	color: #000;
	font-size: 1.2em;
	font-weight: normal;
}

#home #nav-home ul li a:hover,
#products #nav-products ul li a:hover,
#howTos #nav-howTos ul li a:hover,
#calculationGuide #nav-calculationGuide ul li a:hover,
#faq #nav-faq ul li a:hover,
#aboutUs #nav-aboutUs ul li a:hover,
#contactUs #nav-contactUs ul li a:hover {
	background-color: #CAA202;
	color: #000;
}
/* ---- Product Level 2 Navs: Active ---- */
#products.mulch #nav-products #nav2-mulch a,
#products.topsoil #nav-products #nav2-topsoil a,
#products.landscapeStone #nav-products #nav2-landscapeStone a,
#products.sandConstructionStone #nav-products #nav2-sandConstructionStone a,
#products.fieldStone #nav-products #nav2-fieldStone a,
#products.flagstoneAndSlate #nav-products #nav2-flagstoneAndSlate a,
#products.granite #nav-products #nav2-granite a,
#products.retainingWalls #nav-products #nav2-retainingWalls a,
#products.pavers #nav-products #nav2-pavers a,
#products.landscapeAccessories #nav-products #nav2-landscapeAccessories a,
#products.landscapeAccents #nav-products #nav2-landscapeAccents a,
#products.engraving #nav-products #nav2-engraving a,
#products.waterGardening #nav-products #nav2-waterGardening a,
#products.lawn #nav-products #nav2-lawn a,
#products.winter #nav-products #nav2-winter a,
#products.miscProducts #nav-products #nav2-miscProducts a {
	background-color: #FDDF68;
	color: #000;
}
/* ---- How To's Level 2 Navs: Active ---- */
#howTos.installFieldstone #nav-howTos #nav2-installFieldstone a,
#howTos.installRetainingBlock #nav-howTos #nav2-installRetainingBlock a,
#howTos.installFlagstonePaver #nav-howTos #nav2-installFlagstonePaver a,
#howTos.installLawn #nav-howTos #nav2-installLawn a {
	background-color: #FDDF68;
	color: #000;
}
/* ---- Navs Level 3 ---- */
#products.pavers #nav-products #nav2-pavers ul li a,
#products.retainingWalls #nav-products #nav2-retainingWalls ul li a {
	text-indent: 10px;
	font-size: 150%;
	background-color: #FEEA9A;
	color: #000;
}
#products.pavers #nav-products #nav2-pavers ul li a:link ,
#products.retainingWalls #nav-products #nav2-retainingWalls ul li a:link {
	background-color: #FEEA9A;
	color: #000;
}
#products.pavers #nav-products #nav2-pavers ul li a:visited,
#products.retainingWalls #nav-products #nav2-retainingWalls ul li a:visited {
	background-color: #FEEA9A;
	color: #000;
}
#products.pavers #nav-products #nav2-pavers ul li a:hover,
#products.retainingWalls #nav-products #nav2-retainingWalls ul li a:hover {
	background-color: #FDD535;
	color: #000;
}
#products.pavers #nav-products #nav2-pavers ul li a:active,
#products.retainingWalls #nav-products #nav2-retainingWalls ul li a:active {
	background-color: #FEEA9A;
	color: #000;
}

/* ---- Navs Level 3: Active ---- */
#products.pavers.unilock #nav-products #nav2-pavers #nav3-unilock a,
#products.pavers.lockPaver #nav-products #nav2-pavers #nav3-lockPaver a,
#products.pavers.kennedy #nav-products #nav2-pavers #nav3-kennedy a,
#products.pavers.hanson #nav-products #nav2-pavers #nav3-hanson a,
#products.retainingWalls.anchor #nav-products #nav2-retainingWalls #nav3-anchor a,
#products.retainingWalls.unilock #nav-products #nav2-retainingWalls #nav3-unilock a,
#products.retainingWalls.hanson #nav-products #nav2-retainingWalls #nav3-hanson a,
#products.retainingWalls.rockwood #nav-products #nav2-retainingWalls #nav3-rockwood a {
	text-indent: 10px;
	background-color: #fff;
	color: #000;
}


/*** BUTTONS ***/
input.form-button {
	background-color: #BA0000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #FF6262;
	border-right: 1px solid #000;
	border-top: 1px solid #FF6262;
	color: #FEDE58;
	font: bold .9em Verdana,Geneva,Arial,Helvetica,sans-serif;
}

/*** LISTS ***/
ul.standard-body-list {
	margin: 0 0 15px 15px;
	padding: 0 0 0 15px;
}

ul.standard-body-list li {
	padding-bottom: 8px;
}

ul.standard-body-list li ul {
	font-size: 100%;
	margin: 0 0 0px 0px;
	padding: 8px 0 0 15px;
}

#links-list ul {
	list-style-type: none;
	padding-bottom: 1em;
	padding-left: 2em;
	padding-top: .5em;
}

#links-list ul li {
	padding-bottom: .5em;
}

/*** 	FEATURE ***/
#feature {
	margin:0;
	padding:0;
}
#feature-image {
	float: left;
	margin: 0px 20px 10px 0;
	padding:0;
}
#feature-image img {
	border: 1px solid;
	margin: 0;
	padding:0;
}

#feature-text {
	float: right;
	width: 180px;
	margin:0;
	padding:0;
}

#feature-text h3 {
	margin: 0 0 5px 0;
	padding: 0;
}

.float-right {
	float: right;
	margin: 0 0 10px 20px;
}

.float-left {
	float: left;
	margin: 0 20px 10px 0;
}

/* ---- Callout ---- */
#callout {
	float: none;
	margin: 0;
	background: url(/images/callout-bgd.gif) #fff top repeat-x;
	border-bottom: 2px solid #314594;
	border-top: 2px solid #314594;
	color: #5A6AA9;
	font: bold 1.3em/1.4em 'new york',georgia,times,timesNR,serif;
	height: auto;
	padding: 0 0 20px 0;
	width: 200px;
}

#callout p {
	padding: 5px 10px 5px 10px;
}

/* ----Testimonials ---- */
#callout p.testimonial {
	margin: 8px 5px 0 5px;
}

#callout p.quoteeName {
	font-size: .65em;
	font-family: verdana,arial,sans-serif;
	font-weight: bold;
	line-height: normal;
	margin: 10px 5px 20px 5px;
}

#callout p.quoteeName span.quoteeLocation {
}

.callout-left {
	float: left;
	margin: 20px 20px 20px 0px;
}

.callout-right {
	float: right;
	margin: 20px 0px 20px 20px;
}

/* ---- Photos ---- */
.displayPhoto img {
	padding: 0;
	border: 1px solid #000;
}

/* ----- Pods ----- */
#pod190-column {
	margin:0;
	width:190px;
}
.pod190 {
	width: 190px;
	margin-bottom:10px;
	padding: 8px 0 0 0;
	background: url(/images/pods/pod190Top.gif) top no-repeat;
}

.pod190-title {
	text-transform: uppercase;
	margin: 0px 0 0 0;
	padding: 0px 0px 7px 10px;
	background: #A5C9A9 url(/images/pods/pod190Title.gif) top repeat-y;
	color: #134919;
	font: bold .7em verdana,sans-serif;
	border-bottom: 2px solid #4C9454;
}

.pod190-middle {
	background: url(/images/pods/pod190Mid.gif) top repeat-y;
	margin: 0;
	padding: 0;
}

.pod190 p {
	margin: 0;
	padding: 5px 10px;
	/*font: .7em arial,verdana,sans-serif;*/
}

.pod190-bottom {
	margin: 0;
	padding: 0;
	height: 8px;
	background: url(/images/pods/pod190Btm.gif) top no-repeat;
}

.pod320 {
	width: 320px;
	margin: 0 0 0 0;
	padding: 8px 0 0 0;
	background: url(/images/pods/pod320Top.gif) top no-repeat;
}

.pod320-title {
	text-transform: uppercase;
	margin: 0px 0 0 0;
	padding: 0px 0px 7px 10px;
	background: #A5C9A9 url(/images/pods/pod320Title.gif) top repeat-y;
	color: #134919;
	font: bold .7em verdana,sans-serif;
	border-bottom: 2px solid #4C9454;
}

.pod320-middle {
	background: url(/images/pods/pod320Mid.gif) top repeat-y;
	margin: 0;
	padding: 0;
}

.pod320 p {
	margin: 0;
	padding: 5px 10px;
}

.pod320-bottom {
	margin: 0;
	padding: 0;
	height: 11px;
	background: url(/images/pods/pod320Btm.gif) top no-repeat;
}

.pod530 {
	width: 530px;
	margin: 10px 0 0 0;
	padding: 8px 0 0 0;
	background: url(/images/pods/pod530Top.gif) top no-repeat;
}

.pod530-title {
	text-transform: uppercase;
	margin: 0px 0 0 0;
	padding: 0px 0px 7px 10px;
	background: #A5C9A9 url(/images/pods/pod530Title.gif) top repeat-y;
	color: #134919;
	font: bold .7em verdana,sans-serif;
	border-bottom: 2px solid #4C9454;
}

.pod530-middle {
	background: url(/images/pods/pod530Mid.gif) top repeat-y;
	margin: 0;
	padding: 0;
}

.pod530 p {
	/*font: .7em arial,verdana,sans-serif;*/
	margin: 0;
	padding: 5px 10px;
}

.pod530-bottom {
	margin: 0;
	padding: 0;
	height: 11px;
	background: url(/images/pods/pod530Btm.gif) top no-repeat;
}
/* ---- Product Display ---- */
.product-pod {
clear:both;
	margin:0;
	padding:10px 0;
	border-top:1px solid #ccc;
}
.product-pod img {
	border:1px solid #000;
	float:left;
	margin:0 10px 10px 0;
}
.product-pod-large {
text-align:center;
	padding:0;
}
.product-pod-large img {
	border:1px solid #000;
	margin:0px 0px 20px 0;
}
.product-pod-pic-spec {
clear:both;
width:100%;
	/*border:1px solid #ccc;*/
	padding:5px 0;
	margin:0px;
}
.product-pod-pic-spec img {
	border:none;
}
.product-pod-pic-spec p {
	margin-left:132px;
}

/* ----- Horizontal Button Group ------ */
.navs-horizontal {
	text-align: center;
}

.navs-horizontal li {
	display: inline;
}

/* FAQ */
.faq-question {
	font-weight: bold;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
.faq-answer {
	padding:0 0 10px 0;
	margin:0 0 20px 0;
	border-bottom:1px solid #ccc;
}

/*** FOOTER ***/
#footer {
	border-top: 2px dotted #977902;
	clear: both;
	font-size: .8em;
	margin: 0px 40px 0px 173px;
	padding: 10px 0px 10px 0;
	text-align: center;
}

#footer a {
	text-decoration: underline;
}

#footer a:link {
	background-color: #fff;
	color: #1F7929;
}

#footer a:visited {
	background-color: #fff;
	color: #666;
}

#footer a:hover {
	background-color: #fff;
	color: #1F7929;
	text-decoration: none;
}

#footer img {
	border: none;
	padding-top: 5px;
}

#footer p {
	line-height: normal;
	margin: 0px 0px;
	padding: 0;
}

#footer ul {
	margin: 0;
}

#footer ul li {
	display: inline;
	margin: 0px 0 10px 0;
	padding: 0 0px 0 10px;
}

#footer ul li a {
	margin: 0;
	padding: 0;
}

/*** SITEMAP ***/
#sitemap-list ul {
	font-size: 90%;
	list-style: none;
}

#sitemap-list ul li {
	border-bottom: 1px solid #CCCCCC;
	margin: 5px 0 5px 0;
	padding: 5px 0 12px 20px;
}

#sitemap-list ul ul li {
	border-bottom: none; /* override cascade */
	padding-bottom: 5px; /* override cascade */
}

/*** MISC CLASSES ***/
.small {
	font-size: .6em;
}
.spacer {
	height:20px; 
	padding:10px 0; 
	vertical-align:middle;
}
.call-attention {
	color: #CE0000;
	background-color: #fff;
}

.errortext {
	background-color: #fff;
	color: #CE0000;
	font-weight: bold;
}
.development-notification { color: #f00; background-color: #fff; padding: 10px; border: 1px solid #F00; font-weight: bold; text-align: center; }