/* CSS Document */ /* van de site MM.COM - stijlMM-mobile -- */ /* EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM. */ @media screen and (max-width:700px) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: yellow; border: 1px solid black; } } @media screen and (min-width: 701px) and (max-width: 850px) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: red; border: 1px solid black; } } @media screen and (min-width: 850px) and (max-width: 1000px ) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: green; border: 1px solid black; } } @media screen and (min-width: 1001px) and (max-width: 1200px ) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: blue; border: 1px solid black; } } @media screen and (min-width: 1201px) and (max-width: 1400px ) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: yellow; border: 1px solid black; } } @media screen and (min-width: 1401px) and (max-width: 1700px ) { .PIXELaanwijzer { width: 100%; height: 20px; margin: 0 0 5px 0 ; background-color: green; border: 1px solid black; } } body { font-family: "optima", sans serif; background-color: #ededed; } .SITE { display: flex; width: 100%; max-width: 1200px; height: max-content; margin: auto; background-color: #FFFDF6; color: #FFF; z-index: 0 ; flex-wrap: wrap; } .SITEdetails{ display: flex; flex-direction: row; justify-content: flex-start; align-items: left; ali===gn-con==tent: center; width: 100%; height: auto; background-color: #333; padding: 0 0 100%; 0;} .PIJLterug { width: 50px; height: auto; top: 0px; text-align: left; } .SITEwit { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 50%; max-width: 40rem; height: max-content; margin: 0 auto; background-color: #FFFDF6; padding-left: max(3rem); } /* A A A A A A A A A A A A A - DIT IS VOOR ALLE ARCHIEF-TXT - PAGINAS */ .contARCHtxt { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; border-bottom: 1px solid #0F3; } .ARCHkop { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: 1.875rem; font-size: 0.875rem; background-color: #CCC; margin: auto; } .ARCHid { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHjaar { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHtitelNL { display: flex; flex:10; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHtekstNL { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHafb { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHmateriaal { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHondergrond{ display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHcatNR { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHkodeNieuw { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHdocNR { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHmapNR { display: flex; flex: 1; width: max-content; padding: 5px; font-size: 0.875rem; line-height: 1.125rem; color: #333; border-bottom: 1px solid #CCC; } .ARCHafbFIT { object-fit: contain; width: 80%; max-height: 6.25rem; padding: 5px; flex-wrap: wrap; margin: auto; border: 1px solid #CCC; } /* ------- Voor de archiefpagina DOCUMENTEN -------- */ .ARCHdocsCONT { display: flex; flex-direction: row; width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; background-color: #FFFDF6; margin: 0.625rem; } .ARCHdocTXT { display: flex; flex: 5; height: max-content; background-color: #FFFDF6; padding: 0.625rem; } .ARCHdocIMG { display: flex; flex: 1; height: max-content; background-color: #FFFDF6; } /* ------- Voor de archiefpagina FOTO -------- */ .ARCHfotoKOP { display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; width: 100%; height: 1.875rem; font-size: 0.875rem; background-color: #CCC; margin: auto; } .ARCHfotoID { display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoJAAR { display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoTXT { display: flex; flex:14; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoCATnr { display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoIMG { display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoNR { display: flex; flex: 1; width: max-content; padding: 5px; border-bottom: 1px solid #CCC; } .ARCHfotoFIT2 { object-fit: contain; width: 70px; height: max-content; flex-wrap: wrap; margin: auto; } /* A A A A A A A A -------- AGENDA ---------------------*/ .contAGENDAoud { display: flex; flex-direction: row; justify-content: flex-start; align-content: center; width: 95%; height: max-content; font-size: 0.875rem; flex-wrap: wrap; background-color: #FFC; margin: auto; } .agendaTXToud { width: 100%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; } .contAGENDA { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 95%; height: max-content; font-size: 0.875rem; flex-wrap: wrap; background-color: #FFF; margin: auto; } .agendaTXTenIMG{ display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 18.75rem; height: max-content; font-size: 0.875rem; background-color: #FFC; margin: auto; flex-wrap: wrap; background-color: #FFF; border: 1px solid black; margin: 0.625rem; border-radius: 5px; } .agendaTITEL { width: 18.75rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.5rem; font-weight: bold; color: #666; padding: 0.625rem; } .agendaTXT { display: flex; width: 18.75rem; height: 12.5rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: center; color: #000; overflow: hidden; padding: 5px; flex-wrap: wrap; margin: auto; } .agendaIMG { display: flex; width: 18.75rem; height: 12.5rem; border-radius: 5px; flex-wrap: wrap; margin: auto; } .agendaIMGfit { object-fit: contain; width: 80%; height: max-content; padding: 5px; flex-wrap: wrap; border-radius: 5px; margin: auto; } .agendaJAAR { width: 12.5rem; height: 0.625rem; padding: 5px; flex-wrap: wrap; text-align: left; } /* A A A A A A A A ----------- A HREF INSTELLINGEN ---------*/ a { font-size: 1.125rem; line-height: 1.25rem; color: #333; text-decoration: none; } a.href { font-size: 1.125em; line-height: 1.25rem; color: #000; text-decoration: none; } a.active { font-size: 1.125rem; line-height: 1.25rem; color: blue; text-decoration: none; } a.archief { font-size: 1.125rem; line-height: 1.25rem; color: #fff; text-decoration: none; } a.home { font-size: 0.875rem; line-height: 1rem; color: #000; text-decoration: none; text-align: left; } /* a:hover { font-size: 1.125rem; line-height: 1.5rem; color: #ededed; text-decoration: none; } */ a:hoverARCHIEF { font-size: 0.875rem; line-height: 1rem; color: #333; text-decoration: none; } a.fontsizeh1 { font-size: 1.125rem; font-weight: bold; line-height: 1.25rem; text-decoration: underline; } a.font18 { font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; text-decoration: none; } a.font48 { font-size: 3rem; font-weight: normal; line-height: 1.75rem; text-decoration: none; } a.index { font-size: 0.875rem; text-decoration: none; color: #999 ; } a.KOPregel2 { font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #666; } a.left { font-size: 1.125rem; text-align: left; font-weight: normal; line-height: 1.5rem; color: #666; } a.left24 { font-size: 1.5rem; text-align: left; font-weight: normal; line-height: 1.5rem; color: #666; } a.leftMENU { font-size: 1.5rem; text-align: left; font-weight: normal; line-height: 1.25rem; color: #FFF; } a.links { font-size: 1.25rem; line-height: 1.75rem; color: #999; text-decoration: none; } a.link { font-size: 0.875rem; line-height: 1rem; color: #000; text-decoration: none; } a:link18 { font-size: 1.125rem; line-height: 1rem; color: #000; text-decoration: none; } a.mail { font-size: 0.875rem; font-weight: normal; line-height: 0.75rem; color: #666; } a.menu { font-size: 0.875rem; color: #000; text-decoration: none; line-height:1rem; } a.nieuws { font-size: 1.25rem; line-height: 1.75rem; color: #999; text-decoration: none; } a.selMENU { font-size: 0.75rem; font-weight: normal; line-height: 0.75rem; color: #333; } a.wit { font-size: 0.875rem; font-weight: normal; line-height: 0.75rem; color: #FFF; } a.witTXT { font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; height: auto; color: #FFF; } a.groot { font-size: 1.5rem; font-weight: normal; line-height: 2.3rem; height: auto; color: #000; } /* D D D D D D D ------------- DETAILS ------------ */ .DETAILS { display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; width: 100%; height: 100%; flex-wrap: wrap; margin: auto; background-color: #333; } .detailsIMGenTXT { display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100%; flex-wrap: wrap; margin: auto; margin-left: 3.75rem; } .detailsIMG { display: flex; width: 50%; height: auto; margin: auto; padding: 0.625rem; } */ .detailsTXT { text-align: left; width: 60%; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; color: #FFF; margin: auto; padding: 0.625rem; border: 1px dotted white; } .detailsTXTwit { text-align: left; width: 60%; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; color: #FFF; margin: auto; padding: 0.625rem; } .detailsIMGfit { object-fit: contain; width: 100%; flex-wrap: wrap; margin: auto; } .TXTdetails { width: 100%; font-size: 0.875rem; font-weight: normal; line-height: 1.5rem; color: #FFF; } /* F F F F F F F F F F F F --------------------------*/ /* float tekst om een plaatje een VOOR DE PAGINA HOMMAGE */ .floatIMGenCAP { display: inline-block; flex-direction: column; width: 15.625rem; height: max-content; margin: auto; flex-wrap: nowrap; } .floatIMG { text-align: center; width: 15.625rem; } .floatIMGfit { text-align: center; object-fit: contain; width: 15.625rem; height: auto; padding: 5px 0px 0px 0px; margin: auto; flex-wrap: nowrap; } .floatCAP { text-align: center; height: max-content; text-align: center; font-size: 0.875rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; flex-wrap: nowrap;} /* float tekst om een plaatje een VOOR DE PAGINA HOMMAGE */ .floatIMGenCAP-L { text-align: left; display: flex; flex-direction: column; width: 20.625rem; height: max-content; margin: auto; } .floatIMG-L { text-align: left; padding: 10 15px 0 0; } .floatIMGfit-L { object-fit: contain; width: 12.5rem; height: auto; padding: 0 10 0 0 ; } .floatCAP-L { height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5 0 5 0 ; } .floatIMGenCAP-L1 { text-align: left; display: flex; flex-direction: column; width: 18.75rem; height: max-content; padding: 5 5 5 5; } .floatIMG-L1 { text-align: left; padding: 10 5px 0 0; } .floatIMGfit-L1 { object-fit: contain; width: 18.75rem; height: auto; } .floatCAP-L1 { height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5 0 5 0 ; } .floatIMGenCAP-L2 { text-align: left; display: flex; flex-direction: row; justify-content: flex-start; width: 3.125rem; height: max-content; } .floatIMG-L2 { text-align: left; } .floatIMGfit-L2 { object-fit: contain; width: 3rem; height: auto; } .floatCAP-L2 { height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; } .floatIMGenCAP-C { text-align: center; display: flex; flex-direction: column; width: 12.5rem; height: max-content; margin: auto; } .floatIMG-C { text-align: center; padding: 5px 5px 5px 5px; } .floatIMGfit-C { object-fit: contain; width: 12.5rem; height: max-content; padding: 5px 0.625rem 0px 0px; } .floatCAP-C { height: max-content; text-align: left; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; } .floatIMGenCAP-C1 { display: flex; flex-direction: column; justify-content: center; align-items: center; display: inline-block; width: 15.625rem; height: auto; margin: auto; } .floatIMG-C1 { text-align: center; width: 15.625rem; } .floatIMGfit-C1 { object-fit: contain; width: 15.625rem; height: auto; padding: 5px 0px 0px 0px; margin: auto; } .floatCAP-C1 { height: max-content; text-align: center; font-size: 0.875rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; } .floatIMGenCAP-C2 { text-align: center; display: flex; flex-direction: column; width: 18.75rem; height: auto; margin: auto; } .floatIMG-C2 { text-align: center; width: 18.75rem; } .floatIMGfit-C2 { object-fit: contain; width: 18.75rem; height: auto; padding: 5px 0px 0px 0px; margin: auto; } .floatCAP-C2 { height: max-content; text-align: center; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 5px 0px; } .floatIMGenCAP-R { text-align: right; display: flex; flex-direction: column; width: 12.5rem; height: auto; } .floatIMG-R { text-align: right; padding: 0 10 0 5px; } .floatIMGfit-R { object-fit: contain; width: 12.5rem; height: auto; padding: 5px 0px 0px 0.625rem; } .floatCAP-R { height: max-content; text-align: left; font-size: 0.625rem; line-height: 0.75rem; font-style: italic; padding: 5px 0px 10px 0px; } .FOOTER { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: auto; flex-wrap: wrap; margin: auto; background-color: #bae2fc; } .footerItem1 { width: 100%; height: auto; font-size: 1.125rem; line-height: 1.5rem; color:#666; text-align: center; background-color: #bae2fc; flex-wrap: wrap; padding: 1.25rem; } /* ¨s - Kijk hieronder bij ZZZZZ ZOEKVENSTER ------------*/ /* h h h h h H H H -------- H elementen -----------------*/ .hr { color: #999; } h { font-size: 0.8rem; font-weight: normal; line-height: 1.1rem; } h-bold { font-size: 0.8rem; font-weight: bold; line-height: 1.1rem; } h1 { font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; } h1-bold { font-size: 1.1rem; font-weight: bold; line-height: 1.4rem; } h2 { font-size: 1.4rem; font-weight: bold; line-height: 1.5rem; } h3 { font-size: 2rem; font-weight: bold; line-height: 3rem; } /* ------ I I I I I I I I ------------IMAGE EN TEKST --------------- */ .contIMGenTXT { display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 12.4rem; height: auto; padding: 0.625rem; margin: 10px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; } .contTITEL { width: 12.5rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999; padding: 0 0 5px 0 ; } .contONDERtitel { width: 12.5rem; height: 3.125rem; font-size: 1rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px 0 0 0 ; } .contIMG { width: 12.5rem; height: 12.5rem; border-radius: 5px; text-align: center; padding: 0.625rem 0 0 0 ; margin: auto; } .contTXT { width: 9.375rem; height: 11.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; } .contIMGfit { object-fit: contain; width: 20rem; height: auto; border-radius: 5px; margin: auto; } @media screen and (max-width: 700px) { /* --------- FORMAAT voor de plaatjes - knoppen op de INDEX PAGINA - Pixelaanwijzer is yellow */ .contIMGenTXT1 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 90%; height: auto; padding: 10px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; flex-wrap: nowrap; margin: 10px; } .contTITEL1 { width: 10.625rem; height: 3rem; text-align: center; font-size: 1.5rem; font-style: normal; line-height: 1.6rem; color: #06F; padding: 10px 0px 10px 0px ; } .contONDERtitel1 { width: auto; height: 8.625rem; font-size: 1.2rem; line-height: 1.5rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; } .contIMG1 { width: 350px; height: auto; border-radius: 5px; text-align: center; } .contTXT1 { width: 10.625rem; height: 10.625rem; font-size: 0.5rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; padding: 5px; } .contIMGfit1 { object-fit: contain; width: 18rem; height: 18rem; border-radius: 5px; margin: auto; } } @media screen and (min-width: 701px) { /* --------- FORMAAT voor de plaatjes - knoppen op de INDEX PAGINA */ .contIMGenTXT1 { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 90%; height: 400px; padding: 10px; margin: 5px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; flex-wrap: nowrap; } .contTITEL1 { width: 10.625rem; height: max-contet; text-align: center; font-size: 1.5rem; font-style: normal; line-height: 1.6rem; color: #06F; padding: 10px 0px 10px 0px ; } .contONDERtitel1 { width: 10.625rem; height: 8.625rem; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; } .contIMG1 { width: 10.625rem; height: 10.625rem; border-radius: 5px; text-align: center; } .contTXT1 { width: 10.625rem; height: 10.625rem; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; text-align: left; color: #000; padding: 5px; } .contIMGfit1 { object-fit: contain; width: 10.625rem; height: 10.625rem; border-radius: 5px; margin: auto; } } /* ---------I I I I I I I I ------------IMAGE EN TEKST 2 --------------- test voor IMG Amsterdam Verdwijnd en ARCHfotopagina */ .contIMG2enTXT2 { display: flex; flex-direction: column; justify-content: space-evenly; align-content: center; width: max-content; height: 370px; padding: 5px; margin: auto; } .contTITEL2 { width: 12.5rem; height: max-content; text-align: left; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999; padding: 5px; } .contONDERtitel2 { width: 9.375rem; height: 11.875rem; font-size: 0.875rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; } .contIMG2 { width: auto; height: 21.25rem; margin: auto; border-radius: 5px; } .contTXT2 { width: 15.625rem; height: 12.5rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; } .contIMGfit2 { object-fit: cover; width: auto; height: 12.5rem; border-radius: 5px; margin: auto; } .contTXTfit2 { width: 12.5rem; height: 12.5rem; border-radius: 5px; margin: auto; overflow: hidden; } /* ------ I I I I I I I I ------------IMAGE EN TEKST 3 --------------- */ .contIMGenTXT3 { display: flex; flex-direction: column; justify-content: flex-start; align-content: center; width: 12.5rem; height: auto; padding: 0.625rem; margin: 10px; box-shadow: 5px 5px 5px #ededed; background-color: #fff9e6; } .contTITEL3 { width: 12.5rem; height: max-content; text-align: center; font-style: italic; font-size: 1.125rem; line-height: 1.125rem; font-weight: bold; color: #999; padding: 0 0 5px 0 ; } .contONDERtitel3 { width: 12.5rem; height: 3.125rem; font-size: 1rem; line-height: 1rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px 0 0 0 ; } .contIMG3 { width: 12.5rem; height: 12.5rem; border-radius: 5px; text-align: center; padding: 0.625rem 0 0 0 ; margin: auto; } .contTXT3 { width: 9.375rem; height: 11.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 5px; } .contIMGfit3 { object-fit: contain; max-width: 12.5rem; height: 12.5rem; border-radius: 5px; margin: auto; } /* ------ I I I I I I I I ------------IMAGE EN TEKST 4 --------------- */ @media screen and (max-width: 700px) { .contIMGenTXT4 { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 95%; height: max-content; padding: 0.625rem; margin: 5px; background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; } .contTITEL4 { width: 100%; height: auto; text-align: center; font-style: normal; font-size: 1.5rem; line-height: 1.7rem; font-weight: normal; color: #999; margin: auto; padding: 0.625rem 0 0 0; } .contTITEL4WIT { width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF; margin: auto; padding: 0.625rem 0 0 0; background-color: #333;} .contIMG4 { width: 90%; height: max-content; border-radius: 5px; text-align: center; } .contTXT4 { width: 100%; height: auto; font-size: 1.2rem; line-height: 1.4rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; } .contIMGfit4 { width: 10rem; width: 12.5rem; height: auto; margin: auto; box-shadow: 5px 5px 5px #999; } } @media screen and (min-width: 701px) { .contIMGenTXT4 { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 17rem; height: max-content; padding: 0.625rem; margin: auto; background-color: #fff9e6; border-radius: 10px; box-shadow: 5px 5px 5px #ededed; } .contTITEL4 { width: auto; height: auto; text-align: center; font-style: normal; font-size: 1rem; line-height: 1.2rem; font-weight: normal; color: #969; margin: auto; padding: 0.625rem; } .contTITEL4WIT { width: 12.5rem; height: 3.125rem; text-align: center; font-style: normal; font-size: 0.875rem; line-height: 1.125rem; font-weight: normal; color: #FFFFFF; margin: auto; padding: 0.625rem 0 0 0; background-color: #333;} .contIMG4 { width: 90%; height: max-content; border-radius: 5px; text-align: center; } .contTXT4 { width: 100%; height: auto; font-size: 1rem; line-height: 1.2rem; font-weight: normal; text-align: left; color: #000; overflow: hidden; padding: 10px; } .contIMGfit4 { object-fit: contain; width: 99%; height: auto; margin: auto; box-sha===dow: 5px 5px 5px #999; } } .TITenIMGenTXT { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: center; width: 11.25rem; height: 43.125rem; padding: 5px; flex-wrap: wrap; } .TIT { width: 11.25rem; height: 6.25rem; font-size: 0.75rem; line-height: 0.875rem; color:#000; padding: 5px; text-align: left; } .IMG2 { width: 11.25rem; height: 12.5rem; margin: auto; } .TXT2 { width: 11.25rem; height: 9.375rem; font-size: 0.75rem; line-height: 0.875rem; color:#000; padding: 5px; text-align: left; overflow: hidden; } .imgFIT { object-fit: contain; width: 11.25rem; height: 12.5rem; margin: auto; } /* ------- NO WAPPING BETWEEN IMAGE AND CAPTION -------- */ .nowrapDIV { width: max-content; height: auto; flex-wrap: nowrap; } .nowrapIMGenTXT { display: flex; flex-direction: column; width: 15rem; height: max-content; margin: auto; flex-wrap: nowrap; } .nowrapIMG { width: 15rem; height: 15.625rem; margin: auto; flex-wrap: nowrap; } .nowrapTXT { width: 14rem; height: 1.25rem; font-size: 0.75rem; line-height: 0.875rem; font-weight: normal; text-align: left; color: #000; flex-wrap: nowrap; } .nowrapIMGfit { object-fit: contain; width: 12.5rem; height: auto; margin: auto; flex-wrap: nowrap; } /* K K K K K K K ---------------- KAARTEN BESTELLEN ----------------- */ @media screen and (max-width: 700px) { .KAARTEN { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: max-content; margin: auto; background-color: #FFFDF6; z-index: 0 ; flex-wrap: wrap; } /* pagina container */ .kaartTXTenIMG { display: flex; flex-direction: row; justify-content: center; width: 380px; height: auto; flex-wrap: wrap; border-radius: 5px; border-radius: 10px; margin: 10px; background-color: #efefef; } /* kaart container */ .kaartIMG { display: flex; justify-content: center; width: 100%; height: max-content; margin: auto; } .kaartTXT1 { text-align: left; width: 95%; height: max-content; font-size: 1.4rem; line-height: 1.7rem; color: #000; padding: 1rem; } .kaartTXT2 { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; } .kaartAANTAL { display: flex; width: 50%; height: 50px; font-size: 1.2rem; line-height: 1.4rem; color:#000; margin: 10px; } .kaartIMGfit-LIG { object-fit: contain; width: 99%; height: auto; margin: auto; padding: 10px; } .kaartIMGfit-ST { object-fit: contain; width: auto; height: 380px; margin: auto; } .kaartADRES { width: 100%; height: max-content; background-color: #567; } } /* K K K K K K K ---------------- KAARTEN BESTELLEN ----------------- */ @media screen and (min-width: 701px) { .KAARTEN { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 99%; max-width: 1300px; height: max-content; margin: auto; background-color: #FFFDF6; z-index: 0 ; flex-wrap: wrap; } /* pagina container */ .kaartTXTenIMG { display: flex; flex-direction: row; justify-content: center; width: 380px; height: auto; flex-wrap: wrap; border-radius: 5px; border-radius: 10px; margin: 10px; background-color: #efefef; } /* kaart container */ .kaartIMG { display: flex; justify-content: center; width: 100%; height: max-content; margin: auto; text-align: right; } .kaartTXT1 { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 95%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; } .kaartTXT2 { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 95%; height: max-content; font-size: 1.2rem; line-height: 1.5rem; color: #000; padding: 0.625rem; } .kaartAANTAL { display: flex; width: 50%; height: 50px; font-size: 1.2rem; line-height: 1.5rem; color:#000; margin: 10px; } .kaartIMGfit-LIG { object-fit: contain; width: 95%; height: auto; margin: auto; } .kaartIMGfit-ST { object-fit: contain; width: auto; height: 340px; margin: auto; } .kaartADRES { width: 90%; height: max-content; margin: auto; background-color: #567; padding: 10px; border-radius: 10px; } } /* K K K K K K K --------------------- ALLERLEI KOP INSTELLINGEN - - - - - - - - -------- */ .KOProw { position: sticky; top: 0px; display: flex; flex-direction: row; width: 100%; height: auto; background-color: #bae2fc; z-index: 6; border-radius: 5px; } /* hier staat het MENUlinks in */ /* Dit is het hok waar de menu icons in staan en bepaald ook de hoogte van het hok En bepaald ook de plaats*/ .KOPitemICONS { display: flex; flex-direction: column; justify-content: center; width: auto; height: auto; background-color: #bae2fc; z-index: 5; } .KOPitemICONSrow { display: flex; flex-direction: row; justify-content: flex-start; width: auto; height: auto; background-color: #bae2fc; z-index: 5; } .KOPtitel { position: sticky; top: 0px; display: flex; flex-direction: row; justify-content: center; text-align: center; width: 100%; height: auto; background-color: #bae2fc; padding: 20px; font-size: 1.5rem; color: #999; } /* Hier staat de KOP in NIET MEER de kop liep uit de site? Dit kan weg */ .KOPcolumn { position: fixed; top: 0rem; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 80%; height: auto; flex-wrap: wrap; margin: auto; background-color: #bae2fc; border: 7px solid #d3ecfc; z-index: 4; } .itemKOPcolumn { width: 100%; height: max-content; font-size: 2rem; line-height: 2.5rem; color: #666; text-align: center; background-color: #bae2fc; flex-wrap: wrap; background-color: #bae2fc; padding: 0.4rem; box-sh adow: 0.188rem 0.188rem 5px #acdcfb inset; border-top: 1px solid #9ed7fb; border-left: 0.063rem solid #9ed7fb; border: 0.063rem solid #93d3fc; } /* Stichting vrienden van de schilder Martin Monnickendam */ /* -------------------- GRIJZE ACHTERGRONDEN IN DE KOP VOOR DE DETAILS PAGINAS --------- */ /* de oude achtergrondkleur was #bae2fc */ .KOPregel1 { display: flex; width: 100%; height: max-content; font-size: 1.25rem; font-weight: normal; line-height: 1.25rem; color: #666; justify-content: center; text-align: center; flex-wrap: wrap; background-color:#FFF; padding: 5px 0px 5px 0px; } .itemKOPregel1 { display: flex; flex: 1; justify-content: center; align-items: center; height: max-content; flex-wrap: wrap; padding: 5px 0px 5px 1.25rem; background-color: #bae2fc; } /* regel voor het hamburgermenu */ .KOPregel2 { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; height: max-content; font-size: 1.125rem; font-weight: normal; line-height: 1.25rem; color: #999; flex-wrap: wrap; background-color: #FFFDF6; padding: 5px 0px 5px 0px; } .itemKOPregel2ORG { position: sticky; top: 0rem; display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; height: max-content; font-size: 1.5rem; font-weight: normal; color: #FFF; line-height: 32px; flex-wrap: wrap; background-color: #bae2fc; padding: 1.25rem 0px 1.25rem 0px; border: 7px solid #d3ecfc; }/* Stichting vrienden van de schilder Martin Monnickendam (1874-1943) */ .KOPregel3 { display: flex; flex-direction: row; justify-content: center; text-align: center; width: 100%; height: max-content; font-size: 1.5rem; font-weight: normal; line-height: 1.5rem; color: #000; flex-wrap: wrap; border-radius: 5px; background-color: #FFFDF6; padding: 10px 0px 10px 0px; } .itemKOPregel3 { display: flex; flex-direction: row; justify-content: center; width: auto; height: max-content; flex-wrap: wrap; font-size: 1.125rem; line-height: 1.75rem; font-weight: normal; color: #666; text-align: center; padding: 1.25rem; margin: auto; background-color: #FFFDF6; z-index: 3; } .KOPregel4 { display: flex; width: 99%; height: max-content; font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; color: #333; justify-content: center; text-align: center; flex-wrap: wrap; margin: auto; padding: 5px; border-radius: 5px; background-color: #FFFDF6; } .KOPregel5 { position: sticky; top: 90px; display: flex; width: 80%; height: 40px; font-size: 1.75rem; font-weight: normal; line-height: 32px; color: #66C; justify-content: center; text-align: center; flex-wrap: wrap; background-color: #FFF; margin: auto; padding: 5px 0px 5px 0px; } .KOPregel6 { position: sticky; top: 9.375rem; display: flex; width: 80%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.5rem; color: #333; justify-content: flex-start; text-align: center; flex-wrap: wrap; background-color: #FFF; margin: auto; } .KOPfoto { display: flex; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; } .KOPfotoFIT { object-fit: contain; width: 100%; flex: 1; } .KOPfotoCap { display: flex; width: auto; height: max-content; flex-wrap: wrap; text-align: left; font-size: 0.75rem; font-style: italic; margin: auto; padding: 5px 0 0 0 ; background-color: #FFFDF6; padding: 0.625rem; } .KOPfotoART { display: flex; flex-direction: row; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 0; } .KOPfotoFitART { object-fit: contain; width: 100%; height: auto; margin: auto; align-content: center; } .KOPfotoCapART { display: flex; width: 99%; height: max-content; flex-wrap: wrap; font-size: 1rem; font-style: italic; color: #000; line-height: 1.2 rem; margin: auto; padding: 5px; background-color: #FFFDF6; z-index: 0; } .KOPfoto2Platen { display: flex; flex-direction: row; justify-content: center; width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; } .KOPfoto2PlatenIMG { flex: 1; margin: auto; padding: 0.625rem; } .KOPfoto2PlatenFIT { object-fit: contain; width: 100%; height: auto; } .KOPfoto2PlatenCAP { display: flex; width: auto; height: max-content; flex-wrap: wrap; text-align: center; font-size: 1rem; font-style: italic; line-height: 1.2rem; color: #000; margin: auto; padding: 5px; background-color: #FFFDF6; } /* KOP MET DRIE PLAATJES OP EEN RIJ */ .KOPfoto3Platen { display: flex; flex-direction: row; justify-content: center; width: 100%; height: max-content; flex-wrap: wrap; background-color: #FFFDF6; } .KOPfoto3PlatenIMG { flex: 1; margin: auto; padding: 0.625rem; } .KOPfoto3PlatenFIT { object-fit: contain; width: 100%; height: auto; } .KOPfoto3PlatenCAP { display: flex; width: 100%; height: auto; flex-wrap: wrap; text-align: left; font-size: 1rem; font-style: italic; line-height: 1.2 rem; color: #000; margin: auto; padding: 5px 0 0 15px; background-color: #FFFDF6; } /* KOP MET VIER PLAATJES OP EEN RIJ */ .KOPfoto4Platen { column-count: 4; column-width: 90%; column-gap: 0.625rem; width: 100%; height: auto; flex-wrap: wrap; background-color: #FFFDF6; justify-content: space-between; padding: 0.625rem 0 0 0 ; } .KOPfoto4PlatenIMG { width: 80%; min-width: 6.25rem; height: auto; flex: 1; margin: auto; } .KOPfoto4PlatenFIT { object-fit: contain; width: 100%; height: auto; } .KOPfoto4PlatenCAP { display: flex; justify-content: flex-start; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; font-size: 0.75rem; font-style: italic; margin: auto; padding: 5px ; background-color: #FFFDF6; } /* Dit is om 'losse' koppen te centreren */ .KOPcenter { width: 100%; height: max-content; font-size: 1.5rem; line-height: 1.5rem; text-align: center; margin: auto; background-color: #FFF; } .KOPkunstArchief { display: flex; flex-direction: row; width: 80%; height: max-content; flex-wrap: wrap; margin: auto; } .IMGkunstFitArchief { object-fit: contain; width: 77px; height: auto; } .IMGfotoFitArchief { object-fit: contain; width: 77px; height: auto; } /* MENU archief - keuze kunst foto en docs Aparte instellingen ivm de hoogte */ .menuARTIKELEN { position: sticky; top: 60px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; width: 99%; height: max-content; z-index: 4; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; } .itemMENUartikelen { display: flex; width: 100%; padding: 5px; border-radius: 4px; background-color: #bae2fc; margin: 3px; border: 1px dotted green; } .menuARCHIEF { position: sticky; top: 0px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-content: flex-start; width: 100%; height: max-content; z-index: 4; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; } .itemMENUarchief { display: flex; flex: 1; flex-direction: row; justify-content: space-around; align-content: center; height: max-content; color: #FFF; padding: 0.625rem; border-radius: 2px; background-color: #bae2fc; margin: 0.625rem; } /* M M M M M M ---------- MENU EN BLOKJES VOOR MENU Kunst-ARCHIEF ----------------- */ /* include in: MENUKNOPselPASTELS = */ .MENUKNOPPENselKUNST { display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: max-content; padding: 5px 0 0 0 ; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 4; } .itemMENUKNOPPENselKUNST { width: 5rem; height: 5rem; } .itemMENUKNOPPENselKUNSTfit{ object-fit: cover; width: 5rem; height: 5rem; } /* HET NIEUWE MENU - */ /* Dit geeft een zwarte streep boven aan de site */ .MENUlinkerKant { position: sticky; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: max-content; background-color: #FFFDF6; padding: 0rem 0rem 0rem 2rem; z-index: 10; margin-left: 0.625; background-color: #ededed; flex-wrap: nowrap; } .MENUlinkerKantNIEUW { position: sticky; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 90%; height: max-content; background-color: #FFFDF6; padding: 0rem 0rem 0rem 2rem; z-index: 10; margin-left: 0.625; } /* Dit zijn de hokjes van het menu utgevouwen */ .MENUitem { display: flex; justify-content: center; margin: 8px; font-size: 3em; width: 96%; height: 60px; display: flex; padding: 0 0 10px 0; border-radius: 20px; background-color: #bae2fc; border: 1px solid black; } /* --------- NIEUWSBRIEVEN -------*/ .nieuwsbrieven a:hover { font-size: 1.5rem; line-height: 2rem; color: #03F; } /* P P P P P P P -------------- PAGINATION ------------------------- */ .pagination { width: 100%; height: 540px; background-color: #FFF; } .paginationLinks { display: flex; flex-wrap: wrap; width: 100%; height: max-content; padding: 0.625rem 0px 1.25rem 0px; margin: auto; background-color: #FFFDF6; z-index: 3; } /* .numberofpages { position: absolute; left: 12.5rem; top: 1.25rem; width: 740px; height: 1.25rem; z-index: 1; } */ .contentPagination{ display: flex; flex-direction: row; justify-content: flex-start; width: 100%; height: max-content; margin: auto; padding: 0.625rem; background-color: #FFFDF6; } /* Dit zijn de instellingen voor de PAGINERING */ .pnum { padding-left: 5px; padding-right: 5px; background-color: #FFF; border: 1px solid gray; } .pnum a { text-decoration: none; font-family: Arial, 'Times new Roman', sans-serif; color: #000; } /*current page link slightly larger and different color*/ .pnum_current { font-weight: bold; color: #F00; padding-left: 5px; padding-right: 5px; background-color: #FFF; border: 1px solid #CCC; } .pLinks1 { width: 900px; height: 1.25rem; padding: 2px 0px 1px 5px ; border: #999 1px solid; /*allow room for first and prev links*/ } .pLinks2 { width: 900px; height: 1.25rem; padding: 5px 0px 5px 5px ; border: #999 1px solid; /*tweak number till page links don't move*/ } .resultaten { width: 25rem; height: 1.25rem; margin: auto; } /* ----------------- EINDE PAGINATION ----------------- */ /* NIEUWE 1 LANGE SMALLE PAGINA */ .PAGINAnieuw { background-color: #683; margin: 5px; } /* P P P P P P ---------------PUBLICATIES ---------------*/ .RESULTpub { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; width: 99%; height: max-content; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; } .contPUBresult { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; width: 100%; height: auto; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; margin: 5px 0px 5px 0px; background-color: #ccfbe1; border-radius: 5px; } .PUBjaar { display: flex; height: auto; justify-content: flex-start; align-items: flex-start; font-size: 0.875rem; color: #000; flex-wrap: wrap; margin: auto; padding: 5px; border: 1px solid black; } .PUBtxt { display: flex; width: 70%; height: max-content; font-size: 0.875rem; line-height: 1.125rem; flex-wrap: wrap; color: #000; margin: 5px; } .PUBimg { display: flex; width: 200px; height: auto; flex-wrap: wrap; margin: auto; border-radius: 5px; } .PUBimgFIT { object-fit: contain; width: 200px; max-width: 16rem; height: auto; padding: 5px; flex-wrap: wrap; border-radius: 5px; } .PUBdetail { display: flex; width: 99%; height: auto; flex-wrap: wrap; } .PUBdetailFIT { object-fit: contain; width: 99%; height: auto; padding: 5px; flex-wrap: wrap; } /* R R R R R R --------------RESULT ROW------------------ */ .RESULT { display: flex; flex-direction: row; justify-content: space-evenly; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 0.625rem; background-color: #FFFDF6; } @media screen and (max-width:700px) { .RESULTrow { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 95%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 0; } } @media screen and (min-width:701px) { .RESULTrow { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 0; } } /* R R R R R R --------------RESULT COLUMN------------------ */ .RESULTcolumn { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; width: auto; height: auto; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; padding: 5px; } @media screen and (max-width:700px) { .RESULTcolumn1 { column-count: 1; column-width: 100%; font-size: 1.2rem; font-weight: normal; line-height: 1.4rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; padding: 5px; } } .RESULTcolumn1DOCS{ column-count: 1; column-width: 700px; font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #333; width: 95%; height: max-content; flex-wrap: wrap; padding: 0.625rem; margin: auto; background-color: #FFFDF6; } .RESULTcolumn2 { column-count: 2; column-width: 500px; column-gap: 10px; font-size: 1.125rem; font-weight: normal; line-height: 1.5rem; color: #000; width: auto; height: max-content; flex-wrap: wrap; padding: 15px; margin: auto; background-color: #FFFDF6; } .RESULTcolumnBIO { column-count: 1; column-width: 18.75rem; column-gap: 1.3rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFaea; padding: 0.625rem; } .RESULTcolumn3 { column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: auto; height: max-content; flex-wrap: wrap; margin: auto; background-color: #FFFDF6; z-index: 0; } .RESULTcolumn3DON { column-count: 3; column-width: 18.75rem; column-gap: 15px; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem 0px 1.25rem 0; background-color: #FFFDF6; z-index: 0; } .RESULTcolumn3AP { column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem; z-index: 0; } .RESULTcolumn80pro{ column-count: 3; column-width: 18.75rem; column-gap: 1.875rem; font-size: 1rem; font-weight: normal; line-height: 1.25rem; width: 100%; height: max-content; flex-wrap: wrap; margin: auto; padding: 1.25rem; background-color: #FFF; z-index: 0; } .RESULTcolumn250 { column-count: 20; column-width: 77px; column-gap: 0.625rem; margin: auto; width: 100%; height: 5rem; overflow: hidden; margin: 0.625rem; } /* voor de kop van de archiefpaginaas kleine plaatjes */ .RESULTcolumn4 { column-count: 4; column-width: 12.5rem; column-gap: 15px; display: flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1000px; height: auto; margin: 0.625rem; flex-wrap: wrap; background-color: #FFFDF6; } .RESULTcolumn5 { column-count: 5; column-width: 9.375rem; column-gap: 15px; font-size: 0.875rem; font-weight: normal; line-height: normal; width: 80%; height: auto; margin: auto; padding: 0.625rem; } .RESULTcolumn6 { column-count: 6; column-width: 800px; column-gap: 15px; font-size: 0.875rem; font-weight: normal; line-height: normal; width: 80%; height: auto; margin: auto; padding: 0.625rem; } .RESULTcolumn20 { column-count: 20; column-width: 15rem; column-gap: 20px; font-size: 1rem; font-weight: normal; line-height: normal; color: #FFF; width: 80%; height: auto; margin: auto; padding: 1rem; } .RESULTfotoTXT { width: 60%; height: max-content; border: 1px solid black; } .RESULTindex { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; align-content: flex-start; width: 100%; height: max-content; flex-wrap: wrap; gap: 0.625rem; margin: auto; padding: 0.625rem; background-color: #FFF; } .RESULTkunstTXT{ width: 100%; min-width: 33.125rem; height: max-content; margin: auto; } .RESULTmenuBalk{ display: flex; flex-direction: column; justify-content: flex-start; width: 80%; height: max-content; } .RESULTtxt { text-align: justify; max-width: 100%; height: max-content; flex-wrap: wrap; margin: auto; border: 1px solid #666; padding: 0.625rem; background-color: #FFF; } /* S S S S S S -----------SHADOW ------ box-shadow: 0.625rem 5px 5px red; */ /* T T T T T T ------------- TEKST CONTAINERS --------- */ .TEKST { width: 80%; height: auto; background-color: #FFF; } .TEKSTjustify { width: 100%; height: auto; background-color: #FFF; text-align: justify; } .TEKSTbgkleur { width: 80%; height: auto; background-color: #FFFDF6; } .TEKSTbio { width: 100%; height: auto; background-color: #FFFDF6; padding: 5px; } .TEKSTart { width: 80%; height: max-content; background-color: #FFFDF6; padding: 0.625rem; overflow: hidden; } .ARTIKELtxt { display: flex; font-size: 0.875rem; font-weight: normal; font-family: "optima"; line-height: 1rem; text-align: justify; width: 100%; height: max-content; flex-wrap: wrap; padding: 1.25rem; } .txtARTIKEL { display: flex; font-size: 0.875rem; font-weight: normal; font-family: "optima"; line-height: 1rem; text-align: justify; width: 100%; height: max-content; flex-wrap: wrap; padding: 1.25rem; } /* ---------- TABELLEN ---------------*/ table { width: 100%; } tr { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: left; } tr.bio { width: 100%; height: max-content; text-align: left; font-size: 0.875rem; line-height: 1.125rem; color: #000; } .center { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: center; } .top { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: top; } td { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: left; } td.right { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; text-align: right; } td.archief { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: top; text-align: left; padding: 2px; overflow: hidden; } td.archief2 { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: middle; text-align: center; padding: 2px; overflow: hidden; } td.archief3 { font-size: 0.75rem; font-weight: normal; line-height: 0.875rem; vertical-align: middle; text-align: right; padding: 2px; overflow: hidden; } td.breedte1 { font-size: 0.875rem; font-weight: normal; line-height: 0.875rem; text-align: left; width: 5rem; min-height: 1.25rem; } td.breedte2 { font-size: 0.875rem; font-weight: normal; line-height: 0.875rem; text-align: left; width: 18.75rem; height: 1.25rem; flex-wrap: wrap; } /* ------------- Z Z Z Z Z Z Z Z Z ----------ZOEKVENSTER ---------------*/ /* .zoekVensterTXT{ position: sticky; top: 60px; display: flex; flex-direction: row; justify-content: center; align-content: center; width: 100%; height: 50px; background-color:#456 ;margin: auto; border: 1px solid black; text-align:center; } */ .zoekVenster { position: sticky; top: 60px; display: flex; flex-direction: row; justify-content: center; align-content: center; width: 99%; height: auto; background-color:#FFFDF6 ; margin: auto; padding: 10px 0 10px 0; z-index: 8; } .aantalRows { display: flex; width: 100%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #000; justify-content: center; align-content: center; flex-wrap: wrap; background-color:#FFFDF6; padding: 15px 0px 15px 0px; z-index: 1; } /*.count { display: flex; width: 100%; height: max-content; font-size: 0.875rem; font-weight: normal; line-height: 1.125rem; color: #000; justify-content: center; align-content: center; flex-wrap: wrap; background-color:#FFFDF6; padding: 15px 0px 15px 0px; z-index: 1; } /* waarvoor is dit? */ .zoekVENSTERselecties{ display: flex; width: 100%; height: max-content; background-color:#FFFDF6 ; margin: auto; text-align: center; padding: 15px 0 15px 0; z-index: 2; border: 1px solid black; } /* DIT IS HET NIEUWE HOK VOOR DE ZOEK VOORSTELLEN OP DE ARCHIEF PAGINA (S) (20250606) */ .zoekVoorstel { display: flex; flex-direction: column; width: 12.5rem; height: max-content; border: 1px solid black; } .zoekItems { margin-left: 15px; width: max-content; height: max-content; display: flex; padding: 0px 5px 5px 0px; } /* FORMULIER STYLING */ form { display: flex; flex-direction: row; justify-content: center; margin: auto; width: 95%; font-size: 20px; flex-wrap: wrap; } input { width: 90%; font-size: 18px; color: #999; height: 30px; margin: 5px; padding: 10px; border-radius: 5px; } /* afmTXT===hok { width: 400px; height: 1.75rem; padding: 5px; } */ textarea { margin-left: 7px; width: 71.5%; height: 150px; border-radius: 5px; font-size: 24px; } .myBtn { width: 20%; height: 60px; background-color: red; } .btn { width: 70%; height: 60px; background-color: red; } /* -------- UITSCHUIF MENUlinkerKant --------- */ /* Dit komt uit: https://www.w3schools.com/howto/howto_js_sidenav.asp Slide Overlay (de eerste optie) */ /* The side navigation menu */ .sidenav { height: max-content; /* 100% Full-height - 25rem dan kan die scrollen*/ /* 20250521 - Dit heb ik veranderd Was 100% Dit verander wel. */ width: 0; /* 0 width - change this with JavaScript */ /* 20250521 - Dit heb ik veranderd. Was 0 en nu veranderd er was wanneer je dit uitzet */ position: fixed; /* Stay in place */ top: 0px; /* Stay at the top */ left: 0px; background-color: #FFFDF6; border-radius: 3px; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 25px; /* padding: 0px 0px 0px 0.625rem; /* Place content 3.75rem from the top DIT IS DE LINKER MARG EMAAR DAN ZIEN WE EEN BLAUWE STREEP ? */ transition: 0.7s; /* 0.5 second transition effect to slide in the sidenav */ z-index: 10; /* Stay on top */ /* overflow-y: scroll; /* 20250521 - Dit heb ik veranderd. Stond uit. Voegt vertical scrollbar toe. */ } /* The navigation menu links / DE TEKST DUS*/ .sidenav a { padding: 20px; font-size: 28px; text-decoration: none; color: #666; /* 20250521 - Dit heb ik veranderd. Was #000 zwart veranderd naar grijs*/ display: block; transition: 0.5s; z-index: 10; /* Stay on top */ } /* When you mouse over the navigation links, change their color */ .sidenav a:hover { line-height: 1.5rem; color: #FC0; /* 20250521 - Dit heb ik veranderd Was #999 Veranderd naar zwart */ } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 20px; right: 45px; margin-left: 35px; z-index: 8; }