index.css

body {
  text-align: center;
  font-family: sans-serif;
}

.top-controls {
  padding: 0.2em;
  background-color: #f7f7f7;
}

.control, .control-base {
  background-color: #DDD;
  padding: 0 0.2em;
  margin: 4px;
  border-radius: 10px;
}
.control {
  display: inline-block;

  &.button {
    font-size: 300%;
    width: 1em;
    height: 1.2em;
  }
  &.value {
    padding: 0.3em;
    text-align: left;
  }
  &.value .value-text {
    font-size: 150%;
    font-family: monospace;
  }

  &.range-control {
    padding: 0.4em;
  }
  &.range-control > * {
    display: block;
    text-align: left;
  }
  &.range-control label {
    padding-right: 1em;
  }
  &.range-control .value {
    font-size: 150%;
    font-family: monospace;
  }
}
label, .label {
  font-size: 80%;
  color: #555;
  font-weight: 100;
}

.play-pause-button:before { content: "▶︎"; }
.playing .play-pause-button:before { content: "||"; }
.restart-button:before { content: "⎌"; }

.beat-grid {
  border-collapse: collapse;
  margin: 10px auto;

  td {
    padding: 0;
    &.label {
      padding: 0.3em;
      margin: 0px 0;
      height: 100%;
      border-bottom: solid white 1px;  /* TODO: make margin work */
      border-radius: 15px 0 0 15px;
    }
  }
  button {
    background-color: #444;
    width:  4em;
    height: 4em;

    &.on {
      background-color: #DD0;
    }
    &.current {
      background-color: #888;
    }
    &.current.on {
      background-color: #FF3;
    }
  }
}

.row > * {
  vertical-align: middle;
}