* {				/* Keine Innen- oder Außenabstände */
margin: 					0;
padding: 					0;
}
body { 			/*Monitorbereich*/
	font-family: 			Ebrima, Arial, Verdana, sans-serif;
	font-size: 				12px;
	background-color:		#394b8d;
	}

@font-face { 	
	font-family: 			'cinzel-black-webfont';
							src: url('../Schriften/cinzel-black-webfont.woff') format('woff'); 
	font-weight: 			bold; /* Deklariert auch die cinzel bold */
	}
	
header,nav,footer,main,article,section {
	display:				block;
	}
		
#wrapper {		/* Seitenzentrierung + Higrubild vor body*/
	margin: 				0 auto;
	width:					1401px;
	min-height: 			1045px;
	background-image: 		url("../AM-Graphiken/Orchester-higru-2.jpg");
	/*background-repeat:		repeat repeat;	*/
	position: 				relative;
	}

#Uebergang { 	/*Transparenz nach oben*/
	clear:					all;
	float:					right;
	margin-right:			285px;
	width: 					900px;
	height: 				80px;	
	background-image: 		linear-gradient(transparent, #394b8d);
	-webkit-box-shadow: 	10px 15px 10px #1C1C1C; /* Safari,Chrome */ 
	-moz-box-shadow: 		10px 15px 10px #1C1C1C; /* firefox */
	-o-box-shadow: 			10px 15px 10px #1C1C1C; /* opera */
	-ms-box-shadow: 		10px 15px 10px #1C1C1C; /* Internet Explorer */ 
	box-shadow:				10px 15px 10px #1C1C1C;
	}	
	
header {
	clear:					all;
	float:					right;
	margin-right:			285px;
	height: 				200px;
	width: 					900px;
	background-color:		#394b8d;
	z-index: 				1;
	-webkit-box-shadow: 	10px 10px 10px #1C1C1C; /* Safari,Chrome */ 
	-moz-box-shadow: 		10px 10px 10px #1C1C1C; /* firefox */
	-o-box-shadow: 			10px 10px 10px #1C1C1C; /* opera */
	-ms-box-shadow: 		10px 10px 10px #1C1C1C; /* Internet Explorer */ 
	box-shadow:				10px 10px 10px #1C1C1C;
	border-bottom-right-radius:	15px;
	border-bottom-left-radius:	15px;
	}

	header img{	/* ArcheMusica-Logo - 
				   Absolut positionierte Blöcke für Inhalte mit fester Höhe, 
				   z.B. für Header o. Navi */
	position:				absolute;
		top:				-10px;
		left:				670px;
	height: 				1000px;
	width: 					1300px;	
	}

	header h2 { /*Logounterschrift : Musiklehrer Gemeinschaft */
		position:			absolute;
			top:			220px;
			left:			770px;
		font-size: 			20px;
		color: 				#330066;
		text-align:			center;
		transform: 			rotate(-3deg);
		font-family: 		cinzel-bold-webfont;
		}
		
	header h2 span:first-of-type {/* Y in Freyung vergrößern */
		display: 			inline-block;/* für transform */
		text-shadow: 		1px 1px 3px #FFFF99;
		transform: 			scaleY(1.4) scaleX(1.4);
		margin-left:		1px;/* Abstand links vom Y vergrößern */
		}			
		
	header h2 span:last-of-type {/* Abstand rechts vom Y vergrößern */
		margin-left:		2px;
			}						
		
	header h3 { /* Bild: Musik weht ... */
		height:				150px;
		transform: 			rotate(-5deg);
		margin-left: 		-80px;
		
		background-image: 	url("../AM-Graphiken/Notenwelle+Text-web.png");
		background-repeat: 	no-repeat;
		background-size: 	150% 330%;		
		}			
		
nav {/* Kompletter vertikaler linker Navigationsbereich*/
	position:				absolute;
	margin-top:				408px;
	margin-left:			245px;
	width:					240px;
	height:					360px;
	z-index: 				5;						
	}
	
	nav ul{ /* Gilt für beide Navilisten, sowohl der 1. als auch 2. Ebene*/
		list-style-type: 	none;
		cursor:				pointer;
		}
	
	nav ul li a{/* Um alle a-Elemente wie Blockelemente behandeln zu können*/
		display:			block;
		}
		
	nav #navli1 li a{/* a-Formatierungen für beide Navilisten*/
		height:				47px;
		margin-bottom:		20px;
		text-decoration:	none;
		font-family: 		Ebrima;		
		color:				#fff;
		padding-left:		5px;
		text-align:			left;
		border-radius:		5px;
		background-image: 	linear-gradient(transparent, #394b8d);
		}
	
	nav #navli1 li a:hover {
		width:				220px;
		margin-left:		-15px;
		background-color:	#6f9fcf;	
		color:				#000;
		text-shadow:		1px 1px 2px #fff;
		transition: 		all 0.8s ease-in-out;
		}

	nav ul li a:hover p{
		color:				#000;
		text-shadow:		1px 1px 2px #fff;
		}	
		
		
	nav ul li a p{/* Link-Überschriften*/
		font-size: 			14px;
		letter-spacing: 	0.05em;
		text-shadow:		1px 1px 2px #000;
		}
		
	nav ul li a span{/* Link-Untertexte*/
		font-size: 			12px;
		letter-spacing: 	0.05em;
		padding-left:		10px;
		}	
		
	nav ul li:nth-child(1) img{ /* 1.Link roter Unterstrich */
		position: 			absolute;
			top:			30px;	
		width:				205px;
		height:				25px;
		}	
	
	nav ul li:nth-child(2) img{/* 2.Link oranger Unterstrich */
		position: 			absolute;
			top:			95px;
		width:				205px;
		height:				25px;
		}
	
	nav ul li:nth-child(3) img{/* 3.Link gelber Unterstrich */
		position: 			absolute;
			top:			162px;
		width:				205px;
		height:				25px;
		}
		
	nav ul li:nth-child(4) img{/* 4.Link gruener Unterstrich */
		position: 			absolute;
			top:			229px;
		width:				205px;
		height:				25px;
		}

	nav ul li:nth-child(5) img{/* 5.Link blauer Unterstrich */
		position: 			absolute;
			top:			296px;
		width:				205px;
		height:				25px;
		}	
		
	nav ul li:nth-child(6) img{/* 6.Link roter Unterstrich */
		position: 			absolute;
			top:			366px;
		width:				205px;
		height:				25px;
		}	
	
	nav ul .submenue {	/* Untermenü */
		position:			relative;/*Um Untermenü absolute dazu zu fixieren */
		}	
		
	nav ul .submenue ul{
			position:		absolute;/*Untermenüliste aus Textfluss nehmen + 
							relativ zum übergeordneten Link (Klasse .submenue) absolut positionieren*/
				top:		15px;
				left:		200px;
			width:			365px;		
			z-index:		20;/*hoher Wert,damit es stets über allem liegt*/
			display:		none;/*Untermenü im Regelfall verstecken */
			}	
	
	nav ul .submenue ul li a{/*li zu formatieren reicht nicht, da a auf li drauf liegt und li verbirgt */
			display:		block;
			border-radius:	5px;
			background-color: #6d598e;
			box-shadow:		10px 10px 10px #1C1C1C;
			font-weight:	bold;
			height: 		25px;
			text-indent: 	18em;/* 1.Zeile nach rechts rücken */
				}	
	
	nav ul .submenue:hover ul{/*Untermenü wird erst beim Überfahren mit der Maus angezeigt, 
							d.h. die Klasse .submenue wird im :hover-Zustand angesprochen, 
							und das im Selektor folgende ul wird dann sichtbar gemacht */
				display:	block;/*Untermenü zeigen */
				}		
	
	nav ul .submenue:hover ul li{
				height: 	45px;
				}		
	
main {/* -- nur 1 Inhaltsbereich pro Webseite ----- */
		clear:				all;
		float:				right;
		margin-right:		285px;
		margin-top:			20px;
		width:				830px;
		min-height:			565px;
		z-index: 			1;
		border-radius:		15px;
		padding-left:		70px;
		padding-top:		40px;
		padding-bottom:		20px;
		background-color: 	#394b8d;
		-webkit-box-shadow: 10px 10px 10px #1C1C1C; /* Safari,Chrome */ 
		-moz-box-shadow: 	10px 10px 10px #1C1C1C; /* firefox */
		-o-box-shadow: 		10px 10px 10px #1C1C1C; /* opera */
		-ms-box-shadow: 	10px 10px 10px #1C1C1C; /* Internet Explorer */ 
		box-shadow:			10px 10px 10px #1C1C1C;
		}

main article h2{ /* Überschrift über Haupttext */
		width:				520px;
		margin-left:		220px;
		margin-top:			20px;
		margin-bottom:		20px;
		font-family: 		Ebrima;
		font-weight: 		bold; 
		font-size: 			20px;
		letter-spacing: 	0.07em;		
		color: 				#FFF;	
		text-shadow: 		2px 1px 2px #000;
		text-align:			left;
		}			
	
	
main article p{ /* Haupttext */
		font-family: 		Ebrima; 
		text-shadow:		1px 1px 2px #000;
		text-align: 		justify;
		font-size: 			16px;
		color: 				#FFF;
		line-height:		25px;
		padding-left:		220px;
		padding-right:		130px;
		}		

main article p span{ /* Arche Musica hervorheben */
		font-family: 		cinzel-black-webfont;
		text-shadow:		2px 1px 2px #000;
		}
					/* Arche Musica Buchstaben färben */
main article p span:nth-child(1){
		color:				rgb(204,7,30);/* rot */
		}
main article p span:nth-child(2){
		color:				rgb(234,100,12);/* orange */
		}
main article p span:nth-child(3){
		color:				rgb(249,178,0);/* gelb */
		}
main article p span:nth-child(4){
		color:				rgb(172,199,5);/* gruen */
		}		
main article p span:nth-child(5){
		color:				rgb(0,125,194); /*blau */
		text-shadow: 		1px 0.3px 1px #000;
		}				
main article p span:nth-child(6){
		color:				rgb(204,7,30);/* rot */
		}
main article p span:nth-child(7){
		color:				rgb(234,100,12);/* orange */
		}
main article p span:nth-child(8){
		color:				rgb(249,178,0);/* gelb */
		}
main article p span:nth-child(9){
		color:				rgb(172,199,5);/* gruen */
		}		
main article p span:nth-child(10){
		color:				rgb(0,125,194); /*blau */
		text-shadow: 		1px 0.3px 1px #000;
		}
main article p span:nth-child(11){
		color:				rgb(204,7,30);/* rot */
		}

#BlauAnschluss {
		clear:				all;
		float:				right;
		margin-right:		285px;
		margin-top:			20px;
		width:				900px;
		height:				40px;
		z-index: 			20;
		border-top-right-radius: 15px; /*Ecken abrunden*/
		border-top-left-radius:	 15px; /*Ecken abrunden*/
		background-color:	#394b8d;
		box-shadow:			11px 5px 10px #1C1C1C;
		}		
	
footer {/* ein footer pro Webseite */
		clear:				all;
		float:				right;
		margin-right:		285px;
		z-index: 			10;
		width:				900px;
		height:				60px;
		background-image: 	linear-gradient(#394b8d, transparent);
		-webkit-box-shadow: 10px 10px 10px #1C1C1C; /* Safari,Chrome */ 
		-moz-box-shadow: 	10px 10px 10px #1C1C1C; /* firefox */
		-o-box-shadow: 		10px 10px 10px #1C1C1C; /* opera */
		-ms-box-shadow: 	10px 10px 10px #1C1C1C; /* Internet Explorer */ 
		box-shadow:			10px 10px 10px #1C1C1C;
		}	
			
	footer ul{
		width:				425px;
		margin-left:		370px; 
		margin-top:			-1px;
		list-style-type: 	none;
		}
		
	footer ul li{
		float:				left;/* ordnet Listenelemente horizontal nebeneinander an */
		width:				110px;
		height:				25px;
		margin-right:		25px;
		background-color:	#394b8d;
		}
			
	footer ul li a{/*  gemeinsame Formatierungen a*/
		display:			block; /* Linkfelder füllen jetzt als Blockelemente 
						ihren gesamten Inhalt. D.h. die volle Elternelement-Breite*/
		text-decoration:	none;
		text-align:			center;
		font-family: 		Ebrima;
		font-weight:		600;	
		color:				#000;
		text-shadow:		0.5px 0.3px 1px #fff;	
		font-size: 			14px;
		letter-spacing: 	0.05em;
		padding-bottom:		3px;
		border-radius:		5px;
		background-image: 	linear-gradient(transparent, #394b8d);
		-webkit-box-shadow: 7px 5px 10px #1C1C1C; /* Safari,Chrome */ 
		-moz-box-shadow: 	7px 5px 10px #1C1C1C; /* firefox */
		-o-box-shadow: 		7px 5px 10px #1C1C1C; /* opera */
		-ms-box-shadow: 	7px 5px 10px #1C1C1C; /* Internet Explorer */ 
		box-shadow:			7px 5px 10px #1C1C1C;
		}
		
	footer ul li a:hover {
		background-color:	#6f9fcf;
		width:				124px;
		height:				18px;
		margin-left:		-7px;
		text-shadow:		0.5px 0.3px 1px #000;	
		color:				#FFFF00;
		transition: 		all 0.8s ease;
		}	
	
	footer ul li:nth-child(1) a{/* 1.Linkrand rot färben */
		border-right:		3px solid rgb(204,7,30);
		border-bottom:		3px solid rgb(204,7,30);		
		}

	footer ul li:nth-child(2) a{/* 2.Linkrand orange färben */
		border-right:		3px solid rgb(234,100,12);
		border-bottom:		3px solid rgb(234,100,12);
		}

	footer ul li:nth-child(3) a{/* 3.Linkrand gelb färben */
		border-right:		3px solid rgb(249,178,0);
		border-bottom:		3px solid rgb(249,178,0);
		}