/* iPad/iPhone: http://stephen.io/mediaqueries/
https://www.buchundberger.net/blog/cross-browser-losung-fur-full-width-background-image-mit-css/
https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
http://blog.chrigifrick.ch/ipad-fix-fuer-background-size-cover
https://caniuse.com/#search=background-size
! https://opensource.apple.com/source/WebCore/WebCore-7602.2.14.0.5/css/mediaControls.css.auto.html
*/

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
  #volSlider{
		/*visibility:hidden;*/
  }
}
/* f. iphone 4
audio::-webkit-media-controls {
    display:none !important;
}
audio::-webkit-media-controls-overlay-play-button {
      display: none !important;
}

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

audio::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
    -webkit-appearance: media-play-button;
    display: flex;
    width: 16px;
    height: 16px;
    background-color: initial;
    border: initial;
    color: inherit;
}
*/
@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}
	div.allunten{
		/*display:none !important;*/
	}

	/*div.playlinktd{		display:none !important;	}*/
	/*div.seiteninhalt{		display:none !important;	}*/
	
	div.seiteninhalt>table:nth-child(1),
	div.seiteninhalt>table:nth-child(2),
	div.seiteninhalt>table:nth-child(3)
	{		/*display:none !important;*/	}
	div.businesstd{
		/*display:none !important;*/
	}
	td.inhaltcell table{
		/*display:none !important;*/
	}
	div.seiteninhalt>table{
		/*width:90%; hilft nix*/
		/*display:none !important;*/	
	}	
	
@media (max-width: 750px) { 	
	td.abstandcell{
		/*display:none !important;*/
		width:0px !important; /*besser wegen colspan konflikt*/
	}
	table.trefferliste{ /*statt td abstandcell*/
		margin-left: 0px !important;
		margin-bottom: 1em;
	}
	img[src*="ic_pfeil"]	{ /* im emap.cc*/
	}
}	


/*SONDERBEHANDLUNGEN FÜRS MENU*/
@media (max-width: 505px) { 
	audio {
		margin-right:4px !important;
		
	}	

	/* div.firstMenuItem{
		margin-left:4px !important; 
		damit selber abstand vom player wie zw menu items
	}*/
}
/* höhere werte wären nacht umwandlung wegen playervielfalt aber in selber Zeile*/
/* für player in folgezeile alle - 100px*/
@media (max-width: /*579px*/455px) { 
	div.menuItem{
		padding: 5px 11px !important;
	}
	img[src*="ic_pfeil"]	{/* im emap.cc*/
	}	
	
}
@media (max-width: /*550px*/430px) { 
	div.menuItem{
		padding: 5px 8px !important;
	}
}
@media (max-width: /*530px*/387px) { 
	div.menuItem{
		padding: 5px 7px !important;
	}
}
@media (max-width: /*513px*/379px) { 
	div.menuItem{
		padding: 5px 6px !important;
	}
}
@media (max-width: /*491px*/371px) { 
	div.menuItem{
		padding: 5px 5px !important;
	}
}
@media (max-width: 575px) { 
	audio {
		/*width: 119px !important; ausgeklammert wegen formenreichtum*/
	}
}
@media (max-width: 463px) { 
	audio {
		/*width: 118px !important; ausgeklammert wegen formenreichtum
		margin-right:-1px !important;
		margin-left:-6px !important;	*/
		/*width:100% !important; danach clear wegen player Problem Formenvielfalt
			nein weil sonst transport bar
		*/
	}
	div.firstMenuItem{
		/*margin-left:-1px !important;	stattdessen wegen player Problem Formenvielfalt:*/
		clear: both;	
		
	}
}
@media (max-width: 320px) { 
	div.menuItem a{
		padding: 2px 2px !important;
		/*font-size:11px !important;*/

	}
	.slider { /* ehl 8.6.2020 */
		margin-top: -2px !important;
		margin-bottom: 7px !important;
		padding: 2px !important;
	}
	audio {
		/*margin-left:-12px !important;	ausgeklammert wegen formenreichtum*/
		/*width:100% !important; danach clear wegen player Problem Formenvielfalt
		  			 nein weil sonst transport bar
		*/
	}
	div.firstMenuItem{
		clear: both;	/*wegen player Problem Formenvielfalt:*/
	}
}
@media (max-width: 360px) { /*am handy rand 2px l+r schmäler*/
	img.srch_img {
		padding: 1px 3px !important;
	}
	div.srch_img {
		width: 58px !important;
	}	
	div.srch_bildspalte
	{
		width: 62px !important;/*unklar ob nötig*/  
	}
}
/* STANDARDFALLUNTERSCHEIDUNGEN */
@media (max-width: 938px) { 
	body{
		width:98.5%;
		margin:auto;/*0px;*/
		padding:0px;
		box-sizing: border-box;
	}
	div.all{
		width:100%;
	}
	div.logo_left{
		width:100%;
		box-sizing: border-box;
		text-align:left;
		padding-left:7px;	
		height: 65px  !important; /*geringere höhe als die originalen 75*/
	}	
	div.logo_right{
		box-sizing: border-box;
		width:100%;
		overflow: hidden;
		text-align:left;
		padding-left:12px; /*schrift ausgerichtet am emaplogo*/	
		
	}	
	div.tickertdleft{
		width:0px;
		visibility:hidden;
	}
	div.ticker{
		width:100%;
		background-color: black !important;
		height: 20px  !important; /*statt original 21 - platz sparen on mobile devices*/
	}
	div.lauftext{
		width:100% !important;
		background-color: rgba(0, 0, 0, 0.1) !important;
		color: white !important;
		height: 20px  !important; /*statt original 21*/
		margin-top:-2px; /*damit lauftext höher*/
/* ehl 25.5.2020 float:left;height:21px;background:rgb(255,255,255);z-index:2;overflow:hidden;color:black;font-family:Courier;font-size:15px; */
float:left;z-index:2;overflow:hidden;font-family:Courier;font-size:15px;
	}
	div.playlinktd{
		box-sizing: border-box;
		padding:0px !important;
		margin: 0px !important;
		width: 100% !important;
		border-style: none !important;
	}
/*	div.audioPlayer{
		float:left;
	}
*/	
	audio {
		/*height: 25px !important;ausgeklammert wegen formenreichtum*/
	}
	div.menuItem{
		float:left;
		padding: 5px 17px;
	}
	audio {
		margin-right:20px;
	}	
	/*div.firstMenuItem{
		margin-left:15px; 
		damit selber abstand vom player wie zw menu items,
		besser:audio right
	}*/

	div.search-buttons{
		float:right;
	}
	div.seiteninhalt{
		width:100%;
	}
	
	div.businesstd{
			box-sizing: border-box;
		width:100%;
		margin-top:2px;
		border-width: 2px 0px 0px 0px;
		border-color: #909090 #808080 #404040 #404040 ;	
	}
	div.menuUnten{
		float:right;
	}
	div.donate{
		float:left;
		clear:none;

	}
	div.logos{
		flex-wrap : wrap;
		display: flex;
		align-items: center;
		justify-content: space-around;
   	}

	div.logo{
		/*padding: 5px 5px !important;*/
		/*float:left;*/
		/*vertical-align: middle;*/
		width:136px;
	}

	div.doppelthoch{

	}	
}	 


@media (max-width: 814px) { 
	div.menuItem{
		float:left;
		padding: 5px 15px;
	}
	audio {
		/*margin-right:15px; ausgeklammert wegen formenreichtum*/
	}
	
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		/*width:155px;*/
	 }
}
@media (max-width: 745px) { 
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		width:185px !important; 
	}
	.suchfeld .volltext { 
		width:132px !important; /*185*/
	}
	.search-group{
		height:36px !important;
	}
	div.search-buttons{
		padding-right: 13px;
	}
		
}
@media (max-width: 414px) { 
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		width:242px !important; 
	}
}
@media (max-width: 410px) { /*für zB 385*/
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		width:212px !important; 
	}
	div.suchfelddtypegroup{
		margin-left:0px ;
	}
}
@media (max-width: 	383px) { /*zB 375, 384*/
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		width:192px !important; 

	}
	div.suchfelddtypegroup{/*nur in dem bereich, damit keine halben worte im select*/
		margin-left:10px ;
	}
}
@media (max-width: 	374px) { /*zB 360*/
	.suchfeld select.suchfelddtype{ /* wunsch emil - schmaler am handy*/
		width:190px !important; 
	}
	div.suchfelddtypegroup{
		margin-left:0px ;
	}
}
@media (max-width: 	350px) { /*ca 320*/
	.suchfeld select.suchfelddtype{ /*wunsch emil - schmaler am handy*/
		width:187px !important; 
	}
	.suchfeld .volltext {  
		width:98px !important; /*185*/
	 }
}

/* PC Bildschirm */

@media (min-width: 500px) { 

	td.srch_bildspalte{
		min-width:62px;
	}
}
@media (min-width: 938px) { 
	div.audiocontrols{ /*wenn audiocontrols links statt oben gezeigt werden*/
		padding-left:0px !important;
		margin-left:-2px !important;
		width:175px !important;
	}
	#volSlider{
  		width: 66px !important;
  		margin-left: 0px !important;
	} 
	#currtime{
		min-width:37px !important;
		/*width:35px;*/
		font-size: 11.5px !important;
		margin-left:3px !important;
	}	
	.slider {
		 height: 5px !important;
	}

	.slider::-webkit-slider-thumb {
		  width: 7px !important;
  		  height: 14px !important;
	}

	div.all{
		width:915px;
	}
	div.logo_left{
		width:177px;/*was 179px;*/
	}	
	div.logo_right{
		width:736px;
	}	
	div.tickertdleft{
		width:177px;
	}
	div.ticker{
		width:736px;
	}
	div.menuItem{
		width:142px;
		height:19px;
		margin-left: 15px;
		text-align:left;
		padding: 0px;
	}
	div.firstMenuItem{
		margin-top:10px;
	}

	div.seiteninhalt{
		/*max-width:738.2px;*/
		width:738px;
		min-height:185px;
	}
	div.lauftext{
		width:  735px; /* was 738px;*/
/* ehl 25.5.2020 float:left;height:21px;background:rgb(255,255,255);z-index:2;overflow:hidden;color:black;font-family:Courier;font-size:15px; */
float:left; height:21px; background:rgb(255,255,255); z-index:2; overflow:hidden; color:black; font-family:Courier; font-size:15px;
	}

	td.srch_txt /*aus miha übernommen, nur für pcschirm*/
	{
		width: 668px; 
	}

	div.businesstd{
		width:161px;
		margin-left:2px;
		border-width: 0.5px 2px 2px 1px;
		border-color: #404040 #808080 #404040 #404040;	
	}
	div.donate{
		margin-top:1em;
		float:left;
		clear:none;
		width:100%;	
	}
	div.logo{
		width:147px;/*100%;	*/
	}	
}	 
	 
	 
/*in any case:*/	 
	div.all{
		font-family: verdana, "sans serif";
		font-size: 12px;
	}
	div.logotr{
		height:75px;
		/*display: block;*/
		/*war oberste tabellenzeile mit logo*/
	}
	div.logo_left{
		height:75px;
		float:left;
		/*	width:179px; war ngegebene tdbreite praxix 176.783*/
		/*width:177px;*/
		/*align:center;
		valign:middle;*/
		background-color:#000000;
		
	}	
	div.logo_left img{
		margin-top: 5px;

	}
	div.logo_right{
		float:left;
		/*width:736px;*/
		background-color:#000000;
		colspan:"5";		
	}
	div.tickerzeile{
		clear:all;
		/*display: block;*/
		height:21px;	
	}
	
	div.tickertdleft{
		float:left;
		/*height:15px; 15 war angegebene td höhe, praktisch waren es 21*/
		height:21px;
		/*width:179px;*/
		align:center;
		background-image:url(../images/bg_balken.gif);
	}
	div.ticker{
		float: left;
		/*width:736px;*/
		colspan: 5; 
		align: center ;
		background-color: #FFFFFF; 
	}
	div.allunten{
		width: 100%;
		clear:both;
		float:left;
		/*overflow: auto;*/
		/*display: flow-root;*/
		/*		background-color:#c0c0c0;*/ /*um linkes nicht runter reichen zu kaschieren*/
	}
	div.allleft{
		float:left;
		width:172px;
		height:100%;
		border-style: solid;
		border-width: 2px;
		border-color: #c0c0c0 #404040 #c0c0c0 #c0c0c0 ;
		background-color:#c0c0c0;
		/*background-color:gray;*/
		/*alle unter allleft waren in eigener tabelle mit:
	cellpadding="5" cellspacing="0" border="2"*/
	}
	div.playlinktd{
		clear:none;
		float:left;
		margin-left:2px;
		margin-top:2px;
		padding:5px;
		width:161px;/*161.45px;*/
		border-style: solid;
		border-width: 1px 2px 0.5px 1px;
		border-color: #404040 #808080 #808080 #404040 ;
		background-image:url(../images/bg_streifen.gif);
		background-color:#ffffff;
		valign:bottom;
	}
	div.firstMenuItem{
		/*padding-left: 5px !important; variante mit player in neuer Zeile*/	
		
	}
	div.audioPlayer{
		float:left;
		clear: both;
		padding-top:0.6em;
	}
	div.businesstd{
		float:left;
		padding:5px;
		border-style: solid;
		background-color:#c0c0c0;
		/*idee wäre dessen inhalt auch zu divs zu maczhen*/
	}
	div.logos{
		clear:both;
	}
	div.logo{
		padding:5px;
		float:left;
	}
	div.doppelthoch{
	}
	div.logo img{
		margin: auto;
	}
	
	div.seiteninhalt{
		clear:none;
		float:right;/*left;*/
		/*max-width:738.2px;*/
		colspan:"5";
		background-color:#fefbe8;
		valign:"top";
		height:"100%";
	}
	div.headingstreifen{
		width:100%;
		padding-top:1px;
		padding-bottom:1px;
		height:13px;/*war 15px; ohne dadding, für zentrierung geändert*/
		display:block;
		text-align:center;
		background-color:#0BAEA0;
		color:#ffffff;
		/*display:table-cell;*/
		vertical-align: middle;
		line-height: 13px;/*war 15px ; ... für zebtrierung 13*/
	}
	.suchfeld select.suchfelddtype,
	/*.suchfeld .volltext*/
	{
		width:244px;
	}
	div.search-buttons{/*war erst nur auf kleineren schrimen so, warum eigentlich?*/
		float:right;
		padding-top: 0px !important;
	}
	td.abstandcell{
		width: 2px; /*normalfall wenn nicht durch 0px !important; überschrieben*/
	}
	td.inhaltcell table{
		/*das sind tabellen in html files deren breite mit 734 angegeben war, was wir nicht mehr brauchen können*/
		width:100% !important;
		box-sizing: border-box;
	}
	div.suchergebnis{
		box-sizing: border-box;
		width:100%; 
	}
	div.trefferliste{
		display: table;
		margin-bottom: 1em;
	}
	div.srch_result_tr{
		display: table-row;
		width:100%;
	}
	div.srch_bildspalte{
		display:table-cell;
	}
	div.srch_img {
		padding-top:0px;
	}
	div.srch_txt{
		display:table-cell;
		text-align:left;
		vertical-align: middle;
		word-wrap: break-word;

	}
	.srch_txt a{
		word-wrap: break-word;
		overflow-wrap: break-word;

		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;	
	}
	td.srch_txt
	{
		word-wrap: break-word;
		overflow-wrap: break-word;

		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;	
		/*explizit, da auf android zu klein*/
		font-family: verdana, "sans serif";
		font-size: 12px;
	}	
	div.srch_txt
	{	/*explizit nochmal weil...*/
		font-family: verdana, "sans serif";
		font-size: 12px;	
	}
	div.srch_result>div{
		padding-top:1em;
	}
	div.srch_bildspalte img,
	{
		border:0;
	}
	div.srch_bildspalte
	{
		width: 66px; /*9%;*/ 
		text-align: center;
	}	
	.trefferliste{
		/*box-sizing: border-box;*/
		width:100%; /*früher im code '734'*/
		max-width:100% !important;
	}
	.trefferliste{ /*statt td abstandcell*/
		margin-left: 2px;
	}
	div.demand_bildspalte{
		max-width:60px;
	}
	div.onDemandPartBalken{
		display:table;
		overflow: auto;
		/*box-sizing: border-box;*/
		width:99%;/*im alten emap 484px*/
		margin-right:10px;
		background-color:#c0c0c0;
		font-weight: bold;
		/*vertical-align: middle;*/
		line-height: 14px;
		
		/*explizit nochmal weil...*/
		font-family: verdana, "sans serif";
		font-size: 12px;	
	}
	div.onDemandPartBalken img{
		float:left; 
		margin-right:4px;
		/*align:left;*/
		/*height:14px;*/
	}
	/*div.onDemandPartBalken a{
		margin-top:-2px;
	}*/
	div.onDemandSpeaker{
		width:20px;
		display:table-cell;
		vertical-align:middle;
		background-color:#0baea0;
		/*float:left; */
	}
	div.onDemandTitle{
		display:table-cell;
		margin:0px;
		padding-left:4px;
		/*float:left; */
		vertical-align: middle;
		clear:none;
	}
/*@media (max-width: 375px) { 	
	table.trefferliste{ 
		max-width: 374px !important;
	}
}	
@media (max-width: 360px) { 	
	table.trefferliste{ 
		max-width: 359px !important;
	}
}@media (max-width: 320px) { 	
	table.trefferliste{ 
		max-width: 319px !important;
	}
}
	.trefferliste{ 
		max-width: 100%;
	}
*/

div.transport{
		float: left;
		clear: both;
		padding-left: 2px;
}
div.transporttext{
		padding-left: 1em;
		padding-top: 2px;
		padding-bottom: 2px;
		float: right;
}


/*   ----------------------------- AUDIO STYLES    */
.audiocontrols button,
.audiocontrols #volSlider{
	cursor: pointer;
}
.audiocontrols {
	 /*background-color:#444444;
		entweder hier bgcolor oder bei den input[image]  alles inverted... 
	*/
    cursor: pointer;
    height: 30px !important;
   /*left: 167px;
    top: 65px;
    */
    clear:both;
    float:left;
    width:  210px !important;
    margin-left:-1px;
    padding:2px;
	border-radius: 6px;
	text-align: left !important;
}
.audiocontrols input,
.audiocontrols img,
.audiocontrols button,
.audiocontrols small  {
	filter: invert(100);
}	
.audiocontrols button
{
/*	box-sizing: border-box;*/
	width:26px !important;
	height:26px !important;
	background-repeat: no-repeat;
  	background-position: center; 
  	/*background-size: contain; wäre eine Option für größere Icons, will Emil aber eh nicht*/
}

.audiocontrols input[type="image"],
.audiocontrols img,
.audiocontrols button
{
	border:  solid 2px;
	background-color:rgba(256, 256, 256, 0.5);
	/*  background-color: none;   #BBBBBB;  */
	/* color: #B4B4B4; */

	/*oder*/

	border-color:#dddddd;/* */
	border-radius: 6px;
	filter: invert(0.2);
	/*filter: invert(100);*/	
	height: 22px;
    width: 22px;
	clear:none;
	float:left;
	margin:2px;
	/*margin-right:0px;*/
	padding:0px;
    /*background-color: #FFFFFF;*/
}
#pauseButton,
#unmuteButton{
	display:none; 
}
.slider-wrapper {
  clear:none;
  float:left;
  display: inline-block;

  width: 30px;
  height: 60px;
  padding: 0;
}
.slider-wrapper input {
  width: 55px;
  height: 30px;
  margin: 0px;
  /*transform-origin: 30px 30px;*/
  /*transform: rotate(-90deg);*/
}		
#volSlider{
  width: 95px;
  margin-top:11.5px;
  /*padding:1px;*/
  clear:none;
  margin-left:2px;
} 
#currtime{
	float: left; 
	/*position: relative;*/ 
	left: 15px;
	min-width:45px;
	color:#AAAAAA;
	margin-top:8px;
	margin-left:5px;
	font-size: 11px ;
}
.slider {
  -webkit-appearance: none;
  height: 7px;
  background: #aaaaaa;/*#eeeeee;*/
  outline: none;
  opacity: 0.5;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 15px;
  background: #ffffff;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 6px;
  height: 12px;
  background: #ffffff;
  cursor: pointer;
}

.slider::-ms-thumb {  /* ehl 10.6.2020 für IE */
  background: black;
  color: transparent;
}

/* featured */
div.feature_text {
	margin-left: 0.5em;
	margin-right: 0.5em;
	margin-top: 0.7em;
	margin-bottom: 0em;
}

img.cagebird {
	margin-left: 2em; margin-right: 2em; margin-top: 0.5em; margin-bottom: 0.5em;
	width: 100px;
}

div.srch_img_feat {
	width: 58px !important;
	margin-left: 0.7em;
	margin-right: 0.2em;
}	
/*
@media (max-width: 420px) {
	div.srch_img_feat {
		width: 58px !important;
		margin-left: 0.75em;
		margin-right: 0.2em;
	}
}
*/

/* ticker */
div.tickers {
	white-space:nowrap;float:left;height:21px;z-index:1;
}
/*
div.ticker1 {
	float:left;margin-top:3px;
}
*/
@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
	div.ticker1 {
		float:left;margin-top:4px;
	}
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
	div.ticker1 {
		float:left;margin-top:2px;
	}
	@media (max-width: 420px) {
		float:left;margin-top:0px;
	}
} 

/* station player */
audio.myAudioControls { 
	width: 136px;
    display:none !important; /* f. iPhone 4  ??? */
}
/*
button.myPlayButton {
	background-image: url( '../images/playButton.svg');
}

button.myPauseButton {
	background-image: url( '../images/pauseButton.svg'); 
}

button.myMuteButton {
	background-image: url( '../images/audioMutedButton.svg'); 
}

button.myUnmuteButton {
	background-image: url( '../images/audioUnmutedButton.svg');
}
*/
#playButton {
	background-image: url( '../images/playButton.svg');
}
#pauseButton {
	background-image: url( '../images/pauseButton.svg'); 
}
#muteButton {
	background-image: url( '../images/audioMutedButton.svg'); 
}
#unmuteButton {
	background-image: url( '../images/audioUnmutedButton.svg');
}


#playButton,
#pauseButton,
#muteButton ,
#unmuteButton,
#blaetternFirst,
#blaetternPrev,
#blaetternNext,
#blaetternLast
{ cursor: pointer }