<style>

#injection {
font-family: 'Helvetica Neue',Arial,sans-serif;
font-size:12px;
text-align:left;
height: 900px;
}

#injection .percent-note {
  font-size:11px;
  padding-top:5px;
  width: 130px;
}

#injectionmap {
  height: 900px;
}

/* MAP LEGEND */

#injectionmap .legend-box {
  left: 0;
  top: 0;
  margin-top: 30px;
  float: left;
  position: relative;
}

#injectionmap .legend {
  width: 440px;
}

#injectionmap .legend span {
border-right:1px solid #cdcdcd;
float:left;
height:15px;
width:65px;
}

#injectionmap .legend .bar {
height:10px;
}

#injectionmap .legend span.one {
background:#b4c4d3;
}

#injectionmap .legend span.two {
background:#829cb6;
}

#injectionmap .legend span.three {
background:#507598;
}

#injectionmap .legend span.four {
background:#053a6c;
}

#injectionmap .legend span.five {
background:#032341;
}

#injectionmap .legend-text {
font-size: 9px;
clear:both;
}

#injectionmap .legend-text span {
float:left;
text-align:left;
width:65px;
font-style: normal;
font-family: "Helvetice Neue", Arial, sans-serif;
}


/*MAP*/

#injection #map {
  cursor: pointer;
  float: left;
  height: 450px;
  position: absolute;
  top: 480px;
  z-index: 0;
}

#injection #states {
  cursor: pointer;
  height: 400px;
  position: relative;
  width: 560px;
  z-index: 500;
}

#injection #hawaii {
  bottom: 60px;
  cursor: pointer;
  height: 210px;
  left: -60px;
  position: absolute;
  width: 140px;
  z-index: 0;
}

#injection #alaska {
bottom:60px;
cursor:pointer;
height: 80px;
position:absolute;
width:10px;
z-index:1000;
}

#injection .mini-text-1{
  font-size: 11px;
  position: relative;
  top: -10px;
}

#injection .mini-text {
  font-size: 11px;
  margin-bottom: 5px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* NEW */

#injectionmap #info {
  left: 600px;
    line-height: 16px;
    margin: 0;
    padding-top: 10px;
    position: relative;
    top: 0px;
    width: 360px;
  height: 600px;
}

#injectionmap #info p.header, .state-box {
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-transform:uppercase;
  font-size: 17px;
  font-weight: bold;
  height: 20px;
  margin-bottom: 10px;
}

.blurb h2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-transform:uppercase;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
}

.hover-box {
  position: relative;
  left: 140px;
  top: 20px;
}

.blurb {
    display: none;
    width: 360px;
  position: relative;
  left: 580px;
  top: -590px;
}

#numUIC {
  width: 360px;
  border-bottom: 1px solid #c3c3c3;
  margin-bottom: 10px;
}

p.explainer-tip {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

.blurb h3 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 0px;
  font-size: 13px;
  font-weight: bold;
  color: #000000;
  margin-top: 0;
  margin-bottom: 10px;
}

div.numWells {
  width: 360px;
  height: 75px;
  margin-bottom: 10px;
}

.class-type {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 0;
  height: 20px;
}

.blurb .number {
  font-family: "Helvetica Neue", Arial sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #261903;
}

.blurb .numWells .c1hw, .c1o, .c2, .c3, .c4 {
  width: 50px;
  height: 50px;
  float: left;
  padding: 0 5px 0;
  border-right: 1px solid #c3c3c3;
  margin-top: 25px;
}

.blurb .numWells .c5 {
  width: 45px;
  height: 50px;
  float: left;
  padding: 0 5px 0;
  margin-top: 25px;
}

#mechanicalIntegrity {
  width: 360px;
  height: 195px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

#mechanicalIntegrity p.class-type {
  padding-left: 10px;
  padding-bottom: 10px;
  height: 30px;
}

#mechanicalIntegrity .c1-miv {
  width: 90px;
  float:left; 
  margin-right: 10px;
  margin-top: 25px;
}

#mechanicalIntegrity .c2swd-miv {
  width: 120px;
  float:left; 
  margin-right: 10px;
  margin-top: 25px;
}

#mechanicalIntegrity .c2er-miv {
  width: 120px;
  float:left; 
  margin-right: 10px;
  margin-top: 25px;
}

.miv-graph {
  height: 100px;
  width: 90px;
  margin: 0 auto;
}

.miv-graph-container {
  height: 100px;
  float:left;
  position: relative;
  width: 27px;
  margin-right: 1px;
}

.miv-graph-container .miv-bar {
  float:left;
  width: 26px;
  background: #cecece;
  position: absolute;
  bottom: 0;
  border-bottom: 1px solid #cecece;
}

.miv-graph-container .miv-bar .bar-year {
  font-family: "Helvetica Neue", Arial sans-serif;
  font-size: 10px;
  width: 26px;
  position: absolute;
  bottom: -1.5em;
}

.miv-graph-container .miv-bar .bar-count {
  font-family: "Helvetica Neue", Arial sans-serif;
  font-size: 10px;
  width: 26px;
  position: absolute;
  color: #000000;
  background: none;
  text-align: center;
}

.miv-graph-container .miv-bar .active {
  background: #C29B00;
}

.miv-graph-container .miv-bar .label {
   font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
   font-size: 10px;
   position: relative;
 }

#waterContamination {
  width: 360px;
  height: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

.h20Left {
  width: 170px;
  float:left;
  margin-top: 25px;
}

.h20Right {
  width: 170px;
  float:left;
  margin-top: 25px;
}

#unauthorizedInjection {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

.singleStatLeft {
  width: 300px;
  text-align: left;
  margin-right: 10px;
  float: left;
}

.singleStatRight {
  width: 50px;
  /*text-align: right;*/
  float: right;
}

.singleNumber {
  font-family: "Helvetica Neue", Arial sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #261903;
}

#overpressurizedInjection {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

#significantLeaks {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3; 
}

#totalViolations {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

#dataExplainers {
  width: 360px;
  height: 100px;
  margin-bottom: 10px;
}

#dataExplainers p.explainer {
  font-style: italic;
  font-size: 11px;
}

#percentInspected {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}

#percentClass2Inspected {
  width: 360px;
  height: 25px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c3c3c3;
}


/* ROLLOVER */


.blurb .event-title{
  padding-left: 0;
  cursor:pointer;
}


#ns-fixed-div.sticky {
     position: fixed;
     top: 0;
     z-index:100;
}

.blurb .roll-out {
  transition: width 0.4s, height 0.4s, transform 0.4s;
  -webkit-transition: width 0.4s, height 0.4s, -webkit-transform 0.4s;
  -o-transition: width 0.4s, height 0.4s,-o-transform 0.4s;
  -moz-transition: width 0.4s ease 0s, height 0.4s ease 0s, -moz-transform 0.4s ease 0s;
  float: left;
  /*left: -17px;*/
  padding: 0;
  position: absolute;
}

.blurb .roll-out:hover .ns-box {
  display:block;
}


.ns-box {
  background: none repeat scroll 0 0 #F7F7F7;
  border-bottom: 1px solid #CECECE;
  border-left: 1px solid #CECECE;
  border-right: 1px solid #CECECE;
  border-top: 1px solid #065718 !important;
  box-shadow: 0 0 5px #ADADAD;
  color: #333333;
  display: none;
  padding: 10px 0;
  position: relative;
  top: -2px;
  width: 300px;
  z-index: 200;
}


#ns-shell .event-line {
 border-left: 3px solid #c4b48a;
 height: 25px;
 position: absolute;
}


#ns-shell .right-p {
  clear:both;
  float:left;
}
.blurb .arrow-up {
  border-bottom: 7px solid black;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  height: 0;
  position: absolute;
  top: -7px;
  width: 0;
}

.ns-box p {
  padding:0 10px;
}

.ns-box p.subhead {
  font-weight: bold;
}

.time-container {
  height: 25px;
  position: relative;    
  margin-bottom: 40px;
}

#ns-shell .subhead {
  font-size:13px;
  font-weight:bold;
  color:#444;
}

.blurb .active {
  display:block;
}

.blurb .inactive {
  display:none;
}

</style>