Für die Definition der Styles des Templates gibt es mehr Dateien als nur die stylesheet.css:
user.css = neue Styles des Autors / Webmaster, die nicht vorhandene Styles des Templates hinzufügen können
colordefinition.css = Definition der Farben, die im Template vorkommen
Diese beiden Dateien werden von der stylesheet.css importiert, bevor die Formate der stylsheet.css eingelesen werden. Nach der stylesheet.css werden noch diese Dateien eingelesen:
noeditmode.css = Front-End-Definition von Styles, die im Editor umschreibende Formate benötigen
usermodify.css = Definition von Styles, die alle anderen überschreiben, auch die des Templates!
Von den Dateien stylesheet.css und noeditmode.css sollte der Webautor / Webmaster "die Finger weg lassen". Alle erdenklichen Abänderungen der Styles lassen sich in den übrigen Dateien vornehmen, ohne den Grundpfeiler der Styles des Templates zu verändern (was fehleranfällig wäre).
Wie schon gesagt werden unmittelbar am Anfang der stylesheet.css zuerst die user.css, dann die colordefinition.css importiert.
Dadurch werden die hinzugefügten benutzerspezifischen Formate zuerst geladen. Falls diese mit den Formatierungen des Templates kollidieren werden sie dadurch, dass die Formate von stylesheet.css importiert und definiert werden, sofort überschrieben und (zer-)stören somit nicht die Templateformatierung.
Die Voreinstellung der Schriftfamilie des Templates steht auf: Arial, Helvetica, Tahoma, Verdana, sans-serif
Die Formatierungen, die im Editor (tinymce) unter 'Formate' als Dropdown-Auswahl erscheinen, wurden zusammengefasst, neu sortiert und innerhalb der stylesheet.css nach oben verlagert (ab der Zeile /* Formate, die im Editor auswählbar sind */).
Im Editor können nur die vorgesehenen CSS-Dateien eingelesen werden. Daher kann und wird das CMS nur diese Formate im Editorfenster anbieten und darstellen, die in der stylesheet.css und in den von der stylesheet.css importierten Dateien.
Da, wie schon an anderer Stelle erwähnt, bestimmte Styles Auswirkungen auf die Sichtbarkeit und Positionierung bzw. sogar auf die Darstellungsebene haben, können diese Styles nicht in der Front-End-Version im Editor verwendet werden (allen Text etc. im Editor immer sichtbar halten und im Fluss des Textes halten). Somit müssen bestimmte Pseudo-Formate für die Darstellung im Editor in der stylesheet.css definiert werden und für die Darstellung im Front-End-Modus korrigiert werden. Diese Umdefinition erfolgt in der Datei noeditmode.css.
Auf den folgenden Unterseiten wird nur auf die Formate eingegangen, die im Editor im Drop-Down-Menü Formate auswählbar sind.
Dateiname: templates/krl-3col-flex/stylesheet.css
@import url("user.css");
@import url("colordefinition.css");
/*
* @category Template for CMSimple_XH Version 1.7+
* @package krl-3col-flex
* @version 3.2.2
* @file stylesheet.css
* @last_modified 13.03.2024
* @author Karl Richard Lembach | https://lembach-cmsimple.de/?Home
* @copyright 2021 - 2024 Karl Richard Lembach <https://lembach-cmsimple.de>
* @license https://www.gnu.org/licenses/gpl-3.0 GNU GPLv3
* @link https://template.lembach-cmsimple.de/?Template-krl-3col-flex
* @contact https://lembach-cmsimple.de/?Home/Kontakt-Formular | webmaster@lembach-cmsimple.de
Dieses Programm ist freie Software.
Sie können es unter den Bedingungen der GNU General Public License, wie von der Free Software Foundation veröffentlicht,
weitergeben und/oder modifizieren, entweder gemäß Version 3 der Lizenz oder (nach Ihrer Option) jeder späteren Version.
Die Veröffentlichung dieses Programms erfolgt in der Hoffnung, daß es Ihnen von Nutzen sein wird, aber OHNE IRGENDEINE GARANTIE,
sogar ohne die implizite Garantie der MARKTREIFE oder der VERWENDBARKEIT FÜR EINEN BESTIMMTEN ZWECK. Details finden Sie in der GNU General Public License.
Sie sollten ein Exemplar der GNU General Public License zusammen mit diesem Programm erhalten haben. Falls nicht, siehe <https://www.gnu.org/licenses/gpl-3.0>.
Deutsche Übersetzung (kein rechtskräftiger Ersatz des Originals): http://www.gnu.de/documents/gpl.de.html
WICHTIG: keine Schriftgrößeneinheit rem verwenden, da dadurch die User-Font-Size zerstört wird!
*/
/*** FONTS ***/
html{font-family: "Segoe UI" ,Roboto, Calibri, Helvetica, Tahoma, Verdana, sans-serif; font-style:normal;font-weight:400;font-size: 1.0rem;font-display: swap;}
/* Grid */
*{margin:0;padding:0}.row,.row-full-width{margin:0 auto;width:100%;position:relative}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%}
.clear,.row:after{clear:both}
img{-ms-interpolation-mode:bicubic}
table{border-collapse:collapse;border-spacing:0}
a,h1,h2,h3,h4,h5,h6,li,p,span{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
.row,.row-full-width,nav,section{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.row{max-width:980px}
.row-full-width{max-width:100%}
.row-full-width:after,.row-full-width:before,.row:after,.row:before{content:" ";display:table}
.row .row,.row-full-width .row{width:auto}
/*** Grid-Raster: 1/24 der gesamten Breite => .c(n) = [(n)* 1/24 * Gesamtbreite] ***/
.c1,.c10,.c11,.c12,.c13,.c14,.c15,.c16,.c17,.c18,.c19,.c2,.c20,.c21,.c22,.c23,.c24 .third,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.fifth,.half,.quarter{position:relative;width:100%;float:left;display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.c1{position:relative;width:4.164%}
.c2{position:relative;width:8.332%}
.c3{position:relative;width:12.49%}
.c4{position:relative;width:16.65%}
.c5{position:relative;width:20.83%}
.c6{position:relative;width:24.97%}
.c7{position:relative;width:29.16%}
.c8{position:relative;width:33.332%}
.c9{position:relative;width:37.492%}
.c10{position:relative;width:41.662%}
.c11{position:relative;width:45.832%}
.c12{position:relative;width:49.968%}
.c13{position:relative;width:54.16%}
.c14{position:relative;width:58.33%}
.c15{position:relative;width:62.49%}
.c16{position:relative;width:66.662%}
.c17{position:relative;width:70.83%}
.c18{position:relative;width:74.99%}
.c19{position:relative;width:79.16%}
.c20{position:relative;width:83.33%}
.c21{position:relative;width:87.49%}
.c22{position:relative;width:91.66%}
.c23{position:relative;width:95.83%}
.c24,.full{position:relative;width:100%}
.half{position:relative;width:50%}
.third{position:relative;width:33.332%}
.quarter{position:relative;width:25%}
.fifth{position:relative;width:20%}
/* Formate, die im Editor auswählbar sind */
/* Unterstreichung */
span.underline, p.underline {
border: 0; border-bottom: 1px dotted var(--underline);
}
/* Text mittelblau */
span.blue, p.blue {
color: var(--bluetext);
}
/* Beschriftung */
p.caption, span.caption {
font: inherit;
font-size: .8em;
font-weight: 600;
color: var(--caption);
margin: 0;
line-height: normal;
}
/* kein Zeilenumbruch an blank */
p.noBr, span.noBr, td.noBr {
white-space: nowrap;
}
/* Block in 2 Spalten anzeigen wenn Viewport breiter als 819px ist. */
div.col{
margin-top: 1.0ex;
padding: 1ex 1ex 1ex 1ex;
background-color: var(--newsbackground);
}
div.col p:last-of-type {
margin-bottom: 0em;
}
@media only screen and (min-width : 820px) {
div.col {
column-count: 2;
column-gap: 2ex;
column-rule: 1px dotted var(--dynakzent);
text-align: justify;
hyphens: auto;
}
.col p {
margin: 0 0 1ex 0;
text-align: justify;
hyphens: auto;
orphans: 1;
widows: 1;
}
}
/* dünne Schrift */
span.Lighter, p.Lighter, div.Lighter {
font-weight: lighter;
}
/* fettere Schrift */
span.Bolder, p.Bolder, div.Bolder {
font-weight: 501; /* Firefox zeigt erst ab font-weight: 501 die schwerere Schrift an */
}
/* fette Schrift */
span.Bold, p.Bold, div.Bold {
font-weight: 800;
}
b, strong {
font-weight: 600;
}
/* kleine Schrift */
span.smaller, p.smaller, div.smaller {
font-size: .85em;
}
/* größere Schrift */
span.bigger, p.bigger, div.bigger {
font-size: 1.25em;
}
/* Besonderes Format des ersten Buchstaben im Absatz */
p.initial {
margin-top: 0.2em;
}
p.initial::first-line {
line-height: 100%;
}
p.initial::first-letter {
text-shadow: 0.05em 0.05em 0.05em white, 0.05em 0.05em 0.2em black;
font-size: 150%;
font-weight: 600;
margin-right: .12em;
float: left;
line-height: 100%;
}
/* Float beenden */
p.clear, div.clear {
clear: both;
}
/* Authoren-Nennung bei Zitaten */
p.blockAuth {
text-align: right;
font-style: normal;
}
/* Fußnoten */
body {
counter-reset: fussnote;
}
/* Durchnummerierung der Verweise im Text auf die Fußnoten unter den Text */
.autoFussn_Verweis {
counter-increment: fuss;
vertical-align: super;
font-weight: bolder;
}
.autoFussn_Verweis::after {
content: ']';
}
.autoFussn_Verweis::before {
content: '[';
}
span.autoFussn_Verweis {
font-size: 75%;
}
div.Headline_Fussnote {
margin: 1em .5em .3em .5em;
border-bottom: 1px solid var(--dynakzent);
padding: 0em .5em 0em .3em;
color: var(--footnoteheadline);
font-size: .95em;
line-height: normal;
}
div.Headline_Fussnote::before {
content: 'Fussnote(n) ';
}
/* automatisch Durchnummerierung der Fußnoten unter dem Text */
p.auto_Fussnote {
counter-increment: fussnote;
color: var(--footnotetext);
margin: 0em 0.5em 0em 1.5em;
font-size: 0.95em;
}
p.auto_Fussnote::before {
content: counter(fussnote);
margin-right: .5em;
margin-left: -1em;
vertical-align: super;
font-weight: bold;
font-size: 75%;
}
span.foot_Verweis {
color: var(--footverweis);
}
span.foot_Verweis::before {
content: '[*]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: var(--footverweis);
}
span.footnote {
padding: .5em .5em .5em 1.0em;
position: relative;
color: var(--footnote);
border-top: var(--dynakzent) solid 1px;
margin: 1em 0 .75em;
font-size: 90%;
line-height: 2em;
}
span.footnote::before {
color: var(--footverweis);
content: "*" !important;
display: block;
font-size: 90%;
position: absolute;
left: .25em;
top: .4em;
}
/* Schattenwurf nach unten rechts */
.shadow, span.shadow, p.shadow, div.shadow, img.shadow {
display: inline-block;
border-radius: .1ex;
box-shadow: .05ex .05ex .2ex var(--dynakzent), .25ex .25ex .2ex var(--hintergrund), .4ex .4ex .1ex var(--dynakzent2);
margin-bottom: .5ex;
}
/* Block rechtsseitig, links umflossen | Brotkrümelnavigationszeile */
div.floatRightNavi {
float: right;
max-width: calc(51%);
padding-left: 1ex;
margin-left: 1ex;
}
/* Block zentriert, max. 800px breit, mir Rahmen und Hintergrundfarbe */
div.centered_bordered {
max-width: 800px;
background-color: beige;
border: 2px solid lightgray;
border-radius: 5px;
padding: 10px 10px 10px 10px;
margin: 5px auto 0 auto;
}
/* Reiter eines TAB */
span.Tab {
border: 1px solid var(--tabborder);
border-bottom: 0px;
border-radius: 3px 3px 0px 0px;
background-color: var(--tabbackground);
padding-left: .0em;
padding-right: .0em;
margin-left: .5em;
margin-right: .5em;
}
span.Tab::before {content: "_"; position: relative; right: .45em; bottom: -.1em;}
span.Tab::after {content: "_"; position: relative; left: .45em; bottom: -.1em;}
/* Tastertur-Tasten */
span.Taste {
padding: 0em 0.3em 0em 0.3em;
border: 1px solid var(--tasteborder);
border-radius: .4em;
box-shadow: var(--tasteshadow) 0.1em 0.2em 0.2em 0.2em;
}
/* Elemente innerhalb des Containers werden nebeneinander und gleich hoch angezeigt */
div.flexContainer {
display: flex;
}
/* Block oder Bild links */
div.imgL, img.imgL {
margin: 0 0 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
}
/* Block oder Bild links mit Rahmen, siehe auch @media (min-width:640px) */
div.imgLB, img.imgLB {
margin: 0 1em 1em 0;
padding: 0.3em;
float: none;
max-width: 100%;
text-align: left;
border: 1px solid var(--imageborder);
border-radius: .3em;
display: inline-block;
background: var(--imagebackground);
}
/* Block oder Bild rechts */
div.imgR, img.imgR {
margin: 0 0 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
}
/* Block oder Bild rechts mit Rahmen, siehe auch @media (min-width:640px) */
div.imgRB, img.imgRB {
margin: 0 0 1em 0;
padding: .3em;
float: none;
max-width: 100%;
text-align: left;
border: 1px solid var(--imageborder);
border-radius: .3em;
display: inline-block;
background: var(--imagebackground);
position: relative;
overflow: hidden;
}
div.imgR p,
div.imgL p,
div.imgRB p,
div.imgLB p,
div.imgRB img,
div.imgLB img {
border-radius: .3em;
margin: 0 0 .5em 0;
}
div.img-inner {
margin: .75em;
}
div.imgNrml {
margin: 1em 0;
}
div.imgNrml img {
margin: 0 0 .5em 0;
}
/* Block oder Bild mit Hover-Effekt */
img.hovImg, div.hovImg {
max-width: 100%;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
transition: transform .3s;
}
img.hovImg:hover, div.hovImg:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
box-shadow: 3px 3px 5px var(--imagehovershadow);
}
/* Unter-Überschrift */
p.subHeading {
font-size: 1.5em;
font-weight: 600;
margin: .5em 0 .25em 0;
}
/* Text in langer Zeile ohne Zeilenumbruch ausgeben, mit Scrollbalken und Rahmen */
div.horizontScrollLine {
box-sizing: border-box;
border: 1px dotted var(--horizontscrolllineborder);
white-space:nowrap;
padding: 8px;
overflow: auto;
line-height: 1.5;
color: var(--horizontscrolllinecolor);
}
/* Block rechtsseitig, links umflossen */
div.floatRight, p.floatRight {
float: right;
width: calc(50% - 2.15ex);
padding-left: 1ex;
margin-left: 1ex;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: var(--caption);
}
/* Block linksseitig, rechts umflossen */
div.floatLeft, p.floatLeft {
float: left;
width: calc(50% - 2.15ex);
padding-right: 1ex;
margin-right: 1ex;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: var(--caption);
}
/* START - Text nur sichtbar, wenn Cookies noch nicht durch User erlaubt wurden */
/* Dies ist die Editiermoduse Formatierung */
p.no_cookies_text {
background-color:var(--nocookiestextbackground);
}
p.no_cookies_text::before {
content: '[Display if Cookies disallowed]';
vertical-align: super;
font-weight: 700;
font-size: 70%;
color: var(--nocookiestextbefore);
}
/* Dies ist die Front-End-Formatierung */
.frontend p.no_cookies_text {
background-color:unset;
}
.frontend p.no_cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}
/* ENDE - Text nur sichtbar, wenn Cookies noch nicht durch User erlaubt wurden */
/* START - Text nur sichtbar, wenn Cookies durch User erlaubt wurden */
/* Diese ist die Editiermodus Formatierung */
p.cookies_text {
background-color: var(--cookiestextbackground);
}
p.cookies_text::before {
content: '[Display if Cookies allowed]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: var(--cookiestextbefore);
}
/* Dies ist die Front-End-Formatierung */
.frontend p.cookies_text {
background-color: unset;
}
.frontend p.cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}
/* ENDE - Text nur sichtbar, wenn Cookies durch User erlaubt wurden */
/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp || Editiermodus Formatierung */
span.tooltip, span.t-tiptext-unten, span.t-tiptext-oben {}
/* Tooltip container */
.tooltip {
border-bottom: 1px dashed var(--tooltipborder); /* Wenn eine gepunktete Linie unter dem Text erscheinen soll */
}
/* Tooltip text */
.tooltip .t-tiptext-unten, .tooltip .t-tiptext-oben {
background-color: var(--tooltipbackground);
border: 1px solid var(--tooltipborder);
}
/* Tooltip unterhalb des Wortes */
.tooltip .t-tiptext-unten {
border-radius: 0 0 6px 6px;
}
/* Tooltip oberhalb des Wortes */
.tooltip .t-tiptext-oben {
border-radius: 6px 6px 0 0;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp || Editiermodus Formatierung */
/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp || Frontend Formatierung */
.frontend span.tooltip, .frontend span.t-tiptext-unten, .frontend span.t-tiptext-oben {}
/* Tooltip container */
.frontend .tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.frontend .tooltip .t-tiptext-unten, .frontend .tooltip .t-tiptext-oben {
visibility: hidden;
/* Breite des Tooltips */
max-width: 80%;
height: auto;
text-align: center; /* Textausrichtung in der Box */
padding: 1ex; /* damit der Text nicht am inneren Rand klebt */
margin: 1.25ex; /* damit die Toolbox nicht am unteren Wortrand klebt, und der Pfeil evtl im Buchstaben darüber verschwindet */
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
}
/* Tooltip unterhalb des Wortes */
.frontend .tooltip .t-tiptext-unten, .frontend .tooltip .t-tiptext-oben {
opacity: 0;
transition: opacity .7s;
top: 100%;
left: 50%;
margin-left: -30%; /* Nutze die halbe Weite (120/2 = 60 oder 100%/2 = 50%), um den Tooltipp zu zentrieren. Bei max-width: auto; kann man mit den % spielen. -70% ist näher nach links; -30 % weiter nach rechts */
}
/* Tooltip oberhalb des Wortes */
.frontend .tooltip .t-tiptext-oben {
top: unset;
bottom: 100%;
}
.frontend .tooltip .t-tiptext-unten::after, .frontend .tooltip .t-tiptext-oben::after {
content: " ";
position: absolute;
bottom: 100%; /* Pfeil oberhalb der Tooltip-Box */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--tooltipborder) transparent;
}
.frontend .tooltip .t-tiptext-oben::after {
bottom: unset;
top: 100%; /* Pfeil unterhalb der Tooltip-Box */
border-color: var(--tooltipborder) transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.frontend .tooltip:hover .t-tiptext-unten, .frontend .tooltip:hover .t-tiptext-oben {
visibility: visible;
opacity: 1;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp || Frontend Formatierung */
/* Silbentrennung */
/* wikipedia: Hyphen (englisch) steht für: Bindestrich (im Englischen auch Trennstrich), siehe Viertelgeviertstrich#Bindestrich */
div.Silbentrennung, p.Silbentrennung, span.Silbentrennung {
hyphens: auto;
}
/* START - Bild einblenden beim hovern eines Textes innerhalb eines Blindlinks (<a href="#">) */
/* Editiermodus Formatierung */
span.mausbild {}
span.mausbild img {
display: inline;
width: auto;
height: 1em;
}
a:hover span.mausbild img {
height: 2em;
}
/* Frontend Formatierung */
.frontend span.mausbild img {
display: none;
width: auto;
max-width: 95%;
}
.frontend a:hover span.mausbild img{
display:block;
height: unset;
position: absolute;
z-index: 1;
}
/* ENDE - Bild einblenden beim hovern eines Textes innerhalb eines Blindlinks (<a href="#">) */
/* <hr> - ähnliche Trennlinie über 3/4 der Breite */
p.hr-dreiviertel {
margin: 5px auto 5px auto;
width: 75%;
height: 3px;
text-align: center;
color: white;
background-color: var(--dynakzent);
}
/* <hr> - ähnliche Trennlinie mit Farbsättigungsverlauf */
p.hr-gradient {
margin: 5px auto 5px auto;
width: 85%;
height: 3px;
text-align: center;
background-image: linear-gradient(
to right,
rgba(0,0,0,0.05),
var(--dynakzent),
rgba(0,0,0,0.05)
);
}
/* Rahmen mit runden Ecken */
span.rundrahmen {
border: .4ex solid blue;
padding: .1ex .15ex .1ex .15ex;
border-radius: 2ex;
}
/* Bereich kann nicht markiert werden (nicht kopiert werden) */
span.nichtmarkieren {
-ms-user-select: None;
-moz-user-select: None;
-webkit-user-select: None;
user-select: None;
}
/* "Hinweisschild" */
span.label, .label {
display: inline;
padding: 0em .5em .2em .5em;
font-size: 75%;
font-weight: 600;
line-height: 1;
color: var(--labelcolor);
background-color:var(--labelbackground);
white-space: nowrap;
border-radius: .25em;
letter-spacing: 1px;
}
/* "Warnhinweis" */
span.label-danger, .label-danger {
background-color: var(--labeldangerbackground);
color: var(--labeldangercolor);
}
span.label-danger {
padding: 0 .2em .2em .2em;
font-weight: 700;
border-radius: .25em;
letter-spacing: .1em;
}
span.dreid {
text-shadow: 0.06ex 0.06ex 0.1ex var(--hintergrund), 0.1ex 0.1ex 0.063ex var(--primary);
box-shadow: .052vw .052vw .208vw var(--hintergrund), .052vw .052vw .208vw var(--primary);
padding: .3ex;
}
@media only screen and (min-width: 1920px) {
span.dreid {
box-shadow: 1px 1px 4px var(--hintergrund), 1px 1px 4px var(--primary);
}
}
span.whiteovershadow, p.whiteovershadow, div.whiteovershadow {
text-shadow: 0.1ex 0.1ex 0.3ex black, 0.1ex 0.1ex 0.4ex white;
color: #fff;
}
/*** Format ohne wirklichen Sinn - dient dazu im Editor in der Formatauswahl eine weiße Zeile zu erzeugen ***/
p.white_on_white {
color: white;
background-color: white;
}
/****** Allgemeine Styles ******/
hr {
border: 0;
border-bottom: 1px solid var(--dynakzent);
height: 0px;
clear: both;
margin: 1ex 0 0.5ex 0;
}
hr.hrdot {
border: 0;
border-bottom: 1px dotted var(--dynakzent);
height: 0px;
clear: both;
margin: 1em 0;
}
a.zoom,
a.zoom_g,
a.zoom_i {
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
img.imgBorder {
border: 1px solid rgba(255,255,255,.25);
}
/* Layout */
body {
height: 100%;
font-size: 1em;
color: var(--primary);
background-color: var(--hintergrund);
background-size: 100% auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width : 1920px) {
body {
background-image: linear-gradient( to right, var(--dynakzent2) 0%, var(--dynakzent) calc(50% - 960px), var(--dynakzent) calc(50% + 960px), var(--dynakzent2) 100%);
}
body.print {
background-image: none;
}
body#tinymce {
background-image: none;
}
}
div.body {
max-width: 1920px;
margin: 0px auto 0px 0px; /* gilt nur im Editiermodus */
background:var(--hintergrund);
}
.frontend div.body {
margin: 0px auto 0px auto; /* gilt für den Frontendmodus */
}
#header {
background: var(--hintergrundheader);
position: relative;
border-bottom: 5px solid var(--dynakzent);
font-size: 1.25em;
overflow: auto;
}
.langMenu {
display: inline;
position: absolute;
top: 20px;
right: 20px;
}
.langMenu a {
border: 0;
}
.langSwitch {
float: right;
padding-left: 15px;
}
@media only screen and (max-width : 480px) {
.langSwitch {display: none;}
}
.langSwitch a {
border: 0;
padding: 0px;
margin: 0px;
}
.langSwitch img {
border: 1px solid var(--navboxborder);
margin-top: -0.5ex;
height: 1.35em;
}
.lastChanged a {
border-bottom: unset;
}
.lastChanged {
margin: 0 .7em 0 0em;
display: inline-block;
float: right;
font-variant: small-caps;
padding: 0px 5px 0px 5px;
border: 1px solid var(--navboxborder);
}
/*
@media only screen and (max-width: 911px) {
.lastChanged {
margin-top: 0.5ex;
}
}
@media only screen and (max-width : 530px) {
.lastChanged {display: none;}
}
*/
.changeFontsize a {
border-bottom: unset;
}
.changeFontsize {
margin: 0 .7em 0 0em;
display: inline-block;
float: right;
padding: 0px 5px 0px 5px;
border: 1px solid var(--navboxborder);
}
@media only screen and (max-width : 399px) {
.changeFontsize {display: none;}
}
.secHeader {
background: var(--dynakzent);
padding: .25em .5em;
color: var(--akzenttextcolor);
overflow: auto;
}
.secHeader a {
color: var(--akzenttextcolor);
text-decoration: none;
}
.locator,
.searchBox {
display: inline-block;
}
.locator {
font-size: .85em;
}
.locator a {
border: 0;
}
.locator a:hover {
color: var(--akzenttextcolor);
text-decoration: underline;
}
/* search */
.searchBox {
float: right;
border: 1px solid var(--navboxborder);
}
.searchLabel {
font-size: 1em;
font-variant: small-caps;
padding-right: .25ex;
opacity: 0.7;
}
#searchform:focus-within .searchLabel {
display: none;
}
.search {
}
#searchform {
}
#searchform input::-moz-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: var(--akzenttextcolor);
opacity: 1;
}
#searchform input:-ms-input-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: var(--akzenttextcolor);
padding: 1px 0 1px 2px;
}
#searchform input::placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: var(--akzenttextcolor);
opacity: 1;
}
#searchform input {
border: none;
background: var(--dynakzent);
font-family: inherit;
font-size: 1em;
width: 1.5em;
transition: all 200ms linear;
cursor: pointer;
margin: 0;
color: var(--akzenttextcolor);
height: 2ex;
}
#searchform input:focus {
width: 10em;
outline: none;
padding: 0px 2px 0px 4px;
}
#wrapper {
background: var(--hintergrund);
padding: 20px;
overflow: auto;
min-height: 25vh;
}
.maincont {
padding: 0px 0 0px 0;
}
#topLink {
z-index: 1000;
display: none;
position: fixed;
right: 10px;
bottom: 5px;
}
a#topLink {
color: var(--toplink);
border: 0px;
}
.menulevel1 {
margin: 0ex;
padding: .0em;
}
/* Allgemeines */
code {
background-color: var(--codebackground);
color: var(--codecolor);
margin: 0;
padding: .125em .2em;
font: 1em/1.5em Consolas, monospace;
}
.code {
background-color: var(--codebackground);
color: var(--codecolor);
border: 1px solid var(--codeborder);
padding: 10px 12px;
font: 1em/normal Consolas, monospace;
display: block;
}
.xh_code {
background-color: var(--xhcodebackground);
color: var(--xhcodecolor);
border: 1px solid var(--xhcodeborder);
padding: 10px 12px;
font: .9em/normal Consolas, monospace;
display: block;
}
blockquote {
padding: .5em .75em .5em 3em;
position: relative;
color: var(--blockquotecolor);
border-top: 1px dotted var(--blockquoteborder);
border-bottom: 1px dotted var(--blockquoteborder);
border-left: 0;
margin: 1em 0 .75em;
font-style: italic;
font-size: inherit;
}
blockquote::before {
color: var(--blockquotebefore);
content: "\f10e" !important;
display: block;
font-family: "FontAwesome";
font-size: 1.25em;
position: absolute;
left: .75em;
top: .5em;
}
blockquote p {
margin: 0;
}
.submenDiv {
font-size: 0.9em;
color: var(--submendivcolor);
margin: 20px 0;
padding: .5em 0;
border-top: 1px dotted var(--submendivborder);
}
.submenDiv:empty {
display: none !important;
}
.submenDiv span {
float: left;
}
.submenDiv ul {
list-style: none;
margin: 0 0 .75em .75em;
padding: 0;
float: left;
border-left: 1px dotted var(--submendivborder);
}
.submenDiv ul li {
margin-left: 1em;
padding: 0 0 .25em 0;
}
.submenDiv ul li a {
list-style-type:none;
border: 0;
}
/* Akkordeon - Seiteninhalte aus- und einklappen *********************************/
/* Aeussere Klammer durch <details> - </details> *********************************/
details {
padding: 0 .3em 0 .3em;
border:1px dotted var(--akkordeonborder);
}
details[open] {
border: 0px;
background:var(--akkordeonbackground);
}
/* Innere Klammer (fuer die Ueberschrift) durch <summary> - </summary> ***********/
summary {
text-shadow:.2em .2em .25em var(--akkordeonshadow);
font-weight: 600;
font-size: 1.25em;
}
details[open] > summary {
font-size: 1.75em;
border:1px dotted var(--akkordeonborder);
}
/* NEWS */
#newsboxes {
display: block;
padding: 0px 0 20px 20px;
}
#newsboxes2 {
display: none;
padding: 20px 0;
}
#newsboxes2 .news {
margin: 0 1%;
}
.news {
font-size: 0.9em;
padding: 20px 20px 10px 20px;
margin: 0 0 20px 0;
border: 0;
background: var(--newsbackground);
}
.news:empty {
display: none;
}
.news h1,
.news h2,
.news h3,
.news h4,
.news h5,
.news h6 {
margin: .5em 0 0 0;
font-weight: 600;
}
.news h1 {
font-size: 1.5em;
color: var(--newscolor);
}
.news h2 {
font-size: 1.4em;
}
.news h3 {
font-size: 1.3em;
}
.news h4 {
font-size: 1.2em;
}
.news h5 {
font-size: 1.1em;
}
.news h6 {
font-size: 1.0em;
}
/* fuer das Submenu innerhalb des zusaetzlichen News-Box Containers */
.news ul{
list-style-type:none;
padding: .75em 0 .75em 0;
}
/* NEWS end */
h1, h2, h3, h4, h5, h6 {
font-family: 'Helvetica', sans-serif;
color: var(--h6color);
font-weight: 600;
margin: 1.5ex 0 .5ex 0;
line-height: normal;
}
h1:first-child {
}
h1 {
margin-top: 0 !important;
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1.1em;
}
p {
margin: 0 0 .75em 0;
}
a {
text-decoration: none;
color: var(--acolor);
border-bottom: 1px dotted var(--aborder);
}
a:hover {
border-color: var(--ahoverborder);
color: var(--ahovercolor);
}
a[target="_blank"]::after {
content: "\00a0\f08e";
font: 0.889em FontAwesome;
opacity: .75;
}
a[href^="http"]:not([target="_blank"]):after {
content: "\00a0\f045";
font: 0.889em FontAwesome;
opacity: .35;
}
ol {
padding: 0 0 0 2em;
list-style: decimal;
}
ol ol {
margin: 0;
padding: 0 0 0 1em;
list-style: upper-alpha;
}
ol ol ol {
margin: 0;
padding: 0 0 0 1em;
list-style: lower-alpha;
}
ol li {
margin: 0;
padding: 0;
}
ul li {
margin-left: 2ex;
}
ul.listUnordered {
list-style: none inside;
margin: 0 0 .75em 1em;
}
ul.listUnordered ul {
margin: 0 0 0 1em;
list-style: none;
}
ul.listUnordered li::before {
content: '»';
margin-left: -1em;
width: 1em;
display: inline-block;
}
ul.listUnordered ul li:before {
content: '›';
margin-left: -1em;
width: 1em;
display: inline-block;
}
ul.listUnordered ul ul li:before {
content: '-';
margin-left: -1em;
width: 1em;
display: inline-block;
}
/* tables responsive / horiz. scrollable */
table.respTable {
font-family: inherit !important;
display: inline-block;
vertical-align: top;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
margin: .5em 0;
background: var(--resptablebackground);
}
.respTable {
-webkit-overflow-scrolling: touch;
}
.respTable th {
text-align: left;
background: var(--resptablethbackground);
color: var(--resptablethcolor);
font: inherit;
font-weight: 600;
}
.respTable th,
.respTable td {
padding: .25em .5em;
border: 1px solid var(--resptabletdborder);
vertical-align: top;
}
.respTable tr:nth-of-type(2n+1) {
background: var(--resptabletrnthbackground);
}
abbr {
text-decoration: none;
border: 0;
}
/*** Footer ***/
#footer {
background: var(--footerbackground);
color: var(--footercolor);
border-top: 5px solid var(--dynakzent);
font-family: 'Helvetica', sans-serif;
font-size: .9em;
font-weight: normal;
padding: 1em 0 1em 0;
text-align: center;
}
#footer a {
color: var(--footeracolor);
text-decoration: none;
border: 0;
}
#footer p {
color: var(--footerpcolor);
margin: 1em 0 .25em 0;
}
form.xh_mailform input,
form.xh_mailform textarea {
border: 1px solid var(--xhmailformborder);
padding: .25em .5em;
font: normal 1em/normal 'Helvetica', sans-serif;
width: 100%;
box-sizing: border-box;
margin-bottom: .25em;
}
form.xh_mailform input:focus,
form.xh_mailform textarea:focus {
background: var(--xhmailformbackground);
outline: none;
}
form.xh_mailform label {
font-size: .9em;
color: var(--xhmailformcolor);
padding-left: .75em;
}
.xh_captcha_input {
width: 5em !important;
text-align: center;
}
.xh_captcha_code {
float: left;
text-align: center;
color: var(--xhcaptchacodecolor);
text-decoration: none;
background-color: var(--xhcaptchacodebackground);
padding: .25em .5em;
box-sizing: border-box;
margin-bottom: 0.25em;
width: 5em !important;
}
input[type="submit"] {
padding: .25em .5em;
cursor: pointer;
background: var(--inputsubmitbackground);
color: var(--inputsubmitcolor);
margin: .25em .25em .25em 0;
border: 1px solid var(--inputsubmitborder);
font-weight: 600;
width: auto !important;
box-sizing: border-box;
}
input[type="submit"]:focus {
background: var(--inputsubmitbackground) !important;
color: var(--inputsubmitcolor) !important;
}
button {
border: 1px solid var(--buttonborder);
cursor: pointer;
font-family: 'Helvetica', sans-serif !important;
font-size: 1em !important;
padding: .25em .5em;
background: var(--buttonbackgrund);
color: var(--buttoncolor);
box-sizing: border-box;
}
input[type="reset"] {
display: none;
}
/* SecMenü */
.burger {
cursor: pointer;
display: none;
color: var(--burgercolor);
float: right;
margin-left: .5em;
border: 1px solid var(--navboxborder);
padding: 0px 5px 1px 5px;
text-align: center;
font-size: .9em;
}
.burger::before {
color: var(--burgercolor);
content: "\f0c9";
display: block;
font-family: "FontAwesome";
padding-top: 3px;
}
.burger.active::before {
color: var(--burgercolor);
content: "\f00d";
display: block;
font-family: "FontAwesome";
}
.secmenu {
padding: 0px 20px 20px 0;
}
.secmenu li {
list-style: none;
border-top: 1px dotted var(--secmenuliborder);
margin-left: 0;
}
.secmenu li a,
.secmenu li span {
text-decoration: none;
padding: .5em;
display: block;
color: var(--akzenttextcolor);
background: var(--dynmenumain);
border: 0;
}
.secmenu li a:hover {
border: 0;
background: var(--dynmenuhover);
}
.secmenu li span {
display: block;
color: var(--akzenttextcolor);
background: var(--dynmenuaktiv);
}
.secmenu li a:hover {
}
.secmenu .menulevel2 li a,
.secmenu .menulevel2 span {
padding: .5em .5em .5em 1.5em;
}
.secmenu .menulevel3 li a,
.secmenu .menulevel3 span {
padding: .5em .5em .5em 2.5em;
}
.secmenu .menulevel4 li a,
.secmenu .menulevel4 span {
padding: .5em .5em .5em 3.5em;
}
.secmenu .menulevel5 li a,
.secmenu .menulevel5 span {
padding: .5em .5em .5em 4.5em;
}
.secmenu .menulevel6 li a,
.secmenu .menulevel6 span {
padding: .5em .5em .5em 5.5em;
}
.secmenu .menulevel7 li a,
.secmenu .menulevel7 span {
padding: .5em .5em .5em 6.5em;
}
.secmenu .menulevel8 li a,
.secmenu .menulevel8 span {
padding: .5em .5em .5em 7.5em;
}
.secmenu .menulevel9 li a,
.secmenu .menulevel9 span {
padding: .5em .5em .5em 8.5em;
}
/* sitemap */
[class^="sitemaplevel"] {
list-style: none;
padding: 0;
margin: 0;
}
[class^="sitemaplevel"] a {
margin: .5em 0 0em 0;
display: block;
padding-bottom: .5em !important;
}
[class^="sitemaplevel"] a:hover {
font-weight: 600;
}
[class^="sitemaplevel"] li {
list-style: none;
}
.sitemaplevel2 li a {
padding: 0 0 0 .5em;
}
.sitemaplevel3 li a {
padding: 0 0 0 1em;
}
.sitemaplevel4 li a {
padding: 0 0 0 1.5em;
}
.sitemaplevel5 li a {
padding: 0 0 0 2em;
}
.sitemaplevel6 li a {
padding: 0 0 0 2.5em;
}
.sitemaplevel7 li a {
padding: 0 0 0 3em;
}
.sitemaplevel8 li a {
padding: 0 0 0 3.5em;
}
.sitemaplevel9 li a {
padding: 0 0 0 4em;
}
#noScript {
color: var(--noscriptcolor);
background: var(--noscriptbackground);
padding: 0.5em;
position: fixed;
top: 100px;
right: 0;
z-index: 999;
font-size: 0.9em;
text-align: right;
width: 10em;
}
#noScript a {
color: var(--noscriptcolor) !important;
font-weight: 700;
}
body.xh_login {
color: var(--xhlogincolor);
background: var(--xhloginbackground);
display: table;
height: 100vh;
width: 100%;
margin: 0 !important;
}
body.xh_login div.xh_login {
border: 1px solid var(--xhlogindivborder);
box-shadow: inset 0px 0px 0px 1px var(--xhlogindivshadow);
background: var(--xhlogindivbackground);
border-radius: 0;
margin: 0;
padding: 1em;
position: absolute;
left: 50%;
top: 50%;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
}
body.xh_login div.xh_login input {
padding: .25em .5em;
box-sizing: border-box;
}
body.xh_login div.xh_login a {
color: var(--xhlogindivacolor);
}
#pp_last_update time:after {
content: "Uhr";
padding-left: 3px;
}
#pp_last_update {
padding-bottom: .5ex;
}
.xh_search_results {
margin-left: 2em;
}
.xh_search_results li {
list-style-type: "»-» ";
margin-bottom: .3em;
}
.xh_search_results li a {
font-weight: 500;
}
/*** Plugin Wdir_XH ***/
.wdir_table thead {
background: var(--dynakzent);
}
.wdir_table td:nth-child(2), td:nth-child(3) {
text-align: center;
padding-right: 3ex;
}
/*** Plugin SimplePlugins Edition KRL - Funktion Recently Changed ***/
.recently_changed {
padding: .3em .3em .03em .3em;
}
dl.recently_changed {
border: 1px solid var(--imageborder);
float:left;
margin: .3em .3em .3em;
}
.recently_changed div {
background-color: var(--imagebackground);
border: 1px solid var(--imageborder);
margin-bottom: .3em;
}
.recently_changed dt {
background-color: var(--hintergrund);
border: 1px solid var(--imageborder);
padding: .3em 0px .3em .3em;
margin-bottom: .3em;
}
.recently_changed dd {
padding: 0 0 .2em 2em;
}
.recently_changed_pure {
margin-left: 1em;
list-style-type: none;
}
.recently_changed_pure li::before {
content: "⇒ ";
color: var(--dynakzent);
}
/*** Plugin Register_XH ***/
.regi_loggedin_user_hor {
margin-right: 1ex;
margin-left: -0.5ex;
}
.regi_loggedin_loggedin_hor {
margin-bottom: .5ex;
color: var(--akzenttextcolor) !important;
font-weight: 700 !important;
}
.regi_loggedin_settings_hor {
margin-top: .5ex
margin-bottom: .5ex;
background: var(--hintergrund);
padding-left: 1ex !important;
margin-left: -0.5ex;
}
.regi_loggedin_loggedinarea_hor {
background: var(--dynmenumain) !important;
border: 1px solid var(--dynmenumain) !important;
color: var(--akzenttextcolor);
margin: 1px 0 0 0 !important;
}
.regi_loggedin_logout_hor {
background: var(--hintergrund);
padding-left: 1ex;
padding-right: 1ex;
}
.regi_loggedin_loggedinarea_ver {
background: var(--dynmenumain);
margin-top: 1px !important;
padding: 1ex;
}
.regi_loggedin_user_ver {
color: var(--akzenttextcolor);
}
.regi_loggedin_loggedin_ver {
color: var(--akzenttextcolor) !important;
font-weight: 700;
}
.regi_loggedin_settings_ver, .regi_loggedin_logout_ver {
background: var(--hintergrund);
padding-left: 1ex !important;
width: calc(100% - 1ex) !important;
}
.regi_loggedin_settings_ver {
margin-bottom: .5ex;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/*** Plugin Privacy_XH agreement form. ***/
#privacy {
border: 3px solid var(--labeldangerbackground);
padding: 1ex 1ex 0 1ex;
margin-bottom: 1ex;
}
.privacy_buttons {
text-align: center;
}
/*** Plugin Memberpages_XH ***/
.memberslogin {
background-color: var(--dynmenumain);
padding: 1ex 1ex .01ex 1ex !important;
color: var(--akzenttextcolor);
}
.memberslogin form {
padding: 0ex 1ex 1ex 0;
}
#small_memberpages_Login {
padding: 0ex 1ex 1ex 0ex !important;
}
a.membp_not_clicked, a.membp_clicked {
margin: 0ex !important;
/* padding-left: 1ex !important; */
}
.membp_oneline button {
margin: 1ex 1ex .5ex 0;
padding: .5ex;
}
input[value="memberslogout"] + button {
margin-bottom: .5ex;
}
.memberslogin button {
border: 1px solid var(--akzenttextcolor);
margin: 0.5ex 0 0.5ex 0;
}
#memberpages_Login {
border: 1px solid var(--dynakzent);
text-align: center;
max-width: 12em;
margin: 0ex auto 0.5em auto;
padding: .5em 0em .5em .0em;
}
#membp_anchor, .membp_anchor {
font-size: 1px;
}
.membp_member {
margin-bottom: 1ex;
}
.membp_member_button {
margin-top: .5em;
border: 1px solid var(--akzenttextcolor);
}
.membp_small_button:hover {
color: var(--akzenttextcolor);
font-weight: 600;
}
.membp_member_button:hover {
font-weight: 600;
}
.membp_small_button {
border: 1px solid var(--akzenttextcolor);
background-color: var(--bluetext);
color: var(--akzenttextcolor);
padding: 4px;
margin-top: .5em;
}
.membp_registerme:hover {
font-weight: 600;
}
.membp_registerme {
padding: 4px;
margin: .5em .5em .5em .0em;
border: 1px solid var(--akzenttextcolor);
}
.membp_message {
background: var(--dynakzent);
color: var(--akzenttextcolor);
border: 3px solid var(--labeldangerbackground);
margin-right: 0ex;
}
.membp_message div {
color: var(--akzenttextcolor);
border: 3px solid var(--labeldangerbackground);
}
.membp_memberspanel td {
border: 1px solid var(--akzenttextcolor);
color: var(--akzenttextcolor);
}
.membp_memberspanel input {
display: inline-block;
width: calc(100% - .5ex) !important;
}
.membp_memberspanel textarea {
display: inline-block;
width: calc(100% - .25ex) !important;
}
.membp_memberspanel td {
padding: 1ex;
}
.membp_memberspanel button {
border: 1px solid var(--akzenttextcolor);
padding: 1ex !important;
}
/*** Plugin advancedform_XH ***/
div.advfrm-mailform {
line-height: 4ex;;
}
div.advfrm-mailform table{
margin-top: 1ex;
}
div.advfrm-mailform tr{
height: 4ex;
}
div.advfrm-mailform label{
background: var(--dynakzent);
padding: 1ex 1ex 1ex 1ex;
}
div.advfrm-mailform label span{
background: var(--akzenttextcolor);
font-weight: 900;
}
div.advfrm-mailform td {
background: unset;
}
div.advfrm-mailform td.label {
padding: 1.75ex 2ex 0 0;
display: inline-block;
height: 5ex;
}
div.advfrm-mailform td.field {
padding: 0ex 0 1ex 0;
}
div.advfrm-mailform .field input {
margin-top: -1ex;
}
div.advfrm-mailform div.buttons input {
background: var(--dynakzent);
border: 1px solid var(--dynakzent);
border-radius: .75ex;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--dynakzent);
}
/*** --------- Responsive part --------- ***/
@media only screen and (min-width: 1920px) {
.secHeader {
padding-right: 0px;
}
}
@media only screen and (max-width : 1025px) {
#newsboxes {
display: none;
}
#newsboxes2 {
display: flex;
}
.maincont {
width: 74.99%;
padding: 0px 0 0 0;
}
}
@media only screen and (max-width: 769px) {
.burger {
display: block;
}
.secmenu {
display: none;
}
.maincont {
width: 100% !important;
padding: 0;
}
#footer {
padding: 1em 2em 3em 2em;
}
.copyright {
margin: 0;
}
nav.secmenu {
position: absolute;
z-index: 99;
background-color: var(--secmenulibackground);
width: 100%;
max-width: 100%;
left: 0;
top: 0;
padding: 0;
}
nav.secmenu,
#news,
.sidebar {
display: none;
}
.lastChanged {
display: none;
}
}
@media only screen and (max-width : 680px) {
body {
font-size: .9em;
}
#newsboxes2 {
display: block;
padding: 0;
}
#newsboxes2 .news {
width: 100%;
margin: 1em 0 0;
}
}
@media only screen and (max-width : 480px) {
body {
font-size: .85em;
}
.lastChanged {
display: none;
}
}
@media (min-width:640px) {
div.imgR,
img.imgR,
div.imgRB,
img.imgRB {
margin: 0 0 1em 1em;
float: right;
max-width: 40%;
text-align: left;
}
div.imgL,
img.imgL,
div.imgLB,
img.imgLB {
margin: 0 1em 1em 0;
float: left;
max-width: 40%;
text-align: left;
}
}