Subversion Repositories LCARS

Rev

Rev 50 | Rev 71 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 50 Rev 58
1
<?php
1
<?php
2
// \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
2
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
3
//
3
 
4
// /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */
4
/* Do not let resource be cached in HTTP/1.1 caches */
5
// \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
5
\header('Cache-Control: max-age=0, s-maxage=0, must-revalidate, proxy-revalidate');
6
//
6
7
// /* Cached resource expires in HTTP/1.0 caches 24h after last retrieval */
7
/* Do not let resource be cached in HTTP/1.0 caches */
8
// \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
8
\header('Expires: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT');
9
 
9
 
10
\header('Content-Type: text/css; charset=UTF-8');
10
\header('Content-Type: text/css; charset=UTF-8');
11
?>
11
?>
12
@CHARSET "UTF-8";
12
@CHARSET "UTF-8";
13
13
14
@import url("/styles/lcars-ani.css");
-
 
15
-
 
16
/* Basic fonts */
-
 
17
-
 
18
@font-face {
-
 
19
  font-family: "LCARS";
-
 
20
  font-style: normal;
-
 
21
  font-weight: normal;
-
 
22
  src: local("LCARS"), url(fonts/LCARS.ttf);
-
 
23
}
14
<?php
24
-
 
25
/* EOT font created with WEFT on 2002-03-23 */
-
 
26
@font-face {
-
 
27
  font-family: "Downloadable Haettenschweiler";
-
 
28
  font-style: normal;
-
 
29
  font-weight: normal;
-
 
30
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
15
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
31
}
-
 
32
-
 
33
/*
16
  {
34
@font-face {
-
 
35
  font-family:Webdings;
-
 
36
  font-style:normal;
-
 
37
  font-weight:normal;
-
 
38
  src:url(fonts/WEBDING0.eot);
-
 
39
}
-
 
40
*/
17
?>
41
-
 
42
@font-face {
-
 
43
  font-family: "Downloadable Zurich XCn BT";
-
 
44
  font-style: normal;
-
 
45
  font-weight: normal;
-
 
46
  src: url(fonts/ZurichXCn.pfr);
18
    @import url("/styles/lcars-ani.css");
47
}
19
<?php
48
-
 
49
/* Basic display */
-
 
50
-
 
51
* {
20
  }
52
  font-family: "LCARS",
-
 
53
    Haettenschweiler, "Downloadable Haettenschweiler",
-
 
54
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
-
 
55
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
-
 
56
  font-weight: normal;
-
 
57
}
21
?>
58
22
59
body {
23
body {
60
  margin-top: 12em;
24
  margin-top: 12em;
61
  margin-left: 22em;
25
  margin-left: 22em;
62
  margin-right: 0.2em;
26
  margin-right: 0.2em;
63
  margin-bottom: 0.2em;
27
  margin-bottom: 0.2em;
64
-
 
65
  background-color: #000;
-
 
66
  color: #99f;
-
 
67
  font-size: 131%;
-
 
68
  overflow: auto;
-
 
69
}
-
 
70
-
 
71
body.empty {
-
 
72
  margin-top: 3em;
-
 
73
  margin-left: 0.2em;
-
 
74
  margin-bottom: 3em;
-
 
75
}
-
 
76
-
 
77
body.multi {
-
 
78
  /* TODO from lcars21.css, use `em' instead */
-
 
79
}
-
 
80
-
 
81
#content {
-
 
82
  /* position: relative; */
-
 
83
  margin-right: 1em;
-
 
84
}
-
 
85
-
 
86
a {
-
 
87
  text-decoration: none;
-
 
88
}
-
 
89
-
 
90
a:link:hover,
-
 
91
a:link:focus
-
 
92
{
-
 
93
  background-color:#000;
-
 
94
  color: #f90;
-
 
95
}
-
 
96
-
 
97
a:link:active {
-
 
98
  background-color:#000;
-
 
99
  color: #fff;
-
 
100
}
-
 
101
-
 
102
a:link {
-
 
103
  background-color:#000;
-
 
104
  color:#fc9;
-
 
105
}
-
 
106
-
 
107
a:visited:hover,
-
 
108
a:visited:focus
-
 
109
{
-
 
110
  background-color:#000;
-
 
111
  color:#f90;
-
 
112
}
-
 
113
-
 
114
a:visited:active {
-
 
115
  background-color:black;
-
 
116
  color:#fff;
-
 
117
}
-
 
118
-
 
119
a:hover,
-
 
120
a:focus,
-
 
121
a:active
-
 
122
{
-
 
123
  text-decoration: underline;
-
 
124
}
-
 
125
-
 
126
a:visited {
-
 
127
  background-color:black;
-
 
128
  color:#c9c;
-
 
129
}
-
 
130
-
 
131
h2 {
-
 
132
  background-color: #000;
-
 
133
  color: #fff;
-
 
134
  font-size: 136%;
-
 
135
}
-
 
136
-
 
137
p {
-
 
138
  margin-top: 1em;
-
 
139
  margin-bottom: 0;
-
 
140
  line-height: 1.5;
-
 
141
  text-align: justify;
-
 
142
}
-
 
143
-
 
144
li p {
-
 
145
  line-height: normal;
-
 
146
}
-
 
147
-
 
148
p:first-child {
-
 
149
  margin-top: 0;
-
 
150
}
-
 
151
-
 
152
.instruction {
-
 
153
  background-color: #000;
-
 
154
  color: #f90;
-
 
155
  font-size: 136%;
-
 
156
}
-
 
157
-
 
158
/* Language support */
-
 
159
-
 
160
[lang^="x-vulcan-latin"] {
-
 
161
  font-family: "URW Chancery L", "Matura MT Script Capitals",
-
 
162
    Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,
-
 
163
    Geneva, Arial, Helvetica, sans-serif;
-
 
164
}
28
}
165
29
166
/* Bow (main) and elbo (multi-view) */
30
/* Bow (main) and elbo (multi-view) */
167
31
168
#LCARS {
32
#LCARS {
169
  position: fixed;
33
  position: fixed;
170
  left: 0;
34
  left: 0;
171
  top: 0;
35
  top: 0;
172
  right: 0;
36
  right: 0;
173
  padding: 0.2em;
37
  padding: 0.2em;
174
  background-color: #000;
38
  background-color: #000;
175
  z-index: 1701;
39
  z-index: 1701;
176
}
40
}
177
41
178
#bow {
42
#bow {
179
  position: absolute;
43
  position: absolute;
180
  left: 0.2em;
44
  left: 0.2em;
181
  top: 0.2em;
45
  top: 0.2em;
182
  right: 0.2em;
46
  right: 0.2em;
183
  height: 2.4em;
47
  height: 2.4em;
184
  padding-bottom: 0.2em;
48
  padding-bottom: 0.2em;
185
  background-color: #000;
49
  background-color: #000;
186
}
50
}
187
51
188
#bow-top {
52
#bow-top {
189
  /* NOTE: position: absolute is needed for animation */
53
  /* NOTE: position: absolute is needed for animation */
190
  position: absolute;
54
  position: absolute;
191
  top: 0;
55
  top: 0;
192
  left: 0;
56
  left: 0;
193
  right: 0;
57
  right: 0;
194
  min-width: 15.4em;
58
  min-width: 15.4em;
195
  height: 2em;
59
  height: 2em;
196
  background-color: #999;
60
  background-color: #999;
197
  border-top-left-radius: 2.4em;
61
  border-top-left-radius: 2.4em;
198
  border-top-right-radius: 1.2em;
62
  border-top-right-radius: 1.2em;
199
  border-bottom-right-radius: 1.2em;
63
  border-bottom-right-radius: 1.2em;
200
  line-height: 0.9;
64
  line-height: 0.9;
201
}
65
}
202
66
203
.empty #bow-top {
67
.empty #bow-top {
204
  border-top-left-radius: 1.2em;
68
  border-top-left-radius: 1.2em;
205
  border-bottom-left-radius: 1.2em;
69
  border-bottom-left-radius: 1.2em;
206
  min-width: 10em;
70
  min-width: 10em;
207
}
71
}
208
72
209
73
210
#bow-top .text {
74
#bow-top .text {
211
  position: absolute;
75
  position: absolute;
212
  margin: 0;
76
  margin: 0;
213
  left: 4.33em;
77
  left: 4.33em;
214
  top: 0;
78
  top: 0;
215
  right: 0.75em;
79
  right: 0.75em;
216
  height: 1em;
80
  height: 1em;
217
  text-align: right;
81
  text-align: right;
218
  color: #fc0;
82
  color: #fc0;
219
  font-size: 2.4em;
83
  font-size: 2.4em;
220
  padding-right: 0.1em;
84
  padding-right: 0.1em;
221
  overflow: hidden;
85
  overflow: hidden;
222
  text-overflow: ellipsis;
86
  text-overflow: ellipsis;
223
}
87
}
224
88
225
.empty #bow-top .text {
89
.empty #bow-top .text {
226
  left: 0.93em;
90
  left: 0.93em;
227
}
91
}
228
92
229
93
230
94
231
#bow-top .text span {
95
#bow-top .text span {
232
  padding-right: 0.1em;
96
  padding-right: 0.1em;
233
  background-color: #000;
97
  background-color: #000;
234
  padding-left: 0.1em;
98
  padding-left: 0.1em;
235
  text-transform: uppercase;
99
  text-transform: uppercase;
236
  white-space: nowrap;
100
  white-space: nowrap;
237
}
101
}
238
102
239
.empty #footer-container {
103
.empty #footer-container {
240
  position: fixed;
104
  position: fixed;
241
  left: 0.2em;
105
  left: 0.2em;
242
  bottom: 0;
106
  bottom: 0;
243
  right: 0.2em;
107
  right: 0.2em;
244
  min-height: 2.4em;
108
  min-height: 2.4em;
245
  padding-top: 0.2em;
109
  padding-top: 0.2em;
246
  padding-bottom: 0.2em;
110
  padding-bottom: 0.2em;
247
  background-color: #000;
111
  background-color: #000;
248
}
112
}
249
113
250
114
251
.empty #footer {
115
.empty #footer {
252
  position: absolute;
116
  position: absolute;
253
  bottom: 0;
117
  bottom: 0;
254
  left: 0;
118
  left: 0;
255
  right: 0;
119
  right: 0;
256
  height: 2em;
120
  height: 2em;
257
  min-width: 10em;
121
  min-width: 10em;
258
  margin-bottom: 0.2em;
122
  margin-bottom: 0.2em;
259
  background-color: #999;
123
  background-color: #999;
260
  border-radius: 1.2em;
124
  border-radius: 1.2em;
261
  line-height: 0.9;
125
  line-height: 0.9;
262
}
126
}
263
127
264
.empty #footer .text {
128
.empty #footer .text {
265
  position: absolute;
129
  position: absolute;
266
  margin: 0;
130
  margin: 0;
267
  left: 0.93em;
131
  left: 0.93em;
268
  top: 0;
132
  top: 0;
269
  right: 0.75em;
133
  right: 0.75em;
270
  height: 1em;
134
  height: 1em;
271
  background-color: transparent;
135
  background-color: transparent;
272
  color: #fc0;
136
  color: #fc0;
273
  font-size: 2.4em;
137
  font-size: 2.4em;
274
  padding-right: 0.1em;
138
  padding-right: 0.1em;
275
  overflow: hidden;
139
  overflow: hidden;
276
  text-overflow: ellipsis;
140
  text-overflow: ellipsis;
277
}
141
}
278
142
279
.empty #footer .text span {
143
.empty #footer .text span {
280
  padding-right: 0.1em;
144
  padding-right: 0.1em;
281
  background-color: #000;
145
  background-color: #000;
282
  padding-left: 0.1em;
146
  padding-left: 0.1em;
283
  text-transform: uppercase;
147
  text-transform: uppercase;
284
  white-space: nowrap;
148
  white-space: nowrap;
285
}
149
}
286
150
287
.empty .separator-left {
151
.empty .separator-left {
288
  position: absolute;
152
  position: absolute;
289
  left: 2em;
153
  left: 2em;
290
  height: 2em;
154
  height: 2em;
291
  width: 0.25em;
155
  width: 0.25em;
292
  background-color: #000;
156
  background-color: #000;
293
}
157
}
294
158
295
.empty .separator-right {
159
.empty .separator-right {
296
  position: absolute;
160
  position: absolute;
297
  right: 2em;
161
  right: 2em;
298
  height: 2em;
162
  height: 2em;
299
  width: 0.25em;
163
  width: 0.25em;
300
  background-color: #000;
164
  background-color: #000;
301
}
165
}
302
166
-
 
167
.bow {
-
 
168
  background-color: #999;
-
 
169
}
-
 
170
303
#bow-top-left {
171
#bow-top-left {
304
  position: absolute;
172
  position: absolute;
305
  top: 2em;
173
  top: 2em;
306
  left: 0;
174
  left: 0;
307
  right: 0;
175
  right: 0;
308
  height: 3.2em;
176
  height: 3.2em;
309
  width: 9.2em;
177
  width: 9.2em;
310
  background-color: #999;
178
  background-color: #999;
311
}
179
}
312
180
313
.empty #bow-top-left {
181
.empty #bow-top-left {
314
  display: none;
182
  display: none;
315
}
183
}
316
184
317
#bow-top-left .concave {
185
#bow-top-left .concave {
318
  position: absolute;
186
  position: absolute;
319
  top: 0;
187
  top: 0;
320
  left: 8em;
188
  left: 8em;
321
  height: 3.2em;
189
  height: 3.2em;
322
  width: 1.2em;
190
  width: 1.2em;
323
  background-color: #000;
191
  background-color: #000;
324
  border-top-left-radius: 1.2em;
192
  border-top-left-radius: 1.2em;
325
}
193
}
326
194
327
.empty #bow-top-left-concave {
195
.empty #bow-top-left-concave {
328
  display: none;
196
  display: none;
329
}
197
}
330
198
331
.menu-container {
199
.menu-container {
332
  position: fixed;
200
  position: fixed;
333
  left: 0.2em;
201
  left: 0.2em;
334
  top: 5.6em;
202
  top: 5.6em;
335
  width: 8em;
203
  width: 8em;
336
  bottom: 2.8em;
204
  bottom: 2.8em;
337
  background-color: #999;
205
  background-color: #999;
338
  overflow: auto;
206
  overflow: auto;
339
}
207
}
340
208
341
.menu
209
.menu
342
{
210
{
343
  height: 17.6em;
211
  height: 20.1em;
344
  background-color: #000;
212
  background-color: #000;
345
}
213
}
346
214
347
.menu ul {
215
.menu ul {
348
  margin: 0 0.2em 0.2em 0;
216
  margin: 0 0.2em 0.2em 0;
349
  padding: 0;
217
  padding: 0;
350
}
218
}
351
219
352
.menu li {
220
.menu li {
353
  margin: 0;
221
  margin: 0;
354
}
222
}
355
223
356
#bow #bottom
224
#bow #bottom
357
{
225
{
358
  position: fixed;
226
  position: fixed;
359
  left: 0;
227
  left: 0;
360
  bottom: 0;
228
  bottom: 0;
361
  width: 20.8em;
229
  width: 20.8em;
362
  height: 2.4em;
230
  height: 2.4em;
363
  background-color: #000;
231
  background-color: #000;
364
  z-index: 1701;
232
  z-index: 1701;
365
}
233
}
366
234
367
#bow-bottom {
235
#bow-bottom {
368
  position: absolute;
236
  position: absolute;
369
  bottom: 0.2em;
237
  bottom: 0.2em;
370
  left: 0.2em;
238
  left: 0.2em;
371
  width: 20.6em;
239
  width: 20.6em;
372
  height: 2.4em;
240
  height: 2.4em;
373
  border-bottom-left-radius: 2.4em;
241
  border-bottom-left-radius: 2.4em;
374
  border-bottom-right-radius: 2em;
242
  border-bottom-right-radius: 2em;
375
  background-color: #999;
243
  background-color: #999;
376
}
244
}
377
245
378
.empty #bow-bottom {
246
.empty #bow-bottom {
379
  display: none;
247
  display: none;
380
}
248
}
381
249
382
#bow-bottom .concave {
250
#bow-bottom .concave {
383
  position: absolute;
251
  position: absolute;
384
  margin-left: 0.2em;
252
  margin-left: 0.2em;
385
  margin-bottom: 0.2em;
253
  margin-bottom: 0.2em;
386
  bottom: 0.3em;
254
  bottom: 0.3em;
387
  left: 7.8em;
255
  left: 7.8em;
388
  height: 2.1em;
256
  height: 2.1em;
389
  width: 7.6em;
257
  width: 7.6em;
390
  border-bottom-left-radius: 1.2em;
258
  border-bottom-left-radius: 1.2em;
391
  border-bottom-right-radius: 1em;
259
  border-bottom-right-radius: 1em;
392
  background-color: #000;
260
  background-color: #000;
393
}
261
}
394
262
395
#bow-bottom .spacer {
263
#bow-bottom .spacer {
396
  position: absolute;
264
  position: absolute;
397
  left: 10.2em;
265
  left: 10.2em;
398
  bottom: 0em;
266
  bottom: 0em;
399
  width: 0.2em;
267
  width: 0.2em;
400
  height: 0.5em;
268
  height: 0.5em;
401
  background-color: black;
269
  background-color: black;
402
}
270
}
403
271
404
.empty #bow-bottom-left-concave {
272
.empty #bow-bottom-left-concave {
405
  display: none;
273
  display: none;
406
}
274
}
407
275
408
/* Controls */
276
/* Controls */
409
277
410
.button:visited:hover,
278
.button:visited:hover,
411
.button:visited,
279
.button:visited,
412
.button:hover,
280
.button:hover,
413
.button
281
.button
414
{
282
{
415
  position: relative;
283
  position: relative;
416
  display: inline-block;
284
  display: inline-block;
417
  margin-right: 0.2em;
285
  margin-right: 0.2em;
418
  margin-bottom: 0.2em;
286
  margin-bottom: 0.2em;
419
  width: 5em;
287
  width: 5em;
420
  height: 2em;
288
  height: 2em;
421
  background-color: #7d7d7d; /* c9c */
289
  background-color: #7d7d7d; /* c9c */
422
  color: #000 !important;
290
  color: #000 !important;
423
  text-decoration: none !important;
291
  text-decoration: none !important;
424
  text-transform: uppercase;
292
  text-transform: uppercase;
425
  overflow: hidden;
293
  overflow: hidden;
426
  cursor: pointer;
294
  cursor: pointer;
427
}
295
}
428
296
429
.button .text {
297
.button .text {
430
  position: absolute;
298
  position: absolute;
431
  bottom: 0;
299
  bottom: 0;
432
  right: 0.5em;
300
  right: 0.5em;
433
}
301
}
434
302
435
.button.command {
303
.button.command {
436
  border-radius: 1.2em;
304
  border-radius: 1.2em;
437
}
305
}
438
306
439
.button.command .text {
307
.button.command .text {
440
  position: absolute;
308
  position: absolute;
441
  bottom: 0;
309
  bottom: 0;
442
  right: 1em;
310
  right: 1em;
443
}
311
}
444
312
445
.button:hover,
313
.button:hover,
446
.button:focus,
314
.button:focus,
447
.button.selected:hover,
315
.button.selected:hover,
448
.button.selected:focus,
316
.button.selected:focus,
449
.group .button:hover,
317
.group .button:hover,
450
.group .button:focus,
318
.group .button:focus,
451
.group .button:visited:hover,
319
.group .button:visited:hover,
452
.group .button:visited:focus
320
.group .button:visited:focus
453
{
321
{
454
  background-color: #f90 !important;
322
  background-color: #f90 !important;
455
  color: #000 !important;
323
  color: #000 !important;
456
}
324
}
457
325
458
.button:active,
326
.button:active,
459
.button.selected:active,
327
.button.selected:active,
460
.group .button:active,
328
.group .button:active,
461
.group .button:visited:active
329
.group .button:visited:active
462
{
330
{
463
  background-color: #fff !important;
331
  background-color: #fff !important;
464
  color: #000 !important;
332
  color: #000 !important;
465
}
333
}
466
334
467
.menu .button {
335
.menu .button {
468
  display: block;
336
  display: block;
469
  width: 8em;
337
  width: 8em;
470
  height: 1em;
338
  height: 1em;
471
  line-height: 1;
339
  line-height: 1;
472
  background-color: #9cf;
340
  background-color: #9cf;
473
  color: #000 !important;
341
  color: #000 !important;
474
  text-overflow: ellipsis;
342
  text-overflow: ellipsis;
475
  white-space: nowrap;
343
  white-space: nowrap;
476
}
344
}
-
 
345
-
 
346
#connectors {
-
 
347
  position: fixed;
-
 
348
  left: 8.4em;
-
 
349
  top: 5.6em;
-
 
350
}
477
351
478
.multi-display
352
.multi-display
479
{
353
{
480
  position: fixed;
354
  position: fixed;
481
  top: 2.8em;
355
  top: 2.8em;
482
  left: 15.8em;
356
  left: 15.8em;
483
  right: 0em;
357
  right: 0em;
484
}
358
}
485
359
486
.multi-display .button
360
.multi-display .button
487
{
361
{
488
  width: 5em !important;
362
  width: 5em !important;
489
}
363
}
490
364
491
.multi-display .upper
365
.multi-display .upper
492
{
366
{
493
  position: absolute;
367
  position: absolute;
494
  top: 0;
368
  top: 0;
495
  left: 0;
369
  left: 0;
496
  right: 0;  
370
  right: 0;  
497
  height: 7.2em;  
371
  height: 7.2em;  
498
  padding-bottom: 0.2em;
372
  padding-bottom: 0.2em;
499
  padding-right: 0.2em;
373
  padding-right: 0.2em;
500
  background-color: black;
374
  background-color: black;
501
}
375
}
502
376
503
.multi-display .upper .button
377
.multi-display .upper .button
504
{
378
{
505
  height: 3.8em;
379
  height: 3.8em;
506
  background-color: #c9c !important;
380
  background-color: #c9c !important;
507
}
381
}
508
382
509
.multi-display .upper .elbo
383
.multi-display .upper .elbo
510
{
384
{
511
  position: absolute;
385
  position: absolute;
512
  left: 0;
386
  left: 0;
513
  top: 4em;
387
  top: 4em;
514
  width: 6em;
388
  width: 6em;
515
  height: 3.2em;
389
  height: 3.2em;
516
  border-bottom-left-radius: 2em;
390
  border-bottom-left-radius: 2em;
517
  background-color: #9cf;
391
  background-color: #9cf;
518
}
392
}
519
393
520
.multi-display .upper .elbo .concave
394
.multi-display .upper .elbo .concave
521
{
395
{
522
  position: absolute;
396
  position: absolute;
523
  left: 5em;
397
  left: 5em;
524
  top: 0;
398
  top: 0;
525
  width: 1em;
399
  width: 1em;
526
  height: 2.2em;
400
  height: 2.2em;
527
  border-bottom-left-radius: 1em;
401
  border-bottom-left-radius: 1em;
528
  background-color: black;
402
  background-color: black;
529
}
403
}
530
404
531
.multi-display .upper .border
405
.multi-display .upper .border
532
{
406
{
533
  position: fixed;
407
  position: fixed;
534
  top: 9em;
408
  top: 9em;
535
  left: 21.8em;
409
  left: 21.8em;
536
  right: 0.2em;
410
  right: 0.2em;
537
  height: 1em;
411
  height: 1em;
538
  background-color: #9cf;
412
  background-color: #9cf;
539
}
413
}
540
 
414
 
541
.multi-display .lower
415
.multi-display .lower
542
{
416
{
543
  position: absolute;
417
  position: absolute;
544
  top: 7.3em;
418
  top: 7.3em;
545
  left: 0;
419
  left: 0;
546
  padding-top: 0.1em;
420
  padding-top: 0.1em;
547
  background-color: black;
421
  background-color: black;
548
}
422
}
549
423
550
.multi-display .lower .elbo
424
.multi-display .lower .elbo
551
{
425
{
552
  position: relative;
426
  position: relative;
553
  width: 6em;
427
  width: 6em;
554
  height: 3em;
428
  height: 3em;
555
  border-top-left-radius: 2em;
429
  border-top-left-radius: 2em;
556
  background-color: #fc6;
430
  background-color: #fc6;
557
}
431
}
558
432
559
.multi-display .lower .elbo .concave
433
.multi-display .lower .elbo .concave
560
{
434
{
561
  position: absolute;
435
  position: absolute;
562
  left: 5em;
436
  left: 5em;
563
  top: 1em;
437
  top: 1em;
564
  width: 1em;
438
  width: 1em;
565
  height: 2em;
439
  height: 2em;
566
  background-color: black;
440
  background-color: black;
567
  border-top-left-radius: 1em;
441
  border-top-left-radius: 1em;
568
}
442
}
569
443
570
.multi-display .lower .bg
444
.multi-display .lower .bg
571
{
445
{
572
  position: fixed;
446
  position: fixed;
573
  top: 13.4em;
447
  top: 13.4em;
574
  bottom: 2.8em;
448
  bottom: 2.8em;
575
  width: 5em;
449
  width: 5em;
576
  background-color: #fc6;
450
  background-color: #fc6;
577
}
451
}
578
452
579
.multi-display .lower .border-container
453
.multi-display .lower .border-container
580
{
454
{
581
  position: fixed;
455
  position: fixed;
582
  top: 10.2em;
456
  top: 10.2em;
583
  left: 21.8em;
457
  left: 21.8em;
584
  right: 0em;
458
  right: 0em;
585
  height: 1.2em;
459
  height: 1.2em;
586
  background-color: black;
460
  background-color: black;
587
}
461
}
588
462
589
.multi-display .lower .border
463
.multi-display .lower .border
590
{
464
{
591
  position: absolute;
465
  position: absolute;
592
  top: 0;
466
  top: 0;
593
  left: 0;
467
  left: 0;
594
  right: 0.2em;
468
  right: 0.2em;
595
  height: 1em;
469
  height: 1em;
596
  background-color: #fc6;
470
  background-color: #fc6;
597
}
471
}
598
472
599
.menu .button.secondary,
473
.menu .button.secondary,
600
.multi-display .lower .elbo.secondary,
474
.multi-display .lower .elbo.secondary,
601
.multi-display .lower .bg.secondary,
475
.multi-display .lower .bg.secondary,
602
.multi-display .lower .border.secondary
476
.multi-display .lower .border.secondary
603
{
477
{
604
  background-color: #f96;
478
  background-color: #f96;
605
}
479
}
606
480
607
.menu .button.ancillary,
481
.menu .button.ancillary,
608
.multi-display .lower .elbo.ancillary,
482
.multi-display .lower .elbo.ancillary,
609
.multi-display .lower .bg.ancillary,
483
.multi-display .lower .bg.ancillary,
610
.multi-display .lower .border.ancillary
484
.multi-display .lower .border.ancillary
611
{
485
{
612
  background-color: #c9c;
486
  background-color: #c9c;
613
}
487
}
614
488
615
.menu .button.database,
489
.menu .button.database,
616
.multi-display .lower .elbo.database,
490
.multi-display .lower .elbo.database,
617
.multi-display .lower .bg.database,
491
.multi-display .lower .bg.database,
618
.multi-display .lower .border.database
492
.multi-display .lower .border.database
619
{
493
{
620
  background-color: #c66;
494
  background-color: #c66;
621
}
495
}
622
496
623
.menu .button .text {
497
.menu .button .text {
624
  position: static;
498
  position: static;
625
  margin: 0 0.25em;
499
  margin: 0 0.25em;
626
}
500
}
627
501
628
.button.selected {
502
.button.selected {
629
  background-color: #fc6 !important;
503
  background-color: #fc6 !important;
630
  color: #000 !important;  
504
  color: #000 !important;  
631
}
505
}
632
506
633
.group {
507
.group {
634
  margin: 0 auto;
508
  margin: 0 auto;
635
  position: relative;
509
  position: relative;
636
  width: 7.7em;
510
  width: 7.7em;
637
}
511
}
638
512
639
.group .separator {
513
.group .separator {
640
  float: left;
514
  float: left;
641
  position: absolute;
515
  position: absolute;
642
  top: 0;
516
  top: 0;
643
  left: 0;
517
  left: 0;
644
  width: 1.5em;
518
  width: 1.5em;
645
  height: 100%;
519
  height: 100%;
646
  background-color: #c66;
520
  background-color: #c66;
647
  color: #000;
521
  color: #000;
648
}
522
}
649
523
650
.group .separator:after {
524
.group .separator:after {
651
  position: absolute;
525
  position: absolute;
652
  width: 0.8em;
526
  width: 0.8em;
653
  height: 0.5em;
527
  height: 0.5em;
654
  bottom: 0.25em;
528
  bottom: 0.25em;
655
  left: 0.25em;
529
  left: 0.25em;
656
  background-color: #000;
530
  background-color: #000;
657
  content: "\a0";
531
  content: "\a0";
658
}
532
}
659
533
660
.group ul {
534
.group ul {
661
  margin-left: 1.7em;
535
  margin-left: 1.7em;
662
}
536
}
663
537
664
.group li {
538
.group li {
665
  margin-bottom: 0;
539
  margin-bottom: 0;
666
}
540
}
667
541
668
.group .button:visited,
542
.group .button:visited,
669
.group .button
543
.group .button
670
{
544
{
671
  display: block;
545
  display: block;
672
  position: relative;
546
  position: relative;
673
  width: 6em;
547
  width: 6em;
674
  background-color: #99f !important;
548
  background-color: #99f !important;
675
}
549
}
676
550
677
.group li:last-child .button
551
.group li:last-child .button
678
{
552
{
679
  margin-bottom: 0;
553
  margin-bottom: 0;
680
}
554
}
681
555
682
.button.right {
556
.button.right {
683
  border-top-right-radius: 1em;
557
  border-top-right-radius: 1em;
684
  border-bottom-right-radius: 1em;
558
  border-bottom-right-radius: 1em;
685
}
559
}
686
560
687
.button.right .text {
561
.button.right .text {
688
  right: 1em;
562
  right: 1em;
689
}
563
}
690
564
691
.button.left {
565
.button.left {
692
  border-top-left-radius: 1em;
566
  border-top-left-radius: 1em;
693
  border-bottom-left-radius: 1em;
567
  border-bottom-left-radius: 1em;
694
}
568
}
695
569
696
.group .button .key {
570
.group .button .key {
697
  display: inline-block;
571
  display: inline-block;
698
  position: absolute;
572
  position: absolute;
699
  left: 0.2em;
573
  left: 0.2em;
700
  top: 0;
574
  top: 0;
701
  bottom: 0;
575
  bottom: 0;
702
  padding: 0 0.1em;
576
  padding: 0 0.1em;
703
  background-color: #000;
577
  background-color: #000;
704
  color: #f90;
578
  color: #f90;
705
  font-size: 2.4em;
579
  font-size: 2.4em;
706
  text-transform: uppercase;
580
  text-transform: uppercase;
707
  line-height: 0.9;
581
  line-height: 0.9;
708
}
582
}