body{
	border:0; 
	margin:0; 
	padding:0; 
	min-width:740px; 
	text-align:center; 
	background-color:#CFE5FD;
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	}

img{border:0; margin:0; padding:0;}

a {
	color: red;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#backwrap {
   position: relative;
   text-align: left;
   margin-left: 0;
   margin-right: 0;
   padding: 0;
   border: 0;
   background-image: url(../core_images/tree_background_bottom_repeat.jpg);
   background-repeat: repeat-y;
   width:1200px;
}


#outerwrapper {
   position: relative;
   text-align: left;
   margin: 0;
   padding: 0;
   border: 0;
   overflow: hidden; /* needed to prevent a gap appearing at the top in Firefox*/
   background-image: url(../core_images/tree_background2.jpg);
   background-repeat: no-repeat;
   /*the width needs to be the width of the background image*/
   /*if not, when the browser is resized, bits of the image will be chopped off*/ 
   width: 1200px;
}

/*banner positioning*/

#banner{
	 position:relative; 
	 left:0px;
	 top:5px; 
	 padding:0; 
	 margin:10px 10px 0px 10px; 
	 border:0;
	 height:92px;
	 }

#banner div.strapline_quote{
	position: absolute;
	right:430px;
	top:63px;
	font-size: 10pt;
	font-style: italic;
}


/*main part of page boxes*/
	    
#outerbox{left:0px;
	     margin:4px 0 0 0;
	     text-align: left;
	     border:0;
	     padding:0;
	     width:772px;
	     background-color: transparent;
	     position:relative;
	     }

#wrapper{
	     border:0;
	     padding:0;
	     margin:0;
	    }

/*min-height hack, see: http://www.webdevelopment2.com/ie-css-min-height-hack/ */

#leftbox{
	float:left;
	    padding: 0px;
	    width:136px;
	    background-image: url(../core_images/left_menu.png);
	    background-repeat: no-repeat;
	    margin-top:2px;
	    margin-left:4px;
	    margin-bottom:0px;
	    min-height: 540px;
	    height: 540px;
	    }

/*IE6 doesn't see this, here we adjust the layout back to what it should be:*/
html > body #leftbox {
	height: auto;
	margin-left: 7px;
}
    
#mainbox{float:right;
	    padding: 0px;
	    width:620px;
	    top:0px;
	    margin-top: 4px;
	    min-height: 520px;
	    height: 520px;
	    margin-bottom:10px;
	    }

html > body #mainbox {
	height: auto;
}

#contentbox{
	    padding:0;
	    }

/*IE6 is doing very strange things with this border: so made available for non-IE6 browsers:*/

html > body #contentbox {
	    border-style: solid; 
	    border-color: white;
	    border-width: 1px;
	    border-width: 0px 1px 1px 1px;
	    /*this gets IE to recompute the height of this block when the window is scrolled up or down:*/
	    overflow: hidden;
}


#navbar { 
	background-image: url(../core_images/nav_bar3_ie6_30px.png);
	background-repeat: no-repeat;
	margin-bottom: 0px;
	height: 30px;
	width: 620px;
	}

/*
The image used is sized specifically for IE6, this is fine for other browsers though a slightly taller image would work for these too: useful if the height of the menubar needed to be changed. This could be selected for the other browsers here:
html > body #navbar {
	background-image: url(../core_images/nav_bar3.png);
}
*/

/*navbar links*/

ul#navbar_buttons {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	font-size: 10.5pt;
	font-weight: bold;
	width:620px;
}



ul#navbar_buttons li {
	float: left;
	width:71px;
	background-color: transparent;
}

ul#navbar_buttons li a {
	text-decoration: none;
	text-align: center;
	display: block;
	color: black;
	padding: 3px 0;
	background-color: transparent;
  border-style: double;
  border-color: white;
  border-width: 4px 1px 4px 0px;
}

ul#navbar_buttons li#first_navbar_button {
  width: 52px;
}

ul#navbar_buttons li#first_navbar_button a {
  border-width: 4px 1px 4px 4px;
}

ul#navbar_buttons li#last_navbar_button {
  width: 71px;
}

ul#navbar_buttons li#first_navbar_button a:hover {
  border-width: 4px 1px 4px 4px;
}

ul#navbar_buttons li#last_navbar_button a:hover {
  border-width: 4px 4px 4px 0px;
}

ul#navbar_buttons li#last_navbar_button a {
  border-width: 4px 4px 4px 0px;
}

ul#navbar_buttons li a:hover {
	background-color: #F16624;
	filter:alpha(opacity=75);
  opacity:0.75;
	color: black;
  border-width: 4px 1px 4px 0px;
}
   
#leftcontent{margin-left:15px;
	      margin-right:15px;
	      margin-top:0px;
	      margin-bottom:10px;
	      padding:5px;
	      }

#maincontent{margin-left:5px;
	      margin-right:5px;
	      margin-top:0px;
	      margin-bottom:5px;
	      padding-top:5px;
	      font-size: 10.5pt;
	      }

#bottomborder{
   text-align: left;
   overflow: visible;
   margin-left: 0;
   margin-right: 0;
   padding: 0;
   border: 0;
   background-image: url(../core_images/tree_background_bottom.jpg);
   background-repeat: no-repeat;
   width: 1200px;
   }

div#pagetitle{
	/*to take account of the shadow on the background in this area:*/
	margin-left: -14px;
	color: black;
	font-size: 13pt;
	text-align: center;
	font-weight: normal;
}

div#pagetitle img{
	margin-left: 5px;
}

div#pagetitle h1{
	font-weight: normal;
	font-size: 14pt;
}


/*left navigation*/

#extranav {
	font-size: 11pt;	
	border-bottom: solid #aaaaaa 1px;
	padding-bottom: 4px;
	margin-bottom: 4px;
}

#leftnav {
	margin-left: -10px;
	font-size: 11pt;
}

#thispagenav {
}

#leftnav_links {
	display: inline;
	text-indent: 10px;
}

/*tables*/

table {
	margin: 0;
	padding: 0;
	border: 0;
}
 
td {
	vertical-align: top;
	margin: 0;
	padding: 0 6px 0 0;
	border: 0;
}

tr {
	vertical-align: top;
	margin: 0;
	padding: 0;
	border: 0;
}

p{
	font-size: 10.5pt;
	margin-top:4pt;
	margin-bottom:8pt;
}

#maincontent h1{
	font-size: 16pt;
	line-height:18pt;
	text-align: center;
	font-weight: bold;
}

#maincontent h2{
	font-size: 10.5pt;
	background-color: #666698;
	color: #ffffff;
	padding: 2px 3px 3px 3px;
	font-weight: normal;
	border-color: #ffffff;
	border-width: 1px;
	border-style: solid;
	margin: 2px 2px 10px 2px;
}

#maincontent h3{
	font-size: 13pt;
	text-align: left;
	font-weight: bold;
	border-bottom: solid #aaaaaa 1px;
}
	
#maincontent h4{
	font-size: 11pt;
	text-align: left;
	font-weight: bold;
	margin-bottom:6pt;
	margin-top:6pt;
}

#maincontent h6{
	text-align:center;
	margin:0;
	font-weight: bold;
}

#maincontent ul li{
	margin-bottom:4pt;
}

div.big_centered{
	font-size: 18pt;
	line-height:18pt;
	text-align: center;
	font-weight: bold;
}

#maincontent .announcement{
	font-size:11pt;
	text-align: center;
	font-weight: bold;
}

/* two columns within content area */

/*setImageDivAlignment function requires .floatleft and .floatright*/

div.floatleft{
	    float:left;
	    padding: 2px;
	    margin: 2px 3px 2px 2px;
	    overflow:hidden; /*to be consistent with floatright...*/
	    }
    
div.floatright{float:right;
	    padding: 2px;
	    margin: 2px 2px 2px 3px;
	    overflow:hidden; /*particularly for IE6, prevents content being pushed below the leftbar menu*/
	    }
	    
div.floatleft_border{
	    float:left;
	    padding: 2px;
	    margin: 2px 3px 2px 2px;
	    border:solid #aaaaaa 1px;
	    overflow:hidden; /*to be consistent with floatright...*/
	    }
    
div.floatright_border{float:right;
	    padding: 2px;
	    margin: 2px 2px 2px 3px;
	    border:solid #aaaaaa 1px;
	    overflow:hidden; /*particularly for IE6, prevents content being pushed below the leftbar menu*/
	    }
	    
/*mini gallery*/
/*the mini gallery is designed for 61px x 61px images*/
	    
.minigallery{
	margin-left:4px;
}

.minigallery .image_x{
	float: left;
	text-align: center;
	overflow: hidden;
	margin: 2px 2px 2px 0px;
	padding: 0px;
	width: 66px;
	height: 66px;	
}

/*This is what we really wanted, had it not been for IE6:
html > body .minigallery .image_x{
	width: 67px;
	height: 67px;	
}*/

img{
	margin-bottom:3px;
}

/*The gallery is designed for 100px x 100px preview images*/

.gallery
{
	overflow: auto;
}

.gallery .image
{
	float: left;
	text-align: center;
	overflow: hidden;
	/*border: 1px solid #000000;*/
	margin: 3px;
	padding: 0px;
	width: 110px;
	height: 110px;
}

.gallery .image p {
	font-size: 9pt;
}

img.content_x {
	width: auto;
  position: relative;
  left: 0px;
  padding:0;
  margin:0;
  border: 1px solid #fff;
}

div.shadow_x {
  position: relative;
  padding:0;
  margin:0;
  background-color: #000;
  border-style: solid;
}

div.transbox_x{
	  }

div.image_x{
	float: left;
	text-align: center;
	overflow: hidden;
	margin: 2px 2px 2px 0px;
	padding: 0px;
	display: inline;
}

.caption{
	font-style: italic;
	font-weight: bold;
	font-size: 9pt;
}

/*fonts etc.*/

.smallprint{
	font-size: 0.65em;
}

hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #aaaaaa;
}