/*** General default settings first ***/
* {margin: 0; padding: 0;}

h1, h3, h4, h5, h6, h8, pre, p, blockquote, label, fieldset, address, menuonpage
{
	margin: 0.5em 4% 0.5em 3%;
	color: #333333;
	
}





 ul, ol, dl {	
margin: 0.5em 4% 0.5em 7%;
	color: #333333;
	
}

a:link {
color: #006600;
font-weight: 400;
text-decoration: none; 
}

a:visited {
color: #006600;
font-weight: 400;
text-decoration: none; 
}

a:focus, a:hover, a:active {
color: #66CC66;
font-weight: 400;
text-decoration: none; 
}

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #333714; 
word-spacing: 0.1em;
text-align: center;
}

/*** Getting consistent text sizes across browsers (IE5) ***/
body {
	font-size: 82%;
	color: #006600;
}
/* Resets 1em to 12px - more or less. The more accurate value of 80% can cause a small gap at the bottom of the mainbox (due to rounding errors?)*/


.bulletsmall {
	list-style-position: outside;
	list-style-image: url(../Images/arrowsidebullet.gif);
	list-style-type: circle;
}


h1 {
	font-size: 150%;
	font-weight: 400;
	color: #006600;
	line-height: 1.5em;
	background-color: #F5F6D7;
	text-indent: 2px;
}

h8 {
	font-size: 100%;
	font-weight: 800;
	color: #990000;
	line-height: 1.5em;
	text-indent: 2px;
		
}


h2 {
	font-size: 120%;
	font-weight: 400;
	color: #990000;
	line-height: 2em;
margin: 0.5em 4% 0.5em 3%;
	

}
	

h3 {
	font-size: 100%;
	font-weight: 700;
	color: #333333;
}
h4 {
	font-size: 100%;
	font-weight: 700;
	color: #006600;
	margin-top: 1em;
	margin-bottom: 1em;
}
h5 {
	font-size: 100%;
	font-weight: 700;
	color: #666666;
	line-height: 1.5em;
}
h6 {
	font-size: 100%;
	font-weight: 400;
	color: #CCCC33;
	text-align: left;
	line-height: 1.5em;
}

h9 {
	font-size: 100%;
	font-weight: 200;
	color: #FFFFFF;
	text-align: centre;
	line-height: 1.5em;
}



/* Headers sized taking body font-size into account to give equivalent to 150%, 120%, 100%, 80%, 70%, 64%. */

pre {font-size: 125%;}
/* To stop pre being too small */

/*** Layout stuff ***/
.centerpage {
	width: 90%;
	margin: 1em auto;
	text-align: left;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	height: 90%;
	color: #006600;
}

.header {
	color: #666666;
}

.footer {
	background-color: #333714;
	font-size: 82%;
	color: #FFFFFF;
	text-align: center;
	padding-bottom:1em;
	font-family: Arial, Helvetica, sans-serif;
}

/* Hide hack from IEmac \*/
* html .footer {
	height: 1%;
	color: #FFFFFF;
}
/* End hide hack from IEmac */

.leftbox {
	position: absolute;
	width: 8.5em;
	background-color: #FFFFFF;
	line-height: 2em;
	padding-top: 2em;
	margin-top: 1em;
	font-size: 110%;
	font-weight: 400;
	left: 5%;
	margin-left: 1em;
	
}

.floatleftbox {
	font-size: 70%;
	line-height: 1.2em;
	color: #666666;
	text-align: left;
	margin: 1em 0.2em 0.5em 1em;
	padding: 0.0em;
	clear: none;
	float: left;
	width: auto;
	border: 1px solid #CCCCCC;
	
}


.rightbox {
	position: absolute;
	right: 5%;
	width:15em;
	background-color: #FFFFFF;
	margin-right: 0.5em;
	padding-top: 3em;

}

.mainbox {
	border-left: 1px solid #D2FCCF;
	background-color: #FFFFFF;
	margin-right: 16em;
	margin-bottom: 1em;
	margin-left: 10.5em;
	border-right: 1px solid #D2FCCF;
	min-width: 5em;
	margin-top: 1.5em;   

}


/* A hack to stop IEwin breaking the layout if a floated right element reaches the bottom in mainbox */

/* Hide hack from IEmac \*/
* html .mainbox {height: 1%;}
/* End hide hack from IEmac */

/*** Simple floats ***/
.floatleft {
	float: left;
	margin: 0em 3% 1.5em 0%;
}

.floatright {
float: right;
clear: right;
margin: 1em 1em 0.5em 1em;
width: 40%;
text-align: right;
display: inline; /* To fix IE double margin bug */
background-color: #FFFFFF;
}

.floatrightpicture {
float: right;
clear: right;
margin: 1em 1em 0.5em 1em;
width: 20%;
display: inline; /* To fix IE double margin bug */
background-color: #FFFFFF;
}

/*** Floats for images in the textflow (not inside p tags etc.) ***/
.imageright {
float: right;
clear: right;
margin: 1em 5% .5em 1em;
}

.imageleft {
float: left;
clear: left;
margin: 1em 1em .5em 5%;
}

.imageright250 {
/* Width should be changed to suit image size */
float: right;	
clear: right;
margin: 1em 5% .5em 1em;
width: 250px;
font-family: Georgia, Times, serif;
text-align: center;
display: inline; /* To fix IE double margin bug */
background-color: #CCCCCC;
}

/*** Image gallery styling ***/
.container {
	margin: .5em 5%;
}

.portfolioimage {
float: left;
margin: .5em 2em .5em 0;
font-family: Georgia, "New Century Schoolbook", Times, serif;
text-align: center;
color: #660000;
}

/*** Miscellaneous bits and bobs ***/
.marginshalfem { 
margin: .5em; 
vertical-align: middle; 
} 

.marginhack { margin: 0 5%; ; background-color: #FFFFFF} 
/* To sort out IE5 float bug between header and mainbox */

.quotebox {
	float: none;
	clear: left;
	width: auto;
	margin-left: 16em;
	padding: 0.5em;
	display: inline;
	border: thin solid;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
	line-height: 1.2em;
	font-size: 100%;
	margin-right: 1em;
}


.topbox {
	float: right;
	clear: right;
	width: auto;
	margin-left: 30em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	display: inline;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color: #666666;
	background-color: #FFFFFF;
	line-height: 1.2em;
	font-size: 100%;
	margin-right: 1em;
}




/* hack needed for IE5win - corrected for IE6win and IE5mac */
* html .quotebox {
width: 10em;
w\idth: 9em;
}

.monored {
/* For special text */
font-family: Arial, Helvetica, sans-serif;
color: #660000;
margin: .5em 8%;
border: thin #666666 solid; 
padding: 5em 1em;
background-color:#FFFFFF;
}

.spacer {clear: both; } 	

.clearleft {clear: left; }

.center {text-align: right;}



/*** Form styling ***/
label {
display: block;
float: left;
width: 7em;
text-align: right;
padding-right: 1em;
}

.formbutton {
display: block;
float: left;
padding-left: 8em;
}

.topmenu {
	color: #66cc66;
	margin: 0;
	padding-left: 0.5em;
}

.imagebox {
	margin: 0em;
	height: auto;
	width: auto;
	border: 1px solid #009900;
	padding: 0.5em;
}

iframe {
	border: 2px solid #009900;
	padding: 1em;
}
.menuonpage {
	font-weight: 400;
	color: #CCCC00;
}
.linkmenu {
	color: #009900;
	font-weight: 400;
}
.visitedmenu {
	color: #CCCC00;
	font-weight: 400;
}
img {
}
li {
	list-style-type: none;
	left: 5em;
}



.greenlight {
	color: #66cc66;
	font-weight: 400;
	font-size: 100%
}
.redbold {
	font-weight: 700;
	color: #990000;
}
.greybold {
	font-weight: 700;
	color: #333333;
	}
	
	.psmall {
	font-size: 84%;
	color: #009900;
}
.floatrightbox {
	font-size: 100%;
	line-height: 1.2em;
	color: #666666;
	text-align: left;
	margin: 1em;
	padding: 0.5em;
	clear: left;
	float: right;
	width: 12em;
	border: 1px solid #CCCCCC;
}

.boxindex {
	margin: 0.5em 1em 1.5em;
	padding: 0.5em;
	clear: none;
	float: left;
	width: 36em;
	border: 3px solid #E1E1E1;
	height: 13em;
	background-color: #EAF6EA;
}

.boxindexlong {
	margin: 0.5em 1em 1.5em;
	padding: 0.5em;
	clear: none;
	float: left;
	width: 30em;
	border: 3px solid #E1E1E1;
	height: 11.5em;
	background-color: #EAF6EA;
}

.boxindexclear {
	margin: 0em 1em 1em 0.5em;
	padding: 0.5em;
	clear: none;
	float: left;
	width: auto;
	border: 1px solid #FFFFFF;
	height: auto;
}

.toprightbox {
	position: absolute;
	right: 6%;
	width:20em;
	margin-right: 1em;
	padding-top: .5em;
	font-size: 100%;
	color: #009900;
	text-align: right;
}
	
.titlegrey {
	font-size: 100%;
	color: #666666;
	font-weight: 700;
}
	
.border {
	border: 3px solid #E1E1E1;
}	


.floatleftborder {
	float: left;
	margin: 0em 3% 1.5em 0%;
	border: 3px solid #E1E1E1;
}



	
/*gallery stuff*/
#info {padding:2em 0; text-align:center;}
ul#gallery {
margin:0 auto; 
  width:448px; 
  height:336px; 
  position:relative; 
  }
#gallery li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#gallery li.lft {
  float:left; 
  clear:left;
  }
#gallery li.rgt {
  float:right; 
  clear:right;
  }
#gallery a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#gallery a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #333333; 
  z-index:100;
  }
#gallery a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
#gallery a:hover img {
  background:#FFFFFF; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }
#gallery a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:active img, #gallery a:focus img {
  background:#FFFFFF 
  position:relative; 
  width:320px; 
  height:239px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#gallery li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#FFFFFF; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:hover img {
  background:#FFFFFF; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }