/* 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(210,210,210) rgb(255,255,255) !important;
  scrollbar-width: thin !important;
filter: invert(0);
/* Hier de cursor anders zetten heeftr gene zin en verandert niets */

}

/*  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: 65%;
/* width: 1274px; */
/* 2026-02-28 : Width verandert in 65% om het geheel van een plaatjes seire meer centraal te krijgen */
/* 2026-02-28 : Maar dat verandert dan weer ook alle anderen, die dan maar aanpassen */


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(210,210,210) rgb(255,255,255) !important;
  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, 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;}
.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;}
.p11 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11pt; padding:0; margin-top: 0; margin-bottom: 1mm;  line-height: 7pt; align-items:center;word-spacing:0.5;}

.p24 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:24pt;  margin-top: 1mm; margin-bottom: 1mm;  line-height: 24pt; align-items:center;word-spacing:2;}


/* 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;}

/* 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;}

.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;}

.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 --*/

/* 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;
  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;
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 bebaalt het hele opgevulde frame vlak */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top - -  Wat doet dit?*/
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /* background-color: rgb(0,0,0); wit is standaard */ /* Fallback color */
 background-color: rgba(255,255,255,1); /* White w/ opacity */

}
/* 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 ratio vasthouden */
.slideshow
/* Hier allen verander je de marge van het plaatje zoals je dat ziet op het scherm */
/* Dus slideshow is bepalend voor wat je ziet */


{
overflow: hidden; 
margin: 0 auto;

    max-height:950px;
    width:auto;   /*maintain aspect ratio*/
    max-width:1400px;
/* Ben nog op zoek hoe ik altijd bovenaan begin als ik met ene scrollend Iframe werk */
/* z-index: 1; */ /* Sit on top - -  Wat doet dit?*/

}




/* Modal Content (image) */
.modal-content {
/* 2026-02-27 padding-top 0px toegevoegd in de hoop dat plaatje omhoog gaat, werkte niet */
 padding-top: 0px; 
 margin-left: 350px;
 margin-right: 350px;
margin-bottom: 320px;
/* 2026-03-01 ik probeer het plaatje op dezelfde plek te krijgen als een print in firefox */
/* lET OP ALLEEN VOOR het H- plaatjes is H:600 W:800 in photoshop */
/* padding right 0 is dan niet genoeg, Je moet margin gebruiken en geen padding  */
/* of dat de total width niet goed is, want eerder had het kruisje geen probleem met het plaatje */ 
/* 2026-03-01 WAAROM IS HET WEB PLAATJE MINDER SCHERM DAN DE FIREFOX AFDRUK */ 
/* LET OP met deze margins gaat het hele plaatje ind emargin zitten en creer dus niet een frame waar 
het plaatje in eigen vorm in geplaatst moet worden*/

 padding-bottom: 200px;
/* misschien vervormt die margin-bottom 300px het plaatje teveel, anders plaatje iets kleiner maken. Op het eerste gezicht lijkt het te kunnen*/
/* Jammer genoeg maakt die margin-bottom niet uit tegen het vervormen */
/* margin: auto;*/
/* De margin verandert wel de plek van het plaatje, dus geen top, maar wel center */
/* margin left en right en top en under ook aangeven */
/*  display: block; */
/* 2026-03-01 display block weggehaald omdat ik niet zie wat het doet */
  width: 100%; 
max-width: 1600px;
max-height: 1200px;
/* 1600 x 1200 is de verhouding van plaatje H */
/* mmax height togevoegd om het plaatje in het scherm te houden en te kijken of ik vervorming kan tegen gaan, misschien alle plaatjes in die verhouding aanbrengen */

/*  max-width: 1400px; */
/* 2026-03-01-  WOW hier zit de fout van de vervorming weghalen en geen vervorming meer */
}

/* Hierboven Max-width naar 1400 gebracht, Dat werkt met vergtoten van de picture, alleen komt een deel eronder, behalve met full screen F11 */

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

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;/* grey */
  padding: 10px 0;
  height: 10px;
}

<!-- hierboven height terug gebracht van 150px naar 10px, doe niet veel -->

/* 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;
  top: 400px;
  right: 35px;
  color: #ff0000;
  font-size: 60px;
  font-weight: bold;
  transition: 0.3s;
}

<!-- close button top 15 px verandert in 5 px om te kijken of het plaatje dan omhoog komt. Er gebeurt niet veel. De plek van de X-button schuift omhoog of omlaag, dat is het, met 75px is het eigenlijk mooier, dat blijft met scrollen ook beter zichtbaar. En belangrijker de hele picture komt nu in beeld -->

.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 == */


/* == toegevoegd 2026-04-22 == */
/* Om de gebruiker te dwingen landscape te bekijken :
uit : https:--code-boxx.com-lock-screen-orientation-
*/

/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (orientation:portrait) 

{
  #turn { display:block; }

  #container { display:none; }
}
 
/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */

@media only screen and (orientation:landscape) 
{
  #turn { display:none; }
  #container { display:block; }
}

/* == End portrait test - 2026-04-22 == */