#chart {
    font: 11px sans-serif;
    width: 752px;
    shape-rendering: crispEdges;
    overflow: visible; }
  
  cite {
    font-size: 16px; }
  
  .hour {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 1px; }
    .hour.selected {
      stroke: yellow;
      stroke-width: 3px; }
  
  .step0 {
    fill: #fff;
    color: #fff; }
  
  .step1 {
    fill: #f7fbff;
    color: #f7fbff; }
  
  .step2 {
    fill: #deebf7;
    color: #deebf7; }
  
  .step3 {
    fill: #c6dbef;
    color: #c6dbef; }
  
  .step4 {
    fill: #9ecae1;
    color: #9ecae1; }
  
  .step5 {
    fill: #6baed6;
    color: #6baed6; }
  
  .step6 {
    fill: #4292c6;
    color: #4292c6; }
  
  .step7 {
    fill: #2171b5;
    color: #2171b5; }
  
  .step8 {
    fill: #084594;
    color: #084594; }
  
  .label.month, .label.hours {
    fill: #666;
    font: 11px sans-serif; }
  
  .annotation {
    fill: #666;
    font: 11px sans-serif; }
    .annotation rect {
      fill: none;
      stroke-width: 1px;
      stroke: #666; }
    .annotation line {
      fill: none;
      stroke-width: 1px;
      stroke: #666; }
  
  #map {
    height: 319px;
    width: 277px; }
    #map path {
      stroke: none;
      fill: #cde2e2; }
    #map .gage {
      fill: #666; }
  
  .source {
    fill: #666; }
  
  .key {
    fill: #333; }
  
  .key path {
    display: none; }
  
  .key line {
    stroke: #333;
    shape-rendering: crispEdges; }
  
  #tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #444;
    font-size: 12px;
    padding: 5px;
    min-width: 150px;
    max-height: 100px; }