/*
   hg.css
   YPOS4 - huiselijkgeweld
   
   Created by Ronald Werring on 2010-05-31.
   Copyright 2010 YPOS internettoepassingen BV. All rights reserved.
*/

html { height:100%; }
body { height:100%; margin:0 0 1px 0;}
body { padding:0; font:12px Arial; color:#494949; }
div#wrapper { margin:0px auto; width:980px; position:relative; /*border:1px solid blue;*/ }

/* ================= */
/* = page indeling = */
/* ================= */
div#page { margin-top:20px; }
div#page img { margin-bottom:10px; }
div#page img.left  { float:left; margin:0 10px 10px 0;}
div#page img.right { float:right; margin:0 0 10px 10px;}

/* left */
div#left { float:left; width:180px; clear:both; /*border:1px solid blue;*/ }
div#left div#dossier { width:180px; height:126px; background:url(../gfx/bg_dossier.gif) no-repeat left top; margin-bottom:20px; }
div#left div#dossier img { margin:10px; float:left; padding-bottom:10px; }
div#left div#dossier p { font-size:11px; margin:8px 8px 0 0; line-height:2.2ex; }
div#left h4 { font-size:90%; margin:0; color:white; font-weight:normal; padding:5px 0 0 15px; background:url(../gfx/bg_h3.gif) no-repeat left top; width:180px; height:20px; }
div#left p.banner { margin-bottom:0; }

/* center */
div#center { float:left; width:540px; padding:0 40px 0 40px; /*border:1px solid red;*/ }
div#center div.nieuws { width:541px; border-bottom:1px dotted black; margin-bottom:15px; }

/* right */
div#right  { float:left; width:180px; overflow:hidden; /*border:1px solid orange;*/}
div#right div#nederland p { font-size:11px; }
div#right div#zoek_pc { width:180px; height:25px; background:url(../gfx/zoek_pc.gif) no-repeat left top; }

/* pages */
div#kolom1,
div#kolom2,
div#kolom3 { width:293px; padding:0 16px; }

/* invul icon */
p.invullen { margin-left:-4px;}
p.invullen a { background:#dce9f7 url(../gfx/icon_invullen.gif) no-repeat; padding:3px 13px 3px 20px;}

/* ==================== */
/* = Algemene stijlen = */
/* ==================== */
h1, h2, h3, h4 { color:#404040; font-weight:normal; }
h1 { font-size:160%; margin:0 0 1ex 0; color:#666; }
/*h2 { font-size:125%; margin:0 0 1ex 0; }*/
h2 { font-size:100%; margin:0 0 1ex 0; font-weight:bold; }
h3 { font-size:90%; margin:0 0 1ex 0; font-weight:bold; }
h4 { font-size:90%; margin:0 0 0.5ex;  font-weight:bold; }
/*h5 { font-size:12px; margin:0; color:white; font-weight:normal; padding:5px 0 0 15px; width:165px; height:20px;}*/
p  { line-height:2.6ex; margin:0 0 2ex 0; }
div.webetui_video { margin:0 0 2ex 0;}
table { margin:0 0 3ex 0;}

#page td { padding:4px 16px 4px 16px; vertical-align:top;}
#page th { text-align:left; padding:4px 16px 4px 16px; }
#page td, #page th { border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; }
#page table { border-left:1px solid #d6d6d6; border-top:1px solid #d6d6d6; }

a  { outline:0; text-decoration:none; color:#1758a0; }
#webetui_body div.editable a { color:#1758a0!important; text-decoration:none!important;}
#webetui_body div.editable a:hover { text-decoration:underline!important;}
a:hover { text-decoration:underline; }
a img { border:0; }
/*#page a { background-image:url(../gfx/external_link.gif); background-repeat:no-repeat; background-position:right center; padding-right:12px;}*/

ol { margin:0 0 3ex 2em; line-height:2.6ex; padding:0; }
ul { list-style-type:none; padding:0; margin:0 0 3ex 0; line-height:2.6ex; padding:0; }
hr { border:0; border-bottom:1px solid #d6d6d6; margin:2.5ex 0; }
div#page ul li { padding-left:14px; background:transparent url(../gfx/bullet.gif) no-repeat; background-position:1px 5px; margin:0 0 5px; }
div#page ul li.selected { background-image:url(../gfx/bullet_arrow.gif); background-position:0px 3px;}
div#page ul li.noresults { /*text-decoration: line-through;*/ color:#AAA;}
div#page a.selected { color:#666;}
div#page li label em { color:#AAA; font-size:11px;}

div.foto p { margin:0; }

div.search_results h2 { font-size:160%; margin:0 0 1ex 0; }
div.search_results h5 { font-size:112%; margin:0 0 0.5ex 0; font-weight:normal; }
p.date { /*font-weight:bold;*/ font-size:12px; color:#555; margin:0 0 1em;}
p.postcoderesult label { width:120px; float:left; margin:0; padding:0; display:block;}


/* ======================== */
/* = gegenereerde intro's = */
/* ======================== */
#page div.intro    { margin:0 0 2ex 0; border-bottom:1px solid #d6d6d6;}
#page h2.intro     { font-size:112%; margin:0 0 0.4ex 0; font-weight:normal; }
#page div.intro p  { margin:0 0 2ex 0; font-weight:normal; }
/*#page span.datum   { float:right; font-size:11.7px; padding-top:1px; color:#777;}*/

/*div#page ul.date li { padding-left:6em; position:relative; background:none; }*/
div#page ul.date li { background-image:none; padding:0; position:relative; background:none; }


div#page div.relaties ul.date li { padding-left:14px; background:transparent url(../gfx/bullet.gif) no-repeat; background-position:0px 5px;}
/*div#page li label.date { display:block; width:30px; float:left;}*/
#page div.relaties ul.date span.datum { width:auto; display:inline; float:none; position:static; font-size:100%; font-weight:normal; margin:0 4px 0 0;  }
div#page li input.date { border:1px solid #d6d6d6; display:inline; width:74px;}
#page span.datum   { display:block; font-weight:bold; font-size:12px; color:#555; margin:0 0 0.3ex;}

#page ul.date span.datum { /*position:absolute; left:0; top:0;*/ font-weight:normal; display:inline; margin:0; width:auto; }

#page span.soort   { display:block; float:right; color:#888; font-size:11.7px;}
#page span.weight  { display:block; text-align:right; font-size:9px; color:#999; padding-top:6px;}
#page h2 span.find_cnt { font-size:14px;}

/* =========================== */
/* = Top menu bovenin pagina = */
/* =========================== */
div#menu2 ul { float:right; margin:10px 0; }
div#menu2 ul li { display:block; float:left; margin-left:15px; padding-left:15px; background:url(../gfx/menu2_verticaal.gif) no-repeat left 2px; }
div#menu2 ul li.first { background:none; }
div#menu2 ul li a, a#disclaimer { color:#636363; display:block; }
div#menu2 ul li a:hover, a#disclaimer:hover { color:#1758a0; }
div#menu2 ul li#english { background:none; }
div#menu2 ul li a#english { font-size:1px; width:22px; height:13px; background-image:url(../gfx/icon_english.png); }
div#menu2 ul li a#english:hover { background-position:0 -43px; }
a#disclaimer { font-size:11px; }

/* ===================== */
/* = Header met logo's = */
/* ===================== */
div#header { /*border:1px solid red;*/ height:50px; clear:both; margin-bottom:10px; }
div#header img.logo  { margin-left:10px; }
div#header img.right { margin-left:10px; float:right; }

/* ============= */
/* = Hoofdmenu = */
/* ============= */
div#menu1 { width:980px; height:75px; background-image:url(../gfx/bg_menu1.gif); background-repeat:no-repeat; background-position:left top; margin:0; padding:0; position:relative; }

/* vanwege een IE6 bug gebruiken we hier div#wrapper div.sub i.p.v. div#menu1.sub */
/* zie http://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/ */
div#wrapper div.sub { background-position:left -75px; }
div#wrapper div.navsub2 { background-position:left -150px; }

/*div#menu1.subsub { background-image:none; background:orange; }*/

div#menu1 ul { width:980px; margin:0; padding:0; line-height:2ex; }
div#menu1 ul li { display:block; float:left; margin:0; padding:0; background:url(../gfx/menu1_verticaal.gif) no-repeat right top; } 
div#menu1 ul li a { color:white; display:block; float:left; height:20px; padding:6px 13px 0 13px; }
div#menu1 ul li a:hover,
div#menu1 ul li a.hover,
div#menu1 ul li a.selected { background:url(../gfx/bg_menu1_hover.gif) repeat-x left top; color:#ffd400; text-decoration:none; }
div#menu1 ul li a.no_hover { background:none; }
div#menu1 ul li#index a:hover,
div#menu1 ul li#index a.hover,
div#menu1 ul li#index a.selected { background:url(../gfx/bg_menu1_first_hover.gif) no-repeat left top; /*width:63px;*/  }
div#menu1 ul li#index a.no_hover { background:none; }

/* eerste submenu */
div#menu1 ul ul { display:none; position:absolute; top:25px; left:0; background:none; }
div#menu1 ul li.selected ul { display:block; }
div#menu1>ul>li.hover>ul    { display:block; }
div#menu1 ul ul li { background:url(../gfx/menu_sep.png) no-repeat left 5px; }
div#menu1 ul ul li a { }
div#menu1 ul ul li a.hover { color:#ffd400; background:none; }
div#menu1 ul ul li a.no_hover { color:white; }
div#menu1 ul ul li a:hover,
div#menu1 ul ul li a.selected { background:none!important; }

/* tweede submenu */
div#menu1 ul ul ul { display:none; position:absolute; top:25px; left:0; height:25px; background:none; }
div#menu1 ul li.selected ul ul { display:none; }
div#menu1 ul ul li.selected ul { display:block; }
div#menu1 ul ul ul li { background:none; }

/* ========== */
/* = kaders = */
/* ========== */

div.kader { margin:0 0 20px; padding-bottom:9px; background:white url(../gfx/kader_bottom.gif) no-repeat; background-position:bottom; }
#page div.kader h2 { color:white; font-size:11px; height:20px; margin:0; padding:5px 3px 0 10px; overflow:hidden; white-space:nowrap; background:url(../gfx/kader_h2_grijs.gif) repeat-x;}
div.kader img { float:left; margin:0 9px 0 0;}
div.kader p   { font-size:11.7px; margin:0; line-height:14px; padding:9px 9px 1px 9px; min-height:59px; border:1px solid #d6d6d6; border-bottom:0; }


/* ===================== */
/* = Zoeken en tagmenu = */
/* ===================== */
div#menu1 form#zoeken { position:absolute; top:3px; right:3px; background:url(../gfx/bg_zoek.gif) no-repeat left top; width:278px; height:22px; padding:0 0 0 18px; margin:0; }
form#zoeken input.text { display:block; float:left; width:257px; padding:0; font-size:12px; height:19px; background:white; border:0; margin:0px 0 0 0px; }
form#zoeken input.submit { display:block; float:left; background-image:url(../gfx/zoek.gif); background-repeat:no-repeat; width:17px; height:17px; border:0; cursor:pointer;}
form#zoeken input.submit:hover { background-position:0 bottom;}
form#zoeken div#tagmenu { display:none; overflow:hidden; position:absolute; z-index:100; width:292px; left:-1px; top:22px; }
form#zoeken div#tagmenu div.container { visibility:hidden; }
form#zoeken div#tagmenu ul { width:292px;}
form#zoeken div#tagmenu li { float:none; background:none;}
form#zoeken div#tagmenu li a { display:block; float:none; width:272px; height:20px; padding:5px 10px 0 10px; color:white; background-image:url(../gfx/bg_zoekmenu.png); background-repeat:repeat-x; }
form#zoeken div#tagmenu li a.selected,
form#zoeken div#tagmenu li a:hover { color:#ffd400; background-position:0 -25px;}
form#zoeken div#tagmenu li.lastchild a { text-align:right; font-style:italic; background-image:url(../gfx/bg_zoekmenu_last.png); background-repeat:no-repeat; }

div.find div.intro strong,
div.search_results div.intro strong { font-weight:normal;}

/* ====================== */
/* = Zoeken op postcode = */
/* ====================== */
form#postcode { width:178px; height:19px; background-image:url(../gfx/bg_postcode.gif); background-repeat:no-repeat; margin:0 0 3ex; padding:1px; }
form#postcode label { font-size:11px; display:block; padding:4px 1px 1px 6px; height:14px; width:116px; float:left }
form#postcode label.error { color:#e00; }
form#postcode input.text { padding:1px 0 0 3px; height:18px; margin:0; width:28px; float:left; display:block; border:0; border-left:1px solid #ddd; }
form#postcode input.submit { display:block; border:0; width:17px; padding:0; margin:0;height:17px; cursor:pointer; background:white url(../gfx/zoek.gif) no-repeat; background-position:0 0; float:left; }
form#postcode input.submit:hover { background-position:0 -17px; }

/* =============== */
/* = Formulieren = */
/* =============== */
form.formulier input.text, form.formulier textarea { width:300px; border:1px solid #666; display:block; margin:0 0 3ex; font:12px Arial;}
label { display:block; margin:0 0 2px;}
div.radiogroup { margin:3px 0 3ex;} 
div.radio_item { margin:0 0 3px;}
div.error { height:20px; color:#E00; margin-bottom:10px;}
form.formulier input.submit { display:block; background:black url(../gfx/button.gif) repeat-x; color:white; border:0; height:25px; padding:0 12px; cursor:pointer; margin:0 0 20px;}
form.formulier input.submit:hover { background-position:bottom; }
form.formulier input.captcha { float:left; width:100px; margin-right:8px;}
form.formulier img.captcha { padding-bottom:8px;}

/* =============== */
/* = trefwoorden = */
/* =============== */
div#alfabet   { border-bottom:1px solid #d6d6d6; border-top:1px solid #d6d6d6;  height:21px; margin:4px 0 12px; padding:0px 0;}
div#alfabet a { display:block; float:left; text-align:center; padding:4px 0 0 0; height:17px; width:21px; }
div#alfabet a.selected { color:white; background:#1758a0;}
div#trefwoorden ul { display:none; }
div#trefwoorden ul.selected { display:block; }

/* ========== */
/* = kaders = */
/* ========== */
div.grijs { background:#ddd; border:1px solid black; padding:10px 14px; margin:0 0 20px; font-weight:bold;}

li.praktijkvoorbeeld p, li.praktijkvoorbeeld ul { display:none; }
img.icon { float:right; display:block; margin-left:4px;}

div#page div.uitklap ol>li { cursor:pointer; }
div#page div.uitklap>ol>li:hover { color:#1758a0; }
div#page div.uitklap li { margin:0 0 10px; }
div#page div.uitklap li ul li { margin:0;}
div#page div.uitklap li ul { display:none; margin:2px 0;}

/* ============================== */
/* = video databank presentatie = */
/* ============================== */
div.startvideo { display:none; }

/* =============== */
/* = woordenspin = */
/* =============== */
div.woordenspin { position:relative; margin:16px 0; }
div.woordenspin h2 { color:white; font-size:12px; height:20px; margin:0; padding:5px 3px 0 10px; font-weight:normal; background-image:url(../gfx/kader_h2_black.gif);}
div#woordenspin1 h2 { font-size:11px; }
div.woordenspin  div.canvas { border:1px solid #aeaeae; border-right:1px solid #d6d6d6; border-top:0; background:#fff; position:relative; }
div#woordenspin1 div.canvas { width:178px; height:286px; overflow:hidden; }
div#woordenspin2 div.canvas { width:558px; height:389px; }

div#woordenspin1 a#spinzoom { display:block; width:15px; height:14px; background-image:url(../gfx/spinzoom.gif); position:absolute; right:4px; top:4px; }
div#woordenspin1 a#spinzoom:hover { background-position:bottom;}

div.woordenspin div#term { position:absolute;  background:white url(../gfx/spinsearch.gif) no-repeat; background-position:right top; border-left:1px solid black; padding:1px 7px 1px 6px; height:19px; text-align:center; white-space:nowrap; }
div.woordenspin div#term a { display:block; height:16px; padding:2px 17px 1px 0; background:white url(../gfx/zoek.gif) no-repeat; background-position:right 1px; }
div.woordenspin div#term a:hover { background-position:right -16px; }
div#woordenspin1 div#term { left:23px; top:123px;}
div#woordenspin2 div#term { left:193px; top:170px; }

div.woordenspin div.termen a { text-decoration:underline; }
div.woordenspin div.termen a, div.woordenspin div.termen span { position:absolute; max-width:130px; }
div#woordenspin1 div.termen a, div#woordenspin1 div.termen span { font-size:11.3px;}
div.woordenspin  div#witvlak { display:none; top:0; left:0; position:absolute; background:white; }
div#woordenspin1 div#witvlak { width:178px; height:286px; }
div#woordenspin2 div#witvlak { width:558px; height:389px; }

div#woordenspin2 div.kolom { border:1px solid #aeaeae; border-top:0; border-left:0; width:184px; height:369px; padding:20px 0 0 15px; position:absolute; right:0; }
div#woordenspin2 div.kolom h4 { font-weight:normal; font-size:100%; margin:0 0 6px; }
div#woordenspin2 div.kolom p { margin-bottom:20px; }
div#woordenspin2 div.kolom a { display:block; }
div#woordenspin2 div.kolom div#legenda { position:absolute; bottom:9px; }
div#woordenspin2 div.kolom div.legenda { color:#999; height:15px; margin:0 0 6px; padding:1px 0 0 5px; }
div#woordenspin2 div.kolom div.spc { border-left:15px solid #87258f; }
div#woordenspin2 div.kolom div.rel { border-left:15px solid #028802; }