/* --- Basic Overrides & Setup --- */

html, body, header, nav, footer, section, div, button, table, ul, li, a, p, img, h1, h2, h3 {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 555px;
	min-width: 700px;
	padding: 0;
	margin: 0;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
}



/* --- Framework --- */

#LogoBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: 100px;
	z-index: 98;
	background-color: #000000;
	-webkit-border-radius: 0 0 100px 0; 
	-moz-border-radius: 0 0 100px 0; 
	-o-border-radius: 0 0 100px 0; 
	border-radius: 0 0 100px 0;
	-webkit-box-shadow:   2px 2px 5px #888888; 
	-moz-box-shadow:   2px 2px 5px #888888; 
	-o-box-shadow:   2px 2px 5px #888888; 
	box-shadow:   2px 2px 5px #888888;
}

	#LogoBox img {
		padding: 15px 35px;
		border-style: none;
	}

#TopBar {
	position: absolute;
	top: 0;
	left: 200px;
	right: 0;
	height: 60px;
	z-index: 98;
}

	#TopBarMain {
		position: absolute;
		top: 0;
		left: 0;
		right: 97px;
		height: 50px;
		background-color: #000000;
		-webkit-border-radius: 0 0 50px 0; 
		-moz-border-radius: 0 0 50px 0; 
		-o-border-radius: 0 0 50px 0; 
		border-radius: 0 0 50px 0;
		-webkit-box-shadow:   2px 2px 5px #888888; 
		-moz-box-shadow:   2px 2px 5px #888888; 
		-o-box-shadow:   2px 2px 5px #888888; 
		box-shadow:   2px 2px 5px #888888;
	}

		#TopBarMain h1 {
			height: 40px;
			padding: 6px 50px;
			color: #FFFFFF;
			font-size: 30px;
			font-family: "Roboto";
			overflow: hidden;
		}

		#HelpButton {
			position: absolute;
			top: 0;
			right: 15px;
			padding: 5px 10px;
			font-family: "Roboto";
			font-size: 14px;
			text-align: center;
			color: #000000;
			background-color: #FFFFFF;
			-webkit-border-radius: 0 0 10px 10px; 
			-moz-border-radius: 0 0 10px 10px; 
			-o-border-radius: 0 0 10px 10px; 
			border-radius: 0 0 10px 10px;
			-webkit-box-shadow:   2px 2px 5px #000000; 
			-moz-box-shadow:   2px 2px 5px #000000; 
			-o-box-shadow:   2px 2px 5px #000000; 
			box-shadow:   2px 2px 5px #000000;
			text-decoration: none;
		}

			#HelpButton:hover {
				padding: 15px 10px;
				cursor: pointer;
				background-color: #F1DEC7;
			}

			#HelpButton.active {
				background-color: #000000;
				color: #FFFFFF;
			}




	#TopBarTopCurve {
		position: absolute;
		top: 0;
		right: 70px;
		width: 30px;
		height: 20px;
		background-image: url("../images/Corners_Black.png");
		background-size: 60px 40px;
	}

	#TopBarBottomCurve {
		position: absolute;
		top: 50px;
		left: 0;
		width: 20px;
		height: 10px;
		background-image: url("../images/Corners_Black.png");
		background-size: 40px 20px;
	}


#SideBar {
	position: absolute;
	top: 100px;
	bottom: 50px;
	left: 0;
	width: 40px;
	z-index: 98;
}

	#SideBarMain {
		position: absolute;
		top: 0;
		bottom: 39px;
		left: 0;
		width: 20px;
		background-color: #000000;
		-webkit-border-radius: 0 0 10px 0; 
		-moz-border-radius: 0 0 10px 0; 
		-o-border-radius: 0 0 10px 0; 
		border-radius: 0 0 10px 0;
		-webkit-box-shadow:   2px 2px 5px #888888; 
		-moz-box-shadow:   2px 2px 5px #888888; 
		-o-box-shadow:   2px 2px 5px #888888; 
		box-shadow:   2px 2px 5px #888888;
	}

	#SideBarTopCurve {
		position: absolute;
		top: 0;
		left: 20px;
		width: 20px;
		height: 20px;
		background-image: url("../images/Corners_Black.png");
	}

	#SideBarBottomCurve {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 15px;
		height: 40px;
		background-image: url("../images/Corners_Black.png");
		background-size: 30px 80px;
	}


#StatusBar {
	position: absolute;
	top: 50px;
	right: 150px;
	width: 200px;
	height: 20px;
	z-index: 98;
	background-color: #FFFFFF;
	-webkit-border-radius: 0 0 10px 10px; 
	-moz-border-radius: 0 0 10px 10px; 
	-o-border-radius: 0 0 10px 10px; 
	border-radius: 0 0 10px 10px;
	-webkit-box-shadow: 2px 2px 5px #000000; 
	-moz-box-shadow: 2px 2px 5px #000000; 
	-o-box-shadow: 2px 2px 5px #000000; 
	box-shadow: 2px 2px 5px #000000;
}

		#StatusBar p {
			padding: 2px 15px 0 15px;
			font-size: 12px;
			font-family: "Roboto";
			font-style: italic;
		}

/* --- Main --- */

#Main {
	padding: 100px 20px 20px 50px;
}

	#Main div {
		border-bottom: 1px solid #C6C6C6;
		max-width: 700px;
	}

	#Main h1 {
		padding: 20px 0;
		clear: both;
	}

	#Main h2 {
		font-size: 16px;
		padding: 10px 5px 10px 0;
		clear: both;
	}

	#Main p {
		margin: 0 20px 10px 20px;
		vertical-align: top;
	}

	#Main ul {
		margin-left: 50px;
	}

	#Main ul.bump {
		margin-left: 120px;
	}

	#Main img {
		padding: 0 15px 5px 20px;
		vertical-align: top;
		max-width: 200px;
		float: left;
	}

	#Main br {
		clear: both;
		font-size: 2px;
	}


/* --- Map Area --- */

#MapArea {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
}

	#mapDiv {
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* --- Zoom In/Out Map Navigation (Widget Style Overrides) --- */

	.esriSimpleSlider {
		border-color: black;
		color: black;
		top: 118px;
		left: 20px;
		z-index: 99 !important;
		border: none;
		-webkit-border-radius: 0 5px 5px 0; 
		-moz-border-radius: 0 5px 5px 0; 
		-o-border-radius: 0 5px 5px 0; 
		border-radius: 0 5px 5px 0;
		-webkit-box-shadow:   2px 2px 5px #000000; 
		-moz-box-shadow:   2px 2px 5px #000000; 
		-o-box-shadow:   2px 2px 5px #000000; 
		box-shadow:   2px 2px 5px #000000;
	}

		.esriSimpleSlider:hover {
			width: 45px;
		}

		.esriSimpleSliderIncrementButton {
			border-bottom: none !important;
			width: 100%;
		}

		.esriSimpleSliderDecrementButton {
		}

		.esriSimpleSliderIncrementButton:hover {
			background-color: #F1DEC7;
			width: 40px;
			text-align: left;
			padding-left: 5px;
		}

		.esriSimpleSliderDecrementButton:hover {
			background-color: #F1DEC7;
			width: 38px;
			text-align: left;
			padding-left: 7px;	
		}


	/* --- Scalebar (Widget Style Overrides)--- */

	.esriScalebar {
		bottom: 5px;
	}

		.esriScalebarLabel {
			color: black;
			font-family: "Roboto", sans-serif;
			font-weight: 300;
			font-size: 10px;
		}	

	/* --- The map toolbar --- */

	#Toolbar {
		width: 32px;
		margin-top: 5px;
		position: absolute;
		top: 180px;
		left: 20px;
		z-index: 99;
	}

		#Toolbar ul {
			height: 100%;
			list-style: none;
		}

			#Toolbar ul li {
				float: left;
				padding-bottom: 5px;
				height: 100%;
			}

		/* --- Default Map Extent Button (with Widget Style Overrides)--- */

			#HomeButton {
				display: block;
			}

				.HomeButton .home {
					width: 26px;
					height: 26px;
					background-color: #FFFFFF; 
					background-image:url("../images/home_ca_black.png"); 
					-webkit-border-radius: 0 5px 5px 0; 
					-moz-border-radius: 0 5px 5px 0; 
					-o-border-radius: 0 5px 5px 0; 
					border-radius: 0 5px 5px 0;
					-webkit-box-shadow:   2px 2px 5px #000000; 
					-moz-box-shadow:   2px 2px 5px #000000; 
					-o-box-shadow:   2px 2px 5px #000000; 
					box-shadow:   2px 2px 5px #000000;
				}

					.HomeButton .home:hover {
						background-color: #F1DEC7; 
						width: 41px;
					}

			.CustomTool {
				display: block;
				padding: 5px;
				width: 20px;
				height: 20px;
				color: black;
				font-size: 20px;
				text-align: center;
				vertical-align: middle;
				-webkit-user-select:none; 
				-moz-user-select:none; 
				-ms-user-select:none; 
				user-select:none; 
				-webkit-border-radius: 0 5px 5px 0; 
				-moz-border-radius: 0 5px 5px 0; 
				-o-border-radius: 0 5px 5px 0; 
				border-radius: 0 5px 5px 0;
				-webkit-box-shadow:   2px 2px 5px #000000; 
				-moz-box-shadow:   2px 2px 5px #000000; 
				-o-box-shadow:   2px 2px 5px #000000; 
				box-shadow:   2px 2px 5px #000000;
				background-color: #FFFFFF; 
				background-position:center center; 
				background-repeat:no-repeat; 
			}

				.CustomTool:hover {
					cursor: pointer;
					background-color: #F1DEC7;
					width: 35px;
				}

				.CustomTool.active {
					background-color: #000000;
					color: #FFFFFF;
				}


.LayerSwipe {
	width: 90%;
	padding-left: 60px;
}


.esriOverviewMap {
	z-index: 90;
}

	.ovwContainer {
		-webkit-border-radius: 0 50px 0 0; 
		-moz-border-radius: 0 50px 0 0; 
		-o-border-radius: 0 50px 0 0; 
		border-radius: 0 50px 0 0;
		-webkit-box-shadow:   2px 2px 5px #888888; 
		-moz-box-shadow:   2px 2px 5px #888888; 
		-o-box-shadow:   2px 2px 5px #888888; 
		box-shadow:   2px 2px 5px #888888;
	}

	.esriOverviewMap .map {
		-webkit-border-radius: 0 50px 0 0; 
		-moz-border-radius: 0 50px 0 0; 
		-o-border-radius: 0 50px 0 0; 
		border-radius: 0 50px 0 0;		
	}


/* --- PANEL styles --- */

.LayerPanel {
	background: white;
	width: 210px;
	position: absolute;
	top: 60px;
	right: 10px;
	height: 500px;
	z-index: 99;
	border: 1px solid black;
	-webkit-border-radius: 5px 5px 10px 10px; 
	-moz-border-radius: 5px 5px 10px 10px; 
	-o-border-radius: 5px 5px 10px 10px; 
	border-radius: 5px 5px 10px 10px;
	-webkit-box-shadow:   2px 2px 5px #000000; 
	-moz-box-shadow:   2px 2px 5px #000000; 
	-o-box-shadow:   2px 2px 5px #000000; 
	box-shadow:   2px 2px 5px #000000;
}

	.LayerPanelTitle {
		background: black;
		color: white;
		border-bottom: 1px solid black;
		width: 100%;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		-o-border-radius: 5px; 
		border-radius: 5px;
		font-family: "Syncopate", sans-serif;
		font-variant: small-caps;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		padding: 5px 0;
	}

		.closePanel {
			display: block;
			position: absolute;
			top: 5px;
			right: 5px;
			width: 20px;
			height: 18px;
			color: white;
			font-size: 14px;
			text-align: center;
			padding-top: 2px;
			-webkit-border-radius:5px; 
			-moz-border-radius:5px; 
			-o-border-radius:5px; 
			border-radius:5px;

		}

			.closePanel:hover {
				background-color: white;
				color: black;
				cursor: pointer;
			}

	.LayerPanelContent {
		background: white;
		overflow: auto;
		overflow-x: hidden;
		font-size: 12px;
		font-family: "Ubuntu", sans-serif;
		position: absolute;
		top:29px;
		bottom: 0;
		left: 0;
		right: 0;
		-webkit-border-radius: 0 0 10px 10px; 
		-moz-border-radius: 0 0 10px 10px; 
		-o-border-radius: 0 0 10px 10px; 
		border-radius: 0 0 10px 10px;
	}

		.panelContentHeading {
			border-width: 1px 0;
			border-color: black;
			border-style: solid;
			padding: 5px 0;
			text-align: center;
			font-family: "Syncopate", sans-serif;
			font-variant: small-caps;
			font-size: 14px;
			font-weight: bold;
			background: #F1DEC7;
		}

		/* -------- EDITOR Panel Styles -------- */

			#editorInfo {
				padding: 20px 10px;
			}

			.templatePicker {
				border: none;
				padding: 10px 0 10px 10px; 
				-webkit-border-radius: 0; 
				-moz-border-radius: 0; 
				-o-border-radius: 0; 
				border-radius: 0;

			}

				.dojoxGrid,
				.dojoxGridView {
					width: 100% !important;
					font-size: 12px;
					font-family: "Ubuntu", sans-serif;
				}

					.groupLabel {
						font-family: "Syncopate", sans-serif;
						font-variant: small-caps;
					}

				.templatePicker .grid .selectedItem {
					background-color: #F1DEC7 !important;
					border-color: #C6C6C6 !important;
				}

				.templatePicker .grid .item {
					cursor: pointer;
				}

			.panelToolbar ul {
				width: 100%;
				list-style: none;
				display: block;
				padding: 0 1px 1px 1px;
				margin-bottom: 10px;
			}

				.panelToolbar ul li {
					float: left;
					padding-right: 2px;
				}

			#locationToolbarTitle {
				font-size: 16px;
				font-family: "Ubuntu", sans-serif;
				font-weight: bold;
				vertical-align: middle;
				padding: 6px;
			}

			.panelToolbar ~ div {          /*acts on every div preceeded by a .panelToolbar*/
				margin: 0 0 15px 0;
				border-top: 1px solid #C6C6C6;
				clear: both;
			}

				.panelTool {
					display: block;
					height: 18px;
					width: 18px;
					font-size: 16px;
					text-align: center;
					padding: 4px;
					margin: 2px 0;
					border: 1px solid white;
					-webkit-border-radius:5px; 
					-moz-border-radius:5px; 
					-o-border-radius:5px; 
					border-radius:5px;
				}

					.panelTool.active {
						background-color: #F1DEC7;
						border: 1px solid black;						
					}

					.panelTool.disabled {
						color: #C6C6C6;
					}

					.panelTool:hover {
						color: white;
						background-color: black;
						border: 1px solid black;
						cursor: pointer;
					}

					.panelTool.active:hover {
						color: black;
						background-color: #F1DEC7;
					}

					.panelTool.disabled:hover {
						color: #C6C6C6;
						background-color: white;
						border-color: white;
						cursor: default;
					}

.inlineButton {
	display: inline-block;
	height: 18px;
	width: 18px;
	font-size: 14px;
	text-align: center;
	padding: 2px;
	margin: 0 0 0 5px;
	border: 1px solid #C6C6C6;
	-webkit-border-radius:5px; 
	-moz-border-radius:5px; 
	-o-border-radius:5px; 
	border-radius:5px;
}

	.inlineButton:hover {
		color: white;
		background-color: black;
		border: 1px solid black;
		cursor: pointer;
	}


		/* -------- LEGEND Panel Styles -------- */

			.esriLegendService {
				padding-bottom: 2px;
			}

			.esriLegendServiceLabel {
				display: none;
			}

			.legendFL .esriLegendServiceLabel {
				display: block;
				font-weight: bold;
				font-size: 12px;
				border-bottom: 1px solid #C6C6C6;
			}

			.esriLegendLayerLabel {
				font-weight: bold;
				font-size: 12px;
				border-bottom: 1px solid #C6C6C6;
				margin-bottom: 10px;
			}

			.legendFL .esriLegendLayerLabel {
				display: none;
			}

			.legendService {
				width: 185px;
				padding-left: 10px;
			}

				.legendServiceTitle {
					padding: 10px 0 5px 0;
					width: 100%;
					font-weight: bold;
					font-family: "Syncopate" sans-serif;
					font-variant: small-caps;
					font-size: 14px;
				}

				.legendLayer {
					width: 100%;
				}

					.legendLayerTitle {
						padding: 5px;
						width: 100%;
						font-weight: bold;
					}

					.legendItems {
						display: table;
					}

						.imageSpan {
							padding: 2px 5px;
							display: table-cell;
							vertical-align: middle;
							width: 20px;
						}

							.legendImage {
								max-width: 20px;
								max-height: 20px;
							}

							.legendLabel {
								padding: 2px 5px 2px 0;
								display: table-cell;
								vertical-align: middle;
								align: left;
							}


		/* -------- VISIBILITY Panel Styles -------- */


		#VisibilityContent {
			text-align: left;
			padding: 10px 5px;
			font-family: "Ubuntu", sans-serif;
		}

			#VisibilityContent p {
				font-size: 12px;
				padding-bottom: 10px;
				border-bottom: 1px solid #C6C6C6;
			}

			#VisibilityContent label {
				display: block; 
				position: relative;
				top: -17px;
				vertical-align: middle;
				margin-left: 20px;
				font-size: 12px;
				font-family: "Ubuntu", sans-serif;
			}

			#VisibilityContent .sub{
				padding-left: 15px;
			}

			#VisibilityContent .sub label{
				margin-left: 35px;
			}

			#chooseBasemap {
			    padding: 0 0 5px 12px;
			}

			#chooseBasemap label {
				margin: 0 15px 0 0;
				border-top: 1px solid #C6C6C6;
				padding-top: 10px;
			}

table.identify {
	width: 99%;
}

th {
	background-color: #F1DEC7;
}

tr.even {
	background-color: #DFDFDF;
}

td.field {
	width: 50%;
}


.locationDiv {
	border-bottom: 1px solid #C6C6C6;
	padding: 10px;
}

	.locationDiv h1 {
		font-size: 14px;
		font-family: "Ubuntu", sans-serif;
		font-variant: small-caps;
	}

	.locationDiv h2 {
		font-size: 12px;
		font-weight: normal;
		padding: 5px 0 10px 0;
	}

	#AddressFormat {
		font-size: 12px;
		font-weight: normal;
		padding: 10px;		
	}

.locationLine {
	padding: 2px 10px;
}

	.locationLine label {
		font-size: 13px;
		font-family: "Roboto", sans-serif;
		font-weight: bold;
		display: inline-block;
		width: 37px;
		font-variant: small-caps;
	}

	.locationLine p {
		display: inline-block;
		padding-left: 5px;
		text-align: right;
		width: 70px;
	}

		#currentExtZoom {
			text-align: left;
		}

	.locationLine input {
		display: inline;
		margin-left: 5px;
		font-family: "Ubuntu", sans-serif;
		font-size: 12px;
	}

#zoomLevelMenu,
#bookmarksUnitsMenu,
#bookmarksCountiesMenu {
	margin-left: 5px;
}

	#zoomLevelMenu .dijitSelectLabel,
	#bookmarksUnitsMenu .dijitSelectLabel,
	#bookmarksCountiesMenu .dijitSelectLabel {
		width: 56px;
	    height: 13px;
	    overflow: hidden;
	}

#getLocationButton {
	margin-left: 5px;
}

#bookmarksUnitsMenu_dropdown,
#bookmarksCountiesMenu_dropdown {
	max-height: 155px;
}

#zoomAddressButton {
	margin-left: 108px;
}


#AttributeTable {
	height: 250px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	left: 70px;
	z-index: 99;
	background-color: white;
	border: 1px solid black;
	border-top: none;
	-webkit-border-radius: 5px 5px 10px 10px; 
	-moz-border-radius: 5px 5px 10px 10px; 
	-o-border-radius: 5px 5px 10px 10px; 
	border-radius: 5px 5px 10px 10px;
	font-size: 12px;
	font-family: "Ubuntu", sans-serif;
	-webkit-box-shadow:   2px 2px 5px #000000; 
	-moz-box-shadow:   2px 2px 5px #000000; 
	-o-box-shadow:   2px 2px 5px #000000; 
	box-shadow:   2px 2px 5px #000000;
}

/*
	#AttributeTablePull {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background-color: black;
	}*/

/*	#AttributeTablePull:hover {
		cursor: n-resize;
	}
*/

	#AttributeTable .LayerPanelTitle {
		top: 39px;
	}

	#AttributeTableHeader {
		font-size: 12px;
		font-family: "Ubuntu", sans-serif;
		height: 33px;
	}

		.headerDiv {
			width: 450px;
			vertical-align: top;
			display: inline-block;
			padding: 5px 0;
		}

			.headerLabel {
				padding: 3px 10px;
				display: inline-block;
				vertical-align: top;
			}

		#AttributeTableTools {
			width: 150px;
			height: 30px;
			display: inline-block;
		}

	#AttributeTableContent {
		background: white;
		overflow: auto;
		overflow-x: hidden;
		font-size: 12px;
		font-family: "Ubuntu", sans-serif;
		position: absolute;
		top: 62px;
		bottom: 0;
		left: 0;
		right: 1px;
		border-top: 1px solid black;
		-webkit-border-radius: 0 0 10px 10px; 
		-moz-border-radius: 0 0 10px 10px; 
		-o-border-radius: 0 0 10px 10px; 
		border-radius: 0 0 10px 10px;
	}



	.dojoxGridCell {
		position: relative;
	}

	.dojoxGridArrowButtonChar {
		position: absolute;
		top: 3px;
		left: 2px;
	}

	.dojoxGridColCaption {
		position: absolute;
		top: 3px;
		left: 20px;
	}

	#dojox_grid__RowSelector_1 {
		width: 2px !important;
	}



#legendStatus {
	padding: 10px;
	font-weight: bold;
}