html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

/* A bit friendlier defaults for responsive layouts */
*, *::before, *::after {
	box-sizing: border-box;
}

dl{
	float:left;
	margin: 2px;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
	display:block;
}

blockquote, q{
	quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after{
	content:"";
	content:none;
}

ins{
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark{
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del{
	text-decoration:line-through;
}

abbr[title], dfn[title]{
	border-bottom:1px dotted;
	cursor:help;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

hr{
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0;
}


input, select{
	vertical-align:middle;
}

select, input, textarea, button{
	font:99% sans-serif;
}

pre, code, kbd, samp{
	font-family:monospace, sans-serif;
}

a:hover, a:active{
	outline:none;
}

ul, ol{
	margin-left:2em;
}

ol{
	list-style-type:decimal;
}

nav ul, nav li{
	margin:0;
	list-style:none;
	list-style-image:none;
}

small{
	font-size:85%;
}

strong, th{
	font-weight:bold;
}

td{
	vertical-align:top;
}

sub, sup{
	font-size:75%;
	line-height:0;
	position:relative;
}

sup{
	top:-0.5em;
}

sub{
	bottom:-0.25em;
}

pre{
	white-space:pre;
	white-space:pre-wrap;
	word-wrap:break-word;
	padding:15px;
}

textarea{
	overflow:auto;
}

.ie6 legend, .ie7 legend{
	margin-left:-7px;
}

input[type="radio"]{
	vertical-align:text-bottom;
}

input[type="checkbox"]{
	vertical-align:bottom;
}

.ie7 input[type="checkbox"]{
	vertical-align:baseline;
}

.ie6 input{
	vertical-align:text-bottom;
}

label, input[type="button"], input[type="submit"], input[type="image"], button{
	cursor:pointer;
}

button, input, select, textarea{
	margin:0;
}

input:valid, textarea:valid{}

input:invalid, textarea:invalid{
	border-radius:1px;
	-moz-box-shadow:0px 0px 5px red;
	-webkit-box-shadow:0px 0px 5px red;
	box-shadow:0px 0px 5px red;
}

.no-boxshadow input:invalid, .no-boxshadow textarea:invalid{
	background-color:#f0dddd;
}

a{
	-webkit-transition:color 0.2s ease-in;  
   -moz-transition:color 0.2s ease-in;  
   -o-transition:color 0.2s ease-in;  
   transition:color 0.2s ease-in;
   font-weight:bold;
   color:#FFCD00;
}

button{
	width:auto;
	overflow:visible;
}

.ie7 img{
	-ms-interpolation-mode:bicubic;
}

img, object, embed, video{
	max-width: 100%;
}

.ie8 img{
	width:auto;
	max-width:none;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img{
	width:100%;
}

body, select, input, textarea{
	color:#444;
}

h1, h2, h3, h4, h5, h6{
	font-weight:bold;
}

h1, h2{
	font:bold 18px Verdana, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}	

html{
	filter:expression(document.execCommand("BackgroundImageCache", false, true));
	overflow-y:scroll;
}

body{
	height:100%;
	line-height:1;
	font:normal 13px/21px Verdana, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	background:#2394FB;
	color:#fff;
	*font-size:small;
}

/* --------------------------------------------
   Algemene onderdelen en classes
-------------------------------------------- */
::-moz-selection{
	background:#ffcd00;
	color:#fff;
}

::-webkit-selection{
	background:#ffcd00;
	color:#fff;
}

::selection{
	background:#ffcd00;
	color:#fff;
}

.alignleft{
	display:inline;
	float:left;
}

.alignright{
	display:inline;
	float:right;
}

.aligncenter{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.clear{
	clear:both;
	display:block;
	font-size:0;
	height:0;
	line-height:0;
	width:100%;
}

table tr td{
	padding:0;
}

h1, h2, h3, h4, h5, h6, p{
	margin:0 0 21px;
}

article ul, article ol{
	margin:0 0 21px 25px;
}

article ul ul, article ol ol, article ol ul, article ul ol{
	margin:0 0 0 25px;
}

/* --------------------------------------------
   Template opbouw
-------------------------------------------- */

#container{
	margin:0 auto;
	width:885px;
	clear:both;
	overflow:hidden;
}

#header{
	height:175px;
	width:885px;
	float:left;
	position:fixed;
	background:#2394FB;
	z-index: 5;
}

#branding{
	width:885px;
	background:url(images/logo.gif);
	height:130px;
	display:block;
	float:right;
	text-indent:-9999px;
}

#nieuwsticker{
	width: 370px; 
	height: 27px; 
	position:absolute;
	top:96px;
	left:360px;
	overflow: hidden;
	display:none;
}

#nieuws a{
	color:#fff;
	font:bold 14px Verdana, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}

.tickercontainer {
	width: 370px; 
	height: 27px; 
	margin: 0; 
	padding: 0;
	overflow: hidden;
}

.tickercontainer .mask {
	position: relative;
	width: 370px;
	overflow: hidden;
}

ul.newsticker {
	position: relative;
	left: 370px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.newsticker li {
	float: left;
	margin: 0;
	padding: 0;
}

ul.newsticker a {
	white-space: nowrap;
	padding: 0;
}

.mailadres{
	position:absolute;
	top:134px;
	font:bold 14px Verdana, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	text-decoration:underline;
	color:#fff;
}	

#hoofdmenu{
	width:319px;
	position:fixed;
	top:175px;
	z-index: 10;
}

#hoofdmenu ul{
	list-style:none;
}

#hoofdmenu ul li{
	float:left;
	margin:0 5px 5px 0;	
}

#hoofdmenu ul li:nth-child(2n){
	float:left;
	margin:0 0 5px;
}	

#hoofdmenu ul li a{
	display:block;
	width:157px;
	height:99px;
	text-indent:-9999px;	
}

#hoofdmenu ul li a:last-child{
	
}

#hoofdmenu ul li.mijnverhaal a{
	background:url(images/mijnverhaal.gif) 0 0;	
}

#hoofdmenu ul li.mijnverhaal a:hover, #hoofdmenu ul li.current-menu-item.mijnverhaal a{
	background:url(images/mijnverhaal.gif) 0 99px;	
}

#hoofdmenu ul li.dagboek a{
	background:url(images/dagboek.gif) 0 0;	
}

#hoofdmenu ul li.dagboek a:hover, #hoofdmenu ul li.current-menu-item.dagboek a{
	background:url(images/dagboek.gif) 0 99px;	
}

#hoofdmenu ul li.acties a{
	background:url(images/acties.gif) 0 0;	
}

#hoofdmenu ul li.acties a:hover, #hoofdmenu ul li.current-menu-item.acties a{
	background:url(images/acties.gif) 0 99px;	
}

#hoofdmenu ul li.reisverslag a{
	background:url(images/reisverslag.gif) 0 0;	
}

#hoofdmenu ul li.reisverslag a:hover, #hoofdmenu ul li.current-menu-item.reisverslag a{
	background:url(images/reisverslag.gif) 0 99px;	
}

#hoofdmenu ul li.projecten a{
	background:url(images/projecten.gif) 0 0;	
}

#hoofdmenu ul li.projecten a:hover, #hoofdmenu ul li.current-menu-item.projecten a{
	background:url(images/projecten.gif) 0 99px;	
}

#hoofdmenu ul li.videohelden a{
	background:url(images/videohelden.gif) 0 0;	
}

#hoofdmenu ul li.videohelden a:hover, #hoofdmenu ul li.current-menu-item.videohelden a{
	background:url(images/videohelden.gif) 0 99px;	
}

#hoofdmenu ul li.gastenboek a{
	background:url(images/gastenboek.gif) 0 0;	
}

#hoofdmenu ul li.gastenboek a:hover, #hoofdmenu ul li.current-menu-item.gastenboek a{
	background:url(images/gastenboek.gif) 0 99px;	
}

#hoofdmenu ul li.herdenkingsdienst a{
	background:url(images/herdenkingsdienst.gif) 0 0;	
}

#hoofdmenu ul li.herdenkingsdienst a:hover, #hoofdmenu ul li.current-menu-item.herdenkingsdienst a{
	background:url(images/herdenkingsdienst.gif) 0 99px;	
}

#hoofdmenu ul li.fotos a{
	background:url(images/fotos.gif) 0 0;	
}

#hoofdmenu ul li.fotos a:hover, #hoofdmenu ul li.current-menu-item.fotos a{
	background:url(images/fotos.gif) 0 99px;	
}

#hoofdmenu ul li.hobbys a{
	background:url(images/hobbys.gif) 0 0;	
}

#hoofdmenu ul li.hobbys a:hover, #hoofdmenu ul li.current-menu-item.hobbys a{
	background:url(images/hobbys.gif) 0 99px;	
}

#content{
	float:right;
	width:530px;
	padding:175px 0 36px 36px;
}	

/* --------------------------------------------
   WordPress classes
-------------------------------------------- */

/* Make sure images with WordPress-added height and width attributes are scaled correctly. */
.entry-content img,
.entry-summary img,
.comment-content img[height],
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
}

img.size-full,
img.size-large,
img.wp-post-image {
	height: auto;
	max-width: 100%;
}

/* Make sure videos and embeds fit their containers. */
embed,
iframe,
object,
video {
	max-width: 100%;
}

/* Override the Twitter embed fixed width. */
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important;
}

/* Images */
.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignleft {
	margin: 5px 20px 5px 0;
}

.wp-caption.alignleft {
	margin: 5px 10px 5px 0;
}

img.alignright {
	margin: 5px 0 5px 20px;
}

.wp-caption.alignright {
	margin: 5px 0 5px 10px;
}

img.aligncenter {
	margin: 5px auto;
}

img.alignnone {
	margin: 5px 0;
}

.wp-caption .wp-caption-text,
.entry-caption,
.gallery-caption {
	color: #220e10;
	font-size: 18px;
	font-style: italic;
	font-weight: 300;
}

#gallery-1 {
	float: left;
}

img.wp-smiley,
.rsswidget img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.wp-caption.alignleft + ul,
.wp-caption.alignleft + ol  {
	list-style-position: inside;
}



/* --------------------------------------------
   Responsive layout (added)
-------------------------------------------- */

/* ----------------------------------------
   Responsive
---------------------------------------- */

/* Mobile menu toggle button */
#hoofdmenu .menu-toggle{
	display: none;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.12);
	color: #fff;
	font: bold 14px Verdana, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	text-align: left;
	cursor: pointer;
}

@media screen and (max-width: 960px) {
	/* Stack layout */
	#container{
		width: 100%;
		max-width: none;
		padding-left: 14px;
		padding-right: 14px;
	}

	#header{
		width: 100%;
		position: relative;
		height: auto;
		float: none;
	}

	#branding{
		width: 100%;
		float: none;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: contain;
		height: 110px;
	}

	#nieuwsticker{
		position: static;
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
		margin-top: 8px;
	}

	.mailadres{
		position: static;
		display: block;
		margin-top: 10px;
	}

	/* Menu container full width */
	#hoofdmenu{
		position: relative;
		width: 100%;
		top: 0;
		z-index: 10;
	}

	#hoofdmenu .menu-toggle{
		display: block;
	}

	/* Hide the menu by default, show when JS toggles .is-open */
	#hoofdmenu > ul{
		display: none;
		margin-top: 8px;
		padding: 0;
		width: 100%;
	}

	#hoofdmenu.is-open > ul{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 157px));
		justify-content: center;
		column-gap: 12px;
		row-gap: 12px;
	}

	#hoofdmenu ul{
		list-style: none;
		margin-left: 0;
	}

	#hoofdmenu ul li,
	#hoofdmenu ul li:nth-child(2n){
		float: none;
		margin: 0;
		padding: 0;
	}

	/* Keep the desktop image-buttons, but make them fluid */
	#hoofdmenu ul li a{
		display: block;
		width: 100%;
		max-width: 157px;
		aspect-ratio: 157 / 99;
		height: auto;
		min-height: 99px;
		text-indent: -9999px;
		overflow: hidden;
		background-repeat: no-repeat !important;
		background-size: 100% 200% !important;
		background-position: 0 0 !important;
	}

	/* Hover and current state: show the bottom half of the sprite */
	#hoofdmenu ul li a:hover,
	#hoofdmenu ul li.current-menu-item a{
		background-position: 0 100% !important;
	}

	#content{
		float: none;
		width: 100%;
		padding: 18px 0 36px 0;
	}
}

@media screen and (min-width: 720px) and (max-width: 960px) {
	/* On larger mobile-menu viewports, use 3 columns (still centered, no upscaling) */
	#hoofdmenu.is-open > ul{
		grid-template-columns: repeat(3, minmax(0, 157px));
	}
}

@media screen and (max-width: 480px) {
	#branding{
		height: 90px;
	}

	body{
		font-size: 14px;
	}

	/* Keep 2 columns, just tighten spacing on very small screens */
	#hoofdmenu.is-open > ul{
		column-gap: 6px;
		row-gap: 10px;
	}
}

/* =========================
   Comments + Gastenboek
   Mooier, rustiger, beter leesbaar
   ========================= */

/* Lijst reset en spacing */
.commentlist,
.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.commentlist > li,
.comment-list > li {
  margin: 0 0 16px;
  padding: 0;
}

/* Comment kaart */
.comment-body,
.commentlist .comment-body,
.comment-list .comment-body {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 14px 14px;
}

/* Bij replies iets inspringen */
.commentlist .children,
.comment-list .children {
  margin: 12px 0 0 18px;
  padding: 0;
  list-style: none;
  border-left: 3px solid rgba(0,0,0,0.08);
  padding-left: 12px;
}

/* Author + meta netjes bovenaan */
.comment-author {
  margin: 0 0 6px;
  font-weight: 700;
  line-height: 1.2;
}

.comment-author .avatar {
  float: left;
  margin: 0 10px 0 0;
  border-radius: 50%;
}

.comment-metadata,
.comment-meta {
  margin: 0 0 10px;
  font-size: 13px;
  opacity: 0.8;
}

.comment-metadata a,
.comment-meta a {
  text-decoration: none;
}

.comment-metadata a:hover,
.comment-meta a:hover {
  text-decoration: underline;
}

/* Comment tekst */
.comment-content {
  line-height: 1.6;
}

.comment-content p {
  margin: 0 0 10px;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

/* Moderation melding */
.comment-awaiting-moderation {
  display: inline-block;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.35);
  font-size: 13px;
}

/* Reply link als knopje */
.reply {
  margin-top: 10px;
}

.reply a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 13px;
}

.reply a:hover {
  background: rgba(255,255,255,1);
}

/* Auteur highlight */
.bypostauthor > .comment-body {
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.045);
}

/* =========================
   Comment form
   ========================= */

#respond {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

#respond h3,
#reply-title {
  margin: 0 0 10px;
}

.comment-form {
  margin: 0;
}

.comment-form p {
  margin: 0 0 12px;
}

.comment-form label {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  opacity: 0.9;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.95);
  outline: none;
}

.comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* Submit button */
#respond input[type="submit"],
.comment-form input[type="submit"],
.form-submit input[type="submit"] {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.06);
  cursor: pointer;
  font-weight: 700;
}

#respond input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
  background: rgba(0,0,0,0.10);
}

/* Kleine screens: wat meer ademruimte */
@media (max-width: 480px) {
  .comment-body,
  .commentlist .comment-body,
  .comment-list .comment-body {
    padding: 12px 12px;
  }

  .comment-author .avatar {
    width: 36px;
    height: 36px;
  }

  .commentlist .children,
  .comment-list .children {
    margin-left: 12px;
    padding-left: 10px;
  }
}

/* =========================
   Gastenboek specifieke tweaks
   ========================= */

/* Jaar-dropdown: iets duidelijker, blijft native */
#guestbook .guestbook-controls select{
  min-width: 120px;
  padding: 4px 6px;
}

/* Verzend-knop alleen in het gastenboek roze maken en iets ruimte erboven */
#guestbook .comment-form .form-submit input[type="submit"]{
  margin-top: 18px;
  background: rgb(255,50,204);
  border-color: rgb(255,50,204);
  color: #fff;
}

#guestbook .comment-form .form-submit input[type="submit"]:hover{
  background: rgb(230,30,185);
  border-color: rgb(230,30,185);
}