/* Vanaf versie 17 wordt gebruikgemaakt van /css5/data.css                   */
/*  Het verschil met /css4/data.css is dat in /css5/data.css het textblok    */
/*  in grid-item4 apart opgemaakt wordt van de plaatsbepaling van item4      */

/* om foto's te laden en voor zoekers te verbergen */
.rapvluggeniks {display: none;}

BODY {
	background-image: url(../bg01.gif);
}

A { text-decoration: none; }
A:link           { color: blue; }
A:visited        { color: blue; }
A:link:active    { color: blue; }
A:hover { background-color: red; text-decoration: none; }
A::before { content: url(../smgrnrt.gif); }

/* Eerst opmaak voor alle schermsoorten hoger als 500pixels */
/* Hierin zitten de drie schermbreedte opmaakregels */
@media screen and (min-height: 500px)
{



/* Schermgrootte styles: high screen opmaak */
@media screen and (min-width: 990px) {


/* Schermgrootte selectie */
.only-lowscreen {display: none;}
.only-midscreen {display: none;}


/* algemene opmaakregels */
P {
  font-size: 12pt;
  color: #cccccc;
  font-family: Universe, Helvetica, Arial, sans-serif;
  font-weight: 100;
}

h1 { text-align:center; }


/*  Nu volgt stijlopmaak voor de topsectie van de pagina's (top bar en top nav) */
div.top-high {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: +1;
}

nav.logo {
background-color:#CC0000;
text-align:center;
border-top-left-radius:
5px; border-bottom-left-radius:
5px; border-top-right-radius:5px;
border-bottom-right-radius:5px;
}

#title-bg {
background-color: yellow; color: #000000; font-size: 1.3em;
}
#title {
text-shadow: 1px 1px black;
}
#lang-switch {
background-color:#0000cc; position: fixed; right: 5px; top: 2px; font-size: 0.8em; z-index: +2;
}

nav.menu {
position: relative; top: -20px;
}
/* eind topsectie opmaak ********************** */



/* Opmaak main sectie : bevat main en grid */
main {
position:relative; top: 90px;
padding-left: 20px; padding-right: 20px; padding-top: 10px;
background-image: url(../bglinks.gif); color: white;
border-top-left-radius: 25px; border-bottom-left-radius: 25px;
border-top-right-radius:25px; border-bottom-right-radius:25px;
}

/* Opmaak grid en grid elementen */
.grid-container {
display: grid;
  justify-content: start;
  grid-template-columns: 290px 340px auto;
  grid-template-rows: auto auto auto;
  grid-gap: 5px;
  padding: 10px;
  background-image: url(../bg01.gif);
  top: 10px;
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
 }
 
.grid-container > div { 
 padding: 10px;
 }

.item1 {
 grid-row: 1 / span 3;
 background-color: #CCCCFF; 
 text-align:center; 
 color: green;
 font-size: 0.65rem;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
 
}

.item2 {
 grid-row: 1;
 grid-column:2;
}

.item3 {
 grid-row: 1;
 grid-column:3;
}

.item4 { 
 grid-column: 2 / span 2;
 grid-row: 2;
 }

.item5 { 
 grid-column: 2 / span 2;
 grid-row: 3;
 color: black;
}

.item4textblocks {
  border: 5px solid rgba(180, 0, 0, 0.8);
 background-color: black;
 margin-left: 1px;
 padding-left: 5px;
 margin-bottom: 10px;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
}

 
.snippet1 {color: yellow; background: black; font-size: 12pt;}
.snippet2 {color: #006600; font-size: 14pt;}

}
/* end Schermgrootte styles: high screen opmaak */

/* ===================================================================================== */

/* Schermgrootte styles: mid screen opmaak */
@media screen and (max-width: 989px) and (min-width: 581px) {



/* Schermgrootte selectie */
.only-lowscreen {display: none;}
.only-highscreen {display: none;}

/* algemene opmaakregels */



/* lettergroottes in paragrafen bij twee verschillende schermgroottes */

	p {
	font-size: 12pt;
	color: #dddddd;
	font-family: Universe, Helvetica, Arial, sans-serif;
	font-weight: 100;
	}
    .only-highmediumscreen {
    font-size: 12pt;
    }
    .snippet1 {color: yellow; background: black; font-size: 12pt;}
    .snippet2 {color: #006600; font-size: 12pt;}

/*  Nu volgt stijlopmaak voor de topsectie van de pagina's (top bar en top nav) */

div.top-mid {
    position: fixed;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 0px;
    background-color: blue;
    font-size:12px;
    z-index: +3;
	}
#midhead {
	position:relative;
	top: -16px;
	}

h1 {position: relative; top: 10px; font-size: 1.3rem; text-align:center;}


/*  Nu volgt stijlopmaak voor de topsectie van de pagina's (top bar en top nav) */


nav.logo {
background-color:#CC0000;
text-align:center;
border-top-left-radius:
5px; border-bottom-left-radius:
5px; border-top-right-radius:5px;
border-bottom-right-radius:5px;
}

#title-bg {
background-color: yellow; color: #000000; font-size: 1.3em;
}
#title {
text-shadow: 1px 1px black;
}
#lang-switch {
background-color:#0000cc; position: fixed; right: 5px; top: 2px; font-size: 0.8em; z-index: +2;
}

nav.menu {
position: relative; top: -20px;
}

/* eind topsectie opmaak *********************************************************** */



/* Opmaak main sectie : bevat h1 en grid */
main {
position:relative; top: 90px;
padding-left: 20px; padding-right: 20px; padding-top: 10px;
background-image: url(../bglinks.gif); color: white;
border-top-left-radius: 25px; border-bottom-left-radius: 25px;
border-top-right-radius:25px; border-bottom-right-radius:25px;
}

/* Opmaak grid en grid elementen */
.grid-container {
display: grid;
grid:
  justify-content: start;
  grid-template-columns: 340px auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 5px;
  padding: 10px;
  background-image: url(../bg01.gif);
  position: relative;
  top: 10px;
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
 }
 
.grid-container > div { 
 padding: 10px;
 }

.item1 {
 grid-row: 4;
 grid-column: 1 / span 2;
 background-color: #CCCCFF; 
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
 padding-left: 2px;
 padding-right: 2px;
 background-image: url(../bg01.gif);
}

.item2 {
 grid-row: 1;
 grid-column:1;
}

.item3 {
 grid-row: 1;
 grid-column:2;
}

.item4 { 
 grid-column: 1 / span 2;
 grid-row: 2;
}

.item5 { 
 grid-column: 1 / span 2;
 grid-row: 3;
 color: black;
}

.item4textblocks {
  border: 5px solid rgba(180, 0, 0, 0.8);
 background-color: black;
 margin-left: 1px;
 padding-left: 5px;
 margin-bottom: 10px;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
}

.mediumlist { 
 padding-left: 0px;
 padding-right: 0px;
 height: 850px;
 width: 100%;
 background-image: url(../bg01.gif);
}
.IframeMidFoto{position: absolute; top: 10px; z-index:0; }

}
/* einde Schermgrootte styles: mid screen opmaak */


/* ===================================================================================== */
 
/* Schermgrootte styles: low screen opmaak */
@media screen and (max-width: 580px) {

/* Schermgrootte selectie */
.only-midscreen {display: none;}
.only-highscreen {display: none;}
.only-highmediumscreen {display: none;}

/* algemene opmaakregels */




/*  Nu volgt stijlopmaak voor de topsectie van de pagina's (top bar en top nav) */
div.top-low {
    position: fixed;
    top: -10px;
    left: 0px;
    width: 100%;
    z-index: +1;
}

#title-bg {
background-color: yellow; color: #000000; font-size: 1.3em;
}
#title {
text-shadow: 1px 1px black;
}
#lang-switch {
background-color:#0000cc;  position: fixed; right: 5px; top: 0px; font-size: 0.8em; z-index: +2;
}

#lowhead{ position: relative; top: -15px; }



/* eind topsectie opmaak *********************************************************** */



/* Opmaak main sectie : bevat h1 en grid */
main {margin-left: -8px; margin-right: -6px;
position:relative; top: 60px;
padding-left: 2px; padding-right: 2px; padding-top: 10px;
background-image: url(../bglinks.gif); color: white;
border-top-left-radius: 25px; border-bottom-left-radius: 25px;
border-top-right-radius:25px; border-bottom-right-radius:25px;
}

h1 {position: relative; top: 10px; font-size: 1.3rem; text-align:center;}

/* Opmaak grid en grid elementen */
.grid-container {
display: grid;
grid:
  justify-content: start;
  grid-template-columns: 210px auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0px;
  padding-left: 0px;
  background-image: url(../bg01.gif);
  position: relative;
  width:100%;
  top: 10px;
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
 }
 
.grid-container > div { 
 }

.item1 {
 grid-row: 4;
 grid-column: 1 / span 2;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
 background-image: url(../bglinks.gif);
}

.item2 {
 grid-row: 1;
 grid-column:1;
}

.item3 {
 grid-row: 1;
 grid-column:2;
}

.item4 { 
 grid-column: 1 / span 2;
 grid-row: 2;
}

.item5 { 
 grid-column: 1 / span 2;
 grid-row: 3;
 color: black;
}

.item4textblocks {
  border: 5px solid rgba(180, 0, 0, 0.8);
 background-color: black;
 margin-left: 1px;
 padding-left: 5px;
 margin-bottom: 10px;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
}

.lowlist { 
 padding-left: 0px;
 padding-right: 0px;
 height: 1600px;
 width: 100%;
 background-image: url(../bg01.gif);
}

.photo_overlay_text{ color: blue; background-color: yellow; position: absolute; top: 1px; font-size: 14px; z-index: 1;}
.IframeLowFoto{position: absolute; top: 10px; z-index:0; }

}
/* end Schermgrootte styles: low screen opmaak */

}
/* einde schermgroote styles voor schermen met hoger googte dan 500pixels */
/* ================================================================================== */
/* ================================================================================== */
/* ================================================================================== */
/* ================================================================================== */
/* ================================================================================== */


@media screen and (max-height: 499px){
/* Schermgrootte selectie */
.only-midscreen {display: none;}
.only-highscreen {display: none;}
.only-highmediumscreen {display: none;}

/* algemene opmaakregels */




/*  Nu volgt stijlopmaak voor de topsectie van de pagina's (top bar en top nav) */
div.top-low {
    position: fixed;
    top: -10px;
    left: 0px;
    width: 100%;
    z-index: +1;
}

#title-bg {
background-color: yellow; color: #000000; font-size: 1.3em;
}
#title {
text-shadow: 1px 1px black;
}
#lang-switch {
background-color:#0000cc;  position: fixed; right: 5px; top: 0px; font-size: 0.8em; z-index: +2;
}

#lowhead{ position: relative; top: -15px; }



/* eind topsectie opmaak *********************************************************** */



/* Opmaak main sectie : bevat h1 en grid */
main {margin-left: -8px; margin-right: -6px;
position:relative; top: 60px;
padding-left: 2px; padding-right: 2px; padding-top: 10px;
background-image: url(../bglinks.gif); color: white;
border-top-left-radius: 25px; border-bottom-left-radius: 25px;
border-top-right-radius:25px; border-bottom-right-radius:25px;
}

h1 {position: relative; top: 10px; font-size: 1.3rem; text-align:center;}

/* Opmaak grid en grid elementen */
.grid-container {
display: grid;
grid:
  justify-content: start;
  grid-template-columns: 210px auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 0px;
  padding-left: 0px;
  background-image: url(../bg01.gif);
  position: relative;
  width:100%;
  top: 10px;
  border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
 }
 
.grid-container > div { 
 }

.item1 {
 grid-row: 4;
 grid-column: 1 / span 2;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
 background-image: url(../bglinks.gif);
}

.item2 {
 grid-row: 1;
 grid-column:1;
}

.item3 {
 grid-row: 1;
 grid-column:2;
}

.item4 { 
 grid-column: 1 / span 2;
 grid-row: 2;
 background-color: black;
  border: 5px solid rgba(180, 0, 0, 0.8);
 font-size: 16px;
 margin-left: 5px;
 margin-right: 5px;
 padding: 5px;
 border-top-left-radius: 10px; border-bottom-left-radius: 10px;
 border-top-right-radius:10px; border-bottom-right-radius:10px;
}

.item5 { 
 grid-column: 1 / span 2;
 grid-row: 3;
 color: black;
}

.lowlist { 
 padding-left: 0px;
 padding-right: 0px;
 height: 1600px;
 width: 100%;
 background-image: url(../bg01.gif);
}

.photo_overlay_text{ color: blue; background-color: yellow; position: absolute; top: 1px; font-size: 14px; z-index: 1;}
.IframeLowFoto{position: absolute; top: 10px; z-index:0; }
}