body, html
{
margin:0;
padding:0;
color:#000;
background-color:#F6EBF6;
font-family:'Arial', sans-serif;
font-size:100%;
height:100%;
}
div#geheel
{
width:100%;
min-height:100%;
position:relative;
}
div#bovenbalk
{
width:100%;
height:200px;
margin:0;
padding:0;
background-color:#BD65BD;
box-shadow: 0px 4px 16px #000;
}
div#titelvak
{
width:100%;
height:200px;
margin:0;
padding:0;
background: url(bovenbalk.png) no-repeat center/contain;
background: url(bovenbalk.png) no-repeat center/contain, linear-gradient(165deg, rgba(0,0,0,0.2), rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0.2));
}

div#buffer
{
padding:0 0 40px;
}
div#inhoud
{
width:960px;
margin:0 auto;
padding:0;
background-color:#FFFBBB;
box-shadow: 0px 6px 12px #000;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}

div#tabbladen 
{
width:960px;
position:relative;
font-family:'Arial',sans-serif;
}
div.huidig, div.tabblad
{
width:182px;
padding:5px;
font-size:120%;
text-align:center;
text-decoration:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
position:absolute;
}

div#index {left:0px;}
div#boeken {left:192px;}
div#overmijzelf {left:384px;}
div#schrijven {right:192px;}
div#contact {right:0px;}
div.huidig
{
color:#000;
background-color:#FFFBBB;
padding-top:11px;
border-top-right-radius:8px;
border-top-left-radius:8px;
top:-6px;
z-index:2;
}
div.tabblad
{
top:0px;
color:#FFFFFF;
background-color:#222;
}

a#linkerhoekje div.tabblad{border-bottom-left-radius:8px;}
a#rechterhoekje div.tabblad{border-bottom-right-radius:8px;}
div.tabblad:hover, div.tabblad:active
{
background:linear-gradient(75deg, rgba(150,100,150,1), rgba(168,112,168,1), rgba(150,100,150,1)) ;
}

div#tekstvak
{
width:870px;
min-height:250px;
padding:40px 45px 20px;
overflow:hidden;
}

div#tekstvak h1
{
font-family:'URW Palladio L', 'Palatino Linotype', 'Georgia', 'Garamond', serif;
font-size:130%;
font-weight:normal;
font-style:italic;
letter-spacing: 0.07em;
text-transform:uppercase;
}
div#tekstvak h2
{
font-size:110%;
font-weight:bold;
font-style:normal;
}
div#tekstvak ul
{
line-height:125%;
}
div#tekstvak a:link, div #tekstvak a:visited
{
text-decoration:underline;
color:#000;
}
div#tekstvak a:hover, div #tekstvak a:active
{
text-decoration:underline;
color:#966496;
}
img.foto
{
display:block;
float:right;
margin:0 0 10px 10px;
padding:0;
}
video
{
display:block;
width:720px;
margin:0 auto 10px;
}
p.citaat
{
display:block;
margin:0 30px 0;
font-style:italic;
}
span.vet
{
font-weight:bold;
}
span.cursief
{
font-style:italic;
}
div.boekenhouder
{
display:block;
width:100%;
padding:0;
margin:0;
}
div#indebanvandewolf
{
height:361px;
}
div#jachtophetantiserum
{
height:346px;
}
div#destrijdmetdewittewolf
{
height:349px;
}
div#dejachtopdewolven
{
height:358px;
}
div.boek
{
display:block;
background-color:#FFF;
box-shadow:2px 2px 5px #444;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
width:100%;
padding:0;
margin:0 0 20px;
position:relative;
}
a.boek
{
text-decoration:none;
}
img.boek
{
float:left;
width:250px;
padding:0;
margin:0;
}
div.boektekst
{
float:left;
width:580px;
height:70%;
padding:20px;
margin:0;
text-align:left;
overflow:auto;
}
div.boektekst h3
{
font-size:120%;
font-weight:normal;
font-style:normal;
margin-top:0;
text-indent:30px;
}
p.info
{
position:absolute;
left:270px;
bottom:0;
font-style:italic;
}
a.iconlink
{
display:block;
width:400px;
margin:5px 0 5px 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
span.icon
{
display:inline-block;
width:32px;
height:32px;
vertical-align:middle;
margin-right:5px;
}
a.iconlink span#facebook{background:url('facebookzwart.png') center/contain no-repeat;}
a.iconlink span#twitter{background:url('twitterzwart.png') center/contain no-repeat;}
a.iconlink span#instagram{background:url('instagramzwart.png') center/contain no-repeat;}
a.iconlink:hover span#facebook, a.iconlink:active span#facebook{background:url('facebookpaars.png') center/contain no-repeat;}
a.iconlink:hover #twitter, a.iconlink:active #twitter{background:url('twitterpaars.png') center/contain no-repeat;}
a.iconlink:hover #instagram, a.iconlink:active #instagram{background:url('instagrampaars.png') center/contain no-repeat;}
div#footer
{
width:100%;
padding:0 0 8px 0;
position:absolute;
bottom:0;
}
div#footer p
{
padding:0;
margin:0;
text-align:center;
font-size:75%;
color:#222;
}


@media screen and (max-width: 1085px) {
	body,html{font-size:95%;}
	div#bovenbalk{
	height:133px;
	box-shadow: 0px 3px 12px #000;
	}
	div#titelvak{height:133px;}
	div#buffer{padding:0 0 37px;}
	div#inhoud
	{
	width:675px;
	box-shadow: 0px 5px 10px #000;
	border-bottom-right-radius:15px;
	border-bottom-left-radius:15px;
	}
	div#tabbladen{width:675px;}
	div.huidig, div.tabblad
	{
	width:127px;
	padding:4px;
	font-size:110%;
	}
	video
	{
	width:100%;
	margin-bottom:8px;
	}
	div#boeken {left:135px;}
	div#overmijzelf {left:270px;}
	div#schrijven {right:135px;}
	div.huidig
	{
	padding-top:9px;
	border-top-right-radius:6px;
	border-top-left-radius:6px;
	top:-5px;
	}
	a#linkerhoekje div.tabblad{border-bottom-left-radius:6px;}
	a#rechterhoekje div.tabblad{border-bottom-right-radius:6px;}
	div#tekstvak
	{
	width:605px;
	padding:30px 35px 15px;
	}
	img.foto{
	margin:0 0 8px 8px;
	width:300px;
	}
	div#indebanvandewolf{height:288px;}
	div#jachtophetantiserum{height:276px;}
	div#destrijdmetdewittewolf{height:278px;}
	div#dejachtopdewolven{height:285px;}
	div.boek{margin:0 0 16px;}
	img.boek{width:200px;}
	div.boektekst
	{
	width:373px;
	height:65%;
	padding:16px;
	}
	div.boektekst h3{text-indent:25px;}
	p.info {left:216px;}
	a.iconlink
	{width:360px;}
}


@media screen and (max-width: 695px) {
	body,html{font-size:90%;}
	div#bovenbalk{
	height:88px;
	box-shadow: 0px 2px 8px #000;
	}
	div#titelvak{height:88px;}
	div#buffer{padding:0 0 34px;}
	div#inhoud
	{
	width:455px;
	box-shadow: 0px 3px 6px #000;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	}
	div#tabbladen{width:455px;}
	div.huidig, div.tabblad
	{
	width:85px;
	padding:3px;
	font-size:100%;
	}
	video {margin-bottom:6px;}
	div#boeken {left:91px;}
	div#overmijzelf {left:182px;}
	div#schrijven {right:91px;}
	div.huidig
	{
	padding-top:6px;
	border-top-right-radius:4px;
	border-top-left-radius:4px;
	top:-3px;
	}
	a#linkerhoekje div.tabblad{border-bottom-left-radius:4px;}
	a#rechterhoekje div.tabblad{border-bottom-right-radius:4px;}
	div#tekstvak
	{
	width:409px;
	padding:20px 23px 10px;
	}
	img.foto{
	margin:0 0 5px 5px;
	width:220px;
	}
	div#indebanvandewolf{height:216px;}
	div#jachtophetantiserum{height:207px;}
	div#destrijdmetdewittewolf{height:209px;}
	div#dejachtopdewolven{height:214px;}
	div.boek{margin:0 0 12px;}
	img.boek{width:150px;}
	div.boektekst
	{
	width:235px;
	padding:12px;
	}
	div.boektekst h3{text-indent:20px;}
	p.info {left:162px;}
	a.iconlink{
	width:320px;
	margin:4px 0 4px 0;
	}
	span.icon
	{
	width:24px;
	height:24px;
	margin-right:4px;
	}
}
@media screen and (max-width: 454px) {
	body,html{font-size:85%;}
	div#bovenbalk{
	height:60px;
	box-shadow: 0px 1px 6px #000;
	}
	div#titelvak{height:60px;}
	div#buffer{padding:0 0 32px;}
	div#inhoud
	{
	width:360px;
	box-shadow: 0px 2px 4px #000;
	border-bottom-right-radius:6px;
	border-bottom-left-radius:6px;
	}
	div#tabbladen{width:360px;}
	div.huidig, div.tabblad
	{
	width:68px;
	padding:2px;
	font-size:100%;
	}
	video {margin-bottom:5px;}
	div#boeken {left:72px;}
	div#overmijzelf {left:144px;}
	div#schrijven {right:72px;}
	div.huidig
	{
	padding-top:4px;
	border-top-right-radius:3px;
	border-top-left-radius:3px;
	top:-2px;
	}
	a#linkerhoekje div.tabblad{border-bottom-left-radius:3px;}
	a#rechterhoekje div.tabblad{border-bottom-right-radius:3px;}
	div#tekstvak
	{
	width:328px;
	padding:15px 16px 7px;
	}
	img.foto{
	margin:0;
	width:100%;
	}
	div#indebanvandewolf{height:172px;}
	div#jachtophetantiserum{height:165px;}
	div#destrijdmetdewittewolf{height:166px;}
	div#dejachtopdewolven{height:170px;}
	div.boek{margin:0 0 9px;}
	img.boek{width:120px;}
	div.boektekst
	{
	width:190px;
	padding:9px;
	}
	div.boektekst h3{text-indent:16px;}
	p.info {left:129px;}
	a.iconlink{
	width:320px;
	margin:4px 0 4px 0;
	}
	span.icon
	{
	width:24px;
	height:24px;
	margin-right:4px;
	}
}