@charset "utf-8";

body {
	/*background-image:url(../hintergrund_b_w2.png);*/
	background-image: url(/hintergrund_bb_w.jpg);	
	background-repeat:repeat-x;
	font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
	margin-left:20px;
}
/*
<h1>Flexbox  5 - flex-flow</h1>
<main>
	<div class="flex-container">
		<p class="flex-item">1 llklülpklk jkohiuguzg z8tzuzvzu jkpjoknojhg</p>
		<p class="flex-item">2</p>
		<p class="flex-item">3</p>
		<p class="flex-item">4</p>
		<p class="flex-item">5</p>
	</div>
	<div class="flex-container">
		<section class="flex-item">
			<h2>Flexbox</h2>
			<p>Flexbox ist eine moderne und einfache Möglichkeit, responsive und flexible Layouts
				zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie <code>position</code>,
				<code>float</code> oder <code>clear</code> nutzen zu müssen. </p>
		</section>
		<section class="flex-item">
			<h2>Was kann Flexbox?</h2>
			<p>Flexbox verzichtet auf feste Breiten, wobei sich das flexible Element an den tatsächlich
				verfügbaren Platz anpasst, indem es die Leerräume zwischen den Elementen gleichmäßig
				verteilt. </p>
		</section>
		<section class="flex-item">
			<h2>flexibler Container</h2>
			<p>Flexbox benötigt nur einen CSS-Regelsatz:</p> <pre><code>.flex-container {
  display: flex;
}</code></pre> </section>
	</div>
</main>


img {
	border:none;
	-webkit-box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.7);
	-moz-box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.7);
	box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.7);
	border-radius: 8px;
}
*/
.flex-container {
	display: flex;
}

.flex-item {
	border: 0px solid;
	border-radius: .5em .5em;
	margin: .5em;
	padding: .5em;
/*		background-color:#FFFFFF;
background: #ffebe6;*/
}

p.flex-item {
	font-weight: bold;
	text-align: center;
}
.flex-item:nth-of-type(1) {
	/*border: 1px solid;
	width:160px;*/
	background-color:#FFFFFF;
	text-align:center;
	max-width:160px;
	min-width:160px;
	/*background: #fdfcf3;
	-webkit-box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.7);
	-moz-box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.7);
	box-shadow: 10px 10px 16px -12px rgba(0,0,0,0.7);*/
	border-radius: 8px;

}

.flex-item:nth-of-type(2) {
/*	background-color:#FFFFFF
	background: #fdfcf3;
}

.flex-item:nth-of-type(3) {
/*	background: #ebf5d7;
}

.flex-item:nth-of-type(4) {
/*	background: #e6f2f7;
}

.flex-item:nth-of-type(5) {
/*	background: hsla(277, 53%, 73%, 0.3);*/
}




.Stil_logo {z-index:99;
	font-size: 10pt; 
	visibility: inherit;
	border:none;
	text-align:left;
	background-color:#F6F6F6;
	border-radius: 8px;
	padding:50px;
	height:auto;
}
.Stil_leiste {
	border:none;
	background-color:#FFFFFF;
	border-radius: 8px;
	border-color:#FFFFFF;
	padding:1px;
	height:auto;
}

a.weiter {
	/*color:#00f; */
	font-size:14px;
	font-weight:bold;
}

a.weiter:hover {
	/*color:#DE2418;*/
}
	       

#wrapper {
	background-color: none;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: 0px solid #FF9900;
}
#header {
	background-color: #0099FF;
	margin-top: 30px;
	padding: 0px;
	height: 80px;
}
#content {/*position:inherit; */
	background-color: none;
	border-color:#FF9900;
	margin: 0px;
	padding: 0px;
	/*height: 450px;*/
}
#footer {
	background-color: none;
	margin: 0px;
	padding: 0px;
	height: 50px;
}
#playlist{
list-style: none;
}
#playlist li a{	
color:#AA0000;text-decoration: none;
}
#playlist .current-song a{
COLOR:white;	FONT-FAMILY:Verdana, Arial;	TEXT-DECORATION: none; background-color:#999999;border-radius:8px; padding-left:3px; padding-right:3px
}


* { /*color:#000;*/ }


address {
	font-style:normal;	
}

h1 {
	text-align:left;
	font-style:italic;
	font-size:150%;
	margin:2.3em 0 2em 4em;
	line-height:90%;
}
/*	h2 {
		text-align:left;	
	}
*/

h2 {
	font-size:100%;	
	text-align:center;
	margin-bottom:2em;
	clear:both;
}

h3 {
	font-size:12px;	
}

p { 
	font-size:14px;
	line-height:140%;
	font-family:Arial, Verdana; 
}

ul {
	list-style-type:none;
	list-style-image:url(../images/misc/list.gif);
	padding-left:1em;
}

dl {
	font-size:14px;
}

dt {
	margin:0 0 4em 0;
	font-size:larger	
}

dd {
	margin-left:2em;
}

#container {
	min-width:500px;
	background-color:#CCCCCC;
}
#contain_max {
	max-width:800px;
}
.copyr{
	font-size:9px; 
	position:fixed; 
	bottom: 10px; 
	right: 5px; 
	width: 120px;
	}
.audio-player-wrapper {
	position:fixed; bottom: 20px; left: 10px;
	height:35px; 
  	width: 225px;
  	padding: 5px;
	border:1px;
	border-color:#AA0000;
  	background-color: ;
  	border-radius:10px;
  }

a:link		{	COLOR:#AA0000;	FONT-FAMILY:Verdana, Arial;	TEXT-DECORATION: none;}
a:visited   {	COLOR:#AA0000;	FONT-FAMILY:Verdana, Arial;	TEXT-DECORATION: none;	background-color:#999999;border-radius:8px;}
a:active	{COLOR:#AA0000; 	FONT-FAMILY:Verdana, Arial; TEXT-DECORATION: none; }
a:hover	    {COLOR:white;	FONT-FAMILY:Verdana, Arial;	TEXT-DECORATION: none; background-color:#999999;border-radius:8px;  }

/*a:link.x		{COLOR:#660000; FONT-FAMILY:Verdana, Arial; TEXT-DECORATION: none; background-color:#FFCC00; width:200px;}
a:visited.x		{COLOR:#990000; FONT-FAMILY:Verdana, Arial; TEXT-DECORATION: none; background-color:#FF9900; width: auto;height: auto;width:200px;}
a:active.x		{COLOR:red; 	FONT-FAMILY:Verdana, Arial; TEXT-DECORATION: none;  width: auto;height: auto;width:200px;}
a:hover.x		{COLOR:white;	FONT-FAMILY:Verdana, Arial; TEXT-DECORATION: none; background-color: #FF0000;width:200px;  }


.menu0  {
position:relative;
padding-top:30px;
top:20px;
}
*/


.menu li {
	display:inline;	
	font-size:14px;
    font-family:Arial, Verdana; 
}
.menu  {
	text-align:center;
	margin:0 0 25px 0;
	clear:both;
}
.menu a {
	color:red;
	padding:3px 20px 3px 20px;
	text-decoration:none;
	border-bottom:0;
	/*color:#FEDE01;
	border-color:#DD0000;
	background-color:#DD0000;*/
	border-left:0px solid #d5e7ec;
	text-align:center;
	font-weight: bold;
}
/*
.menu a:hover.xxx {
	color:#de2418;
	background:none;
	border:0px solid #008996;
	border-left:0px solid #008996;
	text-align:right;
} 
.menu a:link{
	color:green;
	border:0px solid #008996;
	border-left:0px solid #008996;
	text-align:right;
}

.submenu {
text-align:center;		
	margin:0 0 2px 0;
	clear:both;
}

.submenu li {
	display:inline;	
	font-size:14px;
    font-family:Arial, Verdana; 
}
 */


/*a{border-radius: 8px;display:inline-block;text-align:center;height: auto; }*/


#torso {
	margin:0 0 20px 0;
}
#torso_back {
	width:850px; 
	padding:30px; 
	margin-left:30px;
	background-color: #CCCCCC;	
}
#torso_kal {
	width:830px; 
	padding:10px; 
	margin-left:40px;
	background-color: #CCCCCC;	
}
.img_back {
	width:850px; 
	padding:30px; 
	margin:30px;
}

.left {
	/*background-color: #FFFF99;
	float:left;*/
	width:160px;
}
.left600 {
	/*background-color: #FFFF99;
	float:left;*/
	width:600px;
}
.right {
	/*background-color: #FFFF99;
	float:right;*/
	width:160px;
}

.keyword {
	font-weight:bold;
	font-size:16px;
	text-align:left;
	margin:2em;
	
}

.center {
	text-align:center;	
}


p.source {
	text-align:right;
	font-weight:bold;
	font-size:9px;
	margin:0 30px 0 0;
}

div.text_black {
	margin:10px 10px 0 10px;	
	color:#000	
}
div.text {
	margin:30px 10px 0 10px;
	color:#FFFFFF	
}
div.text_bg {
	/*background-image:url(../hintergrund_bb_w.jpg);*/
	background-color:#F6F6F6;
	margin:30px 10px 0 10px;
	padding-left:20px;
}

div.small {
	font-weight:bold;
	font-size:12px;
}

#fl_right{
	position:fixed;
	z-index:1001; 
	text-align:right;
	bottom: 100px; 
	right:5px; 
	width: 295px; 
}
#bottom {
	font-size:10px;
	margin:3em 0 0 2em;
	text-align:right;
	/*font-weight:bold;*/
	font-weight:normal;
	position:fixed;
	z-index:1002; 
	bottom: 15px; 
	right:5px; 
	width: 230px; 
	height: 21px;"
}