html {
	font-size: 16px;
}

body {
	font-size: 16px;
	background-color: #FEFFFF;
	padding-top: 20px;
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	color: #182b49;	
	display: flex;
	flex-direction: column;
	width: 97%;
}

@media screen and (min-width: 1024px) {
	body {
		display: inline-block;
		width: 97%;
		font-size: 16px;
		background-color: #FEFFFF;
		padding-top: 20px;
		font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
		color: #182b49;	
	}
}



/* Leidraad search engine */

.highlight_hit {
	color: #ffffff;
	background-color: #182b49;
}

.searchresult_div {
	font-size: 2rem;
	background-color: #FFFFFF;
    border-radius: 5px;
    padding-bottom: 10px;
    width: 96%;
	margin-bottom: 15px;
}

.searchresult_div em {
	font-size: 2rem;
	color: #182b49;
	font-weight: bold;
}

.searchresult_head {
	font-size: 2rem;
	font-weight: bold;
	padding-bottom: 10px;
	border-radius: 5px;
	padding-left: 7px;
	padding-top: 7px;
	padding-bottom: 5px;
	color: #FFFFFF;
	background-color: #005983;
}

#content_div a.searchresult:link {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	color: #FEFFFF;
}
#content_div a.searchresult:visited {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	color: #FEFFFF;
}
#content_div a.searchresult:hover {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	color: #88D6DF;
}
#content_div a.searchresult:active {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	color: #FEFFFF;
}

@media screen and (min-width: 1024px) {
	
	.searchresult_div {
		font-size: 1rem;
	}
	
	.searchresult_div em {
		font-size: 1rem;
	}
	
	.searchresult_head {
		font-size: 1rem;
	}
	
}



li>a {
	font-size: 1rem;
}




/* Leidraad menu */

.menu {
	font-size: 2rem;
}


/* Leidraad menu blocks */

.menu div.expanded {
	font-weight: bold;
	padding-bottom: 10px;
	border-radius: 5px;
	padding: 5px;
	background-color: #FFFFFF;
	color: #000000;
}

div.menu_title {

	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	padding-bottom: 10px;
	border-radius: 5px;
	padding-left: 7px;
	padding-top: 7px;
	padding-bottom: 5px;
	color: #FFFFFF;
	background-color: #005983;
	text-align: left;
}

div.menu_items: {
	width: 65%;
}

@media screen and (min-width: 1024px) {
	
	.menu {
		font-size: 1.2rem;
	}
	
	.menu div.expanded {
		font-weight: bold;
		padding-bottom: 10px;
		border-radius: 5px;
		padding: 5px;
		background-color: #FFFFFF;
		color: #000000;		
		display: flex; /* for vertical alignment */
		justify-content: center;
		align-items: center;
	}

	
	/* Trick for the speech bubble */
	/* https://codingislove.com/css-speech-bubbles/ */
	

	div.menu_title {
		width: 30%;
		/*margin: 50px auto;*/
		background: #005983;
		padding: 20px;
		font-size: 1.2rem;
		font-weight: bold;
		color: #FFFFFF;
		position:relative;
		display:inline-block;	
		text-align: left;
		margin-top: 20px;
		margin-bottom: auto;
	}	
	div.menu_title:not(.noarrow):after {
		content: "";
		width: 0px;
		height: 0px;
		position: absolute;
		border-left: 10px solid #005983;
		border-right: 10px solid transparent;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		right: -17px;
		/*vertical alignment */
		top: 50%;
		transform: translate(0%, -50%);
	}
	
	div.menu_items {
		width: 65%;
		display:inline-block;
	}
}





/* Leidraad menu title links */

.menu div.menu_title a:link {
	color: #FFFFFF !important;
}
.menu div.menu_title a:visited {
	color: #FFFFFF !important;
}
.menu div.menu_title a:hover {
	background-color: #005983  !important;
	color: #88D6DF !important;
}
.menu div.menu_title a:active {
	color: #FFFFFF !important;
}

/* Leidraad menu sub-title links */ 
.menu div.expanded a:link {
	color: #182b49;
}
.menu div.expanded a:visited {
	color: #182b49;
}
.menu div.expanded a:hover {
	color: #FFFFFF;
	background-color: #182b49;
}
.menu div.expanded a:active {
	color: #182b49;
}



.menu ul {
	list-style: none;
}
.menu ul li.leaf {
	font-weight: normal;
}

.menu ul li.leaf::before {
	content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ 
	color: #666762;
	font-weight: bold; /* If you want it to be bold */
	display: inline-block; /* Needed to add space between the bullet and the text */
	width: 1em; /* Also needed for space (tweak if needed) */
	margin-left: -1em; /* Also needed for space (tweak if needed) */
}




.menu a {
	text-decoration: none;	
	cursor: pointer;
	font-size: 2rem;
}
@media screen and (min-width: 1024px) {
	.menu a {
		text-decoration: none;	
		cursor: pointer;
		font-size: 1rem;
	}	
}




/* side menu box */

div.aside {
	display: block;
	background-color: #ECEAE5;
	border-radius: 5px;
	border-style: dotted;
	border-color: #666762;
	border-width: 1px;
	padding: 10px;
	margin-left: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 10px 1px #888;
	
	.aside a {
		font-size: 0.9rem;
		text-decoration: underline dotted;	
		cursor: pointer;
	}
}

@media screen and (min-width: 1024px) {
	
	div.aside {
		display: block;
		background-color: #ECEAE5;
		border-radius: 5px;
		width: 30vw;
		float: right;
		border-style: dotted;
		border-color: #666762;
		border-width: 1px;
		padding: 10px;
		margin-left: 50px;
		margin-right: 10px;
		margin-bottom: 10px;
		box-shadow: 0px 0px 10px 1px #888;
	}

	.aside a {
		font-size: 0.9rem;
		text-decoration: underline dotted;	
		cursor: pointer;
	}
}
.aside a:link {
	color: #182b49;
}
.aside a:visited {
	color: #182b49;
}
.aside a:hover {
	color: #FFFFFF;
	background-color: #182b49;
}
.aside a:active {
	color: #182b49;
}

.aside a.active {
	font-weight: bold;
	color: #000000;
}
.aside a.active:hover {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #666762;
}


/* general main text */

.main {
	font-size: calc(0.8rem + 0.5vw);
	margin-top: 46px; /* needed when navigation links spread onto two lines */
}
@media screen and (min-width: 1024px) {
	.main {
		font-size: 1rem;
		margin-top: 26px; /* needed when navigation links spread onto two lines */
	}
}

.main a {
	text-decoration: underline dotted;	
	cursor: pointer;
}
.main a:link {
	color: #017f76;
}
.main a:visited {
	color: #017f76;
}
.main a:hover {
	color: #FFFFFF;
	background-color: #017f76;
}
.main a:active {
	color: #017f76;
}

/*
p {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	width: 96%;
}
*/

.main > p {	
	padding-left: 15px;
	font-size: 2rem;
}
@media screen and (min-width: 1024px) {
	.main > p {	
		padding-left: 15px;
		font-size: 0.9rem;
	}
}



.main h1 {
	font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
	font-size: 2rem;
	min-height: 30px;
	width: 96%;
	border-radius: 5px;
	padding-left: 7px;
	margin-right: 17px;
	padding-top: 7px;
	padding-bottom: 5px;
	color: #000000;
	background-color: #d9d7cc;
}

.main h2 {
	font-family: schoolboek, Helvetica,Arial,Open-sans,Verdana,sans-serif;
	font-size: 2rem;
	color: #000000;
}

.main h3 {
	color: #000000;
}

.main h4 {
	font-size: 2rem;
	text-transform: capitalize;
	border-radius: 5px;
	height: 30px;
	padding: 5px;
	background-color: #d9d7cc;	
	color: #000000;
}

@media screen and (min-width: 1024px) {
	
	.main h1 {
		font-family: Helvetica,Arial,Open-sans,Verdana,sans-serif;
		font-size: 1.2rem;
		min-height: 30px;
		width: 96%;
		border-radius: 5px;
		padding-left: 7px;
		margin-right: 17px;
		padding-top: 7px;
		padding-bottom: 5px;
		color: #000000;
		background-color: #d9d7cc;
	}

	.main h2 {
		font-family: schoolboek, Helvetica,Arial,Open-sans,Verdana,sans-serif;
		font-size: 1.2rem;
		color: #000000;
	}
	
	.main h3 {
		color: #000000;
	}
	
	.main h4 {
		font-size: 1rem;
		text-transform: capitalize;
		border-radius: 5px;
		height: 30px;
		padding: 5px;
		background-color: #d9d7cc;	
		color: #000000;
	}
}

/* boxes for spelling rules */ 
.main #regel {
	background-color: #ECEAE5;	
	border-radius: 5px;
	padding-bottom: 10px;
	width: 96%;
	color: #000000;
}
.main #regel > p {
	font-size: 2rem;
	padding-left: 15px;
}
@media screen and (min-width: 1024px) {
	.main #regel > p {
		font-size: 1rem;
		padding-left: 15px;
	}
}

.main strong {
	color: #182b49;
	/*color: #000000; */
	font-size: 2rem;
}
@media screen and (min-width: 1024px) {
	.main strong {
		color: #182b49;
		/*color: #000000;*/
		font-size: 0.9rem;
	}
}

.main em {
	color: #182b49;
	font-style: italic;
	font-weight: normal; /* bold; */
}

.main h1 em {
	font-style: italic;
	font-weight: bold;
}
.main strong em {
	color: #182b49;
	font-style: italic;
	font-weight: bold;
}

.main li {
	color: #182b49;
	font-size: 2rem;
	font-weight: normal;
}
@media screen and (min-width: 1024px) {
	.main li {
		color: #182b49;
		font-size: 0.9rem;
		font-weight: normal;
	}
}

.main li em {
	color: #182b49;
	font-size: 2rem;
	font-weight: normal;
}
@media screen and (min-width: 1024px) {
	.main li em {
		color: #182b49;
		font-size: 0.9rem;
		font-weight: normal;
	}
}

.main ul.p {
	/*list-style-type: none;*/
	padding-left: 15px;
    margin: 0;
}

.main ul.p li {
	margin: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.main ul.p li em {
	color: #182b49;
	font-size: 2rem;
	font-style: italic;
	font-weight: normal; /* bold; */
}
@media screen and (min-width: 1024px) {
	.main ul.p li em {
		color: #182b49;
		font-size: 0.9rem;
		font-style: italic;
	font-weight: normal; /* bold; */
	}
}




.main table {
	border: 1px dotted black;   /* replaces border="1" */
	border-collapse: collapse; /* makes cellspacing="0" */
	margin-top: 10px;
	margin-left: 15px;
	/* scrollable table because broader then screen */
	display: block; /* https://stackoverflow.com/questions/5533636/add-a-horizontal-scrollbar-to-an-html-table */
    overflow-x: auto;
    white-space: nowrap;
}
@media screen and (min-width: 1024px) {
	.main table {
		border: 1px dotted black;   /* replaces border="1" */
		border-collapse: collapse; /* makes cellspacing="0" */
		margin-top: 10px;
		margin-left: 15px;
		display: table;
		overflow-x: hidden;
		white-space: normal;
	}
}

.main table td {
	padding-left: 7px;
	padding-right: 7px;
	border: 1px dotted;
}
.main table td p {
	padding-left: 0;
	font-size: 1.2rem;
}
@media screen and (min-width: 1024px) {
	.main table td p {
		padding-left: 0;
		font-size: 1rem;
	}
}


/* navigation links on top of page */

div.navigation_block {
	font-size: 2rem;
	display: inline;
	margin: 10px;
	float: none;	
}
@media screen and (min-width: 1024px) {
	div.navigation_block {
		font-size: 0.9rem;
		display: inline;
		margin: 10px;
		float: none;
	}
}
div.previous-article {
	float: left;
	text-decoration: underline dotted;
}
div.next-article {
	float: right;
	text-decoration: underline dotted;
}

.navigation_block a {
	text-decoration: none;	
	cursor: pointer;
}
.navigation_block a:link {
	color: #005983;
}
.navigation_block a:visited {
	color: #005983;
}
.navigation_block a:hover {
	color: #FFFFFF;
	background-color: #005983;
}
.navigation_block a:active {
	color: #005983;
}