body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:#ffffff; font-family:arial, helvetica, sans-serif; font-size:76%; color:#444444; text-align:center;  }
form { padding:0; margin:0; }


/* ------------------ main div classes and ids -------------------------- */
#wrapper { text-align:left; min-width:900px; width:expression(document.body.clientWidth < 900? "900px": "auto" ); max-width:1000px; width:expression(document.body.clientWidth > 1000? "1000px": "auto" ); margin:0 auto 0 auto; }
/* WLT Bodybox fix - used in the left/right panes all over the place, so this is to disable the green BG in the content area.*/ 
.hidden { position:absolute; left:-9000px; } /* Used for skip navigation link */

/******************** banner **********************/
#strap  { position:absolute; top:25px; left:275px; } /* div container for "Saving Threatened Habitats Worldwide" strapline in banner */
#strap p { color:#999999; font-weight:bold; }
.pagetop { background:url(../../images/common/banner_bg_mountain.jpg) top right no-repeat; width:100%; position:relative; margin:0; padding:0; }
.pagetop img { margin:0; padding:0; }

/******************* main navbar ******************/
#mainMenuBar { background-color:#007766; height:30px; width:100%; margin:0; padding:0; overflow:hidden; /* This chops off any overhanging divs */ }
#mainMenuBar table { height:30px; }
#mainMenuBar table td a { color:#ffffff; font-size:1.1em; font-weight:bold; }
.menu1offoffTD { width:20px; background:url(../../images/common/mainnav-divider.gif) no-repeat; }

/************* breadcrumb container ***************/
#bcContainer { background-color:#114477; width:100%; height:20px; margin:3px 0 10px 0; }
.bc a:link, .bc a:visited, .bc a:active, .bc { font-size:x-small; white-space:nowrap; color:#ffffff; }
#bcContainer span { line-height:20px; } /* Setting Line Height equal to #bcContainer height makes text vertical centered. */ 

/************ main content container and sidebars **************/
#listing { 	position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ width:100%; }
td#nav-one { width:170px; vertical-align:top; background-color:#eeffdd; border:1px solid #666666; }
td#nav-two { width:160px; vertical-align:top; background-color:#eeffdd; border:1px solid #666666; }
td#mainpane { padding:10px 15px; vertical-align:top; }

/****************** footer navbar ******************/
#FOOTDIV, #FOOTDIV a, #FOOTDIV td { color:#ffffff; font-size:1em; }
#FOOTDIV { background-color:#668866; text-align:center; vertical-align:middle; white-space:nowrap; width:100%; height:30px; margin-top:10px; }
.menu3offoffTD { background:url(../../images/common/footnav-divider.gif) center center no-repeat; width:15px; }

/********** copyright at bottom of page ************/
#wltCopyright { margin:20px 0 20px 0; text-align:center; }
#wltCopyright p { color:#999999; }


/* ------------------universal styles -------------------------- */
* { font-size: 1em; } /* reset */
/* there seems to be some bizarre default size for tables, which means that text inside tables will be too large if not reset in this way - unless I have misunderstood something! */
/* The method of setting p to 1em and the body font size to 76% seems to produce good results overall. See: http://www.thenoodleincident.com/tutorials/typography/index.html */
h1 { font-size:1.6em; color:#007766; margin:0.2em 0 1.5em 0; }
h2 { font-size:1.4em; color:#007766; margin:0.7em 0 0 0; }
h2 a:link, h2 a:visited, h2 a:active { color:#007766; text-decoration:none; }
h2 a:hover { text-decoration:underline; } 
h3 { font-size:1.3em; color:#007766; margin:0.7em 0 0 0; }
h4 { font-size:1.2em; color:#007766; margin:0.7em 0 0 0; line-height:1.3 } 
h5, h6 { font-size:1.1em; color:#007766; margin:0.7em 0 0 0; line-height:1.3 }
p { font-size:1em; color:#444444; margin:0.3em 0 2em 0; line-height:1.6; }
a:link { color:#003399; text-decoration:none; }
a:visited { color:#663377; text-decoration:none; }
a:hover { text-decoration:underline; }
a:active { color:#dd8833; text-decoration:underline; }
span, div, table, th, td, li, dd { font-size:1em; color:#444444; }
ul { margin-top:0.3em; margin-bottom:2em; }
ul li, ol li { margin-top:0; margin-bottom:0.5em; }
img { border:0; }
div img, div div { overflow:visible; }
input { font-family:arial, helvetica, sans-serif; font-size:1em; } /* forms */
abbr, acronym, dfn { border-bottom:dotted 0.1em gray; }


/* ------------------specific text & img styles -------------------------- */
.wltAddress { margin:0.3em 0 2em 0; line-height:1.3; }
.navigation { font-size:0.8em; } /* for the links in the side panel and the top header links */
.caption { font-size:0.8em; line-height:1.3; color:#666666; } /* for image captions with smaller text. */
.small { font-size:0.8em; line-height:1.3; }
.smallish { font-size:0.9em; } /* same as newsfeed within bodybox/side panel in projects css */
.bodytxt { margin-top:0.3em; margin-bottom:2em; color:#444444; line-height:1.5; }
.bodytxtbold { font-weight:bold; color:#444444; line-height:1.5; }
.bigPaneLink, .pageTreeLink0 { font-weight:bold; }
.important, .star { font-weight:bold; color:#ff0000; } /* for alerts, error messages etc. */
.required { background-position:100% 0%; background-repeat:no-repeat; } /* for forms */
.btn { background-color:#007766; padding:6px; white-space:nowrap; color:#ffffff; text-decoration:none; font-weight:bold; border:2px #cccccc outset; }
.green { color:#007766; }
.superscript { vertical-align:super; font-size:60%; }
.righttext { margin:5px 0 0 140px; clear:right; }
.pictborder { border:1px solid #666666; padding:10px; }
.italictxt { font-style:italic; }


/* ------------------ other div classes and ids -------------------------- */
/**************** div box links ******************/
.sideBox a:visited, .bodyBox a:visited, .intro a:visited, .bottombox a:visited, .box2 a:visited, .projects-highlight a:visited { color:#2255bb; }
.sideBox a:active, .bodyBox a:active, .intro a:active, .bottombox a:active, .box2 a:active, .projects-highlight a:active { color:#dd8833; }

/************** div boxes ***************/
.headBox { background-color:#668866; padding:5px; }
.headBox h1, .headBox h2, .headBox h3, .headBox h4, .headBox h5 { color:#ffffff; font-size:1em; font-weight:bold; margin:0; padding:0; }
.sideBox { background-color:#eeffdd; margin:0; padding:5px; line-height:2.3em; }
.sideBox p  { color:#444444;  padding:0; margin:5px 0 10px 0; line-height:1.4; }
.sideBox h4  { color:#444444;  }
.bodyBox { background-color:#eeeeee; margin:0; padding:5px; line-height:2.3em; }
.bodyBox p { color:#444444; margin:5px 5px 10px 5px; line-height:1.4; } /* previously styled as .bodytxt but spacing too much in side panes with those settings */
.bodyBox h4 { color:#444444; margin-left:5px; }
.helpbox { width:170px; float:left; margin:10px 5px; padding:0; text-align:left; border:1px solid #666666; }
.helpbox img { position:relative; z-index:1; }
.featurebox { width:220px; float:right; margin:10px 0; padding:0; text-align:left; border:1px solid #666666; }
.introbox { background-color:#eeeeee; margin:0; padding:0; border:solid 1px #666666; }
.intro { font-size:1.1em; margin:0; padding:15px; color:#444444; line-height:1.9; }
.box { background-color:#ffffff; border:1px solid #666666; margin:0 0 10px 0; padding:7px 7px 15px 7px; height:auto; }
.box h3, .box p { margin-top:0; margin-bottom:10px; }
.box2 { background-color:#eeeeee; padding:7px; margin:20px; }
.bottombox { background-color: #eeeeee; border:solid 1px #666666; }
.quotebox { margin:2px; padding:5px; height:auto; width:auto; border:1px solid #666666; color:#007766; }
.quotebox p.green {margin:5px 5px 10px 5px; }
.donationbox { width:90%; border:thin outset #666666; text-align:center; vertical-align:middle; margin:50px 0 70px 0; padding:10px; }
.donationbox2 { width:90%; border:thin outset #666666; text-align:center; vertical-align:middle; margin:0 0 30px 0; padding:5px 10px; }
.projects-highlight {width:20em; float:right; clear:right; text-align:center; padding:5px; margin:5px; background-color:#eeeeee; border:1px solid #666666; }
.projects-highlight img { margin:5px; }
.projects-highlight rkButton { margin:0; padding:5px; text-align:center; clear:right; }
.clear { margin: 0 0 10px 0; } /* prev. 30px r-hand margin, not sure why. Clear no longer works with the style below, so is probably now redundant */

/****************** donate button ******************/
.rkButton { position:relative; padding:10px 15px 10px 0; white-space:nowrap; margin:-50px 0 0 0; z-index:5; text-align:center; }
.rk2Button { position:relative; padding:10px 15px 10px 0; white-space:nowrap; margin:0; z-index:5; text-align:center; }
.rkButton a:link, .rkButton a:visited, .rk2Button a:link, .rk2Button a:visited { background-color:#007766; padding:5px; white-space:nowrap; font-weight:bold; border:2px #cccccc outset; color:#ffffff; }
.rkButton a:hover, .rk2Button a:hover { color:#ffffff; }
.rkButton a:active, .rk2Button a:active { border:2px #cccccc inset; color:#ffffff; }

/****************** table classes ******************/
table.standard { border:1px solid #666666; background-color:#eeeeee; }
table.standard td { padding:5px; margin:0; line-height:normal; }
table.standard h3 { margin-top:14px; }
table.standard td.right { text-align:right; }
table.bordered { width:90%; border-collapse:collapse; border-spacing:0; border:1px solid #666666; text-align:left; }
table.bordered caption { padding:5px; background-color:#99bb88; color:#ffffff; font-weight:bold; font-size:1.3em; margin:2px 0 0 0; border:1px solid #666666; }
table.bordered th { padding:5px; background-color:#eeeeee; font-size:1.2em; font-weight:bold; color:#007766; margin:7px 0 0 0; border:1px solid #666666; }
table.bordered td { padding:5px; margin:5px 0 10px 0; border:1px solid #666666; }
table#twoevencols td.nocolspan { width:33%; }
table#threeevencols td.nocolspan { width:25%; }
table.donatetable td { border:thin outset #666666; margin:2px; padding:10px; vertical-align:top; }
table.donatetable td.noborder { border:0; margin:0; padding:0; }
div.donatetable { border:1px solid #666666; margin:15px 15px 20px 15px; width:265px; padding:15px; }
	
/****************** newsfeed styles ******************/
div.newsfeed { margin-bottom:2em; } 
.bodyBox .newsfeed { font-size:0.9em; } /* same as smallish in main css */
div.newsfeed p{ margin-bottom:0; } 
div.newsfeed .datefield { font-style:italic; } 
div.newsfeed h3 { margin-top:1.5em; }
div.newsfeed h4 { margin-top:2em; }
div.detailedfeed div { padding:0.5em 0.5em 0.5em 0; margin-bottom:0.5em; margin-top:0; line-height:1.6; }
div.detailedfeed a.titlefield { font-size:1.1em; font-weight:bold; color:#444444; margin-bottom:0; margin-top:0.7em; padding-top:0.5em; display:block; border-top:#666666 thin solid; } /* essentially same as H5 formatting */
div.detailedfeed a.titlefield:hover { color:#007766; }
div.detailedfeed a.titlefield:active { color:#dd8833; }
div.detailedfeed .labelfield { font-weight:bold; }
div.simplefeed ul, ul#twitter_update_list { padding:0; margin:0; }
div.simplefeed li, ul#twitter_update_list li { padding:0 0 0.5em 0; margin:0 0 1em 0; line-height:1.6; list-style-type:none; border-bottom:#007766 thin dashed; }