@font-face {
    font-family: 'renegade_masternormal'; // http://www.1001freefonts.com/renegade_master.font
    src: url('../fonts/renegade_master-webfont.eot');
    src: url('../fonts/renegade_master-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/renegade_master-webfont.woff') format('woff'),
         url('../fonts/renegade_master-webfont.ttf') format('truetype'),
         url('../fonts/renegade_master-webfont.svg#renegade_masternormal') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {
    font-family: 'renegade_masternormal';
    text-transform: lowercase;
}

#preload { 
    width:50px;
    height: 50px;
    position: fixed;
    display: none;
}
#preload_overlay {
    opacity: 0.5;
    background-color: black;
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    display:none;
}
​
body,html {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
    font-family: 'renegade_masternormal', Arial;
    //overflow: hidden;
    overflow-x: visible;
    text-align: center;
    background-color: #2b2c25;
    color: white;

    

    h1,h2,h3,h4 {
        margin:0px;
        padding:0px
    }

    .tbox {
        table, td, tr, th {
            padding: 5px;
            border-collapse: collapse;
            border: 1px solid silver;
            margin-left: auto;
            margin-right: auto;
            with: 50%;
        }

        #score_content,#market_content {
            overflow: auto;
        }

        #left {
            float:left;
            width:48%;
            margin-left: 1%;
            margin-top:1%;
        }
        #right {
            float:left;
            width:48%;
            margin-left:2%;
            margin-top:1%;
        }
        .item {
            width:99%;
            text-align:left;
            margin-top:1%;
            margin-bottom:2%;
            padding:1%;
            background-color:#4D4F46;
            cursor: pointer;
        }

        .about_img, .about_img2 {
            height: auto;
            float:left;
            margin-right:3%;
            margin-bottom:3%;
        }

        h3 {
            margin-top:2%;
        }
        #about_table {
            width:98%;
            border: 1px solid white;
            tr {
                td {
                    vertical-align: top;
                    padding:1%;
                    width:50%
                }
            }
        }
    }
}

#container{
    width:900px;
    height:600px;
    margin:0 auto;
    position: relative; /* add */
    overflow-x: visible;

    #canvas {
        
    }

    #controls {
        
    }

    #ad {
        //background-color: pink;
        width:468px;
        height:60px;
        margin-left: auto;
        margin-right:auto;
        position:relative;
        display:none;
    }

    #menu {
        display:none;
        width:98%;
        //background-color: #535548;
        color: white;
        position:absolute;
        bottom:0px;
        font-size:0.9em;
        padding:1%;
        text-align: left;

        span {
            float: right;
        }

        #user_info {
            float:none;
        }

        button {
            font-size:1em !important;
        }

        #log {
            font-size: 0.6em;
        }
    }

    .canvas {
        position:absolute; /* change */
        left: 0; 
        top: 0;
        width: 100%;
        height: 100%;
        //overflow: hidden;
        text-align: left;
    }

    #btn_signout,#btn_market {
        display:none;
    }
}

input[type="text"],input[type="password"] {
    border: 2px dashed white;
    background-color: #2b2c25;
    color: white;
    padding: 0.5em;
    font-size: 0.9em;
}

button {
    background-color: #2b2c25;
    border: 2px dashed white;
    cursor: pointer;
    color: white;
}
button:hover {
    color: cyan;
}
