/* Definition der Eigenschaften der Galeriebilder */
#Bilder {
	top: -770px;
	position: relative;
	height: 670px;
	background-color: rgb(255,255,255);
	width: 990px;
	left: 100px;
	border-top-style: ridge;
	border-right-style: ridge;
	border-bottom-style: ridge;
	border-left-style: ridge;
	border-top-color: rgb(255,0,0);
	border-right-color: rgb(255,0,0);
	border-bottom-color: rgb(255,0,0);
	border-left-color: rgb(255,0,0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding-top: 20px;
	padding-right: 10px;
	background-image: url(../Galeriebilder/Bilder/Bild1.jpg);
	background-repeat: no-repeat;
	background-position: 20px 20px;
}

/* Definition der Eigenschaften der Liste der Galeriebilder */
.Vorschau {
	list-style-type: none;
	width: 90px;
	overflow: auto;
	height: 640px;
	float: right;
	border: 1px solid rgb(0,0,0);
}

/* Anordnung der Galeriebilder horizontal */
.Vorschau li {
	padding-bottom: 5px;
	float: right;
	padding-top: 5px;
}

/* Bestimmung der Größe der Vorschaubilder */
.Vorschau li a, .Vorschau li a:visited  {
	height: 77px;
	width: 95px;
	display: block;
	border: 1px solid rgb(0,0,0);
}

/* Einfügen der Vorschaubilder als Hintergrundbild */
.Vorschau li a.Bild1 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor1.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild2 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor2.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild3 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor3.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild4 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor4.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild5 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor5.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild6 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor6.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild7 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor7.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild8 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor8.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild9 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor9.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild10 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor10.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild11 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor11.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild12 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor12.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild13 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor13.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild14 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor14.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild15 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor15.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild16 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor16.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild17 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor17.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild18 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor18.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild19 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor19.jpg);
	background-repeat: no-repeat;
}
.Vorschau li a.Bild20 {
	background-image: url(../Galeriebilder/Vorschaubilder/Vor20.jpg);
	background-repeat: no-repeat;
}

/* Die großen Anzeigebilder werden zunächst unsichtbar gemacht */
.Vorschau li a span {
	position: absolute;
	left: 20px;
	display: block;
	top: 20px;
	visibility: hidden;
}
/* Einstellung der Eigenschaften der großen Anzeigebilder */
.Vorschau li a span img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* Beim Klick auf ein Vorschaubild wird das große Anzeigebild sichtbar gemacht */
.Vorschau li a:active span, .Vorschau li a:focus span {
	visibility: visible;
}
/* Beim Klick auf ein Vorschaubild wird dieses durch einen roten Rahmen markiert */
.Vorschau li a:active, .Vorschau li a:focus {
	border: 2px solid rgb(255,0,0);
}