/* 
COLOUR GUIDE
#035748 - dark green border, and hover for links
#fff - white
#cccccc  - light grey border
#808080 - grey text in footer
#3c3c3c - darker grey of nav links
##035748 - green of the h1 span and the headers, footer links
#ffcc00 - yellow of zest
#cc33cc - purple/pink of life
#d5e3e1 - purpley border / background
*/

/* 	Intended for pages with just two main columns and the menu column , the background image used
	on the container adds the two fake borders, with a white area at the top 
	If you change the body tag in the html to body id="simpler" you get only one grey column edge */

body {
	margin:0px;
	padding:0px;
	background: url(images/greengradient1.png) repeat-x top #035748;
	text-align:center;
	font-family:arial helvitica, sans-serif;
	font-size:75%;
}
img {
border:0;
}

#container {
	width:770px;

	border: 2px solid #035748;
	text-align:left;
	margin: 15px auto;
	background: url(images/bigger_grey_two.png) repeat-y top #fff;
}

#simpler #container {
background-image: none;
background: url(images/bigger_grey_one.png) repeat-y left top #fff;
}

#leftcolumn {
position:relative;
  float: left;
 
  width: 170px;
}


#textwrapper {
  width: 600px;

  float: left;
  text-align:left;
}

#middlecolumn {
  
  padding: 0px 8px 0px 16px;
  
  clear: left;
  float: left;
  color: #333333;

  width: 273px;
}


#rightcolumn {
  
  padding: 0px 10px 0px 16px;
  color: #333333;

  width: 273px;
  float: left;
}

#farright {

  padding: 0px 5px 0px 10px;
  color: #333333;

  width: 160px;
  float: left;
}

#footer {
  border-top: 1px solid lightgrey;
  background: white;
  color:#808080;
  text-align: center;
  width: 100%;
  height: 85px;
  min-height: 85px;
  clear: both;
  padding-bottom: 10px;
}

#fulltext {
padding:10px;
width:550px;
margin-top:30px;
margin-left:10px;
float:left;
}

#centralbox {
width:470px;
float:left;
margin-left:100px;
}

.doubler {
width:120px;
float:left;

}

#subheader{
width:500px;
background:#fff;
}

.names {
width:120px;
float:left;
font-weight:bold;
background:#fff;
}
.areas {
width:200px;
float:left;
margin-bottom:5px;
}

/* navigation styles */

#navcontainer {
  background: white none repeat scroll 0%;
  float: left;
  color: #333333;
  margin-top: 15px;
margin-bottom:50px;
  width: 169px;
}
#navcontainer ul, #navcontainer ul li {
  margin: 5px 0px 0px;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  font-weight: bold;
  text-decoration: none;
  padding-left: 10px;
  background-image: none;
  padding-bottom:0;
margin-bottom: 10px
}
#navcontainer ul li a {
  font-weight: bold;
  text-decoration: none;
  padding-left: 10px;
  color: #3c3c3c;
}
#navcontainer ul li a:hover {
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-left: 10px;
  color: #035748;
}


a:link, a:hover, a:visited {
color:#035748;
}
#farright ul, #farright ul li {
 list-style-type: none;
 list-style-position: outside;
 padding:3px;
}

/* map hovers */
.maps, .maps2, .maps3 {
width:270px;
height:100px;
font-size:120%;
}

.maps a:link, .maps a:visited {
display:block;
height:100px;
padding-left: 145px;
background-image: url(images/map1-aa.png);
text-decoration:none;
}

.maps a:hover, #maps a:active {
background-image: url(images/map1-bb.png);
background-color: #abc7c2;
color:#000;
}


.maps2 a:link, .maps2 a:visited {
display:block;
height:100px;
padding-left: 145px;
background-image: url(images/map2-aa.png);
text-decoration:none;
}

.maps2 a:hover, #maps2 a:active {
background-image: url(images/map2-bb.png);
background-color: #abc7c2;
color:#000;
}


.maps3 a:link, .maps3 a:visited {
display:block;
height:100px;
padding-left: 145px;
background-image: url(images/map3-aa.png);
text-decoration:none;
}

.maps3 a:hover, #maps3 a:active {
background-image: url(images/map3-bb.png);
background-color: #abc7c2;
color:#000;
}


/* text styles */
h1 {
font-size: 180%;
padding-top:10px;
text-align:center;
color:#035748;
}

/* h1 span {
color:#035748;
} */

h2 {
color:#035748;
text-align:left;
font-size:125%;
margin-bottom:17px;
}

#subheader h2 {
color:#000;
}

#subheader span {
color:#035748;
}

h3 {
color:#035748;
text-align:left;
font-size:125%;
}

.zest {
font-size: 130%;
color:#ffcc00;
font-weight:normal;
}
.life {
font-size:130%;
color:#cc33cc;
font-weight:normal;
}

.b {
font-weight:bold;
}

 li   {
  margin-left: -20px;
  padding-left: 10px;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  background-image: url(images/bulletgrey.png);
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-bottom:0.5em;
}

hr {
  border:  none;
  margin: 0 0 3px;
  background: #cccccc;
  color: #cccccc;
  height: 1px;
  clear:both;
}

.lh24
{  
line-height: 150%;}

#credits {
margin-top:50px;
padding-left:10px;
}

h1.energy
 {
font-size: 200%;
padding-top:15px;
text-align:center;
color: #694E72;
}

h2.energy2
 {
color:#6B4977;
margin-left: 10px;
text-align:center;
font-size:170%;
}

h3.energy3
{
color:#A36FA9;
text-align:center;
font size: 140%;
}


.floatright
{
float: right;
margin: 0 0 10px 10px;
padding: 2px;
}

p.right {text-align: right}
p.center {text-align: center}

.contentimg
{
margin-left:10px}

a.purple:link {color: #6B4977; font-weight: bold;}
a.purple:active {color: #6B4977;  font-weight: bold;}
a.purple:visited {color: #6B4977;  font-weight: bold;}
a.purple:hover {color: #6B4977;  font-weight: bolder;}

a.purple:link {c
a:link, a:visited, a:hover  {
color:#035748;

}





#flyout {float:left; padding:0; margin:3px 0 0 0; list-style:none; position:relative; width:130px;}