@charset "utf-8";

body {
			margin: 0;
			padding: 20px;
			color: #FFF;
			clip: rect(auto,auto,auto,auto);
			background-color: #242422;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 100%;
			line-height: 1.4;
			

	
	
	 }

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h2, h3, h4, h5, h6, p  {
			margin-top: 0;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
			padding-right: 15px;
			padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
			font-size: 80%;
}
h1 { margin-top: 0;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */ padding-right: 15px; padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */ font-size: 130%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #999; font-weight: lighter; padding-top: 20px; }
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link { color: #42413C; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */ }
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */ }

/* ~~ Dieser Container mit fester Breite umschließt die anderen div-Tags. ~~ */
.container {
			width: 800px;
			background: #000; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
			margin-top: 0;
			margin-right: auto;
			margin-bottom: 0;
			margin-left: auto;
			border: medium solid #666;
									
}

/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
.header {
			height: 120px;
			width: 800px;
			background-image: url(../media/design/header.png);
			border-bottom-width: medium;
			border-bottom-style: solid;
			border-bottom-color: #666;
			top: 20px;
			clip: rect(20px,auto,auto,auto);
}
.navi { width: auto; }

/* ~~ Dies sind die Layoutinformationen. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/

.content { height: 550px; padding-top: 40px; padding-right: 0; padding-bottom: 10px; padding-left: 0; 
}
.abc { overflow: scroll; height: 368px; overflow-x: hidden;
}
.abckurz { overflow: scroll; height: 329px; overflow-x: hidden;
}       
.abclang { overflow: scroll; height: 496px; overflow-x: hidden;}




/* ~~ Fußzeile ~~ */
.footer {
			font-size: 80%;
			padding-top: 3px;
			padding-right: 0;
			padding-bottom: 3px;
			text-align: center;
			color: #FFF;
			background-color: #333;
			height: 20px;
			border-top-width: thin;
			border-top-style: solid;
			border-top-color: #999;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/* Layout Rules
----------------------------------------------- */
#wrap { width: 800px; background-color: #000; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; 
}
.albumDesc {
			margin-top: -15px;
			color: #FFF;
}
.albumBookDesc {
			font-size: small;
			color: #000;
			margin-top: -13px;
}
.descTitle {
			font-size: small;
			color: #fff;
}
.albumName { font-size: large; color: #999; padding-bottom: 30px; }
/* Form Elements
----------------------------------------------- */
label, select {
			font-size: 90%;
			font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
			color: #000;
}
select {
			background-color:  #999;
			border: 1px solid #b1b1bc;
}
/* Gallery and Playback Controls
----------------------------------------------- */
#gallerySelect {
			width: 248px;
			margin-top: -8px;
			color: #000;
}
#galleries {
			margin:0 auto 20px auto;
			color: #000;
}
#galleries label {
			padding-bottom: 2px;
			color: #000;
}
#controls { color: #FFF; margin-right: auto; margin-bottom: 10px; margin-left: auto; margin-top: 18px; }
#previews { margin-bottom: 5px; width: 200px; float: left; margin-right: 10px; padding-right: 10px; padding-bottom: 15px; padding-left: 10px; color: #000; margin-left: 10px; border: thin solid #333; }
#thumbnails { clear: both; color: #000; margin-right: auto; margin-bottom: 20px; margin-left: auto; }
#thumbnails div { position: relative; width: 24px; height: 24px; float: left; margin: 8px; float: left; display:inline; padding-top: 0; padding-right: 0; padding-bottom: 5px; padding-left: 0; }
#thumbnails img {
			width: 24px;
			height: 24px;
			position: absolute;
			border-top: solid 1px #999;
			border-right: solid 1px #404040;
			border-bottom: solid 1px #333;
			border-left: solid 1px #404040;
}
#transport { list-style: none; color: #000; padding-top: 10px; padding-right: 0; padding-bottom: 10px; padding-left: 0; float: left; }
#transport li { text-align: center; color: #000; font-size: 80%; float: left; }
#transport a {
			text-decoration: none;
			text-transform: uppercase;
			font-size: 85%;
			font-weight: bold;
			letter-spacing: 0.1em;
			width: 50px;
			float: left;
			display: block;
			-moz-user-select: none;
			-khtml-user-select: none;
			margin-top: 0;
			margin-right: 1px;
			margin-bottom: 0;
			margin-left: 0;
			padding-top: 2px;
			padding-right: 6px;
			padding-bottom: 2px;
			padding-left: 6px;
			color: #000;
}
#transport a:link {
			background: #666 url('../musik/newpics/images/bg_grad_gray1.gif') repeat-x;
			color: #fff;
			border-top: solid 1px #999;
			border-right: solid 1px #404040;
			border-bottom: solid 1px #3a3a3a;
			border-left: solid 1px #404040;
}
#transport a:visited {
			background: #666 url('../musik/newpics/images/bg_grad_gray1.gif') repeat-x;
			color: #fff;
			border-top: solid 1px #999;
			border-right: solid 1px #404040;
			border-bottom: solid 1px #3a3a3a;
			border-left: solid 1px #404040;
}
#transport a:hover {
			color: #900;
			border-top: solid 1px #999;
			border-right: solid 1px #404040;
			border-bottom: solid 1px #3a3a3a;
			border-left: solid 1px #404040;
			background-image: url(../musik/newpics/images/bg_grad_gray2.gif);
			background-repeat: repeat-x;
}
#transport a:focus {
			-moz-user-select: none;
			-khtml-user-select: none;
}
#picture {
			padding: 0px;
			width: 500px;
			float: left;
}
#mainImageOutline {
			margin: 0 auto;
			padding: 0;
			background-color: #333;
			padding: 1em;
			overflow: hidden;
			color: #000;
}
#mainImage {
			width: 100%;
			height: 100%;
			color: #000;
}
#picture img {
			border: 1px solid #999;
			color: #000;
}
#caption { color: #999; font-size: 90%; font-weight: bold; text-align: right; padding-top: 6px; margin-right: -15px; }
.selectedThumbnail { border: solid 2px #fc0 !important; }
.inFocus {
			border: solid 1px #fc0 !important;
			color: #000;