body { margin:0; padding:0; color:#4c4c4c; font:small Arial; background:white url(../gfx/header.jpg) no-repeat; background-position:center top }
div#webetui_body { background:white url(../gfx/bg_home.jpg) no-repeat; background-position:center top }
body#index, body#index div#webetui_body         { background-image:url(../gfx/header_home.jpg) }
body#werkgever, body#werkgever div#webetui_body { background-image:url(../gfx/header_werkgever.jpg) }
body#werknemer, body#werknemer div#webetui_body { background-image:url(../gfx/header_werknemer.jpg) }

div#wrapper { width:1000px; position:relative; margin:0 auto;  }
div#page { margin:0px 378px 0 26px }
body#index div#page, body#werkgever div#page, body#werknemer div#page { margin-top:196px }

div#rechts { position:absolute; width:293px; top:171px; right:0; padding:0 29px; border-left:1px solid #AAA }
body#index div#rechts, body#werkgever div#rechts, body#werknemer div#rechts { top:357px }

a#logo { display:block; width:254px; height:52px; background-image:url(../gfx/logo_blue.gif); background-repeat:no-repeat; background-position:26px 25px; padding:25px 0 38px 26px }
body#werkgever a#logo { background-image:url(../gfx/logo_green.gif) }
body#werknemer a#logo { background-image:url(../gfx/logo_orange.gif) }

div#breadcrumb { margin:0 0 20px; font-size:85%; color:#32a900; padding:6px 0 }
div#breadcrumb a { text-decoration:none; color:#b3b3b3 }

h1 { font:25px Trebuchet MS; font-style:italic; margin:0 0 15px; font-weight:normal }
h2 { font-size:120%; margin:0 0 8px}
h3 { font-size:100%; margin:0 0 8px }
h4 { font-size:85%; margin:0 0 8px}
p  { line-height:1.5em; margin:0 0 1.5em 0 }
a  { color:#32a900 }
a:hover { color:#ff8a00 }

h1 { color:#0061c9 }
h1 strong { color:#4c4c4c; font-weight:normal }
th { text-align:left; padding:0 20px 0 0; font-size:85% }
th, td { padding:3px 20px 3px 20px; border:1px solid white; border-left:0; border-top:0; background:#ecf4ff }

#tekst ul { margin:0 0 1.5em; padding:0 }
#tekst ul li { line-height:1.5em; padding:0 0 8px 15px; list-style-type:none; background-repeat:no-repeat; background-position:0px 7px; background-image:url(../gfx/bullet_green.gif) }

#rechts ul { margin:0 0 1.5em; padding:0 }
#rechts ul li { line-height:1.5em; padding:0 0 8px 15px; list-style-type:none; background-repeat:no-repeat; background-position:0px 7px; background-image:url(../gfx/bullet_green.gif) }
#rechts ul li a.selected { color:#0061c9 }

a img { border:0 }

div#breadcrumb { height:1.3em }
div#breadcrumb ul { margin:0; padding:0 }
div#breadcrumb li { list-style-type:none; display:inline }

/* home */
div.balloons div { position:absolute; left:20px; top:99px; width:227px; height:221px; background-repeat:no-repeat }
div.balloons div.werkgever { background-image:url(../gfx/shield_home_green.gif); }
div.balloons div.werknemer { background-image:url(../gfx/shield_home_orange.gif); left:266px }
div.balloons p    { color:white; padding:5px 15px;  }
div.balloons a    { color:white; text-decoration:none; display:block; font-weight:bold; padding:15px 15px 15px 20px }
div.balloons h2 a { display:block; color:white; font:24px Trebuchet MS; font-style:italic; padding:10px 15px }
div.balloons div p a { background-repeat:no-repeat; background-position:0px 18px }
div.balloons div p a:hover { background-position:0px -26px }
div.balloons div.werkgever p a { background-image:url(../gfx/menubullet_green.gif) }
div.balloons div.werknemer p a { background-image:url(../gfx/menubullet_orange.gif) }

/* menu */
div#menu { position:absolute; left:20px; top:99px; width:100%;  }
div#menu a { text-decoration:none; font:13px Arial; display:block; background-repeat:no-repeat; background-position:15px 5px }
div#menu a.selected { background-position:15px -127px }

div#menu h2 strong { display:block; font-style:normal; font:13px Arial; font-weight:bold }

div#menu ul { background:none; margin:0; padding:0; width:auto; height:auto }
div#menu ul li { display:none; }
div#menu ul li.selected ul { margin:3px }
div#menu ul li.selected, div#menu ul li.selected ul li { display:block }
div#menu ul li.selected ul li ul li { display:none }

div#menu ul li.selected  { display:block; float:left; width:227px; height:188px  }
div#menu ul li h2 { font:20px Trebuchet MS; font-style:italic; padding:26px 15px 7px }
div#menu ul li ul li a { color:white; font:13px Arial; font-weight:bold; margin:2px 0; padding:3px 15px 4px 39px; background-position:15px -83px }
div#menu ul li ul li a:hover { background-position:15px -127px }

div#menu ul li ul li a.selected { color:white; background-position:15px -171px }
/*
div#menu ul li ul li ul li a.selected { background:none;  }
*/

div#menu ul li.selected ul li.selected ul li { display:block; float:left; width:227px; height:188px; background-image:url(../gfx/shield_pink_on_green.gif); margin:0 18px 0 0  }
div#menu ul li.selected ul li ul li h2 { color:white; font:20px Trebuchet MS; font-style:italic; padding:26px 15px 7px; background-image:none  }
div#menu ul li.selected ul li ul li ul li a { font:13px Arial; font-weight:bold; margin:2px 0; padding:3px 15px 4px 39px; background-repeat:no-repeat }
div#menu ul li.selected ul li ul li ul li a:hover { background-position:15px -39px }
div#menu ul li.selected ul li ul li ul li a.selected { background-color:white; background-position:15px -127px }

div#menu ul li.selected ul li ul li ul { float:none; position:static; margin:2px  }
div#menu ul li.selected ul li,
div#menu ul li.selected ul li.selected ul li ul li { margin:0; float:none; width:auto; height:auto; background:none }
div#menu ul li.selected ul li ul { float:none; position:absolute; left:245px; top:-3px;  }

/* background shields */
div#menu ul li#werkgever.selected ul li ul li#veranderingen { background-image:url(../gfx/shield_werkgever_blue.gif);  }
div#menu ul li#werkgever.selected ul li ul li#cao           { background-image:url(../gfx/shield_werkgever_pink1.gif);  }
div#menu ul li#werkgever.selected ul li ul li#contract1     { background-image:url(../gfx/shield_werkgever_blue2.gif)  }
div#menu ul li#werkgever.selected ul li ul li#voorwaarden1  { background-image:url(../gfx/shield_werkgever_purple3.gif) }
div#menu ul li#werkgever.selected ul li ul li#contract2     { background-image:url(../gfx/shield_werkgever_blue1.gif) }
div#menu ul li#werkgever.selected ul li ul li#voorwaarden2  { background-image:url(../gfx/shield_werkgever_purple2.gif) }

div#menu ul li#werknemer.selected ul li ul li#veranderingen { background-image:url(../gfx/shield_werknemer_blue.gif);  }
div#menu ul li#werknemer.selected ul li ul li#cao           { background-image:url(../gfx/shield_werknemer_grey1.gif);  }
div#menu ul li#werknemer.selected ul li ul li#contract1     { background-image:url(../gfx/shield_werknemer_blue2.gif);  }
div#menu ul li#werknemer.selected ul li ul li#voorwaarden1  { background-image:url(../gfx/shield_werknemer_purple3.gif);  }
div#menu ul li#werknemer.selected ul li ul li#contract2     { background-image:url(../gfx/shield_werknemer_blue1.gif);  }
div#menu ul li#werknemer.selected ul li ul li#voorwaarden2  { background-image:url(../gfx/shield_werknemer_purple2.gif);  }

ul li#werkgever.selected         { background-image:url(../gfx/shield_werkgever_white.gif) }
ul li#werknemer.selected         { background-image:url(../gfx/shield_werknemer_white.gif) }

/* menu bullets */
ul li#werkgever ul li a          { background-image:url(../gfx/menubullet_green.gif)   }
ul li#werkgever ul li a:hover    { background-image:url(../gfx/menubullet_green.gif);  }
ul li#werkgever ul li a.selected { background-color:#32a900; }

ul li#werknemer ul li a          { background-image:url(../gfx/menubullet_orange.gif)   }
ul li#werknemer ul li a:hover    { background-image:url(../gfx/menubullet_orange.gif);  }
ul li#werknemer ul li a.selected { background-color:#ff8a00; }

div#menu ul li ul li a.selected { background_image:url(../gfx/menubullet_orange.gif) }

div#menu ul li#werkgever.selected ul li ul li#veranderingen ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werkgever.selected ul li ul li#cao           ul li a { background-image:url(../gfx/menubullet_pink.gif);  }
div#menu ul li#werkgever.selected ul li ul li#contract1     ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werkgever.selected ul li ul li#voorwaarden1  ul li a { background-image:url(../gfx/menubullet_purple.gif);  }
div#menu ul li#werkgever.selected ul li ul li#contract2     ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werkgever.selected ul li ul li#voorwaarden2  ul li a { background-image:url(../gfx/menubullet_purple.gif);  }

div#menu ul li#werknemer.selected ul li ul li#veranderingen ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werknemer.selected ul li ul li#cao           ul li a { background-image:url(../gfx/menubullet_grey.gif);  }
div#menu ul li#werknemer.selected ul li ul li#contract1     ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werknemer.selected ul li ul li#voorwaarden1  ul li a { background-image:url(../gfx/menubullet_purple.gif);  }
div#menu ul li#werknemer.selected ul li ul li#contract2     ul li a { background-image:url(../gfx/menubullet_blue.gif);  }
div#menu ul li#werknemer.selected ul li ul li#voorwaarden2  ul li a { background-image:url(../gfx/menubullet_purple.gif);  }

div#menu ul li#werkgever a, div#menu ul li#werkgever>h2 { color:#32a900 }
div#menu ul li#werkgever ul li a.selected { color:white }
div#menu ul li#werkgever ul li ul li a { color:white }
div#menu ul li#werknemer a, div#menu ul li#werknemer>h2 { color:#ff8a00 }
div#menu ul li#werknemer ul li a.selected { color:white }
div#menu ul li#werknemer ul li ul li a { color:white }

body#werkgever div#menu ul li.selected ul li ul li#cao ul li a.selected, 
body#werkgever.cao div#breadcrumb 
{ color:#de5871 /* pink */ }

body#werknemer div#menu ul li.selected ul li ul li#cao ul li a.selected, 
body#werknemer.cao div#breadcrumb 
{ color:#777b8e /* grey */ }

div#menu ul li.selected ul li ul li#veranderingen ul li a.selected, 
div#menu ul li.selected ul li ul li#contract1 ul li a.selected, 
div#menu ul li.selected ul li ul li#contract2 ul li a.selected, 
body.veranderingen div#breadcrumb,
body.contract1 div#breadcrumb,
body.contract2 div#breadcrumb
{ color:#0061c9 /* blue */ }

div#menu ul li.selected ul li ul li#voorwaarden1 ul li a.selected, 
div#menu ul li.selected ul li ul li#voorwaarden2 ul li a.selected, 
body.voorwaarden1 div#breadcrumb,
body.voorwaarden2 div#breadcrumb
{ color:#7114b8 /* purple */ }

div#breadcrumb { color:#32a900 /* grey */ }


/* actievlakken */
div.actie { width:567px; padding:15px 0 0 0; background-repeat:no-repeat; margin:0 0 20px 0; color:#222 }
div.actiebottom { background-position:bottom; padding:5px 30px 15px 25px; margin:0 }

div.actie, div.actiebottom { background-image:url(../gfx/bg_actie_blue.gif) }
div.pink div.actie, div.pink div.actiebottom { background-image:url(../gfx/bg_actie_pink.gif) }
div.blue div.actie, div.blue div.actiebottom { background-image:url(../gfx/bg_actie_blue.gif) }
div.grey div.actie, div.grey div.actiebottom { background-image:url(../gfx/bg_actie_grey.gif) }
div.green div.actie, div.green div.actiebottom { background-image:url(../gfx/bg_actie_green.gif) }
div.orange div.actie, div.orange div.actiebottom { background-image:url(../gfx/bg_actie_orange.gif) }
div.purple div.actie, div.purple div.actiebottom { background-image:url(../gfx/bg_actie_purple.gif) }

div#rechts div.actie { width:auto }
div#rechts div.pink div.actie, div#rechts div.pink div.actiebottom { background-image:url(../gfx/bg_actie_pink_r.gif) }
div#rechts div.blue div.actie, div#rechts div.blue div.actiebottom { background-image:url(../gfx/bg_actie_blue_r.gif) }
div#rechts div.grey div.actie, div#rechts div.grey div.actiebottom { background-image:url(../gfx/bg_actie_grey_r.gif) }
div#rechts div.green div.actie, div#rechts div.green div.actiebottom { background-image:url(../gfx/bg_actie_green_r.gif) }
div#rechts div.purple div.actie, div#rechts div.purple div.actiebottom { background-image:url(../gfx/bg_actie_purple_r.gif) }
div#rechts div.orange div.actie, div#rechts div.orange div.actiebottom { background-image:url(../gfx/bg_actie_orange_r.gif) }

div#rechts h1 { font-size:25px }
div#rechts h1 em { font-size:14px; position:relative; top:-6px }
div#rechts div.stap { background-repeat:no-repeat; background-position:100px 0; min-height:120px; margin:0 0 20px }

/* kleuren */
div#rechts div.blue div.stap   { color:#0061c9; background-image:url(../gfx/arrow_big_blue.gif) }
div#rechts div.pink div.stap   { color:#de5871; background-image:url(../gfx/arrow_big_pink.gif) }
div#rechts div.grey div.stap   { color:#777b8e; background-image:url(../gfx/arrow_big_grey.gif) }
div#rechts div.purple div.stap { color:#7114b8; background-image:url(../gfx/arrow_big_purple.gif) }
div#rechts div.green div.stap  { color:#0061c9; background-image:url(../gfx/arrow_big_green.gif) }
div#rechts div.orange div.stap { color:#ff8a00; background-image:url(../gfx/arrow_big_orange.gif) }

div#rechts div.blue h1 em      { color:#5ab0fd; }
div#rechts div.pink h1 em      { color:#de5871; }
div#rechts div.grey h1 em      { color:#777b8e; }
div#rechts div.purple h1 em      { color:#7114b8; }
div#rechts div.green h1 em      { color:#5ab0fd; }
div#rechts div.orange h1 em      { color:#ff8a00; }

div.pink h1,   div.pink a { color:#de5871 }
div.grey h1,   div.grey a { color:#777b8e }
div.blue h1,   div.blue a { color:#0061c9 }
div.purple h1, div.purple a { color:#7114b8 }
div.green h1,  div.green a { color:#32a900 }
div.orange h1, div.orange a { color:#ff8a00 }

#tekst div.pink ul li { background-image:url(../gfx/bullet_pink.gif) }
#tekst div.grey ul li { background-image:url(../gfx/bullet_grey.gif) }
#tekst div.blue ul li { background-image:url(../gfx/bullet_blue.gif) }
#tekst div.purple ul li { background-image:url(../gfx/bullet_purple.gif) }
#tekst div.green ul li { background-image:url(../gfx/bullet_green.gif) }
#tekst div.orange ul li { background-image:url(../gfx/bullet_orange.gif) }

/* topmenu */
div#topmenu { position:absolute; right:25px; top:0; padding:6px 0 }
div#topmenu ul { margin:0; padding:0 }
div#topmenu li { list-style-type:none; display:inline }
div#topmenu a  { text-decoration:none; color:white; display:block; float:left; padding:0 12px; font-weight:bold; background-image:url(../gfx/menusep.gif); background-repeat:no-repeat; background-position:right 3px }
div#topmenu a#contact { background-image:none }
div#topmenu a.selected { color:#fcb232 }

body#index div#topmenu { width:1000px; margin:0 auto; position:absolute }
body#index div#topmenu ul { position:absolute; top:96px; left:687px;  }
body#index div#topmenu ul li { display:block }
body#index div#topmenu ul li a { float:none; padding:6px 16px; background-image:url(../gfx/arrow_menu_home.gif); background-repeat:no-repeat; background-position:0 10px; color:white }
body#index div#topmenu ul li a:hover { background-position:0 -20px }

/* formulier */

label { display:block; color:#0075ff; margin:0 0 2px }
input.text, textarea { display:block; width:400px; margin:0 0 10px; border:1px solid #0075ff }
div.radiogroup { color:#0075ff; margin:0 0 10px }