/*
   afrikadag.css
   YPOS8 - afrikadag2011
   
   Created by Ronald Werring on 2011-09-12.
   Copyright 2011 YPOS internettoepassingen BV. All rights reserved.

  magenta #ec008c
  paars   #92278f
  groen   #bfd730
  rood    #e31f26
  geel    #ffcb05
  blauw   #2e3192

*/
html { height:100%; min-height:100%; margin-bottom:1px }
body { height:100% }
html {overflow-y: scroll;}

body { font:small Helvetica, Arial; margin:0; padding:0; background:white; }
div#wrapper { width:1000px; position:relative; margin:21px auto;  }
div#wrapper2 { position:absolute; top:0; width:100%; margin:0 auto }


div#links  { width:250px; position:absolute; left:0; top:0px; padding-top:46px; border-top:10px solid #ffcb05; color:white; }
div#midden { margin:0px 250px; padding:58px 20px 10px 20px; min-height:548px }
div#rechts { width:250px; position:absolute; right:0; top:46px; }

body.index div#midden img,
body.home div#midden img { margin-left:-10px;}
body.inschrijven div#midden { margin:0; padding:58px 0 10px 0; }

div.color { padding:14px; min-height:204px; background:#ffcb05; }

div#links img,
div#rechts img { display:block; margin:10px 0 0 0;}
div#rechts img.evs   { margin-bottom:60px; }
body.inschrijven div#rechts { display:none;}

div#links p,
div#rechts p { display:block; margin:0 0 10px 0; }

div#links h1 { font-size:100%; text-transform:uppercase; margin:0 0 1em; color:black;}
div#links h2 { font-size:11px; text-transform:uppercase; margin:0 0 4px; font-weight:normal; font-size:90%}
div#links a  { color:white; }
div#links ul { margin:0; padding:0; list-style-type:none;  }
div#links hr { border:0; border-bottom:2px dotted white; margin:1.5em 0;}

div#midden h1 { text-transform:uppercase; font-weight:normal; font-size:24px; margin:0 0 1em; padding:0 0 10px 0; border-bottom:2px dotted black;}

div#rechts p br { display:none; }
div#rechts div.rechtsonder a { display:block; color:white; font-size:18px; text-decoration:none; padding:10px 44px 6px; margin:0 0 10px; text-transform:uppercase; }
div#rechts div.rechtsonder a:hover { text-decoration:underline;}
div#rechts div.rechtsonder div.socialmedia a { padding:0; background:none; float:right; margin-left:8px;}

h1 {}
h1 strong { font-weight:normal }
h2 { font-size:100%; margin:0 0 4px 0;}
h3 { font-size:100%; margin:0 0 4px 0;}
h4 {}
h5 {}
p  { font-size:90%; line-height:1.4em; margin:0 0 1.4em;}
ul {}
ol {}
div#midden li { font-size:90%; line-height:1.4em; }

a { outline:0; }
a:hover { }

img { border:0; }
img.left  { float:left; margin-right:10px; }
img.right { float:right; margin-left:10px; }

table { font-size:85%; margin:0 12px 1em 0px; width:100%; line-height:1.1em; border:1px solid #ec068d; border-right:0; }
table th, table td { border-right:1px solid #ec068d; padding:4px 8px }
table td.c1 { width:80px; vertical-align:top }

/* =========== */
/* = alfabet = */
/* =========== */
div#alfabet { border-bottom:2px dotted black; padding:10px 0; margin:0 0 20px; }
div#alfabet a { padding:2px 5px; font-weight:bold; color:#009ee0; text-decoration:none;}
div#alfabet a.selected { color:white; background:#009ee0;}

/* ======== */
/* = menu = */
/* ======== */
div#menu { width:1000px; margin:0 auto; position:relative;}
div#menu ul { padding:3px 0 4px 0; margin:0 }
div#menu ul li { display:inline }
div#menu ul.menu1 { background:black; padding-left:6px; }
div#menu ul.menu2 { background:#009ee0; margin-left:500px; padding-left:6px }
div#menu a { color:white; text-decoration:none; padding:0 12px; font-size:11px; text-transform:uppercase }
div#menu a:hover,
div#menu a.selected { color:#fff200 }

div#menu a#english { position:absolute; right:6px; top:6px;}

/* == submenu == */
div#menu ul.menu1 li ul { display:none; }
div#menu ul.menu1 li.selected ul { display:block; position:absolute; left:-2px; top:112px; z-index:20; width:230px;}
div#menu ul.menu1 li.selected ul li { display:block; margin-bottom:4px; }
div#menu ul.menu1 li.selected ul li a { text-transform:none; font-size:100%; }

/* == sub-submenu == */
div#menu ul.menu1 li.selected ul li ul { display:none;}
div#menu ul.menu1 li.selected ul li.selected ul { display:block; position:static; font-size:85%; margin:4px 0 0 14px;}
div#menu ul.menu1 li.selected ul li.selected ul li { margin-bottom:2px; }

div#zoek { display:none; }

/* ============= */
/* = programma = */
/* ============= */
/*table#programma td { font-family:Verdana; font-size:11px;}
table#programma td { width:20px; overflow:hidden; height:30px; text-align:center;  }
table#programma td.label { text-align:center;}
table#programma td.uur   { border-left:3px solid black; }
table#programma td.kwart { border-left:1px solid #666;}
table#programma tr.kwart td { font-size:9px; height:12px; padding-bottom:4px; color:#666}
*/
#programma { position:relative; margin:0 0 30px; }
#programma ul { margin:0; padding:0; list-style-type:none;  }
#programma ul.ochtend { width:491px; margin-left:14px; height:480px; background-image:url(../gfx/bg_schema.gif); background-position:0 0;  }
#programma ul.middag { width:488px; left:502px; top:73px; position:absolute;height:500px; background-image:url(../gfx/bg_schema.gif); background-position:0 0;}
#programma ul.doorlopend { margin-left:14px; margin-right:14px; height:150px; background-image:url(../gfx/bg_schema.gif); background-position:0 0;}
#programma li { display:block; /*height:32px;*/ clear:both; position:relative; }
#programma li.uur { font:11px Verdana;}
#programma li.uur label { display:block; float:left; width:122px;}
#programma li.uur label.last { width:30px;}
#programma li.kwartier { font:8px Verdana; color:#666; height:18px; padding-left:14px; }
#programma li.kwartier span { display:block; float:left; border-left:3px solid black; padding:0px 0 0 16px; width:103px; height:18px;}
#programma li.kwartier span label { display:block; float:left; width:31px;}
#programma li.kwartier span.last { width:70px; }
#programma li.padding { height:40px; margin-left:14px; margin-right:14px;}
#programma li.content { background-image:url(../gfx/bg_schema.gif); background-position:0 0; }
#programma li div.filled9,
#programma li div.filled6,
#programma li div.filled4,
#programma div.special,
#programma li div.selected,
#programma li div.doorlopend { font-size:11px; line-height:11px; padding:6px 1px 5px 1px; background-repeat:repeat-x; background-position:top; text-align:center; }
#programma li div.middag   { }
#programma li div.filled9  { background-image:url(../gfx/magenta.gif); color:white; }
#programma li div.filled6  { background-image:url(../gfx/blauw.gif); color:white; }
#programma li div.filled4  { background-image:url(../gfx/paars.gif); color:white; }
#programma li div.selected { background-image:url(../gfx/selected.gif); color:black; background-repeat:no-repeat; background-position:left top; }

/*#programma li div img { display:none; }
#programma li div.selected img { display:block; float:left;}
*/
#programma li div.doorlopend { padding:3px 1px 2px 1px; background-image:url(../gfx/blauw.png); color:white; background-position:left top; margin-left:125px; }
#programma li div.doorlopend2 { margin-left:123px; }
#programma li>div.filled9:hover,
#programma li>div.filled6:hover,
#programma li>div.filled4:hover,
#programma li>div.doorlopend:hover { color:black; text-decoration:underline; cursor:pointer;}
#programma li>div.zoomin.filled9:hover,
#programma li>div.zoomin.filled6:hover,
#programma li>div.zoomin.filled4:hover { color:white; text-decoration:none; cursor:default;}
#programma li>div.zoomin.doorlopend:hover { color:white; text-decoration:none; cursor:default;}
#programma div.special { background-image:url(../gfx/groen90.png); background-repeat:repeat; color:white; color:black; padding-top:120px; bottom:0px; border:0; position:absolute; top:47px; }
#programma li div.zoomin { display:none; position:relative; text-align:left; margin:0 0 0 3px; padding:12px 16px 16px 16px; color:white; border-bottom:3px solid black; border-right:3px solid black;  z-index:1000;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); font-size:100%; line-height:auto;
}
#programma div.label { position:absolute; left:20px; top:47px; background:white; font-style:italic; padding:3px; width:928px; text-align:center; border:1px solid black;   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); font-size:90%; }
#programma div.label2 { top:527px;}

/*#programma li div.zoomin.middag { margin:0 0 0 455px; border-left:3px solid black;}*/
#programma li div.zoomin.filled9 { background:#ec008c; }
#programma li div.zoomin.filled6 { background:#009ee0; }
#programma li div.zoomin.filled4 { background:#92278f; }
#programma li div.zoomin.doorlopend { background:#2e3192; }
#programma li div.zoomin h1 { font-size:14px; line-height:15px; border-color:white; background-image:url(../gfx/vinkje.gif); background-repeat:no-repeat; padding:4px 0 10px 26px; cursor:pointer;}
#programma li div.zoomin h1 label { display:block; text-transform:none; font-size:11px;}
#programma li div.zoomin h1.selected { color:black; background-position:0 -80px; }
#programma li div.zoomin h1:hover { color:black; text-decoration:underline; }
#programma li div.zoomin.doorlopend h1 { background:none; padding:4px 0 10px 4px;}
#programma li div.zoomin div.workshop { border-color:white;}
#programma li div.zoomin a.close { width:16px; height:16px; padding:0; margin:0; position:absolute; right:3px; top:3px; display:block; background-image:url(../gfx/close.png); }
#programma li div.zoomin a.close:hover { background-position:0 -20px;}
#programma li div.zoomin ul { margin:0 0 1em 20px; list-style-type:disc; font-size:90%; line-height:1.4em; }

div.workshop { border-bottom:2px dotted black; margin:0 0 20px;}
div.workshop strong { display:block; width:100px; float:left; }
div.workshop em { margin:0 0 0 100px; text-indent:-100px; display:block; font-style:normal;  }
div.workshop br { display:none;  }

/* form */
form label { display:block; }
form input, form textarea { }
form input.submit { display:block; }
form div#error { }

/* ========== */
/* = colors = */
/* ========== */
body.index div#links div.color,
body.index div#rechts a,
body.index img.evs              { background-color:#ec008c }
body.index div#links            { border-color:    #ec008c }
body.index h1 strong            { color:           #ec008c }

body.home div#links div.color,
body.home div#rechts a,
body.home img.evs              { background-color:#ec008c }
body.home div#links            { border-color:    #ec008c }
body.home h1 strong            { color:           #ec008c }

body.programma div#links div.color,
body.programma div#rechts a,
body.programma img.evs          { background-color:#ec008c }
body.programma div#links        { border-color:    #ec008c }
body.programma h1 strong        { color:           #ec008c }

body.inschrijven div#links div.color, 
body.inschrijven div#rechts a,
body.inschrijven img.evs        { background-color:#ec008c }
body.inschrijven div#links      { border-color:    #ec008c }
body.inschrijven h1 strong      { color:           #ec008c }

body.organisatie div#links div.color,
body.organisatie div#rechts a,
body.organisatie img.evs        { background-color:#92278f }
body.organisatie div#links      { border-color:    #92278f }
body.organisatie h1 strong      { color:           #92278f }

body.archief div#links div.color,
body.archief div#rechts a,
body.archief img.evs            { background-color:#bfd730 }
body.archief div#links          { border-color:    #bfd730 }
body.archief h1 strong          { color:           #bfd730 }

body.route div#links div.color,
body.route div#rechts a,
body.route img.evs              { background-color:#e31f26 }
body.route div#links            { border-color:    #e31f26 }
body.route h1 strong            { color:           #e31f26 }

body div#links div.color,
body div#rechts a,
body img.evs             { background-color:#ec008c }
body div#links           { border-color:    #ec008c }
body h1 strong           { color:           #ec008c }

body.sitemap div#links div.color,
body.sitemap div#rechts a,
body.sitemap img.evs            { background-color:#ffcb05 }
body.sitemap div#links          { border-color:    #ffcb05 }
body.sitemap h1 strong          { color:           #ffcb05 }

body.contact div#links div.color,
body.contact div#rechts a,
body.contact img.evs            { background-color:#2e3192 }
body.contact div#links          { border-color:    #2e3192 }
body.contact h1 strong          { color:           #2e3192 }