body {
  font-family: "Verdana";
  margin: 0px auto;
  width: 1020px;
  background-color: rgb(34, 34, 34);
  color: rgb(170, 170, 170);
  fill: rgb(170, 170, 170);
}

#body{
  position: relative;
}

footer {
  padding: 2em 0 1em 0;
  font-size: 12px;
}

h1 {
  font-size: 24px;
  margin-top: .3em;
  margin-bottom: 0;
  display: inline-block;
}

#instructions{
  font-size: 90%;
  margin-left: 160px;
}

#about{
  display: inline-block;
  text-align: right;
  margin-left: 170px;
}

h1 + h2 {
  margin-top: 0;
}

h2 {
  font-weight: 400;
  font-size: 28px;
}

h1, h2 {
  font-family: "Yanone Kaffeesatz";
  text-rendering: optimizeLegibility;
}

form{
  display: inline-block;
}

#formDiv{
  display: inline-block;
  width: 200px;
}

#body > p {
  line-height: 1.5em;
  width: 640px;
  text-rendering: optimizeLegibility;
}


.border{  
  fill: black;
  fill-opacity: .3;

  stroke: white;
  stroke-width: .1px;

}

#land {
  fill-opacity: 0;
  fill: green;
}

.stateBoarder{
  display: none;
}

div.tooltip {
  position: absolute;
  width: 200px;
  padding: 8px;
  font: 12px sans-serif;
  background: #fff;
  border: solid 1px #aaa;
  border-radius: 8px;
  pointer-events: none;
}

.boldDetail{
  font-weight: bold;
}

.normalDetail{
  font-weight: normal;
}

#charts {
  padding: 10px 0;
}


#links{
  text-align: right;
  margin-right: 267px;
  margin-bottom: 10px;
}

.blacklink{ 
  color: grey;
  margin-bottom: 10px;
}

.bChart {
  display: inline-block;
  height: 740px;
  margin-bottom: 20px;
  color: white;
}

.cChart {
  display: inline-block;
  height: 200px;
  width: 200px;
  margin-bottom: 20px;
  float: left;
}

#map{
  border-bottom: solid 1px #aaa;
  border-top: solid 1px #aaa;
  height: 600px;
  overflow: hidden;
}

.active {
  fill: lightgrey;
}



#mass-chart{
  border-left: solid 1px #aaa;
}

.reset {
  padding-left: 1em;
  font-size: smaller;
  color: #ccc;
}

.background.bar {
  fill: #ccc;
}

.title{
  text-align: left;
  margin-left: 10px;
  font-weight: bold;
}

.foreground.bar {
  fill: steelblue;
  stroke-width: 0;
}

#mass-chart .foreground.bar {
  fill:  steelblue;
}

.bar{
  stroke:black;
  stroke-width: 0; 
}

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

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

.brush .extent {
  fill: steelblue;
  fill-opacity: .125;
}

.brush .resize path {
  fill: #eee;
  stroke: #666;
}

#fscale-chart {
    fill: #ffffff;
}

#year-chart {
  width: 220px;
}

#width-chart {
  width: 210px;
}

#length-chart {
  width: 200px;
}
#inj-chart {
  width: 200px;
}

.textBlock{
  display: inline-block;
  height: 200px;
  width: 200px;
  margin-bottom: 20px;
  vertical-align: text-top;
  float:left;
}

#leftText{
  font-size: 100%;
  width: 160px;
}

#rightText{
  font-size: 70%;
  width: 250px;
}

.stat{
  display: inline-block;
  width: 80px;
  margin-top: 19px;
  font-size: 130%;
  font-weight: bold;
}

#faq{
  margin-left: 24px;
  font-size: 142%;
}

.lineBreak{
  display: inline-block;
  width: 250px;
  height: 7px;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

path.line {
  fill: none;
  stroke: #666;
  stroke-width: 3px;
}

path.area {
  fill: #ffffff;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: #fff;
}

.x.axis .minor {
  stroke-opacity: 1;
}

.x.axis path {
  display: none;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}
.guideline {
  margin-right: 100px;
  float: right;
}