/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	outline:0;
	margin:0;
	border:0;
	padding:0;
	}

html, body {
	width:100%;
	background:#fff;
	}

html {
	overflow-y:scroll;
	height:100%;
	}

body {
	background:#fff;
	min-height:100%;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	line-height:24px;
	text-align:left;
	}

table {
	border-collapse:collapse;
	}

a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	line-height:24px;
	text-align:left;
	}

input, textarea {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	line-height:24px;
	text-align:left;
	}

select {
	border:solid 1px #a9a08c;
	}

p, ul, ol {
	margin-bottom:21px;
	}

strong {
	font-weight:bold;
	}

em {
	font-style:italic;
	}

hr {
	width:100%;
	height:1px;
	background:#a89f8c;
	margin-bottom:21px;
	}

#top {
	position:relative;
	width:1px;
	height:30px;
	margin:0 auto;
}

#beeldmerk {
	position:absolute;
	top:4px;
	left:284px;
	width:163px;
	height:216px;
	background:transparent url(../img/beeldmerk.png) no-repeat 0 0;
	}

#header {
	width:100%;
	height:175px;
	background:url(../img/header_bg.jpg) repeat-x 0 0;
	}

#container {
	box-sizing:border-box;
	width:971px;
	min-height:100%;
	overflow:hidden;
	margin:0 auto;
	padding:0 20px 0 20px;
	}

#col 	{
	float:left;
	width:830px;
	overflow:hidden;
	padding:0 20px 0 0;
	margin:0 0 0 10px;
	}

#col1	{
	float:left;
	width:615px;
	overflow:hidden;
	padding:0 20px 0 0;
	margin:0;
	}

#col2	{
	float:right;
	width:270px;
	overflow:hidden;
	padding:0 0 0 20px;
	margin:0 0 0 0;
	}

#header-content {
	width:977px;
	height:175px;
	margin:0 auto;
	}

#logo-container {
	box-sizing:border-box;
	float:left;
	width:410px;
	height:175px;
	margin:0 0 0 23px;
	padding:38px 0 0 37px;
	background:#ebdfc6 url(../img/logo_bg.gif) repeat-y 0 0;
	border-right:1px solid #a9a08c;
	}

#nav {
	float:left;
	width:204px;
	height:175px;
	margin:0 0 0 -1px;
	}

#nav ul {
	list-style-type:none;
	}

#nav li {
	overflow:hidden;
	width:204px;
	height:37px;
	margin:0 0 5px 0;
	/* background:transparent url(../img/nav-sprite.png) no-repeat 0 top; */
	background-color:#ebdfc6;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top:1px solid #a9a08c;
	border-right:1px solid #a9a08c;
	border-bottom:1px solid #a9a08c;
	}

#nav a {
	display:block;
	width:182px;
	height:40px;
	margin:0 0 5px 0;
	font-size:18px;
	color:#877b61;
	line-height:40px;
	padding:0 0 0 22px;
	text-decoration:none;
	}

#nav a:hover {
	text-decoration:none;
	color:#fff;
	}

#logo {
	width:272px;
	height:86px;
	background:url(../img/logo.gif) no-repeat 0 0;
	}

h1 {
	}

h1 {
	background:#ec6d19;
	width:389px;
	height:40px;
	line-height:40px;
	font-size:18px;
	color:#fff;
	font-weight:bold;
	margin-bottom:40px;
	padding:0 0 0 20px;	
	}

h2 {
	font-size:18px;
	line-height:27px;
	margin-bottom:16px;
	font-weight:bold;
	color:#ec6d19;
	}

h3 {
	font-size:18px;
	line-height:27px;
	margin-bottom:14px;
	font-weight:bold;
	}

p {
	margin-bottom:21px;
	}

.smalltext {
	font-size:75%;
}

.error {
	display:inline-block;
	background:#ec6d19;
	color:#fff;
	font-weight:bold;
	padding:5px;
	margin:0 0 20px 0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

#menus {
	width:100%;
	overflow:hidden;
}

.menuitem {
	box-sizing:border-box;
	width:100%;
	height:53px;
	padding:0;
	margin:0 0 5px 0;
	background-color:#ebdfc6;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:1px solid #a9a08c;
	}

.menuitemcompact {
	width:287px;
	height:38px;
	overflow:hidden;
	line-height:29px;
	padding:0;
	margin:0 0 5px 0;
	background:#e1cea3;
	border:solid 1px #a9a08c;
	}

.menuitemcompact a {
	display:block;
	width:100%;
	height:100%;
	line-height:29px;
	padding:0 0 9px 9px;
	}

.rounded {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

.roundedleft {
	-webkit-border-left-radius: 10px;
	-moz-border-left-radius: 10px;
	border-left-radius: 10px;
	}

.roundedright {
	-webkit-border-right-radius: 10px;
	-moz-border-right-radius: 10px;
	border-right-radius: 10px;
	}

.menuitem h3, .menuitemcompact h3  {
	font-size:18px;
	color:#877b61;
	margin:0 0 5px 0;
	padding-top:11px;
	}

.menuitem p, .menuitemcompact p  {
	margin:0;
	}

.menuitem a, .menuitemcompact a {
	box-sizing:border-box;
	display:block;
	padding:0 0 0 7px;
	width:100%;
	height:100%;
	text-decoration:none;
	line-height:50px;
	font-size:16px;
	}

.menuitem a:hover, .menuitemcompact a:hover {
	text-decoration:none;
	color:#fff;
	}

.menu-arrow {
	float:right;
	width:23px;
	height:60px;
	background:url(../img/menu-arrow.gif) no-repeat 0 0;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	}

.menu-arrow-nav {
	float:right;
	width:23px;
	height:38px;
	background:url(../img/menu-arrow-nav.gif) no-repeat 0 0;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	}

.blok {
	width:318px;
	overflow:hidden;
	background:#f1e7d4;
	border:1px solid #b5aea9;
	}

.blok p {
	margin:10px;
	}

#nav a:hover {
	color:#fff;
	}

input[type="text"], input[type="submit"] {
	width:200px;
	height:25px;
	border:solid 1px #a9a08c;
	margin:0 0 2px 10px;
	padding:0 0 0 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

textarea {
	width:200px;
	height:50px;
	min-height:25px;
	border:solid 1px #a9a08c;
	margin:0 0 2px 10px;
	padding:0 0 0 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	resize:vertical;
	}

.formkader {
	box-sizing:border-box;
	display:block;
	width:100%;
	background:#f5efe1;
	border:solid 1px #a9a08c;
	padding:10px;
	}

.formkader input[type="text"], .formkader textarea {
	width:380px;
	}

input[type="submit"] {
	text-align:center;
	padding:0 20px 0 20px;
	width:150px;
	font-weight:bold;
	color:#747067;
	}

input[type="submit"]:hover {
	background:#ec6d19;
	color:#fff;
	cursor:pointer;
	}

.formkader table tr td {
	vertical-align:middle;
	}

.workshop {
	display:block;
	width:790px;
	background:#f5efe1;
	border:solid 1px #a9a08c;
	padding:20px;	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom:20px;
	}

#col .workshop {
	width:788px;
	}

#col1 .workshop {
	display:block;
	width:470px;
	background:transparent;
	border:0;
	padding:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	margin-bottom:21px;
	}

#col2 .workshop {
	width:256px;
	background:#ebdfc6;
	}

#col1 .workshoplink {
	display:none;
	}

.workshopteaser {
	display:block;
	}

.workshoptekst {
	display:none;
	}

#col1 .workshopteaser {
	display:none;
	}

#col1 .workshoptekst {
	display:block;
	}

#col1 .changedateworkshopdiv {
	display:block;
	}

#col2 .workshopteaser {
	display:block;
	}

#col2 .workshoptekst {
	display:none;
	}

#col2 .changedateworkshopdiv {
	display:none;
	}

#col2 {
	border-left:dashed 1px #a9a08c;
	}

#col1 .workshop h3 {
	/* upgrade naar h2 */
	font-size:16px;
	line-height:16px;
	margin-bottom:16px;
	font-weight:bold;
	color:#ec6d19;
	}

#col1 .workshop_alldates {
	display:none;
	}

#col1 .workshop_thisdate {
	display:block;
	}

#col2 .workshop_alldates {
	display:block;
	}

#col2 .workshop_thisdate {
	display:none;
	}


#menu {
	display:none;
}
#menu a {
	display:block;
	width:100%;
	height:100%;
}
#li-menu-x {
	display:none;
}

/* -------------------- RESPONSIVE -------------------- */


@media screen and (max-device-width: 980px) {
	#header-content {
		width:100%;
	}
	#menu {
		display:block;
		background:transparent url(../img/menu.png) no-repeat center center;
		width:52px;
		height:62px;
		float:right;
	}
	#li-menu-x {
		display:block;
	}
	a#menu-x {
		display:block;
		background:transparent url(../img/menu-x.png) no-repeat center center;
		width:22px;
		height:24px;
		float:right;
		margin:5px 10px 0 0;
	}

	#top {
		width:100%;
	}
	#beeldmerk {
		left:auto;
		right:20px;
		background-size:90%;
		background-position:right 0 top 0;
	}
	#logo-container {
		margin-left:20px;
	}
	#nav {
		display:none;
		position:absolute;
		z-index:10;
		top:0;
		right:-204px;
		height:auto;
		overflow:hidden;
		background:#ebdfc6;
	}
	#nav li {
		border:0;
	}
	#container {
		width:100%;
	}
	#col1 {
		width:100%;
	}
	#col2 {
		width:100%;
	}
	.formkader {
		box-sizing:border-box;
		width:100%;
		margin-bottom:30px;
	}
	.menuitem {
		float:left;
		width:43%;
		margin: 0 30px 30px 0;
	}
}

@media screen and (max-device-width: 560px) {
	.formkader table, .formkader table td {
		width:100%;
	}
	.formkader table td {
		float:left;
	}
	.formkader table td input[type='text'], .formkader table td textarea {
		margin:0;
		padding:0;
		width:100%;
	}
	.formkader table td input[type="submit"] {
		margin-top:20px;
	}
	#logo {
		background-size:80%;
	}
	#logo-container {
		width:270px;
	}
	h1 {
		width:250px;
	}
}


@media screen and (max-device-width: 470px) {
	.menuitem {
		float:left;
		width:100%;
		margin: 0 0 30px 0;
	}
}

@media screen and (max-device-width: 450px) {
	#beeldmerk {
		background-size:80%;
	}
}

@media screen and (max-device-width: 435px) {
	#logo {
		background-size:80%;
	}
	#logo-container {
		width:270px;
	}
	h1 {
		width:250px;
	}
}

@media screen and (max-device-width: 380px) {
	#beeldmerk {
		background-size:70%;
	}
	#logo {
		background-size:65%;
	}
}

@media screen and (max-device-width: 365px) {
	#logo-container {
		width:230px;
	}
	h1 {
		width:210px;
	}
}

@media screen and (max-device-width: 320px) {
	#logo {
		background-size:60%;
	}
	#logo-container {
		width:210px;
	}
	h1 {
		width:190px;
	}
}