.html, .body, #chart1, svg {
  margin: 0px;
  padding: 0px;
  height: 105%;
  width: 100%;
}


.chart {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;

}

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

.axis path,
.axis line {

  fill: none;
  stroke: lightgray;
  stroke-width : 1px;
  shape-rendering: crispEdges;
}

.tallbar {
  opacity: 0.9;
}

.circumference {
  fill-opacity : 0;
}

.tallbar:hover {
  opacity: 1;
}

.d3-tip {
  line-height: 1;  
  padding: 12px;
  background: indigo;
  opacity: 0.75;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  font-family: SourceSansPro-Bold;
}

/* 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: indigo;
  content: "\25BC";
  position: absolute;
  text-align: center;
}

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


  /*  svg {
            display: block;
        }*/

 

 rect:hover {
    fill : orangered;
  }

  .farm-chart .chart {
    display: block;
    float : left;
  }

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

  .axis path,
  .axis line {

    fill: none;
    stroke: #aaa;
    stroke-width : 1px;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

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

  .chart-title {
    font: 12px sans-serif;
    font-weight : bold;
    fill : #760000;
  }

  .clear-button {
    font: 12px sans-serif;
    cursor: pointer;
    fill : #760000;
    text-decoration : underline;
  }

  .cow-charts {
    margin-top : 50px;
  }

  div.summary {     
    float: left;
    width: 500px;    
    font: 12px sans-serif;    
  }

  div.slider {
    float: right;
    cursor: pointer;
  }

  div p {
    margin-top : -5px;
    padding : 0;
  }

  .clearBoth { clear:both; }

.d3-tip {
  line-height: 1;  
  padding: 12px;
  background: indigo;
  opacity: 0.75;
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
}

/* 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: indigo;
  content: "\25BC";
  position: absolute;
  text-align: center;
}

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