/* CSS Document */
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:68.75%;
	margin:0;
	text-align:justify;
}

p,ul {
	text-align:justify;	
}

#banner {
	width:100%;
	height:93px;
	border-top:1px solid white;
	border-bottom:1px solid white;	
	width:100%;
	height:75px;
	overflow:hidden;
	margin:0 auto;
	background-color:#164956;
	background-repeat:no-repeat;
	color:white;
	text-align:center;
}

#banner img {
	margin:0 auto;
	width:780px;
	height:75px;
}



#topNavContainer {
	width:100%;
	position:relative;
	height:20px;	
	background-color:#164e5b;
	text-align:right;
}

/* Set to position:absolute and with a percentage
left value, to prevent scrollbars from appearing 
when the browser window is minimized */
#topNav, #topNav ul {
	height:20px;
	overflow:hidden;
	position:absolute;
	left:51%;
	margin:0;
	padding:0;		
}

#topNav li {
	display:block;
	float:left;
	list-style-type:none;		
	text-align:center;
	border-right:1px solid white;
	padding-left:3px;
	padding-right:3px;	
	height:100%;	
}

#topNav .front {
	border-left:1px solid white;		
}

#topNav a, #bottomNav a {
	color:white;
	font-weight:bold;
	text-decoration:none;	
}

#topNav a:hover, #bottomNav a:hover {
	color:white;
	font-weight:bold;
	text-decoration:underline;	
}

/* the container tha holds the navigation list */
#bottomNavContainer {
	width:790px;
	overflow:hidden;	
	margin:0 auto;	
	background-image:url('../images/navBottomBg.jpg');	
	text-align:center;
}

#bottomNav, #bottomNav ul {	
	/*width:350px;*/
	width:auto;
	margin: 0 auto;	
	overflow:auto;
	padding:4px;
	text-align:center;		
}

/* I use display:inline instead of float:left to lay the elements
out beside each other, as using float:left will align them to the left
and I want them aligned to the centre. */ 
#bottomNav li {
	display:inline;		
	margin-right:-3px;	
	height:100%;
	padding:4px;
	background-image:url(../images/navBG.gif);
	background-repeat:no-repeat;
}



#bottomNav .lastli {
	color:#6389a0;
	height:100px;	
	width:2px;
	padding:4px;
	background-image:url(../images/navBG.gif);
	background-repeat:no-repeat;				
}

#bottomNav a {		
	margin:0px;	
}

#bottomNav .spacer {
	float:left;
	width:20px;
	height:100%;
	background-repeat:no-repeat;
	overflow:auto;	
	background-image:url('../images/divider.gif');	
	
}

h1.loggedout {
	margin-top:-3px;
}

h1 {
	color:#0a479e;
	font-size:120%;
	font-weight:bold;
	margin:0;
	padding:0;
	border-bottom: 1px solid #6389a0;
}

h1.userhome {
	border-bottom: 3px solid #6389a0;
	padding-bottom:10px;
	margin-bottom:15px;
}

h2.alt {
	color:#333333;	
	background-color:#ffffff;	
	font-weight:bold;
	
}

h2 {
	background-color:#6389a0;
	color:#ffffff;
	padding:2px;
	font-size:100%;
	margin-top:18px;
	margin-bottom:3px
}

h2.userhome {
	background:none;
	color:#000000;
	font-weight:bold;
	margin-top:3px;
}

h3.alt {
	color:#333333;
	font-size:120%;	
	background-color:#ffffff;	
	font-weight:bold;
}

h3 {
	color:black;
	font-weight:bold;	
	margin:2px;
	margin-top:13px;
	font-size:125%;
}

h4 {	
	font-weight:normal;	
	font-size:100%;
	color:#0a479e;
	margin:0;
	padding:0;
	margin-top:8px;				
}

h4.alt {
	font-size:110%;
	font-weight:bold;	
	margin-bottom:5px;
}

/* The Downloads Page */
h4.round {
	background-color:#a8c7da;
	background-image:url(../images/header_bg.jpg);
	background-repeat:no-repeat;
	background-position:right;
	color:#ffffff;
	padding:2px;
	font-size:100%;
	margin:0;
	font-weight:bold;	
}

/* The main container that holds all the downloads */
.downloadsCont  {
	width:500px;		 
	height:auto;
	overflow:auto;
	display:block;	
	margin:0 auto;
	margin-bottom:20px;	
	padding:0;
	border:0;	
	text-align:left;	
}


.downloadsCont table {	
	border:1px solid #a8c7da;	
	display:block;
	height:100%;	
	overflow:auto;		
	width:500px;		
}

/* Holds the items that are not in the ugly, 
compnon-standard-compliant data-tables */
.downloadsCont .container {	
	border:1px solid #a8c7da;	
	display:block;
	height:100%;	
	overflow:auto;			
	width:498px;	
}

/* The tbody (why???) tag which facelets generates */
.downloadsCont tbody {	
	display:block;	
	width:100%;	
}

.downloadsCont .row, .downloadsCont tr {
	width:auto;
	height:100%;
	overflow:auto;	
	padding:4px;
	margin-bottom:15px;		
	display:block;	
}

.downloadsCont td {
	width:500px;	
}

/* Float the download buttons to the right */
.downloadsCont .defaultButton {
	float:right;		
}

/* All headers in .downloadCont */
.downloadsCont .emphasis_header {
	font-weight:bold;
	font-size:110%;		
}


/* The headers in the tableless (as it should be!) container */
.container .emphasis_header {
	float:left;
}

/*****/

#container {
	width:1000px;
	height:100%;
	overflow:auto;
	margin: 0 auto;	
	margin-bottom:10px;
	border-bottom:1px solid #6389a0;
	padding:7px;
	padding-bottom:20px;
	margin-top:10px;		
	
}

/* The column layout for one column only */
#content_col1 {
	width:720px;
	height:100%;
	border-right:1px dotted #d6dee7;
	border-left:1px dotted #d6dee7;	
	margin: 0 auto;
	padding:5px;
	margin-top:10px;
	margin-bottom:10px;
}


/* Two column layout with a narrow left column and a wide right column */
#twoCols_col1_narrow {
	width:160px;
	height:100%;
	overflow:auto;
	
	float:left;		
}

#twoCols_col2 {
	width:814px;
	overflow:auto;	
	border-right:1px dotted #d6dee7;
	border-left:1px dotted #d6dee7;		
	float:left;
	padding:5px;
		
}



#footer, #footer ul {
	margin:0 auto;
	padding:0;	
	width:790px;
	text-align:center;
	padding-top:4px;
	padding-left:5px;
	padding-right:5px;
	
}

#footer li {
	list-style-type:none;
	padding-left:4px;
	padding-right:4px;
	display:inline;
	padding-right:4px;
	padding-right:4px;	
	border-right:1px solid #999999;
}

#footer a {
	color:#22546d;
	text-decoration:none;
}

#footer a:hover {
	color:#22546d;
	text-decoration:underline;
}


.blockMenu, .blockMenu ul {
	padding:0;
	margin:0;
	width:150px;
	overflow:hidden;
	text-align:left;	
	margin-top:-20px;
}

.blockMenu li, .blockMenuUser li {
	list-style-type:none;	
	border-bottom:1px solid #6389a0;
	text-align:left;
}

.blockMenu a, .blockMenuUser a {
	display:block;
	text-decoration:none;
	width:144px;
	color:#22546d;
	background-image:url('../images/brown_arrow.gif');
	background-repeat:no-repeat;
	background-position:3px 6px;
	text-indent:10px;
	padding:3px;
	
}

.blockMenu a:hover, .blockMenuUser a:hover {
	display:block;
	text-decoration:none;
	color:#22546d;
	background-color:#d2dde3;	
}

.blockMenu a.on, .blockMenu a:hover.on, .blockMenuUser a.on, .blockMenuUser a:hover.on {
	display:block;
	text-decoration:none;
	width:144px;
	color:#22546d;
	background-image:url('../images/blue_arrow.gif');
	background-color:#d2dde3;
	background-repeat:no-repeat;
	background-position:3px 6px;
	text-indent:10px;
	padding:3px;
}


.blockMenu h2, .blockMenuUser h2 {
	display:block;
	color:#ffffff;
	background-color:#6389a0;	
	background-image:none;
	text-indent:0;
	font-size:100%;
	font-weight:bold;
	padding:2px;
	margin:0;
	margin-bottom:0;
	margin-top:20px;
}

.blockMenuUser, .blockMenuUser ul  {
	padding:0;
	margin:0;
	margin-top:21px;
	width:150px;
	overflow:hidden;
	margin-top:-20px;
}


/* The contact page */
#contactUs {	
	height:100%;
	overflow:auto;
	margin:0 auto;
	width:700px;
	border:0;
}

#contactUs .col1 {
	width:150px;
	font-weight:bold;	
	margin:0;
	padding:2px;
	float:left;	
	height:23px;
	
}

#contactUs .col1_newline {
	width:150px;
	font-weight:bold;
	clear:both;
	padding:2px;	
	height:23px;	
	margin-top:15px;
}

#contactUs .col2 {
	width:200px;
	float:left;
	height:25px;
	padding:2px;	
	
}

#contactUs .col3 {
	width:200px;
	height:25px;
	padding:2px;		
	float:left;	
}

.errorMsg {
	color:red;
	font-weight:bold;
	text-align:left;
}

.errorMsgSmall {
	color:red;
	font-size:80%;
	text-align:left;
}

.defaultButton {
	background-color:#6389a0;
	border:1px solid #164656;
	color:#ffffff;
	font-size:90%;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}

a.defaultButton, a.defaultButton:hover  {
	background-color:#6389a0;
	border:1px solid #164656;
	color:#ffffff;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}

.pagetitle {
    font-weight:bolder;
    text-align: left;
  	font-size: 13px;
  	color: #0A479E;
}

a	{
		text-decoration: none;
		color: #9F7027;
}

a:hover {
	color: #DF9E37;
	text-decoration: underline;
}


a.emphasisLink	{
		text-decoration: none;
		color: #9F7027;
		font-weight:bold;
}

a.emphasisLink:hover {
	color: #DF9E37;
	text-decoration: underline;
	font-weight:bold;
}



a.inline	{
	color: #22546D;
	text-decoration: none;
}

a.inline:hover {
	color:  #22546D;
	text-decoration: underline;
}
	

/* Login page */

#loginContent {
	width:300px;
	height:100%;
	overflow:auto;
	border:1px solid #cccccc;	
	margin:0 auto;
	margin-top:8px;
}

#loginContentSmall {
	width:127px;	
	padding:0;
	height:100%;
	overflow:auto;			
	margin-right:5px;
	display:block;
	border:1px solid #666666;	
	margin:0;	
	
}

#loginContentSmall label, #loginContentSmall div {
	padding-left:3px;
}

#loginContentSmall h2 {
	margin:0;
	padding:0;
}

#loginContent legend {
	color:#0046d5;
}

#loginContent .col1 {
	width:100px;
	height:30px;
	float:left;	
	clear:right;
	font-weight:bold;	
}

#loginContent .col2 {
	width:200px;
	height:30px;
	float:left;		
}


#loginContent .defaultButton {
	clear:both; 
	margin:0 auto;
	margin-top:15px;	
}

.bottomButtonContainer {
	text-align:center;
	margin-top:15px;	
	clear:both;
}

.bottomButtonContainer .defaultButton {
	margin:5px;
}	

#searchBar div {
	padding-right:5px;
}

#searchBar label {
	font-weight:bold;	
	display:block;
	font-size:110%;	
	margin-bottom:5px;
}

#searchBar {
	float:right;
	margin-bottom:10px;	
	margin-top:5px;
	margin-right:11px;
	padding:3px;
	border:1px solid #cccccc;
}

#groupHolder {
	width:245px; 
	height:auto; 	
	position:relative;				
	float:left;
	margin-left:3px;
	
}

#groupHolder p {
	text-align:center;	
}

#mapPic {	
	margin:0 auto;
	margin-top:4px;
	display:block;
	border:1px solid black;	
}

#mapPic_narrow {	
	position:absolute;
	bottom:0px;
	z-index:100;	
	left:580px;
	border:1px solid black;
}

#regionImg {
	float:left;
	border:1px solid black;
}

.searchResults {
	margin:0 auto;
}

.searchResults th {
	padding:3px;
}

#mapResults, .mapResults {	
	font-size:90%;	
	width:250px;	
}

#mapResults thead, .mapResults thead, .searchResults thead {
	text-align:left;
	background-color:#cccccc;
	color:#333333;	
}

#mapResults thead th, .mapResults thead th {	
	border-bottom:1px solid #999999;
}

#mapResults td, .mapResults td {
	padding-right:5px;	
}


.popupTxt {	
	padding-top:10px;
	font-weight:bold;	
}

#arcticDiv, #gulfDiv, #southCaribDiv, #subAndeadDiv, #southAtDiv, #centAtDiv, #northAtDiv, #amNorthAtDiv, #northAfricaDiv,
#westParMedDiv, #westParEurDiv, #westSiberiaDiv, #centParDiv, #middleEastDiv, #indiaDiv, #westIndonesiaDiv, #indoChinaDiv,
#eastIndonesiaDiv, #nwAustraliaDiv, #southChinaDiv, #eastSiberiaDiv, #eastParDiv, #russiaDiv, #eastAfricaDiv, #redSeaDiv, #centralAfricaDiv, #eastAfricanRiftsDiv, #westPhilippinesDiv {
	position:absolute; 
	visibility:hidden; 
	word-wrap:normal;
	padding:6px; 	
	background-color:#ececec; 
	font-weight:bold; 
	left:-1000px;
	cursor:pointer;
	z-index:100;
}

#arcticDiv {	
	border:1px solid #cf98e3; 	
}

#gulfDiv {	
	border:1px solid #dca991; 	
}

#southCaribDiv {	
	border:1px solid #767fc1; 	
}

#subAndeadDiv {	
	border:1px solid #ddce68; 	
}

#southAtDiv {	
	border:1px solid #5fbe70; 	
}

#centAtDiv {	
	border:1px solid #d96c75; 	
}

#northAtDiv {	
	border:1px solid #6277d1; 	
}

#amNorthAtDiv {	
	border:1px solid #afc776; 	
}

#northAfricaDiv {	
	border:1px solid #d4b6ee; 	
}

#westParMedDiv {	
	border:1px solid #c06fa5; 	
}

#westParEurDiv {	
	border:1px solid #bc8e72; 	
}

#westSiberiaDiv {	
	border:1px solid #c8706a; 	
}

#centParDiv {	
	border:1px solid #9ce3b8; 	
}

#middleEastDiv {	
	border:1px solid #d2efb7; 	
}

#indiaDiv {	
	border:1px solid #69cdd1; 	
}

#westIndonesiaDiv {	
	border:1px solid #7f8cd9; 	
}

#indoChinaDiv {	
	border:1px solid #956fce; 	
}

#eastIndonesiaDiv {	
	border:1px solid #6e63c1; 	
}

#nwAustraliaDiv {	
	border:1px solid #d46f93; 	
}

#southChinaDiv {	
	border:1px solid #74d497; 	
}

#eastSiberiaDiv {	
	border:1px solid #78b0ca; 	
}

#eastParDiv {	
	border:1px solid #e6a6b5; 	
}

#westPhilippinesDiv {	
	border:1px solid #d2efb7; 	
}

#russiaDiv {	
	border:1px solid #c46fb6; 	
}

#eastAfricaDiv {	
	border:1px solid #cfa762; 	
}

#redSeaDiv {	
	border:1px solid #b1aa7a; 	
}

#centralAfricaDiv {	
	border:1px solid #8bcdc5; 	
}

#eastAfricanRiftsDiv {
	border:1px solid #000000; 		
}



#mapForm span {
	cursor:pointer;		
}

.dataTable_big {
	margin:0 auto;	
	border-collapse:collapse;
	width:770px;
	
	
}

.whatsNewdataTable {
	margin:0 auto;	
	border-collapse:collapse;	
	width:700px;
	
	
}

.dataTable {
	margin:0 auto;	
	border-collapse:collapse;
	width:750px;
	
}

.dataTable_big h3, .whatsNewdataTable h3 {
	background-color:white;
	border-bottom:1px dashed #6389a0;	
	color:#6389a0;
	font-size:130%;
}

.dataTable_big h3 a, .whatsNewdataTable h3 a {
	color:#6389a0;	
	text-decoration:none;
}

.dataTable th {
	background-color:#d5d2d2;
	border-bottom:1px solid #999999;
	border-left:1px solid #d5d2d2;
	border-right:1px solid #d5d2d2;
	padding:4px;
	margin:0;
}

.dataTable td {	
	padding:2px;		
	border:1px solid #cccccc;
	
}

.dataTable_big tr, .whatsNewdataTable tr {		
	vertical-align:top;		
}

.dataTable_big td, .whatsNewdataTable td {
	padding-bottom:5px;		
}



.dataTable_big .date .whatsNewdataTable .date {
	font-size:90%; 
	color:#A66D2F;  
	margin-top:-6px; 
	margin-bottom:10px
}

.dataTable_small {
	font-size:110%;	
}

.dataTable_small a {
	color:#6389a0;	
	font-weight:bold;
	text-decoration:none;		
}

.dataTable_small .date {
	color:#999999;	
}

.errorMsg {
	color:red;
	font-weight:bold;
}

.evenColumn {
	background-color:#f2f0e4;		
}

.oddColumn {
	background-color:#e1eff2;		
}

#editWhatsNew {
	border:1px solid #999999;
	padding:4px;	
}


#tugContainer {
	border:0; 
	margin:0; 		
	overflow:auto;	
	padding:0;
	padding:4px;		
}

#tugContainer img {
	margin:0;
	padding:0;	
}

#editWhatsNew, #editItem, #editUser, #tugContainer {
	width:600px;	
}

#editWhatsNew .col1, #editItem .col1, #editUser .col1 {
	width:120px;
	float:left;		
	margin-bottom:3px;	
}

#editWhatsNew .col2, #editItem .col2, #editUser .col2 {
	width:280px;
	float:left;	
	margin-bottom:3px;	
}

#tugContainer .col1  {
	display:block;
	width:120px;
	float:left;
	margin-bottom:3px;
}
#tugContainer .col2 {
	display:block;
	width:130px;
	margin-bottom:3px;		
}

#editWhatsNew .col3, #editItem .col3, #editUser .col3, #tugContainer .col3 {
	width:200px;
	float:left;	
	margin-bottom:3px;
	height:25px;		
}



input.controlled, textarea.controlled {
	width:260px;	
}

input, textarea, select, option {
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
}

.greyArrow {
	font-weight:bold; 
	color:#999999	
}

.searchHighlight {
	color:#6389a0;
	font-weight:bold;	
	font-size:110%;
	
}

#reportProblem {
	width:640px;	
	border:1px solid white;			
	padding:0;
}

#userButtons {
	height:18px; 
	margin:0; 
	padding:0; 
	text-align:right;	
	
}



.bottomBorder {
	border-bottom:1px solid #cccccc;

}


.right {
	float:right;
}

.left {
	float:left;
}

.wrapImg {
	margin:5px; 	
	border:solid 1px #000000;
}

p.narrow {
	width:600px;
}


ul.narrow li {
	width:600px;	
}


.col {
	position:relative;	
	height:auto;
	z-index: 100;
}
.col em {
	float:left; 
	clear:left; 
	display:block; 
	height:18px; 	 
	position:relative;	
}
em.lpad {height:2.5em; width:1px; float:left; margin-left:0;}
em.lpad2 {height:5em; width:1px; float:left; margin-left:0; }
.ln160 img {position:absolute; margin:0; padding:0; padding-bottom:5px}

.col p {position:relative;z-index:20;}

#note {position:absolute; top:7px; width:600px; height:250px; }

#note span {font-style:normal; }

#note em {float:right; clear:right; height:18px; margin:0;}
.rn01 {width:30px; } 
.rn02 {width:40px; } 
.rn03 {width:50px; } 
.rn04 {width:60px; } 
.rn05 {width:10px; } 
.rn06 {width:90px; } 
.rn07 {width:100px;   } 
.rn08 {width:110px;   } 
.rn09 {width:120px;   }
.rn10 {width:130px;  }

.articleDate {
	font-size:90%; 
	color:#898581;  		
	margin-bottom:10px;	
}

.articleFileName {
	margin-bottom:10px;	
}

.itRequirementsImgContainer {
	width:600px;
	margin:0 auto;	
	
}

.emphasis {
	color:red;
}


.alternate {
	color:#9F7027;
}

.articleCotnainer {
	float:left;
	width:490px;		
	margin-right:5px;	
}

.articleCotnainer_big {
	float:left;
	width:550px;		
	margin-right:5px;	
}

form {
	margin:0;
	padding:0;
}



#fieldsDatacontainer {
	background-image:url('#{facesContext.externalContext.requestContextPath}/images/fields_data_pic.jpg'); 
	background-repeat:no-repeat; 
	height:327px; 
	overflow:auto; 
	background-position:top right; 
	width:600px
}

#fieldsDatacontainer p {
	width:430px;
}

/* FAQ and tech Tips */
#hover {
	margin-top:10px;
	width:470px;		
}

#hover_large {
	margin-top:10px;
	width:650px;	
	height:100%;
	overflow:auto;		
}

#hover_large div {	
	width:580px;	
}

#hover_large p {
	margin:0;	
}

/*#hover_large li {
	width:600px;	
	background-color:red;	
}*/

#hover_large {
	display:block;
	float:right;	
}



.icon {
	background-image:url(../images/closed_node.gif); 	
	background-repeat:no-repeat;
	background-position:0 -2px;
	width:16px;
	height:22px;	
	display:block;
	float:left;
}



#hover .title, #hover_large .title  {
	font-size:100%;
	color:#0a479e;
	font-weight:bold;
	cursor:pointer;
}


/* Client Team */
#clientTeamNames {
	float:left; 
	text-align:center;	
	margin-top:90px;
}

#clientTeamNames p {
	text-align:center;
	margin:0;
}

.thin_top_margin {
	margin-top:8px;
}

/** Quick Reference Cards **/
#referenceCardsCont {
	margin:0 auto;	
	height:100%;
	overflow:auto;
	width:300px;	
}

#referenceCardsCont h4 {
	padding-top:37px;
	padding-left:20px;			
}

#referenceCardsCont img {
	border:0; 
	width:69px; 
	height:96px	
}

#vidDetails {
	width:250px; 
	float:right; 
	margin-left:10px;		
}

#vidDetails .row {
	width:auto;
	height:100%;	
	overflow:auto;
}

#vidDetails h4 {
	font-size:130%;
	color:black;
	font-weight:bold;
	margin-bottom:25px;	
}

#vidDetails h3 {
	font-size:110%;	
	font-weight:bold;	
	margin-bottom:10px;
}


#vidDetails a {
	color:black;
	font-weight:normal;
	text-decoration:underline;
		
}

#vidDetails .col1 {
	font-weight:bold; 
	float:left; 
	margin-right:3px; 
	width:80px; 
	height:auto	
}

#vidDetails .col2 {
	float:left; 
	width:150px; 
	height:auto	
}

#baseMap, .baseMap, #styleMap, .styleMap, #addGeo, .addGeo, #findBasin, .findBasin {
	color:#0a479e;
	text-decoration:underline;	
}

#galleryContainer {
	width:630px;	
	height:100%;
	overflow:auto;
	margin:0 auto;		
}

#galleryContainer img {
	width:200px;
	height:113px;	
	border:1px solid black;
}

#galleryContainer div.holder {
	float:left;
	width:200x;
	height:113px;	
	margin:3px;	
}

#galleryContainer .row {
	width:auto;
	overflow:auto;
	height:100%;
	clear:both;		
}
/***/
td.usersRegions
{
	text-decoration:none;
	width:144px;
	color:#22546d;
	background-image:url('../images/brown_arrow.gif');
	background-repeat:no-repeat;
	background-position:3px 6px;
	text-indent:10px;
	padding:3px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #22546d;

}

td.usersRegionsPlain
{
	font-weight:bold;
	width:150px;
	text-left:10px;
	padding:3px;
	vertical-align:top;
}

td.usersAnnouncements
{
	text-decoration:none;
	width:200px;
	color:#22546d;
	text-indent:10px;

}
.usersAnnouncementsLink
{
	color:#22546d;
}

userHomeAnnouncements{
	background:green;
	width:100px;
	height:20px;
	border:medium solid blue;
}