/*********************************************************
*           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: #2A65B1;}
a:hover {text-decoration:underline; color:#F18C22;}

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} 

/*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, table, textarea  { font-size: 12px; color: #2A65B1; font-weight: normal; margin-top:0; line-height:160%;}

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

hr {
	height:0;
	border-top:2px dotted #2A65B1;
	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;}
h1.form {font-size:24px; font-weight:bold; color: #2A65B1;}
body.form input {color:#2A65B1;}

/*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:0;
}

body.forum	{background:none;}

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: none; color: #00F;}

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	{} 
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.tabel2kolommen {font-size: 14px; padding:4px;}
table.tabel2kolommen td {vertical-align: top;}
td.tabel2kolommenlinks {width: 150px; padding-right: 30px;}
td.tabel2kolommenrechts {}
table.formwizard	{border-collapse:collapse;border-top:hidden;}
table.formwizard td	{padding-top:10px;padding-bottom:10px;border-bottom:1px solid #000;}
table.waitingroom {border-collapse:collapse;}
table.waitingroom th {border:1px solid #000; vertical-align:top;}
table.waitingroom td {border:1px solid #000; vertical-align:top;}

/*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:             *
*                                                        *
*********************************************************/

/*  oude module  */
div.nieuws {margin-bottom: 0; background-color: #FD0101; width:500px;}			/*vroeger rh0*/
p.nieuws {margin-top: 0;}			/*vroeger rh0*/
.nieuwsdatum { font-size: 10px; font-weight:normal; color:#F9B5B5;text-align:right; width:500px; left: 3px;}			/*vroeger rh0*/
.nieuwstitel { font-size: 16px; font-weight:bold; color:#FFF;text-align:left; left: 3px;}


/*  nieuwe module  */

/* overzichtpagina */
table.newspagina {width:100%;}
td.nieuwssoort {height:30px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 15px; font-weight:bold; color:#F00;text-align:left; padding-top:8px }
.nieuwskop { font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 13px; font-weight:bold; color:#000;text-align:left; padding-right:10px;}
.nieuwskop a {font-weight:bold; font-size: 13px; color:#000;text-decoration: none; }
.nieuwskop a:hover {color:#17EE07}
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 {height:35px; vertical-align:top; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:normal; color:#807B7B; text-align:left; padding-right:10px }
td.archief {height:30px; vertical-align:bottom;}
td.titeldatum { width:75px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#4980B9; text-align:left;}

/* alternatieve tekst voor als css rollovers niet werken */
span.onzichtbaar {display:none;}

/* in niet visuele browsers tekst laten zien */
@media aural, braille, embossed, tty 
{
span.onzichtbaar {display:inline;}
}

/* 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; }

table.newsmessage {width:500px}
td.newsheader {height:20px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 20px; font-weight:bold; color:#000;text-align:left;}
td.newsdate {width:150px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#000;text-align:left; }
td.newschanged { width:150px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#000;text-align:left; }
td.newsbody {width:300px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 14px; font-weight:normal; color:#000;text-align:left; vertical-align:top; padding-right:15px; padding-top:15px }
td.newsimage {width:200px; padding-top:15px}
td.newscaption {width:200px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#000;text-align:left;  }
td.newsback {padding-top:20px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#F00;text-align:left; }
td.archiveback {padding-top:20px; font-family: ITC Franklin Gothic, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color:#F00;text-align:left; }
td.newsreadmore {font-size: 14px; font-weight:bold; padding-top:20px}
td.newslink a {font-size: 14px; font-weight:normal; text-decoration:underline}
td.newslink a:hover {color:#F00;}

td.archiefkop {font-size:18px; font-weight:bold;}
.archieftekst {font-size:14px;}

/* 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:                   *
*********************************************************/
#leftnavbar ul {
	background:url(bg_navbottom.gif) no-repeat bottom left;
	margin:0 0 15px 20px;
	padding:0 0 11px 0;
}
#leftnavbar a, #leftnavbar a:hover {
	text-decoration:none;
}

#leftnavbar li {
	list-style:none;
	width:182px;
	height:auto;
	margin:0;
	padding:0;
	line-height:160%;
	border-right:solid 1px #B3C3D1;
	border-left:solid 1px #B3C3D1;
}

#leftnavbar li.lh {
	width:184px;
	background:url(bg_navtop.gif) no-repeat;
	min-height:19px;
	border-left:none;
	border-right:none;
	border-bottom:solid 1px #C7D2DD;
	
}

#leftnavbar li a.rub {
	display:block;
	background:#EEE;
	margin:0;
	padding:0 4px 0 24px;
	border-top:solid 2px #FFF;
	border-bottom:solid 2px #FFF;
	height:auto;
	color:#000;
}

#leftnavbar li a.rub:hover, #leftnavbar li a.selected {
	color:#FFF;
	background:#8A96B6;

}

#leftnavbar li.lh a.rub {
	color:#404040;
	font-weight:bold;
	padding:0 0 0 26px;
	margin:0;
	background:url(pijltje.gif) no-repeat 12px 7px;
	border:none;
}

#leftnavbar li.lh a.rub:hover {
	color:#F18C22;
	background:url(pijltje.gif) no-repeat 12px -73px;
}

#leftnavbar ul.admin li a, #leftnavbar ul.admin li.lh a {
	display:inline;
}


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

.bloklink {
	display:block;
}


#header {
	background:#FFF;
	height:129px; /* Header en footer hoogte moet worden verwerkt in pbgemeente.js */
	position:relative;
}

#pb_logo {
	height:83px; width:200px;
	float:right;	
	margin:10px 10px 0 0;
}

#pb_logoA {
	height:83px; width:200px;
	background:url(pb_logo.png) no-repeat;
}

#gemeenteLogo {
	position:absolute;
	margin:0 auto;
}

#titel_balk {
	height:26px;
	background: url(fade_wigr.gif) repeat-x;
	border-top:solid 1px #DBE1E8;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
#titel_balk h1 {
	display:inline; /* fix voor de double margin bug in IE6 */
	float:left;
	margin:3px 0 0 20px;
	font-size:16px;
}
#titel_balk h1 a {
	color:#404040;
	font-weight:bold;
	text-transform:capitalize;
	text-decoration:none;
}
#titel_balk h1 a:hover {	
	text-decoration:underline;
	color:#F18C22;
}
#titel_balk a.topControl {
	float:right;
	margin:3px 10px 0 10px;
	text-decoration:none;
}

a#loginKnop {
	color:#DBE1E8;
}
a#loginKnop:hover {	
	color:#F18C22;
}

#content_container {
	padding-top:20px;
}

#leftnavbar {
	width:230px;
	float:left;

}

#contentDiv {
	padding:0 20px 0 20px; /* Linker en evt. verticale padding moet worden verwerkt in pbgemeente.js, rechter padding moet met negatieve margin worden gecompenseerd in #inserted_frame */
	position:relative;
	margin-left:230px;
}

#inserted_frame {
	margin:0 -20px 0 0;
}

#footer {
	clear:both;
	height:23px; width:100%;
	background: url(fade_grwi.gif) repeat-x;
	border-top:solid 1px #DBE1E8;
	border-bottom:solid 1px #DBE1E8;

}

#footer p {
	color:#8A96B6;
	text-align:right;
	margin:0 20px;
}
#footer p a {
	color:#8A96B6;
	text-decoration:none;
}
#footer p a:hover {
	color:#F18C22;
}

#oogdiv {
	position:absolute;
	left:4px;
	top:4px;
}

/*********************************************************
*       Extra definities voor specifieke gemeentes:      *
*********************************************************/
body.appingedam h2, body.appingedam h3 {color:#ADCE00;}
body.appingedam p, body.appingedam li, body.appingedam table, body.appingedam textarea {color:#036;}
/*********************************************************
*           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;}
}