html, body {
  min-height: auto;
/* background-color: #ffffff; weglaten vanwege anders een rand om de header*/
  }

/* border around the entire page */
  #top, #bottom, #left, #right {
    background: #ebe0ff;
    position: fixed;
    }
  #left, #right {
    top: 0; bottom: 0;
    width: 15px;
    }
    #left { left: 0; }
    #right { right: 0; }
  #top, #bottom {
    left: 0; right: 0;
    height: 15px;
    }
    #top { top: 0; }
    #bottom { bottom: 0; }


/* parent */
.wrapper {
  position: fixed;
  top: 10; /* vaste marge rond pagina */
  left: 10;
  right: 10;
  bottom: 10;
  background: #ffffff;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 1fr auto 1fr; /* de hoogte van de fraction wordt ingevuld in de header en footer zelf */
  margin: 0px;
  padding: 0px;  /* rand rondom hele pagina */
  border-radius: 0px;
  border: 0px solid #eebb55;
  /* background: #ffeebb; */
  /* randen tussen de boxen */
  row-gap: 0px;
  column-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}


/* ascendents */
.header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  height: 90px;
  width: auto;
  background: #ffffff;
	font-family: Arial, Verdana, Helvetica;
  text-align: left;
	font-size: 12pt;
 	font-weight: normal;
	color: #8866CC;
}

/* nested headers */
.nested-header-titel {
  height: 70px;
  line-height: 55px; /* hiermee is de teksthoogte in te stellen */
  white-space: nowrap; /* moet hier staan om de teksthoogte in te kunnen stellen */
  background-color: #8866CC;
  text-align: center;
  vertical-align: center;
	font-family: 'Book Antiqua', 'times new roman';
	font-size: 30pt;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}

.nested-header-wittebalk {
  height: 10px;
  background-color: #ffffff;
}

.nested-header-gekleurdebalk {
  height: 2px;
  background-color: #8866CC;
}


.menu { 
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  box-sizing: border-box;
  overflow: auto;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  row-gap: 2px;
}

/* nested menu */
div.nested-menu {
  background-color: #8866cc;
/*  width: 200px; */
  border-bottom: solid 2px;
  border-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 20px;
	font-family: Arial, Verdana, Helvetica;
  text-align: left;
	font-size: 12pt;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
  padding-left: 0px;
}

.imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

a.menulink {
	color: #FFFFFF;
  text-decoration: none;
}

a.menulink:hover {
	color: #FFFFFF;
  text-decoration: underline;
}


.footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  height: 64px;
  width: 100%;
  background: #ffffff;
}

/* nested footers */
.nested-footer-content {
  height: 50px;
  width: 100%;
  margin: 0px;
  background-color: #ffffff;
	font-family: Arial, Verdana, Helvetica;
  text-align: center;
	font-family: 'Book Antiqua', 'times new roman';
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: #8866CC;
}

.nested-footer-wittebalk {
  height: 10px;
  background-color: #ffffff;
}

.nested-footer-gekleurdebalk {
  height: 2px;
  background-color: #8866CC;
}


.content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  box-sizing: border-box;
  overflow: auto;
  padding-left: 10px;
  padding-right: 20px;
  text-align: justify;
  background: #ffffff;
	font-family: 'Book Antiqua', 'times new roman';
	font-size: 12pt;
  font-weight: normal;
	color: #8866CC;
}

p, td {
  align-items: left;
/*  vertical-align: text-bottom; */
	font-family: 'Book Antiqua', 'times new roman';
	font-size: 12pt;
	font-style: normal;
	font-weight: normal;
	color: #8866CC;
  hyphens: auto;
}

td.top { vertical-align: text-top; }
td.bottom { vertical-align: text-bottom; }
td.middle { vertical-align: middle; }

/* Evenementen die al voorbij zijn. Gebruik: <p class='oud'> */
p.oud {
	font-size: 12pt;
 	font-weight: normal;
	color: #696969;
  }

ul.new { list-style-image: url("blokgifs/new.gif"); }

hr {
  color: #8866CC;
  align-items: left;
  width: 100%;
}

hr.red { border: 2px solid red;
  }

a {
  text-decoration: underline;
	color: #8866CC;
  }

/* Tussenkopjes voor provincienamen bij docenten en muziekscholen */
p.titel {
	font-size: 14pt;
	font-style: italic;
	font-weight: bold;
	color: #FF0000;
  }

/*	Hieronder heb ik wat CSS toegevoegd - Philip van Geens 2019-09-23
	Versie: Philip van Geens 2019-10-07
*/

body	{	/* Deze kan worden gecombineerd met de body eerder in deze file */
		counter-reset:		h1;
		counter-reset:		h2;
		counter-reset:		h3;
		counter-reset:		h4;
		counter-reset:		h5;
		counter-reset:		h6;
	}

H1	{	/* H1 is gereserveerd voor site-titels. */
		counter-reset:		h2;
	}

H2	{	/* H2 is de titel van de pagina, ongenummerd. */
		font-size:		18px;
		text-transform: 	uppercase;
		counter-reset:		h3;
	}

H3	{	font-size:		16px;
		text-transform: 	uppercase;
		font-weight:		bold;
		counter-reset:		h4;
	}
H3:before {	/* H3 is de titel van een hoofdstuk. Het nummer komt voor de titel: 	1.titel	*/
		content:		counter(h3) ".\0000a0\0000a0";
		counter-increment:	h3;
		counter-reset:		h4;
	}

H4	{	font-size:		16px;
		font-weight:		bold;
		font-style:		italic:
		counter-reset:		h5;
	}
H4:before {	/* H4 is de titel van een genummerd sub-hoofdstuk: 	1.1.titel	*/
		content:		counter(h3) "." counter(h4) ".\0000a0\0000a0";
		counter-increment:	h4;
		counter-reset:		h5;
	}

H5	{	font-size:		14px;
		font-weight:		bold;
		font-style:		italic:
		counter-reset:		h6;
	}
H5:before {	/* H5 is de titel van een genummerd sub-hoofdstuk: 	1.1.1.titel	*/
		content:		counter(h3) "." counter(h4) "." counter(h5) ".\0000a0\0000a0";
		counter-increment:	h5;
		counter-reset:		h6;
	}
.more	{	/*color:		red; /* shows the text when the 'more' button is pressed in red */
		display:		none;
	}