/*
Theme Name: KFZ-Nordkurve 2014
Description: Template fuer "KFZ-Nordkurve"
Author: Florian Meier
Author URI: http://www.flomei.de
*/

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

/* Reset */
* {
   margin:0;
   padding:0;
   border:0;
   text-decoration:none;
   font-family: 'PT Sans', sans-serif;
   box-sizing:border-box;
   line-height: 150%;
}

/* Basisangaben aus Design Guide */

/*
Farben, primaer
#282871 blau
#B0B0B0 grau
*/

html { height:100%; }

body {
   font-size:14px;
   color:#000;
   line-height:17px;
   width:100%;
   height:100%;
}

h1 {
   font-size:48px;
   font-weight:700;
   color:#282871;
   text-shadow:#fff 0 0 10px;
   line-height:140%;
}

h2 {
   font-size:36px;
   font-weight:700;
   color:#282871;
   text-shadow:#fff 0 0 10px;
   line-height:140%;
}

h3 {
   font-size:14px;
   font-weight:700;
   color:#282871;
   line-height:140%;
}

h4 {
   font-size:14px;
   font-weight:400;
   color:#282871;
}

i, em {
   font-style:italic;
}

b, strong {
   font-weight:700;
}

a {
   color:#282871;
}

a.anchor {
   display:block;
   height:65px;
}

.blue { 
   color:#282871 !important;
}

p { margin-bottom:0.5em; }


div#contentwrapper {
   width:100%;
   margin:0px auto;
   height:100%;
}

div#contentbox {
   width:100%;
   height:100%;
}

section {
   position:relative;
   text-align:center;
}

.fullscreen {
   width:100%;
   min-height:100%;
   height:inherit;
   text-align:center;
   position:relative;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
}

.trennbalken {
   display:block;
   clear:both;
   height:36px;
   background-image:url('./images/strasse.png');
   background-repeat:repeat-x;
}

nav#mainnavi {
   width:100%;
   height:85px;
   background-color:#B0B0B0;
   text-align:center;
   position:absolute;
   top:100%;
   margin-top:36px;
   z-index:100;
   font-weight:700;
   font-size:18px;
   padding-top:10px;
   padding-bottom:10px;
}

#mainnaviaufseite {
   width:100%;
   height:85px;
   background-color:#B0B0B0;
   text-align:center;
   position:fixed;
   top:0;
   font-weight:700;
   font-size:18px;
   padding-top:10px;
   padding-bottom:10px;
}

nav a {
   color:#282871;
   margin-right:1em;
   display:inline-block;
}

nav a:hover {
   color:#FFF;
}

h1 + p { margin-top:30px; font-size:18px; font-weight:700; }

img#startimage_logo { margin-top:5%; margin-bottom:30px; width:50%; }
img#oeffnungszeiten {position:absolute; bottom:0; right:20px; }
img#logo_small { vertical-align:middle; margin-right:30px; }

section.abschnittstart {
   display:table;
   clear:both;
   width:100%;
   height:500px;
   text-align:center;
   background-repeat:no-repeat;
   background-position:center center;
   background-attachment:fixed;
   background-size:cover;
   box-shadow: 0 10px 60px #ccc;
   border-bottom: 1px solid #ddd;
}

div.abschnitteinleitung {
   display: table-cell;
   vertical-align: middle;
}

section.abschnittinhalt {
   padding-top:50px;
   padding-bottom:50px;
}

section.middle {
   width:50%;
   margin-left:25%;
}

section.full {
   width:80%;
   margin-left:10%;
}

.alignleft { text-align:left; }
.aligncenter { text-align:center; }

div.box { 
   width:33%;
   padding-right:25px;
   display:inline-table;
   margin-bottom:50px;
   vertical-align:top;
}

div.bigbox {
   width:49%;
   padding-right:25px;
   display:inline-table;
   margin-bottom:50px;
   vertical-align:top;
}

div.biggestbox {
   width:100%;
   display:inline-table;
   margin-bottom:50px;
   vertical-align:top;
}

/* Responsive Design */
@media only screen and (max-width: 1050px) {
   section.middle { width:64%; margin-left:18%; }
   img#logo_small { width:125px; padding-left:10px; }
   img#oeffnungszeiten { width:100px; right:10px; }
   h1 { font-size:38px; }
}

@media only screen and (max-width: 880px) {
   div.box { width:49%; }
}

@media only screen and (max-width: 770px) {
   div.box { width:100%; }
}