/***************************************************************/
/* author: Katharina Gattermann
/* for website: www.lisadomin.de, www.lisadomin.com
/* last change: 2011-11-28
/***************************************************************/
/********************** Farbdefinitionen ***********************/
/***************************************************************/
/* helles Grau linke Spalte: #efefef
/***************************************************************/
/************* grundlegende Formatierungen ********************/
/***************************************************************/
* {
	margin: 0;
	padding: 0;
}
body {
	text-align: left;
	font-family: "alber-new-web", Helvetica, Arial, Sans-Serif;
	font-style: normal;	
	font-weight: 400;
	font-size:100%;			/* 100%=1em=16px (default) */
	line-height:1.375em; 	/* 16×1.375=22 */
	color: #000;
	background-color: #ffffff;
}
/********************* Überschriften **************************/
h1 {
    font-size: 1.125em;	
	font-weight: 400;
}
h2, h3, h4 {
    font-size: 1.125em;		
}
h3, h4 {
	font-weight: 400;
}
h4 {
	font-style: italic;
}
/*** Abstände der Überschriften zum Text und zueinander ***/
/* Abstand zwischen p und der Überschrift darüber: */
h1+p, h2+p, h3+p, h4+p { 	
	margin-top: 0.75em;
}
/* wenn die Überschrift zwischen zwei Absätzen positioniert ist */
p+h1, p+h2, p+h3, p+h4 { 				
	margin-top: 1em;
}
/* wenn zwei Überschriften aufeinander folgen, dann darf der Abstand
zwischen ihnen nicht so groß sein wie der zum Text */
h1+h2, h2+h3, h3+h4 {
	margin-top: 0.4em;
}
/************************* Fließtext ***************************/
p {
	font-size: 0.875em;		/* 14px:16px = 0.875 */
}
/* Formatierung für alle p außer dem ersten */
p+p {
	margin-top: 0.5em;
	text-indent: 1.75em;	/* Einzug erste Zeile // 28px:16px = 1.75 */
}
/************************** Bilder ****************************/
img {
	max-width: 100%;
	display: block;
	border: none;
}
/************************* Listen *****************************/
ol, ul {
	font-size: 0.875em;		/* 14px:16px = 0.875 */
}
ul {
	list-style-type: none;
}
/************************** Links ****************************/
a, 
a:link, 
a:visited, 
a:active {		
	text-decoration: none;
	color: #000000;
}
/***************************************************************/
/******************** Hauptelemente ****************************/
/***************************************************************/
#left_column {
	position: fixed;
	top: 0;
	left: 0;
	width: 11em;
	text-align: right;
	z-index: 100;
	background-color: #efefef;
	opacity: 0.95;
	height: 100%;
}
#left_column.start {
	background-color: transparent;
}
/***************************************************************/
#header {
	position: relative;
	top: 2.5em;
	padding: 0.5em 0.5em 0.7em 0.5em;
}
#header.start {
	background-color: #ffffff;
}
#header h1, #header h1 a {
	font-size: 1.1em;
	letter-spacing: 0.05em;
	line-height: 0.7em;
	font-style: italic;
	font-weight: 400;
}
/***************************************************************/
#nav {
	position: absolute;
	top: 10em;
	left: 0;
	width: 100%;
}
/***************************************************************/
#content_area {
	position: relative;
	width: auto;
	top: 0;
	padding: 11em 0 5em 15em;
}
#content_area.film,
#content_area.text {
	padding: 7em 0 5em 18em;
	width: 35em;
}
#content_area.teppich,
#content_area.foto {
	padding: 3em 5em 5em 18em;
}
.horizontal {
	float: left;
	margin-right: 100px;
}
/************************/
.horizontal img {	
	margin: 0 0 1em 0;
}
.teppich img,
.foto img {	
	margin: 2em 0 1em 0;
}
/************************/
.film h1 {
	font-size: 0.875em;
}
.horizontal h2, 
.horizontal a {
	font-weight: 400;
	display: inline;
	font-size: 0.875em;
}
.teppich a,
.foto a {	
	font-size: 0.875em;
}
.text h2 {
	font-size: 0.875em;		
	font-weight: 400;
	font-style: italic;
	text-decoration: underline;
}
/************************/
iframe {
	margin-bottom: 2em;
	background-color: #efefef;
}

/***************************************************************/
/******************* weitere Formatierungen ********************/
/***************************************************************/
a.zurueck {
	font-size: 0.875em;
	display: block;
	margin-top: 1em;
	font-style: italic;
}

/***************************************************************/
/************** Navigation 1. Ebene ****************************/
/***************************************************************/
#nav ul {								
	list-style-type: none;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1em;
}
#nav.start ul li {
	margin-bottom: 0.5em;
}
#nav ul li:hover ul, 					
#nav ul li ul:hover { 					
	display: block; 	
}
#nav ul li a, 
#nav ul li a:link, 
#nav ul li a:visited, 
#nav ul li a:active {			
	display: block;
	padding: 0.5em;
}
#nav.start ul li a, 
#nav.start ul li a:link, 
#nav.start ul li a:visited, 
#nav.start ul li a:active {			
	background-color: #ffffff;
}
/***************************************************************/
/************** Navigation 2. Ebene ****************************/
/***************************************************************/
#nav ul li ul {
	margin: 0em 0.5em 0.5em 0;
	font-size: 0.7em;
	font-style: italic;
}
#nav ul li ul li {
	margin-bottom: 0;
}
#nav ul li ul li a {
	display: block;
	font-weight: 400;
}
#nav ul li ul li a:hover {
}
#nav ul li ul li.active a {
	text-decoration: underline;
}
/***************************************************************/
/* clearfix-Methode, damit das DIV #contentarea die beiden 
Spalten umschliesst und den Footer korrekt unter der längeren
Spalte platziert */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { 
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}