/* MAIN BODY */

body {
	background-color: #A59B8B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* CALLS FOR BUTTON NAV */

body#contact a#contactnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#faq a#faqnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}
body#news a#newsnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#howto a#howtonav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#products a#productsnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#benefits a#benefitsnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#about a#aboutnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#policy a#policynav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#glossary a#glossarynav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#certifications a#certificationsnav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#concept a#conceptnav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#media a#medianav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#retailers a#retailersnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}

body#woolis a#woolisnav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#installation a#installationnav {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

body#links a#linksnav {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}



/* MAIN LAYOUT ELEMENTS */

#header {
	width: 820px;
	margin-top: 20px;
	position: relative;
	background-image: url('gfx/topBar.png');
	top: 0px;
	left: 0px;
	height: 18px;
}

#container {
	position: relative;
	background-image: url('gfx/back.png');
	width: 820px;
	overflow: hidden;
	min-height: 640px;
	background-repeat: repeat-y;
	top: 0px;
	left: 0px;
}

#insideTheLines {
	position: relative;
	float:right;
	width: 784px;
	margin:0px;
	top: 0px;
	left: -18px;
	height: 100%;
	
}

/* LEFT COLUMN */

#left_col {
	width: 219px; 
	position: absolute; 
	top: 0px;
	left: 0px;
}

/* MAIN NAVIGATION */

#nav {
	font: "Trebuchet MS", Tahoma, Arial, Verdana;
	color: #b8ba7c;
	text-align: right;
	padding-right: 1px;
	font-size: 11px;
	padding-bottom: 10px;
}

#nav p {
	font-size:14px;
	margin-top: 5px;
	margin-bottom: 3px;
}

#nav ul {
	font: "Trebuchet MS", Tahoma, Arial, Verdana;
	font-size:10px;
	margin-top: 0px;
	margin-bottom: 3px;
}

#nav a {
	color: #b8ba7c;
	letter-spacing: 0.15em;
	padding-right: 8px;
	border-right: 10px;
	border-right-style: solid;
	border-right-color: #ffffff;
	text-decoration: none;

}

#nav a:hover {
	color: #b8ba7c;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #b8ba7c;
	border-right-style:solid;
}

#nav p a {
	color: #A59B8B;
	letter-spacing: 0.15em;
	padding-right: 8px;
	border-right: 10px;
	border-right-style: solid;
	border-right-color: #ffffff;
	text-decoration: none;

}

#nav p a:hover {
	color: #A59B8B;
	text-decoration:none;
	padding-right: 8px;
	border-right: 10px;
	border-right-color: #d1cac2;
	border-right-style:solid;
}


/* RIGHT COLUMN */

#right_col {
	float: right;
	width: 565px;  
	top: 0px;
	right: 0px;
}

.whiteBox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666666;
	background-color: #FFFFFF;
	margin: 10px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: justify;
}

.whiteBox p {
	margin-top: 0px; 
	margin-bottom: 8px;
}

.whiteBox h1 {
	margin-top: 0px;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: bolder;
	border-color: #A59B8B;
	border-bottom-width: 1px;
	border-bottom-style:dashed;
}

.whiteBox h2 {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: bold;
}

.whiteBox h3 {
	margin-top: 0px;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: bold;
	font-style:oblique;
	
}

.whiteBox h4 {
	margin-top: 0px;
	margin-bottom: 4px;
	padding-top: 3px;
	font-size: 12px;
	font-weight: bold;
	border-color: #A59B8B;
	border-bottom-width: 1px;
	border-bottom-style:dashed;
}

.whiteBox a {
	color: #A59B8B;
	text-decoration: none;
	border-color: #A59B8B;
	border-bottom-width: 1px;
	border-bottom-style:dashed;
}

.whiteBox a:hover {
	color: #666666;
}

.whiteBox ol {
	margin-left: 25px;
}

.whiteBox li {
	margin-bottom: 8px;
}

.whiteBox ul {
	list-style:square;
}


/* TABLE FOR THE GREEN SPECTRUM */
.whiteBox .tableBox {
	width: 525px;
	height: 264px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-color: #D1CAC2;
	border-bottom-color: #D1CAC2;
	border-left-color: #D1CAC2;
	padding-bottom: 5px;
	margin-top: 15px;
}
.whiteBox .tableBox h2 {
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
}

.whiteBox td {
	vertical-align: top;
	text-align: left;
}

.whiteBox td h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bolder;
	text-transform: uppercase;
}
.whiteBox td ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
.whiteBox td ul li {
	margin: 0em 0em 0.3em 0em;
}


/* PRODUCTS STYLES */

.products {
	border-style: solid;
	border-width: 1px;
	border-color: #a59b8b;
	margin-top: 6px;
	margin-bottom: 6px;
}

.products p{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#333333;
}

/* THE GREEN SPECTRUM */

.whiteBox .darkGreen {
	background-color: #8B8E6A;
	padding: 0px;
}
.whiteBox .darkGreen h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
}

.whiteBox .mediumGreen {
	background-color: #DCE0C0;
	padding: 0px;
}
.whiteBox .mediumGreen h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
}

.whiteBox .lightGreen {
	background-color: #EFF0DD;
	padding: 0px;
}
.whiteBox .lightGreen h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
}




/* FOOTER */

#footer {
	width: 820px;
	position: relative;
	background-image: url('gfx/bottomBar.png');
	left: 0px;
	background-repeat: no-repeat;
	top: 0px;
	margin-top: 0px;
}

#footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

.footerText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}


/* **************************************** */


/*
  First define a content are width and position, if needed. I'm centering
  the 623px wide shell
*/
#showcaseWrapper {

}

/* 
  My main experiment sub-heading. Just setting color
*/

#showcaseWrapper h1 {
  color : #669900;
}

#showcaseWrapper h2 {
	color: #666666;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-left: 5px;
	margin-top: 0px;
	clear: both;
}

/*
  Now I'm resetting the paragraph padding (it was zeroed). I'm also clearing
  the p, but I don't really need this for the top one, only the bottom. The 
  top has no effect (it'll clear the heading by default), but it is needed 
  for the bottom (depending on the shell width versus the ul width). It may 
  not be needed at all. Your situation will determine.
*/
#showcaseWrapper p {
  padding : 10px;
  clear : both;
}

/*
  I define the width of the ul, set the height (in ems!) align the text and
  remove list styles. The last may not be needed on most browsers
*/
ul.showcaseList {
	padding: 0px;
	margin: 0px;
	list-style-type : none;
}

/*
  Now I style the individual boxes (li)
*/
ul.showcaseList li {
	margin: 0 4px 8px 4px;
	border: 1px solid #D1CAC2;
	width: 165px;
	height: 200px;
	background: #FFFFFF;
	float : left;
	display : inline;
}
ul.showcaseList li:hover {
	margin: 0 4px 8px 4px;
	border: 1px solid #D1CAC2;
	width: 165px;
	height: 200px;
	background: #E7E2DE;
	float : left;
	display : inline;
}



/*
  Style the li links
*/
#showcaseWrapper a {
	color: #5F8C00;
}
#showcaseWrapper a:hover, #showcaseWrapper a:focus, #showcaseWrapper a:active {
	color: #3D5900;
	text-decoration : none;
}
#showcaseWrapper a:focus, #showcaseWrapper a:active {
  background-color : #fff;
}

/*
  Style the h3 links
*/

#showcaseWrapper ul.showcaseList h3 {
	margin: 0px 10px 0px 10px;
	color: #666666;
	display : block;
	text-decoration : none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bolder;
	font-style: oblique;
	text-transform: uppercase;
	height: 2.6em;
}
#showcaseWrapper ul.showcaseList img {
	padding: 6px 7px 3px 7px;
}

/*
  This tyles the text p content within the li separately. The most important 
  thing here is to re-kill the padding and add the margin to create good gutters
*/
#showcaseWrapper ul.showcaseList p {
	font-size : 0.9em;
	padding : 0;
	margin: 5px 10px 10px 10px;
}

/* THE GREEN SPECTRUM */

#showcaseWrapper .darkGreen {
	background-color: #669438;
	padding: 0px;
}
#showcaseWrapper .darkGreen h2 {
	margin: 5px 0px 8px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
	clear : both;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	border-color: #D1CAC2;
}

#showcaseWrapper .mediumGreen {
	background-color: #94B472;
	padding: 0px;
}
#showcaseWrapper .mediumGreen h2 {
	margin: 5px 0px 8px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
	clear : both;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	border-color: #D1CAC2;
}
#showcaseWrapper .lightGreen {
	background-color: #C7D8B5;
	padding: 0px;
}
#showcaseWrapper .lightGreen h2 {
	margin: 5px 0px 8px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bolder;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 3px 3px 3px 5px;
	clear : both;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	border-color: #D1CAC2;
}