/* external style sheet: 
// function: provides basic style information 
// author: Jonathan Eskes
// 
// History
// Date					Reason		Version
// june 23 1997				Creation	Concept
// Thu Oct 20 11:32:38 CEST 2005	ccagenda.nl
// Wed Jun 14 10:38:48 CEST 2023	snelle aanpassing voor goede weergave cookiemelding
//
// Used hacks:
// The Box Model hack: http://www.communitymx.com/content/article.cfm?page=1&cid=E0989953B6F20B41
// IE 5 center hack (.iehackwrap)
// 3 columns, same lenght: http://www.redmelon.net/tstme/3cols2/ (doesn't work in e-mail, because hotmail removes negative numbers (margin-left)
// color codes:
// groen: #7BBF18;
// oranje: #FF9900;
// rood: #CF2C5A;
// lichtergroen: #DFF7DF;
*/


/*----------------------------------------*/
/* general use ---------------------------*/
/*----------------------------------------*/

html, body	{
	font-size: 100%;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: Black;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	background-image: url(/afb/bg.png);
	background-repeat:repeat-x;
	margin-top: 0px;
}

.clear { clear: both; }
.small { font-size: 0.9em; }

body.adBanner {
	background-image: url();
}
body.adBanner a {
	clear: both;
	float: left;
}
html.ad, body.ad {
	background-color: #fff;/*#ffefdf;*/
}
body.ad a {
	text-decoration: none;
}

#wrapper {
	width: 942px;
	margin-left: auto; /* center page */
	margin-right: auto;
	border-top: 0px;
	overflow:hidden;
}



/*----------------------------------------*/
/* header --------------------------------*/
/*----------------------------------------*/

#ccagenda-header {
	width: 100%;
	height: 164px;
	background-image: url(/afb/header-foto.jpg);
	background-repeat: no-repeat;
	position: relative;
}

/* logo als echte afbeelding (SVG): klikvlak = het hele logo, scherp op retina.
   links 13px / boven 23px = positie in de oude, ingebakken header.jpg */
#ccagenda-header a.logo {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 372px;
	max-width: 100%;
	height: 164px;
}
#ccagenda-header a.logo img {
	position: absolute;
	left: 13px;
	top: 23px;
	max-width: calc(100% - 13px);
	height: auto;
}


/*----------------------------------------*/
/* menu ----------------------------------*/
/*----------------------------------------*/

#menu {
	width: 100%;
	box-sizing: border-box;
	background-color: #f1f7e8;
	border-top: 3px solid #7CB518;
	border-bottom: 1px solid #d5e5bc;
	margin: 0;
	padding: 6px;
	font-size: 0.9em;
	font-weight: bold;
	color: #253b16;
}

#menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu li {
	margin: 0;
}

#menu a {
	display: block;
	padding: 10px 8px;
	border-radius: 6px;
	line-height: 24px;
	color: #253b16;
	text-decoration: none;
	white-space: nowrap;
}

#menu a:hover, #menu a:focus-visible {
	color: #183208;
	background-color: #deedc8;
}

#menu a:focus-visible {
	outline: 2px solid #446c0e;
	outline-offset: -2px;
}

#menu a:active {
	background-color: #d1e5b1;
}

a.button {
	color: #000;
	border: 1px solid #CF2C5A;
	background-color: #dff7df;
	padding-left: 5px;
	padding-right: 5px;
}

/*----------------------------------------*/
/* main (outer) --------------------------*/
/*----------------------------------------*/

#outer {
	float:right;
	width:250px;
	background-color: #CF2C5A;
}
.inner { 
	float:left;
	width:687px;
	max-width:100%;
	margin: 0; 
	overflow: hidden;
}


/*----------------------------------------*/
/* main ----------------------------------*/
/*------ content (middle/center area)-----*/
/*----------------------------------------*/

#center {
	float: left;
	width: 687px; /*682 + 250 van #right*/
	position: relative;
	margin: 0px;
	padding-left: 5px;
	font-size: 0.9em;
	background-color: #fff;
	overflow: auto;

}

#center h1,h2,h3,h4,h5,h6 { color:#FF9900; }

#center h1, #center h2,
#serendipity_banner h1 {
	font-size: 1.2em;
	background-image:url(/afb/cca-beeldmerk-kleur.svg?v=20261022-logo);
	background-size: 32px auto;
	background-position: left 2px;
	background-repeat:no-repeat;
	padding-left:50px;
	margin-top:0;
	min-height: 25px;
}

#center .tekst {
	padding: 0 5px 5px 50px;
}

#center p {
	padding: 5px 5px 5px 50px;
}

#center p.searchresult{
	padding: 5px 5px 5px 50px;
}

#center hr {
	background-color:#FF9900;
	height: 2px;
	border: 0px;
}

#center .omschrijvingV,
#center .omschrijving {
	width:200px;
	float:left;
	text-align: right;
	padding-right: 5px;
	padding-top: 5px;
	clear: both;
}
#center .omschrijvingV {
	font-weight: bolder;
}
.helptekst {
	margin-left: 10em;
}

#center .omschrijvingDetail {
	width:200px;
	float:left;
	padding-right: 5px;
	clear: both;
}

#center .onderdeel {
	width: 100%;
	background-color: #dff7df;
	margin-top: 1em;
	font-weight: bolder;
	font-size: 1.1em;
	color: #cf2c5a;
	clear: both;
}


#center select, #center input {
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 2px 2px 2px 2px;
}

#center ul {
	list-style-type:none;
	padding: 0px;
	margin: 0px;
}

/* Datatabellen (agenda, archief, recensies, CCVideo's), beslissing 66: groene kop, zebra, kaartjes op mobiel (230614mq.css).
   Kleuren: donkergroen #253b16 (kop), groen #7CB518 (onderrand), zebra #FAFBF2, hover #F0F7DC, link #2A5D12. */
:root {
	--tb-kop: #253b16; --tb-koptekst: #ffffff; --tb-accent: #7CB518; --tb-lijn: #E4E9D2;
	--tb-zebra: #FAFBF2; --tb-hover: #F0F7DC; --tb-link: #2A5D12; --tb-linkhover: #CF2C5A;
	--tb-gedempt: #5b6650; --tb-focus: #FF9900;
}
.vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

table#agendalist,
table#recensielist {
	width: 100%;
	margin: 0.5em 0 1em;
	padding: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--tb-lijn);
	border-radius: 8px;
	font-size: 0.94em;
	line-height: 1.35;
}
table#agendalist caption,
table#recensielist caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
table#agendalist tr.titlebar th,
table#recensielist tr.titlebar th {
	background: var(--tb-kop);
	color: var(--tb-koptekst);
	border: 0;
	border-bottom: 3px solid var(--tb-accent);
	padding: 0.65em 0.6em;
	text-align: left;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
table#agendalist tr.titlebar th:first-child,
table#recensielist tr.titlebar th:first-child { border-top-left-radius: 7px; }
table#agendalist tr.titlebar th:last-child,
table#recensielist tr.titlebar th:last-child { border-top-right-radius: 7px; }
table#agendalist td,
table#recensielist td {
	padding: 0.55em 0.5em;
	margin: 0;
	vertical-align: top;
	border-bottom: 1px solid var(--tb-lijn);
}
table#agendalist tr:last-child td,
table#recensielist tr:last-child td { border-bottom: 0; }
table#agendalist tr:last-child td:first-child,
table#recensielist tr:last-child td:first-child { border-bottom-left-radius: 7px; }
table#agendalist tr:last-child td:last-child,
table#recensielist tr:last-child td:last-child { border-bottom-right-radius: 7px; }
table#agendalist tr.oneven,
table#recensielist tr.oneven { background: #fff; }
table#agendalist tr.even,
table#recensielist tr.even { background: var(--tb-zebra); }
table#agendalist tr.oneven:hover,
table#agendalist tr.even:hover,
table#recensielist tr.oneven:hover,
table#recensielist tr.even:hover { background: var(--tb-hover); }
table#agendalist td a,
table#recensielist td a {
	color: var(--tb-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
table#agendalist td a:hover,
table#recensielist td a:hover { color: var(--tb-linkhover); }
table#agendalist td a:focus-visible,
table#recensielist td a:focus-visible {
	outline: 3px solid var(--tb-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
table#agendalist td.naam,
table#recensielist td.titel { min-width: 11em; }
table#agendalist td.naam a,
table#recensielist td.titel a { font-weight: 600; }
table#agendalist td.multimedia {
	width: 1%;
	white-space: nowrap;
	padding-left: 0;
	padding-right: 0;
}
table#agendalist td.multimedia a { text-decoration: none; }
table#agendalist td.multimedia img { vertical-align: middle; }
table#agendalist td.uitvoerendMuzikant { min-width: 9em; }
table#agendalist td.datum,
table#recensielist td.release {
	width: 1%;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
table#agendalist td.datum {
	text-align: right;
	font-weight: 600;
	color: var(--tb-kop);
	padding-right: 0.7em;
}
table#agendalist th.datum {
	text-align: right;
	padding-right: 0.7em;
}
table#recensielist td.recensie {
	width: 1%;
	white-space: nowrap;
	color: var(--tb-gedempt);
	font-size: 0.9em;
}
table#recensielist td.titel a {
	display: flex;
	align-items: center;
	gap: 0.7em;
}
table#recensielist td img {
	height: 56px;
	width: 56px;
	margin: 0;
	padding: 0;
	object-fit: cover;
	border-radius: 6px;
	flex: none;
}
table#agendalist td.leeg,
table#recensielist td.leeg { color: var(--tb-gedempt); }
table#agendalist tr.ad td { background: #FFFBDF; }

/* Zoekresultaten als lijst (beslissing 69): datum links, titel + plaats, daaronder de omschrijving. */
ol.zoeklijst {
	list-style: none;
	margin: 0.5em 0 1em;
	padding: 0;
	border: 1px solid var(--tb-lijn);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
ol.zoeklijst li {
	display: grid;
	grid-template-columns: 9em minmax(0, 1fr);
	column-gap: 0.8em;
	margin: 0;
	padding: 0.7em 0.8em;
	border-bottom: 1px solid var(--tb-lijn);
	line-height: 1.35;
}
ol.zoeklijst li:last-child { border-bottom: 0; }
ol.zoeklijst li:nth-child(even) { background: var(--tb-zebra); }
ol.zoeklijst li:hover { background: var(--tb-hover); }
ol.zoeklijst .datum {
	grid-row: 1 / span 2;
	padding-top: 0.1em;
	font-size: 0.92em;
	font-weight: 700;
	color: var(--tb-kop);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
ol.zoeklijst .titelregel a {
	font-weight: 700;
	color: var(--tb-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
ol.zoeklijst .titelregel a:hover { color: var(--tb-linkhover); }
ol.zoeklijst .titelregel a:focus-visible {
	outline: 3px solid var(--tb-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
ol.zoeklijst .plaats { color: var(--tb-gedempt); }
ol.zoeklijst .samenv {
	grid-column: 2;
	margin-top: 0.15em;
	font-size: 0.95em;
	color: #333;
}
ol.zoeklijst .samenv:empty { display: none; }

/* Concertgegevens als label/waarde-lijst (beslissing 70): vervangt de gezweefde div.omschrijvingDetail. */
dl.gegevens {
	margin: 1em 0;
	padding: 0;
	border: 1px solid var(--tb-lijn);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
dl.gegevens .rij {
	display: grid;
	grid-template-columns: 11.5em minmax(0, 1fr);
	column-gap: 1em;
	margin: 0;
	padding: 0.5em 0.8em;
	border-bottom: 1px solid var(--tb-lijn);
	line-height: 1.4;
}
dl.gegevens .rij:nth-child(even) { background: var(--tb-zebra); }
dl.gegevens .rij:last-child { border-bottom: 0; }
dl.gegevens .rij.nieuw:not(:first-child) { border-top: 2px solid #C9D6A6; }
dl.gegevens dt {
	margin: 0;
	font-weight: 700;
	color: var(--tb-kop);
}
dl.gegevens dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}
dl.gegevens dd a {
	color: var(--tb-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
dl.gegevens dd a:hover { color: var(--tb-linkhover); }
dl.gegevens dd a:focus-visible {
	outline: 3px solid var(--tb-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
dl.gegevens dd iframe,
dl.gegevens dd img,
dl.gegevens dd video { max-width: 100%; }
dl.gegevens .rij.groot dd {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--tb-kop);
}
dl.gegevens .rij.voorbij dt,
dl.gegevens .rij.voorbij dd {
	font-weight: 700;
	color: #B3224C;
}

/* Nieuwsoverzicht (nieuws/templates/index_base.tpl, beslissing 71): een bericht is een article i.p.v. een tabelcel; flow-root
   houdt de links uitgelijnde afbeelding binnen het bericht, zoals de tabelcel deed. */
article.nieuwsbericht { display: flow-root; }

span.ad {
	/*background-color: #cf2c5a;*/
	text-align: left;
	color: #cf2c5a;
	margin-bottom: 0.5em;
}
span.ad a {
	color: #cf2c5a;
	border-left: 0px solid #cf2c5a;
	border-right: 0px solid #cf2c5a;
}



/*----------------------------------------*/
/* main ----------------------------------*/
/*------ nieuwtjes etc. (right area) -----*/
/*----------------------------------------*/

#right {
	float:right;
	margin: 0px;
	padding: 5px;
	width: 240px;
	max-width: 240px;
	overflow: hidden;
	min-height: 830px; /* was height: 830px; de Edesche-blok bovenaan kan de kolom hoger maken (beslissing 55) */
	background-color: #CF2C5A; /*rgb(207,44,90)*/
	font-size:0.9em;
}

div#right div { padding: 2px 2px 2px 50px; overflow: hidden; }
div#right div.rechterblok { padding: 1em 2px 1em 50px; margin: 0; overflow: hidden; }
div#right div.rechterformulieren { margin-left: -100px; margin-top: -20px; width: 240px; background-color: #CF2C5A; border: 0; }
div#right div.rechterblok li { list-style-type: none; padding-left: 0; margin-left: 0; }
div#right div.rechterblok ul { display: inline; }
div#right div.rechterblok a { text-decoration: underline; }
div#right h2 {
	height: 25px;
	font-size: 1.2em;
	color: #FFFBDF;
	text-decoration: none;
	padding-left:50px;
	margin: 0;
}
div#right a {
	/* display: block;*/
	text-decoration : none;
	font-size: 1.0em;
}
div#right a:link { color : #FFFBDF; }
div#right a:visited { color : #FFFBDF; }
div#right a:hover { color : Black; }

/*------ Edesche Concertzaal (rechterkolom, TicketJames) -----*/
/* Let op: div#right div { padding-left: 50px } en div#right h2 { padding-left: 50px; height: 25px } gelden voor alles
   in #right; daarom een <section> zonder <div>s erin en eigen regels voor de h2. */
#right section.ecz { margin: 14px 0 0; padding: 0; overflow: hidden; }
#right .ecz h2 { height: auto; margin: 0 0 2px; padding: 0; font-size: 1.2em; line-height: 1.2; }
#right .ecz p { margin: 0; padding: 0; }
#right .ecz p.ecz-sub { margin-bottom: 8px; font-size: 0.85em; color: #FFFBDF; }
#right .ecz ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#right .ecz li { margin: 0; padding: 0; list-style: none; }

#right .ecz a.ecz-card,
#right .ecz a.ecz-card:link,
#right .ecz a.ecz-card:visited {
	display: flex; height: 100%; box-sizing: border-box; overflow: hidden;
	background: #FFFBDF; color: #253b16; text-decoration: none; border-radius: 6px;
}
#right .ecz a.ecz-card:hover { color: #253b16; box-shadow: inset 0 0 0 2px #FF9900; }
#right .ecz a.ecz-card:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* datumblok (variant A) */
#right .ecz .ecz-date { flex: 0 0 50px; display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 6px 0; background: #7CB518; color: #253b16; text-align: center; line-height: 1.1; }
#right .ecz .ecz-dow { font-size: 0.75em; text-transform: uppercase; letter-spacing: .04em; }
#right .ecz .ecz-day { font-size: 1.6em; font-weight: bold; }
#right .ecz .ecz-mon { font-size: 0.8em; }

/* foto + datumlabel (variant B) */
#right .ecz .ecz-photo { position: relative; flex: 0 0 76px; background: #7CB518; }
#right .ecz .ecz-photo img { display: block; width: 76px; height: 100%; min-height: 76px; object-fit: cover; }
#right .ecz .ecz-chip { position: absolute; left: 0; top: 0; padding: 1px 6px 2px 4px; background: #7CB518; color: #253b16;
	font-size: 0.75em; font-weight: bold; border-radius: 0 0 6px 0; }

#right .ecz .ecz-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 6px 8px 7px; }
#right .ecz .ecz-title { font-size: 0.95em; line-height: 1.25; color: #253b16; }
#right .ecz .ecz-prog { margin-top: 1px; font-size: 0.82em; line-height: 1.3; color: #4a4a4a;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#right .ecz .ecz-meta { margin-top: auto; padding-top: 5px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82em; }
#right .ecz .ecz-btn { padding: 1px 9px 2px; background: #FF9900; color: #000; font-weight: bold; border-radius: 10px; }
#right .ecz a.ecz-card:hover .ecz-btn { background: #253b16; color: #FFFBDF; }

#right .ecz p.ecz-all { margin-top: 8px; text-align: right; font-size: 0.9em; }
#right .ecz p.ecz-all a { text-decoration: underline; }

/*------ Nieuwsbrief en zoeken (rechterkolom, beslissing 60) -----*/
/* Zelfstandig: eigen regels met voldoende specificiteit, zodat het er hetzelfde uitziet met en zonder de Mailchimp-CSS
   (classic-081711.css) en ondanks div#right div { padding-left: 50px; overflow: hidden } en de algemene form/label-regels.
   Zelfde kolombreedte en marges als het concertblok (#right section.ecz); kaarten zoals de concertkaartjes. */
div#right div.rechterblok { margin: 24px 0 0; padding: 0 0 16px; background: transparent; overflow: visible; }
div#right div.rechterblok div.rechterformulieren { margin: 0; width: auto; padding: 0; background: transparent; overflow: visible; }
#right .rechterformulieren div { padding: 0; overflow: visible; }
#right .rechterformulieren h2 { height: auto; margin: 0 0 6px; padding: 0; font-size: 1.2em; line-height: 1.2; font-weight: bold; color: #FFFBDF; }
#right .rechterformulieren form { display: block; position: relative; box-sizing: border-box; margin: 0 0 22px; padding: 12px 12px 14px; border: 0;
	border-radius: 6px; background: #FFFBDF; color: #253b16; text-align: left; }
#right .rechterformulieren #mc_embed_signup { padding: 0; background: transparent; }
#right .rechterformulieren .mc-field-group { position: relative; clear: none; width: auto; min-height: 0; margin: 0 0 12px; padding: 0; }
#right .rechterformulieren form input[type="hidden"] { display: none; }
#right .rechterformulieren form label { display: block; float: none; width: auto; margin: 0 0 5px; padding: 0; font-size: 0.95em; font-weight: bold; line-height: 1.3; color: #253b16; }
#right .rechterformulieren form input[type="email"],
#right .rechterformulieren form input[type="text"] {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; margin: 0; padding: 6px 10px; text-indent: 0;
	border: 1px solid #4d6b2f; border-radius: 6px; background: #fff; color: #253b16;
	font: inherit; font-size: 1em; line-height: 1.3; -webkit-appearance: none; appearance: none;
}
#right .rechterformulieren form input[type="email"]::placeholder,
#right .rechterformulieren form input[type="text"]::placeholder { color: #5b6a50; opacity: 1; }
#right .rechterformulieren form label.keuze { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 6px 0 4px; font-weight: normal; cursor: pointer; }
#right .rechterformulieren form label.keuze input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #253b16; cursor: pointer; }
#right .rechterformulieren form input[type="submit"] {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; margin: 0; padding: 0 14px; border: 1px solid #253b16; border-radius: 6px;
	background: #253b16; color: #FFFBDF; font: inherit; font-size: 1em; font-weight: bold; line-height: 1.2; text-align: center; white-space: nowrap;
	cursor: pointer; -webkit-appearance: none; appearance: none;
}
#right .rechterformulieren form input[type="submit"]:hover { background: #7CB518; border-color: #7CB518; color: #253b16; }
#right .rechterformulieren form input[type="submit"]:active { background: #6aa012; border-color: #6aa012; color: #253b16; }
#right .rechterformulieren form input[type="email"]:focus,
#right .rechterformulieren form input[type="text"]:focus { border-color: #253b16; }
#right .rechterformulieren form input:focus-visible { outline: 3px solid #253b16; outline-offset: 2px; }
#right .rechterformulieren p.uitleg { margin: 12px 0 0; padding: 0; font-size: 0.85em; line-height: 1.4; color: #46563b; }
#right .rechterformulieren p.uitleg strong { color: #253b16; }
/* Mailchimp-reacties (staan verborgen: het formulier opent Mailchimp in een nieuw venster) */
#right #mc_embed_signup div#mce-responses { float: none; clear: both; width: auto; margin: 0; padding: 0; top: auto; overflow: visible; }
#right .rechterformulieren .response { margin: 8px 0 0; font-weight: bold; }
#right .rechterformulieren #mce-success-response { color: #3f6a1c; }
#right .rechterformulieren #mce-error-response { color: #a1213f; }

/* Webfeeds en link naar de pagina voor adverteerders, in dezelfde kolom */
#right .rechterfeeds { margin: 0; padding: 0; overflow: visible; font-size: 0.9em; }
#right .rechterfeeds div, #right .rechterfeeds p { margin: 0; padding: 0; overflow: visible; }
#right .rechterfeeds .feeds-kop { margin-bottom: 2px; font-weight: bold; color: #FFFBDF; }
#right .rechterfeeds a { display: inline-block; padding: 3px 0; text-decoration: underline; }
#right .rechterfeeds p.feeds-meer { margin-top: 14px; }

div#reclameBoven {
	width: 682px;
	height: 100px;
}
div#reclameBoven span {
	float: right;
	font-size: 0.7em;
}

div#nieuwsoverzicht {
	width: 304px;
	clear: both;
	padding-top: 7px;
}
/*----------------------------------------*/
/* footer --------------------------------*/
/*----------------------------------------*/

#footer {
	clear: both;
	width: 942px; /*100%*/
	margin-left: auto; /* center page */
	margin-right: auto;
	margin-top: 5px;
	text-align: center;
}

/*----------------------------------------*/
/* general -------------------------------*/
/*----------------------------------------*/

img { border:0; float:left; }
strong.em {font-weight:normal;font-style:italic;}

div#nieuws {
	width: 309px;
	float: left;
	padding-left: 0px;
	padding-top: 10px;
}

/*----------------------------------------*/
/* ads -----------------------------------*/
/*----------------------------------------*/
div#midden {
	height: 1100px;
	width: 160px;
	overflow: hidden;
	float: left;
}

div#mmcontent {
	width: 160px;
	overflow: hidden;
	float: left;
}

div#contentROS {
	border-left: 1px solid #ff9900;
	width: 677px;
	float: left;
	padding-left: 5px;
	padding-top: 5px;
	background-color: #FFF;
}

div#contentrecensie,
div#contentccvideo {
	padding: 5px;
	border-left: 1px solid #ff9900;
}

div.newsAds {
	width: 680px;
	height: 110px;
	padding-left: 0px;
	margin-bottom: 0em;
	overflow: hidden;
}
div.newsAds span,
div.newsAds a {
	text-decoration: underline;
	color: #7bbf18;
	font-size: 1em;
}
div.newsAdsText {
	width: 160px;
	height: 90px;
	margin-left: 0;
	margin-top: 0;
	font-size: 0.9em;
	color: #ff9900;
	background-color: #fff;/*#ffefdf;*/
}
div.newsAdsBanner {
	width: 120px;
	height: 90px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 0.9em;
	background-color: #ffefdf;
	border: 1px solid #000;
}
div.newsAds46860 {
	width: 468px;
	height: 60px;
	margin-bottom: 0em;
	overflow: hidden;
}
div.newsAds120600 {
	width: 120px;
	height: 600px;
	margin-bottom: 0em;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
div.bottomAds {
	width: 100%;
	height: 150px;
	background-color: #DFF7DF;
}
div.bannerBottom {
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	height: 110px;
	margin-bottom: 10px;
	margin-top: 10px;
}
div.leaderboard {
	margin-left: auto;
	margin-right: auto;
	width: 728px;
	height: 90px;
	margin-bottom: 10px;
	margin-top: 10px;
}

/*----------------------------------------*/
/* news ----------------------------------*/
/*----------------------------------------*/
div.newslead1, div.newslead2 {
	clear: both;
	line-height: 1.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid #ff9900;
	padding-top: 0px;
}
div.newslead1 h2 {
	text-decoration: underline;
	font-size: 2em;
}
div.newslead1 h2, div.newslead2 h2 {
	margin-top: 0;
	padding-top: 0;
}
div.newslead1 p, div.newslead2 p {
	margin-top: -5px;
	margin-bottom: 0;
}
div.newslead1 a:link,a:visited,a:hover {
	color: #FF9900;
	text-decoration: none;
}
div.newslead2 a:link,a:visited,a:hover {
	color: #7BBF18;
	text-decoration: none;
}
div.newslead1 img, div.newslead2 img {
	border: 1px solid #7BBF18;
	margin-top: 4px;
	margin-right: 10px;
	margin-left: 0px;
	margin-bottom: 2px;
}
/* 18.1.07
div.newslead2 img {
	border: 1px solid #FF9900;
	margin-left: 10px;
	margin-right: 0px;
	float: right;
}
*/
div#frontRight {
	float: left;
	width: 378px;
	overflow: hidden;
}
div#aankondiging {
	padding-top: 10px;
	width: 368px;
	float: left;
	overflow: hidden;
}
div#multimedia {
	padding-top: 10px;
	width: 368px;
	float: left;
	overflow: hidden;
}
div#headlines,
div#recensies {
	width: 304px;
	float: left;
	margin-left: 0px;
	border-bottom: 1px solid #ff9900;
	margin-top: 0px;
}
div#headlines h3 {
	font-size: 1em;
	margin: 0;
	padding: 0;
}
div#headlines,
div#recensies {
	clear: both;
	padding-bottom: 4px;
	padding-top: 15px;
}
div#headlines {
	padding-top: 0;
	margin-top: 0;
}
div#ccgenre ul {
	padding-left: 45px;
}
div#headlines a,
div#recensies a {
	display: block;
	text-decoration: none;
	color: #000;
	padding-left: 5px;
	padding-right: 5px;
	line-height: 1.5em;
	height: 1.5em;
	overflow: hidden;
}

div#recensies a img {
	height: 20px;
	width: 20px;
	border: 0;
	margin-right: 20px;
	margin-top: 2px;
}
div#populair,
div#audiovideo,
div#ccvideo,
div#ccgenre,
div#releases {
	width: 372px;
	float: left;
	margin-left: 5px;
	padding-bottom: 2px;
	border-bottom: 1px solid #ff9900;
	overflow: auto;
	overflow-y: auto;
	white-space: nowrap;
	margin-bottom: 10px;
}
div#ccvideo {
	clear: both;
	width: 670px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
div#ccvideo h2 {
	color: #CF2C5A;
}
div#releases,
div#populair,
{
	margin-top: 0px;
}
div#ccvideo p {
	width: 327px;
	overflow: hidden;
	padding-left: 40px;
	margin-bottom: 0;
	padding-bottom: 0;
}
div#populair a,
div#audiovideo a,
div#ccvideo a.meer,
div#releases a {
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: #000;
	padding-left: 5px;
	padding-right: 5px;
	line-height: 1.5em;
	height: 1.5em;
	width: 369px; /*312*/
}
div#ccvideo a {
	display: inline;
	text-decoration: underline;
}
div#videocode {
	margin-left: 0;
}
div#ccvideoreacties {
	clear: both;
	border: 1px solid #CF2C5A;
	padding: 5px;
}
div.ccvideoreactie {
	background-color: #FF9900;
	padding: 5px;
}
div.ccvideobericht {
	font-style: italic;
}
span.ccvideonaam {
	font-size: 0.8em;
}
span.ccvideodatum {
	font-size: 0.8em;
}
div#audiovideo a {
	display: inline;
}
/* De li is het containing block van de titel: anders ontsnapt a.tekst aan overflow:hidden
   en geeft #center (overflow:auto) een horizontale scrollbalk. left is t.o.v. de li (319 + 6 = 325). */
div#audiovideo a.tekst {
	position: absolute;
	left: 6px;
}
div#audiovideo li {
	position: relative;
	height:1.7em;
	overflow: hidden;
}
div#populair
{
	color: #CF2C5A;
}
/* 362 + 2 x 5 padding = 372 = breedte van #populair; de gedeelde regel (369 + padding) gaf een horizontale scrollbalk. */
div#populair a {
	text-decoration: underline;
	width: 362px;
}
div#populair a img,
div#releases a img {
	height: 20px;
	width: 20px;
	border: 0;
	margin-right: 20px;
	margin-top: 2px;
}
div#audiovideo a img {
	margin-right: 5px;
	float: left;
}
div#recensies span,
div#populair span,
div#releases span {
	float: left;
}

div#rechterstrook {
	padding-top: 10px;
	width: 90px;
	height: 344px;
	border-left: 1px solid #f90;
	border-bottom: 1px solid #f90;
	background-color: #ffefdf;
	float: right;
	overflow: hidden;
}
div#rechterstrook h2 {
	background-image:url();
	padding-left: 5px;
	margin-left: 0;
}
div#rechterstrook img {
	width: 80px;
	margin-left: 5px;
}
div#rechterstrook div.onlineRadioMuziek {
	text-align: justify;
	margin-bottom: 20px;
}

div.pageno {
	margin-top: 2em;
	margin-bottom: 0.5em;
    text-align: center;
}
div.pageno a { text-decoration: none; }
div.pageno a:link { color: #6eac51; }
div.pageno a:visited { color: Gray; }
div.pageno a:hover { color: #952737; }

div.inschrijvenFrontPage {
	clear: both;
	margin: 0;
    text-align: center;
	margin-bottom: 15px;
}
div.inschrijvenFrontPage a:link {
	color: #cf2c5a;
}

div#artikelLijst {
    float: left;
    width: 85%;
    overflow: hidden;
}
div#artikelLijst div {
    height: 1.8em;
    overflow: hidden;
}

div#artikelPopulariteit {
    padding-top: 0.4em;
    float: right;
    width: 15%;
	overflow: hidden;
}
div#artikelPopulariteit div {
    height: 1.8em;
    overflow: hidden;
}

/*----------------------------------------*/
/* form ----------------------------------*/
/*----------------------------------------*/
form {
	border: 1px solid #ff9900;
}

input, select, textarea {
	color: #000;
	border: 1px solid #CF2C5A;
	background-color: #7BBF18;
}

form p {
	clear: left;
	margin-bottom: 0;
	margin-top: 0;
}
form p label {
	float: left;
	width: 13em;
}


/*----------------------------------------*/
/* muzieklinks pagina --------------------*/
/*
// color codes:
// groen: #7BBF18;
// oranje: #FF9900;
// rood: #CF2C5A;
// lichtergroen: #DFF7DF;
*/
/*----------------------------------------*/
div.hoofdrubriek {
	width: 682px;
	clear: both;
}
#center h2,
#center div.newslead1 h2,
#center div.newslead2 h2,
#center div#simple h2,
#center div#advanced h2,
#center div#releases h2,
#center div#recensies h2,
#center div#populair h2,
#center div#headlines h2
{
	color: #FF9900;
	height: 25px;
}
#center div.hoofdrubriek h2 {
	background-image: url();
	padding-left: 5px;
	text-align: center;
	background-color: #dff7df;
	color: #cf2c5a;
	font-size: 1.1em;
	margin-bottom: 0;
	margin-top: 0.5em;
}
div.rubriek {
	width: 30%;
	background-color: #DFF7DF;
	padding: 0.2em;
	float: left;
	height: 10em;
	border: 0;
	margin: 5px;
}
div.rubriek h3 {
	font-size: 1em;
	color: #f90;
	background-image: url();
	background-color: #dff7df;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
}
div.rubriek a:hover, div.rubriek a:visited, div.rubriek a:active, div.rubriek a:link {
	display: block;
	text-decoration: underline;
	color: #000;
	height: 1.2em;
	overflow: hidden;
}
div#linkpage img.siteimage {
	float: left;
	margin-top: 8px;
	margin-right: 1em;
}
div#samenvatting {
	margin-left: 0em;
	margin-top: 0;
}
div#comment {
	clear: both;
	float: left;
}
div.usercomment {
	clear: both;
	float: left;
}

/*----------------------------------------*/
/* nieuwspagina --------------------------*/
div#ads46860 {
	clear: both;
	height: 90px;
	width: 468px;
	margin-left: auto;
	margin-right: auto;
}
div#ads46860 a {
	text-decoration: underline;
	font-size: 1em;
	clear: both;
}

div#ads250250 {
	float: right;
	width: 250px;
	height: 250px;
	padding: 5px;
	padding-right: 0;
	padding-top: 0;
	margin-left: 5px;
	border-left: 1px solid #ff9900;
}
div#ads250250 a {
	text-decoration: none;
	font-size: 0.9em;
}

/*----------------------------------------*/
/*----------------------------------------*/
/* concertagenda pagina's ----------------*/
/*----------------------------------------*/
div.cagendacontent {
	margin-top: 1em;
	float: right;
	width: 199px; /*932-250-10-468*/
	margin-left: 5px;
	height: 70px;
	text-align: center;
}
div.cagendaadvert {
	clear: both;
	float: left;
	width: 680px;
	height: 110px;
	margin-top: 1em;
}
div.cagendaadvert a {
	clear: both;
	text-decoration: underline;
}

/*----------------------------------------*/
/* concertdetail pagina's ----------------*/
/*----------------------------------------*/
div.reclameConcertInfo {
	margin-left: 50px;
	width: 468px;
	height: 80px;
	overflow: hidden;
}
div.reclameConcertInfo a {
	clear: both;
	text-decoration: underline;
}
div.addDetailText {
	float: left;
	width: 180px;
	height: 80px;
	overflow: hidden;
}
div.addDetailBanner {
	float: right;
	width: 468px;
	height: 90px;
	overflow: hidden;
}

/*----------------------------------------*/
/* recensie pagina's ---------------------*/
/*----------------------------------------*/
div.recensie {
	padding: 5px 5px 5px 50px;
	background-color: #dff7df;
}
div.recensie img {
	border: 1px solid #ff9900;
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}
div.recensie a {
	color: #cf2c5a;
}
div#recensietekst {
	background-color: #dff7df;
	width: 500px;
}
div#recensietekst h2 {
	margin-top: 1em;
	background-image:none;
	color: #cf2c5a;
}
div#recensiemeta {
	border: 0px solid #ff9900;
	background-color: #dff7df;
	width: 300px;
	float: right;
}
div#recensietopleft {
	width: 500px;
	float: left;
}
div#recensietopleft span {
	display: block;
}
span.recensietitle {
	font-weight: bold;
}

div#recensiesamenvatting {
	width: 500px;
	font-weight: bold;
}

ul#recensieURLLijst {
	margin-top: 1em;
}
p.auteur {
	text-align: right;
}
div#recensiereacties {
	margin-top: 10px;
	clear: both;
	border: 1px solid #CF2C5A;
	padding: 5px;
}
div.recensiereactie {
	background-color: #FF9900;
	padding: 5px;
}
div.recensiebericht {
	font-style: italic;
}
span.recensienaam {
	font-size: 0.8em;
}
span.recensiedatum {
	font-size: 0.8em;
}

/*------ Contactpagina (/contact, beslissing 63) -----*/
/* Alles onder .contactpagina in #center. Kleuren: donkergroen #253b16, groen #7CB518, oranje #FF9900, crème #FFFBDF.
   De globale #center-regels (h2 met beeldmerk, p met 50px inspringing) worden hier bewust overschreven. */
#center .contactpagina .contact-body { margin: 0 14px 28px 50px; line-height: 1.55; color: #253b16; }
#center .contactpagina p { margin: 0 0 0.8em; padding: 0; }
#center .contactpagina p.contact-intro { font-size: 1.05em; }
#center .contactpagina h2 { height: auto; min-height: 0; margin: 1.4em 0 0.6em; padding: 0 0 0.25em; background: none; color: #253b16;
	font-size: 1.15em; border-bottom: 2px solid #7CB518; }
#center .contactpagina h3 { margin: 0 0 0.35em; padding: 0; color: #253b16; font-size: 1.05em; line-height: 1.3; }
/* Onderwerpenlijst: één rij per onderwerp, hele rij klikbaar; onderwerp | toelichting | pijl */
#center .contactpagina ul.contact-links { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid #cfe3b3; }
#center .contactpagina ul.contact-links li { margin: 0; padding: 0; border-bottom: 1px solid #cfe3b3; }
#center .contactpagina ul.contact-links a { display: grid; grid-template-columns: minmax(0, 19em) minmax(0, 1fr) 1.5em; align-items: center; column-gap: 14px;
	box-sizing: border-box; min-height: 44px; padding: 8px 8px; color: #253b16; text-decoration: none; transition: background-color 0.15s; }
#center .contactpagina ul.contact-links .contact-onderwerp { font-weight: bold; font-size: 0.95em; }
#center .contactpagina ul.contact-links .contact-hoe { font-size: 0.9em; color: #44543a; }
#center .contactpagina ul.contact-links .contact-pijl { justify-self: end; color: #b35c00; font-weight: bold; transition: transform 0.15s; }
#center .contactpagina ul.contact-links a:hover { background: #FFFBDF; }
#center .contactpagina ul.contact-links a:hover .contact-onderwerp { text-decoration: underline; }
#center .contactpagina ul.contact-links a:hover .contact-pijl { transform: translateX(3px); }
#center .contactpagina ul.contact-links a:focus-visible { outline: 3px solid #253b16; outline-offset: -3px; background: #FFFBDF; }
#center .contactpagina p.contact-note { margin: 0 0 14px; padding: 12px 14px; background: #FFFBDF; border-left: 4px solid #FF9900; border-radius: 0 6px 6px 0; }
#center .contactpagina .contact-info { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
#center .contactpagina section.contact-panel { margin: 0; padding: 14px 16px 12px; background: #fff; border: 1px solid #cfe3b3; border-left: 4px solid #7CB518; border-radius: 8px; }
#center .contactpagina address { margin: 0 0 0.8em; font-style: normal; }
#center .contactpagina section.contact-panel a { color: #1f4d0a; text-decoration: underline; }
#center .contactpagina p.contact-klein { font-size: 0.9em; margin-bottom: 0; }
#center .contactpagina a.contact-knop { display: inline-block; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 10px 14px; background: #253b16; color: #FFFBDF;
	border-radius: 6px; font-size: 0.85em; font-weight: bold; text-decoration: none; overflow-wrap: anywhere; }
#center .contactpagina section.contact-panel a.contact-knop { color: #FFFBDF; text-decoration: none; }
#center .contactpagina a.contact-knop:hover { background: #3b5a23; }
#center .contactpagina a:focus-visible { outline: 3px solid #253b16; outline-offset: 2px; }

/* Reacties plaatsen en modereren (beslissing 75): nieuws/contact.php?type=comment, nieuws/comment.php, nieuws/comment2.php.
   Formulier en meldingen in de huisstijl van de contactpagina (donkergroen #253b16, groen #7CB518, crème #FFFBDF, oranje focus). */
#center .reactiepagina { margin: 0 14px 28px 50px; line-height: 1.55; color: #253b16; text-align: left; }
#center .reactiepagina h3 { margin: 0 0 0.5em; padding: 0; color: #253b16; font-size: 1.15em; line-height: 1.3; }
#center .reactiepagina p { margin: 0 0 0.8em; padding: 0; }
#center .reactiepagina a { color: #1f4d0a; }
#center .reactiepagina .reactie-fouten { margin: 0 0 1em; padding: 10px 14px; background: #FFFBDF; border-left: 4px solid #FF9900; border-radius: 0 6px 6px 0; }
#center .reactiepagina .reactie-fouten p { margin: 0 0 0.3em; font-weight: bold; }
#center .reactiepagina .reactie-fouten ul { margin: 0; padding: 0 0 0 1.2em; }
#center .reactiepagina blockquote.reactie-citaat { margin: 0 0 1em; padding: 0.6em 1em; background: #FAFBF2; border-left: 4px solid #7CB518; border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
/* De algemene form-, form p- en label-regels (rand, label links zwevend met 13em) gelden hier niet. */
#center .reactiepagina form.reactieformulier { margin: 0; padding: 0; border: 0; }
#center .reactieformulier p { clear: none; margin: 0 0 1em; }
#center .reactieformulier label,
#center .reactieformulier p label { display: block; float: none; width: auto; margin: 0 0 0.25em; font-weight: bold; font-size: 0.95em; }
#center .reactieformulier input[type="text"],
#center .reactieformulier input[type="email"],
#center .reactieformulier textarea { display: block; box-sizing: border-box; width: 100%; max-width: 36em; margin: 0; padding: 9px 10px; font: inherit; color: #253b16;
	background: #fff; border: 1px solid #8fa37a; border-radius: 6px; }
#center .reactieformulier textarea { min-height: 9em; resize: vertical; }
#center .reactieformulier input[name="wirwar"] { width: 5em; }
#center .reactieformulier input:focus-visible,
#center .reactieformulier textarea:focus-visible,
#center .reactieformulier button:focus-visible { outline: 3px solid #FF9900; outline-offset: 1px; }
#center .reactieformulier .hint { display: block; margin-top: 0.3em; font-size: 0.85em; color: #5b6650; }
#center .reactieformulier button.regButton { min-height: 44px; padding: 10px 20px; font: inherit; font-weight: bold; color: #FFFBDF; background: #253b16;
	border: 0; border-radius: 6px; cursor: pointer; }
#center .reactieformulier button.regButton:hover { background: #3b5a23; }
/* Verborgen veld tegen spam: buiten beeld (niet display:none, dat slaan sommige invulprogramma's over). */
.reactie-extra { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }