/*Important! Always have this margin default set at the beginning of CSS sheets. It stops browsers from showing margins differently*/
 * {margin:0; padding:0} 

/*height at 100% is needed to stretch vertical height as needed*/
 body {
 text-align: center;
 background-image: url(images/backgrnd_brown_opt.jpg);
 background-attachment: fixed;
 background-color:#666;
 background-repeat: repeat-x repeat-y;
 background-position: left top;
 }
 
html {
height: 100%;
 }
 
 /*minimum height in % is to ensure footer will stay in place, pages will only be as long as content. If height is changed to px, then footer will be out of place!*/  
#wrapper {
width: 920px;
background: #fff8df;
min-height: 100%;
 margin: 0 auto -130px;
 height: auto !important;
 text-align:left;
 border-style: solid;
 border-width: 0px;
 border-color: #c66806;
 overflow:auto;
 }
 
  #branding {
float:left;
 width:920px;
 top:0px;
 left:0px;
 margin-bottom:0px;
 background:url(images/nwwetlandrestoration.jpg) no-repeat;
 height: 134px;
}

 #leftbutton {
float:left;
 width:250px;
 top:10px;
 left:10px;
 margin-bottom:0px;
 background:url(images/nwwetlandrestoration.jpg) no-repeat;
 height: 134px;
}

 /*footer, footerright, footertext and push are all in sync so the footer will work correctly. Take notes before changing! Customized "new sticky css footer code" (google it) for this.*/


 /*If need more room for footer text, go into Fireworks and adjust image in graphic file upwards*/
.footertext {
padding-top: 100px;
padding-left: 40px;
}

.push {
clear: both;
height: 105px;
background: url(images/footer_right_opt.png) no-repeat;
}

/*end of footer code*/
 
/*This footer works fine for the home page that has no columns*/
 #footer {
 float: right;
 width: 500px;
 height: 72px;
background: url(images/footer_home_opt.png) no-repeat;
  }
  
 
/*text indent, backgrnd repeat and overflow hidden are needed so the logo can become a link*/
#logo {
float:right;
width: 144px;
height: 129px;
background: url(images/logo_temp.png) no-repeat;
margin-top: -129px;
margin-right: 85px;
}

/*class of block is needed to make logo a link-- see bannernav.txt*/
.block {
display: block;
width: 144px;
height: 129px;
overflow: hidden;
text-indent: -9999px;
}

/*class of block is needed to parks button a link-- see bannernav.txt*/
.block2 {
display: block;
width: 160px;
height: 160px;
overflow: hidden;
text-indent: -9999px;
}

#nav{
margin: 0;
padding:0;
width: 920px;
height:30px;
float:left; 
list-style:none;
background: url(images/tab_up.png);
font-size:.9em;
font-family: Tahoma, sans-serif;
}

#nav a{
display:block;
float:left;
width: 120px;
text-align:center;
color: #000;
line-height:200%;
text-decoration: none;
height: 30px;
}

#nav li {
margin:0;
padding:0;
float:left;
}

#nav a:hover
{
background:url(images/tab_over.png);
height: 30px;
}

/*This is to facilitate change in look of active tab*/
#body_hom #nav_hom a,#body_befor #nav_befor a, #body_ref #nav_ref a, #body_bio #nav_bio a, #body_contact #nav_contact a, #body_horses #nav_horses a,#body_index #nav_index a {
background: url(images/tab_current.png);
color:#000;
height: 30px;
}

#subnav {
float:left;/*needed for ie to have correct spacing*/
margin-top:70px;
padding:0px;
width:225px;
height:300px;
list-style-type:none;
}

/*this styles and activates the hover text in the left nav for the horses page*/
ul.linkpopup li {position: relative;}
ul.linkpopup li a i {display:none;}
ul.linkpopup li a:hover i {display: block; width: 10em; position: absolute; top: 0; left: 100%; margin:.4em 0 0 -13em; padding: .5em;
background: #e8e8e8; border: 0px solid gray; line-height: 90%;}

#subnav li {
padding-left:25px;
float:left;/*This corrects the*/
width:100%;/*ie whitespace bug*/
}

#bulletedlist li{
background:url("images/favicon_opt.png") no-repeat;
padding-left: 20px;
font-size: 0.8em;
line-height: 2 em;
font-family: Tahoma, sans-serif
}

#subnav a {
display:block;/*this expands clickable area*/
width: 190px;
line-height:30px;/*when line height and height are 30px each this centers text vertically*/
color: #000;
border-top:2px solid #c1ceaa;
text-decoration: none;
height: 30px;/*when line height and height are 30px each this centers text vertically*/
padding-left:15px;
font-family:Tahoma, sans-serif;
font-size: .8em;
}

/*this provides the staff bios text in the about us page*/
.biocategory {
display:block;/*this expands clickable area*/
width: 190px;
color: #000;
border-top:2px solid #e8e8e8;
text-decoration: none;
padding-left:15px;
font-family:Tahoma, sans-serif;
font-size: .8em;
}

.bio1 {
margin-left: 30px;
}

#subnav a:hover{
	background:#FCEFCD;
	color: #060;
}

#navheader {
	float:left;/*idea from mainx.css*/
	margin-top:80px;
	padding:10px 0px 0px 25px;
	font-family:Tahoma, Arial, sans-serif;
	font-size:2em;
	width:205px;
	color:#004000;
}

#leftcolumn {
float:left;
width: 230px;
height: 600px;
}

#rightcolumn {
float: right;
margin-top:40px;
margin-right: 20px;
max-height: 1000px;/*needed to stretch vertical height as needed*/
width:600px;
}

#slideshow {
float:left;
margin:60px 0px 20px 20px;
padding-right: 100px;/*important! without this you can't align the swf!*/
width: 476px;
height: 253px;
}

/*this provides a spacer at the top of the page*/

#spacer63 {
width: 500px;
height: 63px;
}

/*these style the right column into subcolumns*/ 

#subleftcol {
float: left;
width:230px;
padding: 20px 0px 0px 20px;
overflow: auto;
}

#subrightcol {
float: right;
margin-right: 90px;
width: 230px;
padding: 20px 0px 20px 0px;
overflow:auto;
}

#broadrightcol {
float: left;
margin-top: 0px;
width:500px;
padding: 0px 0px 0px 10px;
border-left: solid 15px #004000;
overflow: auto;
}

#broadrightcoldot {
float: left;
font-weight: bold;
width:490px;
padding: 0px 0px 0px 5px;
border-left: dotted 3px #853140;
overflow: auto;
}

#paradot {
float: left;
color: #FFF;
width:300px;
padding: 0px 0px 0px 5px;
border-left: dotted 3px #ff9900;
overflow: auto;
}
.colorsubhead {
float: left;
font-weight: bold;
font-size: 1.2em;
color: #4b5c30;
}

#broadrightcoldot2 {
float: left;
font-weight: bold;
width:490px;
padding: 0px 0px 0px 5px;
border-left: dotted 3px #853140;
overflow: auto;
}

#broadrightcoldot3 {
float: left;
font-weight: bold;
width:490px;
padding: 0px 0px 0px 5px;
border-left: dotted 3px #853140;
overflow: auto;
}

#broadrightcolplain {
margin-top: 20px;
width:500px;
padding: 0px 0px 0px 0px;
}

#clear {
clear:both;
}

/*styling for home page*/ 

#homebanner {
float: left;
width: 877px;
margin: 10px 0px 0px 20px;
height: 250px;
}

/*styling for image shadows*/
.img-wrapper {
clear: right;
background: url(images/shadow.png) no-repeat bottom right;
float: left;
margin: 60px 0px 20px 60px;
width: 405px;
height: 305px;
overflow: auto;
}

.img-wrapper img {
display: block;
width: 400px;
height: 300px;
margin: -2px 0px 0px -3px;
position: relative;
}

.img-wrapper2 {
clear: right;
background: url(images/shadow2.png) no-repeat bottom right;
float: left;
margin: 60px 0px 20px 90px;
width: 307px;
height: 349px;
overflow: auto;
}

.img-wrapper2 img {
display: block;
width: 302px;
height: 343px;
margin: -2px 0px 0px -3px;
position: relative;
}

.img-wrapper3 {
clear: right;
background: url(images/shadow3.png) no-repeat bottom right;
float: left;
margin:90px 0px 0px 100px;
width: 505px;
height: 122px;
overflow: auto;
}

/*for schedule
 page image*/
.img-wrapper3 img {
display: block;
width: 500px;
height: 117px;
margin: 0px 0px 0px -3px;
position: relative;
}

/*used for Jean and Gary's bio photo*/
.img-wrapper4 {
float: right;
width: 210px;
margin:5px 0px 0px 0px;
}

#calendarbtn
{
  display: block;
  float: right;
margin:5px 50px 0px 0px;
   width: 159px;
  height: 39px;
  background: url("images/calendar_btn_opt.png") no-repeat 0 0;
}

#calendarbtn:hover
{ 
  background-position: 0 -39px;
}

#calendarbtn span
{
  display: none;
}

#testimobtn
{
  display: block;
  float: right;
margin:10px 28px 0px 0px;
   width: 184px;
  height: 43px;
  background: url("images/testimonial_btn_opt.png") no-repeat 0 0;
}

#testimobtn:hover
{ 
  background-position: 0 -44px;
}

#testimobtn span
{
  display: none;
}

.pullquote {
padding: 10px;
float: right;
width: 200px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 15px;
margin-right: 25px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #336600;
border-bottom-color: #336600;
font-size: 16px;
text-align: center;
line-height: 1.8em;
font-family: Arial, Helvetica, sans-serif;
color: #335500;
font-style: italic;
font-weight: normal;
clear:left;
}

.img-wrapper5 {
float: right;
margin: 40px 40px 5px 20px;
overflow: auto;
}

.img-wrapper6 {
float: left;
margin: 7px 13px 0px 0px;
}

/*used for Waldo photo in visitor's comment on home page*/
.img-wrapper7 {
float: right;
margin:0px 0px 0px 0px;
}

#homecontentleft {
float: left;
margin: 15px 0px 0px 20px;
width: 296px;
height: 320px;
background: #ffffff;
border-style: solid;
border-width: 2px 0px 2px 2px;

}

#homesidebar {
	float: left;
	padding: 10px 15px 10px 20px;
	width: 300px;
	height: auto;
	margin: 14px 0px 26px 20px ;
	background-color: #000;
	border-style: solid;
	border-color: #d07f1c;
	border-width: 2px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

#homecontentleft2 {
float: left;
margin: 8px 10px 0px 20px;
padding: 0px 20px 10px 10px;
width: 255px;
height: 270px;
background: url(images/triangle_258w_opt.jpg) no-repeat;
}

#homecontentright2 {
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 10px 0px 10px;
width: 550px;
border: solid 2px;
border-color: #decfd0;
height: 270px;
background: url(images/background_340h_grey.png) repeat;
}


#homecontentright {
float: right;
margin: 15px 23px 0px 0px;
padding: 0px 10px 0px 10px;
border: solid 2px;
border-color: #decfd0;
width: 258px;
height: 320px;
background: url(images/background_340h_grey.png) repeat;
}


#homebuttonleft {
	float:right;
	margin: 30px 10px 5px 5px;
	width: 160px;
	height: 180px;
	background: url(images/wetland_btn_opt.png) no-repeat;
}	
	
#homebuttonmid {
	float: right;
	margin: 30px 10px 5px 5px;
	width: 160px;
	height: 180px;
	background: url(images/parks_btn_opt.png) no-repeat;
}	

#homebuttonright {
	float: right;
	margin: 30px 20px 5px 10px;
	width: 160px;
	height: 180px;
	background: url(images/pathways_btn_opt.png) no-repeat;
}	


#bioeducation {
float: right;
margin: 12px 8px 20px 0px;
padding:5px;
width: 475px;
border: solid 2px;
border-color: #decfd0;
height: 100%;
background: url(images/background_340h_grey.png) repeat;
}


/*text styling*/ 
h1 {
clear: both;
font-family:Tahoma, Arial, sans-serif;
font-size:1.5em;
color:#004000;

}


.leadletter {
font-family:Tahoma, Arial, sans-serif;
font-size: 1.5em;
color:#853140;
}

.link {
text-decoration: none; 
font-weight: normal;
color: #004276;
}
#pseudoh1 {
font-family:Tahoma, Arial, sans-serif;
font-size:1.5em;
font-weight: bold;
color:#004000;
margin-top: 63px;
}

#pseudoh1-2 {
font-family:Tahoma, Arial, sans-serif;
font-size:1.5em;
font-weight: bold;
color:#004000;
margin-top: 93px;
}

h2 {
font-family:Tahoma, Arial, sans-serif;
font-size:1.2em;
color:#004000;
}

h2.bar {
color: #000000;
margin: 0px 10px 0px 0px;
text-align: center;
color: #fff;
color:#004000;
border-width: 0px;
border-style: solid;
border-color: #000;
}

h2.kern {
color: #4b5c30;
letter-spacing: -0.07em;
}

h2.bar2 {
background: #5b5c30;
color: #000000;
padding: 5px 0px 5px 0px;
text-align:center
}


h3 {
font-family:Tahoma, Arial, sans-serif;
font-size:.8em;
color:#853140;
}

h1.tableheader {
float: right;
width: 500px;
margin:30px 0px 0px 0px;
overflow: auto;
}

h1.testimonial {
font-size: .8em;
font-weight: bold;
color:#853140;
}

p {
font-size: 0.8em;
line-height: 1.4em;
font-family: Tahoma, Arial, sans-serif;
padding-bottom:7px;
}

p.white {
line-height: 175%;
color: #FFF;
}

p.thick {
font-weight: bold;
padding-bottom: 0px;
}

p.indent23 {
padding-left: 23px;
}

p.indent200 {
padding-left: 200px;
}

p.schedule {
font-size: 1em;
font-family: Tahoma, sans-serif;
}


p.margin10 {
font-size: 0.8em;
line-height: 1.4em;
font-family: Tahoma, Arial, sans-serif;
margin:10px;
}


p.italic {
font-style:italic;
} 

p.spaceabove {
margin-top: 15px;
}

/*table styling and schedule page*/ 

#rightcolumnsched {
float: right;
margin-top:10px;
margin-right: 20px;
height: 600px;
width:600px;
overflow:auto;/*important for floats-makes them do what they should, fills up the space*/
}

#schedintro {
float: right;
margin: 20px 20px 0px 0px;
width:600px;
}

.tablefont {
font-size: 1em;
}


#descdiv1 {
display: none;
background:none;
}

#descdiv2 {
display: none;
background:none;
}

#descdiv3 {
display: none;
}

#descdiv4 {
display: none;
padding: 0px;
}

#descdiv5 {
display: none;
padding: 0px;
}

caption {
font-family: Tahoma, sans-serif;
font-size: .5em;
letter-spacing: .2em;
}

table {
margin-top:10px;
margin-bottom: 15px;
table-layout: auto;
border: 2px solid #734651;
border-collapse: collapse;
}


th {
background: url(images/th.png);
color: #fff;
padding:.7em 0.4em .7em 0.4em;
font-weight: bold;
font-size: 1em;
font-family: Tahoma, sans-serif;
text-align:left;
white-space:nowrap;
}

tbody td, tbody th {
padding: 0em 0.4em 0em 0.4em;

}

tbody tr {
background: #ecd7e7;
font-size: 0.8em;
font-family: Tahoma, sans-serif;
}

tbody tr:hover {
   background: #fff;
}

.tabledate {
width: 150px;
text-align:left;
white-space: nowrap;
}

.tablename {
width: 350px;
text-align:left;
white-space: nowrap;
}

.tabletextbegin {
width: 350px;
text-align:left;
}

.tabledescription {
width: 100px;
text-align:left;
white-space: nowrap;
}

td {
padding: 0px 0px 0px 0px;
}

#tablerightcol {
float: left;
margin-top: 0px;
width: 550px;
padding: 0px 0px 0px 10px;
}

.oddentry {
background: #eeeeee;
}

#rightcolumn {
float: right;
margin-top:40px;
margin-right: 20px;
width:600px;
overflow:auto;/*important for floats-makes them do what they should, fills up the space*/
}

#schedulebuttons {
float: right;
margin: 10px 20px 0px 0px;
width: 550px;
overflow: auto;
}

.labelformat {
float: left;
text-align:left;
margin: 0px 10px 0px 20px;
}

.fieldformat1 {
float: left;
margin: 0px 0px 0px 20px;
}

.fieldformat2 {
float: left;
margin: 0px 0px 0px 13px;
}

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

legend {
width: 26em;
}

.contactform {
margin:20px 0px 0px 20px;
}