body
{
	background: #bebebe url(../images/achtergrond-b765.gif) repeat-y;
	color: #282828;
	font: normal 9pt/20px verdana, helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

small,
.small
{font: normal 8pt/18px verdana, helvetica, sans-serif;}

smaller,
.smaller
{font: normal 7.2pt/14px verdana, helvetica, sans-serif;}

strong {font-weight: bold;}

h1
{
	font: bold 13pt/20px verdana, helvetica, sans-serif;
	margin: 15px 0;
}

h2
{
	font: bold 11pt/20px verdana, helvetica, sans-serif;
	margin: 15px 0;
}

h3
{
	font: bold 10pt/20px verdana, helvetica, sans-serif;
	margin: 15px 0;
}

tt,
pre
{
	background-color: #ffffff;
	color: #000084;
	font: normal 10pt/20px "courier new", courier, monospace;
	margin: 0;
	padding: 0 1px;
}

b tt,
b pre
{
	font-weight: bold;
	padding: 0 2px;
}

tt {white-space: nowrap;}

p,
.p
/*
	<div class="p"> wordt gebruikt i.p.v. <p> als er in een alinea een
	block-level element moet staan (bijv. een andere <div> of een <ul> of <ol>)
	gebruik pic-paragraph voor img
*/
{margin: 10px 0;}

img
/* display: block; verwijderd, controle in IE7 gewenst */
{border: none;}

.nowrap {white-space: nowrap;}


/* LOSSE MARGES */

#margin-menu-top,
#margin-menu-bottom,
#margin-footer-top,
#margin-footer-bottom
/*
	in html is mogelijk:
	<div id="margin-menu-top"><a name="top">&nbsp;</a></div>
*/
{
	clear: left;
	float: left;
}

#margin-menu-top {line-height: 45px;}

#margin-menu-bottom {line-height: 45px;} /* effectief: 45+10 (van item) = 55px */

#margin-footer-top {line-height: 30px;} /* effectief: 30+10 (van item) = 40px */

#margin-footer-bottom {line-height: 45px;}


/* ANKERS */

a
/* aparte css nodig voor [if lt IE 6] */
{
	border-bottom: 1px solid #b4b4b4;
	color: #282828;
	text-decoration: none;
}

a:visited
/* moet boven hover staan */
{color: #b4b4b4;}

a:hover
{
	border-color: #282828;
	color: #282828;
}

a.block,
a.block-external
{
	display: block;
	font: bold 10pt/20px verdana, helvetica, sans-serif;
}

a.external,
a.block-external
{
	background: url(../images/externallink.gif) no-repeat center right;
	padding-right: 13px;
}

a.external:visited,
a.block-external:visited
/* moet boven hover staan */
{background-image: url(../images/externallink.gif);}

a.external:hover,
a.block-external:hover
{background-image: url(../images/externallink-hover.gif);}

.anchor-internal
/*
	aparte css nodig voor [if lt IE 6]
	1e mogelijke plaats in html:
	<a class="anchor-internal" name="werkwijze"></a>
	<div class="item">
		<h2 class="first">werkwijze</h2>
		...
	</div>
	2e mogelijke plaats in html:
	<div class="item">
		...
		<a class="anchor-internal" name="verwijderen"></a>
		<h2>verwijderen</h2>
		...
	</div>
*/
{
	border: none; /* nodig: override voor border van a */
	clear: left;
	float: left;
}


/* LOGO, MENU EN FOOTER */

#logo
{
	clear: left;
	float: left;
	margin: 0;
	padding: 0;
	width: 230px;
}

#logo *
{
	background-color: #282828;
	background-image: url(../images/logo-16x16.gif);
	background-position: 15px 50%;
	background-repeat: no-repeat;
	border: none; /* nodig: override voor border van a */
	color: #f0f0f0;
	display: block;
	font: bold 11pt/34px verdana, helvetica, sans-serif;
	margin: 0;
	padding: 0 0 0 45px;
}

.menu-container
/*
	aparte css nodig voor [if lt IE 7]
	Een border wordt in FF3.6.10 bij het selecteren
	omringd door een stippellijn en dat is lelijk.
	De items hebben daarom een marge i.p.v. een border.
	Gevolg is dat voor een afstekende marge-kleur
	tussen de menu-achtergrond en een menu-item een
	extra nesting nodig is:
	menu-container > menu > menu-item
*/
{
	background-color: #bebebe;
	clear: left;
	float: left;
	margin: 2px 0 0 85px;
	padding: 0;
	width: 680px; /* 765-85 = 680px */
}

.menu-container *
{
	background-color: #ffffff;
	float: left;
}

.menu-container * *
/* aparte css nodig voor [if lt IE 7] */
{
	background-color: #bebebe;
	border: none; /* nodig: override voor border van a */
	color: #282828;
	display: block;
	float: left;
	margin: 0 2px 0 0;
	text-decoration: none;
	text-transform: uppercase;
}

.menu *
{
	font: normal 10pt/20px verdana, helvetica, sans-serif;
	padding: 0 12px;
}

.menu2 *
{
	font: normal 7.2pt/14px verdana, helvetica, sans-serif;
	padding: 0 10px;
}

.menu-container a:visited
/* moet boven hover staan */
{color: #282828;}

.menu-container a:hover,
.menu-container a.current
{background-color: #dcdcdc;}

.menu-container .disabled
{color: #a0a0a0;}

#footer-container
/*
	aparte css nodig voor [if lt IE 7]
	Een border wordt in FF3.6.10 bij het selecteren
	omringd door een stippellijn en dat is lelijk.
	De items hebben daarom een marge i.p.v. een border.
	Gevolg is dat voor een afstekende marge-kleur
	tussen de menu-achtergrond en een menu-item een
	extra nesting nodig is:
	menu-container > menu > menu-item
*/
{
	background-color: #282828;
	clear: left;
	float: left;
	margin: 0 0 0 85px; /* bottom margin werkt niet voor IE8.0 */
	padding: 0;
	width: 630px;
}

#footer-container *
{background-color: #ffffff;}

#footer-container * *
{
	background-color: #282828;
	border: none; /* nodig: override voor border van a */
	color: #f0f0f0;
	display: block;
	float: left;
	font: normal 7.2pt/14px verdana, helvetica, sans-serif;
	padding: 0 5px;
	text-decoration: none;
	text-transform: uppercase;
}

#footer {float: left;}

#footer *
/* aparte css nodig voor [if lt IE 7] */
{margin: 0 2px 0 0;}

#footer-right {float: right;}

#footer-right *
/* aparte css nodig voor [if lt IE 7] */
{margin: 0 0 0 2px;}

#footer-container a:hover
{background-color: #666666;}


/* ITEM */

.item
/* aparte css nodig voor [if lt IE 7] */
{
	background-color: #f0f0f0;
	clear: left;
	float: left; /* nodig om geneste floating images te omvatten met achtergrondkleur */
	margin: 10px 0 10px 85px; /* door float vouwen marges niet samen (collapse): tussenmarge = 10+10 = 20px */
	padding: 15px 30px;
	width: 570px; /* 630-30-30 = 570px */
}

.item-column-left
{
	float: left;
	width: 275px; /* 275+20+275 = 570px */
}

.item-column-right
{
	float: right;
	width: 275px; /* 275+20+275 = 570px */
}

.item-column-left-wide
{
	float: left;
	width: 370px; /* 370+20+180 = 570px */
}

.item-column-right-wide
{
	float: right;
	width: 370px; /* 370+20+180 = 570px */
}

.item-column-left-narrow
{
	float: left;
	width: 180px; /* 370+20+180 = 570px */
}

.item-column-right-narrow
{
	float: right;
	width: 180px; /* 370+20+180 = 570px */
}


/* PIC EN CAPTION */

.pic-paragraph
/*
	Zie: http://www.quirksmode.org/css/clearing.html
	div container voor img en caption
	voor rechts uitgelijnde caption of als achtergrond nodig is:
	<div class="pic-paragraph" style="width: 300px;">
	klein plaatje met strakke achtergrond uitlijnen:
	<div class="pic-paragraph" style="margin-left: 57px; margin-right: 57px;">
	klein plaatje met brede achtergrond uitlijnen:
	<div class="pic-paragraph" style="text-align: right;">
*/
{
	margin: 15px 0;
	overflow: hidden;
	width: auto;
}

.pic-container
/*
	aparte css nodig voor [if lt IE 7]
	alleen gebruiken als meer dan 1 afbeelding in een pic-paragraph zitten
*/
{
	float: left;
	margin: 0 15px 0 0;
}

.pic-container-final
/* alleen gebruiken als meer dan 1 afbeelding in een pic-paragraph zitten */
{
	float: left;
	margin: 0;
}

.pic-float-left
/*
	aparte css nodig voor [if lt IE 7]
	div container voor img en caption
	width van plaatje toevoegen niet nodig
*/
{
	float: left;
	margin: 15px 20px 15px 0;
}

.pic-float-right
/*
	aparte css nodig voor [if lt IE 7]
	div container voor img en caption
	width van plaatje toevoegen niet nodig
*/
{
	float: right;
	margin: 15px 0 15px 20px;
}

.pic-float-left-paragraph-top
/* aparte css nodig voor [if lt IE 7] */
{
	float: left;
	margin: 5px 20px 15px 0;
}

.pic-float-right-paragraph-top
/* aparte css nodig voor [if lt IE 7] */
{
	float: right;
	margin: 5px 0 15px 20px;
}

.caption-left,
.caption-right,
.caption-center
{font: normal 8pt/18px verdana, helvetica, sans-serif;}

.caption-left {text-align: left}

.caption-right {text-align: right}

.caption-center {text-align: center}


/* LIJSTEN */

ol {margin: 0 0 0 35px; padding: 0;}
ul {margin: 0 0 0 20px; padding: 0;}
li {margin: 0; padding: 0 0 0 5px;}
ol {list-style: decimal outside;}
ol ol {list-style: lower-alpha outside;}
ul {list-style: square outside;}
ul ul {list-style: circle outside;}