/* **************************************** */
/*  Stylesheet Homepage frings-du.de        */
/*  Bilderseiten                            */
/*  Karl-Heinz Frings, Stand: 30.06.2018    */
/* **************************************** */

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    text-align: center;                         /* Zentrierung IE */
    background-color: #2F2F2F;
}

/* Darstellung besuchter und unbesucher Links */
a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }

/* Allgemeine Seitenformatierung */
#seite {
    position: relative;
    width: 1202px;
    margin: 0 auto;
    background-color: #2F2F2F;
}

/* Fusstext "schliessen" */
#text_unten_mitte {
    float: left;
    margin-left: 328px;
    margin-right: auto;
    /* width: 90px; */
    height: 2em;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: center;    
}

/* Fusstext Copyright */
#text_unten_rechts {
    margin-right: 0px;
    margin-left: auto;
    /* width: 170px; */
    height: 2em;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: right;
}

/* Fusstext Impressum Datenschutz */
#text_unten_links {
    float: left;
    margin-right: auto;
    margin-left: 0px;
    /* width: 400px; */
    height: 2em;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: left;
}

/* Grosse Ueberschrift */
h1 {
    width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;      
    color: #7A8D3B;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
    padding: 10px 0 10px 0;    
}

/* Ueberschrift ohne Trennlinie */
h2 {
    width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #7A8D3B;
    font-size: x-large;
    font-weight: bold;
    text-align: center;
    padding: 10px 0 10px 0;
}

/* Ueberschrift mit Trennlinie oben */
h3 {
    width: 1200px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    color: #7A8D3B;
    font-size: x-large;
    font-weight: bold;
    text-align: center;
    padding: 10px 0 10px 0;
    border-top : #7A8D3B 2px solid;
}

/* Bildunterschriften zentriert */
p {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 25px;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: center;
}

/* Text Blocksatz */
.text {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
}

/* Text zentriert */
.text_zentriert {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: center;
}

/* Bilder quer 1200px */
.bild {
    width: 1200px;
    height: 800px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild img {
    display: block;
}

/* Bilder quer 1280px */
.bild_1280 {
    width: 1280px;
    height: 853px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_1280 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_1280 img {
    display: block;
}

/* Bilder quer 1024px */
.bild_1024 {
    width: 1024px;
    height: 683px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_1024 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_1024 img {
    display: block;
}


/* Bilder quer 900px */
.bild_900 {
    width: 900px;
    height: 600px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_900 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_900 img {
    display: block;
}

/* Bilder quer 0600px */
.bild_600 {
    width: 600px;
    height: 400px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_600 span {
    background-color: #5F5F5F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_600 img {
    display: block;
}

/* Bilder Hochformat 1200px */
.bild_hoch_1200 {
    width: 800px;
    height: 1200px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_hoch_1200 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_hoch_1200 img {
    display: block;
}

/* Bilder Hochformat 1024px */
.bild_hoch_1024 {
    width: 683px;
    height: 1024px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_hoch_1024 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_hoch_1024 img {
    display: block;
}

/* Bilder Hochformat 900px */
.bild_hoch_900 {
    width: 600px;
    height: 900px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_hoch_900 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_hoch_900 img {
    display: block;
}

/* Bilder Hochformat 600px */
.bild_hoch_600 {
    width: 400px;    
    height: 600px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_hoch_600 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_hoch_600 img {
    display: block;
}

/* Bilder quer 1200px x 675px */
.bild_quer_1200x675 {
    width: 1200px;
    height: 675px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_quer_1200x675 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_quer_1200x675 img {
    display: block;
}

/* Bilder quer 1280px x 720px */
.bild_quer_1280x720 {
    width: 1280px;
    height: 720px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_quer_1280x720 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_quer_1280x720 img {
    display: block;
}

/* Bilder quer 1280px x 853px */
.bild_quer_1280x853 {
    width: 1280px;
    height: 853px;
    position: relative;
    border: #FFFFFF 1px solid;
    -webkit-box-shadow: 5px 5px 4px grey;
    -moz-box-shadow: 5px 5px 4px grey;
    -ms-box-shadow: 5px 5px 4px grey;
    box-shadow: 5px 5px 4px grey;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: medium;
    text-align: justify;
    margin: 0 auto 25px auto;
}

.bild_quer_1280x853 span {
    background-color: #3F3F3F;
    background-color: hsla(0, 0%, 0%, 0.4);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}

.bild_quer_1280x853 img {
    display: block;
}