#gallery li {
    width: 300px;   /* breite nach wunsch...*/
    list-style-type: none;
    float: left;    /* listeneinträge nicht nur untereinander... */
    margin: 15px 5px;
    padding: 5px;
}

#gallery li.caption {
	margin: 15px 5px -10px 5px;
}

#gallery span {
    display: block; /* wichtig: siehe oben */
    margin: auto; /* zentriert span innerhalb des listenelements */
}

/* breiten entsprechend bildbreite + 2 * breite des gewünschten randes */
/* einfache randbreite entspricht padding von #gallery a */

#gallery span.landscape  {
    width: 274px;
}

#gallery span.portrait  {
    width: 206px;
}

#gallery a {
    padding: 2px;    /* "rand" um link - wird durch a:hover überschrieben */
    display: block;  /* wichtig: damit bild den ganzen link-bereich füllt */
}

#gallery a:hover {
    border: 2px solid #FA7821;
    padding: 0; /* erlaubt überschreiben des randes */
}

#gallery img {
    border: none;
    display: block;  /* verhindert lücke zwischen bildrand und link-umrandung an unterkante des bildes */
}