body {
    font-family:helvetica;
}

#glcanvas {
    float:left;
}

#console {
    float: left;
    border: solid 1px green;
    margin-left: 10px;
    padding: 5px;
    overflow-y: scroll;
    overflow-x: scroll;
}

.debugTab {
    font-size: 12px;
    line-height:15px;
}

#debugTabs{
    margin-top:10px;
    border-bottom:solid 1px black;
    height:22px;
    padding-left:5px;
}

#debugTabs span{
    display:block;
    float:left;
    margin:0px;
    padding:3px;
    text-decoration:none;
    border:solid 1px gray;
    color:#CCC;
    font-size:13px;
}

#debugTabs span:hover{
    cursor:pointer;
}

#debugTabs .tab.selected{
    border-bottom:solid 1px white;
    color:black;
}

.consoleModTitle {
    color:red;
    font-size:14px;
    line-height:19px;
}

.consoleModTitle.prefix {
    font-weight:bold;
    color: #f0a;
    text-transform: uppercase;
}

.consoleSub {
    width:60px;
    font-size:10px;
    padding:0px;
    outline:none;
    border:0;
    border-bottom: solid 1px #aaa;
}

.consoleImage, .consoleVar {
    color:#b39;
}

.consoleVal {
  color: #906;
}

.consoleImage:hover, .consoleVar:hover {
    cursor:pointer;
}

#consoleImages {
    overflow-y: visible;
}

#consoleImages img{
    width: 100px;
    height: 100px;
    padding:5px;
}

#consoleImages img:hover{
    cursor:pointer;
}

#consoleContents {
    position:relative;
    z-index:1;
}

.switchChild {
    font-size:11px;
}

.componentUI{
    color:#48d;
}

.componentUI:hover{
    cursor:pointer;
}

.extraData {
    display:none;
}


#showFps {
    color: #0F0;
    position:absolute;
    top:20px;
    left:20px;
    font-weight:bold;
    z-index: 200;
    font-size:25px;
}

#bottomLogo {
    position:absolute;
    bottom:20px;
    left:20px;
    height:175px;
    width:927px;
    z-index: 200;
}


#buttons {
}

#menu-icon:hover{
  cursor: pointer;
}

#menu-close{
  position:absolute;
  top:0px;
  right:0px;
  font-size:11px;
}

#menu {
    position:absolute;
    bottom:20px;
    right:20px;
    z-index:200;
}

#menuContainer {
    border:solid 5px rgba(255,255,255,0.05);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(194,194,194, 0.2);
    box-shadow: 0 2px 2px 0 rgba(194,194,194, 0.2);
    background-color:rgba(255,255,255,0.05);

    color: rgba(255,255,255,0.50);
    text-align:center;
    font-size:18px;

    position:absolute;
    bottom:0px;
    right:0px;
    padding:5px;
    width:160px;
}


#menuContainer select, #menuContainer option{
    background-color: rgba(255,255,255,0.4);
    color: black;
}

#menuContainer a, #resolution{
    display:block;
    color: rgba(255,255,255,0.50);
    text-decoration:none;
    padding:10px;
}

#menuContainer a.hide{
    display:none;
}

#menuContainer a:hover{
    color:rgba(255,255,255,1.0);
}


.hide {
    display:none;
}

.fullWindow{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);

}


.fullWindow #glcanvas{
    position:fixed;
    padding:0;
    margin:0;

    left:0;

    width: 100%;
    background:rgba(255,255,255,0.5);
}




@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


#loading {
    position: fixed;
    background-color:#000;
    width:100%;
    height:100%;
    z-index:1000;
}

#loading_spinner {
    position:absolute;
    width:267px; /*image width */
    height:200px; /*image height */
    left:50%;
    top:50%;
    margin-left:-134px; /*image width/2 */
    margin-top:-135px; /*image height/2 */
}

#loading_txt {
  text-align:center;
  font-size:30px;
    position:absolute;
    width:300px; /*image width */
    height:30px; /*image height */
    left:50%;
    top:50%;
    margin-left:-150px; /*image width/2 */
    margin-top:65px; /*image height/2 */
    color:white;
}


.timestamp {
  color:red;
  font-weight:bold;
}


#overlay {
  z-index:10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}