@font-face { 
	font-family: 'Winterthur';
	src: url('schrift/WinterthurCondensed-webfont.eot');
	src: url('schrift/WinterthurCondensed-webfont.eot?iefix') format('eot'),
	     url('schrift/WinterthurCondensed-webfont.woff') format('woff'),
	     url('schrift/WinterthurCondensed-webfont.ttf') format('truetype'),
	     url('schrift/WinterthurCondensed-webfont.svg#webfont') format('svg');
}
@font-face { 
	font-family: 'Lacuna';
	src: url('schrift/lacuna-webfont.eot');
	src: url('schrift/lacuna-webfont.eot?iefix') format('eot'),
	     url('schrift/lacuna-webfont.woff') format('woff'),
	     url('schrift/lacuna-webfont.ttf') format('truetype'),
	     url('schrift/lacuna-webfont.svg#webfont') format('svg');
}
body {
	font-size: 62,5%;
	margin: 0;
	padding: 0;
	background-color: black;
	background-color: hsl(50,45%,50%);
	background-color: white;
	background-color: hsl(0, 0%, 20%);
	xbackground-image: url('image/retostadelmann_steinway_02.jpg');
	xbackground-image: url('image/retostadelmann_facsimile.png');
	xbackground-size: 2000px;
	xbackground-repeat: no-repeat;
	xbackground-attachment: fixed;
	xbackground-attachment: scroll;
}

/* DIV oben das fix bleibt und nicht mitscrollt */
.obenfix {
	position: fixed;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	xbackground-image: url('image/retostadelmann_steinway_02.jpg');
	background-size: 100%;
	background-color: green;
	background-color: hsl(34,15%,58%);
}

.obenfix h1 {
	display: none;
}

.obenfix img {
	width: 20%;
	xdisplay: block;
	xmargin: 0;
	xpadding: 15px 0 15px 15px;
}


/* DIV oben das mitscrollt */
#obenscroll {
	margin: 0;
	padding: 15px 15px 15px 25px;
	height: auto;
	font-family: Lacuna, Verdana, Geneva, Helvetica;
	color: rgb(95%,95%,95%);
	sbackground-color: darkblue;
	sbackground-color: hsl(50,0%,10%);
	sbackground-color: hsl(0,0%,20%);
	background-color: hsl(34,15%,58%);
}

#obenscroll h1 {
	display: none;
}

#obenscroll img {
	width: 20%;
	sborder: 1px solid red;
}

a.sprachwahl_1 {
	xwidth: 36%;
	border: 1px solid yellow;
	xbackground-color: green;
	text-align: right;
	position: absolute;
	top: 15px;
	right: 0;
	xfloat: left;
	margin: 0;
	padding: 20px;
	font-family: Lacuna;
	color: black;
	text-decoration: none;
}

a.sprachwahl_1:hover {
	font-size: 1.1em;
}

.sprachwahl_2 {
	width: 100%;
	border: 1px solid blue;
	color: white;
	display: none;
	position: absolute;
	background-color: pink;
}

.sprachwahl_2 a {
	float: none;
	display: block;
	text-align: center;
	transition: 0s;
}

/*
.probe2 a:hover {
	background-color: orange;
}


a, a:link, a:visited {
	color: rgb(95%,95%,95%);
	text-decoration: none;
}
a:active, a:hover {
	color: yellow;
	text-decoration: none;
}
a:active {
	font-size: 1.1em;
}

*/

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background-color: #333;
  overflow: hidden;
	overflow: auto;
  position: fixed;
  bottom: 0;
  width: 100%;
	background-color: hsl(34,15%,58%);
	xborder: 1px solid red;
	font-family: Winterthur, monospace;
	
	
}

.navbar a.menu {
	font-size: 1.7em;
	xfont-size: 17px;
	letter-spacing: 0.1em;
	padding: 6px;
}
.navbar a {
	font-size: 1.8em;
	font-size: 2.1em;
	letter-spacing: 0.1em;
	padding: 14px 16px 14px 25px;
} 

/* Style the links inside the navigation bar */
.navbar a.menu, .navbar a, navbar a.menubeschreib {
  color: #f2f2f2;
  text-align: left;
  text-decoration: none;
	float: left;
	
}

a.icon {
	color: black;
}

 
.navbar a.menu {
	sdisplay: block;
	display: none;
}

.navbar.responsive a.menu {
    float: none;
    display: block;
    text-align: left;
	text-align: center;
}

.navbar.responsive a {
	float: none;
	display: block;
	text-align: left;
}

.navbar.responsive .menubeschreib {
display: none;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a green background color to the active link */
.navbar a.menu:hover {
  background-color: #04AA6D;
	background-color: hsla(240, 50%,6%, 0.2);
	background-color: hsla(240, 70%,3%, 0.4);
  color: white;
}
.navbar a.menu:active {
  xbackground-color: #04AA6D;
  color: yellow;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  xdisplay: none;
	sdisplay: block;
	xfloat: right;
}


#textinhalt, #textinhalt2 {
	margin: 0;
	padding: 25px;
	height: auto;
	xbackground-color: hsl(50,0%,7%);
	xbackground-color: hsla(50,0%,7%,0.7);
	font-family: Lacuna, Verdana, Geneva, Helvetica;
	color: rgb(95%,95%,95%);
	xxborder: 5px solid blue;
	background-color: orange;
	background-color: hsl(270,20%,20%);
	xbackground-color: hsl(48,20%,20%);
	xbackground-color: hsl(320,100%,10%);
	xbackground-color: hsl(34,15%,40%);
	xborder: 1px solid blue;
}

#textinhalt h1 {
	font-size: 150%;
}

#textinhalt h3.agb {
	margin: 0;
	padding: 0;
	line-height: 0.3;
}

#textinhalt.spende {
	background-color: transparent;
}

#textinhalt.spende q {
	font-style: italic;
}

#textinhalt.spende form {
	margin: 0 0 20px 0;
	
}

#textinhalt.spende td:first-child {
	xfont-weight: bold;
}

#textinhalt.spende td:not(:first-child) {
	padding: 0 0 0 20px;
}

#textinhalt.titelbalken {
	margin: 0;
	padding: 0 0 0 25px;
	background-color: green;
	 background-color: #04AA6D;
	xbackground-color: hsla(240, 70%,3%, 0.4);
	xborder: 1px solid red;
}

#textinhalt.medialinkbalken {
	margin: 0;
	padding: 0 0 0 25px;
	background-color: hsl(240,20%,40%);
}

#textinhalt.medialinkbalken:hover {
	background-color: hsl(240,20%,55%);
}

#textinhalt.medialinkbalken:active {
	background-color: hsl(240,20%,65%);
}


#textinhalt.titelbalken h2,
#textinhalt.medialinkbalken h2 {
	padding: 20px 0;
}

#textinhalt.titelbalken a h2,
#textinhalt.medialinkbalken h2 {
	text-decoration: none;
}


#textinhalt2 {
	background-color: darkgoldenrod;
}

#musiksamples {
	margin: 15px 15px 30px 15px;
	margin: 0;
	padding: 25px 25px 200px 25px;
	padding: 25px;
	xwidth: 33%;
	xwidth: 40%;
	xmin-width: 350px;
	height: auto;
	xbackground-color: hsl(50,0%,7%);
	xbackground-color: hsla(50,0%,7%,0.7);
	font-family: Lacuna, Verdana, Geneva, Helvetica;
	color: rgb(95%,95%,95%);
	xxborder: 5px solid blue;
	background-color: darkkhaki;
	background-color: orange;
	background-color: hsl(270,20%,20%);
}


#impressum {
	margin: 0;
	padding: 25px 0 100px 25px; 
	font-family: Lacuna, Verdana, Geneva, Helvetica;
	color: rgb(95%,95%,95%);
	font-size: 0.8em;
	background-color: transparent;
}



#impressum a, #impressum a:link, #impressum a:visited,
#textinhalt a, #textinhalt a:link, #textinhalt a:visited,
#musiksamples a, #musiksamples a:link, #musiksamples a:visited,
a.balkenlink {
	color: rgb(95%,95%,95%);
	text-decoration: none;
}
#textinhalt a.donatelink {
	text-decoration: underline;
}
#impressum a:active, #impressum a:hover,
#textinhalt a:active, #textinhalt a:hover,
#musiksamples a:active, #musiksamples a:hover {
	color: yellow;
	text-decoration: none;
}
#impressum a:active,
#textinhalt a:active,
#musiksamples a:active {
	font-size: 1.1em;
}


#textinhalt a.linkaktiv,
#musiksamples a.linkaktiv {
	color: yellow;
	text-decoration: none;
}

#musiksamples p.farbig {
	color: green;
}

#unten {
	position: fixed;
	bottom: 0;
	margin: 0;
	padding: 15px 0 15px 25px;
	width: 100%;
	height: auto;
	xbackground-color: darkblue;
	sbackground-color: hsl(50,0%,10%);
	background-color: hsl(34,15%,58%);
	xdisplay: none;
}


#navigation, #navigation_kleiner {
	margin: 0;
	padding: 25px 0 0 30px;
	width: 100%;
	height: auto;
	border: none;
	font-family: Winterthur, monospace;
	font-size: 1.5em;
	font-size: 3em;
	letter-spacing: 0.1em;
	word-spacing: 0.3em;
}

#navigation_kleiner {
	padding: 0;
	font-size: 2em;
	font-size: 1.6em;
}



img.portraitbild_hoch {
	margin: 0;
	padding: 0;
	width: 40%;
	xwidth: 760px;
	xmin-width: 380px;
	height: auto;
}

img.portraitbild_quer {
	margin: 0;
	padding: 0;
	width: 100%;
	xmin-width: 380px;
	height: auto;
}

img.portraitbild_eckig {
	margin: 0;
	padding: 0;
	width: 25%;
	height: auto;
	}

img.paypal {
	display: block;
	margin: 0;
	padding: 15px 0 20px 0;
	width: 180px;
}

img.twint {
	display: block;
	margin: 0;
	padding: 15px 0 20px 0;
	width: 600px;
}

img.donationquote {
	display: block; 
	width: 95px;
	xpadding-top: 15px;
}

@media screen and (max-width:785px) {
	img.portraitbild_hoch {
		padding: 0;
		width: 100%;
	}
	img.twint {
		width: 100%;
	}
}

@media screen and (max-width:600px) {
	#obenscroll {
		padding: 15px 0 15px 16px;
	}
	
	#obenscroll img {
		width: 34%;
		width: 38%;
		sborder: 1px solid red;
	}
	
	.navbar a.menu {
		font-size: 1.4em;
		xfont-size: 17px;
		letter-spacing: 0.1em;
		padding: 6px;
	}
	
	.navbar a {
		font-size: 2.1em;
		letter-spacing: 0.1em;
		padding: 14px 16px;
		padding: 0 16px 0 16px;
	}
	img.paypal {
		width: 40%;
	}
	#textinhalt.spende td:not(:first-child) {
	padding: 0 0 0 9px;
	}
}

@media screen and (max-width:640px) {	
	#textinhalt, #textinhalt2, #textinhalt.spende {
		margin: 0;
		padding: 25px 10px 25px 15px;
		xmin-width: 350px;
		xpadding: 25px 10px 100px 300px;
	}
	#textinhalt.titelbalken {
		padding: 0 0 0 15px;
	}
	#musiksamples {
		margin: 0;
		padding: 25px 10px 25px 15px;
		xmin-width: 350px;
	}
	#unten {
		padding: 15px 0 15px 15px;	
	}
	#impressum {
		padding: 25px 0 100px 15px; 
	}
	img.portraitbild_quer {
		padding: 0;
		width: 100%;
	}
	img.portraitbild_eckig {
		width: 50%;
	}
}

iframe {
	margin: 35px 0 0 0;
	width: 400px;
	height: 225px;
	xbackground-color: yellow;
}

@media screen and (max-width:960px) {
	iframe {
		width: 384px;
		height: 216px;	
		xbackground-color: blue;
	}
}


@media screen and (max-width:500px) {
	iframe {
		width: 280px;
		height: 157.5px;	
		xbackground-color: red;
	}
}

.audio {
	margin: 30px 0 30px 0;
	width: 100%;
}


#titelbild {
	margin: 0;
	padding: 0;
	border: none;
	width: 392px;
	height: 50px;
	background-image: url('image/titelname_whte.png');
	background-size: 100% auto;
}

.titelname {
	width: 390px;
	height: 55px;
}

@media screen and (max-width:640px) {
	.titelname {
	width: 100%;
	height: auto;	
	}
}




.bild {
	margin: 25px 0;
	width: 100%;
	height: auto;
}

article {
	line-height: 170%;
}


a.download {
	text-decoration: underline;
	line-height: 160%;
}
ul.blank {
	margin: 0 0 30px 0;
	padding: 0;
	list-style-type: none;
	line-height: 160%;
}
li h2 {
	margin: 0 0 5px 0;
	padding: 0;
}
li h3 {
	margin: 0;
	padding: 0;
}
#tabelleleben {
	margin: 15px 0 0 0;
	display: table;
	width: 100%;
}
#tabelleleben_links {
	margin: 0;
	padding: 0 20px 0 0;
	width: 35%;
	border: none;
	display: table-cell;
}
#tabelleleben_rechts {
	margin: 0;
	padding: 0;
	border: none;
	display: table-cell;
}
#tabelleleben p {
	margin: 0;
	padding: 0;
	line-height: 160%;
}
li.titel {
	list-style-type: none;
	letter-spacing: 0.2em;
	text-decoration: underline;
}
li.detail {
	list-style-position: inside;
	list-style-type: square;
}
li.zeilenabstand {
	list-style-position: inside;
	list-style-type: none;
	margin: 10px 0 0 0;
	padding: 0;
	text-decoration: underline;
	letter-spacing: 0.2em;
}

address {
	font-size: 1.2em;
}