diff www/m/css/nodescore.css @ 29:ea19684cd1db

start stop functionality and improved css

--- a/www/m/css/nodescore.css	Tue Jul 31 17:01:34 2012 +0100
+++ b/www/m/css/nodescore.css	Wed Aug 08 00:58:11 2012 +0000
@@ -1,7 +1,7 @@
 body{
     background-color: black;
     color: white;
-    font: 12px Helvetica, Arial;  
+    font: 12px Helvetica, Arial;      
 } 
 
 h3,h4,h5,h6 {
@@ -29,37 +29,84 @@
     list-style:none;
 }
 
-.page{
-    height: 1000px;;
-    width: 1280px;
-}
 
 .outermaster{
-    height: 800px;
-    width: 1280px;
-    border: 1px solid blue;
+    height: 768px;
+    width: 1024px;
+    border-radius: 15px;
+    background-color:DimGray;
+    border: 1px solid gray;
     position: relative;
-    padding: 5px 5px 5px 5px ;
-    color: black;
-    top: 10%
+    !padding: 5px 5px 5px 5px ;
+    color: white;
+    opacity:0.8;
+    !top: 10%
     +filter: invert(100%);
 }
 
-#preview{
-    height: 240px;
-    width: 400px;
-    border: 1px solid blue;
+#live{
+    margin-left:auto; margin-right:auto; margin-top:5px;
+    !margin: 2px;
+    width: 99%;
+    height: 90%;
+    text-align: center;
+    border-radius: 15px;
+    background-color:black;
+    border: 1px solid gray;
+    !position: relative;
+!    padding: 5px 5px 5px 5px ;
+    color: white;
+    !top: 10%
+    +filter: invert(100%);
+}
+
+#comms{
+    border-radius: 15px;
+    height: 25%;
+    width: 550px;
+    margin: 0px;
+    border: 1px solid gray;
     position: absolute;
+    bottom: 80px;
+    left: 14px;
     padding: 5px 5px 5px 5px ;
     color: black;
-    bottom: 0%;
-    right: 0px;
 }
 
+#preview{
+    border-radius: 15px;
+    height: 25%;
+    width: 422px;
+    margin: 0px;
+    border: 1px solid gray;
+    position: absolute;
+    bottom: 80px;
+    right: 14px;
+    padding: 5px 5px 5px 5px ;
+    color: black;
+}
+
+
+.footdata{
+    margin-top:10px;
+    margin-left:auto; margin-right:auto;
+    border-radius: 15px;
+    height: 7%;
+    width: 98%;
+    !margin: 10px;
+    border: 1px solid gray;
+    bottom: 2px;
+!    padding: 5px 5px 5px 5px ;
+    background: DimGray;
+    opacity:1;
+}
+
+
 .outersquare{
+    border-radius: 5px;
     height: 400px;
     width: 685px;
-    border: 1px solid blue;
+!    border: 1px solid blue;
     position: absolute;
     top: 150px;
     left: 0px;
@@ -68,16 +115,17 @@
 }
 
 .svgmusic {  
-
-width: 1280px;
-height: 800px;
-
+margin: 10px;
+width: 90%;
+!height: 768px;
 }
 
 .magicsquare {
+!    margin: 10px;
+    border-radius: 15px;
     border: 1px solid yellow;
     padding: 2px 2px 2px 2px;
-    background: blue;
+    background: DimGray;
     width: 100px; height: 90px;
     border-radius: 20px;
     float: left;
@@ -87,62 +135,70 @@
 }
 
 .latencies{
-    height: 90px; width: 200px;
-    border: 1px solid blue;
-    position: relative; top: 15%;
-    float: right;
-    padding: 5px 5px 5px 5px ;
-    background-color: blue;    
+!    height: 90px; width: 200px;
+!    border: 1px solid blue;
+!    position: relative; top: 15%;
+!    float: right;
+!    padding: 5px 5px 5px 5px ;
+!    background-color: yellow;    
 }
 
 #datetime{
-    display:table-cell; 
-    vertical-align:bottom;
+    display:table-cell; vertical-align:middle;
+    !margin-top: 10px; 
+     margin-right: 30px;
+    float:left;
+    padding: 3px 3px 3px 3px;
+    font-size:1em; color: white;
+    !position: absolute; 
+    !bottom: 10px; 
+    !left: 25%;
+    !float: left;
+    background-color: transparent;    
     opacity: 0.7;
-    text-align: center;
-    height: 25px; width: 858px;
-    font-size:1.5em; color: yellow;
-!    border: 1px solid blue;
-    position: absolute; top: 25px; left: 206px;
-    float: left;
-    background-color: transparent;    
 }
 
 #current{
-    position: absolute; left: 210px; top: 25px;
-    height: 25px; width: 130px;
-    text-align: center;
-    font-size:1.5em; font-weight: bold;
+    display:table-cell; vertical-align:middle;
+    margin-top: 10px; margin-right: 30px;
+    float:left;
+    !position: absolute; 
+    !right: 25%; 
+    font-size:2em; 
+    font-weight: bold;
     color: white;
-!    border: 1px solid blue;
-    float: left;
     background-color: transparent;    
-    z-index: 1;
+    z-index: 3;
     opacity: 0.8;
+    padding: 3px 3px 3px 3px;
 }
 
 #client_latency{
-    position: absolute; right: 205px; top: 25px;
-    height: 25px; width: 160px;
-    font-size:1.5em;
-    color: pink;
-!    border: 1px solid blue;
-    float: left;   
-    background-color: black;    
+!    float:left;
+    display:table-cell; vertical-align:middle;
+    margin-top: 10px; margin-right: 30px;
+    text-align:center;
+    font-size:1em;
+    color: white;
     z-index: 1;
-    padding: 0px 15px;
-    opacity: 0.8;
+    padding: 3px 3px 3px 3px;
+    opacity: 0.7;
 }
 
 .metrocase {
-    position: absolute; top: 0px; left: 0px;
-    width: 200px;  height: 50px;
+    float:left;
+    display:table-cell; vertical-align:middle;
+    margin-top: -22px; margin-right: 30px; margin-left: 20px;
+    border-radius: 15px;
+    position: relative; top: 50%;
+
+    width: 200px;  height: 40px;
     color: black;
     text-align: center;
     font-size: 4em; font-color: black;
     background: transparent;
     z-index: 2;
-    border: 1px solid blue;
+    border: 2px solid gray;
 }
 
 #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
@@ -156,21 +212,34 @@
 .clear { clear:both; }
 
 #client_chronometer{ 
-    border: 1px solid blue ; 
+    display:table-cell; vertical-align:middle;
+    margin-top: -15px; 
+!margin-left: 30px;    
+    float:left;
+    !padding: 0 0 0 0;
+    !margin: 10px;
+    border-radius: 15px;
+    border: 2px solid gray ; 
     background-color: black;   
     color: white;
-    font-size: 3em; text-align: center;
+    font-size: 3em; 
+    text-align: center;
     opacity:0.7;
-    position: absolute; right: 0px; top: 0px;
-    width: 220px; height: 50px;
+    !position: absolute; 
+    !right: 20px; 
+    !bottom: 0px;
+    width: 220px; 
+    !height: 40px;
     z-position: 2;
 }
 
 #countinnumber{ 
+    border-radius: 15px;
     position: absolute; 
-    width: 1280px; height: 800px;
+    width: 100%; height: 90%;
     background-color:gray;
-    font-size: 48em; font-weight:bolder;
+    font-size: 36em; 
+    font-weight:bolder;
     display:inline;
     text-align:center;
     z-index: 2;
@@ -178,7 +247,7 @@
 }
 
 #content-txt {
-    width:1280px; height:800px; 
+    width: 100%; height: 90%;
     font-size:3em;
     text-align:center;
     background-color:black;
@@ -186,4 +255,5 @@
     margin-left:auto; margin-right:auto;
     display:table-cell;
     vertical-align:middle;
+    border-radius: 15px;
 }
\ No newline at end of file