/*
Theme Name: Oerknor Thema
Description: Thema voor Oerknor.nl
Version: 4.1
Author: Timo Tijhof
Author URI: https://timotijhof.net
*/
/*
Colors:
	Black:              #232323

	Very dark red:      #974340
	Dark red:           #b75a57
	Light red:          #f6e8e7

	Dark yellow:        #cbbb9d
	Light yellow:       #faf7ef
	Very light yellow:	#fbfaf9 (fill)

	Light blue:         #9ec1cc (outline)

*/

/*
	## Resets and defaults
*/

* {
	margin: 0;
	padding: 0;
}

html {
	overflow-y: scroll;
}

html,
body {
	height: 100%;
}

body {
	background: #cbbb9d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: #232323;
}

body,
input,
textarea {
	font-size: 13px;
	line-height: 1.4;
}

ol {
	list-style: decimal outside;
}

ul {
	list-style: disc outside;
}

ul li ul {
	list-style: circle outside;
}

ul li ul li ul {
	list-style: square outside;
}

li {
	margin: 0 0 5px 0;
}

table {
	border-collapse: collapse;
}


p,
ul,
table {
	margin: 0 0 15px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 5px 0;
	font-weight: bold;
	color: #232323;
	text-shadow: #fff 0 1px 1px;
}

h1 {
	font-size: 35px;
}

h2 {
	margin-bottom: 10px;
	font-size: 28px;
	letter-spacing: -2px;
	word-spacing: 4px;
}

h3 {
	font-size: 24px;
	letter-spacing: -1px;
}

h4,
h5,
h6 {
	font-size: 15px;
}

blockquote {
	border-left: 10px solid #ccc;
	padding: 0 0 0 10px;
	font-style: italic;
}

/* Inline */

a {
	text-decoration: none;
}

a img {
	border: none;
	background: none;
}

img {
	vertical-align: middle;
}


::selection {
	/* Chrome, Safari */
	background: #974340;
	color: #fff;
}

::-moz-selection {
	/* Firefox */
	background: #974340;
	color: #fff;
}

/*
	## General tools
*/

.aligncenter {
	display: block;
	margin: 0 auto;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.clear {
	clear: both;
}

.screen-reader-text {
	display: block;
	position: absolute !important;
	clip: rect( 1px, 1px, 1px, 1px );
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	overflow: hidden;
}

/* Used by contact and comment forms */
.button {
	/* Light yellow fill, dark yellow border, black text */
	background: #faf7ef;
	border: 2px solid #cbbb9d;
	border-radius: 14px;
	padding: 5px 12px;
	font-size: 14px;
	font-weight: bold;
	color: #232323;
	letter-spacing: -1px;
}

.button:hover {
	/* Extra light yellow fill */
	cursor: pointer;
	background: #fbfaf9;
}

.button:focus {
	/* Black border */
	border-color: #232323;
}

.button:active {
	/* Dark yellow fill, black border */
	cursor: pointer;
	background: #cbbb9d;
	border-color: #232323;
}

/*
	## TYPOGRAPHY
*/

/* Here instead of near Post+Page markup for
   compatibility with existing rules that
   expected a certain cascading order. --2017-01-28 */
.post a,
.post-head a,
.meta a,
.comment a,
.a {
	color: #b75a57;
	text-decoration: none;
	border-bottom: 1px dotted #b75a57;
	font-weight: bold;
}
/* Exclude border from `.post-head a`, which
   wraps a heading and shouldn't look like a link. */
.post-head > a {
	border-bottom-width: 0;
}
.post a:hover,
.post-head a:hover,
.meta a:hover,
.comment a:hover,
.a:hover {
	border-bottom-style: solid;
	cursor: pointer;
}

.entry-content img,
.entry-summary img,
.comment-content img,
.widget img,
.post img:not(.cc-icon),
.post-content img:not(.cc-icon) {
	width: auto;
	height: auto;
	max-width: 100%;
	/* Avoid too tall images on desktop in a wide window */
	/* 70 instead of 100 to always keep context of the article,
	   this isn't a gallery, and there are fullscreen views
	   available too */
	max-height: 70vh;
}
.post img.aligncenter,
.post-content img.aligncenter {
	display: block;
	margin: 1em auto 0 auto;
}

.container ul,
.container ol {
	margin-left: 30px;
}
a:hover > h1,
a:hover > h2,
a:hover > h3 {
	color: inherit;
}

/* Header */

.oer-head {
	background: #000;
}
.oer-head-content {
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden; /* contain floats */
	text-align: center; /* centre oer-search--side */
}

.oer-brand {
	display: block;
	margin: 0;
	float: left;
	width: 260px;
	height: 212px;
	text-indent: -9999px;
	background: url(images/logo.png?ver=4) center top no-repeat;
}

.oer-nav-top {
	clear: right;
	padding: 0;
}
.oer-nav-top li {
	/* [hardcode] Make all items roughly same width */
	min-width: 9em;
}

.oer-search {
	border: 1px solid #cfcfcf;
	position: relative;
	display: inline-block;
	background: #fff;
	margin-bottom: 15px;
}
.oer-search--side {
	clear: right;
	float: right;
}
.oer-head .oer-search {
	margin-top: 60px;
}
.oer-search input[type="text"] {
	display: inline-block;
	padding: 0 0 0 8px;
	width: 214px;
	background: none;
	border: none;
	font-size: 11px;
	line-height: 28px;
	color: #232323;
	font-weight: bold;
}
.oer-search input[type="submit"] {
	margin: 3px 3px 0 0;
	display: inline-block;
	vertical-align: top;
	height: 22px;
	width: 24px;
	border: 0;
	background: no-repeat url(images/mag.png?ver=4);
	background-size: contain;
	cursor: pointer;
}


/* Main layout */

#wrapper {
	position: relative;
	max-width: 980px;
	/* sticky footer by ensuring content area is at least the size
	of the viewport - header and footer. This uses the mimimal
	header and footer size. On narrow viewports, they may become
	taller in which a small page will needlessly get a scrollbar
	and draw the footer below the fold, this is fine. Keep It Simple. */
	min-height: calc(100vh - 330px);
	margin: 0 auto;
	padding: 0 0 21px 0;
}

#content-wrapper {
	margin: 5px auto;
	background: #fff;
	box-shadow: 0px 0px 5px #232323;
}

#content-wrapper:before {
	/* clear fix to ensure margins from content elements
	   stay inside this visual container */
    content: "";
    display: table;
    clear: both;
}

.container {
	padding: 15px;
}

.container-bleed {
	margin-left: -15px;
	margin-right: -15px;
}

/* Footer */

.oer-foot {
	background: #b75a57;
	/* top-only inset shadow */
    box-shadow: inset 0 30px 40px -15px rgba(0, 0, 0, 0.5);
}
.oer-foot-content {
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden; /* contain floats */
	color: #faf7ef;
	padding: 42px 0;
	text-align: center;
}
.oer-foot a {
	border-bottom: 1px dotted #fff;
	color: #faf7ef;
	text-decoration: none;
}
.oer-foot a:hover {
	border-bottom: 1px solid #fff;
	color: #fff;
	text-decoration: none;
}

/**
 * Navigation
 *
 * - [header] Support current-menu-item for compat with wp_nav_menu()
 * - [template-media-root] Support span.page-numbers children for compat with paginate_links()
 * - [template-media-folder] Ensure margin before/after to avoid clashing with post-thumb.
 */

.oer-nav {
	margin: 0;
}
.oer-nav--media {
	margin: 7px 0;
}
.oer-nav li {
	display: inline-block;
	margin: 0;
}
.oer-nav li a,
.oer-nav li .page-numbers {
	display: block;
	margin: 0 7px 7px 0;
	padding: 9px 10px;
	background: #cbbb9d;
	color: #232323;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	transition: all 0.15s ease-in-out;
	transition-property: background-position;
}
.oer-nav li a:hover {
	background-color: #ded3c0; /* hsla() 10% brighter than #cbbb9d */
	text-shadow: #fff 0 1px 1px;
}
.oer-nav li.current a,
.oer-nav li .current.page-numbers,
.oer-nav-top li.current-menu-item a,
.oer-nav-top li.current-menu-parent a {
	background: #fff;
	position: relative;
}

/* Used for template-media-folder pagination */
.oer-nav-mini li a {
	margin: 0 5px 7px 0;
	padding: 7px;
}
.oer-nav-pages {
	text-align: center;
}

/* Grid (base) */

.oer-media-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	margin: 0.2em 0;
}
.oer-media-item {
	display: inline-block;
	margin: 0;
}
.oer-media-item:hover {
	z-index: 1;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Grid (gallery) */

.oer-media-gallery {
	padding: 1em 0;
	background: #555;
}
.oer-media-gallery .oer-nav {
	text-align: center;
}
.oer-media-gallery .oer-media-item {
	position: relative; /* contain :after icon */
	overflow: hidden;
}
.oer-media-gallery .oer-media-item,
.oer-media-gallery .oer-media-item img {
	transition: transform 0.1s ease-out; /* hover-out */
}
.oer-media-gallery .oer-media-item:hover,
.oer-media-gallery .oer-media-item:focus,
.oer-media-gallery .oer-media-item:hover img,
.oer-media-gallery .oer-media-item:focus img {
	transition: transform 0.3s ease; /* hover-in */
}
.oer-media-gallery .oer-media-item:hover img {
	transform: scale(1.1);
}
.oer-media-gallery .oer-media-item:focus {
	z-index: 2;
	outline: 2px solid #cbbb9d;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
	transform: scale(1.2);
}

.oer-media-gallery .oer-media-item:before {
	z-index: 1;
	/* Circle of magnifying glass */
	position: absolute;
	top: 45px;
	left: 45px;
	content: "";
	background: rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 0 2em rgba(0, 0, 0, 0.3);
	font-size: 52px;
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border: 0.1em solid #fff;
	border-radius: 0.3em;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s ease-out; /* hover-out */
}
.oer-media-gallery .oer-media-item:after {
	z-index: 2;
	/* Stick of magnifying glass */
	content: "";
	display: inline-block;
	position: absolute;
	font-size: 52px;
	left: 65px;
	top: 75px;
	border-width: 0;
	background: #fff;
	width: 0.5em;
	height: 0.08em;
	-ms-transform: rotate(45deg); /* IE9 */
	transform: rotate(45deg);

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s ease-out; /* hover-out */
}
.oer-media-gallery .oer-media-item:hover:before,
.oer-media-gallery .oer-media-item:hover:after {
	opacity: 1;
	transition: opacity 0.3s ease; /* hover-in */
}

/* Grid (captioned for pulp) */

.oer-media-captioned {
	clear: both;
	justify-content: space-around;
	text-align: center;
	gap: 1px;
}
.oer-media-captioned .oer-media-item img {
	display: block;
	margin: 0 auto;
}
.oer-media-item-caption {
	display: inline-block;
	margin: 0.5em 0.2em 0.9em 0.2em;
	text-align: center;
}

/* Icon for .oer-media-gallery */
.oer-section-icon-album {
	position: relative;
}

/*
	POST AND PAGE MARKUP
*/

.box {
	margin: 0 0 15px;
	padding: 1px;
	background: #fff;
	border: 1px solid #CFCFCF;
	box-shadow: 0 0 5px #F0F0F0;
	transition: all 0.1s ease-out;
}
.box:hover {
	box-shadow: 0 0 15px #CFCFCF;
}
.box .content {
	position: relative;
	margin: 0;
	padding: 13px;
	overflow: hidden; /* contain float of post-thumb */
	background: #F0F0F0;
}
.post-thumb {
	position: relative;
	max-width: 200px; /* match image_size=oer-post-thumb */
	float: left;
	margin: 0 15px 0 0;
}
.post-thumb img {
	display: block;
	margin: 0;
	background: #fff;
	outline: 1px solid #CFCFCF;
}
.post-thumb	.badge {
	position: absolute;
	top: 5px;
	right: 5px;
	overflow: hidden;
}
.post-thumb .badge:before {
	content: attr(data-badge-day);
	display: block;
	width: 42px;
	height: 10px;
	padding: 18px 0 14px 0;
	text-align: center;
	text-shadow: #ddd 0px 1px 2px;
}
.post-thumb .badge:after {
	content: attr(data-badge-year);
	display: block;
	text-align: center;
	margin: 0 6px;
	padding: 1px 1px;
	width: 28px;
	background: #fdfdfd;
	font-size: 10px;
	font-weight: bold;
}

.post-head .meta {
	/* Negative space matches padding on .container */
	margin: 10px -13px;
	padding: 5px 13px;
	background: #F9F9F9;
}

.post-head .meta:empty {
	/* Don't render an empty bar that is 10px tall (paddings) */
	display: none;
}

a.more-link,
a.more-link:hover {
	display: block;
	position: absolute;
	bottom: 13px;
	right: 13px;
}
.gallery-jump {
	float: right;
	margin-top: 1em;
	padding: 5px 8px;
	color: #b75a57;
	font-weight: bold;
}
/* Badge sprites used on the index home page */
.month1 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -21px; }
.month2 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -105px; }
.month3 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -189px; }
.month4 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -273px; }
.month5 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -357px; }
.month6 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -441px; }
.month7 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -525px; }
.month8 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -609px; }
.month9 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -693px; }
.month10 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -777px; }
.month11 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -861px; }
.month12 { background: url(images/badge-sprite.gif?ver=4) no-repeat -21px -945px; }

/* Paging for Previous/Next links */
.nagivation								{ margin:28px 0 0 0 }
.nagivation a							{ color:#5D5D5D }
.nagivation a:hover						{ color:#b75a57; text-decoration:none; border-bottom:1px dotted #5d5d5d }

/* Used on License page */
.post .cc-list {
	margin-left: 0;
}
.cc-list li {
	list-style: none;
	overflow: hidden;
}
.cc-list .cc-icon {
	float: left;
	margin-right: 13px;
}

/* Posts & Pages */
.post table								{ width:100% }
.post td,
.post th {
	padding: 3px 0;
	border-bottom: 1px solid #f6e8e7;
	text-align: center;
}
.post th {
	border-top: 2px solid #cbbb9d;
	background-color: #faf7ef;
	border-bottom: 0;
	text-align: center;
	letter-spacing: 1px;
}
.post th h4 {
	font-size: 17px;
	font-style: italic;
	text-shadow: none;
	color: #5d5d5d;
}

/* Gallery footer */
.galleryFooter {
	clear: both;
	font-size: 11px;
	text-align: center;
}
/* Comments */
ol.commentlist,
ol.commentlist li						{ list-style:none !important }
.comment.even>div,
.trackbacks ul.even						{ background:#fbfaf9 }
.comment .avatar						{ float:left; margin:0 1em 1em 0;
										  background:transparent; border:5px solid #ddd }
.comment cite							{ padding:0; border:none;
										  font-style:normal; font-weight:bold; display:block }
.comment .meta							{ font-style:normal; font-size:80% }

/* Trackbacks */
.trackbacks ul, .trackbacks ul li		{ list-style:none }
.trackbacks ul li						{ margin:0 0 4px 15px; font-size:12px }
/* Licentie pagina */
.line-cc {
	/* D: 637914; L: CCFF66 */
	border-bottom: 5px solid #93a81d;
	clear: both;
}

/*
	SEARCH
*/

.searchresult .post-content br,
.searchresult .post-thumb .badge {
	display: none;
}
.searchresult .post-thumb img {
	width: 65px;
	height: 65px;
}
.searchresult .post-thumb {
	max-width: 65px;
}
#searchform								{ position:relative; width:250px; height:28px; border:1px solid #CFCFCF }
#searchform input#s						{ position:absolute; top:8px; left:8px; width:214px; /* 250-23-3-8 - 2*/
										  background:transparent none repeat scroll 0 0; border:none;
										  color:#232323; font-weight:bold }
#searchform input#search-button {
	display: block;
	height: 22px;
	width: 24px;
	position: absolute;
	top: 3px;
	right: 3px;
	border: 0;
	padding: 0;
	background: no-repeat url(images/mag.png?ver=4);
	background-size: contain;
	cursor: pointer;
}

/*
	CONTACT PAGE
*/

.oer-form {
	max-width: 800px;
	margin: 0 auto;
}

.oer-contact-form-basic .oer-form-extraif {
	display: none;
}

.oer-form label {
	/* Fallback for browsers without display:flex */
	display: block;
	margin-bottom: 8px;
}

.oer-form fieldset {
	border: 0;
}

.oer-form-row,
.oer-form-group {
	margin-bottom: 8px;
	display: flex;
	flex-flow: wrap;
	align-items: center;
}

.oer-form-row > label,
.oer-form-group-label {
	flex: 1 0 190px;
	max-width: 200px;
}

.oer-form-row > input[type="text"],
.oer-form-row > input[type="email"],
.oer-form-row > textarea,
.oer-form-group-input {
	flex: 1 0 350px;
	/* max-width here ensures 320px screens (iPhone portrait)
	   won't get scrollbars */
	max-width: 100%;
}

.oer-form-group-buttons {
	text-align: center;
}

.oer-form-row > input[type="text"],
.oer-form-row > input[type="email"],
.oer-form-row > textarea {
	padding: 2px 0 2px 4px;
	background: #fbfaf9;
	border: 1px solid #cbbb9d;
}

.oer-form input[type="radio"]:focus {
	outline: 2px solid #9ec1cc;
	outline-offset: 2px;
}

.oer-form-req {
	color: red;
}

.oer-form-opt {
	color: #999;
}

.oer-box-thanks {
	color: green;
	font-weight: bold;
}

.oer-box-error {
	color: red;
}

/*
	MOBILE
 */
@media all and (max-width: 750px) {
	.oer-brand {
		margin: 0 auto;
		float: none;
	}
	.oer-search {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.oer-nav-top {
	    text-align: center;
	}
	/* On desktop, image floats to the size of the post-head,
	   for that, it needs to be in the DOM before the heading.
	   On mobile, we want each post-head item to be underneath
	   the other (nothing next to each other), and the heading
	   should be hoisted to be before the image.
	 */
	.post-head {
		display: flex;
		flex-flow: column wrap;
	}
	.post-head > a {
		order: -1;
	}
	.post-thumb {
		margin: 0 auto;
	}
}

/*
	NON-MOBILE
*/
@media all and (min-width: 751px) {
	.oer-nav-top {
		/* Ensure that on non-mobile widths, where the logo
		   and nav are next to each other, the menu mustn't
		   float underneath the logo if too long. */
		max-width: calc(100% - 260px);
		float: right;
	}
}

/*
	WIDESCREEN
*/
@media all and (min-width: 1040px) {
	/* Only when viewport is 1040px or wider because container has
	   max-width of 980px, and this icon sticks out -30px from the left.
	   Given a centred container, this will render without cutting off,
	   when the viewport is at least 980+30+30=1040px
	*/
	.oer-section-icon-album::after {
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		left: -30px;
		/**
		 * "Images" icon from IcoMoon.
		 * Designer: Keyamoon (<http://keyamoon.com/>)
		 * License: CC BY 4.0 (<https://creativecommons.org/licenses/by/4.0/>)
		 */
		background: #fff url(images/icomoon-015-images.svg?ver=4) no-repeat center center;
		background-size: 30px;
		border: 2px solid #b75a57;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		border-radius: 25px;
	}
}