@bootstrap-less-path: "../../vendor/bootstrap/less/";

// Core variables and mixins
@import "@{bootstrap-less-path}variables.less";
@import "@{bootstrap-less-path}mixins.less";


/* Enable the scrolling of chess board up to the page top */

body, html { height: 100%; }
#GameWrapper { min-height: 100%; }
#GameBoardWrapper { position: relative; }


/* Chess board */

@squareSize: 56px;
@boardBorderWidth: 4px;
@boardSize: 8 * @squareSize + 2 * @boardBorderWidth;

.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;
}


/* Game text */

#GameText {
  position: absolute;
  top: 0;
  bottom: 0;
  left: @boardSize + 10px;
  right: 0;

  display: block;
  overflow-y: auto;
}
.moveOn, .variationOn {
  color: #fff;
  .bg-variant(@brand-primary);
}