annotate www/m/css/nodescore.css @ 19:a56434dee146

toggleable divs and clean up

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

.metrocase {
    position: absolute;
    top: 10px;
    left: 10px;
    color: black;
    text-align: center;
    font-size: 4em;
    font-color: black;
    background: transparent;
    width: 240px;
    height: 60px;
    z-index: 2;
    padding: 5px 5px 5px 5px; 
    border: 1px solid gray;
}

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

#fluid {}
.fluid-img{height:50%; width:50%;}

.clear
{
clear:both;
}

#client_chronometer{ 
    border: 2px solid gray ; 
    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;
    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;
}


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