/*Hintergrundfarbe*/
body {
	background-color:#300000; 
}

/* Grundfläche: die ecke oben links ist horizontal und vertikal mittig (bei 50% des Fensters) von dort ist die ecke um die hälfte der breite/höhe nach links/oben verschoben
Breite der Grundfläche 760px, Höhe 400px*/
#wrapper {
	position:absolute; 
	left:50%; 
	top:50%; 
	width:760px;
	margin-left:-380px; 
	margin-top:-200px;
	font-family: Times, serif; 
	color:#ef0000; 
	text-decoration:none;
}

/* needed for IE to make :active state work first time */
/*
a, a:visited {
	color:#b00000;
}
*/

/* common styling for all galleries */
/*Linkverhalten bei class="gallery"
inline-block:    Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, du kannst Breite, Höhe und Außenabstand angeben, floatet aber wie Inline-Elemente in der Zeile.
Maße der Thumb-Elemente: 66px*66px
Links ausgerichtet
Außenabstand rund herum: 2px
z-index: Ein Layer mit der höheren Zahl liegt über dem Layer mit der niedrigeren Zahl.
*/
a.gallery, a.gallery:visited {
	display:block; 
	display:inline-block; /*wird kaum erkannt*/ 
	color:#af0000; 
	border:1px solid #400000; 
	width:66px; 
	height:66px; 
	float:left; 
	margin:2px; 
	z-index:50;
}
/*unterdrück die anzeige des großen Bildes und des Titels als inhalt des <a ...> </a> tags*/
a.gallery em, a.gallery span {
	display:none;
}
/*weißer rahmen um gallerie-elemente*/
a.gallery:hover {
	border:1px solid #fff;
}

/* styling for RIGHT gallery */
#container {
	position:relative; 
	width:760px; 
	height:395px;
	background:#200000; 
	border:1px solid #400000; 
}

#container img {
	border:0;
}

#thumbs {
	width:360px; 
	height: 350px; 
	position:absolute; 
	right:15px; 
	top:20px;
}

#content {
	width:350px; 
	height: 350px; 
	position:absolute; 
	right:15px; 
	top:20px;
	/*unterschiede zu thumbs*/
	border: 1px solid #400000;
	padding:3px;
	font-size:0.8em;
	overflow:none;
}

#thumbs a.gallery:hover span {
	display:block; 
	position:absolute; 
	width:350px; 
	height:10px; 
	top:357px; 
	left:-369px; 
	padding:0px; 
	z-index:100;
}

#content a.gallery:hover span {
	display:block; 
	position:absolute; 
	width:350px; 
	height:10px; 
	top:357px; 
	left:-369px; 
	padding:0px; 
	z-index:100;
}

#home a.gallery:hover span {
	display:block; 
	position:absolute; 
	width:350px; 
	height:10px; 
	top:357px; 
	left:0px; 
	padding:0px; 
	z-index:100;
}


#container a.gallery:hover span:first-line {
	font-style:normal; 
	font-weight:bold;
	font-size:1.1em; 
}

#container a.gallery:active, #container a.gallery:focus {
	border:1px solid #ef0000;
}

/*anzeige des großen Bildes bei Link:active und Link:focus*/
#container a.gallery:active em, #container a.gallery:focus em {
	display:block; 
	position:absolute; 
	width:353px; 
	height:353px; 
	top:3px; 
	left:-369px; 
	padding:0px; 
	border:0px;
	z-index:50;
}

#container h1 {
	clear:both; 
	margin-left:20px;
	margin-top:16px; 
	padding-top:80px; 
	padding-left:30px; 
	width:320px; 
	height:270px; 
	text-align:center; 
	font-size:2em; 
	font-weight:normal; 
}

#navi {
	display:block; 
	position:absolute; 
	width:352px; 
	height:10px; 
	top:1px; 
	right:20px; 
	z-index:100;
}

a.navi {
	text-decoration:none;
	color:#af0000;
}

a.navi:hover {
	/*font-weight: bold;*/
	color: #ff0000;
}
/*a.navi em,*/ a.navi span {
	display:none;
}

a.navi:hover span {
	display:block; 
	position:absolute; 
	width:350px; 
	height:10px; 
	top:376px; 
	left:0px; 
	padding:0px; 
	z-index:100;
}

a.navi:hover span:first-line {
	font-style:normal; 
	font-weight:bold;
	font-size:1.1em;
	color: #ef0000;
}

#home {
	width:360px; 
	height: 350px; 
	position:absolute; 
	right:15px; 
	top:20px;
}

#wrapper #footer {
	position:relative; 
	top:8px; 
	font-size:0.8em; 
	text-align:center;
	color: #c00000;
}