rc-web@42: body{
rc-web@42:     background-color: black;
rc-web@63:     color: black;
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@65: a:link { color:#666;}
rc-web@65: a:visited { color: #666;}
rc-web@65: a:hover { color: black; background-color:orange; }
rc-web@65: 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: .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@60: .outermaster2{
rc-web@60:     margin-top:4px;
rc-web@60:     height: 880px;
rc-web@60:     width: 1020px;
rc-web@60:     border-radius: 15px;
rc-web@60:     position: relative;
rc-web@60:     +filter: invert(100%);
rc-web@60: }
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@42:     padding: 5px 5px 5px 5px ;
rc-web@42:     color: black;
rc-web@65:     !overflow:hidden;
rc-web@42:     float:right;
rc-web@43:     font-size:1em;
rc-web@42: }
rc-web@65: #preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;}
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: .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@65: .svgmusic {
rc-web@65:     padding:0px;
rc-web@65:     border: 1px solid gray;
rc-web@65:     display:block;
rc-web@65:     border-radius: 15px;
rc-web@65:     margin: 0px;
rc-web@65:     width: 100%;
rc-web@65:     height: 445px;
rc-web@65: }
rc-web@65: 
rc-web@63: svg { background-color: black; width:1000px; height:330px; display:block;}
rc-web@63: line { stroke: white; }
rc-web@63: text { fill: white;}
rc-web@63: path { stroke: white; fill: white; }
rc-web@63: rect { fill: white; }
rc-web@63: polygon { fill: white; }
rc-web@63: circle { stroke: white; }
rc-web@63: 
rc-web@42: 
rc-web@60: #thesquare{ position:absolute; width:700px; }
rc-web@42: .magicsquare {
rc-web@58:     border: 1px solid white;
rc-web@58:     padding: 2px 2px 2px 2px;
rc-web@60:     width: 110px; 
rc-web@60:     height: 100px;
rc-web@60:     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@65:     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@65: #transport{ 
rc-web@60:     position:relative;
rc-web@65:     padding: 20px;
rc-web@65:     bottom:40px;
rc-web@65: }
rc-web@65: 
rc-web@65: #ctrlstop{ 
rc-web@65:     position:absolute;
rc-web@65:     padding: 5px;
rc-web@65:    border: 1px solid gray;
rc-web@65:     bottom:120px;
rc-web@65:     left:1800px;
rc-web@65:     height:80px;
rc-web@65:     width:230px;
rc-web@60:     border-radius: 15px;
rc-web@60:     color: gray;
rc-web@60:     font-size: 3.5em; 
rc-web@60: }
rc-web@60: 
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@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@60:     width: 100%; 
rc-web@60:     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@60: }
rc-web@65: 
rc-web@65: #wide { width:100%; height:90%; border: 1px solid black;  padding: 6px 0px 6px 6px; }
rc-web@65: #outer { width: 100%; height: 100%; padding: 0; border: 0px solid white;  background-color: black; }
rc-web@65: #outerpreview { position:absolute; top: 20px; left: 1100px;  float:left; 
rc-web@65: 		height:600px; width: 1200px; padding: 0; 
rc-web@65: 		border: 1px solid gray;  background-color: black;
rc-web@65: 	      }
rc-web@65: 
rc-web@65: .pview {  border: 1px solid red; height:49%; width:49%; float:left;  background:gray; z-index:-100; }
rc-web@65: .middle { float: left;  width: 10.8%;  height: 10.5%;  padding: 0;  border: 0;  margin: 0.33%; 
rc-web@65: 	  border: 1px solid red;  background:gray;  border-radius:10px; }  /* 100 = 6 * widt\h + 12 * margin */
rc-web@65: 
rc-web@65: .middle p { font-size:2.5em;  position:relative; left: 0px; opacity:0.3; color:blue; display:block;}
rc-web@65: 
rc-web@65: .middle img { padding: 20px 0px 0px 0px;  position:relative; top:-30px;}
rc-web@65: 
rc-web@65: .middle:hover img {
rc-web@65:     z-index:1000;
rc-web@65:     width:500px;
rc-web@65:     background-color: orange;
rc-web@65:     !position: absolute;    
rc-web@65:     border: 0px solid red;
rc-web@65:     border-radius:20px;
rc-web@65:     opacity: 1;
rc-web@65:     box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
rc-web@60: }
rc-web@60: 
rc-web@65: .middle p.indexnum  { font-size:1em;  color:black; position:relative; top:-80px; left:90px; opacity:1;}
rc-web@60: 
rc-web@65: .inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%; 
rc-web@65: 					 padding: 0; border: 1px solid white; margin: 0; 
rc-web@65: 					 text-align: center; font-weight: bold; 
rc-web@65: 					 position:relative; top: -110px; }
rc-web@60: 
rc-web@60: .inner-0 { background-color: transparent; }
rc-web@60: .inner-1 { background-color: transparent; }
rc-web@60: .inner-2 { background-color: transparent; }
rc-web@60: .inner-3 { background-color: transparent; }
rc-web@60: 
rc-web@60: .musicianprog { display:inline; float:left; 
rc-web@65: 		width:20%; background:transparent; height:40px; 
rc-web@65: 		padding: 5px 5px 5px 5px; text-align:center;  }
rc-web@65: 
rc-web@65: 
rc-web@65: #links {position:absolute; bottom:150px; left: 800px; width:900px;}
rc-web@65: #transect {position:absolute; bottom:180px; left: 1300px; width:600px;}