source: t29-www/shared/css/common.css @ 958

Last change on this file since 958 was 246, checked in by heribert, 12 years ago

Alle moeglichen Updates seit Ewigkeiten.

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 31.3 KB
Line 
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 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|     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!) */
101div.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
115div.aktuell h2 {
116    margin: 1px;
117    padding: 0;
118    color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */
119    font-size: 126%;
120}
121
122div.aktuell .stand {
123    font-size: 80%;
124    text-align: center;
125    margin-top: 1px;
126}
127
128div.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
234p.h-ul  { text-align: left; }
235ul.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
255ul.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
261ul.univac-thumbs li {
262   float: left;
263   margin: 10px 50px 20px 0;
264   clear: left;
265}
266
267ul.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 */
278body.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 */
306body.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
436ul.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">&nbsp;</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">&nbsp;</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
797html>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. */
831div.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
842div.desc-left {
843        float: left;
844        margin: 0pt 2em 2em 0pt;
845}
846
847div.desc-right img {
848}
849
850div.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
858div.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 */
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License