@squareSize: 56px;
@boardBorderWidth: 4px;
@boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
@tableBorder: 1px solid #ddd;

body, html { height: 100%; }
#GameWrapper { min-height: 100%; }
#GameBoardWrapper { position: relative; }
#GameTextWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: @boardSize + 10px;

  display: block;
  width: 180px;
  overflow-y: auto;
}
#GameText {
  display: table;
  border-left: @tableBorder;
  #ShowPgnText > :nth-child(-n+4) { border-top: @tableBorder; }
  .move {
    display: table-cell;
    float: left;
    border-bottom: @tableBorder;
    border-right: @tableBorder;
    text-align: center;
  }
  span.move { width: 40px; }
  a.move { width: 50px; }
  .variation { float: left; }
}

.boardTable {
  width: @boardSize;
  height: @boardSize;
  border: @boardBorderWidth solid #663300;
}
.whiteSquare, .blackSquare {
  width: @squareSize;
  height: @squareSize;
}
.pieceImage {
  height: @squareSize;
  width: @squareSize;
}

.whiteSquare, .highlightWhiteSquare {
  background: #FFCC99;
}
.blackSquare, .highlightBlackSquare {
  background: #CC9966;
}
.moveOn, .variationOn { background-color: #ccc; }