html{ overflow-y: scroll; /* Blendet Y-Scrollbalken auf jeder Seite ein. Dadurch kein Sprung-Versatz von Einzelseiten zur Startseite*/ } /* Setzt alle vordefinierten Browsereinstellungen zurück */ * { padding: 0; margin: 0; } body { background-color: #5c5743; background-image: url(../bilder_global/pattern.png); font: 90.00% Arial, Helvetica, sans-serif; /* Wird font = X % verändert, ändert sich auch die Breite der Page, da diese in em definiert ist */ color: #CCC28E; } /* TEXTDEKLARATION */ h1{ font-size: 1.5em; } h2{ font-size: 1.325em; } h3{ font-size: 1.15em; margin-top: 0.5em; margin-bottom: 0.4em; } section { font-size: 1.1em; } section p, section li { line-height: 1.3em; } /* Ende TEXTDEKLARATION */ /* Definiert die Höhe der Farblinie zwischen Header und Inhaltsbereich */ .color_line { clear: both; height:0.5em; margin-top: 0px; /* Abstand vom Header */ } /* Laufleiste zwischen Header und Inhaltsbereich. */ #color_line_verein{ background-color: #810000; } #color_line_jugend{ background-color: #FF4900; } #color_line_donau { background-color: #008000; } #color_line_lauchert { background-color: #0896BF; } #color_line_gast { background-color:#C91210; } #color_line_download { background-color:#C91210; } #color_line_kontakt { background-color:#C91210; } #color_line_impressum { background-color:#C91210; } #color_line_bildnachweis { background-color:#C91210; } #ssi { height: 0px; /* Aktiv wenn keine Infoleiste angezeigt werden soll; ansonsten ausblenden */ margin-bottom: 0em; padding: 4px 0px 4px 0px; background-color:#5c5743; border-top: 1px silver solid; border-bottom: 1px silver solid; box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.3); font: Arial, Helvetica, sans-serif; font-size: 1.3em; letter-spacing: 0.05em; text-align: center; color: #55AAFF; } #ssi a { color: #55AAFF; } /* Wrapper umschliesst: Navigation - Inhaltsbereich - Section - Footer. Hier wird die maximale und minimale Seitengrösse definiert */ #wrapper { margin:0 auto; width: 100%; /* Verändert die Breite innerhalb der Grenzen max-width und min with */ max-width: 75em; /* Ziel: 63-75em - Die Breite ist ebenso abhängig von body: font = X %*/ min-width: 4em; /* Ziel: 4-36em */ height: auto; margin: 10px auto; /* Abstand zu SSI; Nach oben 10 Pixel der Rest Auto zentriert */ text-align: left; } /* Inhaltbereich umfasst Navigation & Section; Section = der eigentliche Inhalt*/ #inhaltsbereich { width:100%; word-spacing: 0.1em; background-color: #4E4A3A; padding: 0px 0px 50px 0px; border-top-left-radius: 5px; /* Abgerundeten Ecken im Inhaltsbereich */ border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #inhaltsbereich p, #inhaltsbereich h1, #inhaltsbereich h2 { padding-bottom: 1em; } /* Navigation */ /* Link "Aktuelles" kann so verteckt werden */ .nav_hidden{ display: none; } nav { /* font-size: 1em; */ font-size: 1.1em; width: 21.5%; margin-left: 0.5%; display: block; margin-top: 28px; float: left; } nav strong, nav a { display: block; /* Setzt die Rahmen der Liste auf die Breite von nav */ text-decoration: none; /* Entfernt den Hyperlink, bezieht sich auf Tag a */ color: #CCC28E; border-top: solid 1px #CCC28E; border-right: solid 4px #CCC28E; padding: 2px 2px 2px 10px; word-wrap:break-word; /*Erzwingt einen Buchstabenumbruch ist aber keine exate Trennung*/ /*Automatische Silbentrennung in der Navigation. Bedingt . Wird nicht von allen Browsernunterstützt*/ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } nav li { line-height: 1.3em; /* Definiert die Zeilenhöhe der Navigationszeilen */ } nav a:hover { border-right: solid 4px red; } /* Entfernt den gepunkteten Rahmen bei Links */ a:active, a:focus { outline: none; } nav strong { color: #FF7F00; border-right: solid 4px green; } nav ul { border-bottom: solid 1px #CCC28E; list-style-type: none; } nav ul ul { border: none; padding-left: 1.5em; /* 1.5em */ } nav ul ul li { margin-left: 0px; } nav ul { padding-left: 0em; } /* Anfang Mobile Device Navigation */ /* Button nicht anzeigen */ .button_mobile_device_nav { display: none; } /*Checkbox nicht anzeigen*/ input[type=checkbox]{ display: none; } @media screen and (max-width : 760px){ /*mobile_device_nav anzeigen wenn checkbox angeklickt ist*/ /* "CSS Selector Reference" */ /*input[type=checkbox]:checked ~ #menu: Selects every <#menu> element that are preceded (vorangestellt)) by a element */ input[type=checkbox]:checked ~ #mobile_device_nav{ display: block; } .button_mobile_device_nav { display:block; margin-bottom: 20px; width: 80px; border-radius: 5px; background: #FF7F00; text-align: center; padding: 10px 0; color: #FFFFFF; } .button_mobile_device_nav:hover { background: #4BA2B7; color: #ffffff; } nav { float: none; width: 210px; margin-left: 2.5% ; margin-bottom: 25px; margin-top: 0px; } nav li a{ font-size: 1em; letter-spacing: 1px; height: 20px; /* Höhe der Navigation */ color: #CCC28E; text-align: left; } nav strong, nav li a{ border-radius: 5px; background: #2f3036; } nav ul { display: none; /* Untermenues ausgeblenden */ } nav ul li a:hover + .hidden_mobile_device, nav ul li strong:hover + .hidden_mobile_device, .hidden_mobile_device:hover { display: list-item; /* Untermenues bei hover einblenden. +. hidden Select all elements that are placed immediately after