/*Typenselektoren*/

* {
	font-family: TakaoPGothic, Swasdee, Loma, Trebuchet MS, Helvetica, Times; 
	border-radius: 5px;	
}
#bgi1 { 
	min-width: 100%;
	min-height: 1000px;
	background-size: cover;
	/*background-image: url("./pictures/klavier_2_orange.jpg");*/
	background-image: url("./pictures/klavier_1.jpg");
	background-color: #696969;
	background-position: top;
	background-repeat: no-repeat;
	/*background-attachment: fixed; 	-Hintergrundbild scrollt nicht mit!!*/
}
#bgi2 { 
	min-width: 100%;
	min-height: 1000px;
	background-size: cover;
	/*background-image: url("./pictures/webklavier_3_orange_b.jpg");*/
	background-image: url("./pictures/klavier_2.jpg");
	background-color: #696969;
	background-position: top;
	background-repeat: no-repeat;
	/*background-attachment: fixed; 	-Hintergrundbild scrollt nicht mit!!*/
}
body {
	/*position: relative;
	background-color: rgba(245,245,220,1);*/	
}

header {
	color: whitesmoke;
	margin-left: 10%;
	margin-right: 10%;
	text-align: left;
	font-size: 25px;
}
h2 {
	font-size: 25px;
	text-align: left;
	border-radius: 0;
	border-bottom: 1px solid orange;	
}
img {
	box-shadow: 6px 6px 3px grey;
}
nav {
	margin-right: 10%;
	margin-top: 1%;
	margin-bottom: 5%;
	border: 0;
}
nav a {
	color: black;
	font-size: 20px;
	padding: 0.2em 0.6em;
	text-decoration: none;
	border: 1px solid grey;
	border-bottom: 1px solid darkgrey;
	border-right: 1px solid darkgrey;
	background-color: rgba(245,245,220,0.8);
	margin-top: 1%;
	margin-bottom: 12%;
}
nav a:hover{
	background-color: silver;
	border: 1px solid darkgrey;
	border-bottom: 1px solid black;
	border-right: 1px solid orange;
}

article {	
	/*Zeilenabstand:*/
	line-height: 130%; /*oder 1.3em**/
	width: 70%;
	padding-left: 5%;
	padding-right: 5%;
	margin-left:10%;
	margin-right: 10%;
	margin-top: 4.5%;	
	background-color: rgba(255,255,255,0.8);
	overflow: auto;
}
table {
	width: 100%;
}
/*Klassenselektoren*/

/*id-Selektoren*/
 #marcus {
	width: 267px;
	height:406px;
	

} 
#ohne_Noten {
	color: blue;

}
#ohne_Noten:hover {
	font-style: italic;	
	}
#transkriptionen {
	color: blue;
}
#transkriptionen:hover {
	font-style: italic;
}
#li_1 {
	float: right;
	display: inline;
	margin-left: 6px;	
}
#tbl_left {
	padding-top: 3%;
	width: 65%;
	overflow: auto;
}
#tbl_right {
	padding-top: 5%;
	padding-bottom: 10%;
	padding-left: 5%;
}
#tbl2_left {
	padding-top: 3%;
	padding-bottom: 25%;
	width: 60%;
	overflow: auto;
}
#tbl2_right {
	padding-top: 5%;	
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
	height: 20%;
}
#tbl3_left {
	padding-top: 3%;
	padding-bottom: 35%;
	width: 50%;
	height: 10%;
	overflow: auto;
}
#tbl3_right {
	padding-top: 5%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
	height: 20%;
}
#seitenueberschrift {
	color: white;
}
#h1_art4_5_6 {
	padding-top: 3%;
}
#p_art4_5_6 {
	padding-bottom: 3%;
}

/*Version für Tablet*/
@media only screen and (max-width: 801px)
{

* {
	font-family: TakaoPGothic, Swasdee, Loma, Trebuchet MS, Helvetica, Times; 
	border-radius: 5px;	
}
#bgi1 { 
	min-width: 100%;
	min-height: 1000px;
	background-size: cover;
	/*background-image: url("./pictures/klavier_2_orange.jpg");*/
	background-image: url("./pictures/klavier_1.jpg");
	background-color: #696969;
	background-position: top;
	background-repeat: no-repeat;
	/*background-attachment: fixed; 	-Hintergrundbild scrollt nicht mit!!*/
}
#bgi2 { 
	min-width: 100%;
	min-height: 1000px;
	background-size: cover;
	/*background-image: url("./pictures/webklavier_3_orange_b.jpg");*/
	background-image: url("./pictures/klavier_2.jpg");
	background-color: #696969;
	background-position: top;
	background-repeat: no-repeat;
	/*background-attachment: fixed; 	-Hintergrundbild scrollt nicht mit!!*/
}
body {
	/*position: relative;
	background-color: rgba(245,245,220,1);*/	
}

header {
	color: whitesmoke;
	margin-left: 5%;
	margin-right: 5%;
	text-align: left;
	font-size: 25px;
}
h2 {
	font-size: 25px;
	text-align: left;
	border-radius: 0;
	border-bottom: 1px solid orange;	
}
img {
	box-shadow: 6px 6px 3px grey;
}
nav {
	margin-right: 5%;
	margin-top: 1%;
	margin-bottom: 8%;
	border: 0;
}
nav a {
	color: black;
	font-size: 17px;
	padding: 0.2em 0.2em;
	text-decoration: none;
	border: 1px solid grey;
	border-bottom: 1px solid darkgrey;
	border-right: 1px solid darkgrey;
	background-color: rgba(245,245,220,0.8);
	margin-top: 1%;
	margin-bottom: 12%;
}
nav a:hover{
	background-color: silver;
	border: 1px solid darkgrey;
	border-bottom: 1px solid orange;
	border-right: 1px solid orange;
}

article {	
	/*Zeilenabstand:*/
	line-height: 130%; /*oder 1.3em**/
	width: 80%;
	padding-left: 5%;
	padding-right: 5%;
	margin-left:5%;
	margin-right: 5%;
	margin-top: 4.5%;	
	background-color: rgba(245,245,220,0.8);
	overflow: auto;
}
table {
	width: 100%;
	margin-right: 5%;
}
/*Klassenselektoren*/

/*id-Selektoren*/
#marcus {
	width: 190px;
	height: 289px;
}
#ohne_Noten {
	color: blue;

}
#ohne_Noten:hover {
	font-style: italic;	
	}
#transkriptionen {
	color: blue;
}
#transkriptionen:hover {
	font-style: italic;
}
/*Achtung hier ist die Navigation (Liste)*/
#li_1 {
	float: right;
	display: inline;
	margin-left: 2px;	
}
#tbl_left {
	padding-top: 3%;
	width: 55%;
	overflow: auto;
}
#tbl_right {
	padding-top: 1%;
	padding-bottom: 70%;
	padding-left: 3%;

}
#tbl2_left {
	padding-top: 1%;
	padding-bottom: 5%;
	width: 60%;
	overflow: auto;
}
#tbl2_right {
	padding-top: 5%;	
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 1%;
	height: 20%;
}
#tbl3_left {
	padding-top: 3%;
	padding-bottom: 35%;
	width: 50%;
	height: 10%;
	overflow: auto;
}
#tbl3_right {
	padding-top: 5%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
	height: 20%;
}
#seitenueberschrift {
	color: white;
}
#h1_art4_5_6 {
	padding-top: 3%;
}
#p_art4_5_6 {
	padding-bottom: 3%;
}
}