@charset utf-8;
/*
Theme Name: Havenkwartier 2.0
Author: Harco Rutgers
Author URI: http://harcorutgers.nl

 * Built on the Whiteboard Framework
 * http://whiteboardframework.com
 */

/*
 * The Whiteboard Framework is licensed under the GPL license.
 * Feel free to use the Whiteboard Framework for commercial and non-commercial ventures.
 * We require a link in the CSS file and request a link on the website
*/

/*
List of divs in Whiteboard
Note that this list does not include the dynamically generated ids and classes, such as the body classes, the post ids, etc
*/

html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #333;
	background: #e7e7e7;
}

body > .wrapper { 
	height: auto;
	min-height: 100%; 
}

.wrapper {
	height: 100%;
	padding-bottom: 0;
}

code {
	font-family: 'Open Sans', sans-serif;
}

blockquote {
	border-left: 3px solid #ddd;
	margin: 30px 20px 30px 0;
	padding-left: 20px;
	font-style: italic;
}

.container,
.container-content  {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

.container-content {
	padding-bottom: 50px;
	padding-top: 120px;
}

.grecaptcha-badge {
	display: none;
}

 

/* ===== HEADER ===== */

#header {
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	background-color: #fff;
	height: 90px;
	box-shadow: 0px 0px 5px 0px #888888;
}

#logo {
	position: absolute;
	width: 118px;
	height: 61px;
	background: #fff url("images/hk.jpg") no-repeat;
	text-transform: uppercase;
	padding: 29px 0 0 82px;
	font-size: 12px;
	font-weight: 200;
	line-height: 15px;
	letter-spacing: 1px;
}

.logo-top {
	color: #868686;
}

.logo-bottom {
	color: #cecece;
}

/* ===== MENU ===== */

#nav {
	text-transform: uppercase;
	margin-right: -55px;
}
#responsive_menu_pro_menu ul {
	top: 60px;
	left: -60px;
	
}
#responsive_menu_pro_menu ul a {
	color: #333;
	font-weight: 100;
	font-size: 15px;
}
#responsive_menu_pro_menu .sub-menu {
	-webkit-animation-name: menu; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
    animation-name: menu;
    animation-duration: 0.25s;
}

#menu-item-526,
#menu-item-528 {
	display: none;
}

#responsive_menu_pro_search_input {
	border: 1px solid #ccc !important;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes menu {
    0% {opacity:0;}
    100% {opacity:1;}
}

/* Standard syntax */
@keyframes menu {
    0% {opacity:0;}
    100% {opacity:1;}
}
#responsive_menu_pro_menu .current_page_item a,
#responsive_menu_pro_menu .current-menu-item a,
#responsive_menu_pro_menu .current-menu-parent a,
#responsive_menu_pro_menu .current-menu-ancestor a {
	color: #e83d8b;
}
#responsive_menu_pro_menu .current-menu-parent ul a,
#responsive_menu_pro_menu .current-menu-ancestor ul a {
	color: #333;
}
#responsive_menu_pro_menu .current-menu-parent ul a:hover,
#responsive_menu_pro_menu .current-menu-ancestor ul a:hover {
	color: #e83d8b;
}
#responsive_menu_pro_menu .current-menu-parent ul .current_page_item a,
#responsive_menu_pro_menu .current-menu-ancestor ul .current-menu-item a {
	color: #e83d8b;
}
#responsive_menu_pro .responsive_menu_pro_menu li ul {
	padding-left: 0 !important;
}

#menu-item-528 > a {
	padding-left: 5px;
	padding-right: 5px;
}

#menu-item-526 > a {
	padding-right: 5px;
}

/* ===== CONTENT ===== */

hr {
	width: 100%;
	border: 0;
	background: #ddd;
	/* background: #e83d8b url("images/bottombar.jpg") no-repeat right; */
    height: 3px;
	margin: 20px 0 20px 0;
	clear: both;
}

#content {
	width: 980px;
	max-width: 100%;
}

#content h1,
.container-content > h1 {
	font-weight: 100;
	text-transform: uppercase;
	font-size: 25px;
	line-height: 25px;
	margin-top: 0;
} 

#content h2,
body > div.wrapper > div.container-content > a.post-single-link > div > div.overlay > div.post-content > h2 {
	font-weight: 100;
	text-transform: uppercase;
	font-size: 20px;
}

#content h2 a {
	text-decoration: none;
	color: #333;
}

#content > div > h2 {
	margin-top: 0;
	margin-bottom: 10px;
}

.page-single {
	background: #fff;
	padding: 20px;
}

.page-single a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #e83d8b;
}

.post-single {
	background: #333;
	margin-bottom: 20px;
	width: 980px;
	max-width: 100%;
}

.post-single-link  {
	text-decoration: none;
	color: #333;
}

.overlay {
	background: #fff;
	opacity: 1;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
}

.post-single-link:hover .overlay {
	opacity: 0.8;
}

.featured-thumbnail-nieuws {
	float: left;
	width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
	margin: 0 20px 0 0;
}

@media all and (max-width: 750px) {
		div.featured-thumbnail-nieuws {
		min-width: 100%;
		margin-bottom: 10px;
	}
	.post-content {
		margin: 0 0 0 10px;
	}
	.featured-thumbnail-nieuws img {
		width: 100%;
		height: auto;
	}
}

.featured-thumbnail-nieuws img {
	position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

.post-content {
	padding: 2px 20px 2px 0;
}

.post-meta {
	width: 100%;
	background: #e83d8b url("images/bottombar.jpg") no-repeat right;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 28px;
}

.post-meta img {
	vertical-align: text-top;
}

.publicatiedatum {
	padding: 10px;
}

.more {
	background: #e83d8b url("images/bottombar.jpg") no-repeat right;
	color: #fff;
	text-decoration: none;
	padding: 0 10px 0 10px;
	float: right;
}

.more2 {
	background: #e83d8b url("images/bottombar.jpg") no-repeat right;
	color: #fff;
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	text-transform: uppercase;
	line-height: 28px;
	font-size: 14px;
}

.divider {
	height: 10px;
	border-top: 1px solid #ddd;
	margin: 5px 0 5px 0;
}

.wp-pagenavi,
.em-pagination {
	clear: both;
	
}

.wp-pagenavi::before,
.em-pagination::before {
	content: "PAGINA";
}

.wp-pagenavi .pages {
	display: none;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	padding: 10px 2px 10px 5px;
	margin: 10px 2px 10px 0;
	color: #333;
	border-bottom: 0;
}

.em-pagination a, .em-pagination span {
	text-decoration: none;
	padding: 10px 2px 10px 5px;
	margin: 10px 2px 10px 0;
	color: #333;
	border-bottom: 0;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current, .em-pagination a:hover, .em-pagination span.current {
	border-color: #666;
	font-weight: bold;
	color: #e83d8b;
	border-bottom: 0;
}

.collapseomatic	{background-image: url(images/arrows-down.png) !important}
.collapseomatic {background-repeat: no-repeat !important}
.colomat-close	{background-image: url(images/arrows-up.png) !important}
.colomat-close  {background-repeat: no-repeat !important}
.colomat-hover	{text-decoration: none; }

.collapseomatic {
	padding: 5px 10px 5px 30px;
	background-color: #e7e7e7;
}

.collapseomatic h3 {
	text-transform: uppercase;
	font-weight: 100;
	font-size: 15px;
	padding: 0;
	margin: -15px 0 -10px 0;
	line-height: 15px;
}

.collapseomatic .number {
	padding: 0 5px 0 5px;
	margin: 0 5px 0 0;
	background-color: #666;
	color: #fff;
}

.collapse-content {
	margin: 0;
	padding: 5px 10px 5px 10px;
	border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
}

.collapseomatic .groen {
	background-color: #91bd5f;
}

.collapseomatic .blauw {
	background-color: #00b5ef;
}

.collapseomatic .roze {
	background-color: #eb6ca8;
}

.collapseomatic .geel {
	background-color: #faf38e;
	color: #666;
}

.collapseomatic .paars {
	background-color: #d797c2;
}

.collapseomatic {
	cursor: pointer;
}

/* ===== CONTACT PAGE ===== */

.contactgegevens {
	padding: 0 20px 0 10px;
	margin: 0 30px 20px 0;
	border-left: 3px solid #ddd;
	float: left;
}

/* ===== MOGELIJKHEDEN PAGE ===== */

.col2-extra {
	background: #fff;
	padding: 1px 20px 20px 20px;
	margin-bottom: 15px;
}

.col2 a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #e83d8b;
}

/* ===== SINGLE POST ===== */

.row {
    padding-right: 320px;
    overflow: hidden;
}
.col1 {
    float: left;
    width: 100%;
}
.col2 {
    float: right;
    margin-right: -320px;
    width: 300px;
}
.col1,
.col2 {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}
.col2 img {
	margin: 0 0 10px 0;
}
.single-post-content {
	padding: 20px 20px 25px 20px;
	background: #fff;
	margin-bottom: 15px;
}
.single-post-content a,
.col2-em-extra > a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #e83d8b;
}

@media all and (max-width: 750px) {
	.row {
		padding: 0;
		overflow: visible;
	}
	.col1 {
		float: none;
		margin-bottom: 30px;
	}
	.col2 {
		float: none;
		margin-right: 0;
		margin-top: 15px;
        width: 100%;
	}
	.col1,
    .col2 {
        padding-bottom: 0;
        margin-bottom: 0;
    }
	.col2 img {
		margin: 0 15px 10px 0;
		vertical-align: top;
		width: 100%;
		height: auto;
	}
}

.older a,
.newer a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #e83d8b;
	text-transform: uppercase;
}

/* ===== EVENT MANAGER ===== */

.agenda-content {
	padding: 0;
	margin-top: -15px;
}

.em-maand {
	margin-top: 0;
}

.event-single {
	margin-bottom: 20px;
	width: 980px;
	max-width: 100%;
}

.em-event {
	background: transparent;
	margin-bottom: 20px;
	width: 980px;
	max-width: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #333;
}

.em-event-link  {
	text-decoration: none;
	color: #333;
}

.em-event-link:hover .overlay {
	opacity: 0.8;
}

.em-featured-thumbnail-event {
	float: left;
	width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
	margin: 0 20px 0 0;
	background-color: #333;
}

@media all and (max-width: 750px) {
    #content div.em-featured-thumbnail-event {
		min-width: 100%;
		margin-bottom: 10px;
	}
	.em-event-content {
		margin: 0 0 0 10px;
	}
}

.em-featured-thumbnail-event img {
	position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
	opacity: 0.6;
}

#content > div > div.col2 > img {
	width: 100%;
	height: auto;
}

.em-date-overlay {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	z-index: 2;
}

.em-date-overlay .em-date-day {
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
}

.em-date-overlay .em-date-month {
	font-size: 25px;
	text-transform: uppercase;
	line-height: 25px;
	font-weight: 700;
}

.em-date-overlay .em-date-start {
	display: inline-block;
	margin-top: 30px;
	padding-right: 2px;
}

.em-date-overlay .em-date-end {
	display: inline-block;
	margin-top: 30px;
	padding-left: 3px;
	border-left: 2px solid #fff;
}

.em-event-content {
	padding: 2px 20px 2px 0;
}

.em-event-meta {
	background: #e83d8b url("images/bottombar.jpg") no-repeat right;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 28px;
	padding: 0 0 0 10px;
}

.em-event-meta img {
	vertical-align: text-top;
}

.bottombar-text {
	float: left;
	max-width: 50%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.em-extra {
	background: #fff;
	border-top: 1px solid #ddd;
	padding: 15px 0 0 0;
}

.em-location-columns {
	-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
	-webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

@media all and (max-width: 900px) {
    .em-location-columns {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	}
}

@media all and (max-width: 720px) {
    .em-location-columns {
	-webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	}
}

.em-location-columns a{
	display: inline-block;
}

.em-location-columns > a.location-5,
.em-location-columns > a.location-6,
.em-location-columns > a.location-7,
.em-location-columns > a.location-8,
.em-location-columns > a.location-12,
.em-location-columns > a.location-63,
.em-location-columns > a.location-64,
.em-location-columns > a.location-58 {
	display: none;
}

/* ===== SIDEBAR ===== */

#sidebar {
	width: 980px;
	max-width: 100%;
}

#sidebar ul {
	padding: 0;
}

#sidebar .widget-area h3{
	text-transform: uppercase;
	font-weight: 100;
	margin: 0 0 10px 0;
	font-size: 20px;
}

#sidebar .widget-sidebar {
	width: 48%;
	float: left;
	background: #fff;
	margin-bottom: 10px;
	margin-top: 5px;
}

#sidebar .widget-1 {
	margin-right: 4%;
}

#sidebar .widget-inner {
	margin: 20px 20px 30px 20px;
}

#sidebar .widget-2.widget-even.widget-inner > div > ul > li {
	background-image: none;
	padding-left: 0;
}
#sidebar .widget-2.widget-even.widget-inner a {
	color: #333;
	text-decoration: none;
	font-weight: 100;
}
#sidebar .widget-2.widget-even.widget-inner > div.twitter > a {
	border-bottom: 0;
	color: #fff;
}
#sidebar .widget-2.widget-even.widget-inner > div > ul > li > a,
#sidebar .widget-1.widget-first.widget-odd.widget-inner > div.twitter,
#sidebar .widget-3.widget-last.widget-odd.widget-inner > div.twitter,
#sidebar > ul > div.widget-even.widget-last.widget-2.widget-area.widget-sidebar > div.widget-inner > div.twitter,
#sidebar > ul > div.widget-odd.widget-first.widget-1.widget-area.widget-sidebar > div.widget-inner > div.twitter {
	display: none;
}
#sidebar .widget-2.widget-even.widget-inner > div > ul > li > span {
	font-size: 14px;
}

@media all and (max-width: 750px) {
    #sidebar .widget-sidebar {
	width: 100%;
	float: none;
	}
	
	#sidebar .widget-inner {
	padding: 20px;
	margin: 0 0 15px 0;
	}
	
	#sidebar .meerfb,
	#sidebar .twitter {
	margin-bottom: 10px;
	}
}
}

#sidebar ul {
	padding: 0;
}

.cff-author > a > div.cff-author-text > p.cff-page-name.cff-author-date,
.cff-post-links > div > a {
	color: #333;
	border-bottom: 1px solid #e83d8b;
	text-transform: uppercase;
}
.cff-author {
	display: none;
}
.cff-text a,
.cff-link-title a,
.cff-details a,
.cff-post-desc a,
.cff-expand > a,
.cff-post-links > a,
.cff-viewpost-facebook {
	color: #333;
	font-weight: 100;
}
.cff-details > a > p {
	text-transform: uppercase;
}
#cff .cff-post-links {
	padding: 2px 0 2px 0;
}
#cff a:hover {
	text-decoration: none;
}
#cff .cff-item {
	padding: 10px 0 10px 0;
	font-size: 14px;
}
#cff p {
	margin: 2px 0 2px 0;
}
.cff-post-desc,
.cff-where,
.cff-info,
.cff-link-title > a,
.cff-shared-link,
.cff-details,
.cff-media-link {
	display: none;
}

/* ===== FORMS ===== */

#mce-EMAIL {
	padding: 10px;
	border: 0;
	background: #e7e7e7;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	color: #333;
	margin-bottom: 10px;
	width: 200px;
}

.mc-field-group {
	max-width: 100%;
}

.button {
	padding: 5px 25px 5px 10px;
	background: url("images/buttonbar.png") no-repeat right;
	color: #fff;
	border: 0;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-decoration: none;
}

input#s {
    background: url(images/search.png) no-repeat 10px 10px #e7e7e7;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px 10px 10px 35px;
	border: 0;
	width: 180px;
	max-width: 100%;
}

#content input#s {
    margin-top: 10px;
	margin-bottom: 10px;
}

input#searchsubmit {
    display: none;
}

/* ===== EVENT-FORM ===== */

#event-form h3 {
	font-weight: 100;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 5px;
}

#event-form #event-name {
	background: #e7e7e7;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
	border: 1px solid #bbb;
	border-radius: 3px;
	width: 80%;
	max-width: 100%;
}

#em-recurrence-checkbox,
#em-time-all-day {
	height: 20px;
	width: 20px;
	vertical-align: middle;
}

#event-form .em-date-start,
#event-form .em-date-end,
#event-form .em-time-input,
#event-form #recurrence-frequency,
#event-form #recurrence-interval,
#event-form #end-days,
#event-form #location-select-id,
#event-form .event-editor > textarea,
#event-form > div > div.inside.event-form-details > div.event-extra-details > div > input[type="text"],
#event-form #event-owner-name,
#event-form #event-owner-email,
#event-form #event-image {
	background: #e7e7e7;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
	border: 1px solid #bbb;
	border-radius: 3px;
	max-width: 100%;
	margin-bottom: 10px;
}
#event-form #location-select-id {
	min-width: 200px;
}

#em-location-data > div.em-location-map-container,
#em-location-data > table > tbody > tr > th {
	display: none;
}

#event-form > p > input {
	padding: 5px 25px 5px 10px;
	background: url("images/buttonbar.png") no-repeat right;
	color: #fff;
	border: 0;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

#event-image {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	margin: 5px 0 5px 0;
}

/* ===== CONTACT FORM ===== */

.wpcf7 h3{
	font-weight: 100;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 5px;
}

.wpcf7 input {
	background: #e7e7e7;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
	border: 1px solid #bbb;
	border-radius: 3px;
	max-width: 100%;
	margin-bottom: 10px;
}

.wpcf7 textarea {
	background: #e7e7e7;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
	border: 1px solid #bbb;
	border-radius: 3px;
	width: 80%;
	max-width: 100%;
}

.wpcf7 input.button{
	padding: 5px 25px 5px 10px;
	background: url("images/buttonbar.png") no-repeat right;
	color: #fff;
	border: 0;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-decoration: none;
}

/* ===== FOOTER ===== */

#footer {
	background: #555;
	clear: both;
	position: relative;
	z-index: 10;
	height: 120px;
	margin-top: -100px;
	padding: 30px 0 50px 0;
	color: #e7e7e7;
}

.push {
	height: 120px;
}

#footer > div > div > h4 {
	text-transform: uppercase;
	font-weight: 100;
	color: #fff;
	font-size: 15px;
	margin: 0 0 5px 0;
}

#footer .footer-search {
	max-width: 100%;
	margin: 4px 40px 20px 0;
	float: left;
}

#footer .footer-info {
	float: right;
	max-width: 100%;
	font-size: 12px;
	text-transform: uppercase;
	margin: 10px 0 20px 0;
}

#footer .footer-info a {
	text-decoration: none;
	color: #e7e7e7;
	border-bottom: 1px solid #e83d8b;
}
	
.no-results {
	
}

.none { /* this class is used to hid the skip to content link at the beginning of the document for accessibility */
	display: none;
}
.clear {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}
.aligncenter {
	text-align: center;
}
.alignleft {
	text-align: left;
}
.alignright {
	text-align: right;
}

/* Always remember to compress your live stylesheet and keep an uncompressed backup */