/* This is "styles.css" - the style sheet to add additional styles.
Author: Howard Perlman, Georgia WSC. Date: June 20, 2006 */ 

/* Take off the border on all images. To add a 1 pixel border do: <img src="x" style="border-width:1px;"> */ 
img {
	border: none;
	} 
	
.clear { clear: both; }

	/*----  Add a faint border around any element  ----*/
.addborders {
    border-top: 1px solid #d9e0e6;
	border-right: 1px solid #c8cdd2;
	border-bottom: 1px solid #c8cdd2;
	border-left: 1px solid #d9e0e6;
   	padding: 4px; 
}

/*----  Center an image horizontally, on its own line  ----*/
.centerit { display: block; width: 100%;
				margin: 0 auto;
				text-align: center; }

#skipnav { display:inline; padding:0; margin:0; font-size:0pt;}
#skipleftnav { display:inline; visibility:hidden; padding:0; margin:0; font-size:0pt;}

/* Declaration for the H headings */	
h1 {
	color: #004499;
	margin: 0;
	font-size: 140%;
}

/* Use this h1onecolumn heading on pages where you don't have the left navigation pane. */
.h1onecolumn {
	margin-top: 20px;
}

h2 {
	  font-weight: bold;
	  font-size: 105%;
	  color: #992255;
	  margin-bottom: -10px;
	  margin-top: 15px;
	  padding-top: 10px;
	  clear: both;
	}

h3 {
	  font-weight: bold;
	  font-size: 100%;
	  color: #2244aa;
	  margin-bottom: 3px;
	  margin-top: 15px;
	  padding-top: 10px;
	  clear: both;
}

.h2underline {width: 98%;  font-size: 115%;padding-bottom: 3px; padding-top: 3px; font-weight: bold; color: #004499; margin-bottom:10px;  margin-top:30px; clear: both; border-bottom:2px solid #004499;}

.subtitle {
	color: #004499;	
	margin: 0;
	font-size: 130%;
	font-weight:bold;
	color:white;
	background-color: #0061c4;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px;
}
/* picleft and picright are the basic styles to include pictures in the paragraphs of text. 
Use these if you don't need a caption. */
.picleft {
	float: left;
	margin-right: 15px;
}

.picright {
	float: right;
	margin-left: 15px;
}

/* Use these pic captions to move pictures to left and right in paragraphs of text
if you want a caption. The #773377 gives the caption a dark purple color; size is set 
to 85% of the regular body text. In the HTML file, manually specify 
the width to match the width of the actual picture you are showing. 
Actually, I'm not even sure how this CSS works, but you need both pieces
for a caption to show properly. */
.picleftcaption {
	float: left;
	margin-right: 10px;
}

.picleftcaption p {
    	color: #773377;
		font-size: 85%;
		margin-top: 5px;
		margin-bottom:10px;
}

.picrightcaption {
	float: right;
	margin-left: 10px;
}

.picrightcaption p {
    	color: #773377;
		font-size: 85%;
		margin-top: 5px;
		margin-bottom:10px;
}

.shadow2 { 
-webkit-box-shadow: 2px 1px 2px #999;
-moz-box-shadow: 2px 1px 2px #999; 
box-shadow: 2px 1px 2px #999; }

.shadow5 { 
-webkit-box-shadow: 5px 5px 10px #333;
-moz-box-shadow: 5px 5px 10px #333; 
box-shadow: 5px 5px 10px #333; }

/*----  Use class=picleftborder/picrightborder to frame an image and float it inside of a text paragraph.
		Only apply this style to image 
		To have a framed image inside a DIV with a caption, set the DIV class to picleft/picright and set the image class 		               to "addborder" ----*/	
.picleftborder{
	float: left;
	border-top: 1px solid #D9E0E6;
	border-right: 1px solid #C8CDD2;
	border-bottom: 1px solid #C8CDD2;
	border-left: 1px solid #D9E0E6;	
	padding: 4px;
	margin-right: 10px;
}

.picrightborder{
	float: right;
	border-top: 1px solid #D9E0E6;
	border-right: 1px solid #C8CDD2;
	border-bottom: 1px solid #C8CDD2;
	border-left: 1px solid #D9E0E6;	
	padding: 4px;
	margin-right: 10px;
}

/* Styles the left side navigation vertical bar.  */
.leftpane {
	width: 200px; border-right-style: solid; border-right-width: 1px; border-right-color: #999999; padding-right: 10px; font-size:90%;
}

/* InfoBox styles: Creates a link hover popup box, based on USGS home page  01/2012  */

a.infobox {position:relative;z-index:24;color:#00f}
a.infobox:hover {z-index:25;background-color:#fff;}
a.infobox span {display: none;;}
a.infobox:hover span {display:block;position:absolute;top:35px;width:250px;border:1px solid #000;background-color: #F2F2F2;color: #000;padding: 3px;left: 100px;visibility: visible;}
/*------------------------------------------------------------------------------------------------------*/
/*   Boxheading styles                                                                                  */
/*------------------------------------------------------------------------------------------------------*/

.boxheading {
	border-bottom: 1px solid #999999;
	margin: 0px;
	padding: 2px;
	font-size: 100%;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 8px;
}

.boxsection {
	width: 98%;
	border: 1px solid #cccccc;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 30px;
}

.boxsection p {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: -8px;
	margin-top: 8px;
}
.boxsection ul li {
	padding-bottom: 3px;
	padding-right: 10px;
}

.boxsection ul li ul li{
	margin-left: -15px;
}

.boxsection ul li ul li ul li{
	margin-left: -15px;
}




/* Sets the color for the site title bar. */
DIV.bannerColorBand, DIV.banner { 
        background-color: #004184; 
} 

/* Common set of styles to manage the link properties. It sets links (unvisited and visited) to be blue and underlined. It sets a mouse hover as an non-underlined magenta type. */
a:link {
 text-decoration: underline;
}
a:visited {
 text-decoration: underline;
 	color : blue;
}
a:hover {
 text-decoration: none;
	color : #ff22cc;
}

/* To center an object  and to line up vertically in the middle) */
.center {	text-align: center;	}
.middle { vertical-align: middle; }

	/* Class to make sure objects from below another object don't intrude. It forces the object below this one to start below the bottom of the object.  */
.clearall {
	clear: both;
}
.clearnone {
	clear: none;
}

/* Property (class) to make text a bit smaller */
.smaller {	font-size: 90%; }

/* Bold text  */
.bold {	font-weight: bold; }


/* Colors used to set backgrounds, such as in a data table with rows alternating in light and darker grey colors. Used in the list of publications and data tables. The greydarker is often used in the table heading lines.  */
.greylight {
	background-color: #eaeaea;
}
.greymedium {
	background-color: #c6c6c6;}

.greydark {
	background-color: #999999;
}

.greydarker {
	background-color: #767676;
}

  .lefthead {
		background-color: #dce3ef;
   		margin-top: 14px;
		margin-bottom: -4px;
		margin-right:10px;
		padding: 2px;
		font-weight: bold;
		color: #274096;
 }
 
   .leftheaddark {
		background-color: #004a9c;
   		margin-top: 14px;
		margin-bottom: -4px;
		margin-right:10px;
		padding: 2px;
		font-weight: bold;
		color: #ffffff;
 }
 
/* Property (class) to make text a bold reddish, then a blue bold, then a smaller size. */
.redbold {
   	color: #992255;
	font-weight: bold;	}
	
.bluebold {
   	color: #0033aa;
	font-weight: bold;	}
	
.size90 {
	font-size:90%;
	}

.size130 {
	font-size:130%;
	}
.valignmiddle {
	vertical-align: middle;
}

.valignbottom {
	vertical-align: bottom;
}
.navmain a:link {
 text-decoration: none;
 color: white;
}

.linksleft a:link{
 text-decoration: underline;
  color: blue;
}

.linksleft a:visited {
 text-decoration: underline;
 color: blue;
}
.linksleft a:hover {
 text-decoration: none;
	color : #ff22cc;
}



/* May 2009: Generic styles for new blueish tables */
	.tableblue table { width:97%; border:1px solid #c5cfd8; margin:05em auto; border-collapse:collapse; }
	.tableblue caption { color: #4a6894; font-size:.95em;  font-weight: bold; margin:1em 0 0 0; padding:0;  text-align:center; } 
	.tableblue tr td { background: #f9f9fd } 
	.tableblue tr.even td { background: #edeffe} 
	.tableblue td { color: #577187; border:1px solid #c5cfd8; padding:.15em .3em;} 
	.tableblue th {border: 1px solid #adc0d0; padding:.1em .01em; background:#d7e2f0;  font:bold 0.85em/.9em ; color:#306099} 
	.subcaption {font-size: .9em; font-weight: normal;}
	
/* ----- Format for the tables in the Publications pages -----*/
#tablepubs table {
	width: 97%; 
	margin-bottom: 10px; 
	margin-top: 25px; 
	border-collapse: collapse; 
	clear: both;
}
	
#tablepubs table tr {border-bottom: thin #888888 solid;}


/*----  Styles to set up a left and right content area (about 1/2 the width of the #mainbody content area). Using tables is an alternative to this. Needed to add clear:both to the leftside style as without a clear then when a window is expanded wide enough, the right side would appear below the left side.   ----*/
.leftside {	float: left; width: 48%; clear: both; }
.rightside { float: right; width: 48%; }

/* Class which can be used to create a left column, in this case 180 pixels wide) This one spaces out lines so would be used for a menu of some type. */
.left {
   position: absolute;
   left: 10px;
   height: auto;
   width: 180px;
   line-height: 110%;
   background-color: #eee;
}
.right {
    background: #FFFFFF;
    margin-left: 200px;
    padding: 15px;/*space to separate navigation and content*/
    border: thin solid #FFFFFF; 
   /*to insure that NN4.xx renders the background-color of the content area*/
}

.leftside {
	float: left;
	width: 48%;
	clear: both;
}

.rightside {
	float: right;
	width: 48%;
}

 #navmain {
 	font-weight: bold;
	font-size: 0.85em;
	text-decoration: none;
 	background: #000000;
	color: white;
 	padding: 5px;
	}

 #navwaterdata {
 	font-weight: bold;
		font-size: 0.85em;
	text-decoration: none;
 	background: #666666;
	color: white;
 	padding: 5px;
	}
	

 /* Style the chosen topic in the main link bar (the black bar with the topics) right below the site title bar. So, if you are in a certain project page, you can use this class to turn the word "projects" orange in the topics bar, to show the user they are in the 'projects' topic area. It matches the orange triangle. Orange dots in black bar removed July 2010 */
.chosentopic {
	color: #eed855; 
}

 /* Styles for the topics link words in the black bar of topics. Links are white, and underlines is removed (for visited links too, as you want them all to look the same). But, orange when you hove your mouse over a link.*/
.navmain a {
color: #ffffff;
text-decoration: none; }

.navmain a:visited {
 text-decoration: none;
 color: white;
}

.navmain a:hover {
	color: #eed855; 
	text-decoration: underline; 
}
	
	
	.navwaterdata a {
color: #ffffff;
text-decoration: none; }


.navwaterdata a:visited {
 text-decoration: none;
 color: white;
}

.navwaterdata a:hover {
	color: #eed855; 
	text-decoration: underline; }

#navmain ul {
	margin: 0;
	padding: 0;
	list-style: none; }
	
#navwaterdata ul {
	margin: 0;
	padding: 0;
	list-style: none; }
	
#navmain  li {
	display: inline;
	padding-right: 16px; }
	
#navwaterdata  li {
	display: inline;
	padding-right: 16px; }
 
 /* Styles for the left-side navigation section. "leftL1 li" is the 1st order list (LI) items. Note the bullet is taken out. Note also the margins are tricky and may not be done in the best way. "leftL2" is the 2nd order heading, with "leftL2 li" the list
 of links in the 2nd order. . */
 
 
.leftL1 a:link, .leftL1 a:visited, .leftL2 a:link, .leftL2 a:visited{
	text-decoration: none;
}

.leftL2 a:hover{
	text-decoration: underline;
}

.leftL1 li{
	margin: 7px;
	margin-left: -35px;
	margin-bottom: 15px;
	list-style-type: none;
}

.leftL2 {
	margin-top: -4px;
	margin-bottom: 21px;
}


.leftL2 li{
	margin-left: -20px;
	margin-bottom: -5px;
	list-style-type: disc;
	color: #883311;
}

 /* Style the bullets that appear in the left pane navigation lists (to replace the default ones usually shown in lists.. */
.bullet{
	color: #4455aa; 
	font-size: 80%;
}

.indent25 {
	margin-left: 25px;
	}

.h2heading {background-color: #7a8ab5; width: 98%;  font-size: 110%;padding-left: 5px; padding-bottom: 3px; padding-top: 3px; font-weight: bold; color: #ffffff; margin-bottom:20px;  margin-top:30px; clear: both;}

.headingbackgroundgrey {background-color: #cfcfcf; width: 94%;  font-size: 100%;padding-left: 5px; padding-bottom: 2px; padding-top: 2px; font-weight: bold; color: #444444; margin-bottom:20px;  margin-top:30px; clear: both;}

.headverylightgrey {
	background-color: #d4d4d4; padding: 4px; color: #222222;}

.bglightgrey {
	background-color: #cfcfcf;}
	
.white {
	color: #ffffff; }

.secondtablehead {
color: #2D2E8F;
text-align: left;
background-color: #e7e7e7;
padding-left: 8px;
padding-top:6px;
padding-bottom:7px;
border-left: solid 4px #004184;
clear: both;
margin-top: 25px;
margin-bottom: 15px;
}

.secondtabletext {
padding-left: 13px;
padding-top:10px;
padding-bottom:5px;
padding-right: 10px;
vertical-align: top;
}


 /* Property (class) used to style lists of references, and could be for publications, used in projects, etc.. */	
.references {
	margin-left:20px;
	font-size: 92%;
}

.margin0 {
	margin: 0px;
}
/* === Footer Bar for USGS links (11/6/2006) ===*/
#linksfooter {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	margin-top: 20px;	
	margin-bottom: -2px;
}
#linksfooterbar {
	background-color: #cccccc;
	padding: 2px;
	padding-left: 4px;
	margin-bottom: -20px;
}
#linksfooterbar a:link, #linksfooterbar a:visited {
	margin-right: 20px;
	color: #111111;
	text-decoration: none;
}
#linksfooterbar a:hover {
	margin-right: 20px;
	color: #ffffff;
	text-decoration: underline;
}
#linksfooterbar a:active {
	margin-right: 20px;
	color: #ffffff;
	text-decoration: none;
}
#linksfootertext {
	padding: 4px;
}

h2.boxheading {
	border-bottom: 1px solid #999999;
	margin: 0px;
	background-color: #dcdcdc;
	padding: 2px;
	color: #444444;
	font-size: 1.1em;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 8px;
}

.boxedsection {
	width: 98%;
	border: 1px solid #999999;
	margin-bottom: 20px;
	margin-top: 30px;

}
.boxedsection p {
	padding-left: 10px;
	margin-bottom: 8px;
	margin-top: 8px;
}
.boxedsection ul li {
	padding-bottom: 2px;
}


/*------------------------------------------------------------------------------------------------------*/
/*   Left sidebar style : Sept 2009: To transition NE to the newer Framework layout, adding these Leftbar styles for use when possible (first in 
the new Wateruse section                                                                               */
/*------------------------------------------------------------------------------------------------------*/

#leftbar a:visited  {
		text-decoration: none;
		color:blue;
}	
		
#leftbar a:hover, #leftbar a:hover, #leftbar ul li a:hover, #leftbar ul li a:active, #leftbar ul li ul li a:hover, #leftbar ul li ul li a:active {
		text-decoration: underline;
}

/*---------   General styles for the left side area, and for paragraphs, and for the H2 level headings    ----------*/
#leftbar {
	border-right: 1px solid gray;
	font-size: .9em;
	margin-left: 5px;	
	margin-right: 20px;
	padding-right: 15px;
	margin-bottom: 20px;
   	width: 200px;
}

#leftbar p {
	margin-top:.5em;
	margin-bottom:.5em
}

/*---------   This is the default leftbar header, which is the gradient blue, with white text. If you change to a different color text, also change the background color to match.    -------*/
#leftbar h2 {
	background-color: #004499;
	font-size: 100%;
	padding: 4px;
	font-weight: bold;
	color: #ffffff;
	margin-top: 12px;
	margin-bottom: 10px;
}

/*---------   Lists in the left bar need lots of reformatting, especially horizontal and vertical spacing, and it has to extend down to 3 nested levels.   ----------*/
#leftbar ul, #leftbar ul li, #leftbar ul li ul li {
	list-style-type: none;
	color: #333333;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}

#leftbar ul {
	margin-bottom: 15px;
}
	
#leftbar ul li a:link {
	text-decoration: none;
}
	
#leftbar ul li ul li {
	list-style-type: disc;
	font-weight: normal;
	line-height: 1.2em;
	color: #333333;
	padding-top: 2px;
	margin-bottom: 1px;
	margin-left: 15px;		
}
	
#leftbar ul li ul li ul li {
	list-style-type: circle;
	margin-left: 10px;	
}
	
#leftbar ul li ul {
	margin-bottom: 0px;
}
	
#leftbar ul li ul li a:link, #leftbar ul li ul li  {
	text-decoration: none;
}