Subversion Repositories LCARS

Rev

Rev 73 | Go to most recent revision | Details | Last modification | View Log | RSS feed

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