/* Welcome to the SUN's CSS for the website.*/
body {
	color: #000;
	background: #627f62;
	margin: 15px 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

p, td, li, ul, ol, h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}


/*This section defines the links in the content and secondary content sections, 
which have the rollover effect. Links in the header and navigation areas are defined
elsewhere.*/
a {
	text-decoration: none;
	color: #003399;
}

a:hover {
	color: #d66a0a;
}


/*This section defines the padding and margin around the images.
Map images have no padding (so that they could be as big as possible) 
and are used in the map section of the site (under Resources).
Photo images are used in the rest of the site and have spacing (padding) 
so that the text doesn't bump up against them. When defining the map and 
photos styles, you must use class="name" in the image tag. For images in 
the secondary content column, you do not need to define the style in the 
image tag.*/
img.map {
	padding: 0;
	margin: 0;
}

img.photo {
	padding: 8px;
	margin: 0;
	display: block;
}

#secondaryContent img {
	padding: 5px 0;
	margin: 0;
}


/*The div section divides the screen into 2 main sections: header and body. The
body section is further divided into 3 sections: navigation, content, and secondary 
content.*/
#header {
	background: transparent url(Images/header3.gif) left top no-repeat;
	color: #bfd9bf;
	border: 0; 
	margin: 0;
	padding: 0;
	width: auto;
	height: 125px;
	position: relative;	
	top: 0px;
}

/*This is the middle, or body, of each web page. The body div contains the 
navigation, main content, and secondary content divs -- which "float" side by side 
-- inside its tags. The image in the body div is a one pixel tall line with the colors 
of each of the columns so that in IE the bottom of each column lines up.*/
#body {
	position: relative;
	width: auto;
	color:#627f62;
}

#navigation {
	position: relative;
	margin: 0;
	padding: 0 7px;
	background-color: #4c944c;
	font-size: 13px;
	height: 100%;
	z-index: 10;
	
	
}
html>#navigation {
	width: 100%; /*This is what the Opera browser needs to know*/
}

#content { 	
	position: relative;
	margin: 0 0 0 15px;
	padding: 0px 15px 0 15px;
	background-color: #bfd9bf;
	height: 100%;
	display:table;
	
}
html>#content {
	width: 100%; /*This is what the Opera browser needs to know*/
}

#secondaryContent{
	position: relative;
	background-color: #99c299;
	margin: 0;
	padding: 0 15px;
	height: 100%;
	
}
html>#secondaryContent {
	width: 100%; /*This is what the Opera browser needs to know*/
}

/*The spacer div makes the top line of text in the navigation, content, 
and secdonary content sections line up. It goes at the top of the navigation
and secondary content sections on the template pages.*/
.spacer {
	height: 20px;
}

/*The table style is used for the page layout.*/
table.main
{
	background: #627f62;
	margin-left: 2%;
	width: 96%;
	border-style: hidden;
	margin-right: 2%;
	border-collapse: collapse;
	padding: 0;
	vertical-align:top;
}

td.navigation {
	width: 15%;
	background: #4c944c;
	padding: 0;
	vertical-align:top;
	
}

td.content {
	width: 56%;
	background:#bfd9bf;
	padding: 0;
	vertical-align:top;
}
td.secondarycontent {
	width: 25%;
	background: #99c299;
	padding: 0;
	vertical-align:top;
}
td.headerleft
{
	height: 125px;
	background:#006633;
	padding: 0;
}

td.headerright
{
	height: 125px;
	background:#006633;
	padding: 0;
}

td.headerlogo
{
	height: 125px;
	background:#006633;
	padding: 0;
}
/*This next section contains all the list styles.*/
/*The header list styles precisely position the logo, SUN  name, and email address.*/
#header ul {
	position: absolute;
	list-style: none;
	top: 0;
	left: 0;
	display: block;
	padding: 0;
	margin: 0;
}

#header li.logo {
	float: left;
	padding: 0;
	margin: 0;
	top: 0px;
	left: 0px;
	display: block;
}

#header li.name {
	font-size: 18px;
	letter-spacing: 0.1em;
	float: left;
	display: block;
	padding: 80px 50px 0 10px;
}

#header li.email {
	float: left;
	font-size: 12px;
	font-weight: bold;
	padding: 98px 0 0 0;
}

/*Link style definitions for the header section.*/
#header a {
	text-decoration: none;
	color: #bfd9bf;
	border: 0;
}

#header a:hover {
	color: #99c299;
}


/*Left side navigation. The .subNav is for the indented navigation. */
#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 136px;
	border: 0;
	line-height: 200%;
}

#navigation ul li { 
	position: relative;
	width: 136px;
}

#navigation ul li.subNav { 
	position: relative;
	font-size: 11px;
	line-height: 125%;
	left: 20px;
}

#navigation li ul { 
	position: absolute;
	left: 136px;
	top: 0;
	display: none;
	border-bottom: 1px solid #000;
	background: #4c944c;
}

/* The visible links are defined here.*/
#navigation ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	background: transparent;
	padding: 5px;
}

#navigation ul li a:hover {
	display: block;
	text-decoration: none;
	color: #fef1a3;
	background: transparent;
}

/*The popup menu links are defined here.*/
#navigation ul.secondaryNav li a {
	color: #fff;
	border: 1px solid #000;
	border-bottom: 0;
	line-height: 150%;
}

#navigation ul.secondaryNav li a:hover {
	color: #000;
	background: #fef1a3;
}

#navigation li:hover ul, #navigation li.over ul {
	display: block;
	z-index: 1000;
}

/* Fix IE. Hide from IE Mac \*/
* html #navigation ul li { float: left; height: 1%; }
* html #navigation ul li a { height: 1%; }
/* End */

/*Lists appearing within the content div.*/

#content ul {
	list-style: disk;
	text-align: left;
}

#content li {
	font-size: 12px;
	text-align: left;
}
/*This list style positions the print and order links 
on the map pages.*/
#content ul.maps {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
	width: 320px;
}

#content li.print {
	padding: 10px 25px;
	display: inline;
}

#content li.order {
	display: inline;
	padding: 10px 15px 5px 30px;
}

/*This list style appears in the secondary content div*/
#secondaryContent ul {
	list-style: none;
	margin: 0;
	padding: 5px 0 0 0;
	text-align: left;
	width: 170px;
}

#secondaryContent li {
	margin: 5px 0 0 5px;
	font-size: 12px;
	text-align: left;
}


/*The table style is used for the habitat identification page.*/
table {
	width: 320px;
	background: #bfd9bf;
}
/*This table style is used for the 1999-2000 surveystats page. */

table.stats {
background: #bfd9bf;
	margin-left: 2%;
	width: 96%;
	border-style: hidden;
	margin-right: 2%;
	border-collapse: collapse;
	padding: 0;
	vertical-align:top;
	/*width: 600px;
	background: #bfd9bf;
	margin-left: auto;
    margin-right: auto;*/
}

td.box {
	width: 5%;
	height: 35px;
}

td.descriptor {
	width: 45%;
	height: 35px;
	font-size: 12px;
}

/*The table style is used for a general table in the main content section.*/
table.general
{
	background: #bfd9bf;
	margin-left: 2%;
	width: 96%;
	margin-right: 2%;
	border-collapse: collapse;
	padding: 0;
	vertical-align:top;
}

/*The p, br, h, and em styles are found in the two content sections.*/
p {
	line-height: 1.5em;
	font-size: 12px;
	margin-top: 0em;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

/*The table style is used for the secondary content section.*/
table.secondary {
	width: 150px;
	background: #99c299;
}

/*The SUN contact information that appears at the bottom of each page 
is defined by the footer style.*/
p.footer {
	line-height: 15px;
	font-size: 10px;
	text-align: center;
	padding: 10px 0;
}
p.caption {
	line-height: 1.5em;
	font-size: 11px;
	font-style: italic;
}
br {
	padding: 0;
	padding-bottom: 5px;
	margin: 0;
}

h1 {
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	margin: 0;
	padding: .5em 0 1em 0;
}
h2 {
	font-size: 14px;
	line-height: 15px;
	margin: 0;
	padding: 8px 0;
}
h3 {
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 8px 0;
	line-height: 150%;
}

em {
	font-style: italic;
	font-weight:normal;
}

/*Big sets the first letters in SUN  big in the header.*/
big {
	font-size: 170%
}

/*The iframe appears on the two habitat pages. There is a separate style sheet 
(in the survey folder) that defines the content that appears in the iframe.*/  
#secondaryContent iframe {
	padding: 0;
	margin: 0;
}