annotate www/m/css/nodescore.css @ 27:a3387450c585

added new thumbs stucture

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%
    +filter: invert(100%);
}

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

.svgmusic {  

width: 1280px;
height: 800px;

}

.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; top: 15%;
    float: right;
    padding: 5px 5px 5px 5px ;
    background-color: blue;    
}

#datetime{
    display:table-cell; 
    vertical-align:bottom;
    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;
    color: white;
!    border: 1px solid blue;
    float: left;
    background-color: transparent;    
    z-index: 1;
    opacity: 0.8;
}

#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;    
    z-index: 1;
    padding: 0px 15px;
    opacity: 0.8;
}

.metrocase {
    position: absolute; top: 0px; left: 0px;
    width: 200px;  height: 50px;
    color: black;
    text-align: center;
    font-size: 4em; font-color: black;
    background: transparent;
    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: 3em; text-align: center;
    opacity:0.7;
    position: absolute; right: 0px; top: 0px;
    width: 220px; height: 50px;
    z-position: 2;
}

#countinnumber{ 
    position: absolute; 
    width: 1280px; height: 800px;
    background-color:gray;
    font-size: 48em; font-weight:bolder;
    display:inline;
    text-align:center;
    z-index: 2;
    opacity:0.5;
}

#content-txt {
    width:1280px; height:800px; 
    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;
}