Subversion Repositories LCARS

Rev

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

Rev 36 Rev 73
-
 
1
<?php \header('Content-Type: text/css; charset=UTF-8'); ?>
1
/*
2
/*
2
 * <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>
3
 * <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>
3
 */
4
 */
4
5
5
/* basic fonts */
6
/* basic fonts */
6
7
7
@font-face {
8
@font-face {
8
  font-family: "LCARS";
9
  font-family: "LCARS";
9
  font-style: normal;
10
  font-style: normal;
10
  font-weight: normal;
11
  font-weight: normal;
11
  src: local("LCARS"), url(fonts/LCARS.ttf);
12
  src: local("LCARS"), url(fonts/LCARS.ttf);
12
}
13
}
13
14
14
/* EOT font created with WEFT on 2002-03-23 */
15
/* EOT font created with WEFT on 2002-03-23 */
15
@font-face {
16
@font-face {
16
  font-family: "Downloadable Haettenschweiler";
17
  font-family: "Downloadable Haettenschweiler";
17
  font-style: normal;
18
  font-style: normal;
18
  font-weight: normal;
19
  font-weight: normal;
19
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
20
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
20
}
21
}
21
22
22
/*
23
/*
23
@font-face {
24
@font-face {
24
  font-family:Webdings;
25
  font-family:Webdings;
25
  font-style:normal;
26
  font-style:normal;
26
  font-weight:normal;
27
  font-weight:normal;
27
  src:url(fonts/WEBDING0.eot);
28
  src:url(fonts/WEBDING0.eot);
28
}
29
}
29
*/
30
*/
30
31
31
@font-face {
32
@font-face {
32
  font-family: "Downloadable Zurich XCn BT";
33
  font-family: "Downloadable Zurich XCn BT";
33
  font-style: normal;
34
  font-style: normal;
34
  font-weight: normal;
35
  font-weight: normal;
35
  src: url(fonts/ZurichXCn.pfr);
36
  src: url(fonts/ZurichXCn.pfr);
36
}
37
}
37
38
38
/* basic display */
39
/* basic display */
39
40
40
* {
41
* {
41
  font-family: "LCARS",
42
  font-family: "LCARS",
42
    Haettenschweiler, "Downloadable Haettenschweiler",
43
    Haettenschweiler, "Downloadable Haettenschweiler",
43
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
44
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
44
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
45
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
45
  font-weight: normal;
46
  font-weight: normal;
46
}
47
}
47
       
48
       
48
body {
49
body {
49
  position: absolute;
50
  position: absolute;
50
  left: 204px;
51
  left: 204px;
51
  top: 216px;
52
  top: 216px;
52
  right: 0px;
53
  right: 0px;
53
  bottom: 0;
54
  bottom: 0;
54
 
55
 
55
  /* IE 5.5+ scrollbar colors */
56
  /* IE 5.5+ scrollbar colors */
56
/* from Mozilla LCARS Theme (2D style) */
57
/* from Mozilla LCARS Theme (2D style) */
57
  scrollbar-3dlight-color:#000;
58
  scrollbar-3dlight-color:#000;
58
  scrollbar-arrow-color:#000;
59
  scrollbar-arrow-color:#000;
59
  scrollbar-base-color:#000;
60
  scrollbar-base-color:#000;
60
  scrollbar-darkshadow-color:#000;
61
  scrollbar-darkshadow-color:#000;
61
  scrollbar-face-color:#99f;
62
  scrollbar-face-color:#99f;
62
  scrollbar-highlight-color:#99f;
63
  scrollbar-highlight-color:#99f;
63
  scrollbar-track-color:#000;
64
  scrollbar-track-color:#000;
64
  scrollbar-shadow-color:#99f;
65
  scrollbar-shadow-color:#99f;
65
66
66
  background-color: #000;
67
  background-color: #000;
67
  color: #99f;
68
  color: #99f;
68
  font-size: 131%; /* 134% */
69
  font-size: 131%; /* 134% */
69
}
70
}
70
71
71
h1, h2 {
72
h1, h2 {
72
  margin-top: 0;
73
  margin-top: 0;
73
  font-size: 120%;
74
  font-size: 120%;
74
  font-weight: normal;
75
  font-weight: normal;
75
}
76
}
76
77
77
#LCARS {
78
#LCARS {
78
/*   position: relative; */
79
/*   position: relative; */
79
  position: fixed;
80
  position: fixed;
80
  left: 4px;
81
  left: 4px;
81
  top: 0;
82
  top: 0;
82
  right: 4px;
83
  right: 4px;
83
}
84
}
84
85
85
.button {
86
.button {
86
  width: 100px;
87
  width: 100px;
87
  min-height: 40px;
88
  min-height: 40px;
88
  background-color: #c9c;
89
  background-color: #c9c;
89
  color: #000;
90
  color: #000;
90
  text-decoration: none;
91
  text-decoration: none;
91
  overflow: hidden;
92
  overflow: hidden;
92
}
93
}
93
94
94
#upper {
95
#upper {
95
  position: absolute;
96
  position: absolute;
96
  left: 0;
97
  left: 0;
97
  top: 0;
98
  top: 0;
98
  right: 0;
99
  right: 0;
99
  height: 180px;
100
  height: 180px;
100
 
101
 
101
  /* Prevents body text above */
102
  /* Prevents body text above */
102
  /* padding-top: 4px; */
103
  /* padding-top: 4px; */
103
  background-color: #c00;  
104
  background-color: #c00;  
104
  color: #fff;  
105
  color: #fff;  
105
}
106
}
106
107
107
.elbo {
108
.elbo {
108
  position: relative;
109
  position: relative;
109
  width: 100px;
110
  width: 100px;
110
  height: 62px;
111
  height: 62px;
111
  text-align: right;
112
  text-align: right;
112
}
113
}
113
114
114
.elbo-button {
115
.elbo-button {
115
  position: relative;
116
  position: relative;
116
  margin-top: 4px;
117
  margin-top: 4px;
117
  height: 40px;
118
  height: 40px;
118
  overflow: hidden;
119
  overflow: hidden;
119
}
120
}
120
121
121
.elbo span {
122
.elbo span {
122
  position: relative;
123
  position: relative;
123
  right: 4px;
124
  right: 4px;
124
}
125
}
125
126
126
@-webkit-keyframes swish-down-up {
127
@-webkit-keyframes swish-down-up {
127
  0% {
128
  0% {
128
    height: 0;
129
    height: 0;
129
    top: 84px;
130
    top: 84px;
130
  }
131
  }
131
132
132
  100% {
133
  100% {
133
  }
134
  }
134
}
135
}
135
136
136
#upper .elbo-button {
137
#upper .elbo-button {
137
  position: absolute;
138
  position: absolute;
138
  min-height: 0;
139
  min-height: 0;
139
  height: 84px;
140
  height: 84px;
140
 
141
 
141
  /* -webkit-animation-name: swish-down-up; */
142
  /* -webkit-animation-name: swish-down-up; */
142
  /* -webkit-animation-iteration-count: 1; */
143
  /* -webkit-animation-iteration-count: 1; */
143
  -webkit-animation-delay: 1s;
144
  -webkit-animation-delay: 1s;
144
  -webkit-animation-duration: 1s;
145
  -webkit-animation-duration: 1s;
145
}
146
}
146
147
147
#upper .elbo-button span {
148
#upper .elbo-button span {
148
  position: absolute;
149
  position: absolute;
149
  right: 4px;
150
  right: 4px;
150
  bottom: 4px;
151
  bottom: 4px;
151
}
152
}
152
153
153
#upper-elbo {
154
#upper-elbo {
154
  position: absolute;
155
  position: absolute;
155
  top: 92px;
156
  top: 92px;
156
}
157
}
157
158
158
#upper-elbo .elbo {
159
#upper-elbo .elbo {
159
  height: 62px;
160
  height: 62px;
160
  background-color: #9cf;
161
  background-color: #9cf;
161
  color: #000;
162
  color: #000;
162
}
163
}
163
164
164
@-webkit-keyframes swish-right-left {
165
@-webkit-keyframes swish-right-left {
165
  0% {
166
  0% {
166
    width: 0px;
167
    width: 0px;
167
    /* height: 0px; */
168
    /* height: 0px; */
168
    left: 100px;
169
    left: 100px;
169
    /* top: 62px; */
170
    /* top: 62px; */
170
  }
171
  }
171
172
172
  100% {
173
  100% {
173
  }
174
  }
174
}
175
}
175
176
176
#upper-elbo .elbo.left {
177
#upper-elbo .elbo.left {
177
  -moz-border-radius: 0 0 0 32px;
178
  -moz-border-radius: 0 0 0 32px;
178
  -webkit-border-radius: 0 0 0 32px;
179
  -webkit-border-radius: 0 0 0 32px;
179
  border-radius: 0 0 0 32px;
180
  border-radius: 0 0 0 32px;
180
  /* -webkit-animation-name: swish-right-left; */
181
  /* -webkit-animation-name: swish-right-left; */
181
  -webkit-animation-duration: 1s;
182
  -webkit-animation-duration: 1s;
182
}
183
}
183
184
184
#upper-elbo .elbo.left span {
185
#upper-elbo .elbo.left span {
185
  top: 4px;
186
  top: 4px;
186
}
187
}
187
188
188
#upper-elbo .elbo.right {
189
#upper-elbo .elbo.right {
189
  position: absolute;
190
  position: absolute;
190
  left: 100px;
191
  left: 100px;
191
  top: 0;
192
  top: 0;
192
  width: 78px;
193
  width: 78px;
193
  right: 0;
194
  right: 0;
194
}
195
}
195
196
196
#upper-elbo .elbo.right .black {
197
#upper-elbo .elbo.right .black {
197
  position: absolute;
198
  position: absolute;
198
  left: 0;
199
  left: 0;
199
  top: 0;
200
  top: 0;
200
  width: 100%;
201
  width: 100%;
201
  height: 44px;
202
  height: 44px;
202
  background-color: #000;
203
  background-color: #000;
203
  -moz-border-radius: 0 0 0 16px;
204
  -moz-border-radius: 0 0 0 16px;
204
  -webkit-border-radius: 0 0 0 16px;
205
  -webkit-border-radius: 0 0 0 16px;
205
  border-radius: 0 0 0 16px;
206
  border-radius: 0 0 0 16px;
206
}
207
}
207
208
208
#upper-elbo .elbo.right .terminator {
209
#upper-elbo .elbo.right .terminator {
209
  position: absolute;
210
  position: absolute;
210
  left: 82px;
211
  left: 82px;
211
  top: 44px;
212
  top: 44px;
212
  width: 18px;
213
  width: 18px;
213
  height: 18px;
214
  height: 18px;
214
  background-color: #f90;  
215
  background-color: #f90;  
215
}
216
}
216
217
217
#lower {
218
#lower {
218
  position: absolute;
219
  position: absolute;
219
  top: 158px;
220
  top: 158px;
220
}
221
}
221
222
222
#lower-elbo {
223
#lower-elbo {
223
  position: absolute;
224
  position: absolute;
224
}
225
}
225
226
226
#lower-elbo .elbo {
227
#lower-elbo .elbo {
227
  background-color: #c66;
228
  background-color: #c66;
228
  color: #000;
229
  color: #000;
229
}
230
}
230
231
231
#lower-elbo .elbo.left {
232
#lower-elbo .elbo.left {
232
  -moz-border-radius: 32px 0 0 0;
233
  -moz-border-radius: 32px 0 0 0;
233
  -webkit-border-radius: 32px 0 0 0;
234
  -webkit-border-radius: 32px 0 0 0;
234
  border-radius: 32px 0 0 0;
235
  border-radius: 32px 0 0 0;
235
}
236
}
236
237
237
#lower-elbo .elbo.left span {
238
#lower-elbo .elbo.left span {
238
  position: absolute;
239
  position: absolute;
239
  bottom: 4px;
240
  bottom: 4px;
240
}
241
}
241
242
242
#lower-elbo h2.elbo.left  {
243
#lower-elbo h2.elbo.left  {
243
  margin-bottom: 0;
244
  margin-bottom: 0;
244
}
245
}
245
246
246
#lower-elbo .elbo.right {
247
#lower-elbo .elbo.right {
247
  position: absolute;
248
  position: absolute;
248
  left: 100px;
249
  left: 100px;
249
  top: 0;
250
  top: 0;
250
  width: 100px;
251
  width: 100px;
251
}
252
}
252
253
253
#lower-elbo .elbo.right .black {
254
#lower-elbo .elbo.right .black {
254
  position: absolute;
255
  position: absolute;
255
  left: 0px;
256
  left: 0px;
256
  top: 18px;
257
  top: 18px;
257
  width: 100%;
258
  width: 100%;
258
  height: 45px;
259
  height: 45px;
259
  background-color: #000;
260
  background-color: #000;
260
  -webkit-border-radius: 16px 0 0 0;
261
  -webkit-border-radius: 16px 0 0 0;
261
  border-radius: 16px 0 0 0;
262
  border-radius: 16px 0 0 0;
262
}
263
}
263
264
264
p {
265
p {
265
  margin-top: 1em;
266
  margin-top: 1em;
266
  margin-bottom: 0;
267
  margin-bottom: 0;
267
  line-height: 1.5;
268
  line-height: 1.5;
268
  text-align: justify;
269
  text-align: justify;
269
}
270
}
270
271
271
p:first-child {
272
p:first-child {
272
  margin-top: 0;
273
  margin-top: 0;
273
}
274
}
274
275
275
#content {
276
#content {
276
  /* position: relative; */
277
  /* position: relative; */
277
}
278
}
278
279
279
#content a {
280
#content a {
280
  text-decoration: none;
281
  text-decoration: none;
281
}
282
}
282
283
283
#content #heading1 {
284
#content #heading1 {
284
  position: fixed;
285
  position: fixed;
285
  left: 204px;
286
  left: 204px;
286
  top: 180px;
287
  top: 180px;
287
  right: 4px;
288
  right: 4px;
288
  height: 42px;
289
  height: 42px;
289
  background-color: rgba(255, 0, 0, 0.5);
290
  background-color: rgba(255, 0, 0, 0.5);
290
  color: white;
291
  color: white;
291
  text-align: right;
292
  text-align: right;
292
}
293
}
293
294
294
#content #heading1 h1 {
295
#content #heading1 h1 {
295
  position: absolute;
296
  position: absolute;
296
  bottom: 6px;
297
  bottom: 6px;
297
  right: 0;
298
  right: 0;
298
  margin-bottom: 0;
299
  margin-bottom: 0;
299
  padding-right: 4px;
300
  padding-right: 4px;
300
}
301
}
301
302
302
#content a:link:hover,
303
#content a:link:hover,
303
#content a:link:focus
304
#content a:link:focus
304
{
305
{
305
  background-color:#000;
306
  background-color:#000;
306
  color: #f90;
307
  color: #f90;
307
}
308
}
308
309
309
#content a:link:active {
310
#content a:link:active {
310
  background-color:#000;
311
  background-color:#000;
311
  color: #fff;
312
  color: #fff;
312
}
313
}
313
314
314
#content a:link {
315
#content a:link {
315
  background-color:#000;
316
  background-color:#000;
316
  color:#fc9;
317
  color:#fc9;
317
}
318
}
318
319
319
#content a:visited:hover,
320
#content a:visited:hover,
320
#content a:visited:focus
321
#content a:visited:focus
321
{
322
{
322
  background-color:#000;
323
  background-color:#000;
323
  color:#f90;
324
  color:#f90;
324
}
325
}
325
326
326
#content a:visited:active {
327
#content a:visited:active {
327
  background-color:black;
328
  background-color:black;
328
  color:#fff;
329
  color:#fff;
329
}
330
}
330
331
331
#content a:visited {
332
#content a:visited {
332
  background-color:black;
333
  background-color:black;
333
  color:#c9c;
334
  color:#c9c;
334
}
335
}
335
 
336