/*
 * INCLUDE
 */
@import url('leesleeuw.css');

/* groep 1/2 */
body.type1 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep1-2-top.jpg');}
body.type1 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_1-2_footer.png');}
body.type1 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep1-2-volgende.jpg);}
body.type1 a#knop-volgende {left:571px;}
body.type1 #ballon {background-image: url('../gfx/groepsoverzicht/groep1-2-ballon.png');}
body.type1 #illustratie {background-image: url('../gfx/groepsoverzicht/groep1-2-illustratie.png');}
body.type1 .knoppen {background-image: url('../gfx/groepsoverzicht/groep1-2-knoppen.jpg');}
body.type1 .knop {background-image: url('../gfx/groepsoverzicht/groep1-2-knop.jpg');}

/* groep 3 */
body.type2 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep3-top.jpg');}
body.type2 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_3_footer.png');}
body.type2 a#knop-vorige:hover {background-image:url(../gfx/groepsoverzicht/groep3-vorige.jpg);}
body.type2 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep3-volgende.jpg);}
body.type2 #ballon {background-image: url('../gfx/groepsoverzicht/groep3-ballon.png');}
body.type2 #illustratie {background-image: url('../gfx/groepsoverzicht/groep3-illustratie.png');}
body.type2 .knoppen {background-image: url('../gfx/groepsoverzicht/groep3-knoppen.jpg');}
body.type2 .knop {background-image: url('../gfx/groepsoverzicht/groep3-knop.jpg');}

/* groep 4 */
body.type3 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep4-top.jpg');}
body.type3 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_4_footer.png');}
body.type3 a#knop-vorige:hover {background-image:url(../gfx/groepsoverzicht/groep4-vorige.jpg);}
body.type3 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep4-volgende.jpg);}
body.type3 #ballon {background-image: url('../gfx/groepsoverzicht/groep4-ballon.png');}
body.type3 #illustratie {background-image: url('../gfx/groepsoverzicht/groep4-illustratie.png');}
body.type3 .knoppen {background-image: url('../gfx/groepsoverzicht/groep4-knoppen.jpg');}
body.type3 .knop {background-image: url('../gfx/groepsoverzicht/groep4-knop.jpg');}

/* groep 5 */
body.type4 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep5-top.jpg');}
body.type4 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_5_footer.png');}
body.type4 a#knop-vorige:hover {background-image:url(../gfx/groepsoverzicht/groep5-vorige.jpg);}
body.type4 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep5-volgende.jpg);}
body.type4 #ballon {background-image: url('../gfx/groepsoverzicht/groep5-ballon.png');}
body.type4 #illustratie {background-image: url('../gfx/groepsoverzicht/groep5-illustratie.png');}
body.type4 .knoppen {background-image: url('../gfx/groepsoverzicht/groep5-knoppen.jpg');}
body.type4 .knop {background-image: url('../gfx/groepsoverzicht/groep5-knop.jpg');}

/* groep 6 */
body.type5 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep6-top.jpg');}
body.type5 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_6_footer.png');}
body.type5 a#knop-vorige:hover {background-image:url(../gfx/groepsoverzicht/groep6-vorige.jpg);}
body.type5 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep6-volgende.jpg);}
body.type5 #ballon {background-image: url('../gfx/groepsoverzicht/groep6-ballon.png');}
body.type5 #illustratie {background-image: url('../gfx/groepsoverzicht/groep6-illustratie.png');}
body.type5 .knoppen {background-image: url('../gfx/groepsoverzicht/groep6-knoppen.jpg');}
body.type5 .knop {background-image: url('../gfx/groepsoverzicht/groep6-knop.jpg');}

/* groep 7/8 */
body.type6 #outerwrapper {background-image: url('../gfx/groepsoverzicht/groep7-8-top.jpg');}
body.type6 #innerwrapper {background-image: url('../gfx/groepsoverzicht/groepsoverzicht_7-8_footer.png');}
body.type6 a#knop-vorige:hover {background-image:url(../gfx/groepsoverzicht/groep7-8-vorige.jpg);}
body.type6 a#knop-volgende:hover {background-image:url(../gfx/groepsoverzicht/groep7-8-volgende.jpg);}
body.type6 #ballon {background-image: url('../gfx/groepsoverzicht/groep7-8-ballon.png');}
body.type6 #illustratie {background-image: url('../gfx/groepsoverzicht/groep7-8-illustratie.png');}
body.type6 .knoppen {background-image: url('../gfx/groepsoverzicht/groep7-8-knoppen.jpg');}
body.type6 .knop {background-image: url('../gfx/groepsoverzicht/groep7-8-knop.jpg');}

P {
	margin: 0;
	padding: 0;
}

#innerwrapper {
	background: no-repeat left 100% transparent;
	padding-bottom: 190px;
}


/*
 *	Header
 */

#headerwrapper {
	height: 206px;
}

h2#pagetitle {
	position: absolute;
	z-index: 10;
	height: auto;
	width: auto;
	visibility: hidden;
	margin: 0;
	padding: 0;
}


/*
 *	Header > boekknop
 */
div.boekknop {
	position: absolute;
	left: 224px;
	top: 75px;
	width: 78px;
	height: 121px;
	overflow: hidden;
	z-index: 20;
}

div.boekknop a {
	display: block;
	width: 0;
	height: 121px;
	padding: 0 0 0 78px;
	text-decoration: none;
	background: no-repeat 0 0;
}


/*
 *	Header > knop vorige/volgende
 */
a#knop-vorige {
	display: block;
	position: absolute;
	left: 352px;
	top: 63px;
	width: 0;
	height: 55px;
	padding: 0 0 0 78px;
	overflow: hidden;
	z-index: 20;
	text-decoration: none;
	font-size: .1em;
	background: no-repeat 0 0;
}

a#knop-volgende {
	display: block;
	position: absolute;
	left: 618px;
	top: 63px;
	width: 0;
	height: 55px;
	padding: 0 0 0 78px;
	overflow: hidden;
	z-index: 20;
	text-decoration: none;
	font-size: .1em;
	background: no-repeat 0 0;
}


/*
 *	Header > intro
 */
div#intro {
	position: absolute;
	left: 357px;
	top: 121px;
	width: 400px;
	height: 74px;
	overflow: hidden;
	z-index: 10;
	font: bold 12px/14px arial,sans-serif;
	color: #5b5b5b;
}



/*
 *	Ballon
 */
div#ballon { /* ie6 pngfix */
	position: absolute;
	left: 40px;
	top: 146px;
	width: 0;
	height: 140px;
	padding: 0 0 0 160px;
	overflow: hidden;
	z-index: 20;
	background: no-repeat 0 0;
}



/*
 *	Illustratie
 */
div#illustratie { /* ie6 pngfix */
	position: absolute;
	left: 772px;
	top: 82px;
	width: 148px;
	height: 147px;
	z-index: 20;
	background: no-repeat 0 0;
}



/*
 * Knoppen
 */
.knoppen {
	width: 675px;
	height: 222px;
	margin: 0 0 0 167px;
	padding: 0;
	background-repeat: no-repeat;
	overflow: hidden;
}

#knoppen-last {
	width: 801px; /* width: 986px */
	height: 357px;
	padding: 0 0 0 185px;
	margin: 0;
}



/*
 * Knop
 */
div.knop {
	position: relative;
	float: left;
	width: 131px;
	height: 196px;
	overflow: hidden;
	margin-top: 6px;
	margin-left: 33px; /* ie6 fix */
}

div.knop a {
	position: absolute;
	left: 0;
	top: 0px;
	width: 131px;
	height: 188px;
	padding: 8px 0 0;
	display: block;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: 0 8px;
}

div.knop a:hover {
	background-position: -131px 8px;
}


div.knop a strong {
	display: block;
	width: 0;
	height: 131px;
	padding: 0 0 0 131px;
	overflow: hidden;
}

div.knop a em {
	display: block;
	width: 116px;
	height: 48px;
	padding: 5px 7px 0 8px;
	font: normal 10px/11px arial,sans-serif;
	color: #ffffff;
	overflow: hidden;
}