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