#drill-output {
  font-size: 170%;
  margin-bottom: 0.8em;
  margin-top: 1em;
  text-align: center;
}

select.history {
  font-family: monospace;
}

td.history {
  padding-left: 2em;
}

table.base-10 td.position-1,
table.base-10 td.position-4,
table.base-10 td.position-7,
table.base-10 td.position-10,
table.base-10 td.position-13,
table.base-10 td.position-16
{
  background: #eeeecc;
}

table.base-16 td.position-1,
table.base-16 td.position-5,
table.base-16 td.position-10,
table.base-16 td.position-15,
table.base-16 td.position-20
{
  background: #eeeecc;
}

table.base-2 td.position-1,
table.base-2 td.position-5,
table.base-2 td.position-10,
table.base-2 td.position-15,
table.base-2 td.position-20
{
  background: #eeeecc;
}

tr.values td {
  border: none;
  text-align: center;
}

.ball {
  color: red;
  width: 22px;
  height: 22px;
}

option.highlighted {
  color: green;
  font-weight: bold;
  text-decoration: italic;  /* check this */
}

/* For small abaci, the ball color tells us whether it's 'on' or 'off' */
tr.small .ball.off {
  background-image: url(bead-off.png);
}
tr.small .ball.on {
  background-image: url(bead-on.png);
}

/* For large abaci, the ball color help us count the balls. */
tr.big .ball {
  background-image: url(bead-on.png);
}
tr.big .ball.bead-6,
tr.big .ball.bead-7,
tr.big .ball.bead-8,
tr.big .ball.bead-9,
tr.big .ball.bead-10 {
  background-image: url(bead-off.png);
}
table.school1 .ball.bead-5 {
  background-image: url(bead-off.png);
}

/**
 * Spread out large abaci.
 */
tr.big td {
  padding: 0.1em 0.3em 0.1em 0.3em;
}

.gap {
  width: 22px;
  height: 22px;
}