Subversion Repositories LCARS

Rev

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

Rev 92 Rev 94
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: 0;
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 !important;
293
  cursor: pointer !important;
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
  cursor: pointer !important;
300
  cursor: pointer !important;
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: 0;
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.4em;  
371
  height: 7.5em;  
372
  padding-bottom: 0.2em;
-
 
373
  padding-right: 0.2em;
372
  padding-right: 0.2em;
374
  background-color: black;
373
  background-color: black;
375
}
374
}
376
375
377
.multi-display .upper .content
376
.multi-display .upper .content
378
{
377
{
379
  position: absolute;
378
  position: absolute;
380
  top: 0;
379
  top: 0;
381
  left: 6em;
380
  left: 6em;
382
  bottom: 1.4em;
381
  bottom: 1.3em;
383
  right: 0.2em;
382
  right: 0.2em;
384
  background-color: black;
383
  background-color: black;
385
  color: white;
384
  color: white;
386
  text-align: right;
385
  text-align: right;
387
  overflow: hidden;
386
  overflow: hidden;
388
  text-overflow: ellipsis;
387
  text-overflow: ellipsis;
389
}
388
}
390
389
391
.multi-display .upper .content .title
390
.multi-display .upper .content .title
392
{
391
{
393
  position: absolute;
392
  position: absolute;
394
  top: 0;
393
  top: 0;
395
  left: 0em;
394
  left: 0;
396
  height: 1em;
395
  height: 1em;
397
  right: 0em;
396
  right: 0;
398
  background-color: black;
397
  background-color: black;
399
  color: white;
398
  color: white;
400
  font-size: 2.4em;
399
  font-size: 2.4em;
401
  text-transform: uppercase;
400
  text-transform: uppercase;
402
  text-align: right;
401
  text-align: right;
403
  overflow: hidden;
402
  overflow: hidden;
404
  text-overflow: ellipsis;
403
  text-overflow: ellipsis;
405
}
404
}
406
405
407
.multi-display .upper .content .title span
406
.multi-display .upper .content .title span
408
{
407
{
409
  white-space: nowrap;
408
  white-space: nowrap;
410
}
409
}
411
410
412
.multi-display .upper .content .analysis {
411
.multi-display .upper .content .analysis {
413
  position: absolute;
412
  position: absolute;
414
  top: 2.4em;
413
  top: 2.4em;
415
  bottom: 0;
414
  bottom: 0;
416
  right: 11em;
415
  right: 11em;
417
  left: 0;
416
  left: 0;
418
  overflow: hidden;
417
  overflow: hidden;
419
  text-overflow: ellipsis;
418
  text-overflow: ellipsis;
420
  text-align: left;
419
  text-align: left;
421
}
420
}
422
421
423
.multi-display .upper .content .commands
422
.multi-display .upper .content .commands
424
{
423
{
425
  position: absolute;
424
  position: absolute;
426
  margin: 0;
425
  margin: 0;
427
  padding: 0;
426
  padding: 0;
428
  top: 2.4em;
427
  top: 2.4em;
429
  right: 0em;
428
  right: 0;
430
  height: 3.8em;
429
  height: 3.8em;
431
  width: 10.2em;
430
  width: 10.2em;
432
  list-style: none;
431
  list-style: none;
433
}
432
}
434
433
435
.multi-display .upper .content .commands li
434
.multi-display .upper .content .commands li
436
{
435
{
437
  position: absolute;
436
  position: absolute;
438
  margin: 0;
437
  margin: 0;
439
  width: 5em;
438
  width: 5em;
440
  height: 1.8em;
439
  height: 1.8em;
441
}
440
}
442
441
443
.multi-display .upper .content .commands .button
442
.multi-display .upper .content .commands .button
444
{
443
{
445
  position: absolute;
444
  position: absolute;
446
  top: 0;
445
  top: 0;
447
  left: 0;
446
  left: 0;
448
  margin: 0;
447
  margin: 0;
449
  height: 1.8em;
448
  height: 1.8em;
450
  border-radius: 0.9em;
449
  border-radius: 0.9em;
451
  text-transform: none;
450
  text-transform: none;
452
}
451
}
453
452
454
.multi-display .upper .content .commands .button .text {
453
.multi-display .upper .content .commands .button .text {
455
  right: 0.75em;
454
  right: 0.75em;
456
}
455
}
457
456
458
.multi-display .upper .content #cmd1
457
.multi-display .upper .content #cmd1
459
{
458
{
460
  top: 0;
459
  top: 0;
461
  right: 5.2em;
460
  right: 5.2em;
462
}
461
}
463
462
464
.multi-display .upper .content #cmd2
463
.multi-display .upper .content #cmd2
465
{
464
{
466
  top: 0;
465
  top: 0;
467
  right: 0;
466
  right: 0;
468
}
467
}
469
468
470
.multi-display .upper .content #cmd3
469
.multi-display .upper .content #cmd3
471
{
470
{
472
  top: 2em;
471
  top: 2em;
473
  right: 0;
472
  right: 0;
474
}
473
}
475
474
476
.multi-display .upper .content #cmd4
475
.multi-display .upper .content #cmd4
477
{
476
{
478
  top: 2em;
477
  top: 2em;
479
  right: 5.2em;
478
  right: 5.2em;
480
}
479
}
481
480
482
.multi-display .upper .elbo-button
481
.multi-display .upper .elbo-button
483
{
482
{
484
  position: absolute;
483
  position: absolute;
485
  top: 0;
484
  top: 0;
486
  left: 0;
485
  left: 0;
487
  width: 5em;
486
  width: 5em;
488
  height: 4em;
487
  height: 4em;
489
  background-color: #c9c !important;
488
  background-color: #c9c !important;
490
  color: #000 !important;
489
  color: #000 !important;
491
  cursor: default;
490
  cursor: default;
492
}
491
}
493
492
494
.multi-display .upper .elbo-button .text
493
.multi-display .upper .elbo-button .text
495
{
494
{
496
  position: absolute;
495
  position: absolute;
497
  bottom: 0;
496
  bottom: 0;
498
  right: 0.2em;
497
  right: 0.2em;
499
  max-width: 4.6em;
498
  max-width: 4.6em;
500
  max-height: 3.6em;
499
  max-height: 3.6em;
501
  text-align: right;
500
  text-align: right;
502
  overflow: hidden;
501
  overflow: hidden;
503
}
502
}
504
503
505
.multi-display .upper .elbo
504
.multi-display .upper .elbo
506
{
505
{
507
  position: absolute;
506
  position: absolute;
508
  left: 0;
507
  left: 0;
509
  top: 4.2em;
508
  top: 4.2em;
510
  width: 6em;
509
  width: 6em;
511
  height: 3.2em;
510
  height: 3.2em;
512
  border-bottom-left-radius: 2em;
511
  border-bottom-left-radius: 2em;
513
  background-color: #9cf;
512
  background-color: #9cf;
514
  color: #000;
513
  color: #000;
515
}
514
}
516
515
517
.multi-display .upper .elbo .text
516
.multi-display .upper .elbo .text
518
{
517
{
519
  position: absolute;
518
  position: absolute;
520
  top: 0;
519
  top: 0;
521
  right: 1.2em;
520
  right: 1.2em;
522
  max-width: 3.5em;
521
  max-width: 3.5em;
523
  max-height: 2.2em;
522
  max-height: 2.2em;
524
  text-align: right;
523
  text-align: right;
525
  overflow: hidden;
524
  overflow: hidden;
526
  cursor: default;
525
  cursor: default;
527
}
526
}
528
527
529
.multi-display .upper .elbo .concave
528
.multi-display .upper .elbo .concave
530
{
529
{
531
  position: absolute;
530
  position: absolute;
532
  left: 5em;
531
  left: 5em;
533
  top: 0;
532
  top: 0;
534
  width: 1em;
533
  width: 1em;
535
  height: 2.2em;
534
  height: 2.2em;
536
  border-bottom-left-radius: 1em;
535
  border-bottom-left-radius: 1em;
537
  background-color: black;
536
  background-color: black;
538
}
537
}
539
538
540
.multi-display .border
539
.multi-display .border
541
{
540
{
542
  overflow: hidden;
-
 
543
  height: 1em;
541
  height: 1em;
544
}
542
}
545
543
546
.multi-display .upper .border
544
.multi-display .upper .border
547
{
545
{
548
  position: fixed;
546
  position: absolute;
549
  top: 9em;
547
  top: 6.4em;
550
  left: 21.8em;
548
  left: 6em;
551
  right: 0.2em;
549
  right: 0.2em;
552
}
550
}
553
551
554
.multi-display .border div
552
.multi-display .border div
555
{
553
{
556
  position: absolute;
554
  position: absolute;
557
  top: 0;
555
  top: 0;
558
  height: 1em;
556
  height: 1em;
559
}
557
}
560
558
561
.multi-display .upper .border div
559
.multi-display .upper .border div
562
{
560
{
563
  background-color: #9cf;
561
  background-color: #9cf;
564
}
562
}
565
563
566
.multi-display .upper .border .left
564
.multi-display .upper .border .left
567
{
565
{
568
  left: 0;
566
  left: 0;
569
  right: 5.2em;
567
  right: 5.2em;
570
  height: 1em;
568
  height: 1em;
571
}
569
}
572
 
570
 
573
.multi-display .upper .border .right
571
.multi-display .upper .border .right
574
{
572
{
575
  width: 5em;
573
  width: 5em;
576
  right: 0;
574
  right: 0;
577
}
575
}
578
 
576
 
579
.multi-display .lower
577
.multi-display .lower
580
{
578
{
581
  position: absolute;
579
  position: absolute;
582
  top: 7.5em;
580
  top: 7.5em;
583
  left: 0;
581
  left: 0;
584
  padding-top: 0.1em;
582
  height: 0.1em;
-
 
583
  right: 0;
585
  background-color: black;
584
  background-color: black;
586
}
585
}
587
586
588
.multi-display .lower .elbo
587
.multi-display .lower .elbo
589
{
588
{
590
  position: relative;
589
  position: absolute;
-
 
590
  top: 0.1em;
-
 
591
  left: 0;
591
  width: 6em;
592
  width: 6em;
592
  height: 3em;
593
  height: 3em;
593
  border-top-left-radius: 2em;
594
  border-top-left-radius: 2em;
594
  background-color: #fc6;
595
  background-color: #fc6;
595
}
596
}
596
597
597
.multi-display .lower .elbo .concave
598
.multi-display .lower .elbo .concave
598
{
599
{
599
  position: absolute;
600
  position: absolute;
600
  left: 5em;
601
  left: 5em;
601
  top: 1em;
602
  top: 1em;
602
  width: 1em;
603
  width: 1em;
603
  height: 2em;
604
  height: 2em;
604
  background-color: black;
605
  background-color: black;
605
  border-top-left-radius: 1em;
606
  border-top-left-radius: 1em;
606
}
607
}
607
608
608
.multi-display .lower .bg
609
.multi-display .lower .bg
609
{
610
{
610
  position: fixed;
611
  position: fixed;
611
  top: 13.4em;
612
  top: 13.4em;
612
  bottom: 2.8em;
613
  bottom: 2.8em;
613
  width: 5em;
614
  width: 5em;
614
  background-color: #fc6;
615
  background-color: #fc6;
615
}
616
}
616
617
617
.multi-display .lower .border-container
618
.multi-display .lower .border-container
618
{
619
{
619
  position: fixed;
620
  position: absolute;
620
  top: 10.2em;
621
  top: 0.1em;
621
  left: 21.8em;
622
  left: 6em;
622
  right: 0em;
623
  right: 0;
623
  height: 1.2em;
624
  height: 1.2em;
624
  background-color: black;
625
  background-color: black;
625
}
626
}
626
627
627
.multi-display .lower .border
628
.multi-display .lower .border
628
{
629
{
629
  position: absolute;
630
  position: absolute;
630
  left: 0;
631
  left: 0;
631
  right: 0.2em;
632
  right: 0.2em;
632
}
633
}
633
634
634
.multi-display .lower .border div
635
.multi-display .lower .border div
635
{
636
{
636
  background-color: #fc6;
637
  background-color: #fc6;
637
}
638
}
638
639
639
.multi-display .lower .border .left
640
.multi-display .lower .border .left
640
{
641
{
641
  left: 0;
642
  left: 0;
642
  right: 5.2em;
643
  right: 5.2em;
643
}
644
}
644
645
645
.multi-display .lower .border .right
646
.multi-display .lower .border .right
646
{
647
{
647
  width: 5em;
648
  width: 5em;
648
  right: 0;
649
  right: 0;
649
}
650
}
650
651
651
.menu .button.secondary,
652
.menu .button.secondary,
652
.multi-display .lower .elbo.secondary,
653
.multi-display .lower .elbo.secondary,
653
.multi-display .lower .bg.secondary,
654
.multi-display .lower .bg.secondary,
654
.multi-display .lower .border.secondary
655
.multi-display .lower .border.secondary
655
{
656
{
656
  background-color: #f96;
657
  background-color: #f96;
657
}
658
}
658
659
659
.menu .button.ancillary,
660
.menu .button.ancillary,
660
.multi-display .lower .elbo.ancillary,
661
.multi-display .lower .elbo.ancillary,
661
.multi-display .lower .bg.ancillary,
662
.multi-display .lower .bg.ancillary,
662
.multi-display .lower .border.ancillary
663
.multi-display .lower .border.ancillary
663
{
664
{
664
  background-color: #c9c;
665
  background-color: #c9c;
665
}
666
}
666
667
667
.menu .button.database,
668
.menu .button.database,
668
.multi-display .lower .elbo.database,
669
.multi-display .lower .elbo.database,
669
.multi-display .lower .bg.database,
670
.multi-display .lower .bg.database,
670
.multi-display .lower .border.database
671
.multi-display .lower .border.database
671
{
672
{
672
  background-color: #c66;
673
  background-color: #c66;
673
}
674
}
674
675
675
.menu .button .text {
676
.menu .button .text {
676
  position: static;
677
  position: static;
677
  margin: 0 0.25em;
678
  margin: 0 0.25em;
678
}
679
}
679
680
680
.button.selected {
681
.button.selected {
681
  background-color: #fc6 !important;
682
  background-color: #fc6 !important;
682
  color: #000 !important;  
683
  color: #000 !important;  
683
}
684
}
684
685
685
.group {
686
.group {
686
  margin: 0 auto;
687
  margin: 0 auto;
687
  position: relative;
688
  position: relative;
688
  width: 7.7em;
689
  width: 7.7em;
689
}
690
}
690
691
691
.group .separator {
692
.group .separator {
692
  float: left;
693
  float: left;
693
  position: absolute;
694
  position: absolute;
694
  top: 0;
695
  top: 0;
695
  left: 0;
696
  left: 0;
696
  width: 1.5em;
697
  width: 1.5em;
697
  height: 100%;
698
  height: 100%;
698
  background-color: #c66;
699
  background-color: #c66;
699
  color: #000;
700
  color: #000;
700
}
701
}
701
702
702
.group .separator:after {
703
.group .separator:after {
703
  position: absolute;
704
  position: absolute;
704
  width: 0.8em;
705
  width: 0.8em;
705
  height: 0.5em;
706
  height: 0.5em;
706
  bottom: 0.25em;
707
  bottom: 0.25em;
707
  left: 0.25em;
708
  left: 0.25em;
708
  background-color: #000;
709
  background-color: #000;
709
  content: "\a0";
710
  content: "\a0";
710
}
711
}
711
712
712
.group ul {
713
.group ul {
713
  margin-left: 1.7em;
714
  margin-left: 1.7em;
714
}
715
}
715
716
716
.group li {
717
.group li {
717
  margin-bottom: 0;
718
  margin-bottom: 0;
718
}
719
}
719
720
720
.group .button:visited,
721
.group .button:visited,
721
.group .button
722
.group .button
722
{
723
{
723
  display: block;
724
  display: block;
724
  position: relative;
725
  position: relative;
725
  width: 6em;
726
  width: 6em;
726
  background-color: #99f !important;
727
  background-color: #99f !important;
727
}
728
}
728
729
729
.group li:last-child .button
730
.group li:last-child .button
730
{
731
{
731
  margin-bottom: 0;
732
  margin-bottom: 0;
732
}
733
}
733
734
734
.button.right {
735
.button.right {
735
  border-top-right-radius: 1em;
736
  border-top-right-radius: 1em;
736
  border-bottom-right-radius: 1em;
737
  border-bottom-right-radius: 1em;
737
}
738
}
738
739
739
.button.right .text {
740
.button.right .text {
740
  right: 1em;
741
  right: 1em;
741
}
742
}
742
743
743
.button.left {
744
.button.left {
744
  border-top-left-radius: 1em;
745
  border-top-left-radius: 1em;
745
  border-bottom-left-radius: 1em;
746
  border-bottom-left-radius: 1em;
746
}
747
}
747
748
748
.group .button .key {
749
.group .button .key {
749
  display: inline-block;
750
  display: inline-block;
750
  position: absolute;
751
  position: absolute;
751
  left: 0.2em;
752
  left: 0.2em;
752
  top: 0;
753
  top: 0;
753
  bottom: 0;
754
  bottom: 0;
754
  padding: 0 0.1em;
755
  padding: 0 0.1em;
755
  background-color: #000;
756
  background-color: #000;
756
  color: #f90;
757
  color: #f90;
757
  font-size: 2.4em;
758
  font-size: 2.4em;
758
  text-transform: uppercase;
759
  text-transform: uppercase;
759
  line-height: 0.9;
760
  line-height: 0.9;
760
}
761
}