/*
   toolbox.css
   YPOS8 - veiligheidshuize
   
   Created by Ronald on 2013-08-10.
   Copyright 2013 __MyCompanyName__. All rights reserved.
*/

html { height:100% }
body { margin:0; padding:0; font:small Arial; height:100%; background-image:url(../foto/toolbox/toolbox_algemeen.jpg); background-position:center; background-repeat:repeat-y; background-size:cover }
div.header { background:rgba(255,255,255,0.9); margin:20px 0 20px 0; padding:30px 0 16px }
div.header h1 { margin:0; padding:0; font-size:44px; font-weight:normal; padding:0 0 0 43px; background-image:url(../gfx/toolbox/dots-h1.png); background-repeat:no-repeat; background-position:0 8px }
div.header a { color:black; font-weight:bold; text-decoration:none }
div.header a:hover h1 { background-position:0 -64px }

div.header ul.menu { list-style-type:none; margin:16px 0 0 44px; padding:0; }
div.header ul.menu li { display:inline; margin:0 20px 0 0;}
div.header ul.menu li a.selected, div.header ul.menu li a:hover { color:#f00; }

body.toolbox div.header ul.menu { display:none; }
body.toolbox div.header { padding-bottom:30px; }

div.wrapper { width:918px; padding:0 21px; margin:0 auto; }

div.menu a.item { display:block; text-decoration:none; width:282px; height:190px; border:5px solid white; border-radius:12px; float:left; margin:0 21px 21px 0; background-color:#AAA }
div.menu a.item.right { margin-right:0 }
div.menu a.item h2 { color:white; font-weight:normal; background:rgba(232,41,49,0.9); padding:10px 20px; margin:0; border-top-left-radius:7px; border-top-right-radius:7px; font-size:150% }
div.menu a.item h2 span { display:block; padding:0 0 0 16px; background-image:url(../gfx/toolbox/dots.png); background-position:0 4px; background-repeat:no-repeat; }
div.menu a.item:hover h2 span{ background-position:0 -66px }
div.menu a.item div.intro { display:none; color:white; background:rgba(232,41,49,0.9); padding:0px 20px 20px 36px; height:126px; border-bottom-left-radius:7px; border-bottom-right-radius:7px }
div.menu a.item div.intro p { margin:0; line-height:1.5em }
div.menu a.item.home { background:white url(../gfx/toolbox/home.gif) no-repeat; background-position:20px 60px; }
div.menu a.item.home:hover { background-position:20px -203px }
div.menu a.item.home h2 { color:#FF0000; background:none }
div.menu a.item.home h2 span { display:block; padding:0 0 0 16px; background-image:url(../gfx/toolbox/dots.png); background-position:0 4px; background-repeat:no-repeat; }

/* ========== */
/* = footer = */
/* ========== */
div.footer { background:rgba(255,255,255,0.9); clear:left; border-radius:12px; padding:12px 21px  }
div.footer ul { margin:0; padding:0; list-style-type:none }
div.footer li { display:inline }
div.footer a { color:black; text-decoration:none; margin:0 20px 0 0 }
div.footer a:hover { color:#858a27 }

/* =============== */
/* = bibliotheek = */
/* =============== */
a.biblio { display:block; width:282px; height:632px; border:5px solid white; border-radius:12px; float:right; background-image:url(../gfx/toolbox/biblio-bg.jpg); text-decoration:none }
a.biblio h2 { color:white; font-weight:normal; background:rgba(0,0,0,0.9); padding:10px 20px; margin:0; border-top-left-radius:7px; border-top-right-radius:7px }
a.biblio h2 span { display:block; padding:0 0 0 16px; background-image:url(../gfx/toolbox/dots.png); background-position:0 -136px; background-repeat:no-repeat; }
a.biblio:hover h2 span { background-position:0 -66px }
a.biblio div.intro { padding:0 20px 20px 20px; line-height:1.5em; color:white; }



div#wrapper { position:relative }
div.popup { display:none; min-height:300px; width:710px; padding:21px; background:white; position:absolute; left:100px; top:40px; border-radius:12px; box-shadow:2px 2px 8px rgba(0,0,0,0.5) }
div.popup a.close { display:block; position:absolute; right:20px; top:20px; width:15px; height:14px; background-image:url(../gfx/toolbox/close.gif); background-repeat:no-repeat; background-position:0 0 }
div.popup a.close:hover { background-position:0 -32px }

div.popup h1 { color:#F00; margin:0 0 0.5em }
div.popup p  { margin:0 0 1.3em; line-height:1.5em }
div.popup h2 { line-height:1.5em }
div.popup a { color:#858a27; text-decoration:none }
div.popup a:hover { text-decoration:underline }


/* ============= */
/* = checklist = */
/* ============= */
div.tabs { border-bottom:1px solid #d9d9d9; height:23px; padding:0 21px; margin:0 -21px }
div.tabs a { color:black; text-decoration:none; display:block; margin:0 8px 0 0; padding:3px 12px 4px; height:14px; float:left; background:#d9d9d9; border:1px solid #d9d9d9; position:relative; top:1px; border-top-left-radius:8px; border-top-right-radius:8px; }
div.tabs a.selected { background:white; color:#FF0000; border-bottom:white; height:15px }

div.bladen { padding:10px 0 }
div.bladen div.blad { display:none; padding:34px 0; position:relative }
div.bladen div.adviesblad { padding:0 }
div.bladen div.blad.selected { display:block }
div.bladen h2 { position:relative; font-size:100%; font-weight:normal; margin:0 150px 20px 0; padding:2px 0 2px 18px }
div.bladen h2 strong { display:block; position:absolute; left:0; width:18px;  }
div.bladen h2.error strong { color:#F00; }
/*div.bladen p { font-size:150%; padding:2px 0 2px 10px }*/

div.bladen div.blad a.verder { display:none; position:absolute; color:#000; text-decoration:none; right:24px; padding:4px 12px 4px; width:70px; border:1px solid #d9d9d9; border-radius:8px; text-align:center; font-weight:bold }
div.bladen div.blad a.verder:hover { color:#F00 }

/*div.radio { float:right; width:120px; padding:2px 0 }*/
div.radio a { display:block; padding:2px 0 2px 21px; font-weight:bold; background-image:url(../gfx/toolbox/radio.png); background-position:0 0; background-repeat:no-repeat; margin-right:14px; float:left; color:black; text-decoration:none }
div.radio a:hover { color:#F00 }
div.radio a.selected { color:#F00; background-position:0 -49px }

div.errmsg { display:none; top:0; left:0; position:absolute; border:1px solid #d9d9d9; padding:4px 32px 4px 16px; margin:0 150px 10px 0px }
div.errmsg strong { color:red }

div.popup a.toelichting { color:black; text-decoration:none; border-bottom:1px dashed black; position:relative }
div.popup a.toelichting:hover { color:#858a27 }

div.toelichting div { display:none; position:absolute; background:white; font-size:90%; padding:20px; width:260px; left:300px; top:300px; border-radius:12px; box-shadow:0 0 10px rgba(0,0,0,0.3) }
div.toelichting div h2 { margin:0 0 0.5em 0; color:#FF0000 }
div.toelichting div p  { margin:0 0 1em }
div.toelichting div a.close { display:block; position:absolute; right:20px; top:20px; width:15px; height:14px; background-image:url(../gfx/toolbox/close.gif); background-repeat:no-repeat; background-position:0 0 }
div.toelichting div a.close:hover { background-position:0 -32px }


/* ============= */
/* = bar graph = */
/* ============= */
div.graph { border-left:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; height:100px; overflow:hidden; position:relative }
div.graph div.bar { width:120px;  float:left; margin:0 0 0 20px; position:relative }
div.graph div.bar img { display:block; width:120px }
div.graph div.bar label { display:block; width:120px; text-align:center; color:white; position:absolute; left:0; top:0 }

/* ========== */
/* = expert = */
/* ========== */

div.expertsgroup { display:grid; grid-template-columns: 1fr 1fr; grid-gap:20px }
div.experts { min-height:182px; width:340px; }
div.experts img { display:block; float:left; margin-right:15px  }
div.experts br { display:none; }
div.clear { clear:left }



/* =================== */
/* = praat-mee forum = */
/* =================== */
div.page div.text { display:block; background:rgba(255,255,255,0.9); padding:20px; margin:0 0 20px; border-radius:12px; }
body.praat-mee div.page div.text { padding:0; margin:0; background:none }
div.page div.text h1 { margin-top:0;}
div.page div.menu { display:none; }
div.page table { width:100%; }

div.text a { text-decoration:none; color:#2452af; font-weight:bold }
div.text a:hover { text-decoration:underline }

body.praat-mee div.page { display:block; background:rgba(255,255,255,0.9); padding:20px; margin:0 0 20px; border-radius:12px; }
body.praat-mee div.text h1 { margin-top:0;}
body.praat-mee div.menu { display:none; }
body.praat-mee table { width:100%; }
/*body.praat-mee p a { color:#da1d30 }*/

body.forum div.page { display:block; background:rgba(255,255,255,0.9); padding:20px; margin:0 0 20px; border-radius:12px; }
body.forum div.text h1 { margin-top:0;}
body.forum div.menu { display:none; }
body.forum table { width:100%; }

ul.breadcrumb { margin:0 0 20px; padding:30px 0 0 0; list-style-type:none }
ul.breadcrumb li { display:inline; font-size:88% }
ul.breadcrumb a { color:#777; text-decoration:none; }

td, th { padding:6px 8px; text-align:left; font-size:88%; border-right:3px solid white }
td.title a   { font-weight:bold; margin:0 9px 0 0; color:#da1d30 }
td.title br { display:none }
td.title { color:#333; line-height:1.5em }
td.title img { display:block; float:right; margin:2px 0 0 0 }
td.getal { text-align:center }
td.datum { width:100px; color:#da1d30 }
td.getal { color:#da1d30 }
td.datum span { color:#333; margin:0 0 0 5px }
table { border-spacing:0; border-collapse:collapse }
table tr td { background:#f4f4f4 }
table tr.even td { background:white }

div.pagenrs { text-align:right; border:1px solid #e5e5e5; padding:4px; margin:10px 2px 10px 0; height:18px; font-size:85% }
div.pagenrs p { margin:0; float:right }
div.pagenrs a { width:18px; height:16px; padding:2px 0 1px 0; background:#777; color:white; text-decoration:none; float:left; text-align:center  }
div.pagenrs span { display:block; float:left; padding:2px 2px 1px 2px; min-width:18px; height:16px; text-align:center }
div.pagenrs span.actief { background:#e5e5e5 }
div.pagenrs span.pagina { margin-right:8px}
div.pagenrs a.prev,
div.pagenrs a.next { font-size:1px; text-indent:-100px; overflow:hidden; background:#777 url(../gfx/toolbox/prevnext.gif) no-repeat; background-position:2px 2px;  }
div.pagenrs a.prev { margin:0 3px }
div.pagenrs a.next { float:right; background-position:1px -33px; margin:0 0 0 3px }

a#twee { position:relative; top:-35px; left:8px }

div.reactie { padding:7px 20px; background:#f1f1f1; font-size:90% }
div.reactie.even { background:#f9f9f9 }
div.reactie.first { padding:0; background:white }
div.reactie span.datum { color:#da1d30; margin:0 0 0 15px }
div.reactie span.datum span { color:#111; margin:0 0 0 5px }
div.reactie a.ongepast { float:right; color:#000; text-decoration:none; position:relative }
div.reactie a.ongepast:hover { color:#da1d30; }
div.reactie a.ongepast em { font-style:normal; color:#da1d30; font-weight:bold; font-size:14px;  }
div.reactie a.ongepast span.tooltip { display:none; position:absolute; color:#da1d30;  left:-40px; top:24px; width:160px; background:white; padding:3px 8px; box-shadow:0 0 4px rgba(0,0,0,0.3) }
div.reactie a.ongepast:hover span.tooltip { display:block }
div.reactie a.ongepast.done { cursor:default; color:#666 }
div.reactie a.ongepast.done:hover { color:#666; }

label { display:block; font-weight:bold; font-size:90%; margin:0 0 4px }
input.text { display:block; font:12px Arial; width:260px; padding:4px; margin:0 0 14px; border:1px solid #e5e5e5; border-radius:4px; box-shadow:1px 1px 3px rgba(0,0,0,0.6) inset }
form div.title { float:left; margin-right:17px }
textarea { display:block; font:12px Arial; width:546px; height:180px; padding:4px; margin:0 0 14px; border:1px solid #e5e5e5; border-radius:4px; box-shadow:1px 1px 3px rgba(0,0,0,0.6) inset }
input[type=submit] { display:block; padding:4px 14px; margin:20px 0; color:white; background:#777; border:1px outset #444; border-radius:6px; cursor:pointer; text-shadow:1px 1px 1px black }