html, body {
 margin: 0;
 padding: 0;
}

.clear {
 clear: left;
}

body {
 font: 75%/1.25 arial, serif;
}

/* default element margins */
h1, h2, h3, h4, h5, h6,
form {
 margin: 0.4em 0;
}

a img {
 border: 0;
}

body {
 margin: 0 auto 20px auto;
 width: 980px;
}

body:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

a, a:visited {
 color: #008FFF;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

#head {
 background: url(/gfx/head.jpg) no-repeat;
 height: 322px;
 position: relative;
}

#sidebar {
 background: url(/gfx/bg-sidebar.jpg) no-repeat;
 float: left;
 width: 252px;
 padding: 10px;
}

#sidebar-user {
 background: url(/gfx/bg-left.jpg) repeat-y;
 float: left;
 width: 252px;
 min-height: 238px;
 padding: 10px;
}

#main {
 background: url(/gfx/bg-main.jpg) no-repeat;
 float: left;
 min-height: 262px;
 padding: 0 20px 0 20px;
 width: 668px;
 margin-bottom: 20px;
}

#nav {
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 90px;
 right: 10px;
}

#nav li {
 margin: 0;
 padding: 0 30px 0 0;
 float: left;
}

#nav li a {
 font-size: 14px;
 text-decoration: none;
 color: #FFF;
 font-weight: bold;
}

#nav li.active a {
 color: #008FFF;
}

#nav-ikbeneen {
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 150px;
 left: 20px;
}

#nav-ikbeneen li {
 padding: 5px;
}

#nav-ikbeneen li a {
 font-size: 16px;
 color: #FFF;
 font-weight: bold;
}

#ikbeneen {
 display: block;
 position: absolute;
 top: 130px;
 left: 25px;
 color: #555;
 font-size: 16px;
 font-weight: bold;
}

#col1 {
 width: 324px;
 margin-right: 10px;
 float: left;
}

#col2 {
 width: 324px;
 margin-left: 10px;
 float: left;
}

#col2:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

h2 {
 /*background: url(/gfx/header-border.png) repeat-x 0 bottom;*/
 border-bottom: 1px #008FFF solid;
 padding-bottom: 0.3em;
 color: #555;
 margin-top: 0;
}

/* css tooltip */
a.tooltip:hover {text-decoration:none; } /*BG color is a must for IE6*/
a.tooltip { margin-left: 0.25em; }
a.tooltip span {display:none; padding: 5px; margin-left: 15px; margin-top: 5px; width: 600px; line-height: 140%;}
a.tooltip:hover span{display: block; z-index: 50; position:absolute; background:#FFF; border: 1px solid #444; color: #333;}
a.pre span { white-space: pre; }
a.mono span {font: 12px monospace;}

a.fieldhelp {
 cursor: help;
}

a.fieldhelp span {
 width: 300px;
 margin-top: 2;
 text-align: left;
 font-weight: normal;
}

table caption {
 text-align: left;
 font-weight: bold;
 font-size: 14px;
 margin: 10px 0 10px 0;
}

table.info {
 border-collapse: collapse;
 width: 100%;
}

table.info tbody th {
 text-align: left;
 font-weight: normal;
 width: 150px;
 background: #F0F0F0;
 /* vertical-align: top; */
}

table.info tbody tr th, table.info tbody tr td {
 border-bottom: 1px #DDD solid;
 padding: 3px;
}

fieldset {
 border: 0;
 margin: 0;
 padding: 0;
}

input[type=radio] {
 border: 0;
}

.submit {
 text-align: right;
}

#form-bestellen-step1, 
#form-bestellen-step2, 
#form-bestellen-step3 {
 width: 500px;
}

.bestellen-step5 {
 width: 50%;
 float: left;
}

form fieldset input {
 border: 1px #999 solid;
 padding: 1px;
}

form fieldset label {
 cursor: pointer;
}


/* table - index */
table.index {
 width: 100%;
 border-collapse: collapse;
 margin-top: 10px;
}

table.index thead th {
 text-align: left;
}

table.index td, table.index th {
 padding: 3px;
}

table.index tbody tr {
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

table.index .action {
 text-align: right;
}

    .action img {
     margin-left: 5px;
    }

table.index .even {
 background-color: #EEE;
}

/* skin */
table.index thead th {
 background-color: #AAA;
}

table.index tbody tr {
 border-bottom-color: #CCC;
}

fieldset {
 border: 2px #D8D8D8 solid;
 padding: 1em;
}

fieldset legend {
 padding: 0 5px;
}

form table tbody th {
 width: 130px;
 text-align: left;
}

form fieldset p {
 margin: 5px 0;
}

form#form-inloggen,
form#form-bestelling-afhandelen,
form#form-import-csv,
form#form-werknemer,
form#form-handelaar,
form#form-handelaar-contact,
form#form-werkgever-contact,
form#form-aanmelden {
 width: 400px;
}

form#form-store-locate {
 width: 355px;
 float: left;
}

form#form-werkgever-contact,
form#form-handelaar-contact {
 float: left;
}

form#form-mail-login {
 width: 255px;
 float: left;
 margin-left: 10px;
}

form#form-store-locate {
 margin-bottom: 10px;
}

table#bestelling-werknemer,
table#bestelling-gegevens {
 width: 300px;
 margin-bottom: 10px;
 float: left;
}

table#bestelling-gegevens {
 margin-right: 15px;
}

.col-checkbox {
 width: 20px;
}

/* confirm delete */
div.box-confirm {
 position: absolute;
 border: 2px #AAA solid;
 background-color: #F5F5F5;
 width: 400px;
 padding-bottom: 10px;
}

div.box-confirm h4 {
 margin: 0;
 background-color: #555;
 color: #FFF;
 padding: 5px;
}

div.box-confirm p {
 margin-top: 0;
 padding: 10px 10px 0 10px;
 text-align: center;
}

/* error list */
.error-list {
 width: 350px;
 background: #FFF3F3 url(/gfx/icons/error.png) no-repeat 10px 10px;
 border-top: 1px #FFAFAF solid;
 border-bottom: 1px #FFAFAF solid;
 padding: 10px 10px 10px 40px;
 margin-bottom: 10px;
}

.error-list ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.error-list li {
 margin: 2px 0;
}

/* single error */
p.error {
 width: 350px;
 background: #FFF3F3 url(/gfx/icons/error.png) no-repeat 10px 10px;
 border-top: 1px #FFAFAF solid;
 border-bottom: 1px #FFAFAF solid;
 padding: 10px 10px 10px 40px;
 margin-bottom: 10px;
}

input.error {
 border-color: red;
}

/* single notice */
p.notice {
 width: 450px;
 padding: 10px;
 border-top: 1px #F5CC0C solid;
 border-bottom: 1px #F5CC0C solid;
 background: #FFFDE1 url(/gfx/icons/notice.gif) no-repeat 10px 10px;
 padding-left: 35px;
}

/* google maps */
#map-zoek {
 float: left;
 width: 300px;
 height: 200px;
 margin: 10px 0 10px 10px;
 border: 1px #888 solid;
}

/* sidebar - store locate */
h2#store-locator {
 margin-top: 20px;
 text-align: center;
}

#map-store-locator {
 margin-top: 20px;
 margin-left: 40px;
}

form#sidebar-store-locate fieldset {
 border: 0;
}

form#sidebar-store-locate label {
 color: #008FFF;
 font-weight: bold;
}

form#sidebar-store-locate input[type=text] {
 width: 120px;
}

form#sidebar-store-locate input[type=submit] {
 background-color: #008FFF;
 color: #FFF;
 border-color: #0786E7;
}

object{
    outline:none;
}

#animatie_container {
 width: 253px;
 height: 134px;
}

span.icon-head {
 position: absolute;
 width: 70px;
 height: 80px;
 display: block;
 margin-right: 10px;
 background-repeat: no-repeat;
 background-image: url(/gfx/icons/algemeen.png);
 top:-8px;
}

#content-head {
 position: relative;
 height: 70px;
}

#content-head h2 {
 width: 588px;
 padding: 15px 0 5px 75px;
}

span.aanmelden { background-image: url(/gfx/icons/aanmelden.png); }
span.werknemer--login { background-image: url(/gfx/icons/login.png); }
span.werkgever--login { background-image: url(/gfx/icons/login.png); }
span.handelaar--login { background-image: url(/gfx/icons/login.png); }


span.handelaar--bestellen { background-image: url(/gfx/icons/doe-een-bestelling.png); }
span.handelaar--bestellingen { background-image: url(/gfx/icons/bekijk-bestellingen.png); }
span.werkgever--bestelling { background-image: url(/gfx/icons/bekijk-bestellingen.png); }
span.werkgever--fietsplan { background-image: url(/gfx/icons/fietsplan-bekijken.png); }
span.werkgever--werknemer { background-image: url(/gfx/icons/werknemers.png); }

span.store-locate { background-image: url(/gfx/icons/fietsenhandelaar.png); }

#fietsplannen .col-checkbox {
 width: 25px;
}

#form-bestellen #fietsplannen th {
 background-color: #008FFF;
}

#form-bestellen #fietsplannen div {
 margin: 10px;
}

#form-bestellen #fietsplannen td label {
 display: block;
}

#form-bestellen #fietsplannen td:hover {
 background-color: #CAE9FF;
}

#fs-werkgever,
#fs-contactpersoon,
#fs-uwgegevens,
#fs-handelaar {
 margin-bottom: 10px;
}

/* - sidebar-user List ------------------ */

div#sidebar-user ul{
border-top:1px solid #008fff;
padding:10px 0 0 0;
margin:32px 10px 0 10px;
}

div#sidebar-user li{
list-style:none;
padding:8px 13px 8px 13px;
background-color:#e6e6e6;
border-bottom:1px solid #d0d0d0;
border-right:1px solid #d0d0d0; 
width:205px;
margin:5px 0;
}

div#sidebar-user li:hover{
background-color:#d7d7d7;
border-bottom:1px solid #bcbcbc;
border-right:1px solid #bcbcbc;
}

div#sidebar-user li.active{
background-color:#008fff;
border-bottom:1px solid #0075d0;
border-right:1px solid #0075d0; 
}

div#sidebar-user li.active a{
color:white;
}

div#sidebar-user li a{
padding:0px 3px 0px 9px;
margin:0px 0px 0px -3px;
color:black;
}

#nieuws-item,
#tips-item {
 margin-bottom: 20px;
}

#faq-items, 
#tips, 
#nieuws-headlines {
 margin: 0 0 20px 0;
 padding: 0;
 list-style: none;
}

#faq-items li, 
#tips li, 
#nieuws-headlines li {
 margin-bottom: 8px;
}

#faq-items a, 
#tips a, 
#nieuws-headlines a {
 color: #000;
 text-decoration: underline;
}

#faq-items a:hover, 
#tips a:hover, 
#nieuws-headlines a:hover {
 text-decoration: none;
}

div#wrap-status {
 padding: 10px 10px 10px 60px;
 margin: 10px 0;
 width: 540px;
}

div#wrap-status span {
 display: block;
 font-size: 20px;
 margin-bottom: 10px;
}

div.status-open {
 border: 2px yellow solid;
 background: lightyellow;
}

div.status-goedgekeurd,
div.status-wordt_voorbereid,
div.status-geleverd,
div.status-contract_ontvangen,
div.facwerkgever_betaald,
div.fachandelaar_betaald {
 border: 2px green solid;
 background: #C5FDC5 url(/gfx/icons/accept-icon-klein.png) no-repeat 10px 10px;
}

div.status-afgekeurd {
 border: 2px red solid;
 background: #FEE2E2;
}

div#wrap-enra-dekking {
 margin-bottom: 15px;
 margin-top: 4px;
 float: left;
 width: 48%;
 margin-left: 2%;
}

p#reden-afgekeurd {
 border: 1px #CCC solid;
 padding: 10px;
}

img.calendarbutton {
 height: 16px;
 vertical-align: baseline;
 margin-left: 5px;
 cursor: pointer;
}