Subversion Repositories LCARS

Rev

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

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