@charset "utf-8";





a { text-decoration: none; }


a:link { color: blue; text-decoration: none; }


a:visited { color: blue; }


a:hover { text-decoration: underline; }


a:active { color: red; }


a img {border: none; }





.small { line-height:150%; text-align: center; }


p.lighter { font-weight:  lighter; }


.sidebar { text-align: center; font-weight: bold; }


.sidebar a { text-align: center; font-style: normal; font-weight: normal;  }


.maptext { font-family: Arial, sans-serif; font-size: 0.9em; text-align: left; }


.left { text-align: left; float: left; }


.full { text-align: justify; }


.lakenames { font-family: Verdana, sans-serif; font-size: 1.05em; text-indent: 70px; }


.lakenames a { color: black; }


.tab { text-indent: 40px; line-height: 75%; }


.disclaimer { font-size: 0.8em; line-height: 95%; font-family: Calibri, sans-serif; color: #000000; font-style: italic; }





.opacity70 a:hover img {


  filter: alpha(opacity=70);


	-moz-opacity:0.7;


	-khtml-opacity: 0.7;


	opacity: 0.7;


}


.opacity0 a:hover img {


  filter: alpha(opacity=0.0);O


	-moz-opacity:0.0;


	-khtml-opacity: 0.0;


	opacity: 0.0;


}


.divComplete { height: 830px; }


.divAuto { height: auto; }





.backgC {



	background-color:#D6D6D6;



}







input.btnow{



	color: #3B529E;



	/**/



	background-color: #E3E3E3;



	border: 1px solid #3B529E;



	margin-bottom:5px;



	font-size:0.85em;



}



input.btnfor{


	color:#3B529E;


	background-color: #E3E3E3;


	border: 1px solid #3B529E;


	margin-bottom:5px;


	font-size:0.85em;


}





h1 {



	font-size: 3.5em;

	font-weight: italic;

	color:#f5de38;
	
	font-family: New Century Schoolbook, TeX Gyre Schola, serif;
	
}



h2 {



	font-family: New Century Schoolbook, TeX Gyre Schola, serif;



	font-size: 2.0em;



	font-weight: italic;



	color:#FFFFFF;







}



h3 { font-family: Verdana, sans-serif; font-size: 1.0em; font-style: normal;  font-weight: bold; }


h4 { font-family: Verdana, sans-serif; font-size: 1.4em;   margin: .65em 0;  }


h5 { font-family: Verdana, sans-serif; font-size: 1.2em; margin: 0em; padding: 0.2em; text-align: left;   background-color: #EFEFEF; }


h6 { font-family: Georgia, serif; font-size: 1.2em;  font-style: italic; text-align: left;  background-color: #EFEFEF; }


h7 { font-family: Georgia, serif; font-size: 1.5em; margin: 0 .85em; font-style: italic; text-align: center;   background-color: #EFEFEF;}





/* padding is the space inside the div box and margin is the space outside the div box */





body  {


	padding: 0; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */


	background: #FFFFFF;


  font-family: 100% Georgia, serif; color: #000000;


  text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */


}





#CurrT_label{


   font-size:16px;


   font-family:Verdana, Geneva, sans-serif;


   font-style:italic;


   background-color:#FFF;


   padding-left:5px;


   padding-right:5px;	


	


}





#container {

	position: relative;

	padding: 0;

	margin: auto;

	width: 1080px;

	height: auto;

	border: 0px;

	text-align: left;



} 



#header  { width: 1080px; height: 100%; padding: 0px; margin: 0 auto; }



#header1 { float: left; width: 140px; height: 170px;  padding: 0; margin: auto; }


#header2 { position: relative; width: 940px; height: 170px; padding: 0px; margin: 0px; overflow:hidden;



  background-image: url(images/headerpic3.jpg); background-position: center center; background-repeat: no-repeat; }



#header3 { float: left; width: 140px; height: 170px;  padding: 0; margin: auto; align: center; }







/* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs.*/


#header h1  {  margin: 0; padding: 0 35px;	font-family:arizonia; }


#header h2  {	 margin: 0; padding: 0 25px 25px 0; }


#currentConditions h3, #sponsors h3  {  margin: 0; padding: 1px;  }





#profile h4 {  margin: 0; padding: 20px 0 0 10px; }





/* MAIN NAVIGATION MENU */


#main-nav {


	position: absolute;


	padding: 0px;


	margin: auto;


	left: -2px;


	top: 142px;


	width: 415px;


	height: 39px;


}


#main-nav ul { margin: 0; width: 100%; }


#main-nav ul li { display: inline; height: 36px; }





#main-nav ul li a {


  float: left; padding: 2px 0.6em; margin: 2px 2px;


  font-family: Verdana, sans-serif; color: #000000; font-size: 0.9em; font-weight: bold; text-decoration: none;


  /*background-color: #AEB2AA; */


}


#main-nav ul li a:hover {


	background-color: #FFF;


	color: #FFF;


}


/* END MAIN NAVIGATION MENU */


#originalMap { margin: 5px; position: absolute; top: 40px; left: 630px; }


#container2 { width: 1080px; height:auto; padding: 0; margins: 0;}







/* LEFT SIDE NAVIGATION MENU    */



#sidebar1 {


	float: left;  padding: 0px 4px 0px 4px; margin: 0px;


  width: 132px;  height: auto; /*background: #AEB2AA; */


  font-family: Verdana, sans-serif; font-size: 0.8em; font-weight: normal;


}





#side-nav1, #side-nav2, #side-nav3, #side-nav4,#side-nav8, #side-nav5, #side-nav6, #side-nav7 {


	margin: 0px;


	float: left;


	padding: 0px;


	display: block;


	height: auto;


	width: 100%;


}



#side-nav1 a, #side-nav2 a, #side-nav3 a, #side-nav4 a, #side-nav8 a, #side-nav5 a, #side-nav6 a, #side-nav7 a {


  float: left; padding: 5px; margin: 1px;


  height: auto; width: 120px;


  color: #FFFFFF; text-decoration: none; text-align: center;


}




#side-nav1 a { background-color: #336699; }

#side-nav2 a { background-color: #5E747F; }


#side-nav3 a { background-color: #3A4958; }


#side-nav4 a { background-color: #7C8FA3; }


#side-nav8 a {
	background-color: #336699;
}


#side-nav5 a { background-color: #5E5459; }


#side-nav6 a { background-color: #576355; }


#side-nav7 a { background-color: #6C7174; }





#side-nav1 a:hover, #side-nav2 a:hover, #side-nav3 a:hover, #side-nav4 a:hover, #side-nav8 a:hover, #side-nav5 a:hover, #side-nav6 a:hover, #side-nav7 a:hover {


	background-color: #99F


}


/*   END LEFT SIDE NAVIGATION MENU  */





/* sidebar2 contains currentConditions/sidebar3 and sponsors divs */


#sidebar2 {


   float:right;padding:0px 4px 0px 4px; margin: 0px;


	width: 132px; height: auto;


}


/* currentConditions is used on map pages ONLY */


#currentConditions {


  padding: 0 0px; margin: 0px 0px 0px 0px;


  width: 132px; height: auto; color: #000000; text-align: center; background-color: #FFFFFF;


  


}








/* SIDEBAR3 (lake information) is used on all other pages  */


#sidebar3 {


  float: left; padding: 10px 2px; margin: 2px 5px 5px 1px;


  width: 125px; height: auto; font-size: 0.7em;


  color: #000000; text-align: center; background-color: #FFFFFF; 


}


/* sidebar4 - level animations pages */


#sidebar4 {


  float: left; padding: 10px 2px; margin: 2px 5px 5px 1px;


  width: 125px; height: auto;


  color: #000000; text-align: center; background-color: #FFFFFF; 


}


#sponsors {


  padding: 0px 0px 0px 0px; margin: 5px 0px 0px 0px;


  width: 132px; height: auto;


  color: #000000; text-align: center; background-color: #FFFFFF;


}


#mainContent { 



  float: left; margin: 0px 2px 0px 2px; padding: 0px;



  width: 796px; height: inherit;



	text-align: left; background-color:#FFFFFF;



} 



#mainContent2 {



	float: left;



	padding: 0px 2px 0px 2px;



	margin: 0px;



	width: 926px;



	height: inherit;



	text-align: left;







} 

#mobileContent {



	float: left;



	padding: 0px 2px 0px 2px;



	margin: 0px;



	width: 100%;



	height: inherit;



	text-align: left;







} 






#mapTitle {



	position: absolute;



	top: 0px;



	left: 40px;



	padding: 5px 0.25em;



	margin: 0;



	width: auto;



	height: auto;



	background-color: #FFFFFF;



	font-family: Tahoma, Arial, sans-serif;



	color: #2B388F;



	font-size: 1.1em;



	font-weight: bold;



	font-style: italic;



	text-align: left;



}



/* subMainContent used in model.html only */


#subMainContent {


  position:relative; padding: 0px; margin: 4px auto;


  width: 790px; height: 825px;


  text-align: left; background-color: #FFFFFF;


}


/*subMainContent used in links.html, about.html, profile.html (and all profile pages) */


#subMainContent2 {


  position: relative; padding: 3px 10px; margin: 4px auto;


  width: 780px; 


  text-align: left; background-color: #FFFFFF;


}


/* subMainContent3 used in individual usgs,etc site pages */


#subMainContent3 {


  position:relative; padding: 3px 5px 3px 5px; margin: 4px auto;


  width: 790px; height: auto;


  text-align: left; background-color: #FFFFFF;


}


/* subMainContent4 used in all base maps except index.html */


#subMainContent4 {


  position:relative; padding: 5px; margin: 4px auto;


  width: 790px; height: auto;


  text-align: left; background-color: #FFFFFF;


}


/* subMainContent5 used in weather.html; this page doesn't use #mainContent & spans across center & right sidebar */


#subMainContent5 {


  float: right; padding: 2px; margin: 4px 2px;


  width: 930px; height: auto;


  background-color: #FFFFFF;


}


/* subMainContent6 used in level animations pages */


#subMainContent6 {


  position:relative; padding: 0px; margin: 4px auto;


  width: 800px; height: auto;


  text-align: left; background-color: #FFFFFF;


}


#subMainContent7 {


  position:relative; padding: 0px; margin: 0px auto;


  width: 1080px; height: auto;


  text-align: left; background-color: #FFFFFF;


}


/*subMainContent8 is used on the PLOT pages for the gage descriptions*/


#subMainContent8 {


  float: left; padding: 3px 5px 3px 5px; margin: 4px;


  width: 400px; height: 100%; font-family: Verdana, serif; font-size: 0.8em;


  text-align: left; background-color: #FFFFFF;


}


/*subMainContent9 is used on the PLOT pages for the Google Map iframe*/


#subMainContent9 {


  padding: 3px 5px 3px 5px; margin: 4px;


  width: 350px; height: 300px; border: 1px;


  text-align: left; background-color: #FFFFFF;


  font-size: 0.5em;


}


/*subMainContent10 is used on Interactive Map page*/


#subMainContent10{


  float: left; padding: 2px; margin: 4px 2px;


  width: 930px; height: 725px;


  background-color: #FFFFFF;


}











/*   ----WATERWAYS BASE MAP for Surface Water, Rainfall, & Beach Maps----  */


#usgsMap { 


	background-image: url(images/base_map2.jpg);background-color:#FFFFFF; background-position: center; background-repeat: no-repeat;


  position: relative; padding: 0px;padding-top:0px; margin: 0px 0px 0px 0px;


  width: 796px; height: 750px;


} 





#usgsIndexData {


  position: absolute; top: 0px; left: 0px; padding: 0; margin: 0;


  width: 796px; height: auto;


 


}





/*   SURFACE WATER MAP Symbols   */


#Symbol { position: absolute; z-index: 1; }





#surfaceData         {position: inherit; top: 0px; left: 0px; z-index: 0; }











    { background-image: url(images/symbol/circle_magentaover.png); background-repeat: no-repeat; position: absolute; font-weight: bold; }











#usgsTable {


  padding: 15px; margin: 0;


  width: 760px; height: auto;


  background-color: #FFFFFF; 


}





#legend {


	position: absolute;


	top: 329px;


	left: 576px;


	padding: 15px;


	font-family: Tahoma, Arial, sans-serif;


	font-size: 0.8em;


	text-align: left;


	background-color: #FFFFFF;


	border: solid 1px #000000;


	width: 180px;


  


}


#interactiveMap {


	margin: 5px;


	position: absolute;


	top: -3px;


	left: 638px;


	z-index: 1;


}








#map_canvas { position: relative; float: left; border: 3px solid white; position: absolute;  }








   


#footer {

	width: 100%;

	font-size: 1.0em;

	text-align: left; /*	color: #5E6657; this was the original color */;
	
	color: #FFF; /*border-color:#999;*/;

	padding: 20px 0px 20px 0px;

	margin: 0px 0px 0px 0px;

	background-color: #99B3CC;

} 



#footer p {



	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */



	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */



}



.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */



	clear:both;



    height:0;



    font-size: 1px;



    line-height: 0px;



}



.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#E51114;
  font-size:16px;
  line-height:24px;
  border-radius: 0px;
	margin:0px;
	padding:0px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
		margin:0px;
	padding:0px;
  }
.custom-popup .leaflet-popup-tip-container {
  /*width:30px;*/
  height:400px;
	margin:0px;
	padding:0px;
  }
.custom-popup .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
		margin:0px;
	padding:0px;
  }