/* ######################################################################### */
/* 

At this point all browser styles have been reset, now we're starting with a clean slate 

TIPS: 
1. to vertically align text within it's container just make it's line-height the same as the container height
2. when using transparent pngs as backgrounds make sure to include the filter workaround for ie6 and below
3. if centering the container div on the page make sure to set the body to "text-align: center" then the container div to "text-align: left"
4. use as few selectors as possible
5. use the body id="PAGEID" selector to show/hide navigation or cause elements on the page to act differently than the rest
6. use the CSS "sliding door" rollover method http://alistapart.com/articles/slidingdoors2/ instead of javascript
7. on ie6 "border: 1px dotted red" doesn't work. ie6 can't render anything other than a solid line under 2px
8. use the clearfix class workaround to make a block containing floated elements stretch to emcompass them

*/

/* DOMAIN styles */

/* show outlines, remove */


/* default page colors and fonts */
body {color: #646451; font-family: verdana, arial, sans; background: url(../images/bg_body_container.gif) repeat-x #000;}
a:link {color: #fff; text-decoration: none;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}
a:active {color: #fff; text-decoration: none;}


/* ######################################################################### */
/* STRUCTURE */

#container{
  
}
#header_container{
  text-align:center;
  margin-top: 15px;
    background: url(../images/bg_header_gfx.jpg) no-repeat center top;
}
#secondary #header_container{
  background: url(../images/bg_header_gfx_empty.jpg) no-repeat center top;
}
#header{
  width: 720px;
  margin: 0 auto;
  text-align:left;
  position: relative;
  padding-bottom: 40px;
}
#secondary #header{
  padding-bottom: 12px;
}
#nav_top{
	padding-bottom:10px;		
	font-size:12px;

}

#nav_top a{
	color:#777623;
	text-decoration:none;
}

#nav_top a:hover{
	color:#bdc132;
	text-decoration:none;
}

#navigation{
  
}
#save_the_yasuni{
  width: 182px;
  height: 48px;
  position: absolute;
  left: 0;
  bottom: -30px;
}
#save_the_yasuni a{
  background: url(../images/bg_save_the_yasuni.png) no-repeat;
  width: 182px;
  height: 48px;
  text-indent: -7777px;
  display: block;

}
* html #save_the_yasuni a{
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg_save_the_yasuni.png", sizingMethod="crop");
  cursor: hand;
}

#gfx_maps{
  /* background: url(../images/bg_gfx_maps.gif) no-repeat; */
  width: 281px;
  height: 180px;
  position: absolute;
  right: 0;
  bottom: -40px;
}

#content_container{
  background: url(../images/bg_footer_container.gif) repeat-x #bdc132;
  text-align:center;
}
#content{
  width: 720px;
  padding-top: 50px;
  margin: 0px auto;
  text-align:left;
}


#footer_container{
  background: url(../images/bg_footer_container.gif) repeat-x;
  text-align:center;
}
#footer{
  width: 720px;
  margin: 0 auto;
  text-align:center;
  padding: 30px 10px 100px 10px;
}



/* ######################################################################### */
/* APPEARANCE */

/* navigation */
#navigation li{
  display: inline;
}
#header{
 color: #80806d; 
}
#header h1{
  padding-top: 120px;
  margin-bottom: 20px;
  font-size: 42px;
  font-weight: normal;
  color: #cdd237;
  background:url(../images/bg_h1_yasuni_rainforest.png) bottom left no-repeat; 
  width: 360px; height: 31px;
  text-indent: -7777px;
}

* html #header h1{
	padding-top: 120px;
	margin-bottom: 20px;
	font-size: 42px;
	font-weight: normal;
	color: #cdd237;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg_h1_yasuni_rainforest_2.png", sizingMethod="crop");
	background-position:bottom left;
	width: 360px; height: 31px;
	text-indent: -7777px;

}


#header h2{
  color: #cdd237;
  margin: 0;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 5px;
}
#header p{
  width: 340px;
  margin: 0 0 1em 0;
  font-size: 11px;
  line-height: 18px;
  color: #80806d;
}


/* content */
#content{
  color: #000;
  margin-bottom: 50px;
}
#content h1{
  font-size: 2em;
}
#content h2{
  color: #000;
  padding-top: 5px;
  margin: 0px 0 5px 0;
  font-weight: bold;
  font-size: 12px;
}
#content h3,
#content h4,
#content h5,
#content h6{
  font-size: 1.2em;
}
#content ul{
  list-style-type: square;
  margin: 20px;
}
#content ol{
  margin: 20px;
}
#content dl{
  margin: 20px;
}
#content abbr{
  border-bottom: 1px dotted #666;
}
#content strong{font-weight: bold;}
#content em{font-style: italic;}
#content p{
  margin: 0 0 1em 0;
  font-size: 11px;
  line-height: 16px;
}



/* FORMS */
#yasuni_message{
  float: left;
  background: #73741e;
  margin-right: 30px;
  color: #fff;
  width: 400px;
}
#yasuni_message .border{
  padding: 30px 20px 20px 20px;  
}
#yasuni_message textarea{
  width: 360px;
  height: 280px;
  color: #333;
}
#yasuni_message input{
  width: 360px;
  font-size: 30px;
  color: #333;
}
#yasuni_message h2{
  color: #fff;
  margin-bottom: 5px;
}
#yasuni_message h1{
  color: #bdc132;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 12px;
}
.footnote{
  font-size: 11px;
  font-style: italic;
  color: #ccc;
  padding: 10px 0 0 0;
}






.teaser {
	padding:0 0 0 11px;
	margin:10px;
	background:url("../images/tsr-l.gif") top left no-repeat #fff;
	float: left;
}
.teaser .tr {
	background:url("../images/tsr-r.gif") top right no-repeat;
	margin:0;
	padding:8px 0 0.5em 0;
}
.teaser .bl {
	margin:0 0 0 -11px;
	padding-left:11px;
	background:url("../images/tsr-l.gif") bottom left no-repeat;
}
.teaser .br {
	display:block;
	padding:0 10px 10px 0;
	background:url("../images/tsr-r.gif") bottom right no-repeat;
}





#country{
  width: 230px;
}

#yasuni_forms{
  float: left;
  width: 260px;
}
#yasuni_forms label em{
  font-weight: normal;
  color: #fff;
  font-size: 10px;
}
#new_protector{
  margin-top: 10px;
}
#new_protector label{
  display: block;
  font-weight: bold;
  margin-top: 10px;
  font-size: 11px;
}
#new_protector p strong{
  display: inline;
}

#new_protector .submit{
  margin-top: 20px;
  display: block;
}
#already_protector label{
  display: block;
  font-weight: bold;
  margin-top: 10px;
  font-size: 11px;
}



/* footer */
#footer p{
  font-size: 10px;
  color: #bdc132;
  text-align: center;
}


/* logo */
#logo a{
  display: block;
  width: 100px;
  height: 100px;
/*  text-indent: -7777px; */
}











/* WORKAROUNDS */

/* clearfix, put on block elements that contain floated elements */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* */