/*
CSS Datei für http://stjaco.de/2014_WS/Flugplatz/

Die Datei normalize.css sollte vorab eingebunden werden!

Letzte Änderung:
Samstag, 28.02.2015 durch Maren Koth

Die Schriftart ROBOTO 2.0 liegt unter der Apache License, version 2.0 vor und kann direkt ohne Hinweis auf die Lizenz verwendet werden.


Die CSS-Datei ist in folgenden Kategorien gegliedert:

01: Schriftarten laden  (ab Zeile: 30)
02: Schrift- und Linkstile  (ab Zeile: 60)
03: Stile für Standart HTML Elemente und globale Stile  (ab Zeile: 125)
04: Stile für alle Container-Elemente der Webseite  (ab Zeile: 150)
05: Stile für alle Hauptelemente der Webseite (ab Zeile: 220)
06: Die Hauptnavigation (ab Zeile: 260)
07: Die Unternavigation (wird nur angezeigt, wenn es Unternavigationspunkte gibt) (ab Zeile: 315)
08: Stile für Tabellen  (ab Zeile: 360)
09: Footerbereich der Webseite (Sitemap und Impressum)  (ab Zeile 395)
10: Unterseite: FAQ   (ab Zeile 450)
11: Unterseite: Kontakt (ab Zeile 490)
*/




/* ****************************************************
01: Schriftarten
**************************************************** */

@font-face {
  font-family: "Roboto";
  src: url("font/roboto/Roboto-Thin.ttf");
  font-weight: 200; }

@font-face {
  font-family: "Roboto";
  src: url("font/roboto/Roboto-Light.ttf");
  font-weight: 300; }

@font-face {
  font-family: "Roboto";
  src: url("font/roboto/Roboto-Regular.ttf");
  font-weight: 400; }

@font-face {
  font-family: "Roboto";
  src: url("font/roboto/Roboto-Medium.ttf");
  font-weight: 500; }

@font-face {
  font-family: "Roboto";
  src: url("font/roboto/Roboto-Bold.ttf");
  font-weight: 700; }


/* ****************************************************
02: Schrift- und Linkstile
**************************************************** */

html {
  line-height: 1.75;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  background-color:#E5E5E5;
  box-sizing: border-box;
  font-weight: 300;
}

a {
  text-decoration: none;
}

p {
  font-size: 1.0rem;
  padding-bottom: 10px;
}

h1,
h2 {
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

h1 {
  color: #ee6e73;
  font-size: 1.8em;
}

h2 {
  line-height: 1.0;
  font-size: 1.4em;
  letter-spacing: -0.02em;
  font-weight: 400;
}

a:link {
  color: #2196f3;
  font-weight: 500;
}

.reihe a:link {
  border-bottom: 1px dotted #2196f3;
}

.reihe.unternav a:link {
  border-bottom: none;
}

a:visited {
  color: #2196f3;
}

a:hover {
  color: #1976d2;
  border-bottom: 1px solid #1976d2;
}



/* ****************************************************
03: Standart HTML Elemente und globale Stile
**************************************************** */

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  height:100%;
}

hr {
    margin-top: 60px;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}




/* ****************************************************
04: Stile für alle Container-Elemente der Webseite
**************************************************** */

/* Der Container umfasst alle Elemente der Webseite */
#container {
  min-height:100%;
  position:relative;
}

/* Alle Inhaltsbereiche der Webseite werden hier auf 900px eingegrenzt,
   Nur die Bilder im Slider dürfen breiter sein.
 */
#wrapper, #nav, .wrapper {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* 
  Das DIV mit der Klasse "reihe" stellt jeweils eine neue Reihe im Inhaltsbereich dar. 
  Das DIV muss dabei ein direktes Kind-Element des DIV "Wrapper" sein.
  Direkte Kindelemente sind entsprechend ihrer Benennung Ein-, Zwei oder Dreispaltig.
  Um den Abstand zum nächststehenden DIV mit der Klasse "reihe" zu verringern, kann die Klasse "engerAbstand" mitgegeben werden.
*/
.reihe .einspaltig,
.reihe .zweispaltig,
.reihe .dreispaltig {
  float: left;
}

.reihe .einspaltig {
  width: 100%;
  padding-top: 20px;
  padding-left: 20px; 
  padding-right: 0px;
}

.reihe .zweispaltig {
  width: 50%;
  padding-top: 20px;
  padding-left: 20px; 
  padding-right: 0px;
}

.reihe .dreispaltig {
  width: 33.3%;
  padding-top: 20px;
  padding-left: 20px; 
  padding-right: 20px;
}

.reihe.engerAbstand .einspaltig,
.reihe.engerAbstand .zweispaltig,
.reihe.engerAbstand .dreispaltig {
  padding-bottom: 0;
  margin-bottom: -50px;
}

.reihe:after {
  content: "";
  display: table;
  clear: both;
}



/* ****************************************************
05: Stile für alle Hauptelemente der Webseite
**************************************************** */

/* Das Logo der Seite ist absolut positioniert, damit es schnell ausgetauscht und umpositioniert werden kann */
#logo {
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -430px;
  top: 30px;
  z-index: 1000;
}

/* Im Bildercontainer läuft die Slideshow ab. Der Container hat 100% Breite und beschneidet enthaltene Kind-Elemente in der Höhe */
#bilder {
  width: 100%;
  height: 500px;
  overflow: hidden;
  z-index: 10;
  position: relative;
  background-color: #A6D4F0;
}

/* Hier werden die Bilder der Slidshow mittig platziert */
#bilder img {
  z-index: 10;
  max-width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}





/* ****************************************************
06: Die Hauptnavigation
**************************************************** */
#nav {
  z-index: 200;
  margin-top: -80px;
}

#nav.keineSlideshow {
  margin-top: 40px;
}

#navbar {
  width:100%;
  height:80px;
  overflow: hidden;
  background-color: rgba(255,255,255,0.7);
  z-index: 200;
  position: relative;
}

#navbar ul {
  list-style: none;
  padding-top: 18px;
  padding-left: 0;
}

#navbar li {
  display: inline;
  list-style-type: none;
  padding: 10px 19px;
}

#navbar li a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}

#navbar li a:hover,
.unternav li a:hover {
  color: #ee6e73;
  border-bottom: 1px dotted #ee6e73;
}

#navbar li.active a {
  color: #ee6e73;
}






/* ****************************************************
07: Die Unternavigation (wird nur angezeigt, wenn es Unternavigationspunkte gibt)
Die Unternavigation muss sich als erstes Element mit den Klassen "reihe" und "unternav" im Eltern-DIV "Wrapper" befinden
**************************************************** */
.reihe.unternav {
  background-color: #F2F2F2;
  width:100%;
  height:40px;
  overflow: hidden;
  z-index: 200;
  position: relative;
}

.reihe.unternav ul {
  list-style: none;
  padding-left: 0;
  margin-top: 11px;
}

.reihe.unternav li {
  display: inline;
  list-style-type: none;
  padding: 10px 19px;
}

.reihe.unternav li a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

.reihe.unternav li a:hover {
  color: #ee6e73;
}

.reihe.unternav li.active a {
  color:#ee6e73;
}

.reihe.unternav a:link {
  font-weight: 300;
}



/* ****************************************************
08: Stile für Tabellen
**************************************************** */
.reihe table {
  border-collapse: collapse;
  border-spacing: 0; 
}

.reihe td, th {
  padding: 0; }

.reihe table, th, td {
  border: none; }

.reihe table {
  width: 100%;
  display: table; }

.reihe table tr {
    border-bottom: 1px solid #d0d0d0; }

.reihe thead {
  border-bottom: 1px solid #d0d0d0; }

.reihe td, th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px; }





/* ****************************************************
09: Footerbereich der Webseite (Sitemap und Impressum)
**************************************************** */

.sitemap {
  width:100%;
  margin-top: 100px;
  padding-top: 30px;
  padding-bottom: 60px;
  background:#000000;
  color:#ffffff;
  font-size: 0.85rem;
}

.legalfooter {
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  background-color: #222;
  text-align: center;
}

.legalfooter span {
  padding-left: 30px;
  padding-right: 30px;
}

.sitemap ul,
.sitemap li {
  padding: 0;
  margin:0;
}

.sitemap ul li {
  display:inline;
  padding-right: 8px;
  margin-right: 8px;
  border-right: 1px solid #222;
}

.sitemap .hauptnavigationspunkt {
  text-align: right;
  padding-right: 20px;
}

.sitemap .hauptnavigationspunkt a:link,
.sitemap .hauptnavigationspunkt a:visited {
  color:#fff;
}




/* ****************************************************
10: Unterseite: FAQ
**************************************************** */

/*
Styles für das FAQ gemäß: http://www.the-art-of-web.com/css/format-dl/
*/
dl {
  padding: 0.5em;
}
dt {
  float: left;
  clear: left;
  width: 300px;
  text-align: right;
  font-weight: bold;
}
dt:after {
  content: ":";
}
dd {
  margin: 0 0 0 320px;
  padding: 0 0 0.5em 0;
}

ul.ohnePunkte {
  list-style: none;
  padding-left: 0;
  margin-top: 40px;
  padding-top: 0;
}

ul.ohnePunkte li {
  list-style-type: none;
  padding-bottom: 10px;
}




/* ****************************************************
11: Unterseite: Kontakt
**************************************************** */

/*
Kontaktformular, gemäß: http://little-boxes.de/lb1/9.6.2-schritt-2-das-formular-per-css-gestalten.html
*/

form {
  width: 370px; /* Breite des Formulars */
  padding: 20px;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#name,
input#absender,
input#betreff,
textarea {
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  height: 7em;
}
input:focus,
textarea:focus {
  background-color: #d9d9d9;
}