/*
 * All styles are written by Andres Gonzalez (c) 2008 - CIESIN, Columbia University
 * Modified by Samantha Chan 2010 LDEO, MGDS, Columbia University
 */

/* create cross-browser defaults */
@import url(/css/undohtml.css);

/*
global elements
*/
html, body, #wrapper{ margin:0 auto; }

body{
	background:transparent url(/imgs/bg_design.gif) top left repeat-x;
	font:0.85em/1.3 Helvetica, Arial, sans-serif;
	line-height:1.6em;
	color:#005dd0;
}

.red-text {color: #FF0000}
.reddark-text {color: #CC0000}

.first-word {
  color: #009999;
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
}

#wrapper{ width:864px; text-align:center; }

/*
global mgds header: title, search
*/
#mgds-header{
	margin:0 auto;
	width:866px;
	height:41px;
	background:transparent url(/imgs/mgds_header.gif) top left no-repeat;
	position:relative;
}
	#mgds-header h1{
		position:absolute;
		top:3px;
		left:6px;
		width:390px;
		height:33px;
		overflow:hidden;
	}
	#mgds-header h1 a{
		padding-top:40px;
		display:block;
		background:transparent url(/imgs/mgds_logo.gif) top left no-repeat;
		text-decoration:none;
		font-size:1px; line-height:1px;
	}
	#mgds-header h1 a:hover{
		background:transparent url(/imgs/mgds_logo.gif) 0 -33px no-repeat;
	}
	#mgds-header form{
		position:absolute;
		top:9px;
		right:6px;
	}
		#mgds-header form label{
			color:#fff;
		}
		#mgds-header form input#searchInput{
			margin:0 0.5em;
			padding:1px 0.25em;
			border:1px inset #036;
		}
		#mgds-header form input#searchButton{
			margin-top:-1px;
			cursor:default;
		}
	
/*
page header: banner & menu
*/
h1#page-header{
	margin:0px auto 0 -12px;
	padding:0;
	width:866px;
	height:155px;
	font:normal 1.75em Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

	h1#page-header a{
		color:#f1f8ff;
		/* color:#002783; */
		text-decoration:none;
	}
	
	h1#page-header a:hover{
		border-bottom:1px dotted;
	}
	

/*
menu
*/
div#menu-wrap{
	margin:0;
	padding:0 0 1px 0;
	border:0;
	width:864px;
	text-align:center;
	background:#055fc3 url(/imgs/menu_bg.gif) bottom center no-repeat;
	float:left;
}
	
	ul#menu, ul#menu ul{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	ul#menu{
		margin-left:6px;
		font:normal 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	
	ul#menu li{
		margin:0 0.15em;
		float:left;
		position:relative;
	}
	
	ul#menu li a{
		padding:0.2em 1.25em 0.35em 1.25em;
		border:0;
		color:#c9d7e6; 
		display:block;
	}
	ul#menu li a:hover, ul#menu > li:hover > a, ul#menu li a.cur{
		color:#fff;
		background:transparent url(/imgs/menu_hover_bg.gif) top left repeat;
	}

	ul#menu li a img{ margin-left:-0.5em; vertical-align:baseline; }
	
		ul#menu li ul{
			padding:0.25em 0;
			border:1px solid #698ec3;
			border-top:none;
			background:#167aea url(/imgs/menu_drop_bg.gif) top left repeat-x;
			text-align:left;
			position:absolute;
			left:-999em; /* better than using display:none -- more accessible, comments below. */
			z-index:9999;
		}
		ul#menu li ul li{
			margin:0;
			padding:0;
			border:0;
		}
		ul#menu li ul li a{
			margin:0.1em 0;
			padding:0.2em 0 0.4em 1.25em;
			border-top:1px solid transparent;
			border-bottom:1px solid transparent;
		}
		ul#menu li ul li a:hover, ul#menu li ul li a.cur{
			border-top:1px solid #1c357b;
			border-bottom:1px solid #1c357b;
		}
		ul#menu li ul, ul#menu li ul li{ width:13em; }
		ul#menu li:hover ul, ul#menu li.submenu ul{
			/* left is being used instead of display:none/block.
			 * display none hides content in some screen readers,
			 * this is a more accessible way of handeling it.
			 */
			left:0;
			/* attribute below fixes a bug in IE7, which causes
			 * submenus who's sibiling anchor have a class with a
			 * background property (currently highlighted menu item)
			 * to not render properly
			 * 
			 * this is due to the common IE hasLayout bug.
			 * the attribute, like many others, will trigger "hasLayout"
			 * and allows proper rendering of the submenu element.
			 */
			min-height:0;
		}
/*
content area & common elements
*/
#content{
	margin:0 auto 2.5em auto;
	padding:1px 4px;
	text-align:left;
	z-index:10;
	clear:left;
	width:840px;
	overflow-x:visible;
}
	/* common text elements */
	#content p{ margin:0.5em 0 1em 0; }

	#content h2{
		margin:0.3em 0 0.5em 0;
		border-bottom:2px ridge #06c;
		font:normal 2.3em Georgia, "Times New Roman", Times, serif;
		letter-spacing:-1px;
		color:#002783;
	}
	#content h3{
		margin:-3px 0 0.5em 0;
		padding-bottom:0.15em; 
		border-bottom:1px dotted #005dd0;
		font:normal 1.5em Georgia, "Times New Roman", Times, serif;
		color:#304983;
	}
	#content h4{
		margin:1em 0 0.25em 0;
		font:normal 1.25em Georgia, "Times New Roman", Times, serif;
		color:#304983;
	}
	
	/* lists */
	#content ul, #content ol, #content dl{
		margin-left:3.5em;
	}
	#content ul{ list-style:circle outside; }
	#content ol{ list-style:lower-roman outside; }
	#content #ol2 ol{ list-style:decimal; }
		#content ol ol {list-style:lower-alpha outside; }
		#content li{
			margin-bottom:0.3em;
		}
	#content ul#toc{
		list-style:none;
	}
		#content ul#toc li{
			margin-bottom:0.25em;
			list-style:decimal outside;
		}
		
	#content dl dt, #content dl dd{ padding-bottom:0.5em; }
	#content dl dt{
		float:left;
		color:#304983;
		width:8em;
		text-align:right;
	}
	#content dl dd{
		margin-left:9em;
	} 
		
	/* tables */
	#content table{
		margin:0.5em 0 1em 0;
		border-collapse:collapse;
	}
		#content table caption{
			color:#304983;
			font-style:italic;
			font-size:0.95em;
		}
		#content table th, #content table tfoot{ color:#304983; }
		#content table td, #content table th{
			padding:0.25em 0.75em;
		}
		#content table thead th, #content table tfoot td{
			border-top:1px dotted;
			border-bottom:1px dotted;
			padding:0.15em 0.75em;
		}

	#content table.left_header{
		border-top:1px dotted;
	}
		#content table.left_header tfoot td{
			border-bottom:0;
		}
		
	/* links */
	#content a, #footer a{
		padding:0 1px 0 1px;
	}
		#content a:link, #footer a:link{
			text-decoration:none;
			border-bottom:1px solid #506da8;
			color:#039;
		}
		#content a:visited, #footer a:visited{
			text-decoration:none;
			border-bottom:1px solid #8969cc;
			color:#63c;
		}
		#content a.external, #footer a.external{
			padding-right:13px;
			background:transparent url(/imgs/external.gif) center right no-repeat;
		}
		#content a.top{
			margin:0;
			padding:0 2px 0 18px;
			border-bottom:1px dotted;
			text-align:right;
			font-size:0.85em;
			background:transparent url(/imgs/top_icon.gif) top left no-repeat;
		}
		
		/* must go last to override any other settings */
		#content a:hover, #footer a:hover, #portal_menu ul li a.cur{
			text-decoration:none;
			border-bottom:1px solid #aac9ef;
			color:#285179;
			background-color:#e9f0ff;
		}
		
	/* others */
	#content acronym, #footer acronym{
		cursor:help;
	}
	#content blockquote{
		margin: 0.5em 4em 0.5em 8em;
		padding-left:1em;
		border-left:1px dotted #ccc;
		font-size:0.95em;
	}
	#content pre{ font-size:1.1em; }
	#content .indent{ margin-left:1.5em; }
	
/*
global classes
*/
.disabled{
	color:#c3d1df;
}
.partner_logo{
	margin:0 0.5em 0.25em 0;
	float:left;
}

.horz_toc {
	display:inline;
	/*border:1px solid;
	border-left:0; border-right:0;*/
}
	.horz_toc li{
		
		/*border-left:1px solid;*/
		display:inline;
	}
	.horz_toc li a{
		margin:0 0.75em;
	}

ul.img_list{
	margin:0.5em 0.25em;
	padding:0;
	list-style-type:none;
	float:left;
}
	ul.img_list li{
		list-style-type:none;
		margin:0.5em;
		padding:0;
		float:left;
	}

/*
 * Home
 */
#content #home_main{
	margin-right:15.5em;
}
#content #home_panel{
	width:13.5em;
	float:right;
}
	#content #home_panel h3{ margin-top:0; }
	#content #home_panel ul{ margin-bottom:2em; margin-left:2.5em; }

/*
 * portal layout items (content section, right side menu, data sets section)
 */
#portal_menu{
	float:left;
	font:normal 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
	width:15em;
}

	#portal_menu ul{
		margin:0 0 2em 1.75em;
		padding:0;
		list-style:circle;
	}
	#portal_menu ul li{
		margin:0.5em 0;
		padding:0;
	}
	#portal_menu ul li a.cur{
		background:none;
		font-weight:bold; /* other styles are applied from a:hover above */
	}
		/* eventhough W3C has been ambiguous about this, proper use is ::after (pseudo-element), not :after (pseudo-class, like :hover)  */
		#portal_menu ul li a.cur::after{ content: " \BB"; }
	#portal_menu h3{ margin:0; }
	#portal_menu select{
		margin:0.5em 0;
		padding:0;
		border:1px inset #304983;
		width:13.75em;
		color:#304983;
		/* this is set to display:block by javascript, <select> not needed if js is disabled*/
		display:none;
	}
		#portal_menu select option{
			margin:0.25em 0 0.25em 0.5em;
		}
		#portal_menu select option.null{
			margin-left:0;
			color:#666;
		}

#portal_content{
	margin-left:15em;
}
	#portal_content #mapclient{
		margin:0 1em 0.25em 0;
		border:1px solid #039;
		width:300px;
		height:185px;
		color:#039;
		position:relative;
		text-align:center;
		background:#fff url(/imgs/mapclient_activate.gif) bottom center no-repeat;
		float:left;
	}
		#portal_content #mapclient h5{
			margin:1.5em auto 0 auto;
			padding:0.5em;
			border:1px solid #039;
			background:#fff;
			font:normal 2em Georgia, "Times New Roman", Times, serif;
			text-align:center;
			width:7em;
			opacity:0.8;
		}
		#portal_content #mapclient div.olControlMousePosition{
			font-weight:bold;
			padding:3px;
			background:#fff;
			border:1px solid #ccc;
			opacity:0.5;
		}
		#portal_content #mapclient:hover { cursor:pointer; }
		#portal_content #mapclient:hover h5{ opacity:1; }

#portal_menu div.study_site{
	margin:1em 0 2em 0.5em;
}
	#portal_menu div.study_site h4{
		margin:0 0 0.5em 0;
		font-size:1.3em;
		font-weight:normal;
		color:#304983;
	}
	#portal_menu div.study_site h5{
		margin:0.5em 0 0.5em 1.25em;
		font-weight:normal;
	}
	#portal_menu div.study_site ul{
		margin-left:3em;
		list-style:circle;
	}
	#portal_menu div.study_site ul li{
		margin:0 0 0.25em 0;
		padding:0 0 0.4em 0;
	}
	
/*
 * contact page 
 */
form#contact, div#contact_thanks{
	margin-bottom:2em;
	width:32em;
	display:block;
	float:right;
}
div#contact_info{
	float:left;
	width:25em;
}
	form#contact table td{
		padding:0 0.25em 0.5em 0.25em;
		vertical-align:top;
		text-align:right;
	}
	form#contact table td.submit{ text-align:center; }
	form#contact div#contact_err{
		margin-left:9em;
		color:#f00;
		font:bold 0.9em Helvetica, Arial, sans-serif;
	}	
	form#contact label{
		margin:0 0.5em 0 1.5em;
		text-align:right;
	}
	form#contact input.textfield, form#contact textarea{
		margin-right:1.5em;
		padding:2px 4px;
		border:1px inset #999;
		width:25em;
		font:0.9em Helvetica, Arial, sans-serif;
	}
	form#contact input.submit{
		margin:2em auto 0 auto;
		padding:0.15em 0.75em;
		border:1px outset #999;
		background-color:#f2f2f2;
		clear:both;
	}
	form#contact input:focus, form#contact textarea:focus{
		background:#e9f0ff;
	}
/*
tabbed interface

NOTE: wrapping div for items below is actually set to 'noJs' and is
changed to 'yesJs' by javascript. this means rules below are applied
only if js is enabled.
*/

div.yesJs ul#tabs{
	margin:0;
  	padding:1px; /* fixes IE bug, removes added margins by IE */
  	list-style:none;
	font-size:0.95em;
}
	div.yesJs ul#tabs li{
		margin:0;
		padding:0 0 0 0.5em;
		float:left;
	}
		div.yesJs ul#tabs li a:link{
			border:1px solid #005dd0;
			padding:0.15em 0.4em;
			color:#3b7bbf;
			background:#e0e7ef;
			float:left;
			display:block;
		}
		div.yesJs ul#tabs li.curTab a:link{
			border-bottom:1px solid #fff;
			background:#fff;
			position:relative; /* without this IE does not place tab ontop of .tabContent */
			color:#039;
		}
		div.yesJs ul#tabs li a:hover{
			background:#fff;
			color:#039;
		}
			
div.yesJs div.tabContent{
	margin:-1px 0 2em 0;
	padding:0 0.5em;
	border:1px solid #005dd0;
	background:#fff;
	float:left;
	width:98%;
	clear:both;
}
div.yesJs div.tabIframe{ padding:0.25em; }
div.yesJs div.tabIframe iframe{
	width:100%;
	height:50em;
	border:none;
}


	/* specific to 'contribute data' page
	 */
	#content div.mdf_download{
		margin-bottom:1em;
		width:15em;
		float:left;
	}
		#content div.mdf_download h5{ margin:1em 0;}
		#content div.mdf_download h5 a:link, #content div.mdf_download h5 a:visited{
			padding:2px 30px 3px 2px;
			border-bottom:none;
			font-weight:normal;
			font-size:1.4em;
			background:transparent url(/imgs/icons/download_sm.gif) center right no-repeat;
		}
		#content div.mdf_download h5 a:hover{
			background:#e9f0ff url(/imgs/icons/download_sm.gif) center right no-repeat;
			border-bottom:1px solid #aac9ef;
		}
	#content div.mdf_description{ margin-left:18em; }

/*
GMRT styles
*/
#content #map{
	margin:0 10px 2em 0;
	width: 600px;
	height: 500px;
	float:left;
	border: 1px solid #005dd0;
}
	#gmrt fieldset{
		margin:0.5em 0 2em 0;
		padding:0.25em 0.1em 0.25em 0.75em;
		border:1px solid #005dd0;
	}
		#gmrt fieldset legend{ color:#304983; }
	#gmrt label, #gmrt input{	display:block; }

	#gmrt input, #gmrt select{
		padding:0.1em 0.25em;
		margin-bottom:1em;
		border:1px inset #005dd0;
	}
	#gmrt select{ padding:0; }
	#gmrt input:focus, #gmrt select:focus{ background:#e0e7ef; }
	#gmrt input#corners_set{ display:none; }
	
	#gmrt input.button{
		margin:1em auto;
		padding:0.25em 0.5em;
		border:1px outset #005dd0;
		background:#eff7ff;
	}
		#gmrt input.button:focus{ border:1px inset #005dd0; }

/*
footer
*/
#footer{
	margin:2em auto 1em -7px;
	padding:0.5em 0 0 0;
	background:transparent url(/imgs/footer_design.gif) top left no-repeat;
	text-align:center;
	font:normal 0.8em/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif;
	width:864px;
	height:63px;
	clear:both;
}
	#footer p{
		margin:0.25em auto;
		text-align:center;
	}
	#footer p.legal a{
		margin:0 0.5em;
	}