@import url("../../../lib/fonts/silkscreen/bold/style.css");
@import url("../../../lib/fonts/varela/regular/style.css");
@import url("../../../lib/fonts/numans/regular/style.css");
@import url("../../../lib/fonts/cantarell/regular/style.css");
@import url("../../../lib/fonts/liberation-mono/bold/style.css");
@import url("../../../lib/fonts/rounded-mplus/1m-bold/style.css");
@import url("../../../lib/fonts/rounded-mplus/2m-medium/style.css");

body
{
    background: hsl(30, 90%, 80%);
    background-image: url("grid.png");
    margin: 5px;
}

div#container
{
    position: absolute;
    top: 50%;
    margin-top: -280px;
    width: 100%;
    left: 0px;
}

span#icon
{
    margin: 12px;
    cursor: pointer;
}

div#splash
{
    background: url("splash-2.png");
    border: 22px solid red;
    position: absolute;
    top: 50%;
    margin-top: -128px;
    left: 50%;
    margin-left: -197px;
    width: 350px;
    height: 180px;
    z-index: 2;
    text-align: right;
}

div#splash span#splash_close_button
{
    background: white;
    font-family: numansregular;
    color: black;
    padding: 4px 8px;
    font-family: Silkscreen;
    position: relative;
    right: -22px;
    top: -18px;
    cursor: pointer;
}

div#game
{
    height: 560px;
}

canvas
{
    margin: 0px;
}

canvas#cave
{
    border: double 3px rgb(156, 103, 83);
    border-bottom: 0px;
    z-index: 1;
}

canvas#tree
{
    border: double 3px rgb(156, 103, 83);
    border-top: 0px;
    font-size: 8px;
    z-index: 1;
}

canvas#panel
{
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -380px;
    margin-top: 115px;
    z-index: 0;
    border-radius: 30px;
    border-bottom: solid black 8px;
}    

/* from http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* non-prefixed version, currently
                                    not supported by any browser */
}

div#credits
{
    font-family: Varela;
    font-size: 11px;
    color: cyan;
    position: absolute;
    bottom: 1%;
    right: 1%;
    background: #202020;
    padding: 3px 5px;
}

div#credits a
{
    color: lightblue;
}