/* Global variables */
html {
  box-sizing: border-box;
  --color-orange: #a56007; /* was #D17604; Lighthouse: insufficient background/foreground contrast; */
  --color-orange-border: #FDD6A6;
  --color-orange-hover: #8C3911;
  --color-darkblue: #02323E;
  --color-hyperlink: #017d95; /* was #0295B2. Lighthouse: insufficient background/foreground contrast; */
  --color-babyblue: #AEDDE6;
  --color-menu: white;
  --color-menu-hover: #042b33;
  --color-header-background: #017d95;
  --color-header-bar-background: #045366;
  --color-standout-background: #4DA4B5;
  /* separation */
  --sepx: 1.2em; /* Tussen onverbonden blokken */
  --sepy: 1.2em;
  --spacex: 0.6em; /* binnen een blok */
  --spacey: 0.6em;
  --spacey-min: 0.3em;
  --spacey-plus: 0.8em;
  --inspringen: var(--sepx);
  --font-smaller: 76%;
  
  --header-plane-height-narrow-layout: 125px;
  --header-bar-height-narrow-layout: 35px;
  --header-height-narrow-layout: calc(var(--header-plane-height-narrow-layout) + var(--header-bar-height-narrow-layout));
  
  --header-bar-height-wide-layout: 29px;
  --tiger-width-narrow-layout: 186px; /* Determines position of search field in narrow layout */
  --menu-width-narrow-layout: calc(var(--header-bar-height-narrow-layout) + var(--sepx));
  --bijzaken-width: 185px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Images images should never be rendered at a size wider than their containing element. */
img {
  max-inline-size: 100%;
  block-size: auto;
  border: 0;
  border-style: none;
}
/* Smalle vormgeving voor tablets en smartphones. */
header {
  display: grid;
  grid-template-areas: ". .           ."
  ". zoekvenster hoofdmenu";
  grid-template-rows: var(--header-plane-height-narrow-layout) var(--header-bar-height-narrow-layout);
  grid-template-columns: var(--tiger-width-narrow-layout) auto var(--menu-width-narrow-layout);
  background-image: url("/static/img/narrow-header-background.png");
  margin: 0;
  height: var(--header-height-narrow-layout);
  background-repeat: no-repeat;
  background-color: var(--color-header-background);
}
header #zoek {
  margin-left: 20px;
  grid-area: zoekvenster;
  display: flex;
  gap: var(--sepx);
  align-items: center;
  flex-flow: row nowrap;
  height: var(--header-bar-height-narrow-layout);
  background-color: var(--color-header-bar-background);
  font-size: var(--font-smaller);
  font-weight: normal;
}
header #zoek .zoekformulier input {
  font-family: inherit;
  font-size: inherit;
  width: 100px;
  height: 20px;
  color: var(--color-hyperlink);
}
header #zoek #zoekactie a {
  content: url("/static/img/vergrootglas-16x16.png");
  height: 16px;
  width: 16px;
  text-decoration: none;
  color: white;
}
header #hoofdmenu {
  grid-area: hoofdmenu;
  justify-self: end;
  display: grid;
  grid-template-areas: ". button"
  "menu menu";
  grid-template-rows: var(--header-bar-height-narrow-layout) auto;
  grid-template-columns: auto var(--menu-width-narrow-layout);
  background-color: var(--color-header-bar-background);
}
header #hoofdmenu .menu-button-container {
  grid-area: button;
  justify-self: start;
}
header #hoofdmenu nav {
  grid-area: menu;
}
header #hoofdmenu li a {
  color: var(--color-menu);
  text-decoration: none;
  padding: 0;
}
header #hoofdmenu li a:hover {
  color: var(--color-menu-hover);
}
header #handschrift {
  display: none;
}
header #tijgerinpak {
  display: none;
}
/* Geen kolommen, de bijzaken onder het artikel. */
#content {
  display: grid;
  grid-template-areas: "broodkruimels"
  "kern"
  "bijzaken"
  "navigatie"
  "voet";
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto;
  margin: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
}
#portal-breadcrumbs {
  grid-area: broodkruimels;
  display: flex;
  gap: 0.5em;
  flex-flow: row wrap;
  align-items: center;
}
#portal-breadcrumbs span {
  color: var(--color-darkblue);
}
#portal-breadcrumbs span#breadcrumbs-you-are-here
{
  font-weight: bold;
  color: var(--color-hyperlink);
}
#portal-breadcrumbs a {
  color: var(--color-darkblue);
}
#portal-breadcrumbs a:hover {
  color: var(--color-hyperlink);
}
footer
{
  grid-area: voet;
}
footer hr {
  border: none;
  border-top: 1px solid var(--color-hyperlink);
  margin: var(--sepy) 0 var(--sepy) 0;
}
footer p {
  line-height: 2em; /* Op small scherm wrapt de menuregel en klaagt Lighthouse over "tap size". */
}
footer a {
	margin: var(--sepy) var(--spacex) var(--spacey) var(--spacex);
}
#content aside {
  grid-area: bijzaken;
  border: 0px solid var(--color-babyblue);
  /* 0px, dus geen border? */;
}
#content aside .decorative {
  display: none;
}
ul, ol {
  margin-left: 0;
}
/* A mobile menu, expanding from a hamburger icon. */
.menu {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
  justify-content: start;
  align-items: center;
  position: relative;
  z-index: 1;
}
.menu > li {
  margin: 0 1rem 0 0;
  overflow: hidden;
  width: 100%;
  color: white;
  background-color: var(--color-header-background);
}

.menu-button-container {
  display: flex;
  height: var(--header-bar-height-narrow-layout);
  width: var(--header-bar-height-narrow-layout);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.menu-toggle {
  display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: white;
  position: absolute;
  height: 2px;
  /* de dikte van de hamburgerstreepjes */
  width: 24px;
  /* de breedte van de hamburgerstreepjes */
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}
.menu-button::before {
  content: "";
  margin-top: -8px;
}
.menu-button::after {
  content: "";
  margin-top: 8px;
}
.menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}
.menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}
.menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}
.menu-toggle ~ nav .menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-toggle:checked ~nav .menu li {
  height: auto;
}
.menu-toggle:checked ~ nav .menu li {
  border: 1px solid var(--color-darkblue);
  border-top: none;
  padding: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-toggle ~ nav .menu > li:not(:last-child) {
  /* menu ingeklapt */;
  border-bottom: none;
}
.menu-toggle:checked ~ nav .menu > li:not(:last-child) {
  /* menu uitgeklapt */;
  border-bottom: 1px solid var(--color-darkblue);
}
#topright {
  float: right;
  margin: 4px 6px 4px 10px;
}
/* Adsense-ads in het forum */
.banner {
  margin-top: 10px;
  margin-bottom: 2px;
  background-color: #f5fbfc;
}
.banner#KolomLinksNaastContent {
  margin-left: 25px;
  margin-right: 0px;
  margin-top: 45px;
}
.screenmenot {
  display: none;
}
/* De tabel met de "ik wil" links op de homepage. */
table.ikwil td
{
  padding: 4px 12px 10px 0px;
  vertical-align: top;
  text-align: left;
}
table.plain th, table.plain td
{
  vertical-align: top;
}
table.grid
{
  border-spacing: 0;
  border-collapse: collapse;
  margin-right: 40px;
  margin-top: 8px;
  margin-bottom: 8px;
}
table.grid td, table.grid th
{
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-darkblue);
  padding: 10px;
  vertical-align: top;
}
table.grid th
{
  font-weight: bold;
  text-align: left;
}
/* In de content in het cms. */
p.kaderRechtsZwevend
{
  float: right;
  color: var(--color-darkblue);
  border: 1px solid var(--color-babyblue);
  padding: 6px;
  margin-left: 10px;
  margin-right: 2px;
  margin-top: 0px;
  margin-bottom: 10px;
  width: 234px;
}
p.voorbeeld, p.definitie, p.betekenis {
    padding: var(--spacey) var(--spacex) var(--spacey) calc(154px + var(--spacex));
    margin: var(--sepy) var(--sepx) var(--sepy) 0;
    background-repeat: no-repeat;
    border-top: 1px solid var(--color-darkblue);
}
p.voorbeeld
{
    background-image: url(/static/img/voorbeeld.png);
    min-height: 134px;
}
p.definitie
{
    background-image: url(/static/img/definitie.png);
    min-height: 149px;
}
p.betekenis
{
    background-image: url(/static/img/betekenis.png);
    min-height: 111px;
}

/* De kolom met portlets aan de rechterkant: navigatie in Functioneren. */
#content nav {
  grid-area: navigatie;
}
#content nav dl.portlet {
  color: var(--color-darkblue);
  border: 1px solid var(--color-babyblue);
  padding: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  margin: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
}
#content nav dl {
  margin: 0px;
  padding: 0px;
}
#content nav dt {
  /* Het kopje "Navigatie" of "Inhoud" */
  margin: var(--spacey) var(--spacex) var(--spacey) var(--spacex);
  padding: 0;
}
#content nav dt a {
  color: var(--color-orange);
  letter-spacing: 0.1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#content nav dd {
  margin: 0;
  padding: 0;
}
#content nav a {
  text-decoration: none;
  color: var(--color-hyperlink);
}
#content nav a:hover {
  color: var(--color-orange);
}
#content nav a.navTreeCurrentItem {
  color: var(--color-darkblue);
}
#content nav ul {
  list-style-type: none;
  list-style-image: none;
  padding: 0px;
}
#content nav li {
  margin: var(--spacey) var(--spacex) var(--spacey) var(--spacex);
  padding: 0px;
}
nav ul.navTreeLevel0 {
    margin: var(--spacey-plus) var(--spacex) var(--spacey-plus) 0;
}
nav ul.navTreeLevel1,
nav ul.navTreeLevel2, nav ul.navTreeLevel3,
nav ul.navTreeLevel4, nav ul.navTreeLevel5,
nav ul.navTreeLevel6 {
  margin: var(--spacey-plus) var(--spacex) var(--spacey-plus) var(--sepx);
}
body {
  font-family: Verdana, Arial, sans-serif;
  margin: 0px;
  padding: 0 0 64px 0;
  /* padding bottom is ruimte voor cookie consent melding */
  font-size: 1em;
  hyphens: auto;
  color: var(--color-darkblue);
  line-height: 1.3em;
}
p {
  margin: var(--spacey) 0 var(--spacey) 0;
}
/*
* Kopjes van Kupu in 3 niveaus:
* 1: h2.Heading
* 2: h3.Subheading
* 3: h4.Subsubheading
*/
h1 {
  font-size: 1.8em;
  color: var(--color-hyperlink);
  letter-spacing: 0;
  font-weight: normal;
  line-height: 1.2em;
  margin-top: var(--spacey-plus);
  margin-bottom: var(--spacey);
}
h2 {
  font-size: 1.4em;
  color: var(--color-hyperlink);
  letter-spacing: 0;
  font-weight: normal;
  line-height: 1.2em;
  margin-top: var(--spacey-plus);
  margin-bottom: var(--spacey);
}
h3 {
  font-size: 1.2em;
  color: var(--color-darkblue);
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.2em;
  margin-top: var(--spacey-plus);
  margin-bottom: var(--spacey);
}
h4 {
  color: var(--color-darkblue);
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.2em;
  margin-top: var(--spacey-plus);
  margin-bottom: var(--spacey);
}
a {
  color: var(--color-hyperlink);
}
a:visited {
  color: var(--color-darkblue);
}
a:hover {
  color: var(--color-orange);
}
a:active {
  color: var(--color-hyperlink);
}
hr {
  border: none;
  border-top: 1px solid var(--color-babyblue);
  margin: var(--sepy) 0 var(--sepy) 0;
}
blockquote {
  border: 1px solid var(--color-babyblue);
  padding: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  margin: var(--sepy) 0 var(--sepy) 0;
}
.tijger-r {
  float: right;
  margin: 8px;
}
.tijger-l {
  float: left;
  margin: 8px;
}
.onder-body {
  clear: both;
  margin: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
}
blockquote.citaat-in-kolom {
  color: var(--color-darkblue);
  padding: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  border: 1px solid var(--color-darkblue);
  margin: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  background-color: var(--color-standout-background);
}
blockquote.citaat-in-kolom a {
	color: var(--color-darkblue);
}

.citaat-bron {
  margin-top: var(--sepy);
  font-weight: bold;
}
.related {
  padding: var(--sepy) var(--sepx) var(--sepy) var(--sepx);
  margin: var(--sepy) 0 var(--sepy) 0;
  border: 1px solid var(--color-orange-border);
}
.related .kop {
  color: var(--color-orange);
  /* Als h4 */
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-top: var(--spacey-plus);
  margin-bottom: var(--spacey);
}
.related a {
  color: var(--color-orange);
}
.related .related-link {
  margin-top: var(--spacey);
  margin-bottom: var(--spacey);
}
.related a:hover {
  color: var(--color-orange-hover);
}
span.highlightedSearchTerm {
  /* Te opvallend. Storend als er veel treffers zijn. background-color: var(--color-babyblue); */;
}
span.link-external {
  background: transparent url("/static/img/urllink-klein.jpg") no-repeat;
  background-position: 0px 2px;
  padding-left: 17px;
}
/* Definition list */
dt {
  font-weight: bold;
  margin-top: var(--sepy);
  margin-bottom: var(--sepy);
  margin-left: var(--sepx);
}
dd {
  margin-top: var(--spacey);
  margin-bottom: var(--sepy);
  margin-left: var(--inspringen);
}
/* image-left is een class die Kupu aanbrengt. */
img.image-left {
  float: left;
  margin: 8px 16px 8px 0px;
}
/* image-right is een class die Kupu aanbrengt. */
img.image-right {
  float: right;
  margin: 8px 0px 8px 16px;
}
/* image-inline is een class die Kupu aanbrengt. */
img.image-inline {
  float: none;
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Silktide Cookie Consent button */
.cc_banner a.cc_btn {
  background-color: var(--color-standout-background);
}
.cc_banner p.cc_message {
  font-size: var(--font-smaller);
  color: var(--color-darkblue);
}
.cc_banner p.cc_message a {
  color: var(--color-hyperlink);
}
.cc_banner p.cc_message a:visited {
  color: var(--color-darkblue);
}
.width160in180 {
  margin: var(--sepy) 0px var(--sepy) var(--sepx);
}
/* Inschrijfformulier (PloneFormGen) */
.field {
  margin-top: 10px;
}
.formControls {
  margin-top: 10px;
}
span.fieldRequired {
  color: #A69D6A;
  text-transform: lowercase;
  font-size: 0.8em;
}
.formHelp {
  margin-top: 4px;
  margin-bottom: 4px;
  color: #A69D6A;
}
label {
  font-weight: bold;
}
/* Label per optie van een select field. */
input + label {
  font-weight: normal;
}
#topbanner {
  margin: 0px 4px 14px 0px;
}
/* Artikel, zoekresultaat, sitemap, folder listing. */
#content #kern {
  grid-area: kern;
}
li {
  margin: var(--spacey) 0 var(--spacey) 0;
}
ul {
	margin: var(--spacey-plus) var(--spacex) var(--spacey-plus) var(--spacex);
  list-style-type: disc;
  list-style-image: url("/static/img/bullet1.gif");
  list-style-position: outside;
}
ul ul {
  list-style-image: url("/static/img/bullet2.gif");
}
ul.urllink {
  list-style-image: url("/static/img/urllink.jpg");
}
ol {
  list-style-type: decimal;
}
ol ol {
  list-style-type: lower-alpha;
}
.listing .description {
  margin-top: var(--spacey);
  margin-bottom: var(--sepy);
  margin-left: var(--inspringen);
}
/*
* Bij voldoende breed venster de oorspronkelijke fixed-width vormgeving.
* Het design vereist 780px en we laten wat extra ruimte voor de verticale
* scrollbar (zodat die geen horizontale scrollbar veroorzaakt).
*/
@media only screen and (min-width: 820px) and (min-width: 90ch) {
  html {
    --inspringen: 2em;
    --sepx: 1em; /* Tussen onverbonden blokken */
    --sepy: 1em;
  }
  body {
  	  line-height: 1.2em;
  }
  header {
    grid-template-areas: "handschrift .           .        tijger"
    "hoofdmenu   hoofdmenu   .        tijger"
    "zoekvenster zoekvenster bar      tijger";
    grid-template-rows: 102px var(--header-bar-height-wide-layout) var(--header-bar-height-wide-layout);
    grid-template-columns: 553px 1fr 1fr 223px;
    background-image: none;
  }
  header #handschrift {
    display: block;
    grid-area: handschrift;
    background-image: url("/static/img/top-name.jpg");
    width: 553px;
    height: 102px;
    background-size: 553px 102px;
    background-repeat: no-repeat;
  }
  header #tijgerinpak {
    display: block;
    grid-area: tijger;
    width: 223px;
    height: 160px;
    background-image: url("/static/img/top-tijger.png");
    background-size: 223px 160px;
    background-repeat: no-repeat;
  }
  header #zoek {
    margin-left: 0;
    height: var(--header-bar-height-wide-layout);
    background-image: url("/static/img/top-zoek.jpg");
    background-repeat: no-repeat;
    background-color: var(--color-header-bar-background);
    padding-left: 212px;
  }
  header #zoek .zoekformulier input {
    width: 180px;
    height: 16px;
  }
  header #zoek #zoekactie a {
    content: none;
  }
  header #zoek #zoekactie a:hover {
    text-decoration: underline;
  }
  #barfiller {
  	grid-area: bar;
  	background-color: var(--color-header-bar-background);
  }
  #content {
    /* Een linker kolom voor de bijzaken, navigatie onder het artikel. */
    grid-template-areas: "bijzaken broodkruimels"
                         "bijzaken kern"
                         "bijzaken navigatie"
                         "bijzaken voet";
    grid-template-rows: auto auto auto auto;
    grid-template-columns: var(--bijzaken-width) auto;
    column-gap: 28px;
    margin-left: 0;
  }
  #content aside .decorative {
    display: block;
    background-position: left center;
    width: var(--bijzaken-width);
  }
  #content nav li {
    margin: var(--spacey-min) var(--spacex) var(--spacey-min) var(--spacex);
  }
  nav ul.navTreeLevel0 {
    margin: var(--spacey-min) 0 var(--spacey-min) 0;
  }
  nav ul.navTreeLevel1,
  nav ul.navTreeLevel2, nav ul.navTreeLevel3,
  nav ul.navTreeLevel4, nav ul.navTreeLevel5,
  nav ul.navTreeLevel6 {
    margin: 0 var(--spacex) 0 var(--sepx);
  }
  #content aside #staart {
  	height: 75px;
    background-image: url("/static/img/icon-staart.jpg");
    background-size: 175px 57px;
    background-repeat: no-repeat;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-hyperlink);
    padding-bottom: 18px;
  }
  #content aside #stropdas {
  	height: 75px;
    background-image: url("/static/img/stropdas.jpg");
    background-size: 175px 57px;
    background-repeat: no-repeat;
  }
  #content aside {
    overflow-wrap: break-word;
    font-size: var(--font-smaller);
  }
  .related {
    margin-left: var(--sepx);
  }
  .related .related-link {
    margin-top: var(--spacey-min);
    margin-bottom: var(--spacey-min);
  }
  blockquote.citaat-in-kolom {
    margin-left: var(--sepx);
  }
  blockquote.citaat-in-kolom ol {
    padding-inline-start: 1em;
  }
  #portal-breadcrumbs {
    margin-left: 0;
    gap: 0.3em;
  }
  ul, ol {
    margin-left: 0.5em;
  }
  /* Disable het hamburger-uitklapmenu */
  header #hoofdmenu .menu-button-container,
  header #hoofdmenu .menu-button,
  header #hoofdmenu .menu-toggle
  {
    display: none;
  }
  /* Klassiek menu */
  header #hoofdmenu {
    justify-self: start;
    background-color: transparent;
    background-image: url("/static/img/top-menu.jpg");
    /* ? */
    background-repeat: no-repeat;
    width: auto;
    height: auto;
    font-weight: bold;
    display: grid;
    grid-template-areas: "menu";
    grid-template-rows: var(--header-bar-height-wide-layout);
    grid-template-columns: auto;
  }
  header #hoofdmenu ul.menu {
    /* overrides styles for .menu */
    flex-flow: row nowrap;
    gap: 1em;
    margin: 6px 0 0 15px;
    width: auto;
    height: auto;
    position: static;
    z-index: auto;
  }
  header #hoofdmenu .menu > li {
    height: auto;
    width: auto;
    background-color: transparent;
    border: none;
    padding: 0;
  }
  header #hoofdmenu .menu > li > a {
    margin-left: 14px;
    display: block;
    text-align: center;
    margin: 0;
    font-weight: bold;
    font-size: var(--font-smaller);
  }
  article {
    max-width: 90ch;
  }
}
/* Een breakpoint om de navigatie in een kolom rechts naast het artikel te plaatsen.
   De min-width in px garandeert voldoende ruimte voor de layout.
   De min-width in ch zorgt voor redelijke breaks bij zeer grootte letter instelling. */
@media only screen and (min-width: 1360px) and (min-width: 140ch) {
  #content {
    /* Een linker kolom voor de bijzaken, navigatie in kolom naast artikel. */
    grid-template-areas: "bijzaken broodkruimels ."
                         "bijzaken kern       navigatie"
                         "bijzaken voet          navigatie";
    grid-template-rows: auto auto auto;
    grid-template-columns: var(--bijzaken-width) auto auto;
  }
}
@media print {
  body * {
    visibility: hidden;
  }
  article, article * {
    visibility: visible;
  }
  article {
    position: absolute;
    top: 0;
    left: 0;
  }
  .printmenot {
    visibility: hidden;
  }
}