/* 

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  --------- */

		
/*  --------- 2. structure  --------- */

	
#header {
		height:110px;
		line-height:80px;
		margin:0;
		padding-left:10px;
		background: #fff;
		}	
				
#footer {
		clear:left;
		float: left;
		width:100%;
		padding: 5px 0 20px;
		border-top: 1px solid #000000;
		margin-top: 2em;
		text-align: right;				
		}
				
#footer p {
		margin: 30px 10px 0 0;
		}	
		
#affilation {
	margin:5px 0 0 0;
	padding:0;
	float: left;
	}		
	
#affilation img{
	margin-left: 10px;
	}		

#logo {
		width: 180px;
		}
		
#navContainer {
		width: 500px;
		position: absolute;
		right: 10px;
		top: 0;
		}
		
#slogon {
		position: absolute;
		top: 88px;
		width: 240px;
		padding: 0;
		}

#printOnly {
		display: none;
		}		
		
#signoff {
		float: right;
		margin: 0 15px 0 0;
		padding: 0;
		height: 15px;
		}			
		
#searchPanel {
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	padding: 1px 0;
	margin-bottom: 10px;
}

#searchPanelInner {
	background-color: #048141;
	width: 100%;
	height: 22px;
	padding: 3px 0;
}

#searchForm {
	float: right;
	position: relative;
	top: -2px;
	margin: 0 20px 2px 0;
	text-transform:uppercase;
	color: #fff;
	font: bold 1.1em/2.4em Arial, sans-serif;
}

#searchForm searchParam{
	width: 200px;
}

#searchText {
	margin-right: 4px;
	}

#searchPanelInner p {
	padding: 4px 0 4px 10px;
	font: bold 1.2em Verdana, Arial, sans-serif;
	text-transform:uppercase;
	color: #fff;
	margin: 0;	
}					
		
#quickCart	{
		position: absolute;
		visibility: hidden;
		width: 200px;
		top: 15px;
		right: 330px;
		}			

.quickView {
		display: inline;
		padding-right: 12px;
		/*background: url(images/double-arrow-bullet.gif) 95% 55% no-repeat;*/
		}
		
.whiteBoxout {
		border: 1px solid #7fadd4;
		margin-bottom: 10px;
		padding: 0px 10px 2px;
		background: #d8e6f2 url(../images/boxout-gradient.gif) repeat-x;
		}	
		
.whiteBoxout p {
		font: bold 1.0em Verdana, Arial, sans-serif;
		}
		
.whiteBoxout h1 {
		margin: 5px 15px 5px 0;
		padding-bottom: 3px;
		border-bottom: 1px dashed #7fadd4;
		}
		
#quickCartDetails dl{
		width: 100%;
		}

#quickCartDetails dl dt {
		display: block;
		float: left;
		padding: 3px 0px;
		width: 105px;
		text-align: right;	
		}	
		
#quickCartDetails dl dd {		
		float: none;
		margin: 0 0 0 115px;
		padding: 3px 5px 3px 0px;
		width: 50px;
		text-align: left;		
		}	
		
#quickCartDetails p {
		margin: 5px 0;
		text-align:center;
		}						
		
#closeButton {
		float: right;
		padding: 0px 3px 2px 3px;
		line-height: 10px;
		text-align:center;
		margin: 2px -8px 0 0;
		border: 1px solid #7fadd4;
		}	
		
#hBar {
		background-color: #048141;
		width: 100%;
		margin: 10px 0 2px 0;
		height: 2px;
		}			
		
#cartBox {

		width: 250px;
		height: 80px;
		border: 2px solid #048141;
		border-bottom: 0;
		position: absolute;
		right: -10px;
		top: 38px;
		background: #a1ce91 url(../images/progress_bar_gradient.jpg) repeat-x;
		}	
		
#cartBox h1{
		padding: 0;
		margin: 3px 0 5px 10px;
		color: #000;
		text-transform:uppercase;
		font: bold 1.3em Arial, sans-serif;
		}							
		
#cartBoxDetails {
		margin: 0;
		padding: 0;
		}	
		
#cartBoxDetails dl{
		margin: 0 0 5px 0;
		text-transform:none;
		}		
		
#cartBoxDetails dt{
		float: left;
		width: 140px;
		margin: 0 10px 0 10px;
		text-align:right;
		color: #048141;
		font: bold 1.1em Arial, sans-serif;
		}	
		
#cartBoxDetails dd{
		color: #000;
		font: bold 1.1em Arial, sans-serif;
		}	
		
#cartBoxDetails p{
		font-weight:bold;
		font: bold 1em Arial, sans-serif;
		margin: 0 0 0 10px;
		}											

/* ---------- 3. links and navigation ---------- */
	
#navContainer {
		font: bold 1.1em Arial, sans-serif;
		text-transform: uppercase;
		width: 536px;
		}
		
#navContainer li {
		display: inline;
		}
		
#pullNav {
		height: 29px;
		text-align: right;
		padding-top: 10px;
		}
		
#pullNav a {
		color: #000000;
		text-decoration: none;
		}
		
#pullNav a:hover {
		text-decoration: underline;
		}
		
#pullNav li {
		padding-left: 3px;
		}
		
#mainNav ul {
		clear: left;
		}
		
#mainNav a {
		color: #ffffff;
		width: 125px;
		display: block;
		float: left;
		background: #048141;
		text-decoration: none;
		line-height: 1.5em;
		border-bottom: 1px solid #ffffff;
		border-left: 1px solid #ffffff;
		padding: 0 4px;
		}
		
#mainNav a:hover {
		background: #3bb375;
		text-decoration: underline;
		}		
		
#mainNav .productsList a {
		background: #000000;
		}

#mainNav .productsList {
		margin-bottom: 10px;
		}

#mainNav .productsList a:hover {
		background: #666666;
		}
		
#goButton{
	float: none;
	position: relative;
	top: -1px;
	color: #fff;
	padding: 3px 5px;
	margin: -5px 0 0 10px;
	background-color: #000;
	border: 1px solid #fff;
	text-decoration:none;
	font-weight:bold;
	font-size:11px;
	font-family:tahoma, verdana, sans-serif;	
}

#goButton:hover {
	background-color:#666666;
}
		
				
#closeButton a {
		font: bold 1.4em Arial, sans-serif;
		color: #7fadd4;
		text-decoration:none;
		}				
	
#closeButton a:hover {
		font: bold 1.4em Arial, sans-serif;
		color: #f00;
		text-decoration:none;
		}		
		
/* ---------- 4. fonts ---------- */
		
#slogon {
		font: bold italic 1.4em Arial, sans-serif;
		color: #000000;
		}
		
#slogon em {
		color: #048141;
		}
		
#pullNav li div a{
		font: bold .7em Verdana, Arial, sans-serif;
		color: #048141;
		}		

#footer {
		font-weight: normal;
		}		
		
#footer	p{
		font: 1.1em Verdana, Arial, sans-serif;
		}	
		
.whiteBoxout h1 {
		font: bold 1.1em Verdana, Arial, sans-serif;
		text-align: center;
		text-transform:uppercase;
		}					
						
/* ---------- 5. images ---------- */

#logo img {
		display: block;
		}

#pullNav img {
		margin-top: 3px;
		margin-bottom: -3px;
		}

/* ---------- 6. hacks ---------- */