comparison www/m/css/nodescore-tablet.css @ 42:49c94f63b8b0

css for nexus 7 and associated files- archive m.a added - remove later

+body{
+    background-color: black;
+    color: white;
+    font: 12px Helvetica, Arial;      
+    padding:0px;
+    margin-top:0px;
+    margin-left:0px;
+    height:100%;
+} 
+
+
+
+h3,h4,h5,h6 {
+    width: 400px;
+    background-color: white;
+    display: inline;
+    color: #666;
+    z-index: 2;
+}
+
+h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
+h2{ font: 28px Helvetica, Arial; color:white}
+h3{ font: 12px Helvetica, Arial; color:white }
+h4{ background-color: black; font: 19px Helvetica, Arial; 
+    text-align: center;  margin-left:auto; margin-right:auto; color:white}
+
+a:link {color:#666;}
+a:visited {color: #666;}
+a:hover {color: black; background-color:gray;}
+a:active {color: black;background-color:white;} 
+
+ul, li, h4, h3, h2, h1, p{
+    padding:0;
+    margin:0;
+    list-style:none;
+}
+
+
+.outermaster{
+    margin-top:4px;
+    height: 470px;
+    width: 1024px;
+    border-radius: 15px;
+    background-color:black;
+    border: 1px solid gray;
+    position: relative;
+    !padding: 5px 5px 5px 5px ;
+    color: white;
+    opacity:0.8;
+    !top: 10%
+    +filter: invert(100%);
+    margin-left: 0px;
+ padding:0px;
+}
+
+#live{
+    !margin-left:auto; 
+    !margin-right:auto; 
+    !margin-top:5px;
+    !margin: 2px;
+    width: 100%;
+    height: 465px;
+    text-align: center;
+    border-radius: 15px;
+    background-color:black;
+    border: 0px solid blue;
+    position: absolute;
+!    padding: 5px 5px 5px 5px ;
+    color: white;
+    top: 0px;
+    +filter: invert(100%);
+    z-index:-1;
+    margin-left: 0px;
+    padding:0px;
+}
+
+#info{
+position: absolute;
+border: 0px solid red;
+border-radius:15px;
+top: 338px;
+!padding: 5px 5px 5px 5px;
+height: 135px;
+width: 100%;
+}
+
+#comms{
+    border-radius: 15px;
+    height: 120px;
+    width: 250px;
+    margin: 0px;
+    border: 1px solid gray;
+    color: black;
+    float:left;
+    padding: 5px 5px 5px 5px;
+}
+
+#midfoot{
+    !margin-left:auto; margin-right:auto;
+    border-radius: 15px;
+    height: 120px;
+    width: 30%;
+    margin: 0px;
+    margin-left:15px;
+    border: 1px solid gray;
+    padding: 5px 5px 5px 5px ;
+    background: black;
+    opacity:1;
+    float:left;
+}
+
+#preview{
+    border-radius: 15px;
+    height: 120px;
+    width: 400px;
+    margin: 0px;
+    border: 1px solid gray;
+    !position: absolute;
+    !top: 325px;
+    !right: 0px;
+    padding: 5px 5px 5px 5px ;
+    color: black;
+    overflow:hidden;
+    float:right;
+}
+
+#timeinfo{
+    border-radius: 15px;
+    height:80px;
+    width: 95%;
+    margin: 0px;
+    padding: 5px 5px 5px 5px ;
+    background: transparent;
+    position:relative;
+    top:30px;
+}
+
+#remainingtime{
+!display:table-cell; vertical-align:middle;
+font-size:1.4em;
+color:white;
+position:relative;
+left:30px;
+top:40px;
+width: 120px;
+float:left;
+background-color:transparent;
+}
+
+.footdata{
+    !margin-top:10px;
+    margin-left:auto; margin-right:auto;
+    border-radius: 15px;
+    height: 50px;
+    width: 100%;
+    !margin: 10px;
+    border: 0px solid gray;
+    position:absolute;
+    top: 0px;
+!    padding: 5px 5px 5px 5px ;
+    background: black;
+    opacity:1;
+}
+
+
+.outersquare{
+    border-radius: 15px;
+    border: 1px solid blue;
+ !   position: absolute;
+    !top: 50px;
+    !left: 110px;
+    padding: 1px 1px 1px 1px ;
+    background: black;
+    width: 99%;
+    height: 690px;
+}
+
+.svgmusic {
+    display:block;
+    border-radius: 15px;
+    margin: 0px;
+    width: 100%;
+height: 450px;
+}
+
+.magicsquare {
+!    margin: 10px;
+    border-radius: 5px;
+    border: 1px solid yellow;
+    !padding: 2px 2px 2px 2px;
+    background: transparent;
+    width: 50px; height: 45px;
+    border-radius: 10px;
+    float: left;
+    color: white;
+    font-size: 3em;    
+    text-align: center;
+}
+
+.latencies{
+!    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:middle;
+    width:80px;
+    float:clear;
+    !margin-top: 30px; 
+     !margin-right: 30px;
+    !float:left;
+    !padding: 1px 1px 1px 1px;
+    font-size:1em; color: white;
+    !position: absolute; 
+    !bottom: 10px; 
+    !left: 25%;
+    !float: left;
+    !background-color: transparent;    
+    !opacity: 0.7;
+}
+
+#current{
+    float:right;
+    position: relative; 
+    right: 5%;
+    bottom:-5px;
+    font-size:1.7em; 
+    font-weight: bold;
+    color: white;
+    background-color: transparent;    
+    z-index: 3;
+    opacity: 0.8;
+    padding: 3px 3px 3px 3px;
+}
+
+#client_latency{
+    background:transparent;
+    width:135px;
+    font-size:1.2em;
+    color: white;
+    z-index: 1;
+    padding: 3px 3px 3px 3px;
+    opacity: 0.6;
+    float:left;
+    position:relative;
+    left: 100px;
+    bottom: 10px;
+
+}
+
+.metrocase {
+    float:right;
+    border-radius: 5px;
+    position: relative; 
+    right: 40px;
+    top:-25px;
+    width: 50px;  
+    height: 30px;
+    color: black;
+    text-align: center;
+    font-size: 4em; font-color: black;
+    background: transparent;
+    z-index: 2;
+    border: 1px solid white;
+}
+
+#metronome0 { position: absolute; width: 50px; height: 30px; border-radius: 5px; 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 { clear:both; }
+
+#midcomms{
+color:white;
+width:160px; 
+height:40px; 
+background-color:transparent; 
+border: 0px solid yellow; 
+float:left;
+}
+
+#client_chronometer{ 
+    display:table-cell; vertical-align:middle;
+    border-radius: 15px;
+    !border: 2px solid gray ; 
+    float:right;
+    background-color: black;   
+    color: white;
+    font-size: 2.8em; 
+    text-align: center;
+    opacity:0.7;
+    position: relative; 
+    left: 20px; 
+    bottom:10px;
+    width: 200px; 
+    !height: 40px;
+    z-position: 2;
+}
+
+#counttitle{
+    font-size:3em;
+    margin:0;
+    float:left;
+    width:120px;
+    position:relative;
+    top:5px;
+    left:5px;
+}
+
+#count {
+    width:40px;
+    font-size: 5em;
+    font-weight:bolder;
+    margin:0;
+    padding:0;
+    position:relative;
+    left:15px;
+    top: -10px;
+    background:transparent;
+    float:left;
+    display:inline;
+}
+
+#totalcountdown  {
+    font-size: 1.3em;
+    color:red;
+    position:relative;
+    left: 10px;
+    !top: 0px;
+    !text-align:center
+    font-weight:bolder;
+    !width:100%;
+    !float:left;
+    display:inline;
+    
+    
+}
+
+#countinnumber{ 
+    border-radius: 15px;
+    position: absolute; 
+    !width: 100%; 
+    !height: 90%;
+    background-color:black;
+    font-size: 10em; 
+    font-weight:bolder;
+    display:inline;
+    text-align:center;
+    z-index: 2;
+    opacity:0.5;
+    float:left;
+}
+
+#content-txt {
+    width: 100%; height: 90%;
+    font-size:3em;
+    text-align:center;
+    background-color:black;
+    border:1px solid white;
+    margin-left:auto; margin-right:auto;
+    display:table-cell;
+    vertical-align:middle;
+    border-radius: 15px;
+}