/*********************************************************
*           Css stijl van template templatevoorbeeld     *
*           met als basis template_voorbeeld_basis       *
*           deze file staat in INC_PATH/template,        *
*           maar een symlink vanuit                      *
*           HTML_PATH/template/voorbeeld/voorbeeld.css   *
*           hoort hierheen te wijzen                     *
*********************************************************/

/* let op: css pakt geen //-stijl commentaar */

/***********************************************************
*           Algemene definities, gebruikt door zp:         *
*  h2 is de stijl van de kop van een paragraaf             *
*  .tekststijl is de stijl van een gewone paragraaf        *
*  .linkstijl is de stijl van een link daarin              *
*  .redactiestijl wordt gebruikt voor [..]-achtige dingen  *
***********************************************************/

/*een standaard link: zet hier liever geen font/font-size, 
zeker niet in de hover, maar in de a.klasse definities*/        
a {text-decoration: underline; color:#002F60;}
a:hover {text-decoration:underline; color:#FABB00;}

a:active, a:focus {outline:none;}

/*de volgende regel zorgt dat er geen paarse rand om plaatjes die een link zijn
  heenkomt*/        
a img {border: 0; text-decoration:none;} 

/*namen van files in bestandsbeheer:*/
.file {font-size: 14px; font-weight: normal;}
.file:hover {color: #F00; text-decoration:underline;}

/*standaard tekst (tekststijl gebruikt ook deze vanaf nu)*/        
p, li, dl, table, textarea  { font-size: 13px; color: #000; font-weight: normal; margin-top:0; line-height:160%;}

p.intro {
	color:#002F60;
	font-weight:bold;
	font-size:16px;
	line-height:22px;
}

p.img_right img, body.editor p.img_right img  {
	float:right;
	margin:0 0 10px 10px;
}


/*deze moeten na de links komen, anders gaat het fout..*/        
h2 { font-size: 22px; color: #002F60;  font-weight: bold; margin-top:0;}
h3 { font-size: 16px; color: #002F60;  font-weight: bold; margin-bottom:3px; line-height:22px;}

hr {
	height:0;
	border-top:2px dotted #FABB00;
	border-left:none;
	border-right:none;
	border-bottom:none;
}


h2.login {font-size:16px; color:#404040;}
/*het is beter om voor de linkstijl geen grootte te specificeren, want de tekst eromheen
kan groter gemaakt zijn*/

/*voor een formulier*/        
p.form {font-size:12px; font-weight:bold;color: #002F60;}
h1.form {font-size:24px; font-weight:bold; color: #002F60;}
body.form input {color:#002F60;}

/*voor in de wizard*/        
.wizard  { font-size: 14px}
h2.wizard {font-size: 24px; font-weight: bold; }
h3.wizard {font-size: 20px; font-weight: bold; }
h4.wizard {font-size: 14px; font-weight: bold; margin-bottom: 4px; }
.wizardkop  {font-size: 14px; font-weight: bold;}
a.wizard  { color: #F00;}

/*onder andere in loginscherm*/        
.helegrotekop 	{ font-size: xx-large; color: #000; font-weight: bold; }

/*voor als er erg weinig plaats is :-)*/        
.tiny		{font-size: x-small}
.xtrtiny		{font-size: 1px;}



/*********************************************************
*           Definities voor de body tag:                 *
*********************************************************/
body 	{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	background: #FFF url(bg_body.png) repeat-x;
	margin:5px;
}

body.login	{}

	
body.wizard	{}

body.form	{margin:15px;
		background:#FFF url(fade_grwi.gif) repeat-x fixed;}

/*body.search kan het beste leeg zijn, dus zonder achtergrondplaatje*/
body.search	{margin-left:0;margin-top:0; background-image: none;}

body.editor	{background:#FFF; background-image: none;
		margin-left:0;
		margin-top:0;}

/*maak de volgende precies hetzelfde als .linkstijl*/
body.editor a {text-decoration: underline; color: #002F60;}
body.editor a:hover {text-decoration:underline; color:#FABB00;}

textarea	{ font-family:Arial, Helvetica, sans-serif;}/*moet blijkbaar apart*/

/*********************************************************
*           Definities voor de redactieknoppen:          *
*           deze hebben de class wizbutton, wizempty     *
*           of wizfull                                   *
*           wizempty is een opvul td, wizful heeft als   *
*           colspan het aantal knoppen                   *
*********************************************************/

div.wizbutton {
	margin:0 auto 0 auto;
}
table.wizbutton {}
tr.wizbutton {}
/*let op:  in css is padding in de td hetzelfde als cell-padding in de table in html*/
td.wizbutton {font-size: 13px; text-align:center; width:152px; height:17px;}
td.wizempty {background-image: none; font-size: 1px; width:152px; height:17px; text-align:left;}
p.wizbutton {}
a.wizbutton {display:block; background: url(redknop.gif) no-repeat 0 3px; color:#424141; text-decoration:none; padding-left:15px; padding-top:2px; padding-bottom:2px; text-align:left; width:100%;}
a.wizbutton:hover {background: url(redknophover.gif) no-repeat 0 3px; color: #FFF; text-decoration:none;}

/*********************************************************
*           Definities voor de table tag:                *
*           de #kader-binnen en -buiten stijlen          *
*           bepalen hoe een kader eruitziet              *
*           buiten bepaalt de omlijning, binnen erin     *
*********************************************************/
	

table.kader	{background-color: #000}		/*kader-rand kleur*/
table.kader td    {background-color: #FFF}		/*kader-inhoud kleur*/
table.navigation td {}
table.buttons  {width:200px; border:0; padding:0;}
table.formwizard	{border-collapse:collapse;border-top:hidden;}
table.formwizard td	{padding-top:10px;padding-bottom:10px;border-bottom:1px solid #000;}

/*Tabellen voor richedit-control:*/
table.tabel1 {  font-weight: normal;}
table.tabel1 td {vertical-align:top; padding: 0;}

table.tabel2 {border-collapse:collapse; border: 2px solid #000;  font-weight: normal;}
table.tabel2 td {vertical-align:top; padding: 4px;border: 1px solid #000;}

table.tabel3 {border-collapse:separate;  font-weight: normal;}
table.tabel3 td {vertical-align:top; padding: 4px;border: 2px solid #000;}

table.tabel4 {border-collapse:collapse; border: 6px #000; border-style: double;  font-weight: normal;}
table.tabel4 td {vertical-align:top; padding: 4px;border: 1px #000; border-style: solid; }

table.tabel5 {border-collapse:separate; border: 2px solid #000;  font-weight: normal;}
table.tabel5 td {vertical-align:top; padding: 4px;border: 2px solid #000;}

table.tabel6 {border-collapse:collapse;  font-weight: normal;}
table.tabel6 td {vertical-align:top; padding: 10px; border-left: 2px solid #000; border-right: 2px solid #000; border-top: none; border-bottom: none;}

table.tabel7 {border-collapse:collapse;  font-weight: normal;}
table.tabel7 td {vertical-align:top; padding: 10px; border-left: none; border-right: none; border-top: 2px solid #000; border-bottom: 2px solid #000;}

table.tabel8 {border-collapse:collapse;border: 2px solid #000;  font-weight: normal;}
table.tabel8 td {padding: 10px;}




/*********************************************************
*           Definities voor de verplaatstabellen         *
*********************************************************/


table.verplaatsen1 { width: 100%; color: #000;}
td.verplaatsen1 {  vertical-align: top; padding: 5px;}
table.verplaatsen2 {width: 100%; color: #000;}
td.verplaatsen2 {background-color: #A63293; color:#FFF;}
td.verplaatsen3 {}

/*********************************************************
*           Definities voor de sitemap                   *
*********************************************************/

table.sitemap1 { width: 100%;}
td.sitemap1 {vertical-align: top;}
table.sitemap2 {width: 100%;}
td.sitemap2 {background: url(fade_grwi_kl.gif) repeat-x; padding:0 5px; border-bottom:solid 1px #DBE1E8;}
td.sitemap3 {}
a.sitemap2 {color:#404040; padding:3px; font-weight:bold;}
a.sitemap3 {}
a.sitemap2:hover {background-color: #8A96B6; color: #FFF; text-decoration:none;}
a.sitemap3:hover {}
/*********************************************************
*           Definities voor de nieuwsmodules:             *
*                                                        *
*********************************************************/
/* overzichtpagina */
table.newspagina, table.newsmessage {margin:0 40px 0 60px;}
td.nieuwssoort, td.archiefkop, td.newsheader {
	padding-top:22px;
	color:#002F60;
	font-weight:bold;
	font-size:16px;
	line-height:22px;
}
.nieuwskop { font-size: 13px; font-weight:bold; color:#002F60;text-align:left; padding:10px 10px 0 0;}
.nieuwskop a {font-weight:bold; font-size: 13px; color:#002F60;text-decoration: underline; }
.nieuwskop a:hover {color:#FABB00; text-decoration:underline;}
td.leesverder { width:75px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#000;text-align:left; }
.leesverder a { font-weight:bold; color:#000;text-decoration: none; }
.leesverder a:hover { color:#F00; }
td.teaser {text-align:left; padding:0 10px 5px 0;border-bottom:2px dotted #FABB00;}
td.archief {height:30px; vertical-align:bottom;}
td.titeldatum { width:75px; font-size: 10px; font-weight:bold; color:#002F60; text-align:left; padding:10px 0 0 0;}

/* nieuwsbericht */

td.nieuwsredactie {height:30px}
td.nieuwswijzigen {width:19px; text-align:right;}
td.nieuwsverwijderen {width:17px}
a.berichterbij {display:block; background: url(/template/berichterbij.gif);width:160px; height:16px;}
a.berichterbij:hover {background-position: 0 -16px;}
a.beheer {display:block; background: url(/template/beheer.gif);width:70px; height:16px;}
a.beheer:hover {background-position: 0 -16px;}
a.archief {display:block; background: url(/template/archief.gif);width:81px; height:16px;}
a.archief:hover {background-position: 0 -16px;}
a.nieuwswijzigen { display:block; background: url(/template/wijzigen.gif);width:17px; height:17px; }
a.nieuwswijzigen:hover { background-position: 0 -17px;}
a.nieuwsverwijderen { display:block; background: url(/template/verwijderen.gif); width:17px; height:17px;}
a.nieuwsverwijderen:hover { background-position: 0 -17px; }
a.newsback {display:block; background: url(/template/bericht-terug.gif); width:228px; height:16px;}
a.newsback:hover { background-position: 0 -16px; }
a.archiveback {display:block; background: url(/template/archief-terug.gif); width:189px; height:16px;}
a.archiveback:hover { background-position: 0 -16px; }

td.newsdate {font-size: 10px; font-weight:bold; color:#002F60;text-align:left; }
td.newschanged {font-size: 10px; font-weight:bold; color:#FFF;text-align:left; }
td.newsbody { vertical-align:top;}
td.newsimage {width:200px; padding-top:15px}
td.newscaption {width:200px; font-size: 10px; font-weight:bold; color:#002F60;text-align:left;  }
td.newsback {padding-top:20px; font-size: 10px; font-weight:bold; color:#002F60;text-align:left; }
td.archiveback {padding-top:20px; font-size: 10px; font-weight:bold; color:#002F60;text-align:left; }
td.newsreadmore {font-size: 14px; font-weight:bold; padding-top:20px;color:#002F60;}
td.newslink a {}
td.newslink a:hover {}

.archieftekst {display:none;}

/* nieuwsbeheer wizard */

table.nieuwswizard span.multitextheader 		{font-style: italic; font-weight:bold;}	
table.nieuwswizard span.multitexttitle		{padding-left: 30px; font-weight: bold; text-align: center;}	
table.nieuwswizard span.multitexttitle a.wizardformlink {font-size:18px; text-decoration: underline}
table.nieuwswizard span.multitext 			{padding-left: 20px;}	
table.nieuwswizard table.multitext			{border: none; width:100%;}
table.nieuwswizard table.multitext th		{border: none; font-weight: normal; font-style: italic; font-size:14px; padding:0; vertical-align:top; text-align:right;}
table.nieuwswizard table.multitext th.title	{border: none; font-weight: bold; font-style: normal; font-size:16px; text-align:center;}
table.nieuwswizard td.sl-main table.multitext th.title a.wizardformlink {font-size:14px}
table.nieuwswizard table.multitext th.title	a:hover {text-decoration: underline;}
table.nieuwswizard table.multitext td		{border: none; padding:0; vertical-align:bottom; font-size:14px;}


/*********************************************************
*           Definities voor navbalken:                   *
*********************************************************/
#head_nav ul {
	margin:0;
	padding:0;
}
#head_nav ul.navbar {
	margin:0 0 0 36px;
	padding:0;
}
#head_nav ul.hoofdrubriek {
	margin:0 0 0 0;
	float:left;
}
#head_nav li {
	list-style:none;
	margin:0;
	padding:0;
}
#head_nav li.sel {
	background:url(tabs.gif) no-repeat;
	padding-left:21px;
}
#head_nav li.subrubriek {
	padding:3px 0 0 24px;
	background:url(tabs.gif) no-repeat -21px 0;
	visibility:hidden;
}

#head_nav ul.sel li.subrubriek, #head_nav ul.hoofdrubriek:hover li.subrubriek {
	visibility:visible;
}

a.hoofdrubriek {
	display:block;
	font-weight:bold;
	font-size:13px;
	text-decoration:none;
	padding:3px 12px 6px 24px;
}

a.hoofdrubriek:hover, ul.hoofdrubriek:hover a.hoofdrubriek {
	text-decoration:none;
	background:url(tabs.gif) no-repeat -21px 0;
	color:#002F60;
}


#head_nav li.sel a.hoofdrubriek, li.sel a.hoofdrubriek:hover, #head_nav ul.sel:hover a.hoofdrubriek {
	background:url(tabs.gif) no-repeat right -60px;
	padding:3px 12px 6px 3px;
	color:#FFF;
}



#sub_nav {
	padding:3px 0;
	border-bottom:1px solid #002B58;
}

/*********************************************************
*           Definities voor in template zelf:            *
*********************************************************/
span.img_link, span.onzichtbaar {
	display:none;
}

.bloklink {
	display:block;
}


#header, #head_nav, #contentContainer {
	width:990px;
	margin:0 auto;
	position:relative;
	clear:both;
}

div#head_nav {
	margin:0 auto 0 auto;
	top:-2px;
}

#header {
	height:200px;
	background:url(header990.png) no-repeat;
}

#header h1 {
	display:none;
}

#loginKnop {
	position:absolute;
	right:5px;
	line-height:10px;
}

#loginKnop a {
	font-size:10px;
	text-decoration:none;
}

#loginKnop a.inloggen {
	color:#CCC;
}
#loginKnop a.inloggen:hover {
	color:#FABB00;
}

#content {
	position:absolute;
	width:500px;
	padding:25px 50px 20px 0;
	left:60px;
	top:5px;
	background:url(line.gif) no-repeat right -5px;
}

#content.content_breed {
	width:990px;
	padding:0;
	left:0;
	background:none;
}

#sidebar {
	position:absolute;
	width:336px;
	right:0;
	top:5px;
}

#sidebar h2 {
	background:url(tabs.gif) no-repeat 0 -120px;
	font-size:17px;
	margin-top:25px;
	padding:1px 10px 2px 12px;
}

#sidebar p {
	padding:0 10px 0 12px;
	margin:0 0 0 0;
	line-height:16px;
}
#sidebar p.intro {
	font-size:13px;
	line-height:16px;
}
#sidebar h3 {
	padding:0 5px 0 12px;
	font-size:14px;
}

#sidebar h3 strong {
	text-transform:uppercase;
	font-size:24px;
	line-height:30px;
	margin-bottom:0px;
}

a.meer {
	padding:3px 10px 0 12px;
	display:block;
	margin:0 0 16px 0;
	font-size:13px;
	font-weight:bold;
	color:#FABB00;
	text-decoration:none;

}

a.meer:hover {
	color:#FABB00;
	text-decoration:underline;
}

#sidebar p.screenshot {
	margin:14px 0;
}
/*
#content ul {
	padding-left:0;
	margin-left:0;
}
#content ul ul {
	padding-left:20px;
}
*/
/*********************************************************
*           Definities voor de functie matrix:           *
*********************************************************/
div.functieMatrixContainer {
	width:674px;
	margin:25px auto 30px auto;
	padding-left:16px;
	background:url(sidebar_matrix.gif) no-repeat left 58px;
	position:relative;
}
div#hoekje {
	background:url(sidebar_matrix.gif) no-repeat left bottom;
	position:absolute;
	width:16px;
	height:20px;
	left:0;
	bottom:0;

}
.functieMatrix {
	border-collapse:collapse;
	background:url(tab_samen.gif) no-repeat top right;
}
.functieMatrix th, .functieMatrix td {
	border:1px solid #ABACAC;
	font-size:11px;
	vertical-align:top;
}
.functieMatrix th {
	text-align:left;
}
.functieMatrix td {
	text-align:center;

}

.functieMatrix thead th {
	line-height:16px;
	width:59px;
	padding-left:4px;
	border:none;
	color:#FABB00;
	letter-spacing:0px;
}
.functieMatrix thead th.basis {
	padding-left:2px;
	width:81px;
	color:#002F60;
}
.functieMatrix thead th.legenda {
	width:auto;
	border-top:none;
	border-bottom:none;
	border-left:none;
	font-weight:bold;
	color:#000;
	padding:0 20px;
	vertical-align:bottom;
}
.functieMatrix thead td.legenda {
	border-top:none;
	border-left:none;
	
}

.functieMatrix thead th.legenda span {
	float:left;
}
.functieMatrix div.legenda {
	float:right;
	height:15px;
	width:50px;
	border:1px solid #ABACAC;
}

.functieMatrix tbody th {
	width:237px;
	padding-left:3px;
	border-left:0;
}

.functieMatrix td.ja, .functieMatrix div.legenda {
	background-color:#DCDDDE;
}

.functieMatrix td.ja span {
	visibility:hidden;
}


/*********************************************************
*           Definities voor uitprinten:                  *
*********************************************************/
@media print {
	body, p, h2, h3, a, table, a {color: #000;}
	a.linkstijl {color: #000; text-decoration:underline;}
	li {list-style-image:none; color:#000;}
	hr {color:#000; background:#000;}
	div#oogdiv {display:none;}
	.noprint {display:none;}
	input.wbutton {display:none;}


}

@media aural, braille, embossed, tty 
{
	span.img_link, span.onzichtbaar {display:inline;}
}