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