{
    padding: 0;
    margin: 0;
}


body {
    background: #1A380A;
    background-image: linear-gradient(#1A380A,#005A00);   /*  senkrechter farbverlauf */
    font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: #F4EC80;
    margin: 0 auto;
}

img { 
    border: none; 
}

a { 
    color: #F4EC80; 
    text-decoration: none;
}

a:hover { 
    text-decoration: none; 
    color : #FFFFFF;
}
  
/* ============== beginn rahmen kopf linke seite ================== */

#wrap {
    margin: 40px auto 0 auto;
    width: 800px;
}

#header-links { /* Style */
    border: 1px solid #F4EC80;
    height: 120px;
    background: #102409;
    width: 120px;
    float:left;
}

img.zentrieren { /* Bild zentrieren */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: +14%;
}
/* ============== ende rahmen kopf linke seite ==================== */

/* ============== beginn rahmen kopf rechte seite ================= */
      
#header-rechts {   /* Style */
    border: 1px solid #F4EC80;
    height: 120px;
    background: #102409;
    margin-left: 134px;
}

#header-rechts h1 {  /* Schriftstil */
    text-align: center;
    font-size: 30px;
    font-weight: 100;
    letter-spacing: 2px;
    color: #FFFFFF;
    padding: 12px 0 5px 10px;
}

/* ================= ende rahmen kopf rechte seite ================ */


/* ==================beginn slideshow ============================= */

#slider {
    height: 300px;
    width: 798px;
    margin-top: -8px;
    border: 0px solid #F4EC80;
    box-shadow: 1px 1px 5px 2px #F4EC80;
}

#slider img {
    position: absolute;
    height: 300px;
    width: 798px;
    opacity: 0;
}

#slider img:nth-of-type(1) {
    animation: fade 30s ease-in-out infinite;
}

#slider img:nth-of-type(2) {
    animation: fade 30s 6s ease-in-out infinite;
}

#slider img:nth-of-type(3) {
    animation: fade 30s 12s ease-in-out infinite;
}

#slider img:nth-of-type(4) {
    animation: fade 30s 18s ease-in-out infinite;
}

#slider img:nth-of-type(5) {
    animation: fade 30s 24s ease-in-out infinite;
}

@keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}

}


/* ================ ende slideshow ================================ */


/* ==================== beginn rahmen menü =========================*/

#navigation {
    margin-top: 10px;
    text-align: center;
    color: #eee;
    font-size: 11px;
    border: 1px solid #F4EC80;
    padding: 10px;
    background: #102409;
    line-height: 27px;
}

#menu a , #menu a:visited , #menu a:active {
    display:inline;
    color:#F4EC80;
    text-decoration:none ;
    text-align:center;
    vertical-align: middle;
    width:100px;
    margin-left:13px;
    margin-right:13px;
    font-size: 20px;
    border: 0px solid #F4EC80;
    padding-top:1px;
    font-family: trebuchet ms,verdana,arial, helvetica, verdana, tahoma, sans-serif;
}

#menu a:hover{
    background:transparent;
    color:#fff;
}

/* ======================= ende rahmen menü ======================= */


/*  =================beginn rahmen links Haupttext =================*/

.left {
    margin-top: 10px;
    width: 570px;
    float: left;
    text-align: justify;   /* blocksatz */
    border: 1px solid #F4EC80;
    padding: 18px;
    background: #102409;
}

.left h2 {
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 100;
    padding : 10px 0 15px 0;
    color: #FFFFFF;
}

p {
    font-size: 15px; 
    letter-spacing: 1px;
    font-weight: 100;
}

#rezept {
    font-size: 15px;
    color: #000000;
}

#fett {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 900;
    color: #F4EC80;
}

     /* ende rahmen links Haupttext */

/* =============== beginn rahmen rechts =========================== */

.right {
margin-top:10px;
width: 160px;
float: right;
border: 1px solid #F4EC80;
font-size: 13px;
padding: 10px;
background: #102409;
}
.right ul {
list-style-type: square;
padding: 5px 10px 10px 23px;
color: #597#F4E#FFFFFF;
}
.right h2 {
text-align: center;
height: 30px;
font-size: 14px;
color: #FFFFFF;
line-height: 30px;
}
.right a { text-decoration: none }

    /* ende rahmen rechts */
 
    /* beginn rahmen unten */
    
#footer {
margin-top: 10px;
text-align: center;
color: #FFFFFF;
font-size: 11px;
border: 1px solid #F4EC80;
padding: 10px;
background: #102409;
}

     /* ende rahmen unten */

/* bilder im text nebeneinander */

.img_inline {
    float: left;
    margin-right: 15px;
    width: 150px;
    padding: 7px;
    text-align: center;
    font-size: 0.8em;
} 

/* =============== beginn rahmen links rezeptseiten =============== */

.left_2 {
    margin-top: 10px;
    width: 230px;
    float: left;
    text-align: justify;   /* blocksatz */
    border: 1px solid #F4EC80;
    padding: 18px;
    background: #F4EC80;
}

.left_2 h2 {
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 100;
    padding : 10px 0 15px 0;
    color: #FFFFFF;
}

h4 {
    text-align: center;
    color: #1A380A ;
    font-size: 30px;
    margin-top: 0px;
}



/*  =============== beginn rahmen rechts rezeptseiten ==============*/

.right_2 {
    margin-top:10px;
    width: 500px;
    float: right;
    border: 1px solid #F4EC80;
    font-size: 13px;
    padding: 10px;
    background: #F4EC80;
}

.right h2 {
    text-align: center;
    height: 30px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
}

/*================== Bild größer bei mouseover =====================*/

img.zoom_start_1 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom_start_1:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(3.0, 3.0) translate(75px,0px);
 -moz-transform: scale(3.0, translate(75px,0px) 3.0);
 -webkit-transform: scale(3.0, 3.0) translate(75px,0px);
 -o-transform: scale(3.0, 3.0) translate(75px,0px);
 -ms-transform: scale(3.0, 3.0) translate(75px,0px);
}

img.zoom_start_2 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom_start_2:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(3.0, 3.0) translate(-20px,0px);
 -moz-transform: scale(3.0, translate(-20px,0px) 3.0);
 -webkit-transform: scale(3.0, 3.0) translate(-20px,0px);
 -o-transform: scale(3.0, 3.0) translate(-20px,0px);
 -ms-transform: scale(3.0, 3.0) translate(-20px,0px);
}

img.zoom3 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom3:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(3.0, 1.5) translate(-60px,0px);
 -moz-transform: scale(3.0, 1.5)translate(-60px,0px);
 -webkit-transform: scale(3.0, 1.5) translate(-60px,0px);
 -o-transform: scale(3.0, 1.5) translate(-60px,0px);
 -ms-transform: scale(3.0, 1.5) translate(-60px,0px);
}

img.zoom35 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom35:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 1.5) translate(-60px,0px);
 -moz-transform: scale(2.0, 1.5)translate(-60px,0px);
 -webkit-transform: scale(2.0, 1.5) translate(-60px,0px);
 -o-transform: scale(2.0, 1.5) translate(-60px,0px);
 -ms-transform: scale(2.0, 1.5) translate(-60px,0px);
}


img.zoom_start_4 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom_start_4:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(4.0, 4.0) translate(45px,0px);
 -moz-transform: scale(4.0, translate(45px,0px) 3.0);
 -webkit-transform: scale(4.0, 4.0) translate(45px,0px);
 -o-transform: scale(4.0, 4.0) translate(45px,0px);
 -ms-transform: scale(4.0, 4.0) translate(45px,0px);
  position: relative;
  z-index: 1;
}

img.zoom_start_5 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom_start_5:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(4.0, 4.0) translate(0px,0px);
 -moz-transform: scale(4.0, translate(0px,0px) 3.0);
 -webkit-transform: scale(4.0, 4.0) translate(0px,0px);
 -o-transform: scale(4.0, 4.0) translate(0px,0px);
 -ms-transform: scale(4.0, 4.0) translate(0px,0px);
 position: relative;
 z-index: 1;
}

img.zoom_start_6 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom_start_6:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(4.0, 4.0) translate(-45px,0px);
 -moz-transform: scale(4.0, translate(-45px,0px) 3.0);
 -webkit-transform: scale(4.0, 4.0) translate(-45px,0px);
 -o-transform: scale(4.0, 4.0) translate(-45px,0px);
 -ms-transform: scale(4.0, 4.0) translate(-45px,0px);
 position: relative;
 z-index: 1;
}

/*============ Bild größer und breiter bei mouseover ===============*/

img.zoom2 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom2:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(3.0, 2.0) translate(40px,0px);
 -moz-transform: scale(3.0, 2.0) translate(40px,0px);
 -webkit-transform: scale(3.0, 2.0) translate(40px,0px);
 -o-transform: scale(3.0, 2.0) translate(40px,0px);
 -ms-transform: scale(3.0, 2.0) translate(40px,0px);
} 

img.zoom5 {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}
img.zoom5:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(3.0, 3.0) translate(-60px,0px);
 -moz-transform: scale(3.0, 3.0)translate(-60px,0px);
 -webkit-transform: scale(3.0, 3.0) translate(-60px,0px);
 -o-transform: scale(3.0, 3.0) translate(-60px,0px);
 -ms-transform: scale(3.0, 3.0) translate(-60px,0px);
}

/* =========== beginn rahmen und Text sonderseiten =============== */

.left_3 {
    margin-top: 10px;
    width: 762px;
    float: left;
    text-align: justify;   /* blocksatz */
    color:  #F4EC80;
    border: 1px solid #F4EC80;
    padding: 18px;
    background: #102409;
}

.left_3 h1 {
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 100;
    padding : 10px 0 15px 0;
    color: #FFFFFF;
}

.left_3 h2 {
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 100;
    padding : 10px 0 15px 0;
    color: #F4EC80;
}

.left_3 h3 {
    margin-top: -30px;
    text-align: center;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 100;
    padding : 10px 0 15px 0;
    color: #FFFFFF;
}

/* =========== beginn layout suchen & finden =============== */

.div1 {

    display: block;
    text-align: center;
    border: 1px solid #F4EC80;

}

#knopf {
   	list-style: none;
    border: 2px solid #F4EC80;
    background-color:#1A380A;
    margin-left: -40px;   /* ausrichtung horizontal */
   	width: 570px;         /* breite der schalter */
   	height: 30px;         /* höhe der Schalter */
   	color: #F4EC80;       /* schriftfarbe */
   	padding-top: 10px;
   	text-align: center;
   	border-radius: 20px;

}

#knopf2 {
   	list-style: none;
    border: 2px solid #F4EC80;
    background-color:#1A380A;
    margin-left: -40px;   /* ausrichtung horizontal */
   	width: 140px;         /* breite der schalter */
   	height: 30px;         /* höhe der schalter */
   	color: #F4EC80;       /* schriftfarbe */
   	text-align: center;
   	padding-top: 10px;
   	border-radius: 20px;

}