board.css

div.lichess_board_wrap {
  float: left;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 5px;
}
span.board_mark {
  position: absolute;
  text-transform: uppercase;
  font-size: 10px;
  color: #bbb;
  font-weight: bold;
}
span.board_mark.vert {
  right: -10px;
}
span.board_mark.horz {
  bottom: -14px;
}

div.lichess_board {
  width: 512px;
  height: 512px;
  position: relative;
  border-radius: 5px;
}

div.lcs {
  position: absolute;
  width: 64px;
  height: 64px;
}

/* generated - don't modify */
body.blue #GameBoard td.whiteSquare, body.blue #GameBoard td.highlightWhiteSquare, body.blue div.lcs.white, #top div.lcs.white.blue, body.blue div.lichess_board { background: #dee3e6; }
body.blue #GameBoard td.blackSquare, body.blue #GameBoard td.highlightBlackSquare, body.blue div.lcs.black, #top div.lcs.black.blue, body.blue span.theme_demo { background: #8ca2ad; }
body.brown #GameBoard td.whiteSquare, body.brown #GameBoard td.highlightWhiteSquare, body.brown div.lcs.white, #top div.lcs.white.brown, body.brown div.lichess_board { background: #f0d9b5; }
body.brown #GameBoard td.blackSquare, body.brown #GameBoard td.highlightBlackSquare, body.brown div.lcs.black, #top div.lcs.black.brown, body.brown span.theme_demo { background: #b58863; }
body.green #GameBoard td.whiteSquare, body.green #GameBoard td.highlightWhiteSquare, body.green div.lcs.white, #top div.lcs.white.green, body.green div.lichess_board { background: #ffffdd; }
body.green #GameBoard td.blackSquare, body.green #GameBoard td.highlightBlackSquare, body.green div.lcs.black, #top div.lcs.black.green, body.green span.theme_demo { background: #86a666; }
body.grey #GameBoard td.whiteSquare, body.grey #GameBoard td.highlightWhiteSquare, body.grey div.lcs.white, #top div.lcs.white.grey, body.grey div.lichess_board { background: #fff; }
body.grey #GameBoard td.blackSquare, body.grey #GameBoard td.highlightBlackSquare, body.grey div.lcs.black, #top div.lcs.black.grey, body.grey span.theme_demo { background: #c4c4c4; }
body.wood #GameBoard td.whiteSquare, body.wood #GameBoard td.highlightWhiteSquare, body.wood div.lcs.white, #top div.lcs.white.wood, body.wood div.lichess_board { background: url(../images/woodenboard_white.jpg) no-repeat; }
body.wood #GameBoard td.blackSquare, body.wood #GameBoard td.highlightBlackSquare, body.wood div.lcs.black, #top div.lcs.black.wood, body.wood span.theme_demo { background: url(../images/woodenboard_black.jpg) no-repeat; }
body.canvas #GameBoard td.whiteSquare, body.canvas #GameBoard td.highlightWhiteSquare, body.canvas div.lcs.white, #top div.lcs.white.canvas, body.canvas div.lichess_board { background: url(../images/canvasboard_white.jpg) no-repeat; }
body.canvas #GameBoard td.blackSquare, body.canvas #GameBoard td.highlightBlackSquare, body.canvas div.lcs.black, #top div.lcs.black.canvas, body.canvas span.theme_demo { background: url(../images/canvasboard_black.jpg) no-repeat; }

body.txtr #tcol0trow0, body.txtr #a8 { background-position: 0px 0px; }
body.txtr #tcol1trow0, body.txtr #b8 { background-position: -64px 0px; }
body.txtr #tcol2trow0, body.txtr #c8 { background-position: -128px 0px; }
body.txtr #tcol3trow0, body.txtr #d8 { background-position: -192px 0px; }
body.txtr #tcol4trow0, body.txtr #e8 { background-position: -256px 0px; }
body.txtr #tcol5trow0, body.txtr #f8 { background-position: -320px 0px; }
body.txtr #tcol6trow0, body.txtr #g8 { background-position: -384px 0px; }
body.txtr #tcol7trow0, body.txtr #h8 { background-position: -448px 0px; }
body.txtr #tcol0trow1, body.txtr #a7 { background-position: 0px -64px; }
body.txtr #tcol1trow1, body.txtr #b7 { background-position: -64px -64px; }
body.txtr #tcol2trow1, body.txtr #c7 { background-position: -128px -64px; }
body.txtr #tcol3trow1, body.txtr #d7 { background-position: -192px -64px; }
body.txtr #tcol4trow1, body.txtr #e7 { background-position: -256px -64px; }
body.txtr #tcol5trow1, body.txtr #f7 { background-position: -320px -64px; }
body.txtr #tcol6trow1, body.txtr #g7 { background-position: -384px -64px; }
body.txtr #tcol7trow1, body.txtr #h7 { background-position: -448px -64px; }
body.txtr #tcol0trow2, body.txtr #a6 { background-position: 0px -128px; }
body.txtr #tcol1trow2, body.txtr #b6 { background-position: -64px -128px; }
body.txtr #tcol2trow2, body.txtr #c6 { background-position: -128px -128px; }
body.txtr #tcol3trow2, body.txtr #d6 { background-position: -192px -128px; }
body.txtr #tcol4trow2, body.txtr #e6 { background-position: -256px -128px; }
body.txtr #tcol5trow2, body.txtr #f6 { background-position: -320px -128px; }
body.txtr #tcol6trow2, body.txtr #g6 { background-position: -384px -128px; }
body.txtr #tcol7trow2, body.txtr #h6 { background-position: -448px -128px; }
body.txtr #tcol0trow3, body.txtr #a5 { background-position: 0px -192px; }
body.txtr #tcol1trow3, body.txtr #b5 { background-position: -64px -192px; }
body.txtr #tcol2trow3, body.txtr #c5 { background-position: -128px -192px; }
body.txtr #tcol3trow3, body.txtr #d5 { background-position: -192px -192px; }
body.txtr #tcol4trow3, body.txtr #e5 { background-position: -256px -192px; }
body.txtr #tcol5trow3, body.txtr #f5 { background-position: -320px -192px; }
body.txtr #tcol6trow3, body.txtr #g5 { background-position: -384px -192px; }
body.txtr #tcol7trow3, body.txtr #h5 { background-position: -448px -192px; }
body.txtr #tcol0trow4, body.txtr #a4 { background-position: 0px -256px; }
body.txtr #tcol1trow4, body.txtr #b4 { background-position: -64px -256px; }
body.txtr #tcol2trow4, body.txtr #c4 { background-position: -128px -256px; }
body.txtr #tcol3trow4, body.txtr #d4 { background-position: -192px -256px; }
body.txtr #tcol4trow4, body.txtr #e4 { background-position: -256px -256px; }
body.txtr #tcol5trow4, body.txtr #f4 { background-position: -320px -256px; }
body.txtr #tcol6trow4, body.txtr #g4 { background-position: -384px -256px; }
body.txtr #tcol7trow4, body.txtr #h4 { background-position: -448px -256px; }
body.txtr #tcol0trow5, body.txtr #a3 { background-position: 0px -320px; }
body.txtr #tcol1trow5, body.txtr #b3 { background-position: -64px -320px; }
body.txtr #tcol2trow5, body.txtr #c3 { background-position: -128px -320px; }
body.txtr #tcol3trow5, body.txtr #d3 { background-position: -192px -320px; }
body.txtr #tcol4trow5, body.txtr #e3 { background-position: -256px -320px; }
body.txtr #tcol5trow5, body.txtr #f3 { background-position: -320px -320px; }
body.txtr #tcol6trow5, body.txtr #g3 { background-position: -384px -320px; }
body.txtr #tcol7trow5, body.txtr #h3 { background-position: -448px -320px; }
body.txtr #tcol0trow6, body.txtr #a2 { background-position: 0px -384px; }
body.txtr #tcol1trow6, body.txtr #b2 { background-position: -64px -384px; }
body.txtr #tcol2trow6, body.txtr #c2 { background-position: -128px -384px; }
body.txtr #tcol3trow6, body.txtr #d2 { background-position: -192px -384px; }
body.txtr #tcol4trow6, body.txtr #e2 { background-position: -256px -384px; }
body.txtr #tcol5trow6, body.txtr #f2 { background-position: -320px -384px; }
body.txtr #tcol6trow6, body.txtr #g2 { background-position: -384px -384px; }
body.txtr #tcol7trow6, body.txtr #h2 { background-position: -448px -384px; }
body.txtr #tcol0trow7, body.txtr #a1 { background-position: 0px -448px; }
body.txtr #tcol1trow7, body.txtr #b1 { background-position: -64px -448px; }
body.txtr #tcol2trow7, body.txtr #c1 { background-position: -128px -448px; }
body.txtr #tcol3trow7, body.txtr #d1 { background-position: -192px -448px; }
body.txtr #tcol4trow7, body.txtr #e1 { background-position: -256px -448px; }
body.txtr #tcol5trow7, body.txtr #f1 { background-position: -320px -448px; }
body.txtr #tcol6trow7, body.txtr #g1 { background-position: -384px -448px; }
body.txtr #tcol7trow7, body.txtr #h1 { background-position: -448px -448px; }

div.lcsi {
  position: absolute;
  width: 64px;
  height: 64px;
  background: url(../images/sover.png) top left no-repeat;
  background-position: 0 -320px;
}
div.lcs.moved div.lcsi {
  background-position: 0 -192px;
}
div.lcs.check div.lcsi {
  background-position: 0 -256px;
}
div.lcs.premoved div.lcsi {
  background-position: 0 -64px !important;
}
div.my_turn.not_spectator div.lcs:hover div.lcsi {
  background-position: 0 0px;
}
div.lcs.droppable-hover div.lcsi {
  background-position: 0 -64px !important;
}
div.lichess_board div.lcs.selected div.lcsi,
div.lichess_board div.lcs.selectable div.lcsi {
  background-position: 0 -64px !important;
  cursor: pointer;
}
div.lichess_board div.lcs.selectable div.lichess_piece {
  cursor: pointer;
}

div.lichess_piece {
  position: absolute;
  width: 64px;
  height: 64px;
  background-image: url(../images/sprite.png);
}

div.my_turn div.lichess_piece.ui-draggable {
  cursor: move;
}

div.lichess_piece.bishop.white{
  background-position: -64px 0;
}
div.lichess_piece.knight.white{
  background-position: -128px 0;
}
div.lichess_piece.rook.white{
  background-position: -192px 0;
}
div.lichess_piece.queen.white{
  background-position: -256px 0;
}
div.lichess_piece.king.white{
  background-position: -320px 0;
}

div.lichess_piece.pawn.black{
  background-position: 0 bottom;
}
div.lichess_piece.bishop.black{
  background-position: -64px bottom;
}
div.lichess_piece.knight.black{
  background-position: -128px bottom;
}
div.lichess_piece.rook.black{
  background-position: -192px bottom;
}
div.lichess_piece.queen.black{
  background-position: -256px bottom;
}
div.lichess_piece.king.black{
  background-position: -320px bottom;
}

div.lichess_game_not_started {
  position: relative;
}

div.lichess_overboard {
  position: absolute;
  z-index: 3;
  width: 305px;
  top: 214px;
  left: 105px;
  padding: 15px 0 22px 0;
  font-size: 14px;
  line-height: 1.8em;
  text-decoration: none;
  background: #FFF;
  border-radius: 8px;
  box-shadow: 0px 0px 20px #444;
  text-align: center;
}
div.lichess_overboard a.close {
  float: right;
  width: 32px;
  height: 32px;
  display: block;
  background: url(../images/close24.png) no-repeat;
  cursor: pointer;
  margin-top: -9px;
  margin-right: 6px;
  opacity: 0.4;
}
div.lichess_overboard a.close:hover {
  opacity: 1;
}

div.lichess_overboard p.explanations {
  margin-top: 1em;
  border-top: 1px solid #ccc;
  padding-top:1em;
  font-size: 12px;
  line-height: 1.4em;
  text-align: left;
  padding-left: 1em;
}

#connection_lost {
  display: none;
  top: 224px;
  left: 146px;
  width: 220px;
  padding: 10px 0 0 0;
  font-weight: bold;
  box-shadow: 0px 0px 20px #d85000;
}

#premove, #dont_touch {
  display: none;
  position: absolute;
  top: 512px;
  left: 0px;
  width: 512px;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #ccc;
  font-weight: bold;
  color: #fff;
  background: #d85000;
  z-index: 50;
}

input.lichess_id_input {
  margin-top: 10px;
  border: none;
  background: #fff;
  width: 100%;
  text-align: center;
  color: #444;
  font-size: 1.2em;
}

div.lichess_promotion_choice {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 404px;
  height: 288px;
  background: #fff;
  opacity: 0.8;
  text-align: center;
  padding: 224px 0 0 108px;
}

div.lichess_promotion_choice div.lichess_piece {
  float:left;
  position:static;
  padding: 5px;
  width: 54px;
  height: 54px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow:0 0 5px #444;
}

div.lichess_promotion_choice div.lichess_piece:hover {
  box-shadow:0 0 10px blue;
}

div.lichess_player_white #a8,
div.lichess_player_black #h1 {
  border-radius: 4px 0 0 0;
}

div.lichess_player_white #h8,
div.lichess_player_black #a1 {
  border-radius: 0 4px 0 0;
}

div.lichess_player_white #a1,
div.lichess_player_black #h8 {
  border-radius: 0 0 0 4px;
}

div.lichess_player_white #h1,
div.lichess_player_black #a8 {
  border-radius: 0 0 4px 0;
}

div.lichess_join_url {
  display:none;
  background: none;
  border: none;
  margin: 1em 0 0 0;
}

div.lichess_join_url span {
  display: block;
  padding: 0.5em;
  background: #fff;
  margin-top: 1em;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
}

div.lichess_ground {
  position: relative;
  margin-left: 532px;
  height: 514px;
}

div.lichess_table_wrap {
  position: absolute;
  top: 176px;
  left: 0px;
  width: 242px;
}
div.lichess_table {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 7px #d0d0d0;
  height: auto;
  padding: 10px;
}
div.lichess_table.table_with_clock {
  border-radius: 0 4px 4px 0;
}
div.lichess_table.spectator {
  top: 160px;
}
div.lichess_table_not_started {
  position: absolute;
  top: 176px;
  left: 0px;
  width: 242px;
  box-shadow: none;
  border: none;
  padding: 0;
  top: 100px;
}
div.lichess_table div.username {
  padding-left: 16px;
}
div.lichess_table div.username.connected {
  background: url(../images/s16.png) no-repeat;
  background-position: 0 -112px;
}
div.lichess_table div.username.offline {
  background: url(../images/s16.png) no-repeat;
  background-position: 0 -128px;
}
div.lichess_table a.button.strong {
  padding-top: 1em;
  padding-bottom: 1em;
  font-weight: bold;
  font-size: 1.2em;
}

div.clock {
  width: 70px;
  border: 1px solid #ccc;
  padding: 4px 0 4px 10px;
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
  box-shadow: 0 0 7px #d0d0d0;
}
div.clock.running {
  background: #fff077;
  color: #444;
}
div.clock.outoftime {
  background-color: #eFAAAA;
  font-weight: bold;
  color: #444;
}
div.clock_top {
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
div.clock_bottom {
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
div.lichess_table_wrap a.moretime {
  opacity: 0.4;
  position: absolute;
  left: 87px;
  top: 6px;
  width: 32px;
  height: 32px;
  display: block;
  background: url(../images/add.png) no-repeat;
}
div.lichess_table_wrap a.moretime:hover {
  opacity: 1;
}

div.lichess_table_wrap .player_blurs {
  margin-top: 1em;
}

div.lichess_table_next {
  top: 145px;
}

div.lichess_separator {
  margin: 10px 0;
  border-bottom: 1px solid #ddd;
}

div.lichess_control {
  margin-top: 20px;
}

div.lichess_control a {
  font-size: 90%;
}

div.lichess_control label {
  margin-right: 1em;
  cursor: pointer;
}
div.lichess_control input {
  vertical-align: middle;
  margin-right: 0.3em;
}
div.lichess_control a.lichess_play_again {
  margin-left: 1em;
}

div.lichess_control div.lichess_play_again_join a.lichess_play_again {
  margin-left: 0;
  font-size: 150%;
  display: block;
}
div.lichess_control div.rematch_alert {
  background: url(../images/rematch.gif) center left no-repeat;
  padding-left: 60px;
  margin-bottom: 1em;
}
div.lichess_control div.rematch_wait {
  margin-bottom: 1em;
}

div.lichess_control a.lichess_resign,
div.lichess_control a.lichess_abort,
div.lichess_control a.propose_takeback,
div.lichess_control a.offer_draw {
  float: right;
  display: block;
  margin-left: 1em;
}

div.lichess_control.buttons a.button {
  display: block;
  margin-bottom: 0.7em;
  text-align: center;
  text-decoration: none;
}

div.lichess_claim_draw_zone,
div.force_resign_zone,
div.proposed_takeback,
div.offered_draw {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}
div.force_resign_zone {
  display: none;
}

div.lichess_separator {
  margin: 10px 0;
  border-bottom: 1px solid #ddd;
}

div.lichess_table .lichess_button {
  margin: 2.5em 0 0 0;
  font-size: 1.3em;
  display: block;
  text-decoration: none;
  padding: 1em;
  border-radius: 32px;
  box-shadow: 0 0 3px #ccc;
  text-align: center;
  border: 1px solid #d3d3d3;
  font-weight: normal;
}
div.lichess_table a.lichess_button:hover, 
div.lichess_table a.lichess_button.active {
  box-shadow: 0 0 9px #d85000;
  border: 1px solid #d85000;
}

div.lichess_current_player {
  height: 64px;
}
div.lichess_current_player div.lichess_player {
  position: absolute;
  margin-left: -5px;
}
div.lichess_current_player div.lichess_player div.lichess_piece {
  top: 0;
  left: 0;
}
div.lichess_current_player div.lichess_player p {
  height: 64px;
  line-height: 64px;
  font-size: 15px;
  font-weight: bold;
  color: #888;
  margin: 0 0 0 64px;
}

div.lichess_table.finished div.lichess_player p {
  line-height: 2em;
  margin-top: 3px;
}

div.lichess_cemetery {
  height: 108px;
  width: 262px;
  position: absolute;
  left: 0px;
}
div.lichess_cemetery_top {
  top: 0;
  margin-bottom: 10px;
}
div.lichess_cemetery_bottom {
  bottom: 0;
  margin-top: 10px;
}

div.lichess_cemetery div.lichess_tomb {
  display: block;
  float: left;
  margin: -5px -16px;
  width: 64px;
  height: 64px;
}
div.lichess_cemetery div.lichess_piece {
  opacity: 0.5;
}

div.under_chat {
  width: 224px;
  margin-left: -28px;
  position: absolute;
  top: 530px;
  left: 0;
}

div.lichess_chat {
  font-size: 11.5px;
  position: absolute;
  top: 205px;
  left: -30px;
  border-radius: 4px;
}
div.lichess_chat.small_chat {
  left: 0px;
}
div.lichess_chat.lobby_chat {
  top: 126px;
}
div.lichess_chat_top {
  border-radius: 4px 4px 0 0;
  border: 1px solid #ccc;
  padding: 3px 5px;
}
div.lichess_chat_top span.title {
  font-weight: bold;
  color: #999;
}
div.lichess_chat_top span.title span {
  font-weight: normal;
}
div.lichess_chat_inner {
  position: relative;
}

div.lichess_chat input.toggle_chat {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index:1;
}

div.lichess_chat ol {
  height: 263px;
  width: 216px;
  border: 1px solid #ccc;
  border-top: none;
  padding: 2px 5px;
  position:relative;
  overflow:hidden;
}
div.lichess_chat.small_chat ol {
  width: 186px;
}
div.lichess_chat.lobby_chat ol {
  height: 341px;
}

div.lichess_chat form {
  position: relative;
}
div.lichess_chat form input {
  border: 1px solid #ccc;
  border-top: 0;
  padding: 2px 20px 2px 4px;
  border-radius: 0 0 4px 4px;
  width: 202px;
}
div.lichess_chat.small_chat form input {
  width: 172px;
}
div.lichess_chat input.lichess_hint {
  color: #888;
}
div.lichess_chat a.send {
  position: absolute;
  top: 0px;
  right: 2px;
  display: block;
  height: 16px;
  width: 16px;
  background: url(../images/s16.png) no-repeat;
  background-position: 0 -96px;
  text-decoration: none;
  z-index: 1;
  opacity: 0.5;
}
div.lichess_chat a.send:hover {
  opacity: 1;
}

div.lichess_chat ol.lichess_messages li {
  margin: 0.6em 0;
  padding-left: 18px;
  line-height: 14px;
}
div.anon_chat ol.lichess_messages li {
  padding-left: 3px;
}
div.anon_chat span.title {
  padding-left: 3px;
}
div.anon_chat li span {
  font-weight: bold;
  margin-right: 6px;
  color: #aaa;
}
div.anon_chat a.user_link {
  padding: 0;
  color: #aaa;
  text-decoration: none;
  font-weight: bold;
}
div.anon_chat a.user_link:hover {
  text-decoration: underline;
}

div.lichess_chat ol.lichess_messages li.white {
  background: url(../images/klw14.png) no-repeat;
}
div.lichess_chat ol.lichess_messages li.black {
  background: url(../images/klb14.png) no-repeat;
}
div.lichess_chat.hidden ol.lichess_messages, div.lichess_chat.hidden form {
  opacity: 0;
}

div.game_tournament {
  text-align: center;
}
div.game_tournament .title {
  display: block;
  font-weight: bold;
}
div.game_tournament .clock {
  display: block;
  margin-top: 5px;
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
}

div.inline_userlist span.list {
  display: inline;
  color: #9a9a9a;
}
div.inline_userlist a {
  color: #aaa;
  text-decoration: none;
  font-weight: bold;
}
div.inline_userlist a:hover {
  text-decoration: underline;
}