/* Farben: Dunkles Blau des Brandings : #212052 (dunkles Blau) ganz leichtes Grau SubNav : #EEEEEE (ganz leichtes Grau) leichtes Grau der Navigation : #DFDFDF (helles Grau) dunkles Grau der Navigation : #BCBCBC (dunkles Grau) dunkles Grau der h1-h6 : #969696 (dunkles Grau) ganz dunkles Grau SubNav : #666666 (ganz dunkles Grau) Content Hintergrundfarbe : #ffffff (Weiss) */ /* CSS Document */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700); #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {font-family: 'Roboto', sans-serif;font-weight:normal;letter-spacing:1.2px;} /* nav#vNav h2 {font-family: 'Roboto', sans-serif;font-weight:300; letter-spacing:1.8px;} nav#vNav h3 {font-family: 'Roboto', sans-serif;font-weight:normal;letter-spacing:1.8px;} nav#vNav li {font-family: 'Roboto', sans-serif;font-weight:300; letter-spacing:1.8px;} */ .Zitat blockquote p {font-family: 'Roboto', sans-serif;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* CSS-Reset */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; color: #666; font-family: Arial, Helvetica, sans-serif; font-style: normal; } address, caption, cite, code, dfn, em, th, var {font-style:normal;font-weight:normal;} table {border-collapse:collapse;border-spacing:0; line-height: 20px;} fieldset, img {border:0;} ul, ol {list-style-type:none;} caption, th {text-align:left;} h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;} q:before, q:after {content:'';} abbr, acronym {border:0;} a, a:visited, a:hover {text-decoration:none;} pre {font-size:0.875rem;color:black;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Allgemeines */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ html {font-size:100%;} html, body {overflow-x: hidden;} /* Damit kein horizontaler Scrollbalken angeigt wird*/ body {background-color:#FFF;} img {max-width:100%;height:auto;} sup {vertical-align: top; position: relative; top: -0.5rem;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Header */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ header {height:auto;background-color:#212052;} header div {margin: 0 auto;max-width: 982px;background: url(../img/css/header-gradient.jpg); background-size: 50% 100%;background-repeat: no-repeat;background-position: right center;} header img {max-width:448px;min-width:320px;height:auto;width:60%;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Main */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ main {display:block;min-width:320px;max-width:960px;width:100%;margin:0 auto;background-color:#ffffff;padding-top:20px;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Navigation */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------*/ /* horizonztale Navigation */ /*--------------------------------------------------------------------------------*/ #hNav {position:relative;min-height:56px;background-color:#DFDFDF;background-repeat: repeat-x;background-position:top; border-top:1px solid white;border-bottom:1px solid #ededed;background-image: url("../img/css/header-bottom-gradient.gif");} #hNav nav {max-width:940px;margin:22px auto 0;} #hNav nav ul {font-size:0;} /* remove whitespaces from diff. browsers*/ #hNav nav ul {text-align: left;text-transform: capitalize; background: url(../img/css/nav-spacer.gif) no-repeat left bottom; padding-right:2px;} #hNav nav ul li {font-size:0.875rem;text-transform: uppercase;display:inline-block;list-style: none;padding: 2px 0 6px; background:url(../img/css/nav-spacer.gif) no-repeat right bottom;padding-right:2px;} #hNav nav ul li a {margin-left:0px;padding:11px 12px;} #hNav nav ul li a.first {margin-left:2px;} #hNav nav ul li a:link {color:#6c6c6c;} #hNav nav ul li a:visited {color:#6c6c6c;} #hNav nav ul li a:hover {color:#212052;} #hNav nav ul li a.activeNav{color: #000; background: url(../img/css/bg_nav-link-active.jpg) repeat-x bottom;} /*--------------------------------------------------------------------------------*/ /* vertikale Navigation */ /*--------------------------------------------------------------------------------*/ nav#vNav {float:left;min-width:160px;width:20.875%;margin:34px 0px 60px 1%;} nav#vNav h2 {font-size:1.1rem;color:#fff;padding:2px 8px;margin-bottom:12px;background-color:#292f6d;} nav#vNav h3 {font-size:1rem;padding-left:0.5rem;color:#666666;margin-top:28px;} nav#vNav ul {padding:2px 0px 0 0px;} nav#vNav ul li {font-size:0.875rem;margin-left:1.4rem;margin-top:4px;list-style:none;} /*nav#vNav ul li:hover {background-color: #ebebeb;border-left: 4px solid #ebebeb;}*/ nav#vNav ul li a:link, nav#vNav ul li a:visited {padding-left: 12px;color:#666; display: block;} nav#vNav ul li a:hover {background-color: #ebebeb;} nav#vNav ul li a.activeNav {padding-left: 4px;border-left: 8px solid #212052;} nav#vNav ul li a.activeNav:hover {} /* Menü-Buttons standardmäßig ausblenden */ .menu-toggle {display: none;} /* ocm */ .js .ocm-Fahne {position: absolute;left: 0;top: 14px;width:80px;height:34px;background: url(../img/css/tap.png) no-repeat right center;display: none;} /*-----------------------------------------------------*/ /* Kontakt-Box in vertikaler Navigation */ /*-----------------------------------------------------*/ nav#vNav .Contact {margin-top:40px; margin-right:6px; font-size:0.875rem;} nav#vNav .Contact h2 {font-weight: normal; color:#fff; padding:4px 8px; font-size:1.125rem; background-color: #292f6d;} nav#vNav .Contact h3 {font-size:0.813rem; margin-top:15px; margin-bottom:4px;} nav#vNav .Contact address {font-size:0.75rem; margin-top: 10px;} nav#vNav .Contact address p.CPerson {font-size:0.75rem; margin-top:9px; margin-bottom:7px; font-weight: bold; color: #666;} nav#vNav .Contact address p + p {margin-top: 8px;} nav#vNav .Contact p {font-size:0.75rem;} nav#vNav .Contact p a:link {color:#666666;} nav#vNav .Contact p a:visited {color:#666666;} nav#vNav .Contact p a:hover {color:#212052;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Content */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------*/ /* Inhalt und InhaltG (Gross, ohne seiztliche Navigation) */ /*----------------------------------------------------------------------------------------------------*/ #contentidx {width:100%;margin: 0 auto!important; width:100!important%;} #content {float:left;width:71%;padding-left:3%;min-height:632px;} #content p {padding-bottom:10px;line-height:1.4rem;} #content ul {margin-left:28px;padding-left:18px;line-height: 20px;list-style-type:none;} #content ul li {padding:4px;list-style-image:url(../img/css/square.gif);list-style-position: outside;} #content ul ul li {padding:2px;list-style-image:url(../img/css/line.gif);list-style-position: outside;} #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {margin-bottom:2px;} #content h1 {font-size:1.7rem;margin:1.9rem 0 1rem;} #content h2 {font-size:1.4rem;margin:14px 0 0.4rem;} #content h3 {font-size:1.188rem; margin: 1rem 0 0.4rem 0;} #content h4 {font-size:1rem;font-weight: bold;margin:14px 0 8px 0; } #content h5 {font-size:0.875rem;font-weight: bold;margin-top:8px; } #content button {margin:10px 0 20px 0;} #content a:link, #content a:visited {color:#666; text-decoration: underline;} #content a:hover, #content a:active, #content a:focus {color: white; background-color: #282E6C;padding: 1px 0px;text-decoration: none;} #content .bigpic {margin-bottom:20px;} #content .block {text-align:justify;} #content blockquote {padding-left:0px;} #content img {display: block; margin: 0px 0 0 0;} #content p.tvButton1 {margin-top: 30px;} #content p.tvButton2 {} #content .centertext {text-align:center;} /*---------------------------------------------------*/ /* Image box */ /*---------------------------------------------------*/ #content .ImageBox {} #content .ImageBox dl {} #content .ImageBox dt {} #content .ImageBox dd {line-height: 12px;font-size:0.75rem; padding-top: 6px; color: #a4a4a4;} #content .ImageBox img {margin-top:5px;} #content .ImageBox.floatLeft {float:left;padding:0 18px 12px 0;} #content .ImageBox.floatRight {float:right;padding-left:10px;} #content .ImageBox.floatClear {clear:both;padding:0;} #content .ImageBox a {} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Footer */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ footer {clear:both;height:124px;margin:0 auto; margin-top: 40px; padding:10px 10px 0;background-color:#212052;border: 1px solid #212052;overflow:hidden;} footer .Footer {max-width:960px;width:100%;height:124px;margin: 6px auto 0; background:url(../img/css/footer-gradient.jpg) no-repeat left;} footer .Footer p {font-family: Arial, Helvetica, sans-serif;font-size: 0.8rem;line-height: 1.1rem;letter-spacing:0.5px;color: #ffffff;} footer .Footer a:link {margin-left:4px;color:#eee;text-decoration:none; margin-left: 20px;} footer .Footer a:visited{color:#eee;} footer .Footer a:hover {text-decoration: underline; color:#fff;} footer .Footer .rechts {float:right;margin-right:0px; width:40%;} footer .Footer .rechts p{text-align:right;} footer .Footer p.copy {text-align:center;} /*----------------------------------------------------------------------------------------------------*/ /* Spalten */ /*----------------------------------------------------------------------------------------------------*/ #Spalten {width:100%;margin-top: 0.5rem;margin-right: 0px;padding: 6px 0px 6px 0;text-align: left;display:inline-block;font-size:0.875rem;overflow:visible;} #Spalten::after {clear:both;} #Spalten article {float:left;min-width:230px;height:380px;padding-left:0.5%;} #Spalten article:nth-child(1) {width: 31%;margin-right:2.5%;} #Spalten article:nth-child(2) {width: 31%;margin-right:2.5%;} #Spalten article:nth-child(3) {width: 31%;margin-right:0;} #Spalten p {margin-top:6px;} #Spalten h2 {font-size:1.5em!important;border-bottom:none!important;color: #fff; background-color: #292f6d; padding: 5px 8px; margin: 0px 0 20px 0;font-weight: normal;} #Spalten ul {margin:18px 20px 20px!important;} #Spalten ul li {padding:6px 2px!important;list-style-type:square;list-style-position:outside;line-height: 18px;} #Spalten p.contactus {margin-top:2px;text-align:center;} #Spalten p.contactus a {color: #333; font-weight: bold;} #Spalten p.contactus a:focus {color: #fff;} #Spalten p.contactus a:hover {color: #fff;background-color: #282e6c; padding: 3px 5px; text-decoration: none;} /*----------------------------------------------------------------------------------------------------*/ /* Externe Links */ /*----------------------------------------------------------------------------------------------------*/ a.extern:after {content:url(../img/css/extlink.png);padding-left: 4px;vertical-align: text-top;} a.extern:hover {background-color:#ccc!important;color:inherit!important;padding: 0px 0px 0px 20px;} /*------------------------------------------------------------------------------------------------------------------------*/ /* Projekte */ /*------------------------------------------------------------------------------------------------------------------------*/ .Projekte {} .Projekte h3 {font-size:0.7rem!important;margin-top:0.3rem!important;} .Projekte div.pic {width:30%;float:left;margin-right:0.75rem;font-size:0.8rem;background-color:#f9f9f9;} .Projekte div.pic p {padding:4px 4px 4px 0!important;} .Projekte div.txt {width:60%;float:left;} .Projekte div.lnk {} .Projekte ul {margin-left:0.6rem!important;} .Projekte li {list-style:none!important;} .Projekte article {width:90%;} .Projekte article:after {clear:both;content:"";display:block;margin-bottom:2.2rem;} /*----------------------------------------------------------------------------------------------------*/ /* Kontaktformular */ /*----------------------------------------------------------------------------------------------------*/ #Kontakt {max-width:540px;width:92%;margin:0; padding:10px;border: 1px solid #BCBCBC;border-radius:4px;} #Kontakt p {margin-bottom:12px;} #Kontakt label {width:28%;display:inline;float:left;margin-right:10px;text-align: left;} #Kontakt sup {font-size:0.875rem;font-weight:bold;color:#212052;} #Kontakt input {padding:2px;border:1px solid #BCBCBC;border-radius:4px;} #Kontakt input[type=text] {padding:2px;width:59%;} #Kontakt input[type=email] {padding:2px;width:59%;} #Kontakt input[type=tel] {padding:2px;width:59%;} #Kontakt input[type=submit] {display:block;margin:0 auto;padding:5px 15px;background:#DFDFDF;border:0 none;cursor:pointer;border-radius: 4px;} #Kontakt textarea {padding:2px;border:1px solid #BCBCBC;border-radius:4px;width:59%;} /*----------------------------------------------------------------------------------------------------*/ /* About Us */ /*----------------------------------------------------------------------------------------------------*/ .AboutUs img {float:left;padding:0 18px 12px 0;margin-top:5px;} .AboutUs p {text-align:justify;} /*----------------------------------------------------------------------------------------------------*/ /*Google */ /*----------------------------------------------------------------------------------------------------*/ #GoogleMaps {width:100%; height:400px; margin-bottom:10px;} .GAOptOutInfo {width:90%;text-align:center;} /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Klassen */ /*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------*/ /* Tabellen */ /*----------------------------------------------------------------------------------------------------*/ .tableLayout {width:100%;margin-top: 20px;} .tableLayout td {vertical-align:top;padding-top:4px;padding-bottom:4px;padding-left:0px;padding-right:0px;border-spacing:5px;border-bottom:1px solid #EEEEEE;} .tableLayout th {vertical-align:top;padding-top:4px;padding-bottom:4px;font-weight: bold; width: 33%; padding-right: 30px;border-bottom:1px solid #EEEEEE;} .tableLayout .CenterButton {display:block;margin: 20px 0 0 200px;} /* Button z.B. eines Formulars zentrieren */ .tblPretty {width:99%;margin-bottom:20px;} .tblPretty th {padding:2px;background-color:#09F; color:white;} .tblPretty td {padding:2px;} /*----------------------------------------------------------------------------------------------------*/ /* Zitat */ /*----------------------------------------------------------------------------------------------------*/ .Zitat blockquote {padding:20px 30px 1rem;background:url(../img/css/zitat.gif) no-repeat 10px 10px;border:1px solid #DFDFDF;margin:30px 0 20px 0;color:#969696;} .Zitat blockquote p {font-size:1.125rem;font-style:italic;margin-bottom:5px;background:none;padding-left:40px;color:#666666;} .Zitat blockquote p.ZitatSmall{font-size:0.875rem;} .Zitat blockquote cite {font-size:0.75rem;font-style:italic;display:block;margin-left:15px;background:none;text-align:right;color:#666666;} .Zitat cite a {font-weight:bold;background:none;text-decoration:none;} .Zitat cite a:hover {background-color:#969696;color:white;} /*----------------------------------------------------------------------------------------------------*/ /* Infobox */ /*----------------------------------------------------------------------------------------------------*/ .Infobox {background-color:#eeeeee;padding:10px; background-image:url(../img/css/Info.png); background-repeat:no-repeat;background-position:10px 11px; text-indent:25px;margin:20px 0;} .Motto {Margin:6px auto 24px;width:300px;padding: 8px 8px 2px;} .Motto p {font-weight:bold;text-align:center;} /*----------------------------------------------------------------------------------------------------*/ /* Formularfeld der Anfahrtsroute */ /*----------------------------------------------------------------------------------------------------*/ input#RouteStart {margin-right: 15px;} /*----------------------------------------------------------------------------------------------------*/ /* Tooltip */ /*----------------------------------------------------------------------------------------------------*/ .tooltip {border-bottom:1px dashed blue;cursor: help;} /*---------------------------------------------------*/ /* Floats */ /*---------------------------------------------------*/ img.left {float:left;} img.right {float:right;} .floatLeft {float:left;} .floatRight {float:right;} .floatClear {clear:both;} /*----------------------------------------------------------------------------------------------------*/ /* Sonstiges */ /*----------------------------------------------------------------------------------------------------*/ .clearfix {clear:both;}