/*
 * Copyright (c) 2012 Brandon Jones
 *
 * This software is provided 'as-is', without any express or implied
 * warranty. In no event will the authors be held liable for any damages
 * arising from the use of this software.
 *
 * Permission is granted to anyone to use this software for any purpose,
 * including commercial applications, and to alter it and redistribute it
 * freely, subject to the following restrictions:
 *
 *    1. The origin of this software must not be misrepresented; you must not
 *    claim that you wrote the original software. If you use this software
 *    in a product, an acknowledgment in the product documentation would be
 *    appreciated but is not required.
 *
 *    2. Altered source versions must be plainly marked as such, and must not
 *    be misrepresented as being the original software.
 *
 *    3. This notice may not be removed or altered from any source
 *    distribution.
 */

body {
    margin: 0;
    font-family: Verdana, sans-serif;
    color: black;
    background-color: #EBEBEB;
}

h1 {
    font-size: 1.4em;
}

button {
    height: 24px;
    padding: 0 8px;
}

#webgl-canvas {
    display: block;
    background-color: #330000; /* Will display red background if something went wrong during context creation */
}

#stats {
    z-index: 2;
}

#content-frame:-webkit-full-screen,
#content-frame:-webkit-full-screen #webgl-canvas {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

#content-frame:-webkit-full-screen #stats {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#content-frame:-webkit-full-screen #fullscreen {
    visible: false;
}

#content-frame:-moz-full-screen,
#content-frame:-moz-full-screen #webgl-canvas {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

#content-frame:-moz-full-screen #stats {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#content-frame:-moz-full-screen #fullscreen {
    visible: false;
}

/* Desktop stylesheet */
@media only screen and (min-width: 961px) {
    .content-column {
        margin: auto;
        width: 970px;
    }

    #gl-error {
        display: block;
        margin: auto;
        padding: 1em;
        text-align: center;
        width: 854px;
        height: 480px;
        background-color: #330000;
        color: white;
    }

     #gl-error a,
     #gl-error a:hover {
        color: #DEDEFF;
    }

    #content-frame {
        margin: auto;
    }

    /* #canvas-container { */
        margin: 5px 0 5px 0;
        background-color: #444444;
        background-image: -webkit-linear-gradient(top, #444444, #303030);
        background-image: -moz-linear-gradient(top, #444444, #303030);
        background-image: -o-linear-gradient(top, #444444, #303030);
    }

    #webgl-canvas {
        display: block;
        margin: auto;
        position: relative;
        width: 1000px;
        height: 480px;
        z-index: 1;
        background-color: #330000; /* Will display red background if something went wrong during context creation */
    }

    #stats {
        position: relative;
    }

    #fullscreen {
        float: right;
    }
}

/* Mobile stylesheet */
@media only screen and (max-width: 960px) {
    #gl-error {
        margin: 0.5em;
    }

    #content-frame,
    #webgl-canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        margin: 0;
    }

    #stats {
        position: absolute;
        bottom: 5px;
        left: 5px;
    }
}