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:     padding:0px;
rc-web@43:     margin-top:2px;
rc-web@42:     margin-left:0px;
rc-web@42:     height:100%;
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:     margin-top:4px;
rc-web@58:     height: 580px;
rc-web@54:     width: 1020px;
rc-web@42:     border-radius: 15px;
rc-web@42:     position: relative;
rc-web@42:     +filter: invert(100%);
rc-web@42: }
rc-web@42: 
rc-web@42: #live{
rc-web@42:     width: 100%;
rc-web@54:     height: 500px;
rc-web@42:     text-align: center;
rc-web@42:     border-radius: 15px;
rc-web@42:     background-color:black;
rc-web@42:     border: 0px solid blue;
rc-web@42:     position: absolute;
rc-web@42:     color: white;
rc-web@42:     top: 0px;
rc-web@42:     +filter: invert(100%);
rc-web@42:     z-index:-1;
rc-web@42:     margin-left: 0px;
rc-web@42:     padding:0px;
rc-web@42: }
rc-web@42: 
rc-web@58: .xunit{
rc-web@58: display:block;
rc-web@58: background:black;
rc-web@58: width: 155px;
rc-web@58: height: 70px;
rc-web@58: padding: 5px 5px 5px 5px;
rc-web@58: float: left;
rc-web@58: }
rc-web@58: 
rc-web@58: .precd{
rc-web@58: height:70px;
rc-web@58: color:white;
rc-web@58: }
rc-web@58: 
rc-web@42: #info{
rc-web@42: position: absolute;
rc-web@42: border: 0px solid red;
rc-web@42: border-radius:15px;
rc-web@54: top: 450px;
rc-web@42: !padding: 5px 5px 5px 5px;
rc-web@42: height: 135px;
rc-web@42: width: 100%;
rc-web@42: }
rc-web@42: 
rc-web@42: #comms{
rc-web@42:     border-radius: 15px;
rc-web@42:     height: 120px;
rc-web@42:     width: 250px;
rc-web@42:     margin: 0px;
rc-web@42:     border: 1px solid gray;
rc-web@42:     color: black;
rc-web@42:     float:left;
rc-web@42:     padding: 5px 5px 5px 5px;
rc-web@42: }
rc-web@42: 
rc-web@59: #xcomms{
rc-web@59:     border-radius: 15px;
rc-web@59:     height: 120px;
rc-web@59:     width: 250px;
rc-web@59:     margin: 0px;
rc-web@59:     border: 1px solid gray;
rc-web@59:     color: black;
rc-web@59:     padding: 5px 5px 5px 5px;
rc-web@59: }
rc-web@59: 
rc-web@42: #midfoot{
rc-web@42:     !margin-left:auto; margin-right:auto;
rc-web@42:     border-radius: 15px;
rc-web@42:     height: 120px;
rc-web@42:     width: 30%;
rc-web@42:     margin: 0px;
rc-web@43:     margin-left:6%;
rc-web@42:     border: 1px solid gray;
rc-web@42:     padding: 5px 5px 5px 5px ;
rc-web@42:     background: black;
rc-web@42:     opacity:1;
rc-web@42:     float:left;
rc-web@42: }
rc-web@42: 
rc-web@42: #preview{
rc-web@42:     border-radius: 15px;
rc-web@42:     height: 120px;
rc-web@43:     width: 30%;
rc-web@42:     margin: 0px;
rc-web@42:     border: 1px solid gray;
rc-web@59: 
rc-web@42:     padding: 5px 5px 5px 5px ;
rc-web@42:     color: black;
rc-web@42:     overflow:hidden;
rc-web@42:     float:right;
rc-web@43:     font-size:1em;
rc-web@42: }
rc-web@43: #preview img{margin-top:15px;}
rc-web@42: 
rc-web@42: #timeinfo{
rc-web@42:     border-radius: 15px;
rc-web@42:     height:80px;
rc-web@42:     width: 95%;
rc-web@42:     margin: 0px;
rc-web@42:     padding: 5px 5px 5px 5px ;
rc-web@42:     background: transparent;
rc-web@42:     position:relative;
rc-web@42:     top:30px;
rc-web@42: }
rc-web@42: 
rc-web@42: #remainingtime{
rc-web@59:     padding:0;
rc-web@59:     margin:0;
rc-web@59:     font-size:1.4em;
rc-web@59:     color:white;
rc-web@59:     position:relative;
rc-web@59:     left:40px;
rc-web@59:     top:90px;
rc-web@59:     width:120px;
rc-web@59:     float:left;
rc-web@59:     background-color:transparent;
rc-web@42: }
rc-web@42: 
rc-web@42: .footdata{
rc-web@42:     margin-left:auto; margin-right:auto;
rc-web@42:     border-radius: 15px;
rc-web@42:     height: 50px;
rc-web@42:     width: 100%;
rc-web@42:     border: 0px solid gray;
rc-web@42:     position:absolute;
rc-web@42:     top: 0px;
rc-web@42:     background: black;
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:     padding: 1px 1px 1px 1px ;
rc-web@42:     background: black;
rc-web@42:     width: 99%;
rc-web@54:     height: 490px;
rc-web@42: }
rc-web@42: 
rc-web@42: .svgmusic {
rc-web@43:     padding:0px;
rc-web@43:     border: 1px solid gray;
rc-web@42:     display:block;
rc-web@42:     border-radius: 15px;
rc-web@42:     margin: 0px;
rc-web@42:     width: 100%;
rc-web@54:     height: 445px;
rc-web@42: }
rc-web@42: 
rc-web@58: #thesquare{ position:absolute; }
rc-web@58: 
rc-web@42: .magicsquare {
rc-web@58:     border: 1px solid white;
rc-web@58:     padding: 2px 2px 2px 2px;
rc-web@58:     width: 160px; 
rc-web@58:     height: 75px;
rc-web@58:      float: left;
rc-web@58:     font-size: 3em;
rc-web@58:     color:white;
rc-web@58:     text-align:center
rc-web@58: }
rc-web@58: 
rc-web@59: .sqa {height:50%; width:50%; float:left; color: yellow; }
rc-web@59: .sqb {height:50%; width:50%; float:right; color: green; }
rc-web@58: .sqc {height:50%; width:50%; float:left; color: aqua; }
rc-web@59: .sqd {height:50%; width:50%; float:right; color:red;  }
rc-web@58: 
rc-web@58: .row {display:inline;}
rc-web@58: .row img{ width:160px; display:inline;}
rc-web@58: .row p{display:inline; color:yellow;}
rc-web@58: .rrr {position:relative; display:inline;}
rc-web@58: 
rc-web@58: .sqrow{
rc-web@59:     display:inline;
rc-web@58:     padding: 2px 2px 10px 2px;
rc-web@58:     
rc-web@42: }
rc-web@42: 
rc-web@42: .latencies{
rc-web@59: /*    height: 90px; width: 200px;
rc-web@59:     border: 1px solid blue;
rc-web@59:     position: relative; top: 15%;
rc-web@59:     float: right;
rc-web@59:     padding: 5px 5px 5px 5px ;
rc-web@59:     background-color: yellow;    
rc-web@59: */
rc-web@42: }
rc-web@42: 
rc-web@42: #datetime{
rc-web@43:     display:table-cell; vertical-align:middle;
rc-web@43:     width:90px;
rc-web@43:     font-size:0.9em; color: white;
rc-web@43:     text-align:center;
rc-web@43:     position: relative; 
rc-web@43:     bottom: 25px; 
rc-web@43:     right: 4px;
rc-web@43:     float: left;
rc-web@43:     background-color: transparent;    
rc-web@42: }
rc-web@42: 
rc-web@42: #current{
rc-web@42:     float:right;
rc-web@42:     position: relative; 
rc-web@43:     right: 70%;
rc-web@43:     bottom:50px;
rc-web@42:     font-size:1.7em; 
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:     background:transparent;
rc-web@42:     width:135px;
rc-web@43:     font-size:1em;
rc-web@42:     color: white;
rc-web@42:     z-index: 1;
rc-web@42:     padding: 3px 3px 3px 3px;
rc-web@43:     opacity: 0.8;
rc-web@42:     float:left;
rc-web@42:     position:relative;
rc-web@43:     left: 90px;
rc-web@43:     bottom: 72px;
rc-web@42: 
rc-web@42: }
rc-web@42: 
rc-web@42: .metrocase {
rc-web@42:     float:right;
rc-web@42:     border-radius: 5px;
rc-web@42:     position: relative; 
rc-web@43:     right: 20px;
rc-web@42:     top:-25px;
rc-web@43:     width: 60px;  
rc-web@42:     height: 30px;
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: 1px solid white;
rc-web@42: }
rc-web@42: 
rc-web@43: #metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; 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: .clear { clear:both; }
rc-web@42: 
rc-web@42: #midcomms{
rc-web@42: color:white;
rc-web@42: width:160px; 
rc-web@42: height:40px; 
rc-web@42: background-color:transparent; 
rc-web@42: border: 0px solid yellow; 
rc-web@42: float:left;
rc-web@42: }
rc-web@42: 
rc-web@42: #client_chronometer{ 
rc-web@42:     display:table-cell; vertical-align:middle;
rc-web@42:     border-radius: 15px;
rc-web@42:     float:right;
rc-web@43:     background-color: transparent;   
rc-web@42:     color: white;
rc-web@43:     font-size: 3.7em; 
rc-web@42:     text-align: center;
rc-web@43:     opacity:0.8;
rc-web@42:     position: relative; 
rc-web@43:     left: 10px; 
rc-web@43:     bottom:64px;
rc-web@43:     width: 210px; 
rc-web@42:     z-position: 2;
rc-web@42: }
rc-web@42: 
rc-web@42: #counttitle{
rc-web@42:     font-size:3em;
rc-web@42:     margin:0;
rc-web@42:     float:left;
rc-web@42:     width:120px;
rc-web@42:     position:relative;
rc-web@43:     top:-5px;
rc-web@43:     left:20px;
rc-web@42: }
rc-web@42: 
rc-web@42: #count {
rc-web@42:     width:40px;
rc-web@42:     font-size: 5em;
rc-web@42:     font-weight:bolder;
rc-web@43:     font-align:center;
rc-web@42:     margin:0;
rc-web@42:     padding:0;
rc-web@42:     position:relative;
rc-web@43:     left:35px;
rc-web@42:     top: -10px;
rc-web@42:     background:transparent;
rc-web@42:     float:left;
rc-web@42:     display:inline;
rc-web@42: }
rc-web@42: 
rc-web@42: #totalcountdown  {
rc-web@43:     font-size: 1.7em;
rc-web@43:     font-weight:bolder;
rc-web@43:     color:orange;
rc-web@42:     position:relative;
rc-web@43:     left: 0px;
rc-web@43:     bottom: -3px;
rc-web@42:     font-weight:bolder;
rc-web@59:     display:inline;    
rc-web@42: }
rc-web@42: 
rc-web@42: #countinnumber{ 
rc-web@42:     border-radius: 15px;
rc-web@42:     position: absolute; 
rc-web@42:     background-color:black;
rc-web@42:     font-size: 10em; 
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:     float:left;
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: }