Subversion Repositories LCARS

Rev

Rev 182 | Rev 211 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
50 PointedEar 1
<?php
125 PointedEar 2
@\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
50 PointedEar 3
 
116 PointedEar 4
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
125 PointedEar 5
@\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
58 PointedEar 6
 
116 PointedEar 7
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
125 PointedEar 8
@\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
58 PointedEar 9
 
125 PointedEar 10
@\header('Content-Type: text/css; charset=UTF-8');
119 PointedEar 11
 
12
require_once 'css/least/Mixins.php';
169 PointedEar 13
use de\pointedears\css\least\Mixins;
79 PointedEar 14
?>@charset "UTF-8";
37 PointedEar 15
 
58 PointedEar 16
<?php
17
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
18
  {
123 PointedEar 19
    /* Optional general animations */
58 PointedEar 20
?>
79 PointedEar 21
@import url("/styles/lcars-ani.css");
58 PointedEar 22
<?php
23
  }
24
?>
123 PointedEar 25
 
26
<?php
27
  /* Non-optional content-specific animations */
28
  Mixins::keyframes('analysis', <<<CSS
29
    from, 74% {
30
      opacity: 0;
31
    }
32
 
33
    75%, to {
34
      opacity: 1;
35
      color: #fc6;
36
    }
37
CSS
38
   );
39
?>
40
 
41
<?php
42
  Mixins::keyframes('analysis-scan', <<<CSS
43
    from, 25% {
44
      color: #fc6;
45
    }
46
 
47
    26%, to {
48
      color: #fff;
49
    }
50
CSS
51
   );
52
 
53
   /* FIXME: :hover hides first row */
54
/*
55
.multi-display .upper .content .analysis:hover tr {
56
  <?php
57
    Mixins::animation('-play-state', 'paused');
148 PointedEar 58
  ?>
123 PointedEar 59
}
60
*/
148 PointedEar 61
?>
62
 
63
.multi-display .upper .content .analysis tr:hover
64
{
65
        color: #f90 !important;
66
}
67
 
123 PointedEar 68
/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
148 PointedEar 69
.multi-display .upper .content .analysis tr:nth-child(1)
123 PointedEar 70
{
71
  <?php
72
    Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
73
  ?>  
74
}
75
 
148 PointedEar 76
.multi-display .upper .content .analysis tr:nth-child(2)
123 PointedEar 77
{
78
  <?php
79
    Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');
80
  ?>  
81
}
82
 
148 PointedEar 83
.multi-display .upper .content .analysis tr:nth-child(3)
123 PointedEar 84
{
85
  <?php
86
    Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');
87
  ?>  
88
}
89
 
144 PointedEar 90
<?php
91
  Mixins::keyframes('analysis-offline', <<<CSS
92
    from, 33% {
93
      color: #300;
94
    }
95
 
96
    34%, to {
97
      color: #f00;
98
    }
99
CSS
100
   );
101
?>
102
 
103
.offline {
104
  <?php
105
    Mixins::animation('', 'analysis-offline 3s linear 2.0s infinite');
106
  ?>
107
}
108
 
37 PointedEar 109
body {
110
  margin-top: 12em;
119 PointedEar 111
  margin-left: 16.8em;
37 PointedEar 112
  margin-right: 0.2em;
113
  margin-bottom: 0.2em;
114
}
115
 
116 PointedEar 116
/* HTML5 elements */
117
 
118
nav
119
{
120
  display: block;
121
}
122
 
37 PointedEar 123
/* Bow (main) and elbo (multi-view) */
124
 
125
#LCARS {
126
  position: fixed;
127
  left: 0;
128
  top: 0;
129
  right: 0;
130
  padding: 0.2em;
131
  background-color: #000;
132
  z-index: 1701;
133
}
134
 
135
#bow {
136
  position: absolute;
137
  left: 0.2em;
138
  top: 0.2em;
139
  right: 0.2em;
140
  height: 2.4em;
141
  padding-bottom: 0.2em;
142
  background-color: #000;
143
}
144
 
145
#bow-top {
146
  /* NOTE: position: absolute is needed for animation */
147
  position: absolute;
148
  top: 0;
149
  left: 0;
150
  right: 0;
151
  min-width: 15.4em;
152
  height: 2em;
153
  background-color: #999;
154
  border-top-left-radius: 2.4em;
155
  border-top-right-radius: 1.2em;
156
  border-bottom-right-radius: 1.2em;
157
  line-height: 0.9;
158
}
159
 
160
.empty #bow-top {
161
  border-top-left-radius: 1.2em;
162
  border-bottom-left-radius: 1.2em;
38 PointedEar 163
  min-width: 10em;
37 PointedEar 164
}
165
 
166
 
167
#bow-top .text {
168
  position: absolute;
169
  margin: 0;
170
  left: 4.33em;
171
  top: 0;
40 PointedEar 172
  right: 0.75em;
37 PointedEar 173
  height: 1em;
174
  text-align: right;
175
  color: #fc0;
176
  font-size: 2.4em;
177
  padding-right: 0.1em;
178
  overflow: hidden;
179
  text-overflow: ellipsis;
180
}
181
 
38 PointedEar 182
.empty #bow-top .text {
183
  left: 0.93em;
184
}
185
 
37 PointedEar 186
 
187
 
188
#bow-top .text span {
189
  padding-right: 0.1em;
190
  background-color: #000;
191
  padding-left: 0.1em;
192
  text-transform: uppercase;
193
  white-space: nowrap;
194
}
195
 
38 PointedEar 196
.empty #footer-container {
197
  position: fixed;
198
  left: 0.2em;
199
  bottom: 0;
200
  right: 0.2em;
201
  min-height: 2.4em;
202
  padding-top: 0.2em;
203
  padding-bottom: 0.2em;
204
  background-color: #000;
205
}
206
 
40 PointedEar 207
 
38 PointedEar 208
.empty #footer {
209
  position: absolute;
210
  bottom: 0;
211
  left: 0;
212
  right: 0;
213
  height: 2em;
40 PointedEar 214
  min-width: 10em;
38 PointedEar 215
  margin-bottom: 0.2em;
216
  background-color: #999;
217
  border-radius: 1.2em;
40 PointedEar 218
  line-height: 0.9;
38 PointedEar 219
}
220
 
221
.empty #footer .text {
222
  position: absolute;
40 PointedEar 223
  margin: 0;
224
  left: 0.93em;
225
  top: 0;
226
  right: 0.75em;
227
  height: 1em;
228
  background-color: transparent;
38 PointedEar 229
  color: #fc0;
40 PointedEar 230
  font-size: 2.4em;
38 PointedEar 231
  padding-right: 0.1em;
232
  overflow: hidden;
233
  text-overflow: ellipsis;
234
}
235
 
236
.empty #footer .text span {
237
  padding-right: 0.1em;
40 PointedEar 238
  background-color: #000;
38 PointedEar 239
  padding-left: 0.1em;
240
  text-transform: uppercase;
241
  white-space: nowrap;
242
}
243
 
37 PointedEar 244
.empty .separator-left {
245
  position: absolute;
246
  left: 2em;
247
  height: 2em;
248
  width: 0.25em;
249
  background-color: #000;
250
}
251
 
252
.empty .separator-right {
253
  position: absolute;
254
  right: 2em;
255
  height: 2em;
256
  width: 0.25em;
257
  background-color: #000;
258
}
259
 
58 PointedEar 260
.bow {
261
  background-color: #999;
262
}
263
 
37 PointedEar 264
#bow-top-left {
265
  position: absolute;
266
  top: 2em;
267
  left: 0;
268
  right: 0;
109 PointedEar 269
  height: 4.4em;
37 PointedEar 270
  width: 9.2em;
271
  background-color: #999;
109 PointedEar 272
  overflow: hidden;
37 PointedEar 273
}
274
 
275
.empty #bow-top-left {
276
  display: none;
277
}
278
 
279
#bow-top-left .concave {
280
  position: absolute;
281
  top: 0;
282
  left: 8em;
109 PointedEar 283
  height: 4.4em;
37 PointedEar 284
  width: 1.2em;
285
  background-color: #000;
286
  border-top-left-radius: 1.2em;
287
}
288
 
289
.empty #bow-top-left-concave {
290
  display: none;
291
}
292
 
50 PointedEar 293
.menu-container {
43 PointedEar 294
  position: fixed;
295
  left: 0.2em;
109 PointedEar 296
  top: 6.8em;
43 PointedEar 297
  width: 8em;
298
  bottom: 2.8em;
299
  background-color: #999;
37 PointedEar 300
  overflow: auto;
109 PointedEar 301
  overflow-x: hidden;
302
  overflow-y: auto;
37 PointedEar 303
}
304
 
50 PointedEar 305
.menu
43 PointedEar 306
{
167 PointedEar 307
  height: 23.6em;
43 PointedEar 308
  background-color: #000;
309
}
310
 
311
.menu ul {
103 PointedEar 312
  margin: 0 0.2em 0 0;
37 PointedEar 313
  padding: 0;
314
}
315
 
175 PointedEar 316
.menu ul:first-child {
317
  padding-top: 1em;
318
}
319
 
43 PointedEar 320
.menu li {
37 PointedEar 321
  margin: 0;
322
}
323
 
324
#bow #bottom
325
{
326
  position: fixed;
327
  left: 0;
328
  bottom: 0;
119 PointedEar 329
  width: 10.4em;
37 PointedEar 330
  height: 2.4em;
331
  background-color: #000;
332
  z-index: 1701;
333
}
334
 
335
#bow-bottom {
336
  position: absolute;
337
  bottom: 0.2em;
338
  left: 0.2em;
119 PointedEar 339
  width: 8em;
167 PointedEar 340
  height: 2.4em;
119 PointedEar 341
  border-bottom-left-radius: 0em;
342
  border-bottom-right-radius: 0em;
37 PointedEar 343
  background-color: #999;
344
}
345
 
346
.empty #bow-bottom {
347
  display: none;
348
}
349
 
350
#bow-bottom .concave {
351
  position: absolute;
352
  margin-left: 0.2em;
353
  margin-bottom: 0.2em;
354
  bottom: 0.3em;
355
  left: 7.8em;
356
  height: 2.1em;
119 PointedEar 357
  width: 2.2em;
37 PointedEar 358
  border-bottom-left-radius: 1.2em;
359
  border-bottom-right-radius: 1em;
360
  background-color: #000;
361
}
362
 
38 PointedEar 363
#bow-bottom .spacer {
37 PointedEar 364
  position: absolute;
38 PointedEar 365
  left: 10.2em;
94 PointedEar 366
  bottom: 0;
38 PointedEar 367
  width: 0.2em;
368
  height: 0.5em;
369
  background-color: black;
37 PointedEar 370
}
371
 
38 PointedEar 372
.empty #bow-bottom-left-concave {
373
  display: none;
37 PointedEar 374
}
375
 
376
/* Controls */
377
 
179 PointedEar 378
input,
379
select
380
{
381
  margin: 0 0.2em 0.2em 0;
382
  font-size: 1em;
383
}
384
 
385
input
386
{
387
  min-width: 4.875em;
388
  border: 1px solid #7d7d7d;
389
  padding: 0 0.125em;
390
  background-color: #000;
391
  color: #fff;
392
}
393
 
394
input:focus
395
{
396
  border-color: #f90;
397
}
398
 
399
select
400
{
401
  min-width: 5em;
402
  background-color: #7d7d7d;
403
  color: #000 !important;
404
  border: none;
405
}
406
 
407
select:focus
408
{
409
  background-color: #f90;
410
  color: #000;
411
}
412
 
413
option {
414
  background-color: #000;
415
  color: #fff;
416
}
417
 
418
option:checked {
419
  color: #fc6;
420
}
421
 
37 PointedEar 422
.button:visited,
423
.button
424
{
425
  position: relative;
426
  display: inline-block;
427
  margin-right: 0.2em;
428
  margin-bottom: 0.2em;
429
  width: 5em;
430
  height: 2em;
431
  background-color: #7d7d7d; /* c9c */
432
  color: #000 !important;
433
  text-decoration: none !important;
434
  text-transform: uppercase;
139 PointedEar 435
  /* overflow: hidden; */
83 PointedEar 436
  cursor: pointer !important;
37 PointedEar 437
}
438
 
439
.button .text {
440
  position: absolute;
441
  bottom: 0;
442
  right: 0.5em;
83 PointedEar 443
  cursor: pointer !important;
37 PointedEar 444
}
445
 
446
.button.command {
447
  border-radius: 1.2em;
448
}
449
 
450
.button.command .text {
451
  position: absolute;
452
  bottom: 0;
453
  right: 1em;
454
}
455
 
456
.button:hover,
457
.button:focus,
458
.button.selected:hover,
459
.button.selected:focus,
460
.group .button:hover,
461
.group .button:focus,
462
.group .button:visited:hover,
463
.group .button:visited:focus
464
{
465
  background-color: #f90 !important;
466
  color: #000 !important;
467
}
468
 
469
.button:active,
470
.button.selected:active,
471
.group .button:active,
472
.group .button:visited:active
473
{
474
  background-color: #fff !important;
475
  color: #000 !important;
476
}
477
 
175 PointedEar 478
.menu bow {
479
  width: 8em;
480
}
481
 
43 PointedEar 482
.menu .button {
37 PointedEar 483
  display: block;
484
  width: 8em;
485
  height: 1em;
486
  line-height: 1;
487
  background-color: #9cf;
488
  color: #000 !important;
50 PointedEar 489
  text-overflow: ellipsis;
490
  white-space: nowrap;
37 PointedEar 491
}
492
 
58 PointedEar 493
#connectors {
494
  position: fixed;
495
  left: 8.4em;
496
  top: 5.6em;
497
}
498
 
119 PointedEar 499
#connectors div {
500
  position: absolute;
501
}
502
 
503
#connectors .top {
504
  top: 0;
505
  height: 1em;
506
}
507
 
508
#connectors .mid {
509
  top: 13.6em;
510
  height: 0.8em;
511
}
512
 
513
#connectors .left {
514
  left: 0;
515
  width: 2em;
516
}
517
 
518
#connectors .right {
519
  left: 2.2em;
520
  width: 0em;
521
}
522
 
37 PointedEar 523
.multi-display
524
{
525
  position: fixed;
74 PointedEar 526
  top: 2.6em;
119 PointedEar 527
  left: 10.6em;
94 PointedEar 528
  right: 0;
37 PointedEar 529
}
530
 
531
.multi-display .button
532
{
533
  width: 5em !important;
534
}
535
 
179 PointedEar 536
#content.fixed {
537
  position: fixed;
538
  margin-right: 0.2em;
539
  top: 12em;
540
  right: 0;
541
  bottom: 0.2em;
542
  left: 16.8em;
543
  overflow: hidden;
544
}
545
 
37 PointedEar 546
.multi-display .upper
547
{
548
  position: absolute;
549
  top: 0;
550
  left: 0;
551
  right: 0;  
94 PointedEar 552
  height: 7.5em;  
37 PointedEar 553
  padding-right: 0.2em;
554
  background-color: black;
555
}
556
 
74 PointedEar 557
.multi-display .upper .content
72 PointedEar 558
{
559
  position: absolute;
560
  top: 0;
74 PointedEar 561
  left: 6em;
94 PointedEar 562
  bottom: 1.3em;
72 PointedEar 563
  right: 0.2em;
564
  background-color: black;
565
  color: white;
74 PointedEar 566
  text-align: right;
567
  overflow: hidden;
568
  text-overflow: ellipsis;
569
}
570
 
571
.multi-display .upper .content .title
572
{
573
  position: absolute;
574
  top: 0;
94 PointedEar 575
  left: 0;
74 PointedEar 576
  height: 1em;
94 PointedEar 577
  right: 0;
74 PointedEar 578
  background-color: black;
579
  color: white;
72 PointedEar 580
  font-size: 2.4em;
581
  text-transform: uppercase;
582
  text-align: right;
74 PointedEar 583
  overflow: hidden;
72 PointedEar 584
}
585
 
74 PointedEar 586
.multi-display .upper .content .title span
37 PointedEar 587
{
74 PointedEar 588
  white-space: nowrap;
589
}
590
 
90 PointedEar 591
.multi-display .upper .content .analysis {
592
  position: absolute;
593
  top: 2.4em;
594
  bottom: 0;
595
  right: 11em;
596
  left: 0;
597
  overflow: hidden;
598
  text-align: left;
118 PointedEar 599
  cursor: default;
90 PointedEar 600
}
601
 
118 PointedEar 602
.multi-display .upper .content .analysis table {
603
  border-collapse: collapse;
604
  line-height: 1.2;
119 PointedEar 605
  max-width: 100%;
118 PointedEar 606
}
148 PointedEar 607
 
118 PointedEar 608
.multi-display .upper .content .analysis th {
120 PointedEar 609
  padding: 0 0.4em 0 0.1em;
118 PointedEar 610
  font-weight: normal;
611
  text-align: left;
612
  text-transform: uppercase;
613
  white-space: nowrap;
614
  vertical-align: baseline;
615
}
616
 
182 PointedEar 617
.multi-display .upper .content .analysis th:nth-child(3) {
618
  padding-left: 0.7em;
619
}
620
 
118 PointedEar 621
.multi-display .upper .content .analysis td {
120 PointedEar 622
  padding: 0 0.1em 0 0.1em;
118 PointedEar 623
  text-overflow: ellipsis;
624
  white-space: nowrap;
625
  vertical-align: baseline;
626
  text-overflow: ellipsis;
627
}
628
 
629
.multi-display .upper .content .analysis td sup {
630
  line-height: 1;
631
  font-weight: 500;
632
}
633
 
92 PointedEar 634
.multi-display .upper .content .commands
74 PointedEar 635
{
636
  position: absolute;
92 PointedEar 637
  margin: 0;
638
  padding: 0;
639
  top: 2.4em;
94 PointedEar 640
  right: 0;
92 PointedEar 641
  height: 3.8em;
642
  width: 10.2em;
643
  list-style: none;
644
}
645
 
646
.multi-display .upper .content .commands li
647
{
648
  position: absolute;
649
  margin: 0;
650
  width: 5em;
74 PointedEar 651
  height: 1.8em;
92 PointedEar 652
}
653
 
654
.multi-display .upper .content .commands .button
655
{
656
  position: absolute;
657
  top: 0;
658
  left: 0;
659
  margin: 0;
660
  height: 1.8em;
661
  border-radius: 0.9em;
74 PointedEar 662
  text-transform: none;
663
}
664
 
92 PointedEar 665
.multi-display .upper .content .commands .button .text {
101 PointedEar 666
  right: 1em;
74 PointedEar 667
}
668
 
669
.multi-display .upper .content #cmd1
670
{
92 PointedEar 671
  top: 0;
74 PointedEar 672
  right: 5.2em;
673
}
674
 
675
.multi-display .upper .content #cmd2
676
{
92 PointedEar 677
  top: 0;
74 PointedEar 678
  right: 0;
679
}
680
 
681
.multi-display .upper .content #cmd3
682
{
92 PointedEar 683
  top: 2em;
684
  right: 0;
74 PointedEar 685
}
686
 
687
.multi-display .upper .content #cmd4
688
{
92 PointedEar 689
  top: 2em;
690
  right: 5.2em;
74 PointedEar 691
}
692
 
693
.multi-display .upper .elbo-button
694
{
695
  position: absolute;
696
  top: 0;
697
  left: 0;
698
  width: 5em;
699
  height: 4em;
37 PointedEar 700
  background-color: #c9c !important;
72 PointedEar 701
  color: #000 !important;
83 PointedEar 702
  cursor: default;
37 PointedEar 703
}
704
 
74 PointedEar 705
.multi-display .upper .elbo-button .text
72 PointedEar 706
{
707
  position: absolute;
708
  bottom: 0;
709
  right: 0.2em;
102 PointedEar 710
  max-width: 4em;
72 PointedEar 711
  max-height: 3.6em;
712
  text-align: right;
713
  overflow: hidden;
714
}
715
 
37 PointedEar 716
.multi-display .upper .elbo
717
{
718
  position: absolute;
719
  left: 0;
74 PointedEar 720
  top: 4.2em;
37 PointedEar 721
  width: 6em;
722
  height: 3.2em;
723
  border-bottom-left-radius: 2em;
724
  background-color: #9cf;
72 PointedEar 725
  color: #000;
37 PointedEar 726
}
727
 
72 PointedEar 728
.multi-display .upper .elbo .text
729
{
730
  position: absolute;
731
  top: 0;
732
  right: 1.2em;
102 PointedEar 733
  max-width: 4em;
72 PointedEar 734
  max-height: 2.2em;
735
  text-align: right;
736
  overflow: hidden;
83 PointedEar 737
  cursor: default;
72 PointedEar 738
}
739
 
101 PointedEar 740
.elbo [title],
741
.button [title]
742
{
743
  border-bottom: none;
744
}
745
 
37 PointedEar 746
.multi-display .upper .elbo .concave
747
{
748
  position: absolute;
749
  left: 5em;
750
  top: 0;
103 PointedEar 751
  width: 1.1em;
37 PointedEar 752
  height: 2.2em;
753
  border-bottom-left-radius: 1em;
754
  background-color: black;
755
}
756
 
80 PointedEar 757
.multi-display .border
758
{
759
  height: 1em;
760
}
761
 
37 PointedEar 762
.multi-display .upper .border
763
{
94 PointedEar 764
  position: absolute;
765
  top: 6.4em;
766
  left: 6em;
37 PointedEar 767
  right: 0.2em;
79 PointedEar 768
}
769
 
770
.multi-display .border div
771
{
772
  position: absolute;
773
  top: 0;
774
  height: 1em;
775
}
776
 
777
.multi-display .upper .border div
778
{
37 PointedEar 779
  background-color: #9cf;
80 PointedEar 780
}
79 PointedEar 781
 
782
.multi-display .upper .border .left
783
{
784
  left: 0;
785
  right: 5.2em;
786
  height: 1em;
37 PointedEar 787
}
788
 
79 PointedEar 789
.multi-display .upper .border .right
790
{
791
  width: 5em;
792
  right: 0;
793
}
794
 
37 PointedEar 795
.multi-display .lower
796
{
797
  position: absolute;
74 PointedEar 798
  top: 7.5em;
37 PointedEar 799
  left: 0;
94 PointedEar 800
  height: 0.1em;
801
  right: 0;
37 PointedEar 802
  background-color: black;
803
}
804
 
805
.multi-display .lower .elbo
806
{
94 PointedEar 807
  position: absolute;
808
  top: 0.1em;
809
  left: 0;
37 PointedEar 810
  width: 6em;
811
  height: 3em;
812
  border-top-left-radius: 2em;
813
  background-color: #fc6;
814
}
815
 
816
.multi-display .lower .elbo .concave
817
{
818
  position: absolute;
819
  left: 5em;
820
  top: 1em;
103 PointedEar 821
  width: 1.1em;
822
  height: 2.1em;
37 PointedEar 823
  background-color: black;
824
  border-top-left-radius: 1em;
825
}
826
 
827
.multi-display .lower .bg
828
{
829
  position: fixed;
830
  top: 13.4em;
119 PointedEar 831
  bottom: 0.2em;
37 PointedEar 832
  width: 5em;
833
  background-color: #fc6;
834
}
835
 
836
.multi-display .lower .border-container
837
{
94 PointedEar 838
  position: absolute;
839
  top: 0.1em;
840
  left: 6em;
841
  right: 0;
37 PointedEar 842
  height: 1.2em;
843
  background-color: black;
844
}
845
 
846
.multi-display .lower .border
847
{
80 PointedEar 848
  position: absolute;
37 PointedEar 849
  left: 0;
850
  right: 0.2em;
79 PointedEar 851
}
852
 
853
.multi-display .lower .border div
854
{
37 PointedEar 855
  background-color: #fc6;
856
}
857
 
79 PointedEar 858
.multi-display .lower .border .left
859
{
860
  left: 0;
80 PointedEar 861
  right: 5.2em;
79 PointedEar 862
}
863
 
864
.multi-display .lower .border .right
865
{
866
  width: 5em;
80 PointedEar 867
  right: 0;
79 PointedEar 868
}
869
 
43 PointedEar 870
.menu .button.secondary,
871
.multi-display .lower .elbo.secondary,
872
.multi-display .lower .bg.secondary,
873
.multi-display .lower .border.secondary
874
{
875
  background-color: #f96;
876
}
877
 
878
.menu .button.ancillary,
879
.multi-display .lower .elbo.ancillary,
880
.multi-display .lower .bg.ancillary,
881
.multi-display .lower .border.ancillary
882
{
883
  background-color: #c9c;
884
}
885
 
886
.menu .button.database,
887
.multi-display .lower .elbo.database,
888
.multi-display .lower .bg.database,
889
.multi-display .lower .border.database
890
{
37 PointedEar 891
  background-color: #c66;
892
}
893
 
43 PointedEar 894
.menu .button .text {
37 PointedEar 895
  position: static;
896
  margin: 0 0.25em;
897
}
898
 
899
.button.selected {
900
  background-color: #fc6 !important;
901
  color: #000 !important;  
902
}
903
 
904
.group {
905
  margin: 0 auto;
906
  position: relative;
38 PointedEar 907
  width: 7.7em;
37 PointedEar 908
}
909
 
910
.group .separator {
911
  float: left;
912
  position: absolute;
38 PointedEar 913
  top: 0;
914
  left: 0;
915
  width: 1.5em;
37 PointedEar 916
  height: 100%;
917
  background-color: #c66;
918
  color: #000;
919
}
920
 
921
.group .separator:after {
922
  position: absolute;
38 PointedEar 923
  width: 0.8em;
924
  height: 0.5em;
925
  bottom: 0.25em;
926
  left: 0.25em;
37 PointedEar 927
  background-color: #000;
928
  content: "\a0";
929
}
930
 
931
.group ul {
38 PointedEar 932
  margin-left: 1.7em;
37 PointedEar 933
}
934
 
935
.group li {
38 PointedEar 936
  margin-bottom: 0;
37 PointedEar 937
}
938
 
939
.group .button:visited,
940
.group .button
941
{
38 PointedEar 942
  display: block;
37 PointedEar 943
  position: relative;
38 PointedEar 944
  width: 6em;
37 PointedEar 945
  background-color: #99f !important;
946
}
947
 
38 PointedEar 948
.group li:last-child .button
949
{
950
  margin-bottom: 0;
37 PointedEar 951
}
952
 
38 PointedEar 953
.button.right {
954
  border-top-right-radius: 1em;
955
  border-bottom-right-radius: 1em;
37 PointedEar 956
}
957
 
38 PointedEar 958
.button.right .text {
959
  right: 1em;
960
}
961
 
962
.button.left {
963
  border-top-left-radius: 1em;
964
  border-bottom-left-radius: 1em;
965
}
966
 
37 PointedEar 967
.group .button .key {
968
  display: inline-block;
969
  position: absolute;
38 PointedEar 970
  left: 0.2em;
37 PointedEar 971
  top: 0;
972
  bottom: 0;
38 PointedEar 973
  padding: 0 0.1em;
37 PointedEar 974
  background-color: #000;
975
  color: #f90;
38 PointedEar 976
  font-size: 2.4em;
37 PointedEar 977
  text-transform: uppercase;
38 PointedEar 978
  line-height: 0.9;
119 PointedEar 979
}
980
 
175 PointedEar 981
<?php require_once 'lcars-responsive.css'; ?>