/* ------------ reset -------------*/
* {             /* ------------ generell gültige Anweisungen -------------*/
   margin: 0;
   padding: 0;
   /*text-decoration: none;*/
   font-family: Helvetica, Arial, sans-serif;
 }

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

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

.li20 {  margin: 0px 18px;  /* Auflistung Biografie, DJ */
         padding: 0 0 4px 0px;
         list-style-type: disc;
 }

/* ---------- fixed box-------------- */

/* ------------ main -------------*/
body {
        background-color: #ccc; /* Hintergrund ausserhalb des dargestellten Feldes */
        font-size: 1.1em;                /* Text - Hauptdefinition */
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        margin: 0 auto;
        /* color : #0000BF  /*   #564b47; */
        /* border: 0px solid #0f0 ;    */
        /*background-image: url(../images-bg/bg_saxforyou.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:26px 20px 20px 20px;
        margin:0 0 0 0;
        background-image: url(../maleika-logo.jpg);
        background-repeat: no-repeat;
        background-size: 50px;
        background-position: 26px center;
        /* border:10px solid #00f; */
        border-radius: 20px 20px 0px 0px ;
        background-color: #190fb9;  /* Hintergrundfarbe Header Bereich */
}

header h1 {            /* Schrift H1 kommt nur im Header vor in diesem Projekt */
        margin: 0px;
        padding: 0 0 0 0;
        /* font-family: Lucida Sans Unicode, Helvetica, Arial, sans-serif; /* Schrift im H1 im Header */
        font-size: 2.2em;
        /* font-weight: bold;         */
        line-height: 1.3em;
        color: #fff;
 }

p {     color:#111 /* #030; */
 }
.text1{   padding: 0px 0 0 0;
 }
.text11{  color:#00a;
          font-size: 1.1em;
          /*font-weight: bold; */
          padding: 0px 0 2px 0;
 }
.text12{  font-size: 1.0em;
          padding: 0px 0 8px 0;
 }
.unten {  position: absolute;  /* für Hinweis auf Kontakt-Seite  */
          font-size: 0.8em;
          bottom: 20px;   }

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

h3 {    font-size: 1.2em;    /* Schriftgr�sse, Art und Farbe f�r H3 */
        /* font-family:  Lucida Sans Unicode, Helvetica, Arial, sans-serif; */
        color: #e4e238;  /*  #50507f; */
        padding: 6px 0;

 }

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

.one{   padding: 0 0 0 240px;  }
.two{   padding: 0 0 0 80px;  }
/*.unten {   text-align: right;
           color: #830;
           padding: 120px 0 0 0;
      }*/

a     { color: #00009f;}       //ff6677

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



footer {
        background-color: #190fb9;  /* Hintergrundfarbe Footer Bereich */
        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;
 }

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

.thumbnail:hover {
        border: 2px 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 --------ff9f00-----*/

#container {
        background-color: #bdf;  /* #ff9f00;     Hintergrundfarbe Aussenbereich */
        max-width:1280px;
        /* 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: rgba(200, 255, 255, 0.3);    Hintergrund Inhalt */
     background-color: #cfecff;   /* Hintergrund Inhalt  */
     margin: 0 0 0 220px;      /* ergänzt links 280px */
     padding: 1em .6em 0 1.2em;
     max-width: 1000px;     /*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: #2d3fcc; /* Hintergrundfarbe Menu-Bereich */
     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;
                     }

 }

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

nav ul li { list-style: none;
        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;
        /*text-transform: uppercase; */
        /*letter-spacing: 1px;*/
        /*color: #fff;  /*  fff    */
        /*padding: 5px 16px 5px 15px;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #fff;  /* cec  */
        /*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;

 }
*/