* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: #ffcc99;
    padding-top: 20px;
}

@font-face {
    font-family: 'Merienda One';
    font-style: normal;
    font-weight: 400;
    src: local('Merienda One'), local('MeriendaOne-Regular'), url('file:///home/mlbrn/projects/bauerngarten/static/fonts/meriendaone/v4/bCA-uDdUx6nTO8SjzCLXvXhCUOGz7vYGh680lGh-uXM.woff'), url(http://themes.googleusercontent.com/static/fonts/meriendaone/v4/bCA-uDdUx6nTO8SjzCLXvXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

h1{
    font-family: 'Merienda One', Arial, serif; font-weight: 400;
     margin-left: 20px;
}   

#header {
   
    height: 100px;
    background-color: #FBFBFB;
    background-image: linear-gradient(to top, #ceccce 0, #FBFBFB 10px);
    padding-top: 5px;
    border-top: 1px solid #988484;
    }

#navigation {
    width: 100%;
    height: 18px;
    margin-top: 20px;
    }

#navigation ul {
    list-style: none;
    margin-left: 15px;
    
}

#navigation ul li {
    display: inline-block;
    width: auto;
    margin-right: 30px;
    }

#navigation ul li a {
    
    color: #646464;
    font-size: 16px;
    font-weight: lighter;
    font-family: 'Merienda One', Arial, serif; font-weight: 400;
    }
    
    #navigation ul li strong {
    font-family: 'Merienda One', Arial, serif; font-weight: 400;
        font-size: 18px;
        color: #BF0000;
        text-decoration: underline;
    }
    
   
    
           
#bildbereich {      /* ist der Bereich mit den 6 Bildern als Lightbox */
    height: 450px;
    margin-top: 10px;
    background-color: #FFFFFF;
    position: relative;
    }
    
    #bildbereich img {
        border-left: solid 6px #ceccce;
        border-right: solid 6px #ceccce;
        border-top: solid 6px #ceccce;
        border-bottom: solid 6px #ceccce;
    }
    
    #bildbereich2 {         /* ist der Bereich deckungsgleich auf Bildbereich für Text links */
    height: 420px;
    margin-top: -450px;
    position: absolute;
    width: 295px;
    padding-left: 630px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    
    }
    
    #bildbereich3 {     /* ist der mit Flurbild */
    height: 450px;
    margin-top: 10px;
    background-color: #FFFFFF;
    position: relative;
    }

    #bildbereich3 img {    /* ist das Flurbild */
        border-left: solid 6px #ceccce;
        border-right: solid 6px #ceccce;
        
    }
    
    
           
#bildbereich  ul {
list-style: none;
margin-left: 10px;  /* Abstand der Bilder zum linken Rand */
}

#erstes {
    width: auto;
    height: auto;  
    margin-left: 47px;
    margin-top: 17px;
    position: absolute;
}

#zweites {
    width: auto;
    height: auto;
    margin-left: 344px;
    margin-top: 17px;
    position: absolute;
}

#drittes {
    width: auto;
    height: auto;
    margin-left: 642px;
    margin-top: 17px;
    position: absolute;
}

#viertes {
    width: auto;
    height: auto;
    margin-left: 47px;
    margin-top: 233px;
    position: absolute;
}

#funftes {
    width: auto;
    height: auto;
    margin-left: 344px;
    margin-top: 233px;
    position: absolute;
}

#sechstes {
    width: auto;
    height: auto;
    margin-left: 642px;
    margin-top: 233px;
    position: absolute;
}



/* #bildbereich ul li img {

float: left;

border: 0px;
} */

ul.lightbox li {
  overflow: hidden;
  position: absolute;
  width: 0;  /* ohne diese 4 werte kommt kein bild */
  height: 0;
  left: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  -webkit-transition: opacity 1.5s;
}

ul.lightbox li:target {
  width: 100%;      /* Zeigt die Bilder in der von mir gamachten Original-Pixelgröße an */
  height: 100%;
  opacity: 1;
}

ul.lightbox li:target a {
  position: absolute;
  top: 55%;
  left: 50%;
  margin: -350px 0 0 -415px;
  border: 15px solid #fff;
  -moz-box-shadow:0 1px 8px #000000;
  -o-box-shadow:0 1px 8px #000000;
  -webkit-box-shadow:0 1px 8px #000000;
} 

/* flur {
    width: 595px;
    height: 450px;
    position: absolute;
    margin-top: 0px;
    background-image: url(../../img/flur.jpg);
    }

    #nebenflur {
    width: 304px;
    height: 410px;
    position: absolute;
    margin-top: 6px;
    margin-left: 602px;
    font-size: 18px;
    line-height: 140%;
    background-color: #E7E7E7;
    padding: 13px;
    } */



#main-content {
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #ceccce 0, #FBFBFB 10px);
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid #6D6D6D;
}

#main-content p {
    min-width: 16em;
    min-width: 40ch;
    max-width: 28em;
    max-width: 100ch;
}

#main-contentb {
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #ceccce 0, #FBFBFB 10px);
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid #6D6D6D;
    margin-top: 0px;
}

#main-contentb p {
    min-width: 16em;
    min-width: 40ch;
    max-width: 28em;
    max-width: 100ch;
}

#main-contentc {
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #ceccce 0, #FBFBFB 10px);
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid #6D6D6D;
    margin-top: 448px;
}

#main-contentc p {
    min-width: 16em;
    min-width: 40ch;
    max-width: 28em;
    max-width: 100ch;
}

#main-contentd {   /* für Startseite*/
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #ceccce 0, #FBFBFB 10px);
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid #6D6D6D;
}

#main-contentd p {
    min-width: 16em;
    min-width: 40ch;
    max-width: 28em;
    max-width: 100ch;
}



.carousel {
    margin-bottom: 0;
}

.carousel-control {
    height: 80px;
    margin-top: 0;
    font-size: 120px;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
    background-color: transparent;
    border: 0;
    z-index: 10;
}

.carousel .item {
    height: 450px;
}

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 450px;
}

.carousel-caption {
    background-color: rgba(1, 1, 1, .5);
    position: absolute;
    width: 100%;
    padding: 6px 10px 6px 20px;
    bottom: 0;
}

.carousel-caption .lead {
    margin: 0;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

.carousel-caption .btn {
    margin-top: 10px;
}