/* CSS_Document_GalerieValerie */

/*...schön kommentiert für Malte*/

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Zeichensatz */

@charset "UTF-8";

/* alle Abstände auf Null setzen */

* {
	padding: 0;
	margin: 0;
}

/* Schriftfamilie, Schriftgröße, Zeilenabstand, Schriftfarbe und Hintergrundfabe sowie Textausrichtung > für die gesamte Seite, wenn nix anderes angegeben wird */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	line-height: 120%;
	color: #666666;
	background-color:#FFFFFF;
	text-align: left;
}

/* Startbild/Logo mittig zentrieren */

#container_index {
	width:1024px;
	margin-top: 10%;
	margin-right: auto;
	margin-bottom: 10%;
	margin-left: auto;/*
	width:1024px;
	height:768px;
	position:absolute;
	top:424px;
	left:843px;
	margin-left:-512px;
	margin-top:-384px;
*/
}

/* Hauptcontainer, Größe und Abstände */

#container {
	width:1024px;
	height:768px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

/* Startbild/Logo mit Hovereffekt */

.start-bild span {
	display:			none;
}

.start-bild:link, .start-bild:visited {
	display:block;
	width:133px;
	height:228px;
	background:url(../bilder_page/start_gv.gif);
}

.start-bild:hover, .start-bild:active, .start-bild:focus {
	background-image:url(../bilder_page/start_gv.hover.gif);
}

/* Linke Sidebar, Position & Größe */

#sidebar {
	float: left;
	width: 210px;
	height: 768px;
	text-decoration: none;
}

/* so sehen die Links in der Sidebar aus */

 #sidebar a {
	text-align:left;
	color: #666666;
	text-decoration: none;
}

/* Link beim drüberfahren */

#sidebar a:hover {
	color:#CCCCCC;
}

/* Inhalt Sidebar, Innenabstand nach oben */

#sidebar_content {
	padding-top: 47px;
}

/* Listenelemente in der Sidebar, Abstände oben und links, Textausrichtung */

#sidebar_content li {
	list-style-type: none;
	padding-top: 10px;
	padding-left: 65px;
	text-align: left;
}

#plakate {
	padding-left:260px;
}

/* Blättern-Buttons auf den Künstlerseiten */

#buttons li {
	list-style-type: none;
	padding-top: 250px;
	padding-left: 65px;
	text-align: left
}

/* Blättern-Buttons auf den Künstlerseiten von christoph wuestenhagen, wegen seines beschissenen bildformats*/

#buttons01 li {
	list-style-type: none;
	padding-top: 225px;
	padding-left: 65px;
	text-align: left
}

/* Kopfbereich, Größe */

#header {
	float: right;
	width: 814px;
	height: 96px;
}

/* Navigation, Schriftgröße, Textausrichtung, Größe */

#navigation {
	font-size: 14px;
	text-align: left;
	float: right;
	width: 814px;
	height: 40px;
}

/* Navigation Design der Links, Abstände rechts neben den Links */

#navigation a {
	color: #666666;
	margin: 0 1.27em 0 0;
	text-decoration: none;
}

/* Navigation Hovereffekt */

#navigation a:hover {
	color:#CCCCCC;
}

/* Navigation Listenelemente, Innenabstände oben und unten  */

#navigation ul {
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Navigation Listendarstellung */

#navigation li {
	display: inline;
	list-style-type: none;
}

/* Startbild Eyecatcher, Position, Größe, Ausrichtung */

#maincontent_start {
	float: left;
	width: 814px;
	padding-top: 70px;
	text-align: left;
}

/* Archivseite, Container für die Bilder... Position... 

#maincontent_archiv {
	float: left;
	width: 814px;
	padding-top: 40px;
	text-align: left;
}

/* Bild01 klebt am linken Containerrand um bündig mit "A" von Ausstellungen zu sein 

.archiv-bild01 {
	padding-left:0px;
} 																					*/

/* Hauptinhaltscontainer, wird erst für die Texte wichtig */

#maincontent {
	float: left;
	width: 800px;
	padding-top: 40px;
}

/* Die Links innerhalb von maincontent */

#maincontent a {
	text-align: left;
	color: #666666;
	text-decoration: none;
}

#maincontent a:hover {
	color:#CCCCCC;
}

#bilder {
	width:800px;
}

#bilder01 {
	width:500px;
}

#bilder02 {
	float: left;
	width: 500px;
	padding-left: 0px;
	text-align: left;
}	

#werk {
	padding-left:550px;
	padding-top:300px;
}

#werk01 {
	padding-left:325px;
	padding-top:300px;
}

/* Position und Abstände der Bilder */

#bilder img {
	margin-left: 0px;
	margin-right: 8px;
	margin-top: 0px;
	margin-bottom: 8px;
}

#biografie {
	margin-top:150px;
	width:435px;
}

/* hier wird die Tabelle mit den Künstlernamen positioniert u.s.w.*/

#maincontent-tabelle {
	float: left;
	width: 300px;
	padding-left: 206px;
	padding-top: 40px;
}

/* die Links in der Tabelle */

#maincontent-tabelle a {
	text-align: left;
	color: #666666;
	text-decoration: none;
}

/* Hover-Effekt für das Javascript in der Tabelle*/

#philipp:hover {
	color:#CCCCCC;
}

#christin:hover {
	color:#CCCCCC;
}

#christoph:hover {
	color:#CCCCCC;
}

#c_john:hover {
	color:#CCCCCC;
}

#thomas:hover {
	color:#CCCCCC;
}

#paul:hover {
	color:#CCCCCC;
}

#claus:hover {
	color:#CCCCCC;
}

#nico:hover {
	color:#CCCCCC;
}

#linus:hover {
	color:#CCCCCC;
}

#valentin:hover {
	color:#CCCCCC;
}

#janole:hover {
	color:#CCCCCC;
}

#siggtrygur:hover {
	color:#CCCCCC;
}

#malte:hover {
	color:#CCCCCC;
}

#lasse:hover {
	color:#CCCCCC;
}

#c_wüstenhagen:hover {
	color:#CCCCCC;
}

/* Container für das Formular, Position, Größe, Abstände */

#maincontentkontakt {
	float: left;
	width: 814px;
	padding-top: 20px;
	padding-left: 0px;
	text-align: left;
	padding-top: 40px;
}

#text {
	float:left;
	width:525px;
}

/* Fussraum is leer */

#footer {
	clear: both;
}

/* Breite der Textbereiche im Formular */

textarea {
	width:250px;
}

input {
	width:245px;
}