body{
	width: 99.99%;
	color:#000000;
	background-color:#ffffff;
	/*
	background-image: url('bg.jpeg');
	font-size:75%;
	*/
}


body, body *{
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	font-size: 12px;
	color:#000000;
}

* {
  box-sizing: border-box;
}


textarea
{
	/*
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	font-size:100%;
	*/
	line-height: 110%;
}

table
{
	/*
	font-size:100%;
	*/
}

.b
{
	font-weight: bold;
}
.bi
{
	font-weight: bold;
	font-style:italic;
}
.bim
{
	font-weight: bold;
	color: #F68400;
	font-style:italic;
}
.bimu
{
	text-decoration:underline;
	font-weight: bold;
	color: #F68400;
	font-style:italic;
}
.biu
{
	text-decoration:underline;
	font-weight: bold;
	font-style:italic;
}
.bm
{
	font-weight: bold;
	color: #F68400;
}
.bmu
{
	text-decoration:underline;
	font-weight: bold;
	color: #F68400;
}
.bu
{
	text-decoration:underline;
	font-weight: bold;
}
.i
{
	font-style:italic;
}
.im
{
	color: #F68400;
	font-style:italic;
}
.imu
{
	text-decoration:underline;
	color: #F68400;
	font-style:italic;
}
.iu
{
	text-decoration:underline;
	font-style:italic;
}
.m
{
	color: #F68400;
}
.mu
{
	text-decoration:underline;
	color: #F68400;
}
.u
{
	text-decoration:underline;
}
	
	
p
{
	/*
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	*/
	color:#000000;
	padding-top:0.1em;
	padding-bottom: 0.1em;
}

div
{
	display: block;
	visibility: visible;
	padding:0px;
}



div.blankpage
{
	display: block;
	visibility: visible;
	padding: 10px;
}

div.blankpage img
{
	border: 1px solid black;
}

hr
{
	/*
	height:5%;
	margin-top:10pt;
	margin-bottom:10pt;
	margin-left:0pt;
	margin-right:0pt;
	padding:0pt;
	*/
  line-height:1pt;
 }

img
{
	border-width:0px;
}

a , a:visited
{
	/*
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	*/
	color:#000000;
	text-decoration:underline;
}
a.sortlink{
	color:#000000;
	text-decoration:underline;	
}
a:hover, a:active
{
	color:#ef0000;
}


.invisible , .printonly , .nurprint, .nein
{
	display: none;
	visibility: hidden;
}


.invisible1 
{
	display: none;
}

.invisible2 
{
	visibility: hidden;
}



#topnav form
{
	margin:0px;
	margin-top: 10px;
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	color: #383838;
	vertical-align:top;
	
}

.topnav input
{
	font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;
	vertical-align:middle;
}

/*
.nav ul
{
	list-style-type:none;
	margin:0px;
	padding: 0px;
}


.nav li
{
	width: 99.99%;
}

.nav a, .nav a:visited 
{
	DISPLAY: block;
	color: #000000;
	padding-bottom: 3px;
	padding-top: 3px;
}

.nav a:hover, .nav a:focus, .nav a:active
{
	DISPLAY: block;
	color: #ef0000;
}

.nav a.stufe1sel
{
	font-weight: bold;
	padding-left: 8px;
	padding-right: 8px;
}
.nav a.stufe2sel
{
	font-weight: bold;
	padding-left: 20px;
	padding-right: 8px;
}

.nav a.stufe3sel
{
	font-weight: bold;
	padding-left: 30px;
	padding-right: 8px;
}

.nav a.stufe1notsel
{
	padding-left: 8px;
	padding-right: 8px;
}

.nav a.stufe2notsel
{
	padding-left: 20px;
	padding-right: 8px;
}

.nav a.stufe3notsel
{
	padding-left: 30px;
	padding-right: 8px;
}

*/
hr
{
	color: #666666;
	height: 2px;
}

p	
{
	line-height: 110%;
	color: #666666;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 5px;
}
	
p.untertitel
{
	margin-bottom: 0px;
}	

.column2 input,  .column2 select, .column2 textarea 
{
	color: #666666;
}	

  h1 ,  h2 ,  h3 ,  h4 ,  h5 ,  h6
{
	font-size: 120%;
	color: #000000;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
}
 ul
{
	margin-top: 0px;
	padding-top: 0px;
	margin-left: 25px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

img.left
{
	display:block;
	margin-right:25px;
	margin-bottom: 5px;
	float:left;
	
}

img.right
{
	display:block;
	margin-left: 10px;
	margin-bottom: 5px;
	float:right;
}

img.block
{
	display:block;
}



.column2spacer 
{
	margin:0px;
	padding:0px;
	height:2px;
	font-size: 0pt;
	background-color: #666666;
}

.nachoben
{
	text-align: right;
	padding-bottom: 4px;
}



a:visited , a
{
	color: #000000;
	text-decoration:underline;
}

a:hover, a:active, a:focus
{
	color: #ef0000;
}

.clr
{
	clear:both;
	padding:0px;
	margin:0px;
}

td,th
{
	vertical-align:top;
	padding-top: 4px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 4px;
	border-top-width:0px;     
	border-bottom-width:1px;  
	border-left-width:0px;    
	border-right-width:0px;   
	border-style: dotted;
}

input.lft, td.right
{
	text-align: right;
}

.ctr
{
	text-align: center;
}

fieldset 
{
	border-top: #aaaaaa 0px solid; 
	border-left: #aaaaaa 0px solid; 
	border-right: #aaaaaa 0px solid; 
	border-bottom: #aaaaaa 0px solid;
	padding-top: 0px; 
	padding-left: 0px; 
	padding-right: 0px; 
	padding-bottom: 3px; 
	margin: 3px; 
}

fieldset div 
{
	clear: both; 
	padding-top: 0px; 
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 0px; 
	margin: 0px; 
	position: relative;
}

fieldset label, .firstrow , .firstrowmandatory
{
	display: block; 
	float: left; 
	margin-bottom: 2px; 
	vertical-align: bottom; 
	padding-top: 3px; 
	text-align: left;
}

fieldset input, fieldset select, fieldset checkbox, .secondrow
{
	display: block; 
	float: left; 
	margin-bottom: 2px; 
}


.firstrow , .firstrowmandatory
{
	width: 250px;
}

.firstrowmandatory
{
	color: #000088;
	font-weight: bold;	
}

.inline
{
	display:inline;
}

.submit
{
/*	border: #aaaaaa 1px solid;
	background: #cccccc;
	margin-bottom: 0px; 
	margin-left: 5px;
	color: #222222;
  line-height: 2em;
	*/
	width: auto; 

	border:1pt solid black;
	border-radius:4px;
	text-decoration:none;
	cursor:grab;
	color:black;
	padding:5px;
  text-wrap: nowrap;
  background-color: #eeeeee;

}
 
p.fehler, .fehler p
{
	font-weight:bold;
	color: #FF0000;
}	


.flag
{
	border: #666666 1px solid; 
}

ul.ul_hierarchie
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	list-style-position:inside;
}

li.li_hierarchie
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

li.li_hierarchie li.li_hierarchie
{
	list-style-type: none;
	margin-left: 25px;
}

tr.notinlist td
{
	color: #FF0000;
	font-weight:bold;
}

.redborder{
	margin-left:5pt;
	margin-right:5pt;
  border-color:#cccc00;
  border-style:solid;
  border-left-width:2pt;
  border-right-width:2pt;
  border-top-width:2pt;
  border-bottom-width:2pt;
  padding-top:5pt;
}

.even, .even a{
	color: #00aa00;
	font-weight:bold;
}

.odd, .odd a{
	color: #0000ff;
	font-weight:bold;
}


a.sortlink, a.sortlink:hover,a.sortlink:active, a.sortlink:visited{
	color:#000000;
	text-decoration:underline;	
}

a.sort_asc::after{
	content:" \21D1";
	text-wrap:nowrap;
}

a.sort_desc::after{
	content:" \21D3";
	text-wrap:nowrap;
}

a.button, a.button:visited, a.button:active, a.button:link, a.button:focus, a.button:hover{
	border:1pt solid black;
	border-radius:4px;
	text-decoration:none;
	cursor:grab;
	color:black;
	padding:5px;
  line-height: 2em;
  text-wrap: nowrap;
  background-color: #eeeeee;
}

a.button img{
	padding-right:5pt;
	position:relative; 
	bottom:-5px;
}


.bpmcounter{
	border:1pt solid red;
	text-align:left;
	/*
	margin:auto;
	*/
	padding:20px;
	font-size:auto;
	width:200px;
	font-family: Arial;						
}
.bpmcounter *{
	margin:auto;
	padding:10px;
	text-align:center;
	width:90%;	
}
.bpmcounter_result{
	border:1pt solid green;
}
.bpmcounter_tapcount{
	border:1pt solid green;
}
.bpmcounter_tap{
	margin-top:10px;
	border:1pt solid green;
	text-align:center;
	padding:0px;
	width:100%;
	height:50px;
	margin:auto;
	cursor:pointer;						
}


	div.listplayer{
		background: rgba(255, 255, 255, 1)!important;
	}
	div.pl {border: 1px solid black;width:auto; height:90vh;}
	#audio0-playlist-wrapper{height:50vh;overflow-y:scroll;}
	ul.pl {	list-style-type:none;	margin:0px; padding-left: 5px; padding-right: 5px;z-index:1;}
	ul.pl li {font-family:Verdana,Helvetica,Geneva,Arial,Sans Serif;}
	ul.pl li {border-bottom:1pt solid #000000;}
	li.pl_li {cursor:pointer;background-color:#FFFF66}
	li.pl_li_playing {cursor:pointer;background-color:#FFCC33}
	.slidecontainer {width: 98%;}
	.myslider{
	  -webkit-appearance: none;
	  appearance: none;
	  width: 100%;
	  height: 20px;
	  background-color: #d3d3d3;
	  background-image: linear-gradient(to right, blue, red);
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
	}
	.myslider::-webkit-slider-thumb{
	  appearance: none;
	  width: 5px;
	  height: 20px;
	  background-color: #000000;
	  cursor: pointer;
	}
	.myslider::-moz-range-thumb {
	  width: 5px;
	  height: 20px;
	  background-color: #000000;
	  cursor: pointer;
	}

	audio::-webkit-media-controls-timeline{color:#0000ff;}
	.playing1{background-color:#8888ff;}
	.playing2{background-color:yellow;}
	.singleplayer audio{width:100%;}




.container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 2px;
}

nav ul {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

nav ul li{
	display:inline;
    padding-right:10px;
}

/* Mobile first */
.container > * {
  padding: 5px;
  grid-column: col-start / span 12;
}
/*

@media (max-width: 575px) {
  .content, .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
	  list-style: none;
	  display: block;
  }
}
@media (min-width: 576px) {
   .content, .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
  list-style: none;
  display: block;
  }
}

@media (min-width: 850px) {
  .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 10;
    grid-row: 2 / 4;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
   display: flex;
   flex-direction: column;
  }
}

*/

@media screen and (max-width: 600px) {
  .content, .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
	  list-style: none;
	  display: block;
  }

	.singleplayer1{position:relative;width:99%;display:block;}
	.singleplayer2{position:relative;width:99%;display:block;}
	.singleplayer{position:relative;width:99%;display:block;}
	
	td.th_action{display:none;}
	td.th_genres{display:none;}
	td.th_interpret{display:inline;}
	td.th_titel{display:inline;}
	td.th_album{display:none;}
	td.th_time{display:inline;}
	td.th_quality{display:inline;}
	td.th_bpm{display:inline;}
	td.th_jahr{display:inline;}
	td.th_bytes{display:inline;}
	td.th_dbdate{display:none;}
	td.th_cd{display:none;}
	td.th_track{display:none;}

	td.td_action{display:block;width:99%;}
	td.td_genres{display:none;}
	td.td_interpret{display:block;width:99%;font-weight:bold;}
	td.td_titel{display:block;width:99%;font-weight:bold;}
	td.td_album{display:none;}
	td.td_time{display:block;width:99%;}
	td.td_quality{display:block;width:99%;}
	td.td_bpm{display:block;width:99%;}
	td.td_jahr{display:block;width:99%;}
	td.td_bytes{display:block;width:99%;}
	td.td_dbdate{display:none;}
	td.td_cd{display:none;}
	td.td_track{display:none;}

	td.td_action:before{content:"";color:gray;}
	td.td_genres:before{content:"";color:gray;}
	td.td_interpret:before{content:"Interpret: ";color:gray;}
	td.td_titel:before{content:"Titel: ";color:gray;}
	td.td_album:before{content:"";color:gray;}
	td.td_time:before{content:"Zeit: ";color:gray;}
	td.td_quality:before{content:"Qualität: ";color:gray;}
	td.td_bpm:before{content:"BPM: ";color:gray;}
	td.td_jahr:before{content:"Jahr: ";color:gray;}
	td.td_bytes:before{content:"Bytes: ";color:gray;}
	td.td_dbdate:before{content:"";color:gray;}
	td.td_cd:before{content:"";color:gray;}
	td.td_track:before{content:"";color:gray;}
	
		
	td {display:block;}
	tr {display:block;}
	table {display:block;}
	thead, thead tr, thead tr th {display:none;}
	td{border-bottom:0pt none white;}
	tr{border-bottom:1pt solid black;}
	
}


@media screen and (min-width: 601px)  and (max-width: 850px) {
  .content, .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
  list-style: none;
  display: block;
  }
	.singleplayer1{position:absolute;right:51%;width:49%;display:inline;}
	.singleplayer2{position:absolute;left:51%;width:49%;display:inline;}
	.singleplayer{position:relative;width:99%;max-width:850px;display:block;}
	
	
	
	td.th_action{display:none;}
	td.th_genres{display:none;}
	td.th_interpret{display:inline;}
	td.th_titel{display:inline;}
	td.th_album{display:none;}
	td.th_time{display:inline;}
	td.th_quality{display:inline;}
	td.th_bpm{display:inline;}
	td.th_jahr{display:inline;}
	td.th_bytes{display:inline;}
	td.th_dbdate{display:none;}
	td.th_cd{display:none;}
	td.th_track{display:none;}

	td.td_action{display:block;width:99%;}
	td.td_genres{display:none;}
	td.td_interpret{display:block;width:99%;font-weight:bold;}
	td.td_titel{display:block;width:99%;font-weight:bold;}
	td.td_album{display:none;}
	td.td_time{display:block;width:99%;}
	td.td_quality{display:block;width:99%;}
	td.td_bpm{display:block;width:99%;}
	td.td_jahr{display:block;width:99%;}
	td.td_bytes{display:block;width:99%;}
	td.td_dbdate{display:none;}
	td.td_cd{display:none;}
	td.td_track{display:none;}

	td.td_action:before{content:"";color:gray;}
	td.td_genres:before{content:"";color:gray;}
	td.td_interpret:before{content:"Interpret: ";color:gray;}
	td.td_titel:before{content:"Titel: ";color:gray;}
	td.td_album:before{content:"";color:gray;}
	td.td_time:before{content:"Zeit: ";color:gray;}
	td.td_quality:before{content:"Qualität: ";color:gray;}
	td.td_bpm:before{content:"BPM: ";color:gray;}
	td.td_jahr:before{content:"Jahr: ";color:gray;}
	td.td_bytes:before{content:"Bytes: ";color:gray;}
	td.td_dbdate:before{content:"";color:gray;}
	td.td_cd:before{content:"";color:gray;}
	td.td_track:before{content:"";color:gray;}
	td, tr, table {display:block;}
	thead, thead tr, thead tr th {display:none;}
	td{border-bottom:0pt none white;}
	tr{border-bottom:1pt solid black;}

}


@media screen and (min-width: 851px) and (max-width: 1200px) {
 .nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 10;
    grid-row: 2 / 4;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
   display: flex;
   flex-direction: column;
  }

	.singleplayer1{position:absolute;right:51%;width:49%;display:inline;}
	.singleplayer2{position:absolute;left:51%;width:49%;display:inline;}
	.singleplayer{position:relative;width:670px;display:block;}

	td.td_action{white-space:nowrap;width:99%;}
	td.td_genres{white-space:nowrap;}
	td.td_interpret{white-space:nowrap;width:99%;}
	td.td_titel{white-space:nowrap;width:99%;}
	td.td_album{white-space:nowrap;}
	td.td_time{white-space:nowrap;width:99%;}
	td.td_quality{white-space:nowrap;width:99%;}
	td.td_bpm{white-space:nowrap;width:99%;}
	td.td_jahr{white-space:nowrap;width:99%;}
	td.td_bytes{white-space:nowrap;width:99%;}
	td.td_dbdate{white-space:nowrap;}
	td.td_cd{white-space:nowrap;}
	td.td_track{white-space:nowrap;}
}

@media screen and (min-width: 1201px) {
	.nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 10;
    grid-row: 2 / 4;
  }
  .footer {
    grid-column: col-start / span 12;
  }
  nav ul {
   display: flex;
   flex-direction: column;
  }


	.singleplayer1{position:absolute;right:51%;width:49%;display:inline;}
	.singleplayer2{position:absolute;left:51%;width:49%;display:inline;}
	.singleplayer{position:relative;width:670px;display:block;}

	td.td_action{white-space:nowrap;width:99%;}
	td.td_genres{white-space:nowrap;}
	td.td_interpret{white-space:nowrap;width:99%;}
	td.td_titel{white-space:nowrap;width:99%;}
	td.td_album{white-space:nowrap;}
	td.td_time{white-space:nowrap;width:99%;}
	td.td_quality{white-space:nowrap;width:99%;}
	td.td_bpm{white-space:nowrap;width:99%;}
	td.td_jahr{white-space:nowrap;width:99%;}
	td.td_bytes{white-space:nowrap;width:99%;}
	td.td_dbdate{white-space:nowrap;}
	td.td_cd{white-space:nowrap;}
	td.td_track{white-space:nowrap;}
}