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

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

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

/* ------------ main -------------*/
body {
        background-color: #444;
        font-size: 0.95em;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        color:#564b47;
        border: 0px solid #0f0 ;
        /*background-image: url(../images-bg/bg.png);*/
 }

.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: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: #c8d8e2;
 }

p {     color: #030;
 }
.text1{   padding:10px 0 0 0;  }

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

h2 {
        font-family: Helvetica, Arial, Geneva, Helvetica, Verdana, sans-serif;
        color: #00C;
        padding: 10px 0;
 }

h4 {
        font-family: Helvetica, Arial, Geneva, Helvetica, Verdana, sans-serif;
        color: #d00;
        padding: 0px 0;
 }

.one{   padding:0 0 0 140px;  }
.two{   padding:0 0 0 80px;  }


a     { color: #00009f;}       //ff6677
a:visited{ color:#fff;}
a:hover  { color: #08f;}          //564b47
a:active { color:#000000;}


header h1 {
        margin: 0px;
        padding: 0 0 0 0;
        font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
        font-style: italic;  // Schrift kursiv
        font-size: 2.5em;
        font-weight: bold;
        text-decoration: none;
        line-height: 1.3em;
        color: #00003f;
 }

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

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

.gallerie {
        border: 0px solid #0ff;
        margin: 10px 0;
        padding:10px 0;
 }

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

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

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

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


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

#container {
        background-color: #d8e8e8;
        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 ;
 }

  /* 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: #FFc006;   /* Hintergrund Inhalt */
      margin: 0 0 0 220px;      /* ergänzt links 280px */
      padding: 1em .6em 0 1.2em;
      max-width: 800px;     /*margin-bottom: 50px;*/ /*line-height: 1.6em;*/
      min-height: 760px;
  }

  /* 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: #cc7722;
      width: 200px;
      padding: 30px 0px 40px 20px;
      min-height:300px;
      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: #fff;
      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 */
     }

  /* -- 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;
      }
      tr.offen {
               display: none;
                          }
  }

  @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: 220px;
      }
      #menu {
        margin-left: -220px;
        /*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 { background-image: none;  }

  header h1.one {   padding:0 24px 0 60px;
                    font-size: 1.2em;
                                  }
  h2 {    font-size: 1.2em;  }

  .unten { bottom: 0px;  }

  /*tr.versteckt, th.versteckt, td.versteckt, td.text72, form.versteckt {
           display: none;
                      }*/

  }