:root	{
	--breedte-inactief: 9.5em;
	--hoogte-inactief: calc(var(--breedte-inactief) * 1.4);
	--kleur-nummer-kop: black;
	--kleur-achtergrond-nummer-kop: #b37833;
	--kleur-andere-delen-achtergrond: var(--kleur-achtergrond);
	--kleur-andere-delen-achtergrond-hover: var(--kleur-achtergrond-navigatie);
	--kleur-trefwoorden: black;
	--kleur-trefwoorden-achtergrond: var(--kleur-link);
	--kleur-trefwoorden-achtergrond-hover: #FFFFDD;
}

/*DIV#alleNummersDeTank:not(.gezocht)	{
	&	DIV.nummer	{
		display: block;
	}
}*/
DIV#alleNummersDeTank.gezocht	{
	&	DIV.nummer	{
		display: none;
	}
	&	DIV.nummer:has(MARK)	{
		display: block;
	}
}

DIV#alleNummersDeTank	{
	align-content: start;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;

	& .zoektermnietgevonden	{
		display: none;
	}

	& >	DIV.nummer	{
		background-attachment: scroll, local;
		background-position: top left;
		background-repeat: no-repeat;
		background-size: var(--breedte-inactief) var(--hoogte-inactief);
		border: 2pt solid var(--kleur-achtergrond-navigatie);
		cursor: pointer;
		height: var(--hoogte-inactief);
		margin: .5vh;
		min-height: var(--hoogte-inactief);
		overflow: hidden;
		transition: all .25s;
		width: var(--breedte-inactief);

		&	DIV.download	{
			display: none;
		}

		&	DIV.datum	{
			font-style: italic;
			/*position: absolute;
			bottom: 0;*/
		}

		&	DIV.metadata	{
			display: none;
		}

		&	DIV.nummerblok	{
			color: black;
			font-weight: bold;
			margin: 0;
			min-height: 2em;
			left: 0;
			line-height: 2em;
			padding-left: .25em;
			text-shadow: 1pt 1pt 0 white;
			top: -0.00001vh;
		}
		&	DIV.knoppen	{
			display: none;
		}

		&	H2	{
			font-family: "Stencil";
			font-size: 3.5em;
			line-height: .8em;
			margin: .15em .25em -.25em 0;
		}

		&	TABLE	{
			display: none;
		}
	}

	& >	DIV.nummer:not(.actief):hover	{
		border-color: var(--kleur-link-actief);
	}


	& >	DIV.nummer.actief	{
		background-color: var(--kleur-achtergrond-navigatie);
		cursor: default;
		height: auto;
		position: relative;
		width: 100%;

		@media(max-width: 35em) {
			padding-left: 0;
		}
		@media(min-width: 35em) {
			padding-left: calc(var(--breedte-inactief) + .5em);
		}

		&	DIV.download	{
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: var(--breedte-inactief);
			height: calc(var(--hoogte-inactief) + 1em);
		}
		&	DIV.download.nietbeschikbaar	{
			cursor: not-allowed;
			display: flex;
			justify-content: center;
  			align-items: center;

		}
		&	DIV.download.nietbeschikbaar	>	DIV	{
			color: black;
			font-family: "Stencil";
			font-size: 1.25em;
			text-align: center;
			text-shadow: 0 0 .33em white;
			transform: rotate(-35deg);
		}

		&	P.inkijkexemplaar	{
			font-style: italic;
		}

		&	P.inkijkexemplaar::before	{
			content: "📖";
		}

		@media(max-width: 35em) {
			&	DIV.metadata	{
				display: block;
				min-height: calc(var(--hoogte-inactief) + 1em);
				padding-left: calc(var(--breedte-inactief) + .5em);

				&	>	P:not(.info)	{
					display: block;
					margin: 0;
					font-style: italic;
					text-indent: 1em hanging;
				}
			}
		}
		@media(min-width: 35em) {

			&	DIV.metadata	{
				display: block;

				&	>	P:not(.info)	{
					display: inline;
					margin-right: .5em;
					font-size: .8em;
					font-style: italic;
				}
			}
		}

		&	DIV.nummerblok	{
			background: var(--kleur-achtergrond-nummer-kop);
			color: var(--kleur-nummer-kop);
			line-height: inherit;
			padding-right: .25em;
			text-align: right;
			text-shadow: inherit;
		}

		&	DIV.datum	{
			float: right;
		}

		&	DIV.knoppen	{
			display: block;
			float: right;
			margin: .25em .25em 0 .5em;

			&	INPUT	{
				height: 1.25em;
			}
		}

		&	H2	{
			float: left;
			font-size: 2em;
			font-weight: normal;
			max-width: 70%;
			overflow: hidden;
			padding-top: .1em;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&	TABLE	{
			border-collapse: collapse;
			display: table;
			hyphens: auto;
			-webkit-hyphens: auto;
			width: 100%;

			&	TR:hover	{
				background-color: var(--kleur-achtergrond);

				&	A.overigedelen	{
					background: var(--kleur-andere-delen-achtergrond-hover);
				}

				/*
				&	DIV.trefwoorden	{
					max-height: 100vh;
				}
				*/
			}

			&	TR:has(MARK)	{
				border: .1vw solid var(--kleur-MARK);

				/*
				& DIV.trefwoorden	{
					max-height: 100vh;
				}
				*/
			}


			&	TD	{
				margin: inherit 0;
				text-align: left;
				vertical-align: top;
			}
			&	TD:first-of-type	{
				text-indent: 1em hanging;
				width: 40%;
			}
			&	TD:nth-of-type(2)	{
				text-align: center;
				width: 5%;
			}
			&	TD:nth-of-type(3)	{
				width: 25%;
			}
			&	TD:last-of-type	{
				width: 30%;
			}
		}
	}
}

A.download	{
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;

	& > DIV	{
		text-align: center;
	}
}
A.download:active	{
	background: inherit;
}

A.overigedelen	{
	font-size: .8em;
	font-style: italic;
	background: var(--kleur-andere-delen-achtergrond);
	border-radius: .75em;
	hyphens: manual;
	-webkit-hyphens: manual;
	padding: 0 .5em;
}
A.overigedelen::before	{
	content: "➥\00A0";
}

A.trefwoord	{
	background-color: var(--kleur-trefwoorden-achtergrond);
	border-radius: .75em;
	color: var(--kleur-trefwoorden);
	/*display: inline-block;*/
	font-size: .8em;
	hyphens: manual;
	-webkit-hyphens: manual;
	/*max-width: 5em;*/
	padding: 0 .5em;
	/*overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;*/

	&	:hover	{
		background-color: var(--kleur-trefwoorden-achtergrond-hover);
		/*max-width: 1000em;*/
		text-decoration: none;
	}
}
A.trefwoord:has(MARK)	{
	color: var(--kleur-MARK-tekst);
	background-color: var(--kleur-MARK);
	font-weight: bold;
}

DIV#gevonden,
DIV#nietsgevonden	{
	display: none;
	margin: 1em auto 0;
	max-width: 45em;
}
DIV#gevonden	{
	font-style: italic;
}
/*
DIV.trefwoorden	{
	max-height: 1.75em;
	overflow-y: hidden;
	transition: all .15s;
}
*/

DIV.zoekbalk	{
	left: 0;
	position: sticky;
	top: .000001vh;
	width: 100%;
}
DIV.zoekopties	{
	font-size: .8em;
}

DIV.lijst	P	{
	margin: 0;
	text-indent: 2em hanging;
}
DIV#index,
DIV#schrijvers	{
	column-count: auto;
	margin-top: 1em;

	&	H2	{
		column-span: all;
	}
}
DIV#index	{
	column-width: 20em;
}
DIV#schrijvers	{
	column-width: 10em;
}

DIV#help	{
	background: rgba(0, 0, 0, .5);
	bottom: 0;
	display: none;
	left: 0;
	padding-left: var(--breedte-menu);
	position: fixed;
	right: 0;
	top: 0;
}
DIV#help	ASIDE	{
	background: var(--kleur-achtergrond-navigatie);
	margin: 15% auto;
	max-height: 70%;
	max-width: 35em;
	overflow: auto;
	padding: 2em;

	&	H2	{
		margin-top: 0;
	}

	&	TT	{
		background-color: white;
		color: black;
		padding: 0 .25em;
	}
}