/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Parc public custom styles
   ========================================================================== */

html, body {
  	height			: 	100%;
  	width			:	100%;
  	margin			: 	0;
  	padding			: 	0;
  	font-family		:	Helvetica, Arial, sans-serif;
	overflow		:	hidden;	
}

body {
    display:table;
}

img {
	border			:	none;
}

header {
	padding			:	0px;
	width			:	100%;
	height			:	66px;
	position		:	relative;
	top				:	0;	
	z-index			:	1000;
	display:table-row;
}


.logo_eco {
	position		:	absolute;
	bottom			:	10px;
	right			:	10px;
	z-index			:	100;
	max-height: 40px;
	background: rgba(255,255,255,0.5);
	padding: 5px;
	max-width: 200px;
}


#legende-drc {
	display			: none;
	background		: 	rgba(255,255,255,0.7);	
	font-size: 0.8em;
    padding: 0px 10px;
	position		:	absolute;
	top 			:	160px;
	left			:	10px;
	z-index			:	100;
}

#legende-drc p {
    margin: 5px 0px;
}

.leaflet-control-layers-overlays {
	padding: 0px 5px;
}

.leaflet-control-layers-overlays label {
	margin: 5px 0px;
}

.filter-icon{
	max-width: 24px;
	max-height: 24px;
	font-size: 20px !important;
	margin-left: 5px;
	-webkit-text-stroke: 0.3px black;
}

#mainTitleBar {
	margin	 		:	0px;
	padding			:	0px;
	background		:	rgb(68, 68, 70);
	background-color:	#444446;
	width			:	100%;
	height			:	65px; 
}

#mainTitleBar  h1 {
	padding-top		:	5px;
	margin			:	10px 0px;
	width			:	100%;
	text-align		:	left;
	color			:	#fff;
}


#domaineName{
	font-size		:	22px;	
	font-weight		:	bold;
	color			:	#fff;
	margin			:	7px 0px 0px 0px;
}

#counterNumber{
	display: block;
	color: #dbdbdc;
    font-size: 0.9em;
    padding-top: 0px;
    margin-top: 0px;
}

#txtPeriod{
	font-size		:	11px;
	color			:	#fff;
	margin-top		:	5px;
	width			:	100%;
	text-align		:	left;
}


#mainHeaderLeft img{
	max-height		:	51px;
	max-width		:	100%;
	padding			:	4px;
	background-color:   #fff;
	margin			:	2px;
	vertical-align	:	middle;
	display			:	inline-block;
}

#mainHeaderLeft{
	-moz-box-sizing	: 	border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing		: 	box;
	display			:	inline-block;
	width			:	25%;
	height			:	100%;
}

#mainHeaderCenter{
	-moz-box-sizing: 	border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing		: 	box;
	width			:	49%;
	display			:	inline-block;
	height			:	100%;
	text-align 		: 	center;
	vertical-align	:	top;
}



#mainHeaderRight{
	-moz-box-sizing	: 	border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing		: 	box;
	display			:	inline-block;
	width			:	25%;
	height			:	100%;
	text-align		:	right;
	vertical-align 	:	top;
}

#options{
	z-index			:	1000;
	margin-bottom	:	-15px;
	padding-right	:	15px;
	padding-top		:	7px;
	padding-bottom	:	0px;
	font-size		:	14px;
}

#shareDiv {
	text-align: right;
    position: relative;
    top: 20px;
    height: 28px;
    color: #fff;    
    padding-right: 10px;
}

#shareDiv div{
	float:right;
	width: 28px;
	text-align: center;
	height: 100%;
	border-radius: 14px;
    margin-left: 15px;
}
/*
#shareDiv i {
	margin-left: auto;
	margin-right: auto;
	clear:	both;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	font-size: 14px;
	cursor: pointer;
	position: relative;
    top: 3px;
}

#shareDiv i:hover {
	font-size: 18px;
	top: 5px;
}
​*/
#shareDiv img {
	margin-left: auto;
	margin-right: auto;
	clear:	both;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	cursor: pointer;
	position: relative;
    top: 3px;
    width: 28px;
    height: 28px;
    left: 0px;
}

#shareDiv img:hover {
	width: 32px;
    height: 32px;
	top: 1px;
	left: -2px;
}


#logoEco{
	width			:	100%;
}

.TotalCountsInfo{
	padding-left	:	10px;
	margin			:	20px 0px px 0px;
	color			:	#444446;
	font-size		:	12px;
}

.TotalCountsInfo .title{
	font-weight		:	bold;
}

#map_canvas {
	/*margin-top		:	145px;*/
	width			: 	100%;
	height			:	100%;
	min-height		: 	100%;
}

#section_map_alt{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width : 200px;
	height:200px;	
	box-border: 0px 0px 5px #888888;
	border: 2px solid #444446;
	display:none;
}
#negrip{
	background-image: url("../assets/icons/resize_handle.png");
     top: 0px;
     right: 0px;
     z-index: 100000;
}

#map_alt {
	width : 100%;
	height: 100%;	
}


.ui-resizable-handle{
	z-index: 1000000;
}


#rightBar {
	/*position		:	absolute;
	top				:	65px;*/
	display:table-row;
	right			:	0px;
	left			:	0px;
	width			:	100%;	
	height			:	80px;
	background		:	rgb(68, 68, 70);
	background-color:	#444446;
	border-top		: 	1px solid #DDD;
	z-index			:	10;	
	color			:	#ffffff;	
	-webkit-transition: height 1s;
    transition: height 0.2s;
}

#headerChart {
	height			:	80px;
	width 			:	100%;
	margin-left		:	10px;
	margin-right	:	10px;
	color			:	#ffffff;
}

#headerChart .jqplot-grid-canvas {display: none;}

.jqplot-title{margin-bottom:5px;}

.jqplot-yaxis-tick, .highcharts-xaxis-labels *{
	cursor : pointer !important;
}


#subHeaderRight{
	/*width 			:	100%;*/
	display			:	inline-block;
	width 			:	75%;
	vertical-align	:	top;
}

#subHeaderLeft{
	/*width 			:	100%;*/
	display			:	inline-block;
	width 			:	24%;
}

.subHeader1 {
	height			:	100%;
	display			:	inline-block;
	width			:	20%;
	min-width		:	200px;
	text-align		:	left;
	vertical-align	:	top;
	border-right	: 	1px solid #DDD;
	
}

.subHeader1 p {
	margin-top		:	10px;
	margin-bottom	:	0px;
}

.subHeader1 img {
	padding-top		:	5px;
	cursor			: 	pointer;
	vertical-align	:	top;
	display			:	inline-block;
}

#periodDiv {
	height			:	100%;
	display			:	inline-block;
	padding-top		:	7px;
	padding-left	:	15px;
	font-size		:	13px;
	font-weight		:	bold;
}

.select-period-link{
	margin-left:10px;
	color: #fff;
	cursor: pointer;
}

.date-picker-wrapper{
	z-index: 1000;
}


.subHeader2 {
	height			:	100%;
	display			:	inline-block;
	width			:	48%;
	min-width		:	270px;
	text-align		:	center;
	vertical-align	:	top;
	border-right	: 	1px solid #DDD;
	position: 			relative;
}
.subHeader3 {
	height			:	100%;
	display			:	inline-block;
	width			:	15%;
	min-width		:	100px;
	text-align		:	center;
	vertical-align	:	top;
	border-right	: 	1px solid #DDD;
	font-size		:	13px;
}
.subHeader4 {
	height			:	100%;
	display			:	inline-block;
	width			:	15%;
	min-width		:	100px;
	text-align		:	center;
	vertical-align	:	top;
	font-size		:	13px;
	z-index	:	10;
}

#totalValue {
	font-size		:	20px;
	font-weight		:	bold;
}

#averageValue {
	font-size		:	20px;
	font-weight		:	bold;
}

.infoWindow {
	position		:	absolute;
	top				:	155px;
	
	/*bottom			:	5px;*/
	/*height			:	100%;*/
	right			:	5px;	
	z-index			:	100;
	transition		: 	width 0.2s;
    -moz-transition	: 	width 0.2s; 
    -webkit-transition	: 	width 0.2s; 
    -o-transition	: 	width 0.2s;
}

#infoContainer {
	position		:	relative;
	padding-bottom	:	20px;
	width			:	330px;
	top				:	0px;
	bottom			:	0px;
	height			:	100%;
	background		: 	rgb(0, 0, 0);
	background		:	rgba(0,0,0,0.85);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	z-index			:	100;
}

.infoWindowOpen {
	width			:	350px;
}
.infoWindowClose {
	width			:	0px;
}

.closeButton {
	margin-left		:	215px;
	z-index			:	100;
}

.cadrePratique {
	display			:	inline-block;
	width			:	75px;
	text-align		:	center;
	vertical-align	:	top;
	margin-top		:	15px;
	position		: 	relative;
}

#imgPratique {
	/*min-width 		:	33px;*/ 
	min-height		:	55px;
	max-height		: 	55px;
}

#iconPratique {
	position: absolute;
	top : 5px;
	left: calc(50% - 12px); 
	width: 24px;
	-webkit-text-stroke: 0.3px black;
	font-size: 21px;
}


#infoHeader {
	width			:	100%;	
	padding-top		:	0px;
}

#stats {
	display			:	inline-block;
	width			:	220px;
}

.info {
	display			: 	inline-block;
	font-size		:	0.8em;
}

.infoWindow p{
	color			:	#fff;	
}

#img {
	margin-left		:	10px;
	margin-right	:	10px;
	margin-top		:	10px;
	max-width		:	50px;
	max-height		:	50px;
	display			:	inline-block;
}

#txt_nom {
	margin-top		:	-25px;
	margin-bottom	:	0px;
	font-size		:	18px;
}

#text {
	color			:	#fff;
	display			:	inline-block;
}

.chiffresInfos {
	display:inline-block;
	background-color: #666;
	-moz-box-shadow: inset 0 15px 0 #575757;
	box-shadow: inset 0 15px 0 #575757;
	position: relative;
	margin-right: 0px;
	border-radius: 7px;
	min-width:	60px;
}

.chiffresInfosTitle {
	font: normal normal bold 11px Arial, Verdana, sans-serif;
	color: #C9C9C9;
	display: block;
	text-align: center;
	padding: 1px 5px;
}

.chiffresInfosValue {
	font: normal normal bold 12px Arial, Verdana, sans-serif;
	color: #E8E8E8;
	display: block;
	text-align: center;
	white-space: nowrap;
	min-height: 15px;
	padding: 6px 5px 4px;
}

#details {
	margin-top		:	5px;
	width			:	100%;
}

#details  hr{
	width 			:	30%;	
	height			:	1px;
	border			:	none;
	background-color:	#87888a;
	padding-bottom	:	0px;
	margin-bottom	:	0px;	
}

#description {
	width			:	100%;
	padding-left	:	10px;
	padding-right	:	10px;
	padding-top		:	10px;
	color			:	#fff;
	font-size		:	0.9em;
}

#gps {
	width			:	100%;
	padding-left	:	10px;
	padding-right	:	10px;
	color			:	#fff;
	font-size		:	0.8em;
}

#gps img {
	padding-top		:	5px;
	display			:	inline-block;
}

#gps a {
	display			:	inline-block;
	padding-left	:	5px;
	padding-top 	:	0px;
	margin-top		:	10px;
	margin-bottom	:	5px;
	vertical-align	:	top;
	text-decoration	:	none;
	color			:	#fff;
}

#gps a:hover {
	text-decoration	:	underline;
}

#counterChart {
	margin:auto;
	height			:	130px;
	width 			:	85%;
	margin-top		:	5px;
	margin-bottom	:	0px;
	margin-left		:	20px;
	color			:	#fff;
}

#counterDataPeriod, #counterDataInterval, .hRule {
	display: block;
}

.infoFooter {
	display			:	block;
/* 	width			:	330px; */
	margin-top		:	0px;
	padding-top		:	0px;
	clear			: 	both;
	margin-bottom	: initial;
}

.infoFooter a {
	color			:	#fff;	
	width			:	100%;
	font-size		:	0.8em;	
	/*text-align		:	center;
	margin-left		:	10px;
	display			:	inline-block;*/
}

.slides_container div {
	width			:	310px;
	height			:	230px;
	display			:	block;
	text-align		: 	center;
}
			
.pagination {
	margin			:	10px auto 0;
	width			:	100px;
}

.slides_container div img {
    margin-left		:	10px;
	margin-right	:	10px;
	margin-top		:	10px;
	max-width		:	310px;
	max-height		:	230px;
	display			:	inline-block;
	text-align		: 	center;
}

.pagination li {
	float			:	left;
	margin			:	0 1px;
	list-style		:	none;
}

.pagination li a {
	display			:	block;
	width			:	12px;
	height			:	0;
	padding-top		:	12px;
	/*background-image:	url("http://slidesjs.com/examples/standard/img/pagination.png");*/
	background-position	:	0 0;
	float			:	left;
	overflow		:	hidden;
}

.pagination li.current a {
	background-position	:	0 -12px;
}

.infoBox {
	/*color			:	#fff;
	padding-left	:	3px;
	padding-right	:	3px;
	padding-top		:	3px;
	padding-bottom	:	3px;*/
}

.infoBox .title {
	display			:	block;
	font-size		:	12px;
	overflow		:	hidden;
	white-space		: 	nowrap;
}

.infoBox img {
	clear			: 	both;
	max-width		:	100px !important;;
	max-height		:	80px;
	margin-top		:	5px;
	opacity			:	1;
	alpha			:	1;
}

#popup {
	width			:	500px;
	height			:	350px;
}

.leaflet-popup-content-wrapper{
	border-radius: 3px;
	background: #000;
	color: #fff;
}

.leaflet-popup-tip {
	background: #000;
}

.leaflet-popup-content {
margin: 5px 8px;
line-height: 1.4;
}


#progressBar {
	text-align		:	center;
}

#progressBar img {
	max-width		:	300px;
}

#labelLoadingError {
    color: #ee4f4f;
}

#txtDebut, #txtFin {
	width: 130px;
}

.ui-datepicker {
	font-size: 0.9em;
}


.wrapperDate {
    position: relative; 
}

.wrapperDate span {
	cursor : pointer;
}
.wrapperDate .date-picker-icon {
    color: #fff;
}


/* Header Chart*/
#labelMoreChart{
	font-size: 0.8em;
	font-style: italic;
}

#expandChartDiv{
	height: 20px;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

#expandChartDiv a{
	color: #fff;
	text-decoration: none;
}

#full-chart-div {
	color: #444446;
}

#full-chart-modal{
	border-radius: 0px;
	padding: 0px 10px 5px;
}

#full-chart-modal h3 {
	margin: 10px;
	display: inline-block;
}

#full-chart-modal .subtitle {
	font-style: italic;
	font-size: 0.9em;
}


/*DROPDOWN SELECTION GRAPHIQUE*/
nav {
	margin: auto; 
	text-align: center;
	z-index: 10000;
	width: 90%;
	font-size: 0.8em;
}

nav ul {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	width: 100%;
	list-style: none;
	position: relative;
	display: inline-table;
	z-index: 10000;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
	
}

nav ul li {
	float: left;
	width: 100%;
	text-align: left;
	z-index: 10000;
	
}
	
nav ul li:hover {
	color: #444446;
	border:none;
}

#liSelectedData{
	border: 1px solid #87888a;
}


nav ul li a {
	display: block; 
	padding: 5px 10px;
	color: #ffffff; 
	text-decoration: none;
	z-index: 10000;
}

nav ul ul {
	border-radius: 0px; 
	padding: 0;
	position: absolute; 
	top: 100%;
	z-index: 10000;
}

nav ul ul li {
	float: none;
	background: #000;
	/*border-bottom: 1px solid #eaeaea;*/ 
	position: relative;
	z-index: 10000;
}

nav ul ul li a {
	padding: 5px 10px;
	color: #87888a;
	z-index: 10000;
}	

nav ul ul li a:hover {
	background: #d4d600;
	color: #444446;
}	

#down-triangle {
	float: right;
	width: 0; 
 	height: 0;
 	margin-top: 8px;
 	border-top: 8px solid #f2f2f2;
	border-left: 8px solid transparent; 
	border-right: 8px solid transparent; 
}

input[type=radio] {
	display: none;
}
input[type="radio"] + label {
    color: #fff;
    font-family:Arial, sans-serif;
    font-size:14px;
    margin: 0px 5px;
}
input[type="radio"] + label .radio-tick {
    display:inline-block;
    width:12px;
    height:12px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label .radio-tick {
     background-color:#87888a;
}

input[type="radio"]:checked + label .radio-tick{
     background-color:#D4D600;
}

.div-radio{
	display: inline-block;
}

#public-message {
	font-style: italic;
    font-size: 12px;	
}


.jqplot-yaxis-tick {
    right: 0;
    top: 15px;
    text-align: right;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}





@media only screen and (max-height: 689px) {
	#slider {
		display: none;
	}
}

@media only screen and (min-height: 690px) {
	#slider {
		display: initial;
	}
}


/* ==========================================================================
   Mobile Style
   ========================================================================== */
   @media only screen and (max-width: 767px) {
   		header, #mainTitleBar {
		    height: 35px;
		}
		
	   	#counterNumber{
			display: none;
		}
		
		#infoContainer {
			padding-bottom	:	0px;
		}
		
		.jqplot-yaxis-tick {
		    right: 0;
		    top: 15px;
		    text-align: right;
		    max-width: 130px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
		
		.infoFooter {
		    margin-bottom: 5px;
		}
   
		#rightBar {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			/*position		:	absolute;*/
			top				:	65px;
			right			:	0px;
			left			:	0px;
			width			:	100%;	
			height			:	153px;	
			min-width		:	320px;
			z-index			:	100;	
			color			:	#ffffff;
		}
		
		.subHeader1 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	30px;
			display			:	block;
			width			:	100%;
			min-width		:	200px;
			text-align		:	center;
			vertical-align	:	top;	
			border-bottom	: 1px solid #ddd;		
		}
		
		.subHeader1 p {
			display:inline-block;
			margin-top		:	0px;
			margin-bottom	:	0px;
		}
		
		#counterChart{
			display : none;
		}
		#counterDataPeriod{
		display : none;
		}
		 #counterDataInterval {
		 display : none;
		}
		
		
		#counterDataPeriod, #counterDataInterval {
			display : none;
		}
		
		.subHeader1 img {
			display			:	none;
		}
		
		#periodDiv {
			height			:	100%;
			display			:	inline-block;
			/*padding-top		:	7px;*/
			padding-left	:	15px;
			font-size		:	13px;
			font-weight		:	bold;
		}
		
		.subHeader2 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	80px;
			display			:	block;
			width			:	100%;
			min-width		:	320px;
			text-align		:	center;
			vertical-align	:	top;
			border-bottom	: 1px solid #ddd;	
			
		}
		.subHeader3 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	40px;
			display			:	inline-block;
			width			:	49%;
			min-width		:	100px;
			text-align		:	center;
			vertical-align	:	top;
			border-right	: 1px solid #ddd;
			font-size		:	13px;
		}
		.subHeader4 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	40px;
			display			:	inline-block;
			width			:	49%;
			min-width		:	100px;
			text-align		:	center;
			vertical-align	:	top;
			font-size		:	12px;
		}
		
		.subHeader3 p {
			margin-top	:	2px;
			margin-bottom	:	0px;
		}
		
		.subHeader4 p {
			margin-top	:	2px;
			margin-bottom	:	0px;
		}
		
		#totalValue {
			font-size		:	14px;
			font-weight		:	bold;
		}
		
		#averageValue {
			font-size		:	14px;
			font-weight		:	bold;
		}
		
		#map_canvas {
			/*margin-top		:	215px;*/
			width			: 	100%;
			height			:	100%;
		}
		
		.TotalCountsInfo{
			display			:	inline-block;
			padding-left	:	10px;
			margin			:	0px 0px 5px 0px;
			color			:	#444446;
			font-size		:	12px;
			text-align		:	center;
			width			:	40%;
		}
		
		#headerChart {
			height			:	80px;
			width 			:	100%;
			margin-left		:	10px;
			margin-right	:	10px;
			color			:	#ffffff;
		}
		
		.infoWindow {
			top				:	auto;
			height			:	100px;
			bottom			:	5px;
			right			:	0px;
		}
		
		#infoContainer {
			min-height			:	100px;
		}
		
		#mainHeaderLeft, #detail, .hRule, #description, #gps, #slider, #counterChart, #options {
			display			:	none;
			height			:	0px;
			width			:	0px;
			overflow		:	hidden;
		}
		
		#txtPeriod{
			font-size		:	11px;
			color			:	#fff;
			margin-top		:	0px;
			width			:	100%;
			text-align		:	left;
		}
		
		#mainHeaderCenter{
			margin-left		:	5px;
			width			:	95%;
		}
		
		#mainHeaderRight{
			float			:	right;
			width			:	0px;
			height			:	100%;
			text-align		:	right;
			padding-right	:	10px;
		}
		
		#domaineName {
			font-size: 18px;
		}
		
		#shareDiv {
			display			:	none;
		}
   }
/* ==========================================================================
   Tablet Style
   ========================================================================== */
   
   
	@media only screen and (min-width: 769px) and (max-width: 969px) {
		header, #mainTitleBar {
		    height: 35px;
		}
		#infoContainer {
			padding-bottom	:	0px;
		}
		
		#counterChart{
			display : block;
		}
		#counterDataPeriod{
			display : block;
		}
		 #counterDataInterval {
		 	display : block;
		}
		
		.infoFooter {
		    margin-bottom: 5px;
		}
		
		.jqplot-yaxis-tick {
		    right: 0;
		    top: 15px;
		    text-align: right;
		    max-width: 130px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
		#counterNumber{
			display: none;
		}
		#mainHeaderLeft {
			width			:	24%;
		}
	
		#mainHeaderCenter{
			width			:	49%;
		}
		
		#mainHeaderRight{			
			width			:	24%;
			height			:	100%;
			text-align		:	right;
			padding-right	:	10px;
		}
	
		#rightBar {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			/*position		:	absolute;*/
			top				:	65px;
			right			:	0px;
			left			:	0px;
			width			:	100%;	
			height			:	112px;	
			z-index			:	100;	
			color			:	#ffffff;
			border-top		: 	1px solid #DDD;
		}
		
		#shareDiv {
			display			:	none;
		}
		
		
		
		
		.subHeader1 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	30px;
			display			:	block;
			width			:	100%;
			min-width		:	200px;
			text-align		:	center;
			vertical-align	:	top;	
			border-bottom	: 1px solid #ddd;		
		}
		
		.subHeader1 p {
			display:inline-block;
			margin-top		:	0px;
			margin-bottom	:	0px;
		}
		
		.subHeader1 img {
			display			:	none;
		}
		
		#periodDiv {
			height			:	100%;
			display			:	inline-block;
			/*padding-top		:	7px;*/
			padding-left	:	15px;
			font-size		:	13px;
			font-weight		:	bold;
		}
		
		.subHeader2 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	80px;
			display			:	inline-block;
			width			:	50%;
			min-width		:	270px;
			text-align		:	center;
			vertical-align	:	top;
			border-right	: 1px solid #ddd;
		}
		.subHeader3 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	80px;
			display			:	inline-block;
			width			:	24%;
			min-width		:	100px;
			text-align		:	center;
			vertical-align	:	top;
			border-right	: 1px solid #ddd;
			font-size		:	13px;
		}
		.subHeader4 {
			background		: 	rgb(96, 96, 98);
			background-color:	#606062;
			height			:	80px;
			display			:	inline-block;
			width			:	24%;
			min-width		:	100px;
			text-align		:	center;
			vertical-align	:	top;
			font-size		:	13px;
		}
		
		#totalValue {
			font-size		:	20px;
			font-weight		:	bold;
		}
		
		#averageValue {
			font-size		:	20px;
			font-weight		:	bold;
		}
				
		#map_canvas {
			/*margin-top		:	175px;*/
			width			: 	100%;
			height			:	100%;
		}
		
		.TotalCountsInfo{
			padding-left	:	10px;
			margin			:	20px 0px px 0px;
			color			:	#444446;
			font-size		:	12px;
		}
		
		#headerChart {
			height			:	80px;
			width 			:	100%;
			margin-left		:	10px;
			margin-right	:	10px;
		}
		
		.infoWindow {
			top				:	190px;
			bottom			:	5px;
		}
		
	}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


.marker-index {
	position: absolute;
	top: 25px;
	font-size: 18px;
	left: 0;
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.marker-icon {
	position: absolute;
	-webkit-text-stroke: 0.3px black;
	top: 3px;
	width: 24px;
	left: calc(50% - 12px);
	text-align: center;
	font-size: 19px !important;
}	

.leaflet-div-icon {
	background: transparent;
	border: none;
}