© by Karl Richard Lembach
stylesheet.css
In der stylsheet.css wurden folgende Änderungen / Ergänzungen vorgenommen:
Unmittelbar am Anfang der stylesheet.css wird zuerst die user.css importiert und dann die logo.css.
Dadurch werden benutzerspezifische Formate zuerst geladen. Falls diese mit den Formatierungen des Templates kollidieren werden sie dadurch, dass die Formate von logo.css und stylesheet.css anschließend importiert und definiert werden, sofort überschrieben und stören somit nicht die Templateformatierung.
Die Voreinstellung des Templates auf die Schriftfamilie wurde umgestellt: Arial, Helvetica, Tahoma, Verdana, sans-serif
Die Schrift Open-sans wurde ersatzlos entfernt.
Ein komplettes Listing der stylesheet.css ist unten zu finden.
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 */). Nachstehend sind nur die wichtigsten Formatierungsneuerungen aufgeführt.
Silbentrennung
/* Silbentrennung */
/* wikipedia: Hyphen (englisch) steht für: Bindestrich (im Englischen auch Trennstrich), siehe Viertelgeviertstrich#Bindestrich */
div.Silbentrennung, p.Silbentrennung, span.Silbentrennung {
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
Demotext zur Silbentrennung
span.Silbentrennung: Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! (span-ende) Und ab hier keine Silbentrennung mehr: Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!
p.Silbentrennung / div.Silbentrennung + Blocksatz: Hier kommt der gleiche Testsatz zum Einsatz. Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!
Wer möchte, dass auf der gesamten Website die automatische Silbentrennung aktiv ist, schreibt in den CMS-Einstellungen in der Sprach-Datei das Wort 'Silbentrennung' in das Feld Text3.
Fußnoten
/* Fußnoten */
body {
counter-reset: fussnote;
}
.autoFussn_Verweis { /* Durchnummerierung der Verweise im Text auf die Fußnoten unter den Text */
counter-increment: fuss;
vertical-align: super;
font-weight: bolder;
font-size: 75%;
}
.autoFussn_Verweis::after {
content: ']';
}
.autoFussn_Verweis::before {
content: '[';
}
span.autoFussn_Verweis {}
div.Headline_Fussnote {
margin: 1em .5em .3em .5em;
border-bottom: 1px solid gray;
padding: 0em .5em 0em .3em;
color: #444;
font-size: .95em;
line-height: normal;
}
div.Headline_Fussnote::before {
content: 'Fussnote(n) ';
}
p.auto_Fussnote { /* automatisch Durchnummerierung der Fußnoten unter dem Text */
counter-increment: fussnote;
color: #444;
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 {
}
span.foot_Verweis::before {
content: '[*]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: #040;
}
span.footnote {
padding: .5em .5em .5em 1.0em;
position: relative;
color: #333;
border-top: #333 solid 1px;
margin: 1em 0 .75em;
font-size: 90%;
line-height: normal;
}
span.footnote::before {
color: #040;
content: "*" !important;
display: block;
font-size: 90%;
position: absolute;
left: .25em;
top: .4em;
}
In die Template - Hauptfarben - Anpassung habe ich das Fußnoten-Format eingefügt.
Beim Fußnoten-Format ist nun die Farbe der horizontalen Linie gleich mit der <hr> - Farbe (Template-Hauptfarbe):
Nicht nummerierte Fußnotenverweise werden mit dem span.foot_Verweis formatiert: Text mit Verweis auf eine Fußnote.
Dazu schreibt man hinter des Wort, das einen Verweis erhalten soll ein Blank, markiert es und formatiert es dann mit span.foot_Verweis. Wird die Formatierung ausgewählt ohne dass ein Zeichen markiert wurde, wird zwar zunächst das Fußnotenzeichen angezeigt, beim nächsten Speichern wird die 'vermeintlich leere' Formatierung vom Editor gelöscht bevor der Inhalt des Fensters gespeichert wird.
Deren Fußnote muss dann mit dem span.footnote Format formatiert werden, wobei der span-Bereich natürlich den Fußnotentext enthalten muss.
Diese Fußnote steht in einem <span> . . </span> - Bereich.
Für nummerierte Fußnotenverweise muss wie folgt vorgegangen werden:
Hinter dem Wort1, dass einen Fußnotenverweis erhalten soll2, wird die fortlaufende Zahl des Fußnotenverweises eingetragen3 und diese Zahl wird dann markiert und mit den Format span.autoFussn_Verweis formatiert. Der zugehörige Fußnotentext muss mit den Format div.Headline_Fussnote für die horizontale Trennlinie begonnen werden. Der eigentliche Text wird mit p.auto_Fussnote formatiert. Dadurch wird vor jedem <p>-Element die fortlaufende Fußnoten-Nummer ausgegeben. D.h. um die nächste Fußnote zu beginnen betätigt man einfach die RETURN-Taste. Innerhalb einer Fußnote darf andererseits kein harter Zeilenumbruch enthalten sein (Zeilenumbruch durch Shift-Enter).
Diese Formate sind noch im Test-Stadium.
Mit Shift-Enter kann man innerhalb der Fußnote eine neue Zeile anfangen.
Ein Return / Enter führt zur nächsten Nummer und Fußnote.
Damit die Nummerierung der Fußnoten mit den Verweisen übereinstimmt, muss man evtl. die Nummern in den Verweisen anpassen oder die Texte in den Fußnoten verschieben.
TAB-Reiter - Simulation
/* Reiter eines TAB */
span.Tab {
border: 1px solid black;
border-bottom: 0px;
border-radius: 3px 3px 0px 0px;
background-color: #f0f0f0;
padding-left: 3px;
padding-right: 3px;
margin-left: .7em;
margin-right: .7em;
}
span.Tab::before {content: "_"; position: relative; left: -.7em; bottom: -.15em;}
span.Tab::after {content: "_"; position: relative; left: .7em; bottom: -.15em;}
span.Tab: Diese Formatierung simuliert das Aussehen eines TAB-Reiters.
Tasten - Darstellung
/* Tastertur-Tasten */
span.Taste {
padding: 0em 0.3em 0em 0.3em;
border: 1px solid gray;
border-radius: .4em;
box-shadow: #999 0.1em 0.2em 0.2em 0.2em;
}
span.Taste: Diese Formatierung soll f ü r einzelne oder mehrere Tastenanschläge stehen oder für benannte Tasten (Return, Entf, Ende ...).
Last Update Time-Stamp um das Wort 'Uhr' ergänzt
#pp_last_update time:after {
content: "Uhr";
padding-left: 3px;
}
Durch diese Formatierung wird die "last update" Anzeige mit dem Nachwort 'Uhr' ausgestattet.
No Cookies Text und Cookies Text ausgeben oder ausblenden
Formate im Zusammenhang mit dem Plugin Privacy_XH
Falls das Plugin nicht installiert ist, erzeugen die Formate p.no_cookies_text und p.cookies_text zwei, eigentlich nicht brauchbare, Formatierungen (die lediglich zur Block-Markierung der Texte im Editorfenster vorhanden sind). Ihre Verwendung macht also nur bei installiertem Plugin Sinn.
Hintergrund:
Durch das Plugin werden zwei Zustände unterschieden: a) Cookies sind noch nicht explizit erlaubt, b) Cookies wurden vom User erlaubt
Der Sinn des Plugins ist, bestimmte Plugins oder Scripte nur dann auszuführen (weil sie Cookies setzen, die benutzerspezifische Daten speichern), wenn der User seine Zustimmung gegeben hat.
Es wird jedoch keine Funktion bereitgestellt, die abhängig davon, ob diese Zustimmung erfolgte oder nicht, Text darstellt oder nicht.
Bei der Formatierung mit 'visibility: hidden;' oder 'visibility: visible;' wird zwar die Sichtbarkeit umgeschaltet, der Text belegt jedoch auch Platz, wenn er unsichtbar ist. Das führt zu unschönen leeren Räumen in der Ausgabe. Die Alternative 'display: none;' oder 'display: block;' stellt genau das Gesuchte zur Verfügung. Es gibt jedoch einen 'dummen' Nebeneffekt: Diese 'Unsichtbarkeit' funktioniert auch im Editorfenster!
Um den Text, der 'display: none; - formatiert' ist, zu bearbeiten, müsste man jedes Mal in den Quellcode-Modus umschalten. Das ist nicht sehr komfortabel. Deshalb habe ich in der stylesheet.css Pseudoformate definiert, die 'nur' für die Anzeige im Editorfenster vorhanden sind:
Durch entsprechende aktive Änderungen der Style-Formatierung innerhalb der template.htm wird im 'normalen' Browserfenster (also nach Verlassen des Editors) die '::before - Formatierung' und die Hintergrundfarbe entfernt und 'display: none;' oder 'display: block;' entsprechend der User-Zustimmung umgeschaltet. Dadurch erfolgt folgende Anzeige:
Noch keine User-Zustimmung: no_cookies_text ⇒ wird angezeigt | cookies_text ⇒ keine Anzeige
Mit User-Zustimmung: no_cookies_text ⇒ keine Anzeige | cookies_text ⇒ wird angezeigt
Eigene Formatierungen, die keine Modifikation der beiden vorgenannten Formate sind, werden nicht beeinflusst, also unverändert ausgegeben.
Horizontaler Lauftext
Dieser Text wird im Format marquee angezeigt.
Man sollte bei der Verwendung dieses Formates jedoch beachten, das die Schrift in rechenschwachen Maschinen sehr ruckelt!
Horizontaler Scrolltext
Dieses Format ist dafür da, Textzeilen, die als ungebrochene Zeilen (also ohne Zeilenumbruch) ausgegeben werden sollen, zum einen innerhalb einer Zeile darzustellen und zum anderen durch die Möglichkeit des horizontalen scrollens den Text auch dann noch zu lesen, wenn er aus dem sichtbaren Bereich hinausläuft.
Schriftgewichtungen
Dünne Schrift ist als Lighter formatiert.
Normale Schrift ohne Gewichtungsformat.
Dickere Schrift als Bolder formatiert.
Dicke Schrift als Bold formatiert.
Diese Schrift ist <strong> bzw. <b> formatiert.
Schriftgrößen
Diese Schrift ist als smaller formatiert.
Diese Schrift ist ohne Schriftgrößenformat.
Diese Schrift ist bigger formatiert.
Labels
span.sabel
Das ist Text mit einem Label.
span.label-danger
Das ist ein Span-Danger-Label und
Das hier ist ein p.danger-label Text.
Unterstreichung
span.underline:
Dies ist ein Demonstrationstext.
p.underline:
Dies ist ein Demonstrationstext.
span.underline,
p.underline {
border: 0;
border-bottom: 1px dotted #0057b0;
}
span.blue:
Dies ist ein Demonstrationstext.
p.blue:
Dies ist ein Demonstrationstext.
span.blue,
p.blue {
color: #0057b0;
}
div.flexContainer:
Hier umschließt der div.flexContainer drei unformatierte div-Container, deren Schrift zu besseren Anschaulichkeit farblich hinterlegt wurden.
div.flexContainer {
display: flex;
}
div.imgR, img.imgR:
div.imgR,
img.imgR {
margin: 0 0 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
}
div.imgRB, img.imgRB:
div.imgRB,
img.imgRB {
margin: 0 0 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
border: 1px solid rgba(0,0,0,.15);
border-radius: .3em;
display: inline-block;
background: rgba(0,0,0,.05);
position: relative;
overflow: hidden;
}
div.imgRB img,
div.imgLB img {
border-radius: .3em;
margin: 0 0 .5em 0;
}
div.imgL, img.imgL:
div.imgL,
img.imgL {
margin: 0 0 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
}
div.imgLB, img.imgLB:
div.imgLB,
img.imgLB {
margin: 0 1em 1em 0;
padding: 0;
float: none;
max-width: 100%;
text-align: left;
border: 1px solid rgba(0,0,0,.15);
border-radius: .3em;
display: inline-block;
background: rgba(0,0,0,.05);
}
div.imgRB img,
div.imgLB img {
border-radius: .3em;
margin: 0 0 .5em 0;
}
span.caption, p.caption:
Die
estext.p.caption,
span.caption {
font: inherit;
font-size: .8em;
font-weight: 600;
color: #666;
margin: 0;
line-height: normal;
}
div.imgRB-inner, div.imgLB-inner:
Zur Verdeutlichung wird der div-Container mit einem Rahmen umgeben und grün hinterlegt.
abcdefghijklmn
div.imgRB-inner,
div.imgLB-inner {
margin: .75em;
}
div.imgNrml:
Zur Verdeutlichung wird der div-Container mit einem Rahmen umgeben und grün hinterlegt.
abcdefghijklmn
div.imgNrml {
margin: 1em 0;
}
div.imgNrml img {
margin: 0 0 .5em 0;
}
div.hovImg, img.hovImg:
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 rgba(0,0,0,.1);
}
p.noBr, span.noBr:
Diese Zeile wird nicht umgebrochen und kann damit u.U. ausreißen! fghs hsrg sghs ghsghgh sghs ghsrgh sghsrgh ghg rtgh htgrh ghg sghsgrh sghsr sghs hwrth thrgth strgh sghr gsrghsg hsrgh sghsrh s657 n657354ß235imb 2vü56iü2m520459u62ümv24.c31t´qvaeßr8esß5468,be+ß46zabm
Der grün hinterlegte Text ist mit span.noBr am Umbruch gehindert. Zur Verdeutlichung der Absatzbreite ist er umrandet. ke ü#rgk q+#rgk erü g ker pgk r+grkg qrgke rer gqer q+ergk q+rgkergk prg kq+
p.noBr,
span.noBr,
td.noBr {
white-space: nowrap;
}
p.smaller, span.smaller, div.smaller:
Die ist ein Beispieltext.
p.smaller,
span.smaller,
div.smaller {
font-size: .85em;
}
p.bigger, span.bigger, div.bigger:
Die ist ein Beispieltext.
p.bigger,
span.bigger,
div.bigger {
font-size: 1.5em;
}
p.subHeading:
Das ist eine Sub-Header-Zeile.
p.subHeading {
font-size: 1.25em;
margin: .5em 0 .25em 0;
}
p.clear, div.clear:
Beendet den Float und Umfluß eines Objektes.
p.clear,
div.clear {
clear: both;
}
p.blockAuth:
Autorenangabe eines Artikels
p.blockAuth {
text-align: right;
font-style: normal;
}
div.floatRight, p.floatRight:
Die ist normaler Text im Fluß.
weitere normaler Text im Fluß
div.floatRight,
p.floatRight {
float: right;
}
Mit dem letzten Mini-Update wurden kleine Darstellungsfehler behoben und einige weniger wichtige Features hinzugefügt.
Dateiname: templates/fhs-basic-all2_4_2-eu/stylesheet.css
@import url("user.css");
@import url("logo.css");
/* *** fhs-basic-all Version 2.4.1 eu last modifikation 30.04.2021*** */
/*** FONTS ***/
html{font-family: "Segoe UI" ,Roboto, Calibri, Helvetica, Tahoma, Verdana, sans-serif; font-style:normal;font-weight:400;font-size: 1.0rem;}
/* 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}
.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 */
/* Silbentrennung */
/* wikipedia: Hyphen (englisch) steht für: Bindestrich (im Englischen auch Trennstrich), siehe Viertelgeviertstrich#Bindestrich */
div.Silbentrennung, p.Silbentrennung, span.Silbentrennung {
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
/* Unterstreichung */
span.underline, p.underline {
border: 0; border-bottom: 1px dotted #0057b0;
}
/* Text mittelblau */
span.blue, p.blue {
color: #0057b0;
}
/* Beschriftung */
p.caption, span.caption {
font: inherit;
font-size: .8em;
font-weight: 600;
color: #888;
margin: 0;
line-height: normal;
}
/* kein Zeilenumbruch an blank */
p.noBr, span.noBr, td.noBr {
white-space: nowrap;
}
/* dünne Schrift */
span.Lighter, p.Lighter, div.Lighter {
font-weight: lighter;
}
/* fettere Schrift */
span.Bolder, p.Bolder, div.Bolder {
font-weight: 500;
}
/* fette Schrift */
span.Bold, p.Bold, div.Bold {
font-weight: 800;
}
b, strong {
font-weight: 650;
}
/* kleine Schrift */
span.smaller, p.smaller, div.smaller {
font-size: .85em;
}
/* größere Schrift */
span.bigger, p.bigger, div.bigger {
font-size: 1.5em;
}
/* Unter-Überschrift */
p.subHeading {
font-size: 1.25em;
margin: .5em 0 .25em 0;
}
/* 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;
}
.autoFussn_Verweis { /* Durchnummerierung der Verweise im Text auf die Fußnoten unter den Text */
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 gray;
padding: 0em .5em 0em .3em;
color: #444;
font-size: .95em;
line-height: normal;
}
div.Headline_Fussnote::before {
content: 'Fussnote(n) ';
}
p.auto_Fussnote { /* automatisch Durchnummerierung der Fußnoten unter dem Text */
counter-increment: fussnote;
color: #444;
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: #040;
}
span.foot_Verweis::before {
content: '[*]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: #040;
}
span.footnote {
padding: .5em .5em .5em 1.0em;
position: relative;
color: #333;
border-top: #333 solid 1px;
margin: 1em 0 .75em;
font-size: 90%;
line-height: normal;
}
span.footnote::before {
color: #040;
content: "*" !important;
display: block;
font-size: 90%;
position: absolute;
left: .25em;
top: .4em;
}
/* Block rechtsseitig, links umflossen */
div.floatRight, p.floatRight {
float: right;
padding-left: 1em;
}
/* Block linksseitig, rechts umflossen */
div.floatLeft, p.floatLeft {
float: left;
padding-right: 1em;
}
/* Reiter eines TAB */
span.Tab {
border: 1px solid black;
border-bottom: 0px;
border-radius: 3px 3px 0px 0px;
background-color: #f0f0f0;
padding-left: .0em;
padding-right: .0em;
margin-left: .5em;
margin-right: .5em;
}
span.Tab::before {content: "_"; position: relative; right: .7em; bottom: -.08em;}
span.Tab::after {content: "_"; position: relative; left: .7em; bottom: -.08em;}
/* Tastertur-Tasten */
span.Taste {
padding: 0em 0.3em 0em 0.3em;
border: 1px solid gray;
border-radius: .4em;
box-shadow: #999 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 rgba(0,0,0,.15);
border-radius: .3em;
display: inline-block;
background: rgba(0,0,0,.05);
}
/* 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 rgba(0,0,0,.15);
border-radius: .3em;
display: inline-block;
background: rgba(0,0,0,.05);
position: relative;
overflow: hidden;
}
/* 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 rgba(0,0,0,.1);
}
/* Akkordeon - Seiteninhalte aus- und einklappen *********************************/
/* Aeussere Klammer durch <details> - </details> *********************************/
details {
padding: 0 .3em 0 .3em;
border:1px dotted rgba(0, 0, 0, 0.4);
}
details[open] {
border: 0px;
background:rgba(0, 0, 0, 0.05);
}
/* Innere Klammer (fuer die Ueberschrift) durch <summary> - >/summary> ***********/
summary {
text-shadow:.2em .2em .25em rgba(0, 0, 0, .5);
font-weight: 600;
}
/* Text in langer Zeile ohne Zeilenumbruch ausgeben, mit Scrollbalken und Rahmen */
div.horizontScrollLine {
box-sizing: border-box;
border: 1px dotted rgb(172, 172, 172);
white-space:nowrap;
padding: 8px;
overflow: auto;
line-height: 1.5;
color: rgb(64, 64, 64);
}
/* Text nur sichtbar, wenn Cookies noch nicht durch User erlaubt wurden */
/* Diese Formatierung ist für den Editormodus, die Front-End-Formatierung
steht in der stylesheet-noeditmode.css */
p.no_cookies_text {
background-color:rgba(4, 156, 4, 0.151);
}
p.no_cookies_text::before {
content: '[Display if Cookies disallowed]';
vertical-align: super;
font-weight: 700;
font-size: 70%;
color: rgb(13, 29, 170);
}
/* Text nur sichtbar, wenn Cookies durch User erlaubt wurden */
/* Diese Formatierung ist für den Editormodus, die Front-End-Formatierung
steht in der stylesheet-noeditmode.css */
p.cookies_text {
background-color: rgba(196, 36, 36, 0.151);
}
p.cookies_text::before {
content: '[Display if Cookies allowed]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: rgb(13, 29, 170);
}
/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
span.tooltip {}
span.t-tiptext-unten {}
span.t-tiptext-oben {}
/* Tooltip container */
.tooltip {
border-bottom: 2px dashed #0057b0; /* Wenn eine gepunktete Linie unter dem Text erscheinen soll */
}
/* Tooltip Text unten */
.tooltip .t-tiptext-unten {
background-color: #0058b044;
border-radius: 0 0 6px 6px;
border: 1px solid #0058b0;
}
/* Tooltip Text oben */
.tooltip .t-tiptext-oben {
background-color: #0058b044;
border-radius: 6px 6px 0 0;
border: 1px solid #0058b0;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
/* Allgemeine Styles */
hr {
border: 0;
border-bottom: 1px solid #666666;
height: 0px;
clear: both;
margin: 1em 0;
}
hr.hrdot {
border: 0;
border-bottom: 1px dotted #666666;
height: 0px;
clear: both;
margin: 1em 0;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
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.imgRB-inner,
div.imgLB-inner {
margin: .75em;
}
div.imgNrml {
margin: 1em 0;
}
div.imgNrml img {
margin: 0 0 .5em 0;
}
img.imgBorder {
border: 1px solid rgba(255,255,255,.25);
}
.label-danger, span.label-danger {
background-color: rgba(255, 0, 0, 0.808);
color: yellow;
}
span.label-danger {
padding: 0 .2em .2em .2em;
font-weight: 700;
border-radius: .25em;
letter-spacing: .1em;
}
.label, span.label {
display: inline;
padding: 0em .5em .2em .5em;
font-size: 75%;
font-weight: 600;
line-height: 1;
color: #fff;
background-color:#0058b09f;
white-space: nowrap;
border-radius: .25em;
letter-spacing: 1px;
}
a.zoom,
a.zoom_g,
a.zoom_i {
}
/* Layout */
body {
height: 100%;
background: #fff;
color: #111;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* font: 15px/1.42857em Helvetica, sans-serif;
/* -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; */
}
#header {
background: #fff;
position: relative;
border-bottom: 5px solid #666666;
font-size: 1.25em;
overflow: auto;
}
.langMenu {
display: inline;
position: absolute;
top: 20px;
right: 20px;
}
.langMenu a {
border: 0;
}
.langMenu img {
}
.langSwitch {
float: right;
padding-left: 15px;
}
.langSwitch a {
border: 0;
}
.langSwitch img {
border: solid white 1px;
}
.lastChanged {
margin: 0 .7em 0 0em;
display: inline-block;
float: right;
font-size: 1.2em;
padding: auto;
padding-left: 5px;
padding-right: 5px;
border: 1px solid rgba(255,255,255,.5);
}
.lastChanged::before {
content: "geändert";
font-size: 1em;
font-variant: small-caps;
}
.changeFontsize {
margin: 0 .7em 0 0em;
display: inline-block;
float: right;
font-size: 1.2em;
padding: auto;
padding-left: 5px;
padding-right: 5px;
border: 1px solid rgba(255,255,255,.5);
}
.secHeader {
background: #666666;
padding: .25em .5em;
color: #fff;
overflow: auto;
}
.secHeader a {
color: #fff;
text-decoration: none;
}
.locator,
.searchBox {
display: inline-block;
}
.locator {
font-size: .85em;
}
.locator a {
border: 0;
}
.locator a:hover {
color: #fff;
text-decoration: underline;
}
/* search */
.searchBox {
float: right;
}
.searchLabel {
font-size: 1em;
font-variant: small-caps;
}
.search {
}
#searchform {
}
/*
#searchform input::-webkit-input-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: #fff;
}
*/
#searchform input:-moz-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: #fff;
opacity: 1;
}
#searchform input::-moz-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: #fff;
opacity: 1;
}
#searchform input:-ms-input-placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: #fff;
padding: 2px 0 2px 2px;
}
#searchform input::placeholder {
font-family: 'FontAwesome' !important;
text-align: right;
color: #fff;
opacity: 1;
}
#searchform input {
border: 1px solid rgba(255,255,255,.5);
background: #666666;
padding: 2px 1px 2px 4px;
font-family: inherit;
font-size: 1em;
width: 1.25em;
transition: all 200ms linear;
cursor: pointer;
margin: 0;
color: #fff;
height: 21px;
}
#searchform input:focus {
border: 1px solid rgba(255,255,255,.5);
width: 10em;
outline: none;
}
#wrapper {
background: #fff;
padding: 20px;
overflow: auto;
min-height: 75vh;
}
.maincont {
padding: 0px 0 0px 0;
}
#topLink {
z-index: 1000;
display: none;
position: fixed;
right: 10px;
bottom: 5px;
}
a#topLink {
color: rgba(0,0,0,.5);
border: 0px;
}
/* Allgemeines */
code {
background-color: rgba(190, 190, 190, 0.5);
color: #000;
margin: 0;
padding: .125em .2em;
font: 0.9em/normal Consolas, monospace;
}
.code {
background-color: rgba(190, 190, 190, 0.5);
color: #000;
border: 1px solid #ccc;
padding: 10px 12px;
font: .9em/normal Consolas, monospace;
display: block;
}
.xh_code {
background-color: rgba(27, 31, 35, 0.05);
color: #666;
border: 1px solid #ccc;
padding: 10px 12px;
font: .9em/normal Consolas, monospace;
display: block;
}
blockquote {
padding: .5em .75em .5em 3em;
position: relative;
color: #555;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
border-left: 0;
margin: 1em 0 .75em;
font-style: italic;
font-size: inherit;
}
blockquote::before {
color: #0057b0;
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: #666;
margin: 20px 0;
padding: .5em 0;
border-top: 1px dotted #999;
}
.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 #999;
}
.submenDiv ul li {
margin-left: 1em;
padding: 0 0 .25em 0;
}
.submenDiv ul li a {
list-style-type:none;
border: 0;
}
/* NEWS */
#newsboxes {
display: block;
padding: 0px 0 20px 20px;
}
#newsboxes2 {
display: none;
padding: 20px 0;
}
#newsboxes2 .news {
margin: 0 1%;
/* width: 48%; */
}
.news {
font-size: 0.9em;
padding: 20px 20px 10px 20px;
margin: 0 0 20px 0;
border: 0;
background: #f3f3f3;
}
.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: #0057b0;
}
.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: #555;
font-weight: 600;
margin: 1em 0 0 0;
line-height: normal;
}
h1:first-child {
}
h1 {
margin-top: 0 !important;
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.3em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1.1em;
}
p {
margin: 0 0 .75em 0;
}
a {
text-decoration: none;
color: #55a;
border-bottom: 1px dotted #999;
}
a:hover {
border-color: #0057b0;
color: #0057b0;
}
a[target="_blank"]::after {
content: "\00a0\f08e";
font: 0.889em FontAwesome;
opacity: .5;
}
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.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: #fff;
}
.respTable {
-webkit-overflow-scrolling: touch;
}
.respTable th {
text-align: left;
background: #666;
color: #fff;
font: inherit;
font-weight: 600;
}
.respTable th,
.respTable td {
padding: .25em .5em;
border: 1px solid #ccc;
vertical-align: top;
}
.respTable tr:nth-of-type(2n+1) {
background: rgba(255,255,255,.05);
}
abbr {
text-decoration: none;
border: 0;
}
/*** Footer ***/
#footer {
background: #f3f3f3;
color: #333;
border-top: 5px solid #666666;
font-family: 'Helvetica', sans-serif;
font-size: .9em;
font-weight: normal;
padding: 1em 0 3em 0;
text-align: center;
}
#footer a {
color: #0057b0;
text-decoration: none;
border: 0;
}
#footer p {
color: #333;
margin: 1em 0 .25em 0;
}
form.xh_mailform input,
form.xh_mailform textarea {
border: 1px solid #ccc;
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: #fffff3;
outline: none;
}
form.xh_mailform label {
font-size: .9em;
color: #999;
padding-left: .75em;
}
.xh_captcha_input {
width: 5em !important;
text-align: center;
}
.xh_captcha_code {
float: left;
text-align: center;
color: #fff;
text-decoration: none;
background-color: #000;
padding: .25em .5em;
box-sizing: border-box;
margin-bottom: 0.25em;
width: 5em !important;
}
input[type="submit"] {
padding: .25em .5em;
cursor: pointer;
background: #666;
color: #fff;
margin: .25em .25em .25em 0;
border: 1px solid #999;
font-weight: 600;
width: auto !important;
box-sizing: border-box;
}
input[type="submit"]:focus {
background: #666 !important;
color: #fff !important;
}
button {
border: 1px solid #000;
cursor: pointer;
font-family: 'Helvetica', sans-serif !important;
font-size: 1em !important;
padding: .25em .5em;
background: #0057b0;
color: #fff;
box-sizing: border-box;
}
input[type="reset"] {
display: none;
}
/* SecMenü */
.burger {
cursor: pointer;
display: none;
color: #fff;
float: right;
margin-left: .5em;
border: 1px solid rgba(255,255,255,.5);
padding: 2px 4px 1px 4px;
width: 1em;
text-align: center;
height: 22px;
}
.burger::before {
color: #fff;
content: "\f0c9";
display: block;
font-family: "FontAwesome";
}
.burger.active::before {
color: #fff;
content: "\f00d";
display: block;
font-family: "FontAwesome";
}
.secmenu {
padding: 0px 20px 20px 0;
}
.secmenu li {
list-style: none;
border-top: 1px dotted #ccc;
}
.secmenu li a,
.secmenu li span {
text-decoration: none;
padding: .5em;
display: block;
color: #fff;
background: #666;
border: 0;
}
.secmenu li a:hover {
border: 0;
background: #888;
}
.secmenu li span {
display: block;
color: #fff;
background: #444;
}
.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: #fff;
background: #e00;
padding: 0.5em;
position: fixed;
top: 100px;
right: 0;
z-index: 999;
font-size: 0.9em;
text-align: right;
width: 10em;
}
#noScript a {
color: #fff !important;
font-weight: 700;
}
body.xh_login {
color: #000;
background: rgba(0, 0, 0, .25);
display: table;
height: 100vh;
width: 100%;
margin: 0 !important;
}
body.xh_login div.xh_login {
border: 1px solid rgba(0,0,0,.5);
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,.75);
background: rgba(255,255,255,.25);
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: #000;
}
#pp_last_update time:after {
content: "Uhr";
padding-left: 3px;
}
.memberslogin {
margin: 3px;
}
/*** --------- Responsive part --------- ***/
@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: #666;
width: 100%;
max-width: 100%;
left: 0;
top: 0;
padding: 0;
}
nav.secmenu,
#news,
.sidebar {
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;
}
#logoTxt {
display: none;
}
}
@media (min-width:640px) {
div.imgR,
img.imgR,
div.imgRB,
img.imgRB {
margin: 0 0 1em 1em;
/* padding: 0; */
float: right;
max-width: 40%;
text-align: left;
}
div.imgL,
img.imgL,
div.imgLB,
img.imgLB {
margin: 0 1em 1em 0;
/* padding: 0; */
float: left;
max-width: 40%;
text-align: left;
}
}