html, body {
	height: 99%;
	width: 99%;
	padding: 0;
}

body {
	margin: 1% 1%;
	background-color: #FFF;
	color: #333;
	font-size: 14px;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: #369;
}

#header {
	height: 80px;
	background: #3e3e3e;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin: 0;
	z-index: 101;
	overflow: hidden;
}
#headerRight {
	float: right;
	display: inline-block;
	height: 100%;
	width: 50%
}
#title {
	color: #fff;
	font-size: 30px;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: left;
	font-weight: 500;
	padding-top: 10px;
	padding-left: 15px;
}

#subtitle {
	font-size: 14px;
	color: #f1f1f1;
	padding-left: 15px;
}
#titleSection {
	display: inline-block;
}
div.social {
	display: inline;
	font-size: 12px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	float: right;
	padding-right: 12px;
	margin-top: -28px;
}

/*slider customizations*/
.esriSimpleSliderVertical .esriSimpleSliderIncrementButton ,.esriSimpleSliderVertical .esriSimpleSliderDecrementButton  {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0.25em #BBBBBB;
}

.esriSimpleSlider {
  border: none !important;
  background-color:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
}
.esriSimpleSlider div{
  margin-top:10px;
  margin-bottom:10px;
}
.msLink {
	font-size: 12px;
}

a.msLink:link {
	color: #fff;
	text-decoration: none;
}

a.msLink:hover {
	color: #fff;
	text-decoration: underline;
}

a.msLink:visited {
	color: #fff;
}

#rightPane {
	background-color: #FFF;
	color: #3f3f3f;
	width: 20%;
}

#leftPane {
	background-color: #e3e9ee;
	width: 20%;
	margin: 0;
	padding: 0;
}

#leftPaneContent {
	background-color: #dadada;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

#description {
	padding: 10px;
	padding-top: 0px;
	max-height: 350px;
	overflow: auto;
}

#leftPaneBody {
	margin: 0;
}

#leftPaneBody .panel_content {
	padding: 10px;
}

#tabLink {
	text-decoration: none;
	color: #3f3f3f;
}

#legendCon {
	position: absolute;
	top: -1px;
	left: 70px;
	z-index: 100;
}
.mapTitle {
	padding: 10px 5px 0px 5px;
}

#topMapTitle {
	background-color: #848484;
	width: 400px;
	height: 28px;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
	/*	margin-bottom: 5px;*/
}

.legendDiv {
	display: none;
	background-color: #848484;
	width: 400px;
	max-height: 550px;
	padding: 5px;
	overflow: auto;
	margin: 0;
	/*margin-bottom: 5px;*/
}
.toggleTitle {
	text-transform: uppercase;
	display: inline;
	color: #fff;
	 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
.mapInfoToggle {
	background-color: #848484;
	border: 1px solid;
	border-right-color: #ccc !important;
	padding-top: 0px;
	padding: 5px;
	cursor: pointer;
	display: inline-block;
	margin: 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	 margin-right: -4px; /* inline-block hack */
	vertical-align:middle;
}

#legendCon2 {
	position: absolute;
	top: -1px;
	right: 70px;
	z-index: 100;
}

#bottomMapTitle {
	background-color: #848484;
	width: 400px;
	height: 28px;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	margin: 0;
	/*margin-bottom: 5px;*/
}
/*
 #legendDiv2 {
 display: none;
 background-color: #848484;
 width: 400px;
 max-height: 550px;
 padding: 5px;
 overflow: auto;
 }

 #legendToggle2 {
 background-color: #848484;
 width: 140px;
 height: 25px;
 padding: 5px;
 cursor: pointer;
 display: inline-block;
 }*/
.mapDescriptionDiv {
	display: none;
	background-color: #848484;
	width: 400px;
	max-height: 550px;
	padding: 5px;
	padding-bottom: 15px;
	overflow: auto;
	margin: 0;
	/*margin-bottom: 5px;*/
}

#maps {
	background-color: #d0cfd4;
	position: absolute;
	width: 100%;
	overflow: hidden;
	padding: 0px;
}

#map1 {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

#resizeWrapper {
	position: absolute;
	overflow: hidden;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
}

#map2 {
	background: #d0cfd4;
	width: 100%;
	height: 100%;
}

#footer {
	font-size: 12px;
	color: #fff;
	background: #848484;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	text-align: right;
	height: 18px;
	margin: 0;
	padding: 10px 15px 5px;
}

#msLink {
	float: left;
}

.esriScalebar {
	padding-left: 15px;
}

.map .bingLogo-lg {
	left: 18px !important;
}
/*Style for company logo added to the map*/
.logo {
	bottom: 5px;
	cursor: pointer;
	position: absolute;
	right: 5px;
	z-index: 51;
}

#loadingCon {
	position: absolute;
	z-index: 101;
	width: 100%;
	top: 40%;
	text-align: center;
}

#loadingDialog {
	margin: auto;
	background-color: #dadada;
	width: 300px
}

#loadingHeader {
	background-color: #848484;
	color: #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 300px;
}

#loading {
	padding-top: 10px;
}

#loadingImg {
	margin-top: 5px;
	padding-bottom: 10px;
}

g {
	cursor: pointer;
}

.ui-resizable-e {
	background-color: red;
	border-left: solid 1px red;
}

.ui-resizable-e:hover {
	border-left: solid 3px red;
}

div.headerlogo {
	position: absolute;
	right: 65px;
	top: 20%;
}
div.facebook {
	position: absolute;
	right: 40px;
	top: 30%;
	padding: 5px;
}

div.twitter {
	position: absolute;
	right: 5px;
	top: 30%;
	padding: 5px;
}