/* 

STYLE SHEET FOR SPRUCE INDUSTRIES WEB SITE
Created by Daniel Josephs

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. hacks

Notes

*/



/* --------- 1. defaults  --------- */

#content {	
		margin: 0 10px 0 200px;
		}		
		
/*  --------- 2. structure  --------- */		

.boxout-green {
		border: 1px solid #048141;
		margin-bttom: 10px;
		padding: 10px 10px 2px;
		background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;
		}
		
#navigation .boxout-green {
		margin: 0 10px 10px 10px;
		}	
		
h1.cleanGreen {
		margin-left: auto;
	    margin-right: auto;
		margin-top: 10px;
		margin-bottom: 0px;
		}	
		
h2.greenProducts {
		margin-left: auto;
	    margin-right: auto;
		margin-top: 5px;
		}	
		
table {
	border: 1px solid #7fadd4;
	border-collapse: collapse;
	max-width: 100%;
}			

th {
	padding: 5px 10px;
	text-align: left;
}

thead th {
	border: 1px solid #87CEFA;
	white-space: nowrap;
	background: #F0F8FF;
}

tbody td ,tbody th {
	padding: 5px 10px;
	background: #fff;
	color: #000;
}
tbody th {
	color: #047;
	font-weight: normal;
	font-variant: normal;
	font-size: 1em;
}
tbody tr.odd {
	border: 1px solid #87CEFA;
}

tbody tr.bottom {
	border-bottom: 0;
}

tbody tr.top {
	border-top: 0;
}
tbody tr.odd td, tbody tr.odd th {
	background: #F0F8FF;
}
tfoot td, tfoot th {
	border: none;
	padding-top: 10px;
}

#pageNavTop {
		float:right;
		margin-top: 10px;
		}		
		
#pageNavTop input, #pageNavBottom input{
		width: 20px;
		}	
		
#pageNavBottom {
		float:right;
		margin-top: 8px;
		margin-bottom: 8px;
		}	
		
.pageGo {
		display: inline;
		margin-right: 10px;
		}	
		
.buttons {
		float: left;
		}			
		
.buttons img {
		margin: 4px;
		padding: 5px;
		}				

.qty {
		width: 20px;
		}
		
.sectionPrice {
		float: right;
		margin: 15px 0px 10px;
		padding: 5px 0;
		text-align: center;
		}
		
.sectionPrice p {
		padding: 0 0 3px 0;
		margin: 0;
		}			
		
.sortArrow {
		padding: 0px;
		margin: 0px 4px;
		width: 7px;
		height: 7px;
		}					

					
/* ---------- 3. links and navigation ---------- */

#content {	
		margin: 0 10px 0 200px;
		}	

#detailTop {
		min-width: 535px;
		}
			
#detailCenter {
			margin: 0 180px 5px 210px;
			}			
			
#productImage {
			float: left;
			margin: 0 10px 15px 0;
			}	
			
#productImage p {
			margin: 0;
			padding: 0;
			text-align: center;
			}
			
#detailRight {
			float: right;
			width: 150px;
			border: 1px solid #048141;
			margin: 10px;
			padding: 8px 5px 5px 8px;
			background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;			
			}
			
#detailRight dl{
		font: normal 1.2em Verdana, Arial, sans-serif;
		width: 100%;
		}

#detailRight dl dt {
		display: block;
		float: left;
		padding: 3px 0px;
		width: 65px;
		text-align: right;
		}	
		
#detailRight dl dd {		
		float: none;
		margin: 0 0 0 70px;
		padding: 3px 5px 3px 0px;
		width: 70px;
		text-align: left;
		}
		
#detailRight dd.save {
		margin: 0 0 10px 10px;
		width: 135px;
		}	
		
#detailRight form{
		padding-top: 4px;
		}					
			
#detailBottom {
			clear: both;
			}								
			
#detailPricing {
			clear: both;
			margin: 10px 0;
			}			
			
#pricingBox {
			border: 1px solid #048141;
			margin: 10px;
			padding: 8px 5px 5px 8px;
			height: 60px;
			background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;
			}
	
#pricing 	{
			float: left;
			}
			
#pricing label {
			padding: 0 5px 0 0;
			margin: 0 7px 0 0;
			}			
			
#pricing p {
			margin: 0 0 5px 0;
			}			
			
#pricingBox fieldset {
			float: right;
			margin: 0 0 0 0;
			}
			
fieldset	{
			border: 0;
			}	
			
fieldset label {
			margin: 2px 10px 0 0;
			vertical-align:top;
			}		
			
fieldset select {
			margin: -3px 5px 2px 0;
			border: 1px solid #048141;
			}	
			
fieldset p {
			margin: 0 0 3px 0;
			padding: 0;
			}
			
div.rollover {
			margin: 5px 0 5px 15px;
			}
			
fieldset acronym {
			margin: 0px 0 0 10px;
			}						
			
#extraInfo	{
			margin: 25px 0 0 0;
			}			
			
#specification {
			border: 1px solid #048141;
			margin: 10px;
			padding: 8px 5px 5px 8px;
			}		
			
legend 		{
			padding: 2px 10px;
			border: 1px solid #048141;
			background: #B4D56D;
			}	
			
#tabnav 	{
			padding-left: 10px;
			}			
			
ul#tabnav 	{
			list-style-type: none;
			padding-bottom: 24px;
			border-bottom: 1px solid #048141;
			margin: 0px 10px 0px 10px;
			min-width: 505px;
			}	
			
ul#tabnav li {
			float: left;
			height: 21px;
			background-color: #048141;
			margin: 2px 1px 0 1px;
			border: 1px solid #048141;
			}
			
#tabnav a {
			float: left;
			display: block;
			text-decoration: none;
			padding: 4px 5px 4px 5px;
			}
			
#tabnav .linkTab a{
			background: #fff;
			color: #048141;
			}		
			
#tabnav .linkTab a:hover{
			color: #000;
			text-decoration:underline;
			}
			
#tabnav .linkTabRed a{
			background: #fff;
			color: #A62B2E;
			}									
			
#tabnav .currentTab a{
			color: #fff;
			}
			
#tabnav .currentTabRed a:hover{
			text-decoration:underline;
			}							
			
#tabnav .currentTabRed a{
			background: #A62B2E;
			color: #fff;
			}			
			
#tabSpec	{
			border: 1px solid #048141;
			border-top: 0;
			margin: 0px 10px 20px 10px;
			padding: 8px 5px 5px 8px;
				background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;
			display: block;
			min-width: 500px;
			}	
	
#tabSpec dl{
		width: 100%;
		}

#tabSpec dl dt {
		display: block;
		float: left;
		padding: 3px 0px;
		width: 160px;
		text-align: right;	
		}	
		
#tabSpec dl dd {		
		float: none;
		margin: 0 0 0 170px;
		padding: 3px 5px 3px 0px;
		width: 320px;
		text-align: left;		
		}							
			
#tabInfo	{
			border: 1px solid #048141;
			border-top: 0;
			margin: 0px 10px 20px 10px;
			padding: 8px 5px 5px 8px;
			display: none;
			min-width: 500px;
			}								
			
#tabInfo p {
			margin: 2px 0;
			padding: 0;
			width: 200px;
			}				
			
#tabDocs	{
			border: 1px solid #048141;
			border-top: 0;
			margin: 0px 10px 20px 10px;
			padding: 8px 5px 5px 8px;
			background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;
			display: none;
			min-width: 500px;
			}
			
#tabDocs p {
			margin: 2px 0;
			padding: 0;
			width: 200px;
			}			
			
#tabDocs img {
			margin: 5px 0 0 30px;
			}		
			
#tabDocs ul {
			width: 100%;
			margin: 0px;
			padding: 0px;
			}	
			
#tabDocs ul li {
			float: left;
			width: 125px;
			padding: 5px 5px;
			margin: 0 5px;
			}	
			
#tabRelatedProducts	{
			border: 1px solid #B4D56D;
			border-top: 0;
			margin: 0px 10px 20px 10px;
			padding: 8px 5px 5px 8px;
			background: #B4D56D url(../images/boxout-gradient-green.gif) repeat-x;
			display: none;
			min-width: 500px;
			}
			
#tabRelatedProducts label {
			margin: 1px 5px 0 0;
			text-align: right;
			width: 7em;
			margin-right: 8px;
			}
#tabRelatedProducts p {
			margin: 2px 0;
			padding: 0;
			width: 200px;
			}	
			
#tabReviews	{
			border: 1px solid #B4D56D;
			border-top: 0;
			margin: 0px 10px 20px 10px;
			padding: 8px 5px 5px 8px;
			display: none;
			min-width: 500px;
			}				
			
#tabReviews	p {
			margin: 3px 0 3px 0;
			padding: 0;
			}				
			
#tabReviews	p.review {
			margin: 0 0 10px 0;
			padding: 0;
			}	
			
#tabReviews div {
			font-size: 1.0em;
			margin-bottom: 10px;
			padding-left: 12px;
			background: url(../images/double-arrow-bullet.gif) 0px 65% no-repeat;
			}	

.boxout-green h1 {
		margin: -10px -10px 10px;
		text-align: center;
		background: #048141;
		color: #ffffff;
		text-transform: uppercase;
		font: bold 1.2em/1.8em Arial, sans-serif;
		
		}
		
#navigation div.boxout-green ul {
		list-style-type: disc;
		margin-left: 1.5em;
		margin-bottom: 1em;
		}

#navigation div.boxout-green ul {
		margin-top: 1em;
		list-style-type: none;
		margin-left: 0;
		}

#navigation div.boxout-green li {
		font: 1.1em Verdana, sans-serif;
		margin-bottom: 3px;
		padding-left: 12px;
		background: url(../images/double-arrow-bullet.gif) 0px 65% no-repeat;
		}	
		
h4.trail {
		text-align: left;
		}
		
table {
	font: normal 1em Verdana, Arial, Helvetica, sans-serif;	
	}	

th {
	font: bold  1.1em Verdana, Arial, Helvetica, sans-serif;
	color: #047;
	font-variant: small-caps;
	font-weight: bold;
	}
	
th a, th a:link, th a:visited {
	font: bold  1em Verdana, Arial, Helvetica, sans-serif;
	color: #047;
	font-variant: small-caps;
	font-weight: bold;	
	text-decoration:underline;
	}
	
th a:hover {
	font: bold  1em Verdana, Arial, Helvetica, sans-serif;
	color: #F00;
	font-variant: small-caps;
	font-weight: bold;	
	text-decoration:underline;
	}
	
.rollover a {
		display:block;
		margin: 2px 2px;
		width: 80px;
		padding: 6px 0px 7px 0px;
		font: bold 1.1em Verdana, Arial, sans-serif;
		color:#048141;
		background: url(../images/details_button_green_80.jpg) 50% 50% no-repeat;
		text-decoration: none;
		text-align: center;
		}
		
.rollover a:hover { 
		color: #981C1C;
		}									

/* ---------- 4. fonts ---------- */
			
b.greenBold {
		color: #048141;
		}	
		
h1.cleanGreen {
		font: bold italic 3em/1.3em Verdana, Arial, sans-serif;
		}	
		
#greenH1 {
		color: #048141;
		}
		
h2.greenProducts {
		font: bold 1.5em/1.3em Verdana, Arial, sans-serif;
		}	
		
.price {
		font-weight: bold;
		color: #981C1C;
		font-size: 1.2em;
		}	
		
#detailTop p {
			font: normal 1.1em Verdana, Arial, sans-serif;
			}
			
#productImage a {
			font: normal .9em Verdana, Arial, sans-serif;
			}			
			
dl.list dt {
			font-weight:normal;
			}			
			
dl.list dd	{			
			text-decoration:line-through;
			}	
			
dl.discount dt	{
			font: bold 1em Verdana, Arial, sans-serif;
			}				
					
dd.save		{
			font: normal .9em Verdana, Arial, sans-serif;
			color: #f00;
			font-style:italic;
			}
			
fieldset	{
			margin: 0 0 5px 10px;
			}			
			
fieldset label {
			font: normal 1.2em Verdana, Arial, sans-serif;
			}		
			
fieldset p {
			font: normal .8em Verdana, Arial, sans-serif;
			}				
			
ul#tabnav {
			font: bold 1.1em Verdana, arial, sans-serif;
			}	
			
#tabSpec dl dt {
			font: bold 1.1em Verdana, arial, sans-serif;
			}	
			
#tabSpec dl dd {
			font: normal 1.1em Verdana, arial, sans-serif;
			}							
			
#note	{
		font: normal .9em Verdana, Arial, sans-serif;
		}													
				
/* ---------- 5. images ---------- */

#green_globe img {
		padding: 5px 0 5px 15px;
		margin-bottom: 15px;
		}
		
#quote {
		padding: 20px 0 15px 0;
		}
		
.rowImage {
		border: 0;
		width: 100px;
		}	
		
#detailTop img.detailImg {
			width: 150px;
			}
			
#customerRating img.star {
			width: 90px;
			height: 18px;
			}
			
#tabReviews img.star {
			width: 90px;
			height: 18px;
			margin: 0 0 0 20px;
			}	
			
#greenSeal img {
			width: 50px;
			height: 45px;	
		}						
		
/* ---------- 6. hacks ---------- */