/*
 * Oil4 — visual match to Twenty Eleven (martinpot.eu)
 * Fonts intentionally match the old site: Arial/Helvetica + Caveat for the quote.
 * The old site is full width (#page { max-width: 100% }) with 7.6% side margins.
 */

/* ---- Base ---- */
html {
	background-color: #666666;
}

body,
body.stretched,
#top {
	background-color: #404040 !important;
	color: #bbbbbb;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px;
}

#wrap_all,
#main,
.container_wrap,
#header,
#header_main,
#header_main_alternate,
#footer,
.content,
.sidebar,
.container {
	font-family: Arial, Helvetica, sans-serif;
}

#wrap_all,
#main,
.main_color,
.container_wrap,
.container_wrap.main_color,
#av_section_1,
.content,
.sidebar,
#footer,
.footer_color {
	background-color: #404040 !important;
}

#main .container_wrap,
#main .container_wrap_first {
	border-top: 0 !important;
}

/* Links use the old site's white link color */
a,
#top a {
	color: #ffffff;
}

a:hover,
a:focus,
#top a:hover,
#top a:focus {
	color: #ffffff;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6,
.entry-content-header .post-title,
.avia-post-title,
#top .post-title a,
#top .entry-content-header .post-title a {
	color: #dddddd !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

#top .post-meta-infos,
.minor-meta,
.av-special-heading,
.slide-entry-excerpt {
	color: #999999;
}

/* ---- Full width layout (7.6% side margins like Twenty Eleven) ---- */
#top .container {
	max-width: 100%;
	width: 100%;
	padding-left: 7.6%;
	padding-right: 7.6%;
}

#top .container .av-content-small.units {
	width: 68.9%;
}

/* Percentage margins inside the sidebar resolve against the sidebar itself,
   so the 7.2% gutter has to sit on the sidebar box. */
#top #main .sidebar {
	padding-left: 7.2%;
}

#top .inner_sidebar {
	margin-left: 0;
}

#top .content,
#top #main .sidebar {
	border: 0 !important;
	margin-right: 0;
	padding-top: 1.625em;
	padding-bottom: 1.625em;
}

#top .content .entry-content-wrapper {
	padding-right: 0;
}

/* ---- Header / branding ---- */
#header {
	background-color: #404040 !important;
	border: 0 !important;
	box-shadow: none !important;
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
}

#header .header_bg {
	background: #404040 !important;
	opacity: 1 !important;
}

#header_main {
	background-color: #404040 !important;
	border: 0 !important;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
}

/* Logo container is full bleed: the branding row carries the 7.6% margins,
   the banner below it spans the full width like #branding img on the old site. */
#header_main .av-logo-container,
#header_main .container.av-logo-container {
	max-width: 100%;
	width: 100%;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
}

#header_main .av-logo-container .inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	overflow: visible !important;
}

#header_main .oil4-branding {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex: 0 0 100%;
	float: none !important;
	width: 100%;
	height: auto !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 30px 7.6% !important;
}

/* The title carries Enfold's .logo class, which is absolutely positioned */
#top #header .oil4-branding .oil4-site-title {
	position: relative !important;
	left: auto !important;
	float: none !important;
	display: block;
	flex: 1 0 0;
	width: auto;
	max-width: 76%;
	height: auto !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

/* Zonder slogan mag de titel de hele branding-rij gebruiken */
#top #header .oil4-branding--no-description .oil4-site-title {
	max-width: 100%;
}

#top #header .oil4-branding .oil4-site-title a {
	display: inline;
	height: auto !important;
	overflow: visible !important;
}

#top #header .oil4-branding .oil4-site-title img {
	display: none !important;
}

.oil4-site-title a {
	color: #ffffff !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
}

.oil4-site-title a:hover {
	color: #ffffff !important;
	text-decoration: none !important;
}

.oil4-site-description {
	flex: 0 0 auto;
	max-width: 290px;
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-family: 'Caveat', cursive !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	word-break: break-word;
	white-space: break-spaces;
	text-align: left;
}

/* Banner between branding row and menu, full width */
.oil4-header-banner {
	display: block !important;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	line-height: 0;
	background: #404040;
	position: relative;
	z-index: 1;
}

.oil4-header-banner a {
	display: block;
}

.oil4-header-banner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 0;
}

/* ---- Menu (Twenty Eleven #access style) ---- */
#header_main_alternate {
	background: #333333 !important;
	background: linear-gradient(#383838, #272727) !important;
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 1px solid #222222 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	margin: 0 0 6px;
	width: 100%;
	max-width: none;
	float: none;
	clear: both;
	position: relative;
	z-index: 2;
	height: auto !important;
	min-height: 0 !important;
}

#header_main_alternate .container {
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
}

#header_main_alternate .main_menu,
#header_main_alternate .avia-menu,
#header_main_alternate .av-main-nav-wrap {
	float: none !important;
	display: block;
	position: relative !important;
	width: 100%;
	height: auto !important;
	line-height: normal !important;
	right: auto !important;
	left: auto !important;
}

/* Match #access ul: 13px base + negative margin so first label aligns with content */
#top #header #header_main_alternate .av-main-nav {
	font-size: 13px !important;
	list-style: none !important;
	margin: 0 0 0 -0.8125em !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	display: block !important;
	float: none !important;
}

.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu > div,
.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu ul:first-child,
.html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a {
	height: auto !important;
	line-height: 3.333em !important;
}

#top #header #header_main_alternate .av-main-nav > li {
	float: left !important;
	position: relative !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal !important;
	height: auto !important;
}

/* Padding only on the anchor — NOT also on .avia-menu-text (that doubled the gaps) */
#top #header #header_main_alternate .av-main-nav > li > a {
	color: #eeeeee !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 3.333em !important;
	padding: 0 1.2125em !important;
	height: auto !important;
	min-height: 0 !important;
	text-decoration: none !important;
	display: block !important;
	background: transparent !important;
	border: 0 !important;
}

#top #header #header_main_alternate .av-main-nav > li > a .avia-menu-text {
	color: #eeeeee !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	font-weight: inherit !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline !important;
}

#top #header #header_main_alternate .av-main-nav > li:hover > a,
#top #header #header_main_alternate .av-main-nav > li > a:focus {
	background: #f9f9f9 !important;
	background: linear-gradient(#f9f9f9, #e5e5e5) !important;
	color: #373737 !important;
}

#top #header #header_main_alternate .av-main-nav > li:hover > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > li > a:focus .avia-menu-text {
	color: #373737 !important;
}

/* Current item is bold only — no light background (Twenty Eleven) */
#top #header #header_main_alternate .av-main-nav > .current-menu-item > a,
#top #header #header_main_alternate .av-main-nav > .current_page_item > a,
#top #header #header_main_alternate .av-main-nav > .current-menu-ancestor > a,
#top #header #header_main_alternate .av-main-nav > .current_page_ancestor > a {
	font-weight: bold !important;
	background: transparent !important;
}

#top #header #header_main_alternate .av-main-nav > .current-menu-item > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > .current_page_item > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > .current-menu-ancestor > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > .current_page_ancestor > a .avia-menu-text {
	font-weight: bold !important;
	color: #eeeeee !important;
}

#top #header #header_main_alternate .av-main-nav > .current-menu-item:hover > a,
#top #header #header_main_alternate .av-main-nav > .current_page_item:hover > a,
#top #header #header_main_alternate .av-main-nav > .current-menu-ancestor:hover > a {
	background: #f9f9f9 !important;
	background: linear-gradient(#f9f9f9, #e5e5e5) !important;
}

#top #header #header_main_alternate .av-main-nav > .current-menu-item:hover > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > .current_page_item:hover > a .avia-menu-text,
#top #header #header_main_alternate .av-main-nav > .current-menu-ancestor:hover > a .avia-menu-text {
	color: #373737 !important;
}

/* Hide Enfold chrome that Twenty Eleven never had */
#top #header #header_main_alternate .avia-menu-fx,
#top #header #header_main_alternate .avia-bullet,
#top #header #header_main_alternate .avia-menu-subtext,
#top #header #header_main_alternate .av-burger-menu-main {
	display: none !important;
}

/* Submenus like #access ul ul */
#top #header #header_main_alternate .av-main-nav ul {
	display: none;
	float: left;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99999;
	width: 188px;
	margin: 0 !important;
	padding: 0 !important;
	background: #f9f9f9 !important;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	border: 0 !important;
}

#top #header #header_main_alternate .av-main-nav li:hover > ul {
	display: block !important;
}

#top #header #header_main_alternate .av-main-nav ul li {
	float: none !important;
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
}

#top #header #header_main_alternate .av-main-nav ul li a,
#top #header #header_main_alternate .av-main-nav ul li a .avia-menu-text {
	background: #f9f9f9 !important;
	border: 0 !important;
	border-bottom: 1px dotted #dddddd !important;
	color: #444444 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4em !important;
	padding: 10px !important;
	height: auto !important;
	min-height: 0 !important;
	width: 168px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
}

#top #header #header_main_alternate .av-main-nav ul li a .avia-menu-text {
	padding: 0 !important;
	width: auto !important;
	border: 0 !important;
	display: inline !important;
}

#top #header #header_main_alternate .av-main-nav ul li:hover > a,
#top #header #header_main_alternate .av-main-nav ul li:hover > a .avia-menu-text {
	background: #efefef !important;
	color: #444444 !important;
}

/* Search lives in the sidebar on the old site, not in the menu bar */
#top #header .menu-item-search,
#top #header #menu-item-search,
#top #header .menu-item-search-dropdown {
	display: none !important;
}

/* ---- Sidebar widgets ---- */
/* Twenty Eleven sets .widget-area { font-size: 12px } for sidebar and footer */
#top .sidebar,
#top #footer {
	color: #bbbbbb;
	font-size: 12px;
}

.sidebar .widget {
	margin-bottom: 2.2em;
	padding-top: 0;
	border-top: 0;
	color: #bbbbbb;
}

.sidebar .widget .seperator,
#footer .widget .seperator {
	display: none !important;
}

.sidebar .widgettitle,
.sidebar .widget .widgettitle,
#top .sidebar .widget .widgettitle,
#footer .widgettitle,
#top #footer .widget .widgettitle {
	color: #cccccc !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	line-height: 2.6em !important;
	text-transform: uppercase !important;
	border: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Tag cloud is plain inline text on the old site, not Enfold's boxed tags */
#top .sidebar .tagcloud,
#top .sidebar .wp-tag-cloud {
	line-height: 1.25;
}

#top .sidebar .tagcloud a,
#top .sidebar .wp-tag-cloud a {
	color: #c0c0c0 !important;
	display: inline;
	float: none;
	border: 0;
	padding: 0;
	margin: 0 2px 0 0;
	line-height: 1.25;
	background: none;
}

#top .sidebar .tagcloud a:hover,
#top .sidebar .wp-tag-cloud a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

#top .sidebar ul,
#top #footer ul {
	list-style: square outside none;
	padding-left: 1em;
	font-size: 15px;
}

#top .sidebar li,
#top #footer li {
	font-size: 13px;
	border: 0;
	background: none;
}

/* ---- Posts / content ---- */
#top .post-entry,
#top .entry-content-wrapper {
	border-color: #222222 !important;
	color: #bbbbbb;
}

#top .post_delimiter,
#top .hentry {
	border-color: #222222 !important;
}

#top .entry-content-wrapper .post-title,
#top .entry-content-header .post-title {
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1.5em !important;
	padding-top: 15px;
	padding-bottom: 0.3em;
}

#top .post-meta-infos,
#top .blog-meta .post-meta-infos a,
#top .minor-meta,
#top .minor-meta a {
	color: #999999;
	font-size: 12px;
	line-height: 18px;
}

#top .entry-content-wrapper,
#top .entry-content-wrapper p {
	font-size: 16px;
	line-height: 18px;
}

#top .sidebar .textwidget,
#top .sidebar .textwidget p,
#top #footer .textwidget,
#top #footer .textwidget p {
	font-size: 12px;
	line-height: 18px;
}

#top .entry-content-wrapper p,
#top .sidebar .textwidget p,
#top #footer .textwidget p {
	margin-bottom: 0;
}

/* No author icon column and no dashed timeline, content starts right away */
#top .blog-meta,
#top .small-preview,
#top .post_author_timeline {
	display: none !important;
}

/*
 * Enfold video.css applies 9:16 padding (178%) to EVERY .avia-iframe-wrap.
 * WordPress post oEmbeds are wrapped in that class too, which creates a huge
 * empty box under each embed (~1144px). Match Twenty Eleven: let wp-embed
 * size the iframe normally.
 */
.js_active #top .avia-iframe-wrap:has(iframe.wp-embedded-content),
.js_active #top .avia-iframe-wrap:has(blockquote.wp-embedded-content) {
	height: auto !important;
	padding-bottom: 0 !important;
}

.js_active #top .avia-iframe-wrap iframe.wp-embedded-content {
	position: static !important;
	width: 100% !important;
	max-width: 100%;
	left: auto !important;
	top: auto !important;
}

/* ---- Footer ---- */
#footer {
	border-top: 1px solid #222222 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	color: #bbbbbb !important;
}

#footer .container {
	padding-top: 1.625em;
	padding-bottom: 1.625em;
}

#footer .widget {
	margin: 0;
	padding: 0;
	border: 0;
}

#footer a {
	color: #ffffff;
}

/* ---- Forms ---- */
#top input[type='text'],
#top input[type='password'],
#top input[type='email'],
#top input[type='url'],
#top input[type='search'],
#top textarea,
#top select {
	background-color: #dddddd;
	border: 1px solid #222222;
	color: #333333;
}

#top .sidebar .widget_search input[type='text'],
#top .sidebar .widget_search input[type='search'] {
	width: 77%;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
	#header_main .oil4-branding {
		display: block !important;
		text-align: center;
		padding: 20px 7.6% !important;
	}

	.oil4-site-title {
		max-width: 100%;
		margin-bottom: 10px !important;
	}

	.oil4-branding--no-description .oil4-site-title {
		margin-bottom: 0 !important;
	}

	.oil4-site-description {
		margin: 0 auto !important;
		max-width: 100%;
		text-align: center;
	}

	#top .container .av-content-small.units {
		width: 100%;
	}

	#top .inner_sidebar {
		margin-left: 0;
	}

	#header_main_alternate {
		margin-bottom: 0;
	}
}