@import url(reset.css);

/***************
    Layout
***************/

html {
    height: 101%;
}

body {
    font-family: "Tahoma", sans-serif;
    font-size: 11px;

    background: #ffffff url(../images/background_menu.png) no-repeat top center;

    color: #009AB1;
    text-align: center;
}
    body.submenu {
        background: #ffffff url(../images/background_submenu.png) no-repeat top center;
    }

#backgroundHeader{
    display: none;
}

#content {
    width: 920px;

    margin-left: auto;
    margin-right: auto;

    padding: 20px 35px 20px 35px;

    text-align: left;
    z-index: 2;
}

#backgroundFooter {
    display: none;
}

.clearer {
    clear: both;
    height: 1px;
}



/***************
    Menu
***************/

ul.menu {
    position: relative;

    overflow: hidden;
    height: 50px;

    margin: -35px 0 0 320px;
    list-style: none;
}
    ul.menu li {
        float: left;
        display: inline;
        margin: 2px 10px 0 0;
    }
    ul.menu li a {
        font-size: 14px;
        padding: 0 0 0 20px;
        background: transparent url(../images/menubutton.gif) no-repeat bottom left;
    }
    ul.menu li a:hover {
        text-decoration: none;
    }
    ul.menu li.searchField {
        float: left;
        height: 22px;
        width: 186px;
        background: transparent url(../images/zoekveld.gif) no-repeat;
        margin: 0 0 0 10px;
        padding: 0 5px 0 0;
    }
    ul.menu li.searchField input {
        height: 20px;
        width: 170px;

        margin: 2px 10px 0 10px;

        color: #009AB1;
        background: none;
        border: none;

        font-family: "Tahoma", sans-serif;
        font-size: 11px;
    }
    ul.menu li.searchButton {
        font-size: 14px;
        margin: -2px 0 0 0;
        padding: 0 0 5px 20px;
        background: transparent url(../images/menubutton.gif) no-repeat 0px 9px;
    }
    ul.menu li.searchButton button {
        height: 22px;

        padding: 0;
        margin: 0;

        background: none;
        border: none;
        color: white;
        font-size: 14px;
    }


/***************
    Hoofdcategorieën
***************/

ul.hoofdcats {
    position: relative;

    width: 840px;
    overflow: hidden;

    margin: 10px auto 20px auto;
    list-style: none;
}
    ul.hoofdcats li {
        position: relative;
        float: left;
        display: inline;

        width: 186px;
        height: 144px;

        margin: 0 15px 15px 0;
    }
    ul.hoofdcats li a { color: white; text-decoration: none; }
    ul.hoofdcats li img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    ul.hoofdcats li h1 {
        position: absolute;
        top: 115px;
        left: 20px;

        margin: 0;
        padding: 0;
        z-index: 100;
    }
    ul.hoofdcats li h1 a,
    ul.hoofdcats li h1 a:hover {
        color: white;
        text-decoration: none;
    }
    /*
    ul.hoofdcats .overlay_inactive {
        position: absolute;
        top: 0;
        left: 0;

        height: 480px;
        width: 790px;

        background: transparent url(../images/overlay_inactive.png) top left repeat;
        z-index: 500;
    }
    ul.hoofdcats .overlay_inactive a {
        position: relative;
        display: block;
        height: 500px;
        width: 100%;
        z-index: 505;
    }
    */

    li.subcat { position: absolute; z-index: 1000; }
    li.hoofdcat_active { position: absolute; z-index: 1000; }

    ul.hoofdcats li.maandmagazine { width: 99px; height: 142px; margin: 5px 5px 0 0; }
    ul.hoofdcats li.maandmagazine h1 { position: absolute; top: 95px; left: 15px; z-index: 100; }

    ul.hoofdcats .zoek_postcode { height: 150px; width: 286px; overflow: hidden; }
    ul.hoofdcats .zoek_postcode .winkel_slideshow { position: relative; top: 6px; left: 101px; z-index: 1; }
    ul.hoofdcats .zoek_postcode h1 { position: absolute; top: 20px; left: 20px; width: 70px; z-index: 100; }
    ul.hoofdcats .zoek_postcode span.blaat { position: absolute; top: 85px; left: 20px; color: white; z-index: 100; }
    ul.hoofdcats .zoek_postcode span.winkel_tekst { position: absolute; top: 105px; left: 110px; width: 160px; color: white; font-size: 14px; font-weight: bold; z-index: 100; }

/***************
    Winkels
***************/

    div.vraag .zoek_postcode { position: relative; height: 150px; width: 286px; overflow: hidden; }
    div.vraag .zoek_postcode .winkel_slideshow { position: relative; top: 6px; left: 101px; z-index: 1; }
    div.vraag .zoek_postcode h1 { position: absolute; top: 20px; left: 20px; width: 70px; z-index: 100; color: white; font-size: 14px; }
    div.vraag .zoek_postcode span.blaat { position: absolute; top: 85px; left: 20px; color: white; z-index: 100; }
    div.vraag .zoek_postcode span.winkel_tekst { position: absolute; top: 105px; left: 110px; color: white; z-index: 100; font-size: 14px; font-weight: bold; width: 160px; }

/***************
    Fonts
***************/

ul li h1 { font-size: 14px; color: white; }
h2 { font-size: 24px; color: #DF0923; margin: 0 0 15px 0; }
p { margin: 0 0 15px 0; }
a { color: #009AB1; text-decoration: underline; }
a:hover { color: #009AB1; text-decoration: underline; }
p.buttonLeft a, p.buttonRight a { font-size: 14px; color: #DF0822; text-decoration: none; }
p.buttonLeft a:hover, p.buttonRight a:hover { text-decoration: none;}
.error { color: red; font-style: italic; }

/***************
    Formulieren
***************/

input {
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    color: #009AB1;
}

#zoek_postcode input {
    position: absolute;
    top: 108px;
    left: 25px;

    width: 50px;
    height: 18px;

    background: none;
    border: none;
    z-index: 100;
}
#zoek_postcode button.zoek {
    position: absolute;
    top: 123px;
    left: 53px;

    color: white;
    background: none;
    border: none;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;

    z-index: 100;
}

#zoek_postcode_producten input {
    position: absolute;
    top: 225px;
    left: 110px;

    width: 90px;
    height: 18px;

    background: none;
    border: none;
    z-index: 100;
}
#zoek_postcode_producten button.zoek {
    position: absolute;
    top: 248px;
    left: 160px;

    color: #009AB1;
    background: none;
    border: none;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;

    z-index: 100;
}

/***************
    Knoppen
***************/

p.buttonLeft { float: left; background: transparent url(../images/contentbutton.gif) bottom left no-repeat; padding: 20px 0 0 25px;}
p.buttonRight { float: right; background: transparent url(../images/contentbutton.gif) bottom left no-repeat; padding: 20px 0 0 25px; }

/***************
    Classes
***************/

.hidden { display: none; }

/***************
    Individuele vraag
***************/

.vraagContainer .foto { float: left; position: relative; width: 532px; height: 412px; z-index: 1; }
.vraagContainer .foto img { position: absolute; top: 0; left: 0; z-index: -1; }
/*.vraagContainer .overlay { width: 532px; height: 412px; z-index: 2; background: url(../images/vraag_overlay.png) top left no-repeat; }*/
.vraagContainer .vraag { float: right; width: 370px; }
.vraagContainer .vraag .button { text-align: right; }

/***************
    Overzicht vragen
***************/

.subcatContainer .vragen { float: left; display: inline; width: 348px; height: 278px; background: transparent url(../images/background_vragen.png) no-repeat top left; margin: 47px 0 0 0; padding: 40px 0 0 40px; overflow: hidden; }
.subcatContainer .vragen h2 { font-size: 23px; font-weight: normal; color: #009AB1;}
.subcatContainer .vragen h3 { font-size: 14px; margin: 0; color: #DF0923; }

.subcatContainer .vragen ul { position: relative; width: 300px; height: 250px; list-style: none; }
.subcatContainer .vragen ul li { border-bottom: 1px solid #D3ECF4; line-height: 18px; margin: 0;}
.subcatContainer .vragen ul li img { margin: 0 5px 0 0; vertical-align: bottom; }
.subcatContainer .vragen ul a,
.subcatContainer .vragen ul a:hover { text-decoration: none; color: #009AB0; }

.subcatContainer .foto { float: right; position: relative; width: 532px; height: 412px; z-index: 1; }
.subcatContainer .foto img { position: absolute; top: 0; left: 0; z-index: -1; }
/*.subcatContainer .overlay { width: 532px; height: 412px; z-index: 2; background: url(../images/vragen_overlay.png) top left no-repeat; }*/

/***************
    Winkels
***************/

.winkelContainer { margin: 10px 0 10px 0; }
.winkelContainer .foto { float: left; position: relative; width: 156px; height: 120px; z-index: 1; }
.winkelContainer .foto img { position: absolute; top: 0; left: 0; z-index: -1; }
/*.winkelContainer .overlay { width: 156px; height: 120px; z-index: 2; background: url(../images/winkel_overlay.png) top left no-repeat; }*/

.winkelContainer .info { float: right; position: relative; width: 761px; height: 120px; background: #D3ECF4 url(../images/background_winkel.png) top left no-repeat; }
.winkelContainer .info .adres { float: left; width: 160px; margin: 15px 0 0 30px; }
.winkelContainer .info .tijden { float: left; width: 200px; margin: 15px 0 0 30px; }
.winkelContainer .info .quote { float: left; width: 200px; margin: 15px 0 0 30px; vertical-align: middle; }

.gezocht_postcode { float: left; position: relative; width: 261px; height: 38px; background: url(../images/background_gezocht.png) top left no-repeat; color: white; padding: 12px 0 0 10px;}
.alle_winkels a, .alle_winkels a:hover { float: right; color: #009AB1; text-decoration: underline; margin: 25px 0 0 0; }
.gezocht_postcode input { position: absolute; top: 10px; left: 135px; height: 19px; width: 54px; margin: 2px 12px 0 0px; color: #009AB1; background: none; border: none; font-family: "Tahoma", sans-serif; font-size: 11px; }
.gezocht_postcode button.zoek {
    position: absolute;
    top: 10px;
    left: 210px;

    color: #ffffff;
    background: none;
    border: none;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;

    z-index: 100;
}

/***************
    Zoeken
***************/

.gezocht { float: left; position: relative; width: 360px; height: 38px; background: url(../images/background_zoeken.png) top left no-repeat; color: white; padding: 12px 0 0 10px;}
.gezocht input { position: absolute; top: 10px; left: 105px; height: 19px; width: 155px; margin: 2px 12px 0 0px; color: #009AB1; background: none; border: none; font-family: "Tahoma", sans-serif; font-size: 11px; }
.gezocht input.submit { width: auto; margin: -2px 0 0 180px; color: white; font-size: 12px; }

/***************
    Producten
***************/

.productContainer { margin: 40px 0 0 0; }
.productContainer .flash { float: left; position: relative; width: 390px; z-index: 1; }
.productContainer .product { float: right; width: 528px; }

div.product .zoek_postcode { position: relative; height: 294px; width: 528px; overflow: hidden; }
div.product .zoek_postcode .winkel_slideshow { position: relative; top: 32px; left: 230px; z-index: 1; }
div.product .zoek_postcode .tekst { position: absolute; top: 40px; left: 30px; z-index: 100; color: #009AB1; width: 190px; }
div.product .zoek_postcode h1 { font-size: 24px; }
div.product .zoek_postcode span.blaat { position: absolute; top: 227px; left: 30px; z-index: 100; }
div.product .zoek_postcode span.winkel_tekst { position: absolute; top: 220px; left: 270px; color: white; z-index: 100; font-size: 14px; font-weight: bold; width: 200px; }
/*div.product .zoek_postcode .overlay_winkels {
        position: absolute;
        top: 0;
        left: 0;

        height: 294px;
        width: 528px;

        background: transparent url(../images/producten_overlay.png) top left no-repeat;
        z-index: 100;
    }*/