/* Stylesheet written by Rich Donohue and Carl Sack for Time Series Proportional Symbol Maps with Leaflet and JQuery */

body {
    font-family: sans-serif;
}
h2 {
    font-size: 1.2em;
    margin-top: 3px;
}
h2,div, span {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#wrapper {
    width: 960px;
    margin: 15px auto;
}
#map {
	height: 450px;
	margin: 0px auto 0px;
}
.legend, .temporal-legend {
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
	color: white;
    background: blue;
	//background: rgba(255,255,255,0.8);
	background: rgba(0,0,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.legend, .predtemporal-legend {
    padding: 6px 10px;
    font: 14px/16px Arial, Helvetica, sans-serif;
	color:white;
    background: green;
	//background: rgba(255,255,255,1);
	background: rgba(0,128,0,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
#legendTitle {
    text-align: center;
    margin-bottom: 15px;
    font-variant: small-caps;
}
.symbolsContainer {
    float: left;
	margin-left: 50px;
}
.legendCircle {
     border-radius:50%; 
     border: 1px solid #537898; 
     background: rgba(113, 133, 152, .6);
	 display: inline-block;
}
.legendValue {
    position: absolute;
    right: 8px;
}
.range-slider {
    width: 250px;
	//border: 5px solid green;
	line-height: 200%;
	//background: rgba(0,128,0,0.8);
}
.temporal-legend {
    font-size: 1.2em;
    text-align: center;
}