/**
 * altijd ingeladen door de minifier
 * moet er dus zijn
 * 
 * ALLEEN dingen inzetten die /overal/ waar moeten zijn
 * 
 * dus niet dbv5 dingen
 * dus niet een standaard grid
 * dus niet een standaard header
 * dus niet een mooie css-reset library
 *
 */


/* ROOT
------------------------------------------------------------------------------*/
:root {
  --common_color--blue: hsl(210, 100%, 45%);
  --common_font: normal normal normal 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*===( Banner over de volledige breedte boven in de pagina )==*/
.idd_banner {
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: coral;
  background-image: linear-gradient(135deg, transparent 0%,  hsl(36, 90%, 60%) 100%);
  border-radius: 0 0 50% 50% / 0 0 25px 25px;
  box-shadow: 0 0 6px hsl(36 90% 36% / .3);
  padding: 1em;
  color: white;
  font: var(--common_font);
  font-size: 16px;
  font-family: "Avenir";
  font-weight: 500;
  text-shadow: 0 1px 1px hsl(36 90% 16%);
  text-align: center;
  line-height: normal;
  cursor: default;
}

.idd_banner a {
  color: inherit;
}

.idd_banner u {
 cursor: pointer;
}

/* Staat in requireme.php en wordt dus soms vaker aangeroepen */
.idd_banner:not(:first-child) {
  display: none;
}

/*===( Input )===*/
input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="file"],
input[type="date"],
input[type="datetime-local"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-height: 22px;
  box-sizing: border-box;
  padding: 1px 4px;
  background-color: white;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  font: inherit;
  text-indent: 0;
  cursor: auto;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover {
  border-color: var(--common_color--blue);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

/* .editfield-invalid wordt gezet in common_functions.js als een element niet valideert met laden zodat men wel kan 
   saven */
input.editfield-invalid,
input[type="text"]:invalid,
input[type="number"]:invalid,
input[type="search"]:invalid,
input[type="url"]:invalid,
input[type="tel"]:invalid,
input[type="email"]:invalid,
input[type="password"]:invalid,
input[type="month"]:invalid,
input[type="week"]:invalid,
input[type="time"]:invalid,
input[type="date"]:invalid,
input[type="file"]:invalid,
input[type="datetime-local"]:invalid {
  border-color: red;
  outline-color: red;
}
input[type="radio"].editfield-invalid + label,
input[type="radio"]:invalid + label {
  color: red;
}

input[type="text"][readonly],
input[type="text"][disabled],
input[type="number"][readonly],
input[type="number"][disabled],
input[type="search"][readonly],
input[type="search"][disabled],
input[type="url"][readonly],
input[type="url"][disabled],
input[type="tel"][readonly],
input[type="tel"][disabled],
input[type="email"][readonly],
input[type="email"][disabled],
input[type="password"][readonly],
input[type="password"][disabled],
input[type="month"][readonly],
input[type="month"][disabled],
input[type="week"][readonly],
input[type="week"][disabled],
input[type="time"][readonly],
input[type="time"][disabled],
input[type="date"][readonly],
input[type="date"][disabled],
input[type="datetime-local"][readonly],
input[type="datetime-local"][disabled],
input[type="button"][readonly],
input[type="button"][disabled],
input[type="reset"][readonly],
input[type="reset"][disabled],
input[type="submit"][readonly],
input[type="submit"][disabled] {
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  /* buttons en time-editors moeten niet werken */
  pointer-events: none; 
}

/* apart want ik wil de lijst hierboven compleet houden */
input[type="text"][readonly],
input[type="text"][disabled] {
  /* maar je wil wel copy/paste uit input kunnen doen */
  pointer-events: revert; 
}


/*===( Textarea )===*/
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-height: 22px;
  box-sizing: border-box;
  padding: 1px 4px;
  background-color: white;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  font: inherit;
  white-space: pre-wrap;
  text-indent: 0;
  cursor: auto;
  resize: both;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

textarea:hover {
  border-color: var(--common_color--blue);
}

textarea:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

textarea[readonly],
textarea[disabled] {
  border: none;
  box-shadow: inset 0 0 0 1px hsl(210, 10%, 70%);
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  /* deze is discutabel want tinymce moet het niet doen maar zo geen copy/paste met muis (wel met keyboard) */
  pointer-events: none;
}

textarea:invalid {
  border-color: red;
  outline-color: red;
}

/*===( Select )===*/
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 1px 14px 1px 4px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 5px top 50%, 0 0;
  background-size: 8px auto, 100%;
  border: 1px solid hsl(210, 10%, 70%);
  border-radius: 3px;
  outline: 1px solid transparent;
  color: black;
  text-indent: 0;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out 0s,
              outline 0.2s ease-in-out 0s;
}

select:hover {
  border-color: var(--common_color--blue);
}

select:active {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

select:focus {
  border-color: var(--common_color--blue);
  outline: 1px solid var(--common_color--blue);
}

/* Invalid select, rood maken */
select.editfield-invalid,
select:invalid {
  border-color: red;
  outline-color: red;
}

select[readonly],
select[disabled] {
  filter: brightness(0.8) grayscale(1) opacity(0.5);
  pointer-events: none;
}

/* of een inputveld of select of textarea veranderd is sinds het form geladen is 
   NIET rood of oranje maken, dat is error 
   niet inset maken want dat werkt niet op checkbox of input type=submit
*/
.fcChanged {
  box-shadow: 0 0 3px 2px hsl(120deg 33% 50% / 50%) !important;
}

/* waarschuwing op andere submits dat een inputveld of select of textarea in een ander form veranderd 
   is sinds het form geladen is 
*/
.fcOtherChangedWarningForSubmit {
  box-shadow: 0 0 3px 2px hsl(0deg 33% 50% / 75%) !important;
  filter: blur(0.5px) opacity(75%);
}

/* Default button opmaak */
.idd_button,
.idd_button:is(:hover, :active, :visited, [readonly], [disabled]) {
  position: relative;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: fit-content;
  min-height: 24px;
  height: fit-content;

  margin: 0;
  padding: 0 1em 0.01em;
  box-sizing: border-box;

  background-color: var(--common_color--blue);
  border: 1px solid hsl(210, 100%, 35%);
  border-radius: 4px;
  box-shadow: 0 2px 3px -2px hsla(210, 100%, 10%, 0.8);
  outline: 0;

  color: white;
  font: var(--common_font);
  text-shadow: 0 0 2px hsl(210, 100%, 25%);
  text-align: center;
  text-decoration: none;

  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0s;
  -webkit-appearance: none;
}

.idd_button:is(:hover, :active) {
  background-color: hsl(210, 100%, 55%);
  box-shadow: 0 2px 3px -2px hsla(210, 100%, 10%, 0.8),
              inset 0 0 0 1px hsl(210, 100%, 45%);
}

.idd_button:active {
  transform: scale(0.95);
}

.idd_button:is([readonly], [disabled]) {
  pointer-events: none;
  filter: grayscale(1) opacity(0.5);
}


/*===( Clear text-inputs )===*/
/* Kruisje aan het einde van een text-input voor het leegmaken van diezelfde text-input */
input[type="text"] + .editfield-text-clear {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: .2em 0 0 -18px;
  background-color: transparent;
  border-radius: 2px;
  color: transparent;
  font-size: .8em;
  cursor: pointer;
  user-select: none;
  transition: all .1s ease-in-out 0s;
}

/* Alleen voor safari */
@media not all and (min-resolution: .001dpcm) {
  @supports (-webkit-appearance: none) {
    input[type="text"] + .editfield-text-clear {
      margin: .45em 0 0 -20px;
    }
  }
}

/* Maak kruisje zichtbaar */
input[type="text"]:hover + .editfield-text-clear {
  background-color: white;
  color: hsla(0, 0%, 0%, .5);
}

/* Maak kruisje rood en bold */
input[type="text"] + .editfield-text-clear:hover {
  background-color: white;
  color: hsl(0, 70%, 50%);
  font-weight: bold;
}

/* Indruk-effect */
input[type="text"] + .editfield-text-clear:active {
  transform: scale(.5);
}


/* Blijkbaar niet standaard */
input[type="file"].editfield-file {
  cursor: pointer;
}

.editfield-file-message {
	font-size: smaller;
	font-style: italic;
}

/* == editfield preview image == */
.idd_file-preview-container {
  margin: 0;
  padding: 0;
}

/* Helemaal weg als er niks is om af te beelden */
.idd_file-preview-container:empty {
  display: none;
}

/** Waar het plaatje + de titel in zit **/
.idd_file-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  height: 50px;
  background-color: hsl(210deg 10% 98%);
  border-radius: 4px;
  box-shadow: inset 0 -2px hsl(210deg 10% 85%),
                    0 -2px hsl(210deg 10% 98% / .8),
                    0 0px 0 2px hsl(0deg 0% 75%);
  margin: 6px 8px 2px 0px;
  padding: 2px 8px 4px 2px;
  box-sizing: border-box;
  color: black;
  font-size: 12px;
  font-family: "Avenir";
  font-weight: 500;
  white-space: nowrap;
}

/** Titel van bestand **/
.idd_file-preview-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

/** Standaard icon **/
.idd_file-preview-icon {
  width: 15px;
  margin-left: 5px;
  font-size: 22px;
}

/** Plaatje zelf **/
.idd_file-preview-image {
  min-width: 20px;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 .5px 0 1px hsl(210deg 10% 0% / .1);
}

.idd_file-preview-image:hover {
  all: unset;
  z-index: 10;
  position: absolute;
  max-height: 50vh;
  box-shadow: 0 1px 3px hsl(210deg 10% 0% / .3);
  border: .1px solid hsl(210deg 10% 95%);
  border-radius: 1px;
}

/*===( Readonly/disabled labels )===*/
/** Ook de mogelijke label tekst meenemen **/
.readonly-label,
input[readonly] + label,
input[disabled] + label {
  opacity: .25;
  pointer-events: none;
}

/**
 * Geeft checkbox en radiobutton altijd 3px ruimte rondom. (In default is dit ook zo ongeveer)
 * Dit zodat er geen andere elementen zoals een label aan vastgeplakt zit.
 **/
input[type='checkbox'],
input[type='radio'] {
  margin: 3px;
}

/**
 * Extra ruimte achter label voor als er inline nog een element achter wordt gezet,
 * zo blijft het duidelijk gescheiden van elkaar.
 **/
input[type='checkbox'] + label,
input[type='radio'] + label {
  margin-right: 3px;
}

/**
 * Default wordt er bij een hover geen feedback gegeven met de cursor, maar dit werkt wel fijn.
 * Bij radiobutton doen we dit /niet/ als hij checked is, omdat hij dan niet meer klikbaar is.
 **/
input[type='checkbox'],
input[type='radio']:not(:checked),
input[type='checkbox'] + label,
input[type='radio']:not(:checked) + label {
  cursor: pointer;
}


/* .editfield-debugHighlight
------------------------------------------------------------------------------*/
/* Geeft in debug=1 aan welke elementen een editfield zijn */
:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select).editfield-debugHighlight,
input:is([type="checkbox"], [type="radio"]).editfield-debugHighlight + label {
  border-style: dotted;
  border-color: red blue blue red;
}


/* .editfield-debugNoDBTable
------------------------------------------------------------------------------*/
/* Geeft in debug=1 aan bij welke elementen geen dbTable/dbField gezet is */
:is(input:not([type="button"], [type="reset"], [type="submit"]), textarea, select).editfield-debugNoDBTable,
input:is([type="checkbox"], [type="radio"]).editfield-debugNoDBTable + label {
  animation-name: rotatingBorder;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}


/* idd_print_r
 * staat hier omdat deze twee karakters in javascript neerzetten ingewikkeld is
------------------------------------------------------------------------------*/
/* uitgeklapt */
.idd_debug-content li[data-iddprintr-string] {
	list-style-type: "\1F425";
}

/* ingeklapt */
.idd_debug-content li[data-iddprintr-string].collapsed {
	list-style-type: "\1F423";
}

/* Draaiende border animatie
------------------------------------------------------------------------------*/
/* 0% en 100% zijn nodig om mogelijk overschijving van andere css te voorkomen */
@keyframes rotatingBorder {

  0% {
    border-style: dotted;
    border-color:  red blue blue red;
  }

  25% {
    border-style: dotted;
    border-color:  red red blue blue;
  }
  
  50% {
    border-style: dotted;
    border-color: blue red red blue;
  }
  
  75% {
    border-style: dotted;
    border-color: blue blue red red;
  }

  100% {
    border-style: dotted;
    border-color:  red blue blue red;
  }

}

/* del/ins met standaard kleurtjes */
del,
ins {
    text-decoration: none;
    margin: 0 0.05em;
}

del {
    background-color: #f77;
}

ins {
    background-color: #7f7;
}

/* --------- print styling --------- */

@media print {

    .idd_debugprint {
        display: none;
    }
    select.text {
        background-image: none;
        background-color: transparent;
        border: none;
    }

    input.text.editfield-text {
        border: none;
        background-color: transparent;
    }

}

/***************************************
    General CSS
***************************************/

/**
 * CSS variabelen.
**/
:root {
  --main-color: rgb(51, 90, 152);
  --securityContent-Input: rgb(51, 90, 152);
}

* {
	margin: 0;
	padding: 0;
}

html, body {
	font-size: 14px;
	font-family: Helvetica Neue, Ariel, sans-serif;/* Safe font zodat het altijd werkt */
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	word-spacing: .02em;
	line-height: 1.4em;
	color: black;
	background: #fff URL(/images/body_bg.png) top left repeat-x;
}

.clear              {clear: both; line-height: 0; height: 0;}
a                   {color: #000000; outline: none;}
a img               {border: 0;}

.separatorline {
	display: block;
	height: 10px;
	border-bottom: 1px solid #c6c6c6;
}
p {
	color: #000;
	font-size: 1em;
	font-weight: normal;
}
p.login_doc         {
	color: #891111;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.05em;
	color: #335A98;
	font-weight: bold;
}
h1 {
	font-size: 1.83em;
	color: #335A98;
}
h2 {
	font-size: 1.42em;
}

h3 {
	font-size: 1.33em;
}
h4 {
	font-size: 1.16em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: .83em;
}

textarea, input[type='text'] {
	border: 1px solid #ddd; /* avoid browser defaults, e.g. Chrome on mobile was not showing some borders */
	padding: 4px;
	-webkit-appearance: none; /* inner shadow */
}

input[type='submit'] {
	-webkit-appearance: none; /* avoid webkit defaults (e.g. round ends on safari mobile) */
	background-color: #335a98;
	color: white;
	cursor: pointer;
	padding: 4px;
	border: 0;
	border-radius: 3px; /* some browsers use 4px by default */
}

.no_decoration {text-decoration: none;}
.no_decoration:hover {text-decoration: none;}
.alignleft          {float: left;}
img.alignleft       {margin: 10px 10px 10px 0;}

.smallerh4 a {
	font-size: 14px; 
	line-height: 15px; 
	color: #335A98;
	text-decoration: none; 
	outline: medium none;
	font-weight: normal;
	margin-bottom: 2px;
}
.smallerp {font-size: 11px; line-height: 15px; margin-top: 0; padding-top: 0; margin-bottom: 5px;}
.block_title_agenda {
	color: #891111;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
}
p .h5 {
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	line-height: 13px;
	margin: 0;
	color: #3B62A3;
}

textarea {
	resize: vertical;
}

/***************************************
    Structure
***************************************/
#container {width: 960px; margin: 0 auto;}
#content_wrap {width: 960px; background: #FFFFFF URL(/images/content_bg.png) top left repeat-y;}

#alt_content {
	min-height: 400px;
	background: #FFFFFF;
	padding: 20px;
}

#alt_content li {
	margin-left: 15px;
}

#alt_content td {
	padding-top: .2em;
	padding-bottom: .2em;
	padding-left: .5em;
}

#alt_content h2 {
	margin: 10px 0;
}

#alt_content p {
	text-align: justify;
}

.error {
	text-align: center;
	padding-bottom: 10px;
	color: #891111;
}

.errormsg {
	display: block;
	color: red;
	font-weight: bold;
	border: solid red 2px;
	padding: 2px;
	margin-top: 1px;
}

/***************************************
    Header
***************************************/
#header {
	width: 960px;
	min-height: 149px;
	position: relative;
	background: #ffffff;
	padding-bottom: 14px;
}

#header #banner {
	float: right;
	margin: 0 20px 0 0;
}

#top_bar {
	max-height: 60px;
	font-size: 11px;
	margin: 0 0 16px 0;
	padding: 0;
	color: #ffffff;
	background: #335a98;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 20px;
	width: 100%;
}

#dateentime {
	height: 22px;
	line-height: 22px;
	padding-left: 20px;
	flex-grow: 1;
	margin: auto 0;
}

#search {
	height: 22px;
	line-height: 22px;
	flex-grow: 1;
	white-space: nowrap;
	padding: 2px 0;
	margin: 0;
}

#search_field {
	width: 119px;
	height: 22px;
	line-height: 22px;
	min-height: 20px; /* overwrite czz/common.css */
	font-size: 10.7px; /* 'Zoeken op AfvalOnline' must fit */ 
	margin: 0;
	border: 1px #4E70A6 solid;
	color: gray;
	border-radius: 0; /* prevent default round corners on mobile browsers */
	padding: 0; /* overwrite general input[type='text'] */
	margin: 0;
	padding: 0 2px;
	vertical-align: top;
}

#search_submit {
	width: 22px;
	height: 22px;
	border: 1px #4E70A6 solid;
	background: url(/images/search.svg);
	background-color: #4e70a6;
	background-size: 18px;
	background-repeat: no-repeat;
	cursor: pointer;
	text-indent: -9999px;
	padding: 0; /* overwrite general input[type='submit'] */
	margin: 0;
	border-radius: 0; /* prevent default round corners on mobile browsers */
	padding-bottom: 2px;
}

#login {
	margin: 0;
	background-color: #4E70A6;
	color: #c2d9f2;
	text-decoration: none;
	text-align: center;
	font-size: 11px;
	line-height: 25px;
	display: inline-block;
	flex-grow: 2;
}

#login a {
	margin-left: 3px;
	color: #C2D9F2;
	text-decoration: none;
}

#login a:hover {
	color:#ffffff;
}

#login span {
	font-size: 14px;
}

/* Logo in header */
.logo,
.logo:hover { /* Niet befault hover acties overnemen */
	float: left;
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: 0 0 6px 19px;
}

.logo img {
	width: 100%;
	height: 100%;
}

/* HTML video element niet buiten vak laten lopen */
video {
	max-width: 100%;
	max-height: 100%;
}

#logoVademecum {
	float: right;
	display: inline-block;
	width: 315px;
	height: 65px;
	text-indent: 0px;
}

#logoVademecum img {
	margin: 32px 19px 12px 0;
}

#clock {float: left;}

/***************************************
    Main News item
***************************************/
#mainnewsitem {
	margin: 0 19px;
	float: left;
	height: auto;
	width: 726px;
	border-bottom: 12px solid #ffffff;
	background-color: #4E6CA8;
	display: block;
	padding: 10px;
}
#mainnewsitem #imgwrap, #content .block #imgwrap {
	float: right;
	margin-left: 12px;
}
#mainnewsitem #imgwrap img {float: right;}

#mainnewsitem #imgwrap {
	width: 434px;
}
#imgwrap #subtext {
	background-color: #204180;
	height: 18px;
	width: 100%;
	text-align: right;
	float: right;
}
#imgwrap #subtext p {
	font-size: 11px;
	margin: 0px;
	line-height: 18px;
	padding: 0px 10px;
	font-style: normal;
}
#content .block #imgwrap p {
	color: #FFF;
}
#mainnewsitem h2{
	margin: 6px 0 0 0;
	font-size: 19px;
	line-height:21px;
	color: #C0DFFF;
	font-weight: normal;
}
#mainnewsitem h2 a {
	text-decoration: none;
	color: #C0DFFF;
}
#mainnewsitem h2 a:hover {color: #ffffff;}
#mainnewsitem p     {
	padding: 6px 0 0 0;
	font-size: 14px;
	line-height: 17px;
	color:#FFF;
}

/***************************************
    Menu
***************************************/
#menu {
	list-style-type: none;
	min-height: 29px;
	padding: 0 0 0 8px;
	margin: 0 20px 0 19px; 
	border-top: #335a98 1px solid;
	border-bottom: #335a98 1px solid;
}

/* necessary when grid.css is included, set back to default box model  */
#menu * {
  box-sizing: content-box;
}

/* Hoofd items */
#menu > li {
  position: relative;
  float: left;
  display: inline-block;
  margin: 0 5px;
}

/* Hoofd items link */
#menu > li .main_link {
  display: inline-block;
  border-bottom: 5px solid transparent;
  padding: 6px 6px 3px 6px;
  color: #6791bb;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu > li:hover .main_link {
  border-color: #d7deea;
  color: #003366;
}

#menu > li.active .main_link {
  border-color: #891111;
  color: #003366;
}

/* Onder items */
#menu > li .submenu {
  position: absolute;
  display: none;
  background-color: hsl(226deg 36% 96% / 96%);
  margin: initial;
  padding: initial;
  z-index: 100; /* in small viewports the menu has two lines */
}

#menu > li:hover .submenu {
  display: block;
}

#menu .submenu li {
  margin: 1em 2em;
  line-height: normal;
  list-style-image: url(/images/submenu_item.png);
}

/* Onder items link */
#menu .submenu a {
  display: grid;
  color: #335a98;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

#menu .submenu a:hover {
  color: #891010;
  text-decoration: underline;
}

/***************************************
    Main column
***************************************/
#content {width: 746px; margin: 0 13px 0 19px; float: left;}
#content_narrow {float: left; width: 434px;}
#content .block_title {
	font-size: 14px;
	font-weight: bold;
	color: #891111;
	text-transform: uppercase;
	margin: 10px 0 0 0;
}

#content .block {
	border-bottom: 1px solid #c6c6c6;
	padding: 0 0 10px 0;
	margin: 0 0 5px 0;
}
#content .block p {
	padding: 6px 0 0 0;
}

#content .block h2 {
	margin: 10px 0 0 0;
	font-size: 18px;
	color: #335a98;
	font-weight: normal;
}

#content .block h2 a {text-decoration: none; color: #335a98;}
#content .block h2 a:hover {color: #891010;}

#content .block h3 {
	color: #003366;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	margin-bottom: -6px;
}

.agenda_link {
	color: #335a98;
	text-decoration: none;
	font-weight: bold;
}
#searchinfo {
	margin-bottom: 10px;
}
#content2 .block #searchinfo p , #content2 .block #searchinfo table p{
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	margin: 0px;
	font-weight: normal;
	padding: 0px;
}
.adressengids {width:100%;}

#alt_content a {
	color: #335A98;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
}

#alt_content a:hover {text-decoration: underline;}

/*extra opmaak voor bericht pagina's */
table .tabelkader1 th {
	text-align: left;
	background-color: #C6D9EB;
	border-bottom: 1px solid #FFFFFF !important;
	border-right: 1px solid #FFFFFF !important;
	border-left: 0px;
	border-top: 0px;
	padding: 3px;
}
table .tabelkader1 th p {
	font-weight: bold;
}
table .tabelkader1 tr td {
	background-color: #F2F4F8;
	border-bottom: 1px solid #FFFFFF !important;
	border-right: 1px solid #FFFFFF !important;
	border-left: 0px;
	border-top: 0px;
	padding: 3px;
	vertical-align: top;
}
table .tabelkader1 td p, table .tabelkader1 th p {
	color: #3B62A3;
}
.tabelkader1 tr td {
	background-color: #ECECEC !important;
	border: 1px solid #B4B4B4 !important;
}
.tabelkader1 {
	border: none !important;
	background-color: #FFFFFF !important;
}
/*Aangezien de achtergrond kleur binnen de lijntje moet, maar de table heeft een margin.
Dus daarom background alleen voor de tbody zelf*/
.tabelkader1 tbody {
	background-color: #ECECEC !important;
}
.tabelkader1 td {
	font-size: 12px;
	margin-left: 8px;
	padding: 15px; /* Extra ruimte langs tekst en foto */
}
.tabelkader1 p, .tabelkader1 li {
	color: #303030;
}
.tabelkader1 h3, .tabelkader1 .tabelkaderkop1, .tabelkader1 h4 {
	font-size: 16px;
	line-height: 16px;
	color: #335a98;
	margin-top: 0.4em;
	margin-bottom: 0.1em;
	font-weight: bold;
	display: block;
}

.tabelkader1 img {
	margin-left: 0px !important; /* Goed gecentreerd*/
	width: 100%; /* Foto over volledige breedte */
	height: auto;
}

/***************************************
    Second column
***************************************/
#sidebar_wide {width: 286px; margin: 0 0 0 26px; float: right; margin-top: -10px;}

#sidebar_wide .list_block,
#contentOverzicht .list_block {
	font-size: 14px;
	line-height: 17px;
	color: #335a98;
	border-bottom: 1px solid #c6c6c6;
	padding: 0 0 10px 0;
	background: #f2f4f8;
}

#sidebar_wide .list_block .block_title,
#contentOverzicht .list_block .block_title {
	font-size: 14px;
	color: #ffffff;
	text-transform: uppercase;
	display: block;
	padding: 3px 0 3px 27px;
	background: #335a98;
}

#sidebar_wide .list_block a,
#contentOverzicht .list_block a {
	color: #335a98;
	text-decoration: none;
}

#sidebar_wide .list_block a:hover,
#contentOverzicht .list_block a:hover {
	color: #891010;
}

#sidebar_wide .list_block ul,
#contentOverzicht .list_block ul {
	list-style-type: none;
	padding: 10px 10px 10px 13px;
	background: #f2f4f8;
}

#sidebar_wide .list_block ul li,
#contentOverzicht .list_block ul li {
	padding: 0 0 0 15px;
	background: URL(/images/li_arrows.png) 0 7px no-repeat;
}

#sidebar_wide .block .block_title {
	font-size: 14px;
	font-weight: bold;
	color: #891111;
	text-transform: uppercase;
	margin: 10px 0 0 0;
}

#sidebar_wide .block h4 {
	margin: 10px 0 0 0;
	font-size: 15px;
	font-weight: normal;
	color: #335a98;
}

#sidebar_wide .block h4 a {color: #335a98; text-decoration: none;}
#sidebar_wide .block h4 a:hover {color: #891010;}
#sidebar_wide .block h3 {
	color: #891111;
	margin-top: 100px;
}

#sidebar_wide .block p {
	padding: 6px 0 0 0;
	border-bottom: 1px solid rgba(200, 210, 230, 1);
}

#sidebar_wide .block {line-height: 16px; border-bottom: 1px solid #c6c6c6; padding: 0 0 10px 0; margin: 0 0 5px 0;}

#sidebar_wide .block .block_title, #sidebar_wide .list_block .block_title {
	font-size: 1.1em;
	line-height: 16px;
}
.block .post_summary {
	min-height: 50px;
	overflow: auto;
	word-break: break-word;
}

.articledate {
	font-size: 11px;
}

/* knipsel box */
.knipsels {
	font-size: 14px;
	line-height: 17px;
	margin-top: 3px;
}

/***************************************
    Third column
***************************************/
#sidebar {width: 151px; margin: 0 19px 0 0; float: right;}
#sidebar .block {background: #d7deea; line-height: 16px;}
#sidebar .block .block_title {font-size: 14px; color: #ffffff; text-transform: uppercase; display: block; padding: 3px 0 3px 0; text-align: center; background: #335a98;}
#sidebar .block ul {list-style-type: none; padding: 10px 10px 5px 10px;}
#sidebar .block li {padding: 0 0 0 8px; background: URL(/images/li_right.png) 0 7px no-repeat;}
#sidebar .block li a {color: #335a98; text-decoration: none;}
#sidebar .block li a:hover {color: #891010;}
#sidebar .afval_block {padding: 10px 0 10px 0; margin: 1px 0 0 0; text-align: center; background: #d7deea;}
#sidebar .afval_block h4, #sidebar .vakblad_block h4 {
	font-size: 18px;
	font-weight: normal;
	color: #003366;
	margin-top: 0.4em;
	margin-bottom: 0.1em;
	line-height: 18px;
}
#sidebar .afval_block a strong{
	padding: 5px 0 0 0;
	display: inline-block;
	font-size: 15px;
	color: #891111;
	text-decoration: none;
}
#sidebar .afval_block a:hover strong{
	text-decoration: underline;
}

#sidebar .afval_block p {
	font-size: 14px;
	color: #003366;
}

#sidebar .link_block {margin: 1px 0 0 0; padding: 10px 0 10px 7px; background: #d7deea;}
#sidebar .vakblad_block {margin: 1px 0 0 0; padding: 10px 0 10px 0; text-align: center; background: #d7deea;}
#sidebar .afval_block a, #sidebar .vakblad_block a {color: #003366;}

/***************************************
    more_link
***************************************/
.more_link,
#sidebar_wide .list_block .more_link,
#sidebar_wide2 .list_block .more_link,
#contentOverzicht .list_block .more_link {
	margin: 15px 10px 0 0;
	padding: 2px 10px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	display: block;
	float: right;
	background: #891112;
	border-radius: 3px;
}

.more_link:hover,
#sidebar_wide .list_block .more_link:hover,
#sidebar_wide2 .list_block .more_link:hover,
#contentOverzicht .list_block .more_link:hover {
	text-decoration: underline;
	color: #fff;
	margin: 15px 10px 0 0; /*avoid movement*/
}

/***************************************
    Footer
***************************************/
#footer {
	margin: 25px 0 0;
	text-align: left;
	border-top: 1px solid #335a98;
}

#footer,
#footer p,
#footer a {
	font-size: 11px;
	line-height: 16px;
	color: #747474;
}

#footer a {text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#footernav td {text-align: left; vertical-align: top; margin: 0px; padding: 0px 8px 3px 0px;}
#footernav td p {margin: 0px;}

.footer_cat {
	float: left;
	margin: 10px;
	min-height: 100px;
}
.footer_cat p {
	margin-bottom: 3px;
}

.footer_container {
	max-width: 960px; /* see #container, #content_wrap, #header */
	margin: 0 auto;
}

@media only screen and (max-width: 512px) {
	
	.footer_container {
		width: 100%;
	}
	
	.footer_cat {
		width: 120px;
	}
	
	.footer_row {
		padding: 0 10px;
		min-height: 125px;
	}

}

/***************************************
	DBV5 Table
***************************************/
.dboverview {
	padding: 0 10px;
	margin: -9px;
}

.dboverview h2 {
	color: #335A98;
	margin-bottom: 10px;
}

.dboverview hr {height:0px; border-width:0; color: #FFFFFF; background-color: #FFFFFF;}
.searchblock {
	background-color: #F2F4F8;
	padding: 10px 15px;
	color: #555658;
}

.searchblock input {margin-left: 8px; margin-right: 8px;}
.searchblock select {margin-left: 8px;}
#sort form {background-color: #FFFFFF; margin-top: -25px;}

#content2 .block #searchinfo table th, #content2 .block #searchinfo table td {
	text-align: left;
	vertical-align: middle;
	width: 50%;
}
#content2 .block #searchinfo table td {
	text-align: right;
}

.search_text {margin-top: 10px;}

.dbv5-html-data {
	width: 100%;
}

.dbv5-html-data .even {
	background-color: #C8E1F7;
}

.dbv5-html-data .odd {
	background-color: #EEF1F6;
}

.dbv5-html-nav {
	font-size: 11px;
	display: block;
	text-align: center;
	padding-top: 20px;
	margin: 0 auto 0 auto;
	color: #39609e;
}

.dbv5-html-nav .dbv5-html-module-item {
	display: inline-block;
	border: solid 1px #AAE;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 0.3em 0.5em;
	min-width:1em;
	color: #39609e;
	text-decoration: none;
	text-align: center;
}

.dbv5-html-nav .dbv5-html-module-item:hover {
	background-color: #891010;
	border-color:#891010;
	padding: 0.3em 0.5em;
	margin-right: 5px;
	margin-bottom: 5px;
	min-width:1em;
	color: white;
	text-align:center;
}

.dbv5-html-nav .dbv5-html-nav-active {
	color: #fff;
	border: solid 1px #AAE;
	display: inline-block;
	background-color: #39609e;
	margin-right: 5px;
	/*position: relative;*/
}

.dboverview .agendainfo {
	margin-top: -3px;
}
.dboverview .agendainfo a {
	color: #891010;
	text-decoration: none;
}
.dboverview .agendainfo a:hover {
	color: #4E6CA8;
	text-decoration: underline;
}
.dboverview .articleinfo, #tab5.tab_content .articleinfo {
	font-size: 12px;
	color: #818181;
	display: block;
	line-height: 16px;
	margin-top: 16px;
	margin-bottom: 0px;
}
.dboverview .post_summary, #tab5.tab_content .post_summary {
	min-height: 40px;
}

#tab5.tab_content a  {
	color: #335A98;
	display: block;
	font-size: 16px !important;
	line-height: 16px;
	margin-top: 2px;
	padding: 0;
	text-decoration: none;
}
#tab5.tab_content a:hover {
	color: #891010;
}

/***************************************
	Knipsels
***************************************/
.knipsel_kop, .agenda_kop {
	margin-bottom: 5px;
}

.marked {
	background-color: #CCCCCC;
	margin: -5px -5px 5px;
	padding: 5px;
	border-radius: 15px;
}

/***************************************
	Colofon plus subpagina's daarvan
***************************************/
p.colofon_link {text-align: right;}
p.colofon {margin-bottom: 10px; margin-top: 10px;}
ul.voorwaarden {list-style-type: none; margin-top: 10px; margin-bottom: 10px;}

/***************************************
	Content nieuws/artikel/knipselpagina
***************************************/
#content2 {
	width: 746px;
	margin: 0 13px 0 19px;
	float: left;

}
#content2 .block {
	border-bottom: 1px solid #c6c6c6;
	padding: 6px 0 10px;
	margin: 0 0 5px;
}
#content2 .block p {
	padding: 0 0 12px 0;
}
#content2 .block p a {
	font-weight: bold;
	color: #335A98;
	text-decoration: none;
}
#content2 .block h1 {
	font-size: 1.8em;
	line-height: 1.05em;
	color: #335A98;
}
.h4 {
	display: block;
	font-size: 1.08em;
	margin-top: 10px;
	margin-bottom: 0px;
	color: #003366;
	font-weight: bold;
}
#content2 .block .breadcrumbs, #content .block .breadcrumbs {
	color: #003366;
	padding-bottom: 12px;
}
#content2 .block .breadcrumbs a, #content .block .breadcrumbs a {
	color: #891111;
	text-decoration: none;
	font-weight: bold;
}
#content2 .block .breadcrumbs a:hover, #content .block .breadcrumbs a:hover {
	text-decoration: underline;
}
#content2 .block #articleinfo {
	line-height: 22px;
	color: #818181;
	text-align: right;
	height: 22px;
	border-bottom: 1px solid #c6c6c6;
	margin-bottom: 16px;
	display: block;
}
#content2 .block .subheader {
	font-size: 1.5em;
	line-height: 1em;
	font-weight: normal;
	color: #303030;
	margin-bottom: 8px;
}
#content2 .block .introduction {
	display: block;
	margin-bottom: 8px;
	font-size: 1.1em;
	font-style: italic;
	line-height: 1.25em;
	margin-top: 8px;
}
#content2 .block #articlesmorinfo {
	margin-bottom: 8px;
	display: block;
	padding-top: 18px;
}
#content2 .block #articlesmorinfo p, #content .block #articlesmorinfo p a {
	color: #335a98;
	text-decoration: none;
}
#content2 .block #articlesmorinfo p a {
	padding-left: 3px;
}
#content2 .block #articlesmorinfo p a:hover {
	text-decoration: underline;
}
#content2 .block #articlesmorinfo h3 {
	color: #003355;
	font-size: 14px;
	line-height: 16px;
}
#content2 .block #authorinfo p, #content .block #authorinfo p a {
	color: #303030;
	text-decoration: none;
	font-size: 11px;
	line-height: 13px;
}
#content2 .block #authorinfo p strong {
	color: #000000;
}
#content2 .block #authorinfo p a:hover {
	text-decoration: underline;
}
#content2 .block #authorinfo {
	margin-bottom: 8px;
	display: block;
	padding-top: 3px;
}
#content2 .block .articleinfo.agendainfo {
	margin-top: -3px;
	padding-top: 6px;
	margin-bottom: 18px;
}
#content2 .block .articleinfo.agendainfo strong {
	font-weight: normal;
	color: #4d4d4d;
}
#content2 .block .articleinfo.agendainfo a {
	color: #891010;
	text-decoration: none;
}
#content2 .block .articleinfo.agendainfo a:hover {
	color: #4E6CA8;
	text-decoration: underline;
}

.notFound {
	font-weight: bold;
	border: solid #891111 2px;
	padding: 10px;
	margin: 4px 0 10px;
}

.notFound h4 {
	color: #891111;
	text-align: center;
}

#content_wrap2 {
	background-image:url(/images/content_bg_article.png);
}
#content2 {
	width: 652px;
	margin-right: 0px;
}
#content2 .block .archief a, #content2 .block .archief, .bedrijf_artikelen {
	text-decoration: none;
	color: #335A98;
	font-size: 14px;
	line-height: 16px;
	padding: 0px;
	display: block;
	margin-top: 2px;
}
#vakblad_vermelding {
	margin: 0 0 -16px 0;
}
#content2 .block .archief a:hover {
	color: #891010;
}
#container #content_wrap2 #content2 .block {
	color: #000000;
	font-weight: normal;
}
#content2 .block img {
	margin: 0 12px 12px;
}
#content2 .block .MCEImageCaptionWrapper img,
#content2 .block figure.image img {
	margin: 0px;
	width: 100%;
}
#sidebar_wide2 {
	width: 241px;
	margin: 0 20px 0 0px;
	float: right;
}
#sidebar_wide2 .list_block {
	font-size: 1.08em;
	padding-top: 10px;
}
#sidebar_wide2 .list_block ul {
	padding-right: 8px;
	padding-left: 10px;
	
}

.gerelateerd .block_title, #sidebar_wide2 .list_block .block_title {
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	padding: 3px 0 3px 10px;
	background: #335a98;
}

.gerelateerd .buttonless {
	background-color: #F2F4F8;
}

.gerelateerd ul {
	padding: 10px 0;
}

.gerelateerd li {
	padding: 0px 0px 0px 15px;
	background: transparent url("/images/li_arrows.png") no-repeat scroll 0px 5px;
	list-style-type: none;
}

#sidebar_wide2 .list_block ul {
	list-style-type: none;
	padding: 10px 10px 10px 13px;
	background: #f2f4f8;
}

#sidebar_wide2 .list_block ul li {
	padding: 0 0 0 15px;
	background: URL(/images/li_arrows.png) 0 7px no-repeat;
	margin-top: 5px;
}
#sidebar_wide2 .list_block ul li a {color: #335A98; text-decoration: none;}
#sidebar_wide2 .list_block ul li a:hover {color: #891010;}
#sidebar_wide2 .list_block .buttonless {padding-bottom: 15px;}

/* foto onderschrift */
figure.align-left {
	float: left;
}

figure.align-right {
	float: right;
}

.MCEImageCaptionWrapper,
figure.image {
	background-color: #204180;
	text-align: center;
	color: #FFF;
	font-size: .91em;
	font-style: normal;
	margin-left: 12px;
	margin-right: 12px;
	padding: 2px;
}

.MCEImageCaptionWrapper span,
figure.image figcaption {
	display: inline-block;
	font-size: 11px;
	padding: 6px;
}

/**
	Normaal is blauw en dat werkt niet met een blauwe achtergrond...
**/
figure.image figcaption a {
	color: white;
	text-decoration: underline;
}

/* De afbeelding + caption in de tekst van een arikel */
figure.image {
  float: right;
  max-width: 350px;
  
  img {
    max-width: 100%; // Zorgt dat de img meebeweegt met de container
    display: block;
  }
  
  /* Klik op afbeelding geeft grote versie weer */
  a {
    position: relative;
    display: block;
  
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: grid;
      place-items: center;
      background-color: transparent;
      font-family: Helvetica, sans-serif;
      font-size: 1.5em;
      color: white;
      text-shadow: 1px 1px 1px hsl(0 0% 0% / 50%);
      transition: all .25s ease-in-out;
    }
  
	/* Hover over afbeelding geeft aan dat je kan klikken voor een vergrote versie */
    &:hover::after {
      content: 'Klik om te vergroten';
      background-color: hsl(0 0% 0% / 25%);
    }
  }
}


/***************************************
	Overig
***************************************/
hr {margin-top: 10px; margin-bottom: 10px;}
/* maakt veldje onzichtbaar bij nieuwsbrief - tegen spam */
.adres2 {display: none;}
#sort {float: right;}

/* Image alignment */
div.imageL, div.imageR {
	padding: 0 0 .5em 0;
	margin: 0 .5em 0 0;
	float: left;
	text-align: center;
	color: #000;
	font-size: 7pt;
}

div.imageL {
	margin: 0 1em 0 0;
	float: left;
}

div.imageR {
	margin: 0 0 0 1em;
	float: right;
}

div.imageL img, div.imageR img {
	border: 1px solid black;
	margin: 0 auto;
}

div.imageL img, div.imageR img, a:hover {
	margin: 0 auto;
	text-decoration: underline;
}

/* jaarboek pagina */
div.tabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 32px;
	width: 100%;
}

div.tabs ul li {
	float: left;
	margin: 0;
	padding: 0;
	height: 20px;
	line-height: 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #006;
	border-left: 1px solid #D8D8FA;
	border-right: 1px solid #D8D8FA;
	margin-bottom: 1px;
	background: #335A98;
	overflow: hidden;
	position: relative;
}

div.tabs ul li a {
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	font-size: 1em;
	padding: 0 20px;
	outline: none;
	cursor: pointer;
}

div.tabs ul li:hover {
	color: #006;
	border-left: 1px solid #006;
	border-top: 1px solid #006;
	border-right: 1px solid #006;
	border-bottom: 1px solid #fff;
	cursor: pointer;
}

div.tabs ul li.active {
	border-left: 1px solid #006;
	border-top: 1px solid #006;
	border-right: 1px solid #006;
	border-bottom: 1px solid #fff;
}

div.tabs ul li.active a {
	font-weight: bold;
	color: #FFFFFF;
}

div.jaarboekAlgemeen {
	float:left;
	width:60%;
	color: #000;
	background-color:#fff;
	padding: 4px;
	margin-bottom: 1.5em;
}

div.jaarboekInfo {
	float:left;
	width:35%;
	color: #000;
	border-left:1px solid #006;
	background-color:#fff;
	margin-bottom: 2em;
	padding: 4px;
}
#rubriek {
	color: #335A98;
}
.post_summary table {
	border: 1px solid #B4B4B4;
	margin: 15px;
}
.post_summary a {
	font-weight: bold;
	color: #335A98;
	text-decoration: none;
}

.post_summary .tablesubtext {
	background-color: #ffffff;
	padding: 3px 0px 0px;
	color: #3B62A3;
	margin: 0px 0px 0px 15px;
	font-size: 11px !important;
	font-style: italic;
	line-height: 13px;
	font-weight: normal;
}
/**
 * Er staat een stomme * selector met padding: 0; in deze style...
**/
.post_summary ol, .post_summary ul {
	padding-inline-start: 25px;
}
form {
	display: inline;
}

#bestel_form input {
	margin-top: 2px;
	margin-left: 2px;
}

#bestel_form td {
	padding-left: 0;
}

#bestel_form textarea, #bestel_form input[type='text'] {
	width: 100%;
}

#bestel_form span {
	margin-left: 4px;
}

.bestel_label {
	text-align: center;
	padding: 10px 0 12px;
}

#bestel_page p {
	padding: 2px 0;
}

#service td {margin-right: 10px;}
/***************************************
	Adressengids
***************************************/
#content_wrap_adressengids {
	background: url(/images/content_bg_adressengids.png);
	background-position: -59px 0;
	overflow: hidden;
}
#content_wrap_adressengids #content {
	width: 593px;
	margin-right: 0px;
}
#content_wrap_adressengids #sidebar_wide {
	width: 300px;
	margin: 0 20px 0 0px;
	float: right;
}
#content_wrap_adressengids #sidebar_wide .list_block {
	line-height: 16px;
	font-size: 14px;
}
#content_wrap_adressengids #sidebar_wide .list_block ul {
	padding-right: 8px;
	padding-left: 10px;
}

#archive_searchblock table th {
	font-weight: normal;
	text-align: right;
	padding-right: 5px;
	height: 28px;
	line-height: 28px;
	width: 185px;
}

#archive_searchblock {
	background-color: #f2f4f8;
	display: block;
	padding: 10px 0;
	font-size: 12px;
	color: #555658;
	margin-top: 12px;
}

#content_wrap_adressengids .error {
	border: solid #891111 2px;
	padding: 10px;
	margin: 5px;
}

#content_wrap_adressengids #content .block #archive_searchblock input {
	margin-left: 3px;
	margin-right: 3px;
	font-size: 12px;
}
#content_wrap_adressengids #content #promoblock {
	background-image: url(/images/bg_aanmeldblok.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	float: right;
	height: 94px;
	width: 196px;
	margin-left: 12px;
	text-decoration: none;
	text-align: center;
	font-size: 17px;
	line-height: 18px;
	color: #891111;
	padding-top: 10px;
}
#content_wrap_adressengids #content #promoblock p {
	font-size: 17px;
	line-height: 18px;
	color: #891111;
	text-decoration: none;
	margin-bottom: 0px;
}
#content_wrap_adressengids #content #promoblock p span {
	font-size: 14px;
	font-style: italic;
	line-height: 18px;
	font-weight: normal;
	color: #335a98;
	text-decoration: none;
}
#content_wrap_adressengids #content #promoblock:hover p {
	text-decoration: underline;
}

.adressIndex .column {
	display: inline-block;
	vertical-align: top;
	padding: 0;
}

.adressIndex h1 {
	margin: 10px 15px 0;
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #891111;
}

#content .adressIndex h2 {
	font-size: 18px;
	line-height: 18px;
	font-weight: normal;
	color: #828282;
	margin: 16px 0 10px;
	font-style: italic;
	border-bottom: 1px solid #c6c6c6;
}

.adressIndex .indexlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adressIndex .indexlist li {
	background: url("/images/li_arrows.png") no-repeat 0 7px transparent;
	padding: 0 0 0 15px;
}

.adressIndex .indexlist li a {
	font-size: 14px;
	line-height: 17px;
	color: #335a98;
	text-decoration: none;
}

.adressIndex .indexlist li a:hover {
	color: #891111;
}

#content .gids_contactinfo {
	float: left;
	margin-top: 16px;
	margin-bottom: 12px;
}

#content .gids_contactinfo th {
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	color: #3b62a3;
	text-align: right;
	vertical-align: top;
	width: 60px;
}
#content .gids_contactinfo td {
	text-align: left;
	vertical-align: top;
	padding-left: 5px;
}
#content .gids_contactinfo td, #content .gids_contactinfo td a {
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	color: #3b62a3;
	text-decoration: none;
}
#content .gids_contactinfo td a:hover {
	text-decoration: underline;
}
#content .gids_contactinfo td.gids_website {
	overflow: hidden;
}
#content .gids_logo {
	float: right;
}
#content .tab_container p {
	font-size: 12px;
	line-height: 16px;
	color: #000;
}
#content .tab_container .tabula {
	padding-left: 12px;
}
#content .tab_container .tabula li, #content .tab_container .tabula li a {
	text-decoration: none;
	font-size: 14px;
	line-height: 18px;
}
#content .tab_container .tabula li a {
	color: #335a98;
}
#content .tab_container .tabula li a:hover {
	text-decoration: underline;
}
#content .tab_container .tabula li ul {
	padding-left: 18px;
	list-style-type: disc;
	padding-top: 5px;
	padding-bottom: 8px;
}
#content .tab_container .tabula li ul li {
	font-size: 12px;
	line-height: 16px;
	color: #4b4b4b;
}

#datatable {
	border: none !important;
	background-color: #fff;
}

#datatable .topindex th {
	background-color: rgb(51, 91, 152);
	text-align: left;
}

#datatable .topindex th a, #datatable .topindex th p {
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	padding: 4px;
}

#datatable .topindex th a:hover {
	text-decoration: underline;
}

#datatable td, #datatable th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	background-color: #F2F4F8;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#datatable td p, #datatable th p {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 14px;
	color: #3b62a3;
}

#datatable th p {
	font-weight: bold;
}

#datatable #tablesubtext {
	background-color: #ffffff;
	padding: 3px 0px 0px;
}
#datatable #tablesubtext p {
	margin: 0px;
	font-size: 11px;
	font-style: italic;
	line-height: 13px;
	font-weight: normal;
}

#datatable .orgname {
	font-size: 14px;
	font-weight: bold;
	color: #3b62a3;
	text-decoration: none;
	line-height:14px;
	margin:0px;
}
#datatable a {
	font-weight: bold;
	color: #3b62a3;
	text-decoration: none;
}
#datatable a:hover, #datatable .orgname:hover {
	text-decoration: underline;
}
#datatable .leftalign {
	text-align: left !important;
}
#datatable .aantal {
	color: #3B62A3;
	text-align: right;
}
#datatable .searchtagwrap {
	margin-bottom: 8px;
	text-align: left;
}
#datatable .searchtagwrap a {
	font-weight: normal;
	text-decoration: underline;
	color: #698BC8;
}
#datatable .searchtagwrap a:hover {
	text-decoration: none;
	color: #3b62a3;
}

.datatable {
	border: none !important;
	background-color: #F2F4F8; 
}
.datatable td ,.datatable th   {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	/*background-color: #F2F4F8;*/
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}

.datatable th {
	text-align: left;
}
.datatable td p, .datatable th p {
	margin: 0px;
	padding: 0px !important;
	font-size: 12px;
	line-height: 14px;
	color: #3b62a3;
}

.datatable thead tr:first-child,
.datatable:not(:has(thead)) tbody tr:first-child {
	font-weight: bold;
	margin-left: 6px;
	vertical-align: bottom;
	background-color: #C6D9EB !important;
	height: 15px;
}

.datatable a {
	font-weight: bold;
	color: #3b62a3;
	text-decoration: none;
}
.datatable a:hover, .datatable .orgname:hover {
	text-decoration: underline;

}
.content_wrap_adressengids hr {
	background-color: gray;
	border-width: 0;
	color: gray;
	height: 0;
}
.whitebutton {
	font-size: 12px;
	line-height: 28px;
	color: #335a98;
	display: block;
	float: right;
	height: 28px;
	padding-right: 10px;
	padding-left: 10px;
	border: 1px solid #8fb6f4;
	background-color: #ffffff;
	text-decoration: none;
	margin-top: 10px;
	margin-bottom: 10px;
}
.whitebutton:hover {
	color: #ffffff;
	background-color: #891010;
	border-color:#891010;
	margin-top: 10px;
	margin-bottom: 10px;
}

#content .resultinfo {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	color: #335a98;
	margin-top: 4px;
	margin-bottom: 18px;
}

#content .block h2.resultheader{
	font-size: 20px;
}
#content_wrap_adressengids #content .block {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.introduction {
	display: block;
	font-size: 1.1em;
	font-style: italic;
	line-height: 1.25em;
	margin-bottom: 8px;
	text-decoration: none;
}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #7a92b9;
	border-left: 1px solid #7a92b9;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #7a92b9;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #d7deea;
}
ul.tabs li a {
	text-decoration: none;
	color: #335a98;
	display: block;
	font-size: 14px;
	padding: 0 14px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
	font-weight: bold;
}
ul.tabs li a:hover {
	background-color: #ffffff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	border: 1px solid #7a92b9;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}
.tab_container h1, .tab_container h2, .tab_container h3, .tab_container h4  {
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	margin-bottom: 0.4em;
}
.tab_container h2  {
	font-size: 16px;
	line-height: 16px;
}
.tab_container h3  {
	font-size: 14px;
	line-height: 14px;
}
.tab_container h4  {
	font-size: 14px;
	line-height: 13px;
}
.bedrijf {
	float: left;
	padding: 5px 10px 10px 5px;
	background-color: #F2F4F8;
}

a.redlink {
	color: #891010 !important;
}

.right {
	text-align: right;
}

.search_page h3 {
	margin-top: 16px;
}

.search_page .dbv5-html {
	overflow: auto; 
}

.search_header p {
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	color: #335A98;
	margin-bottom: 16px;
}

.search_header input[type='text'] {
	width: 100%;
	margin-bottom: 10px;
}

.search_header input[type='submit'] {
	padding: 6px;
}

p.vet {
	margin-left: auto;
	padding: 2px !important;
	background-color: #325a98;
}

p.vet a.orgname {
	color: #FFF !important;
	font-size: 1.2em !important;
}

div#content2 h1, div#content2 h2, div#content2 h4, div#content2 h5, p.introduction,
div#content2 .h1, div#content2 .h2, div#content2 .h4, div#content2 .h5, div#content2 .h6 {
	padding-bottom: 0 !important;
}

div#errordocContent {
	background-color: #FFFFFF;
	height: 200px;
	margin:0px;
}

div#errordocContent p{
	position:relative;
	margin-left:50px;
	padding-top:50px;
}

div#errordocContent div#errorDocRedirect {
	width: 15%;
	min-width: 20em;
	border: solid 1px #335a98;
	font-size: 80%;
	margin-top: 3em;
	text-align: center;
	margin-left:50px;
}

div#errordocContent div#errorDocRedirect p {
	padding:0px;
	margin:0px;
}

div.formdiv div#adminLogin {
	text-align: center;
}

div.formdiv div#adminLogin h1 {
	color: hsl(0, 80%, 35%);
}

div.formdiv div#adminLogin h3 {
	font-weight: normal;
	line-height: 3em;
}

div.formdiv div#adminLogin a {
	display: block;
	color: hsl(220, 50%, 40%);
	font-size: 20px;
	transition: all .3s;
	cursor: pointer;
}

div.formdiv div#adminLogin a:hover {
	color: hsl(0, 80%, 35%);
	transform: scale(1.1);
}

/* end security */

div.footer {
	background-color: #335a98; 
	color: #FFF;
}

div.footer A:link, DIV.footer A:visited {
	color: #FFF;
	text-decoration: none;
	white-space: nowrap;
}
div.footer A:hover, DIV.footer A:active {
	color: #FFF;
	text-decoration: underline;
}
div.footer IMG {
	margin: .1em .2em;
	border: 0;
}

TR.menutop {
	padding: 1pt 4pt;
	background-color: #335a98;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 0.8em;
}
TR.menutop A:link, TR.menutop A:visited { 
	padding: 0 .4em 0 .4em;
	margin-left: 0;
	color: #FFF; 
	background-color: #717375; 
	text-decoration: none; 
}
TR.menutop A:hover, TR.menutop A:active, TR.menutop A.active:link, TR.menutop A.active:visited { 
	padding: 0 .4em 0 .4em;
	margin-left: 0;
	color: #717375;
	background-color: #FFF; 
	text-decoration: none;
}
td.top {
	color: #335a98;
	font-size: 22px;
}
table.tabel_agendatoevoeg textarea {
	width: 100%;
	border-color: #cccccc;
}
.tabel_agendatoevoeg .agendaDate {
	max-width: 120px;
}
.agenda_container td {
	padding-left: 0px !important;
}

.container {
	overflow: hidden;
	width: 100%;
}

.container .right {
	float: right;
}

.container .left {
	float: left;
}

#articleTop {
	display: block;
	padding-bottom: 4px;
	min-height: 27px; /* accommodate linkedin share */
	color: #818181;
	text-align: right;
	border-bottom: 1px solid #c6c6c6; /* cx:166931 don't remove it */
	margin-bottom: 16px;
}

.iconShareLeft {
	float: left;
	margin-right: 10px;
}

.iconShareRight {
	float: right;
}

.iconShareLinkedin {
	background: url('/icons/socials/linkedin_share.svg');
	width:  72px;
	height: 24px;
}

.socmedia {
	display: block;
	width:  20px;
	height: 20px;
	background: url('/icons/socmedia_sprite_official_20x20.png');
}

.socmedia.linkedin {
	margin: 1px;
	background-position: 0 -40px;
}

.socmedia.twitter {
	margin: 1px;
	background-position: 0 -20px;
}

.socmedia.facebook {
	margin: 1px;
	background-position: 0 -140px;
}

.socmedia.youtube {
	margin: 1px;
	background: url('/images/youtube.png');
}

.socmediatext {
	margin-left: 25px;
}

/* index Uitgaven en Service*/

.uitgaven_content h1, .service_content h1 {
	margin-bottom: 18px;
}

.uitgaven_content div, .service_content div {
	padding: 3px 0;
}

/***************************************
	Gebruiker
***************************************/

.main_user_form p, .child_user_form p {
	padding: 5px 0;
}

.pad, .text , .editfield-radio label {
	color: #000;
	font-size: 12px;
	font-weight: normal;
}

.remarks {
	width: 98%;
	border: solid black 2px;
	padding: 5px;
	text-align:center;
}

.errorGebruiker {
	width: 98%;
	border: solid red 2px;
	padding: 5px;
	text-align:center;
}

.errorGebruiker ul, .errorGebruiker p {
	font-size: 14px;
	color: red;
}

.errorGebruiker li a {
	color: red !important; /* #alt_content a */
}

.blank_row {
    height: 4px;
    background-color: #FFFFFF;
}

.register textarea, .main_user_form textarea {
	width: 100%;
}

.register input[type='text'], .main_user_form input[type='text'], .child_user_form input[type='text'] {
	width: 100%;
}

/* Vacature */

.vacature {
	margin: 0 19px;
}

.vacature h2 {
	margin: 10px 0;
}

.vacature p {
	margin-bottom: 10px;
}

.vacature_form {
	max-width: 700px;
}

.vacature_form td {
	padding: 3px 0;
}

.vacature_form input[type='text'], .vacature_form textarea {
	width: 100%;
	background: #fafafa;
	border-radius: 3px;
}

.vacature_form input[type='text']:focus, .vacature_form textarea:focus {
	background: white;
	border-color: #335A98;
	outline: 0;
}

.vacature_form input[type='submit'] {
	padding: 10px;
	font-weight: bold;
	font-family: inherit;
	text-transform: uppercase;
	width: 200px;
	margin-top: 15px;
	margin-bottom: 40px;
}

.red {
	color: red;
}

.bold {
	font-weight: bold;
}

.gray {
	color: #909090;
}

.containerCentered {
	text-align: center;
	max-width: 100%;
}

.vacature .spam {
	text-align: center;
	max-width: 190px;
}

.vacature .errormsg {
	padding: 4px;
	border: none;
}

.firstError {
	color: red;
	font-weight: bold;
	border: solid red 1px;
	background-color: #ffebe8;
	padding: 8px;
	margin: 10px 0;
}

.register .errormsg {
	padding: 0;
	border: none;
}

.register p.errormsg {
	margin: 5px 0;
}

.marginBottom10px {
	margin-bottom: 10px;
}

.register input[type="text"], .register textarea {
    background: #fafafa;
    border-radius: 3px;
}

#alt_content td.paddingTop10px {
	padding-top: 10px;
}

/* mijn overzicht*/

#contentOverzicht #content_wrap {
	background-color: #FFF;
	background-image: none;
}

#contentOverzicht #content {
	width: auto;
	margin: 0 13px 0 19px;
	float: none;
}

#contentOverzicht .block_title {
	margin: 0;
	padding: 10px 0;
}

#contentOverzicht .list_block {
	margin-top: 10px;
	border-bottom: 0; /*overwrite*/
	background: none;
}

/**
 * Bericht wanneer je niet aan de abonnement eisen voldoet.
**/
div#noSubMessage {
	display: block;
	background-color: hsl(217, 50%, 40%);
	width: 100%;
	border-radius: 4px 4px 0 0;
	padding: 20px 1px 1px 1px;
}

/**
 * Title van message.
**/
div#noSubMessage h1 {
	padding-bottom: 20px;
	color: white;
	text-align: center;
}

/**
 * Abonnementen.
**/
div#noSubMessage div#subOptions {
	display: flex;
	background-color: white;
}

/**
 * Abonnement optie blokken.
**/
div#noSubMessage div#subOptions a {
	max-width: 40%;
	padding: 10px 16px;
	transition: transform .2s ease-out;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/**
 * Beetje zoom bij hover.
**/
div#noSubMessage div#subOptions a:hover {
	transform: scale(1.1);
}

/**
 * Abonnement title.
**/
div#noSubMessage div#subOptions a h2 {
	color: hsl(360, 78%, 30%);
	text-align: center;
}

/**
 * Abonnementen kenmerken.
**/
div#noSubMessage div#subOptions a p {
	font-size: 14px;
	color: hsl(217, 50%, 40%);
	text-decoration: none;
}

/**
 * voor de +/= dingentjes.
**/
div#noSubMessage div#subOptions span {
	color: hsl(217, 50%, 40%);
	font-size: 32px;
	align-self: center;
}

/**
 * Gratis proefabonnement op totaal banner.
**/
div.trialText {
	background-color: white;
	border: 1px solid hsl(218, 49%, 40%);
	border-radius: 4px;
	
	font-size: 14px;
	line-height: 18px;
}

/**
 * Title.
**/
div.trialText h1,
div.trialText h4 {
	background-color: hsl(218, 49%, 40%);
	padding: 1em 0;
	color: white;
	text-align: center;
}

/**
 * Box met informatie.
**/
div.trialText span {
	display: block;
	padding: 20px;
}

/**
 * Box met informatie.
**/
div.trialText.noAccess span,
div.trialText span#noAccess {
	padding: 10px 14px;
}

/**
 * Info tekst.
**/
div.trialText span p {
	padding-bottom: 1em;
	color: hsl(0, 0%, 30%);
}

/**
 * Linkjes.
**/
div.trialText span a {
	padding-bottom: 1em;
	color: hsl(218, 49%, 40%);
	text-decoration: none;
}

/**
 * Uitgelichte punten.
**/
div.trialText span ul {
	padding-bottom: 1em;
	padding-left: 8px;
	color: hsl(218, 49%, 40%);
	font-size: 16px;
	line-height: 1.5em;
	list-style: none;
}

div.trialText span form {
	display: block;
	text-align: center;
}

/**
 * Gratis activeren knop.
**/
div.trialText span form input[type='submit'] {
	padding: 8px 28px;
	font-size: 16px;
	
	animation: horizontalMove 20.72s ease infinite;
	animation-delay: 3s;
	transform-origin: 50% 50%;
}

/**
 * Gratis activeren knop bij hover.
**/
div.trialText span form input[type='submit']:hover {
	background-color: transparent;
	border: 2px solid hsl(217, 50%, 40%);
	padding: 6px 26px; /* Border van padding afhalen */
	color: hsl(217, 50%, 40%);
}

/**
 * Animatie voor bewegen knop.
**/
@keyframes horizontalMove {

	0% {
		transform:translate(0,0);
	}

	0.57915% {
		transform:translate(5px,0);
	}

	1.1583% {
		transform:translate(0,0);
	}

	1.73745% {
		transform:translate(5px,0);
	}

	2.3166% {
		transform:translate(0,0);
	}

	2.89575% {
		transform:translate(5px,0);
	}

	3.4749% {
		transform:translate(0,0);
	}

	100% {
		transform:translate(0,0);
	}

}

#trialActivated {
	padding: 0 20px 20px;
	background: #fff;
}

#contentOverzicht .noAccess {
	margin: 10px 0;
}

.noAccessGray {
	background: #f6f6f6;
	padding: 15px;
}

#contentOverzicht .list_block .block_title {
	color: gray; /*overwrite*/
	background: none; /*overwrite*/
}

#contentOverzicht .list_block a {
	color: gray; /*overwrite*/
}

#contentOverzicht .list_block ul {
	background: none; /*overwrite*/
}

#contentOverzicht .releaseDate {
	color: #818181;
	margin-top: 10px;
}

/*mijn overzicht -> knipsel user*/
#contentOverzicht .block .archief a {
	text-decoration: none;
	color: #335A98;
	font-size: 14px;
	line-height: 16px;
	padding: 0px;
	display: block;
	margin-top: 2px;
}

#contentOverzicht .block .archief a:hover {
	color: #891010;
}

#contentOverzicht table .post_summary {
	margin-top: 10px;
}

#contentOverzicht .articleinfo {
	line-height: 22px;
	color: #818181;
	margin-top: 0;
	margin-bottom: 16px;
}

/* mail unsubscribe */
div#unsubscribe {
	max-width: 600px;
	border: 1px solid hsla(0, 0%, 0%, .5);
	border-radius: 8px;
	margin: 0 auto;
	padding: 30px;
}

div#unsubscribe p {
	margin: 10px 0;
}

@media print {
	#content2 .block {
		font-size: 1.3em;
		line-height: 1.3em;
	}

	#articleinfo {
		font-size: 1em;
	}
}

.vacature_background {
	background: #F2F4F8 none repeat scroll 0% 0%;
}

.vacature_background ul {
	padding: 10px 10px 20px 13px !important;
}

.hidden {
	display: none;
}

.simple_searchblock_show {
	display: none;
}

.searchCategory, .searchAgenda {
	display: inline-block;
}

.searchCategory input[type='submit'], .searchAgenda input[type='submit'] {
	margin: 4px 8px;
}

#searchinfo input[type='submit'] {
	margin: 4px 0 4px 4px;
}

.agendaNoRecord {
	padding: 20px 0;
}


@media screen and (max-width : 960px) {
	
	#sidebar {
		display: none;
	}

	#sidebar_wide2 { /* don't hide this sidebar! */
		width: 100%;
		height: auto;
		margin: 0px;
	}

	#container {
		width: auto;
		max-width: 960px;
	}

	#content_wrap {
		width: auto;
		max-width: 960px;
	}

	#content_wrap2 {
		width: auto;
		background-color: white;
		background-image: none;
	}

	#header {
		width: auto;
		max-width: 960px;
	}

	#content {
		width: auto;
		max-width: 746px;
	}

	#content_wrap_adressengids {
		background-color: #FFF;
		background-image: none;
	}

	#content2, #content_wrap_adressengids {
		width: 100%;
		margin: 0;
	}

	#content2 .block, #content .block {
		padding: 10px 20px 10px 20px;
	}

	.nieuwsoverzicht {
		padding-left: 40px;
	}

	#sidebar_wide .list_block, #contentOverzicht .list_block {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#sidebar_wide2 .list_block {
		padding: 10px 16px;
		margin: 0 auto;
	}

	/* Agenda element */
	#sidebar_wide2 .block, #sidebar_wide .block {
		padding: 10px 20px;
	}

	#content_wrap_adressengids #sidebar_wide {
		width: auto;
		margin: 0;
		float: none;
	}

	#archive_searchblock {
		width: 100%;
	}

	#content_wrap_adressengids #content {
		margin: 0px;
		width: 100%;
		max-width: none;
	}

	#content_wrap_adressengids #datatable {
		width: 100%;
	}

	#archive_searchblock table {
		width: 100%;
	}
	
	#mainnewsitem {
		width: auto;
	}
	
	#mainvakbladitem {
		width: auto;
	}
	
	#contentOverzicht .col-md-8, #contentOverzicht .col-md-6, #contentOverzicht .col-md-4 {
		padding: 0;
	}

}

@media screen and (max-width : 784px) {
	
	#sidebar_wide, #sidebar_wide2 {
		width: 100%;
	}

	#content {
		margin: 0px 20px 0px 19px;
	}

	#content2 {
		margin: 0px;
	}

	#content_narrow {
		width: 100%;
	}

	#content_wrap, #content_wrap_adressengids {
		background: none;
		background-color: white;
	}

	#content_wrap2, #content_wrap_adressengids {
		background: none;
		background-color: white;
	}

	.nieuwsoverzicht {
		margin-top: 20px;
	}

	#dateentime, #search {
		flex-grow: 0;
	}

	#login {
		flex-grow: 0;
		display: block;
		width: 100%;
	}

}

@media screen and (max-width : 672px) {

	#mainnewsitem #imgwrap {
		width: 216px;
	}

	#mainnewsitem #imgwrap img {
		width: 216px;
		height: 77px;
	}

	#footernav {
		max-width: 570px;
	}
	
	.MCEImageCaptionWrapper,
	figure.image {
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 10px;/* extra ruimte voor tekst */
	}
	
	.MCEImageCaptionWrapper img {
		width: 100%;/* volledige breedte */
		height: auto;
	}
	
	.regular {
		width: auto !important;/* Important om te overschrijven */
	}
	
	.post_summary .Default,
	.post_summary p.h5 {
		max-width: 85vw;/* viewport anders scaled niet goed */
	}
	
	.post_summary p img {
		width: 100%;/* volledige breedte */
		height: auto;
		margin-left: 0px !important;/* Important om te overschrijven */
	}
	
	/* H2 in gebruiker pagina blijft nu links */
	#menu {
		display: inline-block;
	}
	
}

@media screen and (max-width : 592px) {

	#archive_searchblock table {
		text-align: center;
	}
	
	/* hide the long search text in the adressengids page, and use a placeholder instead */
	.simple_searchblock_show {
		display: block;
		padding-top: 10px;
	}
	
	.simple_searchblock_hide {
		display: none;
	}

}

@media screen and (max-width : 480px) {
	
	/* Volledig op mobile maar toch ruimte onder en boven voor tekst */
	.post_summary table {
	margin: 0px 0px 15px 0px;
	}
	
	.blad_page .imageR {
		float: none;
		padding-bottom: 20px;
	}
	
	#bestel_labelImage {
		display: none; /* this text would appear above and below the title */
	}
	
	.bericht_kolom .tabelkader1 {
		width: 100% !important;
	}
	
}


/* aside wordt gebruikt voor een kader in Newsroom en komt dus mee met een migratie */
/* Staat ook in tiny.css van /admin */
aside:has(strong) {
  display: grid;
  gap: 10px;
  background-color: hsl(0 0 95%);
  border-left: 3px solid hsl(217 50% 40%);
  margin: 20px 0;
  padding: 20px 25px;
  
  strong {
    font-size: 1.125rem; /* 18px */
    font-weight: bold;
  }
  
  p {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-bottom: initial;
  }
}


/* Streamer */
div:has(> blockquote) {
  position: relative;
  display: grid;
  gap: 1em;
  padding: 1em 0;
  font-size: 1rem;

  &::before {
    content: '';
    width: 80px;
    height: 3px;
    background-color: hsl(217 50% 40%);
  }

  &::after {
    content: '';
    height: 1px;
    background-color: hsl(0 0% 80%);
  }
  
  blockquote {
    margin: 0;
    font-size: 1.125em;
    font-style: italic;
    color: hsl(0 0% 20%);
  
    &:before {
      content: open-quote;
    }

    &:after {
      content: close-quote;
    }
  }
  
  cite {
    font-size: 1em;
    font-style: normal;
    color: hsl(0 0% 60%);
  }
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 19, 2011 */



@font-face {
    font-family: 'Droid Serif';
    src: url('/fonts/droidserif/droidserif-webfont.eot');
    src: url('/fonts/droidserif/droidserif-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/droidserif/droidserif-webfont.woff') format('woff'),
         url('/fonts/droidserif/droidserif-webfont.ttf') format('truetype'),
         url('/fonts/droidserif/droidserif-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Droid Serif';
    src: url('/fonts/droidserif/droidserif-bold-webfont.eot');
    src: url('/fonts/droidserif/droidserif-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/droidserif/droidserif-bold-webfont.woff') format('woff'),
         url('/fonts/droidserif/droidserif-bold-webfont.ttf') format('truetype'),
         url('/fonts/droidserif/droidserif-bold-webfont.svg#DroidSerifBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Droid Serifc';
    src: url('/fonts/droidserif/droidserif-bolditalic-webfont.eot');
    src: url('/fonts/droidserif/droidserif-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/droidserif/droidserif-bolditalic-webfont.woff') format('woff'),
         url('/fonts/droidserif/droidserif-bolditalic-webfont.ttf') format('truetype'),
         url('/fonts/droidserif/droidserif-bolditalic-webfont.svg#DroidSerifBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'Droid Serif';
    src: url('/fonts/droidserif/droidserif-italic-webfont.eot');
    src: url('/fonts/droidserif/droidserif-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/droidserif/droidserif-italic-webfont.woff') format('woff'),
         url('/fonts/droidserif/droidserif-italic-webfont.ttf') format('truetype'),
         url('/fonts/droidserif/droidserif-italic-webfont.svg#DroidSerifItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}


//# sourceMappingURL=concat.css.map.json