/***********/
/* General */
/***********/
body {
 background-color: #e1e1e1;
 margin: 5px 0;
 padding: 0;
 font-family: Arial, sans-serif;
 font-size: 90%;
 color: #000000;
 text-align: center;
}

div.clear {
 height: 0;
 line-height: 0;
 font-szie: 0;
}

.clear {
 clear: both;
}

.left {
 float: left;
 margin: 0 15px 10px 0;
}

.right {
 float: right;
 margin: 0 0 10px 15px;
}

a {
 font-weight: bold;
 text-decoration: none;
 color: #007e39;
}

a:hover {
 text-decoration: underline;
}

img {
 border: 0;
}

address {
 font-style: normal;
 margin: 0.5em 0 1em;
}

/*************/
/* Container */
/*************/
div#container {
 width: 980px;
 margin: 0 auto;
 text-align: left;
 border: 1px solid #007e39;
 background-color: #ffffff;
 position: relative;
}

div#container div#leaf {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 20;
 width: 133px;
 height: 176px;
 background-image: url(images/leaf.png);
 background-repeat: no-repeat;
 background-position: top left;
}

* html div#container div#leaf { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/leaf.png', sizingMethod='crop');
}

div#container img#welcome {
 margin: 10px 0 0;
}

/*******/
/* Nav */
/*******/
a#top {
 display: none;
}

div#nav {
 height: 45px;
 background-color: #007e39;
 font-size: 0.85em;
}

div#nav ul {
 list-style: none;
 margin: 0 0 0 20px;
 padding: 0;
}

div#nav ul li {
 margin: 13px 0 0;
 padding: 0 10px;
 display: inline;
 float: left;
 border-left: 1px solid #ffffff;
 position: relative;
 height: 17px;
 z-index: 500;
}

div#nav ul li.first {
 border: 0;
}

div#nav ul li a {
 color: #ffffff;
 text-decoration: none;
 font-weight: normal;
}

div#nav ul li a:hover {
 text-decoration: underline;
}

body#pageHome div#nav ul li#navHome a
,body#pageRoots div#nav ul li#navRoots a
,body#pageHow div#nav ul li#navHow a
,body#pageWorking div#nav ul li#navWorking a
,body#pageMapFriends div#nav ul li#navWorking a
,body#pageBreath div#nav ul li#navBreath a
,body#pageMap div#nav ul li#navBreath a
,body#pageInspiration div#nav ul li#navInspiration a
,body#pageMapEducation div#nav ul li#navInspiration a
,body#pageRead div#nav ul li#navRead a
{
 font-weight: bold;
}

div#nav ul li ul {
 position: absolute;
 top: 15px;
 left: 0;
 display: none;
 margin: 0;
 padding: 15px 0 0;
}

div#nav ul li.hover ul {
 display: block;
 background-color: #007e39;
}

div#nav ul li ul li {
 margin: 0;
 padding: 3px 10px;
 display: block;
 float: none;
 border: 0;
 position: static;
 height: auto;
}

div#nav ul li ul li a {
 color: #ffffff;
 text-decoration: none;
 font-weight: normal !important;
 white-space: nowrap;
}

/************/
/* Main Box */
/************/
div#mainbox {
 width: 652px;
 height: 507px;
 padding: 25px 22px 15px;
 background-image: url(images/white_box.png);
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0 auto -10px;
 z-index: 15;
 position: relative;
}

* html div#mainbox { /* If we replace .png background with IE filtering, the links in div#mainbox become unclickable. So degrade to using .gif background image instead */
 background-image: url(images/white_box.gif);
}

div#mainbox.big {
 width: 792px;
 width: 782px;
 padding-left: 32px;
 background-image: url(images/white_box_big.png);
 margin: 0 0 -10px 142px;
}

* html div#mainbox.big { /* If we replace .png background with IE filtering, the links in div#mainbox become unclickable. So degrade to using .gif background image instead */
 background-image: url(images/white_box_big.gif);
}

div#mainbox div.box {
 width: 190px;
 width: 210px;
 height: 225px;
 height: 228px;
 float: left;
 margin: 0 0 9px 9px;
 margin: 6px 0 23px 9px;
}

div#mainbox div.box.first {
 margin-left: 0;
}

div#mainbox div.box.orange {
 background-color: #fbb03b;
 color: #000000;
}

div#mainbox div.box.orange a {
	color: #FFF;
}

div#mainbox div.box.red {
 background-color: #d2232a;
 color: #ffffff;
}

div#mainbox div.box.red a {
 color: #ffffff;
}

div#mainbox div.box.green {
 background-color: #98be3f;
 color: #000000;
}

div#mainbox div.box.green a {
	color: #FFF;
}

div#mainbox div.box.darkgreen {
 background-color: #007e39;
 color: #ffffff;
}

div#mainbox div.box.darkgreen a {
 color: #ffffff;
}

div#mainbox div.box.grey {
	background-color: #999;
	color: #000000;
}

div#mainbox div.box.grey a {
	color: #FFF;
}

div#mainbox div.box.darkorange {
 background-color: #fb6f3b;
 color: #000000;
}

div#mainbox div.box.darkorange a {
	color: #FFF;
}

div#mainbox div.box div.boxinner {
 padding: 0 10px;
}

div#mainbox div.box div.boxinner h2 {
 margin: 4px 0 2px;
 padding: 0;
 font-size: 1em;
 font-weight: bold
}

div#mainbox div.box div.boxinner ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FFF;
	display: inline;
}

div#mainbox div.box div.boxinner ul li {
	padding: 0;
	margin: 0px;
	display: inline;
}
div#mainbox div.box div.boxinner ul li a{
	font-weight: normal;
	font-size: 13px;
	margin: 0px;
	display: block;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #FFF;
	padding-right: 0px;
	padding-left: 0px;
}
div#mainbox div.box div.boxinner ul li a:hover{
	margin: 0px;
	display: block;
	text-decoration: none;
	color: #FFF;
	background-repeat: no-repeat;
	background-position: right center;
	background-image: url(images/arrow.png);
}

div#mainbox.big h2 {
 color: #fbb03b;
 margin: -15px 0 10px 0;
 padding: 0;
}

div#mainbox.big div#subnav {
 width: 153px;
 float: left;
 padding-top: 5px;
}

div#mainbox.big div#subnav ul {
 list-style: none;
 margin: 5px 0 0;
 padding: 0;
}

div#mainbox.big div#subnav ul li {
 width: 153px;
 margin: 6px 0 0;
 padding: 0;
}

div#mainbox.big div#subnav ul li a {
 color: #ffffff;
 text-decoration: none;
 height: 18px;
 display: block;
 padding: 3px 0 3px 6px;
 background-repeat: no-repeat;
 background-position: top left;
 background-image: url(images/subnav/subnav_orange.gif);
 font-size: 0.9em;
}

div#mainbox.big div#subnav ul li a.big {
 height: 31px;
 background-image: url(images/subnav/subnav_orange_big.gif);
}

div#mainbox.big div#subnav ul li a:hover {
 background-image: url(images/subnav/subnav_red.gif);
}

div#mainbox.big div#subnav ul li a.big:hover {
 background-image: url(images/subnav/subnav_red_big.gif);
}

div#mainbox.big div#subnav ul li ul {
 padding: 0;
 margin: 0 0 0 6px;
}

div#mainbox.big div#subnav ul li ul li {
 width: auto;
 margin: 3px 0 0;
 padding: 0;
}

div#mainbox.big div#subnav ul li ul li a {
 color: #007e39;
 text-decoration: none;
 height: auto;
 display: inline;
 padding: 0;
 background-image: none;
 font-size: 0.9em;
}

div#mainbox.big div#subnav ul li ul li a:hover {
 text-decoration: underline;
 background-image: none;
}

div#mainbox.big div#content {
 width: 590px;
 float: left;
 margin-left: 25px;
 height: 420px;
 overflow: auto;
 padding-right: 5px;
}

div#mainbox.big div#content h2 {
 color: #fbb03b;
 font-size: 1.5em;
 margin: 10px 0 6px;
}

div#mainbox.big div#content h2:first-child {
 margin-top: 0;
}

div#mainbox.big div#content h3 {
 color: #d2232a;
 font-size: 1.2em;
 margin: 8px 0 4px;
}

div#mainbox.big div#content h4 {
 color: #000000;
 font-size: 1.1em;
 margin: 8px 0 0;
}

div#mainbox.big div#content h5 {
 font-size: 1em;
 margin: 5px 0 1px;
}

div#mainbox.big div#content > h3 {
 margin-top: 0;
}

div#mainbox.big div#content h3 + p, div#mainbox.big div#content h4 + p, div#mainbox.big div#content h5 + p {
 margin-top: 0;
}

div#mainbox.big div#content table td {
 vertical-align: bottom;
 padding-right: 10px;
}

div#mainbox.big div#content a {
 text-decoration: underline;
}

div#mainbox.big div#content a:hover {
 text-decoration: none;
}

div#mainbox.big div#content li {
 margin-bottom: 6px;
}

/**********/
/* Titles */
/**********/
div#mainbox h1 {
 margin: 0;
 padding: 0;
 text-indent: -9999px;
 background-repeat: no-repeat;
 background-position: top left;
}

body#pageHow div#mainbox h1 {
 background-image: url(images/titles/title_how_we_make_a_difference.png);
 width: 407px;
 height: 53px;
}

* html body#pageHow div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_how_we_make_a_difference.png', sizingMethod='crop');
}

body#pageRoots div#mainbox h1 {
 background-image: url(images/titles/title_roots_of_the_project.png);
 width: 258px;
 height: 53px;
}

* html body#pageRoots div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_roots_of_the_project.png', sizingMethod='crop');
}

body#pageRead div#mainbox h1 {
 background-image: url(images/titles/title_read_all_about_it.png);
 width: 274px;
 height: 53px;
}

* html body#pageRead div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_read_all_about_it.png', sizingMethod='crop');
}

body#pageInspiration div#mainbox h1 {
 background-image: url(images/titles/title_inspiration_for_life.png);
 width: 274px;
 height: 53px;
}

* html body#pageInspiration div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_inspiration_for_life.png', sizingMethod='crop');
}

body#pageMapEducation div#mainbox h1 {
 background-image: url(images/titles/title_inspiration_for_life.png);
 width: 274px;
 height: 53px;
}

* html body#pageMapEducation div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_inspiration_for_life.png', sizingMethod='crop');
}

body#pageBreath div#mainbox h1 {
 background-image: url(images/titles/title_breath_fresh_air.png);
 width: 298px;
 height: 53px;
}

* html body#pageBreath div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_breath_fresh_air.png', sizingMethod='crop');
}

body#pageMap div#mainbox h1 {
 background-image: url(images/titles/title_breath_fresh_air.png);
 width: 298px;
 height: 53px;
}

* html body#pageMap div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_breath_fresh_air.png', sizingMethod='crop');
}

body#pageMapFriends div#mainbox h1 {
 background-image: url(images/titles/title_working_together.png);
 width: 298px;
 height: 53px;
}

* html body#pageMapFriends div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_working_together.png', sizingMethod='crop');
}

body#pageWorking div#mainbox h1 {
 background-image: url(images/titles/title_working_together.png);
 width: 252px;
 height: 53px;
}

* html body#pageWorking div#mainbox h1 { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/titles/title_working_together.png', sizingMethod='crop');
}

/*******/
/* Map */
/*******/
body#pageMap div#mainbox.big div#content
,body#pageMapFriends div#mainbox.big div#content
,body#pageMapEducation div#mainbox.big div#content {
 width: 768px;
 margin-left: 0;
 position: relative; /* only needed to get IE7 to fit the map within #content and scroll the map properly */
}

body#pageMap div#locationcontainer
,body#pageMapFriends div#locationcontainer
,body#pageMapEducation div#locationcontainer {
 width: 153px;
 float: left;
 padding-top: 5px;
}

body#pageMap div#mapcontainer
,body#pageMapFriends div#mapcontainer
,body#pageMapEducation div#mapcontainer {
 position: relative;
 width: 568px;
 height: 859px;
 float: left;
}

body#pageMap div#mapcontainer img.marker
,body#pageMapFriends div#mapcontainer img.marker
,body#pageMapEducation div#mapcontainer img.marker {
 position: absolute;
 zindex: 10;
 cursor: pointer;
}

body#pageMap div#locationcontainer img.key
,body#pageMapFriends div#locationcontainer img.key
,body#pageMapEducation div#locationcontainer img.key {
 float: left;
 margin: 0 2px 2px 0;
}

body#pageMap img#key
,body#pageMapFriends img#key
,body#pageMapEducation img#key {
 margin: 10px 0 0;
 clear: left;
}

/*********/
/* Panel */
/*********/
div#panel {
 position: absolute;
 top: 180px;
 left: 0;
 width: 850px;
 background-color: #98be3f;
 height: 420px;
 height: 32em;
 color: #ffffff;
 font-size: 0.9em;
}

body#pageHome div#panel {
 width: 100%;
}

div#panel img.header {
 margin: 7px 0 3px;
}

div#panel a {
 color: #ffffff;
 font-weight: normal;
}

/**************/
/* Left Panel */
/**************/
div#panel div#leftpanel {
	width: 125px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 18px;
	padding-top: 15px;
}

div#panel div#leftpanel ul {
 margin: 10px 0 0 10px;
 padding: 0 0 0 5px;
}

div#panel div#leftpanel ul li {
 margin: 0 0 3px;
}
div#panel div#leftpanel h1 {
	margin: 2px 0;
	font-size: medium;
	color: #030;
}

div#panel div#leftpanel p {
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}

/***************/
/* Right Panel */
/***************/
div#panel div#rightpanel {
	float: right;
	width: 130px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 15px;
}

div#panel div#rightpanel ul {
 margin: 10px 0 0 5px;
 padding: 0 0 0 5px;
}

div#panel div#rightpanel ul li {
 margin: 0 0 3px;
}

div#panel div#rightpanel p {
 margin: 2px 0;
}
div#panel div#rightpanel h2 {
	margin: 2px 0;
	font-size: medium;
	color: #030;
}

div#panel div#rightpanel .strong {
 font-weight: bold;
}

div#panel div#rightpanel img#favouritetreephoto {
 margin: 10px 0 0;
}

/*********/
/* Forms */
/*********/
div#content form {
 margin: 0;
}

div#content form fieldset {
 border: 1px solid #007e39;
 padding: 10px;
 margin-bottom: 10px;
}

div#content form fieldset legend {
 padding: 0 10px;
 color: #007e39;
 font-size: 1em;
 font-weight: bold;
}

div#content form div.field {
 float: left;
 clear: left;
 width: 540px;
 margin: 5px 0;
}

div#content form div.field input, div#content form div.field textarea {
 float: left;
 width: 300px;
}

div#content form div.field textarea {
 height: 80px;
}

div#content form div.field label {
 float: left;
 width: 120px;
 padding-right: 10px;
 text-align: right;
}

div#content form div.field br {
 clear: left;
}

div#content form div.field.full label {
 float: none;
 width: auto;
 padding-right: 0;
 text-align: left;
}

div#content form div.field.full textarea {
 margin-left: 130px;
}

div#content form div.field.required label {
 font-weight: bold;
}

div#content form div.field.checkbox {
 margin: 1px 0;
}

div#content form div.field.checkbox label {
 width: 350px;
 padding-left: 10px;
 padding-right: 0;
 text-align: left;
}

div#content form div.field.checkbox input.checkbox {
 clear: left;
 width: auto;
 margin-left: 130px;
 margin-top: 0;
}

div#content form div.field input.text {
 padding: 1px;
}

div#content form input.button {
 margin: 15px 0 0 130px;
 width: auto;
}

div#content form p {
 margin: 0 0 0 130px;
 padding: 5px 0;
 clear: left;
 font-weight: bold;
}

div#content form p.normal {
 margin: 0.5em 0;
 padding: 0;
 clear: left;
 font-weight: normal;
}

div#content div.field.error {
 border: 1px solid #000000;
 padding: 3px 0;
 background-color: #ff0000;
 color: #ffffff;
}

div#content div.errors {
 border: 1px solid #000000;
 padding: 0 10px;
 background-color: #ff0000;
 color: #ffffff;
 margin: 10px;
}

div#content div.messages {
 border: 1px solid #007e39;
 padding: 0 10px;
 background-color: #f1f1f1;
 color: #000000;
 margin: 10px;
}

/**********/
/* Footer */
/**********/
div#footerimg {
 background-image: url(images/footer.png);
 background-repeat: no-repeat;
 background-position: top left;
 height: 45px;
}

* html div#footerimg { /* Workaround IE PNG deficiencies */
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/footer.png', sizingMethod='crop');
}

div#footer {
 height: 45px;
 background-color: #007e39;
 font-size: 0.85em;
}

div#footer ul {
 list-style: none;
 margin: 0 0 0 385px;
 padding: 0;
}

div#footer ul li {
 margin: 13px 0 0;
 padding: 0 10px;
 display: inline;
 float: left;
 border-left: 1px solid #ffffff;
}

div#footer ul li.first {
 border: 0;
}

div#footer ul li a {
 color: #ffffff;
 font-weight: normal;
}

div#footer ul li a:hover {
 text-decoration: underline;
}