body {
   font-family: 'Roboto', sans-serif;
   padding: 0;
   margin: 0;
}

#page {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-flow: column nowrap;
}

h1 {
   font-family: 'Vollkorn', serif;
   font-size: 2em;
   line-height: 1.4em;
   height: 1.4em;
   margin-top: 8px;
   margin-left: 8px;
   margin-bottom: 0;
}

a.plain-link {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   color: inherit;
   background-color: inherit;
   text-decoration: inherit;
}

.media-button-svg {
   width: 12pt;
   height: 12pt;
}

button:disabled .silhouette {
   fill: #c0c0c0;
}

#content {
   display: flex;
   flex-flow: row nowrap;
}

#cb_outer2 {
   flex: 1 1 auto;
   width: 100%;
   max-width: calc(100vh - (8px + 2.8em + 8px));
   margin-left: 8px;
}

#cb_outer {
   width: 100%;
   max-width: calc(100vw - (8px + 24px));
}

#cb_container {
   position: relative;
   width: 100%;
   padding-top: 100%;
}

#cb_inner {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#cb_board {
   position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 100%;
}

#cb_board tr {
   position: relative;
}

#cb_board td {
   background-clip: padding-box;
   position: relative;
}

#cb_light_name, #cb_dark_name {
   width: 8em;
}

#cb_control_container {
   display: flex;
   flex-flow: column nowrap;
   flex: 0 1000 auto;
   margin-left: 1em;
   width: 100%;
   min-width: 24em;
   max-height: calc(100vh - (8px + 2.8em));
}

#cb_control_form {
   flex: 0 1 auto;
   display: flex;
   flex-flow: column nowrap;
   margin-right: auto;
}

#cb_scrollable {
   flex: 1 1000 auto;
   padding-right: calc(8px + 3em);
   overflow: auto;
}

#cb_scrollable > *:last-child {
   margin-bottom: 0.5em;
}

#cb_controls, #cb_theme, #cb_names, #cb_message, #cb_navigate {
   margin-top: 0.5em;
   white-space: nowrap;
}

#cb_controls, #cb_theme, #cb_names {
   padding-right: calc(3.25em + 12px);
}

#cb_theme {
   display: flex;
   flex-flow: row nowrap;
   align-items: baseline;
}

#cb_select_theme {
   height: 100%;
}

.cb-spacer {
   flex: 1 1 auto;
}

#cb_choose_game {
   margin-left: 0.2em;
   height: 100%;
}

#cb_theme label {
   flex: 0 0 auto;
   padding-right: 0.2em;
}

#cb_undo {
   margin-left: auto;
   margin-right: 0.1em;
}

#cb_redo {
   margin-left: 0.1em;
   margin-right: auto;
}

#cb_resign {
   margin-left: 0.1em;
   margin-right: 0;
}

#cb_navigate {
   display: flex;
   flex-flow: row nowrap;
   justify-items: center;
   justify-content: center;
   padding-left: 1em;
}

#cb_navigate button {
   margin-left: 0.1em;
   margin-right: 0.1em;
}

#cb_navigate button:first-child {
   margin-left: 0;
}

#cb_navigate button:last-child {
   margin-right: 0;
}

#cb_history {
   max-width: 7.5in;
   margin-bottom: 0.5em;
}

#cb_history_future {
   color: grey;
}

#cb_explain_check {
   color: red;
   margin-top: 0.5em;
}

.cb-hbox {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
}

.cb-vbox {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.cb-align-start {
   align-items: start;
}

.cb-align-stretch {
   align-items: stretch;
}

.cb-square {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: calc((100% - 16pt) / 8);
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: 8pt;
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label div {
   position: absolute;
   top: calc(50% - (1em / 2));
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
}

.cb-vert-label {
   position: relative;
   width: 8pt;
   height: calc((100% - 16pt) / 8);
   border: 1px solid black;
   padding: 0;
}

.cb-vert-label div {
   position: absolute;
   top: calc(50% - (1em / 2));
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
   vertical-align: middle;
}

.cb-archive .cb-horiz-label, .cb-archive .cb-vert-label, .cb-archive .cb-corner {
   background-color: #ffeeee;
}

.cb-lt-bg {
   background-color: #FFFFF0;
}

.cb-lt-bg.cb-start, .cb-lt-bg.cb-end {
   background-color: #CCFFC0;
}

.cb-lt-bg.cb-legal {
   background-color: #E6E6F2;
}

.cb-dk-bg {
   background-color: #F5DEB3;
}

.cb-dk-bg.cb-start, .cb-dk-bg.cb-end {
   background-color: #D0E398;
}

.cb-dk-bg.cb-legal {
   background-color: #C4B2C2;
}

.cb-phantom {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(128,128,128,0.5);
   z-index: 10;
}

.cb-lt-piece, .cb-dk-piece {
   position: absolute;
   top: 17.5%;
   width: 55%;
   height: 65%;
}

#cb_board .cb-lt-piece {
   left: -2.5%;
}

#cb_board .cb-dk-piece {
   left: 47.5%;
}

#cb_board.cb-reversed .cb-lt-piece {
   left: 47.5%;
}

#cb_board.cb-reversed .cb-dk-piece {
   left: -2.5%;
}

#cb_board #cb_phantom .cb-dk-piece {
   top: 22.5%;
   left: 22.5%;
}

#cb_board #cb_phantom .cb-lt-piece {
   top: 22.5%;
   left: 22.5%;
}

.noselect {
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.cb-piece.cb-in-check {
   filter: drop-shadow(0 0 5px red);
   -webkit-filter: drop-shadow(0 0 5px red);
}

.cb-piece.cb-selected, .cb-piece.cb-selected.cb-in-check {
   filter: drop-shadow(0 0 5px blue);
   -webkit-filter: drop-shadow(0 0 5px blue);
}

#cb_board .cb-piece.ui-draggable {
   cursor: grab;
}

#cb_board .cb-piece.ui-draggable-disabled {
   cursor: default;
}

#cb_board.cb-lt-turn .cb-lt-piece, #cb_board.cb-dk-turn .cb-dk-piece {
   z-index: 2;
}

#cb_board.cb-lt-turn .cb-dk-piece, #cb_board.cb-dk-turn .cb-lt-piece {
   z-index: 1;
}

.badges {
   position: fixed;
   bottom: 12px;
   right: 12px;
   margin: 0;
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
   align-items: center;
}

.badge {
   margin: 0;
}

.badge img {
   width: 3em;
   height: 3em;
   opacity: 0.5;
   margin: 0;
}

.badge.game-link-badge img {
   width: 1.8em;
   height: 1.8em;
   margin: 0.6em;
}

.game-tiles {
   max-width: 80vw;
   max-height: 80vh;
   overflow-y: auto;
   text-align: center;
}

.game-tiles > * {
   vertical-align: middle;
}

.game-tile {
   position: relative;
   display: inline-flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   width: 14em;
   height: 14em;
   border: 1px solid black;
   box-shadow: 3px 3px 3px black;
   margin: 1em;
   padding: 0.5em;
   border-radius: 5px;
   background-color: #FFFFF0;
   overflow: hidden;
   background-image:
      linear-gradient(45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(-45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #FAF0DD 75%),
      linear-gradient(-45deg, transparent 75%, #FAF0DD 75%);
   background-size: 80px 80px;
   background-position: -20px -20px, -20px 20px, 20px -60px, -60px -20px;
   font-size: 110%;
}

.game-tile:hover {
   box-shadow: 3px 3px 3px blue;
}

.game-tile.game-tile-selected {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px black;
}

.game-tile.game-tile-selected:hover {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px blue;
}

.new-game-tile {
}

.new-game-text {
   font-size: 3em;
}

.new-game-text::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   background-image: url(../svg/new-game.svg);
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 25%;
}

.game-tile-title {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
   width: 100%;
   height: 50%;
   overflow: hidden;
}

.game-tile-lt-name, .game-tile-dk-name {
   font-size: 120%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.game-tile-lt-name::before {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako/kl.svg);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: -1.05em;
   margin-top: -0.2em;
   margin-bottom: -0.2em;
   margin-right: -0.15em
}

.game-tile-dk-name::after {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako/kd.svg);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: -0.15em;
   margin-top: -0.2em;
   margin-bottom: -0.2em;
   margin-right: -1.05em
}

.game-tile-lt-name {
   display: block;
}

.game-tile-title-vs {
   display: block;
   font-weight: bold;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
}

.game-tile-dk-name {
   display: block;
}

.game-tile-spacer {
   display: block;
   flex: 1 1 auto;
}

.game-tile-status {
   display: block;
   font-weight: bold;
   margin-top: 0.5em;
}

.game-tile-moves {
   display: block;
   margin-top: 0.75em;
}

.game-tile-age {
   display: block;
   margin-top: 0.5em;
}

@media only screen and (min-width: 50em) and (max-width: 70em) {
   .game-tile {
      width: 12em;
      height: 12em;
      font-size: 100%;
   }
}

@media only screen and (max-width: 50em) {
   .game-tile {
      width: 10em;
      height: 10em;
      font-size: 70%;
   }

   .new-game-text {
      font-size: 3em;
   }
}

@media only screen and (max-aspect-ratio: 3/2) {
   #content {
      flex-flow: column nowrap;
   }

   #cb_outer2 {
      width: auto;
   }

   #cb_control_container {
      margin-top: 0.5em;
      margin-left: 8px;
      max-height: none;
      overflow: visible;
      width: 100%;
      max-width: calc(100vw - (8px + 24px));
   }

   #cb_scrollable {
      padding-right: 8px;
   }

   .badges {
      position: static;
      bottom: auto;
      right: auto;
      margin-left: auto;
      margin-right: 8px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
   }
}

img.cb-dk-piece.cb-king   { content: url(../svg/Chess_kdt45.svg); }
img.cb-dk-piece.cb-queen  { content: url(../svg/Chess_qdt45.svg); }
img.cb-dk-piece.cb-rook   { content: url(../svg/Chess_rdt45.svg); }
img.cb-dk-piece.cb-knight { content: url(../svg/Chess_ndt45.svg); }
img.cb-dk-piece.cb-bishop { content: url(../svg/Chess_bdt45.svg); }
img.cb-dk-piece.cb-pawn   { content: url(../svg/Chess_pdt45.svg); }
img.cb-lt-piece.cb-king   { content: url(../svg/Chess_klt45.svg); }
img.cb-lt-piece.cb-queen  { content: url(../svg/Chess_qlt45.svg); }
img.cb-lt-piece.cb-rook   { content: url(../svg/Chess_rlt45.svg); }
img.cb-lt-piece.cb-knight { content: url(../svg/Chess_nlt45.svg); }
img.cb-lt-piece.cb-bishop { content: url(../svg/Chess_blt45.svg); }
img.cb-lt-piece.cb-pawn   { content: url(../svg/Chess_plt45.svg); }

#cb_board.cb-reversed img {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
}

/* vim: set expandtab sw=3 ts=8: */