/* Resize things on small screen. */
@media screen and (min-width: 0px) and (max-width: 300px) {
    #overCanvas {
        font-size: 6px;
    }

        #overCanvas input {
            margin-top: 0;
            margin-bottom: 0;
            zoom: .7;
            vertical-align: bottom;
        }
}

@media screen and (min-width: 301px) and (max-width: 600px) {
    #overCanvas {
        font-size: 8px;
    }

        #overCanvas input {
            margin-top: 0;
            margin-bottom: 0;
            zoom: .8;
            vertical-align: bottom;
        }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    #overCanvas {
        font-size: 10px;
    }

        #overCanvas input {
            margin-top: 0;
            margin-bottom: 0;
            zoom: .9;
            vertical-align: bottom;
        }
}

html {
    min-height: 100%;
    background-color:#c0c0e0;
}
body {
    margin: 0;
    font-family: Monaco, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #f0f0f0;
    background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0f0 71%,#c0c0e0 100%); 
}

a, a:visited {
    color: #00f;
}

canvas {
    border: 1px dotted #ccc;
    vertical-align: bottom;
}

hr {
    max-width: 600px;
    text-align: left;
    margin-left: 0;
}

#info {
    margin: 0 1em;
}

#credit {
    font-size: 90%;
    color: darkblue;
    text-align:center;  
}
#domout {
    border-top: 1px solid #bbb;
    border-bottom: 2px groove #c88;
    width: 300px;
    display: inline-block;
    transform-origin: right;
    padding: 3px;
    border-radius: 3px 3px 0 0;
    text-align:right;
    transition-duration: 2s;    
}
    #domout:hover {
       border-top: 1px solid transparent;
       border-bottom: 2px groove #c88;
       background: #cfcfef;
       box-shadow: 0 0 8px #fff;
    }

#domin { 
    transform:scaleX(3) skewX(-10deg);
    text-shadow: 0 -1px 0px rgba(255,255,255,0.8), .4px 1px 0px #533;
    width: auto;
    display: inline-block;
    transform-origin: right;
    padding: 3px;
}
    #domin a, #domin a:visited {
        font: 600 14px "Trebuchet MS", Helvetica, sans-serif;
        font-variant: small-caps;
        color: #a33;
        text-decoration:none;
/*        
        background: linear-gradient(180deg, ##a33 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
*/
    }
ul {
    margin-top: 0;
}

#bcomp {
    font-weight: 800;
    font-size: 110%;
}

.but {
    display: inline-block;
    min-width: 8em;
    text-align: center;
    color: #223;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 1);
    margin: .4em .1em;
    padding: .2em;
    background: #999;
    background: radial-gradient(farthest-corner at 0% 30%,#909090,#888,#888,#888,#888,#666); 
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #555;
    border-right: 2px solid #777;
    border-left: 2px solid #aaa;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
}

a.but:visited {
    color:#223;
}

    .but:hover {
        background: #999;
        border-color: #888;
        box-shadow: #445 0 0 2px;
    }

    .but img {
        vertical-align: middle;
        margin-right: 1em;
    }

    .but label {
        display: block;
        width: 100%;
        height: 100%;
    }

.langs {
    float:right;
    clear:right;
    border-left: 1px solid #777;
    padding-left:1em;
}
#burlfi, #burlen {
    float:right;
    clear:right;
}

.endro {
    border-top: 1px dotted #999;
    margin: 2em 1em 1em;
    font-size: 30%;
    color: #888;
}

html[lang=en] *[lang=fi],
html[lang=fi] *[lang=en],
.m28 .to28, .m21 .to21 {
    display: none;
}

#menu .but {
    width: auto;
    white-space: nowrap;
    cursor: pointer;
    float: left;
    clear: both;
}
/* Bit more room for 'dangerous' buttons. */
#reset, #newgame {
    margin-bottom:.9em;
}

#welcome {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    background-color: #aa3333;
    color: #fff;
    padding-top: 2em;
    font-size: 300%;
    text-align: center;
    vertical-align: middle;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in;
}
    #welcome noscript {
        font-size:initial;
    }

#fs {
    position: absolute;
    top: 0;
    left: 0;
}
    #fs.full {
        background-color: #f0f0f0;
        background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0f0 71%,#c0c0e0 100%);
        height:100%;
    }

:-webkit-full-screen {
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        background: none;
}

::backdrop {
    background-color:yellow;
}
#fscanvas {
}
#overCanvas {
    position: absolute;
    right: 0;
    bottom: 0;
}

#overCanvas {
    pointer-events: none;
    border: 0px solid red;
}



#menu {
    pointer-events: all;
    display: inline-block;
    position: absolute;
    right: 0em;
    bottom: 0em;
    height: 1.5em;
    width: 7em;
    opacity: 1;
    background-color: #fff;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #555;
    border-right: 2px solid #777;
    border-left: 2px solid #aaa;
    border-radius: 2px;

    text-align: center;
    padding-bottom: 0em;
    overflow: hidden;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}

    #menu.show {
        right: 0;
        height: 16em;
        width: auto;
        opacity: 1;
        font-size: 100%;
        transition-duration: .5s;
        visibility: visible;
        border: 2px outset #aaa;
        border-bottom:0;
        padding-bottom: 2em;
        zoom: 100%;
    }

#menu #openmenu {
    pointer-events: all;
    cursor: pointer;
    display: block;
    height: 100%;
    min-width:3em;
    width: 100%;
  
    background: #999;
    background: radial-gradient(farthest-corner at 0% 30%,#909090,#888,#888,#888,#888,#666); 
    color: #223;
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 1);
    text-align: center;
    padding-bottom: 0em;
    overflow: hidden;
    transition: background .7s linear 1s, height 0s linear 1s;
    margin: 0;
}

    #menu #openmenu:hover {
        background: #999;
        border-color: #777;
        
        transition-delay: 0s;
    }

#menu #menus {
    display: block;
    zoom: 100%;
    transition: all .4s linear;
}

#menu.show #menus {
    font-size: 100%;
}

#menu.show > #openmenu {
    cursor: default;
    letter-spacing: .3em;
    background: white;
    color: inherit;
    transition: background .4s linear 0s, height 0s linear 0s;
    height: 1.5em;
    /* -webkit-animation: closerAnim 6s linear;*/
}
/*
@-webkit-keyframes closerAnim {
    0%  {background-position: 90% 50% ;}
    100% { background-position: 10% 50%; }
}
    */
.st {
    display:inline-block;
    vertical-align:middle;
}

.dsg .onlydsg {
    display:initial;
}

.dsg .nodsg, .onlydsg {
    display:none;
}