/* for colour definitions and usage see styles.php */

body {
	background-color:rgb(230,255,212); /* this is outside the container */
	margin: 0px;
	padding: 0px;
	text-align:center; /* caters for centrally aligning the container in IE5 */
	}
	
body, p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	}

h1, h2, h3, h4, h5, h6 { 
	color: rgb(100,194,28);
	margin: 0px; 
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0px;
	padding:10px 0px 0px 0px;
	text-align:left; /* to counter the body text-align center */
	}

a  {
	color: rgb(100,194,28);
	border-bottom:1px solid rgb(100,194,28);
	text-decoration: none;
	background-color: transparent;
	}
	
a:hover {
	color: rgb(172,67,0);
	border-bottom:1px dotted rgb(172,67,0);
	text-decoration: none; /* only Opera loses the underline */
	background-color: transparent;
	}

.green {color:rgb(100,194,28);}
.sub {font-size:80%}

hr {
  margin:20px 10px;
  padding:0;
  height: 1px;
  text-align:center;
  border:0px solid green;
  background: rgb(100,194,28);
}

/*------------------------------------------------------------*
**  Container
**------------------------------------------------------------*/
#container {
	width: 980px;
	margin: 0 auto; /* required for standards-browsers to centre the container */
	margin-top: 10px;
	margin-bottom: 10px;
	padding:0px;
	border: 1px solid #777;
	background-color:#fff;
	background-image: url(images/graphics/logo.jpg);
	background-repeat: no-repeat;
	background-position:0px 0px;
	}

/*------------------------------------------------------------*
**  Header
**------------------------------------------------------------*/
#header {
	width:980px; /* 980 less both horizontal padding values =960 */
	margin:0px;
	padding: 0px; /* was 30 at top */
	border:none;
	min-height:106px; /* 133 to see full logo, but this partially overlaps with the logo */
	background-color:transparent;
	text-align:left;
	}

#header h1, #header h2 { 
	width: 490px;
	margin: 0px 0px 0px 200px;
	padding: 4px 0px 0px 120px;
	border:none;
	border-bottom:1px solid rgb(100,194,28);
	/* float:left; /* remove float to work ok in IE6. Not needed in any other browsers either */
	font-family: arial, verdana, sans-serif; 
	font-size: 2.0em;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 0.7em; /* so that the border just touches the base of the lettering */
	background-color:transparent;
	}
	
#header h2 {
	width: 400px;
	padding: 60px 0px 0px 210px;
	border:none;
	color:#000;
	font-size: 1.3em;
	font-family: helvetica, arial, verdana, sans-serif; 
	line-height: 0.8em; 
	}

/*------------------------------------------------------------*
**  Content
**------------------------------------------------------------*/	
#content {
	padding:0px;
	margin:0px;
	background-color: #fff;
	font-size: 1em;
	line-height: 1em; 
	}

#middle {
	width:730px;
	margin:0px;
	padding:0px 60px 0px 10px;
	border:none;
	float:right;
	clear:right;
	font-size:0.9em;
	background-color:transparent;
	text-align:left; /* for IE 4 */
	}

#intro {
	width:730px;
	height:8em;
	margin:0px 0px 20px 0px; 
	padding:10px 0px 0px 0px;
	border:none;
	background-color: transparent;
	background-image: url(images/graphics/banner.jpg);
	background-repeat: no-repeat;
	background-position:0px 100%;
	}
#intro p {
	margin:0px;
	padding:0px; /* inherits 15 from somewhere */
	} 
#intro h3 {
	color:#000;
	font-size:1em;
	font-weight:bold;
	}

#main { 
	width:710px; /* 730 less horizontal padding */
	margin:0px;
	padding:10px 10px 8px 10px;
	border:none;
	background-color: rgb(230,255,212);
	background-image: url(images/graphics/column-back.jpg);
	background-repeat: no-repeat;
	background-position:257px 100%;
	}

#left {
	width:160px;
	margin:0px;
	padding:0px;
	border:none;
	float:left;
	background-color:transparent;
	}
#left .PZ3zoom{
	margin:30px 0px 10px 9px;
	}
#left p {
	margin:20px 0px 10px 9px;
	font-size:0.8em;
	}
	
#phpinfo #main div {
	font-size:130%;
}
#phpinfo #main h1 {
	color:black;
}

/*------------------------------------------------------------*
**  Menu
**------------------------------------------------------------*/

ul#menu {
	width:155px;
	margin: 0px 0px 10px 8px; /* bottom = space beneath menu */
	padding: 0px;
	border:none;
	border:1px solid #777;
	background-color:#fff;
	list-style-type: none;
	clear:left;
	text-align:left;
	float:left;
	overflow:visible;
	}
ul#menu:after {	/* does not seem to do much ? */
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	} 
ul#menu li {
	margin: 0px 0px 0px 0px; /* left space infront of menu blocks */ 
	padding:0px;
	float: none;  /* left for horizontal, none for vertical */
	font-size: 0.8em; 
	}	
ul#menu li a {
	display: block; 
	background-color: rgb(230,255,212);
	margin: 0px 0px 2px 0px;
	padding: 1px 1px 2px 3px;
	color: #000;
	text-decoration: none;
	border:none;
	} 	
ul#menu li.last a {
	margin-bottom:0px; /* to remove the unnecessary 2px margin on the last menu item */
	padding-bottom:3px; /* the others are 2px, but the bottom item looks better with a bit more */
	} 
ul#menu li.current a, ul#menu li a:hover {
	background-color:rgb(100,194,28);
	color:rgb(171,67,0);
	}
ul#menu li.current a:hover { cursor:default; }

/*------------------------------------------------------------*
**  Footer
**------------------------------------------------------------*/

#footer {
	margin: 0px 0px 7px 0px;
	padding: 1px 10px 10px 10px; 
	border:none; 
	font-size: x-small;
	clear:both;
	color: #777;
	background-color:transparent;
	text-align:center;
	}

#footer a  {
	font-weight: normal;
	text-decoration:none;
	}

#footer a:hover {
	background-color: transparent;
	}

#footer_navigation  {
	margin: 20px 0px 8px 0px; 
	padding: 0px; 
	border: none;
	clear:both;
	font-size:x-small;
	text-align: center;
	}
#footer_navigation h5 {
	/* extra text can be written in <h5> for non-graphic browsers */
	display: none;
	}
#footer_navigation ul {
	margin: 2px;
	padding: 0px 1px; 
	}
#footer_navigation ul li {
	margin: 0px; 
	padding: 0px 4px; /* space between tabs */
	list-style: none; 
	display: inline; /* must be inline */
	}
#footer_navigation a {
	font-weight: normal;
	border:none;
	}
#footer_navigation a:hover {
	background-color:transparent;
	border-bottom:1px dotted rgb(172,67,0);
	}
#footer_navigation ul li a#footer_cur {
	color: #777;
	text-decoration:none; 
	border:none;
	}
#footer_navigation ul li a:hover#footer_cur {
	background-color: transparent;
	cursor:default;
	}

/*------------------------------------------------------------*
**  Wildlife, Trees and Plants pages
**------------------------------------------------------------*/	

#wildlife #main, #trees #main, #plants #main, #sounds #main, #styles #main {
	padding:0px;
	margin:0px;
	width:730px;
	}
#wildlife #main, #trees #main, #plants #main {
	background-image:none;
	background-color:#fff;
	}
#main .nature {
	margin:0px 0px 12px 0px;
	padding:12px;
	border:1px solid #777;
	min-height:80px;
	}
#main .nature h3 {
	margin:5px 5px 2px 0px;
	padding:0px;
	font-size:110%;
	display:inline;
	float:left;
	color:#000;
	font-weight:bold;
	}
#main .nature .sub {
	margin:6px 5px 2px 8px;
	padding:0px;
	display:inline;
	float:left;
	font-size:90%;
	}
#main .nature .text {
	display:block;
	}
#trees #main .nature {
	background-color:rgb(240,224,178); /* beige */
	}
#plants #main .nature {
	background-color:rgb(209,227,209); /* mid green */
	}
#wildlife #main .nature {
	background-color:rgb(221,235,248); /* pale blue */
	}
#sounds #main .nature {
	margin-bottom:0px;
	}
#sounds #main .spacer {
	min-height:5px;
	height:5px;
	width:100%;
	background-color:#fff;
	font-size:8px;
	}
#teachers #main h4 {
	color:#000;
	font-weight:bold;
	}

#styles #main {
	padding:0px;
	margin:0px;
	width:800px;
	background-image:none;
	background-color:rgb(230,255,212);
	}
	
/*------------------------------------------------------------*
**  Event diary
------------------------------------------------------------*/	

#events #main {
	width:730px;
	margin:0px;
	padding:0px;
	}
.diary_entry {
	margin:0px;
	padding:0px 0px 2px 0px;
	border:1px solid rgb(100,194,28);
	}
.diary_entry h3 {
	margin:0px;
	padding:6px;
	background-color: rgb(100,194,28);
	color:#000;
	}
.diary_entry div.row {
	clear: both;
	padding-top: 2px;
	}
.diary_entry div.row span.label {
	width: 120px;
	padding:1px 5px 2px 5px;
	float: left;
	text-align: left;
	}
.diary_entry div.row span.data {
	width: 580px;
	padding:1px 5px 2px 0px;
	float: right;
	text-align: left;
	}
div.break {
	clear: both;
	}	
#events #main .white_block {
	height:6px;
	width:100%;
	background-color:#fff;
	}

/*------------------------------------------------------------*
**  Photo-Caption PZ3 CSS v080630 
**  copyright: http://www.randsco.com/copyright
**------------------------------------------------------------*/	

.PZ3-l {
	float:left;
	margin-right:8px; /* JS: reduced 10 to 8 */
	} 
.PZ3-r {
	float:right;
	margin-left:8px;
	direction:rtl;
	position:relative;
	}

.PZ3-r a { right:0; }

.PZ3zoom {
	border:1px solid #555;
	margin-bottom:8px;  /* JS: added margin-bottom */ 
	font-size:1em; /* JS: reset font size */
	text-align:left;
	} 

.PZ3zoom a, .PZ3zoom a:visited {
	display:block;
	border:none; /* JS: needed after adding bottom-border to all A tags */
	padding:0;
	overflow:hidden;
	text-decoration:none;
	width:100%; 
	height:100%;
	}	

.PZ3zoom a:hover {
	position:absolute;
	z-index:999;
	padding:0;
	background-color:rgb(100,194,28); /* was none but IE5 needed the bg color here instead of in the a:hover .PZ31cap definition */
	cursor:default;
	height:auto;
	width:auto;
	overflow:visible;
	border:none; /* needed because IE 6 and below inherit the regular a tag border */
	margin:-1px -1px 0px -1px; /* top up 1, R right 1 (for right-aligned img) , L left 1 (for left-aligned img). JS final */
	} 
	
.noBdr a:hover {margin:0px;} /* undo the above, as dont need to shift if there is no border */

.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img {
	height:auto;
	width:auto;
	border:1px solid #555; /* JS: added border all round */
	z-index:999;
}

.PZ31cap {display:none;} /* added for IE5 */

a:hover .PZ31cap {
	display:block;
	direction:ltr;
	font:0.9em verdana,sans-serif;
	margin-top:-4px; /* closes the gap between caption border and image border */
	color:#fff; 
	text-align:left;
	border:1px solid #555; /* new way of doing borders */
	}
	
.PZ3inr { display:block; padding:6px 5px 4px 5px; } /* JS: padding was 2px 5px */

.noCap a:hover {background-color:transparent;}
.noCap a:hover .PZ31cap {display:none;}

.noBdr, .noBdr a:hover .PZ31cap, .noBdr a:hover img { border:0; }
.Lnk a:hover { cursor:pointer; }

.clrLeft { clear:left; } /* JS: added these three */
.clrRight { clear:right; }
.clrBoth { clear:both; }

/* End Photo-Caption Zoom CSS */

.non_pz3_img {border:1px solid #555; margin:0px}