annotate 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

body{
    background-color: black;
    color: white;
    font: 12px Helvetica, Arial;  
} 

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;
}


.page{
    height: 1000px;;
    width: 1280px;
}

.outermaster{
    height: 800px;
    width: 1280px;
    border: 1px solid blue;
    position: relative;
    padding: 5px 5px 5px 5px ;
    color: black;
    top: 10%
}

#preview{
    height: 240px;
    width: 400px;
    border: 1px solid blue;
    position: absolute;
    padding: 5px 5px 5px 5px ;
    color: black;
    bottom: 0%;
    right: 0px;
}

.outersquare{
    height: 400px;
    width: 685px;
    border: 1px solid blue;
    position: absolute;
    top: 150px;
    left: 0px;
    padding: 1px 1px 1px 1px ;
    background-color: black;
}

.magicsquare {
    border: 1px solid yellow;
    padding: 2px 2px 2px 2px;
    background: blue;
    width: 100px;
    height: 90px;
    border-radius: 20px;
    float: left;
    color: black;
    font-size: 7em;    
    text-align: center;
}​

.latencies{
    height: 90px;
    width: 200px;
    border: 1px solid blue;
    position: relative;
    float: right;
    top: 15%;
    padding: 5px 5px 5px 5px ;
    background-color: blue;    
}

#datetime{
    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: 0px;
    left: 0px;
    color: black;
    text-align: center;
    font-size: 4em;
    font-color: black;
    background: transparent;
    width: 200px;
    height: 50px;
    z-index: 2;
    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
{
clear:both;
}

#client_chronometer{ 
    border: 1px solid blue ; 
    background-color: black;   
    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;
    font-size: 48em;
    display:inline;
    text-align:center;
    z-index: 2;
    position: absolute;
    opacity:0.5;
    font-weight:bolder;
    width: 1280px;
    height: 800px;
}

#content-txt {
//   padding: 2px 2px 2px 2px;
  font-size: 3em;
  text-align:center;
  background-color: black;
  border: 1px solid white;
  height: 800px;
  width: 1280px;
  margin-left:auto;
  margin-right:auto;
  display: table-cell;
  vertical-align: middle;
}