/*
design by
www.benedikt-scherer.de
c2009
*/

/* ========================================== # 
 ################### UNDO #################### 
# ========================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{ margin:0;padding:0; }
table{ border-collapse:collapse;border-spacing:0; }
fieldset,img{ border:0; }
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6{ font-size:100%; }
q:before,q:after{ content:''; }

/* ========================================== # 
 ################### HTML #################### 
# ========================================== */

html , body {
	color:#fff;
	font: 12px/1.2 Helvetica, sans-serif;
	margin:0;
	padding:0;
	text-align:left;
	height:100%;
	background:#000;
}

/* 
ABSATZ & ÜBERSCHRIFTEN
*/
p{ margin:20px 0px 0px 5px; }

h1{	
	font: 58px/0.8 Georgia, serif; 
	color:#000; 
	letter-spacing: -5px;
	margin:0px; 
	}

h2{	
	font: 45px/1.6 Georgia, serif; 
	color:#000; 
	letter-spacing: -5px;
	}

h3{ 
	font: 12px/1.2 Georgia, serif; 
	color:#fff; 
	font-weight:bold; 
	margin:0px 0px 5px 5px ; 
	}  

	
/* 
SCHRIFTAUSZEICHNUNG
*/ 
i{ 
	font: 12px/1.2 Georgia, serif; 
	font-style:italic; 
	}
big {  }
small{  }
hr {  }

/* 
SCHRIFTAUSRICHTUNG
*/
.clear{ clear:both; }
.left{ float:left; }
.right{ float:right; }

/* 
LINKS
*/ 
a:link, a:active, a:visited { color:#fff; text-decoration:none; padding:0px 2px; }
a:hover{ background:#000; }
:focus { -moz-outline-style: none; }



/* ========================================== # 
 ################ CONTAINER RECHTS ########### 
# ========================================== */

#links{
	position:fixed;
	top:0px;
	left:0px;
	width:361px;
	height:100%;
	background:url(img/navi-bg.png) 0 0 no-repeat;
	}

/* ========================================== # 
 ################ NAVIGATION ################ 
# ========================================== */
	ul#navigation{
		position:relative;
		top:165px;
		left:30px;
		width:184px;
		background:#000;	
		}
	ul#navigation li{  }
	ul#navigation li a{ display:block; width:184px; height:34px; }
	ul#navigation li a.start{ background:url(img/start_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.start:hover{ background:url(img/start_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.rundgang{ background:url(img/rundgang_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.rundgang:hover{ background:url(img/rundgang_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.ausstellung{ background:url(img/ausstellung_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.ausstellung:hover{ background:url(img/ausstellung_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.workshops{ background:url(img/workshops_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.workshops:hover{ background:url(img/workshops_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.fuehrung{ background:url(img/fuehrung_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.fuehrung:hover{ background:url(img/fuehrung_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.kontakt{ background:url(img/kontakt_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.kontakt:hover{ background:url(img/kontakt_184x34.gif) 0 -34px no-repeat; }
	ul#navigation li a.impressum{ background:url(img/impressum_184x34.gif) 0 0 no-repeat; }
		ul#navigation li a.impressum:hover{ background:url(img/impressum_184x34.gif) 0 -34px no-repeat; }


/* ========================================== # 
 ################ CONTAINER LINKS ############ 
# ========================================== */

#rechts{
	width:100%;
	height:100%;
	}
	
	#rechts.start{ background:#c9d30e url(img/content/start-bg.jpg) right bottom no-repeat; }
	#rechts.rundgang{ background:#D3380E url(img/content/rundgang-bg.jpg) right bottom no-repeat; }
	#rechts.ausstellung{ background:#0E99D3 url(img/content/ausstellung-bg.jpg) right bottom no-repeat; }
	#rechts.workshops, #rechts.workshops-handsatz{ background:#D3790E url(img/content/workshop-bg.jpg) right bottom no-repeat; }
	#rechts.fuehrung{ background:#D30E79 url(img/content/fuehrung-bg.jpg) right bottom no-repeat; }
	#rechts.kontakt{ background:#fff url(img/content/kontakt-bg.jpg) right bottom no-repeat; }
	#rechts.impressum{ background:#959595; }
	
	#zeitleiste{
		float:left;
		width:340px;
		height:100%;
		background:#000;
		}

	#content{ 
		margin:0px 60px 0px 420px; /* Textabstand LINKS / RECHTS */
		padding:140px 0px 0px 0px; /* Textabstand OBEN / UNTEN */
		border:0px solid #f00;
		}

	.btn-back{ text-align:right; margin:83px 18px 0px 0px; border:0px solid #f00; font: 12px/1.2 Georgia, serif; }
		

		
/* ========================================== # 
 ################ MAIN INHALTE ################ 
# ========================================== */


/* 
STARTSEITE
*/
#rechts.start #content h1{ 
	background:url(img/content/headline_504x109.gif) 0 0 no-repeat;
	width:504px;
	height:109px;
}

	#rechts img.content-img{/* Image unten rechts auf STARTSEITE */
	position:relative;
	bottom:-125px;
	right:-455px;
	border:0px solid #fff;
	}
		
/* 
WORKSHOPS
*/
#rechts.workshops #content ul{ list-style:disc; color:#000; } 
#rechts.workshops #content ul ol{ font: 12px/1.2 Georgia, serif; color:#fff; font-weight:bold; margin:0px 0px 10px 0px; } 
#rechts.workshops #content ul li{ margin:2px 0px 3px 0px; } 

	#rechts.workshops-handsatz p a{ background:#fff; color:#D3790E;}
		#rechts.workshops-handsatz p a:hover{ background:#000; color:#fff;}

/* 
KONTAKTFORMULAR
*/
#rechts.kontakt{ color:#000; }

#rechts.kontakt p{ margin:0px 0px 7px 0px; }
#rechts.kontakt p select{ 
	border:1px solid #000; 
	width:219px; 
	height:19px; 
	padding:-2px 0px 0px 3px; 
	}
#rechts.kontakt p input{ 
	border:1px solid #000; 
	width:197px; 
	height:17px; 
	padding:1px 0px 0px 3px; 
	}
#rechts.kontakt p input.plz{ width:35px; } 
#rechts.kontakt p input.ort{ width:154px; } 

#rechts.kontakt p input.senden{ 
	width:125px; 
	height:30px; 
	background:#000; 
	color:#fff; 
	border:0px; 
	padding:0px;
	} 
#rechts.kontakt p input.loeschen{ 
	width:125px; 
	height:30px; 
	background:#f00; 
	color:#fff; 
	border:0px; 
	padding:0px;
	} 
#rechts.kontakt p input.senden:hover, #rechts.kontakt p input.loeschen:hover{ font-weight:bold; }