body {
  background-color: whitesmoke;

  /*
   * the non-white background color is only to make it clear where our SVG is
   * located on the page and can be removed in the final version
   */
}

svg {
  background-color: white;
}

/*
 * i prefer to define values using em, ex, or rem (which are relative lengths),
 * but to simplify the example everything uses px (which is an absolute length)
 * see: https://developer.mozilla.org/en-US/docs/Web/CSS/length
 */

.axis-title, .legendTitle {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 12px;
  font-weight: bold;
}

#labels text {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 9px;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;

  /*
   * text shadow:
   * https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
   */
}

.tick text, .legendCells \.label {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9px;
  fill: #666666;
  font-weight: normal;
}


#averages text {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10px;
  fill: black;
  fill-opacity: 0.5;
}


.x-label {
  font-family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
}

.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  display: inline-block;
}