body{
background:#ffffff;
margin:0;
font: 10pt/14pt 'Tahoma', Arial, Helvetica, sans-serif; 
color: #006666;
}

/* page container ...well use this to make the page margins adjust relative to the browser size..oh yes!*/
#container{
position: relative;
background:#FFFFFF;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:0;
}

/* this is the definition for the site's banner...what a kick-ass banner, if i do say so myself! */
#header{
text-align: left;
width:800px;
height:275px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
background-image: url('images/sitebanner.jpg'); 
background-repeat: no-repeat;
}

/* main horizontal navigation bar goes here--can you dig that! */
#navcontainer{
	position: absolute;
	top: 230px;
	left: 147px;
	width:653px;
	margin: 0px;
	padding: 0px;
}
/* now to style the main horizontal navigation list */
#navlist {
margin: 0px;
padding: 0px;
}
#navlist li{
background:#ffffff;
display: inline;
list-style-type: none;
font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:12px;
}
#navlist a:link,
#navlist a:visited { 
color: #ff9900; 
font-weight:bold;
padding:10px 10px 10px 10px;
width:auto;
text-decoration:none; 
}
#navlist a:hover {
color: #006666; 
text-decoration:none; 
font-weight:bold;
}
#navlist a:active {
color:#ffcc00;
text-decoration:underline;
}
/* now to style the vertical nav lists */
#nav2contain {
width:90%;
}
#nav2contain ul{
margin-left:0px;
padding-left:0px;
list-style-type:none;
}
#nav2contain a{
display:block;
padding-left:5px;
padding-right:5px;
width:100%;
background:#ffcc00;
}
#nav2contain a:link,
#nav2 a:visited{
color:#006666;
text-decoration: none;
text-transform: uppercase;
}
#nav2contain a:hover{
color:#ffffff;
text-transform: uppercase;
}
/*--end nav2--*/
#nav3{
padding-left: 5px;
margin-left: 0px;
}
#nav3 li{
list-style: none;
margin: 0px;
padding: 0.25em;
}
#nav3 a:link,
#nav3 a:visited{
color:#ff5500;
width: auto;
text-decoration: none;
text-transform: uppercase;
}
#nav3 a:hover{
color:#ff0000;
text-decoration: underline;
text-transform: uppercase;
}
#nav3 a:active{
color:#ff0000;
text-decoration: underline;
text-transform: uppercase;
}
/* End of navigation stuff*/

/* div for page content */
#content{
position: relative;
padding:0px 10px 0px 50px;
text-align:justify;
font: 9pt/14pt Tahoma, Arial, Helvetica, sans-serif;
}

/* this creates the various layout columns--has to go ABOVE footer */
div.col1{
float: left;
width:450px;
padding: 0px 20px 5px 0px;
text-align:justify;
}
div.col2{
float: left;
width: 265px;
padding: 0px 0px 5px 0px;
text-align:justify;
}
div.col3{
float: left;
width: 125px;
padding: 0px 5px 5px 0px;
text-align: left;
}
div.col4{
float: left;
width: 330px;
padding: 0px 20px 5px 20px;
text-align: justify;
}
div.col5{
float: left;
width: 225px;
padding: 0px 0px 5px 0px;
text-align: justify;
}
div.col6{
float: left;
width: 175px;
padding: 0px 0px 5px 0px;
text-align: justify;
}
div.col7{
float: left;
width: 475px;
padding: 0px 0px 5px 20px;
text-align: justify;
}
div.col8{
float: left;
width: 210px;
padding: 0px 0px 5px 0px;
text-align: justify;
}
div.col9{
float: left;
width: 440px;
padding: 0px 0px 5px 20px;
text-align: justify;
}
div.col10{
float: left;
width: 170px;
padding: 0px 0px 5px 0px;
text-align: justify;
}
div.col11{
float: left;
width: 510px;
padding: 0px 0px 5px 20px;
text-align: justify;
}
div.horizspace{
float: left;
width: 95%;
padding: 0px 0px 0px 0px;
}
div.halfcol1{
float: left;
width: 325px;
padding: 10px 7px 5px 7px; 
text-align:center;
}
div.halfcol2{
float: left;
width: 325px;
padding: 10px 7px 5px 7px; 
text-align:left;
}
/* div for the footer */
.hidden {
visibility: hidden;
clear:      both;
} 
#footer{
position: relative;
background:url('images/footerbg.jpg') no-repeat #FFFFFF top left;
height:60px;
margin-right:auto;
margin-left:auto;
text-align:center;
padding: 0px 0px 0px 0px;
font: 8pt/14pt Arial, Verdana, Helvetica, sans-serif;
color:#008888;
}

/* styles for various knick-knacks*/
/* this is for the main content headers */
h3{
font-size:12px;
font-weight:bold;
text-transform: uppercase;
color:#006666;
}
h2{
font-size:12px;
text-align:center;
font-weight:bold;
font-style:italic;
color:#006666;
text-transform:uppercase;
}
/* this here is for the news header */
.titl{
font-size:12px;
font-style:italic;
color:#006666;
text-transform: uppercase;
}
/* this here is for the news footer e.g. date */
.futr{
font-size:10px;
font-style:italic;
color:#ff0000;
text-transform:uppercase;
text-align:left;
}
/* this is for the fine print */
.finprint{
font: 8pt/14pt Arial, Verdana, Helvetica, sans-serif;
color:#008888;
}
/* this is to style the boxes, boxed headers and text*/
/* date box */
.datebox{
border: 1px solid #006666;
font-size:12px;
text-transform: uppercase;
color:#ffcc00;
padding: 0px 0px 0px 0px;
background-color:#006666;
padding: 0px 8px 0px 8px;
}
/* brown box*/
.bbox{
border: 1px solid #cc9900;
padding: 0px 0px 0px 0px;
}
.bboxhead{
font-size:12px;
font-weight:bold;
text-transform: uppercase;
color:#ffffff;
background-color:#cc9900;
padding: 0px 8px 0px 8px;
}
.bboxtxt{
font-size:12px;
color:#996600;
background-color:#ffffff;
padding: 0px 8px 0px 8px;
}
/* orange-ish box */
.obox{
border: 1px solid #ff7700;
padding: 0px 0px 0px 0px;
}
.oboxhead{
font-size:12px;
font-weight:bold;
text-transform: uppercase;
color:#ffffff;
background-color:#ff7700;
padding: 0px 8px 0px 8px;
}
.oboxtxt{
font-size:12px;
color:#ff5500;
background-color:#ffffff;
padding: 0px 8px 0px 8px;
}
/* green box with logo colorscheme */
.gbox{
border: 1px solid #006666;
padding: 0px 0px 0px 0px;
background-color:#ffcc00;
}
.gboxhead{
font-size:12px;
font-weight:bold;
text-transform: uppercase;
color:#ffffff;
background-color:#006666;
padding: 0px 8px 0px 8px;
}
.gboxtxt{
font-size:12px;
color:#006666;
background-color:#ffffff;
padding: 0px 8px 0px 8px;
}
/* text colors for emphasis */
.grntxt{
color:#33ff00;
font-weight:bold;
}
/* styling hyperlinks: important that the order should go link-visited-hover...in that order! -->
/* the following sets the definitions for the links in the main content of the page*/
a:link{ color:#ff9900; text-decoration:none; }
a:visited{ color:#ffcc00; text-decoration:none; }
a:hover{ color:#006666; text-decoration:underline; }
a:active{ color:#ff9900; text-decoration:none; }
a:active:hover{ color:#006666; text-decoration:underline; }
a:visited:hover{ color:#006666; text-decoration:underline; }
/*--red capital hyperlinks --*/
.lred:link{ color: #ff0000; font-size: 10px; text-transform: uppercase; text-decoration: none; } 
.lred:visited{ color: #ff0000; font-size: 10px; text-transform: uppercase; text-decoration: none; }
.lred:hover{ color: #ff0000; font-size: 10px; text-transform: uppercase; text-decoration: underline; }
/* this styles the 'img' or any other element to be vertically aligned middle and gets rid of borders*/
.vertcent{
vertical-align: middle;
border:0px;
}

/* growing wild stuff ----------------------------------------------------------*/

/* this is the definition for the growing wild site's banner */
#header2{
text-align: left;
width:800px;
height:175px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
background-image: url('images/growingwild.jpg'); 
background-repeat: no-repeat;
}

/* main horizontal navigation bar for GROWING WILD programme goes here */
#navcontainer2{
	position: absolute;
	top: 145px;
	left: 147px;
	width:653px;
	margin: 0px;
	padding: 0px;
}

/* growing wild footer definition */
#footer2{
position: relative;
background:url('images/growingfooter.jpg') no-repeat #FFFFFF top left;
height:50px;
width:650px;
margin-right:auto;
margin-left:auto;
text-align:right;
padding: 0px 0px 0px 0px;
font: 8pt/14pt Arial, Verdana, Helvetica, sans-serif;
color:#008888;
}

/* growing wild callout box */
.calloutBox {
  background-image:url("images/callout.jpg");
  background-repeat:no-repeat;
  float: left;
}
.calloutInside {
  margin: 15px;
}
.calloutInside p {
  font-size:1.5em;
  font-style:italic;
  text-align:justify;
}

/* col7 text content div */
.col9content {
padding:10px;
}

/* dropcap */
.dropcap {
float:left;
margin:1px;
padding:1px;
border:1px solid #006666;
background-color:#ffcd03;
color:#006666;
line-height:1em;
font-size:4em;
font-weight:bold;
}
.imgbox {
text-align:center;
border:0px;
background:#006666;
margin:5px;
padding:10px;
float:left;
color:#ffffff;
}
.imgfutr{
font-size:.75em;
color:#ffcd03;
text-transform:uppercase;
text-align:center;
}