1 | |
---|
2 | /**************************************************************\ |
---|
3 | * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 * |
---|
4 | * T E C H H NN N I K K U U MM MM 2 2 9 9 * |
---|
5 | * T EEE C HHHH N N N I KK U U M M M 2 99999 * |
---|
6 | * T E C H H N NN I K K U U M M 2 9 * |
---|
7 | * T EEEE CCCC H H N N III K K UUUU M M 22222 9 * |
---|
8 | * * |
---|
9 | * technikum29.de - Design * |
---|
10 | * S C R E E N C S S * |
---|
11 | * * |
---|
12 | * ab Version v5.7 ist fresh.css das neue Standardcss fuer Bild- * |
---|
13 | * schirmanzeige. Das Screen-Design ist zwar fuer "kleine" * |
---|
14 | * Anzeigebereiche (Breite < 900px) besser geeignet, soll jedoch * |
---|
15 | * nicht mehr benutzt werden. Trotzdem steht es als mehr oder * |
---|
16 | * weniger "gleichwertige" Alternative dank XHTML-Quelltext- * |
---|
17 | * kompatibilitaet zur Verfuegung und laesst sich mit der * |
---|
18 | * Browserfunktion zum CSS-Wechseln aktivieren. * |
---|
19 | * Internet Explorer der Version 5 werden automatisch auf dieses * |
---|
20 | * Design umgestellt (Anteil der IE5s im Jahr 2008 an den * |
---|
21 | * Homepagebesuchern: 0% IE5 25% IE6, 25% IE7). * |
---|
22 | * * |
---|
23 | * fuer v5.7 wurde diese Datei so angepasst, dass sie sowohl fuer* |
---|
24 | * alte Quelltexte als auch neue gleichzeitig nutzbar ist. In der* |
---|
25 | * Uebergangsphase, wo /en noch alt ist, war dies noetig. * |
---|
26 | * 12.07.07 2:15 v5.7BETA * |
---|
27 | * $Id:: screen.css 187 2010-09-03 03:09:34Z sven $ * |
---|
28 | \**************************************************************/ |
---|
29 | |
---|
30 | /* |
---|
31 | ** Changelog seit v5.7: |
---|
32 | ** v5.7FINAL: Changelog gestartet |
---|
33 | ** v5.7.5: Diverse Anpassungen für besseres Aussehen |
---|
34 | ** v5.8: Einige Fixes, damit das Design zumindest noch |
---|
35 | ** benutzbar waere. |
---|
36 | ** |
---|
37 | ** |
---|
38 | ** |
---|
39 | */ |
---|
40 | |
---|
41 | body { |
---|
42 | margin: 0; padding: 0; color: #000; |
---|
43 | font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif; |
---|
44 | } |
---|
45 | |
---|
46 | .hidden { display: none; } |
---|
47 | img { border: none; } |
---|
48 | .center { text-align: center; } |
---|
49 | .left { text-align: left; } |
---|
50 | .block, .justify { text-align: justify; } |
---|
51 | .clear { /* clearendes element, inhalt egal */ |
---|
52 | display: block; clear: both; |
---|
53 | height: 2px; overflow: hidden; } |
---|
54 | |
---|
55 | /***** HEAD *****/ |
---|
56 | |
---|
57 | h1 { |
---|
58 | margin: 0; padding: 0; |
---|
59 | height: 67px; /* real height: 67px */ |
---|
60 | text-align: center; |
---|
61 | background-color: #5E7FAD; |
---|
62 | |
---|
63 | z-index: 12; |
---|
64 | } |
---|
65 | |
---|
66 | html > body h1 { |
---|
67 | /* For intelligent browsers */ |
---|
68 | height: 67px; |
---|
69 | } |
---|
70 | |
---|
71 | h1 a { |
---|
72 | position: absolute; |
---|
73 | top: 0; |
---|
74 | left: 50%; |
---|
75 | margin-left: -380px; |
---|
76 | z-index: 11; |
---|
77 | display: block; |
---|
78 | |
---|
79 | /* background-image: multilangual, so look at h1.[lang] a */ |
---|
80 | background-position: top center; |
---|
81 | background-repeat: no-repeat; |
---|
82 | width: 760px; |
---|
83 | height: 67px; |
---|
84 | } |
---|
85 | |
---|
86 | h1.de a { |
---|
87 | /* Deutscher Banner */ |
---|
88 | background-image: url(../img/banner/big.de-old.jpg); |
---|
89 | } |
---|
90 | |
---|
91 | h1.en a { |
---|
92 | /* English banner */ |
---|
93 | background-image: url(../img/banner/big.en-old.jpg); |
---|
94 | } |
---|
95 | |
---|
96 | h1.int a { |
---|
97 | /* International banner (Deutsch grosse Schrift, englisch klein drunter) */ |
---|
98 | background-image: url(../img/banner/int.jpg); |
---|
99 | } |
---|
100 | |
---|
101 | h1.none a { |
---|
102 | /* Banner with no subtitle in any language */ |
---|
103 | /* Banner mit ueberhaupt keinem Subtitel */ |
---|
104 | background-image: url(../img/banner/logo.jpg); |
---|
105 | } |
---|
106 | |
---|
107 | h1 a span { |
---|
108 | display: none; |
---|
109 | } |
---|
110 | |
---|
111 | h1 span.old, h1 span.d { |
---|
112 | /* span.d war der alte Name, span.old ist der neue */ |
---|
113 | background-color: #0C377A; |
---|
114 | display: block; |
---|
115 | width: 50%; |
---|
116 | height: 67px; |
---|
117 | position: absolute; |
---|
118 | top: 0; left: 0; |
---|
119 | z-index: 10; |
---|
120 | } |
---|
121 | |
---|
122 | h2 { |
---|
123 | font: bold 140% Verdana,Arial,Helvetica,sans-serif; |
---|
124 | margin: 30px 0 10px 0; |
---|
125 | padding: 0; |
---|
126 | } |
---|
127 | |
---|
128 | div#lang a { |
---|
129 | /* <div> mit Sprachauswahl (z.b. "englische Version") */ |
---|
130 | position: absolute; |
---|
131 | top: 70px; left: 0; |
---|
132 | display: block; text-align: center; |
---|
133 | width: 160px; height: 13px; |
---|
134 | margin: 0; padding: 1px; |
---|
135 | } |
---|
136 | |
---|
137 | div#lang ul, div#lang li { |
---|
138 | list-style: none; |
---|
139 | display: inline; |
---|
140 | margin: 0; |
---|
141 | padding: 0; |
---|
142 | } |
---|
143 | |
---|
144 | div#lang span, div#lang strong { |
---|
145 | display: none; |
---|
146 | } |
---|
147 | |
---|
148 | div#lang a { |
---|
149 | color: #416397; |
---|
150 | font-size: 90%; |
---|
151 | } |
---|
152 | |
---|
153 | div#lang a .de, div#lang a br { |
---|
154 | display: none; |
---|
155 | } |
---|
156 | |
---|
157 | #h1-subtitle { |
---|
158 | /* <h1> border-hilfsmittel, ehemals #h1border */ |
---|
159 | background-color: #C8C8C8; |
---|
160 | color: #C8C8C8; /* damit beschriftung nicht stoert */ |
---|
161 | position: absolute; z-index: 10; |
---|
162 | border-top: 1px solid #3A6198; |
---|
163 | top: 67px; left: 0; |
---|
164 | display: block; overflow: hidden; |
---|
165 | height: 3px; /* fuer IE: 2px inhalt + 1px rahmen */ |
---|
166 | width: 100%; |
---|
167 | margin: 0; padding: 0; |
---|
168 | } |
---|
169 | |
---|
170 | /* fuer intelligente browser: 2px inhalt + rahmen */ |
---|
171 | html>body #h1-subtitle { height: 2px; } |
---|
172 | |
---|
173 | |
---|
174 | |
---|
175 | /***** GENERAL *****/ |
---|
176 | |
---|
177 | #menu { |
---|
178 | /* Menue-<div> */ |
---|
179 | position: absolute; |
---|
180 | left: 0; top: 81px; |
---|
181 | width: 160px; |
---|
182 | padding-top: 10px; |
---|
183 | } |
---|
184 | |
---|
185 | #content { |
---|
186 | /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */ |
---|
187 | margin-left: 160px; |
---|
188 | padding: 10px; |
---|
189 | |
---|
190 | min-height: 900px; |
---|
191 | height: 900px; /* IE workaround */ |
---|
192 | overflow: visible; |
---|
193 | } |
---|
194 | |
---|
195 | html>body #content { height: auto; } |
---|
196 | |
---|
197 | #page { |
---|
198 | /* Fuer seiten ohne #menu */ |
---|
199 | margin: 10px; |
---|
200 | } |
---|
201 | |
---|
202 | |
---|
203 | /***** MENU *****/ |
---|
204 | |
---|
205 | #menu ul, #menu li { |
---|
206 | list-style: none; |
---|
207 | margin: 0; padding: 0; |
---|
208 | display: inline; |
---|
209 | line-height: 100%; |
---|
210 | } |
---|
211 | |
---|
212 | #menu a { |
---|
213 | text-decoration: none; |
---|
214 | } |
---|
215 | |
---|
216 | #menu a span { |
---|
217 | /* <span> </span>-Teile, die in screen.css nicht gebraucht werden */ |
---|
218 | display: none; |
---|
219 | } |
---|
220 | |
---|
221 | #menu em.l1 span.hidden { |
---|
222 | /* kleine Notloesung, um "Kommunikations-<br/>technik" mit screen.css |
---|
223 | darzustellen, mit fresh.css aber nur "Kommunikationstechnik" */ |
---|
224 | display: inline; |
---|
225 | } |
---|
226 | |
---|
227 | /* oben: Name mit alten quelltexten, unten Kompatibilitaet */ |
---|
228 | #menu li .t, |
---|
229 | #menu li.l1 a, #menu li em { /* #menu li a.on */ |
---|
230 | /* Meneintrag obersten Levels */ |
---|
231 | color: #000; |
---|
232 | margin: 1.1em 0 2px 1px; |
---|
233 | display: block; |
---|
234 | border-width: 1px 1px 1px 0; |
---|
235 | border-style: solid; |
---|
236 | border-color: #305992; |
---|
237 | padding: 1px 1px 1px 3px; |
---|
238 | text-align: center; |
---|
239 | font-style: normal; |
---|
240 | } |
---|
241 | |
---|
242 | #menu li a.t:link, #menu li a.t:visited, |
---|
243 | #menu li.l1 a:link, #menu li.l1 a:visited { |
---|
244 | color: #92A2B9; border-color: #97ABC8; |
---|
245 | } |
---|
246 | |
---|
247 | #menu li a.t:hover, #menu li a.t:active, #menu li a.t:focus, |
---|
248 | #menu li.l1 a:hover, #menu li.l1 a:active, #menu li.l1 a:focus { |
---|
249 | color: #000; border-color: #305992; |
---|
250 | } |
---|
251 | |
---|
252 | #menu li.on a.t, #menu li.on span.t, |
---|
253 | #menu li.l1 a.on, #menu li em { |
---|
254 | /* Meneintrag oberstes Level, das selektiert ist */ |
---|
255 | color: #000; border-color: #305992; |
---|
256 | /* Achtung wegen Ueberschreibung unten... */ |
---|
257 | } |
---|
258 | |
---|
259 | #menu li li a { |
---|
260 | /* Submenueeintraege */ |
---|
261 | display: block; |
---|
262 | margin: 10px 10px 1px 10px; |
---|
263 | color: #224B88; |
---|
264 | |
---|
265 | background-position: 0 2px; |
---|
266 | background-repeat: no-repeat; |
---|
267 | padding-left: 13px; |
---|
268 | } |
---|
269 | |
---|
270 | #menu li li a:link, #menu li li a:visited { |
---|
271 | background-image: url(../img/double.a.png); |
---|
272 | } |
---|
273 | |
---|
274 | #menu li li a:hover { |
---|
275 | color: #882224; |
---|
276 | background-image: url(../img/double-hot.a.png); |
---|
277 | } |
---|
278 | |
---|
279 | #menu li li a.on { |
---|
280 | /* selektierter Submenueneintrag */ |
---|
281 | color: #112544; |
---|
282 | background-image: url(../img/screen.design/square.a.png) !important; |
---|
283 | border: none; |
---|
284 | } |
---|
285 | |
---|
286 | /* Es folgen kurze Loesungen fuer die zweite (dritte) Gliederungsebene */ |
---|
287 | #menu li.l3 ul a { |
---|
288 | margin-left: 20px; |
---|
289 | } |
---|
290 | |
---|
291 | #menu li.l3 em { |
---|
292 | border-left-width: 1px; |
---|
293 | margin-left: 10px; |
---|
294 | } |
---|
295 | |
---|
296 | #sidebar-footnote , #menu .box { |
---|
297 | /* Fußnoten, die eigentlich nur das freshdesign betreffen sollten */ |
---|
298 | /* Und ueberhaupt sollen solche neuen Elemente nicht in nostalgischen Designs */ |
---|
299 | /* verwendet werden */ |
---|
300 | display: none; |
---|
301 | } |
---|
302 | |
---|
303 | |
---|
304 | /***** CONTENT *****/ |
---|
305 | |
---|
306 | p { text-align: justify; } |
---|
307 | p.text-left { text-align: left; } |
---|
308 | |
---|
309 | ul.text-left li, li.text-left { text-align: left; } |
---|
310 | |
---|
311 | a:link, a:visited { |
---|
312 | color: #224B88; |
---|
313 | text-decoration: underline; |
---|
314 | } |
---|
315 | |
---|
316 | a:hover, a:active, a:focus { |
---|
317 | color: #882224; |
---|
318 | text-decoration: underline; |
---|
319 | } |
---|
320 | |
---|
321 | /* |
---|
322 | Links mit Pfeilen: a.go & a.arrow: |
---|
323 | Momentan noch kein IE-Workaround gefunden |
---|
324 | (Bei mehrzeiligen Links pfeile im text) - |
---|
325 | daher momentan nur intelligenten Browsern |
---|
326 | vorenthalten |
---|
327 | Siehe auch /CHANGELOG, /TODO |
---|
328 | */ |
---|
329 | |
---|
330 | html>body a.arrow, |
---|
331 | html>body a.go { |
---|
332 | background-position: bottom left; |
---|
333 | background-repeat: no-repeat; |
---|
334 | padding-left: 13px; |
---|
335 | } |
---|
336 | |
---|
337 | html>body a.arrow:link, |
---|
338 | html>body a.arrow:visited, |
---|
339 | html>body a.go:link, |
---|
340 | html>body a.go:visited { |
---|
341 | background-image: url(../img/double.a.png); |
---|
342 | } |
---|
343 | |
---|
344 | html>body a.arrow:hover, |
---|
345 | html>body a.arrow:active, |
---|
346 | html>body a.arrow:focus, |
---|
347 | html>body a.go:hover, |
---|
348 | html>body a.go:active, |
---|
349 | html>body a.go:focus { |
---|
350 | background-image: url(../img/double-hot.a.png); |
---|
351 | } |
---|
352 | |
---|
353 | /* Navigationslisten: <ul class="nav">/<ul id="nav"> */ |
---|
354 | |
---|
355 | ul.nav, ul#nav { |
---|
356 | list-style: none; |
---|
357 | padding: 0; |
---|
358 | } |
---|
359 | |
---|
360 | ul.nav li, ul#nav li { |
---|
361 | margin: 0; padding: 0; |
---|
362 | } |
---|
363 | |
---|
364 | ul.nav li a, ul#nav li a { |
---|
365 | padding-left: 13px; |
---|
366 | background-position: bottom left; |
---|
367 | background-repeat: no-repeat; |
---|
368 | } |
---|
369 | |
---|
370 | ul.nav li a:link, ul#nav li a:link, |
---|
371 | ul.nav li a:visited, ul#nav li a:visited { |
---|
372 | background-image: url(../img/double.a.png); |
---|
373 | } |
---|
374 | |
---|
375 | ul.nav li a:hover, ul#nav li a:hover, |
---|
376 | ul.nav li a:active, ul#nav li a:active, |
---|
377 | ul.nav li a:focus, ul#nav li a:focus { |
---|
378 | background-image: url(../img/double-hot.a.png); |
---|
379 | } |
---|
380 | |
---|
381 | /* Definitionslisten */ |
---|
382 | dt { font-weight: bold; } |
---|
383 | dt em, dt i { font-weight: normal; } |
---|
384 | |
---|
385 | |
---|
386 | |
---|
387 | |
---|
388 | /****** FOOTER *****/ |
---|
389 | |
---|
390 | /* Kompatibiltaet: Alt #rel, neu #footer! */ |
---|
391 | #footer { |
---|
392 | /* seitenrelationenleiste ganz unten */ |
---|
393 | clear: both; padding: 0; |
---|
394 | height: 40px; |
---|
395 | position: relative; /* für IEs #footer .border */ |
---|
396 | |
---|
397 | border-top: 2px solid #C8C8C8; color: #eee; |
---|
398 | background: #5F80AE url(../img/screen.design/body.bg.png) repeat-y top left; |
---|
399 | } |
---|
400 | |
---|
401 | #footer .border { |
---|
402 | /* Rahmen-hilfsmittel, welches als Doppelfunktion das ehemalige .space |
---|
403 | übernimmt, um IE eine richtige Höhe anzuzeigen */ |
---|
404 | border-top: 1px solid #3A6198; |
---|
405 | overflow: hidden; height: 1px; |
---|
406 | } |
---|
407 | |
---|
408 | * html #footer .border { |
---|
409 | position: absolute; |
---|
410 | width: 100%; height: 40px; |
---|
411 | } |
---|
412 | |
---|
413 | #footer b { |
---|
414 | font-weight: normal; /* Kompensierung des neuen Fettdrucks */ |
---|
415 | text-decoration: underline; /* Nur die erste Zeile war damals Link */ |
---|
416 | } |
---|
417 | |
---|
418 | div#footer ul, div#footer li { |
---|
419 | list-style: none; |
---|
420 | margin: 0; padding: 0; |
---|
421 | } |
---|
422 | |
---|
423 | div#footer li a { |
---|
424 | color: #FFF; |
---|
425 | text-decoration: none; |
---|
426 | } |
---|
427 | |
---|
428 | div#footer li { |
---|
429 | background-repeat: no-repeat; |
---|
430 | } |
---|
431 | |
---|
432 | div#footer li.up, div#footer li.prev { |
---|
433 | background-position: 0 5px; |
---|
434 | padding-left: 13px; |
---|
435 | } |
---|
436 | |
---|
437 | div#footer li.up { |
---|
438 | float: left; width: 160px; margin: 1px; |
---|
439 | background-image: url(../img/screen.design/up.rel.gif); |
---|
440 | } |
---|
441 | |
---|
442 | div#footer li.next { |
---|
443 | float: right; width: 30%; |
---|
444 | text-align: right; |
---|
445 | padding-right: 13px; |
---|
446 | background-image: url(../img/screen.design/next.rel.gif); |
---|
447 | background-position: right top; |
---|
448 | /* background-position: right 2px; nicht valide? */ |
---|
449 | } |
---|
450 | |
---|
451 | div#footer li.prev { |
---|
452 | float: left; width: 30%; |
---|
453 | text-align: left; |
---|
454 | background-image: url(../img/screen.design/prev.rel.gif); |
---|
455 | } |
---|
456 | |
---|
457 | #copyright { |
---|
458 | /* Wer wirklich auf Screen umschaltet, ist kein Idiot, der einen Copyright-Vermerk braucht */ |
---|
459 | display: none; |
---|
460 | } |
---|
461 | |
---|
462 | /* EOF */ |
---|