@import url('../smoothbox.css');
@import url('../resetSettings.css');
@import url('../standardSettings.css');

/* -----------------------------------*/
/* ------->>> BASIC LAYOUT <<<--------*/
/* -----------------------------------*/
/* BG Color linker menu: #ffffff */
/* BG Color boven menu:  #ccd5df */ 
/* Text Color boven menu: #ccd5df */
/* Text Color linker menu: #012b5d */
:root
{
 overflow-y:scroll;
}
body, html, form
{
    height:100%;
    width:100%;
    background-color:#FFFFFF;   
}
/* LAY OUT BASIS */ 
.fullHeight
{
    margin:0 auto;
    width:100%;
}
.wrap
{
    margin:0 auto;
    width:100%;
    height:100%;
}
.middleColumn
{
    width:959px;
    background-image:url(../../images/klant/rouw-vught/bg.jpg);     
    background-repeat:repeat-y; 
}
.leftBgColumn
{
    background-color:#fff;
    background-image:url(../../images/bg-LeftColumn.gif);   
    background-position:right;
    background-repeat:repeat-y;
    border-right:1px solid #cccccc;
}
.rightBgColumn
{
    background-color:#fff;  
    background-image:url(../../images/bg-RightColumn.gif);  
    background-position:left;
    background-repeat:repeat-y; 
    border-left:1px solid #cccccc;
}
.logoCell
{
    width:240px;
    height:72px;
    background-color:#ffffff;
    font-size:0;
    background-image:url(../../images/klant/rouw-vught/logo.png);    
    background-repeat: no-repeat;
    background-position: 40%;
}
.topNavigationCell
{
    width:714px; /* 719 - 5px padding */
    background-color:#FFFFFF;
    padding-right:5px;
}

/* SEARCHBOX */
.searchBox
{
    float:right;
    height:27px; /* -- padding */
    padding-top:5px;
    padding-left:2px;
    border-bottom: 1px dotted #cccccc;
    color:#000000;
}
.searchBox .input
{
    width:178px;
    margin-left:16px;
    margin-right:5px;   
}
/* NAVIGATION TAB STRIP */
.navigationTabStrip
{
    margin-top:41px;
}
.navigationTabStrip a
{
    float:left;
    display:block;
    padding:10px;
    color:#000000;
    text-decoration:none;
}
.navigationTabStrip a:hover
{
    color: #FFFFFF;
    background:#000000;
    text-decoration:none;   
}
.navigationTabStrip a.active
{
    background-color:#000000;
    font-weight:bold;
    text-decoration:none;   
    color:#FFFFFF;
}
/* NAVIGATION MENU */
.navigationMenu
{
    background-color:#ffffff;
    padding:0 5px 15px 5px;
    color:#000000;
}
.navigationMenu .title
{
    padding:10px 0px 10px 5px;
    border-bottom: 1px dotted #000000;      
}
.navigationMenu a
{
    display:block;
    padding:3px 5px 2px 5px;    
    color:#000000;  
    text-decoration:none;
}

.navigationMenu a.heading, .navigationMenu strong
{
    margin-top:10px;
    display:block;
    font-weight:bold;
}
.navigationMenu a.active, .navigationMenu a:hover
{
    background-color:#000000;   
    color:#ffffff;
    text-decoration:none;   
}
/* CONTENT AREA */
.contentArea
{
    padding-left:5px;
    color:#000000;
    width:714px; /* 719 - 5px padding */    
}
.contentArea .breadCrumb 
{
    padding:10px 0px 10px 5px;
    border-bottom: 1px dotted #cccccc;      
    margin-bottom:5px;
    margin-right:5px;
    /* RESPONSIVE CHANGE */
    /* WAS : height:11px;   */
    height:35px;
}
.contentArea .breadCrumb .left, .contentArea .pager .left
{
    float:left;
}
.contentArea .breadCrumb .right, .contentArea .pager .right
{
    float:right;
}
.contentArea .pager .left, .contentArea .pager .right
{
    padding-top:4px;
    padding-bottom:4px;
}
.contentArea .pager .right
{
    padding-right:5px;
}
.contentArea .breadCrumb a, .contentArea .pager a
{
    color:#000000;
    text-decoration:underline;
    margin:0 2px 0 2px;
}
.contentArea .breadCrumb span, .contentArea .pager span
{
    font-weight:bold;
}
.productPager td
{
    padding-left:2px;
    padding-right:3px;
}
/* PRODUCT LAYOUT SHARED */
.productBig .input, .productNoPicture .input, .productSmall .input, .productDetail .input
{
    width:25px;
    height:15px; /* overwritten in IE specific in combi with padding top */
    text-align:right;
    padding-right:2px;
}
.productBig .button, .productNoPicture .button, .productSmall .button, .productDetail .button
{
    width:185px;
    height:20px;
}
.productBig select, .productNoPicture select, .productSmall select, .productDetail select
{
    width:220px;
    margin-top:5px;
    margin-bottom:4px;
}
.productBig img, .productSmall img , .productDetail img
{
    border:1px solid #cccccc;
}
.productBigLineHorizontal, .productSmallLineHorizontal
{
    float:left;
    margin:5px 5px 5px 0;
    width:709px;
    border-bottom:1px dotted #cccccc;
}
/* CONTENT LAYOUT BIG */
.productBig
{
    float:left;
    width:219px; /* -- padding */
    height:238px;
    padding:5px;    
    background-color:#FFFFFF;
    color:#000000;
}
.productBig div.title
{
    padding:5px;
    margin-bottom:5px;
    font-weight:bold;
}
.productBig a
{
    display:block;
    color:#000000;
    text-decoration:none;
    background-image:url(../../images/icon-info.gif);
    background-position:top right;
    background-repeat:no-repeat;
    text-decoration:none;   
}
.productBig a:hover
{
    background-image:url(../../images/icon-info-active.gif);
    text-decoration:none;
}
.productBigLine
{
    float:left;
    margin:0 5px 0 5px;
    height:248px;
    border-right:1px dotted #cccccc;
}

/* PRODUCT LAYOUT NoPicture */
.productNoPicture
{
    width:709px;
    /* RESPONSIVE CHANGE */
    /* ADDED : max-width: 92vw; */
    max-width: 92vw;
}
.productNoPicture td
{
    background-color:#cccccc;
    padding-top:5px; /* padding bottom is arranged by select */     
}
.productNoPicture tr.alt-row td
{
    background-color:#ffffff;   
}
.productNoPicture .name
{
    padding:0;  
}
.productNoPicture .name a div
{
    cursor:pointer;
    color:#000000;
    text-decoration:none;
    background-image:url(../../images/icon-info-noPicture.gif);
    background-position:top right;
    background-repeat:no-repeat;
    height:19px;
    padding:10px 0px 0px 10px;
    font-weight:bold;
    width:246px;
}
.productNoPicture .name a:hover div
{
    background-image:url(../../images/icon-info-noPicture-active.gif);  
}
.productNoPicture .input
{
    margin:0;
    margin-left:4px;
    width:21px;
}
.productNoPicture .button
{
    margin:0;
    margin-left:5px;
    position:relative;
    top:-2px;   /* also in IE specific */
    float:right;
}
.productNoPicture select
{
    margin:0;
    margin-left:5px;
    margin-bottom:4px;
}
/* Product SMALL */
.productSmall
{
    float:left;
    width:344px; /* -- padding */
    height:69px; /* -- padding */
    padding:5px;    
    padding-left:0px; /* left padding is in the TD of the table */
    background-color:#cccccc;
    color:#595959;
}
.productSmall td
{
    padding-left:5px;
}
.productSmall div.title
{
    padding:5px;
    font-weight:bold;
}
.productSmall a
{
    display:block;
    color:#000000;
    text-decoration:none;
    background-image:url(../../images/icon-info.gif);
    background-position:top right;
    background-repeat:no-repeat;
    text-decoration:none;   
}
.productSmall a:hover
{
    background-image:url(../../images/icon-info-active.gif);
    text-decoration:none;
}
.productSmallLine
{
    float:left;
    margin:0 5px 0 5px;
    height:79px;
    border-right:1px dotted #b2b2b2;
}
.productSmall .button
{
    width:208px;
}
.productSmall select
{
    width:242px;
    margin-top:4px;
    margin-bottom:3px; /* also in IE Specific */
}
/* ProductDetail */
.productDetail td
{
    background-color:#eeeeee;   
}
.productDetail .productSpecification 
{
    background-color:#FFFFFF;
}
.productDetail .left
{
    width:99px; /* -- padding */
    text-align:right;
    padding-right:10px;
    padding-top:10px;   
    padding-bottom:10px;    
}
.productDetail .right
{
    width:99px; /* -- padding */
    text-align:right;
    padding-right:10px;
    padding-top:10px;
}
.productDetail .lineLeft
{
    border-left:5px solid #ffffff;  
    padding-top:10px;
    padding-left:10px;
}
.productDetail .lineLeft.withImage
{
    padding-left:5px;
    padding-right:5px;
    padding-top:0px;
}
.productDetail .lineLeft.withControls
{
    padding-left:5px;
    padding-right:5px;
    padding-top:5px;
}
.productDetail .lineRight
{
    width:5px;
    background-color:#FFFFFF;
    border-right:1px dotted #b2b2b2;    
}
.productDetail .lineRightText
{
    width:5px;
    border-left:1px dotted #b2b2b2; 
}
.productDetail .text
{
    width:339px;
    line-height:16px;
    padding-bottom:10px;
}
.productDetail .pricePerItem
{
    font-size:18px;
    padding-right:5px;
}
.productDetail hr
{   
    margin:0;
    padding:0;
    height:1px;
    color:#ffffff;
    background-color:#FFFFFF;
    padding-top:5px;
    border:0;
    border-bottom:1px dotted #b2b2b2;       
}
.productDetail .last
{
    padding-bottom:5px; 
}
.productDetail .horizontalDividerLeft
{
    background-color:#FFFFFF;
    height:11px; /* also in IE specific */
}
.productDetail .horizontalDividerRight
{
    background-color:#FFFFFF;
    height:11px; /* also in IE specific */
    padding-left:5px;
}

.productDetail .horizontalDividerFullWitdh
{
    background-color:#FFFFFF;
    height:11px;
}
/* PROBABLY TO COMPLEX
.productDetail .horizontalDividerLeft div
{
    margin-top:5px;
    width:109px;
    border-bottom:1px dotted #b2b2b2;
}
.productDetail .horizontalDividerRight div
{
    margin-top:5px;
    margin-left:5px;    
    width:229px;
    border-bottom:1px dotted #b2b2b2;
}
.productDetail .horizontalDividerFullWitdh div
{
    margin-top:5px;
    width:349px;
    border-bottom:1px dotted #b2b2b2;
}
*/
.productDetail .button
{
    margin-left:5px;
    width:180px;
}
.productDetail select
{
    width:219px;
    margin-top:0px;
    margin-bottom:5px; /* also in IE Specific */
}
/* OTHER */
a.ExtraVestigingLink
{
    display:block;
    position:relative;
    top:2px;
    color:#595959;
    padding-top:5px;
    padding-bottom:7px;
    margin-right:10px;
    margin-bottom:5px;
    /* RESPONSIVE CHANGE */
    /* WAS : height:14px;   */
    height:38px;
    text-decoration:none;
    background-image:url(../../images/extravestiging-nl.gif);
    background-position:top right;
    background-repeat:no-repeat;
    text-decoration:none;   
}
a:hover.ExtraVestigingLink
{
    background-image:url(../../images/extravestiging-nl-active.gif);
}
.footer
{
    vertical-align:bottom;
    border-bottom:1px solid #cccccc;
}
/* FORM ELEMENTS */
input.input
{
    height:15px; /* displays as 19px in ff */
}
input.button
{
    position:relative;
    top:1px;
    height:19px; /* displays as 18px in ff */
}

/* ********************* */
/* START RESPONSIVE CODE */
/* ********************* */

#menu-toggle {
    display: none;
}

/* START MEDIA 0px - 767px */
@media screen and ( max-width: 767px ) {
    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }

    td.contentArea {
    overflow-x: scroll;
}

    body, html, form
{
    background-color:#FFFFFF;   
}

    /* Fontsize 12 */
    .tbQuantity {
        font-size: 12px;
    }
    .orderOverview td div {
        font-size: 12px;
    }

    /* Bigger login font*/
    html body.loginPage form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell td.navigationMenu div#ctl00_SignOn1_panelLogin table.loginTable tbody tr td input#ctl00_SignOn1_tbLogin.input,
    html body.loginPage form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell td.navigationMenu div#ctl00_SignOn1_panelLogin table.loginTable tbody tr td input#ctl00_SignOn1_tbPassword.input
    {
        font-size: 16px;
        height: 25px;
        margin-top: -5px;
        width: 250px;
    }
    
    .loginTable td {
        padding-bottom: 5px!important;
        padding-top: 5px!important;
        padding-right: 3px;
        height: 30px!important;
    }

    /* Set the width of the price */
    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea div table.productNoPicture.orderOverview tbody tr.alt-row td.text-right div.lblPrice 
    {
        width: 40px!important;
    }

    /* No bitmaps shown! */
    .leftBgColumn,
    .rightBgColumn {
        display: none;
    }

    .wrap > tbody > tr > .middleColumn {
        width: 90vw;
        margin: 0 auto;
        display: inline-block;
    }

        .middleColumn > table,
        .middleColumn > tbody,
        .middleColumn > tr {
            display: inline-block;
            width: 80vw;
        }

        /** Fix logo height */
        .middleColumn > table > tbody > tr:first-child {
            height: 20px!important;
        }

        .middleColumn {
            background: #ffffff;
        }

            .logoCell {
                display: block;
                width: 100vw;
            }

            /* Adjust this for the cell logo! */
            .logoCell {
                background-position: center!important;
                /* Set the logo of wrapper and background color*/
                background:#FFFFFF url(../../images/klant/rouw-vught/logo-responsive.png) no-repeat; 
                height: 100px;
            }

            /* Order selection area */
            .topNavigationCell {
                display: block;
                width: 100vw;
                /* Adjust this for the background color*/
                background: #FFFFFF;
            }

            .contentArea {
                display: block;
                width: 95vw;
                padding-left: 0px;
            }

            .topNavigationCell {
                height: auto;
            }

                .searchBox {
                    float: none;
                }

                .searchBox .input {
                    margin-left: 0px; 
                }

                /* Put the DDL as far on top as possible! */
                .topNavigationCell select {
                    display: block;
                    width: auto;
                    margin: 2px 0 0;
                }

                .navigationTabStrip {
                    margin-top: 0px;
                }

                .loginPage .navigationTabStrip {
                    margin: 0!important;
                }

            /** Menu */
            #menu-toggle {
                margin-top: -15px;
                display: block;
            }
            .loginPage #menu-toggle {
                display: none!important;
            }

            /* Do not show the label 'orders' */
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.searchBox label {
                display: none;
            }

            /* Set the width of the price */
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea div table.productNoPicture.orderOverview tbody tr.alt-row td.text-right div.lblPrice {
                width: 30px;
            }

            .searchBox
            {
                height:27px; /* -- padding */
                padding-top:0px;
                border-top: 1px dotted #ffffff;
                border-bottom: none;
            }

            /* No padding so the menu is as far on top as possible! */
            .navigationMenu {
                display: block;
                width: 100vw;
                padding: 0 0px 0px 0px;
                line-height: 2px;
                /* Adjust: Menu background */
                background: #000000;
            }

            .navigationTabStrip
            {
                margin-left:0px;    
            }


            /* Menu items */
            .navigationMenu a, .navigationMenu strong, .navigationMenu span, .loginTable td
            {
                color:#FFFFFF;  
            }

            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell td.navigationMenu div#menu-toggle span {
                color: #FFFFFF;
            }

            /* Change the text on the buttons to fit smaller screens! */
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay1 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay1:after {
                content: "MA";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay2 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay2:after {
                content: "DI";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay3 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay3:after {
                content: "WO";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay4 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay4:after {
                content: "DO";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay5 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay5:after {
                content: "VR";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay6 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay6:after {
                content: "ZA";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay7 span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToDay7:after {
                content: "ZO";
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToWeek span {
                display: none;
            }
            html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.topNavigationCell div.navigationTabStrip div#ctl00_panelDayNavigation a#ctl00_hlGoToWeek:after {
                content: "Week";
            }

            #ctl00_panelNavigationMenu,
            #ctl00_SignOn1_panelLoggedIn {
                display: none;
            }
            #ctl00_panelNavigationMenu.open,
            #ctl00_SignOn1_panelLoggedIn.open {
                display: block;
            }

            /* Since the texts are smaller, center alignment is not needed anymore */
            .navigationTabStrip {
                /* text-align: center; */
            }

            .navigationTabStrip a {
                /* Adjust for background Day-menu-items */
                background: #FFFFFF;
                display: inline-block;
                text-align: center;
                float: none;
                color: #000000;
            }

            .contentArea .breadCrumb .right {
                float: none;
                margin-top: 21px;
            }

            .breadCrumb {
                height: 50px!important;
                margin-bottom: 0px!important;
                margin-left: 0px!important;
                /* Adjust this for the background color*/
                background: #FFFFFF;

            }

    /* Buttons were not in 1 line when adding products, this fixes that! */
    .buttons td {
        /* display: block; */
        padding: 0px 0px 0px 0px;
    }

    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea table.productNoPicture.editTable.buttons tbody tr td input#ctl00_content_btSave 
    {
        width: 80px!important;
    }

    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea table.productNoPicture.editTable.buttons tbody tr td input#ctl00_content_btSaveAndReturnToOrder
    {
        width: 170px!important;
    }

    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea table.productNoPicture.editTable.buttons tbody tr td input#ctl00_content_btCancel
    {
        width: 80px!important;
        margin-top: 2px;
}
    }


    /* Product lightbox */
    #TB_window {
        max-width: 90vw!important;
        left: 50%!important;
        margin-left: -45vw!important;
    }

    #ctl00_ddlOrderSelect {
        /* width: 55%!important; */
        float: left;
    }
    /* As far on top as possible */
    #ctl00_btJumpToOrder {
        top: 0px;
        height: 18px;
    }

    .mobile-block {
        float: none!important;
        display: block!important;
    }

    .navigationMenu .title {
        visibility: hidden;
        height: 0px;
    }

    /* Hide the legenda when in mobile modus */
    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea table tbody tr td.mobile-block {
        visibility:hidden;
        height: 0px;
    }

    /* Hide the demotext when in Mobile modus*/
    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea div.demotext {
        visibility: hidden;
        height: 0px;
    }

    #ctl00_content_btSave {
        float: left!important;
        margin-left: -5px!important;
    }

}

/* START MEDIA 768px - 980px */
@media screen and ( min-width: 768px ) and ( max-width: 980px ) {
    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }

    td.contentArea {
    overflow-x: scroll;
}

    /* Set the width of the price */
    html body form#aspnetForm table.wrap tbody tr td.middleColumn table tbody tr td.contentArea div table.productNoPicture.orderOverview tbody tr.alt-row td.text-right div.lblPrice {
        width: 30px;
    }

    .leftBgColumn,
    .rightBgColumn {
        display: none;
    }

    .wrap > tbody > tr > .middleColumn {
        width: 90%;
        margin: 0 auto;
    }

        .middleColumn > table,
        .middleColumn > tbody,
        .middleColumn > tr {
            display: inline-block;
            width: 100vw;
        }

            .logoCell,
            .navigationMenu {
                display: inline-block;
                width: 25vw;
                width: calc( 240px );
                float: left;
            }

            .topNavigationCell,
            .contentArea {
                display: inline-block;
                width: 75vw;
                width: calc( 100vw - 254px );
                float: left;
            }

            /* Edit this for the wrapper height! */
            .topNavigationCell {
                height: 72px;
                height: 192px;
            }

    .productNoPicture {
        width: 75vw;
        width: calc( 100vw - 260px );
    }

    .buttons td {
        display: block;
    }
}