/* Checkers CSS */

@media only screen
{
    body
    {
        background-color: #449;
        background-repeat: no-repeat;
        background-position: top left;
        background-attachment: fixed;
        background-size: cover;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #ddd;
    }

    canvas
    {
        background-color: #222;
        /* background-image: url(images/level-1.jpg); */
        background-size: cover;
        border: solid 5px #000;
        float: left;
        margin: 5px;
        padding: 0px;
    }

    p
    {
        font-size: 13px;
    }

    h1
    {
        padding: 0;
        margin: 0;
    }

    h2, h3
    {
        font-size: 14px;
    }

    *
    {
        box-sizing: border-box;
    }

    .panel
    {
        background-color: #eee;
        color: #111;
        border: solid 5px #000;
        padding: 5px;
        margin: 5px;
        width: 400px;
        float: left;
        display: none;
    }

    #instructions
    {
        min-height: 710px;
    }

    section
    {
        width: 274px;
        display: table;
        padding: 1em 0 0;
        margin: 1em auto;
    }

    section div
    {
        display: table-cell;
        width: 100%;
    }

    input
    {
        width: 100%;
        padding: .2em 1em;
        font-size: 20px;
    }

    button
    {
        color: black;
        padding: 0.7em 1em .23em 1em;
        white-space: nowrap;
        margin: 0 0 0 1em;
    }

    .panel table
    {
        background: #ddd;
        outline: solid 5px #777;
        text-align: left;
        margin: 20px 10px;
        padding: 10px;
        width: 360px;
    }

    .panel table th
    {
        text-align: right;
        width: 50%;
    }

    .panel table td
    {
        width: 50%;
    }

    .panel table td progress
    {
        width: 140px;
    }

    .panel #statLegacy {
        display: none;
    }
}