rc-web@42
|
1 body{
|
rc-web@42
|
2 background-color: black;
|
rc-web@42
|
3 color: white;
|
rc-web@42
|
4 font: 12px Helvetica, Arial;
|
rc-web@42
|
5
|
rc-web@42
|
6 }
|
rc-web@42
|
7
|
rc-web@42
|
8 h3,h4,h5,h6 {
|
rc-web@42
|
9 width: 400px;
|
rc-web@42
|
10 background-color: white;
|
rc-web@42
|
11 display: inline;
|
rc-web@42
|
12 color: #666;
|
rc-web@42
|
13 z-index: 2;
|
rc-web@42
|
14 }
|
rc-web@42
|
15
|
rc-web@42
|
16 h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
|
rc-web@42
|
17 h2{ font: 28px Helvetica, Arial; color:white}
|
rc-web@42
|
18 h3{ font: 12px Helvetica, Arial; color:white }
|
rc-web@42
|
19 h4{ background-color: black; font: 19px Helvetica, Arial;
|
rc-web@42
|
20 text-align: center; margin-left:auto; margin-right:auto; color:white}
|
rc-web@42
|
21
|
rc-web@42
|
22 a:link {color:#666;}
|
rc-web@42
|
23 a:visited {color: #666;}
|
rc-web@42
|
24 a:hover {color: black; background-color:gray;}
|
rc-web@42
|
25 a:active {color: black;background-color:white;}
|
rc-web@42
|
26
|
rc-web@42
|
27 ul, li, h4, h3, h2, h1, p{
|
rc-web@42
|
28 padding:0;
|
rc-web@42
|
29 margin:0;
|
rc-web@42
|
30 list-style:none;
|
rc-web@42
|
31 }
|
rc-web@42
|
32
|
rc-web@42
|
33
|
rc-web@42
|
34 .outermaster{
|
rc-web@42
|
35 height: 768px;
|
rc-web@42
|
36 width: 1024px;
|
rc-web@42
|
37 border-radius: 15px;
|
rc-web@42
|
38 background-color:DimGray;
|
rc-web@42
|
39 border: 1px solid gray;
|
rc-web@42
|
40 position: relative;
|
rc-web@42
|
41 !padding: 5px 5px 5px 5px ;
|
rc-web@42
|
42 color: white;
|
rc-web@42
|
43 opacity:0.8;
|
rc-web@42
|
44 !top: 10%
|
rc-web@42
|
45 +filter: invert(100%);
|
rc-web@42
|
46 }
|
rc-web@42
|
47
|
rc-web@42
|
48 #live{
|
rc-web@42
|
49 margin-left:auto; margin-right:auto; margin-top:5px;
|
rc-web@42
|
50 !margin: 2px;
|
rc-web@42
|
51 width: 99%;
|
rc-web@42
|
52 height: 400px;
|
rc-web@42
|
53 text-align: center;
|
rc-web@42
|
54 border-radius: 15px;
|
rc-web@42
|
55 background-color:black;
|
rc-web@42
|
56 border: 1px solid gray;
|
rc-web@42
|
57 position: absolute;
|
rc-web@42
|
58 ! padding: 5px 5px 5px 5px ;
|
rc-web@42
|
59 color: white;
|
rc-web@42
|
60 top: 0px;
|
rc-web@42
|
61 +filter: invert(100%);
|
rc-web@42
|
62 z-index:-1;
|
rc-web@42
|
63 }
|
rc-web@42
|
64
|
rc-web@42
|
65
|
rc-web@42
|
66
|
rc-web@42
|
67 #comms{
|
rc-web@42
|
68 border-radius: 15px;
|
rc-web@42
|
69 height: 180px;
|
rc-web@42
|
70 width: 350px;
|
rc-web@42
|
71 margin: 0px;
|
rc-web@42
|
72 border: 1px solid gray;
|
rc-web@42
|
73 position: absolute;
|
rc-web@42
|
74 bottom: 80px;
|
rc-web@42
|
75 left: 14px;
|
rc-web@42
|
76 padding: 5px 5px 5px 5px ;
|
rc-web@42
|
77 color: black;
|
rc-web@42
|
78
|
rc-web@42
|
79 }
|
rc-web@42
|
80
|
rc-web@42
|
81 #midcomms{
|
rc-web@42
|
82 font-size: 3em;
|
rc-web@42
|
83 font-weight:bolder;
|
rc-web@42
|
84 !display:inline;
|
rc-web@42
|
85 text-align:center;
|
rc-web@42
|
86 border-radius: 15px;
|
rc-web@42
|
87 height: 180px;
|
rc-web@42
|
88 width: 180px;
|
rc-web@42
|
89 margin: 0px;
|
rc-web@42
|
90 border: 1px solid gray;
|
rc-web@42
|
91 position: absolute;
|
rc-web@42
|
92 bottom: 80px;
|
rc-web@42
|
93 left: 380px;
|
rc-web@42
|
94 padding: 5px 5px 5px 5px ;
|
rc-web@42
|
95 color: black;
|
rc-web@42
|
96 }
|
rc-web@42
|
97 #totalcountdown {
|
rc-web@42
|
98 font-size: 0.6em;
|
rc-web@42
|
99 color:white;
|
rc-web@42
|
100 position:absolute;
|
rc-web@42
|
101 bottom: 0px;
|
rc-web@42
|
102 text-align:center;
|
rc-web@42
|
103 width:100%;
|
rc-web@42
|
104 }
|
rc-web@42
|
105 #count {
|
rc-web@42
|
106 font-size: 3em;
|
rc-web@42
|
107 background:transparent;
|
rc-web@42
|
108
|
rc-web@42
|
109 }
|
rc-web@42
|
110
|
rc-web@42
|
111 #preview{
|
rc-web@42
|
112 border-radius: 15px;
|
rc-web@42
|
113 height: 180px;
|
rc-web@42
|
114 width: 422px;
|
rc-web@42
|
115 margin: 0px;
|
rc-web@42
|
116 border: 1px solid gray;
|
rc-web@42
|
117 position: absolute;
|
rc-web@42
|
118 bottom: 80px;
|
rc-web@42
|
119 right: 14px;
|
rc-web@42
|
120 padding: 5px 5px 5px 5px ;
|
rc-web@42
|
121 color: black;
|
rc-web@42
|
122 }
|
rc-web@42
|
123
|
rc-web@42
|
124
|
rc-web@42
|
125 .footdata{
|
rc-web@42
|
126 !margin-top:10px;
|
rc-web@42
|
127 margin-left:auto; margin-right:auto;
|
rc-web@42
|
128 border-radius: 15px;
|
rc-web@42
|
129 height: 7%;
|
rc-web@42
|
130 width: 100%;
|
rc-web@42
|
131 !margin: 10px;
|
rc-web@42
|
132 border: 0px solid gray;
|
rc-web@42
|
133 position:absolute;
|
rc-web@42
|
134 top: 0px;
|
rc-web@42
|
135 ! padding: 5px 5px 5px 5px ;
|
rc-web@42
|
136 background: DimGray;
|
rc-web@42
|
137 opacity:1;
|
rc-web@42
|
138 }
|
rc-web@42
|
139
|
rc-web@42
|
140
|
rc-web@42
|
141 .outersquare{
|
rc-web@42
|
142 border-radius: 15px;
|
rc-web@42
|
143 border: 1px solid blue;
|
rc-web@42
|
144 ! position: absolute;
|
rc-web@42
|
145 !top: 50px;
|
rc-web@42
|
146 !left: 110px;
|
rc-web@42
|
147 padding: 1px 1px 1px 1px ;
|
rc-web@42
|
148 background: black;
|
rc-web@42
|
149 width: 99%;
|
rc-web@42
|
150 height: 690px;
|
rc-web@42
|
151 }
|
rc-web@42
|
152
|
rc-web@42
|
153 .svgmusic {
|
rc-web@42
|
154 display:block;
|
rc-web@42
|
155 border-radius: 15px;
|
rc-web@42
|
156 margin: 0px;
|
rc-web@42
|
157 width: 100%;
|
rc-web@42
|
158 height: 450px;
|
rc-web@42
|
159 }
|
rc-web@42
|
160
|
rc-web@42
|
161 .magicsquare {
|
rc-web@42
|
162 ! margin: 10px;
|
rc-web@42
|
163 border-radius: 5px;
|
rc-web@42
|
164 border: 1px solid yellow;
|
rc-web@42
|
165 !padding: 2px 2px 2px 2px;
|
rc-web@42
|
166 background: transparent;
|
rc-web@42
|
167 width: 50px; height: 45px;
|
rc-web@42
|
168 border-radius: 10px;
|
rc-web@42
|
169 float: left;
|
rc-web@42
|
170 color: white;
|
rc-web@42
|
171 font-size: 3em;
|
rc-web@42
|
172 text-align: center;
|
rc-web@42
|
173 }
|
rc-web@42
|
174
|
rc-web@42
|
175 .latencies{
|
rc-web@42
|
176 ! height: 90px; width: 200px;
|
rc-web@42
|
177 ! border: 1px solid blue;
|
rc-web@42
|
178 ! position: relative; top: 15%;
|
rc-web@42
|
179 ! float: right;
|
rc-web@42
|
180 ! padding: 5px 5px 5px 5px ;
|
rc-web@42
|
181 ! background-color: yellow;
|
rc-web@42
|
182 }
|
rc-web@42
|
183
|
rc-web@42
|
184 #datetime{
|
rc-web@42
|
185 display:table-cell; vertical-align:middle;
|
rc-web@42
|
186 !margin-top: 10px;
|
rc-web@42
|
187 margin-right: 30px;
|
rc-web@42
|
188 float:left;
|
rc-web@42
|
189 padding: 3px 3px 3px 3px;
|
rc-web@42
|
190 font-size:1em; color: white;
|
rc-web@42
|
191 !position: absolute;
|
rc-web@42
|
192 !bottom: 10px;
|
rc-web@42
|
193 !left: 25%;
|
rc-web@42
|
194 !float: left;
|
rc-web@42
|
195 background-color: transparent;
|
rc-web@42
|
196 opacity: 0.7;
|
rc-web@42
|
197 }
|
rc-web@42
|
198
|
rc-web@42
|
199 #current{
|
rc-web@42
|
200 display:table-cell; vertical-align:middle;
|
rc-web@42
|
201 margin-top: 10px; margin-right: 30px;
|
rc-web@42
|
202 float:left;
|
rc-web@42
|
203 !position: absolute;
|
rc-web@42
|
204 !right: 25%;
|
rc-web@42
|
205 font-size:2em;
|
rc-web@42
|
206 font-weight: bold;
|
rc-web@42
|
207 color: white;
|
rc-web@42
|
208 background-color: transparent;
|
rc-web@42
|
209 z-index: 3;
|
rc-web@42
|
210 opacity: 0.8;
|
rc-web@42
|
211 padding: 3px 3px 3px 3px;
|
rc-web@42
|
212 }
|
rc-web@42
|
213
|
rc-web@42
|
214 #client_latency{
|
rc-web@42
|
215 ! float:left;
|
rc-web@42
|
216 display:table-cell; vertical-align:middle;
|
rc-web@42
|
217 margin-top: 10px; margin-right: 30px;
|
rc-web@42
|
218 text-align:center;
|
rc-web@42
|
219 font-size:1em;
|
rc-web@42
|
220 color: white;
|
rc-web@42
|
221 z-index: 1;
|
rc-web@42
|
222 padding: 3px 3px 3px 3px;
|
rc-web@42
|
223 opacity: 0.7;
|
rc-web@42
|
224 }
|
rc-web@42
|
225
|
rc-web@42
|
226 .metrocase {
|
rc-web@42
|
227 float:left;
|
rc-web@42
|
228 display:table-cell; vertical-align:middle;
|
rc-web@42
|
229 margin-top: -22px; margin-right: 30px; margin-left: 20px;
|
rc-web@42
|
230 border-radius: 15px;
|
rc-web@42
|
231 position: relative; top: 50%;
|
rc-web@42
|
232
|
rc-web@42
|
233 width: 50px; height: 40px;
|
rc-web@42
|
234 color: black;
|
rc-web@42
|
235 text-align: center;
|
rc-web@42
|
236 font-size: 4em; font-color: black;
|
rc-web@42
|
237 background: transparent;
|
rc-web@42
|
238 z-index: 2;
|
rc-web@42
|
239 border: 2px solid gray;
|
rc-web@42
|
240 }
|
rc-web@42
|
241
|
rc-web@42
|
242 #metronome0 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
rc-web@42
|
243 #metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
rc-web@42
|
244 #metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
rc-web@42
|
245 #metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
rc-web@42
|
246
|
rc-web@42
|
247 #fluid {}
|
rc-web@42
|
248 .fluid-img{ height:50%; width:50%; }
|
rc-web@42
|
249
|
rc-web@42
|
250 .clear { clear:both; }
|
rc-web@42
|
251
|
rc-web@42
|
252 #client_chronometer{
|
rc-web@42
|
253 display:table-cell; vertical-align:middle;
|
rc-web@42
|
254 margin-top: -15px;
|
rc-web@42
|
255 !margin-left: 30px;
|
rc-web@42
|
256 float:left;
|
rc-web@42
|
257 !padding: 0 0 0 0;
|
rc-web@42
|
258 !margin: 10px;
|
rc-web@42
|
259 border-radius: 15px;
|
rc-web@42
|
260 border: 2px solid gray ;
|
rc-web@42
|
261 background-color: black;
|
rc-web@42
|
262 color: white;
|
rc-web@42
|
263 font-size: 3em;
|
rc-web@42
|
264 text-align: center;
|
rc-web@42
|
265 opacity:0.7;
|
rc-web@42
|
266 !position: absolute;
|
rc-web@42
|
267 !right: 20px;
|
rc-web@42
|
268 !bottom: 0px;
|
rc-web@42
|
269 width: 220px;
|
rc-web@42
|
270 !height: 40px;
|
rc-web@42
|
271 z-position: 2;
|
rc-web@42
|
272 }
|
rc-web@42
|
273
|
rc-web@42
|
274 #countinnumber{
|
rc-web@42
|
275 border-radius: 15px;
|
rc-web@42
|
276 position: absolute;
|
rc-web@42
|
277 width: 100%; height: 90%;
|
rc-web@42
|
278 background-color:black;
|
rc-web@42
|
279 font-size: 16em;
|
rc-web@42
|
280 font-weight:bolder;
|
rc-web@42
|
281 display:inline;
|
rc-web@42
|
282 text-align:center;
|
rc-web@42
|
283 z-index: 2;
|
rc-web@42
|
284 opacity:0.5;
|
rc-web@42
|
285 }
|
rc-web@42
|
286
|
rc-web@42
|
287 #content-txt {
|
rc-web@42
|
288 width: 100%; height: 90%;
|
rc-web@42
|
289 font-size:3em;
|
rc-web@42
|
290 text-align:center;
|
rc-web@42
|
291 background-color:black;
|
rc-web@42
|
292 border:1px solid white;
|
rc-web@42
|
293 margin-left:auto; margin-right:auto;
|
rc-web@42
|
294 display:table-cell;
|
rc-web@42
|
295 vertical-align:middle;
|
rc-web@42
|
296 border-radius: 15px;
|
rc-web@42
|
297 } |