html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Verdana, Arial, sans-serif;
}
div.olMapViewport {
	 top: 0;
	 position: relative;
     z-index: 0;     
}


#view {
	position: relative;
}

#map {
	 top: 0;
	margin-right: 32em;
	padding: 0;
	height:100%;	
}
#legend {
	position: fixed;
	bottom: 2em;
	left: 4em;
	height: 3em;
	width: 30em;
	padding: 0.3em;
	 z-index:2000;
	background-color: rgba(255, 255, 255, 0);
}
#right {
	position: fixed;
	overflow-y:auto;
	overflow-x:hidden;		
	right: 0;
	top: 0;
	width: 32em;
	height: 100%;
	font-size: 1em;
	moz-box-shadow: 0px 0px 10px black;
	webkit-box-shadow: 0px 0px 9px black;
	box-shadow: -1px 0px 6px black;
	z-index: 10000;
}

#controls {
	position: fixed;
	top: 0em;
	left: 3em;
	width: 512px;
	z-index:2000;
	background-color: rgba(255, 255, 255, 0.2);
}

#about {
	margin: 1em;
}

#controlToggle {
	padding-left: 1em;
}

#controlToggle li {
	list-style: none;
}

#test {
	top: 0;
	opacity: 1;
	z-index: 1000;
	pointer-events: none;
	position: absolute;
	top: 0px;
}

#chart_container {
	position: absolute;
	top: 0px;
	right: 0px;
}
.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

.brush{
 fill: grey;
 stroke: #ff8c00;
 stroke-opacity: 0.8;
 stroke-width: 1;
}

.selected.bar {
fill: #ff8c00;
}

.unselected.bar {
fill: #7b6888;
}

.out.bar {
fill: #98abc5;
}

.axis text {
  font: 10px sans-serif;
}
.l text {
  font: 10px sans-serif;
}


.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.l {
 cursor: pointer;
 stroke: #000; 
}
.grid-background {
  fill: #ddd;
}

.grid line,
.grid path {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -20px;
  text-align: center;
  	font-size:0.8em;
}

.brush .extent {
  
  fill-opacity: .125;
  shape-rendering: crispEdges;
}