@charset "utf-8";
/* CSS Document  für erna-kunst.html */

/*-------------------------------style für alle Seiten -------------------*/
body {
	font-family:open sans, sans-serif;
	background-color:#061127;	
	}

#container{
	background-color:#061127;
	margin:0 auto;
	color:#ffffff;
	font-size:20px;
	}
													
#logoblock {									/* Logo: Erna-Kunst */		
	width:33%;
	float:left;
	background-color:#061127;
	font-family:open sans, sans-serif;
	color:ffffff;
	font-size:20px
	border:10px;
	}	
																																															
#logoblock img {
	width:80%;
	float:left;
	margin-right:3%;
	}

#inhalt {										/* Inhaltblock rechts des Logoblocks - Verhältnis 2 Drittel - 1 Drittel */														
	font-family:open sans, sans-serif;
	width:67%;
	float:right;
	background-color:#061127;
	font-size:20px;
	color:#ffffff;
	float:right;
	}
													
#navigation {					/* Start-Portrait-Bilder-Maltherapie-Kontakt-Impressum */
	border-top:1px solid #fff;
	font-family:open sans, sans-serif;
	float:right;
	display:block;
	width:67%;
	font-size:22px;
	background-color:#061127;
	color:#ffffff;
	text-align:right;
	}
	
#navigation a {					/* Link Navigation: Eigenschaften */
	color:#ffffff;
	text-decoration:none;
	}
	
	
#erna {							/* Portrait:  Titel mit Photo von Erna */	
	font-family: open sans, sans-serif;
	color: #FFFFFF;
	width: 67%;
	}

.ernabild {
	width:25%;
	top:20%;
	float:left;
	margin-right:20px;
	}

#werdegang {
	color:#ffffff;
	width:100%;
	line-height:100%;
	}

.textnebenbild {
	padding-left:20%;
	margin-left:20px;
	}

#textblock {
	font-family:open sans, sans-serif;
	float:right;
	margin-right: 2%;
	width:67%;
	color:#ffffff;
	text-align:right;
	}
														
							
.bildtext {						/* Bilder: Bildtext zu Bilder_600 2011-2012-2013-2014 */
	font-family: open sans, sans-serif;
	font-size: 18px;
	color: #ffffff;
	width: 100%;
	}


.wechselbilder {				/* Bilder: ganze Bilder der 4 Bilderstreifen */
	height:300px;
	width:300px;
	overflow:hidden;
	position:fixed;
	right:15%;
	top:92px;
	}

.bilder_start img {				/* Startseite; Absand zwischen den Bildern */									
	padding-right: 2%;
	}
									
.jahrzahl a {					/* Bilder 2011 - Bilder 2014 */
	color:#ffffff;
	text-decoration:none;
	}	
												
.einrücken {					/* Kontakt: einrücken mit den Eingabefeldern */		
	color:#FFFFFF;
	width:67%;
	float:right;
	}
											
.link a {							/*  Malatelier: Link zu Kursangebot und Mail senden */
	color:#B4E7E8;
	text-decoration:none;
	}	

.bilder_malatelier {
	width:100%;
	padding-right:2%;
	}

.bilder_malatelier img {			/* Maltherapie: Abstand zwischen den vier Bildern  */
	padding-right: 2%;
	}
	
												
.bilderstreifen img {				/* Bilder: Bilderstreifen mit Jahrzahlen 2011-2014 */	
	padding-right: 2%;
	}
												
.wechselbilder {					/* 4 Bilder im Container */	
	height:300px;
	width:300px;
	overflow:hidden;
	position:fixed;
	right:15%;
	top:92px;
	}

.wechselbilderlinks {
	position:fixed;
	right:15%;
	top:392px;
	}

.bildcontainer {					/* webkit für die vier Bilder im Bildcontainer  */
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: relative;
	border-radius: 1px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 10px #333;
	box-shadow: 0px 0px 10px #333;
	}		
	
.bilder {						/* Bilder: webkit für die 4 Bilder im Bildcontainer */		
	width: 1200px; /*Breite 4 Bildern*/			
	height: 300px;
	position: absolute;
	left:0px;
	-webkit-transition: all 1s;
	transition: all 1s;
	}	
	
.bilder img {					/* webkit: Position für die vier Bilder */							
	float: left;
	}	
	
								/* webkit: Zahlen unterhalb der vier Bildstreifen */	
a#eins,  a#zwei, a#drei,  a#vier {				
	margin-top: 5px;
	color: white;
	padding: 5px;
	text-decoration: none;
	display: inline-block;
	}	
	
.textarea {						/* Formular: Textfeld */
	font-family: Gill Sans, sans-serif;
	font-size: 15px;
}
	
.klein {						/* Formular: Schriften */
	width:100%;
	font-size:12px;
}	

.mittelklein {					/* Formular: Schriften */	
	font-size:15px;
	}	

.mittelgross {					/* Formular: Schriften */
	font-size:18px;
	}	
											
#textblock 3 {					/* Malatelier: Text	*/
	font-family: open sans, sans-serif;
	color: #FFFFFF; 
	width: 100%;
	}
	
#textblock 2 {					/* Impressum: Text */	
	font-family:open sans, sans-serif;
	width:67%;
	float:right;
	color:#ffffff;
	font-size:16px;
	}