rc-web@66: body{
rc-web@66:     background-color: black;
rc-web@66:     color: white;
rc-web@66:     font: 12px Helvetica, Arial;      
rc-web@66:     margin-left:0px;
rc-web@66:     height:100%;
rc-web@66: } 
rc-web@66: 
rc-web@66: 
rc-web@66: h3,h4,h5,h6 {
rc-web@66:     width: 400px;
rc-web@66:     background-color: white;
rc-web@66:     display: inline;
rc-web@66:     color: #666;
rc-web@66:     z-index: 2;
rc-web@66: }
rc-web@66: 
rc-web@66: h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
rc-web@66: h2{ font: 28px Helvetica, Arial; color:white}
rc-web@66: h3{ font: 12px Helvetica, Arial; color:white }
rc-web@66: h4{ background-color: black; font: 19px Helvetica, Arial; 
rc-web@66:     text-align: center;  margin-left:auto; margin-right:auto; color:white}
rc-web@66: 
rc-web@66: a:link { color:#666;}
rc-web@66: a:visited { color: #666;}
rc-web@66: a:hover { color: black; background-color:orange; }
rc-web@66: a:active { color: black;background-color:white; } 
rc-web@66: 
rc-web@66: ul, li, h4, h3, h2, h1, p{
rc-web@66:     padding:0;
rc-web@66:     margin:0;
rc-web@66:     list-style:none;
rc-web@66: }
rc-web@66: 
rc-web@66: .outermaster{
rc-web@66:     float:right;
rc-web@66:     !margin-top:50px;
rc-web@66:     height: 580px;
rc-web@66:     width: 1020px;
rc-web@66:     border-radius: 15px;
rc-web@66:     position: absolute;
rc-web@66:     top:130px;
rc-web@66:     left: 3000px;
rc-web@66:     +filter: invert(100%);
rc-web@66:     margin: 0 auto;
rc-web@66: }
rc-web@66: 
rc-web@66: 
rc-web@66: #live{
rc-web@66:     width: 100%;
rc-web@66:     text-align: center;
rc-web@66:     border-radius: 15px;
rc-web@66:     background-color:black;
rc-web@66:     border: 0px solid blue;
rc-web@66:     position: absolute;
rc-web@66:     color: white;
rc-web@66:     top: 0px;
rc-web@66:     +filter: invert(100%);
rc-web@66:     z-index:1111;
rc-web@66:     margin-left: 0px;
rc-web@66:     padding:0px;
rc-web@66: }
rc-web@66: 
rc-web@66: .xunit{
rc-web@66: display:block;
rc-web@66: background:black;
rc-web@66: width: 155px;
rc-web@66: height: 70px;
rc-web@66: padding: 5px 5px 5px 5px;
rc-web@66: float: left;
rc-web@66: }
rc-web@66: 
rc-web@66: .precd{
rc-web@66: height:70px;
rc-web@66: color:white;
rc-web@66: }
rc-web@66: 
rc-web@66: #info{
rc-web@66: position: absolute;
rc-web@66: border: 0px solid red;
rc-web@66: border-radius:15px;
rc-web@66: top: 450px;
rc-web@66: !padding: 5px 5px 5px 5px;
rc-web@66: height: 135px;
rc-web@66: width: 100%;
rc-web@66: }
rc-web@66: 
rc-web@66: #comms{
rc-web@66:     border-radius: 15px;
rc-web@66:     height: 120px;
rc-web@66:     width: 250px;
rc-web@66:     margin: 0px;
rc-web@66:     border: 1px solid gray;
rc-web@66:     color: black;
rc-web@66:     float:left;
rc-web@66:     padding: 5px 5px 5px 5px;
rc-web@66: }
rc-web@66: 
rc-web@66: #xcomms{
rc-web@66:     border-radius: 15px;
rc-web@66:     height: 120px;
rc-web@66:     width: 250px;
rc-web@66:     margin: 0px;
rc-web@66:     border: 1px solid gray;
rc-web@66:     color: black;
rc-web@66:     padding: 5px 5px 5px 5px;
rc-web@66: }
rc-web@66: 
rc-web@66: #midfoot{
rc-web@66:     !margin-left:auto; margin-right:auto;
rc-web@66:     border-radius: 15px;
rc-web@66:     height: 120px;
rc-web@66:     width: 30%;
rc-web@66:     margin: 0px;
rc-web@66:     margin-left:6%;
rc-web@66:     border: 1px solid gray;
rc-web@66:     padding: 5px 5px 5px 5px ;
rc-web@66:     background: black;
rc-web@66:     opacity:1;
rc-web@66:     float:left;
rc-web@66: }
rc-web@66: 
rc-web@66: #preview{
rc-web@66:     border-radius: 15px;
rc-web@66:     height: 120px;
rc-web@66:     width: 30%;
rc-web@66:     margin: 0px;
rc-web@66:     border: 1px solid gray;
rc-web@66:     padding: 5px 5px 5px 5px ;
rc-web@66:     color: black;
rc-web@66:     !overflow:hidden;
rc-web@66:     float:right;
rc-web@66:     font-size:1em;
rc-web@66: }
rc-web@66: #preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;}
rc-web@66: 
rc-web@66: #timeinfo{
rc-web@66:     border-radius: 15px;
rc-web@66:     height:80px;
rc-web@66:     width: 95%;
rc-web@66:     margin: 0px;
rc-web@66:     padding: 5px 5px 5px 5px ;
rc-web@66:     background: transparent;
rc-web@66:     position:relative;
rc-web@66:     top:30px;
rc-web@66: }
rc-web@66: 
rc-web@66: #remainingtime{
rc-web@66:     padding:0;
rc-web@66:     margin:0;
rc-web@66:     font-size:1.4em;
rc-web@66:     color:white;
rc-web@66:     position:relative;
rc-web@66:     left:40px;
rc-web@66:     top:90px;
rc-web@66:     width:120px;
rc-web@66:     float:left;
rc-web@66:     background-color:transparent;
rc-web@66: }
rc-web@66: 
rc-web@66: .footdata{
rc-web@66:     margin-left:auto; margin-right:auto;
rc-web@66:     border-radius: 15px;
rc-web@66:     height: 50px;
rc-web@66:     width: 100%;
rc-web@66:     border: 0px solid gray;
rc-web@66:     position:absolute;
rc-web@66:     top: 0px;
rc-web@66:     background: black;
rc-web@66:     opacity:1;
rc-web@66: }
rc-web@66: 
rc-web@66: .outersquare{
rc-web@66:     border-radius: 15px;
rc-web@66:     border: 1px solid blue;
rc-web@66:     padding: 1px 1px 1px 1px ;
rc-web@66:     background: black;
rc-web@66:     width: 99%;
rc-web@66:     height: 490px;
rc-web@66: }
rc-web@66: 
rc-web@66: .svgmusic {
rc-web@66:     padding:0px;
rc-web@66:     border: 1px solid gray;
rc-web@66:     display:block;
rc-web@66:     border-radius: 15px;
rc-web@66:     margin: 0px;
rc-web@66:     width: 100%;
rc-web@66:     height: 445px;
rc-web@66: }
rc-web@66: 
rc-web@66: svg { background-color: black; width:1000px; height:330px; display:block;}
rc-web@66: line { stroke: white; }
rc-web@66: text { fill: white;}
rc-web@66: path { stroke: white; fill: white; }
rc-web@66: rect { fill: white; }
rc-web@66: polygon { fill: white; }
rc-web@66: circle { stroke: white; }
rc-web@66: 
rc-web@66: 
rc-web@66: #thesquare{ position:absolute; width:700px; }
rc-web@66: .magicsquare {
rc-web@66:     border: 1px solid white;
rc-web@66:     padding: 2px 2px 2px 2px;
rc-web@66:     width: 110px; 
rc-web@66:     height: 100px;
rc-web@66:     float: left;
rc-web@66:     font-size: 3em;
rc-web@66:     color:white;
rc-web@66:     text-align:center
rc-web@66: }
rc-web@66: 
rc-web@66: .sqa {height:50%; width:50%; float:left; color: yellow; }
rc-web@66: .sqb {height:50%; width:50%; float:right; color: green; }
rc-web@66: .sqc {height:50%; width:50%; float:left; color: aqua; }
rc-web@66: .sqd {height:50%; width:50%; float:right; color:red;  }
rc-web@66: 
rc-web@66: .row {display:inline;}
rc-web@66: .row img{ width:160px; display:inline;}
rc-web@66: .row p{display:inline; color:yellow;}
rc-web@66: .rrr {position:relative; display:inline;}
rc-web@66: 
rc-web@66: .sqrow{
rc-web@66:     display:inline;
rc-web@66:     padding: 2px 2px 10px 2px;
rc-web@66:     
rc-web@66: }
rc-web@66: 
rc-web@66: .latencies{
rc-web@66: /*    height: 90px; width: 200px;
rc-web@66:     border: 1px solid blue;
rc-web@66:     position: relative; top: 15%;
rc-web@66:     float: right;
rc-web@66:     padding: 5px 5px 5px 5px ;
rc-web@66:     background-color: yellow;    
rc-web@66: */
rc-web@66: }
rc-web@66: 
rc-web@66: #datetime{
rc-web@66:     display:table-cell; 
rc-web@66:     vertical-align:middle;
rc-web@66:     width:90px;
rc-web@66:     font-size:0.9em; color: white;
rc-web@66:     text-align:center;
rc-web@66:     background-color: transparent;    
rc-web@66: }
rc-web@66: 
rc-web@66: #current{
rc-web@66:     font-size:1.7em; 
rc-web@66:     font-weight: bold;
rc-web@66:     color: white;
rc-web@66:     background-color: transparent;    
rc-web@66:     z-index: 3;
rc-web@66:     opacity: 0.8;
rc-web@66:     padding: 3px 3px 3px 3px;
rc-web@66: }
rc-web@66: 
rc-web@66: #client_latency{
rc-web@66:     background:transparent;
rc-web@66:     width:135px;
rc-web@66:     font-size:1em;
rc-web@66:     color: white;
rc-web@66:     z-index: 1;
rc-web@66:     padding: 3px 3px 3px 3px;
rc-web@66:     opacity: 0.8;
rc-web@66:     position:relative;
rc-web@66:     top: -30px;
rc-web@66: }
rc-web@66: 
rc-web@66: .metrocase {
rc-web@66:     !float:right;
rc-web@66:     border-radius: 5px;
rc-web@66:     !position: relative; 
rc-web@66:     !right: 20px;
rc-web@66:     !top:-25px;
rc-web@66:     width: 60px;  
rc-web@66:     height: 30px;
rc-web@66:     color: black;
rc-web@66:     text-align: center;
rc-web@66:     font-size: 4em; font-color: black;
rc-web@66:     background: transparent;
rc-web@66:     z-index: 2;
rc-web@66:     border: 1px solid white;
rc-web@66: }
rc-web@66: 
rc-web@66: #metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; float:left; }
rc-web@66: #metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@66: #metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@66: #metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@66: 
rc-web@66: #fluid {}
rc-web@66: .fluid-img{ height:50%; width:50%; }
rc-web@66: .clear { clear:both; }
rc-web@66: 
rc-web@66: #midcomms{
rc-web@66: color:white;
rc-web@66: width:160px; 
rc-web@66: height:40px; 
rc-web@66: background-color:transparent; 
rc-web@66: border: 0px solid yellow; 
rc-web@66: float:left;
rc-web@66: }
rc-web@66: 
rc-web@66: #client_chronometer{ 
rc-web@66:     display:table-cell; vertical-align:middle;
rc-web@66:     border-radius: 15px;
rc-web@66:     float:right;
rc-web@66:     background-color: transparent;   
rc-web@66:     color: white;
rc-web@66:     font-size: 3.7em; 
rc-web@66:     text-align: center;
rc-web@66:     opacity:0.8;
rc-web@66:     position: relative; 
rc-web@66:     left: 10px; 
rc-web@66:     bottom:64px;
rc-web@66:     width: 210px; 
rc-web@66:     z-position: 2;
rc-web@66: }
rc-web@66: 
rc-web@66: #transport{ 
rc-web@66:     position:relative;
rc-web@66:     padding: 20px;
rc-web@66:     bottom:40px;
rc-web@66: }
rc-web@66: 
rc-web@66: #ctrlstop{ 
rc-web@66:     position:absolute;
rc-web@66:     padding: 5px;
rc-web@66:    border: 1px solid gray;
rc-web@66:     bottom:120px;
rc-web@66:     left:1800px;
rc-web@66:     height:80px;
rc-web@66:     width:230px;
rc-web@66:     border-radius: 15px;
rc-web@66:     color: gray;
rc-web@66:     font-size: 3.5em; 
rc-web@66: }
rc-web@66: 
rc-web@66: #counttitle{
rc-web@66:     font-size:3em;
rc-web@66:     margin:0;
rc-web@66:     float:left;
rc-web@66:     width:120px;
rc-web@66:     position:relative;
rc-web@66:     top:-5px;
rc-web@66:     left:20px;
rc-web@66: }
rc-web@66: 
rc-web@66: #count {
rc-web@66:     width:40px;
rc-web@66:     font-size: 5em;
rc-web@66:     font-weight:bolder;
rc-web@66:     margin:0;
rc-web@66:     padding:0;
rc-web@66:     position:relative;
rc-web@66:     left:35px;
rc-web@66:     top: -10px;
rc-web@66:     background:transparent;
rc-web@66:     float:left;
rc-web@66:     display:inline;
rc-web@66: }
rc-web@66: 
rc-web@66: #totalcountdown  {
rc-web@66:     font-size: 1.7em;
rc-web@66:     font-weight:bolder;
rc-web@66:     color:orange;
rc-web@66:     position:relative;
rc-web@66:     left: 0px;
rc-web@66:     bottom: -3px;
rc-web@66:     font-weight:bolder;
rc-web@66:     display:inline;    
rc-web@66: }
rc-web@66: 
rc-web@66: #countinnumber{ 
rc-web@66:     border-radius: 15px;
rc-web@66:     position: absolute; 
rc-web@66:     background-color:black;
rc-web@66:     font-size: 10em; 
rc-web@66:     font-weight:bolder;
rc-web@66:     display:inline;
rc-web@66:     text-align:center;
rc-web@66:     z-index: 2;
rc-web@66:     opacity:0.5;
rc-web@66:     float:left;
rc-web@66: }
rc-web@66: 
rc-web@66: #content-txt {
rc-web@66:     width: 100%; 
rc-web@66:     height: 90%;
rc-web@66:     font-size:3em;
rc-web@66:     text-align:center;
rc-web@66:     background-color:black;
rc-web@66:     border:1px solid white;
rc-web@66:     margin-left:auto; margin-right:auto;
rc-web@66:     display:table-cell;
rc-web@66:     vertical-align:middle;
rc-web@66:     border-radius: 15px;
rc-web@66: }
rc-web@66: 
rc-web@66: !#wide { background-color:white;  width:5600px; height:90%; border: 1px solid black;  padding: 16px 10px 16px 0px; display:inline; }
rc-web@66: 
rc-web@66: .outermaster2{
rc-web@66:     background-color:black;
rc-web@66:     margin-top:4px;
rc-web@66:     height: 810px;
rc-web@66:     width: 6700px;
rc-web@66:     border-radius: 15px;
rc-web@66:     position: relative;
rc-web@66:     +filter: invert(100%);
rc-web@66:    
rc-web@66: }
rc-web@66: 
rc-web@66: #map { width: 1250px; 
rc-web@66:        position:absolute;
rc-web@66:        left: -0px;
rc-web@66:        height: 760px; 
rc-web@66:        padding: 20px 50px 20px 50px; 
rc-web@66:        border: 1px solid gray;  background-color: black;}
rc-web@66: 
rc-web@66: #outerpreview { 
rc-web@66:     !display:inline;
rc-web@66:     !float:left; 
rc-web@66:     height:700px;
rc-web@66:     width: 1200px; padding: 0; 
rc-web@66:     border: 1px solid gray;  background-color: black;
rc-web@66:     margin: 0 auto;
rc-web@66:     padding: 50px 50px 50px 50px; 
rc-web@66:     position: relative; left:-1200px;
rc-web@66: }
rc-web@66: 
rc-web@66: .pview {  border: 1px solid red; height:49%; width:49%; float:left;  background:gray; z-index:-100; }
rc-web@66: .pviewmusic { position:relative; top:60px;  }
rc-web@66: 
rc-web@66: .middle { float: left;  width: 10.8%;  height: 11%;  padding: 0;  border: 0;  margin: 0.33%; 
rc-web@66: 	  border: 1px solid red;  background:gray;  border-radius:10px; }  /* 100 = 6 * widt\h + 12 * margin */
rc-web@66: 
rc-web@66: .middle p { font-size:2.5em;  position:relative; left: 0px; opacity:0.3; color:blue; display:block;}
rc-web@66: .middle img { padding: 20px 0px 0px 0px;  position:relative; top:-30px;}
rc-web@66: 
rc-web@66: .middle:hover img {
rc-web@66:     z-index:1000;
rc-web@66:     width:500px;
rc-web@66:     background-color: orange;
rc-web@66:     !position: absolute;    
rc-web@66:     border: 0px solid red;
rc-web@66:     border-radius:20px;
rc-web@66:     opacity: 1;
rc-web@66:     box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
rc-web@66: }
rc-web@66: 
rc-web@66: .middle p.indexnum  { font-size:1em;  color:black; 
rc-web@66: 		      position:relative; top:-80px; left:90px; 
rc-web@66: 		      opacity:1; 
rc-web@66: 		    }
rc-web@66: 
rc-web@66: .inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%; 
rc-web@66: 					 padding: 0; border: 1px solid white; margin: 0; 
rc-web@66: 					 text-align: center; font-weight: bold; 
rc-web@66: 					 position:relative; top: -110px; }
rc-web@66: 
rc-web@66: .inner-0 { background-color: transparent; }
rc-web@66: .inner-1 { background-color: transparent; }
rc-web@66: .inner-2 { background-color: transparent; }
rc-web@66: .inner-3 { background-color: transparent; }
rc-web@66: 
rc-web@66: .musicianprog { display:inline; float:left; 
rc-web@66: 		width:10%; background:transparent; height:40px; 
rc-web@66: 		padding: 5px 5px 5px 5px; text-align:center;  }
rc-web@66: 
rc-web@66: .unitseq { display:inline; float:right; 
rc-web@66: 	   width:10%; background:transparent; height:40px; 
rc-web@66: 	   padding: 5px 5px 5px 5px; text-align:center; 
rc-web@66: 	   font-size:2em;}
rc-web@66: 
rc-web@66: #links {position:absolute; bottom:150px; left: 800px; width:900px;}
rc-web@66: !#transect {position:absolute; bottom:180px; left: 1300px; width:600px;}
rc-web@66: 
rc-web@66: .tportpop { background-color:black; width:200px; height: 90px; 
rc-web@66: 	    margin: 1px solid white; position:relative; 
rc-web@66: 	    left:300px; top:60px;  border: 1px solid green; 
rc-web@66: 	    border-radius: 10px; padding: 5px; }