/* CSS Document */
/*
TABLE OF CONTENTS
  
  Colors
  HTML Elements
  Page Structure
  Navigation
  Headings
  Content Area
  Footer
  Forms
  Clear */

/* ---------- @ Colors -----------*/
#8b4946 brown body type / soil color of biz card
#0b4e00 green of wrapper stroke
#95a843 green masthead
#365205 green navbar
#fdf6b9 cream content background
#192b18 dark green almost black - wrapper border
#8ecede sky blue of masthead

/* ---------- @ HTML Elements -----------*/

* {
	margin: 0;
	padding: 0;
} 

html {
	height:100%;
}

body {	
	color:#3a4c24; /*used to be 8b4946;*/
	background: #000 url(images/bg-ferns.jpg);
	min-height:101%;
	font-size: 12px;
	line-height:1.4em;
	font-family:calibri,'lucida grande', arial, sans-serif;
}

p, h3, h4, h5, h6 {
	margin:0 0 1em;
}

p + h3 {
	margin-top:1.25em;
}

a:link, a:visited {
	text-decoration:none;
	font-weight:bold;
	color:#369;
}

a:hover, a:active {
	color:#2e81d4;
	text-decoration:underline;
}

*:focus {
	outline: none
}

/* ---------- @ Page Structure -----------*/

#wrapper {
	position:relative;
	background: #0d0d0d;
	margin:55px auto 0;
	width: 900px;
	border:5px solid #192b18;
}

#masthead, #masthead span {
	position:relative;
	background:#8ecede url(images/masthead-sky.gif) no-repeat;
	height: 192px;
	width: 900px;
	text-indent:-9000px;
	margin:0;
}

#masthead span {
	position:absolute;
	top:0; left:0;
}
	
#inner_container {
	position:relative;
	width:860px;
	min-height:500px;
	background:#8b4946 url(images/bg-container.jpg) no-repeat;
	padding:20px 20px 130px;
	z-index:1;
	overflow:auto;
}

/* for Internet Explorer which doesn't recognize min-height, workaround from http://www.cssplay.co.uk/boxes/minheight.html */
/*\*/
* html #inner_container {
height: 500px;
}
/**/

.left {
	float:left;
}

.right {
	float:right;
}

/* ---------- @ Navigation -----------*/
#nav {
	position:absolute;
	top:161px;
	left:247px;
	width:406px;
	height:36px;
	background:url(images/nav.gif) 0 -72px no-repeat; /*bkgd position allows hover state to show thru   */
													  /*when anchor tag removed on 'you are here' states*/
	margin:0;
	padding:0;
	z-index:50;
}

#nav li {
	list-style:none;
	float:left;
}

#nav li a {
	position:absolute;
	top:0;
	display:block;
	height:36px;
	padding:0;
	margin:0;
	background:url(images/nav.gif) no-repeat;
	text-indent:-9999px;
	overflow:hidden;
	font-size:1%;
}

#ser #nav_ser,
#pro #nav_pro,
#abo #nav_abo,
#faq #nav_faq,
#con #nav_con {
 text-indent:-9999px;
 }

li#nav_ser a {
	left:0;
	width:83px;
	background-position:0 0;
	}
			
li#nav_pro a {
	left:83px;
	width:84px;
	background-position:-83px 0;
	}
	
li#nav_abo a {
	left:167px;
	width:97px;
	background-position:-167px 0;
	}
	
li#nav_faq a {
	left:264px;
	width:65px;
	background-position:-264px 0;
	}
	
li#nav_con a {
	left:329px;
	width:77px;
	background-position:-329px 0;
	}


/*set the hover states states*/
	
li#nav_ser a:hover {
	background:url(images/nav.gif) no-repeat;
	background-position:0 -36px;
	}
			
li#nav_pro a:hover {
	background:url(images/nav.gif) no-repeat;
	background-position:-83px -36px;
	}
	
li#nav_abo a:hover {
	background:url(images/nav.gif) no-repeat;
	background-position:-167px -36px;
	}
	
li#nav_faq a:hover {
	background:url(images/nav.gif) no-repeat;
	background-position:-264px -36px;
	}
	
li#nav_con a:hover {
	background:url(images/nav.gif) no-repeat;
	background-position:-329px -36px;
	}

/* ---------- @ Headings -----------*/
h1, h2, h3, h4, h5, h6, h7 {
	color:#672724;
	font-weight:normal;
}

h1 {
	font-size: 1.8em;
}

h2 {
	text-indent:-9999px;
	height:33px;
	overflow:hidden;
	}
	
#h2-contact {
	background:url(images/h2-contact.png) no-repeat;
}
	
#h2-plants {
	background:url(images/h2-plants.png) no-repeat;
}

#h2-faq {
	background:url(images/h2-faq.png) no-repeat;
}

#h2-yard {
	background:url(images/h2-yard.png) no-repeat;
}

#h2-design {
	background:url(images/h2-design.png) no-repeat;
}

#h2-consultation {
	background:url(images/h2-consultation.png) no-repeat;
}

#h2-coaching {
	background:url(images/h2-coaching.png) no-repeat;
}

#h2-gc {
	background:url(images/h2-gc.png) no-repeat;
}


h3 {
	font-weight:normal;
	font-size: 1.4em;
	}

h4 {
	font-size: 1.3em;
	}

/* ---------- @ Content Area -----------*/

#content {
	width:440px;
	padding:20px;
	background:url(images/bg-content.png);
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	overflow:auto;
}

/*Home*/

#hom #content {
	float:right;
}

img {
	background:#fff;
	padding:4px;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
}

#photo1 {
	position:absolute;
	left:20px;
	top:20px;
}

#photo2 {
	position:absolute;
	left:209px;
	top:20px;
}

#photo3 {
	position:absolute;
	left:20px;
	top:209px;
}

#photo4 {
	position:absolute;
	left:209px;
	top:209px;
}

#sidebar {
}

/*Interior Pages*/

#abo #content, #faq #content, #con #content {
	margin:0 auto;
}

#pro #content {
	width:auto;
}

#ser #content {
	float:right;
}

.answer {
	margin:1.5em 3em;
}

.question {
	font-size:1.2em;
	color:#672724;
}

/* ------ @ Projects page ----- */
#sidebar-left {
	float:left;
	width:160px;
	margin-right:20px;
}

#projects {
	float:left;
	width:630px;
}

.project-phase {
	background:#d6e595;
	margin-bottom:15px;
	padding:20px;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	overflow:auto;
}

.project-phase div.left {
	float:left;
}

.project-phase h4 {
	height:29px;
	width:auto;
	text-indent:-9999px;
	margin:0;
}

.before {
	background:url(images/project-phase-before.gif) no-repeat;
}

.phase1 {
	background:url(images/project-phase-1.gif) no-repeat;
}

.phase2 {
	background:url(images/project-phase-2.gif) no-repeat;
}

.after {
	background:url(images/project-phase-after.gif) no-repeat;
}

.project-phase img {
	float:left;
	margin:0 0 20px;
	border-top:none;
	border-left:none;
}

.project-phase a:hover img {
	background:#addd61;
}

.project-phase img.left {
	margin:0 20px 20px 0;
}

#subnav-projects {
	margin:0 0 50px;
	padding:0;
}
	
#subnav-projects li {
	margin:0;
	padding:0;
	list-style:none;
}

#subnav-projects li a {
	display:block;
	margin-left:-.5em;
	padding:.25em;
	font-size:.9em;
	color:#3a4c24;
}

#subnav-projects li a.current,
#subnav-projects li a.current:hover {
	background:#8b4946;
	color:#fefcec;
}

#subnav-projects li a:hover {
	background:#d6e595;
	text-decoration:none;
}

	
/* ---------- @ Footer -----------*/	

#footer {
	position:absolute;
	bottom:10px;
	left:0;
	background-color:#652e2c;
	width:900px;
	margin:15px 0 0;
	padding: 10px 0;
	text-align:center;
	color:#7f99b3;
}

#footer a {
	color:#8ecede;
}

#footer p:first-child {
	font-size:130%;
}


/* ---------- @ Forms -----------*/

#contact {
	float:left;
	margin:2em 0 0;
	padding:0;
	}
	
.error {
	color:red;
	}
	

fieldset {
	float:left;
	margin:0;
	padding:0;
	border:none;
	}
	
fieldset ul {
	float:left;
	margin:0;
	padding:1em 0 0;
	}	

fieldset li {
	list-style:none;
	padding:0 0 .5em;
	margin:0;
	clear:left;
	}

input, textarea {
	float:left;
	display:block;
	border:1px solid #ccc;
	border-top:1px solid #949494;
	border-left:1px solid #949494;
	height:1.5em;
	width:150px;
	font:12px verdana, arial, sans-serif;
	margin-bottom:.75em;
	}
	
#submit {
	clear:both;
	}
	
label {
	float:left;
	display:block;
	width:90px;
	margin-bottom:.25em;
	}

#submit {
	margin-bottom:0;
	}

#submit input {
	width:auto;
	height:auto;
	margin-left:90px;
	color:#435e0c;
	background:#bbdc6a;
	border:1px solid #ccc;
	border-bottom:1px solid #949494;
	border-right:1px solid #949494;
	padding:.25em 1em;
	cursor:pointer;
	}
	
#submit input:hover {
	background:#a6ba4d;
	}
	
textarea {
	height:auto;
	width:300px;
	}

/*Clear*/

.clearfloat:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.clearfloat {
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfloat {
	height:1%;
	}

*+html .clearfloat {
	height:1%;
	}

.clearfloat {
	display:block;
	}
/* End hide from IE-mac */