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

Last change on this file since 232 was 232, checked in by sven, 13 years ago

Demo: Design-Verbesserungen auf early-computers.shtm. Nicht für den Produktiveinsatz bestimmt (fruehe-computer.shtm ist etwa dadurch zerschossen).

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 30.4 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 232 2011-01-29 00:45:49Z 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!) */
97div.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
111div.aktuell h2 {
112    margin: 1px;
113    padding: 0;
114    color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */
115    font-size: 126%;
116}
117
118div.aktuell .stand {
119    font-size: 80%;
120    text-align: center;
121    margin-top: 1px;
122}
123
124div.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
230p.h-ul  { text-align: left; }
231ul.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
251ul.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
257ul.univac-thumbs li {
258   float: left;
259   margin: 10px 50px 20px 0;
260   clear: left;
261}
262
263ul.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/* Seit 08.08.2010: Per Javascript-Anpassung */
274body.greater1280 .univac #wrapper #menu { margin-top: 0; }
275
276/* Univac-Kosten-Seite seit v5.8.0: Ein absolut positioniertes Bild
277   (Illustration, soll an Seitennavigation klatschen) am Ende der
278   #content-Box, daher dieser künstliche Rand: */
279.univac-kosten #content {
280    min-height: inherit;
281    margin-bottom: 5px;
282    padding-bottom: 348px;
283}
284
285/* Rand links, damit Liste im Univac-Artikel ordentlich aussieht (Jan 2010) */
286.univac li {
287        margin-left: 270px;
288}
289
290
291/**********************************************************************\
292| SPEZIAL STYLE                                                        |
293+----------------------------------------------------------------------+
294| Für:                 Fax- und Schreibtechnik, Startseite,            |
295|                      DEC-Geschichte                                  |
296|                         /de/kommunikationstechnik/faxtechnik.shtm    |
297|                         /de/index.shtml                              |
298|                         /de/geraete/dec-geschichte.shtm              |
299|                         /en/devices/dec-history.shtm                 |
300| In Benutzung seit:   Prinzipiell seit Ewigkeiten (v5.0?)             |
301|                      Startseite nutzt Stil mit seit v5.7             |
302| Besonderheiten:      Mehrspaltiger Inhalt (Originalzitat), nach      |
303|                      dem simplen Schema:                             |
304|                                                                      |
305|   <div class="cols">                                                 |
306|       <div class="leftcol">linke spalte</div>                        |
307|       <div class="rightcol">rechte spalte</div>                      |
308|   </div>                                                             |
309|                                                                      |
310| Zuletzt geändert:    zur v5.7 vielleicht                             |
311|                                                                      |
312\**********************************************************************/
313
314#content .cols {
315    /* Mehrspaltiger Inhalt. */
316}
317
318#content .cols .leftcol, #content .cols .rightcol {
319    padding: 5px 7px;
320/*  border: 3px dashed red;*/
321}
322
323#content .cols .leftcol {
324    float: left; width: 47%;
325}
326
327#content .cols .rightcol {
328    float: right; width: 47%;
329}
330
331#content blockquote, .content blockquote {
332    /* bis jetzt nur genutzt in <faxtechnik> */
333    /* Und <blockquote> auf einer WANG-Extraseite, Bedienungsanleitung */
334    margin: 5px 0px;
335    padding: 0px;
336    color: #2F319D;
337    text-align: justify;
338}
339
340/**********************************************************************\
341| SPEZIAL STYLE                                                        |
342+----------------------------------------------------------------------+
343| Für:                 DEC-Geschichte                                  |
344|                         /de/geraete/dec-geschichte.shtm              |
345|                         /en/devices/dec-history.shtm                 |
346| In Benutzung seit:   Wohl schon recht lange.     (v5.0?)             |
347| Besonderheiten:      Definitionslisten ohne Einschub und mit dick-   |
348|                      gedrucktem <dt>.                                |
349|                                                                      |
350| Zuletzt geändert:    zur v5.7 vielleicht                             |
351|                                                                      |
352\**********************************************************************/
353
354#content dt {
355    margin-top: 1.2em;
356    font-weight: bold;
357    display: block;
358}
359
360#content dd {
361    text-align: justify;
362    margin: 0; padding: 0;
363}
364
365/**********************************************************************\
366| SPEZIAL STYLE                                                        |
367+----------------------------------------------------------------------+
368| Für:                 Telefunken T40W-Extraseite, die Javascript-     |
369|                      Einblendeffekt bietet - Absolute Positionierung |
370|                      von Bildern uebereinander mit dynamischer       |
371|                      opacity.                                        |
372|                         /de/geraete/telefunken_t40w.shtm             |
373|                         /en/devices/telefunken_t40w.shtm             |
374| In Benutzung seit:   Maerz 2009                                      |
375| Besonderheiten:      Absolut spezifisch fuer die aktuellen           |
376|                      Gegebenheiten.                                  |
377|                                                                      |
378\**********************************************************************/
379
380.telefunkent40w #rel,
381.telefunkent40w #zu,
382.telefunkent40w #offen {
383    position: absolute;
384    width: 930px;
385    height: 569px;
386    top: 0; left: 0;
387}
388
389.telefunkent40w #beschriftung {
390    position: absolute;
391    top: -53px;
392    left: -36px;
393}
394
395.telefunkent40w #zu           { z-index: 3 }
396.telefunkent40w #beschriftung { z-index: 2; }
397.telefunkent40w #offen        { z-index: 1; }
398.telefunkent40w #rel          {
399     position: relative;
400     margin-bottom: 80px;
401     margin-top: 60px;
402}
403
404
405/**********************************************************************\
406| SPEZIAL STYLE                                                        |
407+----------------------------------------------------------------------+
408| Für:                 "Was gibt es neues?"-Seite, komisches Listen-   |
409|                      Aussehen.                                       |
410|                         /de/news.shtm                                |
411|                         /en/news.shtm                                |
412| In Benutzung seit:   Juli 2009                                       |
413| Besonderheiten:      Nicht sonderlich originell, nur eben etwas      |
414|                      spezifisch.                                     |
415|                                                                      |
416\**********************************************************************/
417
418ul.news-feed li {
419    margin-bottom: 1.2em;
420}
421
422#content ul.news-feed h3 { /* Id zur Bedeutungssteigerung */
423   margin: 0; padding: 0; border: none;
424   font-family: inherit;
425   font-weight: normal;
426   font-size: 100%;
427   font-style: italic;
428}
429
430/**********************************************************************\
431| CENTRAL COMMON STYLES: TABLE LAYOUT FROM details.css                 |
432+----------------------------------------------------------------------+
433| Hier ist das Tabellenlayout der ehemaligen details.css. Es wird      |
434| (basismäßig) mittlerweile auch auf anderen Seiten genutzt, unter     |
435| anderem die Univac9400-Kosten-Seite (seit v5.8).                     |
436|                                                                      |
437| Begrenzt auf #content, damit andere Seiten in dev.t29.de oder        |
438| ähnlichem verschont bleiben.                                         |
439|                                                                      |
440| Das CSS ist uralt (stammt wohl noch von v5.0 und vorher) und wurde   |
441| seit dem nie verändert (wie die Details-Seiten ;-) )                 |
442|                                                                      |
443\**********************************************************************/
444
445
446#content td, #content table, #content tr {
447    font: 12px Verdana;
448}
449
450#content table p {
451    text-align: justify;
452    line-height: 120%;
453}
454
455#content table p.center {
456    margin: 5px 0px;
457    text-align: center;
458}
459
460#content td b {
461    display: block;
462}
463
464#content td.b, #content td.b a {
465    font-weight: bold;
466}
467
468#content table {
469    background-color: #7090C0;
470}
471
472#content td {
473    padding: 2px;
474    vertical-align: middle;
475    text-align: center;
476    background-color: #F7FDFF;
477}
478
479#content th {
480    padding: 2px;
481    text-align: center;
482    background-color: #BED0E5;
483}
484
485#content .bemerkungen {
486    vertical-align: middle;
487    text-align: justify;
488}
489
490
491/**********************************************************************\
492| SPEZIAL STYLE                                                        |
493+----------------------------------------------------------------------+
494| Für:                 Lernprojekte-Uebersichtsseite                   |
495|                         /de/lernprojekte/index.shtml                 |
496| In Benutzung seit:   04.10.2009 (Einbindung der Seite in die         |
497|                      Homepage)
498| Besonderheiten:      Spezialisierung des allgemeinen Tabellen-       |
499|                      designs mit sehr grosser Schrift.               |
500|                                                                      |
501\**********************************************************************/
502
503
504.lernprojekte #content table {
505        width: 100%;
506        border-collapse: collapse;
507        margin-top: 1.5em;
508}
509
510.lernprojekte #content td,
511.lernprojekte #content th {
512        font-size: 130%;
513        border: 1px solid #888;
514        line-height: 150%;
515        padding: 11px;
516        text-align: left !important;
517}
518
519.lernprojekte #content th { width: 20%; }
520.lernprojekte #content td { color: #555; }
521
522
523/**********************************************************************\
524| SPEZIAL STYLE                                                        |
525+----------------------------------------------------------------------+
526| Für:                 Efzet-Bildergalerie                             |
527|                         /de/geraete/efzet.shtm                       |
528| In Benutzung seit:   30.07.2010                                      |
529| Besonderheiten:      Erste jQuery-Anwendung in der Homepage          |
530|                                                                      |
531\**********************************************************************/
532
533.efzet #content .gallery {
534        width: 830px;
535        margin: 0px auto;
536}
537
538.efzet #content .thumbnails a {
539        display: block;
540        float: right;
541        margin: 15px; padding: 0;
542        clear: right;
543        outline: none;
544}
545
546.efzet #content .thumbnails img {
547        width: 120px;
548        display: block; /* um keinen komischen weissen rand drunter zu kriegen */
549}
550
551.efzet #content .thumbnails a:hover {
552        border: 3px solid #7090C0;
553        margin: 12px;
554}
555
556.efzet #content .thumbnails a.active,
557.efzet #content .thumbnails a.active:hover {
558        border: 5px solid #7090C0;
559        margin: 10px;
560}
561
562.efzet #content .full {
563        text-align: center;
564        padding-top: 13px;
565}
566
567/**********************************************************************\
568| SPEZIAL STYLE                                                        |
569+----------------------------------------------------------------------+
570| Für:                 Wissenschaftliche Rechner                       |
571|                         /de/rechnertechnik/fruehe-computer.shtm      |
572| In Benutzung seit:   29.01.2011                                      |
573| Besonderheiten:      Sieht beschissen aus                            |
574|                                                                      |
575\**********************************************************************/
576
577.fruehe-computer #content .small,
578.fruehe-computer #content dl {
579        font-size: 80%;
580        line-height: 130%;
581}
582
583.fruehe-computer #content dd {
584        margin-left: 2em;
585}
586
587/**********************************************************************\
588| SPEZIAL STYLE                                                        |
589+----------------------------------------------------------------------+
590| Für:                 Impressum                                       |
591| In Benutzung seit:   September 2010                                  |
592| Besonderheiten:      Frueher einfach address{font-style:italic;},    |
593|                      jetzt Formatierung mit vcard                    |
594|                                                                      |
595\**********************************************************************/
596
597.impressum #content .vcard {
598        font-style: italic;
599}
600
601/**********************************************************************\
602| CENTRAL COMMON STYLES: Copyright boxes for pictures                  |
603+----------------------------------------------------------------------+
604| Diese CSS-Anweidungen formatieren dynamisch erzeugten HTML-Code      |
605| durch das neue copyright-boxes-system (licensing.js)                 |
606| Eingefuehrt August 2010.                                             |
607\**********************************************************************/
608
609#img-license-tag  {
610        display: none;
611        position: absolute;
612        /*background-color: rgba(0,0,0, 0.5);*//* Fuer CSS3 ist die Zeit noch nicht reif */
613        background-image: url(/shared/img/fresh.design/bg.copyright-box.png);
614        color: white;
615}
616
617#img-license-tag p {
618        margin: 0;
619        padding: 1em;
620        text-align: center;
621}
622
623#img-license-tag:hover {
624        display: block;
625        background-color: black;
626}
627
628#img-license-tag a:link, #img-license-tag a:visited {
629        color: #eee;
630}
631
632#img-license-tag a:hover, #img-license-tag a:active {
633        color: white;
634}
635
636/**********************************************************************\
637| CENTRAL COMMON STYLES: Heading anchors (Javascript driven)           |
638+----------------------------------------------------------------------+
639| Eingefuehrt August 2010.                                             |
640\**********************************************************************/
641#content h2 a.anchor, #content h3 a.anchor {
642        text-decoration: none;
643        color: #ddd;
644        visibility: hidden;
645}
646
647#content h2:hover a.anchor, #content h3:hover a.anchor {
648        visibility: visible;
649}
650
651/**********************************************************************\
652| CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen")                      |
653+----------------------------------------------------------------------+
654|
655** Bildboxen ("Imageboxen")
656** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
657** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
658** <div class="[box] [links|rechts|center]"> (box für fakultativen Abstand oben/unten)
659**    <img ... />
660**    <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
661**       <p>Viel Text...</p>
662**    </[div|p]>
663**    <div class="clear">&nbsp;</div> (Damit das Bild nicht weitergeht)
664** </div>
665** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
666** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
667** Bilder werden.
668|
669\**********************************************************************/
670
671#content .box, .content .box {
672    /* .box als allgemeine Klasse fuer abstandswuerdige */
673    /* Objekte (.center/.right/.left zum Beispiel) */
674    margin-top: 3em;
675    margin-bottom: 3em;
676}
677
678#content .left img, .content .left img {
679    /* Links ausgerichtetes Bild mit Abstand drumherum */
680    float: left;
681    margin: 0 2em 2em 0;
682}
683
684#content .right img, .content .right img {
685    /* Rechts ausgerichtetes Bild mit Abstand drumherum */
686    float: right;
687    margin: 0 0 2em 2em;
688}
689
690#content .center img, .content .center img {
691    /* Mittig ausgerichtetes Bild mit Abstand drunter */
692    margin: 0 0 0.3em 0;
693}
694
695#content img.nomargin, .content img.nomargin {
696    /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
697    margin: 0;
698}
699
700#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
701.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
702    /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
703       (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
704       Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
705       .clear dann erzeugt. */
706    margin-bottom: 0;
707}
708
709#content .left .bildtext, .content .left .bildtext,
710#content .right .bildtext, .content .right .bildtext {
711    /* p.bildtext oder div.bildtext: Kein Abstand! */
712    text-align: justify;
713    /* Im Endeffekt ist .bildtext hier unnoetig! */
714}
715
716#content .center .bildtext, .content .center .bildtext {
717    /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
718    text-align: justify;
719    margin-left: 10%;
720    margin-right: 10%;
721}
722
723#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
724    /* Text zentriert unter dem Bild in der Breite des Bildes */
725    text-align: justify;
726    margin-left: auto;
727    margin-right: auto;
728}
729
730/*
731    03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center),
732    Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen.
733*/
734
735#content .auto-bildbreite, #content .manuelle-bildbreite {
736        /* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */
737        margin-left: auto;
738        margin-right: auto;
739}
740
741#content .auto-bildbreite  p.bildtext, #content .manuelle-bildbreite  p.bildtext,
742#content .auto-bildbreite  div.bildtext , #content .manuelle-bildbreite div.bildtext {
743        /* Saemtliche Abstaende abschalten, weil Breite des gesamten <div class="box">-Elements
744       durch ein JavaScript geregelt wird */
745        margin-left: 0;
746        margin-right: 0;
747}
748
749/*
750    03. Januar 2010: In Konstrukten wie
751          <div class="box left">
752             <img ... />
753                 <p class="bildtext">foo bar</p>
754                 <div class="clear">&nbsp;</div>
755          </div>
756        kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse
757          <div class="box left clear-after">
758             <img .../>
759                 <p class="bildtext">foo bar</p>
760          </div>
761        Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall
762        laeuft.
763*/
764
765#content .clear-after {
766        display: inline-table;
767        /* CSS-Hack to hide from IE-mac \*/
768        height: 1%;
769        display: block;
770        /* IE mac is wayne, isn't it!? */
771}
772
773html>body #content .clear-after {
774        height: auto;
775}
776
777#content .clear-after:after {
778        content: ".";
779        display: block;
780        height: 0;
781        clear: both;
782        visibility: hidden;
783}
784
785
786
787
788
789
790/*
791   Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
792   Verwendung als Zusatzklasse zu box.
793   
794   Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen
795*/
796
797#content .bordered, .content .bordered {
798    border: 1px solid #094099;
799        padding: 2em;
800}
801
802#content .bordered img, .content .bordered img {
803}
804
805/* ehemaliger Spezialstyle auf der Startseite,
806   jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
807div.desc-right, div.desc-left {
808    /* rechts gefloatetes thumbnail mit Beschreibungstext */
809    float: right;
810    margin: 0pt 0pt 2em 2em;
811/*  width: 236px; */
812/*  border: 1px solid #7090C0;
813    background-color: #EBEBEB; */
814    border: 1px solid #094099;
815    padding: 1em;
816}
817
818div.desc-left {
819        float: left;
820        margin: 0pt 2em 2em 0pt;
821}
822
823div.desc-right img {
824}
825
826div.desc-right p, div.desc-left p {
827    /* Damit der Text nicht über die ganze Fensterbreite geht,
828       <p style="width: Bildbreite;"> nötig. */
829    margin: 1em 0 0 0; padding: 0;
830    font-size: 90%;
831    text-align: left;
832}
833
834
835@media print {
836     /**************************************************************\
837    *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
838    *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
839    *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
840    *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
841    *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
842    *                                                                *
843    *                        P R I N T    C S S                      *
844    *  ehemals in eigener print.css, jetzt aus perfomancegruenden    *
845    *              (ladezeit) in commons.css intigriert              *
846     \**************************************************************/
847
848    body {
849        margin: 1em; padding: 0;
850        color: #000;
851        font: 100% "Times New Roman",Times,serif;
852    }
853   
854    .hidden {
855        display: none;
856    }
857   
858    img {
859        border: none;
860        page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
861    }
862   
863    h1 {
864        margin: 0; padding: 6px 0;
865        text-align: center;
866   
867        font: 180% Arial,Verdana,Helvetica,sans-serif;
868    }
869   
870    h1 a, h1 a span {
871        display: inline !important; /* falls screen/fresh versehentlich angewandtfalls screen/fresh versehentlich angewandt */
872        color: #AAA !important;
873        text-decoration: none !important;
874    }
875   
876    /*h1 span.old:after {
877        * jetzt durch #h1-subtitle auch im IE moeglich *
878        content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
879    }*/
880   
881    #h1-subtitle {
882        display: block;
883        font-size: 108%;
884        border-bottom: 1px solid #AAA;
885        margin-bottom: 10px; margin-top: 0;
886        text-align: center;
887    }
888   
889    h2 {
890        font-size: 150%;
891        margin: 10px 0 10px 0;
892        padding: 0;
893        page-break-after: avoid;  /* auch wenn's nur Opera rafft ;) */
894    }
895   
896    #sidebar, #footer, #sidebar-footnote {
897        display: none;
898    }
899   
900    #copyright {
901        margin: 2em 0;
902        font-size: 80%;
903        text-align: center;
904    }
905   
906    /***** TEXT *****/
907   
908    p {
909        text-align: justify;
910        line-height: 110%;
911    }
912   
913    a:link, a:visited {
914        color: #000;
915        text-decoration: none;
916    }
917} /* end of @media print */
918
919/* 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