Subversion Repositories LCARS

Rev

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

Rev 17 Rev 18
-
 
1
/*
1
/* <title>CSS for PointedEars' LCARS, version 2.053, stardate 200712.02</title>
2
 * <title>CSS for PointedEars' LCARS, version 2.054, stardate 200712.02</title>
2
*/
3
 */
3
4
4
/* basic fonts */
5
/* basic fonts */
5
6
6
/* $WEFT -- Created by:Thomas 'PointedEars' Lahn (webmaster@PointedEars.de)
-
 
7
   on 2002-03-23 -- */
-
 
8
@font-face {
7
@font-face {
9
  font-family:Haettens;
8
  font-family: "Downloadable LCARS";
10
  font-style:normal;
9
  font-style: normal;
11
  font-weight:normal;
10
  font-weight: normal;
12
  src:url(HAETTEN0.eot);
11
  src: url(LCARS.ttf);
13
}
12
}
14
13
-
 
14
/* EOT font created with WEFT on 2002-03-23 */
-
 
15
@font-face {
-
 
16
  font-family: "Downloadable Haettenschweiler";
-
 
17
  font-style: normal;
-
 
18
  font-weight: normal;
-
 
19
  src: url(HAETTEN0.eot), url(HAETTENS.ttf);
-
 
20
}
-
 
21
15
/*
22
/*
16
@font-face {
23
@font-face {
17
  font-family:Webdings;
24
  font-family:Webdings;
18
  font-style:normal;
25
  font-style:normal;
19
  font-weight:normal;
26
  font-weight:normal;
20
  src:url(WEBDING0.eot);
27
  src:url(WEBDING0.eot);
21
}
28
}
22
*/
29
*/
23
30
24
@font-face {
31
@font-face {
25
  font-family:"Zurich XCn BT";
32
  font-family: "Downloadable Zurich XCn BT";
-
 
33
  font-style: normal;
-
 
34
  font-weight: normal;
26
  src:url(ZurichXCn.pfr);
35
  src: url(ZurichXCn.pfr);
27
}
36
}
28
37
29
/* basic display */
38
/* basic display */
30
39
31
* {
40
* {
-
 
41
  font-family: LCARS, "Downloadable LCARS",
32
  font-family:LCARS, Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,
42
    Haettenschweiler, "Downloadable Haettenschweiler",
-
 
43
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
33
    Geneva, Arial, Helvetica, sans-serif;
44
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
34
  font-weight:normal;
45
  font-weight: normal;
35
}
46
}
36
47
37
body {
48
body {
38
  cursor:default;
49
  cursor:default;
39
  font-size:123%; /*110%*/
50
  font-size:134%; /*129%*/
40
  background-color:#000;
51
  background-color:#000;
41
  color:#ccf; /* #afbfe0; #69F; */
52
  color:#ccf; /* #afbfe0; #69F; */
42
  margin:0 10px;
53
  margin:0 10px;
43
  /* IE 5.5+ scrollbar colors */
54
  /* IE 5.5+ scrollbar colors */
44
/* from Mozilla LCARS Theme (2D style) */
55
/* from Mozilla LCARS Theme (2D style) */
45
  scrollbar-3dlight-color:#000;
56
  scrollbar-3dlight-color:#000;
46
  scrollbar-arrow-color:#000;
57
  scrollbar-arrow-color:#000;
47
  scrollbar-base-color:#000;
58
  scrollbar-base-color:#000;
48
  scrollbar-darkshadow-color:#000;
59
  scrollbar-darkshadow-color:#000;
49
  scrollbar-face-color:#99f;
60
  scrollbar-face-color:#99f;
50
  scrollbar-highlight-color:#99f;
61
  scrollbar-highlight-color:#99f;
51
  scrollbar-track-color:#000;
62
  scrollbar-track-color:#000;
52
  scrollbar-shadow-color:#99f;
63
  scrollbar-shadow-color:#99f;
53
}
64
}
54
65
55
div.body {
66
div.body {
56
  /* width:95%; */
67
  /* width:95%; */
57
}
68
}
58
69
59
span.alt { /* span with alternative text color */
70
span.alt { /* span with alternative text color */
60
  color:#f93;
71
  color:#f93;
61
  background-color:#000;
72
  background-color:#000;
62
}
73
}
63
74
64
/* for JavaScript processing messages */
75
/* for JavaScript processing messages */
65
76
66
.standby {
77
.standby {
67
  font-size:166%;
78
  font-size:166%;
68
  background-color:#000;
79
  background-color:#000;
69
  color:#99f;
80
  color:#99f;
70
}
81
}
71
82
72
div.standby {
83
div.standby {
73
  position:absolute;
84
  position:absolute;
74
  top:0;
85
  top:0;
75
  visibility:hidden;
86
  visibility:hidden;
76
}
87
}
77
88
78
/* font styles  */
89
/* font styles  */
79
90
80
p {
91
p {
81
  margin-top:0;
92
  margin-top:0;
82
  margin-bottom:1em;
93
  margin-bottom:1em;
83
}
94
}
84
95
-
 
96
div, p, li, th, td {
-
 
97
  max-width: 60ex;
-
 
98
}
-
 
99
85
small  {
100
small  {
86
  font-size:100%;
101
  font-size:100%;
87
}
102
}
88
103
89
b, strong {
104
b, strong {
90
  color:#f93;
105
  color:#f93;
91
  background-color:#000;
106
  background-color:#000;
92
  font-weight:normal;
107
  font-weight:normal;
93
}
108
}
94
109
95
i, cite, blockquote, em {
110
i, cite, blockquote, em {
96
  background-color:#000;
111
  background-color:#000;
97
  color:#f93;
112
  color:#f93;
98
  font-style:normal;
113
  font-style:normal;
99
}
114
}
100
115
101
abbr {
116
abbr {
102
  white-space:nowrap;
117
  white-space:nowrap;
103
}
118
}
104
119
-
 
120
abbr, acronym {
-
 
121
  border-bottom: 1px solid dotted;
-
 
122
  cursor: help;
-
 
123
}
-
 
124
105
span.cap {
125
span.cap {
106
  font-variant:small-caps;
126
  font-variant:small-caps;
107
}
127
}
108
128
109
/* headings */
129
/* headings */
110
130
111
h1 {
131
h1 {
112
  font-size:191%;
132
  font-size:191%;
113
  font-weight:normal;
133
  font-weight:normal;
114
  color:#c96;
134
  color:#c96;
115
  background-color:black;
135
  background-color:black;
116
}
136
}
117
137
118
138
119
h2 {
139
h2 {
120
  font-size:129%;
140
  font-size:129%;
121
  font-weight:normal;
141
  font-weight:normal;
122
  color:#fc6;
142
  color:#fc6;
123
  background-color:black;
143
  background-color:black;
124
  text-transform: uppercase;
144
  text-transform: uppercase;
125
}
145
}
126
146
127
h3 {
147
h3 {
128
  margin-top:0;
148
  margin-top:0;
129
  margin-bottom:1em;
149
  margin-bottom:1em;
130
  font-size:123%;
150
  font-size:123%;
131
  font-weight:normal;
151
  font-weight:normal;
132
  color:#fc6;
152
  color:#fc6;
133
  background-color:black;
153
  background-color:black;
134
  text-transform: uppercase;
154
  text-transform: uppercase;
135
}
155
}
136
156
137
h4 {
157
h4 {
138
  margin-top:2em;
158
  margin-top:2em;
139
  margin-bottom:1em;
159
  margin-bottom:1em;
140
  font-size:116%;
160
  font-size:116%;
141
  font-weight:normal;
161
  font-weight:normal;
142
  color:#fc6;
162
  color:#fc6;
143
  background-color:black;
163
  background-color:black;
144
}
164
}
145
165
146
table + h4 {
166
table + h4 {
147
  margin-top:1em;
167
  margin-top:1em;
148
}
168
}
149
169
150
a.h4:link:hover, a.h4:visited:hover {
170
a.h4:link:hover, a.h4:visited:hover {
151
  color:#fc6;
171
  color:#fc6;
152
  background-color:black;
172
  background-color:black;
153
}
173
}
154
174
155
a.h4:link:active, a.h4:visited:active {
175
a.h4:link:active, a.h4:visited:active {
156
  color:#fff;
176
  color:#fff;
157
  background-color:black;
177
  background-color:black;
158
}
178
}
159
179
160
h5 {
180
h5 {
161
  margin-top:2em;
181
  margin-top:2em;
162
  margin-bottom:1em;
182
  margin-bottom:1em;
163
  font-size:110%;
183
  font-size:111%;
164
  font-weight:normal;
184
  font-weight:normal;
165
  color:#fc6;
185
  color:#fc6;
166
  background-color:black;
186
  background-color:black;
167
}
187
}
168
188
169
h6 {
189
h6 {
170
  margin-top:2em;
190
  margin-top:2em;
171
  margin-bottom:1em;
191
  margin-bottom:1em;
172
  font-size:104%;
192
  font-size:104%;
173
  font-weight:normal;
193
  font-weight:normal;
174
  color:#fc6;
194
  color:#fc6;
175
  background-color:black;
195
  background-color:black;
176
}
196
}
177
197
178
/* LCARS specific anchors */
198
/* LCARS specific anchors */
179
199
180
/* order is important to buggy IE;
200
/* order is important to buggy IE;
181
   TODO: [IE] links focus color, visited links hover color */
201
   TODO: [IE] links focus color, visited links hover color */
182
202
183
a:link:hover, a:link:active, a:link:focus {
203
a:link:hover, a:link:active, a:link:focus {
184
  background-color:#000;
204
  background-color:#000;
185
  color:#fc0;
205
  color:#fc0;
186
  text-decoration:none;
206
  text-decoration:none;
187
}
207
}
188
208
189
a:link {
209
a:link {
190
  background-color:black;
210
  background-color:black;
191
  color:white;
211
  color:white;
192
  text-decoration:none;
212
  text-decoration:none;
193
}
213
}
194
214
195
a:visited:hover {
215
a:visited:hover {
196
  background-color:#000;
216
  background-color:#000;
197
  color:#fc3;
217
  color:#fc3;
198
  text-decoration:none;
218
  text-decoration:none;
199
}
219
}
200
220
201
a:visited:active {
221
a:visited:active {
202
  background-color:black;
222
  background-color:black;
203
  color:#fff;
223
  color:#fff;
204
  text-decoration:none;
224
  text-decoration:none;
205
}
225
}
206
226
207
a:visited:focus {
227
a:visited:focus {
208
  background-color:#000;
228
  background-color:#000;
209
  color:#fc3;
229
  color:#fc3;
210
  text-decoration:none;
230
  text-decoration:none;
211
}
231
}
212
232
213
a:visited {
233
a:visited {
214
  background-color:black;
234
  background-color:black;
215
  color:#fc9;
235
  color:#fc9;
216
  text-decoration:none;
236
  text-decoration:none;
217
}
237
}
218
238
219
/* buttons */
239
/* buttons */
220
240
221
a.button:link:focus, a.button:visited:focus,
241
a.button:link:focus, a.button:visited:focus,
222
a.button:link:hover, a.button:visited:hover {
242
a.button:link:hover, a.button:visited:hover {
223
  color:#000;
243
  color:#000;
224
  background-color:#c9c;
244
  background-color:#c9c;
225
  text-decoration:none;
245
  text-decoration:none;
226
}
246
}
227
247
228
a.button:link:active, a.button:visited:active {
248
a.button:link:active, a.button:visited:active {
229
  color:#000;
249
  color:#000;
230
  background-color:#fff;
250
  background-color:#fff;
231
  cursor:default;
251
  cursor:default;
232
  text-decoration:none;
252
  text-decoration:none;
233
}
253
}
234
254
235
a.button:link, a.button:visited {
255
a.button:link, a.button:visited {
236
  background-color:#969;
256
  background-color:#969;
237
  color:#000;
257
  color:#000;
238
  padding-left:1px;
258
  padding-left:1px;
239
  vertical-align:middle;
259
  vertical-align:middle;
240
  font-size:110%;
260
  font-size:110%;
241
  text-decoration:none;
261
  text-decoration:none;
242
}
262
}
243
263
244
a.stop:link, a.stop:visited {
264
a.stop:link, a.stop:visited {
245
  background-color:#c66;
265
  background-color:#c66;
246
  color:#000;
266
  color:#000;
247
  padding-left:1px;
267
  padding-left:1px;
248
  vertical-align:middle;
268
  vertical-align:middle;
249
  font-size:110%;
269
  font-size:110%;
250
  text-decoration:none;
270
  text-decoration:none;
251
}
271
}
252
272
253
a.stop:link:hover, a.stop:visited:hover {
273
a.stop:link:hover, a.stop:visited:hover {
254
  background-color:#f66;
274
  background-color:#f66;
255
  color:#000;
275
  color:#000;
256
  text-decoration:none;
276
  text-decoration:none;
257
}
277
}
258
278
259
a.stop:link:active, a.stop:visited:active {
279
a.stop:link:active, a.stop:visited:active {
260
  background-color:#fff;
280
  background-color:#fff;
261
  color:#000;
281
  color:#000;
262
  text-decoration:none;
282
  text-decoration:none;
263
}
283
}
264
284
265
a.go:link, a.go:visited {
285
a.go:link, a.go:visited {
266
  background-color:#6c6;
286
  background-color:#6c6;
267
  color:#000;
287
  color:#000;
268
  padding-left:1px;
288
  padding-left:1px;
269
  vertical-align:middle;
289
  vertical-align:middle;
270
  font-size:110%;
290
  font-size:110%;
271
  text-decoration:none;
291
  text-decoration:none;
272
}
292
}
273
293
274
a.go:link:hover, a.go:visited:hover {
294
a.go:link:hover, a.go:visited:hover {
275
  background-color:#6f6;
295
  background-color:#6f6;
276
  color:#000;
296
  color:#000;
277
  text-decoration:none;
297
  text-decoration:none;
278
}
298
}
279
299
280
a.go:link:active, a.go:visited:active {
300
a.go:link:active, a.go:visited:active {
281
  background-color:#fff;
301
  background-color:#fff;
282
  color:#000;
302
  color:#000;
283
  text-decoration:none;
303
  text-decoration:none;
284
}
304
}
285
305
286
span.symbol {
306
span.symbol {
287
  font-family:Webdings, fantasy;
307
  font-family:Webdings, fantasy;
288
  font-style:normal;
308
  font-style:normal;
289
  font-weight:normal;
309
  font-weight:normal;
290
  font-size:110%;
310
  font-size:110%;
291
}
311
}
292
312
293
/* form elements */
313
/* form elements */
294
314
295
input  {
315
input  {
296
  background-color:black;
316
  background-color:black;
297
  font-size:104%;
317
  font-size:104%;
298
  color:white;
318
  color:white;
299
}
319
}
300
320
301
input.button  {
321
input.button  {
302
  /* offset-width:auto; */
322
  /* offset-width:auto; */
303
  border-style:none;
323
  border-style:none;
304
  border-width:0px;
324
  border-width:0px;
305
  color:#000;
325
  color:#000;
306
  background-color:#969;
326
  background-color:#969;
307
  font-size:123%;
327
  font-size:123%;
308
  cursor:pointer;
328
  cursor:pointer;
309
}
329
}
310
330
311
textarea  {
331
textarea  {
312
  background-color:#000;
332
  background-color:#000;
313
  font-size:104%;
333
  font-size:104%;
314
  color:white;
334
  color:white;
315
}
335
}
316
336
317
select
337
select
318
 {
338
 {
319
  color:white;
339
  color:white;
320
  background-color:#000;
340
  background-color:#000;
321
  border-color:white;
341
  border-color:white;
322
  font-size:104%;
342
  font-size:104%;
323
  cursor:pointer;
343
  cursor:pointer;
324
}
344
}
325
345
326
option {
346
option {
327
  cursor:pointer;
347
  cursor:pointer;
328
}
348
}
329
349
330
/* table elements */
350
/* table elements */
331
351
332
table {
352
table {
333
  border-collapse: separate;
353
  border-collapse: separate;
334
  margin-top:0;
354
  margin-top:0;
335
  margin-bottom:1em;
355
  margin-bottom:1em;
336
}
356
}
337
357
338
/*
358
/*
339
 * Not for IE 6 and below.
359
 * Not for IE 6 and below.
340
 * Bugfix for IE 7 is provided by lcars-ie7.css which should be
360
 * Bugfix for IE 7 is provided by lcars-ie7.css which should be
341
 * included as follows:
361
 * included as follows:
342
 
362
 
343
   <link rel="stylesheet" href="/styles/lcars.css" type="text/css">
363
   <link rel="stylesheet" href="/styles/lcars.css" type="text/css">
344
   <!--[if IE 7]>
364
   <!--[if IE 7]>
345
     <link rel="stylesheet" href="/styles/lcars-ie7.css" type="text/css">
365
     <link rel="stylesheet" href="/styles/lcars-ie7.css" type="text/css">
346
   <![endif]-->
366
   <![endif]-->
347
 */
367
 */
348
table>tbody.scroll {
368
table>tbody.scroll {
349
  height:11em;
369
  height:11em;
350
  overflow:auto;
370
  overflow:auto;
351
  /*
371
  /*
352
   * In current implementations, the scrollbar is displayed within
372
   * In current implementations, the scrollbar is displayed within
353
   * the tbody area, so we disable horizontal scrolling for that ...
373
   * the tbody area, so we disable horizontal scrolling for that ...
354
   */
374
   */
355
  overflow-x: hidden !important;
375
  overflow-x: hidden !important;
356
}
376
}
357
377
-
 
378
table>tbody.scroll tr {
-
 
379
  height: auto;
-
 
380
}
-
 
381
358
/*
382
/*
359
 * ... and make enough room so that the text won't flow under the
383
 * ... and make enough room so that the text won't flow under the
360
 * vertical scrollbar.  However, that is still a dirty hack as we
384
 * vertical scrollbar.  However, that is still a dirty hack as we
361
 * assume that the vertical scrollbar is not wider than 20px.  
385
 * assume that the vertical scrollbar is not wider than 20px.  
362
 */
386
 */
363
table>tbody.scroll td:last-child {
387
table>tbody.scroll td:last-child {
364
  padding-right: 20px;
388
  padding-right: 20px;
365
}
389
}
366
390
367
tr {
391
tr {
368
  vertical-align:top;
392
  vertical-align:top;
369
  vertical-align: baseline;
393
  vertical-align: baseline;
370
}
394
}
371
395
372
th {
396
th {
373
  padding-left:3px;
397
  padding-left:3px;
374
  /* border-right:2px solid black; */
398
  /* border-right:2px solid black; */
375
  text-align:left;
399
  text-align:left;
376
  background-color:#c66;
400
  background-color:#c66;
377
  color:#000;
401
  color:#000;
378
  font-size:110%;
402
  font-size: 133%;
379
  font-weight:normal;
403
  font-weight:normal;
380
}
404
}
381
405
382
thead th:first-child {
406
thead th:first-child {
383
  border-top-left-radius: 7px 15px;
407
  border-top-left-radius: 7px 15px;
384
}
408
}
385
409
386
table.left th, thead.left th, tbody.left th, th.left {
410
table.left th, thead.left th, tbody.left th, th.left {
387
  background-color:inherit;
411
  background-color:inherit;
388
  color:inherit;
412
  color:inherit;
389
  text-transform:uppercase;
413
  text-transform:uppercase;
390
  text-align:right;
414
  text-align:right;
391
}
415
}
392
416
393
th, td {
417
th, td {
394
  padding-right:3px;
418
  padding-right:3px;
395
}
419
}
396
420
397
td {
421
td {
398
  padding-left:4px;
422
  padding-left:4px;
399
  background-color:inherit;
423
  background-color:inherit;
400
  color:inherit;
424
  color:inherit;
401
  font-size:110%;
425
  font-size:133%;
402
}
426
}
403
427
404
/* hover table */
428
/* hover table */
405
429
406
table.hover thead th:hover,
430
table.hover thead th:hover,
407
thead.hover th:hover,
431
thead.hover th:hover,
408
tbody.hover th:hover,
432
tbody.hover th:hover,
409
table.hover tbody tr:hover th,
433
table.hover tbody tr:hover th,
410
tbody.hover tr:hover th {
434
tbody.hover tr:hover th {
411
  background-color:#f99;
435
  background-color:#f99;
412
  color:#000;
436
  color:#000;
413
}
437
}
414
438
415
table.hover tbody tr:hover,
439
table.hover tbody tr:hover,
416
tbody.hover tr:hover {
440
tbody.hover tr:hover {
417
  color:#fc3;
441
  color:#fc3;
418
}
442
}
419
443
420
table.hover tbody tr:hover a,
444
table.hover tbody tr:hover a,
421
tbody.hover tr:hover a {
445
tbody.hover tr:hover a {
422
  background-color:inherit;
446
  background-color:inherit;
423
}
447
}
424
448
425
/* Lowlight all rows except that with the active/focused element */
449
/* Lowlight all rows except that with the active/focused element */
426
table.hover tbody:active,
450
table.hover tbody:active,
427
table.hover tbody:focus,
451
table.hover tbody:focus,
428
tbody.hover:active,
452
tbody.hover:active,
429
tbody.hover:focus {
453
tbody.hover:focus {
430
  background-color:#000;
454
  background-color:#000;
431
  color:#99c;
455
  color:#99c;
432
}
456
}
433
457
434
table.hover tbody tr:active,
458
table.hover tbody tr:active,
435
tbody.hover tr:active,
459
tbody.hover tr:active,
436
table.hover tbody tr:focus,
460
table.hover tbody tr:focus,
437
tbody.hover tr:focus {
461
tbody.hover tr:focus {
438
  background-color:#000;
462
  background-color:#000;
439
  color:#fff;
463
  color:#fff;
440
}
464
}
441
465
442
/* This to invert display on hover does not seem proper LCARS design */
466
/* This to invert display on hover does not seem proper LCARS design */
443
/*
467
/*
444
table.hover tbody tr:hover a:link,
468
table.hover tbody tr:hover a:link,
445
tbody.hover tr:hover a:link {
469
tbody.hover tr:hover a:link {
446
  color:#fff;
470
  color:#fff;
447
}
471
}
448

472

449
table.hover tbody tr:hover a:visited,
473
table.hover tbody tr:hover a:visited,
450
tbody.hover tr:hover a:visited {
474
tbody.hover tr:hover a:visited {
451
  background-color:inherit;
475
  background-color:inherit;
452
  color:#963;
476
  color:#963;
453
}
477
}
454

478

455
table.hover tbody tr:hover a:link:focus,
479
table.hover tbody tr:hover a:link:focus,
456
table.hover tbody tr:hover a:visited:focus,
480
table.hover tbody tr:hover a:visited:focus,
457
table.hover tbody tr:hover a:link:hover,
481
table.hover tbody tr:hover a:link:hover,
458
table.hover tbody tr:hover a:visited:hover,
482
table.hover tbody tr:hover a:visited:hover,
459
table.hover tbody tr:hover a:link:active,
483
table.hover tbody tr:hover a:link:active,
460
tbody.hover tr:hover a:link:focus,
484
tbody.hover tr:hover a:link:focus,
461
tbody.hover tr:hover a:visited:focus,
485
tbody.hover tr:hover a:visited:focus,
462
tbody.hover tr:hover a:link:hover,
486
tbody.hover tr:hover a:link:hover,
463
tbody.hover tr:hover a:visited:hover,
487
tbody.hover tr:hover a:visited:hover,
464
tbody.hover tr:hover a:link:active {
488
tbody.hover tr:hover a:link:active {
465
  background-color:inherit;
489
  background-color:inherit;
466
  color:#960;
490
  color:#960;
467
}
491
}
468

492

469
table.hover tbody tr:hover a:visited:active,
493
table.hover tbody tr:hover a:visited:active,
470
tbody.hover tr:hover a:visited:active {
494
tbody.hover tr:hover a:visited:active {
471
  background-color:inherit;
495
  background-color:inherit;
472
  color:#c63;
496
  color:#c63;
473
}
497
}
474
*/
498
*/
475
 
499