:root {
	--gray1: #555;
	--gray2: #888;
	--gray3: #CCC;
	--gray4: #DDD;
	--gray5: #EEE;

	--blue1: #001428;
	--blue2: #032648;
	--blue3: #003D79;
	--color: #0081FF;
}

* { margin: 0; padding: 0; outline: none; border: 0; font-size: 100%; box-sizing: border-box; }

body { background: #eee; font: 12px arial; -webkit-text-size-adjust: none; min-width: 320px; line-height: 25px; font-family: arial, sans-serif; }

img { display: inline; }
a { color: #000; }
a:hover { color: #555; }

h1, h4 { font-size: 20px; color: #000; }
h2, h3, h5 { font-size: 15px; }

.wrapper { background: #fff; display: flex; flex-direction: column; }
.container { order: 3; display: flex; flex: 1; }

.clear { display: block; clear: both; }

form { padding: 15px; display: flex; gap: 10px; flex-direction: column; align-items: flex-start; }
input { border: 1px solid black; padding: 10px;}
input[type="submit"] { border: 0; font-weight: bold; background: black; color: white; padding: 10px 20px; text-transform: uppercase; letter-spacing: 1px; border-radius: 3px; }
input[type="checkbox"] { vertical-align: middle; height: 17px; width: 17px; margin: 0 5px; }
	
header { order: 2; color: #fff; }

nav { order: 1; background: #032648; padding: 10px; display: flex; gap: 10px; justify-content: flex-end; }
nav a { background-color: #003d79; text-decoration: none; display: inline-block; padding: 0 8px; height: 30px; color: #fff; font-size: 11px; line-height: 29px; border-radius: 3px; }
nav a:hover { color: #fff; text-decoration: underline; }

main { order: 1; flex: 1; box-sizing: border-box; display: flex; gap: 10px; flex-direction: column; }
main .half { display: flex; gap: 10px; flex-direction: column; }
main .omom { display: flex; flex-direction: column; }
main .omom .div:nth-child(even) { background: #eee; }

main .div { padding: 10px 15px; display: flex; gap: 15px; min-width: 0; width: 100%; }
main .div img { height: 67px; aspect-ratio: 4/5; margin: 4px 0; object-fit: cover; }
main .div div { min-width: 0; width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; }

main .div b, main .div h3, main .div span, main .link li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; max-width: 100%; }

footer { order: 4; background: #eee; padding: 10px; font-size: 12px; text-align: right; }
footer ul { list-style: none; display: flex; gap: 20px; justify-content: flex-end; }

header ul { background: #cccccc; list-style: none; display: flex; line-height: 50px; gap: 15px; padding-right: 15px; }
header ul a { color: #555; font-size: 12px; text-decoration: none; }
header li:nth-child(n+3)::before { content: '❯'; padding-right: 15px; color: #555; }

header .infonu { min-width: 50px; height: 50px; background: url(/images/logo.png); color: transparent !important; overflow: hidden; border-right: 1px solid white; }
header .infonu a { color: transparent !important; }

aside { order: 2; background: #ccc; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
aside ul { list-style: none; display: flex; flex-direction: column; gap: 1px; }

aside ul a { text-decoration: none; background-color: #eee; display: block; padding: 6px 15px; }
aside ul a:hover, aside ul .active b { text-decoration: underline; }
aside ul .active { order: -1; }
aside ul .active ul { background-color: #fff; padding: 6px 0; }
aside ul .active ul li { margin: 0; }
aside ul .active ul a { background-color: #fff; padding: 2px 15px; }

aside .info { background: #eee; padding: 10px 15px;  }

.navi { }
.navi ul { width: 100%; list-style-type: none; display: flex; gap: 5px; white-space: nowrap; justify-content: center; }
.navi li { text-align: center; line-height: 30px; background: #eee; border-radius: 3px; font-size: 11px; }
.navi li a, .navi li span { display: block;  text-decoration: none; font-size: 11px; padding: 0 10px; }
.navi li a:hover { background: #555; color: #000; }	
.navi li:not(:has(a)) { opacity: 0.5; }
.navi li:has(b) { opacity: 1; }
	

.welkom h2 { color: #0081ff; }

.index { display: flex; gap: 10px; }

.border { border: 1px solid #ccc; word-break: break-word; overflow-wrap: break-word; min-width: 0; }
.border h2 { color: #000; background: #ddd; padding: 10px 15px; }
.border ol { margin: 10px 15px 10px 35px; line-height: 25px; }

.border.div404 { text-align: center; padding: 200px 0; font-weight: bold; font-size: 30px; }

.copy { padding: 10px 15px; }
main .related img { height: 38px; aspect-ratio: 5/4; object-fit: cover; }

.infoteurs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px;}
.infoteurs a { min-width: 120px; flex: 1 1 150px; padding: 10px 15px; background: #eee; }

.sources { padding: 10px 15px; }
.sources ul { margin: 0 0 0 20px; list-style: circle; }

.reacties { padding: 10px 15px; }
.reacties .infoteur { display: block; background: var(--gray5); padding: 10px 15px; margin: 10px 0 5px 0; }
.reacties div:not(:last-child) { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ccc; }

.text { border: 1px dashed #ccc; padding: 10px 15px; }

main .categories { gap: 1px; }
.categories div { background: #eee; padding: 10px 15px; }

.subcat { display: flex; flex-wrap: wrap; gap: 10px; }
.subcat h1 { color: #000; flex: 0 0 100%; border: 1px dashed #ccc; padding: 10px 15px; }
.subcat h2 { color: #000; background: #ddd; padding: 10px 15px; }
.subcategorie { border: 1px solid #ccc; min-width: 0; width: 100%; }
.subcategorie .div:nth-child(even) { background: #eee; }

article h1 { margin-bottom: 10px; }
article .foto { float: left; margin: 5px 15px 5px 0; width: 140px; aspect-ratio: 5/4; object-fit: cover; }
article .inl { font-weight: bold; display: block; }

article a { color: #003d79; }
article a:hover { color: #0081FF; }

article h1 { font-size: 22px; color: #000; }
article h2 { font-size: 18px; color: #000; }
article h3 { font-size: 14px; color: #000; }

article ul { margin: 0 0 0 20px; list-style: square; }
article ul li, article ol ul li { padding: 0 0 0 5px; }
article ol { padding: 0 0 0 33px; font-weight: bold; }
article ol li { padding: 0 0 0 0; }
article span, article ol ul li { font-weight: normal; }

article sub, article sup { font-size: 9px; line-height: 10px; }

article .imgdiv img, article .imgdivr img { vertical-align: middle; display: block; margin: 0 auto; }
article .imgdiv a, article .imgdivr a, article .imgdiv span, article .imgdivr span { color: #888; }
article .imgdiv, article .imgdivr { color: #888; background: #eee; margin: 0 15px 15px 0; padding: 10px; font-size: 10px; float: left; text-align: center; }
article .imgdivr { margin: 0 0 15px 15px; float: right; line-height: 18px; }

article .heel, article .none { width: 100%; empty-cells: show; border-spacing: 0px; padding: 0px; border-collapse: collapse; }
article .half { border-collapse: collapse; padding: 0; margin: 0 20px 0 0; float: left; }
article td, article .rij { border: 1px solid #888; padding: 8px; vertical-align: top; }
article th, article .kop { font-weight: bold; text-align: left; padding: 8px; border: 1px solid #888; background: #ccc; vertical-align: top; }
article th strong, article .th strong { font-weight: bold; }
article .om { background: #eee; vertical-align: top; }
article .width100 { width: 50%; }
article .none td, article .none th { border: 0px; }
article th h2, article th h3 { font-weight: bold; }

.code { border: 1px solid #ccc; background: #eee; padding: 11px 15px 11px 15px; }
article HR { margin: 10px 0 10px 0; background: #ccc; height: 1px; }

@media only screen and (max-width: 600px) {
	main .index { flex-direction: column; }
	header { white-space: nowrap; }
	header ul { overflow: scroll; }
	.container { flex-direction: column; margin: 15px; gap: 15px; }
	article .imgdiv img, article .imgdivr img { width: -webkit-fill-available; }
	article .imgdiv, article .imgdivr { max-width: 50vw; }
	.navi li { display: none; }
	.navi li.mob { display: block; }
}

@media only screen and (min-width: 601px) {
	header { margin: 10px 10px 0 10px; }
	.wrapper { max-width: 1100px; margin: 10px auto 0; }
	.container { margin: 10px; gap: 10px; }
	article { border: 1px solid #ccc; padding: 10px 15px; }
	article .imgdiv, article .imgdivr { max-width: 240px; }
	main { width: calc(100% - 290px); }
	aside { min-width: 280px; }
	.subcategorie { flex: 0 0 calc(50% - 5px); }
}