/********************************
 * www.wi-ma-gie.de             *
 * CSS                          *
 * Version: 26.12.2016          *
 ********************************/

/*
Basierend auf https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/feststehender_footer 
*/

/* --------------- Grundlegender Seitenaufbau --------------- */

header {
  position:   fixed;
  top:        0px;
  left:       0px;
  right:      0px;
  max-height: 14%;
}

nav {
  position:   fixed;
  float:      left;
  width:      15em;
  max-height: 60%;
  overflow:   auto; /* Scrollbar nur, wenn notwendig */
}

main {
  margin-left: 15em; /* = nav width */
  min-width:   12em; /* Bei 240 gerade noch ohne Scroll */
  /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}

aside {
  float: right;
  width: 7em;
}

footer {
  position: fixed;
  bottom:   0;
  left:     0;
  right:    0;
}

/* --------------- Farben --------------- */

body {
  color: #000030; /* Sehr dunkles Blau, fast Schwarz */
}

main {
  background:   #DCE6F2; /* Hellblau */
  border-color: #204080; /* Dunkelblau */
}

header {
  background-color:    #204080; /* Dunkelblau */
  border-bottom-color: #D5D5D5; /* 84% Hell-Grau */
}

header h1 {
  color: #EEEEEE; /* 93% Hell-Grau, fast Weiß */
}

nav {
  background-color: #DCE6F2; /* Hellblau */
  border-color:     #E0B020; /* Orange */
}

nav a {
  background-color: #5080C0; /* Mittelblau */
  color:            #EEEEEE; /* 93% Hell-Grau, fast Weiß */
}

nav ul a:hover,
nav ul a:active {
  color:            black;
  background-color: #E0B020; /* Orange */
}

aside {
  background:   #6D6CB8; /* Lila */
  border-color: #DCE6F2; /* Hellblau */
}

footer {
  color:        black;
  background:   #204080; /* Dunkelblau */
  border-color: #8A9DA8; /* Blau-Grau */
}

footer a {
  color: #EEEEEE; /* 93% Hell-Grau, fast Weiß */
}

table.download {
  color: black;
}

table.download th, th.download {
  background-color: #808080; /* 50% Grau */
}

table.download td, td.download {
  background-color: #D0D0D0; /* 82% Hell-Grau */
}

table.chronik td {
  border-top-color: #C0C0C0; /* 75% Hell-Grau */
}

.login {
  background-color: #C0C0C0; /* 75% Hell-Grau */
}

.login a {
  background-color: #C0C0C0; /* 75% Hell-Grau */
  color:            black;
}

.login a:hover,
.login a:active {
  color:            black;
  background-color: white;
}

/* --------------- Allgemein --------------- */

body {
  font-family: sans-serif;
  padding:     8em 0 3em;
}

body,
.wrapper {
  margin:    10px auto;
  max-width: 60em;
}

nav,
nav a,
aside {
  border-radius: 0.5em;
  border-width:  1px;
  border-style:  solid;
  padding:       10px;
  margin:        10px;
}

main {
  border-radius: 0.5em;
  border-width:  1px;
  border-style:  solid;
  padding:       10px;
  margin-right:  10px;
  margin-top:    10px;
  margin-bottom: 10px;
}

/* Bilder */
img {
  max-width: 100%;
}

/* Tabellen */

table textarea {
  width: 100%;
}

table.download {
  font-size:      9pt;
  border-spacing: 2px;
}

table.download th, th.download {
  padding: 2px 10px;
}

table.download td, td.download {
  padding:  2px 10px;
  overflow: hidden;
}

table.chronik {
  font-size: 10pt;
}

table.chronik td {
  vertical-align:   top;
  padding:          10px;
  border-top-width: 1px;
  border-top-style: solid;
}

table.chronik td:nth-child(1) {
  text-align:    right;
  padding-right: 30px;
}


/* --------------- Header --------------- */

header {
  text-align:          center;
  padding:             10px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

header img {
  width:        13em;
  margin-right: 50px;
  float:        left;
}

/* --------------- Navigation --------------- */

nav {
  font-size: 0.91em;
  padding:   0;
}

nav ul {
  padding: 0;
}

nav li {
  list-style: none;
  margin:     0;
  padding:    0.1em;
}

nav a {
  display:         block;
  padding:         0.2em 10px;
  font-weight:     bold;
  text-decoration: none;
}

/* Login-Box */
.login {
  margin:    10px;
  padding:   0 5px;
  font-size: 0.8em; 
  border:    1px solid;
}

.login a {
  border:          none;
  border-radius:   0;
  padding:         0;
  margin:          0;
  display:         inline;
  padding:         0em 0px;
  font-weight:     normal;
  text-decoration: underline;
}

/* --------------- Content --------------- */

main {
  display: block;
}

/* Box für Icons */

aside {
  padding-bottom: 6px;
}

/* --------------- Footer --------------- */

footer {
  padding:  10px;
}

footer p {
  float:  right;
  margin: 0;
}

/* --------------- Non-Smartphones --------------- */

.nav-open {
  display: none;
}

nav ul li.close {
  display: none;
}

/* --------------- Smartphones --------------- */

@media only screen and (max-width:600px) {
/* @media only screen and (max-device-width: 480px) and (max-width: 480px) { */

  /* Debugging-Farben */
  
  /*
  body {
    background-color: green;
  }

  header {
    background-color: blue;
  }
  
  nav {
    background-color: yellow;
  }
  
  main {
    background-color: gray;
  }
  
  aside {
    background-color: magenta;
  }
  
  footer {
    background-color: blue;
  }
  */

  /* https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout */
    
  body {
    display:           -webkit-flex;
    display:           flex;
    -webkit-flex-flow: row wrap;
    flex-flow:         row wrap;
    max-width:         30em;
  }
  
  header,
  main,
  aside,
  footer {
    padding:      10px;
    margin:       0px;
    -webkit-flex: 1 100%;
    flex:         1 100%;
  }
  
  header {
    top:               37px;
    padding:           1px;
    margin:            0px;
    display:           -webkit-flex;
    -webkit-flex-flow: row wrap;
    display:           flex;
    flex-flow:         row wrap;
  }
  
  header * {
    -webkit-flex: 1 1 0;
    flex:         1 1 0;
  }
  
  header h1 {
    font-size:     1em;
    /* border: 1px solid red; */
    margin-top:    0px;
    margin-bottom: 0px;
  }

  header img {
    -webkit-flex: 0 0 150px;
    flex:         0 0 150px;
    margin-right: 20px;
  }
  
  header img {
    max-width:     20%;
    /* border: 1px solid red; */
    margin-bottom: 0px;
  }
  
  main {
    margin-top: -30px;
  }

  main img {
    max-width: 100%;
  }
  
  aside {
    max-width:      20%;
    padding:        4px;
    padding-bottom: 0px;
    margin:         1px;
  }

  aside img {
    max-width: 100%;
  }
  
  footer {
    position:          static;
    margin:            0px auto;
    margin-bottom:     -30px;
    max-width:         60em;
    display:           -webkit-flex;
    -webkit-flex-flow: row wrap;
    display:           flex;
    flex-flow:         row wrap;
    font-size:         0.8em;
  }
  
  footer * {
    -webkit-flex:            1 1 0;
    -webkit-justify-content: space-between;
    flex:                    1 1 0;
    justify-content:         space-between;
  }
  
  footer p {
    font-size: 0.8em;
  }

  /* Smartphone-Navigation */
  /* Basierend auf http://www.olivergast.de/blog/2012/09/29/css3-ein-responsives-flyout-menu/ */
  
  nav {
    position: fixed;
    top: 0;
    left: 0;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #303030;
    font-family: Arial, sans-serif;
  }
   
  nav ul {
    list-style: none;
  }
  
  nav ul li {
    float: none;
    text-align: center;
    border-bottom: 1px solid #555;
  }
  
  nav ul li:last-child {
    border-bottom: none;
  }
  
  nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #303030;
    border: 0px;
    padding: 1px;
    margin: 1px;
 }
 
  nav ul li.close {
    display: block;
  }
  
  .nav-open {
    position: fixed;
    top: 0;
    left: 0;
    background: #333;
    font-family: Arial, sans-serif;
    display: block;
    width: 100%;
  }
   
  .nav-open a {
    padding: 10px 15px;
    display: block;
    color: #fff;
    text-align: left;
    text-decoration: none;
  }

  /* Hamburger-Menü */
  .nav-open img {
    margin-right: 10px;
  }
  
  /* Ausgeblendetes Menü */
  nav {
    top: -200%;
  }
  /* Eingeblendetes Menü */
  #nav:target {
    top: 0;
  }
  
}