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

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

 ol, ul, a {
         list-style: none;
         text-decoration: none;
  }

 body {
    background-color: #888; /* Hintergrund ausserhalb des dargestellten Feldes */
    /*color: #cc3;*/
    font-size: 1.1em;                /* Text - Hauptdefinition */
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 auto;

}

.pure-img-responsive {  /* ist die Klasse definiert, passt sich die Bildgrösse an */
    max-width: 100%;
    height: auto;
}

/*
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:0px;    /* border:0px solid #00f; */
        border-radius: 20px 20px 0px 0px ;
        background-color: #1bf;    /* background-image: url(../images-bg/1koala-header2.jpg); */
 }

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-size: 2.2em;
         line-height: 1.3em;
         color: #00003f;           /* font-weight: bold;         */
         text-align: center;       /* text-decoration: none;  */

  }

p {     color:#002 /* #030; */
   }

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;
}

.one{   padding:0 0 0 240px;  }

a     { color: #00009f;}

a:visited{ color:#03c;}
a:hover  { color: #08f;}
a:active { color:#000000;}
/*.aktiv   { color: #000;
           background-color: #fff;
           padding-left: 24px;
           padding-right: 012px;}*/

footer {
          background-color: #1bf;
          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;
   }


#container {
        background-color: #1ff;
        max-width:1080px;   /*min-width:960px;  /* 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: 0 2em;
        border: 0px solid #f00 ;
 }


/* 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 */
}
        /*#layout.active #menu {*/
            /*left: 260px;*/   /*   ausgeschaltet */
            /*width: 260px;*/    /*}*/
        /*#layout.active .menu-link {*/
            /*left: 260px;*/    /* Hamburger soll links bleiben  */   /*}*/

/* The content `<div>` is where all your content goes. */
.content {
    background-color: #cff;   /* Hintergrund Inhalt */
    margin: 0 0 0 220px;      /* ergänzt links 280px */
    padding: 1em 2em;
    max-width: 800px;     /*margin-bottom: 50px;*/ /*line-height: 1.6em;*/
    min-height: 760px;
}
          /*.content-subhead {    margin: 0 0 20px 0;
                                  font-weight: 300;
                                  color: #004;   }*/

/* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu`
   that appears on the left side of the page. */
#menu {      /*margin-left: -150px; *//* "#menu" width */
    margin-right: 20px;
    background-color: #7df;
    width: 200px;
    padding: 30px 0px 40px 20px;
    height: 320px;
    border-radius: 0 0 28px 0;
    position: absolute;   /* ergänzt 16.11.16  ****/
    left: 0px;            /* ergänzt 16.11.16  ****/
    /*-webkit-overflow-scrolling: touch;*/
}
    /*     All anchors inside the menu should be styled like this.  */
    #menu ul li a {    display: block;
        color: #222;
        font-size: 0.8em;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        padding: 5px 16px 5px 15px;
        border-width: 0 1px 1px 0;      /* Linie rechts und unten */
        border-style: solid;
        border-color: #fff;
        border-radius: 0 12px 28px 0;    /* Linien-Radius rechte Seite */
        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 e
    }
    #menu ul li .aktiv, #menu a:hover, #menu li.active a  {
            color: #000;
            background-color: #fff;
            padding: 5px 10px 5px 24px;
            margin-right: -4px;   /*  rechts verschieben, wenn aktiv oder hover */
       }
    /*  Remove all background/borders, since we are applying them to #menu. */
       /*#menu .pure-menu,
         #menu .pure-menu ul {
           border: none;
           background: transparent;   }*/
    /*  Add that light border to separate items into groups.   */
      /*#menu .pure-menu ul,
        #menu .pure-menu .menu-item-divided {*/
          /*border-top: 1px solid #333;   }  */
     /*   Change color of the anchor links on hover/focus.    */
          /*#menu .pure-menu li a:hover,
            #menu .pure-menu li a:focus {
              background: #fbfbfb;
                -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;         }*/
    /*  This styles the selected menu item `<li>`.   */
        /*#menu .pure-menu-selected,
          #menu .pure-menu-heading {
              background: #1f8dd6;       }*/
    /*  This styles a link within a selected menu item `<li>`.    */
        /*#menu .pure-menu-selected a {
            color: #fff;          }*/
    /*  This styles the menu heading.    */
        /*#menu .pure-menu-heading {
            font-size: 110%;
            color: #fff;
            margin: 0;    }*/

/* -- 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 {
    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);
    font-size: 10px; /* change this value to increase/decrease button size */
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;  /*z-index: 10;*/
}
    .menu-link:hover,
    .menu-link:focus {     background: #000;
    }
    .menu-link span {      position: relative;
                           display: block;
    }
    .menu-link span,
    .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;
    }

    #layout {
      /*  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;
    }

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

@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 {  padding: 0px; }

    #layout.active {
        position: relative;
        left: 260px;
    }
    #menu {
      margin-left: -260px;
      /*display: none;*/  /* muss sichtbar sein, wenn aktiviert */
    }

  .content {
          margin: 0 0 20px 0;   /* ergänzt in diesem @media */
          /*padding-left: 0px;*/
      }
  footer h3.one {   padding:0 0 0 0px;  }

  header    {   padding: 16px 20px 10px 20px;  }

  header h1 {   padding:0 20px 0 40px;
                font-size: 1.6em;              }

}