/* VOORBEELD VOOR DEV OMGEVING, VERVANG/VERWIJDER DIT ALS JE EEN NIEUW TEMPLATE INSTALLEERT */

body {
	font-family: Calibri;
	background-color: #EEE;
}

main, footer, header, nav, .breadcrumb {
	max-width: 800px;
	margin: 10px auto;
	background-color: white;
	border: solid 1px #CCC;
	padding: 15px;
}

nav, .breadcrumb {
	display: flex;
}

.menu {
	padding: 0;
	margin: 0;
	text-align: center;
	display: flex;
}

.menu li {
	list-style: none;
	padding: 0 5px;
}
.menu li:first-child {
	padding-left: 0;
}

.menu li:last-child {
	padding-right: 0;
}

.menu li a {
	font-weight: bold;
}

.menu li.active a,
.menu li.active a:link,
.menu li.active a:visited,
.menu li:has(*.active)>a {
	color: #000;
}

/* default submenu styling */
header+nav .menu li {
	position: relative;
}

header+nav .submenu li {
	padding: 0;
	background: #FFF;
}

header+nav .menu .submenu {
	display: none;
	text-align: left;
	padding: 0 5px;
 	position: absolute;
	border: #000 2px solid;
	background: #FFF;
}

header+nav .menu .submenu .submenu {
	top: 0;
	left: 100%;
}

header+nav .menu li:hover>.submenu {
  	display: block;
}
/* eind submenu styling */

.breadcrumb li {
	list-style: none;
	font-style: italic;
}

.breadcrumb li:not(:last-child)::after {
	content: ' >';
	padding-right: 5px;
	font-style: normal;
	font-family: monospace;
}

a, a:link, a:visited {
	color: #36F;
	text-decoration: none;
}

a:hover, a:focus, a:active {
	color: #F33;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	margin: 0;
	padding-top: 15px;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	padding-top: 0;
}

.text-block {
	overflow: auto;
}

ul.tags, ol.tags {
	list-style: none;
	padding: 0;
}

ul.tags li, ol.tags li {
	display: inline-block;
	list-style: none;
	width: fit-content;
}

ul.tags li:not(:last-child)::after, ol.tags li:not(:last-child)::after {
	content: " | ";
}