/* Stylesheet für die Beispielsite von Andreas Kiehn
Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles       */
        
/**********************************************************************
         1. Kalibierung und Restauration
***********************************************************************/


* { padding: 0; margin: 0;}                    /* Randabstände auf Null setzen */
html { overflow-y: scroll;}                    /* Bildlaufleiste immer eingeblendet vertikal*/
/*html { overflow-x: scroll;}   */                 /* Bildlaufleiste immer eingeblendet horizontal*/


/**********************************************************************
         2. Allgemeine Styles
***********************************************************************/


/* Gestalte das HTML-Element mit dem Namen body */
body {
     /*background-color:rgb(40,40,53); */  /*Hintergrundfarbe*/
     background-image: url(index_sommer.jpg);
     background-attachment: fixed;
     background-position: top left;
     color:black;                /* Schriftfarbe */
     font-family:   Arial,"Book Antiqua", Georgia,  Helvetica, sans-serif, Veranda, fixedsys;
     font-size: 100%;
     }

h1 { font-size: 150%; }           /* Überschriften*/
h2 { font-size: 130%; }
h3 { font-size: 110%; }


address {
  text-align: center;            /* Addresse in Fußzeile */
  font-size: 80%;
  font-style: oblique;
  letter-spacing: 1px;         /* Abstand zwischen den Buchstaben */
  line-height: 1.5;            /* Zeilenabstand */
}

a { text-decoration: none;       /* Gestaltung der links: Unterstreichung entfernen */
    font-weight:  bold;
 }


 /* die Reihenfolge der Formate für die Links müssen in dieser Reihenfolge eingehalten werden */
/* a:link                           formatierung unbenutzer Link */
/* a:visited                        formatierung benutzer Link */
a:hover,
a:focus {
  /*text-decoration: underline;*/
  text-decoration: none;              /* entfernt bei einigen Browsern unschöne gepunktete Linien um Link */
  outline: none;                      /* entfernt bei einigen Browsern unschöne gepunktete Linien um Link */
  /*border-bottom: 1px solid #d90000;*/   /* Linie um Link wenn Maus darüber oder per tab angewählt */
  /*border-left: 1px solid #d90000;
  border-right: 1px solid #d90000;
  border-top: 1px solid #d90000;  */
}
a:active {
  color: white;
  background-color: #cc0000;
}


div#textbereich a {                             /* Definition der Linie unter dem Link nur im Textbereich */
  border-bottom: 1px dashed #cc0000;

}

div#textbereich a:hover,
div#textbereich a:focus {
  border-bottom: 1px solid blue;
}


p.infobox {
  color : black;
  background-color: #8c8c00;
  border: 3px solid #ecf7dd;
}


/* Abstand nach unten */
h2, p, ul, ol { margin-bottom:1em;}

/* verschachtelte Listen ohne Abstand */
ul ul { margin: 0em;}

/* Abstand von links */
li { margin-left: 1em;}


img#logo {
  background-color: white;
  color: black;
  padding: 0px;
  border: 1px solid green;
}

img#logo2 {
  background-color: white;
  color: black;
  padding: 0px;
  border: 1px solid red;
}

/**********************************************************************
         3. Syles für die Layoutbereiche
***********************************************************************/

/* Gestalte das div mit dem Namen id=wrapper */
div#wrapper {
     /*background-color: rgb(30,30,30) ;    */
     /*background-color: rgb(175,175,180) ;   */
     background: rgba(175,175,180,0.85);             /* Transparenter wrapper */
    /* background-image: url(IMG_5810red5.jpg); */
     width: 1200px;     /* 1638 feste Breite */
     /*height: 2000px;*/    /* 1456 feste Höhe */
     color:black;
     padding-top: 70px;
     padding-right: 70px;
     padding-bottom: 70px;
     padding-left: 70px;
     margin-top: 60px;
     margin-right: auto;   /*Abstand automatisch -> zentrierung */
     margin-bottom: 60px;
     margin-left: auto;    /*Abstand automatisch -> zentrierung */
     opacity: 1.0;
}

div#kopfbereich {
                /*background-color:#f3c600;     */
                /*background-image: url(MuehleamHorizont.jpg);  */
                /*width: 1638px;    */
                /*height: 70px;   */
                position: relative;
                color: white;
                /*background: rgba(175,175,180,1);  */           /* Transparenter wrapper */
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 60px;
                padding-left: 0px;
                margin-top: 0;   /*Abstand automatisch -> zentrierung */
                margin-right: auto;   /*Abstand automatisch -> zentrierung */
                margin-left: auto;    /*Abstand automatisch -> zentrierung */
                opacity: 1;
                }

    #kopfbereich h1 { 
                 /*color: rgb(200 ,200 ,200);   */
                 color: rgb(0 ,0 ,0);
                 font-size: 200%;
                 font-family:    Veranda;
                 margin-bottom:0em;
                 padding-top: 0px;
                 padding-right: 0px;
                 padding-bottom: 0px;
                 padding-left: 0px;

                 }

      p#slogan {
                 /*color: rgb(200 ,200 ,200);   */
                 color: rgb(0 ,0 ,0);
                 /*color: rgb(145 ,220 ,255);       */
                 font-size: 130%;
                 margin-bottom:0em;
                 padding-top: 3px;
                 padding-right: 0px;
                 padding-bottom: 00px;
                 padding-left: 0px;
    }

div#topnavi {
                /*background-image: url(IMG_9855_red_375.JPG);  */
                /*width: 1638px; */    /* 1447 feste Breite */
                /*height: 1092px;  */  /* 1456 feste Höhe */
                /*background-color: #ffeda0;  */
                position: relative;              /* relative = Postitionierungen innerhalb von navibereich beziehen sich auf diesen Bereich */
                /*background-image: url(IMG_4362.JPG);  */
                padding-top: 30px;
                padding-right: 20px;
                padding-bottom: 0px;
                padding-left: 0px;
              /*  color: red;       */
            /*    margin-right: auto; */ /*Abstand automatisch -> zentrierung */
            /*    margin-left: auto;  */  /*Abstand automatisch -> zentrierung */
}

  #topnavi li {
                  display: inline;                       /* horizontale Anordnung der Listenelemente im Navibereich */
                  list-style-type: none;
                  margin:  0;
                  }
 
  #topnavi li.highlight a{
                background-color: rgb(165 ,165 ,165);
  }



  #topnavi ul {
                margin-bottom: 10px;
                text-align: right ;
                /*position: absolute; */
                /*top: 1120px;     */
                /*right: 0px; */
                }
  #topnavi ul#sprache {
                text-align: left ;
                position: absolute;
                top: 10px;
                left: 0px;
                }
                
  #topnavi ul#linkliste {
                /*text-align: right ;  */
                /*position: absolute;    */
                top: 10px;
                left: 0px;
                }

  #topnavi a {
    color: black;
    background-color: rgb(215 ,215 ,215);
    padding: 4px 8px 4px 8px;
    border: 0px;         /*3px solid #ffeda0; */
    border-radius: 6px ;
    font-size: 100%;
    }

  #topnavi a:hover {
    color: black;
    background-color: rgb(255,233,57);
    padding: 4px 8px 4px 8px;
    border: 0px solid #ffeda0;
    }





div#navibereich {
                /*background-image: url(IMG_9855_red_375.JPG);  */
                /*width: 1638px; */    /* 1447 feste Breite */
                /*height: 1092px;  */  /* 1456 feste Höhe */
                /*background-color: #ffeda0;  */
                position: relative;              /* relative = Postitionierungen innerhalb von navibereich beziehen sich auf diesen Bereich */
                /*background-image: url(IMG_4362.JPG);  */
                padding-top: 10px;
                padding-right: 0px;
                padding-bottom: 0px;
                padding-left: 0px;
              /*  color: red;       */
            /*    margin-right: auto; */ /*Abstand automatisch -> zentrierung */
            /*    margin-left: auto;  */  /*Abstand automatisch -> zentrierung */
}

  #navibereich li {
                  display: inline;                       /* horizontale Anordnung der Listenelemente im Navibereich */
                  list-style-type: none;
                  margin:  0;
  }

  #navibereich li.highlight a{
                background-color: rgb(215 ,215 ,215);
  }


  #navibereich ul {
                margin-bottom: 10px;
                text-align: right ;   
                /*position: absolute; */
                /*top: 1120px;     */
                /*right: 0px; */
                }
  #navibereich ul#sprache {
                text-align: left ;
                position: absolute;
                top: 10px;
                left: 0px;
                }

  #navibereich a {
    color: black;
    background-color: rgb(255,233,57);
    padding: 4px 8px 4px 8px;
    border: 0px;         /*3px solid #ffeda0; */
    border-radius: 6px 6px 6px 6px;
    }

  #navibereich a:hover {
    color: black;
    background-color: white;
    padding: 4px 8px 4px 8px;
    border: 0px solid #ffeda0;
    }




div#textbereich {
  /*overflow: hidden;    */
  /*float:left;          */
  /*display: inline;  */
  /*background-image: url(IMG_7684.JPG);*/
  /*height: 2000px ;    */
  background-color: rgb(240,240,240);
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;

}

.text-1 {
  overflow: visible;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  /*display: inline; */
  /*width: 600px; */
  height: 270px;

}

.text-2 {
  overflow: visible;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  /*display: inline; */
  /*width: 600px; */
  height: 290px;

}

.text-3 {
  overflow: visible;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  /*display: inline; */
  /*width: 600px; */
  /*height: 600px; */
}

.text-4 {
  overflow: visible;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  font-size: 85%;
  /*display: inline; */
  /*width: 600px; */
  /*height: 600px; */
}

.text-5 {
  overflow: visible;
  padding-top: 0px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  /*display: inline; */
  /*width: 600px;     */
  height: 420px;
}

   #textbereich h2 {
                 /*color: rgb(200 ,200 ,200);   */
                 /*font-size: 220%;
                 font-family:    Veranda;
                 margin-bottom:0em;     */
                 padding-top: 20px;
                 padding-right: 0px;
                 padding-bottom: 0px;
                 padding-left: 20px;
                 }

      #textbereich h4 {
                 /*color: rgb(200 ,200 ,200);   */
                 /*font-size: 220%;
                 font-family:    Veranda;
                 margin-bottom:0em;     */
                 /*padding-top: 20px;*/
                 /*padding-right: 0px;   */
                 padding-bottom: 5px;
                 margin-bottom: 0px;
                 /*padding-left: 20px;   */
                 }

div#fussbereich {
   padding-top: 10px;                  /* unterhalb der Rahmenlinien über Text */
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
   border-top: 1px solid #8c8c8c;      /* Rahmenlinie*/
   margin-top: 0px;              /* oberhalb der Rahmenlinie*/
}



/**************************************************************
   4. Sonstige Styles
   ********************************************************************/

form {
  background-color: rgb(240,240,240);
  /*width: 1160px;    */          /* Breite des Formulares   */
  padding-bottom: 20px;
  border: 0px solid #8c8c8c;
}

label {              /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer;  /* Mauszeiger wird zur Hand */
}

input#besuchername,
input#besucherfirma,
input#besuchermail,
input#besuchertelefon,
textarea {
  width: 500px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}

textarea {
  height: 7em;
}

input:focus,                        /* hintergrundfarbe ändern bei aktivem Feld */
texarea:focus {
  background-color: #d9d9d9;
}

br#floatende {
  clear: both;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/*div.textbereich img {
  float: left
  margin-right: 15px;
}     */

.bildrechts {
  float: right;
  padding: 3px;
  border: 0px solid #ccc;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.bildlinks {
  float: left;
  padding: 3px;
  border: 0px solid #ccc;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 0px;
}