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

Last change on this file since 207 was 186, checked in by sven, 14 years ago

(Englisches) Impressum: hCard-Microformat testweise eingefuehrt, fuer bessere Maschinenlesbarkeit.

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 29.6 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 186 2010-09-02 22:35:15Z 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:                 Impressum                                       |
571| In Benutzung seit:   September 2010                                  |
572| Besonderheiten:      Frueher einfach address{font-style:italic;},    |
573|                      jetzt Formatierung mit vcard                    |
574|                                                                      |
575\**********************************************************************/
576
577.impressum #content .vcard {
578        font-style: italic;
579}
580
581/**********************************************************************\
582| CENTRAL COMMON STYLES: Copyright boxes for pictures                  |
583+----------------------------------------------------------------------+
584| Diese CSS-Anweidungen formatieren dynamisch erzeugten HTML-Code      |
585| durch das neue copyright-boxes-system (licensing.js)                 |
586| Eingefuehrt August 2010.                                             |
587\**********************************************************************/
588
589#img-license-tag  {
590        display: none;
591        position: absolute;
592        /*background-color: rgba(0,0,0, 0.5);*//* Fuer CSS3 ist die Zeit noch nicht reif */
593        background-image: url(/shared/img/fresh.design/bg.copyright-box.png);
594        color: white;
595}
596
597#img-license-tag p {
598        margin: 0;
599        padding: 1em;
600        text-align: center;
601}
602
603#img-license-tag:hover {
604        display: block;
605        background-color: black;
606}
607
608#img-license-tag a:link, #img-license-tag a:visited {
609        color: #eee;
610}
611
612#img-license-tag a:hover, #img-license-tag a:active {
613        color: white;
614}
615
616/**********************************************************************\
617| CENTRAL COMMON STYLES: Heading anchors (Javascript driven)           |
618+----------------------------------------------------------------------+
619| Eingefuehrt August 2010.                                             |
620\**********************************************************************/
621#content h2 a.anchor, #content h3 a.anchor {
622        text-decoration: none;
623        color: #ddd;
624        visibility: hidden;
625}
626
627#content h2:hover a.anchor, #content h3:hover a.anchor {
628        visibility: visible;
629}
630
631/**********************************************************************\
632| CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen")                      |
633+----------------------------------------------------------------------+
634|
635** Bildboxen ("Imageboxen")
636** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
637** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
638** <div class="[box] [links|rechts|center]"> (box für fakultativen Abstand oben/unten)
639**    <img ... />
640**    <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
641**       <p>Viel Text...</p>
642**    </[div|p]>
643**    <div class="clear">&nbsp;</div> (Damit das Bild nicht weitergeht)
644** </div>
645** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
646** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
647** Bilder werden.
648|
649\**********************************************************************/
650
651#content .box, .content .box {
652    /* .box als allgemeine Klasse fuer abstandswuerdige */
653    /* Objekte (.center/.right/.left zum Beispiel) */
654    margin-top: 3em;
655    margin-bottom: 3em;
656}
657
658#content .left img, .content .left img {
659    /* Links ausgerichtetes Bild mit Abstand drumherum */
660    float: left;
661    margin: 0 2em 2em 0;
662}
663
664#content .right img, .content .right img {
665    /* Rechts ausgerichtetes Bild mit Abstand drumherum */
666    float: right;
667    margin: 0 0 2em 2em;
668}
669
670#content .center img, .content .center img {
671    /* Mittig ausgerichtetes Bild mit Abstand drunter */
672    margin: 0 0 0.3em 0;
673}
674
675#content img.nomargin, .content img.nomargin {
676    /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
677    margin: 0;
678}
679
680#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
681.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
682    /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
683       (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
684       Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
685       .clear dann erzeugt. */
686    margin-bottom: 0;
687}
688
689#content .left .bildtext, .content .left .bildtext,
690#content .right .bildtext, .content .right .bildtext {
691    /* p.bildtext oder div.bildtext: Kein Abstand! */
692    text-align: justify;
693    /* Im Endeffekt ist .bildtext hier unnoetig! */
694}
695
696#content .center .bildtext, .content .center .bildtext {
697    /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
698    text-align: justify;
699    margin-left: 10%;
700    margin-right: 10%;
701}
702
703#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
704    /* Text zentriert unter dem Bild in der Breite des Bildes */
705    text-align: justify;
706    margin-left: auto;
707    margin-right: auto;
708}
709
710/*
711    03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center),
712    Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen.
713*/
714
715#content .auto-bildbreite, #content .manuelle-bildbreite {
716        /* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */
717        margin-left: auto;
718        margin-right: auto;
719}
720
721#content .auto-bildbreite  p.bildtext, #content .manuelle-bildbreite  p.bildtext,
722#content .auto-bildbreite  div.bildtext , #content .manuelle-bildbreite div.bildtext {
723        /* Saemtliche Abstaende abschalten, weil Breite des gesamten <div class="box">-Elements
724       durch ein JavaScript geregelt wird */
725        margin-left: 0;
726        margin-right: 0;
727}
728
729/*
730    03. Januar 2010: In Konstrukten wie
731          <div class="box left">
732             <img ... />
733                 <p class="bildtext">foo bar</p>
734                 <div class="clear">&nbsp;</div>
735          </div>
736        kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse
737          <div class="box left clear-after">
738             <img .../>
739                 <p class="bildtext">foo bar</p>
740          </div>
741        Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall
742        laeuft.
743*/
744
745#content .clear-after {
746        display: inline-table;
747        /* CSS-Hack to hide from IE-mac \*/
748        height: 1%;
749        display: block;
750        /* IE mac is wayne, isn't it!? */
751}
752
753html>body #content .clear-after {
754        height: auto;
755}
756
757#content .clear-after:after {
758        content: ".";
759        display: block;
760        height: 0;
761        clear: both;
762        visibility: hidden;
763}
764
765
766
767
768
769
770/*
771   Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
772   Verwendung als Zusatzklasse zu box.
773   
774   Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen
775*/
776
777#content .bordered, .content .bordered {
778    border: 1px solid #094099;
779        padding: 2em;
780}
781
782#content .bordered img, .content .bordered img {
783}
784
785/* ehemaliger Spezialstyle auf der Startseite,
786   jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
787div.desc-right, div.desc-left {
788    /* rechts gefloatetes thumbnail mit Beschreibungstext */
789    float: right;
790    margin: 0pt 0pt 2em 2em;
791/*  width: 236px; */
792/*  border: 1px solid #7090C0;
793    background-color: #EBEBEB; */
794    border: 1px solid #094099;
795    padding: 1em;
796}
797
798div.desc-left {
799        float: left;
800        margin: 0pt 2em 2em 0pt;
801}
802
803div.desc-right img {
804}
805
806div.desc-right p, div.desc-left p {
807    /* Damit der Text nicht über die ganze Fensterbreite geht,
808       <p style="width: Bildbreite;"> nötig. */
809    margin: 1em 0 0 0; padding: 0;
810    font-size: 90%;
811    text-align: left;
812}
813
814
815@media print {
816     /**************************************************************\
817    *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
818    *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
819    *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
820    *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
821    *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
822    *                                                                *
823    *                        P R I N T    C S S                      *
824    *  ehemals in eigener print.css, jetzt aus perfomancegruenden    *
825    *              (ladezeit) in commons.css intigriert              *
826     \**************************************************************/
827
828    body {
829        margin: 1em; padding: 0;
830        color: #000;
831        font: 100% "Times New Roman",Times,serif;
832    }
833   
834    .hidden {
835        display: none;
836    }
837   
838    img {
839        border: none;
840        page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
841    }
842   
843    h1 {
844        margin: 0; padding: 6px 0;
845        text-align: center;
846   
847        font: 180% Arial,Verdana,Helvetica,sans-serif;
848    }
849   
850    h1 a, h1 a span {
851        display: inline !important; /* falls screen/fresh versehentlich angewandtfalls screen/fresh versehentlich angewandt */
852        color: #AAA !important;
853        text-decoration: none !important;
854    }
855   
856    /*h1 span.old:after {
857        * jetzt durch #h1-subtitle auch im IE moeglich *
858        content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
859    }*/
860   
861    #h1-subtitle {
862        display: block;
863        font-size: 108%;
864        border-bottom: 1px solid #AAA;
865        margin-bottom: 10px; margin-top: 0;
866        text-align: center;
867    }
868   
869    h2 {
870        font-size: 150%;
871        margin: 10px 0 10px 0;
872        padding: 0;
873        page-break-after: avoid;  /* auch wenn's nur Opera rafft ;) */
874    }
875   
876    #sidebar, #footer, #sidebar-footnote {
877        display: none;
878    }
879   
880    #copyright {
881        margin: 2em 0;
882        font-size: 80%;
883        text-align: center;
884    }
885   
886    /***** TEXT *****/
887   
888    p {
889        text-align: justify;
890        line-height: 110%;
891    }
892   
893    a:link, a:visited {
894        color: #000;
895        text-decoration: none;
896    }
897} /* end of @media print */
898
899/* 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