@font-face {
  font-family: "Lacuna";
  src: url("lacuna.ttf");
}
@font-face {
  font-family: "Antonio-Light";
  src: url("Antonio-Light.ttf");
}

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 12px;
  overflow: hidden;
}
svg {
  width: 100%;
  height: 100%;
  background: white;
}

.bar {
  stroke-width: 0.5;
  stroke: white;
  fill-opacity: 0.8;
}
.bar:hover {
  fill-opacity: 1;
}

.ref, .prec_ref {
  fill: none;
}
.prec_ref {
  stroke: steelblue;
  opacity: 0.2;
}
.ref_label_north, .ref_label_south {
  text-anchor: middle;
  font-size: 8px;
  text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  font-family: "Lacuna";
}

.prec_bubble {
  fill: steelblue;
  fill-opacity: 0.2;
}
.prec_bubble:hover {
  fill-opacity: 0.8;
}

.title {
  font-size: 32px;
  text-anchor: middle;
  text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  fill: #999;
  font-family: "Antonio-Light";
}

.hand {
  stroke: #777;
  stroke-dasharray: 2 2;
  fill: none;
}
.hand_label {
  font-size: 9px;
  font-weight: bold;
  font-family: "Lacuna";
  fill: #555;
}