rc@74: body{
rc@74:     font: 12px Helvetica, Arial;      
rc@74:     margin-left:0px;
rc@74:     height:100%;
rc@74: } 
rc@74: 
rc@74: h3,h4,h5,h6 {
rc@74:     width: 400px;
rc@74:     display: inline;
rc@74:     color: #666;
rc@74:     z-index: 2;
rc@74: }
rc@74: 
rob@80: h1{ font: 44px Helvetica, Arial; }
rob@80: h2 { font: 18px Helvetica, Arial; }
rob@80: h3{ font: 12px Helvetica, Arial; }
rc@75: 
rob@80: h4{ font: 19px Helvetica, Arial; 
rc@75:     text-align: center;  margin-left:auto; margin-right:auto; 
rc@75:   }
rc@74: 
rc@74: a:link { color:#666;}
rc@74: a:visited { color: #666;}
rc@74: a:hover { color: black; background-color:orange; }
rob@79: a:active { color: black; background-color:white; } 
rc@74: 
rc@74: ul, li, h4, h3, h2, h1, p{
rc@74:     padding:0;
rc@74:     margin:0;
rc@74:     list-style:none;
rc@74: }
rc@74: 
rob@83: .soloscore{
rob@84:     margin:0;
rob@90:     margin-right:200px;
rc@74:     float:right;
rob@90:     height: 650px;
rob@84:     width: 1150px;
rc@74:     position: absolute;
rob@84:     top:9%;
rc@74:     left: 3000px;
rob@80:     !margin: 0 auto;
rob@83:     background:transparent;
rob@90:     border:1px dashed red;
rc@74: }
rc@74: 
rob@90: #soloscore.anchor{display: block; position: relative; left: 1250px; visibility: hidden;}
rob@90: 
rc@74: #info{
rob@91:     position: absolute;
rob@91:     border-radius:15px;
rob@91:     float:bottom;
rob@91:     !top: 450px;
rob@91:     height: 135px;
rob@91:     width: 100%;
rc@74: }
rc@74: 
rc@74: #comms{
rob@81:     position:fixed;
rob@90:     top:12%;
rob@90:     right: 10px;
rob@90:     height: 70%;
rob@90:     width: 180px;
rc@74:     margin: 0px;
rob@97:     color: white;
rc@74: }
rc@74: 
rob@97: 
rc@74: #preview{
rc@74:     border-radius: 15px;
rc@74:     height: 120px;
rc@74:     width: 30%;
rc@74:     margin: 0px;
rc@74:     border: 1px solid gray;
rob@80:     padding: 5px 5px 5px 5px;
rc@74:     float:right;
rc@74:     font-size:1em;
rc@74: }
rob@79: 
rob@80: #preview img{
rob@80:     margin-top:15px; 
rob@80:     width:300px; 
rob@80:     background:transparent; 
rob@80:     position: relative; 
rob@80:     top:-20px;
rob@80: }
rc@74: 
rc@74: #remainingtime{
rob@80:     padding:0px 10px;
rc@74:     margin:0;
rob@80:     font-size:2.2em;
rob@80:     width:150px;
rob@80:     float:right;
rob@80:     !background-color:blue;
rob@80:     position:relative;
rob@80:     top:-5px;
rob@80:     !left:0px;
rc@74: }
rc@74: 
rc@74: .footdata{
rc@74:     margin-left:auto; margin-right:auto;
rc@74:     border-radius: 15px;
rc@74:     height: 50px;
rc@74:     width: 100%;
rc@74:     border: 0px solid gray;
rc@74:     position:absolute;
rc@74:     top: 0px;
rc@74:     opacity:1;
rc@74: }
rc@74: 
rc@74: .outersquare{
rc@74:     border-radius: 15px;
rc@74:     border: 1px solid blue;
rc@74:     padding: 1px 1px 1px 1px ;
rc@74:     width: 99%;
rc@74:     height: 490px;
rc@74: }
rc@74: 
rc@74: .svgmusic {
rc@74:     padding:0px;
rob@90:     border: 1px dashed green;
rc@74:     display:block;
rc@74:     border-radius: 15px;
rc@74:     margin: 0px;
rc@74:     width: 100%;
rc@74:     height: 445px;
rob@79:     min-height: 445px;
rob@79: 
rc@74: }
rc@74: 
rc@74: 
rob@79: #thesquare{ position:absolute; 
rob@79: 	    width:700px; 
rob@79: 	  }
rc@74: .magicsquare {
rc@74:     border: 1px solid white;
rc@74:     padding: 2px 2px 2px 2px;
rc@74:     width: 110px; 
rc@74:     height: 100px;
rc@74:     float: left;
rc@74:     font-size: 3em;
rc@74:     text-align:center
rc@74: }
rc@74: 
rob@80: .sqa {height:50%; width:50%; float:left; color: blue; }
rc@74: .sqb {height:50%; width:50%; float:right; color: green; }
rc@74: .sqc {height:50%; width:50%; float:left; color: aqua; }
rc@74: .sqd {height:50%; width:50%; float:right; color:red;  }
rc@74: 
rob@81: .row { display:inline; }
rc@74: .row img{ width:160px; display:inline;}
rob@81: .row p{ display:inline; color:yellow;}
rob@81: .rrr { position:relative; display:inline;}
rc@74: 
rc@74: .sqrow{
rc@74:     display:inline;
rc@74:     padding: 2px 2px 10px 2px;
rc@74:     
rc@74: }
rc@74: 
rc@74: .latencies{
rc@74: /*    height: 90px; width: 200px;
rc@74:     border: 1px solid blue;
rc@74:     position: relative; top: 15%;
rc@74:     float: right;
rc@74:     padding: 5px 5px 5px 5px ;
rc@74:     background-color: yellow;    
rc@74: */
rc@74: }
rc@74: 
rc@74: #datetime{
rob@79:     float:left;
rc@74:     width:90px;
rob@79:     font-size:0.9em; 
rc@74:     text-align:center;
rc@74:     background-color: transparent;    
rc@74: }
rc@74: 
rc@74: #current{
rc@74:     font-size:1.7em; 
rob@79:     font-weight: bold;   
rc@74:     background-color: transparent;    
rc@74:     z-index: 3;
rc@74:     opacity: 0.8;
rc@74:     padding: 3px 3px 3px 3px;
rc@74: }
rc@74: 
rc@74: #client_latency{
rob@79:     position:absolute;
rob@79:     right:100px;
rob@79:     top:1px;
rc@74:     background:transparent;
rob@79:     float:right;
rc@74:     font-size:1em;
rob@80:     padding:0px 0px 10px 0px;
rc@74: }
rc@74: 
rc@74: #fluid {}
rc@74: .fluid-img{ height:50%; width:50%; }
rc@74: .clear { clear:both; }
rc@74: 
rc@74: #client_chronometer{ 
rob@79: float:right;
rc@75: font-size:3em;
rob@79: margin-right:50px;
rob@80: margin-top:10px;
rob@90: color:white;
rob@90: }
rob@90: 
rob@90: #views{ 
rob@90:     position:absolute;
rob@90:     left:65%;
rob@90:     top:15px;
rob@90:     float:left;
rob@90: }
rob@90: 
rob@90: .btn{background:yellow;
rob@93:      font-size:1.2em;
rob@93:      padding:1px;
rob@90: }
rob@90: 
rob@90: .formrow{
rob@90:     float:left;
rob@90: }
rob@90: 
rob@90: #setPart{
rob@90:     float:right;
rob@90:     margin-right:70px;
rob@97:     margin-top:15px;
rob@90:     font-size:1.3em;
rob@90:     background:orange;
rob@97:     height:28px;
rc@74: }
rc@74: 
rc@74: #transport{ 
rob@80:     position:absolute;
rob@80:     right:240px;
rob@80:     top:15px;
rob@80:     float:right;
rob@90:     color:white;
rob@90:     font-size:1.3em;
rc@74: }
rc@74: 
rob@90: .transpbtn{ 
rob@90:     color:white;
rob@93:     font-size:1em;
rob@93:     padding:1px;
rob@90: }
rob@90: 
rc@74: #ctrlstop{ 
rc@74:     position:absolute;
rc@74:     padding: 5px;
rc@75:     border: 1px solid gray;
rc@74:     bottom:120px;
rc@74:     left:1800px;
rc@74:     height:80px;
rc@74:     width:230px;
rc@74:     border-radius: 15px;
rc@74:     color: gray;
rc@74:     font-size: 3.5em; 
rc@74: }
rc@74: 
rc@74: #counttitle{
rob@84:     padding-left:10px;
rob@83:     font-size:2em;
rc@74:     margin:0;
rc@74:     float:left;
rc@74:     position:relative;
rc@74:     top:-5px;
rc@74: }
rc@74: 
rob@84: .count {
rc@74:     width:40px;
rob@84:     font-size:2.5em;
rc@74:     font-weight:bolder;
rc@74:     margin:0;
rc@74:     padding:0;
rc@74:     position:relative;
rob@84:     left:15%;
rob@93:     top: -10px;
rc@74:     background:transparent;
rc@74:     float:left;
rc@74: }
rc@74: 
rob@84: #count{
rob@84: position:absolute;
rob@84: top:30%;
rob@84: }
rob@84: 
rob@84: #totalcountdown {
rob@84:     position:absolute;
rob@84:     top:-10%;
rob@84:     left:20%;
rob@84:     font-size:2em;
rob@84:    font-weight:bolder;
rc@74: }
rc@74: 
rc@74: #countinnumber{ 
rc@74:     border-radius: 15px;
rc@74:     position: absolute; 
rc@74:     font-size: 10em; 
rc@74:     font-weight:bolder;
rc@74:     display:inline;
rc@74:     text-align:center;
rc@74:     z-index: 2;
rc@74:     opacity:0.5;
rc@74:     float:left;
rc@74: }
rc@74: 
rc@74: #content-txt {
rc@74:     width: 100%; 
rc@74:     height: 90%;
rc@74:     font-size:3em;
rc@74:     text-align:center;
rob@79:     border:1px solid black;
rc@74:     margin-left:auto; margin-right:auto;
rc@74:     display:table-cell;
rc@74:     vertical-align:middle;
rc@74:     border-radius: 15px;
rc@74: }
rc@74: 
rc@74: .outermaster2{
rob@80:     margin-top:5%;
rob@84:     height: 700px;
rob@79:     width: 4400px;
rc@74:     border-radius: 15px;
rob@80:  }
rc@74: 
rob@93: #preview-overview { width: 1200px; 
rob@80:        height: 600px; 
rob@91:        padding: 0px 0px 0px 115px; 
rc@75:      }
rc@74: 
rob@93: #preview-multi { 
rob@84:     height:700px;
rob@84:     width: 1250px; 
rob@80:     padding: 0; 
rob@80:     position: absolute; 
rob@79:     left:1500px;
rob@80:     top:60px;
rc@74: }
rc@74: 
rob@83: #preview-solo{
rob@93:     position:absolute;
rob@93:     border:0x dashed red;
rob@93:     height:520px;
rob@83: }
rob@83: 
rob@84: #previewbox-solo-next{
rob@93:     position:absolute;
rob@84: }
rob@84: 
rob@84: .solo-next{
rob@93:     position:absolute;
rob@93:     border:1px dashed blue;
rob@93:     height:120px;
rob@93:     width:22%;
rob@93:     !float: right;
rob@93:     bottom:0;
rob@93:     right:0;
rob@93:     background:transparent;
rob@93:     padding:4px;
rob@93:     margin:4px;
rob@84: }
rob@84: 
rob@84: 
rob@84: #nexttitle{
rob@84:     position:absolute;
rob@94:     left: -130px;
rob@94:     top: 30px;
rob@97:     color: orange;
rob@97:     !z-index:1000;
rob@84:     font-size:3em;
rob@94:     opacity:0.6;
rob@84: }
rob@83: 
rob@80: .pview { 
rob@80:     border: 1px dashed gray; 
rob@90:     height:45%; width:45%; float:left;  
rob@80:     background:white; 
rob@80:     z-index:-100; 
rob@84:     margin-left:15px;
rob@84:     margin-top:15px;
rob@83:     position:relative;
rob@83: }
rob@93: 
rob@83: .pviewsolo { 
rob@83:     border: 1px dashed gray; 
rob@83:     width:100%; 
rob@83:     float:left;  
rob@83:     background:white; 
rob@83:     z-index:-100; 
rob@83:     position:relative;
rob@80: }
rc@74: 
rob@80: .pviewmusic { 
rob@93:     padding-top:40px;
rob@80: }
rc@74: 
rob@80: .middle { float: left;  
rob@80: 	  width: 10.8%;  
rob@81: 	  height: 12%;  
rob@80: 	  padding: 0;  
rob@80: 	  border: 0;  
rob@80: 	  margin: 0.33%; 
rob@80: 	  border: 1px dashed black;  
rob@80: 	  background:white;  
rob@80: 	  border-radius:1px; 
rob@80: 	}  /* 100 = 6 * widt\h + 12 * margin */
rc@74: 
rob@80: .middle p { font-size:2em;  
rob@80: 	    position:relative; 
rob@83: 	    left: 0px; opacity:0.5; 
rob@80: 	    color:blue; 
rob@80: 	    display:block;
rob@80: 	  }
rob@80: 
rob@83: .middle img { padding: 0px 0px 0px 0px;  
rob@83: 	      position:relative; top:-15px;
rob@80: 	    }
rob@80: 
rob@90: .middle:hover img {
rc@74:     z-index:1000;
rc@74:     width:500px;
rob@79:     background-color: white;
rob@90:     position: relative;
rob@90:     top:60px;
rob@90:     left:50px;
rc@74:     border: 0px solid red;
rob@80:     border-radius:10px;
rc@74:     opacity: 1;
rc@74:     box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
rc@74: }
rc@74: 
rc@74: .middle p.indexnum  { font-size:1em;  color:black; 
rc@74: 		      position:relative; top:-80px; left:90px; 
rc@74: 		      opacity:1; 
rc@74: 		    }
rc@74: 
rob@79: .inner-0, .inner-1, .inner-2, .inner-3 { 
rob@83:     font-size:1em; 
rob@81:     float: left; width: 45%; height: 45%; 
rob@80:     padding: 0; border: 1px dashed gray; 
rob@80:     margin: 0; 
rob@80:     text-align: center; 
rob@80:     font-weight: bold; 
rob@83:     position:absolute; 
rob@83:     top: -105px; 
rob@83:    
rob@79: }
rc@74: 
rc@74: .inner-0 { background-color: transparent; }
rc@74: .inner-1 { background-color: transparent; }
rc@74: .inner-2 { background-color: transparent; }
rc@74: .inner-3 { background-color: transparent; }
rc@74: 
rob@93: .musicianprog { 
rob@93:     display:inline; 
rob@93:     float:left; 
rob@93:     width:9%; background:transparent; height:14%; 
rob@93:     padding: 1px; text-align:center;  
rob@93:     position:absolute;
rob@93: }
rob@83: 
rob@83: 
rob@90: .tleftgroup {
rob@93:     padding-top:0px;
rob@93: }
rob@90: 
rob@93: .timeleft { 
rob@93:     display:inline;
rob@93:     width:9%; 
rob@93:     background:transparent; 
rob@93:     height:14%; 
rob@93:     padding: 1px; 
rob@93:     text-align:center;  
rob@93:     font-size:2.5em;
rob@93:     position:absolute;
rob@93:     right:0%;
rob@93:     color:orange;
rob@93:     padding:0; 
rob@93:     margin:0;
rob@93: }
rob@83: 
rc@74: 
rob@79: .unitseq { 
rob@84:     position:absolute;
rob@84:     right:40%;
rob@79:     text-align:center; 
rob@84:     font-size:2em;
rob@84:     color:gray;
rob@84:     margin:0;
rob@84:     padding:0;
rob@79: }
rob@79: 
rob@79: .head{
rob@80:     background:gray;
rob@81:     opacity:1;
rob@80:     padding:4px 0px 0px 4px;
rob@81:     height:7%;
rob@80:     position:fixed;
rob@80:     top:0px;
rob@80:     width:100%;
rob@79: }
rob@79: 
rob@79: .footx{
rob@81:     margin:0px;
rob@79:     background:gray;
rob@81:     opacity:1;
rob@79:     padding:10px;
rob@81:     height:7%;
rob@79:     position:fixed;
rob@79:     bottom:0px;
rob@79:     width:100%;
rob@81:     padding:0px 0px 0px 10px;
rob@79: }
rob@79: 
rob@79: 
rob@79: #indexpagetitle{
rob@90:     font-size:1.5em;
rob@79:     float:left;
rob@90:     margin-left:8%;
rob@90:     padding:10px;
rob@79:     margin-bottom:0px;
rob@81:     color:white;
rob@81:     letter-spacing:4px;
rob@79: }
rob@79: 
rob@79: .metrocase {
rob@79:     margin-left:20px;
rob@82:     margin-top:5px;
rob@79:     float:left;
rob@82:     border-radius: 4px;
rob@79:     width: 60px;  
rob@79:     height:30px;
rob@79:     color: black;
rob@79:     text-align: center;
rob@79:     font-size: 4em; 
rob@79:     border: 1px solid white;
rob@79: }
rob@79: 
rob@82: #metronome0 { width: 60px; height: 30px; border-radius: 4px; float:left; }
rc@74: #links {position:absolute; bottom:150px; left: 800px; width:900px;}
rob@93: 
rob@90: #transect {
rob@93:     float:left; 
rob@93:     font-size:2em; 
rob@93:     padding:3px;
rob@93:     padding-left:20px;
rob@93:     margin-top:15px;
rob@93:     background:yellow;
rob@93:     width:250px;
rob@90: }
rob@79: 
rob@79: .tportpop {     
rob@80:     width:200px; 
rob@80:     height: 90px; 
rob@80:     margin: 1px solid white; 
rob@80:     position:relative; 
rob@80:     left:300px; top:60px;  
rob@80:     border: 1px solid green; 
rob@80:     border-radius: 1px; padding: 5px; 
rob@79: }