styles.css

body {
  font-family: Roboto;
}

#content {
  width: 700pt;
  margin: 0 auto;
}

#authors {
  margin-bottom: 20pt;
}

#page-description {
  margin-bottom: 3em;
}

#loading-message {
  font-size: 24pt;
  margin-top: 100pt;
  text-align: center;
}

#loading-message small {
  font-size: 14pt;
}

#month-selector {
  display: inline-block;
  box-shadow: 0 0 0.2em black;
  margin: 0.3em;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: 0.25em;
  padding-bottom: 1em;
  background-color: white;
  opacity: 1.0;
}

#month-selector.floating {
  opacity: 0.5;
}

#month-selector:hover {
  opacity: 1.0;
}

#month-name-label {
  float: left;
  width: 100px;
}

.map-body {
  margin-top: 40pt;
  margin-bottom: 3em;
}

.map-description {
  
}

svg {
  box-shadow: 0 0 0.2em black;
  margin: 0.3em;
}

svg .taxi-zone path {
  fill: black;
  stroke: black;
}

svg .taxi-zone.selected path {
  fill: #e41a1c;
}

svg .taxi-zone.no-data path {
  fill: black;
}

.map-body.time svg .taxi-zone.has-data path {
  fill: #034C87;
}

#gradient-scale-time stop {
  stop-color: #034C87;
}

.map-body.fare svg .taxi-zone.has-data path {
  fill: darkgreen;
}

#gradient-scale-fare stop {
  stop-color: darkgreen;
}

.map-body.count svg .taxi-zone.has-data path {
  fill: #670675;
}

#gradient-scale-count stop {
  stop-color: #670675;
}

div.tooltip {
  font-size: 1em;
  color: white;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border-radius: 3px;
  text-align: middle;
  opacity: 0;
  background: rgba(50,50,50,0.75);
  padding-left: 0.125em;
  padding-right: 0.125em;
  padding-top: 0.125em;
  padding-bottom: 0.125em;
  visibility: visible;
}