body	{
	font-family: sans-serif;
	background-image: url(../grafik/00bg1.png)
}

/* neu */

#jb_songs	{
	width: 40%;
}

#jb_plkand	{
	width: 40%;
}


.sm2-bar-ui {
 font-size: 16px;
}
.sm2-bar-ui .sm2-main-controls,
.sm2-bar-ui .sm2-playlist-drawer {
 background-color: #f9f9f9;
}
.sm2-bar-ui .sm2-inline-texture {
 background: transparent;
}


video {
		max-width:90%;
		height:auto
		}


ul.playlist {
 list-style-type:none;
 margin:0px;
 padding:0px;
 /* font trickery */
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-family: sans-serif;
 font-size:1.1em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#f9f9f9;
 border-top: 0.075em solid #aaaaaa;
 border-bottom: 0.075em solid #eeeeee;
 border-left: 0.075em solid #9a9a9a;
 border-right: 0.075em solid #a9a9a9;
}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 font-size:120%;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
 color:#ffff00;
 border-radius:3px;
}

ul.playlist li:hover {
 background-color:#666666;
}

ul.playlist li:hover a {
 color:#f0f000;
}

ul.tracklist {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.tracklist li {
 position:relative;
 display:block;
 width:auto;
 max-width: 100%;
 font-family: sans-serif;
 font-size:1.1em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#f9f9f9;
 border-top: 0.075em solid #aaaaaa;
 border-bottom: 0.075em solid #eeeeee;
 border-left: 0.075em solid #9a9a9a;
 border-right: 0.075em solid #a9a9a9;
}

ul.tracklist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 
 outline:none;
 position:relative;
 z-index:2;
}

ul.tracklist li:hover {
 background-color:#666666;
}

ul.tracklist li:hover a {
 color:#f0f000;
}



.bordered	{
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	display: block;
	background-color: #a0a0a0;
	padding: 1em;
}

.bordered:hover	{
	background-color: #000000;
}

.hidden {
	display: none;
}

.smcaps {
	font-variant: small-caps;
}

.kursiv {
	font-style: italic;
}

.jpl {
	float: left;
	background-color: #000000;
	border: 2px solid #ffffff;
	height: 100%;
	max-width: 50%;
}

.jpl:hover {
	background-color: #000000;
	border-color:#000000;
}

.jpl a {
	display: block;
}

.para1 {
	color: #ffff00;
	font-size: 1.6em;
	font-weight: bold;
	border: 2px solid #0000ff;
	position: absolute;
	left: 20%;
	top: 18%;
	padding: 5px;
	background-color: #000000;
}

.para2 {
	margin-top: 10%;
}

.paraa {
	color: #ffff00;
	font-size: 1.3em;
	font-weight: bold;
	border: 1px solid #aaaa00;
	background-color: #000033;
	padding: 5px;
}

.paraa:hover {
	color: #ffffff;
	background-color: #000000;
	border-color: #ffff00;
}

p.para2 {
	color: #ffff00;
	font-size: 1.5em;
	font-weight: bold;
	font-family: serif;
	text-shadow: 2px 2px #000000;
}

.para3:hover {
	background-image: url(../grafik/parabuttonbg.png);
}

form.para2 input {
	border:2px solid #0066dd;
	line-height: 2em;
	background-color: #dddddd;
	width: 100%;
	text-align: center;
	font-weight: bold;
}

form.para2 input:focus {
	background-color: #ffffff;
	font-weight: normal;
	line-height: 2.2em;
}

.subitem {
	width: 90%;
	text-align: center;
	background-color: #b0b0b0;
	border: 1px solid #000000;
	margin: 0px auto;
	padding: 15px;
	height: 200px;
}

.text	{
	width: 80%;
	padding: 2% 8%;
	line-height: 1.5;
	border:1px solid #000000;
	margin: 0px auto;
	text-align: justify;
	font-size: 1.1em;
	background-image: url(../grafik/kachel4.png);
}

div.text h2 {
	text-decoration: underline;
}

div.text h4 {
	text-decoration: none;
	font-size: 110%;
	margin-bottom: 0;
}

#morfoon-l {
	left: 0;
	position: absolute;
}

#morfoon-r {
	right: 0;
	position: absolute;
}

#homelink {
	margin-top: 50px;
}

h4 a {
	border: 3px outset #000000;
	padding: 5px;
	background-color: #eeeeee;
	color: #000000;
	font-size: 1.1em;
}

h4 a:hover {
	background-color: #000000;
	color: #ffffff;
	border: 1px inset #00aaff;
}

/*** Menü Anfang ***/

ul#menu {
	list-style-type:none;
	margin:0;
	padding:5px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 2px solid #6a6a6a;
	border-top: 2px solid #a0a0a0;
	background-image: url(../grafik/kachel2.png);
	text-align: center;
	z-index: 50;
}

ul#menu li {
	display:inline-block;
	margin:1px;
}

ul#menu li a {
	display:inline-block;
	min-width:100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #000;
	background-image: url(../grafik/kachel1b.png);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	border: 1px solid #ffffff;
}

ul#menu li:hover a {
	background-color: #000000;
	background-image: url(../grafik/kachel1c.png);
	color: #FFFFFF;
	border: 1px solid #00aaff;
}

.show-menu {
	text-decoration: none;
	background-color: #66fe36;
	text-align: center;
	text-shadow:2px 2px 2px #a0a0a0;
	padding: 8px 0;
	color: #000;
	display: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.3em;
}

input[type=checkbox]{
    display: none;
}

input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*** Logo Anfang ***/

#logo		{
				width:100%;
				text-align:center;
				border-bottom:0.15em #000000 solid;
				border-top:0.15em #000000 solid;
				background-image: url(../grafik/kachel1c.png);
				padding-bottom:0.45em;
				height:150px;
				margin-top: 3em;
			}
			


/*** GB Anfang ***/

#gbform	{
				width: 50%;
				margin: 0px auto;
				border: 0.15em solid #F7F970;
				background-color: #005102;
			}
			
#gbform form {
	width: 90%;
	margin-bottom: 5px;
}

#gbform input {
	background-color: #008F05;
	color: #eeeeee;
	width: 70%;
}

#gbform input:focus {
	background-color: #ffffff;
	color: #000000;
	font-weight: bold;
}

#gbform input:hover {
	color: #eeff00;
	font-weight: bold;
	background-color: #004d01;
}

.gb_box a	{
					color: #000000;
					text-shadow: #ffffff 0.15em 0.075em;
				}
				
.gb_box a:hover	{
							color: #ffffff;
							text-shadow: #000000 0.15em 0.075em;
						}	
.gb_datum	{
				margin: 0.2em;
				margin-right: 0.5em;
				font-size: 0.8em;
				color: #ffffff;
				text-align: right;
			}

.gb_name	{
				float: left;
				margin-left: 0.5em;
				font-weight: bold;;
			}						
.gb_hp	{
				float: right;
				margin-right: 0.5em;
			}

.gb_nachricht	{
						width: 80%;
						border: 0.15em solid #aaaaaa;
						margin: 0.375em auto;
						background-color: #eeeeee;
						padding: 0.2em;
						padding-left: 0.7em;
						padding-right: 0.7em;
						text-align: justify;
					}
					
.gb_nmhp	{
				border: 0.075em dashed #000000;
				padding: 0.2em;
				background-color: #dddddd;
				color: #000000;
				width: 85%;
				margin: 0px auto;
			}
			
.gb_box	{
				width: 80%;
				margin: 0px auto;
				padding-bottom: 0.6em;
				border: 0.075em solid yellow;
				box-shadow: 0.075em 0.075em 0.15em black;
				background-color: #333333;
				
			}
			



/*** Der Rest ***/

/*neu start*/
.menul1 {
	font-weight:normal;
	color:#000000;
	border: 0.075em solid #666666;
	background-color: #eeeeee;
	padding: 2px;
}

.menul1:hover {
	font-weight:bold;
	color: #ffffff;
	background-color: #000000;
}

/*neu ende*/

.klein	{
				font-size: small;
			}


		
#logo2	{
				z-index: 1;
				margin: 0px auto;
			}

a	{
		text-decoration: none;
	}
	
a.dll_a:link		{ font-weight:normal;	color:#000000;		background-color: #dddddd;}
a.dll_a:visited	{ font-weight:normal;	color:#000000;}
a.dll_a:hover		{ font-weight:bold;		color: #ffff00;	background-color: #666666; border:0.075em dashed #000000;}
a.dll_a:active		{ font-weight:bold;		color:#ffffff}

a.dll_z:link		{ color:#000000;		background-color: #cccccc;}
a.dll_z:visited	{ color:#000000;}
a.dll_z:hover		{ color: #ffffff;		background-color: #666666;	border:1px dashed #000000;}
a.dll_z:active		{ color:#ffffff}

a.menul2:link		{ font-weight:normal;	color:#000000;		border: 0.15em solid #666666;		background-color: #dedede}
a.menul2:visited	{ font-weight:normal;	color:#000000;												background-color: #dedede}
a.menul2:hover		{ font-weight:bold;		color: #ffffff;											background-color: #000000}
a.menul2:active	{ font-weight:bold;		color:#ffffff}

a.menul3:link		{ font-weight:normal;	color:#000000;		background-image: url(../grafik/kachel1b.png)}
a.menul3:visited	{ font-weight:normal;	color:#000000;		background-image: url(../grafik/kachel1b.png)}
a.menul3:hover		{ font-weight:bold;		color: #ffffff;	background-image: none;  		background-color: #000000}
a.menul3:active	{ font-weight:bold;		color:#ffffff}

form	{
			margin: 0px auto;
			width: 50%;
		}
		
form span	{
					font-weight: bold;
				}
h1	{
		font-size: 1.7em;
		font-variant: small-caps;
		text-shadow: #ffffff 0.15em 0.1em;
		scroll-margin-top:50px;
	}
			
h3	{
		color: #000000;
		background-color: #aaaaaa;
		border-bottom: 0.075em solid #000000;
		border-top: 0.075em solid #000000;
		scroll-margin-top:50px;
	}
	


img	{
			max-width:100%;
			height: auto;
		}
		
textarea	{
				width: 100%;
				height: 15em;
				margin-right: 0.15em;
				background-color: #008F05;
				color: #eeeeee;
			}
			
textarea:focus	{
						background-color: #FFFFFF;
						color: #000000;
						font-weight: bold;
					}
					
textarea:hover {
	color: #ffff00;
	font-weight: bold;
	background-color: #004d01;
}

#bild_vl	{
				position: absolute;
				padding: 0.15em;
				background-color: #000000;
				top: 40%;
				left: 2em;
				border: 0.075em dashed #ffffff;
			}
			
#bild_vr	{
				position: absolute;
				top: 40%;
				right: 2em;
				border: 0.075em dashed #ffffff;
				padding: 0.15em;
				background-color: #000000;
			}
			
#error	{
				width: 80%;
				border:3.75em solid red;
				background-color: yellow;
				font-weight: bold;
				margin: 11.25em auto;
				text-align: center;
			}

#foto_i	{
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				display: table;
				background-color: #dedede;
			}	


				
#inhalt	{				
				z-index:5;
				margin: 2em auto;
				width:76%;
				text-align:center;
				padding:0em 2em;
				background-image: url(../grafik/bg556.png);
				border: 0.225em solid #cccccc;
			}

#inhalt_p	{
				position: relative;				
				z-index:5;
				margin:30px auto;
				width:76%;
				height: 600px;
				text-align:center;
				padding:0em 2em;
				background-color: #000000;
				background-image: url(../grafik/bgpara.jpg);
				border:5px solid #000000;
			}

#mgform	{
				background-color: #70F975;
				padding: 0.5em;
				width:80%;
				margin: 0.8em auto;
			}
			
#news	{
			position: relative;				
			z-index:5;
			margin:0px auto;
			margin-top: 2em;
			width:60em;
			text-align:center;
			padding:0em 2em;
			background-color: #cdcdcd;
			border:2px solid #3C29DE;
		}
			
#oben	{
				position: fixed;
				right: 0.1em;
				bottom: 1.875em;
			}
			
#oben_c	{
				position: absolute;
				right: 0.1em;
				bottom: 1.875em;
				z-index: 1;
			}
			
#tg_i	{
			background-image: url(../grafik/kachel_tg.png);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: fixed;
			display: table;
		}
		
p.tgi	{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}


					
.bild	{
			box-shadow: 0.45em 0.45em 0.9em black;
			border-top: 0.15em solid #aaaaaa;
			border-bottom: 0.15em solid #eeeeee;
			border-left: 0.15em solid #9a9a9a;
			border-right: 0.15em solid #a9a9a9;
		}
		
.clear	{
				clear: both;
			}
			
/* Audio */

.album	{
				width: 98%;
				margin: 0px auto;
			}

div.album img	{
						border: 0.1em #d2ff00  solid;
					}
					
.cover	{
				text-align: center;
			}

.songs	{
				width: 80%;
				margin: 0px auto;
			}			
			
			
.coverr	{
				width: 50%;
				min-height: 26.25em;
				float: right;
			}			
						
.dll_a	{
				display: block;
				border-top: 0.075em solid #aaaaaa;
				border-bottom: 0.075em solid #eeeeee;
				border-left: 0.075em solid #9a9a9a;
				border-right: 0.075em solid #a9a9a9;
				padding: 0.15em;
				
			}

.dll_z	{
				display: block;
				border-top: 0.075em solid #aaaaaa;
				border-bottom: 0.075em solid #eeeeee;
				border-left: 0.075em solid #9a9a9a;
				border-right: 0.075em solid #a9a9a9;
				padding: 0.15em;
				
				font-weight: bold;
			}
			
.fett	{
			font-weight: bold;
		}

.fett_gm	{
				font-weight: bold;
				font-size: 1.1em;
				border-bottom: 0.1em solid #000000;
			}
		
.form_e	{
				border-bottom: 0.075em solid #008F05;
				height: 1.6em;
				width: 100%;
				padding-bottom: 0.2em;
				padding-top: 0.4em;
				color: #eedd00;
			}
			
.fotoraster	{
					width: 80%;
					margin: 0px auto;
					border-top: 0.15em solid #666666;
					border-bottom: 0.15em solid #ffffff;
					border-left: 0.15em solid #000000;
					border-right: 0.15em solid #aaaaaa;
					padding-top: 0.7em;
					padding-bottom: 0.7em;
					background-color: #999999;
				}

.fotoraster a span	{
								position: fixed;
								top: 30%;
								left:40%;
								width: 300px;
								height: 218px;
								border: 0.75em #000000 solid;
								visibility: hidden;
							}

.fotoraster a:hover span	{
										visibility: visible;
									}
									
									
.foto_v	{
				padding: 0.225em;
				margin: 0.225em;
				border: 0.075em solid #dddddd;
				background-color: #000000;
			}




					
.item	{
			background-image: url(../grafik/kachel4.png);
			width: 80%;
			margin:0px auto;
			border: 0.15em solid #666600;
			padding: 1em;
		}

.av	{
			margin:0px auto;
			height: auto;
			padding: 1em;	
		}
		
.av a	{
			background-color: #f9f9f9;
			color: #333333;
			padding: 1em;
			display: inline-block;
			margin-left: 1em;
			margin-right: 1em;
			margin-bottom: 1em;
			font-weight: bold;
			border: 1px solid #000000;
		}
		
.av a:hover	{
			background-color: #090909;
			color: #ffffff;
			padding: 1em;
			margin-left: 1em;
			margin-right: 1em;
			font-weight: bold;
			border: 1px solid #ffffff;
		}	
		
.line	{
			padding-top:1.125em;
			border-bottom: 0.15em solid #000000;
			clear: both;
		}
		
.line2	{
				border-bottom: 0.075em dashed #FFFF61;
				width: 98%;
				margin: 2em auto;
			}
		
.links	{
				float: left;
			}
			
.l_oben	{
				display: block;
			}

.newsbox	{
				width: 92%;
				background-color: #eeeeee;
				border: 0.075em #FFFF61 dashed;
				box-shadow: 0.075em 0.075em 0.15em black;
				margin: 0px auto;
				padding: 0.5em;
			}	

.newsbox1	{
					width: 98%;
					margin: 0px auto;
					padding-bottom: 0.6em;
					border: 0.075em solid yellow;
					box-shadow: 0.075em 0.075em 0.15em black;
					background-color: #999999;
					
				}
						
.newsbox2	{
					width: 80%;
					border-bottom: 0.075em #333333 dotted;
					margin: 0px auto;
					margin-bottom: 0.5em;
					padding-left: 0.8em;
					padding-right: 0.8em;
				}

.newslink	{
					display: block;
					width: 12em;
					margin: 0px auto;
					margin-top: 0.5em;
					border: 0.075em #1B09B4 dashed;
					background-color: #cecece;
					padding: 0.2em;
					font-weight: bold;
					font-size: 0.9em;
				}

.newstitel	{
					font-weight: bold;
					float: left;
				}
				
.newsdatum	{
					float: right;
				}

div[id^='pro-']	{
						width: 500px;
						height: 375px;
						max-width: 100%;
						margin: 0px auto;
					}
				
.rechts	{
				float: right;
			}
			
.rechts1	{
				float: right;
				visibility: hidden;
			}
			
.txt1	{
			width: 90%;
			margin: 0px auto;
			text-align: center;
			font-size: 1.1em;
			background-color: #dddddd;
			padding: 0.7em;
			border-top: 0.075em solid #aaaaaa;
			border-bottom: 0.075em solid #eeeeee;
			border-left: 0.075em solid #9a9a9a;
			border-right: 0.075em solid #a9a9a9;
			box-shadow: 0.15em 0.15em 0.3em black;
		}
		
.txt1a	{
			width: 70%;
			margin: 0px auto;
			text-align: center;
			background-color: #d3d3d3;
			padding: 0.7em;
			border-top: 0.075em solid #aaaaaa;
			border-bottom: 0.075em solid #eeeeee;
			border-left: 0.075em solid #9a9a9a;
			border-right: 0.075em solid #a9a9a9;
			box-shadow: 0.15em 0.15em 0.3em black;
		}

.txt2	{
			width: 17em;
			margin: 0px auto;
			text-align: center;
			font-size: 1.1em;
			background-color: #dddddd;
			padding: 0.7em;
			border-top: 0.075em solid #aaaaaa;
			border-bottom: 0.075em solid #eeeeee;
			border-left: 0.075em solid #9a9a9a;
			border-right: 0.075em solid #a9a9a9;
			box-shadow: 0.15em 0.15em 0.3em black;
		}

.wrn	{
			width: 20em;
			margin: 0px auto;
			border: 0.15em dashed red;
			font-weight: bold;
			font-size: 1.2em;
			padding:3.75em;
			background-color: lightgoldenrodyellow;
		}		
		
.zitat	{
				border-top: 0.075em solid #aaaa00;
				border-bottom: 0.075em solid #eeee00;
				border-left: 0.075em solid #9a9a00;
				border-right: 0.075em solid #a9a900;
				background-color: #333333;
				width: 70%;
				margin: 0px auto;
				padding-top:0.375em;
				padding-bottom:0.375em;
				color: #ffff00;
				font-family: monospace;
				font-size: 1.2em;
				font-weight: bold;
			}
			
.zitat2	{
				font-size: 0.9em;
				font-weight: normal;
				color: #ffffff;
											}	



/* ******* Responsive Styles ********* */

@media screen and (max-width : 1200px){
		
	#gbform {
		width: auto;
	}
	.gb_box {
		width: auto;
	}
	div[id^='morfoon'] {
		display: none;
	}
	form.para2 {
		width: 75%;
	}
	#inhalt	{
		width: 90%;
		margin: 1em auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	#logo {
		height: 100px;
	}
	#homelink {
		margin-top: 19px;
	}
	#news	{
		width: auto;
	}
	.para1 {
		font-size: 1.5em;
		left: 10%;
		top: 12%;
	}
	
}										
@media screen and (max-width : 950px){
	
	body	{
		margin: 0;
		-webkit-animation: bugfix infinite 1s;
	}
	
	@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
	
	h3	{
		scroll-margin-top:0;
	}
	
	ul#menu {
		position: static;
		display: none;
		width: 100%;
		padding-left: 0;
	}

	ul#menu li {
		margin-bottom: 1px;
		font-size: 1.2em;
		line-height: 40px;
	}

	ul#menu li, li a {
		width: 95%;
	}

	.show-menu {
		display:block;
	}
	
	#inhalt	{
		width: auto;
		margin-top: 1em;
		padding-left: 5px;
		padding-right: 5px; 
	}
	
	#logo {
		display: none;
	}
	
	.item	{
		width: auto;
	}
	.newsbox1 {
		width: auto;
	}
	.subitem {
		width: auto;
	}
	.fotoraster {
		width: auto;
	}
	.para1 {
		font-size: 1.3em;
		top: 9%;
		left: 6%;
	}
	.para2 {
		margin-top: 20%;
	}
}

#swipebox-slider {
    -webkit-transition: none;
    transition: none;
}

#swipebox-slider .slide {
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

#swipebox-slider .slide:not(.current) {
    opacity: 0;
}