/*
Theme Name: Foundation Paul van Kemenade quintet
Theme URI: https://www.paulvankemenade.com
Description: Theme voor Foundation Paul van Kemenade quintet, WordPress 3.0 compatible.
Author: Shyama Sewpersad Web Services
Author URI: https://www.sswebs.nl
Version: 1.0, juli 2012
*/


/* = = = RESETTING BROWSER DEFAULTS - based upon https://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ = = = */

.temp {color: #ccc; display: block; padding-top: 30px;}

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 20px;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
a[href], label[for], select, 
input[type=checkbox], input[type=radio] {
	cursor: pointer;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}
em {
	font-style: italic;
}

/* = = = SITE DEFAULTS 
-------------------------------------------------------------- */

html {
	overflow-y: scroll;	/* toont in FF altijd een scrollbar zodat gecentreerde site niet steeds verspringt. CSS3 */
}

body, html {
	height: 100%;
}

body, p, td, h1, h2, h3, h4, h5, h6, input, textarea, select {
	color: #280504;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	font-size: 0.8em;
	background: url(images/bg_site.gif) #280504 repeat-x top left;
}

h1, h2, h3, h4 {
	clear: both;
	font-family: 'Open Sans',sans-serif;
}

h1 {
	color: #ce4a21;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 8px;
}

h2 {
	color: #ce4a21;
	font-size: 1.1em;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 3px;
}
	h2 a {text-decoration: none;}
h3 {font-weight: bold; padding-bottom: 2px;}
h4 {color: #fff; font-size: 1.1em; font-weight: bold; padding-bottom: 8px;}

a {
	color: #CE4A21;
	text-decoration: underline;
}
a:visited {
	color: #CE4A21;
}
a:hover, a:focus, a:active {
	text-decoration: none;
}

a img, :link img, :visited img {
	border: 0;
}
.noLine {text-decoration: none;}

strong, b{
	font-weight: bold;
}

.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	margin: 0 auto;
}
img.alignleft {
	margin: 4px 14px 14px 0;
}
img.alignright {
	margin: 4px 0 14px 14px;
}
div.alignleft {
	margin: 4px 15px 0 0;
}

.offScreen {
	position: absolute;
	left: -9999px;
}


/* = = = = = = = de site 
-------------------------------------------------------------- */
#header {
	background: url(images/bg_header.gif) transparent repeat-x top left;
	clear: both;
}
	#wrapHeader {
		height: 175px; 
		margin: 0 auto; 
		overflow: hidden;
		position: relative;
		width: 980px;
	}
	
#wrapper {background-color: #7b9b85;}
#main {
	background: url(images/bg_main.gif) #618c81 repeat-x top left;
	border-left: 50px solid #DB6440;
	clear: both;
	margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 930px; /* 980px */
}

/* = = = Homepage 
-------------------------------------------------------------- */
#mainHome {
	background-color: #e7e6a3;
	clear: both;
	margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 980px; /* 980px */
}
#wrapTop {
	height: 222px; /* 229px */
	margin: 0 auto; 
	overflow: hidden;
	padding: 7px 0 0 22px;
	position: relative;
	width: 958px; /* 980px */
}
#wrapMiddle {
	background-color: #457367;
	height: 230px; /* 191px */
	margin: 0 auto; 
	overflow: hidden;
	padding-top: 10px;
	position: relative;
	width: 980px;
}
#wrapBottom {
	height: 259px; 
	margin: 0 0 0 75px; 
	overflow: hidden;
	position: relative;
}
	#wrapBottom .touringlist {
		background-color: #db6440;
		float: left;
		height: 259px;
		padding: 10px 15px 10px 40px;
		width: 357px; /* 412px */
	}
		#wrapBottom .touringlist li {margin-bottom: 12px;}
		#wrapBottom .touringlist h4.widget-title {padding-top: 10px;}
		#wrapBottom .touringlist h4.summary {font-size: 1em; padding-bottom: 0;}
		#wrapBottom .touringlist .when {font-weight: bold;}
		#wrapBottom .touringlist a:link,
		#wrapBottom .touringlist a:visited {color: #280504; line-height: 16px; text-decoration: none;}
		#wrapBottom .touringlist .dig-in a:link,
		#wrapBottom .touringlist .dig-in a:visited {color: #fff; font-size: 0.9em; font-style: italic;}

	#homeBericht {
		float: left;
		height: 259px;
		padding: 10px 0 10px 40px;
		width: 405px; /* 445px */
	}
	
/*** aanpassingen Sliders ***/	
.sldr_title {display: none;}
#roster_slider_3 img {margin: 0 30px 0 0;}
#roster_slider_3 h2 {padding-top: 4px;}
.roster_slider .roster_slider_thumbnail{margin:0 auto;} 
#roster_slider_cds h2 a {
    display: block;
    text-align: center;
}
#roster_slider_2 div.roster_slideri {text-align: center;}
#roster_slider_2 h2 {padding-top: 4px; text-align: center;}
#roster_slider_2 a {line-height: 15px;}
#roster_slider_2 .roster_year {font-size: 0.8em; margin-top: -4px; text-align: center;}
#wrapMiddle .roster_slider {margin: 0 auto;}
#roster_slider_2 a.roster_thumb_anchor {
    clear: both;
    float: left;
    line-height: 15px;
    margin-left: 56px;
    width: 100%;
}
 

/* = = = Einde Homepage 
-------------------------------------------------------------- */

	#wrapContent {
		background: url(images/bg_wrapContent.png) transparent repeat-y top left; 
		height: 580px;
		overflow: hidden;
	}
	html>body #wrapContent {
		height: auto;
		min-height: 580px;
	}


	#kolomLeft {
	  float: left;
	  margin-bottom: 50px;
	  padding: 0;
	  width: 350px; /* 350px */
	}
		#boxTop {height: 230px;}
		#boxBot {padding: 0 25px; width: 300px; /* 350px */}
	
	#container {
		float: right;
		height: 150px;
		margin: 0;
		width: 580px;
	}
	html>body #container {
		height: auto;
		min-height: 150px;
	}
		#content {
		  height: 250px;
		  overflow: hidden;
		  padding: 25px 25px 0 40px;			
		  width: 465px; /* 530px */
		}
		
		html>body #content {
			height: auto;
			min-height: 250px;
		}

#footer {
	background: url(images/bg_footer.png) transparent repeat-x top left;
	clear: both;
	color: #ffb41b;
	height: 220px;
}

.break { clear: both; height: 50px; width: 100%;}

/* = = = Header 
-------------------------------------------------------------- */
#serviceMenu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 35px;
	top: 10px;
}
	#serviceMenu li {
		display: inline;
	}
		#serviceMenu li a {
			color: #280504;
			font-family: 'Open Sans',sans-serif;
			font-size: 10px;
			font-weight: 700;
			padding: 2px 15px;
			text-decoration: none;
			text-transform: uppercase;
		}
		#serviceMenu li.current-menu-item a, 
		#serviceMenu li a:hover {color: #db6440;}

#branding {
/*	background: url(images/bg_branding.png) transparent no-repeat left bottom;*/
	width: 100%; 
	height: 66px;
	left: 25px;
    margin: 0;
	position: absolute;
	top: 44px;
}
	#blog-title a {
		display: block;
/*		height: 60px;
		left: 142px;
		position: absolute;
		top: 6px;
		width: 570px;
*/
	}
	#blog-title img {max-width: 100%;}

	/* = = = mainMenu = = = */
	#mainMenu {
		left: 10px;
		position: absolute;
		top: 120px;
		width: 980px;
	}

	.menu {float: left;}
	#mainMenu .menu.hide-s {display: none;}
	
	#mainMenu li {margin: 0; padding: 0;}
	
	.menu div {float: left; width: 150px;}
	.menu div.menu-hoofdmenu-4-container {width: 180px;}
		#mainMenu li a:link, #mainMenu li a:visited {
		color: #281e04;
		display: block;
		font-family: 'Open Sans',sans-serif;
		font-size: 13px;
		font-weight: 700;
		padding: 5px 0 5px 15px;
		text-decoration: none;
		text-transform: uppercase;
		line-height: 0.25em;
		text-decoration: none;
		}
			#mainMenu li a:hover {color: #db6440;}
			#mainMenu li.current-menu-item a:link, #mainMenu li.current-menu-item a:visited,
			#mainMenu li.current-page-ancestor a:link, #mainMenu li.current-page-ancestor a:visited,
			#mainMenu li.current-post-ancestor a:link, #mainMenu li.current-post-ancestor a:visited {
				color: #db6440;}

/* Code voor responsive menu. 
Zie https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css */
/*Style 'show menu' label button and hide it by default*/
	.show-menu {
		background: #fff;
		border-bottom: 2px solid #000;
		color: #000;
		cursor: pointer;
		display: none;
		padding: 10px 0 10px 20px;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 140%;
	}
	
	/*Hide checkbox*/
	input[type=checkbox]{
		display: none;
		-webkit-appearance: none;
	}
	
	/*Show menu when invisible checkbox is checked*/
	input[type=checkbox]:checked ~ #menu-hoofdmenu {
		display: block;
	}
	
	/*Hide dropdown links until they are needed*/
	li ul {
		display: none;
	}
				
				
				/* = = = sitebody 
-------------------------------------------------------------- */
/* = = = subMenu = = = */
.widget {
    clear: both;
    margin-bottom: 30px;
}
.widgetTitel {padding: 25px 0 0}
	.widgetTitel h3, .widgetTitel h3 a {color: #e7e6a3; font-size: 13px; padding-bottom: 15px; text-transform: uppercase;}
	.widgetTitel h3 a {text-decoration: none;}
	.submenu li {margin: 0 0 10px;}
	.submenu a:link, .submenu a:visited {color: #e7e6a3; font-weight: bold; line-height: 15px; text-decoration: none;}
	.submenu a:hover {color: #fff;}
	.submenu li.current_page_item a:link, .submenu li.current_page_item a:visited {color: #fff;}
	
ul.xoxo {}
.nav {
	margin-bottom: 10px;
	clear: both;
}

	.nav .txt {
		margin-left: 18px;
		text-align: left;
	}
	
	.txt a {
		text-decoration: none;
	}
	
		.nav div img {
			vertical-align: middle;
			margin-left: 6px;
		} 

	.nav h2 {
		color: #016100;
		padding: 3px 0 5px 18px;
		background: url(images/bg_h2.gif) #FFDB00 repeat-x top left;
	}
	
	.nav ul {
		margin: 0 20px 0 15px;
	}
	
		.nav li {
			border-bottom: 1px dashed #3D662F;	
			padding: 6px 0 4px;
		}
			
			.nav li a {
				display: block;
				padding: 3px 0 4px 15px;
				background: url(images/ic_sM.png) transparent no-repeat 2px 0.6em;
				text-decoration: none;
				line-height: 18px;
			}
			
			.nav li a:hover, .nav li a:focus, .nav li a:active {
				color: #F47B02;
				background: url(images/ic_sM_a.png) transparent no-repeat 2px 0.6em;
			}
			
			.nav li.active a {
				color: #F47B02;
				font-weight: bold;
				background: url(images/ic_sM_a.png) transparent no-repeat 2px 0.5em;
			}
			
				.nav li ul {
					margin-left: 0;
					margin-bottom: 0;
					width: 100%;
				}
				.nav li ul li {padding: 0;}
				
				.nav li li.first {
					border-top: 1px dashed #3D662F;
				}
				
				.nav li li.last {
					border-bottom: 1px dashed #FFFCEB;
				}
				
					.nav li li a {
						font-size: 0.9em;
						background-image: none;
						padding-left: 24px;
					}
					
					.nav li li a:hover, .nav li li a:focus, .nav li li a:active,
					.nav li.active li a,
					.nav li li.active a {
						background-image: none;
					}
					
					.nav li.active li a {
						font-weight: normal;
						color: #3D662F;
					}
					
					.nav li.active li a:hover {
						color: #F47B02;
					}
					
					.nav li li.active a {
						font-weight: bold;
						color: #F47B02;
					}


/* = = = Content 
-------------------------------------------------------------- */
#content ul {
	list-style-type: disc;
	margin-bottom: 0;
	padding: 5px 0 0 16px;
}

#content ol {
	list-style-type: decimal;
	margin-bottom: 0;
	padding: 5px 0 0 16px;
}

		/* === Formulier === */
		
		label{
			float: left;
			width: 120px;
			vertical-align: middle;
			margin-right: 2px;
		}
		
		input, select, textarea {
			font-size: 1em;
			/* width: 190px; */
			border: 1px solid #CE4A21;
			margin: 2px 0;
		}
		
		textarea {
			height: 110px;
			width: 298px;
		}
		
		input.button{
			width: 90px;
			cursor: pointer;
			background-color: #f5f5f5;
			padding: 1px 0;
			border: 1px solid #EF3A32;
		}
		
/* = = = Vriend van formulier ---*/ 
.gform_wrapper label {float: none; float: none;}
#content .gform_wrapper ul {padding: 0;}
.gform_wrapper .field_description_below .gfield_description {padding-top: 0 !important;}
.gform_wrapper label.gfield_label {width: 100%;}
.gform_wrapper #field_1_7 .gfield_label .gfield_required,
.gform_wrapper #field_1_6 .gfield_label .gfield_required {display: none;}
.gform_wrapper input.button {padding: 4px 8px;width: auto !important;}


/* = = = Guestbook 
-------------------------------------------------------------- */
#content ul.commentlist {list-style-type: none; padding: 5px 0 10px}
#content ul.commentlist li {margin-bottom: 10px;}
.author {font-style: italic;}
.date { font-size: 0.8em;}
#commentform {margin: 16px 0 10px;}

.navigation {clear: both; padding: 20px 0 0;}
.prev {float: left;}
.next {float: right;}

/* = = = CDs 
-------------------------------------------------------------- */
.cd .thumb img {
    float: right;
    height: 100px;
    margin: 0 0 2px 14px;
    width: 100px;
}
.cd .entry {margin-bottom: 10px;}
.cd h2 {padding-top: 6px;}
.details {clear: both; margin-top: 6px;}

#pvkcd_table tr:nth-child(even) {background: #edecba;}

/* = = = Footer 
-------------------------------------------------------------- */
#subsidiary, #siteinfo {
	background-color: #280504;
	color: #fff;
	margin: 0 auto;
	overflow: hidden;
	padding: 10px 50px 0 25px;
	width: 905px; /* 980px */
}
	.footer-column {
		float: left;
		margin-right: 10px;
		margin-top: 10px;
		width: 100%;
	}
	.footer-column p {color: #fff;}
	.footer-column ul li a:link, .footer-column ul li a:visited {
		color: #fff;
		display: block;
		padding: 0;
		text-decoration: none;
	}
	.footer-column ul li a:hover {color: #e7e6a3;}
	.footer-left {width: 300px;}
	.footer-middle {width: 385px;}
	.footer-right {float: right; width: 200px; margin-right: 0;}
		.footer-left li, .footer-middle li {margin: 0 0 10px;}
		.footer-left li a, .footer-middle li a {line-height: 15px;}
		.footer-middle .dig-in a:link,
		.footer-middle .dig-in a:visited {font-size: 0.9em; font-style: italic; text-decoration: none;}
	.footer-column .support {float: left; width: 49%;}
	.footer-column .reward {float: right; width: 48%;}
	.footer-homepage {font-size: .9em; margin-top: 18px; width: 452px;}
	.footer-icons {margin-top: 20px; width: 430px;}
		.footer-icons ul {clear: both; float: right; margin-bottom: 18px;}
		.support.footer-icons ul {float: left; margin-top: 36px;}
		.footer-right ul {float: right; margin: 2px  0 12px;}
		.footer-icons li, .footer-right li {display: inline;}
		.footer-icons li img, .footer-right li img {margin: 0 0 0 4px; vertical-align: middle;}
		.footer-icons ul li a:link, .footer-icons ul li a:visited,
		.footer-right ul li a:link, .footer-right ul li a:visited {display: inline;}
		.footer-right ul.para {}
	#siteinfo div {float: right; margin: 20px 0;}
	#siteinfo .discl a {color: #fff; font-size: 0.8em; margin-right: 12px; text-decoration: none;}
	.home {margin-right: 8px;}

#colofon {
	clear: both;
	height: 31px; /* 35px */
	margin: 0 auto 20px;
	padding: 4px 0 0;
	text-align: right;
	width: 819px; /* 819px */
}
		#colofon a {
			color: #fff;
			font-weight: bold;
			margin: 0 35px;
			text-decoration: none;
		}
		#colofon a:hover, #colofon a:active {
			text-decoration: underline;
		}

/* CD orderpagina */
ul#pvkcd_errors { list-style-type: none;}

/* = = = Agenda 
-------------------------------------------------------------- */
.tribe-events-list h2.tribe-events-page-title {font-size: 1.1em;}
.tribe-events-list .vevent.hentry h2 {font-size: 1.1em !important;}
.tribe-events-list-separator-month {font-size: 1.1em !important;}
.tribe-events-event-meta .tribe-events-meta-group {padding: 0 4% 0 0 !important; word-wrap: break-word;}
.tribe-events-event-meta .tribe-events-meta-group-organizer {padding: 0 !important;}
.tribe-events-meta-group .tribe-events-single-section-title {font-size: 1em !important;}
#content ul.tribe-events-sub-nav {padding: 0;}
#content .tribe-events-cal-links {display: none;}
#tribe-events .tribe-events-button {display: none !important;}


/* = = = MEDIA QUERIES 
-------------------------------------------------------------- */
@media only screen and (min-width: 310px) and (max-width: 980px) {
	body {font-size: 1em;}
	p, div {line-height: 1.5;}
	#wrapHeader {width: 100%; overflow: unset;}
		#mainMenu {width: 100%; left: 0; top: 81px; z-index: 400;}
		.menu {width: 100%; background: #fff;}
		.menu div, .menu div.menu-hoofdmenu-4-container {width: 100%;}
		#mainMenu .menu.hide-s {display: block !important; width: 100%;}
		#branding {left: 0; top: 24px;}
		#blog-title img {max-width: 90%; position: absolute; left: 5%; z-index: 500;}
	#mainHome {width: 100%;}
	#main {width: 96%;}
		.aside #boxTop {display: none;}
		html > body #wrapContent {min-height: auto;}
		#container {background-color: #e7e6a3; float: left; width: 100%;}
		#content {width: 100%;}
		#kolomLeft {display: none;}
	#wrapTop {width: 100%; height: unset; padding: 7px 0 0 1px;}
	#wrapMiddle {width: 100%;}
	#wrapBottom {margin: 0; height: unset; width: 100%;}
	#wrapBottom .touringlist, #homeBericht,
	#subsidiary, #siteinfo {
		height: auto; 
		padding: 10px;
		width: unset;
	}
	.footer-homepage {font-size: inherit; width: 100%;}
	.footer-icons {width: 100%;}
	.footer-icons ul {clear: unset; float: left;}
	.footer-left, .footer-middle, .footer-right {width: unset; float: left; padding: 0 20px;}
	.footer-right ul {float: left;}
	.footer-left li {margin: 0 0 20px;}
	#footer .textwidget {padding-left: 10px; padding-right: 10px;}
	
	#main {border-left: 0;}
	
		.show-s, .hide-s {display:none !important;}
		
		
		/* Code voor responsive menu. 
Zie https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css */
	/*Make dropdown links appear inline*/
	#mainMenu ul {
		background-color: #7b9b85;
		display: none;
		padding: 0 0 10px 0;
		position: static;/*  */
	}
	
	#mainMenu a {display: block;}
	
	/*Make all menu links full width*/
	#mainMenu ul li {
		background-color: #7b9b85;
		display: block;
		width: 100%;
	}
	#mainMenu li a:link {
		font-size: 100%;
		line-height: 1em;
		padding-left: 19px;
		width: 100%;
	}
	#mainMenu ul ul a {padding: 3px 10px 3px 20px;}
	
	/*Hide dropdown links until they are needed*/
	ul#menu-hoofdmenu ul li ul {
		/* display: none; */
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		opacity: 0;
		height: 0;
	}
	
	/*Display the dropdown on hover*/
	ul#menu-hoofdmenu ul li a:hover + .sub-menu, ul#menu-hoofdmenu .sub-menu:hover {
		display: block; 
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		opacity: 1;
		height: 100%;
	}	
	
	ul#menu-hoofdmenu ul {display: block; padding: 0 0 2px; position: relative; width: auto;}
	#menu .current-menu-item a, 
	#menu .current-menu-ancestor a, 
	#menu a:hover {background: none;}	
	
	#mainMenu li.current-menu-item,
	#mainMenu li.current-menu-item .sub-menu, #mainMenu li.current-page-ancestor .sub-menu {
		display: block; height: 100%; opacity: 1;
	}
	ul#menu-hoofdmenu .sub-menu {padding-left: 20px;}
	#mainMenu li.current-menu-item .sub-menu a,
	#mainMenu li.current-page-ancestor .sub-menu a {color: #281e04;}
	#mainMenu li.current-menu-item .sub-menu a:hover,
	#mainMenu li.current-page-ancestor .sub-menu a:hover	{color: #db6440;}
	#mainMenu li.current-menu-ancestor .current-menu-item a {color: #db6440;}
	ul#menu-hoofdmenu ul#menu-hoofdmenu-4 {padding-bottom: 20px;}
	

	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		padding: 10px 0;
		width: 100%;
	}
	
}

@media only screen and (max-width: 600px) {
	#content {padding: 25px 25px 0 10px; width: 94%;}
	.footer-icons li {
		display: block;
		margin-bottom: 10px;
	}
}


@media screen and (min-width: 768px) {

}
/*
@media only screen and (min-width: 481px) and (max-width: 767px) {
	#mainHome {background-color: blue;}
}
@media only screen and (min-width: 375px) and (max-width: 480px) {
	#mainHome {background-color: green;}
}
@media only screen and (min-width: 321px) and (max-width: 374px) {
	#mainHome {background-color: yellow;}
}
@media only screen and (max-width: 320px) {
	#mainHome {background-color: grey;}
}
/*