/*Elements - generics set here*/
html>body li, html>body dd    {
    font-size:    inherit;
    /* be nice to Opera */
    }


*, html{font-size: 100%;margin: 0;padding: 0;}


body{
	background:#e6f0fa;
	font-family:Arial, Helvetica, Sans-Serif; 
	/*Use percentages for font sizes.  Ems don't scale properly in IE, pixels are really frowned upon in DDA.*/
	font-size:0.8em; 
	color:#505050; 
	margin: 0;
	padding: 0;	
   /*For IE 5*/
   text-align:center;
}

h1{font-size: 1.1em;font-weight: bold;color:#006600;margin-top: 1em;margin-bottom: 10px;}
h2{font-size: 1em;font-weight: bold;color:#006600;margin-top: 1em;margin-bottom: 6px;}
h3{font-size: 0.9em;font-weight: bold;color:#006600;margin-top: 1em;margin-bottom: 4px;}
h4{font-size: 0.9em;font-weight: normal;color:#006600;margin-top: 1em;margin-bottom: 4px;}
ul{margin-left: 2em;list-style-type: square;}

br{height:1em;}
hr{/*clear:left;*/}
img {border:0;}
a:link, a:active, a:visited{color: #006600;}
a:hover{color: #f36c09;}

a.nav:link {color: #006600;text-decoration: none;}
a.nav:visited {color: #006600;text-decoration: none;}
a.nav:hover{color: #f36c09;}


/*
Named elements and their offspring 
- Elements should have unique names 
- it's an XML thing. Every ID should be different #'s reference ID attributes in HTML.
*/

#outerDiv{
	/*This centres in Mozilla and IE too (mainly makes up for shortcomings in IE).*/
	margin: 0 auto;   
   /*For IE 5*/
   text-align:left;	
   
 	width: 777px;
 	background: #ffffff ;	
   /*overflow: -moz-scrollbars-none;*/	
}

#left{
	float:left;
	width: 160px;
	padding-left: 3px;
       padding-right:2px;
}

#logoimage{
	float:left;
	width: 63px;
	padding-top: 15px;
	padding-left: 4px;
       padding-right:0px;
}

#right{
   float: right;
   width: 610px;
   width/* */: /**/606px;
   
   padding-right:2px;
   padding-left: 2px;
   padding-top: 2px;

}

#mainCont{
	float:left;
	width: 470px;
	padding-left: 0px;
       padding-right:0px;
       padding-top: 2px;
}

#rightPanel{
   float: right;
   width: 132px;
   width/* */: /**/129px;
   
   padding-right:0px;
   padding-left: 0px;
   padding-top: 0px;
}

#right a:hover{
   text-decoration: underline;
}

#topStrip{
   height: 12px;   
   padding-top:2px;
   padding-right:0px;
   padding-bottom:10px;
   padding-left:22px;
   margin-right:0px;
   margin-left:2px;
}

 
/*The following rules set the style of the top navigation to the right of the logo*/
#topStrip ul{ 
   font-size: 1.0em;/*% font sizes break Opera (including 8)*/
   margin-left:0;/*Required to override the default rule*/
   list-style-type: none;
   float:right;
   margin-top:6px;
   margin-bottom:0px;
   margin-right: 4px;
   font-weight:bold;
}

#topStrip ul li{
   display:inline;
   border-left:2px solid #1a2c50;
   padding-left:0.5em;
   padding-right: 0px;
   padding-bottom:1px;
   /*This rule necessary for IE 5.  Padding and margin won't work without it.  Nor will border-left*/
   float: left;
   float/* */: /**/none;
}
#topStrip ul li img{vertical-align: bottom;}

#topStrip ul li:first-child{border: none;/*Works in modern standards-compliant browsers only - Not IE*/}

#topBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/home.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topNewsBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/news.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topSupportBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/support.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topCorporateBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/corporate.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topVolunteeringBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/volunteer.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topReservesBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/reserves.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topPeopleBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/people.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topEventsBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/events.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topEducationBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/education.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topConservationBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/conservation.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topWildlifeBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/wildcall.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topProtectionBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/wildlife.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}


#topJobsBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/jobs.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topAboutBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/aboutus.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topContactBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/contactus.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topLinksBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/links.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topHolidaysBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/holidays.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topCommunityBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/community.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#topYoung_peopleBanner{
	padding: 3px 0 3px 3px;
       height: 120px;  
	margin: 0 2px 0 2px;
	background: url(/images/banners/youngpeople.jpg) bottom repeat-x;
	color: #ffffff;
       font-weight:bold;
	font-size: 140%;
}

#bannerText{
           margin: 47px 0 0 0;
           padding-left:4em;
           padding-top:2px;
           text-align:left;
}
#bannerTextLeft{
           float: left;
}
#bannerTextRight{
           float: right;
           margin:0 4px 0 0;
           padding-left:10em;

           text-align:right;
}
#newsStrip{
   margin-right:2px;
   margin-left: 2px;
   margin-top: 2px;
   padding-left: 4px;
   padding-top: 5px;
   font-weight:bold;
   background: #007c00 ;
   /*This rule necessary because of the required float:left for IE5*/
   height:25px;
}

/* Left side navigation */


#leftBox{ 
   /*IE5 box model hack.*/
   margin-left:2px;
   margin/* */:/**/0px;   
   
   border-top: 1px solid #1a2c50;
   
   margin-top: 5px; 
   margin-bottom: 2px;	
   font-size: 1em;
}

#leftBox ul{
   margin-left:0;/*Required to override the default rule*/
   margin-top: 0px;
   margin-bottom: 0px;
   list-style: none;
   padding-top:1px;
   padding-right:0px;
   padding-bottom:1px;
   padding-left:0px;
   font-size: 0.95em;/*% font sizes break Opera (including 8)*/
}

#leftBox ul li{
	background: url(/images/blue_select.gif);
	padding-left: 15px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	margin: 4px 0px 4px 0px;
	padding-bottom: 4px;
	border-bottom: 1px solid #1a2c50;
	
}
#leftBox ul li.selected{
	background: url(/images/orange_select.gif);
	padding-left: 15px;
	color: #f36c09;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	margin: 4px 0px 4px 0px;
	border-bottom: 1px solid #1a2c50;
}

#leftBox ul li a{font-weight: bold;}
#leftBox ul li strong a{font-weight: bold;}
#leftBox ul li a:hover{text-decoration: none;}
#leftBox ul li.selected a{font-weight: normal;color: #f36c09;margin-left:5px; }
#leftBox ul li.selected a:hover{font-weight: normal;color: #1a2c50;margin-left:5px; }
#right p{margin-bottom: 10px;}



#breadcrumb ul{
   margin: 0;
   list-style-type: none;
}

#breadcrumb ul li{
   display: inline;
   font-size: 90%;
}

#footer{
   display: inline;
   font-size: 90%;
}
/*Classes - these are used many times*/

.items{
   padding: 0px;
   clear:right;
   width: 470px;  

}
.center{text-align:center;}
.floatRight{float:right;}
.floatLeft{float:left;}
.floatContainer{clear:both;}
.inputBox{width: 100px;font-size: 90%}
.button{font-size: 90%}

.item{
   clear:both;
   margin-top: 0px;
   border: 1px solid #c0c0c0;
   padding: 0px;
   margin-bottom:5px; 
   background-color:white;
}

.divider{
    border-top: 1px solid #c0c0c0;
}

.rightBox{ /*This is pretty much the same as siteSearch but with a background colour*/
   /*IE5 box model hack.*/
   margin-left:0px;
   margin/* */:/**/0px; 
   
	margin-top: 3px; 
	margin-bottom: 2px;	
	font-size: 95%;
	padding:2px;
	background: #c9d4e6;
}

.rightBoxTitle{
    font-size:110%;
    font-weight: bold;
    color: #1a2c50;
    margin:2px;
}

.rightBoxText{
    font-weight: normal;
    color: #1a2c50;
    margin:2px;
}
.clear{
    clear:both;
}

.leadImg {
   float:left;
   width: 60px;
   /*148*/
}
.itemImg {
   float:left;
   width: 60px;
}
.itemBlock{
    padding: 3px;
}

.tagline{
   font-size: 85%;
  font-family:Courier, Sans-Serif; 
  margin: 2px 2px 3px 2px;

}

.itemTitle{
   /*font-color: #1a2c50;*/
   font-color:#006600;
   font-size: 120%;
   font-weight: bold;
   margin: 0px0px 0px0px;
}

.leadItemText{
   float:right;
   width: 350px;
    /* 300px */

}

.itemText{
   float:right;
   width: 350px;
}
.itemTextNoImg{

}

.small{
   font-size: 85%;
}


/*for plain pages, eg. CMS pages.*/
#plainSimple{
	/*This centres in Mozilla and IE too (mainly makes up for shortcomings in IE).*/
	margin: 0 auto;   
   /*For IE 5*/
   text-align:left;	
   
 	width: 900px;	
   /*overflow: -moz-scrollbars-none;*/	
}


.cmsbody{
	background:#ffffff; 
	font-family:Arial, Helvetica, Sans-Serif; 
	/*Use percentages for font sizes.  Ems don't scale properly in IE, pixels are really frowned upon in DDA.*/
	font-size:0.8em; 
	color:#505050; 
	margin: 0;
	padding: 0;	
   /*For IE 5*/
   text-align:center;
}

table.listing,
div.stx table {
    /* the default table for document listings. contains name, document types, modification times etc in a file-browser-like fashion */
    border-collapse: collapse;
    border-left: 1px solid #004000;
    border-bottom: 1px solid #004000;
    font-size: 90%;
    margin: 1em 0em 1em 0em;
    clear: both;
}

table.listing th,
div.stx table th {
    background: #cfe9d3;
    border-top: 1px solid #004000;
    border-bottom: 1px solid #004000;
    border-right: 1px solid #004000;
    color: black;
    font-weight: normal;
    padding: 0em 1em 0em 1em;
    text-transform: lowercase;
    white-space: nowrap;
}

table.listing td.top {
    border-left: 1px solid white;
    border-top: 1px solid white ! important;
    border-right: 1px solid white ! important;
    text-align: right ! important;
    padding: 0em 0em 1em 0em;
    /* insane ie row bug workaround */
    position: relative;
    left: -1px;
    top: -1px;
}

table.listing tr.odd {
    /*every second line should be shaded */
    background: transparent;
}

table.listing tr.even {
    background: #f7f9fa;
}

table.listing td,
div.stx table td {
    border-right: 1px solid #004000;
    padding: 0em 1em;
    text-align: left;
}

table.listing a:hover {
    text-decoration: underline;
}

table.listing img {
	vertical-align: middle;
}
input.noborder {
    border: none;
    margin: 0;
    background-color: transparent;
}

.otherbutton{
   width: 80px;
   border: 1px solid #C0C0C0;
   color: #8B8A8A;
   background: url(/images/btn_back.gif) top repeat-x;
   font-weight: bold;
   font-size: 0.8em;/*% font sizes break Opera (including 8)*/
   font-family: Tahoma, Arial, Helvetica, Sans-Serif;
   height: 17px;
}

.yellowBox{ /*This is pretty much the same as siteSearch but with a background colour*/
   /*IE5 box model hack.*/
   margin-left:0px;
   margin/* */:/**/0px; 
   
	margin-top: 3px; 
	margin-bottom: 2px;	
	font-size: 95%;
	padding:2px;
	background:#FFFFCC;
	border: 1px solid black;
}
.events{
    clear:left;
    margin-left:10px;   
    margin-right:10px;
    color:#505050; 
    }
.eventDate{
    margin: 0;
    padding: 2px; 
    float:left; 
    width: 100px; 
    }
    
.eventDetail{margin: 0;padding: 2px; float:left; width: 200px;}
.eventLocation{margin: 0;padding: 2px; float:left; width: 100px;}
.eventRowLight{background:#F4F5F9;}
.event100Light{background:#F4F5F9;padding:2px;color:#505050;  width: 100px; float:left;}
.eventDetailLight{background:#F4F5F9;padding:2px;color:#505050; width: 200px; float:left;}

.eventRowDark{background:#DEE2ED;padding:2px;}
.event100Dark{color:#505050; float:left; width: 100px;padding:2px;}
.eventDetailDark{color:#505050;  float:left; width: 200px;padding:2px;}

.title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #006699;
	text-align: left;
}
.bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: disc;
	color: #000000;
	font-style: normal;
	font-weight: normal;


}
.imagecredit {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.subheading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.blueheading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #336699;
	margin-top: 1em;
	margin-bottom: 6px;
}
.eventtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #006699;
}
.jobheader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

.event{
        margin-left:7px;
        margin-right:7px;
    }
    
.event_title{
        color:#731717; 
        font-weight:bold; 
        font-size:110%;
}

.course{
        margin-left:7px;
        margin-right:7px;
    }
    
.course_title{
        color:#5d7a5c; 
        font-weight:bold; 
        font-size:110%;
}