html { height:100%; } body { font-family: arial,sans; margin:0px; height:100%; background-color:#333333; } div.cams { display:none; height:calc(60% - 30px); height:-webkit-calc(60% - 30px); height:-moz-calc(60% - 30px); height:-o-calc(60% - 30px); height:-ms-calc(60% - 30px); width:100%; background-color:#707070; float:top; } video { margin-bottom:-5px; } div#videoplayer { height:100%; width:22%; display:none; position:relative; } div#videoplayer>button { font-size:8px; padding:0px; position:absolute; top:0px; right:0px; } iframe#videoplayerframe { border-width:0px; margin:0px; // For some reason, at least on firefox, iframes have a little bump below them, so we take 4 pixels off to avoid that height:calc(100% - 4px); height:-webkit-calc(100% - 4px); height:-moz-calc(100% - 4px); height:-o-calc(100% - 4px); height:-ms-calc(100% - 4px); width:100%; } div#chat { display:inline-block; height:calc(100% - 30px); height:-webkit-calc(100% - 30px); height:-moz-calc(100% - 30px); height:-o-calc(100% - 30px); height:-ms-calc(100% - 30px); width:85%; background-color:#e0e0e0; float:left; } div#tabs { display:block; width:100%; height:30px; background-color:#7070a0; } div.tab>button { font-size:8px; padding:0px; margin-left:6px; margin-right:-4px; float:top; position:relative; top:-4px; } div.tab { display:inline-block; height:25px; padding-left:6px; padding-right:6px; padding-top:4px; border-top-style:solid; border-left-style:solid; border-right-style:solid; border-width:1px; border-color:#505050; border-top-left-radius:6px; border-top-right-radius:6px; background-color:#a0a0a0; cursor:default; } div.tabfocus { background-color:#c0c0c0; } div.tabactivity { background-color:#ffa000; } div.chatbox { display:inline-block; width:100%; height:calc(100% - 30px); height:-webkit-calc(100% - 30px); height:-moz-calc(100% - 30px); height:-o-calc(100% - 30px); height:-ms-calc(100% - 30px); overflow:auto; } div.userlist { display:inline-block; height:calc(100% - 30px); height:-webkit-calc(100% - 30px); height:-moz-calc(100% - 30px); height:-o-calc(100% - 30px); height:-ms-calc(100% - 30px); width:15%; background-color:#c0c0c0; float:right; overflow:auto; } div.input { display:inline-block; height:30px; width:100%; background-color:#a0a0a0; float:bottom; } input#message { width:calc(100% - 70px); width:-webkit-calc(100% - 70px); width:-moz-calc(100% - 70px); width:-o-calc(100% - 70px); width:-ms-calc(100% - 70px); height:22px; } input#send { width:55px; } div#usermenu { position:absolute; display:none; border-style:solid; border-width:1px; border-color:#000000; background-color:#707070; padding-top:2px; padding-bottom:2px; } div.usermenuoption { display:block; cursor:default; padding-left:20px; padding-right:20px; white-space:nowrap; } div.usermenuoption:hover { background-color:#909090; } pre { display:inline-block; margin:0px; } div.cambox { display:inline-block; position:relative; height:100%; background-color:#262626; } div.cambox>span { position:absolute; top:calc(50% - 0.5em); top:-webkit-calc(50% - 0.5em); top:-moz-calc(50% - 0.5em); top:-o-calc(50% - 0.5em); top:-ms-calc(50% - 0.5em); left:0px; display:none; text-align:center; width:100%; color:#e0e0e0; } div.cambox:hover>span { display:inline-block; } div.cambox:hover>video { opacity:0.3; } div.fullscreen { display:none; /* Start hidden */ position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); text-align:center; color:#c0c0c0; } div.fullscreen>* { display:inline-block; vertical-align:middle; } button.fullscreenclose { position:absolute; right:0px; top:0px; border-style:none; border-width:0px; background-color:rgba(0,0,0,0); color:#c0c0c0; font-size:50px; } div.centerhelper { display:inline-block; vertical-align:middle; height:100%; } div#loggedout { padding-bottom:10px; } div#loggedin { display:none; padding-bottom:10px; } button#registerchannel { display:none; /* Start hidden */ } button#managemods_button { display:none; /* Start hidden */ } div#modmanagerlist { display:block; } div.modlistitem /* TODO: Rename to something more general for fullscreen panel lists? */ { text-align:left; padding:8px; border-style:solid; border-width:1px; border-color:#c0c0c0; } div.modlistitem>button { float:right; } button#banlist_button { display:none; /* Start hidden */ } button#setchanpass_button { display:none; /* Start hidden */ }