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