/*

  Essentially Green
  http://www.essentiallygreen.com.au/

  Screen Stylesheet (/css/sceen.css)
  Created by Cadmium Design & Development

  Note: Uses YUI reset.css to reset all style properties.

*/



/* Global Styles ---------------------------------------------------------------------- */

body {
  background-color: #4e4141; /* dark gray */
  color: #000000; /* black */
}

.hide {
  display: none;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
  clear: both;
}

.clear {
  width: 100%;
  height: 1px;
  clear: both;
}


/* Layout Styles ---------------------------------------------------------------------- */

#feature {
  position: absolute;
  top: 0;
  left: 60%;
  width: 240px;
  background:  #98c302;
  border-left: 5px solid #ffffff; /* white */
  border-right: 5px solid #ffffff; /* white */
  z-index: 1000;
  margin-bottom: 30px;
  margin-left: 30px;
}

#header {
  position: relative;
  background-color: #ba996b; /* beige */
  height: 285px;
  width: 100%;
  z-index: 1;
}

#header .wrapper {
  height: 200px;
}

#nav {
  background-color: #98c302; /* green */
  width: 100%;
  height: 70px;
  border-top: 1px solid #ddccb5;
  border-bottom: 15px solid #4e4141; /* dark gray */
}

#nav li {
  display: inline;
}

#nav li a {
  display: block;
  width: 80px;
  height: 30px;
  float: left;
  color: #ffffff; /* white */
  text-decoration: none;
  text-align: right;
  padding: 40px 15px 0 15px;
  font-family: "DroidSansRegular", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  letter-spacing: -1px;
}

#home #nav li a.home, #about #nav li a.about, #services #nav li a.services, #gallery #nav li a.gallery, #contact #nav li a.contact {
  background-color: #729201; /* dark green */
}

#nav a:hover {
  background-color: #729201; /* dark green */
}


#content {
  background-color: #ffffff; /* white */
  background-image: url(../img/bg_gradient.jpg);
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: top left;
  padding: 43px 0;
  min-height: 400px;
}

#content #gallery_wrapper {
  width: 600px;
  clear: both;
}


#content .indexbox {
  width: 240px;
  padding: 10px;
  margin: 0 20px 20px 0;
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  float: left;
}

#content .indexbox img {
  margin-bottom: 10px;
  border: 1px solid #999999;
}

#content .indexbox a, #content .indexbox a:hover {
  border: 0;
}

#content #gallerycarousel {
  text-align: center;
  width: 506px;
}

#content #gallerycarousel img {
  background-color: #ffffff;
  padding: 10px;
  border: 1px solid #e9e9e9;
  height: 363px;
}

#content #gallerycarousel img.wide {
  width: 484px;
  margin: 0 auto 20px auto;
}

#content #gallerycarousel img.tall {
  width: 272px;
  margin: 0 auto 20px auto;
}

#content .nav {
  padding: 10px 0;
  width: 506px;
  margin-bottom: 20px;
}

#content .nav #prev2, #content .nav #next2, #content .nav #controls a {
  border: 1px solid #e9e9e9;
  padding: 10px;
  width: 60px;
}

#content .nav #prev2 {
  float: left;
  text-align: left;
}

#content .nav #controls {
  float: left;
  margin-top: 11px;
  width: 342px;
  text-align: center;
}

#content #controls a {
  width: 20px;
  margin: 2px;
}

#content #controls a.activeSlide {
  border: 1px solid #990000;
}

#content .nav #next2 {
  float: left;
  text-align: right;
}

#footer {
  border-top: 15px solid #ba996b; /* beige */
  padding: 10px 0 30px 0;
  clear: both;
}

#footer ul {
  float: right;
  margin-bottom: 15px;
}

#footer li {
  display: inline;
  margin-left: 10px;
}

#footer #zen {
  float: left;
  margin-top: -250px;
  width: 309px;
  height: 267px;
  z-index: 100;
}


/* Typography Styles ------------------------------------------------------------------ */

#header h1 {
  position: absolute;
  top: 88px;
  left: 233px;
  width: 308px;
  height: 70px;
  background-image: url(../img/essentially_green.gif);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: top left;
  text-indent: -9999px;
}

#feature p {
  font-family: "DroidSansRegular", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  letter-spacing: -1px;
  line-height: 150%;
  color: #ffffff; /* white */
  padding: 15px 17px;
  border-bottom: 15px solid #4e4141; /* dark gray */
}

#feature a {
  color:#ffffff; /* white */
  text-decoration: none;
  border-bottom: 2px solid #ffffff; /* white */
}

#content h1 {
  font-family: "DroidSansRegular", Helvetica, Arial, sans-serif;
  font-size: 1.8em;
  letter-spacing: -1px;
  line-height: 125%;
  color: #8c922a;
  width: 374px;
  margin-bottom: 43px;
}

#content h2, #content legend {
  font-family: "DroidSansRegular", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  letter-spacing: -1px;
  line-height: 125%;
  color: #8c922a;
  width: 374px;
  margin-bottom: 23px;
}

#content p {
  max-width:554px;
  margin-bottom: 30px;
}

#content ul {
  margin-left: 30px;
  margin-bottom: 30px;
  max-width:524px;
}

#content li {
  list-style-image: url(../img/bullet.gif);
}

#content p, #content li, #content label {
  font-family: 'YanoneKaffeesatzLight', Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  line-height: 150%;
  color: #000000; /* black */
}

#content a, #content .indexbox h1 a, #content .indexbox p a {
  text-decoration: none;
  border-bottom: 1px solid #696d1f; /* dark green */
  color: #696d1f; /* dark green */
}

#content a:hover, #content .indexbox h1 a:hover, #content .indexbox p a:hover {
  color: #990000; /* dark red */
  border-bottom: 1px solid #990000; /* dark red */
}

#content abbr {
  font-family: 'YanoneKaffeesatzLight', Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  line-height: 150%;
  color: #000000; /* black */
}

#content form {
  padding: 0 0 30px 0;
}

#content label {
  display: block;
  padding: 15px 0 0 0;
}

#content .button {
  display: block;
  margin-top: 15px;
  width: 300px;
  height: 40px;
  background-image: url(../img/button_sendquery.jpg);
  background-repeat: no-repeat;
  border: none;
  text-indent: -9999px;
}

#content .data {
  width: 290px;
  padding: 5px;
  border: 1px solid #ba996b; /* beige */
  background-color: #f8f4ef;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}

#content textarea {
  height: 150px;
}

#content .note {
  color: #666666; /* gray */
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 50%;
}

#content .ErrorField {
  border: 1px solid red;
}

#content .ValidationErrors {
  padding-left: 10px;
  color: #cc0000;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 75%;
}

#content .success {
  background-color: #ebfeab;
  padding: 10px;
  border: 1px solid #729201;
  text-indent: 0;
}

#content .failed {
  background-color: #ffdddd;
  padding: 10px;
  border: 1px solid #cc0000;
  text-indent: 0;
}

#content .indexbox h1 {
  font-size: 1.2em;
  padding: 0;
  margin: 0 0 10px 0;
}

#content .indexbox p {
  text-indent: 0;
  padding: 0;
  margin: 0;
}

#content .nav #prev2, #content .nav #next2, #content .nav #controls {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}


#footer h1 {
  color: #ffffff; /* white */
  text-align: right;
  clear: both;
  font-family: "DroidSansRegular", Helvetica, Arial, sans-serif;
  font-size: 1.3em;
  letter-spacing: -1px;
  line-height: 125%;
  padding: 20px 0 10px 0;
}

#footer p, #footer li {
  text-align: right;
  clear: both;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.7em;
  line-height: 150%;
  color: #ba996b; /* beige */
}

#footer a {
  text-decoration: none;
  border-bottom: 1px solid #ba996b; /* beige */
  color: #ba996b; /* beige */
}

#footer a:hover {
  color: #ffffff; /* white */
  border-bottom: 1px solid #ffffff; /* white */
}

#footer .symbol {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.7em;
}