@import url('forms.css');

/* Body
----------------------------------------------------------------------------------------------------*/
body {
    background: #fff url(../img/backgrounds/bg.gif) no-repeat center 74px;
	margin: 0;
}

body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS',tahoma,arial,verdana,sans-serif;
}

/* Container
----------------------------------------------------------------------------------------------------*/
.container {
	text-align: left;
	position: relative;
	font-size: 11px;
    line-height: 14px;
}

/* Header
----------------------------------------------------------------------------------------------------*/
#header {
    height: 92px;
    position: relative;
    padding-bottom: 4px;
    background-color: #fff;
}

    .header h1 {
        float: left;
    	font-size: 10px;
    	line-height: 10px;
    	margin: 0;
    	padding: 14px 0 0 0;
    }

        .header h1 a {
        	width: 200px;
        	height: 48px;
        	padding: 0;
        	background: url(../img/general/logo.png) no-repeat;
        	text-decoration: none;
        	display: block;
        }

            .header h1 a span {
            	visibility: hidden;
            }

    .header .fade {
        width: 110px;
        height: 74px;
        position: absolute;
        top: 0;
        left: 200px;
        z-index: 50;
        background: url(../img/backgrounds/bg-fade.png) no-repeat top left;
    }

    .header .visual {
        float: left;
        width: 740px;
        height: 74px;
        text-align: right;
        overflow: hidden;
    }

    .header .nav {
        float: left;
        width: 100%;
        background-color: #8cc63f;
        height: 18px;
    }

        .header .nav ul {
            float: right;
            list-style: none;
            margin: 0;
            padding: 0;
            line-height: 18px;
            font-weight: bold;
        }

        .header .nav ul li {
            float: left;
            padding: 0 12px;
            background: url(../img/backgrounds/bg-nav-li.gif) no-repeat left 4px;
        }

            .header .nav ul li.first {
                background: none;
            }

        .header .nav ul li a {
            color: #fff;
            text-decoration: none;
        }

            .header .nav ul li a:hover {
                color: #dbeaf5;
                text-decoration: none;
            }

/* Navigation
----------------------------------------------------------------------------------------------------*/

#shopnav {
}

.shopnav {
    color: #fff;
}

    .shopnav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

        .shopnav ul li {
            float: left;
        }

            .shopnav ul li a, .shopnav h3 {
                display: block;
                width: 140px;
                margin: 10px -10px 10px -10px;
                padding: 0 0 0 20px;
                background-color: #8cc63f;
                color: #fff;
                text-transform: uppercase;
                text-decoration: none;
                font-size: 11px;
                font-weight: bold;
                line-height: 18px;
            }
                .shopnav ul li.first a {
                    margin-top: 0px;
                }

                .shopnav ul ul li a {
                    width: 131px;
                    margin: 0;
                    padding: 0 0 0 10px;
                    background: none;
                    text-transform: none;
                    line-height: 16px;
                }

                    .shopnav ul ul li a:hover {
                        background-color: #dbeaf5;
                        color: #0f75bc;
                    }

                    .shopnav ul ul ul li a {
                        width: 116px;
                        padding: 0 0 0 25px;
                        font-weight: normal;
                        background-color: #ececec;
                        color: #0f75bc;
                    }

                        .shopnav ul ul ul li a:hover {
                            background-color: #dbeaf5;
                        }

        .shopnav .search input {
            margin-left: 10px;
            padding: 0 0 0 2px;
            width: 86px;
            color: #555555;
            height: 22px;
            line-height: 22px;
            border: 0;
        }

        .shopnav .search .button {
            width: 26px;
            background-color: #8cc63f;
            color: #fff;
            margin-left: 2px;
        }

#sitenav {
}

.sitenav {
    color: #0f75bc;
    text-align: right;
}

    .sitenav h3 {
        display: block;
        width: 140px;
        margin: 0px -10px 10px -10px;
        padding: 0 20px 0 0;
        background-color: #8cc63f;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 11px;
        font-weight: bold;
        line-height: 18px;
    }

        .sitenav h3 a, .sitenav h3 a:hover {
            color: #fff;
            text-decoration: none;
        }

    .sitenav p {
        margin: 12px 0 16px 0;
        padding: 0 10px;
    }

    .sitenav a {
        color: #547b20;
        text-decoration: none;
    }

        .sitenav a:hover {
            color: #547b20;
        }

    .sitenav table.minicart {
        width: 100%;
        margin: 0;
        padding: 0 10px 0 6px;
    }
        .sitenav table.minicart td {
            padding: 0;
        }

    .sitenav ul {
        list-style: none;
        margin: 0 0 10px 0;
        padding: 0;
    }

        .sitenav ul li {

        }

            .sitenav ul li a {
                display: block;
                width: 131px;
                margin: 0;
                padding: 0 10px 0 0;
                color: #0f75bc;
                text-decoration: none;
                line-height: 16px;
            }

                .sitenav ul li a:hover {
                    background-color: #0f75bc;
                    color: #fff;
                }

    .sitenav .offer-visual {
        position: relative;
        width: 100%;
        text-align: center;
        background-color: #fff;
    }

        .offer-visual .pricetag {
            position: absolute;
            bottom: -15px;
            right: 3px;
            z-index: 20;
            width: 53px;
            height: 41px;
            padding: 10px 0 0 12px;
            background: url(../img/backgrounds/bg-productlist-offer.png) no-repeat top left;
            text-align: left;
            font-size: 11px;
        }


/* Content
----------------------------------------------------------------------------------------------------*/

#content {
}

.content {
    color: #000;
}

    .content .crumpath {
        width: 100%;
        height: 18px;
        background-color: #e4f2d3;
        font-size: 10px;
        line-height: 18px;
        text-indent: 10px;
        margin: 0 0 10px 0;
    }

        .crumpath a {
            color: #5b5b5b;
            text-decoration: none;
        }

    .content p, .content ul {
        padding: 0 10px;
    }

    .content h2 {
        padding: 0 10px;
        height: 24px;
        background-color: #c4d7e8;
        color: #0f75bc;
        font-size: 12px;
        font-weight: bold;
        line-height: 24px;
        margin: 0 0 10px 0;
    }

    .content .productitem {
        width: 140px;
        height: 200px;
        position: relative;
        text-align: center;
    }

        .content .productitem .productimage {
            position: absolute;
            bottom: 55px;
            left: 0;
            text-align: center;
            z-index: 100;
        }

        .content .productitem p {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 140px;
            height: 36px;
            margin: 4px -10px 0 -10px;
            padding: 10px 10px 7px 10px;
            background: url(../img/backgrounds/bg-content-products.gif) repeat-x top left;
            text-align: right;
        }

            .content .productitem p.special {
                padding-top: 22px;
                height: 24px;
            }

            .content .productitem.alpha p {
                margin-left: 0;
                padding-left: 0;
            }

            .content .productitem.omega p {
                margin-right: 0;
                padding-right: 10px;
                width: 130px;
            }

        .productitem a {
            color: #0f75bc;
            text-decoration: none;
        }

        .productitem a.order {
            color: #547b20;
        }

        .productitem .offer-visual .pricetag {
            bottom: -25px;
        }

        .pricetag a, .pricetag a:hover {
            color: #fff;
            text-decoration: none;
        }

            .pricetag span {
                display: block;
                font-size: 13px;
            }

    .content .productinfo h2.name {
        text-transform: uppercase;
    }

        .content .productinfo h2.name span {
            float: right;
            text-transform: none;
            font-size: 11px;
        }

    .productdetails {
        position: relative;
        height: 220px;
        padding: 0 0 44px 0;
        background: url(../img/backgrounds/bg-content-productdetails.gif) repeat-x bottom left;
    }

        .productdetails .visuals {
            position: relative;
            height: 220px;
        }
            .productdetails .visual {
                width: 200px;
                float: left;
                text-align: right;
                position: absolute;
                bottom: 0;
                left: 0;
            }

            .productdetails .thumbs {
                width: 100px;
                float: left;
                text-align: left;
                position: absolute;
                bottom: 0;
                left: 200px;
            }

            .productdetails .zoom {
                width: 38px;
                height: 37px;
                position: absolute;
                bottom: -28px;
                left: 185px;
                z-index: 10;
            }

        .productdetails .order {
            position: absolute;
            right: 0;
            bottom: 34px;
        }

            .order .option {
                position: relative;
                padding: 3px 0 0 20px;
            }

                .order .option span {
                    display: block;
                    color: #0f75bc;
                    font-size: 10px;
                    font-weight: bold;
                    padding: 0 0 2px 0;
                }

            .order p.eta {
                padding: 5px 10px 0 0;
                margin: 0;
                color: #8CC63F;
                text-align: right;
            }

            .order p.price {
                padding: 10px 10px 0 0;
                margin: 0 0 10px 0;
                color: #0f75bc;
                font-weight: bold;
                text-align: right;
            }

                .order p.price span.old {
                    color: #bc3c0f;
                    text-decoration: line-through;
                }

                .order p.price span.new {
                    font-size: 24px;
                }

            .order p.click {
                padding: 0 10px 0 0;
                text-align: right;
            }

/* Winkelmandje
----------------------------------------------------------------------------------------------------*/

table.cart {
    margin-bottom: 16px;
    background-color: #ECECEC;
    border: 4px solid #ECECEC;
    clear: both;
}

table.cart td img {
    vertical-align: bottom;
}

table.cart tr.tablehead th, table.cart td {
    text-align: left;
}

table.cart tr.tablehead th {
    height: 26px;
    vertical-align: top;
    border-bottom: 1px dotted #181818;
    font-weight: bold;
}

table.cart td.qt {
    width: 48px;
    padding: 0;
}

    table.cart td.qt input {
        width: 18px;
    }

table.cart td.del {
    width: 24px;
    text-align: left;
}

table.cart td.productimg {

    text-align: center;
}

table.cart td.productimg img {
    border: 1px solid #bbbbbb;
    background-color: #fff;
    padding: 3px;
}

table.cart td.price, table.cart td.total {
    width: 56px;
}

table.cart td.total {
    font-weight: bold;
}

table.cart td.type {
    width: 16px;
    padding-right: 2px;
    font-weight: bold;
    color: #ff0000;
}

table.cart tr.totals td, table.cart tr.subtext td {
    text-align: right;
}

table.cart tr.totals th, table.cart tr.totals td {
    height: 26px;
    border-top: 1px dotted #181818;
}

table.cart tr.option td {
    height: 26px;
}

    table.cart tr.option td select {
        width: 260px;
    }

table.cart select {
    font-size: 11px;
    width: 180px;
}

table.cart td.right {
    text-align: right;
}

/* Checkout pagina
----------------------------------------------------------------------------------------------------*/

table.checkout.left {
    float: left;
    width: 49%;
}

table.checkout.right {
    float: right;
    width: 49%;
}

table.checkout td, table.checkout th {
    padding-left: 10px;
    line-height: 16px;
}

    table.checkout td.right {
        text-align: right;
    }

table.checkout th {
    text-align: left;
    font-weight: bold;
}

table.checkout label {
    font-weight: normal;
}

table.checkout .large {
    width: 300px;
}

table.checkout .normal {
    width: 132px;
}

table.checkout .small {
    width: 42px;
}

table.checkout .medium {
    width: 84px;
}

table.checkout textarea.expanding {
    width: 99%;
    line-height: 16px;
    min-height: 48px;
}

/* Zoeken
----------------------------------------------------------------------------------------------------*/

.hide_result {
    display: none;
}

.show_result li.margin {
    list-style-type: none;
    margin-top: 8px;
}

.show_result, .hide_result {
    font-size: 11px;
}

/* Account
----------------------------------------------------------------------------------------------------*/

table#account-data {
    border-collapse: collapse;
    font-size: 11px;
}

    table#account-data th {
        width: 100%;
        padding: 0 10px;
        height: 24px;
        background-color: #c4d7e8;
        color: #0f75bc;
        font-size: 12px;
        font-weight: bold;
        line-height: 24px;
        margin: 0 0 10px 0;
    }

    table#account-data td.data {
        background-color: #ECECEC;
        padding-left: 6px;
    }

/* Footer
----------------------------------------------------------------------------------------------------*/

#footer {
}

    .sitemap {
        background-color: #8cc63f;
    }

        .sitemap ul {
            margin: 15px 0 0 5px;
            padding: 0;
            list-style: none;
        }

            .sitemap ul li a, .sitemap ul li a:hover {
                color: #0f75bc;
                font-weight: bold;
                text-decoration: none;
                text-transform: uppercase;
            }

        .sitemap ul ul {
            margin: 0 0 10px 0;
        }

            .sitemap ul ul li a, .sitemap ul ul li a:hover {
                color: #fff;
                font-weight: normal;
                text-decoration: none;
                text-transform: none;
            }

/* Tooltip help
----------------------------------------------------------------------------------------------------*/

.helpicon {
    float: left;
}

.helpbox {
    position: absolute;
    top: -5000px;
    left: 0px;
    padding: 2px 2px 2px 28px;
    visibility: hidden;
    border: 1px solid #F0DC7A;
    z-index: 100;
    background: #FFFFCC url(../img/general/icon-text.gif) no-repeat 4px 4px;
    width: 200px;
    min-height: 30px;
    text-align: left;
    font-weight: normal;
    font-size: 11px;
}

    .helpbox span {
        color: #ff0000;
    }