/* Generated by less 2.5.1 */
html {
  margin: 0;
  padding: 0;
}
html body {
  margin: 0;
  padding: 0;
  width: 800px;
}
html body button.button {
  position: absolute;
  background: gray;
  border: none;
  padding: 12px 24px;
  margin: 10px;
  width: 100px;
}
html body button.button.rnd {
  top: 550px;
}
html body button.button.fix {
  top: 600px;
}
html body button.button.hide {
  top: 650px;
}
html body button.button.nav {
  position: relative;
}
html body table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  display: inline-block;
}
html body table.hidden {
  opacity: 0;
}
html body table tbody {
  margin: 0;
  padding: 0;
}
html body table tbody tr.row {
  margin: 0;
  padding: 0;
}
html body table tbody tr.row span.cell {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 64px;
  height: 64px;
  border: 1px solid black;
}
html body table tbody tr.row span.red {
  background-color: red;
}
html body table tbody tr.row span.orange {
  background-color: orange;
}
html body table tbody tr.row span.blue {
  background-color: blue;
}
html body table tbody tr.row span.yellow {
  background-color: yellow;
}
html body table tbody tr.row span.white {
  background-color: white;
}
html body table tbody tr.row span.green {
  background-color: green;
}
html body table tbody tr.row span.empty {
  background-color: transparent;
  border: 1px solid transparent;
}
html body table tbody tr.row span.center::after {
  content: '';
  position: absolute;
  display: block;
  width: 64px;
  height: 64px;
  text-align: center;
  font-size: 64px;
}
html body table tbody tr.row span.center.f::after {
  content: 'F';
}
html body table tbody tr.row span.center.u::after {
  content: 'U';
}
html body table tbody tr.row span.center.d::after {
  content: 'D';
}
html body table tbody tr.row span.center.r::after {
  content: 'R';
}
html body table tbody tr.row span.center.l::after {
  content: 'L';
}
html body table tbody tr.row span.center.b::after {
  content: 'B';
}