/* ----- STANDARD NHM CODE -------------------------------------------------- */
/* code already exisiting */
/* OPAL GREEN = 31C200 */
* 
{
	font-style 	  	  : normal;
	list-style 	  	  : none;
	margin 		  	  : 0;
	padding 	  	  : 0;
}
body 
{
	background 	  	: #b3b3b3 url(../images/backgrounds/bg-body.gif) repeat-x;		/* changed path according to WF site structure */
	color 		  	  	: #333;
	font-size 	  	  	: 76%;
	font-family 		: arial,sans-serif;
}
img , object {
	border-width      : 0px;
	vertical-align    	: bottom;		/* override browser default 'baseline' which leaves space beneath the image ( display: block; works too) */
}

img#page-logo
{
	margin             : 15px 0px 14px 15px;
}
	
#page-container 
{
	background-color 	: #FFFFFF;
	border-bottom 			: 1px solid #737173;
	border-left 			: 1px solid #737173;
	border-right 			: 1px solid #737173;
	margin 					: auto;
	position 				: relative;		/* so bottom image can be absolutely positioned within container */
	text-align 				: left;		 /* needed for IE5 */
	overflow 				: hidden;
	width 					: 974px;
}

.clearfix { zoom:1;}/*fix for IE6 guillotine bug*/

/* NHM Page header  based on the collaborative site http://www.nhm.ac.uk/research-curation/research/projects/solanaceaesource/ */
#page-header  {
	background-image 	: none;
	border-bottom 			: 10px solid #31C200;
	overflow 				    : hidden;
	width 					    : 100%;
	height              			: 50px; 
}
#page-header img#page-logo {
	float 					: left;
}

/*  end collaborative header */

/* OPAL header */
#page-header-sub {
	height					: 132px;  
	position 				: relative;
	width 					: 100%;
}

#key2nature-logo {
	position 			: absolute;
	top					: 0;
	left					: 0;
}

#key2nature-logo img {
	padding-left: 15px;
	padding-top: 20px;
}

#banner {
	right					: 0;
	position 			: absolute;
	top					: 0;
	z-index				: 1;
}

/* tab navigation menu in header */
#page-header-sub ul {
	border 					: 0 none;
	left 					    : 270px;
	overflow 				: hidden;
	position 				: absolute;
	top						: 30px;
	z-index					: 2;
}
#page-header-sub li {
	float 					: left;
	padding 			: 0 0 0 4px;
}
#page-header-sub li.on, 
#page-header-sub li.active, 
#page-header-sub li:hover {
	background 				: url(../images/backgrounds/bg-nav-tab-left.png) no-repeat left top;
}
#page-header-sub li.on a, 
#page-header-sub li.active a, 
#page-header-sub li a:hover {
	background 				: url(../images/backgrounds/bg-nav-tab-right.png) no-repeat right top;
}
#page-header-sub li a {
	color 				: #FFF;
	display 				: block;
	font-weight 		: bold;
	padding 			: 5px 11px 5px 6px;
	text-transform 	: uppercase;
}
/* END tab navigation menu in header */

.align-right {
  float   : right; 
  margin  : 0 0 15px 15px;
  border  : none;
}

.align-left {
  float   :left; 
  margin  : 0 15px 15px 0; 
  border  : none;
}


/* ------- left navigation menu -------*/
.nav-content
{
	float 				: left;
	width 			: 190px;
	margin-left	: 20px;
}
.nav-group {
	background 		: url(../images/backgrounds/bg-nav-content-bottom.gif) no-repeat bottom left;
	margin-top		: 15px;
	padding-bottom	: 20px;
}
.nav-heading {
	background 	 	: url(../images/backgrounds/bg-nav-content-top.gif) no-repeat top left;
}

a.nav, a.nav:link, a.nav:visited, .chosen {
	display				: block;
	width				: 140px; 
	height				: 20px; 
	margin-top		: 2px; 
	text-align			: left; 
	padding-left		: 15px;
	padding-right		: 15px;
	text-decoration	: none; 
	line-height			: 25px; 
	overflow			: hidden;
}

.submenu {
	margin-left: 15px;
}
a.nav:hover {
	text-decoration			: underline;
	/*color:#fff; 
	background:#a6e192;*/
}
a.nav:active, .chosen {
	/*color:#fff; 
	background:#a6e192;*/
}

/********************/
.page-content {
	overflow        	: hidden;
	margin-top		: 15px;
	margin-left		: 220px;
	_margin-left		: 240px; /* for IE */
	margin-right		: 10px;
}


a, a:link, a:visited, a:active
{
	background-position: right center;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, a { 
  color: #228900; 
}

h1, h2, h3, h3, p {
	margin-bottom	: 10px;
}

.page-content a:hover {
	text-decoration			: underline;
}

.container {
	margin: 10px;
	width: 500px;
	_width: 470px;
	padding: 5px;

}

.container ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
}
.container ul li {
	list-style-type: disc;
	list-style-position: inside;
}

.page-content p {
	width: 500px;
	_width: 470px;
}

.factMore {
	background	: transparent url(../images/generic/arrow-white-on-green-circle.gif) no-repeat scroll left center;
	color				: #333333;
	line-height		: 1.75em;
	margin-left	: 10px;
	padding-left	: 25px;
	overflow        : hidden;
	margin-bottom: 5px;
}

.factMore a:hover {
    	text-decoration			: underline;
}


#page-footer {
	background			: #FFF url(../images/backgrounds/bg-footer-corner-left.gif) no-repeat top left;
	clear 					: both;
	padding-top 			: 21px;
}

#page-footer ul {
	background-color 	: #A6E192;
	overflow 				: hidden;
	padding-bottom		: 5px;
	padding-left			: 20px;
	padding-top			: 3px;
	width 					: 100%;
}

#page-footer li {
	float 					: left;
	padding-right		: 15px;
}

#page-footer li a:link,#page-footer li a:visited {
	font-size 				: 0.9em;
	color 					: #000;
}

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

#page-body {
	background-color 	: #FFF;
	overflow 				: hidden;
	width 					: 974px;
}
.page-common {
	overflow 				: hidden;
	width 					: 100%;
}
/* breadcrumbs */
.nhmbreadcrumb {
	float 					: left;
	margin 				: 25px 0 10px 20px;
	width 				: 700px;
}
.nhmbreadcrumb a:hover
{
	color					: #228900;
	text-decoration			: underline;
}

.breadcrumb {
	position		: absolute;
	top			: 149px;
	overflow 	: hidden;
	float 			: left;
	left 			: 210px;
}
.breadcrumb a:link,  .breadcrumb a:visited
{
	color					: #000;	
}
.breadcrumb a:hover
{
	color					: #228900;
	text-decoration	: underline;
}

.middleBox, .middleBox p {
	width: 490px;
	_width: 470px;
}
#plainBox h1, #plainBox h2, #plainBox p {margin:0 10px; padding:0;}
#plainBox p {padding-bottom:0.5em; padding-top: 0.5em;}
#plainBox h2 {padding-top:0.5em;}
#plainBox {background: transparent;}

#plainBox .xtop, .xbottom {display:block; background:transparent;}
#plainBox .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
#plainBox .xb1, .xb2, .xb3 {height:1px;}
#plainBox .xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #31c200; border-right:1px solid #31c200;}
#plainBox .xb1 {margin:0 5px; background:#31c200;}
#plainBox .xb2 {margin:0 3px; border-width:0 2px;}
#plainBox .xb3 {margin:0 2px;}
#plainBox .xb4 {height:2px; margin:0 1px;}

#plainBox .xboxcontent {display:block; background:#fff; border:0 solid #31c200; border-width:0 1px; height:1%}

.boldparagraph p {
	font-weight: bold;
}

table #partners {
	width: 80%;
}
table #partners td {
	padding: 3px;
	vertical-align:top;
	align:left;
}

.partnerLogo{
	padding:6px;
}


.sidepanel1 h1, .sidepanel2 h1, .sidepanel3 h1, .widebox h1 {
	margin:0; 
	font-size:1.2em; 
	padding:0 10px 5px 10px; 
	border-bottom:1px solid #444;
}
.sidepanel1 p, .sidepanel2 p, .sidepanel3 p, .widebox p {
	margin:0; 
	padding:10px 0px 0px 10px; 
	width: 95%;
	overflow:hidden;
}
.sidepanel1, .sidepanel2,.sidepanel3 {
	position: absolute;
	right: 10px;
	background: transparent; 
	width:240px; 
}

.sidepanel1 {
	top: 250px;
}

.sidepanel2 {e;
	top: 340px;
}

.sidepanel3 {
	top: 430px;
}


.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
_height:1%
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#31c200;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}

/*DL, DT, DD TAGS LIST DATA*/
dt {
	font-weight:bold;
	margin-left:10px;
	padding:5px;
}

dd {
	margin-left:20px;
	padding:5px;
}

.caption {
font-weight: bold;
}