@charset "UTF-8";
/* Reef Resilience version 2 Toolkits */
/* Developed by Susan Bernstein, sbernstein @ tnc.org, 2008-2011 */
html {overflow: scroll;}	 

* { margin:0; }

body {
	border: 0;
	padding: 0;
	margin: 0;
	background-color: #d1e2f5;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
img {border: 0; padding:0; margin:0;}

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: 0 auto;
}
.coralwrapper {background:url(../images/fakecolumns_coral.gif) repeat-y;}
#header {
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	}
#printheader, #printfooter {
	display: none;
	}

#leftbar	{
	width: 200px;	/* fixed width */
	float: left;
	z-index:100;
	padding: 0; font-size:80%;
}
#leftbar a {
	font-weight:normal;
	}
#toplinks	{
	top: 0px;left:0; position: relative;
	width: 930px;
	height: 25px;
	font-size:75% /*13px*/;
	color:  #332750; /* purple-black for text */
	background-color: #f9f4f8;
}
#toplinks a	{
	text-decoration: none;
	font-weight:bold;
	}
#toplinks a:link, #toplinks a:visited, #toplinks a:active  {
	color: #332750; /* purple-black for text */
	}
#toplinks a:hover {
	color: #416405; /*h1 background */
	text-decoration: underline;
	}
#toplinks div {margin: 5px 0 2px 0;}

#toplinks div.navcontrol {
	left: 2px; position: absolute; margin-left:12px;max-width: 200px;display:inline;
	white-space: nowrap;
	}
#toplinks div.crumb	{
	left: 200px; padding-left: 3%;
	position: absolute;
	min-width: 500px;
	display:inline;
	white-space: nowrap;
	}	
#toplinks div.helpplus	{ /* whatever is in the upper right nav */
	left: 900px; position: absolute; display:inline;
	text-align: right;
	white-space: nowrap;
	}
/* =PREV NEXT buttons or links */
#prev {left: 700px; position: absolute; display:inline;font-weight:bold;}
#next {left: 825px; position: absolute;display:inline;font-weight:bold;}
#prev a:link, #prev a:visited, #prev	a:hover, #prev a:active {
	background-position:center left;
	}
#next a:link, #next a:visited, #next	a:hover, #next a:active {
	background-position:center right;
	}

/* =CONTENT */
#content {
	top:125px;
	width: 729px;
	float: right; /* this works in IE */
	padding: 0;
	margin: 0;	background-color: white;
		}
p, h1, h2, h3, ul, ol/*, table*/ {
	padding-left: 3%; padding-right: 3%;
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	}
p { padding-top: .4em; padding-bottom: .2em;
	font-size: 75%;
	line-height: 1.3}

h1 { /* for page title  */
	top: 0; background-color: #7c366c;/*redish purple */ color: white;
	padding-top:.6em; padding-bottom: .5em;
	font: bold 1.4em Times, serif;
	margin-left: -1px; /* make up for 1 px in content div */
	border-top: 1px solid #eee; /* continue line of top menu item */
	}
h2, h3 {
	font: bold 1em  Verdana, Arial, Helvetica, sans-serif;	
	padding-top:.7em; padding-bottom: .3em;
	color: #652c57;/*darker redish purple *//* darker h1 background */
	}
h3 {font-size: .85em;}
#content a	{
	font-weight:bold;
	text-decoration: none;
}
#content a:link, #content a:active {
color:rgb(0,130,169);	/* Marine #0082b3 */
}
#content a:visited {
color: #00518b;/* lighter than -> */	/*rgb(0,54,93); Deep Waters #00365d */
}
#content a:hover {
	text-decoration: underline;
	}
ul, ol {
	margin: .5em 0 .5em 0;	/* browsers add their own left spacing, and page is indented 10% */
	font-size: 75%; margin-left: 1.5em;
}	
li {
	line-height: 1.35em;
	list-style-position: outside;
	padding-top: .5em;
}
ul.nobullet {
	list-style:none;
	}
ul.nested, ol.nested {
	font-size:100%;
	}
ul.events, ul.news, ul.resources, table.partners {
	margin-left: 5%; margin-right: 5%;
	font-size: 75%;
	}
span.pubtitle { /* title of publication */
	font-style:italic;
	}
span.paratitle {/* use this for bold/title words that start a paragraph or list item */
	font-weight: bold;
	}
span.attention {	/* use this for a notable term or phrase */
	color: #A0201A; /* TNC Crimson */
	}
span.top { /* return to top link */
	font-style:italic; font-size: .65em;
	}

span.sub {
	font-size: 70%;
	vertical-align: baseline;
	}
span.super {
	font-size: 70%;
	vertical-align: top;
	}

span.def { /* for definition tooltips */
	color:#e35d18;	
	font-weight: bold;
	cursor:pointer;
	}
.hide {display: none !important;}

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.example {
	padding-top: 1em;padding-bottom: .2em;
	}
.indent {
	margin-left: 5%; margin-right: 3%;
	}
.indentsmall {padding-left: 20px;}
span.tiny {font-size:75%;}
blockquote {
	font-size: 75%; color: #666666;
	margin-left: 5em; margin-right: 15%;
	padding-top: 1em;padding-bottom: .2em;
	}
blockquote.narrow {margin-left: 2.5em;margin-right: 2.5em;padding-top: .7em;padding-bottom: .15em;}
div#relatedtools { 	/* a bit of styling for the Related Tools/Links pages */
	}
div#relatedtools p {padding-left: 5%;}
div#relatedtools ul {margin-top: 0; padding-left: 7%;}
div#relatedtools table {margin-left: 5%; border: solid 1px  #7c366c;border-collapse: collapse;} 
div#relatedtools td {font-size: 70%; padding:5px 5px 0 5px;border: solid 1px  #7c366c;}
div#relatedtools td a:visited {color:rgb(0,130,169);}	/*no change */

/* =PUBLICATIONS and SPECIAL LISTS AND =TABLES*/

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.note li {padding-top: 2px; font-size: 70%;line-height: 1.2;}
ul.resources {
	list-style:none;
	}
ul.resources li {	
	border-bottom: 1px solid #416405;
	}
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 #416405; }
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;}
ul.factors1 {	/* classes */
	padding: 0 5% 0 20px;
	list-style: none;
	}
ul.factors1 > li {
	padding: 0;line-height: 1.3; font-weight: bold;}
div.factors2 {
	background: url(../images/listbar.gif) left repeat-y;
	margin: .3em 0 .5em 3%;
}
div.factors2 p {
	padding: 0 0 .3em 2.5em;
	text-indent: -1em;
	line-height: 1.2; font-weight: normal;
	font-size:100%;
	}
ul.wrapright li {list-style-position: inside;}
ol.abc {list-style-type: lower-alpha;}
ul ul, ul ol, ol ul, ol ol {font-size: 100%;}
table.twocol {width: 90%;margin: 0 5%;font-size:70%; line-height:1.2em;}
table.twocol td {vertical-align:top;}
table.twocol td:first-child {padding-right: 1em;}

table.narrative {	/* table of info in general narrative flow */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 20px 0 3em; padding: 0;
	text-align:left;
	border: 1px solid #416405;	border-collapse:collapse;
	}
table.narrative thead {	/* the table header row */
	font-variant:small-caps; font-size:1.1em;
	font-weight:bold;
	text-align: center;
	vertical-align:middle;
	} 
table.narrative thead td {
	color:#416405;	
	}
table.sortable thead {
	cursor:pointer;
	}
table.sortable thead td.sorttable_nosort {
	cursor: auto;
	}
table.narrative td {
	vertical-align:top;
	padding:5px;
	font-size: 70%;
	line-height: 1.15em;
	border: 1px solid #416405;	border-collapse:collapse;
}
table.narrative td.noborder { border:none;}
table.narrative td.nobordertop { border-top:none;}
table.narrative td.noborderbottom { border-bottom:none;}
table.narrative td.noborderleft { border-left:none;}
table.narrative td.noborderright { border-right:none;}
table.narrative td.rowhead {font-style: italic;}
table.narrative td p {font-size: 100%; line-height: 1.15; padding: 0 0 .5em .9em; text-indent: -1em;}
table.narrative td ul {font-size: 100%; padding: 0; margin-top: 0;}
table.narrative td ul li {line-height: 1.15;}
table.narrative td.note { /* combo of footnote and caption since IE doesn't recognize caption-side bottom */
	font-size: .65em;
	line-height: 1.1;
	background-color: #ddedff; /* caption color*/
	}
table.narrative td.fill {background-image: url(../images/C8_RajaAmpat-Misool_Bat-reef.png);background-position: bottom;background-repeat:no-repeat;}
table.equation {margin: 1.5em 10%; border: 1px solid #416405;} 
table.equation td {text-align: center; font-size: 80%;line-height: 2;padding: 10px 20px; white-space: nowrap;}
/* =SIDEBARS */
div#sidebar {
	float: right; width: 250px; margin: 10px;
	border: 1px solid #416405;
	}
div#sidebar300 {
	float: right; width: 300px; margin: 10px;
	border: 1px solid #416405;
	}
div#sidebar h1, div#sidebar300 h1 {
	margin: 0; margin-top: -2px;padding: 5px 10px; border:0;
	background-color: #7c366c;
	color: white;
	font: 1.1em "Times New Roman", Times, serif;
}
div#sidebar p, div#sidebar300 p {
	margin: 0; padding: .4em 5px .4em 5px;
	line-height: 1.3;
}
div#sidebar ul, div#sidebar300 ul {
	padding: .4em 1.5em .4em 2em;
	margin: 0;
	line-height: 1.2;
	font-size: 70%;
	}
div#sidebar li, div#sidebar300 li {
	padding: 0;}
div.notebook {	/* for examples of field notes */
	width: 700px;
	background:url(../images/notepaper.gif) repeat-y;
	margin: 10px 0 10px 15px;
	border: thin solid #014e9e; border-top-style: dotted;border-top-width: medium;
	}
div.notebook p {
	font-family: cursive; font-size: 100%;
	margin-left: 50px; padding: 5px;
	}
div.notebook p.caption {
	max-width: 100%;
	font-size: 9px; font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2;
	text-align:center;
	margin: 0; padding: .1em .5em;
	color: #416405; /* same as old h1 background */
	background-color: #ddedff; /* very pale vrsion of page color*/
	}

div.notebook span.hilite {
	background-color: #FFFF99;}
	
div.video {
	width: 250px; border:none;
	}
div.video.left {
	float: left; margin: 10px 20px 20px 3%;
	}
div.video.right {
	float: right; margin: 10px 3% 20px 20px;
	}
div.audio {
	/*width: 400px;*/ border:none;margin: 10px 20px 20px 3%;
	}
div.video h1, div.audio h1 {
	margin: 0; margin-top: -2px;padding: 5px 0; border:0;
	background-color: white;
	color: #7c366c;
	font: 1.1em "Times New Roman", Times, serif;
}
div.video h1 span.t, div.audio h1 span.t {font-size: .75em; color: #666666;} /* running time */
div.video h1 span.v, div.audio h1 span.v {font: bold .8em Verdana Arial, Helvetica, sans-serif;} /* "Video" (and "Audio" 1 song) */
div.video p {margin-top: -.1em; padding: 0 0 .4em 0;
	line-height: 1.2; color: #666666;
}
table.twovideos {margin 10px auto; width: 600px;}
table.twovideos td {padding: 20px;vertical-align:top;}
div.afterav {clear: both;}	/* after embeds when needed */
.clearright	{
	clear: right;
	}
.clearleft	{
	clear: left;
	}
.clear {clear: both;}
/* =ILLUSTRATION holders */
div.illust300 {
	float: right; width: 300px; margin: 10px;/* margin-right:5%;*/
	border: 1px solid #416405; /* bordergreen */
	}
div.illust250 {
	float: right; margin: 10px; width: 250px;
	}
div.illust400 {
	float: right; margin: 10px; width: 400px;
	border:1px solid #014e9e;/*blue from header photo */
	}
div.illust400.bigger {width: 600px;float: none;margin-left: auto;margin-right: auto;} /* you never know... */
.illust150 {width: 150px !important;}
div.largemap {
	margin: 25px 10px;
	text-align: center;
	}
div.nomargintop {margin-top: 0;}
div.nomarginright {margin-right: 0;}
div.nomarginbottom {margin-bottom: 0;}
div.nomarginleft {margin-left: 0;}
div.noborder {border: 0;}
.caption, div#sidebar .caption, div#sidebar300 .caption {
	max-width: 100%;
	font-size: 9px;
	line-height: 1.2;
	text-align:center;
	margin: 0; padding: .2em .5em;
	color: #416405; /* c.f. bodergreen */
	background-color: #ddedff; /* very pale vrsion of page color*/
	}
td.cap {background-color: #ddedff;vertical-align: top;} /* to fill a table cell with the caption color */
.homecaption {height: 15px; padding: 0; line-height: 1.5;margin-left: -1px;}
.caption.nobackground {background-color: transparent;}
.borderblue {	border:1px solid #014e9e;/*blue from header photo */
	}
.bordergreen {
	border: 1px solid #416405; 
	}
.bordercoral {
	border:1px solid #7c366c;/*redish purple */
	}
img.thumb {
	margin: 5px 10px; float: right; border:thin solid #0082b3;/* Marine  */
	cursor:pointer;
	}
img.point {
	cursor:pointer;
	}
.right {
	float: right; margin: 10px;
	}
.left {
	float: left;  margin: 10px;
	}	
/* =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 {
	clear: both;
	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;}
	
#content span.footref {	/* a footnote reference */
	font-size:9px; /*smaller*/font-weight: bold;
	vertical-align: top;
	color: #0082b3 !important; /*Marine  */
	}

/* =FOOTER */	
#footer {
	clear: both;
	height: 35px; padding-top: 3px;
	z-index:300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; line-height: 1.35;
	color: #718b44; /* 75% h1 background */
	background-color: #f9f4f8;
	text-align:center;
	margin-left: 200px;
}
#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: #bd9ab5; /* 50% h1 background */
	text-align:center;
	margin-left: -1px;
}
div.logo {
	border:none;
    padding: 0;margin: 0;margin-right: 10px;
}
div.optfooters {}

#footer a:link, #footer a:visited, #footer a:active  {
	color: #718b44; /* 75% h1 background */
	text-decoration: underline;
	}
#footer a:hover{
	color: #416405;/* same as h1 background */
	text-decoration: underline;
	}
.copyright {
	font-size: 9px; line-height:1.4;
	}
/* Custom Search */
form.searchform {margin:0;padding-top: 5px;padding-right: 10px;padding-left: 5px;text-align:right;}
form.searchform.nopad {} /* ie only, just for home page, so far */
form.searchform input.icon {vertical-align: bottom;}
div.searchwrap {float: right; margin:0;}
#content div.nofloat {} /* this is defined for ie browsers and placed on top right divs that now have search forms */
/* for map display form in Micronesia case study */
div.mapoverlays {
	margin: 10px auto; max-width:680px; height: 440px;border: 1px solid #652c57;
	}
p.mapcaption {font-size: 65%;padding-top:0;}	
form {margin:0; padding:0;}
table.mapsmenu {	/* for the overlay maps and illustrations */
	margin:0; padding:0;width:100%;
	}
table.mapsmenu td {/*margin:0;padding:0;*/
	font-size: 12px;
	line-height: 1.4em;
	color: #393939;
	padding: 2px;
	vertical-align:top;
	}
div.mapoverlays table.mapsmenu td.mapimg {width:410px;}
table.mapsmenu td.mapimg img {padding:5px;}
table.mapsmenu td.leftcol {width: 250px;padding:10px;}
table.mapsmenu p {margin: 0;}
table.mapsmenu td.mapheading {text-align: center;font-weight:bold; font-size: 1.1em; background-color:#652c57;color:white;
line-height: 1.4em; padding:0;}
/*table.mapsmenu table.buttons {padding: 20px 0 20px 10px;}*/
table.mapsmenu td.title {font-weight:bold;color:#652c57;padding-bottom:.5em;}
table.mapsmenu p.descrip {color:#652c57; text-align:center;padding-bottom:5px;}
table.mapsmenu td.deftext p {margin:0;padding:5px;font-size: 84%;line-height:1.3;max-width:240px;}
table.mapsmenu td.deftext h2 {padding-left: 2px;margin-bottom:0;}
/* map overlays using PVII autoShowHide script */
/* Image layers */
#ImgYap1 {
	z-index:100;
	position:absolute;
	visibility: visible;
}
#ImgYap2, #ImgChuuk1, #ImgChuuk2, #ImgPohnpei1, #ImgPohnpei2, #ImgKosrae1, #ImgKosrae2 {
	z-index:1;
	position:absolute;
	visibility: hidden;
}