rc-web@5: body{
rc-web@26:     background-color: black;
rc-web@5:     color: white;
rc-web@5:     font: 12px Helvetica, Arial;  
rc-web@5: } 
rc-web@5: 
rc-web@5: h3,h4,h5,h6 {
rc-web@5:     width: 400px;
rc-web@5:     background-color: white;
rc-web@5:     display: inline;
rc-web@5:     color: #666;
rc-web@5:     z-index: 2;
rc-web@5: }
rc-web@5: 
rc-web@5: h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
rc-web@5: h2{ font: 28px Helvetica, Arial; color:white}
rc-web@5: h3{ font: 12px Helvetica, Arial; color:white }
rc-web@5: h4{ background-color: black; font: 19px Helvetica, Arial; 
rc-web@5:     text-align: center;  margin-left:auto; margin-right:auto; color:white}
rc-web@5: 
rc-web@5: a:link {color:#666;}
rc-web@5: a:visited {color: #666;}
rc-web@5: a:hover {color: black; background-color:gray;}
rc-web@5: a:active {color: black;background-color:white;} 
rc-web@5: 
rc-web@5: ul, li, h4, h3, h2, h1, p{
rc-web@5:     padding:0;
rc-web@5:     margin:0;
rc-web@5:     list-style:none;
rc-web@5: }
rc-web@5: 
rc-web@11: .page{
rc-web@11:     height: 1000px;;
rc-web@11:     width: 1280px;
rc-web@11: }
rc-web@11: 
rc-web@5: .outermaster{
rc-web@5:     height: 800px;
rc-web@5:     width: 1280px;
rc-web@5:     border: 1px solid blue;
rc-web@5:     position: relative;
rc-web@5:     padding: 5px 5px 5px 5px ;
rc-web@5:     color: black;
rc-web@11:     top: 10%
rc-web@25:     +filter: invert(100%);
rc-web@5: }
rc-web@5: 
rc-web@16: #preview{
rc-web@16:     height: 240px;
rc-web@16:     width: 400px;
rc-web@16:     border: 1px solid blue;
rc-web@16:     position: absolute;
rc-web@16:     padding: 5px 5px 5px 5px ;
rc-web@16:     color: black;
rc-web@16:     bottom: 0%;
rc-web@16:     right: 0px;
rc-web@16: }
rc-web@16: 
rc-web@11: .outersquare{
rc-web@19:     height: 400px;
rc-web@19:     width: 685px;
rc-web@11:     border: 1px solid blue;
rc-web@11:     position: absolute;
rc-web@19:     top: 150px;
rc-web@19:     left: 0px;
rc-web@16:     padding: 1px 1px 1px 1px ;
rc-web@11:     background-color: black;
rc-web@11: }
rc-web@11: 
rc-web@26: .svgmusic {  
rc-web@26: 
rc-web@26: width: 1280px;
rc-web@26: height: 800px;
rc-web@26: 
rc-web@26: }
rc-web@26: 
rc-web@19: .magicsquare {
rc-web@19:     border: 1px solid yellow;
rc-web@19:     padding: 2px 2px 2px 2px;
rc-web@19:     background: blue;
rc-web@26:     width: 100px; height: 90px;
rc-web@19:     border-radius: 20px;
rc-web@19:     float: left;
rc-web@19:     color: black;
rc-web@19:     font-size: 7em;    
rc-web@19:     text-align: center;
rc-web@26: }
rc-web@19: 
rc-web@11: .latencies{
rc-web@26:     height: 90px; width: 200px;
rc-web@11:     border: 1px solid blue;
rc-web@26:     position: relative; top: 15%;
rc-web@16:     float: right;
rc-web@11:     padding: 5px 5px 5px 5px ;
rc-web@19:     background-color: blue;    
rc-web@11: }
rc-web@11: 
rc-web@22: #datetime{
rc-web@23:     display:table-cell; 
rc-web@23:     vertical-align:bottom;
rc-web@23:     opacity: 0.7;
rc-web@23:     text-align: center;
rc-web@26:     height: 25px; width: 858px;
rc-web@26:     font-size:1.5em; color: yellow;
rc-web@24: !    border: 1px solid blue;
rc-web@26:     position: absolute; top: 25px; left: 206px;
rc-web@22:     float: left;
rc-web@24:     background-color: transparent;    
rc-web@22: }
rc-web@22: 
rc-web@23: #current{
rc-web@26:     position: absolute; left: 210px; top: 25px;
rc-web@26:     height: 25px; width: 130px;
rc-web@23:     text-align: center;
rc-web@26:     font-size:1.5em; font-weight: bold;
rc-web@25:     color: white;
rc-web@24: !    border: 1px solid blue;
rc-web@23:     float: left;
rc-web@24:     background-color: transparent;    
rc-web@23:     z-index: 1;
rc-web@26:     opacity: 0.8;
rc-web@23: }
rc-web@23: 
rc-web@23: #client_latency{
rc-web@26:     position: absolute; right: 205px; top: 25px;
rc-web@26:     height: 25px; width: 160px;
rc-web@23:     font-size:1.5em;
rc-web@24:     color: pink;
rc-web@24: !    border: 1px solid blue;
rc-web@26:     float: left;   
rc-web@23:     background-color: black;    
rc-web@23:     z-index: 1;
rc-web@24:     padding: 0px 15px;
rc-web@26:     opacity: 0.8;
rc-web@23: }
rc-web@23: 
rc-web@11: .metrocase {
rc-web@26:     position: absolute; top: 0px; left: 0px;
rc-web@26:     width: 200px;  height: 50px;
rc-web@11:     color: black;
rc-web@11:     text-align: center;
rc-web@26:     font-size: 4em; font-color: black;
rc-web@11:     background: transparent;
rc-web@11:     z-index: 2;
rc-web@22:     border: 1px solid blue;
rc-web@11: }
rc-web@11: 
rc-web@23: #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@23: #metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
rc-web@5: 
rc-web@5: #fluid {}
rc-web@26: .fluid-img{ height:50%; width:50%; }
rc-web@5: 
rc-web@26: .clear { clear:both; }
rc-web@5: 
rc-web@5: #client_chronometer{ 
rc-web@22:     border: 1px solid blue ; 
rc-web@5:     background-color: black;   
rc-web@23:     color: white;
rc-web@26:     font-size: 3em; text-align: center;
rc-web@23:     opacity:0.7;
rc-web@26:     position: absolute; right: 0px; top: 0px;
rc-web@26:     width: 220px; height: 50px;
rc-web@5:     z-position: 2;
rc-web@5: }
rc-web@5: 
rc-web@5: #countinnumber{ 
rc-web@26:     position: absolute; 
rc-web@26:     width: 1280px; height: 800px;
rc-web@26:     background-color:gray;
rc-web@26:     font-size: 48em; font-weight:bolder;
rc-web@5:     display:inline;
rc-web@5:     text-align:center;
rc-web@5:     z-index: 2;
rc-web@5:     opacity:0.5;
rc-web@5: }
rc-web@5: 
rc-web@5: #content-txt {
rc-web@26:     width:1280px; height:800px; 
rc-web@26:     font-size:3em;
rc-web@26:     text-align:center;
rc-web@26:     background-color:black;
rc-web@26:     border:1px solid white;
rc-web@26:     margin-left:auto; margin-right:auto;
rc-web@26:     display:table-cell;
rc-web@26:     vertical-align:middle;
rc-web@26: }