/*
Theme Name: Radio website V3
Theme URI:  URL van je de pagina over dit thema
Author:     Peter de With
Author URI: http://internet-radio-stream.nl
Description: Childtheme of bootstrap-basic
Template:   bootstrap-basic
Version:    3.11 (07-12-2025)
*/

@import url("../bootstrap-basic/style.css");
/* Header */

/* Dit stukje code vertelt het apparaat dat hij zijn werkelijke breedte moet aanhouden. */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:400;line-height:1;color:#777}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}
h1 small,.h1 small,h2 small,.h2 small,h3 small,.
h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}
h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}
h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}

h4,.h4{font-size:18px}
h5,.h5{font-size:14px}
h6,.h6{font-size:12px}



@media (min-width: 240px) {
    h1 {font-size: 2.0rem;}
	h2 {font-size: 1.4rem;}
	h3 {font-size: 1.4rem;}	
}


@media (min-width: 350px) {
    h1 {font-size: 2.0rem;}
	h2 {font-size: 1.4rem;}
	h3 {font-size: 1.4rem;}	
}

@media (min-width: 480px) {
    h1 {font-size: 2.1rem;}
	h2 {font-size: 1.4rem;}
	h3 {font-size: 1.4rem;}	
}

@media (min-width: 768px) {
    h1 {font-size: 2.3rem;}
	h2 {font-size: 1.6rem;}
	h3 {font-size: 1.4rem;}	
}

@media (min-width: 960px) {
    h1 {font-size: 2.7rem;}
	h2 {font-size: 1.7rem;}
	h3 {font-size: 1.5rem;}	
}

@media (min-width: 1200px) {
    h1 {font-size: 3.0rem;}
	h2 {font-size: 2.4rem;}
	h3 {font-size: 1.8rem;}	
}




/* Reactie invoer veld */
.form-group {
	margin-right: 6px !important;
}



.wp-caption {
	border: 0px solid #ccc;
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 1.2% auto 0;
	max-width: 98%;
}
.wp-caption-text {
	text-align: center;
	font-size: 10px;
	font-style: italic;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

#main-column .page {
	background: #ffffff;
}	


#sidebar-left .widget,
#sidebar-right .widget {
	border: 0px solid #000000;
	margin-bottom: 0px;
	overflow: hidden;
	padding: 0px;
}


.navbar-brand, .navbar-nav > li > a {
    text-shadow: 0 0px 0 !important;
}

	
.navbar-default
/* menu balk muis over werkt staat in style */
	a:hover {

}

.navbar {
    border: 0px solid transparent;
}


.dropdown-menu {
	color: #0000ff;
}

/* menu balk met dropdown menu actief */
.active {
}
	
.player_links a:hover{
background: none !important;
}	
	

 a:focus{
    color: #000ff0 !important;
}
	

.entry-content {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22.7px;
	font-size: 15px;
}



.footer_compleet_onder {
    margin-right: -15px !important;
    margin-left: -15px !important;
	margin-bottom: 30px;
}

.row {
    margin-right: 0px;
    margin-left: -0px;
	padding-left: 8px;
	padding-right: 8px;	
}

/* div Boxjes */
.box-1-top{
	color: #ffffff;
	/* font-family: Comic Sans MS, cursive, sans-serif; */
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	line-height: 25px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	background: #ff0000;
	max-width: 100%;
	min-height: 40px;
}

.box-1-mid{
	border-style:solid;
	border-top: 0px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 0px;
	max-width: 100%;
	background:#;
}

.box-1-mid-1{
	color: #000000;
	/* font-family: Comic Sans MS, cursive, sans-serif; */
	font-size: 0.95em;
	text-align: center;
	min-height: 120px;
	background-repeat: no-repeat;
	background:#E6E6E6;
	background-position:center ; 
	background-size: 70%;
}

/* kleuren tabjes easy responcive shortcodes */ 
/* Tabs */
.wpcmsdev-tabs {
  margin: 1.5em 0 !important;
  padding-top: 0.2em;
}
.wpcmsdev-tabs .headings {
  float: left;
  width: 100%;
}
.wpcmsdev-columns .column.column-width-one-third {
    width: 30.666667%;
	margin-right: 2%;
}
	
.wpcmsdev-columns .column {
    float: left;
    margin-right: 2% !important;
}	
	
.wpcmsdev-tabs .headings a {
  display: block;
  float: left;
  border: 1px solid #ffffff !important;
  margin-bottom: -1px !important;
  margin-left: 0px !important;
  padding: 0.6em 1.5em;
  background: # ff0000;
  text-decoration: none;
  color: #ffffff !important;
  outline: 0;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.wpcmsdev-tabs .headings a + a {
  margin-left: -1px;
}
.wpcmsdev-tabs .headings a.active,
.wpcmsdev-tabs .headings a:active,
.wpcmsdev-tabs .headings a:focus,
.wpcmsdev-tabs .headings a:hover {
  border-color: #d8d8d8 !important;
  background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(90,140,240,1)) !important; /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(0,0,0,1), rgba(90,140,240,1)) !important; /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(0,0,0,1), rgba(90,140,240,1)) !important; /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0,0,0,1), rgba(90,140,240,1)) !important; /* Standard syntax */
}
.wpcmsdev-tabs .headings a.active {
	border: 0px solid #000000 !important;
  border-top-left-radius: 0.7em !important;
  border-top-right-radius: 0.7em !important;
  border-bottom-color: #  !important;
  margin-top: -0.2em;
  padding-top: 0.8em;
  background: -webkit-linear-gradient(rgba(90,140,240,1), rgba(0,0,0,1)) !important; /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(90,140,240,1), rgba(0,0,0,1)) !important; /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90,140,240,1), rgba(0,0,0,1)) !important; /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(90,140,240,1), rgba(0,0,0,1)) !important; /* Standard syntax */
}

.wpcmsdev-tabs .headings a:first-child {
  border-top-left-radius: 0.25em;
}
.wpcmsdev-tabs .headings a:last-child {
  border-top-right-radius: 0.25em;
}
.wpcmsdev-tabs .tab {
  clear: both;
  border: 1px solid #d8d8d8;
  padding: 1.5em;
  background-color: #fdfdfd;
}
.wpcmsdev-tabs .tab > :first-child {
  margin-top: 0 !important;
}
.wpcmsdev-tabs .tab > :last-child {
  margin-bottom: 0 !important;
}
/* Toggles */
.wpcmsdev-toggle .toggle-title a {
  background-image: linear-gradient(rgba(90,140,240,1), rgba(0,0,0,1)) !important; 
  color: #999999 !important;
}
.wpcmsdev-toggle .toggle-title a:active,
.wpcmsdev-toggle .toggle-title a:focus,
.wpcmsdev-toggle .toggle-title a:hover {
  background-image: linear-gradient(rgba(0,0,0,1), rgba(90,140,240,1)) !important; 
  border: 0;
}


.web_live_player_header {
	padding-top: 10px;
	color: #ededed;
	background: #000000;
	font-family: Comic Sans MS, cursive, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	width: 100%;  max-width: 350px;
	height: 100%;  max-height: 225px;
}

.uppercase{
	text-transform: uppercase;
}  

.web_live_player_footer {
	color: #ff0000;
	background: #000000;
	font-family: Comic Sans MS, cursive, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	width: 100%;  max-width: 350px;
	height: 100%;  max-height: 50px;
} 
  
  .now_playing_scroler {
	background: #000000;
	text-align: left !important;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	height: 100%;  max-height: 45px;
	max-width: 95%;
	border: 0px;
} 
  
	.now_playing_scroler_2 {
	background: #ffffff;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	height: 100%;  max-height: 45px;
	max-width: 100%;
	position: absolute;
    left: 0;
    top: 0;
    right: -30px;
    bottom: 0;  
    padding-right: 15px;
    overflow-y: scroll;
} 

/* knoppen */
.widget_button{
  background-image: url("img/Knoppen_sidebar.png");
  background-repeat: no-repeat;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  width: 90%;
  max-width: 288px;
  height: 50px;
  border-bottom-left-radius:3px; 
  border-bottom-right-radius:3px;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
}


.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
}


/* flaggen voor wpml groter */ 
#lang_sel_list img.iclflag{
width: 40px;
height: 29px; 
position: relative; 
top: 0px; 
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

/* audio player main blok */
audio, canvas, progress, video {
    width: 95%;
}

.map-box {
    background-color: #000000 !important;
}

/* Zorgen dat fotos niet breden dan content worden */
img {
    max-width: 100%;
    height: auto;
}

/* Ruimte onder footer */
body {
    margin-bottom: 30px;
}

/* Feature Box 4 vak foto kleiner voor programma gids */
.kc-fb-layout-4 .content-image {
	max-width:150px !important;
}	
	
.kc-fb-layout-4 .content-image img {
    max-width: 100%;
}

.kc_tabs_nav > li > a, .nav-pills > li > a {
    padding: 0 0px !important;
}

.kc_tabs_nav ~ .kc_tab.ui-tabs-body-active {
    background: #ffffff !important;
}

/* 2025 06-28 voor player en cover(2 div) */
    .container_player_cover {
      display: flex;
	  margin: inherit;
	  align-items: center; 
    }
    .box_player_cover {
      flex: 1; /* Beide divs nemen evenveel ruimte in */
      padding: 0px;
      margin: 0px;
      text-align: center;
    }


/* 2025 04-12 voor scrollende data-widget */
.scroll-container {
    width: 300px;           /* pas aan naar wens */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.scroll-text {
    display: inline-block;
    padding-left: 100%;     /* start buiten beeld */
    animation: scroll-left 12s linear infinite;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* 2025 04-12 voor real time EQ vu meter */
/* wrapper voor EQ + scrolltekst */
.equalizer-wrap {
  position: relative;
  width: 100%;
  height: 85px;          /* zelfde hoogte als eerder */
  overflow: hidden;
}

/* container voor de 32 bands (ongeveer jouw originele CSS) */
.equalizer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 85px;                /* visuele hoogte van de meter */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1px;
  background: #000;
  padding-top: 5px;
  padding-bottom: 6px;
}

/* één band */
.bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
}

/* basis led */
.segment {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #022000;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  opacity: 0.15;
  transition:
    opacity 120ms linear,
    box-shadow 120ms linear,
    background 120ms linear;
}

/* kleuren van onder naar boven */
.segment.low  { background: #8dff6f; }  /* lichtgroen */
.segment.mid  { background: #1faa00; }  /* donkergroen */
.segment.high { background: #ffe600; }  /* geel */

/* aan */
.segment.on {
  opacity: 1;
  box-shadow: 0 0 8px rgba(255, 255, 120, 0.7);
}

/* rode peak-led */
.segment.peak {
  background: #ff0000 !important;
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 0, 0, 1);
}

/* ====== SCROLLTEKST OVERLAY ====== */

.equalizer-scroll {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 4 tekst-rijen over de 32 kolommen */
.eq-text-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(32, 1fr);  /* precies 32 kolommen */
  gap: 1px;
}

/* verticale posities van de 4 rijen (fijntunen mag) */
.eq-text-row.row-0 { margin-top: 0; }
.eq-text-row.row-1 { margin-top: 2px; }
.eq-text-row.row-2 { margin-top: 4px; }
.eq-text-row.row-3 { margin-top: 6px; }

/* 4-rijen tekst-overlay */
.eq-text-led {
  width: 100%;
  height: 1px;
  margin: 0 1px;
  border-radius: 1px;
  background: #022000;
  opacity: 0.10;
  box-shadow: 0 0 1px rgba(0,0,0,0.8);
  transition:
    opacity 60ms linear,
    background 60ms linear,
    box-shadow 60ms linear;
}

/* tekst aan */
.eq-text-led.on {
  opacity: 1;
  background: #bfff6f;
  box-shadow: 0 0 3px rgba(191,255,111,0.9);
}



/* html 5 realtime vu meter – 4 rijen (2x links, 2x rechts) */
.vu-meter {
  width: 100%;
  height: 46px;
  display: inline-block;
  background: #000;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* elke rij is een horizontale strip leds */
.vu-row {
  display: flex;
  flex-direction: row;
  gap: 1px;
  margin: 0;
  line-height: 0;
}

/* verticale positionering:
   l1 + l2 zitten tegen elkaar,
   dan een kleine gap,
   r1 + r2 zitten weer tegen elkaar */
#vu-l1 { margin-top: 2px; }   /* bovenste linkse rij */
#vu-l2 { margin-top: 0; }     /* direct eronder, geen gap */
#vu-r1 { margin-top: 2px; }   /* iets lager = gap tussen links en rechts */
#vu-r2 { margin-top: 0; }     /* direct onder r1 */


.vu-led {
  width: 4px;
  height: 8px;
  border-radius: 0;
  background: #022000;
  opacity: 0.15;
  box-shadow: 0 0 3px rgba(0,0,0,0.8);
  transition:
    opacity 60ms linear,
    background 60ms linear,
    box-shadow 60ms linear;
}

/* bovenste rijen: alleen bovenhoeken rond */
#vu-l1 .vu-led,
#vu-r1 .vu-led {
  border-radius: 1px 1px 0 0;
}

/* onderste rijen: alleen onderhoeken rond */
#vu-l2 .vu-led,
#vu-r2 .vu-led {
  border-radius: 0 0 1px 1px;
}


/* kleurzones langs de lengte */
.vu-led.green  { background: #8dff6f; }
.vu-led.yellow { background: #ffe600; }
.vu-led.red    { background: #ff0000; }

/* “aan” */
.vu-led.on {
  opacity: 1;
  box-shadow: 0 0 6px rgba(255,255,130,0.8);
}

/* peak-led overrulet kleur */
.vu-led.peak {
  background: #ff0000 !important;
  opacity: 1;
  box-shadow: 0 0 10px rgba(255,0,0,1);
}


/* HTML 5 player syle start / stop knop */
#playStopBtn {
  width: 100px;
  height: 100px;
  background: black;
  border: none;
  outline: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 8px rgba(0,0,0,0.7);
  transition: box-shadow 0.25s ease; /* smooth animatie */
}

#playStopBtn:hover {
	box-shadow: 0 0 15px rgba(0,0,0,1); /* diepere zwarte schaduw */
}

/* PLAY ICON (driehoek) */
#playStopBtn.play::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 32px;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid white;
}

/* STOP ICON (vierkant) */
#playStopBtn.stop::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 35px;
  width: 28px;
  height: 28px;
  background: white;
}


/* realtime analoge VU meter*/

/* opmaak vu meters */
.vu-wrapper {
  display: inline-flex;
  gap: 3px;
  padding: 0px 0px;


/* De “venstertjes” links en rechts */
.vu-case {
  position: relative;
  width: 155px;
  height: 81px;
  height: 81px;
  border-radius: 3px;
  overflow: hidden;
}

/* Gele/beige face met zachte highlight, zoals in je eerste plaatje */
.vu-face {
  position: absolute;
  inset: 0;
}


/* Naald – het JS script draait hieraan */
.vu-needle {
  position: absolute;
  bottom: 11px;
  left: 50%;
  width: 2px;
  height: 60px;    			/* lengte naald*/
  background: #c11;         /* kleur naald */
  transform-origin: bottom center;
  transform: rotate(0deg);   /* wordt door JS overschreven */
  pointer-events: none;
}

/* Kleine animatie smoothing, JS doet de echte beweging */
.vu-needle {
  transition: transform 40ms linear;
}

/* L / R labels */
.vu-label {
  position: absolute;
  bottom: 9px;
  right: 5px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}

.vu-face {
  position: absolute;
  inset: 0;
  background: #000;
  background-image: url("img/vu_meter_analoog.png");
  background-size: cover;
  background-position: center;
}