/**********************************************************************\
| CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen") |
+----------------------------------------------------------------------+
|
** Bildboxen ("Imageboxen")
** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
**
(box für fakultativen Abstand oben/unten)
**
** <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
**
Viel Text...
** [div|p]>
**
(Damit das Bild nicht weitergeht)
**
** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
** Bilder werden.
|
\**********************************************************************/
#content .box, .content .box {
/* .box als allgemeine Klasse fuer abstandswuerdige */
/* Objekte (.center/.right/.left zum Beispiel) */
margin-top: 3em;
margin-bottom: 3em;
}
#content .left img, .content .left img {
/* Links ausgerichtetes Bild mit Abstand drumherum */
float: left;
margin: 0 2em 2em 0;
}
#content .right img, .content .right img {
/* Rechts ausgerichtetes Bild mit Abstand drumherum */
float: right;
margin: 0 0 2em 2em;
}
#content .center img, .content .center img {
/* Mittig ausgerichtetes Bild mit Abstand drunter */
margin: 0 0 0.3em 0;
}
#content img.nomargin, .content img.nomargin {
/* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
margin: 0;
}
#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
/* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
(nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
.clear dann erzeugt. */
margin-bottom: 0;
}
#content .left .bildtext, .content .left .bildtext,
#content .right .bildtext, .content .right .bildtext {
/* p.bildtext oder div.bildtext: Kein Abstand! */
text-align: justify;
/* Im Endeffekt ist .bildtext hier unnoetig! */
}
#content .center .bildtext, .content .center .bildtext {
/* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
text-align: justify;
margin-left: 10%;
margin-right: 10%;
}
#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
/* Text zentriert unter dem Bild in der Breite des Bildes */
text-align: justify;
margin-left: auto;
margin-right: auto;
}
/*
03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center),
Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen.
*/
#content .auto-bildbreite, #content .manuelle-bildbreite {
/* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */
margin-left: auto;
margin-right: auto;
}
#content .auto-bildbreite p.bildtext, #content .manuelle-bildbreite p.bildtext,
#content .auto-bildbreite div.bildtext , #content .manuelle-bildbreite div.bildtext {
/* Saemtliche Abstaende abschalten, weil Breite des gesamten -Elements
durch ein JavaScript geregelt wird */
margin-left: 0;
margin-right: 0;
}
/*
03. Januar 2010: In Konstrukten wie
foo bar
kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse
foo bar
Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall
laeuft.
*/
#content .clear-after {
display: inline-table;
/* CSS-Hack to hide from IE-mac \*/
height: 1%;
display: block;
/* IE mac is wayne, isn't it!? */
}
html>body #content .clear-after {
height: auto;
}
#content .clear-after:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*
Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
Verwendung als Zusatzklasse zu box.
Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen
*/
#content .bordered, .content .bordered {
border: 1px solid #094099;
padding: 2em;
}
#content .bordered img, .content .bordered img {
}
/* ehemaliger Spezialstyle auf der Startseite,
jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
div.desc-right, div.desc-left {
/* rechts gefloatetes thumbnail mit Beschreibungstext */
float: right;
margin: 0pt 0pt 2em 2em;
/* width: 236px; */
/* border: 1px solid #7090C0;
background-color: #EBEBEB; */
border: 1px solid #094099;
padding: 1em;
}
div.desc-left {
float: left;
margin: 0pt 2em 2em 0pt;
}
div.desc-right img {
}
div.desc-right p, div.desc-left p {
/* Damit der Text nicht über die ganze Fensterbreite geht,
nötig. */
margin: 1em 0 0 0; padding: 0;
font-size: 90%;
text-align: left;
}
div.desc-right.borderless, div.desc-left.borderless {
border: none; /* ja, ziemlich bescheuert sorum */
}