/*============================================================== Stylesheet für die Site der Biologischen Station im Kreis Wesel Zentrales Stylesheet - wird im der Webseiten eingebunden Datei: zentrale.css Darum: 31.12.2013 Autor: Regina Müller ==============================================================*/ /* ================================== A) BASIS-TEIL MIT RESET UND RESTAURIERUNG DER ABSTÄNDE =====================================*/ @media all { /* ================================== Teil I - Reset =====================================*/ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ul, ol, li, table, th, td, form, fieldset, legend, input, textarea { padding: 0; margin: 0; } /*================================== Teil II - Abstände restaurieren ====================================*/ h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol { margin-bottom: 1em; } ul, ol {margin-left: 2em;} ul ul, ul ol, ol ol, ol ul {margin-bottom: 0;} blockquote {margin: 1em 2em;} /*=================================== Teil III - Allgemeine Klassen ===================================*/ .clearing {clear: both;} /*Der Kern von Clearfix*/ .clearfix:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; } /*Patch für IE7*/ *:first-child+html .clearfix {min-height: 0;} } /* Ende @media */ /* ============================================================== B) TEIL FÜR BILDSCHIRM Aufbau: 1. Allgemeine Styles 2. Styles für Layoutbereiche 3. Anpassungen für verschiedene Bildschirmgrößen ===============================================================*/ @media screen { /* ============================================================== 1. Allgemeine Styles ===============================================================*/ body{ background-color: white; background-image: url(hintergrund.jpg); background-repeat: repeat-x; background-attachment: fixed; color: white; font-family: 'Open Sans', Verdana, sans-serif; font-size: 87.5%; } h1 {font-size: 150%;} h2 {font-size: 130%;} h3 {font-size: 110%;} a{ text-decoration: none; outline: none; } a:link{color: gray;} a:visited{color: gray;} a:hover, a:focus{border-bottom: 0;} table {border-collapse: collapse;} thead {background-color: #f8935f;} tbody {background-color: #eee;} tr.gerade {background-color: white;} tfoot { background-color: #f8935f; font-size: 85,71%; border-top: 1px solid #f3c600; border-bottom: 1px solid #f3c600; } th, td { vertical-align: top; text-align: left; padding: 0.3em 0.5em; } tr.bildertabelle {background-color: white;} td.nopadleft {padding-left: 0;} .bilderrahmen { padding: 2px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0px 2px 6px rgba(0,0,0,0.3); } .floatlinks { float: left; margin-right: 15px; margin-bottom:5px; margin-top: 5px; } .floatrechts { float: right; margin-left: 10px; margin-bottom: 5px; margin-top: 5px; } /* ====================================== 2. Styles für Layoutbereiche =======================================*/ div#wrapper{ background-color: white; color:#333; width: 85%; max-width: 70em; margin-top: 40px; margin-right: auto; margin-bottom: 10px; margin-left: auto; border-radius: 5px; box-shadow: 0px 2px 7px rgba(0,0,0,0.5); } div#kopfbereich{ position: relative; /*positioniert, aber bleibt im Fluss*/ background-color: #eee; color: #333; padding-top: 10px; padding-right: 20px; padding-bottom: 0; padding-left: 20px; border-radius: 5px 5px 0 0; } div#bildkopf { float: right; padding-top: 35px;} div#logokopf { float: left;} p#slogan{ position: absolute; top: 10px; right: 20px; padding: 5px 0 5px 0; margin-bottom: 0; font-family: 'Gloria Hallelujah', cursive; color:#eb481c; } div#textbereich{ line-height: 1.7; padding: 30px 30px 20px 30px; color: #333; } div#textbereich a:hover, div#textbereich a:focus { text-decoration: none; color: teal; } div#picturebar { float: left; width: 15%; } div#picturebar img { max-width: 100%; height: auto; } div#haupttext { width: 58%; float: left; border-radius: 5px; padding-left: 2%; } div#haupttext p a.linktext:hover, div#haupttext p a.linktext:focus { text-decoration: underline; color: teal; } div#haupttext li a.linktext:hover, div#haupttext li a.linktext:focus { text-decoration: underline; color: teal; } div#haupttext li a:link {color: #333;} div#haupttext li a:visited {color: gray;} div#haupttext li a:hover {color: teal;} div#haupttext a.anker:hover {color: #333;} div#haupttext li { padding: 4px; list-style-type: disc; } div#haupttext li.niedrigezeile{ padding-top: 0; list-style-type: none; } div#haupttext li.faq{ list-style-type: decimal; font-weight: bold; } div#haupttext p table a.veranstaltungslink:link {color: #333;} div#haupttext p table a.veranstaltungslink:hover, div#haupttext p table a.veranstaltungslink:focus {color: teal;} div#haupttext p table a.veranstaltungslink:visited {color: gray;} div#sidebar { width: 20%; margin-left: 5%; margin-top: 5%; float: left; color: gray; } div#sidebar li { list-style-type: none; line-height: 1.9em; color: #333; } div#sidebar li.sie-sind-hier a { color: gray; border-color: gray; font-weight: bold; } div#sidebar li.linklinie { padding-bottom: 5px; padding-top: 10px; border-bottom: 1px dotted #eb481c; } div#sidebar li.linklinieoberste { padding-bottom: 5px; padding-top: 10px; border-bottom: 1px dotted #eb481c; border-top: 1px dotted #eb481c; } div#sidebar li.linkohnelinie { padding-top: 50px; } div#sidebar a { color: gray;} div#sidebar a:hover div#sidebar a:focus { text-decoration: none; color: teal; } div#fussbereich{ padding: 10px 20px 0px 20px; background-color: #eee; margin-bottom: 0; border-radius: 0 0 5px 5px; } div#adresse { float: left; } div#ausgelagert { float: right; } div#fussbereich a{ color: gray; text-decoration: none; font-size: 90%; display: inline; } div#fussbereich a:hover, div#fussbereich a:focus { text-decoration: none; color: teal; } div#fussbereich li { display: inline; /*li nebeneinander anzeigen*/ list-style-type: none; /*ohne Aufzählungspunkte*/ float: right; padding: 10px; } div#fussbereich p{ font-size: 80%; float: left; color: gray; line-height: 1.4; } div#ausgelagert li.sie-sind-hier a { color: gray; border-color: gray; font-weight: bold; } } /* Ende @media */ /*================================================= 3. Anpassungen für verschiedene Bildschirmgrößen =================================================*/ /*Anpassung erster Schritt*/ @media only screen and (max-width: 1080px){ div#picturebar {display: none;} div#haupttext {width: 65%} div#sidebar {width: 28%} } /*Ende Anpassung erster Schritt*/ /*Anpassung zweiter Schritt*/ @media only screen and (max-width: 940px){ div#bildkopf img{ width: 360px;} } /*Ende Anpassung zweiter Schritt*/ /*Anpassung dritter Schritt*/ @media only screen and (max-width: 800px){ body {background: none;} div#wrapper { width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;} } /*Ende Anpassung dritter Schritt*/ /*Anpassung vierter Schritt*/ @media only screen and (max-width: 670px){ div#bildkopf img{width: 280px;} } /*Ende Anpassung vierter Schritt*/ /*Anpassung Hauptnavi untereinander*/ @media only screen and (max-width: 605px){ div#sidebar{ float: none; width: 100%; margin-left: 0; } div#sidebar ul {margin-left: 0;} div#haupttext{ float: none; width: 100%; } div#bildkopf img{width: 200px;} } /*Ende Anpassung Hauptnavi untereinander*/ /*Anpassung sechster Schritt*/ @media only screen and (max-width: 510px){ div#bildkopf {display: none;} } /*Ende Anpassung sechster Schritt*/ /*Anpassung letzter Schritt*/ @media only screen and (max-width: 435px){ p#slogan {display: none;} } /*Ende Anpassung letzter Schritt*/ /*===================================================================== C) TEIL FÜR NAVI INLINE Datum: 01.01.2014 Autor: Regina Müller ====================================================================*/ @media screen { div#navibereich { background-color: #eee; padding: 20px; padding-bottom: 25px; } div#navibereich ul { margin: 0; float: right; } div#navibereich li { display: inline; /*li nebeneinander anzeigen*/ list-style-type: none; /*ohne Aufzählungspunkte*/ margin: 0 0 0 5px } div#navibereich a { background-color: #eee; padding: 4px 8px 4px 8px; color: gray; } div#navibereich li.sie-sind-hier a { color: gray; background-color: #eee; border-color: gray; font-weight: bold; } div#navibereich a:hover, div#navibereich a:focus { color: teal; } } /*Ende @media*/ /*Anpassung Hauptnavi untereinander*/ @media only screen and (max-width: 605px){ div#navibereich { padding: 0; padding-bottom: 0; overflow: hidden; } div#navibereich li { display: block; border-top: 1px solid gray; border-bottom: 1px solid gray; padding: 5px; margin: 0 5px 0 5px; } div#navibereich ul { margin: 0; float: left; width: 100%; } } /*Ende Anpassung Hauptnavi untereinander*/ /*================================================================ D) TEIL FÜR DRUCKVERSION Datum: 02.01.2014 Autor: Regina Müller ================================================================*/ @media print { body { font-family: Georgia, "Times New Roman", serif; font-size: 12pt; } h2{ font-family: Arial, Helvetica, sans-serif; font-size: 16pt; padding-top: 18pt; border-top: 1pt solid #eb481c; margin-top: 12pt; } h3{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; } div#adresse {font-size: 9pt; font-color: #eb481; padding-top: 10pt; border-top: 1pt solid #eb481c;} div#navibereich {display: none;} div#ausgelagert {display: none;} div#picturebar {display: none;} div#bildkopf {display: none;} div#sidebar {display: none;} p#slogan {color: #eb481c; text-align: right; font-family: cursive; font-size: 10pt; float: right; padding: 0;} div#fussbereich img {display: none;} div#logokopf img{width: 75pt; height: 53pt; float: left;} a { color: #333; text-decoration: none; } a[href]:after { content:" [URL: "attr(href)"] "; } a.druck[href]:after{ content: none; } a.verweisoben {display: none;} } /* Ende @media */