/* Reef Resilience version 3 - redesign home page and non-toolkit pages */
/* Susan Bernstein, sbernstein @ tnc.org, 2008, 2009 */

/* Always show vertical scroll so that page doesn't move horizontally  when page changes between long (scroll required) and short. Needed for FireFox; this is IE's default */
html {overflow: scroll;}	 

body {
	border: 0;
	padding: 0;
	margin: 0;
	background-color:#0070bc/*#5a7676#698989*/;
	text-align:center;
}

div#wrapper {	/* first 3 lines accommodate browsers (IE6) that don't implement max-width */
	max-width: 930px;
	_width: auto !important;
	width: 930px;
	text-align:left;
	margin: 0px auto;
	background-color:white;
}
#header {
	margin: 0;
	padding: 0;
	left: 0;
	top: 0; 
	/*height: 100px;  for standard banner */
	height: 125px; /* standard plus toolkit toplinks height */
	}
#printheader, #printfooter {
	display: none;
}
#header img {
	display: block;
}
div#rrnav {
	width: 200px;
	margin: 15px 30px 30px 5%;
	float: left; 
	}
div.horiz {text-align:right;}
.left {float:left;}
.right {float:right;}
div#pagecontent {
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
}
p, h1, h2, h3, ul, ol/*, table*/ {
	padding-left: 5%; padding-right: 5%;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	}
p { padding-top: .4em;
	font-size: 75%;
	line-height: 1.3em}
.TabbedPanelsContent p {padding-top: 0;}
h1, h2, h3 {white-space:nowrap;}
h1 { /* for page title  */
	margin-top: 0; background-color: #020360; color:white;
	padding-top:.6em; padding-bottom: .5em;
	font: bold 1.4em Times, serif;	
	}
h1 span {
	font-style:italic;line-height:1.5;
}
h1 span.small{
	font-style:normal;
	font-size:75%;
}

h2, h3 {
	font: bold 1em  Verdana, Arial, Helvetica, sans-serif;	
	padding-top:.6em; padding-bottom: 0;
	color: #207f7f;
	}
h3 {font-size: .9em;}
img {text-decoration: none; border: 0;}
a	{
	font-weight:bold;
	text-decoration: none;
}
a:link {
color: rgb(28,84,149);	/* True Blue */
}
a:visited, a: active {
color: #46008c;/*rgb(39,8,63);	 Iris */
}
a:hover {
	text-decoration: underline;
	}
	
ul, ol {
	margin: .5em 0 .5em 0;	/* browsers add their own left spacing, and page is indented 10% */
}	
li {
	line-height: 1.4em;
	list-style-position: outside;
	padding-top: .5em;
}
ul.narrative, ol.narrative {	/* in the normal flow of article */
	font-size: 75%;
	}
ul.narrative.online {
	margin-left: 10px;
	}
ol.narrative.online {
	margin-left: 40px;
	}
ul.news, ul.resources, table.partners {
	margin-left: 10%; margin-right: 10%;
	font-size: 75%;
	}
ul.events { /* only in tabs */
	margin-left: 15px; margin-top:-10px;
	font-size: 75%;
	}
ul.events.webinar {list-style: none; text-indent: -12px;}
div.webinarlist { /* webinar archive list */
	width: 650px; margin:20px 0; float:right;
	}
div.webinarlist li {padding-bottom: 1em;}

#pagecontent span.pubtitle { /* title of publication */
	font-style:italic;
	}
#pagecontent span.paratitle {/* use this for bold/title words that start a paragraph or list item */
	font-weight: bold;
	}
#pagecontent span.attention {	/* use this for a notable term or phrase */
	color: #A0201A; /* TNC Crimson */
	}
span.def { /* for quick expansions */
	color: rgb(28,84,149);	/* True Blue */	
	font-weight: bold;
	cursor:pointer;
	}

#pagecontent p.contact {
	padding-left:10%; margin-top: 1em;margin-bottom:2em;
	font-size: 70%;
	line-height: 1.2em;
}
p.casecontact {
	margin: 1em 0 10px 5%;
	padding-left:5px;
	font-size: 70%;
	line-height: 1.2em;
}
p.announce {
	font-size: 100%;
	color: #020360; 
	/*font-weight: bold;*/
	text-align: center;
	}
span.sub {
	font-size: smaller;
	/*vertical-align: sub;*/
	}
span.super {
	font-size: smaller;
	vertical-align: top;
	}
	

div.helpitems {margin: 0 1.5em;}
div.helpitems p {padding-top: .8em;}
div.helpitems img.right {float: right; margin: 10px;}
	
/* =PUBLICATIONS and SPECIAL LISTS AND =TABLES*/

ul.nobullet {list-style: none;}
ul.pubs {	/* simple publication lists have no bullets */
	padding-left: 5%; padding-right: 5%;
	list-style:none;
	text-indent: -1em;
	}
ul.note, ul.nohang {text-indent:0;}
ul.pubs li {
	font-size: 75%;
	}
ul.note li {padding-top: 2px; font-size: 75%;line-height: 1.2;}
ul.news, ul.resources {
	list-style:none;
	}
ul.news {display:block;}
ul.resources li {	
	/*border-bottom: 1px solid #207f7f;*/
	}
ul.resources li img {	/* these are imgs of the resources--kind of tall */
	vertical-align: top; margin: 0 2em 1em 0;
	}
ul.resources li a img {	border: 1px solid #207f7f; }
ul.resources li table { /* needed for add'l wrapped text next to img, within list item */
	margin: 0; padding: 0;}
ul.resources li table td { vertical-align:top;}
ul.casestudies li {font-size:75%;list-style: none; text-align:left;padding-left: 1.5em; text-indent:-1.1em;}
	
table.partners td {border-collapse:collapse;border-bottom: #f6e7e3 1px solid;}
table.partners td:first-child {	/* logos */
	text-align: center;
	}
table.twocol.newsletter {width: 80%;margin: 0 auto;font-size:75%; line-height:1.2em;}
table.acks {margin: 0 20px 10px 8%;font-size:75%; line-height:1.2em;} /* acknowledgements page */
table.acks2 {width:95%; margin:0 auto;} table.acks2 td {vertical-align:top;}
table.twocol td {vertical-align:top;}
table.twocol td:first-child {padding-right: 1em;}
table.acks td {vertical-align:top;padding-right: 2em;}
table#training,
table#pubs {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 20px 0 3em; padding: 0;
	text-align:left;
	border: 1px solid #207f7f;	border-collapse:collapse;
	width: 830px;
	}
table#pubs {
	margin: 10px auto;
	}
table#training thead,
table#pubs thead {	/* the table header row */
	font-variant:small-caps; font-size:1.1em;
	font-weight:bold;
	text-align: center;
	vertical-align:middle;
	} 
table#training thead td,
table#pubs thead td {
	color:#207f7f;	
	}
table.sortable thead {
	cursor:pointer;
	}
table.sortable thead td.sorttable_nosort {
	cursor: auto;
	}

table#training td,
table#pubs td {
	vertical-align:top;
	padding:5px;
	font-size: 70%;
	line-height: 1.15em;
	border: 1px solid #207f7f;	border-collapse:collapse;
}
table#pubs td {
	padding: 2px 4px;
	}
table#pubs td > a > img {
	border: none;
	}
table#cases {
	width: 700px; margin: 10px auto;padding:0;
	border: 1px solid #e2e6cd; /* icicle at 90% bright*/
	}
table#cases td {
	text-align:center; vertical-align: top;margin: 0;padding:0;
	border: 1px solid #e2e6cd; /* icicle at 90% bright*/border-collapse:collapse;
	}
table#cases .coral {
	background:url(../images/case_study_coraldot.png) 5% no-repeat; /* table hdr colors taken from map dots */
	}
table#cases .fsa {
	background:url(../images/case_study_fishdot.png) 5% no-repeat; /* table hdr colors taken from map dots */
	}
table#cases td h2 {
	padding: 2px 10px;margin:0;background-color:transparent;
	color: #207f7f;font-weight:bold;
	/*font: 1.1em "Times New Roman", Times, serif;*/
}
table#cases td ul li {font-size:75%;list-style: none; text-align:left;padding-left: 1.5em; text-indent:-1.1em;}
table#cases td a span {color:#fc9196;}

.nowrap {white-space:nowrap;}
div.goback {	/* back to main training page from table and map page */
	float: right;margin: 0 50px 0 0;padding: 2px;
	border: 2px solid  #e78222;
	}
div.goback a{	font-size: 80%;
 } 

span.pubnote {
color: rgb(28,84,149);	/* like link */
}
span.notenote {
color: #e78222; /* like annotation link */
}

.toggle {
/*	color: #999999;
	font-size: 9pt;*/
}
.hotspot {
	cursor:pointer;
}
.hotspotall {
	font-weight: bold; font-size: .9em;
	color: #e78222;
	cursor: pointer;
}
ul.pubs li.hot {
	padding-bottom: 1.5em;
	}
table.pubsection {	/* different groups of publications on an index page */
	width: 94%;
	margin-left:auto; margin-right:auto;
	}
div.pubsection {
	border:1px solid #e78222; /* same as r2 logo */
	margin: 10px;
	width: 95%;
	min-height: 130px;
	background-color: white;
	}
div.pubsection h2 {
	font: bold 1em/1.5em "Times New Roman", Times, serif;
	color:white;
	background-color: #e78222;
	margin: 0;
	padding: .1em .5em;
	}
div.pubsection h2 a:link,
div.pubsection h2 a:visited,
div.pubsection h2 a:active {
	text-decoration: none;
	color: white;
	}
div.pubsection h2 a:hover {
	text-decoration: none;
	color: #cbdddd; /*pale aqua */
	}

div.pubsection p {
	font: 85%; line-height:1.3em;
	padding: .5em;
	}
div.pubsection img {
	margin: 10px;
	border:thin solid rgb(0,130,169);
	}
div.pubsection img.left {
	float:left;	
	}
div.pubsection img.right {
	float:right;;
	}
	
/* =SIDEBARS */
div#sidebar, div.sidebarhelp {
	float: right; width: 250px; margin: 10px; margin-right: 20px;
	border: 1px solid #e78222; /* same as r2 logo */
	text-align:center;
	}
div#sidebar h1,  div.sidebarhelp h1 {
	margin: 0;padding: 5px 10px;
	background-color: #e78222;
	color: white;
	font: 1.1em "Times New Roman", Times, serif;
}
div#sidebar p, div#sidebar ul,  div.sidebarhelp p {
	margin: 0; padding: .4em 5px .4em 5px;
	line-height: 1.3;
}
div#sidebar.toolkitpage {width: 330px; }
div#sidebar.toolkitpage img, div#sidebar.toolkitpage h1 {
	border:none; margin-bottom: 15px;
	}
div.sidequote {
	float: right; width: 250px; margin: 20px; margin-right: 5%;
    color: #45668a;
	font: 1.3em/1.2 "Times New Roman", Times, serif; }
div.sidequote p {text-align: right;padding-right: 10px;font-size: 75%;margin-top:0; padding-top:0;}

/* =ILLUSTRATION holders */
div.illust300 {
	float: right; width: 300px; margin: 10px; margin-right:5%;
	}
div.illust250 {
	float: right; margin: 10px; width: 250px; margin-right:5%;
	}
div.illust400 {
	float: right; margin: 10px; width: 400px;margin-right:5%;
	}
div.illust200 {margin:10px auto; width:200px;}
div.largemap {
	margin: 25px 5%;
	text-align: center;
	}
.caption {
	max-width: 100%;
	font-size: 9px;
	line-height: 1;
	text-align:center;
	margin: 0; padding: .5em;
	color: #207f7f; /* teal */
	background-color: #e2e6cd; /* icicle at 90% bright*/
	}

.borderteal {
	border: 1px solid #207f7f; /* same as h1 background */
	}
.bordercoral {
	border:1px solid #e78222; /* same as r2 logo */
	}
img.thumb {
	margin: 5px 10px; float: right; border:thin solid #207f7f; /* same as h1 background */
	cursor:pointer;
	}
img.right {
	float: right; margin: 0 20px 10px 10px;
	}

table#pubs img {/* expand-collapse links */
	vertical-align:middle;
	cursor:pointer;
	}
/* =SIGN UP FORM for Newsletters */
div#signup {
	margin-left:auto;margin-right:auto;
	font-size: .8em; color:#207f7f; 
	width: 700px; padding: 10px; border: 1px solid #207f7f; background-color:#d8f8ff;
}
div#signup span.asterisk {
	color:red;
	}
div#signup p.required {
	font-size:90%;font-weight: bold;
	text-align: right;
	}
div#signup tr.first td {padding-bottom: 25px; }
div#signup input, div#signup select {
	padding: 1px;
	margin-top: 5px; margin-bottom: 5px;
	border: 1px solid #207f7f;
}
div#signup select.country {
	width: 250px;
	}
div#signup input.email {width: 524px;}
div#signup input.longer {width: 250px;}
div#signup input.submit {
	background-color:#e78222;color: #207f7f;
	font-weight: bold; border: 1px solid #207f7f;
	margin-top: 5px; margin-left: 42%; padding: 1px;
	cursor:pointer;
	}

div#signup label {
	padding-left: 5px; padding-right: 2px;
	color: #207f7f;
	}
div#signup label.required {font-weight: bold;}

.clearright	{
	clear: right;
	}
.clearleft	{
	clear: left;
	}
.clear {clear: both;}
.hide {display: none;}

/* =FOOTNOTES */
/* each footnote reference number in the text AND in the note should be spanned with .footref */
/* all the footnotes should be in a div. Each one is a <p> */
div#footnotes {
	border-top: 1px solid #e2e6cd; /* icicle at 90% bright*/
	}
div#footnotes a:hover { text-decoration:none;}
div#footnotes a.refpagelink{
	font-size: 1em;padding: 20px;line-height: 1.6;
	}
div#footnotes a.refpagelink:visited {color:rgb(0,130,169);	/* do not change */
	}
div#footnotes a.refpagelink:hover {color:rgb(0,54,93); text-decoration:none;	/* Deep Waters #00365d  visited color*/
	}
div#footnotes p {line-height: 1.15em;}
	
#pagecontent span.footref {	/* a footnote reference */
	font-size:9px; /*smaller*/font-weight: bold;
	vertical-align: top;
	color: #0082b3 !important; /*Marine  */
	}

/* =FOOTER */	
#footer {	
	height: 35px; padding-top: 7px;
	z-index:300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; line-height: 1.4;
	color: white; 
	background-color: #0070bc;
	text-align:center;
}
#ackfooter {	/* acknowledgement line on home page above footer */
	height: 15px;
	z-index:200;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px; line-height: 1.4;
	color: white;
	background-color: #8fbfbf; /* 50% transparent */
	text-align:center;
}

#footer a:link, #footer a:visited, #footer a:active  {
	color: white; /*#207f7f same as h1 background */
	text-decoration: underline;
	}
#footer a:hover{
	color: #8fbfbf; /* 50% transparent */
	text-decoration: underline;
	}
.copyright {
	font-size: 9px; line-height:1.4;
	}
	
/* Custom Error Page */
p.error {font-size: 100%; padding-top: 1.5em; width: 85%;}
/* Custom Search */
form.searchform {margin:0;padding-right: 10px;}
form.searchform.nopad {} /* ie only, just for home page, so far */
form.searchform input.icon {vertical-align: bottom;}
div.searchwrap {float: right; margin:10px;}
#pagecontent div.nofloat {} /* this is defined for ie browsers and placed on top right divs that now have search forms */