comparison www/m/css/nodescore.css @ 23:e1a02869da08

reduced to one score file with menu to choose which part stream to receive
added latency results to client and tweeked some css

     padding: 5px 5px 5px 5px ;
     background-color: blue;    
 }
 
 #datetime{
-    opacity: 0.6;
-    height: 30px;
-    width: 700px;
-    font-size:2em;
-    color: white;
-    border: 1px solid white;
-    position: absolute;
-    float: left;
-    bottom: 1px;
-    padding: 5px 5px 5px 5px ;
-    background-color: blue;    
-}
+    display:table-cell; 
+    vertical-align:bottom;
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 858px;
+    font-size:1.5em;
+    color: white;
+    border: 1px solid blue;
+    position: absolute;
+    float: left;
+    left: 206px;
+    top: 25px;
+
+    background-color: black;    
+}
+
+#current{
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 130px;
+    font-size:1.5em;
+    color: white;
+    border: 1px solid blue;
+    position: absolute;
+    float: left;
+    left: 210px;
+    top: 25px;
+    background-color: black;    
+    z-index: 1;
+}
+
+#client_latency{
+    opacity: 0.7;
+    height: 25px;
+    text-align: center;
+    width: 160px;
+    font-size:1.5em;
+    color: white;
+    border: 1px solid blue;
+    position: absolute;
+    float: left;
+    right: 220px;
+    top: 25px;
+    background-color: black;    
+    z-index: 1;
+}
+
 
 .metrocase {
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 0px;
+    left: 0px;
     color: black;
     text-align: center;
     font-size: 4em;
     font-color: black;
     background: transparent;
-    width: 240px;
-    height: 60px;
+    width: 200px;
+    height: 50px;
     z-index: 2;
-    padding: 5px 5px 5px 5px; 
-    border: 1px solid blue;
-}
-
-#metronome0 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome1 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome2 { width: 60px; height: 60px; border-radius: 30px; float:left; }
-#metronome3 { width: 60px; height: 60px; border-radius: 30px; float:left; }
+    border: 1px solid blue;
+}
+
+#metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
+#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
 
 #fluid {}
 .fluid-img{height:50%; width:50%;}
 
 .clear

 }
 
 #client_chronometer{ 
     border: 1px solid blue ; 
     background-color: black;   
-    color: #666;
-    font-size: 6em;    
-    color: white; 
-    opacity:0.5;
-    position: absolute;
-    right: 10px;
-    top: 8px;
-    padding: 5px 5px 5px 5px;
-    width: 350px;
+    color: white;
+    font-size: 3.5em;
+    text-align: center;
+    opacity:0.7;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+//    padding: 2px 2px 2px 2px;
+    width: 220px;
+    height: 50px;
     z-position: 2;
 }
 
 #countinnumber{ 
     background-color: gray;

   margin-left:auto;
   margin-right:auto;
   display: table-cell;
   vertical-align: middle;
 }
-
-
-#blanket {
-background-color:#111;
-opacity: 0.65;
-border: 3px solid blue;
-*background:none;
-position:absolute;
-z-index: 9001;
-top:0px;
-left:0px;
-width:100%;
-}
-
-#popUpDiv {
-position:absolute;
-*background:url(pop-back.jpg) no-repeat;
-background-color:gray;
-width:300px;
-height:300px;
-border:5px solid blue;
-z-index: 9002;
-}
-
-#popUpMetro {
-position:absolute;
-*background:url(pop-back.jpg) no-repeat;
-background-color:gray;
-width:300px;
-height:300px;
-border:5px solid blue;
-z-index: 9002;
-}