a { text-decoration: none; }
h1,h2,h3,h4,h5 { font-family: "Lato", sans-serif; }
body { 
  margin: 0; 
  padding: 0; 
  font-family: "Lato", sans-serif; 
}
#map { 
  position:absolute; 
  top:0; bottom:0; 
  width:100%; 
  background: #FFCC00; 
}
#header { 
  width: 100%; 
  text-align: center; 
  padding: 10px 0 15px 0; 
  background: #000; 
  background: rgba(0, 0, 0, 0.8);  
  height: 60px; 
  z-index: 10; 
  position: absolute; 
  bottom: 0px; 
  color: #FFCC00;
  font-size: 20px;
  font-weight: bold;  
}


#info {
  z-index: 10;
  width: 300px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 95px;
  left: 10px;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  height: 300px;
}
#info a {
  color: #ffcc00;
}
.mapbox-share-buttons a {
  color: #fff !important;
}
#info .inner {
  padding: 16px;
  color: #fff;
  overflow: hidden;
  font-size: 14px;
}
.next-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  color: #ffcc00;
}
.prev-btn {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: #ffcc00;
  display: none;
}
.map-move {
  color: #ffcc00;
}
#info-close {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 15px;
  width: 15px;
  background: url("images/close.png") no-repeat;
  text-indent: -9999px;
  display: block;
  color: #C3C3C3 !important;
}
#info-open {
  width: 30px;
  border-radius: 3px 3px 3px 3px;
  background: #000;
  position: absolute;
  bottom: 95px;
  left: 10px;
  z-index: 10;
  display: none;
  color: #fff;
  text-align: center;
  font-family: "Georgia", serif;
  line-height: 2;
  font-weight: bold;
}

.leaflet-container a.leaflet-popup-close-button {
  height: 15px;
  width: 15px;
  background: url("images/close.png") no-repeat;
  text-indent: -9999px;
  top: 10px;
  right: 5px;
}



#progress {
  height: 4px;
  background: #FF66CC;
  position: absolute;
  top: 0px;
  left: 0px; 
}
#fact-1 #progress {
  width: 4%;
}
#fact-2 #progress  {
  width: 8%;
}
#fact-3 #progress  {
  width: 12%;
}
#fact-4 #progress  {
  width: 16%;
}
#fact-5 #progress  {
  width: 20%;
}
#fact-6 #progress  {
  width: 24%;
}
#fact-7 #progress  {
  width: 28%;
}
#fact-8 #progress  {
  width: 34%;
}
#fact-9 #progress  {
  width: 36%;
}
#fact-10 #progress  {
  width: 40%;
}
#fact-11 #progress  {
  width: 44%;
}
#fact-12 #progress  {
  width: 48%;
}
#fact-13 #progress  {
  width: 52%;
}
#fact-14 #progress  {
  width: 56%;
}
#fact-15 #progress  {
  width: 60%;
}
#fact-16 #progress  {
  width: 64%;
}
#fact-17 #progress  {
  width: 68%;
}
#fact-18 #progress  {
  width: 72%;
}
#fact-19 #progress  {
  width: 76%;
}
#fact-20 #progress  {
  width: 80%;
}
#fact-21 #progress  {
  width: 84%;
}
#fact-22 #progress  {
  width: 86%;
}
#fact-23 #progress  {
  width: 88%;
}
#fact-24 #progress  {
  width: 92%;
}
#fact-25 #progress  {
  width: 96%;
}
#fact-26 #progress  {
  width: 98%;
}
#fact-27 #progress  {
  width: 100%;
}


.legend {
  position: absolute;
  z-index: 10;
  bottom: 95px;
  right: 10px;
  width: 280px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px 5px 5px 5px;
  color: #fff;
  padding: 10px;
  font-size: 13px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}
.legend .legend-title {
  text-align: left;
  margin-bottom: 8px;
  font-size: 12px;
}
.legend .legend-scale ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
.legend .legend-scale ul li {
  display: block;
  float: left;
  width: 50px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 80%;
  list-style: none;
}
.legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 15px;
  width: 50px;
}
.legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}
.legend a {
  color: #ccc;
}
.legend-story {
  height: 65px;
  width: 40px;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 11px;
  text-align: right;
} 
.legend-story img {
  margin: 5px 0 0 0;
}
    
    

.map-tooltip-content table {
  border-collapse: true;
}
.map-tooltip-content td.breakdown { 
  width: 60px;
  height: 40px;
  text-align: center; 
}
.map-tooltip-content td {
  border: 1px solid #333;
}
.laws {
  font-weight: bold;
} 
.mode-val {
  font-size: 14px;
  font-weight: bold;
}
.cyclists .val {
  background: url("images/cyclists.png") no-repeat; 
  height: 50px;
  width: 50px;
  display: block;
  text-indent: -9999px;
}
.cars .val {
  background: url("images/cars.png") no-repeat; 
  height: 50px;
  width: 50px;
  display: block;
  text-indent: -9999px;
}
.motorcycles .val {
  background: url("images/motorcycles.png") no-repeat; 
  height: 50px;
  width: 50px;
  display: block;
  text-indent: -9999px;
} 
.peds .val {
  background: url("images/peds.png") no-repeat; 
  height: 50px;
  width: 50px;
  display: block;
  text-indent: -9999px;
}
.other .val {
  background: url("images/other.png") no-repeat; 
  height: 50px;
  width: 50px;
  display: block;
  text-indent: -9999px;
}          
.rate {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
} 
.val-0 {
  text-align: right;
  padding: 0 5px 0 0;
}
.val-1 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -140px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-2 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -128px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-3 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -112px 0px;
  padding: 0 5px 0 0;;
  text-align: right;
} 
.val-4 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -96px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-5 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -80px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-6 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -64px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-7 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -48px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-8 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -32px 0px;
  padding: 0 5px 0 0;
  text-align: right;
} 
.val-9 {
  background: url("images/level-bar.png") no-repeat;
  background-position: -16px 0px;
  padding: 0 5px 0 0;
  text-align: right;
}
.val-10 {
  background: url("images/level-bar.png");
  background-position: 0px 0px;
  padding: 0 5px 0 0;
  text-align: right;
}  


/* Marker cluster */
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-in;
  -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-in;
   transition: transform 0.2s ease-out, opacity 0.2s ease-in;
}
.marker-cluster-small {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster-small div {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster-medium {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster-medium div {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster-large {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster-large div {
  background-color: rgba(34, 123, 201, 0.6);
}
.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
}
.marker-cluster span {
  line-height: 30px;
}
.leaflet-popup-content-wrapper {
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
}
.leaflet-popup-content {
  font-size: 14px;
  font-family: "Lato", san-serif; 
}
.leaflet-popup-tip {
  background: #000;
}
.leaflet-popup-content h2 {
  line-height: 1.2;
  font-size: 18px;
}
.leaflet-popup-content h2 a {
  color: #fff; 
}
.leaflet-popup-content p {
  line-height: 1.2;
}
.leaflet-container #view-story,
.leaflet-container .flexslider a {
  color: #FFCC00;
}
.leaflet-container .slides li {
  background: url("images/image-loader.gif") no-repeat center;
}



/* mapbox css */
#map-ui {
  position: absolute;
  top: 20px;
  right: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;  
  display: none;
}
#map-ui a {
  background: #FFF;
  color: #3C4E5A;
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid #BBB;
  border-bottom-width: 0;
  min-width: 138px;
  padding: 10px;
  text-decoration: none;
}
#map-ui a:hover {
  background: #ECF5FA;
}
#map-ui li:last-child a {
  border-bottom-width: 1px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

#map-ui li:first-child a {
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
#map-ui a.active {
  background: #222;
  border-color: #3887BE;
  border-top-color: #FFF;
  color: #FFF;
}
.leaflet-control-layers-expanded {
  background: #000;
  color: #fff;
}
.map-tooltip {
  background: #000;
  color: #aaa;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  border: none;
  width: 300px !important;
  max-width: 300px !important;
}
.footnote {
  font-size: 11px;
  float: right;
  display: block;
}
#branding a {
  width: 279px;
  height: 36px;
  background: url("images/pulitzer-center.png") no-repeat;
  display: block;
  float: right;
  margin: 13px 10px 0 0;
  opacity: 1;
  text-indent: -9999px;
}
#title {
  font-weight: bold;
  font-size: 36px;
  color: #fff;
  float: left;
  margin: 9px 0 0 10px;
}
#title a {
  color: #fff;
}
.stat {
 color: #FFCC00;
 font-weight: normal;
 font-size: 20px;
}
sup {
 font-size: 10px;
}
.leaflet-control a.mapbox-share {
  background-color: #777 !important;
}
.leaflet-control-zoom-fullscreen { 
  background-image: url("images/icon-fullscreen.png"); 
}
.leaflet-container:-webkit-full-screen { 
  width: 100% !important; 
  height: 100% !important; 
}
#fullscreen {
  color: #eee;
  position: absolute;
  bottom:10px;
  right:10px;
  display: block;
  z-index: 20;
  font-size: 14px;
  height: 20px;
  padding: 5px;
  background: #000;
  display: none;
  cursor: pointer;
  border-radius: 5px 5px 5px 5px;
}
#fullscreen:hover {
  background: #444;
}
.flexslider {
  border: 0px !important;
  background: none !important;
}
#view-story {
  width: 300px;
  text-align: right;
  display: block;
}
.leaflet-popup-content p {
  margin-bottom: 0px;
}
.loading {
  z-index: 10;
  position: absolute;
  right: 10px;
  top: 10px;
  background: url("images/ajax-loader.gif");
}
.leaflet-control-layers-toggle {
  height: 26px !important;
  width: 26px !important;
  background-image: none;
  background: #777;
  box-shadow: none;
  border: 1px solid #000;
  border-radius: 3px 3px 3px 3px;
}
.leaflet-control-layers {
  box-shadow: none !important;
}
#pointer {
  z-index: 10;
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  top:0;
  font-size: 60px;
  text-shadow: 2px 2px 2px #333;
  color: #fff;
  bottom:0;
  margin-top:auto;
  margin-bottom:auto;
  background: url("css/images/pointer.png") no-repeat;
  width: 50px;
  height: 25px;
  line-height: 1;
  display: none;
  opacity: 0.9;
}
#twitter {
  z-index: 20;
  position: absolute;
  left: 50px;
  top: -262px;
  width: 260px;
}


/* Media queries */
@media (max-width: 700px) {
  #header { 
    background: none;
    padding: 0;
  }
  #title a {
    color: #000;
    font-size: 30px;
    text-shadow: 1px 1px 1px #ccc;
  }
  #header #branding,
  #header .stat, 
  #twitter,
  #progress {
    display: none;
  }
  .footnote,
  .leaflet-popup-content .flexslider,
  .leaflet-popup-content p {
    display: none;
  }
  .leaflet-popup-content h2 {
    font-size: 13px;
  }
  #fullscreen {
    display: block;
  }
  .legend, 
  #info,
  #info-open {
    display: none !important;
  }
  .map-tooltip-content table {
    display: none;
  }
}