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