/*
Groen L  #a7c280
Groen D  #699250
Paars    #481349
Lavendel #898ec3, #6c91bf
*/
html{color:#000;background:#fff no-repeat;overflow-y:scroll;font-size:100%;min-width:320px;text-size-adjust:100%;box-sizing:border-box;cursor:default;font-feature-settings:'onum'}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,figure{margin:0;padding:0;box-sizing:border-box}
abbr,acronym{border:0;font-variant:normal}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}
caption,th{text-align:left}
del,ins{text-decoration:none}
fieldset,img,button{border:0}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
legend{color:#000}
ul,ol{padding:0}
ul{list-style:disc outside;margin-left:1.2em;}
ol{list-style:decimal outside;margin-left:1.4em;}
li{margin:0;padding:0}
q::before,q::after{content:''}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none}
article,aside,figure,footer,header,main,nav,section{display:block}
select,input{background:none}
textarea{resize:none}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
a{text-decoration:none}
b,strong{font-weight:bold}
i,em{font-style:italic}
a[href],label[for],button{cursor:pointer}
input[type=text]::-ms-clear{display:none}/* The ::-ms-clear pseudo-element represents the "clear button" at the edge of a text <input> */
ul.horizontal{font-size:1px;list-style:none}
ul.horizontal li{font-size:1rem;display:inline-block}

html{
	overflow-y:scroll;
	background-color:#a7c280;
	color:#fff;
	font-family:Verdana,sans-serif;
	line-height:150%;
	cursor:default;
}
section{
	margin:1em 0;
}
video,iframe{
	max-width:100%;
}
table{
	border:0;
	padding:0;
}
td{
	vertical-align:top;
}
ul{
	list-style-type:square;
}
h1,h2,h3,p{
	margin:1em 0 0.5em;
}
h1{
	font-size:200%;
	line-height:1.25;
	color:#699250;
}
h2{
	font-size:160%;
}
h3{
	font-size:120%;
}
.two-column h3{
	font-weight:bold;
	font-size:100%;
	margin:1em 0 -1em;
}
h4+p{
	margin-top:0;
}
p>q{
	display:block;
	font-weight:bold;
	padding:0.5em 0;
	font-style:italic;
}
a{
	color:#6c91bf;
}
a:hover{
	text-decoration:underline;
}
main{
	display:block;
	box-sizing:border-box;
	position:relative;
	max-width:640px;
	margin:120px auto 0;
}
main>h1{
	padding:0 10px;
}
header{
	background:#481349;
	border-radius:10px;
	box-sizing:border-box;
	display:block;
	max-width:640px;
	opacity:0.9;
	padding:10px 5px;
	position:fixed;
	text-align:center;
	top:10px;
	width:100%;
	z-index:3;
}
header a{
	display:inline-block;
	padding:10px;
	color:#fff;
	background:none;
	text-decoration:none;
}
audio{
	width:100%;
	max-width:450px;
}
#title{
	font-size:160%;
	color:#fff;
}
nav{
	color:#fff;
}
.single-column,.two-column{
	background:#fff repeat-y top right;
	color:#000;
	border:1px solid #898ec3;
	padding:10px 20px;
}
.single-column h2,.two-column h2{
	color:#699250;
}
.center{
	text-align:center;
}
.caption{
	font-weight:bold;
}
.footnote,.note{
	color:#481349;
	font-size:80%;
}
.footnote{
	margin-top:5em;
	border-top:1px solid #481349;
}
.photo{
	border:2px solid #481349;
}
.last{
	border-bottom:2px dashed #a7c280;
	margin-bottom:10px;
	padding-bottom:20px;
}
.muzen span.hover{
	cursor:pointer;
	border-bottom:1px dashed #481349;
}
.footnote img{
	float:right;
	margin-left:5px;
}
.photo-initial{
	padding:10px 0px 20px 0px;
}
.straat figcaption{
	background-color:#481349;
	border-radius:24px 0 0 0;
	color:#fff;
	float:right;
	font-weight:bold;
	margin-top:20px;
	padding:0 5px 0 20px;
}
.straat figure img{
	border-top:3px solid #481349;
	width:100%;
}
div.line{
	color:#699250;
}
.line.hilite{
	color:#481349;
	background-color:#fff;
	border:1px solid #481349;
	padding:1px 2px;
	margin-left:-2px;
}
button.showphoto{
	margin-bottom:20px;
	background:inherit;
}
button.showphoto:focus{
	outline:1px dotted #481349;
}
img.slide{
	border:0 solid #481349;
	border-width:3px 0 1px 0;
	width:500px;
}
label,input.radio,area{
	cursor:pointer;
}
span.line{
	font-weight:bold;
	text-align:center;
	width:100%;
}
.quote-left,.quote-right{
	padding:1ex 1em;
	font-size:120%;
	font-weight:bold;
	color:#481349;
	width:128px;
}
.quote-left{
	float:left;
	padding-left:0;
}
.quote-right{
	float:right;
	padding-right:0;
}
body{
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:300px 50px;
}
body.muzen{
	background-image:url(../images/bg-boeventucht.gif);
}
body.straat{
	background-image:url(../images/bg-straat.gif);
}
.voorpagina header{
	background-image:url(../images/bg-header-hm.webp);
}
.coornhert header{
	background-image:url(../images/bg-header-ch.gif);
}
.muzen header{
	background-image:url(../images/bg-header-dr.gif);
}
.straat header{
	background-image:url(../images/bg-header-cs.gif);
}
.sign{
	color:#fff;
	font-weight:bold;
	border:3px double #fff;
	padding:0 4px;
	background-color:#00f;
}
.polaroids{
	align-items:flex-start;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	padding-top:20px;
}
.polaroid{
	display:inline-block;
	flex:0 0 auto;
	max-width:150px;
	text-align:center;
	text-decoration:none;
	width:32vw;
}
.polaroid img{
	border-radius:10px;
}
.polaroids a{
	color:#4f6d3d;
}
.dialog p{
	padding-left:2em;
}
.dialog span{
	margin-left:-2em;
	display:inline-block;
	width:2em;
	float:left;
}
.dialog p:nth-of-type(even){
	font-style:italic;
}
.author{
	font-style:italic;
	color:#898ec3;
}
.lied h2,.lied p,.lied section{
	background-color:rgba(255,255,255,0.5);
}
.lied h2{
	letter-spacing:-0.05em;
}
.tegels{
	text-align:center;
}
.tegels+.tegels{
	border-top:1px dashed #eee;
	padding-top:20px;
}
.tegels figure{
	margin-bottom:20px;
}
.tegels figcaption{
	text-align:right;
	font-style:italic;
	padding:0 15px;
}
.tegels figure p{
	padding:0 15px;
}
div.border{
	border:1px solid #898ec3;
	background-color:#fff;
	color:#000;
	padding-bottom:10px;
	margin-bottom:10px;
}
div.titlebar{
	font-weight:bold;
	cursor:pointer;
	background:#898ec3 url(../images/button-dn.gif) no-repeat center right;
	color:#fff;
	padding:0 2px;
}
div.client{
	padding:10px;
	display:none;
}
#wall{
	width:482px;
	height:400px;
	border:0px solid #000;
	margin:auto;
}
.text{
	width:350px;
}
.number{
	width:50px;
}
select.number{
	width:75px;
}
textarea.text{
	height:100px;
}
.text, .number, .dummy{
	border:1px #898ec3 inset;
}
.button{
	border:1px #898ec3 outset;
	background-color:#CCCEE6;
	margin:10px 0;
}
.tabs{
	display:block;
	font-size:small;
	list-style:none;
	margin:0;
	padding:0 10px;
}
.tabs li{
	display:inline-block;
	text-align:center;
	background:#cfd1e7;
	border:1px solid #898ec3;
	margin:0 2px 10px;
	opacity:0.8;
}
li.tab-active{
	color:#000;
	background:#fff;
	border:1px solid #fff;
	opacity:1;
}
.tabs li.tab-passive:hover{
	opacity:1;
	background:#898ec3;
}
.tabs a{
	padding:2px 10px 0;
	color:#000;
}
.tabs a:hover{
	text-decoration:none;
}
#player{
	height:28px;
	border:1px solid #699250;
}
.voorpagina .single-column{
	margin-top:2em;
}
.voorpagina .single-column h2 a img{
 float:right;
 margin:0 0 10px 1em;
}
.buttonbar a{
	display:inline-block;
	width:100px;
	height:100px;
	background-repeat:no-repeat;
	border:1px solid #481349;
}
.buttonbar a[href^="straat"]{
	background-image:url('../images/btn-straat-impre.gif');
}
.buttonbar a[href^="straatfeest"]{
	background-image:url('../images/btn-straat-feest.gif');
}
.buttonbar a[href^="straatroute"]{
	background-image:url('../images/btn-straat-route.gif');
}
input[id^="dir"]{
	vertical-align:baseline;
}
label[for^="dir"]{
	vertical-align:top;
	display:inline-block;
	max-width:calc(100% - 20px);
}
@media (max-width:639px){
	header,main{
		margin-left:5px;
		margin-right:5px;
		width:calc(100% - 10px);
	}
	.buttonbar{
		align-items:flex-start;
		display:flex;
		flex-flow:row wrap;
		justify-content:space-between;
		padding:20px 20px 0;
	}
	iframe{
		max-height:calc(calc(100vw - 80px) * 0.62);
	}
	.photo-initial img{
		width:100%;
	}
}
@media (min-width:640px){
	header{
		left:calc(50% - 320px);
	}
	.single-column{
		padding:20px 40px;
	}
	.two-column{
		width:calc(50% - 5px);
		padding:10px 20px;
		font-size:small;
	}
	#column1{
		float:left;
	}
	#column2{
		float:right;
	}
	.tabs{
		top:33px;
		position:absolute;
	}
	.tabs li{
		float:left;
		height:24px;
	}
	li.tab-active{
		padding-bottom:3px;
	}
	.buttonbar{
		position:absolute;
		left:-80px;
		top:200px;
		width:100px;
	}
	.buttonbar a:hover{
		width:260px;
	}
	.buttonbar a[href^="straat"]:hover{
		background-image:url('../images/btn-straat-impre-hover.gif');
	}
	.buttonbar a[href^="straatfeest"]:hover{
		background-image:url('../images/btn-straat-feest-hover.gif');
	}
	.buttonbar a[href^="straatroute"]:hover{
		background-image:url('../images/btn-straat-route-hover.gif');
	}
	.photo-initial img{
		float:right;
		padding-left:1em;
	}
}

@media print{
	header,#headerbg,.buttonbar,.noprint,.tabs{
		display:none;
	}
	main{
		width:100%;
		left:0;
	top:0;
		padding:10px;
	}
	main{
		overflow:visible;
	}
	#column1,#column2,#poezie{
		top:30px;
		border:0;
	}
	.single-column,.two-column{
		position:relative;
		top:0px;
		border:0;
	}
	.noscreen{
		display:block;
	}
}
@media screen{
	.noscreen{
		display:none;
	}
	.single-column,.two-column,.border{
		box-shadow:0px 0px 10px #3a6ea5;
	}
	.tegels img{
		box-shadow:2px 2px 10px #666;
	}
}