563 lines
9.4 KiB
CSS
Executable File
563 lines
9.4 KiB
CSS
Executable File
body{
|
|
font: 12px Helvetica, Arial;
|
|
margin-left:0px;
|
|
height:100%;
|
|
}
|
|
|
|
h3,h4,h5,h6 {
|
|
width: 400px;
|
|
display: inline;
|
|
color: #666;
|
|
z-index: 2;
|
|
}
|
|
|
|
h1{ font: 44px Helvetica, Arial; }
|
|
h2 { font: 18px Helvetica, Arial; }
|
|
h3{ font: 12px Helvetica, Arial; }
|
|
|
|
h4{ font: 19px Helvetica, Arial;
|
|
text-align: center; margin-left:auto; margin-right:auto;
|
|
}
|
|
|
|
a:link { color:#666;}
|
|
a:visited { color: #666;}
|
|
a:hover { color: black; background-color:orange; }
|
|
a:active { color: black; background-color:white; }
|
|
|
|
ul, li, h4, h3, h2, h1, p{
|
|
padding:0;
|
|
margin:0;
|
|
list-style:none;
|
|
}
|
|
|
|
.soloscore{
|
|
margin:0;
|
|
margin-right:200px;
|
|
float:right;
|
|
height: 650px;
|
|
width: 1150px;
|
|
position: absolute;
|
|
top:9%;
|
|
left: 3000px;
|
|
!margin: 0 auto;
|
|
background:transparent;
|
|
border:1px dashed red;
|
|
}
|
|
|
|
#soloscore.anchor{display: block; position: relative; left: 1250px; visibility: hidden;}
|
|
|
|
#info{
|
|
position: absolute;
|
|
border-radius:15px;
|
|
float:bottom;
|
|
!top: 450px;
|
|
height: 135px;
|
|
width: 100%;
|
|
}
|
|
|
|
#comms{
|
|
position:fixed;
|
|
top:12%;
|
|
right: 10px;
|
|
height: 70%;
|
|
width: 180px;
|
|
margin: 0px;
|
|
color: white;
|
|
}
|
|
|
|
|
|
#preview{
|
|
border-radius: 15px;
|
|
height: 120px;
|
|
width: 30%;
|
|
margin: 0px;
|
|
border: 1px solid gray;
|
|
padding: 5px 5px 5px 5px;
|
|
float:right;
|
|
font-size:1em;
|
|
}
|
|
|
|
#preview img{
|
|
margin-top:15px;
|
|
width:300px;
|
|
background:transparent;
|
|
position: relative;
|
|
top:-20px;
|
|
}
|
|
|
|
#remainingtime{
|
|
padding:0px 10px;
|
|
margin:0;
|
|
font-size:2.2em;
|
|
width:150px;
|
|
float:right;
|
|
!background-color:blue;
|
|
position:relative;
|
|
top:-5px;
|
|
!left:0px;
|
|
}
|
|
|
|
.footdata{
|
|
margin-left:auto; margin-right:auto;
|
|
border-radius: 15px;
|
|
height: 50px;
|
|
width: 100%;
|
|
border: 0px solid gray;
|
|
position:absolute;
|
|
top: 0px;
|
|
opacity:1;
|
|
}
|
|
|
|
.outersquare{
|
|
border-radius: 15px;
|
|
border: 1px solid blue;
|
|
padding: 1px 1px 1px 1px ;
|
|
width: 99%;
|
|
height: 490px;
|
|
}
|
|
|
|
.svgmusic {
|
|
padding:0px;
|
|
border: 1px dashed green;
|
|
display:block;
|
|
border-radius: 15px;
|
|
margin: 0px;
|
|
width: 100%;
|
|
height: 445px;
|
|
min-height: 445px;
|
|
|
|
}
|
|
|
|
|
|
#thesquare{ position:absolute;
|
|
width:700px;
|
|
}
|
|
.magicsquare {
|
|
border: 1px solid white;
|
|
padding: 2px 2px 2px 2px;
|
|
width: 110px;
|
|
height: 100px;
|
|
float: left;
|
|
font-size: 3em;
|
|
text-align:center
|
|
}
|
|
|
|
.sqa {height:50%; width:50%; float:left; color: blue; }
|
|
.sqb {height:50%; width:50%; float:right; color: green; }
|
|
.sqc {height:50%; width:50%; float:left; color: aqua; }
|
|
.sqd {height:50%; width:50%; float:right; color:red; }
|
|
|
|
.row { display:inline; }
|
|
.row img{ width:160px; display:inline;}
|
|
.row p{ display:inline; color:yellow;}
|
|
.rrr { position:relative; display:inline;}
|
|
|
|
.sqrow{
|
|
display:inline;
|
|
padding: 2px 2px 10px 2px;
|
|
|
|
}
|
|
|
|
.latencies{
|
|
/* height: 90px; width: 200px;
|
|
border: 1px solid blue;
|
|
position: relative; top: 15%;
|
|
float: right;
|
|
padding: 5px 5px 5px 5px ;
|
|
background-color: yellow;
|
|
*/
|
|
}
|
|
|
|
#datetime{
|
|
float:left;
|
|
width:90px;
|
|
font-size:0.9em;
|
|
text-align:center;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#current{
|
|
font-size:1.7em;
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
z-index: 3;
|
|
opacity: 0.8;
|
|
padding: 3px 3px 3px 3px;
|
|
}
|
|
|
|
#client_latency{
|
|
position:absolute;
|
|
right:100px;
|
|
top:1px;
|
|
background:transparent;
|
|
float:right;
|
|
font-size:1em;
|
|
padding:0px 0px 10px 0px;
|
|
}
|
|
|
|
#fluid {}
|
|
.fluid-img{ height:50%; width:50%; }
|
|
.clear { clear:both; }
|
|
|
|
#client_chronometer{
|
|
float:right;
|
|
font-size:3em;
|
|
margin-right:50px;
|
|
margin-top:10px;
|
|
color:white;
|
|
}
|
|
|
|
#views{
|
|
position:absolute;
|
|
left:65%;
|
|
top:15px;
|
|
float:left;
|
|
}
|
|
|
|
.btn{background:yellow;
|
|
font-size:1.2em;
|
|
padding:1px;
|
|
}
|
|
|
|
.formrow{
|
|
float:left;
|
|
}
|
|
|
|
#setPart{
|
|
float:right;
|
|
margin-right:70px;
|
|
margin-top:15px;
|
|
font-size:1.3em;
|
|
background:orange;
|
|
height:28px;
|
|
}
|
|
|
|
#transport{
|
|
position:absolute;
|
|
right:240px;
|
|
top:15px;
|
|
float:right;
|
|
color:white;
|
|
font-size:1.3em;
|
|
}
|
|
|
|
.transpbtn{
|
|
color:white;
|
|
font-size:1em;
|
|
padding:1px;
|
|
}
|
|
|
|
#ctrlstop{
|
|
position:absolute;
|
|
padding: 5px;
|
|
border: 1px solid gray;
|
|
bottom:120px;
|
|
left:1800px;
|
|
height:80px;
|
|
width:230px;
|
|
border-radius: 15px;
|
|
color: gray;
|
|
font-size: 3.5em;
|
|
}
|
|
|
|
#counttitle{
|
|
padding-left:10px;
|
|
font-size:2em;
|
|
margin:0;
|
|
float:left;
|
|
position:relative;
|
|
top:-5px;
|
|
}
|
|
|
|
.count {
|
|
width:40px;
|
|
font-size:2.5em;
|
|
font-weight:bolder;
|
|
margin:0;
|
|
padding:0;
|
|
position:relative;
|
|
left:15%;
|
|
top: -10px;
|
|
background:transparent;
|
|
float:left;
|
|
}
|
|
|
|
#count{
|
|
position:absolute;
|
|
top:30%;
|
|
}
|
|
|
|
#totalcountdown {
|
|
position:absolute;
|
|
top:-10%;
|
|
left:20%;
|
|
font-size:2em;
|
|
font-weight:bolder;
|
|
}
|
|
|
|
#countinnumber{
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
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;
|
|
border:1px solid black;
|
|
margin-left:auto; margin-right:auto;
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.outermaster2{
|
|
margin-top:5%;
|
|
height: 700px;
|
|
width: 4400px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
#preview-overview { width: 1200px;
|
|
height: 600px;
|
|
padding: 0px 0px 0px 115px;
|
|
}
|
|
|
|
#preview-multi {
|
|
height:700px;
|
|
width: 1250px;
|
|
padding: 0;
|
|
position: absolute;
|
|
left:1500px;
|
|
top:60px;
|
|
}
|
|
|
|
#preview-solo{
|
|
position:absolute;
|
|
border:0x dashed red;
|
|
height:520px;
|
|
}
|
|
|
|
#previewbox-solo-next{
|
|
position:absolute;
|
|
}
|
|
|
|
.solo-next{
|
|
position:absolute;
|
|
border:1px dashed blue;
|
|
height:120px;
|
|
width:22%;
|
|
!float: right;
|
|
bottom:0;
|
|
right:0;
|
|
background:transparent;
|
|
padding:4px;
|
|
margin:4px;
|
|
}
|
|
|
|
|
|
#nexttitle{
|
|
position:absolute;
|
|
left: -130px;
|
|
top: 30px;
|
|
color: orange;
|
|
!z-index:1000;
|
|
font-size:3em;
|
|
opacity:0.6;
|
|
}
|
|
|
|
.pview {
|
|
border: 1px dashed gray;
|
|
height:45%; width:45%; float:left;
|
|
background:white;
|
|
z-index:-100;
|
|
margin-left:15px;
|
|
margin-top:15px;
|
|
position:relative;
|
|
}
|
|
|
|
.pviewsolo {
|
|
border: 1px dashed gray;
|
|
width:100%;
|
|
float:left;
|
|
background:white;
|
|
z-index:-100;
|
|
position:relative;
|
|
}
|
|
|
|
.pviewmusic {
|
|
padding-top:40px;
|
|
}
|
|
|
|
.middle { float: left;
|
|
width: 10.8%;
|
|
height: 12%;
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0.33%;
|
|
border: 1px dashed black;
|
|
background:white;
|
|
border-radius:1px;
|
|
} /* 100 = 6 * widt\h + 12 * margin */
|
|
|
|
.middle p { font-size:2em;
|
|
position:relative;
|
|
left: 0px; opacity:0.5;
|
|
color:blue;
|
|
display:block;
|
|
}
|
|
|
|
.middle img { padding: 0px 0px 0px 0px;
|
|
position:relative; top:-15px;
|
|
}
|
|
|
|
.middle:hover img {
|
|
z-index:1000;
|
|
width:500px;
|
|
background-color: white;
|
|
position: relative;
|
|
top:60px;
|
|
left:50px;
|
|
border: 0px solid red;
|
|
border-radius:10px;
|
|
opacity: 1;
|
|
box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
|
|
}
|
|
|
|
.middle p.indexnum { font-size:1em; color:black;
|
|
position:relative; top:-80px; left:90px;
|
|
opacity:1;
|
|
}
|
|
|
|
.inner-0, .inner-1, .inner-2, .inner-3 {
|
|
font-size:1em;
|
|
float: left; width: 45%; height: 45%;
|
|
padding: 0; border: 1px dashed gray;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
position:absolute;
|
|
top: -105px;
|
|
|
|
}
|
|
|
|
.inner-0 { background-color: transparent; }
|
|
.inner-1 { background-color: transparent; }
|
|
.inner-2 { background-color: transparent; }
|
|
.inner-3 { background-color: transparent; }
|
|
|
|
.musicianprog {
|
|
display:inline;
|
|
float:left;
|
|
width:9%; background:transparent; height:14%;
|
|
padding: 1px; text-align:center;
|
|
position:absolute;
|
|
}
|
|
|
|
|
|
.tleftgroup {
|
|
padding-top:0px;
|
|
}
|
|
|
|
.timeleft {
|
|
display:inline;
|
|
width:9%;
|
|
background:transparent;
|
|
height:14%;
|
|
padding: 1px;
|
|
text-align:center;
|
|
font-size:2.5em;
|
|
position:absolute;
|
|
right:0%;
|
|
color:orange;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
.unitseq {
|
|
position:absolute;
|
|
right:40%;
|
|
text-align:center;
|
|
font-size:2em;
|
|
color:gray;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.head{
|
|
background:gray;
|
|
opacity:1;
|
|
padding:4px 0px 0px 4px;
|
|
height:7%;
|
|
position:fixed;
|
|
top:0px;
|
|
width:100%;
|
|
}
|
|
|
|
.footx{
|
|
margin:0px;
|
|
background:gray;
|
|
opacity:1;
|
|
padding:10px;
|
|
height:7%;
|
|
position:fixed;
|
|
bottom:0px;
|
|
width:100%;
|
|
padding:0px 0px 0px 10px;
|
|
}
|
|
|
|
|
|
#indexpagetitle{
|
|
font-size:1.5em;
|
|
float:left;
|
|
margin-left:8%;
|
|
padding:10px;
|
|
margin-bottom:0px;
|
|
color:white;
|
|
letter-spacing:4px;
|
|
}
|
|
|
|
.metrocase {
|
|
margin-left:20px;
|
|
margin-top:5px;
|
|
float:left;
|
|
border-radius: 4px;
|
|
width: 60px;
|
|
height:30px;
|
|
color: black;
|
|
text-align: center;
|
|
font-size: 4em;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
#metronome0 { width: 60px; height: 30px; border-radius: 4px; float:left; }
|
|
#links {position:absolute; bottom:150px; left: 800px; width:900px;}
|
|
|
|
#transect {
|
|
float:left;
|
|
font-size:2em;
|
|
padding:3px;
|
|
padding-left:20px;
|
|
margin-top:15px;
|
|
background:yellow;
|
|
width:250px;
|
|
}
|
|
|
|
.tportpop {
|
|
width:200px;
|
|
height: 90px;
|
|
margin: 1px solid white;
|
|
position:relative;
|
|
left:300px; top:60px;
|
|
border: 1px solid green;
|
|
border-radius: 1px; padding: 5px;
|
|
} |