/*============================================================== Stylesheet für die Site der Biologischen Station Kreis Wesel und Krefeld Zentrales Stylesheet - wird im der Webseiten eingebunden Datei: zentrale.css Datum: 31.12.2013 Letzte Aktualisierung: 21.01.2025 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 ===============================================================*/ /* open-sans-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('fonts/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('fonts/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('fonts/open-sans-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('fonts/open-sans-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('fonts/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('fonts/open-sans-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* gloria-hallelujah-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Gloria Hallelujah'; font-style: normal; font-weight: 400; src: url('fonts/gloria-hallelujah-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } 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#videowrapper{ background-color: white; color:#333; width: 100%; 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;} div#logokopf a:hover, div#logokopf a:focus { text-decoration: none; color: none; } p#slogan{ position: absolute; top: 10px; right: 20px; padding: 5px 0 5px 0; margin-bottom: 0; font-family: 'Gloria Hallelujah', sans-serif, 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#textbereich button { background-color: #eee; border: 1px solid gray; border-radius: 10px; color: gray; padding: 8px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 2px 1px; cursor: pointer; } div#textbereich button:hover { box-shadow:0 4px 8px 0 rgba(0,0,0,0.6) } 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#videoframe { width: 98%; float: left; border-radius: 2px; padding-left: 2%; } div#sidebar { width: 20%; margin-left: 5%; margin-top: 1%; 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 */ /*================================================= Lightbox Gallery =================================================*/ /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #eee; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: #eee; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } /* Hide the slides by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: #eee; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #eee; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Caption text */ .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: #eee; } img.demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /*Ende Lightbox Gallery*/ /*================================================= 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 */