parallaxis/quartet/parallaxis.css

body { margin: 0px; padding: 0px; width:100%; height:100%; background:black; font-family:Arial,Helvetica,sans-serif;}
h3 {font-size:1em; color:white; margin:0; padding:0;}
a:link {color:white;}
a:visited {color:white;}
a:hover {color:white;}
a:active {color:white;}

.popup{ position:relative; width:700px;  list-style:none; cursor:pointer;}
.popup li div{ position:absolute; z-index:10; visibility:hidden; width:853px; left:-200px;}
.popup li:hover div{ visibility:visible; }

.close_box {
    background:white;
    color:black;
    padding:2px 5px;
    display:inline;
    position:absolute;
    right:0px;
    top: 0px;
    border-radius:3px;
    cursor:pointer;
}

.help { position:relative; bottom:80px; left:30px;  }
.helpb { font-family:"Arial Black", Gadget, sans-serif;   width: 500px;}

#helpText { display: none; position:absolute; 
	    top: 100px; left: 25%; z-index:10000; 
	    background:black; color:white; border: 3px solid; 
	    padding: 20px 20px 20px 20px ;
	    font-size:1.2em;
	  }

#controlPanel { 
    display: none; position:absolute; 
    top: 200px; left: 25%; z-index:10000; 
    background:black; color:white; border: 3px solid; 
    padding: 20px 20px 20px 20px;
    font-size:1.2em;
  
}

.inputboxes { padding:0; margin:0; 
	    background-color:black; 
	    color:white; position:absolute; right:10px; font-size:0.8em;}

#timer { position:relative; width:140px; left:1090px; bottom:400px; font-weight:bold; font-size:1.7em; color:white;}
.cue { position:relative; width:130px; left:1100px; bottom:400px; font-size:1em; color:white;}

.outer{ width:1250px; height:750px; margin: 0px auto auto; background:black; padding: 0px;}
.scorecontainer {  display:block; top:0px; margin: 10px auto auto; width: 1200px; height:750px; background:black;}
.score { position:relative; margin: 0px auto auto; height: 750px; width: 950px; border: 0px solid; overflow:hidden; }
.scoresvg { position:absolute; left: 0px; margin: 0px auto auto;  height:171px; width: 10000px;}

.controls { display:inline; position:absolute; margin: 0px auto auto; 
    border: 0px solid; border-radius:30px; width: 80px; height:80px;
    font-size:2em; padding: 0 0 0 0; text-align:center; }

.controls .leftslower { border: 4px solid; left: 30px; background-color:black; color:white;}
.controls .rightfaster { border: 4px solid; left: 1130px; background-color:black; color:white;}
.controls .leftslower:hover {background-color:gray;} 
.controls .rightfaster:hover {background-color:gray;} 

.atexts{ font-family:Impact, Charcoal, sans-serif; 
	 position:absolute; left:-1400px; background-color:transparent; 
	 border: 0px solid; width: 700px; height:50px; color:white; }

.readaheadhead { position:absolute; top: 3px;  left:700px; width: 1px; opacity:0.3; height:1000px; background-color:green; }
.playhead { position:absolute; top: 3px;  left:-20px; width: 2px; opacity:1; height:170px; }

#playa { background-color:red;  top:20px;}
#playb { background-color:red; top:200px;}
#playc { background-color:red; top:380px;}
#playd { background-color:red; top:558px;}

.playzones { position:absolute; 
	     top: -800px; left:200px; 
	     border: 3px solid; border-radius:25px;  
	     width: 200px; height:170px; 
	   }

.playzonea { background-color:rgba(0, 0, 255, 0.2);}
.playzoneb { background-color:rgba(0, 255, 255, 0.2);}
.playzonec { background-color:rgba(0, 0, 255, 0.2);}
.playzoned { background-color:rgba(0, 255, 255, 0.2);}

.playzones:hover { background-color:rgba(255, 255, 255, 0.6);}

#svga0 { top: 20px; left: 1000px;  background-color:rgba(255, 255, 255, 0.9); } 
#svga1 { top: 20px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svga2 { top: 20px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svga3 { top: 20px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  

#svgb0 { top: 200px; left: 1000px; background-color:rgba(255, 255, 255, 0.9); } 
#svgb1 { top: 200px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svgb2 { top: 200px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svgb3 { top: 200px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  

#svgc0 { top: 380px; left: 1000px; background-color:rgba(255, 255, 255, 0.9); } 
#svgc1 { top: 380px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svgc2 { top: 380px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  
#svgc3 { top: 380px; left: 11000px; background-color:rgba(255, 255, 255, 0.9); }	  


#svgd0 { top: 560px; left: 1000px; background-color:rgba(255, 255, 255, 0.9);} 
#svgd1 { top: 560px; left: 11000px; background-color:rgba(255, 255, 255, 0.9);}	  
#svgd2 { top: 560px; left: 11000px; background-color:rgba(255, 255, 255, 0.9);}	  
#svgd3 { top: 560px; left: 11000px; background-color:rgba(255, 255, 255, 0.9);}	  

.tbuttons { background-color:black; color:white; }