/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Used for charts and map sections.
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*
NEED TO HAVE MIN-WIDTH SET FOR CONTAINER FOR DIFFERENT LAYOUT SIZES
*/



/* This is needed because embed requires the width property to be set.  If done
	in the XSLT that creates the page then we'd have to know all about the chart
	even before the chart view is called - very ugly.  Also tried simply doing
	an XSLT global parameter with a default value.  This worked but using CSS
	is much cleaner and the right way to go.
*/
.Graphic 
{
	padding:			0;
	margin:				0;
}

.Graphic h3,
.ExpandableContent .Container .Graphic h3 
{
	margin-top: 		0.25em;
	margin-bottom: 		0.25em;
	color: 				#8E8E8E;
	border: 			none;
	font: 				normal 1.2em sans-serif;
	text-align: 		center;
}


.Graphic .SVG 
{
	padding:			0;
	margin-left:		-2px;
	width:				100%;
}


.Graphic.ServerChart .ChartOptions
{
	max-width:			585px;
	text-align:			right;
	padding-right: 		5px;
	font-size:			0.9em;
}

.Graphic .ChartOptions img
{
	padding-left: 		8px;
}
.Graphic .ChartOptions a:hover, 
.Graphic .ChartOptions a:active, 
.Graphic .ChartOptions a:focus
{
	background-color:	transparent;
}


.Graphic.SupplementalImage img
{
	width:				590px;
}




/* Leaflet overrides - if these get large might make sense to split out - similar to kendo overrides.css */
.Graphic.Map .leaflet-top {z-index: 0;}
.Graphic.Map .leaflet-control { clear: none;}
.Graphic.Map .leaflet-control-layers-toggle { background-image: url("../image/leaflet/layers.png"); }
.Graphic.Map .leaflet-retina .leaflet-control-layers-toggle { background-image: url("../image/leaflet/layers-2x.png"); }
.Graphic.Map .leaflet-control-scale 
{
	padding-top: 		10px;
	padding-left: 		10px;
}

.Graphic.Map .leaflet-container
{
	background-color: 	#eee;
	height: 			700px;
	width: 				100%;
	border: 			1px outset #aaa;
}
.DialogContent .Graphic.Map .leaflet-container
{
	min-height: 		400px;
}

#selectionMapDialog .InnerCanvas
{
	padding-bottom: 	0;
	margin-bottom:		0;
}



.Graphic.Map h4 
{
	color: 				#777;
	margin: 			0 0 5px;
	border-bottom: 		1px solid #ccc;
}

.Graphic.Map .InfoPanel
{
	min-width: 			10em;
	max-width: 			20em;
	overflow: 			hidden;

	padding: 			6px 8px;
	font: 				14px/16px Arial, Helvetica, sans-serif;
	background-color: 	white;
	opacity: 			0.8;
	box-shadow: 		0 0 15px rgba(0,0,0,0.2);
	border-radius: 		5px;
	z-index: 			100;
}

.Graphic.Map .InfoPanel .ChoroplethLegend
{
}
.Graphic.Map .InfoPanel .ChoroplethLegend .GroupingType
{
	font-size: 			smaller;
	border-top: 		1px solid #ccc;
	line-height: 		1.25em;
	margin-top: 		0.5em;
	padding-top: 		0.25em;
}
.Graphic.Map .InfoPanel .ChoroplethLegend h3
{
	text-align: 		center;
	margin-top: 		0;
	margin-bottom: 		0.35em;
	padding-bottom: 	0.25em;
}
.Graphic.Map .InfoPanel .ChoroplethLegend .Value .ChoroplethColorContainer 
{
	width: 				1em;
	height: 			1em;
	margin-right: 		0.5em;
}


.Graphic.Map .leaflet-popup-content .Value .Title,
.Graphic.Map .InfoPanel .Value .Title
{
	display: 			inline-block;
	min-width: 			7em;
	margin-right: 		0.25em;
}

/* have to use border instead of background color so it will print */
.Graphic.Map .Value .ChoroplethColorContainer 
{
	display:			inline-block;
	width: 				0;
	height: 			0;
	border: 			0.5em solid #fff;
	margin-left: 		0.25em;
	background-color: 	#fff;
}
.Graphic.Map .Value .ChoroplethColorContainer.NoGroup
{
	width: 				0.4em;
	height: 			0.4em;
	border: 			1px solid #777;
	margin-left: 		0.25em;
}



.Graphic.Map .leaflet-control-zoom-in   { background-image: url("../image/icon/16/magnify_zoom-in-black.png"); }
.Graphic.Map .leaflet-control-zoom-out  { background-image: url("../image/icon/16/magnify_zoom-out-black.png"); }
.Graphic.Map .leaflet-control-zoom-min  { background-image: url("../image/icon/16/arrows_shrink-black.png"); }
.Graphic.Map .leaflet-control-zoom-home { background-image: url("../image/icon/16/reset_black.png"); }



.Graphic.Map .leaflet-control-layers h3
{
	margin: 			0 0.25em 0.1em 0.2em;
}
.Graphic.Map .leaflet-control-layers h4
{
	margin: 			0 0.25em 0.1em 0.8em;
	border: 			none;
}
.Graphic.Map .leaflet-control-layers a:hover
{
	cursor: 			pointer;
	background-color: 	transparent;
	opacity: 			0.8;
	box-shadow: 		0 1px 5px rgba(0,0,0,0.4);
}

.Graphic.Map .leaflet-control-layers .leaflet-popup-close-button 
{
	display: 			none;
}
.Graphic.Map .leaflet-control-layers .item-container 
{
	line-height:		1.4em;
	min-height:			1.6em;
}
.Graphic.Map .leaflet-control-layers .item-container label 
{
	padding: 			0 .25em 0 1em;
}
.Graphic.Map .leaflet-control-layers .item-container label input
{
	float: 				left;
	margin-right: 		0.5em;
	margin-top: 		0.25em;
}
.Graphic.Map .leaflet-control-layers .item-container label div
{
	padding: 			0em .25em 0 1.75em;
}
.Graphic.Map .leaflet-control-layers .item-container .DownloadLayerIcon
{
	float: 				right;
	background-image: 	url("../image/icon/16/download_blue-box.png");
	margin-right: 		0.5em;
	margin-top: 		0.25em;
	width: 				16px;
	height: 			16px;
}


.Graphic.Map .leaflet-control-layers .ChoroplethControls 
{
	padding: 			0.25em .25em 0 1em;
}
.Graphic.Map .leaflet-control-layers .ChoroplethControls select
{
	display: 			block;
	width: 				100%;
	margin-bottom: 		0.25em;
}
.Graphic.Map .leaflet-control-layers .ChoroplethControls label input
{
	margin: 			0.5em 0 0 0.5em;
}


.Graphic.Map .leaflet-control-layers-expanded
{
	width: 				15em;
	max-width: 			25em;
	padding: 			0.5em .35em .65em .35em;
}
.Graphic.Map .leaflet-control-layers-expanded .leaflet-popup-close-button 
{
	display: 			block;
	width: 				1.25em;
	height: 			1.25em;
	z-index: 			100;
}


.Graphic.Map .GeoLabel
{
	background-color:	transparent;
	border: 			none;
	padding: 			0;
	text-shadow:
		-1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff
	;
	width: 100%;
	white-space: nowrap;
}

.Graphic.Map .GeoIconMarker
{
	padding: 			0;
	margin: 			0;
	width: 				16px;
	height: 			16px;
	min-width: 			16px;
	min-height: 		16px;
	background: 		transparent url("../image/icon/16/stickpin-head_red_white.png") 0 0 no-repeat;
}
.Graphic.Map .GeoCityIconMarker
{
	background-image: 	url("../image/icon/16/city-simple_black.png");
}
.Graphic.Map .GeoSchoolIconMarker
{
	background-image: 	url("../image/icon/16/school-border_black.png");
}
.Graphic.Map .GeoGovernmentIconMarker
{
	background-image: 	url("../image/icon/16/government-capitol_black.png");
}
.Graphic.Map .GeoHospitalIconMarker
{
	background-image: 	url("../image/icon/16/hospital-solid_black.png");
}
.Graphic.Map .GeoPoliceIconMarker
{
	background-image: 	url("../image/icon/16/police_badge-simple_black.png");
}
.Graphic.Map .GeoLiquorIconMarker
{
	background-image: 	url("../image/icon/16/wine_bottle-simple_black.png");
}

/*============================ End of Style Sheet ============================*/