h1, h2, h3, h4, h5 {
	color: black;
	/* text-transform: lowercase; */
	clear: both;
}

h1 { 
	font-size: 2.3rem; 
	line-height: 2.4rem;
}

h2 { font-size: 1.9rem; }

h3, .h3 { 
	font-size: 1.3rem; 
	line-height: 1.4rem;
}

h4 { font-size: 1.1rem; }

q {
    padding: 10px;
    display: inline-block;
    font-size: x-large;
    font-style: italic;
}

.naam {
	text-transform: none;
}

.small {
	font-size: 0.8rem;
}

body {
    background-position: center center;
	background-attachment: fixed;
    background-size: cover;
}

body.popup {
	background-image: none;
	background-color: #f2f2f2;
}

.strike-out {
	text-decoration: line-through;
}

.ug-info {
	font-size: 0.8rem;
}

p.ug-info {
}

div.ug-info {
	padding-left: 100px;
}

.graph {
	background-color: steelblue;
	border: 1px solid black;
}

.dimmed {
	opacity: 0.5;
}

.dimmed-line, .dimmed {
	color: silver;
}

.big-area {
	background-color: white;
}

.socialpanel {
	margin-bottom: 1.25rem;
	margin-left: 0.2rem;
}

.quicklinkpanel {
	margin-bottom: 1.25rem;
	margin-left: 0.2rem;
	font-size: 0.8rem;
}

#user-panel div.row {
	background-color: transparent;
}

#user-panel img {
	padding: 0;
}

.smaller {
	font-size: 0.9rem;
}

.adres {
	font-weight: bold;
}

#menu-bar {
	margin-bottom: 0px;
}

#logo {
	padding-left: 16px;
	padding-right: 16px;
}

#nieuws-titel {
	max-width: 200px;
}

#station-name {
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-size: 1.7rem;
	font-weight: bolder;
	color: #6f6f6f;
}

@media only screen and (max-width: 380px) {
	#station-name { display: none; }
}

/*
@media only screen and (min-width: 324px) {
	#station-name { margin-top: 20px; }
}

@media only screen and (min-width: 420px) {
	#station-name { margin-top: 26px; }
}
*/

#station-payoff {
	font-size: 0.7rem;
	font-family: cursive,Verdana,Geneva,Arial,Helvetica,sans-serif;
	letter-spacing: 1px;
}

@media only screen and (max-width: 300px) {
	#station-payoff { display: none; }
}

.freq {
	font-size: 1.7rem;
	margin-bottom: 0.5rem;
}

.freq span {
	display: block;
	font-size: 1rem;
}

#header, #header-banner {
	background-color: transparent;
}

#header-menu, #header-banner {
	margin-top: 5px;
}

#header  {
	background-color: white;
	border: 2px solid white;
	margin-top: 5px;
}

footer {
	margin-bottom: 50px !important;
}

#information-bar {
	font-size: 0.8rem;
	font-size: 0.6875rem;
	text-transform: uppercase;
	padding: 0.3rem 0.875rem;
	background-color: #f4f4f4;
	border-color: gainsboro;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
}

#information-bar > *:before {
	color: #aaaaaa;
	content: "/";
	margin: 0 0.75rem;
	position: relative;
	top: 1px;
}

#information-bar > *:first-child:before {
	content: " ";
	margin: 0;
}

#information-bar > *:last-child:before {
	content: " ";
	margin: 0;
}

.sub-nav-off {
	margin: 0;
}

#programma {
	font-weight: bold;
	display: none;
}

.more-distance-row {
	padding-bottom: 1rem;
}

.tothetop {
	border-right: 1px solid #d8d8d8;
	border-top: 1px solid #d8d8d8;
	padding-right: 10px;
	text-align: right;
}

.extranet-page {
	margin-top: 3rem;
}

.extranet-page div.row {
	margin-bottom: 1rem;
}

.form-info {
	margin-bottom: 1rem;
	white-space: initial;
}

.code-image {
	border: 1px solid black;
	margin-bottom: 5px;
}

.google-map {
	margin-top: 10px;
	margin-bottom: 10px;
}

.archive-select {
	margin-bottom: 0.5rem;
}

.profile-foto {
	float: left;
	margin-bottom: 10px !important;
	
}

.contact-foto {
	margin-bottom: 20px; 
}

.icon_text {
	padding-top: 7px;
}

.large-icon {
	padding: 0;
	padding-right: 15px;
}

/*
.foto, .large-icon {
	border: 1px solid steelblue;
}
*/

.spotted-foto {
	background-size: 30px auto;
	height: 30px;
	width: 30px;
	float: left;
	border: 1px solid steelblue;
	margin-top: 3px;
	margin-right: 3px;
}

img.next-to-h {
	margin-top: 12px;
}

.content-base img {
	margin-right: 10px !important;
	margin-bottom: 10px !important;
	float: left;
}

.content-base img[style*="float:right"] {
	margin-left: 10px;
}

/*
.foto-index img {
	max-height: 260px;
}
*/

.truncate {
	display: block;
	height: 5rem;
	overflow: hidden;
	position: absolute
}

.shadow {
	background-image: linear-gradient(to bottom, transparent, white);
	position: relative;
}

.shadow-off {
	display: none;
}

.truncate-off {
	height: auto;
	background-image: none;
	position: relative;
}

.sayless, .saymore {
	z-index: 20;
}

.sayless:after {
	content: "Minder...";
}

.saymore:after {
	content: "Meer...";
}

ul.share-buttons{
  list-style: none;
  padding: 0;
  margin-left: 0;
  padding-top: 20px;
  clear: both;
}

ul.share-buttons li{
  display: inline;
}

/*================================================================================================================================================*\
* CHART ELEMENTS
\*================================================================================================================================================*/

.chart-nr {
	background-color: white;
	border: 3px solid black;
	border-radius: 19px;
	color: black;
	font-size: 16px;
	height: 37px;
	margin: 0 0 10px 0px;
	padding: 3px 0 0 1px;
	position: absolute;
	text-align: center;
	width: 39px;
	z-index: 2;
}

.chart-title {
	padding-top: 10px;
}

.chart-preview, .chart-preview p {
	font-size: 0.8rem;
	padding-right: 1rem;
}

@media only screen and (min-width: 310px) {
	.chart-nr-alt { display: none; }
}

.chart-img {
	padding-left: 10px;
	padding-top: 10px;
}

@media only screen and (max-width: 309px) {
	.chart-nr { 
		display: none;
	}
	.chart-title {
		padding-top: 0;
	}
	.chart-img {
		padding-left: 0;
		padding-top: 0;	
	}
}

.chart-visual {
	width: 200px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.chart-row {
	padding-top: 15px;
}

.foto-container {
	background-color: #eee;
	margin-bottom: 5px;
	text-align: center;
}

.foto-index li {
	font-size: 0.8rem;
}

.foto-index span {
	margin-top: 10px;
}

.prog-tabel td {
	vertical-align: top;
}

.prog-van-tot {
	text-align: right;
	width: 1rem;
}

.prog-van:after {
	padding-left: 10px;
	content: "-";
}

.prog-dag {
	width: 1rem;
}

.prog-name a {
	font-weight: bold;
}

.prog-name p {
	font-size: 0.875rem;
	margin-top: 0.2rem;
}

.th-inverse {
	border-bottom: 1px solid blue;
	padding-bottom: 0;
	padding-top: 0;
}

.th-inverse h4 {
	font-weight: bold;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.uppercase {
	text-transform: uppercase;
}

#main-content {
	/* padding-right: 0; */
}

#main-content, #banner-area {
	padding-left: 15px;
	margin-top: 0.7rem;
}

#home-linker-kolom {
	padding-left: 0;
	padding-right: 50px;
}

#home-rechter-kolom {
	padding-right: 50px;
}

.home-fragment {
	margin-bottom: 3rem;
}

.social-bar-home {
	border-top: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	padding-top: 2px;
}

.add-this-container {
	margin-bottom: 10px;
}

.footer-container {
	font-size: 0.9rem;
	margin-bottom: 2rem;
	text-align: center;
}

.footer-item {
}

.sitemap li {
	padding: 0.7rem;
}

.header-part {
	display:table-cell; 
	vertical-align:middle; 
	float: none; 
	height: 80px;
}

.header-left span {
	float: left; 
}

.header-left-text {
	text-align: center; 
}

.header-right {
	padding-right: 10px;
}

@media only screen and (max-width: 195px) {
	.header-right { display: none; }
}

.header-date {
    font-size: 0.8rem;
    font-weight: bold;
}

.header-weather {
	float: right;
	font-size: 0.8rem;
}

.header-weather-small {
	text-align: right;
	padding-right: 10px;
	font-size: 0.8rem;
}

.breadcrumb-short { display: inline; }
.breadcrumb-normal { display: none; }

/*
@media only screen and (max-width: 340px) {
	#station-name { display: none; }
}
*/

#banner-area {
	margin-top: 15px;
}

#banner-area img {
	padding-right: 5px;
}

#banner-area img.med-foto,
#banner-area img.alg-foto {
	padding-right: 0;
}

ul.programma-list {
	margin-left: 0;
}

ul.programma-list li {
	font-size: 0.8rem;
	line-height: 1.5rem;
	list-style: outside none none; 
}

ul.article-list li {
	line-height: 2rem;
	list-style: outside none none;
}

.article-date-short {
	width: 50px;
	display: inline-block;
	font-weight: bold;
}

/*================================================================================================================================================*\
* SKINNED ELEMENTS
\*================================================================================================================================================*/

body.koninginnedag #header {
	/* background-color: orange;	*/
}

body.koninginnedag h1 {
	color: orange;
}

body.koninginnedag .panel {
	border-color: orange;
	border-width: 2px;
}

body.koninginnedag .label {
	background-color: orange;
}

body.koninginnedag .label.secondary {
	background-color: #e7e7e7;
	color: #333333;
}

body.koninginnedag .sub-nav dt.active a, 
body.koninginnedag .sub-nav dd.active a, 
body.koninginnedag .sub-nav li.active a  {
	background-color: orange;
}

/*================================================================================================================================================*\
* IMAGE EFFECTS
\*================================================================================================================================================*/

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

img.blur { 
	filter: url(blur.svg#blur); 
	-webkit-filter: blur(3px); 
	filter: blur(3px); 
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 
}

/*================================================================================================================================================*\
* COMMON PAGE LAY OUT
\*================================================================================================================================================*/
.page-base {
	margin-top: 1.5rem;
}

/*================================================================================================================================================*\
* LINK DECORATION
\*================================================================================================================================================*/
.map, .twitter, .email-contact, .linkedin {
	background-repeat: no-repeat;
	font-size: 0.8rem;
}

.map {
	background-image: url("../images/google-maps-pointer.png");
	background-position: 0 2px;
	background-size: 9px auto;
	padding-left: 16px;
}

.twitter {
	background-image: url("../images/logo/twitter.png");
	background-size: 17px auto;
	padding-left: 20px;
}

.linkedin {
	background-image: url("../images/logo/linkedin.png");
	background-size: 17px auto;
	padding-left: 20px;
}

.email-contact {
	background-image: url("../images/email.png");
	background-size: 17px auto;
	padding-left: 20px;
}

.link-row-item {
	margin-right: 20px;
}

.row-distance {
	padding-top: 0.1rem;
}

span.secondary a {
	color: black;
}

span.label-bigger {
	padding: 0.4rem;
}

.link-row-item-big {
	background-repeat: no-repeat;
	background-size: 32px auto;
	padding-left: 36px;
	min-height: 35px;
}

.luister-live {
	background-image: url("../images/icon_live.png");
}

.uitzending-gemist {
	background-image: url("../images/icon_audio.png");
}

.lok-webcam {
	background-image: url("../images/icon_webcam.png");
}

/*================================================================================================================================================*\
* SCHEDULE
\*================================================================================================================================================*/

.schedule tr {
    height: 60px;
}

.schedule td {
	font-size: 0.7rem;
	border-right: 1px solid steelblue;
}

.schedule tr.schedule-first-row th{
	font-size: larger;
}

.schedule td.schedule-prog {
	font-size: small;
}

.schedule td.schedule-time-item {
	border-top: 2px dotted silver;
	font-size: larger;
	vertical-align: top;
	text-align: right;
}

.schedule-start {
	border-top: 1px solid steelblue;
}

.schedule-eind, .time-row25 td {
	border-bottom: 1px solid steelblue;
}

.schedule-geen {
	background-color: #e0e0e0;
}

.schedule-prog {
	background-color: white;
}

.schedule-herh {
	background-color: #cccccc;
}

.schedule-time {
	border-left: 1px solid steelblue;
}

.schedule-legenda td {
	border: 1px solid steelblue;
}

/*================================================================================================================================================*\
* PLAYLIST
\*================================================================================================================================================*/

div.pl_eerder, div.pl_nu, div.pl_straks {
	margin-top: 10px;
}

.track_promo .track_name {
	font-style: italic;
}

.track_time {
	font-weight: bold;
	padding-right: 10px;
}

.track_promo {
}

.pl_nu p span.track_name {
	font-weight: bold;
}

/*================================================================================================================================================*\
* HOME PAGE
\*================================================================================================================================================*/

.home-article {
	overflow: none;
	height: 400px;
}

.home-article h3,
.home-article .h3 {
	line-height: 1.9rem;
}

.home-article-secundary div.foto {
	height: 190px;
	background-position: center;
    background-size: cover;
}

.home-article-secundary div.foto:hover {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.home-article-secundary div.foto:active {
	border: 5px solid silver;
}

.home-article-secundary h5 {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
    position: relative;
    padding: 3px;
    /* height: 146px; */
    overflow: hidden;
	font-size: 1.0rem;
}

.dimmer-title {
	color: white;
	font-size: 24px;
	line-height: 1.5rem;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.home-article-secundary .dimmer-title {
	font-size: 16px;
}

.home-article-secundary > div {
	min-height: 150px;
}

.homepage img,
.home-article img {
}

.home-article-clipfoto {
    background-position: center center;
    background-size: cover;
    min-height: 350px;
    overflow: hidden;
    display: flex;
}

.home-article-primary .article-title {
	position: relative;
    top: 240px;
    padding: 10px;
}

.home-article-secundary .article-title {
    /* position: relative; */
    top: 175px;
    padding: 10px;
    /* min-height: 100px; */
    display: flex;
    height: 175px;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-end;
    flex-direction: column;
}

.article-title h3 {
	color: white;
	font-size: 1.5em;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.article-title h3.smallerH3 {
	font-size: 1.2em;
}

.home-article-primary .article-title-transbox, .home-article-secundary .article-title-transbox {
	background-color: black;
	opacity: 0.3;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}

.home-article-primary .article-title-transbox {
	position: relative;
    top: 245px;
    padding: 10px;
	min-height: 105px;
}

.home-article-secundary .article-title-transbox {
    min-height: 120px;
    /* background-color: black; */
    top: 178px;
    position: relative;
}

.home-article-column-foto {
	/* max-height: 350px; */
	overflow: hidden;
}

.home-article-clipfoto img {
	min-height: 200px;
}

.home-article-clipfoto:hover {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.home-article-clipfoto:active {
	border: 5px solid silver;
}

.home-onderschrift {
	margin-bottom: 5px; 
}

.home-article-primary span {
	position: absolute;
	margin: 5px;
}

.programma-list .programma-tijd-short {
	display: inline-block;
	font-weight: bold;
	margin-right: 5px;
	text-align: right;
	width: 30px;
}

.programma-list .programma-tijd-next {
	font-weight: bold;
}

.programma-list .programma-naam {
}

/* oranje #ED7B18; blauw #014380 */

.amber-alert div.amber-alert-title {
	background-color: #ED7B18;
	padding: 5px;
}

.amber-alert div.amber-alert-body {
	margin-top: 5px;
}

.amber-alert a,
.amber-alert h3,
.amber-alert .h3 {
	color: #014380;
}

.amber-alert img {
	padding-right: 10px;
}

.amber-alert-footer {
	font-size: 0.8rem;
	float: right;
}

/*================================================================================================================================================*\
* PROFIEL PAGINA (CONTACT)
\*================================================================================================================================================*/

.twitter-link {
	padding-right: 20px;
}

.twitter-link a {
	font-size: 24px;
	color: black;
}

/*================================================================================================================================================*\
* VIDEO
\*================================================================================================================================================*/

.youtube-player { 
	height: 475px;
}

@media only screen and (max-width: 750px) {
	.youtube-player { 
		height: 350px !important;
	}
}

@media only screen and (max-width: 630px) {
	.youtube-player { 
		height: 300px !important;
	}
}

@media only screen and (max-width: 360px) {
	.youtube-player { 
		height: 200px !important;
	}
}

/*================================================================================================================================================*\
* UITZENDING GEMIST
\*================================================================================================================================================*/

.ug_page {
	display: none;
}

.jp-controls button,
.jp-volume-controls button,
.jp-toggles button {
	padding: 0;
 }
 
 .icon {
	width: 40px;
	height: 40px;
 }
 
 .ug_alle {
	width: 36px;
 }

/*================================================================================================================================================*\
* NEWS
\*================================================================================================================================================*/

.article-thumb {
	width: 100%;
	margin-bottom: 0.7rem;
}

.regio-article-thumb {
	width: 30%;
	margin-bottom: 0.7rem;
	margin-right: 0.7rem;
	float: left;
}

.news-index-item {
	padding-top: 20px;
	padding-bottom: 20px;
}

.news-index-item p, .index-item p {
	padding-top: 10px;
	color: black;
}

.news-index-item div.columns {
	padding-left: 0;
}

.short-article-date { 
	background-color: #96bce5; 
	color: white;
}

.short-article-year { 
	background-color: #f4f4f4;
	color: black;	
	border: 1px solid #96bce5; 
}

.short-article-date, .short-article-year {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 2px;
    margin-right: 10px;
    min-width: 70px;
    padding: 5px;
    text-align: center;
}

.article-selected {
	font-weight: bold;
}

/*================================================================================================================================================*\
* PROGRAMMA HOMEPAGE
\*================================================================================================================================================*/

.programma-base {
	margin-top: 2rem;
}

.programma-base ol {
	margin-left: 2rem;
}

.med-foto,
.alg-foto {
	margin-bottom: 0 !important;
	margin-right: 0  !important;
	width: 100%;
}

.med-label,
.alg-label {
	font-weight: bold;
	font-size: 1rem;
	padding: 2px;
	text-align: center;
	color: black;
}

.med-content span {
}

.med-content {
	width: 100%;
}

.selected-year {
}