/* EMBEDDED FONT FAMLIES */

@font-face {
    font-family: 'Average-Regular';
    src: url('fonts/average-regular-webfont.eot');
    src: url('fonts/average-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/average-regular-webfont.ttf') format('truetype'),
         url('fonts/average-regular-webfont.svg#averageregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* STANDARD LAYOUT */
body, html{
	font-family: Arial, Helvetica, sans-serif;
}

table{
	border-collapse: separate;
	border-spacing: 2px;
}

b, strong{
	font-weight: bold;
}

i, em{
	font-style: italic;
}

ol, ul{
	padding: .2em 0 0 1.5em;
	list-style-position: inside;
}

ol{
	list-style-type: decimal;
}

ul{
	list-style-type: disc;
}

li{
	padding-top: .8em;
}

.loader{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
}

.loader80{
	margin: -40px 0 0 -40px;
}

#legend-pane, .legend, .mobile-popup-content, .mobile-close, #intro-toggle, #hide-intro, #mobile-header, #mobile-nav, .maximize{
	display: none;
}

#application-window{
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.region-right{
	position: absolute;
	right: 0;
}

.region-left, .region-center, .region-top, .region-bottom{
	position: absolute;
	left: 0;
}

.region-bottom{
	bottom: 0;
}

#banner{
	background-color: #444;
	height: 115px;
	width: 100%;
	z-index: 100;
	overflow: hidden;
}

#branding-wrapper{
	height: 100%;
	width: 200px;
	float:right;
	text-align:right;
}

#social{
	margin:25px 25px 20px 0;
}

#smLink{
	color:#fff;
	font-weight:bold;
	text-decoration: none;
	font-size:10px;
	outline:none;
}

#logo{
	margin: 0 0 0 0;
	border:none;
	outline:none;
}

#logoImg{
	border:none;
	outline:none;
}

#title{
	margin: 25px 25px 10px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

#subtitle{
	margin: 0 25px;
	color: #fff;
	font-family: Georgia, serif;
	font-size: 16px;
}

#mobile-header{
	height: 18px;
	padding: 14px 14px 14px 50px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mobile-nav{
	background-color: #888;
	color: #dadada;
	height: 14px;
	font-size: 14px;
	font-weight: bold;
	padding: .5em 0;
	text-align: center;
}

#mobile-nav span{
	cursor: pointer;
}

.left-nav, .right-nav{
	position: absolute;
}

.left-nav{
	left: .5em;
}

.right-nav{
	right: .5em;
}

#legend-wrapper{
	position: absolute;
	width: 300px;
	top: 0;
	right: 25px;
	z-index: 3;
}

#legend-toggle{
	background-color: #888;
	color: #fff;
	padding: 8px 15px;
	cursor: pointer;
}

#legend-pane{
	background-color: #fff;
	overflow: hidden;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	border-left: 2px solid #888;
}

.legend{
	padding: 15px;
	line-height: 1.0; 
	font-size:14px;
	max-height: 500px;
	overflow: auto;
}

.legend:first-child{
	display: block;
}

.esriTimeSlider{
	display: none;
}

.esriTimeSlider:first-child{
	display: block;
}

/* Popup modifications */

.esriViewPopup .gallery{
	height: auto;
	max-height: 150px;
}

@media all and (min-width: 781px) {
	#header-text{
		display: block;
	}

	#title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media all and (max-width: 780px) {
	#banner{
		height: auto;
	}

	#header-text{
		display: none;
		border-bottom: 1px #999 solid;
	}

	#hide-intro{
		display: block;
		text-align: center;
		padding: 15px;
		font-size: 12px;
		font-weight: bold;
		color: #fff;
		cursor: pointer;
	}

	#mobile-header{
		display: block;
	}

	#mobile-nav{
		display: block;
	}

	#branding-wrapper{
		display: none;
	}

	.mobile-close{
		position: absolute;
		background-color: #444;
		color: #ccc;
		right: -11px;
		top: -15px;
		width: 17px;
		text-align: center;
		padding: 5px;
		-webkit-border-radius: 17px;
		border-radius: 17px;
		-webkit-box-shadow: 0px 0px 8px 0px #444;
		box-shadow: 0px 0px 8px 0px #444;
		z-index: 10;
		cursor: pointer;
	}

	#legend-wrapper, #mobile-popup{
		position: absolute;
		width: 90%;
		top: auto;
		bottom: 45px;
		right: 5%;

	}

	#legend-toggle{
		display: none;
	}

	#mobile-popup{
		background-color: #fff;
	}

	#legend-pane, #mobile-popup{
		border: none;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0px 0px 8px 0px #444;
		box-shadow: 0px 0px 8px 0px #444;
	}

	.mobile-popup-content{
		overflow: hidden;
	}

	.legend{
		max-height: 150px;
	}
}

	  /* INTRO PANEL*/
	  
	  #modalBackground {
	  position:absolute;
	  height:100%;
	  width:100%;
	  top:0;
	  background-color:#3e3e3e;
	  z-index:100;
	  }
	  
	  #intro{
	  display:  block;
	  position:absolute;
	  width:780px;
	  height:350px;
	  top:35%;
	  left:25%;
	  background-color:#dadada;
  	  z-index:101;    
	  }

	  #introHeader{
	  width:100%;
	  height:50px;
	  line-height:1.2;
	  background-color:#848484;
	  color:#fff;
	  font-family:Georgia, "Times New Roman", Times, serif;
      font-size:24px;
      text-align:center;
      padding:15px 0px 15px 0px;
      white-space: nowrap;  
      overflow: hidden;  
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
	  }
	  
	  #introText{
	  max-height:240px;
	  overflow:auto;
	  padding-top:14px;
	  padding-right:25px;

	  
	  }
	  
	  #introContent{
	  width:755px;
	  height:260px;
	  overflow:hidden;
	  line-height:1.4;
	  margin:80px 0px 15px 25px;
	  font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      text-align:justify;	  
	  }
	  
	  #textPanel{

	  width:350px;
	  height:250px;
	  line-height:1.4;
	  font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      text-align:justify;
      padding:10px 0px 10px 0px;
	  float:left;
	  }
	  
	  #continue{
	  display:none;
	  margin-left:115px;
	  }

	  #introImg{
	  float:right;	
	  margin-top:115px;
	  margin-right:20px;

	  }	  
	  

 		  
		  /* clean gray
	  *******************************************************************************/
	  .clean-gray {
      background-color: #eeeeee;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
      /* Saf4+, Chrome */
  	  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
      background-image: linear-gradient(top, #eeeeee, #cccccc);
      border: 1px solid #ccc;
      border-bottom: 1px solid #bbb;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      color: #333;
      font: bold 12px Verdana;
      line-height: 1;
      padding: 8px 8px;
      text-align: center;
      text-shadow: 0 1px 0 #eee;
      width: 160px;
	  }

	  .clean-gray:hover {
      background-color: #dddddd;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
      /* Saf4+, Chrome */
      background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
      background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
      background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
      background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
      background-image: linear-gradient(top, #dddddd, #bbbbbb);
      border: 1px solid #bbb;
      border-bottom: 1px solid #999;
      cursor: pointer;
      text-shadow: 0 1px 0 #ddd;
	  }

	  .clean-gray:active {
      border: 1px solid #aaa;
      border-bottom: 1px solid #888;
      -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
      -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
      -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
      -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
      box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
	  }
	        
	  g,v{
	  cursor:pointer;
	  }
	  
/*Scalebar */

.scalebar_bottom-left{
 left: 25px; bottom: 25px;
}

.esriScalebar{
 z-index:30;
 position: absolute;
 width: 0px; 
 height:20px;
}

.esriScalebarRuler{
 overflow:hidden;
 position: relative;
 width: 100%;
 height:6px;
 background-color: White;
 border:1px solid #444444;
}

.esriScalebarRulerBlock{
 overflow:hidden;
 position: absolute;
 height:50%;
 background-color: #444444;
 
}
.upper_firstpiece{
      top:0%;
      left: 0%;
      width: 25%;
}
.upper_secondpiece{
     top:0%;
     left: 50%;
     width: 25%;
}
.lower_firstpiece{
     top:50%;
     left: 25%;
     width: 25%;
}
    
.lower_secondpiece{
      top:50%;
      left:75%;
      width: 30%;
}
    
.esriScalebarLine{
      overflow:hidden;
      position: relative;
      width: 100%; 
      height:6px;
      border:2px solid #444444;
}
   
.esriScalebarEnglishLine{
      border-bottom-style:none;
      top: -2px;
}
.esriScaleLabelDiv{
      position: relative;
      top: -5px;
      width: 100%;
      padding: 2px;
}
    
.scaleLabelDiv{
 position: relative; 
 width: 100%;
 height:5px;
 
}
.esriScalebarLabel{
 font-size:10px;
 position: absolute;
 width:10%;
 text-align:center;
 color:white;
 font:Georgia;
 font-weight:bolder;
 height:5px;
 top: -1px;
}

.esriScalebarLineLabel{
 position: relative;
}
.esriScalebarFirstNumber{
 left:45%;
}
.esriScalebarSecondNumber{
 left:95%;
}