.webgl-content * {border: 0; margin: 0; padding: 0}
/*.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}*/

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;} 
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

#gameContainer {
	width: 70%;
    float:left;	
}

#sideTab {
    width: 30%;
    position: absolute;
    right: 0px;
    background-image: url('0904.jpeg'); 
}


/* horizontal button group*/
.btn-group .button {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    /*padding: 10px 24px; /* Some padding */
    /*cursor: pointer; /* Pointer/hand icon */
    /*float: left; /* Float the buttons side by side */
}

    .btn-group button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group .button:hover {
    background-color: #3e8e41;
}


/* top navigation */
/* Add a black background color to the top navigation */
.navbar {
    background-color: #333;
    overflow: hidden;
    font-family: Arial;
}

    /* Style the links inside the navigation bar */
    .navbar a {
        float: left;
        font-size: 16px;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .dropdown{
        float:left;
        overflow:hidden;
    }

    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit; 
        margin: 0;
    }
    /* Change the color of links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: #ddd;
        color: black;
    }


    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 80px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    /* inside the dropdown */
    .dropdown-content dropbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            /*padding: 14px 16px;*/
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

    /* Add a background color to dropdown links on hover */
    .dropdown-content dropbtn:hover {
        background-color: darkgreen;

    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

.flyout-content {
    visibility: hidden;
    position: relative;
    background-color: #f9f9f9;
    min-width: 90px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.dropdown-content dropbtn:hover > flyout-content{
        visibility: visible;
}

.dropdown-content-sub {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* inside the dropdown */
    .dropdown-content-sub dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        /*padding: 14px 16px;*/
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

        /* Add a background color to dropdown links on hover */
       .dropdown-content .dropdown-content-sub dropbtn:hover {
            background-color: darkgreen;
        }

/* Show the dropdown menu on hover */
.dropdown-content dropbtn:hover .dropdown-content-sub{
    display: block;
}

/* #testButtonList {
    position: relative;
    width: 700px;
    margin: 50px auto;
} */

/*ul {
    margin: 0 auto;
    position: relative;
    float: left;
}

    ul li {    /*labors button
        display: inline;
        margin: 0;
        padding: 0;
        float: left;
        position: relative;
    }

        ul li a {       /*labor x
            border-right: 1px solid #fff;
            padding: 10px 25px;
            color: #fff;
            text-shadow: 1px 1px 0 #222;
            text-decoration: none;
            display: inline-block;
            background: linear-gradient(#228b22,#006400);
        }

        ul li:hover > a {      
            background: linear-gradient(#006400,#228b22);
            color: #fff;
            opacity: 0.9;
        }

        ul li:hover > ul { /*fly out labors list
            visibility: visible;
        }

    ul ul, ul ul li ul {
        list-style: none;
        margin: 0;
        padding: 0;
        visibility: hidden;       /* by default hidden, fly out labors list and fly out demo list.
        position: absolute;
        width: 180px;
    }

    ul ul {
        top: 39px;
        left: 0;
    }

        ul ul li ul {
            top: 0;
            left: 181px;
        }

        ul ul li a {
            background: linear-gradient(#0065b2,#1685da);
            padding: 7px 15px;
            color: #fff;
            text-shadow: 0 1px 1px #111;
            text-decoration: none;
            display: inline-block;
            float: left;
            width: 150px;
            border-bottom: 1px dotted #fff;
        }

        ul ul ul li a {
            background: linear-gradient(#b22222,#8b0000);
        }*/