@charset "utf-8";

/* Clearfix */
.clearfix:before,
.clearfix:after {
                content: " ";
                display: table;
                }
.clearfix:after {
                clear: both;
                }
.clearfix {
          *zoom: 1;
          }

/* Basic Styles */
body {
     background-color: #f1f8e9;
     margin: 10px auto;
     max-width: 80em;
     font-family: sans-serif;
     color: #446B11;
     display:-webkit-flex;
     -webkit-flex-flow: row wrap;
     display: flex;
     flex-flow: row wrap;
     }

header, article, section, aside, footer {
                                        border-radius: 0px 0.5em 0.5em;
                                        border: 1px solid;
                                        padding: 10px;
                                        margin: 10px;
                                        -webkit-flex: 1 100%;
                                        flex: 1 100%;
                                       }
header {
       background: #c5e1a5;
       border-color: #008000;
       }

section {
         background: #c5e1a5;
         border-color: #008000;
         }

article {
         background: #c5e1a5;
         border-color: #008000;
         }

aside {
      background: #c5e1a5;
      border-color: #008000;
      }

footer {
       background: #c5e1a5;
       border-color: #008000;
       display:-webkit-flex;
       -webkit-flex-flow: row wrap;
       display: flex;
       flex-flow: row wrap;
       }

footer * {
         -webkit-flex: 1 1 0;
         -webkit-justify-content: space-between;
         flex: 1 1 0;
         justify-content: space-between;
         }

nav {
    height: 40px;
    width: 100%;
    background: #9ccc65;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #6E9837;
    border-left-color: #6E9837; border-top-color: #6E9837;
    }
nav ul {
       padding: 0;
       margin: 0 auto;
       width: 600px;
       height: 40px;
       }
nav li {
       display: inline;
       float: left;
       }
nav a {
      color: #4e342e;
      display: inline-block;
      width: 100px;
      text-align: center;
      text-decoration: none;
      line-height: 40px;
      text-shadow: 1px 1px 0px #ffffff;
      }
.hell {
      background: #7cb342;
      color: #FFFFFF;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      line-height: 40px;
      text-shadow: 1px 1px 0px #ffffff;
      }
nav li a {
         border-right: 1px solid #6E9837;
         box-sizing:border-box;
         -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
         }
nav li:last-child a {
                    border-right: 0;
                    }
nav a:hover {
            border-color: #78cc7a;
            border-left-color: #3f6b40; border-top-color: #3f6b40;
            color: #f1f8e9; background-color: #CDE9A8;
            }

nav a:active {
             border-color: #6E9837;
             border-left-color: #6E9837; border-top-color: #6E9837;
             color: #FFFFFF; background-color: #6E9837;
             }
nav a#pull {
           display: none;
           }

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
  nav {
      height: auto;
      }
  nav ul {
         width: 100%;
         display: block;
         height: auto;
         }
  nav li {
         width: 50%;
         float: left;
         position: relative;
         }
  nav li a {
           border-bottom: 1px solid #6E9837;
           border-right: 1px solid #6E9837;
           }
  nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
        }
  }

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
  nav {
      border-bottom: 0;
      }
  nav ul {
         display: none;
         height: auto;
         }
  nav a#pull {
             display: block;
             background-color: #6E9837;
             color: #CDE9A8;
             width: 100%;
             position: relative;
             }
  nav a#pull:after {
                   content:"";
                   background: url('nav-icon.png') no-repeat;
                   width: 30px;
                   height: 30px;
                   display: inline-block;
                   position: absolute;
                   right: 15px;
                   top: 10px;
                   }
  }

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 600px) {

  header img {
             margin-right: 10px;
             }
  nav ul {
         -webkit-flex-direction: row;
         flex-direction: row;
         }
  article {
          webkit-order: 2;
          order: 2;
          }
  #news {
        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
        }
  aside { /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webikit-order: 4;
        flex: 1 auto;
        order: 4;
        }
  footer {
         webkit-order: 5;
         order: 5;
         }
  }

/*Smartphone*/
@media only screen and (max-width : 320px) {
  nav li {
         display: block;
         float: none;
         width: 100%;
         }
  nav li a {
           border-bottom: 1px solid #78cc7a;
           }
  }

/* Large screens */
@media all and (min-width: 800px) {

  article { /* Der Article wird 2.5x so breit wie die beiden asides! */
          -webkit-flex: 2 1 0;
          -webkit-order: 2;
          order: 2;
          flex: 2 1 0;
          }
  aside {
        flex: 1 1 0;
        }
  #news {
        -webkit-flex: 1 1 0;
        -webkit-order: 3;
        -webkit-align-self: center;
        flex: 1 1 0;
        order: 3;
        }
  footer {
         webkit-order: 5;
         order: 5;
         }
  }