﻿html, body, #map {
	margin: 0;
	width: 100%;
	height: 100%;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background:white;
	overflow: hidden;
}
a { 
outline: none; 
} 
img {border : 0;}

.modal-profile h2 {
	font-size: 20px;
		
}
.modal-profile {
	display: none;
    width: 840px;
    height: 405px;
	padding: 25px;
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	z-index: 500000;
	background-image: url('../images/splash-background-transparent75.png') ;
	background-repeat:no-repeat;
	
}
.modal-lightsout {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 25;
	border: 1px solid white; 
    background:#000;
	
}
a.modal-close-profile {
	position: absolute;
	top: -15px;
	right: -15px;
}

.splashContent{
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding:10px;
	height:315px; 
	color:white; 
	font-family: 'Open Sans', sans-serif; 
	font-size:20px; 
	font-weight:bold;
	background: rgba(0,0,0,.3	);
}

#tools{
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding:10px;
	height:562px; 
	color:white; 
	font-family: 'Open Sans', sans-serif; 
	font-size:20px; 
	font-weight:bold;
	background: rgba(0,0,0,.5);
}


#topdiv{
	color:white; 
	font-family: 'Open Sans', sans-serif; 
	font-size:20px; 
	font-weight:bold;
	height:80px;
	margin-left:670px;
	margin-top:-10px;
}
p {
    font-family: sans-serif;
	font-size:18px;
}

	
  div.botright{
      
    
    width:350px;

  }
  

.raindrop{

font-weight:bold;
filter: alpha(opacity=100);
opacity: 1.0	;
padding-right:20px;
padding-left:20px;
color:black;
height:255px;
width:166px;
text-align:center;
background-position:center; 

}

#step1{
background-image: url('../images/raindrop1transparent.png') ;
background-repeat:no-repeat;
}
#step2{
background-image: url('../images/raindrop2transparent.png') ;
background-repeat:no-repeat;
}
#step3{
background-image: url('../images/raindrop3transparent.png') ;
background-repeat:no-repeat;
}
#step4{


}
.steptext{
margin-top:110px;
}
#legend{
top:4px;
left:84px;
position:absolute;
z-index: 99999;
}

#precipChange{
display: none;
}
#improvedWater{
display: none;
}
#meanRainfall{
display: none;
}

.modal-getAddress {
display: none;
top:4px;
left:84px;
position:absolute;
z-index: 99999;
	display: none;
    width: 530px;
    height: 160px;
	color:white; 
	font-family: 'Open Sans', sans-serif; 
	font-size:20px; 
	font-weight:bold;
	background: rgba(0,0,0,.5);
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	z-index: 500000;
	background-image: url('../images/searchbackground2.png') ;
	background-repeat:no-repeat;
}

.modal-getAddress a{
        color: rgba(255,255,255,.7);
        -webkit-transition: color .5s ease-in;  
        -moz-transition: color .5s ease-in;  
        -o-transition: color .5s ease-in;  
        transition: color .5s ease-in;  
}

.modal-getAddress a:hover{
 color: rgba(255,255,255,1);
}


#steps{
padding:10px;

}


input.rounded {
	border: 1px solid #ccc;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	font-size: 24px;
	padding: 4px 7px;
	outline: 0;
	-webkit-appearance: none;
	width:350px;
}
input.rounded:focus {
	border-color: #339933;
}

.button {
text-decoration: none;
color: white;

font-family: 'Open Sans', sans-serif; 
padding: 6px 35px 5px 35px;
border: 1px solid rgb(120,120,120);
background: rgb(0,153,255);
text-shadow: 0px 1px 0px rgb(67,137,167);
Border-radius: 5px;

}

.button:hover {
 
border: 1px solid rgb(130,130,130);
 
/*For browers that don't support gradients*/
background: rgb(105,188,220);
 
/*For Google Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#82C7E1), to(#5AB6D8));
 
/*For Firefox*/
background: -moz-linear-gradient(top, #82C7E1, #5AB6D8);
}
 
.button:active {
background: rgb(54,165,207);
 
/*For Google Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#5AB6D8), to(#82C7E1));
 
/*For Firefox*/
background: -moz-linear-gradient(top, #5AB6D8, #82C7E1);
}
#digitizeTime{
display: none;
top:168px;
left:84px;
position:absolute;
z-index: 99999;
height: 180px;
background-image: url('../images/pencil.png') ;
	background-repeat:no-repeat;
}
#clickStartOver{
width:25px;
}
#clickFinished{
width:125px;
}

.modal-showResults {
	display: none;
    width: 840px;
    height: 405px;
	padding: 25px;
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color:white;
	z-index: 500000;
	background-image: url('../images/splash-background-transparent75.png') ;
	background-repeat:no-repeat;
	
}

.modal-showInstructions {
	display: none;
    
	padding: 25px;
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color:white;
	z-index: 500000;
	background: rgba(0,0,0,.5);
	
}

a.modal-showResults-close-profile{
	position: absolute;
	top: -15px;
	right: -15px;
}
#resultsDescription{
margin-top:75px;
	border: 1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding:10px;
	height:310px; 
	color:white; 
	font-family: 'Open Sans', sans-serif; 
	font-size:20px; 
	font-weight:bold;
	background: rgba(0,0,0,.5);
}


#resultsDescription a{
        color: rgba(255,255,255,.7);
        -webkit-transition: color .5s ease-in;  
        -moz-transition: color .5s ease-in;  
        -o-transition: color .5s ease-in;  
        transition: color .5s ease-in;  
}

#resultsDescription a:hover{
 color: rgba(255,255,255,1);
}
#graph{

	

	
}