* { margin: 0; padding: 0; border: none; }

body 
{
	background: #99cc33 url(../images/green/bottom_gradiant_green.gif) top left repeat-y;
	color: #000;
	font-family: Arial, Sans-Serif;
	font-size: 0.7em;
	line-height: 1.4em;
	min-width: 774px;
	max-width: 1200px;
}

/* This logo for printing only: */
#printlogo { display: none; }

a:link, a:visited {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}

a:hover, a:active,
.current a:link, .current a:visited {
	color: #66b219;
}

a img, a:hover img { border: none; }

input.textbox, select, textarea { border: 1px solid #999;}

/* Any lists that need bullets are custom images: */
ul { list-style-type: none; }

#masthead {
	background-color: #99cc33;
}

/* Keep this out of the way for visual browsers: */
a#skiplinks { display: block; position: absolute; left: -999px; }

#topnav {
	text-align: right;
	padding-top: 2px;
	padding-right: 10px;
}

#topnav li {
	display: inline;
	color: #fff;
}

#topnav li a:link, #topnav li a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

#topnav li a:hover, #topnav li a:active,
#topnav li.current a:link, #topnav li.current a:visited {
	color: #000;
	text-decoration: underline;
}




/* Main nav stuff with rollovers
 * ========================================================================= */

#mainnav {
	margin-top: 31px;
	margin-bottom: 6px;
	width: 605px;
	height: 58px;
	float: right;
}

#mainnav li {
	float: left;
	width: 141px;
	height: 58px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: right center;
}

#mainnav li a:link, #mainnav li a:visited {
				text-indent: -9999px;
				overflow: hidden;
				outline: none;
				display: block;
				width: 141px; height: 58px;
				background-repeat: no-repeat;
				background-position: left center;
}


#mainnav li.current a:link, #mainnav li.current a:visited,
#mainnav li a:hover, #mainnav li a:active, #mainnav li a:focus {
				outline: none;
				background-position: right center;
}



li#aboutnav, li#aboutnav a {
	background-image: url(../images/green/mainnav1_green.gif);
}

li#beforenav, li#beforenav a {
	background-image: url(../images/green/mainnav2_green.gif);
}

li#afternav, li#afternav a {
	background-image: url(../images/green/mainnav3_green.gif);
}

li#watchnav, li#watchnav a {
	background-image: url(../images/green/mainnav4_green.gif);
}

a#logo {
	float: left;
	display: block;
	margin: 0 0 0 11px;
}

#breadcrumbs {
	clear: both;
	background: #66b219 url(../images/green/top_gradiant_green.gif) top right repeat-y;
	padding: 0.6em 0 0.6em 11px;
	color: #fff;
}

#breadcrumbs a:link, #breadcrumbs a:visited { color: #fff; font-weight: normal; }
#breadcrumbs a:hover, #breadcrumbs a:active { color: #000; }


/* Put all absolutely positioined elements in their own relatively positioned parents.
This fix avoids making the main content area position: relative or position: absolute,
which in turn avoids a bunch of browser bugs. 
Putting everything relative to the body also causes layout problems at smaller screen sizes */
#absolutecontainer {
	position: relative;
}

/* =left
 * ====================================================================== */

#secondnav {
	position: absolute;
	left: 0; top: 92px;
	width: 203px;
}

#secondnav ul {
	background: #99cc33 url(../images/green/left_link_section.gif) right bottom no-repeat;
	padding: 0 12px 20px 26px;
	font-size: 110%;
	list-style-image: none;
}

#secondnav li {
	margin: 0 0 0.6em;
	padding: 0 0 0 18px;
	border: 1px solid black; /* Stops doubled margin on IE6 */
	background: transparent url(../images/arrow_black_small.gif) left center no-repeat;;
}

#secondnav li.current {
	background-image: url(../images/green/little_arrow_black.gif);
}

#secondnav a:link, #secondnav a:visited {
	display: block;
	color: #fff;
	text-decoration: none;
}

#secondnav li.current a:link, #secondnav li.current a:visited,
#secondnav a:hover, #secondnav a:active {
	color: #99cc33;
}

#emailafriend {
	margin-left: 9px;
	margin-top: 12px;
	width: 155px; height: 38px;
	display: block;
	background-image: url(../images/green/emailbutton_green.gif);
	background-position: right center;
}

#emailafriend a {
	background-image: url(../images/green/emailbutton_green.gif);
}

#emailafriend a:link, #emailafriend a:visited {
	background-position: left center;
	display: block;
	width: 155px; height: 38px;
	text-indent: -9999px;
	overflow: hidden;
	outline: none;
}

#emailafriend a:hover, #emailafriend a:active, #emailafriend a:focus {
	background-position: right center;
	outline: none;
}

/* =centre
 * ======================================================================= */

#content {
	background: transparent url(../images/green/cd_mc_green_middle_left.gif) left top repeat-y;
	margin-right: 214px;
}

#content .middleright {
	background: transparent url(../images/green/cd_mc_green_middle_right.gif) right top repeat-y;
}

#content .topleft {
	background: transparent url(../images/green/cd_mc_green_top.gif) left top no-repeat;
}

#content .topright {
	background: transparent url(../images/green/cd_mc_green_top_right.gif) right top no-repeat;
}

#content .bottomleft {
	background: transparent url(../images/green/cd_mc_green_bottom_left.gif) left bottom no-repeat;
}

#content .bottomright {
	background: transparent url(../images/green/cd_mc_green_bottom_right.gif) right bottom no-repeat;
	padding: 0 30px 0 224px;
}

/* Note: Gilder/Levin Method of Image Replacement */
h1 {
	position: absolute;
	top: 21px; left: 168px;
	overflow: hidden;
}

h1 span {
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute; left: 0; top: 0;
	overflow: hidden;
}

.about h1 {
	width: 333px; height: 28px;
}

.about h1 span {
	width: 333px; height: 28px;
	background-image: url(../images/green/title_about_cd.gif);
}

#content h2 {
	padding-top: 120px;
	margin: 0 0 1em 0;
	font-size: 160%;
	color: #000;
}

#content p {
	margin: 1em 0;
}

#content p.highlight {
	font-weight: bold;
	color: #66b219;
}

#content ul {
	list-style-image: url(../images/green/square.gif);
	font-weight: bold;
	padding-left: 2em;
	margin: 1em 0;
}

#content .backtotop {
	background: transparent url(../images/green/back_to_top_line.gif) right center no-repeat;
	height: 21px;
}

#content .backtotop a {
	display: block;
	float: right;
	width: 81px; height: 21px;
	background: transparent url(../images/green/back_to_top_button.gif) left center;
	text-indent: -9999px;
	overflow: hidden;
}


#printpage {
	position: absolute;
	top: 72px;
	right: 246px;
	width: 110px;
	height: 31px;
	background: transparent url(../images/print_page.gif) left center no-repeat;
}

#printpage a:link, #printpage a:visited {
	display: block;
	width: 110px; height: 31px;
	background-image: url(../images/print_page.gif);
	background-position: right center;
	text-indent: -9999px;
	overflow: hidden;
}

#printpage a:hover, #printpage a:active, #printpage a:focus {
	background-position: left center;	
	outline: none;
}


/* problems with some browser putting padding on the container, so use this fudge: */
#content div#pagebottom {
	clear: both;
	height: 10px;
}

/* problems with some browser putting padding on the container, so use this fudge: */
#content div#pagebottom2 {
	clear: both;
	height: 10px;
}

/* problems with some browser putting padding on the container, so use this fudge: */
#content div#pagebottom3 {
	clear: both;
	height: 10px;
}

/* problems with some browser putting padding on the container, so use this fudge: */
#content div#pagebottom4 {
	clear: both;
	height: 10px;
}


/* =right hand side
 * ======================================================================================
 */

#sidebar {
	position: absolute;
	top: 0px; right: 0;
	width: 214px;
	background-color: #99cc33;
}

#sidebar .inner {
	margin: 0; padding: 0 0 0 8px;
}

#sidebar div.sidebox {
	margin-bottom: 6px;
	width: 194px;
	background: transparent url(../images/green/exp_rightcolumn.gif) center bottom no-repeat;
}

#sidebar div.last {
	background: transparent url(../images/green/exp_rightcolumn_circle.gif) center bottom no-repeat;
	margin-bottom: 0;
}

#search form {
	background: transparent url(../images/exp_rightcolumn_green.gif) center bottom no-repeat;
	padding: 5px 0 10px 18px;
}

#searchbox {
	width: 123px;
	border: 2px solid #000;
	vertical-align: middle;
}

#searchbutton {
	vertical-align: middle;
}


/* Note: Gilder/Levin Method of Image Replacement */
#search h2 {
	margin: 0; padding: 0;
	width: 194px; height: 71px;
	position: relative;
	overflow: hidden;
}

#search h2 span {
	position: absolute;
	top: 0; left: 0;
	display: block;
	width: 194px; height: 71px;
	background: transparent url(../images/green/right_column_looking.gif) center top no-repeat;
}


/* Note: Gilder/Levin Method of Image Replacement */
#related h2 {
	margin: 0; padding: 0;
	width: 194px; height: 70px;
	position: relative;
	overflow: hidden;
}

#related h2 span {
	position: absolute;
	top: 0; left: 0;
	display: block;
	width: 194px; height: 70px;
	background: transparent url(../images/green/right_column_seealso.gif) center top no-repeat;
}

/* Note: Gilder/Levin Method of Image Replacement */
#downloads h2 {
	margin: 0; padding: 0;
	width: 194px; height: 71px;
	position: relative;
	overflow: hidden;
}

#downloads h2 span {
	position: absolute;
	top: 0; left: 0;
	display: block;
	width: 194px; height: 71px;
	background: transparent url(../images/green/right_column_downloads.gif) center top no-repeat;
}

/* =oftlink stuff */
div#oftlink {
	background-image: none;
	margin: 0 12px 0 0; padding: 0;
}

div#oftlink div {
	float: right;
	width: 127px;
	height: 116px;
	background-image: url(../images/green/oft_rollover_green.gif);
	background-position: right center;
}

#oftlink a {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 127px;
	height: 116px;
	background-image: url(../images/green/oft_rollover_green.gif);
}

#oftlink a:link, #oftlink a:visited {
	background-position: left center;
}

#oftlink a:hover, #oftlink a:active, #oftlink a:focus {
	background-position: right center;
	outline: hidden;
}


#sidebar ul {
	padding: 4px 0 10px 11px;
}

#sidebar li {
	width: 172px;
}

#sidebar li.odd {
	background-color:#ffa366;
}

#sidebar li.even {
	background-color: #ff6600;
}

#sidebar li.last {
	background-image: url(../images/right_column_mask.gif);
	background-position: center bottom;
	background-repeat: no-repeat;
}

#sidebar li a {
	padding: 0.2em 0 0.2em 18px;
	height: 1%; /* For IE Win */
	display: block;
	background: transparent url(../images/arrow_mid_tone.gif) 4px 50% no-repeat;
}

#sidebar li a:link, #sidebar li a:visited {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

#sidebar li a:hover, #sidebar li a:active {
	color: #000;
}

/* We don't want these fancy LIs in the search box: */
#sidebar #search li a:link, #sidebar #search li a:visited {
	display: inline;
	padding: 0;
	text-decoration: underline;
	font-weight: normal;
	color: #66b219;
	background-image: none;
}

#sidebar #search li a:hover, #sidebar #search li a:active {
	color: #000;
}

#sidebar #search ul { padding: 2px 16px 12px; text-align: center; }

#sidebar #search li { display: inline; color: #66b219; padding: 0; }


#lowercontent {
	background: transparent url(../images/green/lc_ongreen_topleft.gif) left top no-repeat;
	margin: 6px 214px 0 173px; 
}

#lowercontent .topright {
	background: transparent url(../images/green/lc_ongreen_topright.gif) right top no-repeat;
}

#lowercontent .bottomleft {
	background: transparent url(../images/green/lc_ongreen_bottomleft.gif) left bottom no-repeat;
}

#lowercontent .bottomright {
	background: transparent url(../images/green/lc_ongreen_bottomright.gif) right bottom no-repeat;
	position: relative;
	/* Dustin Diaz hack to make minheight work in IE6 */
	min-height: 88px;
	height: auto !important;
	height: 88px;
}

#lowercontent h3 {
	width: 66px; height: 72px;
	position: absolute;
	top: 10px; left: 14px;
	overflow: hidden;
	background: transparent url(../images/did_you_know.gif) center center no-repeat;
	text-indent: -9999px;
}

/* Min height problems if we don't use an image with transparency 
#lowercontent h3 span {
	position: absolute; top: 0; left: 0;
	width: 66px; height: 72px;
	background: transparent url(../images/did_you_know.gif) center center no-repeat;
}
*/

#lowercontent p {
	margin: 0;
	padding: 1.2em 20px 0.3em 95px;
	color: #fff;
	font-weight: bold;
}

p#morefacts {
	padding: 0 20px 0.8em 95px;
	text-align: right;
	clear: left;
}

p#morefacts a:link, p#morefacts a:visited {
	color: #fff;
	font-weight: bold;
}

p#morefacts a:hover, p#morefacts a:active {
	color: #000;
}









/* About level 2 pages:
 * =====================================================================================
 */

#content #pagenav {
	background: transparent url(../images/green/l3_box_green_1.gif) left top no-repeat;
}

#content #pagenav .topright {
	background: transparent url(../images/green/l3_box_green_2.gif) right top no-repeat;
}

#content #pagenav .bottomleft {
	background: transparent url(../images/green/l3_box_green_3.gif) left bottom no-repeat;
}

#content #pagenav .bottomright {
	background: transparent url(../images/green/l3_box_green_4.gif) right bottom no-repeat;
	padding: 0;
}

#pagenav .bottom {
	clear: left;
	height: 0.6em; /* Can't use padding because IE6 breaks the container box */
}

#pagenav .column {
	width: 33%;
	float: left;
}

#pagenav ul {
	list-style-image: url(../images/green/little_arrow_green.gif);
	line-height: 1em;
	padding: 0.5em 0 0 30px;
	margin: 0;
}

#pagenav li {
	margin: 0.6em 0;
	padding: 0;
}

#content h3, #content h4 {
	margin-top: 1em;
	font-weight: bold;
	font-size: 140%;
}

#content ul.jumpto {
	list-style-image: none;
	padding-left: 0;
}

#content ul.jumpto li {
	background: transparent url(../images/green/arrow_down_green.gif) left center no-repeat;
	padding-left: 18px;
	margin-bottom: 0.1em;
}


/* =footer
 * ======================================================================================
 */

#footer { margin: 10px 0 4px 11px; }

#footer li { display: inline; }

#footer, #footer a:link, #footer a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

#footer a:hover, #footer a:active {
	text-decoration: underline; 
}


/* Hacks and fixes etc
 * ==================================================================================== */

/* Dustin Diaz hack to make minheight work in IE6 */
#content #minheight {
	min-height: 550px; 
	height: auto !important;
	height: 550px;
}

#thirdnav {
	background-color: #99cc33;
	margin: 0; padding: 0;
}

#thirdnav li {
	background: transparent url(../images/orange/green_arrow.gif) left center no-repeat;
	padding-left: 16px;
}

#content #one, #content #three, #content #two { float: left; list-style-image: none; width: 28%; margin: 0; padding: 0 0 0 20px;  }