/* 28-09 NU ALLEEN NOG D EBORDER PX OOK IN PERCENTAGES ZETTEN DAN ZITTEN DE FOTOS OOK EXACT AAN DE HOOFD MENU KANT */
/* OF IS HET DE MARGIN BIJ CENTER ? - - - ( MOGELIJK DAT DE BORDER GENE EXTRA RUIMTE INNEEMT ) - - -  */
/*  OR - haakje open-  img border="0" - haakje sluiten. NEE WERKT OOK NIET */
/* zolang niet gevonde een extar px text plakken voor 'Rian' en achter 'me'  */

/* alle comments met haakje en uitroepteken en -- Vervangen door deze, misschien is dat de reden dat de css niet werkt, ik weet het niet */


/* tabel definitions in CSS vstleggend en met Table tussen haakjes oproepen niet zeker of dit werkt  dit als voorbeeld*/
/* YES werkt en gebruikt de hele pagina DT IS DE OPLOSSING VOOR HET CENTRAAL UITLIJNEN  - -   - - */
/* alleen in de - td tag - werken de border lijn en colours niet*/
/* Oplossen door border colour in - center-screen - te gebruiiken  */

/* css reset  - weet echter niet hoe het werkt, maar haalt alle default margins weg heb ik begrepen */

/* uit styles-any */
.container {
 width: 1265px;  
  height: 550px;
  font-family: arial;
  font-size: 10px;
  background-color: yellow; 
margin: 0 auto;
  outline: dashed 4px black;
  display: flex;
 justify-content: center;
align-items:center;

}

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML om body heights te laten werken moet je eerst de HTML height invullen*/

html, body {
    height: 100vh;
filter: invert(0);
cursor: url(pijl-dun.icons8.png), default;
/* deze pijl-dun.icons8 is mooi dun en voldoet */
/*  DIT WERKT, maar alleen ind eopen ruimtes en niet waar je daadwerkelijk een A-tag hebt , dus hier een pijltje maken*/
/* wel nog een probleem dat pijlte hier en bij A het handje erg dik zijn */
filter: invert(0);
/* filter: invert(0) hier ingevoerd om dat de ook hier ingevoerde cursor op de TV van wit naar zwart gaat */
}

/* Verschillende bodies met een id uitproberen HEB NIET HET IDEE DAT DIT WERKT OM DE FRAMES GOED TE KRIJGEN */
/* id body is hoofd body, id frame-body is frame body */

/*  - - Body  id="frame-body"  scroll="no" style="overflow: hidden" -- */
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/
/* - - - overflow-y: hidden;   Resulteert in  Hide vertical scrollbar */
/*  - -- overflow-x: hidden;  - -  Resulteert in Hide horizontal scrollbar */

/* SCROLL_ BAR AANPASSEN */
:root{
  scrollbar-color: rgb(204,0,0) rgb(255,255,255) !important;
/* 2026-03-27 rgb(210,210,210) = grijs voor de bar zelf */
/* 2026-03-27 rgb(255,255,255) = wit voor onder en boven buiten de bar */
/* 2026-03-27 rgb(204,0,0) = rood  */

  scrollbar-width: thin !important;
filter: invert(0);
/* Hier de cursor anders zetten heeft geen zin en verandert niets */

}

.scroll-big {
/* 2026-03-27 Scroll bar voor grote plaatjesd I frame , maar werkt nog niet */
 scrollbar-color: rgb(204,0,0) rgb(255,255,255) !important;

/*  scrollbar-width: thin !important; */
}




/*  In de body de eigen gedefinieerde standaard cursor en pointer aangeven */
/* zie ook de .cursor verder in deze css */
De werking checken op het TV scherm waar zulke lelijke vormen gebruikt worden, of in root zetten hierboven?*/

/* chose your own pointer and cursor */
/* html, body { */
/* Hier de cursor anders zetten heeft geen zin en er vernadert niets */
/*    pointer: url(hand-wit-cursor-32)  4 12, auto; */
/*    cursor : url(pijl-wit-cursor-32)  4 12, auto; */
/*  cursor : url(red-cursor-32)  4 12, auto; */
}


.frame-body {
overflow: hidden;  */  Men zegt dat dit het scrollen tegen gaat */
overflow-y: hidden;  */  Men zegt dat dit de vertikale scroll-bar weghaalt, maar het scrollen blijft */
overflow-x: hidden; */  Men zegt dat dit de horizontale scroll-bar weghaalt, maar het scrollen blijft */
display=flex;
height: 20px; 
width: 100vw;  

margin-top:0px;
margin:bottom:0px;
margin-left:0px;
margin-right:0px; 
    padding: 0;
}

.main-body {

/* werkt niet  tegen effect van minimizing screen maar misschien wel voor andere computers */
/*min-width: 3200px; */ 
/* change width as needed to fit your page*/
/* width 1405px werkt eigenlijk horizontaal exact goed, maar dan moeten wel wat zaken aangepast worden onder anderen zijn de teksten onder  de fotos niet meer centraal en het font is veranderd */
/*  height: relative; werkt ook niet helamaal goed , gewoon laten zitten*/
/* position: fixed; - - - Doet wat tegen effect van minimizing screen maar misschien wel voor andere computers */
/* position: static; - - - Is fixd in horizontaal maar niet vertikaal maar op mijn scherm vergroot is het wat ik vormgegeven heb */
/* position: fixed;en absolute; - - - Is fixed in diagonale richting naar links boven, maar niet als vormgegeven, dat moet je dus aanpassen  maar aanpassen van height heeft geen zin */
/* En ls je width weg haalt dan is het hele scherm blanko */
/* Ik hoop dat static het scherm in het midden houdt - absolute gaat naar links boven bij ctrl- en ctrl+*/
/* width: 1405px; met het opgekomen probleem van 90% is d evraag of deze waarden goed zijn */ 
/* ik blijf dat 90% prpbleem houden bij initiele start up van de Iframes page */
/* bij 100% is width:1263px het beste bij alleen een kolommen set geen iframe set */
/* maar bij de gezamenlijke iframes pagina is dat dan toch weer anders . Dan is het te smal   width: 1278px*/
/*Maar ls je width in px gebruikt dan schuift hij weer diagonaal naar links boven, dus dat niet doen. */
/* width:100vw staat alles in het midden en ik ben ook ieens van dei vervelende 90% initieel af. WHY?? */
/* maar even later zonder wat te doen is het geheel toch weer iets breder in een enkele plaatjes regel en dus niet meer in het midden */
/* maar bij de igrames is het weer goed, dus maar even zo laten*/

display=flex;
height: 100vh; 
width: 100vw;  

margin:0px; 

/* misschien helpt center;0 om hem in het midden te krijgen ipv van links boven,zie 'center Body statement.txt' */
position: absolute;center:0

/* Probleem dat de pagina alleen bij 90% er goed uitziet.*/
/* Om de pagina op 90% te laten starten probeer  het volgende en kijk ook naar 'Reset zoom level.txt */
/* dit werkte in Firefox maar die begon op 90% En ik moets dus naar 110% uitzoomen om het goed te krijgen, dus nu all waarden op 1 ipv van 0.9 gezet */
/*    zoom: 0.9; */
/*    transform: scale(0.9); */
/*    transform-origin: 0 0; */
/*    -webkit-transform: scale(0.9); */
/*    -webkit-transform-origin: 0 0; */
/*    -moz-transform: scale(0.9); */
/*    -moz-transform-origin: 0 0; */
 /*   -o-transform: scale(0.9); */
/*    -o-transform-origin: 0 0; */
}

/* Zie transform informatie bij oplossingen */
/* bij column blijft hij in de colomn en gaat van boven naar beneden */
/* Bij initial komt ook Home menu naar het midden, dus mogelijk deze div gebruiken in de sub menus vande Home page zelf */
/* Probleem met scrollen van src file in iframe - - toegevoegd  - -   position: absolute;   - - om de kijken of ik het passend kan krijgen */
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/
/* Wow dan gebeurt er wat . Het scrollen is weg en het plaatje past in hoogte, maar alle plaatjes staan links */
/* Probleem met scrollen van src file in iframe - - toegevoegd  - -   position: relative;  brengt all plaatsjes wer op hun plek, maar hets crollen is weer terug */
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/
/* Probleem met scrollen van src file in iframe - - toegevoegd  - -   position: fixed;  - -  Zelfde als absoplute Het scrollen is weg en het plaatje past in hoogte, maar alle plaatjes staan links */
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/
/* - - overflow: hidden; - - helpt ook niet bij het scrollen vande src in het frame*/
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/

.center-screen {
  position: relative;
  display: flex;
  flex-direction: initial;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin:0px; 
padding:0px;
/*  deze min-height: 100vh; is essentieel om hem in de hoogte in het midden te houden */
min-height: 100vh;
/*En deze moet je niet gebruiken min-width: 100vw; Dan centerren alle koloomen in het centrum*/
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px dashed black;*/ 

}

table, tr , td {
/*  width 1274px is het v=breedtes dat gaat zonder dat er een scroll bar komt */
width: 1274px; 
height=1px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 2px dashed blue;*/

}
#top-menu { 
height=1px;
/*WEER AANZETTEN BIJ GEBRUIK*/
/*border: 2px dashed green;*/

}

/* -- centreren in div -- */
/*-- de height parameter zorgt dat het object zakt in de div ruimte -- */
/* probleem dat de border box veel te groot is, margin:auto togevoegd */
.center { 
/*  Was margin: auto; maar )px schuitf ook niet alles naar de borderlijn op */
 margin: 0px;
 height: 40px;
  position: absolute;
/*border: 3px solid green;*/

}

/*-- centeren van P in div -- */
/*-- de top parameter zorgt ook dat het object zakt in de div ruimte -- */
.center p {
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* -- Deze container is voor centeren Iframe, voor andere schermen ook andere mogelijkheden -- */
/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 

}

/*  DIV container sizen per class  */
/* In het frame geeft dit een dunne kleine box zoals ik hem hebben wil, nu die grote groene box weg */
/*Use the padding css property of the container (div) instead. Padding is the space inside and border of the element, while margin is the space outside the border of the element.*/
/*The padding-top property sets the top padding (space) of an element.*/
/* ook dat helpt niet om de inner div van de margins af te helpen - - -  MOET dat eens verder uitzoeken */

.div-scroll {
/* Scroll bar div voor interne scrollbare divs */
  width: 100%;
  height: 400px;
overflow:auto; 
 scrollbar-color: rgb(204,0,0) rgb(255,255,255) !important;
/* 2026-03-27 rgb(210,210,210) = grijs voor de bar zelf */
/* 2026-03-27 rgb(255,255,255) = wit voor onder en boven buiten de bar */
/* 2026-03-27 rgb(204,0,0) = rood  */

  scrollbar-width: thin !important;
/* Tot hoiede de parameters noodzakelijk voor deze div-scroll */
  position: absolute;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ Test-GEBRUIK*/
/*border: 3px solid blue;*/

  box-sizing: border-box;
}


.div1 {
  width: 100%;
  height: 40px;
  position: absolute;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ Test-GEBRUIK*/
/*border: 3px solid blue;*/

  box-sizing: border-box;
}

.div2 {
  width: 100%;
  height: 500px;  
  position: absolute;
padding-top: 40px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px dashed blue;*/

  box-sizing: border-box;
}

.div3 {
  width: 100%;
  height: 150px;  
/* position: absolute;  Relative is beter want dan begint de volgende Div4 onder de vorige div*/
 position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/* margin left werkt niet met een extra ingesloten div */
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid green;*/

  box-sizing: border-box;
}

.div4 {
  width: 100%;
/* was height 500px terug gebracht naar 200px , maakt niet bovenkamt blijft op een te hoge plek*/
  height: 500px;  
/* position: absolute;  Relative is beter want dan begint de volgende Div4 onder de vorige div*/
margin-top:0px;
margin:bottom:0px;
margin-left:0px;
margin-right:0px; 
 position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/* margin left werkt niet met een extra ingesloten div */
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px dashed green;*/

  box-sizing: border-box;
 overflow: hidden; 
/* met overflow hidden verdwijnt de grijze lijn, maar het scrollen blijft bij frame in div4 */
/* Uiteindelijk het scrollen van de insert frame file kunnen weghalen door ind ebody van file no scroll en oveflow hidden aan te geven*/
}

.div5 {
  width: 100%;
  height: 500px;
  position: absolute;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px dashed blue;*/

  box-sizing: border-box;
}

.div-bot {
 width: 250px;
  height: 400px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px solid red;*/

  display: table-cell;
  vertical-align:bottom;
 }

/*De oveflow hier zetten om deze div te als anchor te gebuiken om te scrollen*/
/* ondanks twijfels werkt deze div-top wel, je moet echter goed afrgelen met */
/* bovenliggende Div */
.div-top {
margin: 0;
padding: 0;
  vertical-align:top;
  display: table-cell;
 width: 250px;
  height: 400px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px solid red;*/


overflow-y: auto;
overflow-x:hidden;
 }



/* IMG - - Het regelen van de IMG, omdat hun al te vrije plek bepalend is voor de layout */
/* Img 1 for hoofd menu pictures*/
.img1 {
/*  width: 100%; */
/*height: 220px; */
/* de images zijn in werkelijkheid 47mm breedt en hebben een verhouding van 2-3*/
/* Photoshop controle 300px x 199px  en 53 x 35 mm en op een 100% pagina 72 mm breedt. DUS de grootte bij 100% scherm  LIGT NIET AAN IMG-size */
/*uitproberen En dat helpt De kolom past zich aan de kleinere pixels, maar bij width 300 nog steeds 62mm*/
/*width: 300px;*/
/*height: 200px;*/
/*uitproberen En dat helpt maar gaat niet gradueel , bij width 150 nog steeds 33mm*/
/*uitproberen En dat helpt maar gaat niet gradueel , bij width 180 nog steeds 39mm*/
/*uitproberen En dat helpt maar gaat niet gradueel , bij width 210 nog steeds 46mm*/
/*uitproberen En dat helpt maar gaat niet gradueel , bij width 210 nog steeds 46mm, En ook in het frame programma bij 100% screen 46mm. Dus dat lijkt iets te worden*/
/* kan ik hiermee de toitae screen px uitvinden? */
width: 210px;
height: 140px;

/* text-align:center;  werkt niet ondta de tekst niet in de img box zit */
/* de position relative zet het plaatje op de plaak relative op de positie die je hebt aangegeven */
  position: relative;

padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px dashed orange;*/

  box-sizing: border-box;
}
/* Img 2 for SOLO pictures*/
.img2 {
height: 370px;
width: 555px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px solid orange;*/

  box-sizing: border-box;
}
/* Img0l for start-SOLO pictures hoog en smal*/
.img0l {
height: 372px;
width: 248px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid orange;*/

  box-sizing: border-box;
}

/* Img1l for thumb-doel SOLO pictures hoog en smal*/
.img1l {
height: 560px;
width: 420px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid orange;*/

  box-sizing: border-box;
}

/* Img2l for menu plaatjes pictures hoog en smal*/
.img2l {
height: 130px;
width: 87px;

margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid orange;*/

  box-sizing: border-box;
}

/* Img2n for menu plaatjes pictures normaal*/
.img2n {
height: 130px;
width: 195px;

margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid orange;*/

border:0px;
outline:none;
  box-sizing: border-box;
}

/* Img3l for thumb SOLO pictures hoog en smal*/
.img3l {
height: 80px;
width: 60px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid orange;*/

  box-sizing: border-box;
}
/* Img 3 for thumb-nails*/
.img3 {
height: 60px;
width: 90px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px dashed orange;*/

  box-sizing: border-box;
}

/* Img 4 for SOLO uitvergroot type 0-pictures*/
.img4 {
height: 450px;
width: 675px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px solid orange;*/

  box-sizing: border-box;
}

.img4l {

height: 450px; 
width: 300px; 
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px solid orange;*/

  box-sizing: border-box;
}


.img6l {
height: 675px;
width: 450px;
margin: 0;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px solid orange;*/

  box-sizing: border-box;
}


.img5 {
width: 375px;
height: 250px;
margin: 0px;
position: relative;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px solid orange;*/

  box-sizing: border-box;
}


/* KOL1 - - Omdat het regelen van de img niet voldoende duidlijkheid geeft ook alle kolommen maar eens van een ran voorzien om hun al te vrije plek te bepalen voor de layout */
/* Wow dat maakt veel duidelijk, de eerste kolom heeft een goigantische breedte */

.kol1 {
width: 1%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px dashed purple;*/

  box-sizing: border-box;
}
.kol3 {
width: 3%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px solid purple;*/

  box-sizing: border-box;
}
.kol4 {
width: 4%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 2px solid purple;*/

  box-sizing: border-box;
}
.kol5 {
width: 5%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 2px dashed purple;*/

  box-sizing: border-box;
}
.kol6 {
width: 6%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px solid purple;*/

  box-sizing: border-box;
}
.kol10 {
width: 10%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 1px dashed purple;*/

  box-sizing: border-box;
}

.kol13 {
width: 13%;
height: 20%;
/*  position: relative; werkt niet als opvolgende*/
/*  position: absolute; werkt ook niet als opvolgend */
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px solid purple;*/

  box-sizing: border-box;
}


.kol14 {
width: 14%;
height: 20%;
/*  position: relative; */
  position: relative;

text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 6px dashed purple;*/

  box-sizing: border-box;
}


.kol23 {
width: 23%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 4px dashed purple;*/

  box-sizing: border-box;
}

.kol24 {
width: 24%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 5px solid purple;*/

  box-sizing: border-box;
}

/* Nieuwe kolommen gemaakt om een kleinere plaatjes  regel te maken */
.kol28 {
width: 28%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 6px solid purple;*/

  box-sizing: border-box;
}

.kol40 {
width: 40%;
height: 20%;
  position: relative;
text-align: center;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 6px solid purple;*/

  box-sizing: border-box;
}


/* Iframes */
.iframe-Hoofdmenu {
width: 100vw;
height: 70px;
 overflow: hidden; 
}
.iframe-Plaatjesmenu {
width: 100%;
height: 250px;
 overflow: hidden; 
}

.iframe-Plaatjesmenu-2 {
width: 100vw;
height: 250px;
 overflow: hidden; 
}
/* FONTS */
/* If the font name is more than one word, it must be in quotation marks, like: "Times New Roman" anders zonder blank en separate bij komma*/
/* Font families met meer namen het beste tussen quotes, het beste is iedere familie tussen quotes te zetten, of dat waar is weet ik niet komt van lyra.nu */
/* margin bottom en top zijn erg belangrijk voor de onder en bovenruimte in de regel */
/* margin bottom en top zijn erg belangrijk voor de onder en bovenruimte in de regel */
/*  b-tag bolt, i-tag cursief  */
/* H1 heeft prioriteit boven H8 */
/* H eading fonts */

/* --   In de .p styles staat font-family: "Verdana, sans-serif", De apaostrofe moet hier niet, die is alleen om een meer woord font aan elkaar te houden, dus hier nu font-family: Verdana, sans-serif; 
Ook he ik meer kezues ghemaakt in geval dat een font niet beschikbaar is
  -- */

.p1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 12pt; align-items:center;word-spacing:0.8 }
.p2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:2pt;   line-height: 2pt;margin-top: 0; }
.p3 {  font-family: Verdana, Arial, Helvetica, sans-serif; monospace; }
.p4 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:6pt;  margin-top: 0.3mm; margin-bottom: 0.3mm;  line-height: 6pt; align-items:center;word-spacing:0.2;}
.p6 {  font-family: "Verdana, sans-serif"; font-size:7pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}
/* 2026-03-18 ont-size:8pt gewijzigd in font-size:7pt*/

/* volgende werkt op computer maar niet op het web, class gebruiken, dus nu een -  . - ervoor gezet*/

.P6b {font-family: "Verdana,  sans-serif"; font-weight:bold; font-size:7pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}

/* volgende werkt op computer maar niet op het web, class gebruiken*/
.P6bn {font-family: "Verdana,  sans-serif"; visibility: hidden;font-weight:bold; font-size:7pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}

/*-- Ik wil iets aan de extra line spacing in P doen die normal een extra regel is. Kan met BR-tag Is geloof ik ook niet waar Je lost dit op met Span-tag--*/


.p7 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:7pt; padding:0; margin-top: 0; margin-bottom: 1mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}
.p10 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}
.p11 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}



/* P paragraph fonts starten altijd met een blanko letter */
/* --   In P werkt het font niet hetzelfde als in H, het lijkt een ander font Toevoegen style="font-family : Avenir Black ;" helpt niet  -- */

P {   font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; text-decoration: none; line-spacing: none; }
P1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; text-decoration: none; line-spacing: none; writing-mode: tb-rl; } 
/*-- P1 deze kkeert de tekst CC 90 graden  -- */
P2 {  font-family: Verdana, Arial, Helvetica, sans-serif; text-orientation: upright;font-size:12pt;  margin-top: 0.8mm; margin-bottom: 0.8mm;  line-height: 12pt; align-items:center;word-spacing:0.8;}
P5 {  font-family: Verdana, Arial, Helvetica, sans-serif; text-orientation: upright; font-size:8pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}
/* -- Uit Lyra.nu Deze P doet het wel, het ligt hem dus aan font size :16px ipv font-size:10pt Nee dat is het niet Er lijken gewoon niet meer font sizes te zijn -- */
/* -- Om problemen met fonts die ineens serif zijn op te vangen, specificeer meer vergelijkenden fonts zolas Verdane, Arial, Helvetica-- */
/* -- wanneer je geen style= doet dan mag font-family niet apostrofe, zie P6, dat was waarschijnlijk de reden waarom er op somige browsers ineens wel serif kwam -- */
P6 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}


/* 2024-10-19 ik heb voor de functie urlTrigger() een no print nodig zoalng ik het probleem niety opogelost hebb dat de id niet werkt maar wel in P-tag */



H1 {   font-family: "Verdana, sans-serif"; font-size:18pt; }
H2 {   font-family: "Verdana, sans-serif"; font-size:14pt; margin-top: 1mm;  text-align:left; }
H3 {  font-family: "Verdana, sans-serif"; font-size:12pt;  text-align:left;}
H5 {  font-family: "Verdana, sans-serif"; font-size:10pt; margin-top: 1mm; margin-bottom: 1mm;   line-height: 10pt; text-align:left;word-spacing:0.5;}
H6 {  font-family: "Verdana, sans-serif"; font-size:8pt;  margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; align-items:center;word-spacing:0.5; }
/* H6 geeft toch een 'schreef'. Waarom? */

H7 {  font-family: "Verdana, sans-serif"; font-size:8pt; color:#000000; margin-top: 0.5mm; margin-bottom: 0.5mm;  line-height: 7pt; text-align:right;word-spacing:0.5;}
H8 {   font-family: "Verdana, sans-serif"; font-size:10pt; color:#FF0000; margin-top: 0mm; margin-bottom: 1mm; line-height: 7pt; text-align:right;word-spacing:0.5;}

/*  thin-finger-up-24.png niet mooi maar wel beter, minder dominant  */
/* hand.icons9.jpg andere poging is ook nog te dik */
/* hand-wit-cursor-32.png is erg dik */
/* A link fonts */
A {font-family: "Verdana, sans-serif"; font-size:10pt;  
color:#000000; 
text-decoration: none; 
margin-top: 0.5mm; 
margin-bottom: 0.5mm;   
line-height: 7pt; 
text-align:center;
word-spacing:0.5;
cursor: url(thin-finger-up-24.png)  , default;
filter: invert(0);
/* LET OP hij  doet het nu niet bij de auteursrecht pop-up */
/* Dit heel belangrijk om ook hier een cursor te maken, zodat ook het A gebied een cursor staat */
/* hier het handje - pointer - en verder een pijltje */
}



/* Zonder werkt het me @media niet 8/
/*@media print { */
/* moet nog wel wat padding aanbrengen want alles verschuift een beetje */
  .no-print {
    visibility: hidden;
width: 1px;
height: 1px;
padding-top: 0px;
padding-right: 0px;
padding-bottom; 0px;
padding-left: 0px;
margin: 0;
/*WEER AANZETTEN BIJ TEST-GEBRUIK*/
/*border: 3px dashed green;*/

  }
/*} */


/*CURSORS*/

.cursor>img:hover { border:0.2px solid LightGrey; cursor: url(red-cursor-16.png), auto;
filter:invert(0); }
.arrow-32 { cursor: url(pijl-wit-cursor-32), auto; filter:invert(0); }
.hand-32 { cursor: url(hand-wit-cursor-32), auto;filter:invert(0); }

/* BEGIN Alle benodigde css-scripts voor de heading */ /*auteursrechten -pop-up */
/*  Popup container - can be anything you want*/
.popup {
  position: relative;
  display: inline-block;
cursor: url(red-cursor-16.png), auto;
/*  cursor: pointer;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden; height: 25px;
  width: 600px;
  background-color: #555;
  color: #fff;
/* met line-height krijg je ook de eerste regel meer naar boven */
   line-height: 0.6;
  text-align: center;
  border-radius: 6px;
  padding: 0px;
  position: absolute;
  z-index: 1;

/* The z-index is a CSS property to determine which element to overlay and which element to be in the background. The idea is to imagine a z-axis perpendicular to the screen. The higher the z-index of an element, the element will be shown nearer to the one viewing the page, thus overlaying the other elements with a lower z-index.*/ 


  bottom: 85%;
/* bottom is hoe laag het pop up venster komt boven mijn teken */
  left: 50%;
  margin-left: 0px;
<!-- Margin left van -80 naar -180 schuift het venster meer naar links-->
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/* EINDE Alle benodigde css-scripts voor */
/*Popup voor auteursrechten in heading menus*/

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/* Einde Alle benodigde css-scripts voor de heading */ /*auteursrechten -pop-up*/



/* == Begin Caption of Modal Image style instructies == */

#myImg {
/* width: 210px;*//* in m3w-vp.css eruit gehaald en doet het ook */
/*height: 140px;*/
/*padding-top: 0px;*/
/*padding-right: 0px;*/
/*padding-bottom; 0px;*/
/*padding-left: 0px;*/
 

 border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}


/* The Modal (background) */
/*  2026-03-26 de  class .modal bepaalt het hele opgevulde frame vlak */
/* Nee niet helemaal correct zie verandering in width */ 
/* Wel correct want ook het rode kruisje gaat naar binnen */ 

/* = = custombody = = experimenteren met ene extra class om de grootte van het modal vast te leggen */
/* Dan gebeuren er rare dingen, het plaatje komt dus duidelijk in het frame, maar de opacity is weg en het plaatje is nog steeds teveel naar boven*/ 
.custom-body{
  width: 1200px;       /* fixed width */
  max-width: 90vw;    /* responsive cap */
  height: 100px;      /* was 100px fixed height */
  max-height: 150vh;   /* responsive cap */
  /* overflow: auto;  */   /* enable scrolling if content overflows */

/*  height: 100px;    veranderen doet hier niets */
/* kleiner maken van de max-height heeft tot effect dat je steeds meer thumbnails ziet */
/* door het groter maken van maxheight dek je steeds meer vand e achterliggende pplaatjes af */

overflow: hidden;

  padding: 1rem;
}


/* = = = MODAL = = =*/
.modal {



/* 2026-03-27 Het mooiste zou zijn wanneer het plaatje altijd centraal in het scherm staat */ 

/* 2026-03-27 Zie www.w3schools.com - css - css3_image_center.asp */
  margin-left:10px; /* 2026-03-27 deze margin is voor alle schermen ene gelijke afstand vanaf links */
/* 2026-03-26 Toegevoegd om de opgeroepen grote plaatjes meer naar rechts te krijgen, eerst 10px gebruikt maar om verschillende schermen hetzlefde te houden verandert in 10%, Beter maar . . */
/* 2026-03-26 LET OP met % is het kruisje weg */

/* 2026-03-27 modal zou zijn eigen scroll bar parameters moeten hebben */
/* 2026-03-27 Voornamelijk dikker */ 
/* maar werkt hier niet omdat de scroll bar niet in d emodal zit maar in het Iframe dus class syle scroll voor i-frame maken */ 

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top - -  Wat doet dit?*/
/* 2026-03-27- The z-index is a CSS property to determine which element to overlay and which element to be in the background. The idea is to imagine a z-axis perpendicular to the screen. The higher the z-index of an element, the element will be shown nearer to the one viewing the page, thus overlaying the other elements with a lower z-index.*/ 
/* Hier dus komt de .modal class over het kruisje heen */

/* 2026-03-27 toegevpoegd uit W3docs "How to Position One Image on Top " */ 
/* position: absolute; top: 0px;*/

/* werkt ook niet */ 

  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0; /* was 0 */
  width: 99vw; /* 2026-03-29 - - 99vw - - omdat er anders een overflow-x ontsatt vanwege de y-scroll bar  */

/* 2026-03-27 naar 80 gebracht*/
/* 2026-03-27 width 80 maakt dat het plaatje rechts wordt afgesneden */
/* 2026-03-27 dus modal gaat over het plaatje, maar niet over de ruimte */
/* 2026-03-27 NEE wel over de ruimte maar het plaatje past er niet meer in en overfowed in de niet bestaande ruimte */

  height: 1500px; 
/* 2026-03-29 full hight moet hetzelde zijn of meer als de height van het frame of de hoogte van de html page waar dit modal wordt opgeroepen */

/* Full height 100%, 80% geeft meer uimte en het plaatje bij Rian komnt nu meer gelijk aan mijn laptop*/
/* 2026-03-27 - - OPGELET - - : wat er gebeurt is dat de feitelijk marge left bij beiden gelijk is maar dat het plaatje dus op de één meer links lijkt dat de ander */

background-color: rgba(255,255,255,1); /* White 1 = opacity */


  overflow-x: hidden; /* maar doet hier niets */
/* visible = No horizontal scroll, maar je ziet buiten het kader wel de overloop  */

  overflow-y: scroll; 
*/scroll; = always scroll bar vertical, maar werkt HIER niet */
*/auto; = Enable scroll vertical if needed */

/* Je zou specifiek in Modal de scrolbar dikker willen hebben */

/* volgende werkt niet goed omdat soms de scrollbar verdwijnt en dat moet niet */
/* -ms-overflow-style: none; */ /* IE and Edge */ 
/*  scrollbar-width: none; */ /* Firefox */ 
}



/* height van 100% naar 100vh gebracht */
/* padding-top: 100px , gebracht naar 50px om het plaatje omhoog te krijgen. Dat werkt, naar 20 gebracht */
 

/* Model img */

/* . SLIDESHOW */

.slideshow
{
margin:auto; /* om te centreren */

 position: absolute;
/* 2026-03-27 GELUKT = = = YES DAT is het bij top:5px; right:50%;  position: absolute; staan, het is deze combintie die d eplaatjes naar boven krijgt */

/* 2026-03-27  Blijft nog een probleem over : dat de scroll ook boven moet beginnen */ 

/* 2026-03-27 en plaatjes lijken left-align te staan en dat moet center zijn */


/* 2026-03-27 ingevoerd na lezen van Create Responsive modl images with css */ 
top:5px; right:30%; /* DUS TOCH in image = .slideshow */

align:left;

/*  2026-03-27 Ik weet niet waarom maar eindelijk staat het plaatje nier meer centraal maar boven als het Frame ook boven is Ik heb in F2 alle modal-content weggehaald */
/* En nEE dat is nog steess centraal maar ik keek alleen de F2 file en dan is er gene opacity en lijken d eplaatjes hoog te staan, maar dat komt door de Iframe instelling van F2 === Dus leerzaam */


/*  2026-03-27 En ook voor de onderste plaatjes */

/* 2026-03-27  LET OP alleen is nu de opacity 1 weer verdwenen */ 
 
/* margin-left: 150px;*/ /* was 650px prebeer plaate groter te krijgen */

/* 2026-03-27 door margin van 350 naar 150 te brengen krijgt het plaatje links minder ruimte */
/* Hier allen verander je de marge van het plaatje zoals je dat ziet op het scherm */
/* Dus slideshow is bepalend voor wat je ziet */

/* margin-right: 350px; */ /* hier verander je niets */
/* margin-bottom: 500px; */ 

/*  2026-03-27 volgens www.w3schools - com - css - css3_image_center.asp moet je bij block altijd margin auto gebruiken */
/*  2026-03-27 ja dat werkt maar nu centreert hij over het hele scherm en niet in de top */

/* display: block; */ /* 2026-03-27center-top; ipv *block; geprobeerd maar img niet naar top, Dat top probleem is boven opgelost * /
  /* max-width:1000px; */ /* 2026-03-27 dit is belangrijk om het oplaatje in ratio te houden en toch recchts meer ruimte te krijgen */

 
  max-height:700px; /* 2026-03-27 en dus alleen hier mee af te regelen */ /* dit werkt alleen per laptop andere plaatsing */
  width: auto;
  height: auto;

/* werkt niet  object-fit: none; object-position: center top;  2026-03-27 toegevoegd om top centreren mogelijk te maken */


 /*   height:800px; */ /* Hier ontbrakk een ;  was 60px prebeer plaatje groter te krijgen */
 /*    width:auto; */ /*maintain aspect ratio*/
  /*  max-width:1000px; */ 
}


/* = = =Modal-Content (image-txt) = = = */
/* dit is de class waar het grote plaatje naar verwijst */
/* NEE === Waar de mogelijke tekst naar verwijst, Dit kan mogelijk ook weg verwarrend */
/* vandaar dat niets hier werkt */
.modal-content {

/* 2026-03-27 ingevoerd na lezen van Create Responsive modl images with css . . . */
/* top:5px; right:50%; werkt ook niet */

/*  float:top; werkt niet  */

 /* style="object-fit: none; object-position: center top;" */

 padding-top: 0px; 
 margin-left: 350px; /* was 350px hiermee verander je de marge van het plaatje niet */
 
margin-right: 350px; /* was 350px Hier verander je niets */
 margin-bottom: 320px;
 padding-bottom: 200px;
 width: 100%; /* hier verandert niets */
 max-width: 1600px; /* waarschijnlijk onzin hier */
 max-height: 1200px; /* waarschijnlijk onzin hier */
/* 1600 x 1200 is de verhouding van plaatje H */

}


/* = = = Caption of Modal Image = = = */
/* a caption : A title, short explanation, or description accompanying an illustration or a photograph. */

/* deze #caption wordt gebruikt in .model-content , #caption hieronder  */
#caption {

  margin: auto;
  /* display: block;*/
  width: 80%;    /* was 80% , hier verandert niets*/
  max-width: 700px;
  text-align: center;
  color: #ccc; /* grey */
  padding: 10px 0;
  height: 10px;
}


/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;

/* was top:85px; */
/*  top:400px; zodat het rode KRUISJE ook te zien is bij een down-scrolled page */

  top: 85px; 
/* de plaatjes zijn nu 700px groot */
/* was 400 wanneeer deze 5 is en wel boven staat moet dat ook voor slideshow zo zijn. EN JA DAT IS ZO maar heeft die ook position:absolute ? */
 
 right: 35px;
  color: #ff0000; 

/* 2026-03-26  #f1f1f1 color description : Very light gray.  In a RGB color space, hex #f1f1f1 is composed of 94.5% red, 94.5% green and 94.5% blue.  */
/* 2026-03-26 #ff0000 color description : Pure (or mostly pure) red */

  font-size: 60px; /* was 40px dus kruisje groter gemaakt */
  font-weight: bold;
  transition: 0.3s;
}


.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* == End Caption of Modal Image == */