html, body { height: 100%; margin: 0; padding:0; width: 100%; }

body { background-color: rgb(0,0,0); background-image: url(/images/audience-backlit.jpg); background-position: center; background-size: cover; color: white; font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; overflow: hidden; }

a { text-decoration: none; color: white; }
a:visited { text-decoration: none; color: white; }

header, footer { background-color: rgba(0,0,0,0.75); /*border-bottom: 1px solid #333; border-top: 1px solid #333;*/ position: fixed; width: 100%; z-index: 10; }
header { padding: 0; margin: 0; height: 30px; top: 0; }
.main-menu { display: inline-flex; padding: 1px; margin: 0; }
.main-menu a { padding: 6px 10px; }
.main-menu a:hover { background: linear-gradient(#900, #500); background-color: rgb(159,3,0); cursor: pointer; }
.main-menu img { margin: -3px 0; }
.user-menu { display:inline-flex; position: absolute; right: 0; }

#startevent, #endevent { text-align: center; width: 50px; }

.viewport { position: absolute; bottom: 30px; left: 0; right: 0; top: 32px; }

.menu-wrapper { position: absolute; bottom:0; top: 0; width: 32px; }
.menu-wrapper ul { display: flex; margin: 0; padding: 0; flex-direction: column; }
.menu-wrapper li{ margin: 6px auto; list-style:none; cursor: pointer; text-align: center; }
.menu-wrapper a, a:visited { font-size: 18px; text-decoration: none; color: white;  }
.menu-wrapper a:hover { color: rgb(223,3,0); }
.listeners { font-size: 13px; }

.video-wrapper { position: absolute; bottom:0; left: inherit; right: 380px; top: 0; overflow-y: auto; }
.videoplayer { padding-top: 56.25%; /* 16:9 Aspect Ratio */ position: relative; }
.videoplayer iframe, #flowplayer, #publisher { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; }
.video-stream-info { padding: 5px 0px; margin: 5px 0px; }
.videores { border-radius: 5px; background-color: rgba(31,95,255,0.5); background: linear-gradient(#39F, #248, #124); padding: 5px; margin: 5px 0px; }
.stream-info-block { background-color: rgba(0,0,0,0.25); border-radius: 5px; padding: 5px; margin-bottom: 10px; }

.grids { display: block; margin: auto; position: relative; max-width: 1076px; padding: 10px; }
.grid { border: 1px solid #333; display: inline-block; margin-bottom: 10px; margin-right: 10px; width: 320px; padding: 0 7px; background: rgba(0, 0, 0, 0.75); position: relative; white-space: nowrap; overflow: hidden; cursor: pointer; text-shadow: 2px 2px 4px black; }
.grids a:hover { background-color: rgba(255,0,0,0.25); box-shadow: 0 0 5px rgba(255,0,0,0); }
.grids .title { margin-top: 5px; margin-bottom: 5px; }
.grids .user-name { margin-top: 5px; }
.grids .stream-info { margin-bottom: 5px; }
.grids .stream-viewers { position: absolute; right: 5px; bottom: 5px; }
.image { padding-bottom: 56.25%; /* 16:9 */ position: relative; overflow: hidden; }
.image img{ margin: auto; position: absolute; max-width: 100%; max-height: 100%; top: 0; bottom: 0; left: 0; right: 0;  }
   
.side-wrapper { border: 1px solid #333; color: rgb(231,231,231); position: absolute; background-color: rgb(0,0,0); bottom: 10px; right: 10px; top: 10px; width: 360px; }
.info-wrapper { height: 109px; }
.event_host { text-align: left; border-bottom: solid 2px rgb(63,63,63); }
.event_host span{ float: right; }
.chatbox h3 { text-shadow: 4px 4px rgba(0,0,0,0.50); height: 50px;}
.chathead { border-bottom: solid 1px #333; padding: 6px; }
.chatstatus { height: 74px; text-shadow: 2px 2px rgba(0,0,0,.5); border-bottom: solid 2px rgb(63,63,63); }
.chatstatus p { text-align: left; margin: 0px; font-size: 12px; }
.streaminfo { display: block; margin: 10px; text-align: left; font-size: 16px; }
.hypeWrapper { position: absolute; width: 100%; bottom: 10px; }
.hype { background-color: rgb(159,0,0); border: 1px solid rgb(159,0,0); color: rgb(0,0,0); font-size: 20px; font-weight: bolder; outline:none; padding: 4px 10px; cursor: pointer; }
.hypeoff { color: rgb(159,0,0); background-size: contain; background-image: url(/images/hypebg.gif); }
#hype { font-size: 26px; float: right; text-shadow: 2px 2px rgba(0,0,0,0.50); }
    
.login-block { background-color: black; padding: 0 10px; position: relative; z-index: 20; }
.login-block div { font-size: 20px; font-weight: bolder; margin: 10px 0; }
.login-block p { margin-bottom: 10px; }
.login-block input { background-color: rgb(159,0,0); border: 1px solid rgb(159,0,0); box-sizing: border-box; color: rgb(255,255,255); font-size: 18px; outline:none; padding: 4px 10px; cursor: pointer; width: 100%; }
    
.chat-wrapper { position: absolute; bottom: 30px; top: 29px; width: 100%; overflow-y: scroll; overflow-x: hidden; }
#usermsg { flex: 2; height: 26px; background: transparent; color: white; border: none; outline: none; padding: 1px 5px; }
#submitmsg { padding: 5px 15px; background: linear-gradient(#900, #500); background-color: rgb(159,0,0); border: none; color: white; }
.chatimg { display: inline-block; min-height: 25px; max-height: 30px; max-width: 100%; margin-top: -10px; margin-bottom: -10px; vertical-align: middle; }
.bigimg { display: block; margin:0 auto; max-height: 240px; max-width: 100%; }
.msgln { background-color: rgb(15,15,15); border-bottom: 1px solid black; font-size: 14px; padding: 6px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 2; }
.msgln a:visited, .msgln a {color: inherit}
.msgln:nth-of-type(odd) { background-color: rgb(23,23,23); }
.event_owner, .event_owner:nth-of-type(odd) {color: #99CCFF;}	
.msgadmin {color: orange; }
.msgmod { color: lightgreen; }
.msguser { color: #CCC; }
.msgspan { float: right; color: #BBB; }
.event_owner, .msgadmin, .msgmod, .msguser, .msgspan { font-weight: bold; }
    
.chat-input { border-top: 1px solid rgb(159,0,0); position: absolute; display: inline-flex; bottom: 0; height: 30px; left: 0; right: 0; }
#emoteList { border: 1px solid rgb(169,3,47); background-color: rgba(0,0,0,0.5); display: none; position: absolute; bottom: 120px; right: 12px; width: auto; height: 320px; overflow: auto; z-index: 100; }
.emotes { padding-left: 4px; width: 30px; font-size: 26px; color: rgb(159,0,0); }
   
.UsersOnlineList { background-color: rgba(0,0,0,0.75); display: none; position: absolute; bottom: 84px; top: 109px; width: 100%; z-index: 100;}
#OnlineList { position: relative; padding: 12.4px; }
   
.announce-wrap { display: block; max-width: 800px; margin: auto; }
.announce-block { background-color: rgba(0,0,0,0.75); border: 1px solid #333; margin: 10px; padding: 0px 15px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
.announce-block h2 { color: #CCC; }
.announce-block p { color: #FFF; }
.announce-block h2 img { height: 42px; margin: -10px 0; }
.announce-block p img { display: inline-block; vertical-align: middle; }
.announce-block a { color: #CCC; }
    
footer { bottom: 0; display: flex; height: 28px; padding: 0; }
footer div { margin-top: 6px; margin-left: 6px; }
.footer-left { flex: 200px; }
.footer-right-text {  }
.footer-right { margin-top: 4px; }
    
.purple { color: blueviolet; }
	
.hide { display: none; }
.clear { float: none; }  
    
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0); }
          
::-webkit-scrollbar
{ width: auto; }
          
::-webkit-scrollbar-thumb { background-color: rgba(34,34,34,0.5); }
		
@media screen and (max-width:777px) {
    .menu-wrapper, .video-wrapper { position: relative; left: 0; right: 0; height:50%; }
    .menu-wrapper { height: 50px; }
    .menu-wrapper ul { flex-direction: row; }
    .main-menu a:nth-child(3),.main-menu a:nth-child(4) { display: none; }
    .stream-info-block { display: none; }
    .chatstatus { height: auto; }
    .side-wrapper { border-left: none; border-right: none; position: relative; height:50%; right: 0; bottom: 0; top: 0; width: 100%; }
    .announce-wrap { display: none; }
    .mobile-hide { display: none; }
    .grid { width: 96%; }
}