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

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