@import "skolar.css";

h1 {
  font-family: "Skolar";
  color: #933;
  font-weight: 300;
  font-variant: small-caps;
}
h1 span.interlinear-type {
  color: #999;
  font-size: 80%;
}

div.container {
  width: 800px;
  margin: 50px auto;
}
div.unit {
  display: inline-block;
  margin-bottom: 1em;
  color: black;
  font-family: "Skolar";
  padding: 2px 4px;
}
.txt {
  display: inline-block;
  font-size: 16pt;
  margin-right: 0.5em;
}
.gls {
  display: inline-block;
  font-size: 10pt;
  font-family: sans-serif;
  color: gray;
}

body.hover div.unit, body.toggle div.unit {
  cursor: pointer;
  color: #333;
}
body.hover div.unit:hover, body.toggle div.unit:hover {
  color: #000;
}

body.hover .gls, body.toggle .gls, body.frequency .gls {
  color: transparent;
}

body.toggle .gls.show, body.frequency .gls.show {
  color: gray;
}

body.hover div.unit:hover .gls {
  color: gray;
}

p.freq-controls {
  font-family: sans-serif;
  margin: 2em 0;
}

span.freq-toggle {
  cursor: pointer;
  text-decoration: underline;
}

span.freq-toggle.selected {
  font-weight: bold;
}