/**
 *	RESET & SPECS
 */
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, 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; outline:0px; font-size:100%;	vertical-align:baseline; background:transparent; }
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; }

a					{ margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
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:5px 0; padding:0; }
select		{ padding:2px; vertical-align:middle; }

input[type="text"],
input[type="password"],
textarea	{ padding:7px; font:400 16px/20px 'Source Sans Pro', arial, sans-serif;}

:focus { outline:none; }
input[type='button'] { width:auto; overflow:visible; }

nav ul		{ margin:0; list-style:none; }
ul 				{ margin:0 0 0 20px; }
ol 				{ list-style-type:decimal; margin:0 0 0 20px; }
	li			{	margin:0 0 0px; }

.clearfix		{ display:block; clear:both; overflow:hidden; visibility:hidden; width:0; height:0; }
.whitespace				{ margin:0 0 25px; }
.whitespace-sml		{ margin:0 0 10px; }

.textfield.whitespace-sml		{ margin:0 0 15px; }

a.read-more		{ display:inline-block; padding:3px 10px; background:#ccc; color:#fff; font-weight:bold; border-radius:3px; }
a.read-more:hover		{ background:#ccc; color:#fff; }

.bordertop { padding:24px 0 0; background:url('../images/bordertop.gif') left top no-repeat; } 

.button		{
	display:inline-block; padding:0 20px;
	font:600 16px/29px 'Source Sans Pro', Arial, Helvetica, sans-serif; background:#00b4d1; border:1px solid #00b4d1; color:#fff;
	cursor:pointer;
}
.button:hover		{ background:#53a1b6; border-color:#53a1b6; }

.buttonwhite		{
	display:inline-block; padding:0 20px;
	font:600 16px/29px 'Source Sans Pro', Arial, Helvetica, sans-serif; background:#fff; border:1px solid #fff; color:#2a91ad;
	cursor:pointer;
}
.buttonwhite:hover		{
	background:#00b4d1; border:1px solid #00b4d1; color:#fff;
}

.hyphenate 	{	/* as close as it gets to fix 'm all */
  overflow-wrap:break-word; word-wrap:break-word;
	-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto;
  hyphens:auto;
}

::-webkit-input-placeholder { /* WebKit browsers */
	font-style:italic; color:#777;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-style:italic; color:#777;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-style:italic; color:#777;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	font-style:italic; color:#777;
}

/**
 *	STYLES AND GLOBAL SETTINGS
 */
html	{ height:100%; -ms-overflow-y:scroll;	overflow:-moz-scrollbars-vertical; overflow-y:scroll; }
body	{ height:100%; font:400 16px/20px 'Source Sans Pro', arial, sans-serif; color:#444; background:#fff; }

h1		{ margin:0 0 10px; font:400 26px/24px 'Source Sans Pro', arial, sans-serif; }
h2		{ margin:0 0 5px; font:600 16px/25px 'Source Sans Pro', arial, sans-serif; }
h3		{ margin:0 0 5px; font:400 26px/24px 'Source Sans Pro', arial, sans-serif; }
a			{ text-decoration:none; color:#027695; }

.mobile-menu-toggle		{ height:23px; padding:6px 10px; background:#cae6ee; text-align:right; font-size:20px; cursor:pointer; display:none; }

header							{ background:#5cb3cb url('../images/background.gif') center top no-repeat; }
	.header-content			{ width:980px; margin:0 auto; }
		.logo								{ display:block; }

.page	{ min-height:100%; width:980px; margin:0 auto; display:flex; display:-webkit-flex; }

	.content		{ display:flex; display:-webkit-flex; }
		
		.main		{ flex:1 1 auto; -webkit-flex:1 1 auto; order:2; -webkit-order:2; width:700px; padding:45px 40px; }
		.side		{ flex:1 1 auto; -webkit-flex:1 1 auto; order:1; -webkit-order:1; max-width:226px; min-width:226px; }

		.page-intro			{ font:400 20px/26px 'Source Sans Pro', arial, sans-serif; }

		.main-block-backbutton					{ display:block; margin:0 0 15px; }
		.main-block											{ display:flex; display:-webkit-flex; align-items:flex-start; -webkit-align-items:flex-start; }
			.main-block-image-wrapper				{ flex:0 0 23%; margin:0 20px 20px 0; border:1px solid #aeaeae; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.5); }
				.main-block-image-wrapper img 	{ width:100%; }
			.main-block-info								{ flex:0 0 70%; }
			.main-block-buttons							{ padding: 20px 0 20px 0;}
			.main-block-buttons	.button			{ margin-bottom: 15px; width: 300px; text-align: center; padding: 0 0;}
			.main-block-buttons	.infoblock-button.aanvraag-button .button			{ margin-bottom: 15px; width: 300px; text-align: center;}
			.main-block-extra-info								{ padding-bottom: 25px; font-weight: bold; }

		.overview												{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:space-between; -webkit-justify-content:space-between; }
			.overview-block									{ width:22%; margin:0 0 30px; }
				.overview-block-image						{ width:100%; margin:0 0 7px; border:1px solid #aeaeae; box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.5); }
				.overview-block-title						{ max-width:90%; color:#1c87a5; }
			.add-button	.overview-block-image		{ border:0; box-shadow:none; }

		.infoblock										{ display:flex; display:-webkit-flex; }
			.infoblock-title							{ font-size:23px; }
			.infoblock-content						{ flex:0 0 55%; -webkit-flex:0 0 50%; padding:0 5% 0 0; }
			.infoblock-button							{ display:flex; display:-webkit-flex; flex:0 0 40%; -webkit-flex:0 0 45%; align-items:center; -webkit-align-items:center; text-align:right; }
				.infoblock-button .button			{ display:block; width:100%; padding:0; text-align:center; }
				.aanvraag-result-msg					{ width:100%; text-align:center; color:#9fb905; }

		.downloadblock-intro										{ margin:0 0 10px; }
		.downloadblock-list											{ border-bottom:1px solid #e7e7e7; }
			.downloadblock-list-item								{ display:flex; display:-webkit-flex; border-top:1px solid #e7e7e7; }
				.downloadblock-list-item-title					{ flex:1 1 auto; -webkit-flex:1 1 auto; padding:5px 0; font-weight:600; }
				.downloadblock-list-item-date						{ flex:0 0 90px; -webkit-flex:0 0 90px; padding:5px 0; }
				.downloadblock-list-item-link						{ flex:0 0 75px; -webkit-flex:0 0 75px; padding:5px 0; text-align:right; }

		.overview-side-container					{ background:#6bb9ce; color:#fff; }
			.overview-side-title							{ margin:0; font:600 18px/36px 'Source Sans Pro', arial, sans-serif; background:#53a1b6; }
				.overview-side-title a						{ display:block; padding:5px 0 5px 18px; color:#fff; }
			.overview-side-list								{ margin:0; padding:0; list-style:none; }
			
				.overview-side-item-container						{ padding:5px 0; border-top:1px solid #a9d0db;}
				.overview-side-item-container.active		{ background:#DEF5FB; }
				.overview-side-item-container:hover			{ background:#85c6d8; }
				.overview-side-item-container.active:hover		{ background:#DEF5FB; }
			
					.overview-side-item								{ display:block; padding:3px 10px 3px 15px; /*background: url('../images/side-overview-item.gif') 19px 9px no-repeat;*/ color:#fff; }
					.overview-side-item.active				{ font-weight: bold; color:#023644; /*background:url('../images/side-overview-item-active.gif') 19px 9px no-repeat;*/  }

						.overview-side-sublist          { margin:0 0 0 15px; padding:0 5px 0 0; list-style:none;}
							.overview-side-sublistitem					{ font-size: 15px; border-top: 1px solid #BAD3DA; display: block; padding: 4px 0; }
							.overview-side-sublistitem.active		{ text-decoration:underline; }

		.side-button				{ display:block; padding:5px 0 5px 19px; font:600 18px/36px 'Source Sans Pro', arial, sans-serif; background:#53a1b6; color:#fff; border-top:1px solid #a9d0db; }
		.side-button:hover	{ background:#6bb9ce; }

		.sideblock						{ padding:19px; background:#cae6ee; }
			.sideblock-title			{ margin:0; font:600 18px/24px 'Source Sans Pro', arial, sans-serif; color:#256d80; }
			.sideblock-content		{ margin:0 0 10px; color:#256d80; }

		.side-colorblock				{ width:100%; height:448px; background:url('../images/colorblock.gif') 0 0 repeat-x; }
		.side-colorblock-small	{ width:100%; height:234px; background:url('../images/colorblock-small.gif') 0 0 repeat-x; }


.videowrapper       			{ position:relative; height:0; padding:25px 0 56.25%; }
	.videowrapper iframe        { position:absolute; top:0; left:0; width:100%; height:100%; }

.button_naarshop					{ position:absolute; top:20px; right: 25px;  }

/**
 *	FOOTER
 */
.non-footer		{ padding:0 0 190px; }
.footer		{ position:relative; height:190px; width:980px; margin:-190px auto 0; clear:both; }
	.footer-content		{ padding:10px 30px; }


/**
 *	NAVBAR
 */
.page-number	{ padding:0 5px; }
	.page-number.activepage	{ font-weight:bold; color:#444; }


/**
 *	SEARCH
 */
.xsearch-result-message-container		{ margin:0 0 15px; }
.xsearch-result		{ padding:20px 0 25px; border-bottom:1px solid #ccc; }
	.xsearch-page-title		{ font:18px/24px 'Source Sans Pro', arial, sans-serif; }
	.xsearch-laatst-gewijzigd		{ font-size:11px; color:#777; }


/**
 *	FORM
 */
.xsformbuilder_small_textbox		{ display:none; }
.xsInPageAddContent					{ width:200px; margin:0 0 15px; }
	.xsInPageAddContent	a					{ display:block; padding:5px; text-decoration:none; color:#fff; text-align:center; background:#ccc; border-radius:5px; }
	.xsInPageAddContent	a:hover		{ background:#ccc; }

.form-table	.col1			{ display:inline-block; width:25%; padding:5px 0; vertical-align:top; font-size:15px; }
.form-table	.col2			{ display:inline-block; width:74%; padding:5px 0; }

.form-table	.col2	.info			{ font-size:12px; color:#ccc; font-style:italic; }
.form-table	.col2 select		{ width:354px; margin:0 5px 0 0; padding:7px 5px; }
.form-table	.col2 label			{ cursor:pointer; }

.textfield		{ width:340px; margin:0 5px 0 0; font:400 16px/18px 'Source Sans Pro', Arial, Helvetica, sans-serif; border:1px solid #a9a9a9; }
	.textfield.postcode-cijfers		{ width:40px; margin:0 4px 0 0; }
	.textfield.postcode-letters		{ width:25px; text-transform:uppercase; }
	.textfield.datum-dag					{ width:25px; margin:0 4px 0 0; }
	.textfield.datum-maand				{ width:25px; margin:0 4px 0 0; }
	.textfield.datum-jaar					{ width:40px; margin:0 4px 0 0; }
.textarea			{ height:80px; width:340px; resize:vertical; }
select				{ width:304px; padding:5px; font:400 16px/18px 'Source Sans Pro', Arial, Helvetica, sans-serif; }

input[type='button'].form-button		{ margin:5px 0 0 5px; padding:5px 15px; border:0; background:#ccc; color:#fff; cursor:pointer; }
.button-divider			{ float:left; width:20px; }

.req_field,
.error_text		{ font-size:12px; color:#e81010; }

.attachment_box		{ width:345px; }
	.attachment-title		{ width:315px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/**
 * TL@FB - LOGIN FORM 
 */
.noDisplay  {display:none;}
.displayNormal {display:block;}
#login_form_wrapper {position:relative;}
#login_form_wrapper .loadingOverlay {display:none;position:absolute;top:0;left:0;height:100%;width:100%;opacity:0.9;text-align:center;background-color:#FFF;}
.logged_in_message {display:none;}

/**
 * TL@FB - WACHTWOORD WIJZIGEN FORM 
 */
.formErrors {color:#FF0000;padding:0 0 20px 0;}
.fieldNotValid {border-color:#FF0000;}

/**
 * TL@FB - GRATIS DOCENTENEXEMPLAAR AANVRAGEN FORMULIER 
 */
.docentexemplaar-aanvraag-formulier-wrapper { display:none; padding-bottom:25px;}
.aanvraag-formulier-radio { display:inline-block; }
.aanvraag-formulier-radio-label { display:inline-block; width:410px; cursor:pointer;}
.aanvraag-formulier-radio-wrapper { display:inline-block; width:30px; vertical-align:top;padding:12px 0 0}
.aanvraag-formulier-result-msg { width:100%; text-align:left; color:#9fb905; padding:20px 0;}

@media only screen and (max-width:996px) {
	
	.page,
	.header-content		{ width:auto; }

}

@media only screen and (max-width:900px) {

	.page				{ flex-flow:column wrap; -webkit-flex-flow:column wrap; }
		.main		{ order:1; -webkit-order:1; width:auto; }
		.side		{ order:2; -webkit-order:2; max-width:100%; min-width:100%; }

	.side-menu		{ position:absolute; width:100%; top:35px; display:none; }
	.mobile-menu-toggle			{ display:block; }

	.sideblock									{ padding:19px 41px; }

	.side-colorblock,
	.side-colorblock-small		{ display:none; }
	
	.button_naarshop {display: none;}

}

@media only screen and (max-width:620px) {

	a.logo img				{ width:100%; }

	.downloadblock-list-item				{ flex-wrap:wrap; -webkit-flex-wrap:wrap; }
		.downloadblock-list-item-title	{ flex:0 0 100%; padding:5px 0 0; }
		.downloadblock-list-item-date		{ flex:0 0 50%; }
		.downloadblock-list-item-link		{ flex:0 0 50%; }

	.infoblock									{ flex-flow:column; }
		.infoblock-content-text			{ margin:0 0 15px; }
			.infoblock-content						{ flex:0 0 auto; }
			.infoblock-button							{ flex:0 0 auto; }

}

@media only screen and (max-width:500px) {

	.main-block							{ flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; -webkit-justify-content:center; }
		.main-block-image-wrapper			{ margin:0 15px 15px 0; }

	.infoblock									{ flex-direction:column; -webkit-flex-direction:column; }
		.infoblock-content-text			{ margin:0 0 10px; }

	.overview-block			{ width:30%; }
	
	.textfield		{ width:95%; }

}

@media only screen and (max-width:400px) {

	.overview-block			{ width:46%; }

}