/* Version 2019-06-25, diese Datei ersetzt die alte bisher gültige Datei von 2018-10-03 */
/* */
/* inhalt.css Version 5.1, Zottel */
/* */
/* ###################################################################################################### */
/* # # */
/* # C O P Y R I G H T # */
/* # # */
/* # Diese HTML-Datei ist Teil eines selbsterstellten Design- & Baukastensystems! # */
/* # Das Design- & Baukastensystem wurde entwickelt von Jens Joachim Schulze (2017) # */
/* # # */
/* # Das System soll Schuelern die Moeglichkeit geben, die WebSite mit moeglichst geringem CSS-Aufwand # */
/* # weiterentwickeln zu koennen. # */
/* # # */
/* # Das Wissen zur Erstellung des Sytems stammt aus dem freien World-Wide-Web, also von Autoren, # */
/* # die so grosszuegig sind, ihr eigenes Wissen anderen zum Lernen zur Verfuegung zu stellen. # */
/* # # */
/* # Diesem Beispiel werden wir selbstverstaendlich folgen. # */
/* # # */
/* # Es ist jedem erlaubt, sich den vorliegenden Code zur funktionalen Erstellung dieser Seiten # */
/* # anzusehen und zu verwenden - um zu lernen oder eigene Ideen weiter zu verfeinern! # */
/* # (WICHTIG: Bilder und sensible Daten sind SELBSTVERSTAENDLICH davon ausgenommen!) # */
/* # # */
/* # Diebe sind hier - wie ueberall auf der Welt - NICHT gern gesehen. # */
/* # Lernwillige aber sind herzlich willkommen - auch mit ihren Fragen. # */
/* # # */
/* # Solltest Du also von hier etwas mitnehmen, dann sei so nett, und sag es! # */
/* # Sollte Dir die IDEE gefallen, dann erwähne doch einfach dort, wo Du sie verwenden wirst, # */
/* # woher Du diese Idee hast! # */
/* # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # */
/* # Beim Entwickeln der Idee haben vor allem die Autoren folgender Seiten das ausschlaggebende # */
/* # Wissen bereit gestellt und letztlich bewirkt, dass dieses Design-Stystem entstehen konnte. # */
/* # # */
/* # Unser Dank geht deshalb an: # */
/* # # */
/* # www.html-seminar.de sowie www.wiki.selfhtml.org # */
/* # # */
/* # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # */
/* # # */
/* # Einen Kontakt kannst Du herstellen mit einer Mehl an: info@rs-ge.de # */
/* # # */
/* # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # */
/* # Datei-Version: 3.0 - zuletzt bearbeitetam 06. Dezember 2017 # */
/* ###################################################################################################### */
/* ##################################################################################################### */
/* # # */
/* # F O N T S # */
/* # # */
/* ##################################################################################################### */
/* Beachten: Es können so viele Schriften angegeben werden, wie man will. Sie müssen durch KOMMA getrennt sein. */
/* Beachten: Schriftnamen mit eine Lerrzeichen (Times New Roman) müssen in ANFÜHRUNGSZEICHEN stehen, also "Name Zuname" oder 'Name Zuname' */
/* Schriftfamilien: Serif für Schriften wie Times.
Sans-serif für Schriften wie Arial.
Cursive für Schriften wie Zapf-Chancery.
Fantasy für Schriften wie Western.
Monospace für Schriften wie Courier.
Inherit ist auch möglich. */
/* Beispiele: */
/* .ateam_fontnorm{ font: small Arial, Helvetica, sans-serif; color: #336699; } */
/* .xfss_normh{ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; color: #002070; font-size: 17px; font-style: normal; font-weight: bold; line-height: 1.5em; } */
/* ------------------------ */
/* Sans Serif-Schriften */
/* ------------------------ */
/* einzige Überschrift, die einen vordefinierten Schatten hat: */
.xfss_h0 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 50px; font-style: normal; font-weight: bold; line-height: 1em;
text-shadow: black 0.1em 0.1em 0.2em; letter-spacing: 1px; }
/* alle anderen Schriften sind zunächst NICHT FETT, KURSIV oder SCHATTIERT */
.xfss_h1 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 35px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_h2 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 30px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_h3 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 28px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_h4 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 24px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_h5 { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_normh { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 19px; font-style: normal; font-weight: normal; line-height: 1.5em; }
.xfss_norm { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 18px; font-style: normal; font-weight: normal; line-height:1.1em; }
.xfss_smallh { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 15px; font-style: normal; font-weight: normal; line-height:1.4em; }
.xfss_small { font-family: "Calibri", "Verdana", "Tahoma", sans-serif; color: #002070; font-size: 14px; font-style: normal; font-weight: normal; line-height:1.1em; }
/* ------------------------ */
/* Serifen-Schriften */
/* ------------------------ */
/* einzige Überschrift, die einen vordefinierten Schatten hat: */
.xfs_h0{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 45px; font-style: normal; font-weight: bold; line-height:1em;
text-shadow: black 0.1em 0.1em 0.2em; letter-spacing: 1px; }
/* alle anderen Schriften sind zunächst NICHT FETT, KURSIV oder SCHATTIERT */
.xfs_h1{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 34px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_h2{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 30px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_h3{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 28px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_h4{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 24px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_h5{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 20px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_normh{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 19px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xfs_norm{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 18px; font-style: normal; font-weight: normal; line-height:1.2em; }
.xfs_smallh{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 15px; font-style: normal; font-weight: normal; line-height:1.4em; }
.xfs_small{ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; color: #002070; font-size: 14px; font-style: normal; font-weight: normal; line-height:1.2em; }
/* ------------------------ */
/* Typewriter-Schriften */
/* ------------------------ */
/* alle anderen Schriften sind zunächst NICHT FETT, KURSIV oder SCHATTIERT */
.xft_h1{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 34px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_h2{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 30px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_h3{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 28px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_h4{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 24px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_h5{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 20px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_normh{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 18px; font-style: normal; font-weight: normal; line-height:1.5em; }
.xft_norm{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 16px; font-style: normal; font-weight: normal; }
.xft_smallh{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 14px; font-style: normal; font-weight: normal; line-height:1.3em; }
.xft_small{ font-family: Consolas, "Courier New", Courier, monospace; color: #002070; font-size: 13px; font-style: normal; font-weight: normal; }
/* ##################################################################################################### */
/* # # */
/* # Z U S A T Z - B E F E H L E # */
/* # # */
/* ##################################################################################################### */
/* Zusatz-Befehle, die sich schnell mal als Class eingeben lassen... */
/* ----------------------------------------------- */
/* kleiner Absatz für Zwischenabstände der Absätze */
/* ----------------------------------------------- */
.xf_br_small{ font-size:6px; }
/* ACHTUNG: Wenn vorher Schrift-line-height definiert ist, reicht ein Absatz nicht! Geht nicht! Trick: Einfach line-height neu definieren: */
.xf_br_small1{ line-height: 0.7em; }
/* ----------------------------------------------- */
/* Text-Zusatzbefehle: */
/* ----------------------------------------------- */
.txtshaddark{text-shadow: black 0.1em 0.1em 0.2em;} /* Text-Schatten, gleicher Schatten wie h0-Überschrift */
.txtshadlight{text-shadow: #707070 0.1em 0.1em 0.2em;} /* Text-Schatten, leicht auf hellen untergründen */
.txtblock{text-align:justify;} /* setzt Blocksatz im Text fest*/
.txtfett{font-weight: bold;} /* setzt text FETT */
.txtunfett{font-weight: normal;} /* setzt Text unfett */
.txtitalic{ font-style: italic;} /* setzt Text kursiv */
/* ##################################################################################################### */
/* # # */
/* # B O X E N # */
/* # # */
/* ##################################################################################################### */
/* ----------------------------------------- */
/* schaltet alle BOX-BEFEHLE wieder aus! */
/* ----------------------------------------- */
/* FLOAT wird durch CLEAR aufgehoben:
Clearfix scheint ein echtes Thema zu sein...
...Problem ist wohl: ein clear muss ein nachfolgendes Element haben, sonst fällt das Mutterelement, in dem die Floats sind, in seiner Höhe auf Null zurück
(stimmt, das hat ich auch mal - das Mutterelement wurde nicht länger...)
...andere schreiben eine neue zeile mit einem Punkt, der unvisible ist und dessen Line-height auf Null gesetzt wird...
...also kurz: bislang hat das hier ganz trefflich funktioniert: */
/* clear - left beendet Umfluss left, right beendet Umfluss right, both beendet beide!, none - keine Beendigung */
.boxclear { float: none; clear: left; }
.boxclearfix:after {content: ""; display: table; clear: both;} /* Ausschalten der Border-Boxen und der Floats */
/* ----------------------------------------- */
/* FLOAT */
/* ----------------------------------------- */
.boxlinks{float:left;} /* Boxen annageln */
.boxrechts{float:right;} /* Boxen annageln */
/* ----------------------------------------- */
/* Boxen */
/* ----------------------------------------- */
/* Es gibt quadratische und abgerundete Boxen.
q steht für quadratisch, r steht für rund... */
/* boxgroup - ohne alles
boxbase - 90%, zentriert
q/r box - Overflow
----------------------
mit fertigen Paddings:
(früher gern benutzt, nicht mehr notwendig, wenn man mit .pad arbeitet)
q/r basebox - als Basis
q/r inbox - passend zu basebox
*/
/* Multi-Container - für Innen und Außen - zum Gruppieren von Boxen / hat deshalb keinerlei Maße*/
.boxgroup { box-sizing: border-box; }
/* Grund-Container - RANDLOS - für jede Seite - definiert Gesamtbreite jeder Seite*/
.boxbase { box-sizing: border-box; width: 90%; margin-left: auto; margin-right: auto; } /* ACHTUNG: Overflow: hidden - schneidet den Schatten ab...
/* ----------------------------------------- */
/* Innenboxen */
/* ----------------------------------------- */
/* ACHTUNG: Overflow: hidden - schneidet den Schatten ab...
kein Textüberlauf
kein Bild-Über-Zoom etc...*/
/* Boxen ohne alles: als Grundfläche */
.qbox { box-sizing: border-box; overflow: hidden; }
.rbox { box-sizing: border-box; overflow: hidden; border-radius: 6px; }
/* alle weitere Boxentypen werden nur aufgrund der Abwärtskompatibelität erhalten.
/* Man benötigt sie nicht, wenn man mit .pad() arbeitet...
/* Innenbox - als Grundfläche mit Innenrand */
/* geeignet als Grundcontainer für weitere Innenboxen */
.qbasebox { box-sizing: border-box; padding: 1em; overflow: hidden; }
.rbasebox { box-sizing: border-box; padding: 1.2em 1.2em; overflow: hidden; border-radius: 6px; } /* ehemals 0.9, 1.2*/
/* fertige Schreib- & Inhalts-Boxen - mit INNENRAND -
...gerne gefärbt mit den colbox-Varianten */
.qinbox { box-sizing: border-box; padding: 0.3em 0.5em; overflow: hidden; }
.rinbox { box-sizing: border-box; padding: 0.7em 1em; overflow: hidden; border-radius: 6px;}
/* ----------------------------------------- */
/* Überschriftenboxen */
/* ----------------------------------------- */
/* farbige Headline-Boxen */
/* Es gibt die Boxen in den Größen s,m,l und xl. Die Buchstaben werden einfach angehängt!
...die Headlines werden gerne für Hintergrund UND Schrift gefärbt mit den fertigen colsets... */
.qhdboxl{ box-sizing: border-box; padding: 0.7em 0.9em 0.8em 0.9em; overflow: hidden;} /* Überschriften-Balken L*/
.rhdboxl{ box-sizing: border-box; padding: 0.7em 0.9em 0.8em 0.9em; border-radius: 6px; overflow: hidden;} /* Überschriften-Balken L*/
.qhdboxm{ box-sizing: border-box; padding: 0.5em 0.7em 0.6em 0.7em; overflow: hidden;} /* Überschriften-Balken M*/
.rhdboxm{ box-sizing: border-box; padding: 0.5em 0.7em 0.6em 0.7em; border-radius: 6px; overflow: hidden;} /* Überschriften-Balken M*/
.qhdboxs{ box-sizing: border-box; padding: 0.3em 0.5em 0.4em 0.5em; overflow: hidden;} /* Überschriften-Balken S*/
.rhdboxs{ box-sizing: border-box; padding: 0.3em 0.5em 0.4em 0.5em; border-radius: 6px; overflow: hidden;} /* Überschriften-Balken S*/
/* die zugehörigen Paddings dürfen erst NACH den Box-Definitionen folgen (logisch...)*/
.padnull {padding: 0em 0em 0em 0em;}
.pad09 {padding: 0.9em 0.9em 0.9em 0.9em;} /* erzeugt gleichbreiten Bildrand-Abstand */
.pad10 {padding: 1em;} /* erzeugt gleichbreiten Bildrand-Abstand */
.pad20 {padding: 2em;} /* erzeugt gleichbreiten Bildrand-Abstand */
/* Box - Features: */
/* .shad{ box-shadow: 10px 10px 10px 0px #c0c0c0; } */
.shad{ box-shadow: 10px 10px 10px 0px #a0a0a0; }
.shadlight{ box-shadow: 5px 5px 10px 0px #c0c0c0; }
.shaddark{ box-shadow: 10px 10px 10px 0px #505050; }
.shaddarkdark{ box-shadow: 7px 7px 10px 0px #303030; } /* dunkler Schatten für Boxen auf dunklem Hintergrund*/
.rand{ border: 1px #000000 solid; }
.testrand{ border: 1px red solid; } /* roter testRand */
.testrandblue{ border: 1px blue solid; } /* blauer testRand */
.testrandgreen{ border: 1px forestgreen solid; } /* grüner testRand */
/* ----------------------------------------------- */
/* Box-Zusatzbefehle: */
/* ----------------------------------------------- */
.cent{text-align:center; margin-left:auto; margin-right:auto;} /* zentriert Texte, Bilder und Boxen */
.boxcent{margin:auto;} /* zentriert nur Boxen, Text bleibt */
.txtcent{text-align:center;} /* zentriert nur Text, Boxen bleibt */
.opa{opacity: 0.7;} /* Opacity auf 70% */
/* colsetopa: Hintergrundfarbe und Schriftfarbe definiert, Hintergrund transparent */
/* colset: Hintergrundfarbe und Schriftfarbe definiert */
/* colbox: Hintergundfarbe definiert */
/* coltxt: Schriftfarbe definiert */
/* colset = Hintergrund und Schrift für Head-Boxen: */
.colset_gray{ background-color: #707070; color: #DCDCDC;} /* Gray - LGray*/
.colset_mgray{ background-color: #969696; color: #DCDCDC;} /* mGray - LGray*/
.colset_blue{ background-color: #34648A; color: #E0EFFF;} /* Blue - LBlue */
.colset_bleen{ background-color: #30B080; color: #F0FFDC;} /* Bleen - LGreen*/
.colset_aquamarine{ background-color: #7FFFD4; color: #F0FFDC;} /* Aquamarine - LGreen*/
.colset_coral{ background-color: #FF7060; color: #FCD8D8;} /* Coral - LRed*/
.colset_red{ background-color: #EE363A; color: #FCD8D8;} /* Red - LRed*/
.colset_orange{ background-color: #FF8040; color: #FFECCC;} /* Orange - LOrange*/
.colset_lemon{ background-color: #C0DA00; color: #F6FCDA;} /* Lemon - Citro*/
.colset_kiwi{ background-color: #5D9500; color: #F3FC60;} /* Kiwi - Citro*/
/* colsetopa = Hintergrundfarbe und Schriftfarbe definiert, Hintergrund transparent */
.colsetopa_gray{ background: rgba(58,58,58,0.7); color: #DCDCDC;} /* opaGray - LGray */
.colsetopa_mgray{ background: rgba(112,112,112,0.7); color: #DCDCDC;} /* opamGray - LGray */
.colsetopa_blue{ background: rgba(0,51,93,0.7); color: #E0EFFF;} /* opaBlue - LBlue */
.colsetopa_bleen{ background: rgba(0,141,91,0.7); color: #F0FFDC;} /* opaBleen - LGreen */
.colsetopa_aquamarine{ background: rgba(89,255,205,0.7); color: #F0FFDC;} /* opaaquamarine - LGreen */
.colsetopa_coral{ background: rgba(255,59,36,0.7); color: #FCD8D8;} /* opaCoral - LRed */
.colsetopa_orange{ background: rgba(255,84,0,0.7); color: #FFECCC;} /* opaOrange- LOrange */
.colsetopa_red{ background: rgba(255,0,5,0.7); color: #FCD8D8;} /* opaRed - LRed */
.colsetopa_lemon{ background: rgba(179,209,0,0.7); color: #F6FCDA;} /* opaLemon - LLemon */
.colsetopa_kiwi{ background: rgba(55,126,0,0.7); color: #F3FC60;} /* opaKiwi - Citro */
/* colbox = Hintergrund für Schrift-Boxen: */
.colbox_white{background-color: #FFFFFF;} /* weiss */
.colbox_lgray{background-color: #ECECEC;} /* LGray */
.colbox_lblue{background-color: #E0EFFF;} /* LBlue */
.colbox_lgreen{background-color: #F0FFDC;} /* LGreen */
.colbox_llemon{background-color: #F6FCDA;} /* LLemon*/
.colbox_lsun{background-color: #FFFACC;} /* LSun*/
.colbox_lmandarin{background-color: #FFF0DC;} /* LMandarine*/
.colbox_laprikot{background-color: #FFEEE6;} /* LAprikot */
.colbox_lrose{background-color: #FCECEC;} /* LRose*/
/* ultrahelle Untergründe / w steht für white - Das ist beinahe weiss*/
.colbox_wgray{background-color: #F6F6F6;} /* wgray */
.colbox_wblue{background-color: #F0FCFF;} /* wblue */
.colbox_wgreen{background-color: #F0FCF0;} /* wgreen */
.colbox_wlemon{background-color: #F8FEEA;} /* wlemon*/
.colbox_wsun{background-color: #FFFAEA;} /* wsun */
.colbox_wmandarin{background-color: #FFF5EC;} /* wmandarin */
.colbox_waprikot{background-color: #FCF4EF;} /* waprikot */
.colbox_wrose{background-color: #FFF2F2;} /* wrose */
/* ultra-ultra-helle Untergründe / ww steht für white!white! - DAS IST FAST WEISS */
.colbox_wwgray{background-color: #FCFCFC;} /* wwgray */
.colbox_wwblue{background-color: #F6FCFF;} /* wwblue*/
.colbox_wwgreen{background-color: #F6FCF6;} /* wwgreen */
.colbox_wwlemon{background-color: #FDFEF3;} /* wwlemon*/
.colbox_wwsun{background-color: #FFFDF6;} /* wwsun */
.colbox_wwmandarin{background-color: #FFFCF3;} /* wwmandarin */
.colbox_wwaprikot{background-color: #FCF8F6;} /* wwaprikot */
.colbox_wwrose{background-color: #FFF9F9;} /* wwrose*/
/* ultra-ultra-helle Untergründe / ww steht für white!white! - DAS IST FAST WEISS */
.colboxopa_wgray{background: rgba(240,240,240,0.6);} /* opawblue */
.colboxopa_wblue{background: rgba(237,252,255,0.6);} /* opawblue */
.colboxopa_wgreen{background: rgba(236,252,236,0.6);} /* opawgreen */
.colboxopa_wlemon{background: rgba(246,255,228,0.6);} /* opawlemon */
.colboxopa_wsun{background: rgba(255,250,220,0.6);} /* opawsun */
.colboxopa_wmandarin{ background: rgba(255,245,229,0.65);} /* opawandarin */
/*.colboxopa_wmandarin2{background: rgba(255,243,230,0.6);} /* opawmandarin */
/*.colboxopa_wmandarin{ background: rgba(255,245,229,0.65);} /* opawandarin */
.colboxopa_waprikot{background: rgba(255,242,233,0.6);} /* opawaprikot */
.colboxopa_wrose{background: rgba(255,236,240,0.6);} /* opawrose */
/* coltxt = dunkle Farbe für Schriften: */
.coltxt_gray{color: #303030;} /* dunkles Gray */
.coltxt_gray2{color: #505050;} /* dunkles Gray */
.coltxt_blue{color: #002060;} /* dunkles Blue */
.coltxt_bleen{color: #30B080;} /* kräftiges Bleen */
.coltxt_green{color: #104030;} /* kräftiges Bleen */
.coltxt_orange{color: #FFC080;} /* kräftiges Orange */
.coltxt_red{color: #EE363A;} /* kräftiges Red */
.coltxt_coral{color: #FF7060;} /* kräftiges Coral */
.coltxt_citro{color: #F3FC60;} /* kräftiges Citro */
/* coltxt = helle Farben für Schriften: */
.coltxt_lgray{color: #ECECEC;} /* LGray */
.coltxt_lblue{color: #E0EFFF;} /* LBlue */
.coltxt_lgreen{color: #F0FFDC;} /* LGreen */
.coltxt_llemon{color: #F6FCDA;} /* LLemon */
.coltxt_lorange{color: #FFECCC;} /* LOrange */
.coltxt_lred{color: #FCD8D8;} /* LRed */
.coltxt_lred2{color: #FCE8E8;} /* LRed2 */
/* colslide = Farbverlauf: */
.colverlauf_bluelightblue {
background: linear-gradient( left, #34648a 40%, #96b6d6 100%);
background: -moz-linear-gradient( left, #34648a 40%, #96b6d6 100%);
background: -webkit-linear-gradient( left, #34648a 40%,#96b6d6 100%);
}
.colverlauf_bluetrans {
background: linear-gradient(left, #34648a 40%, transparent 100%);
background: -moz-linear-gradient(left, #34648a 40%, transparent 100%);
background: -webkit-linear-gradient(left, #34648a 40%, transparent 100%);
}
.colverlauf_bleentrans {
background: linear-gradient(left, #30b080 40%, transparent 100%);
background: -moz-linear-gradient(left, #30b080 40%, transparent 100%);
background: -webkit-linear-gradient(left, #30b080 40%, transparent 100%);
}
.colverlauf_redtrans {
background: linear-gradient(left, #EE363A 40%, transparent 100%);
background: -moz-linear-gradient(left, #EE363A 40%, transparent 100%);
background: -webkit-linear-gradient(left, #EE363A 40%, transparent 100%);
}
/* ##################################################################################################### */
/* # # */
/* # T A B E L L E N # */
/* # # */
/* ##################################################################################################### */
/* -------------------------------------------------------- */
/* tab - transparente Tabelle, die Boxen repräsentiert */
/* -------------------------------------------------------- */
.tabtab {display: table; text-align: justify;}
.tabrow {display: table-row;}
.tabcell {display: table-cell;}
.tabcellempty{width:2%; min-width: 5px; visibility: hidden;}
/* notwendig bei Verwendung von Bilder und Text gemeinsam */
.tabcentmid{vertical-align: middle;} /* zentriert vertical innerhalb von Tabellen - z.B. Bilder [alt, aus Downgrade-Gründen ] */
.tabtop{vertical-align: top;} /* ausrichten oben innerhalb von Tabellen - z.B. Bilder */
.tabmid{vertical-align: middle;} /* ausrichten mitte innerhalb von Tabellen - z.B. Bilder */
.tabbot{vertical-align: bottom;} /* ausrichten unten innerhalb von Tabellen - z.B. Bilder */
/* ##################################################################################################### */
/* # # */
/* # B I L D E R # */
/* # # */
/* ##################################################################################################### */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* Zoom bei Hoover */
img.zoomslow {
transition: transform 6s;
-moz-transition: transform 6s;
-webkit-transition: transform 6s;
-o-transition: transform 6s;
-ms-transition: transform 6s;
}
img.zoomslow:hover {
/*cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;*/
transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
img.zoomslowdeep {
transition: transform 10s;
-moz-transition: transform 10s;
-webkit-transition: transform 10s;
-o-transition: transform 10s;
-ms-transition: transform 10s;
}
img.zoomslowdeep:hover {
/*cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;*/
transform: scale(2, 2);
-moz-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(2, 2);
-ms-transform: scale(2, 2);
}
/* ##################################################################################################### */
/* # # */
/* # L I N K s # */
/* # # */
/* ##################################################################################################### */
/* -------------------------------------------------------- */
/* LINKS: - so muss es gemacht werden: */
/* -------------------------------------------------------- */
/* unvisited link */
/*a:link { color: aquamarine; } */
/* visited link */
/*a:visited { color: yellow; } */
/* mouse over link */
/*a:hover { color: hotpink; text-decoration:none; } */
/* selected link */
/* a:active { color: blue; } */
/* -------------------------------------------------------- */
/* LINK-Buttons: - so muss es gemacht werden: */
/* -------------------------------------------------------- */
/* kann im Dokument im Style-Bereich nachgerüstet werden für Verzögerung */
/* .downlink_farbe a:link */
/* { -webkit-transition-duration: 0.2s; /* Safari */ */
/* transition-duration: 0.2s; } */
/* kann im Dokument im Style-Bereich nachgerüstet werden für Schatten bei Hover */
/* .downlink_farbe a:hover */
/* {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);} */
/* der normale Link: einfach mit ... einzutragen:*/
/* zlink: ist der normale Link in Texten, der modifiziert wird.
/*Man kann nicht einfach den Original-Link verändern, weil dann dessen Veränderung auch in den anderen veränderungen auftritt... */
/* unvisited link */
.zlink a:link { color: #002060; }
/* visited link */
.zlink a:visited { color: #008080; }
/* mouse over link */
.zlink a:hover { color: #e0efff;text-decoration:none; background-color:#34648A; padding:0px; border-radius:3px;}
/* selected link */
.zlink a:active { color: #ff7060; }
.downlink {}
.downlink a:link, .downlink a:visited {background: #ffa890; color: #990000;
padding: 1em; text-decoration:none; text-align:center; border-radius: 3px; display: inline-block;
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;}
.downlink a:hover, .downlink a:active {background: #ff6356; color: #fcf6f6;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
/* Blue 1 */
/* ------------ */
.dlb_blue1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_blue1 a:link, .dlb_blue1 a:visited {background: #008cba; color: #363636;}
.dlb_blue1 a:hover, .dlb_blue1 a:active {background: #20acda; color: #c0efff;}
/* Blue 2 */
/* ------------ */
.dlb_blue2 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_blue2 a:link, .dlb_blue2 a:visited {background: #579db7; color: #363636;}
.dlb_blue2 a:hover, .dlb_blue2 a:active {background: #008cba; color: #c0efff;}
/* Blue 3 */
/* ------------ */
.dlb_blue3 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_blue3 a:link, .dlb_blue3 a:visited {background: #579db7; color: #363636;}
.dlb_blue3 a:hover, .dlb_blue3 a:active {background: #377d97; color: #c0efff;}
/* Blue 4 */
/* ------------ */
.dlb_blue4 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_blue4 a:link, .dlb_blue4 a:visited {background: #579db7; color: #363636;}
.dlb_blue4 a:hover, .dlb_blue4 a:active {background: #2d9dca; color: #c0efff;}
/* Green 1 */
/* ------------ */
.dlb_green1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_green1 a:link, .dlb_green1 a:visited {background: #4caf50; color: #363636;}
.dlb_green1 a:hover, .dlb_green1 a:active {background: #6ccf70; color: #f0ffdc;}
/* Green 2 */
/* ------------ */
.dlb_green2 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_green2 a:link, .dlb_green2 a:visited {background: #80b060; color: #363636;}
.dlb_green2 a:hover, .dlb_green2 a:active {background: #4caf50; color: #f0ffdc;}
/* Green 3 */
/* ------------ */
.dlb_green3 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_green3 a:link, .dlb_green3 a:visited {background: #90c070; color: #363636;}
.dlb_green3 a:hover, .dlb_green3 a:active {background: #60b050; color: #f0ffdc;}
/* Green 4 */
/* ------------ */
.dlb_green4 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_green4 a:link, .dlb_green4 a:visited {background: #80a030; color: #363636;}
.dlb_green4 a:hover, .dlb_green4 a:active {background: #a0c050; color: #f0ffdc;}
/* Red 1 */
/* ------------ */
.dlb_red1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_red1 a:link, .dlb_red1 a:visited {background: #f44336; color: #363636;}
.dlb_red1 a:hover, .dlb_red1 a:active {background: #ff6356; color: #ffdcdc;}
/* Red 2 */
/* ------------ */
.dlb_red2 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_red2 a:link, .dlb_red2 a:visited {background: #ff7366; color: #363636;}
.dlb_red2 a:hover, .dlb_red2 a:active {background: #f44336; color: #ffdcdc;}
/* Red 3 */
/* ------------ */
.dlb_red3 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_red3 a:link, .dlb_red3 a:visited {background: #ee363a; color: #363636;}
.dlb_red3 a:hover, .dlb_red3 a:active {background: #ff565a; color: #ffdcdc;}
/* Red 4 */
/* ------------ */
.dlb_red4 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_red4 a:link, .dlb_red4 a:visited {background: #ff7f7f; color: #363636;}
.dlb_red4 a:hover, .dlb_red4 a:active {background: #d44336; color: #ffdcdc;}
/* Red 5 */
/* ------------ */
.dlb_red5 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_red5 a:link, .dlb_red5 a:visited {background: #ff7f7f; color: #363636;}
.dlb_red5 a:hover, .dlb_red5 a:active {background: #ff565a; color: #ffdcdc;}
/* Aprikot 1 */
/* ------------ */
.dlb_aprikot1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_aprikot1 a:link, .dlb_aprikot1 a:visited {background: #ffb070; color: #303030;}
.dlb_aprikot1 a:hover, .dlb_aprikot1 a:active {background: #ff8040; color: #ffeccc;}
/* BlueRed 1 */
/* ------------ */
.dlb_bluered1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_bluered1 a:link, .dlb_bluered1 a:visited {background: #579db7; color: #363636;}
.dlb_bluered1 a:hover, .dlb_bluered1 a:active {background: #ff565a; color: #f0ffdc;}
/* BlueAprikot 1 */
/* ------------ */
.dlb_blueaprikot1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_blueaprikot1 a:link, .dlb_blueaprikot1 a:visited {background: #579db7; color: #363636;}
.dlb_blueaprikot1 a:hover, .dlb_blueaprikot1 a:active {background: #ff8040; color: #f0ffdc;}
/* Bleen 1 */
/* ------------ */
.dlb_bleen1 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_bleen1 a:link, .dlb_bleen1 a:visited {background: #70d0ac; color: #363636;}
.dlb_bleen1 a:hover, .dlb_bleen1 a:active {background: #ff565a; color: #f0ffdc;}
/* Bleen 2 */
/* ------------ */
.dlb_bleen2 {} /* existiert nur, um eine div zu schreiben, auf die die a-Links reagieren... */
.dlb_bleen2 a:link, .dlb_bleen2 a:visited {background: #70d0ac; color: #363636;}
.dlb_bleen2 a:hover, .dlb_bleen2 a:active {background: #40c090; color: #f0ffdc;}
/* ##################################################################################################### */
/* # # */
/* # B I L D E R # */
/* # # */
/* ##################################################################################################### */
/*...erzeugt einen Bild-Effekt: das Bild wird transparent bei Hover... */
.piclink a:link, .piclink a:visited {text-decoration: none;}
.piclink a:hover, .piclink a:active {
opacity: 0.7;
text-decoration: none;
-webkit-transition-duration: 0.7s; /* Safari */
transition-duration: 0.7s;}
/* ##################################################################################################### */
/* # # */
/* # F O O T E R # */
/* # # */
/* ##################################################################################################### */
.footersect_a{background: #34648a; padding: 2em 10%; } /* oberer Footerbereich */
.footersect_b{background: #04344a; } /* unterer dunklerer Footerbereich */
.footersect_inlay{background: #0d3e57; width: 250px;} /* Inlay im unteren Footerbereich */
.foottxt_titel{ color: #f0f8ff;} /* Schriftfarbe der Footer-Überschriften */
/* Schriftart des Copyright-Bereichs */
.xfm_copy { font-family: "Arial", "Calibri", "Verdana", "Tahoma", sans-serif; color: #FF0000; font-size: 16px; font-style: normal; font-weight: normal; line-height:1.1em; }
.foottxt_copy{ color: #b0dfef; text-shadow: black 0.1em 0.1em 0.2em; } /* Schriftfarbe Copyright */
.foottxt_ateam{ color: #579bd7;} /* Schriftfarbe ATeam */
.foottxt_programmer{ color: #579bd7; font-size: 11px;} /* Schriftfarbe und Size Programmierer */
/* ##################################################################################################### */
/* # # */
/* # S O N S T I G E S # */
/* # # */
/* ##################################################################################################### */
/* -------------------------------------------------------- */
/* img Bilder zentrieren */
/* -------------------------------------------------------- */
/* IMMER zuerst vertikal, dann horizontal */
/* WICHTIG: Die Bilder müssen Breite oder Höhe haben!!!! */
.imgcenter_v {
min-height: 1em;
display: table-cell;
vertical-align: middle; }
.imgcenter_h {
min-width: 1em;
display: block;
text-align: center; }
/* -------------------------------------------------------- */
/* ENTWICKELN und T u D u */
/* -------------------------------------------------------- */
.bildcenter{ display: block; text-align: center; }
.three-column {padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;}
/* -------------------------------------------------------- */
/* ...noch zum Testen offen... */
/* -------------------------------------------------------- */