1 | /**********************************************************************\ |
---|
2 | | _ _ _ | |
---|
3 | | /\ \ /\ \ / /\ technikum29.de Common Styles | |
---|
4 | | \_\ \ / \ \ / / \ Version 5.8 | |
---|
5 | | /\__ \ / /\ \ \ / / /\ \ | |
---|
6 | | / /_ \ \\/_/\ \ \/_/ /\ \ \ Diese CSS-Datei implementiert | |
---|
7 | | / / /\ \ \ / / /\ \ \_\ \ \ das Konzept, alle "Spezial- | |
---|
8 | | / / / \/_/ / / / \ \/__\ \ \ styles" von alen Seiten an | |
---|
9 | | / / / / / / _ \_____\ \ \ einer Stelle zu sammeln. Das | |
---|
10 | | / / / / / /_/\_\ \ \ \ erhöht die Ladezeit der Seiten | |
---|
11 | |/_/ / / /_____/ / \ \ \ nur minimal, vermindert den | |
---|
12 | |\_\/ \________/ \_\/ Wartungsaufwand aber enorm. | |
---|
13 | | Dieses Konzept wurde seit | |
---|
14 | | Version 5.7 erfolgreich angewandt. Mittlerweile sind alle anderen | |
---|
15 | | Zusatz-Stylesheets hier migriert, und zwar extra.css, details.css | |
---|
16 | | sowie print.css. | |
---|
17 | | | |
---|
18 | | $Id:: common.css 246 2011-12-13 21:55:20Z heribert $ | |
---|
19 | | | |
---|
20 | +----------------------------------------------------------------------+ |
---|
21 | | | |
---|
22 | | Changelog seit v5.7: | |
---|
23 | | | |
---|
24 | | v5.7FINAL: eingeführt | |
---|
25 | | v5.7.11: Univac-Spezialstyle neu | |
---|
26 | | v5.7.14: .desc-right zurück ins Leben gerufen | |
---|
27 | | v5.7.15: .bordered zum allgemeineren Rahmenelement | |
---|
28 | | v5.8.0: Erheblich aufgeräumt, details.css migriert, umgestellt. | |
---|
29 | | Zu jedem Spezialstyle gibt es jetzt einen Pflicht- | |
---|
30 | | kasten, der ausgefüllt werden soll, der Übersicht | |
---|
31 | | halber. | |
---|
32 | | | |
---|
33 | \**********************************************************************/ |
---|
34 | |
---|
35 | |
---|
36 | /**********************************************************************\ |
---|
37 | | SPEZIAL STYLE | |
---|
38 | +----------------------------------------------------------------------+ |
---|
39 | | Für: Neue Startseiten, (de|en)/index.shtml | |
---|
40 | | In Benutzung seit: v5.7 (Redesign) | |
---|
41 | | Besonderheiten: Zweispaltiges Design mit Boxen | |
---|
42 | | Zuletzt geändert: v5.7 | |
---|
43 | | 08.04.2011: Startseitendesign noch mal geändert in so einen | |
---|
44 | | grauen Hintergrund und so | |
---|
45 | | | |
---|
46 | \**********************************************************************/ |
---|
47 | |
---|
48 | |
---|
49 | /* Spezialstyle der neuen Startseite: */ |
---|
50 | .body-wrapper.start { |
---|
51 | background-image: url(../img/fresh.design/sidebar-stripe.gif); |
---|
52 | } |
---|
53 | |
---|
54 | .start #wrapper { background-image: url("../img/fresh.design/menu-bg/binary-transparent.png"); } |
---|
55 | |
---|
56 | .startseiten-design div { |
---|
57 | padding: 1em; |
---|
58 | margin: 0; |
---|
59 | /*border: 1px solid blue;*/ |
---|
60 | } |
---|
61 | |
---|
62 | #content .startseiten-design div h2, /* id zur Bedeutungssteigerung */ |
---|
63 | .startseiten-design div h2 { |
---|
64 | font-weight: bold; |
---|
65 | font-size: 113%; |
---|
66 | font-family: inherit; /* 04.01.10: Neue Header-Styles */ |
---|
67 | border: none; /* neutralisieren */ |
---|
68 | color: #224B88; /* gleiche Farbe wie Navilinks rechts */ |
---|
69 | } |
---|
70 | |
---|
71 | .startseiten-design div ul { |
---|
72 | text-align: justify; |
---|
73 | margin: 0; |
---|
74 | padding-left: 1em; |
---|
75 | } |
---|
76 | |
---|
77 | .startseiten-design div.foto, |
---|
78 | #startseitenfoto-en { |
---|
79 | /* #startseitenfoto-en für /en, da gibts kein .startseiten-design */ |
---|
80 | border: none; |
---|
81 | padding: 0; |
---|
82 | margin: 2em auto; |
---|
83 | background: none; |
---|
84 | width: 338px; height: 228px; /* Bildgrößen */ |
---|
85 | position: relative; |
---|
86 | } |
---|
87 | |
---|
88 | .startseiten-design .foto p { |
---|
89 | position: absolute; |
---|
90 | bottom: 0; right: 0; |
---|
91 | margin: 0 3px 2px 0; |
---|
92 | text-align: right; |
---|
93 | color: #fff; |
---|
94 | font-size: 90%; |
---|
95 | font-weight: bold; |
---|
96 | } |
---|
97 | |
---|
98 | /* Spezialstyle auf der Startseite: */ |
---|
99 | /* "Neuzugaenge" (wurde aufgeloest zugunsten eigener Seite) */ |
---|
100 | /* (d.h. die folgenden Styles werden nicht mehr gebraucht!) */ |
---|
101 | div.aktuell { |
---|
102 | /* "Aktuelle Bilder"-Bereich */ |
---|
103 | border: 1px solid #7090C0; |
---|
104 | /*margin-top: 2em;*/ |
---|
105 | padding: 1.5em; |
---|
106 | clear: both; |
---|
107 | /** fuer rechts floatende Aktuell-Box: */ |
---|
108 | /* float: right; width: 300px; margin: 10px 0 20px 20px;*/ |
---|
109 | } |
---|
110 | |
---|
111 | /* gegen kaputte Rahmen bei IEs, danke an Jeena */ |
---|
112 | * html div.aktuell { position: relative; } |
---|
113 | /* geht doch nicht --> er sieht es ploetzlich relativ zu der "Ausgansbrowsergroesse" */ |
---|
114 | |
---|
115 | div.aktuell h2 { |
---|
116 | margin: 1px; |
---|
117 | padding: 0; |
---|
118 | color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */ |
---|
119 | font-size: 126%; |
---|
120 | } |
---|
121 | |
---|
122 | div.aktuell .stand { |
---|
123 | font-size: 80%; |
---|
124 | text-align: center; |
---|
125 | margin-top: 1px; |
---|
126 | } |
---|
127 | |
---|
128 | div.aktuell p { |
---|
129 | margin: 20px 4px; |
---|
130 | /* clear: both;*/ |
---|
131 | } |
---|
132 | |
---|
133 | |
---|
134 | /* Ursprüngliches völlig freies Spezialstyle der neuen Startseite, |
---|
135 | letzendlich doch nicht mehr genutzt |
---|
136 | weil nicht völlig unabhängig von der Schriftgröße. |
---|
137 | */ |
---|
138 | /* |
---|
139 | @media screen,projection { \* nicht drucken *\ |
---|
140 | |
---|
141 | .startseite-freely { |
---|
142 | position: relative; |
---|
143 | height: 71em; |
---|
144 | \*border: 1px solid red;*\ |
---|
145 | } |
---|
146 | |
---|
147 | |
---|
148 | .startseite-freely .besonderes { |
---|
149 | top: 0; |
---|
150 | right: 35.3%; \* Damit Position von rechts fix ist, entspricht left: -1"em" *\ |
---|
151 | width: 60%; |
---|
152 | max-width: 27em; \* Damit Zusammenhang mit .wo gegeben ist auf großem Monitor *\ |
---|
153 | } |
---|
154 | |
---|
155 | .startseite-freely .wann { |
---|
156 | right: -1%; |
---|
157 | top: 6em; |
---|
158 | width: 30%; |
---|
159 | } |
---|
160 | |
---|
161 | .startseite-freely .wo { |
---|
162 | right: -1%; |
---|
163 | top: 28.7em; |
---|
164 | width: 77%; |
---|
165 | height: 228px; \* Um bild zu fassen *\ |
---|
166 | } |
---|
167 | |
---|
168 | .startseite-freely .wo h2, .startseite-freely .wo ul { |
---|
169 | margin-right: 338px; \* Bild *\ |
---|
170 | padding-right: 1em; |
---|
171 | } |
---|
172 | |
---|
173 | .startseite-freely .wo .foto { |
---|
174 | \* wird realtiv zu Vater .wo positioniert *\ |
---|
175 | right: 0; |
---|
176 | top: 0; |
---|
177 | background: none; |
---|
178 | border: none; |
---|
179 | z-index: 10; |
---|
180 | } |
---|
181 | |
---|
182 | .startseite-freely .wo .foto p { |
---|
183 | position: absolute; |
---|
184 | bottom: 2em; \* kompensiert genau den .foto-padding *\ |
---|
185 | left: 2em; \* und kommt (fast) direkt ins Foto *\ |
---|
186 | margin: 0 0 6px 0; \* ums nicht an die Bildkante zu packen *\ |
---|
187 | width: 329px; \* fast die bildbreite... *\ |
---|
188 | text-align: right; \* ...ergo nicht an den rechten Rand gepatscht *\ |
---|
189 | color: #fff; |
---|
190 | font-size: 90%; |
---|
191 | font-weight: bold; |
---|
192 | } |
---|
193 | |
---|
194 | .startseite-freely .wen { |
---|
195 | top: 41em; |
---|
196 | left: -4.5%; |
---|
197 | width: 53%; |
---|
198 | } |
---|
199 | |
---|
200 | .startseite-freely .erwartung { |
---|
201 | top: 46em; |
---|
202 | right: -21.15%; |
---|
203 | width: 57%; |
---|
204 | z-index: 1; \* um über .homepage zu stehen *\ |
---|
205 | } |
---|
206 | |
---|
207 | .startseite-freely .homepage { |
---|
208 | top: 59em; |
---|
209 | right: -28.2%; |
---|
210 | width: 57%; |
---|
211 | } |
---|
212 | *\ |
---|
213 | |
---|
214 | } \* media -> printausschluss *\ |
---|
215 | */ |
---|
216 | |
---|
217 | /* Ende aller Spezialstyles der Startseite */ |
---|
218 | |
---|
219 | |
---|
220 | /**********************************************************************\ |
---|
221 | | SPEZIAL STYLE | |
---|
222 | +----------------------------------------------------------------------+ |
---|
223 | | Für: IC-Technik, /de/rechnertechnik/ic-technik.shtm | |
---|
224 | | In Benutzung seit: v5.7 oder so (quick and dirty) | |
---|
225 | | Besonderheiten: Floatendes Bild links und <ul> daneben, das | |
---|
226 | | macht haessliche Effekte. Diese Quick & Dirt- | |
---|
227 | | Lösung sollte eigentlich gar nicht mehr in | |
---|
228 | | Benutzung sein, ist es aber trotzdem irgendwie | |
---|
229 | | noch. | |
---|
230 | | Zuletzt geändert: v5.7 oder so. | |
---|
231 | | | |
---|
232 | \**********************************************************************/ |
---|
233 | |
---|
234 | p.h-ul { text-align: left; } |
---|
235 | ul.h-ul { margin: 0; margin-left: 380px; } |
---|
236 | |
---|
237 | |
---|
238 | /**********************************************************************\ |
---|
239 | | SPEZIAL STYLE | |
---|
240 | +----------------------------------------------------------------------+ |
---|
241 | | Für: UNIVAC 9400-Gebiet: | |
---|
242 | | /de/rechnertechnik/univac9400.shtm | |
---|
243 | | /de/geraete/univac9400/ | |
---|
244 | | In Benutzung seit: v5.5.2 wegen Designkorrektur, Spezialisierung | |
---|
245 | | auf der Univac-Seite | |
---|
246 | | Teile später in v5.7 und v5.8 hinzugekommen | |
---|
247 | | Besonderheiten: Auf der Univac-Hauptseite: | |
---|
248 | | Links floatende Bildergalerie, einfache Listen- | |
---|
249 | | struktur gebraucht, zudem einmalig. | |
---|
250 | | Außerdem: Panoramabildmenüverschiebung. | |
---|
251 | | Zuletzt geändert: v5.7.11 | |
---|
252 | | | |
---|
253 | \**********************************************************************/ |
---|
254 | |
---|
255 | ul.univac-thumbs, ul.univac-thumbs li { |
---|
256 | list-style: none; |
---|
257 | margin: 0; padding: 0; |
---|
258 | float: left; /* beseitigt Bug mit class="box left/right" im Text. */ |
---|
259 | } |
---|
260 | |
---|
261 | ul.univac-thumbs li { |
---|
262 | float: left; |
---|
263 | margin: 10px 50px 20px 0; |
---|
264 | clear: left; |
---|
265 | } |
---|
266 | |
---|
267 | ul.univac-thumbs li img { |
---|
268 | width: 238px; /* um unschönen textreinfließeffekt zu umgehen */ |
---|
269 | } |
---|
270 | |
---|
271 | /* Univac-Seite seit 5.7.11: Menü unter Panoramabild |
---|
272 | Quick&Dirty-Lösung, angelehnt an Navigationsleistenhintergrundrealisierungen */ |
---|
273 | .univac #wrapper #menu { |
---|
274 | margin-top: 520px; /* circa... */ |
---|
275 | } |
---|
276 | |
---|
277 | /* Seit 08.08.2010: Per Javascript-Anpassung */ |
---|
278 | body.greater1280 .univac #wrapper #menu { margin-top: 0; } |
---|
279 | |
---|
280 | /* Univac-Kosten-Seite seit v5.8.0: Ein absolut positioniertes Bild |
---|
281 | (Illustration, soll an Seitennavigation klatschen) am Ende der |
---|
282 | #content-Box, daher dieser künstliche Rand: */ |
---|
283 | .univac-kosten #content { |
---|
284 | min-height: inherit; |
---|
285 | margin-bottom: 5px; |
---|
286 | padding-bottom: 348px; |
---|
287 | } |
---|
288 | |
---|
289 | /* Rand links, damit Liste im Univac-Artikel ordentlich aussieht (Jan 2010) */ |
---|
290 | .univac li { |
---|
291 | margin-left: 270px; |
---|
292 | } |
---|
293 | |
---|
294 | |
---|
295 | /**********************************************************************\ |
---|
296 | | SPEZIAL STYLE | |
---|
297 | +----------------------------------------------------------------------+ |
---|
298 | | Für: Frühe Computer | |
---|
299 | \**********************************************************************/ |
---|
300 | |
---|
301 | .fruehe-computer #wrapper #menu { |
---|
302 | margin-top: 670px; /* circa... */ |
---|
303 | } |
---|
304 | |
---|
305 | /* Seit 08.08.2010: Per Javascript-Anpassung */ |
---|
306 | body.greater1280 .fruehe-computer #wrapper #menu { margin-top: 0; } |
---|
307 | |
---|
308 | |
---|
309 | /**********************************************************************\ |
---|
310 | | SPEZIAL STYLE | |
---|
311 | +----------------------------------------------------------------------+ |
---|
312 | | Für: Fax- und Schreibtechnik, Startseite, | |
---|
313 | | DEC-Geschichte | |
---|
314 | | /de/kommunikationstechnik/faxtechnik.shtm | |
---|
315 | | /de/index.shtml | |
---|
316 | | /de/geraete/dec-geschichte.shtm | |
---|
317 | | /en/devices/dec-history.shtm | |
---|
318 | | In Benutzung seit: Prinzipiell seit Ewigkeiten (v5.0?) | |
---|
319 | | Startseite nutzt Stil mit seit v5.7 | |
---|
320 | | Besonderheiten: Mehrspaltiger Inhalt (Originalzitat), nach | |
---|
321 | | dem simplen Schema: | |
---|
322 | | | |
---|
323 | | <div class="cols"> | |
---|
324 | | <div class="leftcol">linke spalte</div> | |
---|
325 | | <div class="rightcol">rechte spalte</div> | |
---|
326 | | </div> | |
---|
327 | | | |
---|
328 | | Zuletzt geändert: zur v5.7 vielleicht | |
---|
329 | | | |
---|
330 | \**********************************************************************/ |
---|
331 | |
---|
332 | #content .cols { |
---|
333 | /* Mehrspaltiger Inhalt. */ |
---|
334 | } |
---|
335 | |
---|
336 | #content .cols .leftcol, #content .cols .rightcol { |
---|
337 | padding: 5px 7px; |
---|
338 | /* border: 3px dashed red;*/ |
---|
339 | } |
---|
340 | |
---|
341 | #content .cols .leftcol { |
---|
342 | float: left; width: 47%; |
---|
343 | } |
---|
344 | |
---|
345 | #content .cols .rightcol { |
---|
346 | float: right; width: 47%; |
---|
347 | } |
---|
348 | |
---|
349 | #content blockquote, .content blockquote { |
---|
350 | /* bis jetzt nur genutzt in <faxtechnik> */ |
---|
351 | /* Und <blockquote> auf einer WANG-Extraseite, Bedienungsanleitung */ |
---|
352 | margin: 5px 0px; |
---|
353 | padding: 0px; |
---|
354 | color: #2F319D; |
---|
355 | text-align: justify; |
---|
356 | } |
---|
357 | |
---|
358 | /**********************************************************************\ |
---|
359 | | SPEZIAL STYLE | |
---|
360 | +----------------------------------------------------------------------+ |
---|
361 | | Für: DEC-Geschichte | |
---|
362 | | /de/geraete/dec-geschichte.shtm | |
---|
363 | | /en/devices/dec-history.shtm | |
---|
364 | | In Benutzung seit: Wohl schon recht lange. (v5.0?) | |
---|
365 | | Besonderheiten: Definitionslisten ohne Einschub und mit dick- | |
---|
366 | | gedrucktem <dt>. | |
---|
367 | | | |
---|
368 | | Zuletzt geändert: zur v5.7 vielleicht | |
---|
369 | | | |
---|
370 | \**********************************************************************/ |
---|
371 | |
---|
372 | #content dt { |
---|
373 | margin-top: 1.2em; |
---|
374 | font-weight: bold; |
---|
375 | display: block; |
---|
376 | } |
---|
377 | |
---|
378 | #content dd { |
---|
379 | text-align: justify; |
---|
380 | margin: 0; padding: 0; |
---|
381 | } |
---|
382 | |
---|
383 | /**********************************************************************\ |
---|
384 | | SPEZIAL STYLE | |
---|
385 | +----------------------------------------------------------------------+ |
---|
386 | | Für: Telefunken T40W-Extraseite, die Javascript- | |
---|
387 | | Einblendeffekt bietet - Absolute Positionierung | |
---|
388 | | von Bildern uebereinander mit dynamischer | |
---|
389 | | opacity. | |
---|
390 | | /de/geraete/telefunken_t40w.shtm | |
---|
391 | | /en/devices/telefunken_t40w.shtm | |
---|
392 | | In Benutzung seit: Maerz 2009 | |
---|
393 | | Besonderheiten: Absolut spezifisch fuer die aktuellen | |
---|
394 | | Gegebenheiten. | |
---|
395 | | | |
---|
396 | \**********************************************************************/ |
---|
397 | |
---|
398 | .telefunkent40w #rel, |
---|
399 | .telefunkent40w #zu, |
---|
400 | .telefunkent40w #offen { |
---|
401 | position: absolute; |
---|
402 | width: 930px; |
---|
403 | height: 569px; |
---|
404 | top: 0; left: 0; |
---|
405 | } |
---|
406 | |
---|
407 | .telefunkent40w #beschriftung { |
---|
408 | position: absolute; |
---|
409 | top: -53px; |
---|
410 | left: -36px; |
---|
411 | } |
---|
412 | |
---|
413 | .telefunkent40w #zu { z-index: 3 } |
---|
414 | .telefunkent40w #beschriftung { z-index: 2; } |
---|
415 | .telefunkent40w #offen { z-index: 1; } |
---|
416 | .telefunkent40w #rel { |
---|
417 | position: relative; |
---|
418 | margin-bottom: 80px; |
---|
419 | margin-top: 60px; |
---|
420 | } |
---|
421 | |
---|
422 | |
---|
423 | /**********************************************************************\ |
---|
424 | | SPEZIAL STYLE | |
---|
425 | +----------------------------------------------------------------------+ |
---|
426 | | Für: "Was gibt es neues?"-Seite, komisches Listen- | |
---|
427 | | Aussehen. | |
---|
428 | | /de/news.shtm | |
---|
429 | | /en/news.shtm | |
---|
430 | | In Benutzung seit: Juli 2009 | |
---|
431 | | Besonderheiten: Nicht sonderlich originell, nur eben etwas | |
---|
432 | | spezifisch. | |
---|
433 | | | |
---|
434 | \**********************************************************************/ |
---|
435 | |
---|
436 | ul.news-feed li { |
---|
437 | margin-bottom: 1.2em; |
---|
438 | } |
---|
439 | |
---|
440 | #content ul.news-feed h3 { /* Id zur Bedeutungssteigerung */ |
---|
441 | margin: 0; padding: 0; border: none; |
---|
442 | font-family: inherit; |
---|
443 | font-weight: normal; |
---|
444 | font-size: 100%; |
---|
445 | font-style: italic; |
---|
446 | } |
---|
447 | |
---|
448 | /**********************************************************************\ |
---|
449 | | CENTRAL COMMON STYLES: TABLE LAYOUT FROM details.css | |
---|
450 | +----------------------------------------------------------------------+ |
---|
451 | | Hier ist das Tabellenlayout der ehemaligen details.css. Es wird | |
---|
452 | | (basismäßig) mittlerweile auch auf anderen Seiten genutzt, unter | |
---|
453 | | anderem die Univac9400-Kosten-Seite (seit v5.8). | |
---|
454 | | | |
---|
455 | | Begrenzt auf #content, damit andere Seiten in dev.t29.de oder | |
---|
456 | | ähnlichem verschont bleiben. | |
---|
457 | | | |
---|
458 | | Das CSS ist uralt (stammt wohl noch von v5.0 und vorher) und wurde | |
---|
459 | | seit dem nie verändert (wie die Details-Seiten ;-) ) | |
---|
460 | | | |
---|
461 | \**********************************************************************/ |
---|
462 | |
---|
463 | |
---|
464 | #content td, #content table, #content tr { |
---|
465 | font: 12px Verdana; |
---|
466 | } |
---|
467 | |
---|
468 | #content table p { |
---|
469 | text-align: justify; |
---|
470 | line-height: 120%; |
---|
471 | } |
---|
472 | |
---|
473 | #content table p.center { |
---|
474 | margin: 5px 0px; |
---|
475 | text-align: center; |
---|
476 | } |
---|
477 | |
---|
478 | #content td b { |
---|
479 | display: block; |
---|
480 | } |
---|
481 | |
---|
482 | #content td.b, #content td.b a { |
---|
483 | font-weight: bold; |
---|
484 | } |
---|
485 | |
---|
486 | #content table { |
---|
487 | background-color: #7090C0; |
---|
488 | } |
---|
489 | |
---|
490 | #content td { |
---|
491 | padding: 2px; |
---|
492 | vertical-align: middle; |
---|
493 | text-align: center; |
---|
494 | background-color: #F7FDFF; |
---|
495 | } |
---|
496 | |
---|
497 | #content th { |
---|
498 | padding: 2px; |
---|
499 | text-align: center; |
---|
500 | background-color: #BED0E5; |
---|
501 | } |
---|
502 | |
---|
503 | #content .bemerkungen { |
---|
504 | vertical-align: middle; |
---|
505 | text-align: justify; |
---|
506 | } |
---|
507 | |
---|
508 | |
---|
509 | /**********************************************************************\ |
---|
510 | | SPEZIAL STYLE | |
---|
511 | +----------------------------------------------------------------------+ |
---|
512 | | Für: Lernprojekte-Uebersichtsseite | |
---|
513 | | /de/lernprojekte/index.shtml | |
---|
514 | | In Benutzung seit: 04.10.2009 (Einbindung der Seite in die | |
---|
515 | | Homepage) |
---|
516 | | Besonderheiten: Spezialisierung des allgemeinen Tabellen- | |
---|
517 | | designs mit sehr grosser Schrift. | |
---|
518 | | | |
---|
519 | \**********************************************************************/ |
---|
520 | |
---|
521 | |
---|
522 | .lernprojekte #content table { |
---|
523 | width: 100%; |
---|
524 | border-collapse: collapse; |
---|
525 | margin-top: 1.5em; |
---|
526 | } |
---|
527 | |
---|
528 | .lernprojekte #content td, |
---|
529 | .lernprojekte #content th { |
---|
530 | font-size: 130%; |
---|
531 | border: 1px solid #888; |
---|
532 | line-height: 150%; |
---|
533 | padding: 11px; |
---|
534 | text-align: left !important; |
---|
535 | } |
---|
536 | |
---|
537 | .lernprojekte #content th { width: 20%; } |
---|
538 | .lernprojekte #content td { color: #555; } |
---|
539 | |
---|
540 | |
---|
541 | /**********************************************************************\ |
---|
542 | | SPEZIAL STYLE | |
---|
543 | +----------------------------------------------------------------------+ |
---|
544 | | Für: Efzet-Bildergalerie | |
---|
545 | | /de/geraete/efzet.shtm | |
---|
546 | | In Benutzung seit: 30.07.2010 | |
---|
547 | | Besonderheiten: Erste jQuery-Anwendung in der Homepage | |
---|
548 | | | |
---|
549 | \**********************************************************************/ |
---|
550 | |
---|
551 | .efzet #content .gallery { |
---|
552 | width: 830px; |
---|
553 | margin: 0px auto; |
---|
554 | } |
---|
555 | |
---|
556 | .efzet #content .thumbnails a { |
---|
557 | display: block; |
---|
558 | float: right; |
---|
559 | margin: 15px; padding: 0; |
---|
560 | clear: right; |
---|
561 | outline: none; |
---|
562 | } |
---|
563 | |
---|
564 | .efzet #content .thumbnails img { |
---|
565 | width: 120px; |
---|
566 | display: block; /* um keinen komischen weissen rand drunter zu kriegen */ |
---|
567 | } |
---|
568 | |
---|
569 | .efzet #content .thumbnails a:hover { |
---|
570 | border: 3px solid #7090C0; |
---|
571 | margin: 12px; |
---|
572 | } |
---|
573 | |
---|
574 | .efzet #content .thumbnails a.active, |
---|
575 | .efzet #content .thumbnails a.active:hover { |
---|
576 | border: 5px solid #7090C0; |
---|
577 | margin: 10px; |
---|
578 | } |
---|
579 | |
---|
580 | .efzet #content .full { |
---|
581 | text-align: center; |
---|
582 | padding-top: 13px; |
---|
583 | } |
---|
584 | |
---|
585 | /**********************************************************************\ |
---|
586 | | SPEZIAL STYLE | |
---|
587 | +----------------------------------------------------------------------+ |
---|
588 | | Für: Wissenschaftliche Rechner | |
---|
589 | | /de/rechnertechnik/fruehe-computer.shtm | |
---|
590 | | In Benutzung seit: 29.01.2011 | |
---|
591 | | Besonderheiten: Sieht beschissen aus | |
---|
592 | | | |
---|
593 | \**********************************************************************/ |
---|
594 | |
---|
595 | #content .small, |
---|
596 | #content dl { |
---|
597 | font-size: 80%; |
---|
598 | line-height: 130%; |
---|
599 | } |
---|
600 | |
---|
601 | .fruehe-computer #content dt { |
---|
602 | /* folgende Zeile nicht auskommentieren, wenn die Definitionsterme (dt) |
---|
603 | nicht dick erscheinen sollen */ |
---|
604 | /* font-weight: normal; */ |
---|
605 | } |
---|
606 | |
---|
607 | .fruehe-computer #content dd { |
---|
608 | margin-left: 2em; |
---|
609 | } |
---|
610 | |
---|
611 | /**********************************************************************\ |
---|
612 | | SPEZIAL STYLE | |
---|
613 | +----------------------------------------------------------------------+ |
---|
614 | | Für: Impressum | |
---|
615 | | In Benutzung seit: September 2010 | |
---|
616 | | Besonderheiten: Frueher einfach address{font-style:italic;}, | |
---|
617 | | jetzt Formatierung mit vcard | |
---|
618 | | | |
---|
619 | \**********************************************************************/ |
---|
620 | |
---|
621 | .impressum #content .vcard { |
---|
622 | font-style: italic; |
---|
623 | } |
---|
624 | |
---|
625 | /**********************************************************************\ |
---|
626 | | CENTRAL COMMON STYLES: Copyright boxes for pictures | |
---|
627 | +----------------------------------------------------------------------+ |
---|
628 | | Diese CSS-Anweidungen formatieren dynamisch erzeugten HTML-Code | |
---|
629 | | durch das neue copyright-boxes-system (licensing.js) | |
---|
630 | | Eingefuehrt August 2010. | |
---|
631 | \**********************************************************************/ |
---|
632 | |
---|
633 | #img-license-tag { |
---|
634 | display: none; |
---|
635 | position: absolute; |
---|
636 | /*background-color: rgba(0,0,0, 0.5);*//* Fuer CSS3 ist die Zeit noch nicht reif */ |
---|
637 | background-image: url(/shared/img/fresh.design/bg.copyright-box.png); |
---|
638 | color: white; |
---|
639 | } |
---|
640 | |
---|
641 | #img-license-tag p { |
---|
642 | margin: 0; |
---|
643 | padding: 1em; |
---|
644 | text-align: center; |
---|
645 | } |
---|
646 | |
---|
647 | #img-license-tag:hover { |
---|
648 | display: block; |
---|
649 | background-color: black; |
---|
650 | } |
---|
651 | |
---|
652 | #img-license-tag a:link, #img-license-tag a:visited { |
---|
653 | color: #eee; |
---|
654 | } |
---|
655 | |
---|
656 | #img-license-tag a:hover, #img-license-tag a:active { |
---|
657 | color: white; |
---|
658 | } |
---|
659 | |
---|
660 | /**********************************************************************\ |
---|
661 | | CENTRAL COMMON STYLES: Heading anchors (Javascript driven) | |
---|
662 | +----------------------------------------------------------------------+ |
---|
663 | | Eingefuehrt August 2010. | |
---|
664 | \**********************************************************************/ |
---|
665 | #content h2 a.anchor, #content h3 a.anchor { |
---|
666 | text-decoration: none; |
---|
667 | color: #ddd; |
---|
668 | visibility: hidden; |
---|
669 | } |
---|
670 | |
---|
671 | #content h2:hover a.anchor, #content h3:hover a.anchor { |
---|
672 | visibility: visible; |
---|
673 | } |
---|
674 | |
---|
675 | /**********************************************************************\ |
---|
676 | | CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen") | |
---|
677 | +----------------------------------------------------------------------+ |
---|
678 | | |
---|
679 | ** Bildboxen ("Imageboxen") |
---|
680 | ** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten |
---|
681 | ** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes: |
---|
682 | ** <div class="[box] [links|rechts|center]"> (box für fakultativen Abstand oben/unten) |
---|
683 | ** <img ... /> |
---|
684 | ** <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig) |
---|
685 | ** <p>Viel Text...</p> |
---|
686 | ** </[div|p]> |
---|
687 | ** <div class="clear"> </div> (Damit das Bild nicht weitergeht) |
---|
688 | ** </div> |
---|
689 | ** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild, |
---|
690 | ** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die |
---|
691 | ** Bilder werden. |
---|
692 | | |
---|
693 | \**********************************************************************/ |
---|
694 | |
---|
695 | #content .box, .content .box { |
---|
696 | /* .box als allgemeine Klasse fuer abstandswuerdige */ |
---|
697 | /* Objekte (.center/.right/.left zum Beispiel) */ |
---|
698 | margin-top: 3em; |
---|
699 | margin-bottom: 3em; |
---|
700 | } |
---|
701 | |
---|
702 | #content .left img, .content .left img { |
---|
703 | /* Links ausgerichtetes Bild mit Abstand drumherum */ |
---|
704 | float: left; |
---|
705 | margin: 0 2em 2em 0; |
---|
706 | } |
---|
707 | |
---|
708 | #content .right img, .content .right img { |
---|
709 | /* Rechts ausgerichtetes Bild mit Abstand drumherum */ |
---|
710 | float: right; |
---|
711 | margin: 0 0 2em 2em; |
---|
712 | } |
---|
713 | |
---|
714 | #content .center img, .content .center img { |
---|
715 | /* Mittig ausgerichtetes Bild mit Abstand drunter */ |
---|
716 | margin: 0 0 0.3em 0; |
---|
717 | } |
---|
718 | |
---|
719 | #content img.nomargin, .content img.nomargin { |
---|
720 | /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */ |
---|
721 | margin: 0; |
---|
722 | } |
---|
723 | |
---|
724 | #content .left img.nomargin-bottom, #content .right img.nomargin-bottom, |
---|
725 | .content .left img.nomargin-bottom, #content .right img.nomargin-bottom { |
---|
726 | /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem |
---|
727 | (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist). |
---|
728 | Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein |
---|
729 | .clear dann erzeugt. */ |
---|
730 | margin-bottom: 0; |
---|
731 | } |
---|
732 | |
---|
733 | #content .left .bildtext, .content .left .bildtext, |
---|
734 | #content .right .bildtext, .content .right .bildtext { |
---|
735 | /* p.bildtext oder div.bildtext: Kein Abstand! */ |
---|
736 | text-align: justify; |
---|
737 | /* Im Endeffekt ist .bildtext hier unnoetig! */ |
---|
738 | } |
---|
739 | |
---|
740 | #content .center .bildtext, .content .center .bildtext { |
---|
741 | /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */ |
---|
742 | text-align: justify; |
---|
743 | margin-left: 10%; |
---|
744 | margin-right: 10%; |
---|
745 | } |
---|
746 | |
---|
747 | #content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite { |
---|
748 | /* Text zentriert unter dem Bild in der Breite des Bildes */ |
---|
749 | text-align: justify; |
---|
750 | margin-left: auto; |
---|
751 | margin-right: auto; |
---|
752 | } |
---|
753 | |
---|
754 | /* |
---|
755 | 03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center), |
---|
756 | Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen. |
---|
757 | */ |
---|
758 | |
---|
759 | #content .auto-bildbreite, #content .manuelle-bildbreite { |
---|
760 | /* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */ |
---|
761 | margin-left: auto; |
---|
762 | margin-right: auto; |
---|
763 | } |
---|
764 | |
---|
765 | #content .auto-bildbreite p.bildtext, #content .manuelle-bildbreite p.bildtext, |
---|
766 | #content .auto-bildbreite div.bildtext , #content .manuelle-bildbreite div.bildtext { |
---|
767 | /* Saemtliche Abstaende abschalten, weil Breite des gesamten <div class="box">-Elements |
---|
768 | durch ein JavaScript geregelt wird */ |
---|
769 | margin-left: 0; |
---|
770 | margin-right: 0; |
---|
771 | } |
---|
772 | |
---|
773 | /* |
---|
774 | 03. Januar 2010: In Konstrukten wie |
---|
775 | <div class="box left"> |
---|
776 | <img ... /> |
---|
777 | <p class="bildtext">foo bar</p> |
---|
778 | <div class="clear"> </div> |
---|
779 | </div> |
---|
780 | kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse |
---|
781 | <div class="box left clear-after"> |
---|
782 | <img .../> |
---|
783 | <p class="bildtext">foo bar</p> |
---|
784 | </div> |
---|
785 | Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall |
---|
786 | laeuft. |
---|
787 | */ |
---|
788 | |
---|
789 | #content .clear-after { |
---|
790 | display: inline-table; |
---|
791 | /* CSS-Hack to hide from IE-mac \*/ |
---|
792 | height: 1%; |
---|
793 | display: block; |
---|
794 | /* IE mac is wayne, isn't it!? */ |
---|
795 | } |
---|
796 | |
---|
797 | html>body #content .clear-after { |
---|
798 | height: auto; |
---|
799 | } |
---|
800 | |
---|
801 | #content .clear-after:after { |
---|
802 | content: "."; |
---|
803 | display: block; |
---|
804 | height: 0; |
---|
805 | clear: both; |
---|
806 | visibility: hidden; |
---|
807 | } |
---|
808 | |
---|
809 | |
---|
810 | |
---|
811 | |
---|
812 | |
---|
813 | |
---|
814 | /* |
---|
815 | Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder. |
---|
816 | Verwendung als Zusatzklasse zu box. |
---|
817 | |
---|
818 | Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen |
---|
819 | */ |
---|
820 | |
---|
821 | #content .bordered, .content .bordered { |
---|
822 | border: 1px solid #094099; |
---|
823 | padding: 2em; |
---|
824 | } |
---|
825 | |
---|
826 | #content .bordered img, .content .bordered img { |
---|
827 | } |
---|
828 | |
---|
829 | /* ehemaliger Spezialstyle auf der Startseite, |
---|
830 | jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */ |
---|
831 | div.desc-right, div.desc-left { |
---|
832 | /* rechts gefloatetes thumbnail mit Beschreibungstext */ |
---|
833 | float: right; |
---|
834 | margin: 0pt 0pt 2em 2em; |
---|
835 | /* width: 236px; */ |
---|
836 | /* border: 1px solid #7090C0; |
---|
837 | background-color: #EBEBEB; */ |
---|
838 | border: 1px solid #094099; |
---|
839 | padding: 1em; |
---|
840 | } |
---|
841 | |
---|
842 | div.desc-left { |
---|
843 | float: left; |
---|
844 | margin: 0pt 2em 2em 0pt; |
---|
845 | } |
---|
846 | |
---|
847 | div.desc-right img { |
---|
848 | } |
---|
849 | |
---|
850 | div.desc-right p, div.desc-left p { |
---|
851 | /* Damit der Text nicht über die ganze Fensterbreite geht, |
---|
852 | <p style="width: Bildbreite;"> nötig. */ |
---|
853 | margin: 1em 0 0 0; padding: 0; |
---|
854 | font-size: 90%; |
---|
855 | text-align: left; |
---|
856 | } |
---|
857 | |
---|
858 | div.desc-right.borderless, div.desc-left.borderless { |
---|
859 | border: none; /* ja, ziemlich bescheuert sorum */ |
---|
860 | } |
---|
861 | |
---|
862 | |
---|
863 | @media print { |
---|
864 | /**************************************************************\ |
---|
865 | * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 * |
---|
866 | * T E C H H NN N I K K U U MM MM 2 2 9 9 * |
---|
867 | * T EEE C HHHH N N N I KK U U M M M 2 99999 * |
---|
868 | * T E C H H N NN I K K U U M M 2 9 * |
---|
869 | * T EEEE CCCC H H N N III K K UUUU M M 22222 9 * |
---|
870 | * * |
---|
871 | * P R I N T C S S * |
---|
872 | * ehemals in eigener print.css, jetzt aus perfomancegruenden * |
---|
873 | * (ladezeit) in commons.css intigriert * |
---|
874 | \**************************************************************/ |
---|
875 | |
---|
876 | body { |
---|
877 | margin: 1em; padding: 0; |
---|
878 | color: #000; |
---|
879 | font: 100% "Times New Roman",Times,serif; |
---|
880 | } |
---|
881 | |
---|
882 | .hidden { |
---|
883 | display: none; |
---|
884 | } |
---|
885 | |
---|
886 | img { |
---|
887 | border: none; |
---|
888 | page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */ |
---|
889 | } |
---|
890 | |
---|
891 | h1 { |
---|
892 | margin: 0; padding: 6px 0; |
---|
893 | text-align: center; |
---|
894 | |
---|
895 | font: 180% Arial,Verdana,Helvetica,sans-serif; |
---|
896 | } |
---|
897 | |
---|
898 | h1 a, h1 a span { |
---|
899 | display: inline !important; /* falls screen/fresh versehentlich angewandtfalls screen/fresh versehentlich angewandt */ |
---|
900 | color: #AAA !important; |
---|
901 | text-decoration: none !important; |
---|
902 | } |
---|
903 | |
---|
904 | /*h1 span.old:after { |
---|
905 | * jetzt durch #h1-subtitle auch im IE moeglich * |
---|
906 | content: "Museum für Rechner-, Computer- und Kommunikationstechnik"; |
---|
907 | }*/ |
---|
908 | |
---|
909 | #h1-subtitle { |
---|
910 | display: block; |
---|
911 | font-size: 108%; |
---|
912 | border-bottom: 1px solid #AAA; |
---|
913 | margin-bottom: 10px; margin-top: 0; |
---|
914 | text-align: center; |
---|
915 | } |
---|
916 | |
---|
917 | h2 { |
---|
918 | font-size: 150%; |
---|
919 | margin: 10px 0 10px 0; |
---|
920 | padding: 0; |
---|
921 | page-break-after: avoid; /* auch wenn's nur Opera rafft ;) */ |
---|
922 | } |
---|
923 | |
---|
924 | #sidebar, #footer, #sidebar-footnote { |
---|
925 | display: none; |
---|
926 | } |
---|
927 | |
---|
928 | #copyright { |
---|
929 | margin: 2em 0; |
---|
930 | font-size: 80%; |
---|
931 | text-align: center; |
---|
932 | } |
---|
933 | |
---|
934 | /***** TEXT *****/ |
---|
935 | |
---|
936 | p { |
---|
937 | text-align: justify; |
---|
938 | line-height: 110%; |
---|
939 | } |
---|
940 | |
---|
941 | a:link, a:visited { |
---|
942 | color: #000; |
---|
943 | text-decoration: none; |
---|
944 | } |
---|
945 | } /* end of @media print */ |
---|
946 | |
---|
947 | /* EOF */ |
---|