/* ------- Normalize ------- */
*, *:before, *:after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: auto;
}

/* ------- Global ------- */
body {
    color: #eee;
    background-color: #333;
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-size: 16px;
    display: flex;
    flex-flow: column nowrap;
    min-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

h1 {
    font-size: 32px;
    font-weight: bold;
}
h2 {
    font-size: 24px;
    font-weight: bold;
}
h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 16px 0;
}
h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 16px 0 6px 0;
}

p {
    padding: 0;
    margin: 6px 6px 16px 6px;
}
div.p-like {
    padding: 0;
    margin: 6px 6px 16px 6px;
}
ul.p-like {
    padding: 0;
    margin: 6px 6px 16px 6px;
}
ul.p-like li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hidden {
    display: none;
}

.disabled {
    color: #aaa;
}

a, button.link, input[type=submit].link {
    color: #fd3;
    text-decoration: none;
}
a.extern, button.link.extern, input[type=submit].link.extern {
    color: #3cf;
}
a:hover, button.link:hover, input[type=submit].link:hover {
    text-decoration: underline;
}

.container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.text-container {
    max-width: 950px;
    padding: 6px 12px;
    margin-left: auto;
    margin-right: auto;
}
.text-side-menu-container {
    min-width: 450px;
    max-width: 950px;
    padding: 6px 224px 6px 12px;
    margin-left: auto;
    margin-right: auto;
}
.side-menu {
    width: 200px;
    padding: 6px 12px;
    float: right;
    margin: 80px 80px 0 0;
}
.side-menu ul {
    padding: 0 0 0 20px;
    margin: 0;
}
.side-menu ul li {
    margin: 6px 0;
}

.ref {
    position: relative;
}
.ref .refnum {
    font-size: 0.6em;
    font-weight: bold;
    position: relative;
    top: -0.8em;
    margin: 0 0 0 -0.3em;
}
.ref .refbody {
    display: none;
    position: absolute;
    min-width: 20em;
    font-size: 0.8em;
    padding: 9px;
    border-radius: 3px;
    box-shadow: 0px 1px 6px #222;
    line-height: 1.1;
    left: 21px;
    bottom: 7px;
    background-color: #222;
    border: 1px solid #000;
    word-wrap: break-word;
    z-index: 99;
    overflow: auto;
}

/* ------- Forms ------- */
input:not(.link), select, textarea {
    height: 24px;
    font-size: 14px;
    vertical-align: middle;
    font-weight: lighter;
    margin: 0;
    padding: 0 4px;
    border: 1px solid #ccc;
    border-radius: 2px;
    min-width: 200px;
    line-height: normal;
    color: #222;
    background-color: #eee;
}
input:hover:not(.link), select:hover, textarea:hover {
    border-color: #aaa;
}
input:focus:not(.link), select:focus, textarea:focus {
    border-color: #999;
}
input[type=checkbox], input[type=radio] {
    min-width: 17px;
}
button:not(.link), input[type=submit]:not(.link) {
    margin: 0 4px;
    min-width: 120px;
    border: 1px solid #aaa;
    background-color: #ccc;
}
button:hover:not(.link), input[type=submit]:hover:not(.link) {
    border-color: #999;
    background-color: #bbb;
}

.form-horizontal label, .form-horizontal div.radio-label, .form-horizontal .form-group {
    display: block;
    padding: 3px 6px;
}
.form-horizontal label span, .form-horizontal div.radio-label span, .form-horizontal .form-group span {
    display: inline-block;
    min-width: 200px;
}
.form-horizontal div.radio-label label {
    display: inline-block;
    padding: initial;
}

.post-link-form {
    display: inline-block;
}
button.link, input[type=submit].link {
    background: none!important;
    border: none;
    padding: 0!important;
    font-family: Arial, Arial, Helvetica, sans-serif; /* input has OS specific font-family */
    font-size: 16px;
    cursor: pointer;
}

/* ------- Page table ------- */
.page-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 6px;
    padding: 0;
}

.page-table .nano { width: 30px; }
.page-table .small { width: 70px; }
.page-table .normal { width: 110px; }
.page-table .large { width: 165px; }
.page-table .huge { width: 190px; }

.page-table .left { text-align: left; }
.page-table .center { text-align: center; }
.page-table .right { text-align: right; }

.page-table th {
    margin: 0;
    padding: 3px 5px;
}
.page-table td {
    margin: 0;
    padding: 3px 5px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #2a2a2a;
}
.border-intern-right {
    border-right: 1px solid #444;
}
.border-intern-left {
    border-left: 1px solid #2a2a2a;
}
.paginate ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.paginate ul li {
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.paginate ul li:hover {
    background-color: #444;
}
.paginate ul li.active {
    font-weight: bold;
}
.paginate ul li a, .paginate ul li span {
    display: block;
    width: 100%;
    margin: 0;
    padding: 3px 10px;
}

/* ------- Header ------- */
.navbar {
    background-color: #222;
    border-bottom: 1px solid #000;
    box-shadow: 0px 1px 6px #222;
}
.nav-list {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.nav-list li {
    display: inline-block;
}
.nav-list li a {
    display: inline-block;
    margin: 0 12px;
    padding: 0 12px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
    color: #eee;
}
.nav-list li a.navbar-home {
    font-size: 30px;
    color: #bbb;
}

.nav-user {
    float: right;
    margin: 0 12px;
    padding: 10px 12px 0 12px;
    line-height: 50px;
    text-align: right;
    color: #aaa;
}

/* ------- Main ------- */
main {
    flex: 1;
}

.page-messages {
    margin: 8px 80px 0 80px;
    padding: 0;
    border-radius: 4px;
    position: absolute;
}
.page-messages span {
    padding: 6px 10px;
    margin-right: 30px;
    display: inline-block;
}
.page-messages ul {
    margin: 0;
    padding: 0;
}
.page-messages ul li {
    padding: 6px 10px;
    list-style: none;
}
.page-messages ul li:first-child {
    margin-right: 30px;
}
.page-messages-x {
    font-weight: bold;
    position: absolute;
    right: 0;
}
.page-messages-x a {
    display: block;
    padding: 7px 11px;
}
.page-errors {
    color: #c00;
    border: 1px solid #c00;
    background-color: #feed;
}
.page-errors .page-messages-x a {
    color: #c00;
}
.page-success {
    color: #0c0;
    border: 1px solid #0c0;
    background-color: #efed;
}
.page-success .page-messages-x a {
    color: #0c0;
}

/* ------- Footer ------- */
.footer {
    width: 100%;
    white-space: nowrap;
    line-height: 30px;
    background-color: #222;
    border-top: 1px solid #000;
    box-shadow: 0px 1px 6px #222;
}
.footer div {
    padding: 12px;
}

/* ------- Game ------- */
#game-container {
    display: flex;
}

#game-board {
    flex: 0 0 auto;
    position: relative;
    box-shadow: 0px 1px 6px #222;
    background-repeat: no-repeat;
    margin: 15px 0 30px 0;
}
#game-board.hexagonal {
    box-shadow: none;
}
.game-board-6 {
    width: 360px;
    height: 360px;
    background-image: url("/img/board6x6.jpg");
}
.game-board-8 {
    width: 480px;
    height: 480px;
    background-image: url("/img/board8x8.jpg");
}
.game-board-10 {
    width: 600px;
    height: 600px;
    background-image: url("/img/board10x10.jpg");
}
.game-board-12 {
    width: 720px;
    height: 720px;
    background-image: url("/img/board12x12.jpg");
}
.game-board-3 {
    width: 335px;
    height: 360px; /* 5x72 */
    background-image: url("/img/board-hex-3.svg");
    background-size: contain;
}
.game-board-5 {
    width: 588px;
    height: 648px; /* 9x72 */
    background-image: url("/img/board-hex-5.svg");
    background-size: contain;
}
#game-board .square {
    position: absolute;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99;
}

#game-board:not(.hexagonal) .square.playable:hover {
    box-shadow: 0 0 6px #ddd;
    background-color: #7777;
}
#game-board:not(.hexagonal) .square.playable.selected {
    box-shadow: 0 0 6px #ddd;
    background-color: #5555;
}

#game-board.hexagonal .square.playable:hover::before {
    content: "\2B22";
    display: block;
    margin: -24px 0 0 -11px;
    color: #7777;
    font-size: 99px;
    transform: rotate(-30deg);
}
#game-board.hexagonal .square.playable.selected::before {
    content: "\2B22";
    display: block;
    margin: -24px 0 0 -11px;
    color: #5555;
    font-size: 99px;
    transform: rotate(-30deg);
}

#game-board .square.playable::after {
    content: " ";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
#game-board.hexagonal .square.playable::after {
    left: 2px;
}
#game-board .square.white.man::after {
    background-image: url("/img/white-piece.png");
}
#game-board .square.black.man::after {
    background-image: url("/img/black-piece.png");
}
#game-board .square.white.king::after {
    background-image: url("/img/white-king.png");
}
#game-board .square.black.king::after {
    background-image: url("/img/black-king.png");
}
#game-board .square.dead.man::after {
    background-image: url("/img/grey-piece.png");
}
#game-board .square.dead.king::after {
    background-image: url("/img/grey-king.png");
}
#game-board .square.row {
    text-align: right;
    line-height: 60px;
    width: 52px;
    color: #aaa;
}
#game-board .square.col {
    text-align: center;
    padding-top: 6px;
    height: 54px;
    color: #aaa;
}

#game-sidebar {
    padding: 0 10px;
}
#game-sidebar span {
    font-weight: bold;
}