/* 

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

* {
		margin: 0;
		padding: 0;
		}

html, body {
		margin:0;
		padding:0;
		}		
		
/*  --------- 2. structure  --------- */

body {

		}		
		
#container {
		
		}
		
#wrapper {
		float:left;
		width:100%;
		}	
				
#content {	
		margin: 0 200px;
		}	
		
#navigation {
		float:left;
		width:200px;
		margin-left:-100%;
		}	
		
#extra {
		float:left;
		width:200px;
		margin-left:-200px;
		}	
				
.boxout {
		border: 1px solid #7fadd4;
		margin-bottom: 10px;
		padding: 10px 10px 2px;
		background: #d8e6f2 url(../images/boxout-gradient.gif) repeat-x;
		}
		
.flash {
		padding: 0px;
		margin: 0 10px 10px 10px;
		border: 1px solid #7fadd4;
		}
				
#navigation .boxout {
		margin: 0 10px 10px 10px;
		}
		
#extra .boxout {
		margin: 0 10px 10px 10px;
		}
		
.separator {
		clear: both;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}

.centralSeparator {
		width: 100%;
		margin-bottom: 0px;
		}		

hr {
		clear:both;
		margin-top: 2em;
		margin-bottom: 2em;
		border-top: none;
		border-left: none;
		border-right: none;
		background-color: #ffffff;
		border-bottom: 1px solid #7fd4aa;
		height: 0;
		}

hr.lite {
		border-bottom-color: #cccccc;
		}

hr.dotted {
		margin-top: 0.5em;
		border-bottom: 1px dotted #7fd4aa;
		margin-bottom: 1.5em;
		}

.noTopMargin {
		margin-top: 0;
		}

.itemBox {
		}

.noRightMargin {
		margin-right: 0;
		}
		
		
.categoryRow {
		float: left;
		width: 100%;
		border-bottom: 1px dashed #7fd4aa;
		margin-bottom: 15px;
		}
		
.categoryLeft {
		padding:6px;
		float: left;
		width: 44%;
		}		
		
.categoryRight {
		padding:6px;
		float: right;
		width: 44%;
		}
		
.categoryLeft h2, .categoryRight h2 {
		margin-bottom:6px;
		padding:0;
		font-weight:normal;
		text-align: center;
		}
		
p.supportText {
		margin-top: -8px;
		}			
		
		
#securePadding {
		clear: both;
		height: 35px;
		}	
		
object {
		margin: 0;
		padding: 0;
		}	
		
#welcomeSignature {
		width: 225px;
		float: left;
		}					

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

a {
		color: #048141;
		}
		
a:hover {
		color: #000000;
		}
		
.boxout h1 {
		margin: -10px -10px 10px;
		text-align: center;
		background: #7fadd4;
		color: #ffffff;
		text-transform: uppercase;
		font: bold 1.2em/1.8em Arial, sans-serif;
		
		}
		
.flash h1 {
		margin: 0px 0px 0px;
		text-align: center;
		background: #7fadd4;
		color: #ffffff;
		text-transform: uppercase;
		font: bold 1.2em/1.8em Arial, sans-serif;
		
		}		

.boxout h2 {
		font: bold 1.1em Verdana, sans-serif;
		margin-bottom: 10px;
		}	
		
.boxout p {
		font: bold 1.0em Verdana, Arial, sans-serif;
		}				
		
ul {
		list-style-type: none;
		}

#navigation ul, #mainContent ul, #rightColumn ul {
		list-style-type: disc;
		margin-left: 1.5em;
		margin-bottom: 1em;
		}

#navigation ul {
		margin-top: -0.8em;
		list-style-type: none;
		margin-left: 0;
		}

#navigation li {
		font-size: 1.0em;
		margin-bottom: 1px;
		padding-left: 12px;
		background: url(../images/double-arrow-bullet.gif) 0px 65% no-repeat;
		}
		
#highlight {
		color: #981C1C;
		text-decoration: none;
		font-weight: bold;
		}
		
.productBackground {
		background: #d8e6f2 url(../images/boxout-product.gif) repeat-x;
		}
		
.currentLink {
		color: #000;
		}
		
h4.trail 	{
			font: normal .9em Verdana, Arial, sans-serif;
			text-transform:lowercase;
			}
		
#rss {
		float: right;
		}				

/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}
		
body {
		font-size: 62.5%;
		font-family: Verdana, Arial, sans-serif;
		}
		
h1 {
		font: bold 1.5em Arial, sans-serif;
		margin-bottom: 20px;
		}

.extraTopPadding {
		padding-top: 10px;
		}		
		
h2 {
		font: bold 1.2em Verdana, Arial, sans-serif;
		margin-bottom: 4px;
		}
		
p {
		font: 1.1em/1.3em Verdana, Arial, sans-serif;
		margin-bottom: 1em;
		}		
		
p.supportText {
		font: normal 1em Verdana, Arial, sans-serif;
		font-weight:lighter;
		}
		
p.p_center {
		text-align: center;
		line-height: 1.3em;
		}						
		
				
/* ---------- 5. images ---------- */

.boxout img {
		margin-bottom: 1em;
		}

a img {
		border: 0;
		}

img.floatRight {
		border: 1px solid #7fd4aa;
		float: right;
		margin: 0 0 1em 1em;
		}
		
.categoryLeft img, .categoryRight img {
		border: 1px solid #7fd4aa;
		width: 75px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		}			

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