rc-web@5: body{ rc-web@25: background-color: gray; rc-web@5: color: white; rc-web@5: font: 12px Helvetica, Arial; rc-web@5: } rc-web@5: rc-web@5: h3,h4,h5,h6 { rc-web@5: width: 400px; rc-web@5: background-color: white; rc-web@5: display: inline; rc-web@5: color: #666; rc-web@5: z-index: 2; rc-web@5: } rc-web@5: rc-web@5: h1{ background-color: black; color:white;font: 44px Helvetica, Arial; } rc-web@5: h2{ font: 28px Helvetica, Arial; color:white} rc-web@5: h3{ font: 12px Helvetica, Arial; color:white } rc-web@5: h4{ background-color: black; font: 19px Helvetica, Arial; rc-web@5: text-align: center; margin-left:auto; margin-right:auto; color:white} rc-web@5: rc-web@5: a:link {color:#666;} rc-web@5: a:visited {color: #666;} rc-web@5: a:hover {color: black; background-color:gray;} rc-web@5: a:active {color: black;background-color:white;} rc-web@5: rc-web@5: ul, li, h4, h3, h2, h1, p{ rc-web@5: padding:0; rc-web@5: margin:0; rc-web@5: list-style:none; rc-web@5: } rc-web@5: rc-web@11: .page{ rc-web@11: height: 1000px;; rc-web@11: width: 1280px; rc-web@11: } rc-web@11: rc-web@5: .outermaster{ rc-web@5: height: 800px; rc-web@5: width: 1280px; rc-web@5: border: 1px solid blue; rc-web@5: position: relative; rc-web@5: padding: 5px 5px 5px 5px ; rc-web@5: color: black; rc-web@11: top: 10% rc-web@25: +filter: invert(100%); rc-web@5: } rc-web@5: rc-web@16: #preview{ rc-web@16: height: 240px; rc-web@16: width: 400px; rc-web@16: border: 1px solid blue; rc-web@16: position: absolute; rc-web@16: padding: 5px 5px 5px 5px ; rc-web@16: color: black; rc-web@16: bottom: 0%; rc-web@16: right: 0px; rc-web@16: } rc-web@16: rc-web@11: .outersquare{ rc-web@19: height: 400px; rc-web@19: width: 685px; rc-web@11: border: 1px solid blue; rc-web@11: position: absolute; rc-web@19: top: 150px; rc-web@19: left: 0px; rc-web@16: padding: 1px 1px 1px 1px ; rc-web@11: background-color: black; rc-web@11: } rc-web@11: rc-web@19: .magicsquare { rc-web@19: border: 1px solid yellow; rc-web@19: padding: 2px 2px 2px 2px; rc-web@19: background: blue; rc-web@19: width: 100px; rc-web@19: height: 90px; rc-web@19: border-radius: 20px; rc-web@19: float: left; rc-web@19: color: black; rc-web@19: font-size: 7em; rc-web@19: text-align: center; rc-web@19: }​ rc-web@19: rc-web@11: .latencies{ rc-web@16: height: 90px; rc-web@16: width: 200px; rc-web@11: border: 1px solid blue; rc-web@11: position: relative; rc-web@16: float: right; rc-web@11: top: 15%; rc-web@11: padding: 5px 5px 5px 5px ; rc-web@19: background-color: blue; rc-web@11: } rc-web@11: rc-web@22: #datetime{ rc-web@23: display:table-cell; rc-web@23: vertical-align:bottom; rc-web@23: opacity: 0.7; rc-web@23: height: 25px; rc-web@23: text-align: center; rc-web@23: width: 858px; rc-web@23: font-size:1.5em; rc-web@24: color: yellow; rc-web@24: ! border: 1px solid blue; rc-web@22: position: absolute; rc-web@22: float: left; rc-web@23: left: 206px; rc-web@23: top: 25px; rc-web@24: background-color: transparent; rc-web@22: } rc-web@22: rc-web@23: #current{ rc-web@24: opacity: 0.8; rc-web@23: height: 25px; rc-web@23: text-align: center; rc-web@23: width: 130px; rc-web@23: font-size:1.5em; rc-web@25: font-weight: bold; rc-web@25: color: white; rc-web@24: ! border: 1px solid blue; rc-web@23: position: absolute; rc-web@23: float: left; rc-web@23: left: 210px; rc-web@23: top: 25px; rc-web@24: background-color: transparent; rc-web@23: z-index: 1; rc-web@23: } rc-web@23: rc-web@23: #client_latency{ rc-web@24: opacity: 0.8; rc-web@23: height: 25px; rc-web@23: width: 160px; rc-web@23: font-size:1.5em; rc-web@24: color: pink; rc-web@24: ! border: 1px solid blue; rc-web@23: position: absolute; rc-web@23: float: left; rc-web@24: right: 205px; rc-web@23: top: 25px; rc-web@23: background-color: black; rc-web@23: z-index: 1; rc-web@24: padding: 0px 15px; rc-web@23: } rc-web@23: rc-web@23: rc-web@11: .metrocase { rc-web@11: position: absolute; rc-web@23: top: 0px; rc-web@23: left: 0px; rc-web@11: color: black; rc-web@11: text-align: center; rc-web@11: font-size: 4em; rc-web@11: font-color: black; rc-web@11: background: transparent; rc-web@23: width: 200px; rc-web@23: height: 50px; rc-web@11: z-index: 2; rc-web@22: border: 1px solid blue; rc-web@11: } rc-web@11: rc-web@23: #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; } rc-web@23: #metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; } rc-web@23: #metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; } rc-web@23: #metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; } rc-web@5: rc-web@5: #fluid {} rc-web@5: .fluid-img{height:50%; width:50%;} rc-web@5: rc-web@5: .clear rc-web@5: { rc-web@5: clear:both; rc-web@5: } rc-web@5: rc-web@5: #client_chronometer{ rc-web@22: border: 1px solid blue ; rc-web@5: background-color: black; rc-web@23: color: white; rc-web@25: font-size: 3em; rc-web@23: text-align: center; rc-web@23: opacity:0.7; rc-web@5: position: absolute; rc-web@23: right: 0px; rc-web@23: top: 0px; rc-web@23: // padding: 2px 2px 2px 2px; rc-web@23: width: 220px; rc-web@23: height: 50px; rc-web@5: z-position: 2; rc-web@5: } rc-web@5: rc-web@5: #countinnumber{ rc-web@5: background-color: gray; rc-web@5: font-size: 48em; rc-web@5: display:inline; rc-web@5: text-align:center; rc-web@5: z-index: 2; rc-web@5: position: absolute; rc-web@5: opacity:0.5; rc-web@5: font-weight:bolder; rc-web@5: width: 1280px; rc-web@5: height: 800px; rc-web@5: } rc-web@5: rc-web@5: #content-txt { rc-web@5: // padding: 2px 2px 2px 2px; rc-web@5: font-size: 3em; rc-web@5: text-align:center; rc-web@5: background-color: black; rc-web@5: border: 1px solid white; rc-web@5: height: 800px; rc-web@5: width: 1280px; rc-web@5: margin-left:auto; rc-web@5: margin-right:auto; rc-web@5: display: table-cell; rc-web@5: vertical-align: middle; rc-web@5: }