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

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

ol, ul {
        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);*/
 }

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

/*
.bgone{
        border:3px solid #f67;
        background-image:url(images-bg/koala-bg.jpg);
   }
  */


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


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

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

/*footer h3 {
        /*margin: 0px;
        padding: 0 0 0 0;
        font-family: Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
        font-style: // italic;  // Schrift kursiv
        //font-size: 1.5em;
        font-weight: bold;
        //text-decoration: none;
        //line-height: 1.3em;
        //color: #f0003f;
 }                                    */

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

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

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

.thumbnail24 {
        float: left;
        border: 4px solid #fff;
        margin: 0 10px 12px 180px;
        padding: 0px;
 }

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

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

.thumbnail4 img{
        height: 160px;
        margin: 0px;
        padding: 0px;
        border:  0px solid #fff;
 }


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


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

#container {
        background-color: #9ff; // e8f0f0; // F6E3CE;
        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 ;
 }

nav  {
        background-color: #7df; // 4E9E29;
        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 {
        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: #555;  /*  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;

 }

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

aside  {
        background-color: #edc;
        position: absolute;
        right: 0px;
        width: 0px;
        padding: 0px;
 }

section#content {
        margin: 0px 0px 0px 220px;
        background-color: #cff; // F6E3CE ;
        padding: 10px 28px 10px 40px;
        min-height:780px;   // 740
        min-with: 780px;
        border: 0px solid #0f0 ;
 }