/*%%%%%%%%%%%%%%%%%%%%%% Body style */
body
{
	font-family: Verdana;
	font-size: 20px;
	color: black;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background-image:url(../images/bmbackground2025.jpg);
	background-position:center top;
}

.maindiv
{
	padding: 0px;
	margin: auto;
	text-align:left;
	max-width: 1440px;
	background-color: #CCCCCC; /*#C8CCC5;*//*#999999;*/ /*#828282;*/ /*#F0F0F0;*/
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.noscriptwarning
{
	margin: auto;
	background-color: red;
	font-size: 38px;
	text-align: center;
}
.noscriptwarning a:link
{
	color: white;
	background-color: transparent;
}
.noscriptwarning a:visited
{
	color: white;
	background-color: transparent;
}
.noscriptwarning a:hover
{
	color: white;
	background-color: #AFAFAF;
	cursor: pointer;
}

.fontgroot
{
	font-size: 28px;
}

/*%%%%%%%%%%%%%%%%%%%%%% Scrollbar */
::-webkit-scrollbar
{
	width: 10px;
}

::-webkit-scrollbar-track
{
	background: #AAA; 
}
 
::-webkit-scrollbar-thumb
{
	background: #777; 
}

::-webkit-scrollbar-thumb:hover
{
	background: #444; 
}

/*%%%%%%%%%%%%%%%%%%%%%%*/

.menuinhoud
{
	background-color: #DFDFDF;
}

@media (width > 1440px)
{
.voorbeeld
	{
	width: 1440px;
	height: 500px;
	}
}

@media (width < 1440px)
{
	.voorbeeld
	{
	width: 100vw;
	height: 34.72vw;
	}
	.detailindexindex[open]
	{
	max-width: 100vw;
	}
	.fontgroot
	{
		font-size: calc(16.923px + 0.769vw);
	}
}

@media (width < 400px)
{
	.detailindex
	{
	max-width: 100vw;
	}
	.fontgroot
	{
		font-size: 20px;
	}
}

/*%%%%%%%%%%%%%%%%%%%%%% Tekst kleur */
a:link
{
	color: #1E00A1;
	background-color: transparent; 
	text-decoration: none;
}
a:visited
{
	color: #1E00A1;
	background-color: transparent;
	text-decoration: none;
}
a:hover
{
	color: #1E00A1;
	background-color: #AFAFAF;
	text-decoration: none;
}
a:active
{
	color: #1E00A1;
	background-color: transparent;
	text-decoration: underline;
}

/*%%%%%%%%%%%%%%%%%%%%%% kleuren */
.grijs
{
	color: #AAAAAA;
}
.grijs a
{
	color: #AAAAAA;
}
.blauw
{
	color: #1E00A1;
}
.groen
{
	color: #2B8000;
}
.oranje
{
	color: #C06000;
}

.oranje a
{
	color: #C06000;
}

/*%%%%%%%%%%%%%%%%%%%%%%	details */

details summary span.open
{
	display:none;
}
details[open] summary span.open
{
	padding: 0px;
	margin: 0px;
	display: inline;
}
details[open] summary span.closed
{
	display: none;
}

.hoverdiv
{
	width: 100%;
}
.hoverdiv:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}
.hoverdiv a:hover
{
	background-color: transparent;
}

.hoverspan:hover
{
	background-color: #AFAFAF;
	cursor: pointer;
}

.hoverdiv1
{
	margin-left: 21px;
}
.hoverdiv1:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.hoverdiv2
{
	margin-left: 42px;
}
.hoverdiv2:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.grijs1
{
	color: #AAAAAA;
	margin-left: 21px;
}

.grijs2
{
	color: #AAAAAA;
	margin-left: 42px;
}


/*
.voorkeuren
{
	position: absolute;
	top: 0px;
	text-align: right;
	overflow: auto;
	line-height: 1.4;
	margin-left: 1000px;
	width: 280px;
	z-index: 2;
}
*/
.detailindex	
{
	position: absolute;
	top: 0px;
	overflow: auto;
	line-height: 1.4;
	margin-left: 0px;
	width: 130px; /*90*/
	z-index: 2;
}
.detailindex[open]
{
	margin-left: 0px;
	height: 100vh;
	background-color: #DFDFDF;
	width: 400px;
}

.detailindexindex
{
	position: absolute;
	top: 0px;
	overflow: auto;
	line-height: 1.4;
	margin-left: 0px;
	width: 90px;
	z-index: 2;
}
.detailindexindex[open]
{
	margin-left: 0px;
	height: 100vh;
	background-color: #DFDFDF;
	width: 1440px;
}

.details0	
{
	margin-left: 0px;
}
.details0:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.detailsinfo	
{
	margin-left: 0px;
}

.details1
{
	margin-left: 21px;
}
.details1 a:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.details2
{
	margin-left: 42px;
}
.details2 a:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.details3
{
	margin-left: 21px;
}
.details3:hover
{
	background-color: #CCCCCC;
	cursor: pointer;
}

.details3grijs
{
	margin-left: 21px;
}

.genre
{
	margin-left: 0px;
	cursor: pointer;
	color: #2B8000;
}
.genre:hover
{
	background-color: #CCCCCC;
}

.genregrijs
{
	cursor: pointer;
	color: #AAAAAA;
}

/*%%%%%%%%%%%%%%%%%%%%%%	net boven de audio */
.previousnext
{
	color: black;
	padding: 0px;
	margin: 0px;
}

.previousnext a
{	
	color: black;
}

.eerstevandrie
{
	
	width: 33.33%;
	float: left;
}

.tweedevandrie
{
	width: 33.33%;
	float: left;
	text-align: center;
}

.derdevandrie
{
	width: 33.33%;
	float: right;
	text-align: right;
}

.playtoggle
{
	cursor: pointer;
}
.playtoggle:hover
{
	background-color: #AFAFAF;
}

.hetgeluid
{
	opacity: 0.5;
	width:100%;
	clear: left;
	margin-top: 3px;
	padding-top: 0px;
	border: 0px;
	background-color: #F0F0F0; /* #F0F0F0;*/ /*voor Safari #404040;*/
	/*margin-bottom: 0px;*/
}


#deinfospan:hover
{
	background-color: #AFAFAF;
	cursor: pointer;
}

.deinfo
{
	margin: 0px;
	padding-bottom: 4px;
}

.deinfo a:hover
{
	background-color: #AFAFAF;
}