/*based on http://bost.ocks.org/mike/nations/ */
#chart {
  margin-left: -40px;
}

text {
  font: 10px sans-serif;
}

/*dots*/
.dot {
  stroke: #000;
  opacity: .5;
  stroke-opacity: .75;
}

.highlighted {
  stroke: #000;
  stroke-opacity: 1;
  stroke-width: 3;
  opacity: 1;
}

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

.label {
  fill: #777;
}

/*year*/
.year.label {
  font: 500 100px "Helvetica Neue";
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

/*layout of chart and checkboxes of mps*/
.chart-content {
    min-height: 460px;
}
.additional-column {
  max-height: 460px;
  /* from http://stackoverflow.com/questions/5715705/always-show-vertical-scrollbar-in-select */
  overflow-x: hidden;
}
#slider-form {
  width:80%;
  float:right;
}
  
/*computer*/
@media all and (min-width: 770px){
  .additional-column {
		text-align: right;
		float: right;
		width: 25%;
		background: none;
	}
 .main-column {
		width: 70%;
		float: left;
		margin-top: 30px;
		margin-right: 1%;
		padding-right: 1%;
	}
}


/*tooltips*/
/* http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html */
/* alternative, was not able to use it: bl.ocks.org/ilyabo/1373263 */
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 10em;                  
  height: 2.5em;                 
  padding: 2px;             
  font: .8em sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}