@font-face { font-family: Century Gothic, AppleGothic, sans-serif; src: url('../../fonts/centurygothic/gothic.eot'); src: url('../../fonts/centurygothic/gothic.eot?#iefix') format('embedded-opentype'), url('../../fonts/centurygothic/gothic.woff') format('woff'), url('../../fonts/centurygothic/gothic.ttf') format('truetype'), url('../../fonts/centurygothic/gothic.svg#gothic') format('svg'); font-weight: normal; font-style: normal; @font-face { font-family: 'la-belle-aurore'; src: url("https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap" ); /* IE */ src: local("La Belle Aurore"), url("https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap") format("truetype"); } @font-face { font-family: 'Brandon Grotesque Regular', 'Brandon Grotesque Thin Italic', 'Brandon Grotesque Thin', 'Brandon Grotesque Regular Italic', 'Brandon Grotesque Medium Italic', 'Brandon Grotesque Medium', 'Brandon Grotesque Light Italic', 'Brandon Grotesque Light', 'Brandon Grotesque Bold Italic', 'Brandon Grotesque Bold', 'Brandon Grotesque Black Italic', 'Brandon Grotesque Black'; src: url("https://use.typekit.net/udl8ryv.css"); /* IE */ } } A:link { text-decoration: none; outline: none; color: #272727; } A:visited { text-decoration: none; outline: none; color: #272727; } html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0px; border: 0px; font-family: Arial; font-size: 12px; line-height: 21px; color: #272727; overflow: -moz-scrollbars-vertical; background-color: #ffffff; -webkit-text-size-adjust: 100%; } body > div { overflow: hidden; } img { border: 0px; } h1 { font-weight: normal; font-size: 30px; margin: 0 0 10px 0; font-family: Century Gothic, AppleGothic, sans-serif; line-height: 30px; } h2 { font-weight: bold; font-size: 17px; margin: 0 0 7px 0; font-family: Century Gothic, AppleGothic, sans-serif; } span { } hr { position: relative; height: 5px; margin: 20px 0px 20px 0px; padding: 0px; color: #f5f5f5; background-color: #f5f5f5; border: none; } ul { list-style: none; margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px; } .center { text-align: center; } .hidden { display: none; } .show-xs { display: none; } input:not([type="radio"]):not([type="checkbox"]) { -webkit-appearance: none; border-radius: 0; } .formVeld { background: #fff; font-family: Arial; font-size: 12px; color: #282828; border: 1px solid #dddddd; padding: 7px 12px 7px 12px; } select.formVeld { width: 100%; -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(../../images/BG_select_pijl.png); background-size: 27px 22px; background-position: right 12px top 4px; background-repeat: no-repeat; border: 1px solid #dddddd; color: #282828; margin: 0; overflow: hidden; padding-top: 6px; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; height: 32px; -webkit-border-radius: 0; border-radius: 0; } .formButton { background-color: transparent; font-size: 14px; font-family: Century Gothic, AppleGothic, sans-serif; padding: 5px 12px 5px 12px; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; -webkit-border-radius: 0px; } .formButton.solid { color: #fff; } .formButton.solid:hover { -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; } .formVeld.fout, .formFout { border: 1px solid #da6767; } .kaderMelding { position: relative; padding: 15px; margin-bottom: 20px; background-color: #f7f7f7; border: 1px solid #dcdcdc; margin: 5px 0px 5px 0px; } .kaderMelding h2 { margin-bottom: 5px; } .stelEinde { display: block; clear: both; } .kaderMelding { position: relative; padding: 20px 30px 20px 30px; margin-bottom: 15px; border: 2px solid #e6e6e6; background-color: #fefefe; } .kaderMelding h2 { margin-bottom: 3px; } .kaderMelding.succes { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; background-image: none; } .kaderMelding.succes a { color: #468847; } .kaderMelding.info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; background-image: none; } .kaderMelding.info a { color: #3a87ad; } .kaderMelding.warning { color: #c09853; background-color: #fcf8e3; border-color: #faebcc; background-image: none; } .kaderMelding.warning a { color: #c09853; } .kaderMelding.danger { color: #b94a48; background-color: #f2dede; border-color: #ebccd1; background-image: none; } .kaderMelding.danger a { color: #b94a48; } /* ---------------------------------------------------------------------------------------- */ /* C O N T A I N E R S */ .containerSite { position: relative; margin: 0px auto; text-align: left; } /* Overlay */ .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-image: url('../../images/BG_overlay.png'); z-index: 999; text-align: center; display: none; } .overlay .laden { position: absolute; left: 49%; top: 49%; width: 60px; height: 60px; background-image: url('../../images/IMG_laden.gif'); background-size: contain; display: none; } .overlay #popupContent { position: absolute; left: 15%; width: 40%; padding: 4%; display: none; background-color: #fff; } .overlay #popupContent .sluiten { position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; background-color: #a5a5a5; background-image: url('../../images/BG_kruis_kader.png'); background-size: cover; background-repeat: no-repeat; cursor: pointer; } .overlay #popupContent .sluiten:hover { background-color: #bbb; } /* U bent hier */ #containerLocatie { position: relative; height: 25px; border-bottom: 1px solid #dfdfdf; margin-bottom: 20px; } #containerLocatie ul { list-style: none; margin: 0px; padding: 0px; } #containerLocatie li { float: left; margin-left: 8px; } #containerLocatie li:hover a { text-decoration: underline; } #containerLocatie #facebookLike { display: none; } /* Inleiding met streep eronder */ #inleidingAlgemeen { position: relative; padding: 0px 60px 20px 60px; text-align: center; } #inleidingAlgemeen h1 { text-transform: uppercase; font-size: 35px; line-height: 35px; color: #363636; } #inleidingAlgemeen hr { width: 160px; height: 3px; margin: 20px auto; margin-bottom: 20px; background-color: #363636; color: #363636; } /* Standaard verdeling */ #verdelingTweeLinks { position: relative; float: left; width: 48%; } #verdelingTweeRechts { position: relative; float: right; width: 48%; } /* Paginanummering */ #containerPaginaNummering { position: relative; margin-top: 10px; text-transform: uppercase; text-align: center; text-align: right; margin-right: 7px; } #containerPaginaNummering span { margin: 0px 3px 0px 3px; padding: 5px 7px 5px 7px; border: 1px solid #d9d9d9; } #containerPaginaNummering span.selected { color: #fff; border: 1px solid #00a161; background-color: #00a161; } /* ---------------------------------------------------------------------------------------- */ /* H E A D E R */ #containerHeaderFixed { position: relative; height: 170px; overflow: visible; } #containerHeaderFixed.checkoutBorder { border-bottom: 2px solid #f6f6f6; } #headerFixed { position: relative; background-color: #fff; z-index: 20; width: 100%; overflow: visible; } #headerFixed.responsiveMenu { position: fixed; left: 0px; top: 0px; } #containerKlantenserviceUsp { positon: relative; background-color: #656565; height: 30px; padding-top: 10px; color: #fff; z-index: -1; } #containerKlantenserviceUsp #links { positon: relative; float: left; width: 70%; } #containerKlantenserviceUsp #links #klantenservice { display: inline-block; margin-right: 20px; padding-left: 30px; background-image: url('../../images/IMG_usp_klantenservice.png'); background-size: 22px 21px; background-repeat: no-repeat; } #containerKlantenserviceUsp #links #gratisVerzending { display: inline-block; margin-right: 20px; padding-left: 30px; background-image: url('../../images/IMG_usp_gratis_verzending.png'); background-size: 22px 21px; background-repeat: no-repeat; } #containerKlantenserviceUsp #links #gratisVerzending img { margin: -2px 0 0 6px; } #containerKlantenserviceUsp #links #snelleVerzending { display: inline-block; padding-left: 25px; background-image: url('../../images/IMG_usp_snelle_verzending.png'); background-size: 18px 18px; background-repeat: no-repeat; } #containerKlantenserviceUsp #links #snelleVerzending:hover { text-decoration: underline; } #containerKlantenserviceUsp #rechts { positon: relative; float: right; width: 30%; text-align: right; } #containerKlantenserviceUsp #rechts .lijn { position: relative; float: right; width: 1px; height: 17px; margin: 2px 15px 0 17px; background-color: #fff; opacity: 0.6; filter: alpha(opacity=60); } #containerKlantenserviceUsp #rechts .item { position: relative; float: right; height: 30px; cursor: pointer; text-transform: uppercase; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 12px; } #containerKlantenserviceUsp #rechts .item.alleShops:hover #containerAlleShops { display: block; } #containerKlantenserviceUsp #rechts #containerAlleShops { display: none; position: absolute; width: 550px; right: 0; top: 29px; background-color: #fff; border: 1px solid #e9e9e9; z-index: 99; color: #3d3d3d; cursor: default; } #containerKlantenserviceUsp #containerAlleShops #shopsLinks { position: relative; float: left; width: 50%; text-align: center; height: 170px; border-right: 1px solid #f5f5f5; } #containerKlantenserviceUsp #containerAlleShops #shopsLinks img { margin-top: 77px; max-width: 60%; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts { position: relative; float: right; width: 43%; padding: 40px 0 0 0; text-align: left; text-transform: none; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts .shops { position: relative; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts .shops .icon { position: relative; float: left; width: 5px; height: 5px; margin-top: 9px; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts .shops .shop { position: relative; float: left; margin-left: 10px; font-family: Century Gothic, AppleGothic, sans-serif; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts .shops .shop a { color: #3d3d3d; } #containerKlantenserviceUsp #containerAlleShops #shopsRechts .shops .stelEinde { height: 2px; } #containerAccountUpdate { height: 20px; width: 100px; padding-right: 20px; background-image: url('../../images/IMG_header_pijl_beneden.png'); background-repeat: no-repeat; background-position: right 7px; background-size: 12px; } #containerAccountUpdate #welkomNaam { position: relative; height: 17px; overflow: hidden; text-align: right; } #containerAccountUpdate #welkomNaam #welkom { position: absolute; right: 0; } #containerAccountUpdate #welkomNaam #naam { position: absolute; top: -20px; right: 0; } #containerKlantenserviceUsp a { color: #fff; } /* #containerHeaderTopActie {display: none;} */ #containerHeaderTopActie { position: relative; height: 45px; background-color: #FBF4E6; } #containerHeaderTopActie .links { position: relative; float: left; padding-top: 14px; padding-left: 27%; font-size: 13px; font-family: Century Gothic, AppleGothic; color: #272727; } #containerHeaderTopActie .rechts { position: relative; float: right; width: 50%; padding-top: 3px; } #containerHeaderTopActie .rechts div { float: right; } #containerHeaderTopActie .rechts div.verzending img { margin-top: -1px; } #containerHeaderTopActie .rechts div.verzending img.vlag { margin-left: 5px; margin-top: 7px; } #containerHeaderTopActie .rechts div.levertijd img { margin-top: 2px; } #containerHeaderTopActie .rechts div.levertijd:hover { text-decoration: underline; } #containerHeaderTopActie .rechts div img { display: inline-block; margin-right: 7px; } #containerHeaderTopActie .rechts div img.margeLinks { margin-left: 35px; } #containerHeader { positon: relative; } #containerHeader.responsiveMenu #headerLogo { height: 49px; width: 25%; margin-right: 37px; } #containerHeader.responsiveMenu #containerButtonSubmenuResponsive { display: block; } #containerHeader #containerButtonSubmenuMobiel { position: absolute; display: none; left: 2%; top: 17px; padding: 0; width: 28px; height: 22px; z-index: 50; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #containerHeader #containerButtonSubmenuMobiel span { display: block; position: absolute; height: 4px; width: 100%; background: #4d4d4d; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #containerHeader #containerButtonSubmenuMobiel span:nth-child(1) { top: 0px; } #containerHeader #containerButtonSubmenuMobiel span:nth-child(2),#containerHeader #containerButtonSubmenuMobiel span:nth-child(3) { top: 8px; } #containerHeader #containerButtonSubmenuMobiel span:nth-child(4) { top: 16px; } #containerHeader #containerButtonSubmenuMobiel.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; } #containerHeader #containerButtonSubmenuMobiel.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform:rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #containerHeader #containerButtonSubmenuMobiel.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #containerHeader #containerButtonSubmenuMobiel.open span:nth-child(4) { top: 3px; width: 0%; left: 50%; } #containerHeader #containerButtonSubmenuResponsive { position: relative; display: none; float: left; padding: 0; margin: 25px 15px 0 0; width: 28px; height: 22px; z-index: 50; cursor: pointer; } #containerHeader #containerButtonSubmenuResponsive .lijn { position: relative; width: 100%; height: 4px; margin: 2px 0 4px 0; background-color: #4d4d4d; border-radius: 9px; } #containerHeader #headerLogo { position: relative; float: left; width: 27%; margin: 15px 5% 15px 0; } #containerHeader #headerLogo img { max-width: 100%; max-height: 100%; } #containerHeader #headerZoeken { position: relative; float: left; width: 30%; margin-top: 22px; padding: 2px 4px 2px 4px; border: 1px solid #dadada; } .ui-autocomplete { position: absolute; cursor: default; z-index: 30 !important; } #containerHeader #headerZoeken form { margin: 0; } #containerHeader #headerZoeken input.formVeld { background-color: #fff; border: 0px; width: 94%; padding: 6px 3% 6px 3%; outline: none; } #containerHeader #headerZoeken input#buttonZoeken { position: absolute; right: 10px; top: 9px; width: 16px; height: 16px; } #containerHeader #headerOpties { position: relative; float: right; width: 34%; margin-top: 13px; } #containerHeader #headerOpties #thuiswinkelWaarborgfonds { position: relative; float: left; width: 40px; margin-top: 5px; margin-right: 15px; } #containerHeader #headerOpties #thuiswinkelWaarborgfonds img { max-width: 100%; max-height: 100%; } #containerHeader #headerOpties #eCommerceEuropeTrust { position: relative; float: left; width: 40px; margin-top: 9px; margin-right: 20px; } #containerHeader #headerOpties #eCommerceEuropeTrust img { max-width: 100%; max-height: 100%; } #containerHeader #headerOpties #reviews { position: relative; float: left; position: relative; float: left; margin-top: 10px; } #containerHeader #headerOpties #reviews #itemreviewed, #containerHeader #headerOpties #reviews .best { display: none; } #containerHeader #headerOpties #reviews .rating { position: relative; float: left; width: 73px; height: 14px; margin: 4px 5px 0px 0px; background-image: url('../../images/BG_reviews_grijs.png'); background-size: 73px 14px; background-repeat: no-repeat; } #containerHeader #headerOpties #reviews .rating .actief { position: absolute; left: 0px; top: 0px; height: 15px; background-image: url('../../images/BG_reviews_actief.png'); background-size: 73px 14px; background-repeat: no-repeat; } #containerHeader #headerOpties #reviews .score { position: relative; float: left; width: 20px; height: 15px; font-size: 10px; } #containerHeader #headerOpties #reviews .aantal { position: relative; float: none; width: 100%; height: 15px; font-size: 10px; } #containerHeader #headerOpties #containerWinkelmandAccount { position: relative; float: right; line-height: 18px; } #containerHeader #headerOpties #containerWinkelmandAccount #account { position: relative; float: left; width: 40px; margin: 9px 0 0 0; z-index: 1; } #containerHeader #headerOpties #containerWinkelmandAccount #account #imgHeaderAccount { margin-top: 6px; } #containerHeader #headerOpties #containerWinkelmandAccount #account img { position: relative; float: left; width: 27px; height: auto; margin-top: 2px; } #containerHeader #headerOpties #containerWinkelmandAccount #aantalProducten { display: none; position: absolute; right: -5px; top: 2px; background-color: #5a5a5a; color: #fff; width: 17px; height: 17px; font-size: 11px; text-align: center; line-height: 17px; -webkit-border-radius: 10px; border-radius: 10px; z-index: 2; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand { position: relative; float: left; width: 108px; margin: 11px 0 0 0; z-index: 1; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand .aantalInWinkelmand { position: absolute; left: 4px; top: 13px; width: 20px; text-align: center; font-size: 12px; font-family: Century Gothic, AppleGothic, sans-serif; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #imgHeaderWinkelmand { margin-top: 6px; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand img { position: relative; float: left; width: 27px; height: auto; margin-top: 2px; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #inhoud { position: absolute; right: 0px; top: 0px; width: 70px; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver { position: absolute; right: 0px; top: 35px; width: 350px; padding-top: 15px; display: none; z-index: 30; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .container { border: 1px solid #e8e8e8; padding: 2%; background-color: #fff; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver #laden { height: 40px; margin: 20px 0 20px 0; background-image: url('../../images/IMG_laden.gif'); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; display: none; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver #geenProducten { position: relative; padding: 20px 40px 20px 40px; text-align: center; font-size: 16px; text-transform: uppercase; font-family: Century Gothic, AppleGothic, sans-serif; color: #afafaf; line-height: 24px; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .start { border-bottom: 1px solid #e6e6e6; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .product { position: relative; float: left; width: 44%; height: 195px; padding: 3% 3% 5% 3%; line-height: 17px; text-align: center; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .product .afbeelding { position: relative; margin: 0px 15px 0px 5px; text-align: center; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .product .afbeelding img { float: none; position: relative; width: 60%; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .product .prijs { font-size: 12px; margin-top: 5px; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .product .aantal { font-size: 10px; color: #999999; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .grijs { background-color: #f8f8f8; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .totaalBedrag { margin-top: 5px; text-align: right; padding-right: 5px; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 13px; font-weight: normal; color: #645b58; text-transform: uppercase; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .gratisVerzending { margin-top: 5px; text-align: right; border-top: 1px solid #e6e6e6; padding: 5px 5px 5px 0; font-size: 12px; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .buttons { margin: 1px 0px 5px 0px; border-top: 1px solid #e6e6e6; padding-top: 10px; text-align: right; } #containerHeader #headerOpties #containerWinkelmandAccount #winkelmand #mouseOver .producten .buttons input { cursor: pointer; } /* ---------------------------------------------------------------------------------------- */ /* M E N U */ #containerMenu { position: relative; background-color: #f5f5f5; height: 40px; z-index: 19; overflow: visible; } #containerMenu ul li { float: left; padding: 9px 10px 7px 10px; margin: 0 3px 0 3px; height: 24px; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 14px; } #containerMenu ul li:hover, #containerMenu ul li.selected { background-color: #e7e7e7; } #containerMenu ul li:not(..overWeergeven):hover { cursor: pointer; } #containerMenu .titel { display: none; } #containerMenu #menu { display: table; margin: 0 auto; } #containerMenu #menu ul li { display: inline; } #containerMenu #menu ul li.home img { margin-top: 2px; } #containerMenu #menu ul li.overWeergeven:not(.touch):hover .menuOver { display: block; } #containerMenu #menu ul li .menuOver { position: absolute; display: none; left: 0px; top: 40px; width: 100%; z-index: 19; font-size: 12px; color: #353535; background-color: #fbfbfb; border-bottom: 10px solid #fbfbfb; } #containerMenu #menu ul li .menuOver a { color: #353535; } #containerMenu #menu ul li .menuOver .containerSite { position: relative; padding: 30px 53px 10px 53px; background-color: #fff; } #containerMenu #menu ul li .menuOver .containerSite span.titel { display: block; font-weight: normal; font-size: 20px; margin: 0 0 10px 0; font-family: Century Gothic, AppleGothic, sans-serif; } #containerMenu #menu ul li .menuOver .containerSite .rubrieken { position: relative; float: left; width: 20%; border-right: 3px solid #f5f5f5; } #containerMenu #menu ul li .menuOver .containerSite .merken { position: relative; float: left; width: 35%; margin-left: 5%; border-right: 3px solid #f5f5f5; } #containerMenu #menu ul li .menuOver .containerSite .merken .merkLinks { position: relative; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } #containerMenu #menu ul li .menuOver .containerSite .merken .merkLinks .merk { position: relative; } #containerMenu #menu ul li .menuOver .containerSite .banner { position: relative; float: right; width: 35%; height: 200px; margin-top: 20px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #containerMenu #menu ul li .menuOver .containerSite .banner img { width: 100%; } #containerMenu #menu ul li .menuOver .containerSite .footer { margin-top: 23px; border-bottom: 3px solid #e9e9e9; padding-bottom: 8px; } #containerMenu #menu .alleShops { position: absolute; left: 0; top: 0; height: calc(100% - 8px); background-color: #e7e7e7; padding: 8px 10px 0 10px; line-height: 13px; font-weight: bold; font-size: 10px; cursor: pointer; } #containerMenu .containerSite { border-bottom: 10px solid #fbfbfb; } #containerMenu #menu .alleShops span { font-family: Century Gothic, AppleGothic, sans-serif; margin-top: 5px; font-weight: normal; font-weight: 14px; } #alleShopsHover { position: absolute; left: 0; top: 40px; width: 100%; background-color: #fafafa; font-family: Century Gothic, AppleGothic, sans-serif; } #alleShopsHover .containerSite { position: relative; padding: 20px; background-color: #fff; } #alleShopsHover.laden { display: none; height: 100px; background-position: 50% 50%; background-image: url('../../images/IMG_laden.gif'); background-repeat: no-repeat; background-size: 50px; } #alleShopsHover .shop { position: relative; float: left; width: 20%; padding-left: 1%; margin-right: 3%; border-right: 1px solid #ebebeb; } #alleShopsHover .shop .icon { position: relative; float: left; width: 10%; margin-right: 12px; height: 30px; width: 30px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } #alleShopsHover .shop .shopTitel { position: relative; float: left; width: 80%; padding-top: 7px; margin-bottom: 5px; font-size: 16px; } #alleShopsHover .shop .items { position: relative; margin-top: 10px; } #alleShopsHover .shop .items .item { position: relative; } #alleShopsHover .shop .items .item:hover { text-decoration: underline; } #alleShopsHover .shop .rubriek { position: relative; margin-bottom: 3px; font-family: Century Gothic, AppleGothic, sans-serif; font-weight: bold; } #alleShopsHover .shop .categorieen { position: relative; margin-bottom: 10px; } #alleShopsHover .shop.merken { position: relative; border-right: 0; margin-right: 0; } #alleShopsHover .shop.merken .shopMerkLinks { position: relative; display: none; } #alleShopsHover .shop.merken .shopMerkLinks .link { position: relative; text-decoration: underline; margin-left: 10px; color: #818181; } #alleShopsHover .shop.merken .shopMerkLinks .link a { color: #818181; } #containerMenu #submenu { positon: relative; float: right; width: 40%; } #containerMenu #submenu ul { float: right; } #containerMenu #submenu ul li:nth-child(odd) { background-color: #ececec; } #containerMenu #serviceMenu { display: none; } /* ---------------------------------------------------------------------------------------- */ /* C O N T E N T */ /* Algemene container */ #containerContent { padding-top: 10px; } /* Home: merken */ #containerMerkenHome { position: relative; height: 60px; margin: 20px 0 60px 0px; padding: 0 0 40px 15px; overflow: hidden; border-bottom: 5px solid #f5f5f5; } #containerMerkenHome .merk { position: relative; float: left; width: 9%; margin-left: 1%; margin-right: 1%; height: 60px; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } /* Producten filter */ #containerProductFilter { position: relative; float: left; width: 20%; margin-top: 3px; } #containerProductFilter .containerFilterenGeselecteerd { margin-bottom: 20px; width: 90%; } #containerProductFilter .containerFilterenGeselecteerd .item { padding: 1px 10px 1px 10px; margin-bottom: 5px; background-color: #fbfbfb; background-image: url('../../images/BG_verfijnen_wis_selectie.png'); background-repeat: no-repeat; background-size: 10px 10px; background-position: right 7px center; } #containerProductFilter .rubriekFilter { position: relative; margin-bottom: 30px; font-family: Century Gothic, AppleGothic, sans-serif; } #containerProductFilter .rubriekFilter .kop { font-size: 16px; text-transform: uppercase; } #containerProductFilter .rubriekFilter .item { position: relative; } #containerProductFilter .rubriekFilter .categorieen { margin-left: 10px; } #containerProductFilter .rubriekFilter .categorieen .subcategorieen { margin-left: 10px; } #containerProductFilter .filters { border-top: 1px solid #d9d9d9; width: 90%; } #containerProductFilter .buttonFilter { position: relative; float: left; margin-right: 8px; margin-bottom: 10px; display: none; padding: 8px 12px 8px 32px; cursor: pointer; border: 2px solid #f1f1f1; font-family: Century Gothic, AppleGothic, sans-serif; color: #666; } #containerProductFilter .buttonFilter.selected { background-color: #f7f7f7; } #containerProductFilter .buttonFilter#buttonRubrieken { background-image: url('../../images/BG_filteren_rubrieken.png'); background-position: 9px 11px; background-repeat: no-repeat; background-size: 15px 14px; } #containerProductFilter .buttonFilter#buttonFilters { background-image: url('../../images/BG_filteren_filters.png'); background-position: 9px 11px; background-repeat: no-repeat; background-size: 18px 14px; } #containerProductFilter .filters .filter { border-bottom: 1px solid #d9d9d9; font-family: Century Gothic, AppleGothic, sans-serif; } #containerProductFilter .filters .filter .kop { position: relative; padding: 7px 8px 7px 8px; font-size: 14px; font-family: Century Gothic, AppleGothic, sans-serif; color: #343434; background-image: url('../../images/BG_submenu_verfijnen_pijl.png'); background-repeat: no-repeat; background-position: top 14px right 12px; background-size: 10px 7px; cursor: pointer; } #containerProductFilter .filters .filter.selected .kop { background-image: url('../../images/BG_submenu_verfijnen_pijl_m.png'); } #containerProductFilter .filters .filter .items { padding: 8px; display: none; } #containerProductFilter .filters .filter.selected .items { display: block; } #containerProductFilter .filters .filter.dubbeleWeergave .items { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } #containerProductFilter .filters .filter .items .item { padding: 4px 0 5px 25px; background-image: url('../../images/BUT_verfijnen.png'); background-repeat: no-repeat; background-size: 15px 15px; background-position: 0px 5px; } #containerProductFilter .filters .filter .items .item.selected { background-image: url('../../images/BUT_verfijnen_M.png'); } #containerProductFilter #rubriekBericht { margin-top: 20px; font-size: 11px; text-align: justify; width: 90%; } #containerProductFilter #rubriekBericht h1 { font-size: 14px; text-align: left; } #containerProductFilter #rubriekBericht h2 { font-size: 13px; text-align: left; } /* Producten overzicht */ .containerProducten { position: relative; overflow: visible; } .containerProducten.filterWeergeven { float: right; width: 80%; } .containerProducten .headerAfbeelding { position: relative; margin-bottom: 5px; } .containerProducten #merkKoppelingen { position: relative; margin: 20px 0 20px 10px; } .containerProducten #merkKoppelingen .item { position: relative; float: left; width: 25%;} .containerProducten #merkKoppelingen .subitem { position: relative; padding-left: 10px; background-image: url('../../images/IMG_locatie_pijl.jpg'); background-repeat: no-repeat; background-position: 0px 7px; } .containerProducten #merkKoppelingen .subitem:hover { text-decoration: underline; } .containerProducten #merkKoppelingen .subitem a { color: #818181; } .containerProducten #merkKoppelingen .item span { text-transform: uppercase; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 16px; } .containerProducten .header { font-size: 10px; color: #707070; margin-bottom: 20px; padding: 4px 0px 4px 15px; background-color: #f8f8f8; } .containerProducten .header #links { position: relative; float: left; width: 40%; padding-top: 2px; } .containerProducten .header #rechts { position: relative; float: right; width: 60%; } .containerProducten .header #rechts .titel { display: inline-block; float: right; padding: 1px 10px 0 0; } .containerProducten .header #rechts .sorterenButton { display: inline-block; float: right; border: 1px solid #e0e0e0; padding: 1px 10px 1px 10px; margin-right: 5px; cursor: pointer; font-size: 11px; } .containerProducten .header #rechts .sorterenButton:hover { background-color: #e9e9e9; -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; } .containerProducten .filterResultatenProducten { position: relative; } .containerProducten .product { position: relative; float: left; width: 184px; height: 330px; margin: 0px 2% 4% 2%; font-family: Century Gothic, AppleGothic, sans-serif; } .containerProducten .product .afbeelding { position: relative; width: 90%; height: 240px; margin: 0px auto; background-repeat: no-repeat; background-position: 50% bottom; background-size: contain; overflow: visible; } .containerProducten .product .afbeelding img { max-width: 100%; max-height: 100%; } .containerProducten .product .afbeelding .mouseOver { display: none; position: absolute; left: 0; top: -20px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% bottom; background-size: contain; background-color: #fff; } .containerProducten .product .prijs { position: absolute; top: 294px; left: 0px; width: 75px; height: 40px; font-family: Arial; background-color: transparent; } .containerProducten .product .prijs.aanbieding { height: 48px; padding-left: 37px; background-color: transparent; } .containerProducten .product .prijs .containerPrijs { font-size: 25px; } .containerProducten .product .prijs .containerPrijs .aanbieding { position: absolute; left: 0px; top: 7px; width: 85%; font-size: 12px; text-decoration: line-through; color: #666; } .containerProducten .product .prijs .containerPrijs.nul { margin-top: 4px; } .containerProducten .product .prijs .containerPrijs sup { font-size: 12px; margin-left: -3px; } .containerProducten .product .prijs .containerPrijs sup.nul { font-size: 25px; } .containerProducten .product .prijs .new { position: absolute; left: 65px; top: 2px; width: 28px; height: 28px; background-size: contain; } .containerProducten .product .prijs .sale { position: absolute; left: 89px; top: 2px; width: 28px; height: 28px; background-size: contain; } .containerProducten .product .pack { position: absolute; right: 10px; top: 20px; width: 60px; height: 60px; background-size: contain; } .containerProducten .product .titel { position: relative; float: left; width: 100%; margin-top: 10px; } .containerProducten .product .titel strong { font-size: 12px; font-weight: normal; text-transform: uppercase; } .containerProducten .product .winkelwagen { display: none; } .containerProducten .product .voorraad { position: relative; float: right; width: 40%; margin-top: 3px; font-size: 10px; font-weight: bold; text-transform: uppercase; text-align: right; line-height: 14px; } .containerProducten .product .quickShop { display: none; position: absolute; left: 53px; top: 160px; width: 80px; height: 26px; padding-top: 6px; color: #fff; text-align: center; background-color: #929292; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 5px; } .containerProducten .product .quickShop:hover, .containerProducten .product .quickShop.selected { background-color: #636363; } .containerProducten .sorterenData { display: none; } .containerProducten .product .new img, .containerProducten .product .pack img, .containerProducten .product .sale img { width: 100%; height: 100%; } .containerProducten .containerQuickShop { display: none; clear: both; position: relative; float: none; width: 100%; padding: 20px 3% 10px 3%; margin-bottom: 10px; border: 10px solid #f6f6f6; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .containerProducten .containerQuickShop #laden { width: 100%; height: 100px; background-image: url('../../images/IMG_laden.gif'); background-position: 50% 40%; background-repeat: no-repeat; background-size: 50px 50px; } .containerProducten .containerQuickShop #containerProduct #buttonSluiten { position: absolute; right: 15px; top: 15px; width: 17px; height: 17px; background-color: #bbb; background-image: url('../../images/BG_kruis_kader.png'); background-size: cover; background-repeat: no-repeat; cursor: pointer; } .containerProducten .containerQuickShop #containerProduct #buttonSluiten:hover { background-color: #cfcfcf; } .containerProducten .containerQuickShop #containerProduct #details { width: 25%; } .containerProducten .containerQuickShop #containerProduct #details #logo { width: 150px; } .containerProducten .containerQuickShop #containerProduct #afbeelding { postion: relative; float: left; width: 30%; } .containerProducten .containerQuickShop #containerProduct #winkelwagen { margin-top: 30px; } .containerProducten #containerLaadMeer .laden { height: 40px; margin: 20px 0 20px 0; background-image: url('../../images/IMG_laden.gif'); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; display: none; font-style: italic; } /* Product details */ #containerProduct { margin-top: 30px; } #containerProduct #afbeelding { postion: relative; float: left; width: 33%; } #containerProduct #afbeelding #thumbs { position: relative; width: 100%; margin-top: 20px; } #containerProduct #afbeelding #thumbs.verbergen { display: none; } #containerProduct #afbeelding #thumbs div { float: left; width: 69px; margin-right: 5px; } #containerProduct #afbeelding #thumbs div img { width: 69px; } #containerProduct #details { postion: relative; float: left; width: 30%; } #containerProduct #details #logo { width: 40%; margin-bottom: 15px; } #containerProduct #details #logo img { max-width: 100%; max-height: 80px; } #containerProduct #details h1 { color: #4c4c4c; font-size: 20px; margin-bottom: -3px; } #containerProduct #details #meerVan { font-size: 10px; margin-bottom: 20px; } #containerProduct #details #meerVan img { margin-left: 5px; } #containerProduct #details .titel { font-size: 13px; font-family: Century Gothic, AppleGothic, sans-serif; color: #4c4c4c; } #containerProduct #details .prijs { font-size: 30px; margin-top: 9px; } #containerProduct #details .prijs.aanbieding span { font-size: 18px; color: #666; margin-right: 15px; text-decoration: line-through; } #containerProduct #details .directLeverbaar { margin-top: 8px; text-transform: uppercase; font-size: 9px; color: #888; } #containerProduct #details .samenstelling { font-family: Century Gothic, AppleGothic, sans-serif; color: #898989; font-style: italic; margin-top: 25px; } #containerProduct #details .artikelOmschrijving { position: relative; margin-top: 20px; } #containerProduct #details .artikelOmschrijving ul { list-style: disc; } #containerProduct #details .artikelOmschrijving ul li { margin-left: 40px; } #containerProduct #details .extraButtons { position: relative; margin-top: 30px; } #containerProduct #details .extraButtons div { background-position: 0 3px; background-size: 15px 15px; background-repeat: no-repeat; padding-left: 24px; margin-bottom: 3px; font-size: 12px; font-family: Century Gothic, AppleGothic, sans-serif; color: #474747; } #containerProduct #details .extraButtons a:hover { text-decoration: underline; } #containerProduct #winkelwagen { postion: relative; float: right; width: 30%; } #containerProduct #winkelwagen .titel { position: relative; font-family: Century Gothic, AppleGothic, sans-serif; margin-bottom: 5px; } #containerProduct #winkelwagen .titel .maattabel { position: absolute; top: 0; right: 0; color: #656565; font-size: 13px; } #containerProduct #winkelwagen .titel .maattabel img { margin-left: 5px; } #containerProduct #winkelwagen #maatTijdelijkNietLeverbaar { position: relative; color: #49af48; } #containerProduct #winkelwagen #maatTijdelijkNietLeverbaar.hide { display: none; } #containerProduct #winkelwagen select { width: 100%; -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(../../images/BG_select_pijl.png), -webkit-linear-gradient(#fbfbfb, #eeeeee 100%, #dddddd); background-size: 27px 22px, 100% 100%; background-position: right 12px top 8px, center right; background-repeat: no-repeat; border: 1px solid #dddddd; color: #6e6e6e; margin: 3px 0 10px 0; overflow: hidden; padding-top: 4px; padding-bottom: 5px; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; height: 40px; -webkit-border-radius: 0; border-radius: 0; } #containerProduct #winkelwagen select.formFout { border: 1px solid #da6767; } #containerProduct #winkelwagen .formButton.bestellen { margin-top: 10px; width: 100%; padding-top: 7px; padding-bottom: 8px; font-size: 18px; text-transform: uppercase; cursor: pointer; } #containerProduct #winkelwagen .formButton.verlanglijst { margin-top: 7px; width: 100%; padding-top: 9px; padding-bottom: 10px; font-size: 14px; color: #a1a1a1; border: 1px solid #bababa; text-transform: uppercase; cursor: pointer; } #containerProduct #winkelwagen .usp { width: 80%; margin-top: 15px; background-color: #f5f5f5; padding: 25px 10% 25px 10%; font-family: Century Gothic, AppleGothic, sans-serif; color: #6a6a6a; } #containerProduct #winkelwagen .usp a { color: #6a6a6a; } #containerProduct #winkelwagen .usp li { margin-bottom: 5px; } #containerProduct #winkelwagen .usp li img { margin-right: 8px; margin-top: -2px; vertical-align: middle; } #containerProduct #containerKleuren { padding: 30px 0 10px 0; text-align: center; border-top: 5px solid #f5f5f5; margin-top: 30px; } #containerProduct #containerKleuren .kleur { position: relative; display: inline-block; vertical-align: top; margin: 0 10px 0 10px; height: 110px; width: 50px; cursor: pointer; } #containerProduct #containerKleuren .kleur .kleurDetails { height: 60px; margin-bottom: 10px; } #containerProduct #containerKleuren .kleur .kleurDetails.foto img { max-height: 100%; } #containerProduct #containerKleuren .kleur .titel { position: relative; text-align: center; font-size: 11px; line-height: 12px; height: 30px; } #containerProduct #eigenschappen { position: relative; float: left; width: 40%; margin-top: 30px; } #containerProduct #eigenschappen #tabs { border-bottom: 1px solid #f6f6f6; height: 28px; } #containerProduct #eigenschappen #tabs div { position: relative; float: left; background-color: #f6f6f6; padding: 4px 10px 3px 10px; margin-right: 5px; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; font-size: 13px; color: #5d5d5d; cursor: pointer; } #containerProduct #eigenschappen #tabs div.selected, #containerProduct #eigenschappen #tabs div:hover { color: #fff; } #containerProduct #eigenschappen #containers { margin-top: 30px; } #containerProduct #eigenschappen #containers .tab { display: none; } #containerProduct #eigenschappen #containers .tab.selected { display: block; } #containerProduct #eigenschappen #containers .tab#kenmerken .berichtUitgebreid ul { list-style: disc; } #containerProduct #eigenschappen #containers .tab#kenmerken .berichtUitgebreid ul li { margin-left: 20px; } #containerProduct #eigenschappen #containers .tab#kenmerken .kenmerk { padding: 5px 3px 5px 3px; font-family: Century Gothic, AppleGothic, sans-serif; color: #686868; } #containerProduct #eigenschappen #containers .tab#kenmerken .kenmerk a { color: #686868; } #containerProduct #eigenschappen #containers .tab#kenmerken .titel { float: left; width: 25%; margin-left: 3%; } #containerProduct #eigenschappen #containers .tab#kenmerken .waarde { float: right; width: 70%; text-indent: -7px; } #containerProduct #eigenschappen #containers .tab#kenmerken .waarde a:hover { text-decoration: underline; } #containerProduct #eigenschappen #containers .tab#kenmerken .grijs { background-color: #f6f6f6; } #containerProduct #eigenschappen #containers .tab#merk #meerVanMerk { margin: 10px 0px 10px 0px; } #containerProduct #eigenschappen #containers .tab#merk #meerVanMerk img { margin-left: 4px; } #containerProduct #eigenschappen #containers .tab#merk #meerVanMerk a:hover { text-decoration: underline; } #containerProduct #gerelateerd { position: relative; float: right; width: 55%; margin-top: 30px; } #containerProduct #gerelateerd.containerProducten .kop { font-weight: normal; font-size: 25px; margin: 0px; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; line-height: 30px; margin-bottom: 15px; } #containerProduct #gerelateerd.containerProducten .product { width: 29%; } /*Product reviews*/ #productTabGerelateerdReviews.containerProdReviews { position: relative; } .containerProdReviews #inleiding { margin-bottom: 20px; } .containerProdReviews #inleiding #content { position: relative; float: left; width: 68%; } .containerProdReviews #inleiding #content #schrijfReview { margin-top: 5px; margin-left: -1px; } .containerProdReviews #inleiding #logos { position: relative; float: right; width: 25%; text-align: right; } .containerProdReviews #inleiding #logos #thuiswinkelWaarborg { margin-top: 5px; margin-bottom: 10px; } .containerProdReviews #inleiding #logos img { width: 60%; } .containerProdReviews .review { position: relative; margin-bottom: 20px; padding-top: 10px; border-top: 3px solid #f5f5f5; } .containerProdReviews .review .content { float: left; width: 73%; } .containerProdReviews .review .content .noshowtitel { display: none; } .containerProdReviews .review .content .name { font-weight: bold; font-size: 12px; } .containerProdReviews .review .content .bericht { } .containerProdReviews .review .content .cijfers { } .containerProdReviews .review .content .cijfers .item { position: relative; float: left; width: 173px; } .containerProdReviews .review .content .cijfers .item .omschrijving { position: relative; float: left; width: 110px; } .containerProdReviews .review .content .cijfers .item .cijfer { position: relative; float: left; width: 20px; } .containerProdReviews .review .beoordeling { float: right; width: 15%; } .containerProdReviews .review .beoordeling .rating { position: relative; width: 81px; height: 15px; background-image: url('../../images/BG_reviews_grijs.png'); background-repeat: no-repeat; } .containerProdReviews .review .beoordeling .rating .actief { position: absolute; left: 0px; top: 0px; height: 15px; background-image: url('../../images/BG_reviews_actief.png'); background-repeat: no-repeat; } .containerProdReviews .review .beoordeling .website { position: relative; font-style: italic; font-size: 10px; } .containerProdReviews .review .reactie { margin-top: 10px; margin-left: 30px; padding: 15px 20px 15px 20px; width: 450px; background-color: #f8f8f8; } .containerProductReviews { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; } .containerProductReviews #inleiding { margin-bottom: 20px; } .containerProductReviews #inleiding #content { position: relative; float: left; width: 550px; } .containerProductReviews #inleiding #content #schrijfReview { margin-top: 5px; margin-left: -1px; } .containerProductReviews #inleiding #logos { position: relative; float: right; width: 130px; } .containerProductReviews #inleiding #logos #thuiswinkelWaarborg { margin-top: 5px; margin-bottom: 20px; } .containerProductReviews .review { margin-bottom: 0px; margin-top: 0px; } .containerProductReviews .review .content { float: left; width: 900px; } .containerProductReviews .review .content .name { font-weight: bold; font-size: 12px; } .containerProductReviews .review .content .bericht { } .containerProductReviews .review .content .noshowtitel { display: none; } .containerProductReviews .review .content .cijfers { } .containerProductReviews .review .content .cijfers .item { position: relative; float: left; width: 173px; } .containerProductReviews .review .content .cijfers .item .omschrijving { position: relative; float: left; width: 110px; } .containerProductReviews .review .content .cijfers .item .cijfer { position: relative; float: left; width: 20px; } .containerProductReviews .review .beoordeling { float: left; width: 248px; margin-top: 10px;} .containerProductReviews .review .beoordeling .rating { position: relative; width: 81px; height: 15px; background-image: url('../../images/BG_reviews_grijs.png'); background-repeat: no-repeat; } .containerProductReviews .review .beoordeling .rating .actief { position: absolute; left: 0px; top: 0px; height: 15px; background-image: url('../../images/BG_reviews_actief.png'); background-repeat: no-repeat; } .containerProductReviews .review .beoordeling .score { margin-left: 90px; margin-top: -19px; } .containerProductReviews .review .beoordeling .reviewCount { display: none; } .containerProductReviews .review .reactie { margin-top: 10px; margin-left: 30px; padding: 15px 20px 15px 20px; width: 450px; background-color: #f8f8f8; } /* Winkelwagen pagina */ #containerWinkelwagen { } #containerWinkelwagen .header div, #containerWinkelwagen .productRij div { position: relative; float: left; padding-left: 2%; } #containerWinkelwagen .artikel { width: 28%; } #containerWinkelwagen .artikel .voorraad { position: relative; float: none; padding-left: 0; margin-top: 5px; font-size: 10px; font-weight: bold; text-transform: uppercase; line-height: 14px; } #containerWinkelwagen .artikel .voorraad.nalevering { color: #f49650 } #containerWinkelwagen .kleur, #containerWinkelwagen .maat, #containerWinkelwagen .aantal, #containerWinkelwagen .totaal { width: 13%; } #containerWinkelwagen .verwijderen { width: 9%; } #containerWinkelwagen .totaal { width: 5%; } #containerWinkelwagen .header { position: relative; height: 30px; padding-top: 10px; background-color: #f8f8f8; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; } #containerWinkelwagen .productRij { position: relative; border-bottom: 1px solid #e6e6e6; padding: 5px 0 5px 0; height: 95px; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 14px; } #containerWinkelwagen .productRij:hover { background-color: #fefefe; } #containerAdressenboek #containerWinkelwagen .productRij:hover { background-color: transparent; } #containerWinkelwagen .productRij .artikel { font-size: 13px; padding-top: 5px; } #containerWinkelwagen .productRij .artikel .afbeelding { margin: 8px 25px 0px 10px } #containerWinkelwagen .productRij .artikel .uitverkocht { float: none; display: inline-block; padding: 3px 10px 1px 10px; background-color: #c62d1d; color: #fff; font-size: 11px; -webkit-border-radius: 5px; border-radius: 5px; } #containerWinkelwagen .productRij .kleur, #containerWinkelwagen .productRij .maat, #containerWinkelwagen .productRij .totaal { padding-top: 37px; } #containerWinkelwagen .productRij .aantal { padding-top: 32px; } #containerWinkelwagen .productRij .aantal select { width: 80px; -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(../../images/BG_select_pijl.png); background-size: 27px 22px, 100% 100%; background-position: right 8px top 4px; background-repeat: no-repeat; border: 1px solid #dddddd; color: #6e6e6e; overflow: hidden; padding-bottom: 2px; padding-left: 10px; text-overflow: ellipsis; white-space: nowrap; height: 32px; -webkit-border-radius: 0; border-radius: 0; } #containerWinkelwagen .productRij .verwijderen { padding-top: 31px; } . #containerWinkelwagen .totaalLijn { position: relative; } #containerWinkelwagen .totaalLijn .eigenschap { position: relative; float: left; width: 430px; padding-top: 5px; } #containerWinkelwagen .totaalLijn .eigenschap .alignRechts { position: absolute; right: 20px; top: 5px; text-align: right; } #containerWinkelwagen .totaalLijn .waarde { position: relative; float: left; width: 90px; padding-top: 5px; } #containerWinkelwagen .totaalLijn .waarde.lijnBoven { border-top: 1px solid #e6e6e6 } #containerWinkelwagen .cadeaubonSelecteren { padding: 10px; border: 3px solid #e0e0e0; background-color: #fdfdfd; } .prijsWeergave { position: relative; width: 60px; text-align: right; } .prijsWeergave span { position: absolute; left: 0px; top: 0px; } .prijsWeergave span.eur { margin-left: -25px; } #containerWinkelwagen #containerKortingscode { position: relative; border-top: 3px solid #f8f8f8; margin-top: 40px; padding: 15px; color: #848484; } #containerWinkelwagen #containerKortingscode.weergeven #titel { display: none; } #containerWinkelwagen #containerKortingscode.weergeven #kortingscode { display: block; } #containerWinkelwagen #containerKortingscode #titel { cursor: pointer; font-style: italic; } #containerWinkelwagen #containerKortingscode #kortingscode { display: none; } #containerWinkelwagen #containerTotaal { position: relative; background-color: #f8f8f8; padding: 15px 15px 15px 15px; } #containerWinkelwagen #containerTotaal #usp { position: relative; float: left; width: 20%; margin-left: 50%; padding-top: 15px; font-size: 11px; color: #848484; line-height: 25px; font-family: Century Gothic, AppleGothic, sans-serif; } #containerWinkelwagen #containerTotaal #totaal { position: relative; float: right; width: 25%; padding: 2% 2% 1% 2%; background-color: #fff; border: 1px solid #f2f2f2; text-transform: uppercase; color: #464646; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 14px; } #containerWinkelwagen #containerTotaal #totaal .bedragRij { position: relative; width: 100%; padding-bottom: 8px; } #containerWinkelwagen #containerTotaal #totaal .bedragRij.totaal { font-size: 16px; } #containerWinkelwagen #containerTotaal #totaal .bedragRij .titel { position: relative; float: left; width: 50%; padding-left: 4%; } #containerWinkelwagen #containerTotaal #totaal .bedragRij .waarde { position: relative; float: right; width: 30%; } #containerWinkelwagen #containerTotaal #totaal .bedragRij .waarde span.gratis { color: #b12323; text-transform: none; } #containerWinkelwagen #containerTotaal #totaal .lijnSubtotaal { position: relative; height: 3px; background-color: #f2f2f2; margin-bottom: 10px; } #containerWinkelwagen #containerSubmit { position: relative; margin-top: 15px; } #containerWinkelwagen #containerSubmit #links { position: relative; float: left; width: 50%; } #containerWinkelwagen #containerSubmit #links #betaalmethodes { position: absolute; left: 182px; top: 6px; } #containerWinkelwagen #containerSubmit #links #betaalmethodes img { width: 370px; } #containerWinkelwagen #containerSubmit #rechts { position: relative; float: right; width: 50%; text-align: right; } /* Bestellen pagina */ #containerBestellen { position: relative; } #containerBestellen h2 { font-weight: normal; text-transform: uppercase; font-size: 20px; margin-bottom: 13px; } #containerBestellen #details { postion: relative; float: left; width: 70%; } #containerBestellen #details .item { position: relative; background-color: #f8f8f8; border: 1px solid #f8f8f8; padding: 20px 25px 20px 25px; margin-bottom: 8px; } #containerBestellen #details .item.keuze .titel input[type=radio] { margin-right: 10px; } #containerBestellen #details .item.keuze.selected, #containerBestellen #details .item.keuze:hover { border: 1px solid #e4e4e4; } #containerBestellen #details .item .optie { position: absolute; top: 13px; right: 20px; color: #6c6c6c; text-decoration: underline; font-size: 10px; text-transform: uppercase; cursor: pointer; } #containerBestellen #details .item .optie a { color: #6c6c6c; } #containerBestellen #details .item .titel { font-weight: normal; font-size: 17px; margin: 0 0 7px 0; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; margin-bottom: 5px; } #containerBestellen #details .item .subtitel { color: #898989; } #containerBestellen #details .item .keuzeInspringen { padding-left: 25px; } #containerBestellen #winkelmand { postion: relative; float: right; width: 20%; padding: 1% 2% 2% 2%; background-color: #f5f5f5; margin-top: 130px; } #containerBestellen #winkelmand #winkelwagen { margin-top: 10px; z-index: 1; } #containerBestellen #winkelmand #winkelwagen .productRij td { position: relative; border-top: 1px solid #e6e6e6; } #containerBestellen #winkelmand #winkelwagen .productRij:first-child td { border-top: none; } #containerBestellen #winkelmand #winkelwagen .productRij .afbeelding { margin: 0px 15px 0px 5px } #containerBestellen #winkelmand #winkelwagen .grijs { background-color: #f8f8f8; } #containerBestellen #winkelmand .formButton { width: 100%; } /* Bestellen pagina: gegevens */ #containerBestellen.gegevens #details { background-image: url('../../images/BG_bestellen_scheiding.png'); background-position: center; background-repeat: repeat-y; margin-bottom: 25px; } #containerBestellen.gegevens #details #links { position: relative; float: left; width: 46%; } #containerBestellen.gegevens #details #links #factuuradres { margin-top: 30px; } #containerBestellen.gegevens #details #rechts { position: relative; float: right; width: 46%; } #containerBestellen.gegevens #details #rechts #verzendwijze input[type='radio'] { float: left; } #containerBestellen.gegevens #details #rechts #verzendwijze .data { float: left; margin-left: 10px; width: 90%; } #containerBestellen.gegevens #details #rechts #verzendwijze .data .titel { font-size: 15px; margin-bottom: 0px; } #containerBestellen.gegevens #details #rechts #verzendwijze .data img { float: left; margin-right: 20px; margin-bottom: 8px; } #containerBestellen.gegevens #details #rechts .verder { text-align: right; } /* Bestellen pagina: betaalwijze */ #containerBestellen.betaalwijze #details { margin-bottom: 25px; padding-bottom: 0; } #containerBestellen.betaalwijze #details #betaalwijze input[type='radio'] { float: left; } #containerBestellen.betaalwijze #details #betaalwijze .item { padding-bottom: 0; } #containerBestellen.betaalwijze #details #betaalwijze .item .data { float: left; margin-left: 10px; width: 90%; padding: 0; } #containerBestellen.betaalwijze #details #betaalwijze .item .data .titel { font-size: 15px; margin-bottom: 0px; } #containerBestellen.betaalwijze #details #betaalwijze .item .data img { float: left; margin-right: 20px; } #containerBestellen.betaalwijze #details .verder { text-align: right; } /* Bestellen: voortgang */ #containerBestellenVoortgang { position: relative; background-image: url('../../images/BG_bestellen_voortgang.png'); background-position: 0 40px; background-repeat: repeat-x; height: 55px; padding-bottom: 40px; background-color: #fff; } #containerBestellenVoortgang .stap { position: relative; float: left; width: 20%; font-size: 16px; text-align: center; height: 55px; font-family: Century Gothic, AppleGothic, sans-serif; text-transform: uppercase; color: #737373; } #containerBestellenVoortgang .stap .rondje { position: relative; margin-top: 7px; height: 25px; background-image: url('../../images/IMG_bestellen_voortgang.png'); background-repeat: no-repeat; background-position: bottom center; z-index: 2; } #containerBestellenVoortgang .stap .first { position: absolute; bottom: 0; left: 0; width: 50%; height: 50%; background-color: #fff; z-index: 1; } #containerBestellenVoortgang .stap .last { position: absolute; bottom: 0; right: 0; width: 50%; height: 50%; background-color: #fff; z-index: 1; } /* 404 pagina */ #container404 { position: relative; } #container404 #containerZoeken { position: relative; margin: -20px 0 40px 0; text-align: center; } #container404 #containerZoeken .formVeld { width: 600px; padding-top: 12px; padding-bottom: 12px; } #container404 #containerZoeken .formButton { padding: 5px 10px 5px 10px; vertical-align: middle; margin: 0px 0 0 -80px; } #container404 #afbeelding { position: relative; width: 80%; margin: 0px auto 20px auto; height: 400px; background-size: 50% 50%; background-repeat: no-repeat; background-size: contain; } #container404 #items .center { margin-bottom: 30px; } #container404 #items .item { position: relative; float: left; width: 18%; margin-right: 2%; } #container404 #items .item h1 { margin-bottom: 5px; font-size: 15px; } #container404 #items .item ul { list-style: none; margin: 0px; padding: 0px; } #container404 #items .item li { margin-bottom: 2px; } #container404 #items .item li a:hover { text-decoration: underline; } #containerFancyboxIframe { position: relative; padding: 20px; } #containerFancyboxIframe .container { position: relative; padding: 15px 15px 10px 15px; background-color: #fff; border: 1px solid #d1d1d1; } #containerFancyboxIframe.adresSelecteren .toevoegen { position: relative; padding: 15px 15px 10px 15px; background-color: #fff; border: 1px solid #d1d1d1; } #containerFancyboxIframe.adresSelecteren .toevoegen span { font-family: Century Gothic, AppleGothic, sans-serif; font-size: 16px; font-weight: normal; color: #645b58; margin: 3px 5px 5px 0px; text-transform: uppercase; float: left; } #containerFancyboxIframe.adresSelecteren .toevoegen .formVeldButtonBlauw { float: right; } #containerFancyboxIframe.adresSelecteren .containerAdres { position: relative; padding: 15px; background-color: #fff; border: 1px solid #d1d1d1; margin-top: 10px; } #containerFancyboxIframe.adresSelecteren .containerAdres .adres { position: relative; float: left; width: 207px; } #containerFancyboxIframe.adresSelecteren .containerAdres .selecteren { position: relative; float: left; width: 130px; height: 100px; border-right: 1px solid #d1d1d1; } #containerFancyboxIframe.adresSelecteren .containerAdres .opties { position: relative; float: left; width: 170px; margin-left: 15px; } #containerFancyboxIframe.adresSelecteren .containerAdres .opties .standaard { color: #08a500; } #containerFancyboxIframe.pakjegemak .container { position: relative; padding: 15px 15px 10px 15px; background-color: #fff; border: 1px solid #d1d1d1; } #containerFancyboxIframe.pakjegemak .container .resultaten { position: relative; } #containerFancyboxIframe.pakjegemak .container .resultaten .start { font-family: Century Gothic, AppleGothic, sans-serif; text-align: center; } #containerFancyboxIframe.pakjegemak .container .resultaten #items { position: relative; float: left; width: 30%; height: 445px; overflow: auto; } #containerFancyboxIframe.pakjegemak .container .resultaten #items .item { margin-bottom: 20px; border: 1px solid #f1f1f1; padding: 10px 15px 10px 15px; } #containerFancyboxIframe.pakjegemak .container .resultaten #items .item:hover { background-color: #fdfdfd; } #containerFancyboxIframe.pakjegemak .container .resultaten #items .item .openingstijden { text-decoration: underline; margin-top: 5px; cursor: pointer; } #containerFancyboxIframe.pakjegemak .container .resultaten #items .item .containerOpeningstijden { display: none; } #containerFancyboxIframe.pakjegemak .container .resultaten #containerMap { position: relative; float: right; width: 67%; height: 445px; } #containerFancyboxIframe.pakjegemak .container .resultaten #containerMap #map { width: 100%; height: 100%; } #containerFancyboxIframe.infoPopup .footer { margin-top: 20px; font-family: Century Gothic, AppleGothic, sans-serif; line-height: 20px; text-align: center; } #containerFancyboxIframe.infoPopup .footer div { margin-top: 10px; } /* Grijze container */ .grijzeSubContainer { position: relative; margin: 0; padding: 5% 18% 5% 18%; background: rgba(255,255,255,1); background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(242,242,242,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=1 ); background-position: 50% 50%; background-size: cover; } .grijzeSubContainer .container { position: relative; background-image: url('../../images/BG_wit_90procent.png'); padding: 3% 5% 3% 5%; z-index: 2; overflow: hidden; } .grijzeSubContainer .container h1 { font-weight: normal; text-transform: uppercase; margin-bottom: 20px; } .grijzeSubContainer .container h2 { font-weight: normal; text-transform: uppercase; margin-bottom: 20px; } .grijzeSubContainer .bottomAfbeelding { position: absolute; left: 0; bottom: 0; width: 400px; height: 400px; max-width: 100%; max-height: 100%; background-size: contain; background-repeat: no-repeat; z-index: 1; } .grijzeSubContainer #verdelingTweeLinks { width: 18%; background-image: url('../../images/BG_wit_90procent.png'); padding: 3% 5% 3% 5%; z-index: 10; } .grijzeSubContainer #verdelingTweeLinks li { font-family: Century Gothic, AppleGothic, sans-serif; } .grijzeSubContainer #verdelingTweeLinks li.selected { padding-left: 18px; background-image: url('../../images/BUT_verfijnen_M.png'); background-position: 0px 3px; background-repeat: no-repeat; background-size: 13px 13px; } .grijzeSubContainer #verdelingTweeRechts { width: 58%; background-image: url('../../images/BG_wit_90procent.png'); padding: 3% 5% 3% 5%; z-index: 10; } /* Account: registreren of inloggen */ #containerRegistrerenInloggen.registreren { position: relative; padding-left: 18%; padding-right: 18%; } #containerRegistrerenInloggen.registreren #registreren #registratieformulier { display: block; } #containerRegistrerenInloggen.registreren #inloggen { display: none; } #containerRegistrerenInloggen .verbergen { display: none; } #containerRegistrerenInloggen #registreren { position: relative; float: left; width: 47%; padding: 5% 0% 5% 2%; } #containerRegistrerenInloggen #registreren.selected { width: 93%; } #containerRegistrerenInloggen #registreren #usp { position: relative; } #containerRegistrerenInloggen #registreren #usp ul { margin-bottom: 20px; margin-left: 3px; } #containerRegistrerenInloggen #registreren #usp li img { margin-right: 8px; margin-top: -2px; vertical-align: middle; } #containerRegistrerenInloggen #registreren input.text { position: relative; float: left; } #containerRegistrerenInloggen #registreren input#buttonZonderAccount { background-color: #eaeaea; margin-top: 2px; padding-top: 7px; padding-bottom: 7px; color: #656565; border: 0px; font-size: 12px; } #containerRegistrerenInloggen #registreren #registratieformulier { display: none; } #containerRegistrerenInloggen #registreren #registratieformulier .sluiten { position: absolute; top: 35px; right: 25px; width: 17px; height: 17px; background-color: #a5a5a5; background-image: url('../../images/BG_kruis_kader.png'); background-size: cover; background-repeat: no-repeat; cursor: pointer; } #containerRegistrerenInloggen #registreren #registratieformulier .sluiten:hover { background-color: #bbb; } #containerRegistrerenInloggen #inloggen { position: relative; float: right; width: 43%; padding: 5% 2% 5% 5%; background-image: url('../../images/BG_bestellen_scheiding.png'); background-position: left; background-repeat: repeat-y; } #containerRegistrerenInloggen #inloggen .formVeld { width: 90%; padding-left: 5%; padding-right: 5%; } #containerRegistrerenInloggen #inloggen hr { background-color: #f6f6f6; height: 2px; width: 100%; margin-top: 25px; } #containerRegistrerenInloggen #inloggen .wachtwoordVergeten { font-size: 10px; text-decoration: underline; } /* Account: adressenboek */ #containerAdressenboek .toevoegen { position: relative; padding: 15px 15px 10px 15px; background-color: #fff; border: 1px solid #d1d1d1; } #containerAdressenboek .toevoegen span { font-family: Century Gothic, AppleGothic, sans-serif; font-size: 16px; font-weight: normal; color: #645b58; margin: 3px 5px 5px 0px; text-transform: uppercase; float: left; } #containerAdressenboek .toevoegen .formVeldButtonBlauw { float: right; } #containerAdressenboek .containerAdres { position: relative; padding: 15px; background-color: #fff; border: 1px solid #d1d1d1; margin-top: 10px; } #containerAdressenboek .containerAdres .adres { position: relative; float: left; width: 230px; } #containerAdressenboek .containerAdres .selecteren { position: relative; float: left; width: 130px; height: 100px; border-right: 1px solid #d1d1d1; } #containerAdressenboek .containerAdres .opties { position: relative; float: left; width: 170px; margin-left: 15px; } #containerAdressenboek .containerAdres .opties .standaard { color: #08a500; } #containerAdressenboek .containerAdres .bewerken { position: relative; float: right; width: 170px; text-align: right; } /* Account: persoonlijke gegevens */ #containerPersoonlijkeGegevens .formVeld { width: 100%; max-width: 225px; } /* Container zoeken */ #containerZoeken { position: relative; margin: 0px 0 40px 0; text-align: center; } #containerZoeken .formVeld { width: 600px; padding-top: 12px; padding-bottom: 12px; } #containerZoeken .formButton { padding: 5px 10px 5px 10px; vertical-align: middle; margin: 0px 0 0 -80px; } /* Service: klantenservice */ #containerKlantenservice #containerZoeken { margin-top: -20px; } #containerKlantenservice #containerMasonry .container { width: 21%; margin: 0 1% 2% 1%; padding-top: 30px; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 13px; } #containerKlantenservice #containerMasonry .container h2 { margin-bottom: 3px; } #containerKlantenservice #containerMasonry .container .klantenserviceAchtergrond { height: 70px; background-repeat: no-repeat; background-size: contain; } .grijzeSubContainer #verdelingTweeRechts #klantenserviceLinks { position: relative; float: left; width: 48%; } .grijzeSubContainer #verdelingTweeRechts #klantenserviceRechts { position: relative; float: right; width: 48%; } #containerKlantenservice #klantenserviceZoekenResultaat .container { margin-bottom: 2%; } #containerKlantenservice #klantenserviceZoekenResultaat .container h2 { margin-bottom: 5px; } #containerKlantenservice .klantenserviceAfbeelding { max-width: 100%; } /* Service: veel gestelde vragen */ .containerVeelGesteldeVragen .vragenItem { position: relative; } .containerVeelGesteldeVragen .vragenItem .titel { padding: 2px 10px 2px 30px; cursor: pointer; } .containerVeelGesteldeVragen .vragenItem .titel.grijs { background-color: #f1f0f0; } .containerVeelGesteldeVragen .vragenItem .bericht { display: none; padding: 3px 0px 20px 30px; } .containerVeelGesteldeVragen .vragenItem .bericht a { text-decoration: underline; } .containerVeelGesteldeVragen .vragenItem .selected { font-weight: bold; } /* Merken */ #containerMerken { position: relative; padding-left: 2%; } #containerMerken .merk { position: relative; float: left; width: 10%; height: 100px; margin: 1% 5% 0 5%; text-align: center; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } /* Reviews */ #verdelingTweeRechts.containerReviews { position: relative; float: none; margin: 0px auto; width: 80%; } .containerReviews #inleiding { margin-bottom: 20px; } .containerReviews #inleiding #content { position: relative; float: left; width: 68%; } .containerReviews #inleiding #content #schrijfReview { margin-top: 5px; margin-left: -1px; } .containerReviews #inleiding #logos { position: relative; float: right; width: 13%; text-align: right; } .containerReviews #inleiding #logos #thuiswinkelWaarborg { margin-top: 5px; margin-bottom: 10px; } .containerReviews #inleiding #logos img { width: 51%; } .containerReviews .review { position: relative; margin-bottom: 20px; padding-top: 20px; border-top: 1px solid #e5e5e5; } .containerReviews .review .content { float: left; width: 73%; } .containerReviews .review .content .bericht > b + p { margin-top: 0; } .containerReviews .review .content .oneliner { font-weight: bold; font-size: 12px; margin-bottom: 10px; } .containerReviews .review .content .naam { margin-top: 8px; font-size: 11px; } .containerReviews .review .content .cijfers { } .containerReviews .review .content .cijfers .item { position: relative; float: left; width: 173px; } .containerReviews .review .content .cijfers .item .omschrijving { position: relative; float: left; width: 110px; } .containerReviews .review .content .cijfers .item .cijfer { position: relative; float: left; width: 20px; } .containerReviews .review .datum { float: right; width: 20%; } .containerReviews .review .beoordeling { float: right; width: 20%; margin-top: 10px; } .containerReviews .review .beoordeling .rating { position: relative; width: 81px; height: 15px; background-image: url('../../images/BG_reviews_grijs.png'); background-repeat: no-repeat; } .containerReviews .review .beoordeling .rating .actief { position: absolute; left: 0px; top: 0px; height: 15px; background-image: url('../../images/BG_reviews_actief.png'); background-repeat: no-repeat; } .containerReviews .review .beoordeling .website { position: relative; font-style: italic; font-size: 10px; } .containerReviews .review .reactie { margin-top: 10px; margin-left: 30px; padding: 15px 20px 15px 20px; width: 450px; background-color: #f8f8f8; } /* Landingspaginas */ #landingspagina { position: relative; } /* Hoogtes */ #landingspagina div.hoogte-1 { height: 100px; } #landingspagina div.hoogte-2 { height: 150px; } #landingspagina div.hoogte-3 { height: 200px; } #landingspagina div.hoogte-4 { height: 250px; } #landingspagina div.hoogte-5 { height: 300px; } #landingspagina div.hoogte-6 { height: 350px; } #landingspagina div.hoogte-7 { height: 400px; } #landingspagina div.hoogte-8 { height: 450px; } #landingspagina div.hoogte-9 { height: 500px; } #landingspagina div.marginBottom-10 { margin-bottom: 10px; } #landingspagina div.marginBottom-20 { margin-bottom: 20px; } #landingspagina div.marginBottom-30 { margin-bottom: 30px; } #landingspagina div.marginBottom-40 { margin-bottom: 40px; } #landingspagina div.marginBottom-50 { margin-bottom: 50px; } #landingspagina div.marginBottom-60 { margin-bottom: 60px; } #landingspagina div.marginBottom-70 { margin-bottom: 70px; } #landingspagina div.marginBottom-80 { margin-bottom: 80px; } #landingspagina div.marginBottom-90 { margin-bottom: 90px; } /* Slideshow */ #landingspagina .slideshow { position: relative; height: 380px; } #landingspagina .slideshow .banner { position: absolute; display: none; left: 0px; top: 0px; width: 100%; height: 100%; } #landingspagina .slideshow .banner.selected { display: block; } #landingspagina .slideshow .banner .volledig { height: 100%; background-position: 50% bottom; background-size: cover; } #landingspagina .slideshow .banner .links { position: relative; width: 50%; height: 100%; float: left; background-position: 50% bottom; background-size: cover; } #landingspagina .slideshow .banner .rechts { position: relative; width: 50%; height: 100%; float: right; background-color: #fff; } #landingspagina .slideshow .banner .rechts .containerProducten { margin-left: 50px; margin-top: 15px; } #landingspagina .slideshow .banner .rechts .containerProducten:first-child { margin-top: 10px; } #landingspagina .slideshow .banner .rechts .containerProducten .product { margin-top: 10px; } #landingspagina .slideshow .banner .rechts .containerProducten .tussenstuk { position: relative; float: left; width: 3px; height: 321px; margin-top: 15px; background-color: #dedede; margin-left: 30px; margin-right: 30px; } /* Merken */ #landingspagina .merken { position: relative; } #landingspagina .merken .merk { position: relative; float: left; width: 100px; height: 70px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } /* Rubrieken */ #landingspagina .rubrieken { position: relative; width: 99%; } #landingspagina .rubrieken .rubriek { position: relative; float: left; width: 19%; height: 340px; margin-bottom: 20px; margin-left: 1%; padding-bottom: 1%; } #landingspagina .rubrieken .rubriek .titel { position: relative; width: 95%; margin: 10px auto; padding: 8px 0 8px 0; text-align: center; font-family: Century Gothic, AppleGothic, sans-serif; font-size: 14px; } #landingspagina .rubrieken .rubriek .titel h2 { color: #272727; font-weight: normal; font-size: 14px; } #landingspagina .rubrieken .rubriek .afbeelding { position: relative; width: 95%; margin: 10px auto; height: 230px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; } #landingspagina .rubrieken .rubriek .button { position: relative; width: 95%; margin: 10px auto; padding: 8px 0 8px 0; text-align: center; } #landingspagina .rubrieken .rubriek .button img { margin-left: 5px; } #landingspagina .rubrieken .rubriek:hover { z-index: 2; -webkit-box-shadow: 0 0 3px 3px #E0E0E0; box-shadow: 0 0 3px 3px #E0E0E0; } #landingspagina .rubrieken .rubriek:hover .button { text-decoration: underline; } /* Twee & drie items */ #landingspagina .tweeItems, #landingspagina .drieItems { position: relative; height: 100%; } #landingspagina .item { position: relative; float: left; height: 100%; background-size: cover; background-position: 50% 50%; } #landingspagina .tweeItems .item { width: 50%; } /* #landingspagina .tweeItems .item.item-2 { float: right; } */ #landingspagina .drieItems .item { width: 32%; margin-right: 1%; } #landingspagina .drieItems .item.item-2 { width: 33%; } #landingspagina .drieItems .item.item-3 { width: 33%; margin-right: 0; float: right; } /* Canvas */ #landingspagina .canvas { position: relative; } #landingspagina .canvas { overflow: hidden; } #landingspagina .canvas .item { position: relative; float: left; background-size: cover; margin: 0; padding: 0; } #landingspagina .canvas.canvas-1 { height: 375px; } #landingspagina .canvas.canvas-1 .item-1 { width: 31%; height: 100%; margin-right: 1%; } #landingspagina .canvas.canvas-1 .item-2 { width: 33%; margin: 0 1% 1% 0; height: 49%; } #landingspagina .canvas.canvas-1 .item-3 { width: 33%; margin: 0 0 1% 0; height: 49%; } #landingspagina .canvas.canvas-1 .item-4 { width: 45%; margin: 0 1% 0 0; height: 49%; } #landingspagina .canvas.canvas-1 .item-5 { width: 21%; margin: 0 0 0 0; height: 49%; } /* Nieuwsbrief & review */ #landingspagina .reviewNieuwsbrief { position: relative; } #landingspagina .reviewNieuwsbrief #containerNieuwsbrief { position: relative; float: left; width: 50%; height: 150px; text-align: center; background-image: url('../../images/BG_home_banners_links.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } #landingspagina .reviewNieuwsbrief #containerNieuwsbrief .titel { margin: 35px 20% 10px 20%; font-size: 22px; font-family: Century Gothic, AppleGothic, sans-serif; line-height: 30px; color: #666; text-transform: uppercase; } #landingspagina .reviewNieuwsbrief #containerNieuwsbrief .formVeld { border: 1px solid #a6a6a6; width: 200px; } #landingspagina .reviewNieuwsbrief #containerNieuwsbrief .formButton { padding-top: 5px; padding-bottom: 6px; vertical-align: bottom; } #landingspagina .reviewNieuwsbrief #containerReviews { position: relative; float: right; width: 50%; height: 150px; text-align: center; background-image: url('../../images/BG_home_banners_rechts.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } #landingspagina .reviewNieuwsbrief #containerReviews .titel { margin: 25px 5% 10px 5%; font-size: 22px; font-family: Century Gothic, AppleGothic, sans-serif; line-height: 30px; color: #666; text-transform: uppercase; } #landingspagina .reviewNieuwsbrief #containerReviews .bericht { margin: 0 10% 0 10%; } #landingspagina .reviewNieuwsbrief #containerReviews .rating { position: relative; width: 110px; height: 20px; margin: 10px auto; background-image: url('../../images/BG_reviews_grijs.png'); background-repeat: no-repeat; background-size: contain; } #landingspagina .reviewNieuwsbrief #containerReviews .rating .actief { position: absolute; left: 0px; top: 0px; height: 100%; background-image: url('../../images/BG_reviews_actief.png'); background-repeat: no-repeat; background-size: 107px 20px; } /* Contact */ #contactLinks { position: relative; float: left; width: 450px; } #contactRechts { position: relative; float: right; width: 450px; } /* Extra tekst onderaan */ #additioneleTekst { position: relative; border-top: 1px solid #d7d7d9; margin: 40px 0 0 0; overflow: auto; padding: 5px 0px 4px 0px; } #additioneleTekst .titel h1 { font-family: arial; font-size: 12px; margin: 0px; } #additioneleTekst .titel .meerInformatie { position: absolute; right: 0; top: 5px; width: 180px; height: 23px; cursor: pointer; text-align: right; text-decoration: underline; color: #666; } #additioneleTekst .titel .meerInformatie img { margin: 10px 0px 0px 5px; } #additioneleTekst .bericht { display: none; padding: 20px 20px 20px 20px; } /* Personeel */ #containerPersoneel { position: relative; } #containerPersoneel ul { list-style: none; margin: 0px; padding: 0px; } #containerPersoneel li { position: relative; float: left; width: 85px; height: 20px; margin-right: 10px; padding-top: 90px; text-align: center; } #containerPersoneel li .afbeelding { position: absolute; left: 0px; top: 0px; width: 85px; height: 85px; background-repeat: no-repeat; background-size: 85px; } #accountGeavanceerd { margin-top: 40px; border-top: 1px solid #e7e7e7; color: #787878; cursor: pointer; } #accountGeavanceerdDetails { display: none; font-size: 11px; } /* ---------------------------------------------------------------------------------------- */ /* B O T T O M */ #containerBottom { background-color: #f5f5f5; margin-top: 30px; padding: 35px 0 35px 0; color: #737373; font-family: Century Gothic, AppleGothic, sans-serif; } #containerBottom a { color: #737373; } #containerBottom #algemeneItems { position: relative; float: left; width: 62%; } #containerBottom #algemeneItems .item { position: relative; float: left; width: 25%; } #containerBottom #algemeneItems .item span { font-size: 14px; margin: 0px; text-transform: uppercase; } #containerBottom #algemeneItems .item ul { margin-top: 5px; } #containerBottom #algemeneItems .item li img.pijl { margin-top: -2px; } #containerBottom #extraInformatie { position: relative; float: right; width: 36%; } #containerBottom #extraInformatie #telefoon { padding-top: 3px; width: 55%; float: left; height: 30px; font-size: 14px; text-transform: uppercase; } #containerBottom #extraInformatie #email { padding-top: 3px; width: 45%; float: left; height: 30px; font-size: 14px; text-transform: uppercase; } #containerBottom #extraInformatie #telefoon img, #containerBottom #extraInformatie #email img { width: 35px; height: 25px; margin-right: 15px; vertical-align: middle; margin-top: -4px; } #containerBottom #extraInformatie #nieuwsbrief { float: none; width: 100%; margin: 10px 0 15px 0; } #containerBottom #extraInformatie #nieuwsbrief .formVeld { width: 260px; } #containerBottom #extraInformatie #nieuwsbrief .formButton { width: 115px; padding-top: 5px; padding-bottom: 4px; margin-left: 5px; text-transform: uppercase; vertical-align: top; } #containerBottom #extraInformatie #logo { position: relative; float: left; width: 65%; font-size: 10px; color: #848484; } #containerBottom #extraInformatie #reviews { position: relative; float: right; width: 30%; } #containerBottom #extraInformatie #reviews .rating { position: relative; float: left; width: 73px; height: 14px; margin: 4px 5px 0px 0px; background-image: url('../../images/BG_reviews_grijs.png'); background-size: 73px 14px; background-repeat: no-repeat; } #containerBottom #extraInformatie #reviews .rating .actief { position: absolute; left: 0px; top: 0px; height: 15px; background-image: url('../../images/BG_reviews_actief.png'); background-size: 73px 14px; background-repeat: no-repeat; } #containerBottom #extraInformatie #reviews .score { position: relative; float: left; width: 20px; height: 15px; font-size: 10px; } #containerBottom #extraInformatie #reviews .aantal { position: relative; float: none; width: 100%; height: 15px; font-size: 10px; } #containerBottomVersie { position: relative; background-color: #6a6a6a; color: #fff; font-size: 11px; padding: 0px 10px 2px 10px; } #containerBottomVersie a { color: #fff; } #containerBottomLogos { margin: 10px auto 0 auto; width: 80%; text-align: center; } #containerBottomLogos img#betaalitems { width: 100%; max-width: 420px; margin: 15px 0 15px 0; } #containerBottomLogos #links { font-family: Century Gothic, AppleGothic, sans-serif; } #containerBottomLogos #geniet { margin-top: 10px; font-family: Century Gothic, AppleGothic, sans-serif; } #containerBottomLogos #laadtijd { margin-top: 10px; font-size: 11px; color: #767676; } #acceptCookies { position: fixed; bottom: 0; left: 10%; width: 80%; z-index: 10; background-color: #fbfbfb; cursor: pointer; } #acceptCookies .melding { position: relative; float: left; padding: 10px 15px; width: calc(100% - 130px); } #acceptCookies .sluiten { position: relative; float: right; padding: 30px 10px 0 0; width: 90px; text-align: center; text-decoration: underline; } #acceptCookies .sluiten img { width: 15px; display: inline-block; margin: 2px 0 0 10px; } #acceptCookies:hover .sluiten { color: #ef803b; } /* Container Product Review */ #containerProductReviewPopupFullBg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .7); z-index: 9998; } #containerProductReviewPopup { position: fixed; left: calc(50% - 300px); top: calc(50% - 240px); width: 560px; height: 450px; padding: 20px; border: 1px solid #F2F2F2; background-color: #fff; z-index: 9999; } #containerProductReviewPopup #hartelijkDank { display: none; font-size: 16px; } #containerProductReviewPopup #close { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; background-image: url('../../images/BUT_kruis_selectie.png'); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; cursor: pointer; } #containerProductReviewPopup h2 { font-size: 18px; margin-bottom: 0; } #containerProductReviewPopup h1 { color: #747474; font-size: 25px; } #containerProductReviewPopup #rating { position: relative; display: inline-block; margin: 0 10px 0 30px; } #containerProductReviewPopup #rating .star { position: relative; display: inline-block; width: 18px; height: 18px; top: 3px; margin-right: 2px; cursor: pointer; background-image: url('../../images/BG_rating_solid.png'); background-repeat: no-repeat; background-repeat: 50% 50%; background-size: contain; } #containerProductReviewPopup #rating .star.grey { background-image: url('../../images/BG_rating_grey.png'); } #containerProductReviewPopup #rating .star.half { background-image: url('../../images/BG_rating_half.png'); } #containerProductReviewPopup #ratingDescription { position: relative; display: inline-block; } #containerProductReviewPopup #containerForm { margin-top: 20px; } #containerProductReviewPopup #containerForm #inputFields { position: relative; float: left; width: 44%; } #containerProductReviewPopup #containerForm #inputFields .veld { margin-bottom: 8px; } #containerProductReviewPopup #containerForm #inputFields .veld .formVeld { width: 100%; } #containerProductReviewPopup #containerForm #inputFields .veld .label { font-size: 11px; } #containerProductReviewPopup #containerForm #inputFields .veld textarea { height: 75px; } #containerProductReviewPopup #containerForm #inputFields .veld .error { border: 1px solid #D8060A; } #containerProductReviewPopup #containerForm #afbeelding { position: relative; float: right; width: 48%; } #containerProductReviewPopup #containerForm #afbeelding #image { width: 100%; height: 250px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } #containerProductReviewPopup #containerForm #disclaimer { font-size: 10px; } #containerProductReviewPopup #containerForm .formVeldButtonBlauw { margin: 10px 0 0 -2px; } /* ---------------------------------------------------------------------------------------- */ /* O V E R I G E */ /* Autocomplete */ .ui-autocomplete { background: #fff; padding: 2px; border: 1px solid #dadada; width: 20%; } .ui-autocomplete .ui-menu-item { width: 100%; border-bottom: 1px solid #dadada; } .ui-autocomplete .ui-menu-item a { display: block; width: 96%; padding: 5px 2% 5px 2%; } .ui-autocomplete .ui-menu-item a.ui-state-hover { background-color: #f5f5f5; color: #00a161; } .ui-menu .ui-menu-item:last-child { border-bottom: none; } /* Ui slider */ #prijsSlider { position: relative; margin-bottom: 20px; } #prijsSliderInputs { position: relative; } #prijsSliderInputs input { width: 30px; } #prijsSliderInputs input.sliderVan { float: left; } #prijsSliderInputs input.sliderTot { float: right; } .ui-slider { position: relative; text-align: left; width: 92%; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 15px; height: 15px; margin-top: -3px; cursor: pointer; background-color: #e9e9e9; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; top: 0; height: 100%; font-size: .7em; display: block; border: 0; background-position: 0 0; background-color: #d2d2d2; } .ui-slider-horizontal { height: .8em; background-color: #f6f6f6; }