rc-web@5: body{
rc-web@26:     background-color: black;
rc-web@5:     color: white;
rc-web@29:     font: 12px Helvetica, Arial;      
rc-web@42: 
rc-web@5: } 
rc-web@5: 
rc-web@5: h3,h4,h5,h6 {
rc-web@5:     width: 400px;
rc-web@5:     background-color: white;
rc-web@5:     display: inline;
rc-web@5:     color: #666;
rc-web@5:     z-index: 2;
rc-web@5: }
rc-web@5: 
rc-web@5: h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
rc-web@5: h2{ font: 28px Helvetica, Arial; color:white}
rc-web@5: h3{ font: 12px Helvetica, Arial; color:white }
rc-web@5: h4{ background-color: black; font: 19px Helvetica, Arial; 
rc-web@5:     text-align: center;  margin-left:auto; margin-right:auto; color:white}
rc-web@5: 
rc-web@5: a:link {color:#666;}
rc-web@5: a:visited {color: #666;}
rc-web@5: a:hover {color: black; background-color:gray;}
rc-web@5: a:active {color: black;background-color:white;} 
rc-web@5: 
rc-web@5: ul, li, h4, h3, h2, h1, p{
rc-web@5:     padding:0;
rc-web@5:     margin:0;
rc-web@5:     list-style:none;
rc-web@5: }
rc-web@5: 
rc-web@11: 
rc-web@5: .outermaster{
rc-web@54:     height: 800px;
rc-web@29:     width: 1024px;
rc-web@29:     border-radius: 15px;
rc-web@29:     background-color:DimGray;
rc-web@29:     border: 1px solid gray;
rc-web@5:     position: relative;
rc-web@29:     !padding: 5px 5px 5px 5px ;
rc-web@29:     color: white;
rc-web@29:     opacity:0.8;
rc-web@29:     !top: 10%
rc-web@25:     +filter: invert(100%);
rc-web@5: }
rc-web@5: 
rc-web@29: #live{
rc-web@29:     margin-left:auto; margin-right:auto; margin-top:5px;
rc-web@29:     !margin: 2px;
rc-web@29:     width: 99%;
rc-web@54:     height: 100%;
rc-web@29:     text-align: center;
rc-web@29:     border-radius: 15px;
rc-web@29:     background-color:black;
rc-web@29:     border: 1px solid gray;
rc-web@29:     !position: relative;
rc-web@29: !    padding: 5px 5px 5px 5px ;
rc-web@29:     color: white;
rc-web@29:     !top: 10%
rc-web@29:     +filter: invert(100%);
rc-web@29: }
rc-web@29: 
rc-web@42: 
rc-web@42: 
rc-web@29: #comms{
rc-web@29:     border-radius: 15px;
rc-web@32:     height: 180px;
rc-web@38:     width: 350px;
rc-web@29:     margin: 0px;
rc-web@29:     border: 1px solid gray;
rc-web@16:     position: absolute;
rc-web@29:     bottom: 80px;
rc-web@29:     left: 14px;
rc-web@16:     padding: 5px 5px 5px 5px ;
rc-web@16:     color: black;
rc-web@38:     
rc-web@38: }
rc-web@38: 
rc-web@38: #midcomms{
rc-web@38:     font-size: 3em; 
rc-web@38:     font-weight:bolder;
rc-web@38:     !display:inline;
rc-web@38:     text-align:center;
rc-web@38:     border-radius: 15px;
rc-web@38:     height: 180px;
rc-web@38:     width: 180px;
rc-web@38:     margin: 0px;
rc-web@38:     border: 1px solid gray;
rc-web@38:     position: absolute;
rc-web@38:     bottom: 80px;
rc-web@38:     left: 380px;
rc-web@38:     padding: 5px 5px 5px 5px ;
rc-web@38:     color: black;
rc-web@38: }
rc-web@38: #totalcountdown  {
rc-web@38:     font-size: 0.6em;
rc-web@38:     color:white;
rc-web@38:     position:absolute;
rc-web@38:     bottom: 0px;
rc-web@38:     text-align:center;
rc-web@38:     width:100%;
rc-web@38: }
rc-web@38: #count  {
rc-web@38:     font-size: 3em;
rc-web@38:     background:transparent;
rc-web@38:     
rc-web@16: }
rc-web@16: 
rc-web@29: #preview{
rc-web@29:     border-radius: 15px;
rc-web@32:     height: 180px;
rc-web@29:     width: 422px;
rc-web@29:     margin: 0px;
rc-web@29:     border: 1px solid gray;
rc-web@29:     position: absolute;
rc-web@29:     bottom: 80px;
rc-web@29:     right: 14px;
rc-web@29:     padding: 5px 5px 5px 5px ;
rc-web@29:     color: black;
rc-web@29: }
rc-web@29: 
rc-web@29: 
rc-web@29: .footdata{
rc-web@29:     margin-top:10px;
rc-web@29:     margin-left:auto; margin-right:auto;
rc-web@29:     border-radius: 15px;
rc-web@29:     height: 7%;
rc-web@29:     width: 98%;
rc-web@29:     !margin: 10px;
rc-web@29:     border: 1px solid gray;
rc-web@29:     bottom: 2px;
rc-web@29: !    padding: 5px 5px 5px 5px ;
rc-web@29:     background: DimGray;
rc-web@29:     opacity:1;
rc-web@29: }
rc-web@29: 
rc-web@29: 
rc-web@11: .outersquare{
rc-web@39:     border-radius: 15px;
rc-web@39:     border: 1px solid blue;
rc-web@39:  !   position: absolute;
rc-web@39:     !top: 50px;
rc-web@39:     !left: 110px;
rc-web@16:     padding: 1px 1px 1px 1px ;
rc-web@39:     background: black;
rc-web@39:     width: 99%;
rc-web@39:     height: 690px;
rc-web@11: }
rc-web@11: 
rc-web@32: .svgmusic {
rc-web@32:     display:block;
rc-web@58:     border-radius:15px;
rc-web@32:     margin: 0px;
rc-web@32:     width: 100%;
rc-web@58:     height: 450px;
rc-web@26: }
rc-web@26: 
rc-web@19: .magicsquare {
rc-web@29: !    margin: 10px;
rc-web@58:     border-radius: 2px;
rc-web@58:     border: 1px solid white;
rc-web@39:     !padding: 2px 2px 2px 2px;
rc-web@39:     background: transparent;
rc-web@58:     width: 20px; height: 25px;
rc-web@39:     border-radius: 10px;
rc-web@19:     float: left;
rc-web@39:     color: white;
rc-web@58:     font-size: 1em;    
rc-web@19:     text-align: center;
rc-web@26: }
rc-web@19: 
rc-web@11: .latencies{
rc-web@29: !    height: 90px; width: 200px;
rc-web@29: !    border: 1px solid blue;
rc-web@29: !    position: relative; top: 15%;
rc-web@29: !    float: right;
rc-web@29: !    padding: 5px 5px 5px 5px ;
rc-web@29: !    background-color: yellow;    
rc-web@11: }
rc-web@11: 
rc-web@22: #datetime{
rc-web@29:     display:table-cell; vertical-align:middle;
rc-web@29:     !margin-top: 10px; 
rc-web@29:      margin-right: 30px;
rc-web@29:     float:left;
rc-web@29:     padding: 3px 3px 3px 3px;
rc-web@29:     font-size:1em; color: white;
rc-web@29:     !position: absolute; 
rc-web@29:     !bottom: 10px; 
rc-web@29:     !left: 25%;
rc-web@29:     !float: left;
rc-web@29:     background-color: transparent;    
rc-web@23:     opacity: 0.7;
rc-web@22: }
rc-web@22: 
rc-web@23: #current{
rc-web@29:     display:table-cell; vertical-align:middle;
rc-web@29:     margin-top: 10px; margin-right: 30px;
rc-web@29:     float:left;
rc-web@29:     !position: absolute; 
rc-web@29:     !right: 25%; 
rc-web@29:     font-size:2em; 
rc-web@29:     font-weight: bold;
rc-web@25:     color: white;
rc-web@24:     background-color: transparent;    
rc-web@29:     z-index: 3;
rc-web@26:     opacity: 0.8;
rc-web@29:     padding: 3px 3px 3px 3px;
rc-web@23: }
rc-web@23: 
rc-web@23: #client_latency{
rc-web@29: !    float:left;
rc-web@29:     display:table-cell; vertical-align:middle;
rc-web@29:     margin-top: 10px; margin-right: 30px;
rc-web@29:     text-align:center;
rc-web@29:     font-size:1em;
rc-web@29:     color: white;
rc-web@23:     z-index: 1;
rc-web@29:     padding: 3px 3px 3px 3px;
rc-web@29:     opacity: 0.7;
rc-web@23: }
rc-web@23: 
rc-web@11: .metrocase {
rc-web@29:     float:left;
rc-web@29:     display:table-cell; vertical-align:middle;
rc-web@29:     margin-top: -22px; margin-right: 30px; margin-left: 20px;
rc-web@29:     border-radius: 15px;
rc-web@29:     position: relative; top: 50%;
rc-web@29: 
rc-web@29:     width: 200px;  height: 40px;
rc-web@11:     color: black;
rc-web@11:     text-align: center;
rc-web@26:     font-size: 4em; font-color: black;
rc-web@11:     background: transparent;
rc-web@11:     z-index: 2;
rc-web@29:     border: 2px solid gray;
rc-web@11: }
rc-web@11: 
rc-web@23: #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@5: 
rc-web@5: #fluid {}
rc-web@26: .fluid-img{ height:50%; width:50%; }
rc-web@5: 
rc-web@26: .clear { clear:both; }
rc-web@5: 
rc-web@5: #client_chronometer{ 
rc-web@29:     display:table-cell; vertical-align:middle;
rc-web@29:     margin-top: -15px; 
rc-web@29: !margin-left: 30px;    
rc-web@29:     float:left;
rc-web@29:     !padding: 0 0 0 0;
rc-web@29:     !margin: 10px;
rc-web@29:     border-radius: 15px;
rc-web@29:     border: 2px solid gray ; 
rc-web@5:     background-color: black;   
rc-web@23:     color: white;
rc-web@29:     font-size: 3em; 
rc-web@29:     text-align: center;
rc-web@23:     opacity:0.7;
rc-web@29:     !position: absolute; 
rc-web@29:     !right: 20px; 
rc-web@29:     !bottom: 0px;
rc-web@29:     width: 220px; 
rc-web@29:     !height: 40px;
rc-web@5:     z-position: 2;
rc-web@5: }
rc-web@5: 
rc-web@5: #countinnumber{ 
rc-web@29:     border-radius: 15px;
rc-web@26:     position: absolute; 
rc-web@29:     width: 100%; height: 90%;
rc-web@38:     background-color:black;
rc-web@38:     font-size: 16em; 
rc-web@29:     font-weight:bolder;
rc-web@5:     display:inline;
rc-web@5:     text-align:center;
rc-web@5:     z-index: 2;
rc-web@5:     opacity:0.5;
rc-web@5: }
rc-web@5: 
rc-web@5: #content-txt {
rc-web@29:     width: 100%; height: 90%;
rc-web@26:     font-size:3em;
rc-web@26:     text-align:center;
rc-web@26:     background-color:black;
rc-web@26:     border:1px solid white;
rc-web@26:     margin-left:auto; margin-right:auto;
rc-web@26:     display:table-cell;
rc-web@26:     vertical-align:middle;
rc-web@29:     border-radius: 15px;
rc-web@26: }