@charset "UTF-8";
/* CSS Document */


*{margin:0; padding:0;}

html{height:100%;}

html[data-useragent*='MSIE'] #app-container{display:none;}

#block{display:none;}

html[data-useragent*='MSIE'] #block{
	background:#eee;
	width:600px;
	min-height:10px;
	margin:0 auto;
	margin-top:20px;
	padding:15px;
	display:block;}
	
body{height:100%;}

/* USGS header modified to match current VID 28 May 2020 tworr */
#usgscolorband {
    background: #00264c;
	color:#fff;
    padding: 8px 15px 0px 8px;
	width: auto;
	height: 5.14em;
	min-height: 72px;
	/*background:#000;*/
	position:relative;
	z-index:20002;
}
#usgsbanner {
	width: auto;
	height: 72px;	
}
#usgsidentifier {
	/*background-color: black;
	width: 178px;*/
	height: 5.14em;
	float: left;
}
#usgsidentifier img {
	border: none;
}
	
/*#usgsccsabox {
	float: right;
	background-color: #000000;
	min-height: 72px;
}
#usgsccsa {
	font:  1em/.5em Verdana, Arial, Helvetica, sans-serif;
	height: 65px;
	width: 10.5em;
	padding-top:7px;
}
#usgsccsa a:link, #usgsccsa a:visited { 
	font: bold 1em/1.3em Verdana, Arial, Helvetica, sans-serif; 
	color: #ffffff; 
	margin-left: 4px; 
	text-decoration: none; 
} 
#usgsccsa a:hover { 
	font: bold 1em/1.3em Verdana, Arial, Helvetica, sans-serif; 
	color: #ffffff; 
	text-decoration: underline; 
	margin-left: 4px; 
} 
#usgsccsa a:active { 
	font: bold 1em/1.3em Verdana, Arial, Helvetica, sans-serif; 
	color: #ffffff; 
	margin-left: 4px; 
	text-decoration: none; 
}*/

#archiveWarning{
	background:red;
	text-align:center;
	padding:2px;
	}
	
#archiveWarning a{
	font-weight:bold;
	text-decoration:underline;
	color:#000;
	}
	
#archiveWarning a:hover{
	text-decoration:none;
	}

#watermark{
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 10000;
	-webkit-transform: translateZ(0);
}

#usgsfooter {
	background:#fff;
	padding-bottom:5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	clear: both;
	margin: 0;
}
#usgsfooterbar {
	background-color: #666666;
	padding: 4px;
	margin: 0;
}
#usgsfooterbar a:link, #usgsfooterbar a:visited {
	margin-right: 40px;
	color: #ffffff;
	text-decoration: none;
}
#usgsfooterbar a:hover {
	margin-right: 40px;
	color: #ffffff;
	text-decoration: underline;
}
#usgsfooterbar a:active {
	margin-right: 40px;
	color: #ffffff;
	text-decoration: none;
}
#usgsfootertext {
	padding: 4px;
	margin: 0;
}
#usgsfootertext img {
	border: none;
	float: right;
	margin-right: 5px;
}

#reservoir-pin{
	top:-375px;}
	
.map-legend {
	position: fixed;
	top: 15px;
	left: 15px;
	height: 55px;
	z-index: 10002;
	-webkit-transform: translateZ(0);
}


#map{
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background:rgb(250,250,250);
  border:10px solid rgb(255,255,255);
  box-shadow:1px 1px 5px rgba(0,0,0,.1);
  z-index: -999;
}

#clearDiv {
	position: fixed;
	top:0;bottom:0;left:0;right:0;
	height: 100%;
	z-index: -998;
}

#time-indicator {
	display: none; /* start hidden */
	padding: 5px;
	position: fixed;
	width: 400px;
	bottom: 20px;
	right: 50px;
	text-align: center;
	font-family: "Open Sans";
	font-size: 1.75em;
	background:rgb(80,146,204);
	color:#fff;
	-webkit-transform: translateZ(0);
}

#res-plot-container {
	display: none; /* start hidden */
	position: fixed;
	width: 650px;
	top: 50px;
	right: 100px;
	-webkit-transform: translateZ(0);
}

#res-plot{
	height: 100%;
	width: 100%;
	-webkit-transform: translateZ(0);
}

.res-plot-row {
	line-height: 400px;
}

.res-y-label {
	transform: translate(-12px, 75px) rotate(-90deg);
	display: table-caption;
	white-space: nowrap;
	font-family: "Open Sans";
	width: 12px;
	opacity:0;
}

.res-y-label p{
	}

.dash-container{
width:1px;
border-right:3px dotted #000;
height:350px;
position:absolute;
bottom:240px;
left:6px;
}

.dash{
	position:relative;
	width:1px;
	height:350px;}
	
.dash p{
	position:absolute;
	right:5px;}
	
.dash p#title{
	transform:rotate(-90deg);
	width:170px;
	top:150px;
	right:-40px;
	}

P#first{
	top:-23px;}
	
p#second{
	top:64.5px;}
	
p#third{
	top:152px;}
p#fourth{
	top:239.5px;}
p#last{
	top:327px;
	}

.res-x-label {
	text-align: center;
	font-family: "Open Sans";
}


svg {
  overflow: hidden;
}

#ag-prices {
	position: relative;
	top: -250px;
	margin: 20px;
}

#ag-prices svg {
  height: 400px;
  width: 550px;
}

#snowpack-container{top:-450px;}

#snowpack-plot-container{top:-350px;}

#snowpack-container,
#snowpack-plot-container{
	position: relative;
	-webkit-transform: translateZ(0);
}

#snowpack-info{
	top: 300px;
	-webkit-transform: translateZ(0);}

#snowpack-info-container{
	position: relative;
	top: -245px;
	-webkit-transform: translateZ(0);}
	
#usage-pie-container{
	position: relative;
	top: -245px;
	-webkit-transform: translateZ(0);}
	
.landsat-container {
	position: relative;
	margin-left: 35px;
	top: -320px;
	-webkit-transform: translateZ(0);
	z-index:10001;
}

.landsat-container p{
	color:#000;
	text-align:left;
	text-indent:2em;}
	
#streams-container{
	background:rgba(255,255,255,.8);
	width:560px;
	padding:15px;
	margin:0 auto;
	text-align:center;
	position: relative;
	-webkit-transform: translateZ(0);
	top:-390px;
	}
	
#streams-container h3{
	margin-top:5px;
	margin-bottom:-10px;
	color:rgb(80,146,204);}
	
#streams-container p{
	text-align:left;
	text-indent:2em;}
	
#streams-container img{
	margin-bottom:-10px;}
	
.sidebar{top:-390px;}
	
#feature1 .left {
	top: -200px;
}

#ag-info-container  {
	position: relative;
	top: -100px;
	-webkit-transform: translateZ(0);
}

.higher {
	position: relative;
	top: -100px;
	-webkit-transform: translateZ(0);
}
  
header,
#feature1,
#feature2,
#feature3,
#feature4,
#feature5,
#news,
#tahoe,
#drilling,
#parched,
#brink,
#toll,
#burning,
footer{	height:100%;
			padding:15px 15px;
			font-family:"Open Sans";
			position:relative;
	}
 
.spacer {
	height: 15em;
} 



.top{width:50%;
	margin:0 auto;
	padding:10px 10px 10px 10px;
	text-align:center;
	color:rgb(80,146,204);
	}
	
.top p{color:#000;}
	
.top h1{
	font-size:3em;
	margin-top:80px;
	margin-bottom:-5px;}

.top h1#bottom{color:#fff;}



.left,
.right{	-webkit-transform: translateZ(0);
		display: block;
		width:19%;
		margin: auto;
		position: absolute;
		padding:1% 1%;}
		
.left{left: 35px; right: auto;
		background:rgba(255,255,255,.8);}

.right{left: auto; right: 35px;
		background:rgba(80,146,204,.6);}
		
.left h2{color:rgb(80,146,204);
		margin-bottom:5px;}
		
.right h2{color:#fff;
		margin-bottom:5px;}
		
#google-pin{
	top:320px;
	height:720px;
}
	
#google{
	background:rgba(255,255,255,.8);
	width:725px;
	height:330px;
	margin:0 auto;
	-webkit-transform: translateZ(0);
	}
			
.bottom{width:60%;
		margin: auto;
  		position: absolute;
  		top: auto; left: 0; bottom: 150px; right: 0;
		
		}
		
.bottom h2{color:#000;
			display: inline:block;
			margin-bottom:5px;
			padding-top: 10px;
			clear: both;
			}
			
h1#bottom{
	color:rgb(80,146,204);
	background:rgba(255,255,255,.7);
	padding:10px;
	text-align:center;
}
			
.bottom p{
			margin-right:10px;
			clear: both;
			margin: .25em;
		}
		
.boxy{
	background:rgba(255,255,255,.8);
	min-height:72px;
	padding:0 10px 10px 10px;}
	
#graphinfo{
	background:rgba(255,255,255,.8);
	width:100%;
	min-height:50px;
	margin-top:20px;
	padding-bottom:10px;}
	
#graphinfo p{padding:10px 10px 0px 10px;}
	
#open{
	padding-top:10px;
	margin-top:20px;}
	
a{
	color:rgb(80,146,204);
	text-decoration:none;
}

a:hover,
a.white:hover{
	color:#E86E00;}

a.white{color:rgb(250,250,250);}
		
#start-trigger{
	background:rgba(255,255,255,.8);
	margin-top:60px;}
	
#start-trigger h1{
	margin-top:10px;}
	
#instructions{
	background:rgba(255,255,255,.8);
	text-align:center;
	margin:0 auto;
	margin-top:20px;
	padding:10px;
	width:40%;}
	
#drought{
	background:rgba(255,255,255,.7);
	width:30%;
	padding:0;}
	
.usage-pie{
	position: absolute;
	background:rgba(255,255,255,.8);
	width:490px;
	min-height:510px;
	padding:5px 5px 10px 5px;
	right: 35px;
	text-align:center;
	-webkit-transform: translateZ(0);}

.usage-landsat{
	background:rgba(255,255,255,.8);
	width:830px;
	min-height:434px;
	padding:15px 15px 15px 15px;
	text-align:center;
	color:rgb(80,146,204);
	-webkit-transform: translateZ(0);}
	
.usage-landsat img{margin-bottom:-5px;}
	
.usage-pie h3,
.snowpack-plot h3{
	color:rgb(80,146,204);
	margin:10px 0 5px 0;}
	
.snowpack-plot{
	position: absolute;
	text-align:center;
	background:#fff;
	width:610px;
	right: 35px;
	padding:5px 5px 10px 5px;
	-webkit-transform: translateZ(0);
	margin-top:80px;}

#graphTitle{
	background:rgba(255,255,255,.9);
	width:570px;
	padding:5px;
	text-align:center;
	-webkit-transform: translateZ(0);}
	
#graphTitle h4{
	color:rgb(80,146,204);
	font-size:.9em;}

.getinfo{
	border:1px solid rgb(80,146,204);
	width:30%;
	height:24px;
	text-align:center;
	font-size:1.2em;
	padding:8px 0;
	margin:0 auto;
	border-radius:5px;
	color:rgb(80,146,204);
	cursor:pointer;
	}
	
.getinfo a{
	text-decoration:none;
	font-weight:normal;}
	
.getinfo:hover{
	background:rgb(80,146,204);
	color:#fff;}
			
footer{padding-top:5%;
		height:95%;}

/* //// */
#links-anchor {
	display: none;
	position: fixed;
	right: 5px;
	top: 40%;
	z-index: 1000;
}

#links-anchor table tr {
	margin-top: 5px;
}

.links-anchor {
	margin-top: 3px;
	margin-bottom: 3px;
}
.links-anchor {
	transition-duration: 0.5s; 
}
.links-anchor:hover {
	border-color: #FFFFFF;
}

#links-anchor a {
	text-decoration: none;
}


.links-anchor-link-filled:hover {
	cursor: default;
}

.links-anchor-link-empty:hover {
	cursor: pointer;
}

.links-anchor-link-empty {
	border: 3px solid rgba(80,146,204,1);
	height: 20px;
	width: 20px;
	border-radius: 15px;
	-webkit-transform: translateZ(0);
}

.links-anchor-link-filled {
	border: 3px solid rgba(80,146,204,1);
	background-color: rgba(80,146,204,.6);
	height: 20px;
	width: 20px;
	border-radius: 15px;
	-webkit-transform: translateZ(0);
}

.reservoir {
  stroke: #000;
}

/*New USGS VID for footer 28 May 2020 tworr*/

.menu.nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

div.footer-doi-first {
    padding-bottom: 2.5em;
}
div.footer-doi-second {
    clear: both;
    padding-top: 0.15em;
    border-top: 1px solid #fff;
}

.nav:before, .nav:after {
   content: none;
}
footer.footer {
	background: #00264c;
    padding: 0.2em 0 0 1em;
	position: relative;
	width: auto;
	border-top: 1px solid #E5E5E5; 
    overflow: auto;
    z-index: 22000;
}

footer.footer .footer-doi {
	padding-right: 0;
	padding-left: 0;
}

footer.footer .footer-doi ul.menu li a {
    padding: 5px 0px;
    color: #ffffff;
    float: left;
    font-size: 12px;
}

footer.footer .footer-doi ul.menu li:first-of-type {
    padding-left: 0px;
}

footer.footer .footer-doi ul.menu li {
    float: left;
    padding-right: 2px;
    padding-left: 5px;
}

footer.footer .footer-doi ul.menu li:after {
    content: "|";
    color: #ffffff;
    float: left;
    padding-top: 5px;
    padding-left: 7px;
    font-size: 12px;
}

footer.footer .footer-doi ul.menu li:last-child:after {
    content: "";
}