@font-face { font-family: 'opensans'; src: url('//www.itsperfect-solutions.com/fonts/opensans/opensans.eot'); src: url('//www.itsperfect-solutions.com/fonts/opensans/opensans.eot?#iefix') format('embedded-opentype'), url('//www.itsperfect-solutions.com/fonts/opensans/opensans.woff') format('woff'), url('//www.itsperfect-solutions.com/fonts/opensans/opensans.ttf') format('truetype'), url('//www.itsperfect-solutions.com/fonts/opensans/opensans.svg#opensans') format('svg'); font-weight: normal; font-style: normal; } @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap'); A:link { text-decoration: none; outline: none; color: #242323; } A:visited { text-decoration: none; outline: none; color: #242323; } html { height: 100%; } body { margin: 0px; border: 0px; height: 100%; font-family: Arial; font-size: 12px; line-height: 21px; color: #242323; overflow: -moz-scrollbars-vertical; background-color: #ffffff; -webkit-text-size-adjust: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } body.preventOverflow { overflow: hidden; } img { border: 0px; } h1 { font-family: opensans; font-weight: normal; font-size: 28px; margin: 10px 0px 15px 0; } h2 { font-family: opensans; font-weight: normal; font-size: 18px; margin: 0px 0px 3px 0px; } h3 { font-family: opensans; font-weight: normal; font-size: 14px; margin: 0px 0px 3px 0px; } span { } hr { position: relative; height: 1px; margin: 20px 0px 20px 0px; padding: 0px; color: #000; background-color: #000; border: none; } ul { list-style: none; margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px; } .hide { display: none !important; } input[type='text'], input[type='password'], input[type='number'], textarea { border-radius: 0; -webkit-border-radius: 0px; -webkit-appearance: none; } .formField { background: #fff; font-family: Arial; font-size: 12px; color: #000; padding: 9px 6px; border: 1px solid #bcbcbc; -webkit-border-radius: 2px !important; border-radius: 2px !important; } .formField.formError, .formError, .formFout { border: 1px solid #c63a4b; background-color: #fcf0f0; } .formField.dateField { width: 70px; } .formField.priceField { width: 45px; } .formField.red { border: 1px solid #b20a0a;} .formField.orange { border: 1px solid #d57629; } .formField.green { border: 1px solid #60b41d; } .formField.sLarge { width: 250px; } .formField.sSmall { width: 100px; } .formField.housenumber, .formField.housenumberExtension { width: 50px; } .formField:disabled { background-color: #f1f1f1; } select.formField { width: 100%; -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url('../images/BG_input_select_pijl.png'); background-size: 27px 22px; background-position: right 12px top 4px; background-repeat: no-repeat; border: 1px solid #ddd; color: #282828; margin: 0; overflow: hidden; padding-top: 6px; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; height: 32px; -webkit-border-radius: 2px; border-radius: 2px; } input[type='checkbox'], input[type='radio'] { margin-right: 7px; } .formButton { background-color: #f6f6f6; color: #000; border: 0; font-size: 12px; font-family: opensans; padding: 0 15px; height: 30px; cursor: pointer; -webkit-appearance: none; -webkit-border-radius: 2px; border-radius: 2px; } .formButton:hover { background-color: #e6e6e6; -webkit-transition: background 0.15s linear; -moz-transition: background 0.15s linear; -ms-transition: background 0.15s linear; -o-transition: background 0.15s linear; transition: background 0.15s linear; } .formButton.cancel { background-color: #fff; color: #a3a3a3; } .formButton.green { background-color: #248f00; color: #fff; } .formButton.red { background-color: #d12b3c; color: #fff; } label.margin { margin-right: 5px; } label.border { padding: 3px 5px; } label.border.selected { background-color: #e4e4e4; border: 1px solid #cfcfcf; -webkit-border-radius: 2px; border-radius: 2px; } .tag { display: inline; padding: 4px 7px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #999; color: #fff; font-size: 10px; white-space: nowrap; } .tag.marginLeft { margin-left: 5px; } .tag.marginRight { margin-right: 5px; } .tag.red { background-color: #d12b3c; } .tag.orange { background-color: #df7632; } .tag.geel { background-color: #e2c023; } .tag.blue { background-color: #0e6a99; } .tag.asuur { background-color: #007FFF; } .tag.green { background-color: #248f00; } .tag.grasgreen { background-color: #00A550; } .tag.purple { background-color: #413a9d; } .tag.bruin { background-color: #6c453c; } .tag.grijs { background-color: #5f5f5f; } .tag.lichtGrijs { background-color: #dadada; color: #5f5f5f; } .tag.pink { background-color: #d73996; } .tag.karmosyn { background-color: #DC143C; } .tag.transparant { background-color: transparent; color: #414141; } .formButton.orderNow { float: right; padding: 10px 17px; height: auto; font-size: 14px; background-color: #248f00; color: #fff; } .formButton.orderNow.grey { background-color: #f0f0f0; color: #6b6b6b;} .formButton.orderNow:disabled { background-color: #ccc; color: #333; } .openDetails { text-decoration: underline; padding-right: 17px; background-image: url('../images/icon-magnifying-glass.png'); background-position: right center; background-repeat: no-repeat; background-size: 11px; cursor: pointer; } .openDetails:hover { margin: -5px; padding: 5px 21px 5px 5px; background-color: #e8e8e8; background-position: right 4px center; -webkit-border-radius: 3px; border-radius: 3px; } .openDetails.grijs { color: #c6c6c6; } .messageContainer, .kaderMelding { position: relative; padding: 15px; margin-bottom: 20px; background-color: #f7f7f7; border: 1px solid #dcdcdc; margin: 5px 0px 5px 0px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .messageContainer h2, .kaderMelding h2 { margin-bottom: 5px; } .clear { display: block; clear: both; } .buttonReset { display: inline-block; height: 27px; width: 27px; cursor: pointer; background-color: #d54b44; background-image: url('../../images/filter/wissen_tag.png'); background-size: 12px; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 2px; -webkit-border-radius: 2px; } .buttonReset:hover { background-color: #dc564f; webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .messageContainer, .kaderMelding { position: relative; padding: 20px 30px 20px 30px; margin-bottom: 15px; border: 2px solid #e6e6e6; background-image: url('../images/BG_kader_melding.jpg'); background-position: bottom; background-repeat: repeat-x; background-color: #fefefe; } .messageContainer h2, .kaderMelding h2 { margin-bottom: 3px; } .messageContainer.succes, .kaderMelding.succes { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; background-image: none; } .messageContainer.succes a, .kaderMelding.succes a { color: #468847; } .messageContainer.info, .kaderMelding.info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; background-image: none; } .messageContainer.info a, .kaderMelding.info a { color: #3a87ad; } .messageContainer.warning, .kaderMelding.warning { color: #c09853; background-color: #fcf8e3; border-color: #faebcc; background-image: none; } .messageContainer.warning a, .kaderMelding.warning a { color: #c09853; } .messageContainer.danger, .kaderMelding.danger { color: #b94a48; background-color: #f2dede; border-color: #ebccd1; background-image: none; } .messageContainer.danger a, .kaderMelding.danger a { color: #b94a48; } /* Help */ .help { position: relative; display: inline-block; margin: 3px 0 0 5px; width: 13px; height: 12px; background-image: url('../../images/BUT_faq_vraagteken.png'); cursor: help; background-size: contain; background-repeat: no-repeat; } .help .container { position: absolute; width: 240px; bottom: 0px; left: -70px; z-index: 20; } .help .container .desc { position: absolute; bottom: 20px; width: 100%; padding: 10px 20px 10px 20px; text-align: center; color: #f1f1f1; font-size: 12px; background-image: url('../../images/BG_faq.png'); -webkit-border-radius: 8px; border-radius: 8px; } .itemToevoegenVerwijderen .help .container .desc { font-size: 12px; } .help .container .arrow { position: absolute; left: 72px; bottom: 14px; width: 11px; height: 6px; background-image: url('../../images/BG_faq_pijl.png'); background-repeat: no-repeat; } /* Responsive styles */ .show-xs { display: none; } /* ---------------------------------------------------------------------------------------- */ /* C O N T A I N E R S */ .containerSite { width: 1350px; margin: 0px auto; background-repeat: repeat-y; text-align: left; } /* U bent hier */ #containerLocation { position: relative; height: 25px; border-bottom: 1px solid #dfdfdf; margin-top: -35px; margin-bottom: 20px; } #containerLocation ul { list-style: none; margin: 0px; padding: 0px; } #containerLocation li { float: left; margin-left: 8px; } #containerLocation li.home a { color: #ff0000; } #containerLocation li:hover a { text-decoration: underline; } /* ---------------------------------------------------------------------------------------- */ /* H E A D E R */ /* Top container with options (shop, account, language etc.) */ #containerOptions { min-height: 32px; background-color: #1f1f1f; font-family: opensans; font-size: 12px; color: #fff; } #containerOptions a { color: #fff; } #containerOptions #left { float: left; width: 50%; } #containerOptions #left .item { float: left; padding: 7px 15px 3px 15px; height: 24px; margin-right: 0; } #containerOptions #left a:first-child li { margin-left: -3px; } #containerOptions:not(.mobileVisible) #left .item.selected { background-color: #3c3c3c; } #containerOptions:not(.mobileVisible) #left .item.submenu:hover { background-color: #fff !important; color: #242323; } #containerOptions #left .item.submenu:hover a { color: #242323; } #containerOptions #left .item.submenu:hover .mouseOver { display: block; } #containerOptions #left .item.submenu .mouseOver { position: absolute; display: none; z-index: 100; margin-top: 6px; background-color: #fff; text-transform: none; -webkit-box-shadow: 0px 1px 5px 0px #e0e0e0; -moz-box-shadow: 0px 1px 5px 0px #e0e0e0; } #containerOptions #left .item.submenu .mouseOver.smallMouseover { padding: 10px 20px; margin-left: -15px; min-width: 150px; } #containerOptions #left .item.submenu .mouseOver.smallMouseover .subitem { margin-top: 5px; } #containerOptions #left .item.submenu .mouseOver.smallMouseover .subitem:hover { text-decoration: underline; } #containerOptions #left .item.submenu .mouseOver.fullMouseover { left: 0; right: 0; width: 100%; box-shadow: 0px 1px 5px 0px #e0e0e0; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .containerSite { padding: 40px 0; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col { position: relative; float: left; width: 200px; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col:first-child { margin-left: 15px; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col .col-header { font-weight: bold; font-size: 13px; text-transform: uppercase; color: #242323; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col .col-items { font-size: 12px; margin-top: 5px; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col .col-items .col-item { margin-top: 5px; color: #585858; } #containerOptions #left .item.submenu .mouseOver.fullMouseover .col .col-items .col-item:hover { text-decoration: underline; } #containerOptions #right { position: relative; float: right; width: 50%; text-align: right; } #containerOptions #right .mobileMenu { display: none; position: absolute; left: 15px; top: 18px; width: 20px; height: 20px; background-image: url('../images/icon-close.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; cursor: pointer; } #containerOptions #right .headerOptionSwitch { position: relative; } #containerOptions #right .headerOptionSwitch #switch { position: relative; float: left; width: 30px; height: 20px; background-image: url('../images/BUT_switch_off.png'); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } #containerOptions #right .headerOptionSwitch #switch.on { background-image: url('../images/BUT_switch_on.png'); } #containerOptions #right .headerOptionSwitch:hover #switch.on { background-image: url('../images/BUT_switch_off.png'); } #containerOptions #right .headerOptionSwitch:hover #switch:not(.on) { background-image: url('../images/BUT_switch_on.png'); } #containerOptions #right .headerOptionSwitch .mouseOverUitleg { display: none; position: absolute; left: -30px; top: 37px; width: 250px; padding: 5px 10px; background-color: #fff; color: #676767 !important; font-size: 11px; border: 1px solid #d2d2d2; z-index: 100; text-align: left; text-transform: none; } #containerOptions #right .headerOptionSwitch:hover .mouseOverUitleg { display: block; } #containerOptions #right .headerOptionSwitch .mouseOverUitleg:after, #containerOptions #right .headerOptionSwitch .mouseOverUitleg:before { bottom: 100%; left: 50px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #containerOptions #right .headerOptionSwitch .mouseOverUitleg:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #fff; border-width: 8px; margin-left: -8px; } #containerOptions #right .headerOptionSwitch .mouseOverUitleg:before { border-color: rgba(229, 229, 229, 0); border-bottom-color: #d2d2d2; border-width: 9px; margin-left: -9px; } #containerOptions #right #pricingSetup { position: relative; float: right; padding: 6px 20px 3px 0; height: 22px; width: 55px; background-image: url('../images/IMG_prijzen_white.png'); background-repeat: no-repeat; background-size: 24px; background-position: 40px 7px; border-right: 1px solid #676767; cursor: pointer; } #containerOptions #right #touchSetup { position: relative; float: right; padding: 6px 20px 3px 0; height: 22px; width: 55px; background-image: url('../images/IMG_ipad_white.png'); background-repeat: no-repeat; background-size: 24px; background-position: 40px 7px; border-right: 1px solid #676767; margin-left: 8px; cursor: pointer; } #containerOptions #right #quotationSetup { position: relative; float: right; padding: 6px 20px 3px 0; height: 22px; width: 55px; background-image: url('../images/IMG_order_offerte_white.png'); background-repeat: no-repeat; background-size: 26px; background-position: 40px 8px; border-right: 1px solid #676767; margin-left: 8px; cursor: pointer; } #containerOptions #right #quotationSetup.selected { background-image: url('../images/IMG_order_offerte_groen.png'); } #containerOptions #right #selectSeason { position: relative; cursor: pointer; float: right; padding: 7px 27px 3px 12px; height: 24px; min-width: 140px; background-image: url('../images/IMG_pijl_onder_wit.png'); background-repeat: no-repeat; background-position: right 11px top 13px; } #containerOptions:not(.mobileVisible) #right #selectSeason:hover { background-color: #fff; color: #242323; background-image: url('../images/IMG_pijl_onder_zwart.png'); } #containerOptions #right #selectSeason:hover .mouseOver { display: block; } #containerOptions #right #selectSeason .mouseOver { position: absolute; z-index: 100; display: none; width: 100%; padding: 10px 20px 15px 20px; right: -1px; top: 34px; text-transform: none; color: #8e8e8e; background-color: #fff; box-shadow: 0px 1px 5px 0px #e0e0e0; } #containerOptions #right #selectSeason .mouseOver .season { color: #292929; text-align: left; margin-top: 8px; } #containerOptions #right #selectSeason .mouseOver .season:hover .title { text-decoration: underline; } #containerOptions #right #selectSeason .mouseOver .season .title { font-weight: bold; font-size: 14px; } #containerOptions #right #selectSeason .mouseOver .season .desc { color: #585858; } #containerOptions #right #selectWarehouse { position: relative; cursor: pointer; float: right; padding: 7px 27px 3px 12px; height: 22px; min-width: 30px; background-image: url('../images/IMG_pijl_onder_wit.png'); background-repeat: no-repeat; background-position: right 11px top 11px; border-right: 1px solid #676767; } #containerOptions #right #selectWarehouse .icon { position: relative; height: 17px; width: 25px; margin-right: 5px; background-image: url('../images/IMG_warehouse_white.png'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } #containerOptions #right #selectWarehouse .icon.red { background-image: url('../images/IMG_warehouse_rood.png'); } #containerOptions #right #selectWarehouse:hover { background-color: #fff; color: #242323; background-image: url('../images/IMG_pijl_onder_zwart.png'); } #containerOptions #right #selectWarehouse:hover .icon:not(.red) { background-image: url('../images/IMG_warehouse_black.png'); } #containerOptions #right #selectWarehouse:hover .mouseOver { display: block; } #containerOptions #right #selectWarehouse .mouseOver { position: absolute; z-index: 100; display: none; width: 200px; right: -1px; top: 32px; text-transform: none; color: #8e8e8e; background-color: #fff; border: 1px solid #d7d7d7; } #containerOptions #right #selectWarehouse .mouseOver ul li { border-top: 1px solid #e0e0e0; padding: 6px 25px 6px 0px; } #containerOptions #right #selectWarehouse .mouseOver ul li:hover { background-color: #f0f0f0; } #containerOptions #right #selectWarehouse .mouseOver ul li.selected { background-color: #1f1f1f; color: #fff; } #containerOptions #right #selectWarehouse .mouseOver ul a:first-child li { border-top: none; } #containerOptions #right #selectWarehouse .mouseOver ul a { color: #292929; } #containerOptions #right #selectWarehouse .mouseOver ul>:first-child li { border-top: 0px; } #containerOptions #right #containerLanguages { position: relative; float: right; padding: 12px 10px 0 12px; height: 20px; border-left: 1px solid #676767; border-right: 1px solid #676767; } #containerOptions:not(.mobileVisible) #right #containerLanguages:hover { background-color: #fff; } #containerOptions #right #containerLanguages:hover ul { display: block; } #containerOptions #right #containerLanguages #currentLanguage img { height: 10px; } #containerOptions #right #containerLanguages ul { position: absolute; z-index: 100; display: none; left: -1px; top: 32px; width: 100%; text-align: center; border: 1px solid #d7d7d7; background-color: #fff; } #containerOptions #right #containerLanguages ul li { border-top: 1px solid #c9c9c9; padding-top: 5px; padding-bottom: 5px; } #containerOptions:not(.mobileVisible) #right #containerLanguages ul li:hover { background-color: #f0f0f0; } #containerOptions #right #containerLanguages ul li img { height: 8px; } #containerOptions #right #containerLanguages ul a:first-child li { border-top: none; } #containerOptions #right #containerLanguages ul li.selected, #containerOptions #containerLanguages ul li:hover { background-color: #f1f1f1; } /* Header: logo, search and shopping bag */ #containerHeader { position: relative; height: 100px; } #containerHeader .mobileMenu { display: none; position: absolute; left: 5px; top: 20px; width: 25px; height: 30px; font-size: 9px; cursor: pointer; } #containerHeader .mobileMenu .line { height: 2px; background-color: #000; margin: 5px 2px 0 2px; } #containerHeader .mobileMenu .line:first-child { margin-top: 0; } #containerHeader .mobileMenu .menu { text-align: center; } #containerHeader #logo { position: relative; float: left; width: 300px; height: 80px; margin-top: 10px; background-position: left 50%; background-size: contain; background-repeat: no-repeat; } #containerHeader #search { position: relative; float: left; width: 30%; height: 27px; margin: 28px 0px 0px 100px; } #containerHeader #search input.formField { font-family: opensans; width: 82%; height: 27px; background-color: #f6f6f6; border: 0; padding: 6px 15% 6px 3%; } #containerHeader #search input.formField:focus { outline: none; } #containerHeader #search .buttonSearch { position: absolute; right: 10px; top: 11px; width: 18px; height: 18px; } #containerHeader #search #containerAutocomplete { position: absolute; left: 0; right: 0; top: 38px; padding: 10px 15px; background-color: #fff; border: 1px solid #f6f6f6; z-index: 20; display: none; } #containerHeader #search #containerAutocomplete .item { position: relative; padding: 5px 0; border-top: 1px solid #f6f6f6; } #containerHeader #search #containerAutocomplete a:first-child .item { border-top: 0; } #containerHeader #search #containerAutocomplete .item .image { position: relative; float: left; width: 50px; } #containerHeader #search #containerAutocomplete .item .image img { width: 100%; } #containerHeader #search #containerAutocomplete .item .itemChararistics { position: relative; float: left; width: calc(100% - 60px); margin-left: 10px; padding-top: 5px; } #containerHeader #search #containerAutocomplete .item .itemChararistics .itemName { font-weight: bold; } #containerHeader #search #containerAutocomplete #noResults { } #containerHeader #statistics { position: relative; display: inline-block; float: right; font-family: opensans; margin: 35px 20px 0 0; width: 25px; height: 25px; background-image: url('../images/BUT_statistics.png'); background-size: contain; cursor: pointer; } #containerHeader #favorites { position: relative; display: inline-block; float: right; font-family: opensans; margin: 35px 40px 0 0; } #containerHeader #favorites.smallMargin { margin-right: 20px; } #containerHeader #favorites #content { position: relative; display: inline-block; float: left; width: 25px; height: 25px; margin-right: 10px; text-align: center; color: #424242; font-size: 14px; line-height: 25px; background-color: #f2f2f2; -webkit-border-radius: 99px; border-radius: 99px; } #containerHeader #favorites #icon { position: relative; float: right; width: 25px; height: 25px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } #containerHeader #favorites #icon.star { background-image: url('../images/IMG_favorite_star.png'); } #containerHeader #favorites #icon.heart { background-image: url('../images/IMG_favorite_heart.png'); } #containerHeader #shoppingbag { position: relative; display: inline-block; float: right; font-family: opensans; margin-top: 28px; padding-bottom: 10px; } #containerHeader #shoppingbag #content { position: relative; display: inline-block; float: left; margin-right: 17px; text-align: right; color: #5d5d5d; line-height: 19px; } #containerHeader #shoppingbag #content #subtotal { font-weight: bold; color: #000; font-size: 16px; } #containerHeader #shoppingbag #icon { position: relative; float: right; width: 30px; height: 30px; margin-top: 4px; background-image: url('../images/IMG_shopping_bag.png'); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } #containerHeader #shoppingbag #icon.offerte { background-image: url('../images/IMG_shopping_bag_offerte.png'); } /* Announcement: account blocked */ #containerAccountBlocked { position: relative; color: #fff; padding: 3px 0 3px 0; font-size: 11px; margin-bottom: 20px; background-color: #c8052c; } #containerAccountBlocked.agent { background-color: #FF731F; } /* ---------------------------------------------------------------------------------------- */ /* M E N U */ #containerMenu { position: relative; font-family: opensans; min-height: 4px; margin-bottom: 20px; background-color: #f6f6f6; } #containerMenu .containerSite .item { float: left; padding: 8px 0; margin-right: 25px; font-size: 15px; } #containerMenu .containerSite .item a { color: #212121; } #containerMenu .containerSite .item.selected, #containerMenu .containerSite .item:hover { font-weight: bold; font-size: 13px; } #containerSubmenu { position: relative; margin-top: 30px; } #containerSubmenu span { font-family: opensans; font-weight: bold; font-size: 15px; } #containerSubmenu ul { margin-top: 10px; } #containerSubmenu ul { font-family: opensans; font-size: 13px; } #containerSubmenu ul li { margin-top: 5px; } #containerSubmenu ul li.selected, #containerSubmenu ul li:hover { color: #248f00; } #containerSubmenu ul li { color: #5b5b5b; } /* ---------------------------------------------------------------------------------------- */ /* T E M P L A T E S */ .templateShop { position: relative; } .templateShop #left { position: relative; float: left; width: 23%; } .templateShop #right { position: relative; float: right; width: 75%; } .templateAccount { position: relative; margin: 10px 30px 0 30px; } .templateAccount #left { position: relative; float: left; width: 165px; } .templateAccount #right { position: relative; float: right; width: calc(100% - 190px); } .templateAccount #right .left50 { position: relative; float: left; width: 48%; } .templateAccount #right .right50 { position: relative; float: right; width: 48%; } .templateOrderDetails { position: relative; } .templateOrderDetails .left { position: relative; float: left; width: 49% } .templateOrderDetails .right { position: relative; float: right; width: 49%; } .templateOrderDetails .itemImage { position: relative; width: 50px; height: 50px; margin: 0px 15px 0px 15px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; -webkit-border-radius: 40px; border-radius: 40px; } /* ---------------------------------------------------------------------------------------- */ /* C O N T E N T */ body#login { background-color: #e9e9e9; } body#stream:not(.backgroundImage) { background-image: url('../../images/BG_login_background.png'); background-repeat: no-repeat; background-position: right -100px; background-size: cover; background-attachment: fixed; } #errorLogin, #invalidTokenError { display: none; } #containerLogin { position: relative; width: 220px; margin-top: 60px; background-color: #fff; padding: 20px 40px 20px 40px; } #containerLogin #logo { height: 100px; background-position: left 50%; background-size: contain; background-repeat: no-repeat; } #containerLogin #comment { font-size: 11px; margin-bottom: 10px; } #containerLogin .containerInput { margin-bottom: 10px; } #containerLogin .containerInput .label { margin-bottom: 3px; font-weight: bold; } #containerLogin .containerInput input { width: 96%; } #containerLogin #linkForgottenPassword { position: relative; float: right; padding-top: 7px; } #containerForgottenPassword { position: relative; width: 300px; margin-top: 60px; background-color: #fff; padding: 20px 40px 20px 40px; } #containerForgottenPassword #logo { height: 100px; max-width: 220px; background-position: left 50%; background-size: contain; background-repeat: no-repeat; } #containerForgottenPassword #comment { font-size: 11px; margin-bottom: 10px; } #containerForgottenPassword .containerInput { margin-bottom: 10px; } #containerForgottenPassword .containerInput .label { margin-bottom: 3px; font-weight: bold; } #containerForgottenPassword .containerInput input { width: 96%; } #containerForgottenPassword #linkLogin { position: relative; float: right; padding-top: 7px; } /* General header */ .contentHeader { text-align: center; width: 60%; margin: 40px auto 30px auto; } .contentHeader.noTopMargin { margin-top: 0; } .contentHeader h1 { font-size: 30px; margin-bottom: 20px; color: #323232; } .contentHeader span { font-family: opensans; font-size: 17px; color: #828282; line-height: 27px; } /* Welkom: headers & banners*/ #containerHomeHeaders { position: relative; } #containerHomeHeaders li { height: 300px; background-position: 50% 50%; background-size: cover; } #containerHomeBanners { position: relative; width: 100%; } #containerHomeBanners .banner { position: relative; float: left; width: 32%; margin-left: 2%; text-align: center; } #containerHomeBanners>:first-child { margin-left: 0%; } #containerHomeBanners .banner .kader { padding: 20px 5px 20px 5px; border: 1px solid #d1d1d1; text-transform: uppercase; } #containerHomeBanners .banner .kader .titel { font-size: 21px; color: #000; margin-bottom: 10px; } #containerHomeBanners .banner .kader .subtitel1 { font-size: 21px; color: #000; margin-bottom: 10px; color: #606060; } #containerHomeBanners .banner .kader .subtitel2 { font-size: 12px; color: #000; padding: 5px 10px 5px 10px; } #containerHomeBanners .banner .kader .subtitel2.button { display: inline-block; color: #fff; background-color: #c9c9c9; cursor: default; } /* Container select season */ #containerSelectSeason { position: relative; font-family: opensans; } #containerSelectSeason .containerSeason { position: relative; float: left; width: 49%; margin: 0px 2% 25px 0; color: #666; background-color: #f9f9f9; } #containerSelectSeason .containerSeason .season { padding: 15px; -webkit-border-radius: 2px; border-radius: 2px; } #containerSelectSeason a:nth-child(odd) .containerSeason { margin-right: 0; } #containerSelectSeason .containerSeason .season .icon { position: relative; float: left; width: 70px; height: 60px; background-color: #e6e6e6; text-align: center; } #containerSelectSeason .containerSeason .season .icon .type { font-size: 30px; padding-top: 12px; } #containerSelectSeason .containerSeason .season .icon .year { font-size: 17px; } #containerSelectSeason .containerSeason.stock .season .icon .type { font-size: 15px; padding-top: 9px; } #containerSelectSeason .containerSeason.stock .season .icon .year { font-size: 15px; } #containerSelectSeason .containerSeason .season .info { position: relative; float: left; width: calc(100% - 110px); margin-left: 20px; padding-top: 10px; } #containerSelectSeason .containerSeason .season .info .title { font-weight: bold; font-size: 16px; text-transform: uppercase; color: #2f2f2f; } #containerSelectSeason .containerSeason:hover .season .icon { background-color: #d8d8d8; } #containerSelectSeason .containerSeason:hover { background: #fcfcfc; } /* Container select customer */ #containerSelectCustomer .formButton { padding-top: 4px; padding-bottom: 4px; } #containerSelectCustomer .containerSearch td:last-child { text-align: right; } #containerSelectCustomer .containerSearch .buttonDisplayType { display: inline-block; margin-right: 5px; padding: 1px 7px 0px 7px; background-color: #ececec; border: 1px solid #e8e8e8; cursor: pointer; color: #4a4a4a; } #containerSelectCustomer .containerSearch .buttonDisplayType.selected, #containerSelectCustomer .containerSearch .buttonDisplayType:hover { background-color: #d1d1d1; border: 1px solid #d1d1d1; } #containerSelectCustomer #containerMap { float: left; width: 48%; } #containerSelectCustomer #containerMap #map { height: 500px; } #containerSelectCustomer #customerDetails { float: right; width: 50%; } #containerSelectCustomer .overview tbody .buttonDetails { text-align: right; } /* Container agent: add customer */ #containerAgentAddCustomer { position: relative; } #containerAgentAddCustomer .left { position: relative; float: left; width: 48%; } #containerAgentAddCustomer .right { position: relative; float: right; width: 48%; } #containerAgentAddCustomer .containerCustomerDetails { padding: 25px; background-color: #fbfbfb; margin-bottom: 20px; } #containerAgentAddCustomer .containerCustomerDetails .detailsHeader th { border-bottom: 1px solid #dadada; } #containerAgentAddCustomer .containerCustomerDetails .formField.sNormal { width: 300px; } /* General overview table */ table.overview { position: relative; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .overview thead, .overview tr.header { font-family: opensans; font-size: 12px; font-weight: bold; color: #131313; line-height: 25px; background-color: #f7f7f7; } .overview thead td, .overview tr.header th { padding: 7px 0 7px 3px; } .overview thead td:first-child, .overview tr.header th:first-child { padding-left: 8px; } .overview tbody tr td { font-family: opensans; color: #3d3d3d; } .overview:not(.noHover) tbody tr:hover { background-color: #fafafa; } .overview:not(.noHover) tbody tr:hover .formButton:not(.green) { background-color: #e3e3e3; } .overview tbody tr td { border-bottom: 1px solid #f7f7f7; height: 33px; } .overview tbody tr td:first-child { padding-left: 8px; } .overview tbody tr td.nonactive, .overview tbody tr td.nonactive a { color: #bb0e0e; } .overview tbody tr td .formButton { cursor: pointer; } .downloadItems .downloadItem { background-size: 15px; background-position: 0 3px; background-repeat: no-repeat; padding-left: 22px; display: inline-block; margin-right: 15px; cursor: pointer; } .downloadItems .downloadItem.pdf { background-image: url('../images/icon-pdf.png'); } .downloadItems .downloadItem.xls { background-image: url('../images/icon-xls.png'); } .downloadItems .downloadItem.jpg { background-image: url('../images/icon-jpg.png'); } .downloadItems .downloadItem:hover { text-decoration: underline; } /* Shop: submenu left */ #submenuShop { position: relative; font-family: opensans; } #submenuShop #mobileMenuClose { display: none; position: fixed; right: 18px; top: 18px; width: 20px; height: 20px; background-image: url('../images/icon-close.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; cursor: pointer; } #submenuShop .containerActiveFilters { position: relative; } #submenuShop .containerActiveFilters .removeActiveFilters { padding: 5px 10px; text-align: center; background-color: #f6f6f6; width: 90%; } #submenuShop .containerActiveFilters .activeFilter { position: relative; margin-top: 5px; } #submenuShop .containerActiveFilters .activeFilter .icon { position: relative; float: left; width: 18px; height: 18px; background-color: #f6f6f6; margin: 2px 8px 0 0; background-image: url('../images/icon-close.png'); background-repeat: no-repeat; background-size: 10px; background-position: 50% 50%; } #submenuShop .filterHeader { position: relative; padding: 23px 0 15px 1px; font-size: 14px; font-weight: bold; } #submenuShop .filter.collapsible .filterHeader { cursor: pointer; } #submenuShop .filterHeader .arrow { position: absolute; right: 7px; top: 26px; height: 16px; width: 16px; background-image: url('../images/BUT_products_menu_arrow.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transition-duration: 0.3s; transition-property: transform; } #submenuShop .filter.selected .filterHeader .arrow { transform: rotate(180deg); } #submenuShop #categoriesOverview { padding-bottom: 30px; } #submenuShop #categoriesOverview .selected a, #containerSubmenu #submenuRubrieken a:hover { color: #000; } #submenuShop #categoriesOverview .cat-1 { font-size: 12px; font-weight: bold; margin-bottom: 4px; } #submenuShop #categoriesOverview .cat-2 { padding-left: 20px; color: #3c3c3c; margin-bottom: 6px; } #submenuShop #categoriesOverview .cat-2.selected { font-weight: bold; } #submenuShop #categoriesOverview .cat-2:hover { text-decoration: underline; } #submenuShop #categoriesOverview .cat-3 { padding-left: 40px; color: #6f6f6f; margin-bottom: 4px; } #submenuShop #categoriesOverview .cat-3.selected { font-weight: bold; } #submenuShop #categoriesOverview .cat-3:hover { text-decoration: underline; } #submenuShop #categoriesOverview .cat-4 { padding-left: 60px; color: #6f6f6f; margin-bottom: 4px; } #submenuShop #categoriesOverview .cat-4.selected { font-weight: bold; } #submenuShop #categoriesOverview .cat-4:hover { text-decoration: underline; } #submenuShop .filter { position: relative; border-top: 1px solid #e1ddd9; padding-bottom: 7px; } #submenuShop .filter .items { position: relative; display: none; margin-bottom: 20px; } #submenuShop .filter .items li { position: relative; list-style: none; padding-left: 30px; padding: 3px 0 7px 30px; cursor: pointer; } #submenuShop .filter .items.columns { column-count: 2; } #submenuShop .filter .items li.selected { font-size: 11px; font-weight: bold; } #submenuShop .filter .items li .checkbox { position: absolute; left: 1px; top: 3px; height: 18px; width: 18px; border: 1px solid #b7b7b7; } #submenuShop .filter .items li.selected .checkbox { background-color: #000; } #submenuShop .filter .items li.subitem { padding-left: 45px; } #submenuShop .filter .items li .resultQuantity { display: inline-block; margin-left: 7px; line-height: 16px; padding: 0 5px; font-size: 8px; background-color: #e8e8e8; border-radius: 4px; -webkit-border-radius: 4px; } #submenuShop .filter.sizes .items { } #submenuShop .filter.sizes .items li { float: left; border: 1px solid #d3d3d3; width: 55px; padding: 3px 0px 3px 0px; text-align: center; margin: 0px 5px 5px 0px; font-size: 11px; } #submenuShop .filter.sizes .items li:hover { background-color: #f1f1f1; border-color: #f1f1f1; } #submenuShop .filter.selected .items { display: block; } #containerShoppingBagDetails #submenuShop { margin-bottom: 10px; } #containerShoppingBagDetails #submenuShop .filter { position: relative; float: left; width: calc(20% - 10px); } #containerShoppingBagDetails #submenuShop .filter { border-top: none; padding-left: 10px; } #containerShoppingBagDetails #submenuShop .filter .kop { padding-left: 3px; } #containerShoppingBagDetails #submenuShop .filter.sizes .items { padding-left: 3px; } /* Shop: sorteren */ #containerSorting { position: relative; height: 25px; width: 100%; padding-bottom: 15px; margin-bottom: 30px; border-bottom: 1px solid #efefef; text-align: right; } #containerSorting #containerBreadcrumbs { position: absolute; left: 0; top: 5px; } #containerSorting select { width: auto; margin-top: -5px; padding-right: 55px; padding-top: 10px; padding-right: 25px; height: 35px; border-color: #c6c6c6; color: #787878; background-image: url('../images/BUT_products_menu_arrow.png'); background-size: 12px; background-position: top 14px right 14px; } /* Breadcrumbs */ .breadcrumbs { position: relative; } .breadcrumbs div { display: inline-block; margin-right: 5px; font-size: 11px; font-family: opensans; } .breadcrumbs .breadcrumb { text-decoration: underline; } /* Producten container */ #containerProducts { position: relative; margin-top: 15px; width: 100%; } #containerProducts .containerProduct { position: relative; float: left; font-family: opensans; margin: 0 2% 60px 2%; width: 21.5%; overflow: hidden; } #containerProducts:not(.full) #products:not(.large) .containerProduct:nth-child(4n+4) { margin-right: 0; } #containerProducts:not(.full) #products.large .containerProduct:nth-child(3n+3) { margin-right: 0; } #containerProducts #products.large .containerProduct { width: 30%; } #containerProducts #products.large .containerProduct .markAsFavorite, #containerProducts #products.large .containerProduct .openQuickInsert, #containerProducts #products.large .containerProduct .linePlanning, #containerProducts #products.large .containerProduct .addToQuote { margin-right: 4%; } #containerProducts .containerProduct .hrefCover { height: 100%; } #containerProducts .containerProduct .product { } #containerProducts .containerProduct:hover .product .details .itemName { text-decoration: underline; } #containerProducts .containerProduct .markAsFavorite { position: absolute; right: 0; top: 0; width: 30px; height: 30px; background-size: 20px; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; } #containerProducts .containerProduct .markAsFavorite.star { background-image: url('../images/IMG_favorite_star.png'); } #containerProducts .containerProduct .markAsFavorite.star.selected { background-image: url('../images/IMG_favorite_star_m.png'); } #containerProducts .containerProduct .markAsFavorite.heart { background-image: url('../images/IMG_favorite_heart.png'); } #containerProducts .containerProduct .markAsFavorite.heart.selected { background-image: url('../images/IMG_favorite_heart_m.png'); } #containerProducts .containerProduct .openQuickInsert, #containerProducts .containerProduct .addToQuote { position: absolute; right: 0; top: 32px; width: 30px; height: 30px; background-image: url('../images/IMG_shopping_bag.png'); background-size: 18px; background-position: 50% 50%; background-repeat: no-repeat; } #containerProducts .containerProduct .openQuickInsert.selected, #containerProducts .containerProduct .addToQuote.selected { background-image: url('../images/IMG_shopping_bag_m.png'); } #containerProducts .containerProduct .linePlanning { position: absolute; right: 0; top: 64px; width: 30px; height: 30px; background-image: url('../images/IMG_line_planning.png'); background-size: 18px; background-position: 50% 50%; background-repeat: no-repeat; } #containerProducts .containerProduct .butColorOverview { position: relative; width: 30px; height: 30px; margin-top: -30px; background-image: url('../images/IMG_kleuren_overzicht.png'); background-size: 18px; background-position: 50% 50%; background-repeat: no-repeat; } #containerProducts .containerProduct .optionsMouseOver { border-radius: 4px; -webkit-border-radius: 4px; cursor: pointer; } #containerProducts .containerProduct .optionsMouseOver .uitleg { position: absolute; display: none; right: 28px; top: 2px; width: 75px; font-size: 10px; line-height: 12px; background-color: #fff; padding: 5px 3px 5px 8px; color: #676767 !important; font-size: 11px; border: 1px solid #d2d2d2; } #containerProducts .containerProduct .optionsMouseOver:hover .uitleg { display: block; } #containerProducts .containerProduct .butColorOverview.optionsMouseOver .uitleg { left: 28px; } #containerProducts .containerProduct .productImage { position: relative; height: 240px; margin-top: 5px; margin-bottom: 30px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } #containerProducts .containerProduct .productImage .mouseOver { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; } #containerProducts .containerProduct .productImage .colorOverviewOver { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; } #containerProducts .containerProduct .footer { position: relative; height: 71px; overflow: hidden; } #containerProducts .containerProduct .footer .details { position: relative; width: 55%; float: left; } #containerProducts .containerProduct .footer .details .itemName { position: relative; font-weight: bold; font-size: 13px; color: #333; line-height: 18px; } #containerProducts .containerProduct .footer .details .itemNumber { position: relative; font-size: 11px; line-height: 15px; margin-top: 5px; } #containerProducts .containerProduct .footer .details .color { position: relative; font-size: 12px; line-height: 15px; color: #a8a8a8; margin-top: 2px; } #containerProducts .containerProduct .footer .details .brand { position: relative; font-size: 12px; line-height: 15px; color: #a8a8a8; margin-top: 2px; } #containerProducts .containerProduct .footer .pricing { position: relative; float: right; width: 20%; text-align: right; margin-top: 15px; } #containerProducts .containerProduct .footer .pricing .advicedListPrice { font-weight: bold; font-size: 12px; text-align: right; } #containerProducts .containerProduct .footer .pricing .advicedListPrice.salePriceOld { position: absolute; right: 0; text-decoration: line-through; color: #707070; top: -20px; } #containerProducts .containerProduct .footer .pricing .advicedListPrice.salePrice { color: #d93434; } #containerProducts .containerProduct .footer .pricing .listPrice { float: right; display: inline-block; padding: 0 8px 0 8px; font-size: 11px; text-align: center; background-color: #000; color: #fff; margin-top: 3px; } #containerProducts .containerProduct .footer .pricing .discount { position: absolute; left: 50%; top: -20px; margin-left: -27px; width: 60px; text-align: center; font-weight: bold; font-size: 11px; text-align: center; color: #d93434; } #containerProducts .containerProduct .footer .pricing .discount.salePrice { left: -5px; } #containerProducts .containerProduct .availableColorsOverview { position: relative; height: 40px; background-color: #fff; overflow: hidden; } #containerProducts .containerProduct .availableColorsOverview .color { position: relative; display: inline-block; margin-right: 1%; width: calc(93% / 7); height: 100%; text-align: center; vertical-align: top; line-height: 13px; font-size: 11px; } #containerProducts .containerProduct .availableColorsOverview .color .colorImage { position: relative; width: 100%; height: 100%; margin-bottom: 5px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } #containerProducts .containerProduct .availableColorsOverview .color.moreColors { font-size: 13px; line-height: 40px; background-color: #f9f9f9; -webkit-border-radius: 5px; border-radius: 5px; } #containerProducts.full .containerProduct { position: relative; float: left; font-family: opensans; margin: 0 1% 25px 0; width: 19%; overflow: hidden; } #containerProducts.full .containerProduct:nth-child(5n+5) { margin-right: 0; width: 20%; } #containerProducts .laadMeer { display: none; } #containerProducts #resultatenWordenGeladen { position: relative; width: 100%; height: 15px; padding: 20px 0 20px 0; background-repeat: no-repeat; background-position: 50% 50%; background-image: url('../images/IMG_laden.gif'); background-size: 35px 35px; } /* Gerelateerde producten */ #containerProducts.gerelateerdeProducten { margin-top: 30px; } #containerProducts.gerelateerdeProducten .title { position: relative; font-family: opensans; font-weight: normal; font-size: 28px; margin: 35px 0px 35px 0; text-align: center;} /* Page nummering */ .containerPageNumbers, .containerPaginaNummering { position: relative; margin-top: 10px; padding: 8px 5px 0px 5px; text-transform: uppercase; text-align: center; } .containerPageNumbers a, .containerPaginaNummering a { color: #686868; } .containerPageNumbers span, .containerPaginaNummering span { margin: 0px 3px 0px 3px; padding: 2px 5px 2px 7px; } .containerPageNumbers span.selected, .containerPaginaNummering span.selected { color: #fff; background-color: #c9c9c9; border: 1px solid #c9c9c9; font-weight: bold; } /* Product details */ #containerProductDetails { position: relative; } #containerProductDetails #containerBackBreadcrumbs { position: relative; margin-bottom: 10px; } #containerProductDetails #containerBackBreadcrumbs #back { position: relative; float: left; margin-top: -3px; padding-left: 12px; font-family: opensans; font-size: 15px; background-image: url('../images/icon-arrow-prev-black.png'); background-size: 6px; background-repeat: no-repeat; background-position: 0 5px; font-size: 12px; font-weight: bold; } #containerProductDetails #containerBackBreadcrumbs #back a { color: #5b5b5b; } #containerProductDetails #containerBackBreadcrumbs #back img { margin: 6px 8px 0px 0px; } #containerProductDetails #containerBackBreadcrumbs #back a:hover { text-decoration: underline; } #containerProductDetails #containerBackBreadcrumbs #line { position: relative; float: left; margin: 0 20px; width: 2px; height: 14px; background-color: #ababab; } #containerProductDetails #containerBackBreadcrumbs #containerBreadcrumbs { position: relative; float: left; margin-top: -4px; } #containerProductDetails #productMedia { position: relative; float: left; width: 67%; overflow: hidden; } #containerProductDetails #productMedia #container3DSample { position: relative; margin-bottom: 20px; height: 500px; border: 10px solid #fbfbfb; } #containerProductDetails #productMedia #container3DSample iframe { width: 100%; height: 100%; border: 0; } #containerProductDetails #productMedia #containerMainImages { position: relative; margin-bottom: 20px; } #containerProductDetails #productMedia #containerMainImages .mainImage { position: relative; float: left; width: 49%; margin-right: 1%; } #containerProductDetails #productMedia #containerMainImages .mainImage img { max-width: 100%; max-height: 600px; display: block; margin-left: auto; margin-right: auto; cursor: url(../images/icon-mouse-cursor-image-zoom.png) 10 10, zoom-in; } #containerProductDetails #productMedia #containerMainImages.singleImage .mainImage { width: 100%; text-align: center; } #containerProductDetails #productMedia #productThumbs { position: relative; } #containerProductDetails #productMedia #productThumbs.hidden { display: none; } #containerProductDetails #productMedia #productThumbs .zoomThumb { position: relative; float: left; width: 90px; height: 125px; margin-right: 20px; cursor: zoom-in; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } #containerProductDetails #productMedia #containerYoutubeVideo { position: relative; margin: 30px 0 20px 20px; padding-bottom: 53.9%; height: 0; } #containerProductDetails #productMedia #containerYoutubeVideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #containerProductDetails #productDescription { position: relative; float: right; width: 30%; padding-top: 30px; } #containerProductDetails #productNextPrev { position: absolute; right: 0; top: -35px; width: 100px; text-align: right; } #containerProductDetails #productNextPrev div:not(.clear) { display: inline-block; width: 35px; height: 35px; background-color: #f6f6f6; background-size: 9px; background-repeat: no-repeat; background-position: 50% 50%; } #containerProductDetails #productNextPrev #prev { margin-right: 10px; background-image: url('../images/icon-arrow-prev-black.png'); } #containerProductDetails #productNextPrev #next { background-image: url('../images/icon-arrow-next-black.png'); } #containerProductDetails #description { text-align: justify; font-size: 11px; } #containerProductDetails #description h1 { text-align: left; line-height: 32px; } #containerProductDetails #description .markAsFavorite { position: relative; float: right; width: 25px; height: 25px; margin-right: 10px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; } #containerProductDetails #description .markAsFavorite.star { background-image: url('../images/IMG_favorite_star.png'); } #containerProductDetails #description .markAsFavorite.star.selected { background-image: url('../images/IMG_favorite_star_m.png'); } #containerProductDetails #description .markAsFavorite.heart { background-image: url('../images/IMG_favorite_heart.png'); } #containerProductDetails #description .markAsFavorite.heart.selected { background-image: url('../images/IMG_favorite_heart_m.png'); } #containerProductDetails #description #prices { position: relative; font-family: opensans; font-size: 13px; margin-bottom: 10px; } #containerProductDetails #description #prices .salesListPrice { display: inline-block; color: #9A9A9A; } #containerProductDetails #description #prices .salesListPrice span:not(.salePriceOld) { font-weight: bold; color: #242323; } #containerProductDetails #description #prices .salesListPrice span.salePriceOld { text-decoration: line-through; color: #707070; } #containerProductDetails #description #prices .salesListPrice span.salePriceNew { margin-left: 10px; color: #d93434; } #containerProductDetails #description #prices .listPrice { display: inline-block; margin-left: 15px; background-color: #000; color: #fff; padding: 3px 10px; -webkit-border-radius: 2px; border-radius: 2px; text-align: center; cursor: pointer; } #containerProductDetails #description #prices .verkoopprijs.sale { color: #d93434; } #containerProductDetails #description #prices .discount { display: inline-block; padding: 3px 10px 3px 10px; text-align: center; color: #d93434; font-weight: bold; font-size: 13px; } #containerProductDetails #description #finalDescription ul { list-style: disc; margin-left: 15px; } #containerProductDetails #productDescription #chararistics { position: relative; margin-top: 25px; column-count: 3; } #containerProductDetails #productDescription #chararistics .chararistic { position: relative; padding-bottom: 10px; font-family: opensans; font-size: 11px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } #containerProductDetails #productDescription #chararistics .chararistic .name { position: relative; font-size: 11px; font-weight: bold; } #containerProductDetails #productDescription #chararistics .chararistic .value { position: relative; float: left; font-size: 12px; width: 160px; } #containerProductDetails #productDescription .formButton { margin-top: 20px; } #containerProductDetails #containerColors { position: relative; margin-top: 25px; padding-top: 5px; } #containerProductDetails #containerColors #colorOverview { position: absolute; right: 0; top: 15px; width: 30px; height: 30px; background-image: url('../images/IMG_kleuren_overzicht.png'); background-size: 18px; background-position: 50% 50%; background-repeat: no-repeat; } #containerProductDetails #containerColors .containerColor { position: relative; float: left; width: 49%; height: 70px; margin-right: 30px; margin-right: 2%; } #containerProductDetails #containerColors .containerColor:hover .color .details { text-decoration: underline !important; } #containerProductDetails #containerColors a:nth-child(odd) .containerColor { margin-right: 0; } #containerProductDetails #containerColors .containerColor .color { position: relative; border: 1px solid #fff; } #containerProductDetails #containerColors .containerColor .color .image { position: relative; float: left; width: 22%; height: 60px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #containerProductDetails #containerColors .containerColor .color .details { position: relative; float: right; width: 70%; font-family: opensans; padding-top: 7px; } #containerProductDetails #containerColors .containerColor .color .details .colorName { font-size: 15px; } #containerProductDetails #containerColors .containerColor .color .details .colorNumber { color: #646464; } #containerProductDetails #colorsOverview { position: relative; text-align: center; margin-bottom: 40px; } #containerProductDetails #colorsOverview #description { text-align: center; margin-bottom: 15px; } #containerProductDetails #colorsOverview #description h1 { text-align: center; } #containerProductDetails #colorsOverview #description .markAsFavorite { margin-top: 10px; margin-right: 4px; } #containerProductDetails #colorsOverview .color { position: relative; display: inline-block; width: 17%; margin: 0 1%; } #containerProductDetails #colorsOverview .color:hover { text-decoration: underline !important; } #containerProductDetails #colorsOverview .color .image { height: 210px; margin-bottom: 10px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #containerProductDetails #colorsOverview .color .details .colorName { font-size: 15px; } #containerProductDetails #colorsOverview .color .details .colorNumber { color: #646464; } #containerProductDetails #containerAssortment { position: relative; margin-top: 15px; padding: 30px 40px 20px 40px; background-color: #fafafa; } .containerOrderQuantities { position: relative; margin-top: 15px; padding: 30px 40px 20px 40px; background-color: #fafafa; } .containerOrderQuantities.wit { background-color: #fff; } .containerOrderQuantities h1 { margin-top: 10px; margin-bottom: 10px; text-align: center; } .containerOrderQuantities .description span.tag { position: relative; margin-left: 10px; top: -5px; font-size: 9px; } .containerOrderQuantities .inleiding { text-align: center; margin-bottom: 10px; } .containerOrderQuantities .alertMinimumOrderQuantity { position: relative; padding: 5px 10px;; margin-bottom: 15px; border: 1px solid #ebccd1; color: #b94a48; background-color: #f2dede; -webkit-border-radius: 3px; border-radius: 3px; } .containerOrderQuantities .mainImage { position: relative; float: left; margin-right: 10px; width: 50px; height: 50px; border: 1px solid #eeeeee; background-color: #fff; background-size: auto 80%; background-repeat: no-repeat; background-position: 50% 50%; } .containerOrderQuantities thead th { font-family: opensans; font-weight: normal; font-size: 13px; color: #646464; padding-bottom: 10px; vertical-align: bottom; text-align: left; } .containerOrderQuantities thead th.size { color: #313131; font-size: 14px; font-weight: bold; padding-left: 10px; } .containerOrderQuantities td.image .image { position: relative; float: left; width: 50px; height: 50px; border: 1px solid #eeeeee; background-color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-size: auto 80%; } .containerOrderQuantities td.image .hex { position: relative; float: left; left: 12px; top: 10px; width: 25px; height: 25px; border: 1px solid #eeeeee; } .containerOrderQuantities td.color { font-family: opensans; } .containerOrderQuantities td.color .colorName { font-weight: bold; font-size: 12px; } .containerOrderQuantities td.color .colorNumber { color: #7e7e7e; font-size: 12px; } .containerOrderQuantities td.color .colorDeliveryDate { color: #565656; font-size: 10px; } .containerOrderQuantities input.quantity { width: 35px !important; } .containerOrderQuantities input.quantity:not(.red):not(.orange) { border-color: #eaeaea; } .containerOrderQuantities input.quantity:not(.sizeHulpOnly):disabled { background-image: url('../images/BG_geen_voorraad.png'); background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; } .containerOrderQuantities.quickInsert input.quantity { width: 50px !important; } .containerOrderQuantities .stock { width: 35px; font-size: 10px; text-align: center; } .containerOrderQuantities .stock.available { color: #00a718; } .containerOrderQuantities td.listPrice { font-family: opensans; font-size: 13px; padding-top: 8px; } .containerOrderQuantities td.listPrice .showListPrice { cursor: pointer; } .containerOrderQuantities td.listPrice .discount { font-weight: bold; font-size: 13px; color: #d93434; } .containerOrderQuantities td.totalValue { font-family: opensans; font-size: 13px; padding-top: 8px; } .containerOrderQuantities td.salesListPrice { font-family: opensans; font-size: 12px; padding-top: 8px; } .containerOrderQuantities input.totalQuantity { background-color: transparent; border: 0; width: 50px;; } .containerOrderQuantities .copyPaste { width: 50px; height: 20px; } .containerOrderQuantities .copyPaste .icon { width: 20px; height: 20px; cursor: pointer; background-repeat: no-repeat; background-size: contain; position: relative; float: left; } .containerOrderQuantities .copyPaste .icon.copy { background-image: url('../images/BUT_copy.png'); } .containerOrderQuantities .copyPaste .icon.paste { background-image: url('../images/BUT_copy_paste.png'); margin-left: 7px; } .containerOrderQuantities .remove .icon { width: 20px; height: 20px; cursor: pointer; background-image: url('../images/icon-close.png'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-size: 65%; } .containerOrderQuantities table tr.selected { background-color: #fafafa; } .containerOrderQuantities table tr td { position: relative; border-top: 1px solid #e2e2e2; } .containerOrderQuantities table tr td.quantity .touchQuantity { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .containerOrderQuantities .advicedListPrice { text-align: left; font-style: italic; colosr: #3e3e3e; margin-left: 3px; font-size: 10px; display: inline-block; } .containerOrderQuantities .advicedListPrice.salePriceOld { text-decoration: line-through; color: #707070; top: -20px; font-size: 9px; } .containerOrderQuantities .advicedListPrice.salePrice { color: #d93434; } .containerOrderQuantities .addToBasket { float: right; background-color: #248f00; color: #fff; } .containerOrderQuantities #addToQuotation { position: relative; width: 300px; margin-top: 10px; } .containerOrderQuantities #addToQuotation .add { display: inline-block; cursor: pointer; } /* Container winkelwagen */ #containerShoppingBagDetails { position: relative; } #containerShoppingBagDetails #filterShoppingBag { position: relative; float: left; background-color: #bababa; border: none; } #containerShoppingBagDetails #containerShoppingBag { position: relative; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities { position: relative; padding: 20px 20px 15px 20px; margin-bottom: 35px; } #containerShoppingBagDetails #containerShoppingBag form:nth-child(odd) .containerOrderQuantities, #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities.grijs { background-color: #f6f6f6; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .description { position: relative; float: left; width: 75%; margin: 5px 0 0 15px; text-align: left !important; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .description h1 { text-align: left; display: inline-block; } .containerOrderQuantities .containerButtons { position: absolute; top: 35px; right: 15px; width: 300px; } .containerOrderQuantities .containerButtons .button { position: inline-block; float: right; margin-left: 10px; margin-top: -3px; padding: 4px 10px 2px 10px; cursor: pointer; font-family: opensans; } .containerOrderQuantities .containerButtons .button#butDelete:hover { text-decoration: underline; } .containerOrderQuantities .containerButtons .button#butOpenItem { background-color: #e5e5e5; } .containerOrderQuantities .containerButtons .button#butOpenItem:hover { background-color: #dadada; } .containerOrderQuantities .containerButtons .button img { float: left; margin: 3px 5px 0px 0px; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .containerMatrix { border-top: 1px solid #f1f1f1; margin-top: 10px; padding-top: 10px; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities tr.selected { background-color: transparent; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities tr.extraKleur.kleurVerbergen { display: none; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .aantalStuksBedrijfskleding { display: none; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .aantalStuksBedrijfskleding.selected { display: inline-block; } #containerShoppingBagDetails.bedrijfskleding #containerShoppingBag .containerOrderQuantities table tr td { border-top: none; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .containerMatrix .saveChanges { background-color: #d1d1d1; border-color: #c9c9c9; color: #6a6a6a; margin-left: 5px; } #containerShoppingBagDetails #containerShoppingBag .containerOrderQuantities .containerMatrix .moreColours { background-color: #d1d1d1; border-color: #c9c9c9; color: #6a6a6a; margin-left: 5px; } #containerShoppingBagDetails #orderOverview { position: relative; float: left; width: 300px; font-family: opensans; background-color: #f6f6f6; padding: 15px 30px; } #containerShoppingBagDetails #containerOrderNowButtonBottom { position: relative; float: right; width: 400px; margin-top: 30px; } #containerShoppingBagDetails #containerOrderNowButtonBottom #containerOrderNotAllowed { background-color: #c8052c; color: #fff; font-family: opensans; padding: 10px; } #containerShoppingBagDetails #containerOrderNowButtonBottom #containerOrderNotAllowed.orange { background-color: #FF731F; } #containerShoppingBagDetails #containerOrderNowButtonBottom .saveAdditionalOrder { float: right; padding: 10px 17px; height: auto; font-size: 14px; margin-right: 5px; background-color: #f0f0f0; border-color: #f0f0f0; color: #6b6b6b; } #containerShoppingBagDetails #containerOrderNowButtonBottom #discountPercentage { position: relative; } #containerShoppingBagDetails #containerOrderNowButtonBottom #discountPercentage { float: right; margin: -20px 0 10px 0; width: 250px; position: relative; padding: 20px 0 20px 30px; border: 1px solid #f6f6f6; } #containerShoppingBagDetails #containerOrderNowButtonBottom #discountPercentage input[type='text'] { width: 80px; padding-top: 8px; padding-bottom: 8px; } #containerShoppingBagDetails #containerOrderNowButtonBottom #traject { position: relative; float: left; width: 230px; margin-top: 7px; } #containerShoppingBagDetails #containerOrderNowButtonBottom #resetShoppingBag { position: relative; float: none; text-decoration: underline; margin: 20px 5px 0 0; text-align: right; } #containerShoppingBagDetails #containerOrderNowButtonBottom #resetShoppingBag a { color: #7a7a7a; } #changeOverview { position: relative; float: right; width: 300px; font-family: opensans; background-color: #f6f6f6; padding: 15px 30px; } /* Container order now */ #containerOrderNowDetails { position: relative; } #containerOrderNowDetails #left { position: relative; float: left; width: 50%; } #containerOrderNowDetails #left #dropshipment { display: inline; background-color: #bababa; border: 0; padding: 6px 10px; color: #fff; font-size: 11px; margin-right: 10px; -webkit-border-radius: 2px; border-radius: 2px; } #containerOrderNowDetails #left select { margin-top: 5px; } #containerOrderNowDetails #left textarea { position: relative; border: 1px solid #ddd; margin-top: 5px; padding-left: 2%; padding-right: 2%; width: 96%; } #containerOrderNowDetails #right { position: relative; float: right; width: 45%; } #containerOrderNowDetails #orderOverview { position: relative; font-family: opensans; background-color: #f6f6f6; padding: 15px 30px; } #containerOrderNowDetails #right #generalTerms { padding: 10px; margin: 10px 0 10px 0; background-color: #e9e9e9; } #containerOrderNowDetails #right #generalTerms.error { background-color: #f49c9c; color: #be2d2d; } #containerOrderNowDetails #right .formButton.orderNow { float: right; padding: 10px 17px; font-size: 14px; background-color: #248f00; color: #fff; } /* Container order success */ #containerOrderStatus { position: relative; text-align: center; } #containerOrderStatus #containerOrderIds { position: relative; font-family: opensans; padding: 15px; width: 50%; margin: 0 auto; background-color: #f6f6f6; border: 1px solid #efefef; } #containerOrderStatus #containerOrderIds h2 { color: #248f00; } #containerSignature { width: 550px; margin: 0 auto; } #containerSignature .messageContainer { text-align: center; } #containerSignature #formSignature.error { position: relative; padding: 20px 30px 20px 30px; margin-bottom: 15px; border: 2px solid #e6e6e6; background-position: bottom; background-repeat: repeat-x; background-color: #fefefe; color: #b94a48; background-color: #f2dede; border-color: #ebccd1; } #containerSignature #formSignature.error a { color: #b94a48; } #containerSignature #formSignature .sig { position: relative; position: relative; width: 550px; height: 300px; border: 1px solid #cfcfcf; background-color: #fff; margin-top: 10px; } #containerSignature #containerButtons { position: relative; margin: 2px -2px 0 0; } #containerSignature #containerButtons #butCancel { float: left; margin: 0; } #containerSignature #containerButtons #butSubmit { float: right; margin: 0; } #containerOrderStatus #containerResultWithoutSignature { position: relative; margin: 40px 0 20px 0; font-family: opensans; color: #767676; font-size: 14px; text-decoration: underline; } #containerOrderStatus #containerResultWithoutSignature a { color: #767676; } /* Container Favorite Items */ #containerFavoritesDetails { position: relative; font-family: opensans; } #containerFavoritesDetails thead td.delete { width: 18%; } #containerFavoritesDetails thead td.openItem { width: 13%; } #containerFavoritesDetails tbody td.image .image { position: relative; float: left; width: 75px; height: 75px; border: 1px solid #eeeeee; background-color: #fff; background-size: auto 80%; background-repeat: no-repeat; background-position: 50% 50%; } #containerFavoritesDetails tbody td.description { position: relative; } #containerFavoritesDetails tbody td.description h1 { font-size: 18px; margin-bottom: 3px; } #containerFavoritesDetails tbody td.description span.itemName { color: #6a6a6a; } #containerFavoritesDetails tbody td.description div.season { color: #969696; font-size: 14px; margin-bottom: 15px; } #containerFavoritesDetails tbody td.salesListPrice { font-size: 14px; } #containerFavoritesDetails tbody td.listPrice { font-size: 14px; } #containerFavoritesDetails tbody td.delete input { background-color: transparent; color: #595959; border-color: #c4c4c4; font-size: 10px; } #containerFavoritesDetails tbody td.openItem input { background-color: transparent; background-color: #248f00; border-color: #248f00; } /* My account */ #containerAccountMyAccount { position: relative; } #containerAccountMyAccount #containerAccountDetails .overview tbody tr td:first-child { color: #646464; } #containerAccountMyAccount #containerAccountDetails .overview tbody tr td:last-child { color: #323131; } #containerAccountMyAccount #containerAccountDetails #left { float: left; width: 49%; } #containerAccountMyAccount #containerAccountDetails #right { float: right; width: 49%; } #containerAccountMyAccount #containerDeliveryAddresses { position: relative; margin-top: 30px; } #containerAccountMyAccount #containerDeliveryAddresses h2 { margin-bottom: 15px; font-size: 22px; } #containerAccountMyAccount #containerContactpersons { position: relative; margin-top: 30px; } #containerAccountMyAccount #containerContactpersons h2 { margin-bottom: 15px; font-size: 22px; } #containerAccountMyAccount #containerUpdatePassword { position: relative; margin-top: 40px; } #containerAccountMyAccount #containerUpdatePassword h2 { margin-bottom: 15px; font-size: 22px; } #containerAccountMyAccount #containerUpdatePassword .description { font-family: opensans; color: #646464; } #containerAccountMyAccount #containerUpdatePassword form { margin-top: 10px; } #containerAccountMyAccount #containerUpdatePassword form span { font-family: opensans; } #containerAccountMyAccount #containerUpdateMedewerkerBedrijfskleding { position: relative; margin-top: 40px; } #containerAccountInvoices { position: relative; } #containerAccountInvoices #containerOutstandingInvoices { position: relative; float: right; text-align: right; width: 170px; padding: 10px 15px; margin-top: -8px; font-family: opensans; background-color: #f6f6f6; } #containerAccountInvoices #containerOutstandingInvoices .title { font-size: 16px; } #containerAccountInvoices #containerOutstandingInvoices .amount { font-size: 18px; color: #fb7a08; } #containerAccountInvoices #containerOutstandingInvoices .amount.overdue { color: #d42727; } #containerAccountInvoices #containerOutstandingInvoices .noOutstandingInvoices { color: #248f00; } #containerAccountInvoices .overview tr.overdue { background-color: #ffe6e6; } #containerAccountCRM #contentHeader { position: relative; height: 50px; } #containerAccountCRM #contentHeader .titel { float: left; font-family: opensans; font-weight: normal; font-size: 28px; margin: 10px 0px 15px 0; } #containerAccountCRM #contentHeader .formButton:not(.edit) { float: left; margin: 5px 0 0 10px; background-color: #248f00; border: 1px solid #248f00; } #containerAccountCRM #contentHeader .formButton.edit { float: right; margin: 5px 0 0 10px; } #containerAccountCRM #contentHeader .laden { display: none; } #containerAccountCRM .containerZoeken .sNormal { width: 175px; } #containerAccountCRM #buttonResponsive { display: none; } #containerAccountCRM .itemToevoegenVerwijderen thead { font-family: opensans; font-size: 14px; color: #131313; line-height: 25px; background-color: #f7f7f7; } #containerAccountCRM .itemToevoegenVerwijderen thead td { padding: 10px 0 5px 3px; border-bottom: 2px solid #B8B8B8; } #containerAccountCRM .itemToevoegenVerwijderen thead td:first-child { padding-left: 8px; } #containerAccountCRM .overzicht .kop { font-family: opensans; font-size: 14px; color: #131313; line-height: 25px; background-color: #f7f7f7; } #containerAccountCRM .buttonVerwijderen { position: absolute; top: 10px; right: 0; text-decoration: underline; padding-left: 17px; background-image: url('../../images/BUT_verwijderen.gif'); background-repeat: no-repeat; background-position: 0px 4px; } #containerAccountCRM .sNormaal { width: 250px; } #containerAccountReturns { position: relative; } #containerAccountReturns #containerOrderIds { position: relative; font-family: opensans; padding: 15px; width: 50%; margin: 0 auto; background-color: #f6f6f6; border: 1px solid #efefef; text-align: center; } #containerAccountReturns #containerOrderIds h2 { color: #248f00; } /* landingsPages */ #landingsPage { position: relative; } #landingsPage .widget { position: relative; margin-bottom: 15px; } /* Heights */ #landingsPage div.height-1 { height: 100px; } #landingsPage div.height-2 { height: 150px; } #landingsPage div.height-3 { height: 200px; } #landingsPage div.height-4 { height: 250px; } #landingsPage div.height-5 { height: 300px; } #landingsPage div.height-6 { height: 350px; } #landingsPage div.height-7 { height: 400px; } #landingsPage div.height-8 { height: 450px; } #landingsPage div.height-9 { height: 500px; } #landingsPage .slideshow { position: relative; } #landingsPage .slideshow .banner { position: absolute; display: none; left: 0px; top: 0px; width: 100%; height: 100%; background-position: 50% bottom; background-size: cover; } #landingsPage .slideshow .banner .spacing { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #landingsPage .slideshow .banner.selected { display: block; } #landingsPage .twoItems, #landingsPage .threeItems { position: relative; height: 100%; } #landingsPage .twoItems .item, #landingsPage .threeItems .item { position: relative; float: left; height: 100%; background-size: cover; background-position: 50% 50%; } #landingsPage .twoItems .item { width: 50%; } #landingsPage .threeItems .item { width: 32%; margin-right: 1%; } #landingsPage .threeItems .item.item-2 { width: 33%; } #landingsPage .threeItems .item.item-3 { width: 33%; margin-right: 0; float: right; } #landingsPage .items { position: relative; } #landingsPage .items .title { position: relative; font-family: opensans; font-weight: normal; font-size: 28px; margin: 35px 0px 35px 0; text-align: center;} #landingsPage .items #products .containerProduct { position: relative; float: left; font-family: opensans; margin: 0 1% 25px 0; width: 19%; overflow: hidden; } #landingsPage .items #products a:nth-child(5n+5) .containerProduct { margin-right: 0; width: 20% } #landingsPage .containerYoutubeVideo { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } #landingsPage .containerYoutubeVideo .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Dashboard */ #containerWebshop #containerDasbhoard { margin-left: -10px; margin-right: -20px; width: 960px; } #containerWebshop #containerDasbhoard #dashboardItems .dashboardItem { margin-right: 6px; margin-left: 2px; margin-bottom: 11px; } #containerWebshop #containerDasbhoard #dashboardItems .openSettings { display: none; } /* Showroom scanning */ #containerShowroomScanning { position: relative; } #containerScanningSearchBarcode { position: relative; padding: 15px 20px; background-color: #f6f6f6; margin-bottom: 20px; } #containerScanningSearchBarcode input[type='text'] { height: 22px; width: 225px; margin-right: 5px; } #containerLinePlanning.board { position: relative; height: 800px; } #containerLinePlanning.board .containerProduct { position: absolute !important; } #containerLinePlanning.board .containerProduct .product { border: hidden; } #containerLinePlanning.board .details, #containerLinePlanning.board .pricing { display: none !important; } #containerLinePlanning.board .colorOverview, #containerLinePlanning.board .markAsFavorite, #containerLinePlanning.board .openQuickInsert, #containerLinePlanning.board .linePlanning { display: none !important; } #containerLinePlanning #existingBoards { position: relative; padding: 10px 170px 10px 20px; background-color: #ededed; } #containerLinePlanning #existingBoards span.titel { font-weight: bold; } #containerLinePlanning #existingBoards .board { display: inline-block; margin-left: 6px; cursor: pointer; background-color: #fdfdfd; padding: 3px 7px 2px 7px; } #containerLinePlanning #existingBoards .board.selected { background-color: #248f00; color: #fff; } #containerLinePlanning #existingBoards .board:hover { text-decoration: underline; } #containerLinePlanning #existingBoards #weergave { position: absolute; right: 10px; top: 10px; width: 130px; text-align: right; } #containerLinePlanning #existingBoards #weergave .item { display: inline-block; margin-left: 6px; cursor: pointer; background-color: #fdfdfd; padding: 3px 7px 2px 7px; } #containerLinePlanning #existingBoards #weergave .item.selected { background-color: #248f00; color: #fff; } /* Input form */ #centerInputForm { width: 100%; } #centerInputForm td:first-child { width: 41%; padding-right: 20px; text-align: right; } #centerInputForm.inputPadding input[type='text'] { padding: 12px 12px; } /* Sales order delivery info */ .salesOrderDeliveryInfo { position: relative; } .salesOrderDeliveryInfo .statusIndictor { position: relative; margin-top: 10px; background-color: #cccccc; height: 8px; width: 60px; -webkit-border-radius: 4px; border-radius: 4px; overflow: hidden; } .salesOrderDeliveryInfo .statusIndictor .status { position: relative; height: 100%; float: left; } .salesOrderDeliveryInfo .statusIndictor .status.delivered { background-color: #6dc73d; } .salesOrderDeliveryInfo .statusIndictor .status.inPicking { background-color: #f7a64d; } .salesOrderDeliveryInfo .description { position: relative; margin-top: 6px; font-size: 9px; line-height: 12px; } /* Invoice payment */ #containerInvoicePayment { position: relative; width: 500px; margin: 20px auto 0 auto; background-color: #fff; padding: 30px 40px; text-align: center; } /* ---------------------------------------------------------------------------------------- */ /* F O O T E R */ #containerFooter { position: relative; margin-top: 30px; padding-top: 50px; padding-bottom: 50px; background-color: #f6f6f6; } #containerFooter .item { position: relative; width: 17%; float: left; } #containerFooter .item span { font-family: opensans; font-weight: bold; font-size: 15px; } #containerFooter .item ul { margin-top: 10px; } #containerFooter .item ul { font-family: opensans; font-size: 13px; } #containerFooter .item ul li { margin-top: 5px; } #containerFooter .item ul a { color: #737379; } #containerFooter .item ul li:hover { text-decoration: underline; } #containerFooter #containerInfo { position: relative; float: right; width: 49%; font-family: opensans; font-size: 13px; color: #737379; } #containerFooter #containerInfo h2 { font-family: opensans; font-weight: bold; color: #242323; font-size: 15px; margin-bottom: 10px; } #containerFooter #containerInfo a { color: #737379; } /* ---------------------------------------------------------------------------------------- */ /* M O D U L E S */ /* Zoom container */ .productZoomContainer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 100; overflow: hidden; } .productZoomContainer .productImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .productZoomContainer .productImage img { position: absolute; left: 0; top: 0; width: 100%; } .productZoomContainer .closeButton { position: absolute; top: 0; right: 0px; width: 50px; height: 50px; background-color: #000; color: #fff; font-size: 20px; text-align: center; z-index: 2; cursor: pointer; background-image: url('../images/icon-close-white.png'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-size: 20px; } .productZoomContainer .prevButton, .productZoomContainer .nextButton { position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; background-color: #fff; -webkit-border-radius: 20px; border-radius: 20px; z-index: 2; border: 1px solid #e8e8e8; background-size: 10px; background-repeat: no-repeat; background-position: 50% 50%; } .productZoomContainer .prevButton:hover, .productZoomContainer .nextButton:hover { background-color: #000; } .productZoomContainer .prevButton { left: 20px; background-image: url('../images/icon-arrow-prev-black.png'); } .productZoomContainer .prevButton:hover { background-image: url('../images/icon-arrow-prev-white.png'); } .productZoomContainer .nextButton { right: 20px; background-image: url('../images/icon-arrow-next-black.png'); } .productZoomContainer .nextButton:hover { background-image: url('../images/icon-arrow-next-white.png'); } /* Shopping basket */ .shoppingBasketBackground { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .1); z-index: 99; } .containerShoppingBasketSideBar { position: fixed; right: 0; top: 0; height: calc(100% - 30px); width: 350px; padding: 15px; background-color: #fff; z-index: 100; } .containerShoppingBasketSideBar .loading { position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background-image: url('../images/icon-loading.gif'); background-size: contain; } .containerShoppingBasketSideBar #closeButton { position: absolute; top: 0; right: 0px; width: 50px; height: 50px; background-color: #000; color: #fff; font-size: 20px; text-align: center; z-index: 2; cursor: pointer; background-image: url('../images/icon-close-white.png'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-size: 20px; } .containerShoppingBasketSideBar .header { position: relative; height: 37px; border-bottom: 1px solid #dfdfdf; } .containerShoppingBasketSideBar .messageContainer { position: relative; margin-bottom: 0; padding: 12px 10px; text-align: center; } .containerShoppingBasketSideBar .items { position: relative; height: 100%; overflow: scroll; } .containerShoppingBasketSideBar .items .item { position: relative; padding-top: 5px; } .containerShoppingBasketSideBar .items .item .image { position: relative; float: left; width: 28%; height: 100px; margin-bottom: 10px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } .containerShoppingBasketSideBar .items .item .itemDetails { position: relative; float: right; width: 70%; padding-top: 20px; font-size: 12px; } .containerShoppingBasketSideBar .items .item .itemDetails .itemName { font-size: 14px; font-weight: bold; } .containerShoppingBasketSideBar .items .item .itemDetails .itemNumber { color: #646464 } .containerShoppingBasketSideBar .items .item .quantity { color: #646464; font-size: 11px; } .containerShoppingBasketSideBar .footer { position: absolute; width: calc(100% - 20px); height: 50px; padding-top: 10px; bottom: 0; right: 10px; background-color: #fff; border-top: 1px solid #f6f6f6; } .containerShoppingBasketSideBar .footer #mobileContinueShopping { margin-bottom: 10px; } .containerShoppingBasketSideBar .footer .amount { position: relative; float: left; width: calc(40% - 5px); padding-left: 5px; font-size: 13px; font-weight: normal; color: #645b58; text-transform: uppercase; } .containerShoppingBasketSideBar .footer .buttons { position: relative; float: right; width: calc(50% - 5px); text-align: right; padding-right: 5px; } .containerShoppingBasketSideBar .footer .buttons input { cursor: pointer; background-color: #248f00; color: #fff; } /* Filter search */ #containerFilters { position: relative; margin-bottom: 20px; } #containerFilters #activeFilters { display: inline; } #containerFilters #activeFilters .filter { display: inline-block; padding: 3px 8px; margin-right: 5px; background-color: #fafafa; -webkit-border-radius: 3px; border-radius: 3px; } #containerFilters #activeFilters .filter .icon { display: inline-block; height: 14px; width: 15px; line-height: 14px; margin-left: 8px; text-align: center; background-color: #000; color: #fff; -webkit-border-radius: 3px; border-radius: 3px; } #containerFilters #activeFilters .filter:hover { background-color: #eee; } #containerFilters #createNewFilter { display: inline; font-family: opensans; margin-right: 5px; } #containerFilters #createNewFilter #startButton { display: inline; background-color: #000; color: #fff; padding: 6px 12px 6px 8px; text-decoration: underline; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; } #containerFilters #createNewFilter #startButton .icon { display: inline-block; height: 14px; width: 14px; line-height: 15px; margin-right: 8px; text-align: center; background-color: #fff; color: #000; -webkit-border-radius: 3px; border-radius: 3px; } #containerFilters #createNewFilter #startButton:hover { background-color: #303030; } #containerFilters #createNewFilter #availableFilters { position: absolute; left: 0; top: 24px; display: none; width: 150px; background-color: #fff; padding: 7px 0; z-index: 20; -webkit-box-shadow: 0px 1px 5px 0px #e0e0e0; -moz-box-shadow: 0px 1px 5px 0px #e0e0e0; } #containerFilters #createNewFilter #availableFilters .filter { padding: 2px 10px; cursor: pointer; } #containerFilters #createNewFilter #availableFilters .filter:hover { background-color: #f6f6f6; } #containerFilters #insertFilterValue { display: none; position: relative; padding: 8px 15px; margin-top: 10px; background-color: #fafafa; } #containerFilters #insertFilterValue #title { display: inline; font-family: opensans; font-size: 13px; font-weight: bold; margin-right: 10px; } #containerFilters #insertFilterValue #inputValues { display: inline; } #containerFilters #insertFilterValue #inputValues .formField { padding: 5px 7px; } #containerFilters #insertFilterValue #inputValues .formField:focus { outline: none; } #containerFilters #insertFilterValue #inputValues .formField.wilcard { width: 200px; } #containerFilters #insertFilterValue .formButton { background-color: #000; color: #fff; height: 25px; padding: 0 10px; }