html body, #content, #footer {
  background-color:#222;
  background:#222 !important;
}
body, p.byline {
  color:#ddd;
}
body a, body a:hover {
  color:#5B98C3;
}
header[role="banner"] {
  border-bottom:1px solid #fff;
}
header[role="banner"]>h1 a {
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: inherit;
  background: url(//propublica.s3.amazonaws.com/logos/pp-logo-light.min.svg) 0 10px no-repeat !important;
}
nav .facebook a {
  background: url(//static.propublica.org/projects/ferguson-segregation/assets/img/nav-sprites-light.min.svg) 0 0 no-repeat !important;
}
nav .twitter a {
  background: url(//static.propublica.org/projects/ferguson-segregation/assets/img/nav-sprites-light.min.svg) 0 -50px no-repeat !important;
}
#graphic p {
  max-width: 480px;
  margin:0 auto 20px !important;
}
#graphic h2 {
  font-family: Graphik,helvetica,arial,sans-serif;
}
#graphic h2.toph2 {
  font-family: 'Tiempos Text', Georgia, serif;
}
.harvey-map {
  margin:0 auto 20px;
  width:740px;
  height:543px;
  position:relative;
}
.harvey-map img {
  width:100%;
}


.map-label-layer {
  z-index:3;
}
.map-label {
  position: absolute;
  font-family: Graphik,helvetica,arial,sans-serif;
  font-weight: 800;
  color: #222;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  letter-spacing: 0.1em;
  font-size: 10px;
  word-spacing: 0.05em;
  text-align:center;
  user-select:none;
}
.map-label.map-label-dark {
  color:#fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.harvey-harris-line {
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  z-index:3;
}

.label-water {
  font-style:italic;
  text-transform:uppercase;
}
.label-water-small {
  font-style:italic;
  text-transform:none;
}
.label-city-big {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
}
.label-city-small {
  letter-spacing: 0.01em;
  max-width:80px;
}
.map-label-downtown {
  top: 300px;
  left: 370px;
}
.map-label-cypress {
  left: 200px;
  top: 184px;
}
.map-label-pasadena {
  left: 490px;
  top: 370px;
}
.map-label-galveston-bay {
  left: 630px;
  top: 460px;
}
.map-label-harris-cty {
  left: 10px;
  top: 7px;
}
.map-label-addicks {
  left: 190px;
  top: 280px;
}
.map-label-barker {
  top: 330px;
  left: 170px;
}
.map-label-buffalo-bayou {
  top: 320px;
  left: 290px;
}
.map-legend {
  width: 740px;
  margin:0 auto;
  position:relative;
  background:#dedede;
  padding:5px;
}
.map-legend-label {
  clear:both;
  position:relative;
  text-align:left;
  font-weight:500;
  text-shadow:none;
}
.map-label-anno {
  font-weight:500;
}
.map-label-anno-100yr {
  width: 80px;
  top: 170px;
  left: 10px;
}
.map-label-anno-bayou {
  width: 230px;
  text-align: left;
  top: 430px;
  left: 100px;
}
.map-legend-label-dot {
  border-radius:10px;
  width:10px;
  height:10px;
  margin-right:5px;
  float:left;
}
.map-legend-label-square {
  width:10px;
  height:10px;
  line-height:10px;
  margin-right:5px;
  float:left;
}
.fema-square {
  background:#b3aea4;
}
.development-square {
  background:#e4268c;
}
.flooded-structure-dot {
  background:#000282;
}
.flooded-in-zone-dot {
  background:#67b2da;
}
.locator-map {
  position:absolute;
  bottom:5px;
  left:5px;
  z-index:3;
  width:80px !important;
}
p.sources {
    font-family: Graphik,helvetica,arial,sans-serif;
    font-size:12px;
}
.arrow {
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
@media screen and (max-width:480px) {
 .harvey-map {
    margin:0 auto 20px;
    width:320px;
    height:233px;
    position:relative;
  }
  .map-legend {
    width:320px;
  }
  .map-label-cypress {
    left: 80px;
    top: 74px;
  }
  .map-label-downtown {
    top: 120px;
    left: 140px;
  }
  .map-label-pasadena {
    display:none;
  }
  .map-label-galveston-bay {
    left: 260px;
    top: 180px;
  }
  .harvey-harris-line {
    display:none;
  }
  .map-label-addicks {
    left: 60px;
    top: 106px;
    width: 80px;  
  }
  .map-label-barker {
    display:none;
  }
  .map-label-anno, .arrow-container {
    display:none;
  }
}