/***********************************************\
/***********************************************\
|			COLORS USED				 |
|									 |
|	Green			#8dc641	 		 |
|	Orange			#ffd457	 		 |
|	Yellow			#fafb00 			 |
|	Text Grey			#928670			 |
|	Link Hover Green		#77a22f			 |
\***********************************************/


/***********************************************\
|			HTML ELEMENTS			 |
\***********************************************/

* { 
	margin: 0;
	padding: 0;
}

a, a:visited {}
a:hover, a:focus {}
a:active{}
a acronym, a abbr { cursor: pointer; }
a img { border: 0; }
address {}

body {
	font-family: Ariel, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background-color: #fff;
}

blockquote {
	text-align: center;
	border: 1px solid #f0f;
	padding: 10px;
	margin: 15px;
}

abbr, acronym {
	border: 0;
	cursor: help;
}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

li {
	margin: 0 0 5px 30px;
}

p {}
strong{}


/***********************************************\
|			CLASSES					 |
\***********************************************/

.alignCenter{text-align: center;}
.alignRight{text-align: right;}
.alignLeft{text-align: left;}
.clearBoth{clear: both;}
.clearLeft{clear: left;}
.clearRight{clear: right;}
.displayNone{display: none;}
.floatRight{float: right;}
.floatLeft{float: left;}
.highlight{	color: #ff0000; }

.imgLeft{
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
}

.imgRight{
	float: right;
	margin:  10px 0 10px 10px;
}

.imgLeftNoBorder{
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
}

.imgRightNoBorder{
	float: right;
	margin: 0;
	padding: 0;
	border: 0;
}
.margin0{ margin: 0; }
.overflowHidden{overflow:hidden;}
.padding0{ padding: 0; }
.uppercase{text-transform:uppercase;}
.captialize{text-transform:capitalize;}
.printOnly{display:none;}

.skip{
	position:absolute; 
	top: -100px; 
	z-index: 5000;
} 

.skip:focus,.skip:active { 
	position:absolute; 		
	top: 0;
	width: 100%;
	background: #f00;
	color: #fff; 
	padding: 2px 0;
	text-decoration: none;
	text-align: center;
}

/** see also ie6_fixer.css and ie7_fixer.css **/
.skip:active {
	color: #00315c; 
}

.linkDivider{display: none;}

.callToAction { 
	margin: 0 20px 20px 0;
	padding: 10px 0 0 40px;	
	list-style-type: disc;
}

.callToAction li {
	padding: 0 0 5px 0;
	list-style-image: url(/content/img/structure/call_to_action.gif);
}

.factUrl {
	font-size: 0.9em;
	font-style: italic;
	}
	
.marginTop {
	margin-top: 20px;
	}
	



/***********************************************\
|			TEMPLATE LAYOUT			 |
\***********************************************/

#siteHolder {
	width: 696px;
	margin: 0 auto;
	padding: 0 35px 0 35px;
	background: #fff url('/content/img/structure/background.gif') repeat-y;
	background-position: center;
	overflow: hidden;
	height: 100%;
}

#topSpacer {
	height: 18px;
	background-color: #fff;
}


/** TOP **/
#header {
}

/** See also ie7.css, ie6.css **/
#headerContent {
	margin: 0 0 -4px 0;
}

#headerContent img {}

#headerContent a {}

#header h1 {
	height: 144px;
}

/** NAV **/
#nav {
	overflow: hidden;
	height: 1.9em;
}

#nav a, #nav a:visited {
	float: left;
	padding: 0;
	text-decoration: none;
	margin-right: 3px;
	width: 113px;
	list-style: none;
	background-position: 0 -35px;
	height: 25px;
	font-size: 0.8em;
}

body #siteHolder #nav a.current {
	background-position: 0 -5px;
}

#did  {
	background: url('/content/img/structure/did3.gif') no-repeat;
	}
	
#offset  {
	background: url('/content/img/structure/offset2.gif') no-repeat;
	}
	
#ten  {
	background: url('/content/img/structure/ten2.gif') no-repeat;
	}
	
#why  {
	background: url('/content/img/structure/why2.gif') no-repeat;
	}
	
#calc  {
	background: url('/content/img/structure/calc2.gif') no-repeat;
	}
	
#contact  {
	background: url('/content/img/structure/contact2.gif') no-repeat;
	}

#nav a:hover, #nav a:focus {
	background-position: 0 -5px;
}

#nav a:active {}

/** CONTENT **/
#contentHolder {
	color: #928670;
	clear: both;
	line-height: 1.5em;
	min-height: 240px;
}

#contentHolder a, a:visited {
	color: #8dc641;
	font-weight: bold;
	text-decoration: none;
}

#contentHolder a:hover, #contentHolder a:focus {
	color: #77a22f;
	font-weight: bold;
}

#contentHolder a:active {}

#content {
	text-align: left;
	padding: 0 15px 15px 15px;
	width: 434px;
	float: left;
}
	
#content h1  {
	font-size: 3.7em; /**4.5em **/
	margin: 13px 0 10px 0;
	color: #8dc641;
	line-height: 1em;
	letter-spacing: -2px;
}

	.orange 	{
		color: orange;
	}

#content h2 {
	color: orange;
	font-size: 1.5em; /** 19px **/
	margin: 20px 0 10px 0;
	line-height: 1em;
}

	

	.green {
		color: #8dc641;
	}

/** see also ie6_fixer.css **/
#content h3 {
	font-size: 1.1em;
	color: #ffd258;
}
#content h4 {
	color: #8dc641;
	font-size: 1.1em;
}

#content h5 {
	color: #928670;
	font-weight: bold;
	font-size: 1em;
	margin-bottom: -10px;
}
#content h6 {}

#content p {
	margin: 0.8em 0;
}

#content p.summary {
	color: #8dc641;
	padding: 2px 0;
	font-size: 1em;
	line-height: 1.5em;
}

#content ul { list-style-type: disc; }
#content ol ol { list-style-type: lower-alpha; }
#content ol ol ol { list-style-type: lower-roman; }

/** see also ie6_fixer.css **/
#calcTop {
	margin-top: 20px;
}

#calcBottom {
	margin-top: -8px;
}




/** COLUMN **/
#columnLeft {
	line-height: 1.2em;
	font-size: 0.7em;
	float: left;
	padding: 0 5px 0 0;
	width: 111px; /* max 559 ---- 542 is 15px either side and 2px gap for bg image*/
	height: 100%;
}

	#columnLeft img {
		vertical-align: baseline;
	}
	
	#columnLeft p {
		padding-top: 20px;
	}

	#backToSite  {
		background: url('/content/img/structure/back_to_site2.gif') no-repeat;
		clear: both;
		height: 21px;
	}
	a#backToSite, a#backToSite:visited {
		background-position: 0 0;
		text-decoration: none;
		display: block;
	}
	
	a#backToSite:hover, a#backToSite:focus {
		background-position: 0 -21px;
	}

#columnRight {
	float: right;
	padding-left: 5px;
	width: 111px; /* max 559 ---- 542 is 15px either side and 2px gap for bg image*/
}

#column a img {
	display: block;
}

#column h2 { 
	font-size: 1.2em;
	margin: 0.8em 0;
}

#column h2 a, #column h2 a:visited {}

#column h2 a:hover, #column h2 a:focus {}

#column h2 a:active {}


/** FOOTER **/

#footer {
	clear: both;	
}

#footerLeft {
	float: left;
	margin-top: -123px;
}

#footerRight {
	float: right;
	display: inline;
	margin-right: 3px;
}

#subFooter {
	clear: both;
	background-color: #8dc641;
	padding: 4px 5px;
	text-align: right;
	font-size: 0.9em;
	width: 682px;
	margin: 0 auto;
	color: #fff;
}

#subFooter a, #subFooter a:visited {
	text-decoration: none;
	color: #fafb00;
}

#subFooter a:hover, #subFooter a:focus {
	text-decoration: underline;
}

/**** GENERIC FORMS ****/
.generalForm {
	margin-top: -5px;
	width: 407px;
	color: #fff;
	background-color: #77a22f;
}

/** see also ie6_fixer.css & ie7_fixer.css **/
.generalForm  fieldset {
	border: none;
	margin-bottom: -7px;
	padding: 15px 15px 5px 15px;
}

/** see also ie6_fixer.css & ie7_fixer.css **/
.generalForm  legend {	
	color: #fff;
	background-color: #f05c22;
	padding: 4px 6px;
	font-size: 1.1em;
}

.generalForm fieldset input {
	font-family: Arial, sans-serif;
	width: 40px;
	padding: 1px;
}

.generalForm  select {
	font-family: Arial, sans-serif;
	display: inline;
}

.generalForm  select option{
	padding-left: 5px;
}

.generalForm  label {
	width: 250px;
	float: left;
	text-align: left;
	margin: 3px 1em 0px 0px;
	clear: both;
}

.generalForm  .checkBoxLabel{
	width: 250px;
	font-size: 0.8em;
}

.generalForm  textarea{
	font-family: Verdana, sans-serif;
	font-size: small;
	width:40px;
	padding: 1px;
}

.generalForm  .submitButton{
	display: block;
	padding: 1px 5px;
	margin: 0px 62px 10px auto;
	margin-top: 15px;
	width: 95px;
	float: right;
	
}

.generalForm  .generalCheckBox{
	display: inline;
	width: 18px;
}

.generalForm label .charCounter {
	font-size: 0.8em;
}

.generalForm .dateCollection input {
	width: 34px;
}

#errorMessage{
	margin-bottom: 15px;
}

#errorMessage h2{
}

.generalForm  label.error {
	color: #f00;
}

.generalForm  div.error {
	margin: 0px 0px 15px 125px;
	font-size: 0.8em;
	width: 330px; /** to match input and text area widths **/
	color: #f00;
}

/** this is a spacer class due to IE empty div height issue **/
.generalForm  div.noError {
	height: 15px; /** matches div.error bottom margin **/
}

.generalForm  .errorText{}

.generalForm  .errorList ul li a{}

.generalForm .hiddenInput {
	display: none;
}


/***********************************************\
|			PAGE SPECIFIC (a-z)			 |
\***********************************************/

/** /calculator/ **/
#forest{
	float: left;
}

#forest img {
	display: block;
	float: left;
	margin-right: 4px;	
}

h2#header2Home {
	color: #928670;
	font-size: 1.2em;
	margin-bottom: -10px;
}

#treesUsed {
	clear: both;
}

.odd {
	
	overflow: hidden;
}
.even {
	
	overflow: hidden;
	margin-left: 12px;
}

/** /why_bother/ **/

#reason1, #reason2, #reason3, #reason4, #reason5, #reason6, #reason7, #reason8, #reason9, #reason10 {
	padding-left: 14px;
}