* {
    box-sizing: border-box;
}
.hidden {
    display: none;
}
body {
    background: #000;
    margin: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.gamewindow
{
    background: #000;
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 100%;
}
#gfxtable
{
    font-family: "Courier New";
    margin: 0 auto;
    z-index: 0;
}
#gfxtable .td
{
    background: #000;
    display: inline-block;
    color: #fff;
    font-size: 3.75vh;
    font-weight: bold;
    height: 4vh;
    line-height: 1;
    padding: 0;
    text-align: center;
    vertical-align: top;
    width: 2.5vw;
}
#controls
{
    background: #ccc;
    border: 3px outset;
    padding: 0.5em 0;
    z-index: 3;
}
#controls > .row
{
    width: 80%;
    margin: 0 auto;
}
#controls > .row > button
{
    background: #00a;
    background-image: linear-gradient(#00a, #55f);
    border: 1px solid #55f;
    color: #fff;
    font-size: 4vh;
    line-height: 1.125;
    margin: 0;
    padding: 0.75em 0;
    text-transform: uppercase;
    width: 33.32%;
}
#controls > .row > button.down
{
    background: #ff5;
    background-image: linear-gradient(#ffa, #fff);
    color: #00a;
}
#controls > .row > .small
{
    background: #a50;
    background-image: linear-gradient(#a00, #f55);
    border: 1px solid #f55;
    box-shadow: 0 0 0.125em #000;
    width: 20.82%;
    margin: 0 6.25%;
    padding: 0.125em 0;
}
#controls #inv
{
    background: #0a0;
    background-image: linear-gradient(#0a0, #5f5);
    border: 1px solid #5f5;
}
#controls #inv.down
{
    background: #fff;
    background-image: linear-gradient(#fff, #fff);
}
#controls > .row > .topleft
{
    vertical-align: top;
    margin-left: 0;
    margin-right: 12.5%;
}
#controls > .row > .topright
{
    vertical-align: top;
    margin-left: 12.5%;
    margin-right: 0;
}
#controls > .row > .btmleft
{
    vertical-align: bottom;
    margin-left: 0;
    margin-right: 12.5%;
}
#controls > .row > .btmright
{
    vertical-align: bottom;
    margin-left: 12.5%;
    margin-right: 0;
}
#overlay
{
    background: #000;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:1;
}
#play-container
{
    position: absolute;
    top: 36%;
    width: 100%;
    z-index: 2;
}
#play
{
    background: #0a0;
    background-image: linear-gradient(#5f5, #0a0);
    border: 2px solid #5f5;
    border-radius: 1.0em;
    color: #fff;
    display: block;
    font-size: 4vw;
    font-weight: bold;
    margin: 0 auto;
    padding: 1.5em 2.0em;
}
#play:hover,
#play:active
{
    background: #aa0;
    background-image: linear-gradient(#ff5, #aa0);
    border: 2px solid #ff5;
    color: #fff;
}
@media only screen and (min-width: 601px)
{
    .mobile
    {
        visibility: hidden;
    }
}
@media only screen and (max-width: 600px)
{
    .mobile
    {
        visibility: visible;
    }
    .gamewindow
    {
        font-size: 1.875vh;
        height: 50vh;
    }
    #gfxtable
    {
        height: 50vh;
    }
    #gfxtable .tr
    {
        height: 2vh;
    }
    #gfxtable .td
    {
        font-size: 1.875vh;
        line-height: 1;
        height: 2vh;
    }
}