Subversion Repositories LCARS

Rev

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

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