/* Normalizes margin, padding */
body, div,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0; padding: 0;
}

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 { font-size: 100%; }

/* Removes list-style form lists */
ol, ul { list-style: none; }

/* Klikrandjes weghalen */
a:focus, div:focus { outline: none; }
img::-moz-focus-inner { border: 0; }


/* layout.css */
html, body { height: 100%; width: 100%; margin: 0 auto; text-align: center; }

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	color: #231f20;
}
body.bg { background: #EEEEEE; }

#content { position: relative; width: 824px; min-height: 100%; text-align: left; margin: 0 auto; }

.gr { color: #939598; }
.wt { color: #FFFFFF; }

h1 { font-size: 17px; line-height: 22px; font-weight: normal; padding-left: 5px; padding-top: 3px; }
	li.h1, li.h1actief { font-size: 16px; line-height: 18px; font-weight: normal; padding-left: 5px; }

h2 { font-size: 16px; line-height: 18px; font-weight: normal; padding-bottom: 12px; }
	h1 a, h2 a { color: #939598; text-decoration: none; }
	h2 a:hover { text-decoration: underline; }

h3 { font-size: 12px; line-height: 18px; font-weight: bold; padding-bottom: 2px; }

p, ul { padding-bottom: 13px; }

a { color: #939598; text-decoration: underline; }
a:hover { color: #231f20; text-decoration: underline; }

a.rollalpha { color: #939598; }
a.rollalpha:hover { color: #231f20; }




#blokkennav { position: fixed; top: 30px; z-index: 5; }

#blokkennav ul { position: absolute; left: 0px; width: 360px; z-index: 10; }
#blokkennav ul li { float: left; width: 110px; padding-left: 9px; overflow: hidden; }
#blokkennav ul li div { width: 110px; height: 110px; text-indent: -9999px; }
#blokkennav ul li.nav-mdz div { background: url('../images/nav_margriet@2x.png'); background-size: 100% auto; }
#blokkennav ul li.nav-int div { background: url('../images/nav_int@2x.png'); background-size: 100% auto; }
#blokkennav ul li.nav-pro div { background: url('../images/nav_project@2x.png'); background-size: 100% auto; }
#blokkennav ul li.actief div, #blokkennav ul li a:hover div { background-position: bottom !important; }


div#adres {
	position: relative;
	top: 120px;
	margin-left: 10px;
	width: 348px;
	height: 20px;
	overflow: hidden;
	z-index: 36;
	color: #939598;
	background: none;
	font-family: Georgia, serif;
	font-size: 14px;
}
#adres-tel { float: left; }
#adres-mail { float: right; }

div#bg { position: fixed; top: 0px; left: 0px; z-index: 2; }





div#bgbeeld, div#fadeshow2 {
	position: absolute;
	z-index: 2;
	top: -15px;
	left: -45px;
	width: 914px;
	height: 631px;
	overflow: hidden;
}



#arrows { position: fixed; bottom: 25px; right: 25px; width: 110px; height: 40px; z-index: 500; }
.fotopijl { float: left; width: 40px; height: 40px; overflow: hidden; margin-left: 0px; text-indent: -999px; }
#fotopijl-prev { background: url('../images/btngr2_terug@2x.png') no-repeat; background-size: 100% auto; }
#fotopijl-next { background: url('../images/btngr2_verder@2x.png') no-repeat; background-size: 100% auto; }
#arrows a:hover div { background-position: bottom; }

/* projecten lijst met thumbs */
#lijst {
	position: relative;
	left: 476px;
	top: 30px;
	width: 348px;
	height: 497px;
	z-index: 11;
	text-align: left;
}

#lijst li {
	position: relative;
	width: 320px;
	height: 110px;
	overflow: hidden;
	padding-bottom: 9px;
}

ul#lijst li a { text-decoration: none; }

div#projectthumb {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 110px;
	height: 110px;
	background: #FFFFFF;
}
div#projectthumb img { width: 100%; height: 100%; }

div#projecttitel {
	position: absolute;
	top: 5px;
	left: 120px;
	text-align: left;
	font-size: 12px;
	line-height: 17px;
}
/* einde projectenlijst met thumbs */



/* projecten tekst vlakken */
#tekstvlak { position: relative; left: 476px; top: 30px; width: 348px; height: auto; background: #FFFFFF; z-index: 550; }

div#projectbalk {
	position: absolute;
	/* position: fixed; margin-left: 476px; top: 30px; */
	top: 0px;
	left: 0px;
	width: 348px;
	height: 42px;
	overflow: hidden;
	background: #FFFFFF;
	border-bottom: 1px solid #B3B5B7; /*#939598;*/
	z-index: 600;
}

div#projectbg {
	position: relative;
	display: block;
	top: 43px;
	left: 0px;
	width: 100%;
	background: #FFFFFF;
}
#projectbg h1 { padding: 15px; }

#tekst { padding: 15px; }
/* einde projecten tekst vlakken */


/* icoontjes in projectbalk */
.btns { position: absolute; width: 25px; height: 25px; overflow: hidden; text-indent: -9999px; cursor: pointer;  }
div#maakterug { 
	top: 8px; left: 11px; background: url('../images/btnn2_terug@2x.png') no-repeat; background-size: 100% auto; }
#maakterug:hover { background-position: bottom; }
div#maakklein { 
	top: 8px; left: 37px; background: url('../images/btnn2_klein@2x.png') no-repeat; background-size: 100% auto; }
#maakklein:hover { background-position: bottom; }
div#maakgroot { 
	top: 8px; left: 37px; background: url('../images/btnn2_groot@2x.png') no-repeat; background-size: 100% auto; display: none; }
#maakgroot:hover { background-position: bottom; }

div#maaktekst { position: absolute; top: 12px; left: 72px; font-size: 13px; color: #939598; width: 265px; height: 17px; overflow: hidden; }


ul#h1lijst { height: 40px; z-index: 16; width: 330px; padding: 10px 0 0 10px; }
ul#h1lijst li { float: left; padding-right: 12px; }
ul#h1lijst li a { color: #939598; text-decoration: none; }
ul#h1lijst li a:hover { color: #231f20; }


@media only screen and (max-width: 1080px) {
	#arrows { left: 25px; right: auto; }
}

@media only screen and (max-width: 860px) {
	#arrows { display: none; left: 5px !important; }
	#tekstvlak, #lijst { left: 376px; }
}

@media only screen and (max-width: 850px) {
	div#maakterug { 
		top: 8px; left: 12px; background: url('../images/btnn_terug@2x.png') no-repeat; background-size: 100% auto; }
	div#maakklein { 
		top: 8px; left: 42px; background: url('../images/btnn_klein@2x.png') no-repeat; background-size: 100% auto; }
	div#maakgroot { 
		top: 8px; left: 42px; background: url('../images/btnn_groot@2x.png') no-repeat; background-size: 100% auto; }
	div#maaktekst { left: 77px; }
	
	#arrows { width: 130px; height: 50px; }
	.fotopijl { width: 50px; height: 50px; margin-left: 10px; }
	#fotopijl-prev { background: url('../images/btngr3_terug@2x.png') no-repeat; background-size: 100% auto; }
	#fotopijl-next { background: url('../images/btngr3_verder@2x.png') no-repeat; background-size: 100% auto; }
}

@media only screen and (max-width: 740px) {
	#content { width: 348px; }
	#blokkennav { position: absolute; }
	#tekstvlak, #lijst { left: 9px; top: 200px; }
}