/*Bilder angeben im img mit tatsächlicher Weite (anpassen!!) und dann im Darstellungs-Tag mit width: 100% height: auto*/
#body{
          font-family: Arial, sans-cerif;
          background-color: #C0C0C0;
          max-width: 1200px;
          margin: 0 auto;
         }

#footer{
          font-family: Arial, sans-cerif;
          background-color: #FFAEAE;
          max-width: 600px;
          max-height: 200px;
          margin: 0 auto;
         text-align: center;

}


 /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

#galerie,
li {
        margin: 0.2em;
        padding: 0.2em;
}

li {
        display: inline-block;
        list-style-type: none;
        width: 45%;
}

img {
        padding: 0;
        margin: 0;
        width: 100%;
        /* Bild passt sich an verfügbaren Raum im li ann */
}

a {
        padding: 0.1em;
}

a:focus,
a:hover {
        background: #FFFFFF;
}
/* Large screens */

@media all and (min-width: 40em) {
        li {
                width: 10em;
        }
        .details {
                position: absolute;
                right: 20%;
                top: 10%;
                background-color: #CFCFCF;
                border: 0.5em solid #3983ab;
                border-radius: 1em; /*0 8px 8px;*/
                padding: 1em 1em .2em;
                width: 60em;
                max-height: 60em;
                overflow: auto;
                display: none;
        }
        .details img {
                width: 90%;
        }
        .details:target {
                display: block;
        }
        .close {
                width: 0;
                heigh: 0;
                border: 0;
                text-shadow: none;
                color: transparent;
        }
        .close:after {
                position: absolute;
                top: 1em;
                right: 1em;
                content: "X";
                color: white;
                background: #c32e04;
                font: font: bold 1em/150% Arial, Times, serif;
                border: 0.1em solid #3983ab;
                border-radius: 0 8px 8px;
                display: block;
                text-align: center;
                width: 1.5em;
                height: 1.5em;
                padding: 0.2em 0 0 0em;
        }

 }
/*
 Das figure-Element mit der class="details" wird im Ausgangszustand nicht angezeigt.
 Wenn der Link ausgewählt wird, kann das angesprochene fiugre mit der Pseudoklasse target selektiert und formatiert werden.
display: block; sorgt dafür, dass es jetzt sichtbar wird.
Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.


*/
        /* Navigation */
a.navi, a.navi_first, a.navi_self {
          display:block;
          white-space:nowrap;
          overflow:hidden;
          border:outset;
          border-left:1px solid black;
          border-right:1px solid black;
          border-bottom:1px solid black;
          font-family:Tahoma,sans-serif;
          font-size:14px;
          font-weight:bold;
          text-decoration:none;
          letter-spacing:0.1em;
          padding:3px;
          text-align:center;
          line-height: 40px;
          }
a.navi_first {
         border-top:1px solid black;
}
a.navi:link, a.navi_first:link,
a.navi:visited, a.navi_first:visited {
         background-color:#f0f3f5;
         color:black;
}
a.navi_self:link, a.navi_self:visited {
         background-color:gray;
         color:white;
}
a.navi:hover, a.navi_first:hover, a.navi_self:hover,
a.navi:active, a.navi_first:active, a.navi_self:active {
            background-color:#EBCE94;
            color:black;
            }