.site { width:100%; }
#mpdf { float:right; }
* { margin:0; padding:0; box-sizing:border-box; }
ol { margin-left:30px; }
h1,h2,h3,h4,table,p,ul.vertical { margin:8px 3px; }
/* @media only screen and (min-width:768px) */
@media only screen and (min-width:1068px)
{
  /* Dit is voor grotere devices */
  .site       { display:grid; grid-template:repeat(6,auto) / 210px 90px repeat(4,auto); }
  header      { grid-row:1/span 1; grid-column:1/span 1; }
  div.colofon { grid-row:1/span 1; grid-column:2/-1; }
	#topmenu    { grid-row:2/span 1; grid-column:1/-1; }
	div.full    { grid-row:5/span 1; grid-column:1/-1; }
  main        { grid-row:3/span 1; grid-column:3/-1; margin:2em; }
  nav         { grid-row:3/span 1; grid-column:1/span 2; }
  footer      { grid-row:6/span 1; grid-column:1/-1; }

  .mobile              { display:none; }
  .topmenu>ul          { display:block; }
  #topmenu             { background-color:#d00; margin-bottom:10px; padding-right:1em; }
  .topmenu li          { display:block; float:left; position:relative; background-color:#d00; }
  .topmenu li li       { border:solid 1px; }
  .topmenu li li       { float:none; }
  .topmenu>ul>li:last-child { float:right; }
  .topmenu li ul       { display:none; position:absolute; }
  .topmenu li:hover>ul { display:block; }
  .topmenu ul ul       { left:-50%; top:1.7em; 1px; /*zz border:solid 1px;*/ }
}
@media only screen and (min-width:175px) and (max-width:667px)
/* @media only screen and (min-width:175px) and (max-width:1067px) */
{
  /* Dit is voor kleinere devices */
  .site       { display:grid; grid-template:repeat(7,auto) / repeat(4,auto); }
  header      { grid-row:1/span 1; grid-column:1/span 1; }
  main        { grid-row:3/span 1; grid-column:1/-1; }
  nav         { grid-row:4/span 1; grid-column:1/-1; }
  div.colofon { grid-row:1/span 1; grid-column:2/-1; }
	div.full    { grid-row:5/span 1; grid-column:1/-1; }
  footer      { grid-row:6/span 1; grid-column:1/-1; }

  .topmenu li          { display:block; position:relative; background-color:#d00; /*zz border:solid 1px;*/ } 
  .topmenu li ul       { display:none; min-width:180px;}
  .topmenu li:hover>ul { display:block; position:absolute; }
  .topmenu>ul          { left:0; top:10px; border:solid 1px; padding:1em; }
  .topmenu ul ul       { left:80%; top:10px; /*zz border:solid 1px;*/ }

  /* tapping the hamburger shows and hides the topmenu */
  #hamburgerToggleLabel { cursor:pointer; display:block; margin-left:3px; } 
  #hamburgerToggleCheckbox+#hamburgerToggleLabel+div         { display:none; }
  #hamburgerToggleCheckbox:checked+#hamburgerToggleLabel+div { display:block; }

  /* change hamburger to a cross and vice versa */
  #hamburgerToggleLabel { cursor:pointer; }
  #hamburgerToggleLabel:hover { opacity:0.7; }
  .hamburgerToggleBox { width:40px; height:24px; display:inline-block; position:relative; }
  .hamburgerToggleInner { display:block; }
  .hamburgerToggleInner, .hamburgerToggleInner::before, .hamburgerToggleInner::after { width:40px; height:4px; background-color:#000; border-radius:4px; position:absolute; }
  .hamburgerToggleInner::before{ content:""; display:block; top:10px; }
  .hamburgerToggleInner::after { content:""; display:block; top:20px; }
  #hamburgerToggleCheckbox:checked ~ #hamburgerToggleLabel .hamburgerToggleInner { transform:translate3d(0, 10px, 0) rotate(135deg); }
  #hamburgerToggleCheckbox:checked ~ #hamburgerToggleLabel .hamburgerToggleInner::before { opacity:0; }
  #hamburgerToggleCheckbox:checked ~ #hamburgerToggleLabel .hamburgerToggleInner::after { transform:translate3d(0, -20px, 0) rotate(-270deg); }

  nav div.mobile a { display:block; text-align:center; margin:1em 0; background-color:#d00;  }
}
@media print
{
  .site       { display:grid; grid-template:repeat(7,auto) / repeat(4,auto); }
  nav, #mpdf  { display:none !important; }
  header      { grid-row:1/span 1; grid-column:1/span 1; }
  div.colofon { grid-row:1/span 1; grid-column:2/-1; }
	div.full    { grid-row:5/span 1; grid-column:1/-1; }
  main        { grid-row:2/span 1; grid-column:1/-1; }
  footer      { grid-row:6/span 1; grid-column:1/-1; }
  #zoek       { display:none; }
}

#hamburgerToggleCheckbox { display:none; }
.topmenu ul       { list-style-type:none; background-color:#d00; } 
.topmenu a        { display:block; min-width:133px; color:white; text-align:center; /*zz padding:5px 0; text-decoration:none;*/ } 
.topmenu li a:hover  { background-color:#400; color:white; }
.topmenu>ul>li>ul { z-index:1; }
.topmenu ul ul ul { z-index:2; }

body{ width:100%; margin:0; padding:0; }
body, html { font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif; }
body { line-height:1.8em; color:#262626; }
div.colofon { padding:7px 3px 0px 20px; }
main        { padding:0 10px; }
.right, .r, .r500, r600 { float:right; }
.left      { float:left; }
.width100      { width:100%; }
div.right img { width:100%; }
.zoek { float:right; }

div.r div.zoek, div.r {background-color:white; }

div.firstPage { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around; }
a.firstPage   { display:block; overflow:hidden; margin:30px 5px; width:400px; height:250px; border:solid 1px #ccc; text-decoration:none; }
a.firstPage embed { width:100%; }

@media screen and (max-width:667px) {
  div.menu{display:none;}
}
pre[gedicht] { line-height:1em; font-size:1.5em; }
.citaat { font-family:serif; font-size:120%; letter-spacing:-1px; background:#ddd; }

span.r, a.r { padding-right:5px; }
img.l { margin-right:15px; margin-bottom:10px; }
.rc { float:right; clear:right; }
.rr { float:right; clear:right; margin:1em 0em 4em 10px; }
nav ul { margin:0; padding:0; list-style-type:none; }
nav ul a, nav ul a:visited { display:block; border:1px solid #fc9; padding-left:0.1em; color:#000; text-decoration:none; }
nav ul a:hover, nav ul a:focus, nav ul a.rollover, nav ul a.rollover:visited { background:#ff9; }
h1 span .blue { color:blue; }
h1,h2,h3,h4 { color:#d00; }
h1 { border-bottom-style:dotted; }
.inline{display:inline-block; width:300px; vertical-align:top; }
sup.sup{color:#d00; }
hr{color:yellow}
.mono{font-family:mono}
A:hover{color:#C00}

div.r div, div.r500 div, div.r600 div { margin:0; padding:0 3px 3px 3px; background-color:#dff; }
div.bleu{background:#dff;}
.bleu{background:#dff;}

a.noot { color:#d00; }
.clear { clear:both; }
.l { float:left; }
.c { clear:both; }
.clr { clear:both; }
.ir { float:right; clear:right; }
.kader { margin:10px; padding:10px; border:solid #aaa 3px; background-color:#ffc; }
.kaderGreen { margin:10px; padding:10px; border:solid #aaa 3px; background-color:#cff; }
div.r div.kader { margin-top:10px; padding:10px; background:#ffc; }
div.r div.kader h4 { margin:0; padding:10px; background:#ffc; }
div.r div.kader ol { margin:0; padding-left:20px; background:#ffc; }
.main { float:right; clear:right; background-color:#fff; padding:0 0 30px 30px; }
li a.red { color:#d00; }
.red { color:#d00; }
div.main{ margin:0px 0 5px 5px; padding:0 5px 0 5px; width:290px; }
div.w { margin:0 0 5px 5px; padding:0 5px 0 5px; background-color:#dff; width:100%; }
div.citaat { margin:15px 4% 15px 4%; padding:0 1% 0 1%; background-color:#dff; width:90%; }
div.ir { margin:0 0 5px 5px; padding:0 5px 0 5px; background-color:#dff; width:290px; }
div.r    { width:300px; }
div.r500 { width:500px; }
div.r600 { width:600px; }
div.r, div.r500, div.r600 { clear:right; float:right; margin:0 0 20px 10px; padding:0; }
div.r6 { width:600px; clear:right; float:right; margin:0 0 20px 10px; padding:0; }
div.r250 { width:250px; clear:right; float:right; margin:0 0 5px 5px; padding:0; }
div.rFull { clear:right; float:right; margin:0 0 5px 5px; padding:0; }
div.rb { width:450px; }
div.rbb { width:600px; }
div.l { clear:left; float:left; margin:0 5px 5px 0; padding:0; width:300px; }
div.ll {             float:left; margin:0 5px 5px 0; padding:0; width:300px; }
div.l600 { clear:left; float:left; margin:0 5px 5px 0; padding:0; width:600px; }
div.sub  { margin:0; padding:0 3px 3px 3px; background-color:#dff; }
div.subvoor { margin:0; padding:0 3px 3px 3px; background-color:#dff; clear:both; }
div.clr { margin:7px; padding:1px 10px 10px 10px; background-color:#dff; }
img.ir { margin:0px 0 0px 5px; padding:0 0 0 5px; }
div.r img, div.r500 img, div.r600 img { margin:5px 0 0px 0px; padding:0 0 0 0px; }
H4 { margin-top:1em; }
H4 + P { margin:0; }
H4 + OL { margin:0; }
H4 + H5 { margin:0; }
div#main{ margin-left:5px; }
a:visited { text-decoration:none;    /*color:#039;*/ }
a:active  { text-decoration:none;      color:#009; }
a:hover   { text-decoration:underline; color:#C00; }
a:link    { text-decoration:none;    /*color:#CC0;*/ }
.content {
  background-image:url(/sticker.gif);
  background-repeat:no-repeat;
  background-position:right bottom;
  background-attachment:fixed;
}
.navigation {
  border-bottom-color:#000; border-bottom-width:medium;
    border-right-color:#000;  border-right-width:medium; border-right-style:dotted;
    border-left-color:#000;   border-left-width:medium;
      border-top-color:#000;    border-top-width:medium;
}
.middle {
  background-image:url(left.gif);
  background-repeat:repeat-y;
  background-position:left;
}
.image {
  background-color:#FFC;
  border:1px dotted #000;
}
dt.vraag { margin-top:30px; font-weight:bold; }
dt.reactie { margin-top:0px;  }
dd.reactie { margin-top:0px; }
dd { margin-top:0px; }
table.ijl td { padding:0 .5em 0 .5em; vertical-align:top; }
table.ijl th { padding:0 .5em 0 .5em; }
table.matrix { background-color:#fdd; border: solid #000 1px; }
table.matrix td { border: solid #000 1px; padding:0 .5em 0 .5em; }
table.matrix th { border: solid #000 1px; padding:0 .5em 0 .5em; }
table.kleur { background-color:#FEE; }
tr.even { background-color:#FBB; }
td.even { background-color:#FBB; }
tr.odd { background-color:#FDD; }
td.odd { background-color:#FDD; }

table.boeken { background-color:#FEE; border:1px solid; }
table.boeken td {border:1px solid; margin:0; }

ul.vertical { list-style-type:none; } 
ul.vertical li { position:relative; width:100%; }
ul.vertical a, ul.vertical a:visited {
  display:block;
  border:1px solid #fc9;
  padding-left:0.1em;
  color:#000;
  text-decoration:none;
  /*letter-spacing:1px;*/
}

ul.vertical a:hover,
ul.vertical a:focus,
ul.vertical a.rollover,
ul.vertical a.rollover:visited { background:#ff9; }
ul.vertical a.rood { color:#d00; font-weight:bold; }
li.s { margin: 1em 0 0 0; }
ul { padding-left:2em; }
#date{float:right;}
div.figuur { clear:left; float:left; background:#dff; margin:1em;}
div.figuur div { text-align:center; }