/* CSS Document */
/* Created by ovo.co.uk */
/* Aug 2007 - JG: Updated for BW and incorporating other changes. All checked against W3C validators*/

body { 
	font: 74% Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #088930; /* Text Green */
	line-height: 1.5em; 
	background : #ffffcc; /* Pale yellow - for the non site surrounding/background area */
	margin: 0px; 
	padding: 0px; 
}


/* THESE ARE CLASSES FOR DIVS */

.language {  /* This will contain Flags/buttons to toggle from English to Chinese - NOT FINISHED YET! */
    width: 100px;
	color: #088930; /* Text Green */
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	border: 0px; 
	text-align:left; 
	margin: 10px 0px 0px 5px; /* Remember these go: TOP, RIGHT, BOTTOM, LEFT */
	padding: 95px 0px 0px 0px;
} 

.masthead {
	height: 120px;
	width: 865px;
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 0px; 
	background: #ffcc33 url(images/beechwood_masthead.jpg) no-repeat bottom; /* Light yellow or masthead.gif, repeats vertically only, aligned to bottom */
}

.content { 
	margin: 0 auto; 
	padding: 0;
	width: 900px;  /* Width of div which contains everything - width of site! */
	/*background: #CAE2BA url(images/bgmain.gif) repeat-y center;  /* Light green or bgmain.gif, repeats vertically only*/
}

.content_background {
	background: #FFFFCC url(images/bgmain.gif) repeat-y top;  /* Light yellow or bgmain.gif, repeats vertically only*/
	width: 865px;  /* Width of div which contains everything - width of site! */
}

.menu { 
	text-align:left; 
	font-weight: bold;
    text-decoration: none;
	float:left; 
	width: 121px; 
	padding: 0px 0px 0px 0px; 
	margin: 0px 0px 0px 0px;
	border: 0px; 
}

.menu_background {
	background: #990000 url(images/menu_bg.gif) repeat-y top;
	padding: 0px 0px 0px 0px; 
	margin: 0px 0px 0px 0px;
	border: 0px; 
}

.white_box {  /* This gives you the white area around the text and images */
	width: 597px;
	background-color:#FFFFFF;
	border: 0px;
	padding: 4px; 
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 130px; 
}

.white_box2 {  /* This gives you the white area around the text and images plus a border between white_box - USE when it's a new white box and is below the bottom of the menu */
	width: 597px;
    background-color:#FFFFFF;
	border: 0px;
	padding: 4px; 
	margin: 10px 0px 0px 130px;	
}

.white_box3 {  /* This gives you the white area around the text and images - USE when it's a new white box and is below the bottom of the menu for continuous text*/
	float:left; 
	width: 597px; 
    background-color:#FFFFFF;
	border: 0px;
	padding: 4px; 
	margin: 0px 0px 0px 130px; 
}

.green_box {  /* This gives you a box that matches the background colour*/
	width: 597px; 
    background-color:#088930;
	border: 0px;
	padding: 4px; 
	margin: 0px 0px 0px 130px; 
}

.left {  /* Left column (normally contains text) */
    font-size: 95%;
	width: 320px; 
	padding: 1px 0px 0px 0px; 
	margin: 0px 0px 0px 5px; 
	background-color:#FFFFFF;
	border: 0px;
}

.left2_sitemap {  /* Left column specially for sitemap (normally contains text) */
    font-size: 95%;
	width: 320px; 
	padding: 1px 0px 0px 15px; 
	margin: 0px 0px 0px 5px; 
	background-color:#FFFFFF;
	border: 0px;
}

.left a { 
    color: #088930; /* Text Green */
}

.left a:hover { 
    color: #83C487; /* Medium green */
}

.right {  /* Right column (normally contains images) */
	font-size: 95%; 
	float:right;
	width: 250px; 
	padding: 0px 0px 0px 0px; 
	margin: 5px 5px 0px 0px; 
	/*background-color:#FFFFFF; - June07: removed for homepage language buttons to appear they are on an all green bg*/ 
	border: 0px;
}

.right a { 
    color: #088930; /* Text Green */
}

.right a:hover { 
    color: #83C487; /* Medium green */
}

 .middle {  /* Central column that is as wide as the left and right combined */
	clear: both; 
	font-size: 95%; 
	float:left; 
	width: 587px; 
	padding: 5px 5px 5px 5px; 
	margin: 0px 0px 0px 0px; 
	background-color:#FFFFFF;
	border: 0px;
}

.middle a { 
    color: #088930; /* Text Green */
}

.middle a:hover { 
    color: #83C487; /* Medium green */
}

.footer {
	clear:both;
	width: 865px; 
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	background : #CAE2BA url(images/footer.gif) no-repeat bottom; /* Light green or Picture, no repeat, aligned to the top*/
	border: 0px;
	text-align:center;
	margin: 0px 0px 5px 0px;
	padding: 10px 0px 15px 0px;
} 


/* THESE ARE CLASSES FOR TEXT */

p {  /* basic text */
    font: 11px Verdana, Arial, Helvetica, sans-serif;
	text-indent: 6px;
	color: #088930; /* Text Green */
	margin: 0 0 5px 0; 
	padding: 0px 0px 0px 0px; 
	background: inherit;
}

h1 { /* Normal title - automatically becomes upper case */
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-indent: 5px;
    color: #088930; /* Text Green */
    text-indent: 5px;
    background: #FFEA00 url(images/title_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
    border-color: #FFEA00 #096325 #096325 #FFEA00;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 0px 0px 2px 0px;
    margin: 5px 0px 5px 0px;
}

h2 { /* Normal title - upper and lower case */
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-indent: 5px;
    color: #088930; /* Text Green */
    text-indent: 5px;
    background: #FFEA00 url(images/title_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
    border-color: #FFEA00 #096325 #096325 #FFEA00;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 0px 0px 2px 0px;
    margin: 10px 0px 5px 0px;
}

h1-wide { /* For titles that go the whole width inside a middle div */
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-indent: 5px;
    color: #088930; /* Text Green */
    text-indent: 5px;
    background: #FFEA00 url(images/title_wide_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
    border-color: #FFEA00 #096325 #096325 #FFEA00;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    padding: 0px 0px 2px 0px;
    margin: 0px 0px 5px 0px;
}

H3 {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #088930; /* Text Green */
    text-indent: 5px;
    border-color: #FFEA00; /* Yellow */
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    padding:1px;
    padding-bottom:2px;
    margin: 10px 0px 5px 0px;
}

.image_caption {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #088930; /* Text Green */
    font-weight: bold;
    text-align: left;
    text-indent: 3px;
    background: #FFEA00 url(images/image_caption_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
    padding: 2px 2px 3px 2px;
    margin: 0px 0px 5px 0px;
    border-color: #FFEA00 #096325 #096325 #FFEA00;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
}

.smaller {
    font: 11px Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFEA00; /* Yellow */
}

.evensmaller { /* Tiny text in the footer */
    font: 9px Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFEA00; /* Yellow */
    padding: 4px;
}

.evensmaller a { /* Link */
    font-weight: normal;
    color: #FFEA00; /* Yellow */
    text-decoration: none;
}

.evensmaller a:hover { /* Link when rolled over */
    font-weight: normal;
    color: #FFFFFF; /* White */
}

.line {
    font: 1px Verdana, Arial, Helvetica, sans-serif;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 1px;
	border-left: 0px;
	border-style: solid;
	border-color: #088930; /* Text Green */
}
.dottedline {
    font: 1px Verdana, Arial, Helvetica, sans-serif;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 1px;
	border-left: 0px;
	border-style: dotted;
	border-color: #088930; /* Text Green */
	padding-bottom: 2px;
}

a { /* Link */
    color: #088930; /* Text Green */
    text-decoration: none;
    font-weight: bold;
}

a:hover { /* Link when rolled over */
    color: #83C487;  /* Medium Green */
    text-decoration: none;
    /*cursor: hand;*/
    font-weight: bold;
}


/* THESE ARE DIV CLASSES FOR BUTTONS */

.menutitle { 
font: 11px Verdana, sans-serif;
font-weight: bold;
text-indent: 3px;
color: #FFEA00; /* yellow */
background-color: #990000;  /* Rust Red */
border: 1px solid;
border-color: #990000 #990000 #990000 #990000;
width: 112px;
margin: 0px 0px 0px 7px; /* Remember these go: TOP, RIGHT, BOTTOM, LEFT */
padding: 2px 0px 2px 0px;
display: block;
overflow:visible;
}

.navbuttons a {
font: 11px Verdana, sans-serif;
font-weight: bold;
text-indent: 6px;
color: #FFEA00; /* yellow */
width: 110px;
background: white url(images/menu_title_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
border: 1px solid;
border-color: #990000;
margin: 0px 0px 0px 7px;
padding: 2px 0px 2px 0px;
display: block;
}

.navbuttons a:hover {
color: #097D2D;  /* Menu text green */
background-color: #990000; /* Rust red */
background: #FFEA00 url(images/menubuttonrollover.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
border-color: #990000;
}

.navsubbuttons a {
font: 11px Verdana, sans-serif;
/*font-weight: bold;*/
font-style:italic;
text-indent: 6px;
color: #FFEA00; /* yellow */
width: 110px;
background: white url(images/menu_title_bg.gif) repeat-y; /* White or Picture, repeats vertically only */
border: 1px solid;
border-color: #990000;
margin: 0px 0px 0px 7px;
padding: 2px 0px 2px 0px;
display: block;
}

.navsubbuttons a:hover {
color: #097D2D; /* Dark Green */
background-color: #83C487; /* Medium Green */
background: #FFEA00 url(images/menubuttonrollover.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
border-color: #096325 #B0C44E #B0C44E #096325;
}

.topofpage a {
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFEA00; /* Yellow Text */
background-color: #990000;  /* Rust red background */
border: 1px solid;
border-color: #73B41B #096325 #096325 #73B41B;
padding: 3px 1px 3px 1px;
}

.topofpage a:hover {
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #096325; /* Dark Green */
text-decoration: none;
background: #FFEA00 url(images/topofpagebutton_bg.gif) repeat-y; /* Yellow or Picture, repeats vertically only */
border: 1px solid;
border-color: #096325 #BACE0D #BACE0D #096325;
/*cursor: hand;*/ 
}


/* THESE ARE CLASSES FOR TABLES */

.tablerowdark {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #088930; /* Text Green */
background-color: #CAE2BA;
}

.tablerowlight {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #088930; /* Text Green */
background-color: #E3F0DC;
}

/*JG - May07 - More attempts at getting IE6 to work like IE7 & FF! Taken from: http://www.positioniseverything.net/easyclearing.html*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->