table {
  border-spacing: 0px;
  border: 1px black solid;
  margin: 0 auto;
  max-width: 550px;
  width: 99%;
}

td {
  width: 12.5%;
  height: 0px;
  margin: 0;
  padding: 0 0 12.5% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center, top left, top right, bottom left, bottom right;
}

td.hybrid {
  background-size: 80% auto, 50% auto, 50% auto, 50% auto, 50% auto;
}

td.white {
  background-color: #ffffff;
}

td.black {
  background-color: #808080;
}

td.prev-move.black {
  background-color: #aabbff;
}

td.prev-move.white {
  background-color: #bbccff;
}

td.selected.black {
  background-color: #c0c000;
}

td.selected.white {
  background-color: #dddd00;
}

td.available-move.black {
  background-color: #209920;
}

td.available-move.white {
  background-color: #22dd22;
}

td.check-move.black {
  background-color: #d04040;
}

td.check-move.white {
  background-color: #dd6666;
}

td.check.black {
  background-color: #c00000;
}

td.check.white {
  background-color: #dd0000;
}


#message {
  margin: 0 auto;
  text-align: center;
  font-size: 2.0rem;
}

#container {
  text-align: center;
}

button {
  font-size: 120%;
  border-radius: 0;
  -webkit-appearance: none;
  margin-top: 10px;
}

p {
  margin: 0;
}

.hidden {
  display: none;
}

/* gen_pieces_css.rb */
td.piece-white.king{background-image:url("images/white_king.svg");}
td.piece-black.king{background-image:url("images/black_king.svg");}
td.piece-white.queen{background-image:url("images/white_queen.svg");}
td.piece-black.queen{background-image:url("images/black_queen.svg");}
td.piece-white.rook{background-image:url("images/white_rook.svg");}
td.piece-black.rook{background-image:url("images/black_rook.svg");}
td.piece-white.bishop{background-image:url("images/white_bishop.svg");}
td.piece-black.bishop{background-image:url("images/black_bishop.svg");}
td.piece-white.knight{background-image:url("images/white_knight.svg");}
td.piece-black.knight{background-image:url("images/black_knight.svg");}
td.piece-white.pawn{background-image:url("images/white_pawn.svg");}
td.piece-black.pawn{background-image:url("images/black_pawn.svg");}
td.piece-white.king.queen{background-image:url("images/white_king.svg"),url("images/white_queen.svg");}
td.piece-black.king.queen{background-image:url("images/black_king.svg"),url("images/black_queen.svg");}
td.piece-white.king.rook{background-image:url("images/white_king.svg"),url("images/white_rook.svg");}
td.piece-black.king.rook{background-image:url("images/black_king.svg"),url("images/black_rook.svg");}
td.piece-white.king.bishop{background-image:url("images/white_king.svg"),url("images/white_bishop.svg");}
td.piece-black.king.bishop{background-image:url("images/black_king.svg"),url("images/black_bishop.svg");}
td.piece-white.king.knight{background-image:url("images/white_king.svg"),url("images/white_knight.svg");}
td.piece-black.king.knight{background-image:url("images/black_king.svg"),url("images/black_knight.svg");}
td.piece-white.king.pawn{background-image:url("images/white_king.svg"),url("images/white_pawn.svg");}
td.piece-black.king.pawn{background-image:url("images/black_king.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.rook{background-image:url("images/white_queen.svg"),url("images/white_rook.svg");}
td.piece-black.queen.rook{background-image:url("images/black_queen.svg"),url("images/black_rook.svg");}
td.piece-white.queen.bishop{background-image:url("images/white_queen.svg"),url("images/white_bishop.svg");}
td.piece-black.queen.bishop{background-image:url("images/black_queen.svg"),url("images/black_bishop.svg");}
td.piece-white.queen.knight{background-image:url("images/white_queen.svg"),url("images/white_knight.svg");}
td.piece-black.queen.knight{background-image:url("images/black_queen.svg"),url("images/black_knight.svg");}
td.piece-white.queen.pawn{background-image:url("images/white_queen.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.pawn{background-image:url("images/black_queen.svg"),url("images/black_pawn.svg");}
td.piece-white.rook.bishop{background-image:url("images/white_rook.svg"),url("images/white_bishop.svg");}
td.piece-black.rook.bishop{background-image:url("images/black_rook.svg"),url("images/black_bishop.svg");}
td.piece-white.rook.knight{background-image:url("images/white_rook.svg"),url("images/white_knight.svg");}
td.piece-black.rook.knight{background-image:url("images/black_rook.svg"),url("images/black_knight.svg");}
td.piece-white.rook.pawn{background-image:url("images/white_rook.svg"),url("images/white_pawn.svg");}
td.piece-black.rook.pawn{background-image:url("images/black_rook.svg"),url("images/black_pawn.svg");}
td.piece-white.bishop.knight{background-image:url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.bishop.knight{background-image:url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.bishop.pawn{background-image:url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.bishop.pawn{background-image:url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.knight.pawn{background-image:url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.knight.pawn{background-image:url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.rook{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg");}
td.piece-black.king.queen.rook{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg");}
td.piece-white.king.queen.bishop{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_bishop.svg");}
td.piece-black.king.queen.bishop{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_bishop.svg");}
td.piece-white.king.queen.knight{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_knight.svg");}
td.piece-black.king.queen.knight{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_knight.svg");}
td.piece-white.king.queen.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_pawn.svg");}
td.piece-white.king.rook.bishop{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg");}
td.piece-black.king.rook.bishop{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg");}
td.piece-white.king.rook.knight{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_knight.svg");}
td.piece-black.king.rook.knight{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_knight.svg");}
td.piece-white.king.rook.pawn{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_pawn.svg");}
td.piece-black.king.rook.pawn{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_pawn.svg");}
td.piece-white.king.bishop.knight{background-image:url("images/white_king.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.king.bishop.knight{background-image:url("images/black_king.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.king.bishop.pawn{background-image:url("images/white_king.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.king.bishop.pawn{background-image:url("images/black_king.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.king.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.rook.bishop{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg");}
td.piece-black.queen.rook.bishop{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg");}
td.piece-white.queen.rook.knight{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_knight.svg");}
td.piece-black.queen.rook.knight{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_knight.svg");}
td.piece-white.queen.rook.pawn{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.rook.pawn{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.bishop.knight{background-image:url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.queen.bishop.knight{background-image:url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.queen.bishop.pawn{background-image:url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.bishop.pawn{background-image:url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.knight.pawn{background-image:url("images/white_queen.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.knight.pawn{background-image:url("images/black_queen.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.rook.bishop.knight{background-image:url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.rook.bishop.knight{background-image:url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.rook.bishop.pawn{background-image:url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.rook.bishop.pawn{background-image:url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.rook.knight.pawn{background-image:url("images/white_rook.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.rook.knight.pawn{background-image:url("images/black_rook.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.bishop.knight.pawn{background-image:url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.bishop.knight.pawn{background-image:url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.rook.bishop{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg");}
td.piece-black.king.queen.rook.bishop{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg");}
td.piece-white.king.queen.rook.knight{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_knight.svg");}
td.piece-black.king.queen.rook.knight{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_knight.svg");}
td.piece-white.king.queen.rook.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.rook.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.bishop.knight{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.king.queen.bishop.knight{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.king.queen.bishop.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.bishop.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.rook.bishop.knight{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.king.rook.bishop.knight{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.king.rook.bishop.pawn{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.king.rook.bishop.pawn{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.king.rook.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.rook.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.bishop.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.bishop.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.rook.bishop.knight{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.queen.rook.bishop.knight{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.queen.rook.bishop.pawn{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.rook.bishop.pawn{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.rook.knight.pawn{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.rook.knight.pawn{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.bishop.knight.pawn{background-image:url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.bishop.knight.pawn{background-image:url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.rook.bishop.knight.pawn{background-image:url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.rook.bishop.knight.pawn{background-image:url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.rook.bishop.knight{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg");}
td.piece-black.king.queen.rook.bishop.knight{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg");}
td.piece-white.king.queen.rook.bishop.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.rook.bishop.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.rook.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.rook.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.bishop.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.bishop.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.rook.bishop.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.rook.bishop.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.queen.rook.bishop.knight.pawn{background-image:url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.queen.rook.bishop.knight.pawn{background-image:url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}
td.piece-white.king.queen.rook.bishop.knight.pawn{background-image:url("images/white_king.svg"),url("images/white_queen.svg"),url("images/white_rook.svg"),url("images/white_bishop.svg"),url("images/white_knight.svg"),url("images/white_pawn.svg");}
td.piece-black.king.queen.rook.bishop.knight.pawn{background-image:url("images/black_king.svg"),url("images/black_queen.svg"),url("images/black_rook.svg"),url("images/black_bishop.svg"),url("images/black_knight.svg"),url("images/black_pawn.svg");}