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