/* ------------ reset -------------*/
* {
   margin: 0;
   padding: 0;
 }

header, footer, section, nav, div { display: block;} /* aside, article  */

ol, ul, a {
        list-style: none;
        text-decoration: none;
 }
/*.disc {
        list-style: disc;
}*/
/*
p ul li {
        list-style-type: disc;     // funktioniert nicht
 }                       */

/* ---------- fixed box-------------- */
/* ------------ main -------------*/
body {
        background-color: #777; /* Hintergrund ausserhalb des dargestellten Feldes */
        font-size: 1.1em;                /* Text - Hauptdefinition */
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        /* color : #0000BF  /*   #564b47; */
        /* border: 0px solid #0f0 ;    */
        /*background-image: url(../images-bg/bg.png);*/
 }

 /*
 Add transition to containers so they can push in and out.
 */
 /*#layout,*/
 #menu,
 .menu-link {
     -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
     -ms-transition: all 0.2s ease-out;
     -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
 }



header {
        /* line-height: 1.5em; */
        padding:26px 20px 20px 20px;
        margin:0 0 0 0;
        /* background-image: url(../images-bg/1koala-header2.jpg); */
        /* border:0px solid #00f; */
        border-radius: 20px 20px 0px 0px ;
        background-color: #1bf;
 }

p {     color:#002 /* #030; */
 }
/*.text1{   padding: 0px 0 0 0;  }*/

 h1 {   font-size: 1.8em;     /* individuelle Schriftgr�sse f�r H1, nicht von Definition in 'body' abgeleitet */
        font-family: Helvetica, Arial, Geneva, Verdana, sans-serif;   /* Impact,  */
        color: #20205f;
        padding: 10px 0 0 0;
 }

h2 {    font-size: 1.4em;  /* Schriftgr�sse, Art und Farbe f�r H2, sowie Padding oben/unten */
        font-family:  Helvetica, Arial, Geneva, Verdana, sans-serif;
        color: #00003f;
        padding: 10px 0 10px 0;
 }

h3 {    font-size: 0.9em;    /* Schriftgr�sse, Art und Farbe f�r H3 */
        font-family:  Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
        color: #50507f;
 }

h4 {
        font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
        color: #00003f;
        padding: 10px 0;
 }

/*.one{   padding:0 0 0 240px;  }
.two{   padding:0 0 0 80px;  }*/


a     { color: #00009f;}

a:visited{ color:#00b;}
a:hover  { color: #08f;}
a:active { color:#000;}
.aktiv   { color: #000;
           background-color: #fff;
           padding-left: 24px;
           padding-right: 012px;}


header h1 {            /* Schrift H1 kommt nur im Header vor in diesem Projekt */
        margin: 0px;
        padding: 0 0 0 0;
        font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; /* Schrift im H1 im Header */
        /* font-style: // italic;  // Schrift kursiv  */
         font-size: 2.2em;
        /* font-weight: bold;         */
        /* text-decoration: none;  */
        line-height: 1.3em;
        color: #00003f;
        text-align: center;
 }

footer {
        background-color: #1bf;  // ff1;
        padding: 20px 20px;
        border-color: #ff1 ;
        border-width: 0px;
        border-style: solid;
        border-radius: 0px 0px 20px 20px;
 }


/* ------------ Gallerie - float links -------------*/

/*.gallerie {
        border:  0px solid #0ff;
        margin:  12px 0 0 0;
        padding: 0px 0;
 }

.thumbnail{
        float: left;
        border: 4px solid #fff;
        margin: 0 10px 12px 0px;
        padding: 0px;
        height: 120px;
 }

.thumbnail:hover {
        border: 4px solid #ddd;
 }

.thumbnail img, .thumbnail a {
        display: block;
        height: 120px;
        margin: 0px;
        padding: 0px;
        border:  0px solid #fff;
 }

.clr {  clear: left;
        overflow:hidden;
        height: 1px;
 }*/


/* ------------ positioning-layers statisch und absolut -------------*/

#container {
        background-color: #1ff;
        max-width:1080px;
        /*min-width:1080px; */ /* 960 pixel I-phone quer */
        position:relative;
        margin:0 auto;    /* bei grösserem Screen wird automatisch centriert */
        border-radius: 20px 20px 20px 20px;     /* 0 0 20 20 */
        padding: 0px 40px;
        border: 0px solid #f00 ;
 }

 #container.active #menu {
     left: 260px;  /*   ausgeschaltet */
     width: 260px;
 }

 #container.active .menu-link {
     left: 260px;    /* Hamburger soll links bleiben  */
 }

 /*
 This is the parent `<div>` that contains the menu and the content area.
 */
 #layout {
     position: relative;
     margin:0 auto;    /* bei grösserem Screen wird automatisch centriert */
 } 

nav  {
        /*background-color: #7df;*/
        /*position: absolute;*/
        /*left: 0px;*/
        /*width: 180px;*/
        /*margin: 0 0 0 40px;*/
        /*padding: 20px;
        min-height:100px;
        border-radius: 0 0 28px 0;*/
 }


 #menu {
     /*margin: 0 0 0 40px; /*margin-left: -150px; *//* "#menu" width */
     width: 180px; /*width: 260px;*/
     padding: 20px;
     min-height: 200px;
     border-radius: 0 0 28px 0;
     /*position: fixed;*/
     position: absolute;   /* ergänzt 16.11.16  ****/
     /*left: 0px;            /* ergänzt 16.11.16  ****/
     /*top: 0;*/
     /*left: 0;*/
     /*bottom: 0;*/
     /*z-index: 1000;  */ /* so the menu or its navicon stays above all content */
     background: #7df;
     -webkit-overflow-scrolling: touch;
 }
     /*
     All anchors inside the menu should be styled like this.
     */
     #menu a {   display: block;
         color: #999;
         /*border: none;*/
         text-decoration: none;
         letter-spacing: 1px;
         color: #555;
         padding: 5px 16px 5px 15px;
         border-width: 0 1px 1px 0;
         border-style: solid;
         border-color: #fff;
         border-radius: 0 12px 28px 0;
         margin-left: -10px;
         /*padding: 0.6em 0 0.6em 0.6em;*/
         -webkit-transition: all .2s ease 0s;
         -moz-transition: all .2s ease 0s;
         -ms-transition: all .2s ease 0s;
         -o-transition: all .2s ease 0s;
         transition: all .2s ease 0s;
     }

     #menu a:hover {    /*, nav ul li li.active a  */
             color: #000;
             background-color: #fff;
             padding-left: 24px;
             padding-right: 12px;
      }


nav ul li {
        /*width: 100%;*/
 }

nav ul p {
        /*padding: 5px 0px 5px 5px;*/
 }

nav ul li a {
        /*display: block;
        width: 100%;
        font-size: 0.8em;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        color: #555;
        padding: 5px 16px 5px 15px;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #fff;
        border-radius: 0 12px 28px 0;
        margin-left: -10px;*/
                                /* Kommentar für Chrisian: CSS Übergang: 1. Für alle Animationsobjekte (hier Farbe und Padding) 2. Animationsdauer 3. Animationsart, 4. Verzögerung
                                Wann der Übergang ausgelöst wird (:hover also mit der Maus über dem objekt) und welche Eigenschaften mit den hier genannten Effekt animiert geändert werden
                                ist in der Regel darunter (#menu li a:hover) definiert.
                                Wenn Du die Transition hier wegnimmst, wird die untereregel beimMouseover auch eine textverschiebung und anpassung der Hintergrundfarbe machen, allerdings unanimiert.*/
                                /*-webkit-transition: all .2s ease 0s;
                                -moz-transition: all .2s ease 0s;
                                -ms-transition: all .2s ease 0s;
                                -o-transition: all .2s ease 0s;
                                transition: all .2s ease 0s;*/

 }

nav ul li a:hover {    /*, nav ul li li.active a  */
        /*color: #000;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 12px;*/
 }


section#content {
        /*margin: 0px 0px 0px 220px;  für pure*/
        background-color: #cff;
        padding: 10px 28px 10px 40px;
        min-height:780px;
        min-with: 780px;
        border: 0px solid #0f0 ;
 }

 /* -- Dynamic Button For Responsive Menu -------------------------------------*/

 /*
 The button to open/close the Menu is custom-made and not part of Pure. Here's
 how it works:
 */

 /*
 `.menu-link` represents the responsive menu toggle that shows/hides on
 small screens.
 */
 .menu-link {   /*  für den Hamburger  */
     position: fixed;
     display: block; /* show this only on small screens */
     top: 0;
     left: 0; /* "#menu width" */
     background: #000;
     background: rgba(0,0,0,0.7);  /* 0.7 halbtransparenter Hintergrund */
     font-size: 10px; /* change this value to increase/decrease button size */
     /*z-index: 10;*/
     width: 2em;
     height: auto;
     padding: 2.1em 1.6em;
 }

     .menu-link:hover,
     .menu-link:focus {
         background: #000;  /* Hintergrund ganz schwarz bei hover */
     }

     .menu-link span {
         position: relative;
         display: block;
     }

     .menu-link span,    /* Farbe des Hamburgers */
     .menu-link span:before,
     .menu-link span:after {
         background-color: #fff;
         width: 100%;
         height: 0.2em;
     }

         .menu-link span:before,
         .menu-link span:after {
             position: absolute;
             margin-top: -0.6em;
             content: " ";
         }

         .menu-link span:after {
             margin-top: 0.6em;
         }


 /* -- Responsive Styles (Media Queries) ------------------------------------- */

 /*
 Hides the menu at `48em`, but modify this based on your app's needs.
 */
 @media (min-width: 48em) {

     /*.header,
     .content {
         padding-left: 2em;
         padding-right: 2em;
     }*/

     /*#container {
       /*  padding-left: 150px; /* left col width "#menu" */ /*
         left: 0;
     }*/
     /*#menu {
        /*   left: 0em;  auf 0 gesetzt 16.11.16  *  statt  150px ***/ /*
     }*/

     .menu-link {
         position: fixed;
         left: 260px;
         display: none;
     }

     #container.active .menu-link {
         left: 260px;
     }

     #content {
             margin: 0px 0px 0px 220px; }


 }

 @media (max-width: 48em) {
     /* Only apply this when the window is small. Otherwise, the following
     case results in extra padding on the left:
         * Make the window small.
         * Tap the menu to trigger the active state.
         * Make the window large again.
     */
     /*#container.active {
         position: relative;
         left: 260px;
     }*/
     /*nav, */
     #menu {
       margin-left: -260px;
       /*display: none;*/
     }

 /*.content {
         margin: 0 0 50px 0;   /* ergänzt in diesem @media */ /*
     }*/
     #content {
             margin: 0px;  }
     #container {
             padding: 0px  }

 }