/* reset ------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* general ------------------------------------------------------------------*/ body { background: #605750 url(/images/bg_body.gif) repeat-x top; font: 12px/1.5 Verdana, sans-serif; color: #2c2621; } h1 { position: absolute; left: 310px; top: -60px; width: 531px; height: 87px; padding-left: 24px; font-size: 20px; font-weight: normal; color:#837f77;letter-spacing: 1px; text-transform: uppercase; } h2 { margin-bottom: 12px; font-size: 18px; font-weight: normal; color:#23211d; } h3 { margin-bottom: 7px; font-size: 12px; font-weight: bold; color:#23211d; } h4 { font-size: 12px; } ul, ol { margin: 0 0 14px 16px; } p, form { margin: 0 0 14px 0; } th, td { padding: 3px; vertical-align: top; text-align: left;} a { color: #4F535C; } a:hover { color: #23989b; } input, textarea, select { font-size: 11px; font-family: Verdana, sans-serif; color: #4F535C; } strong { font-weight: bold; } em { font-style: italic; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ /* page structure ------------------------------------------------------------------*/ #wrapper { width: 976px; min-height: 500px; margin: 0 auto; background: #fff url(/images/bg-top.gif) no-repeat; } #header { position: relative; height: 129px; } #navigation { position: relative; height: 123px; } #contentWrapper { position: relative; margin-top: 75px; background: #dbd7ca; } .product #contentWrapper { background: url(/images/bg_product.gif) repeat-y; } #content { clear: both; background:url(/images/bg_bottomcontent.gif) no-repeat right bottom; } .product #content { background-image: url(/images/bg_bottomcontentproduct.gif); } #contentBlock { position: relative; float: left; width: 596px; min-height: 346px; padding: 34px 24px; background: url(/images/bg_contentblock.gif) no-repeat 5px 0; } .noImage #contentBlock { float: none; width: 906px; background-position: 337px; } .product #contentBlock { width: 425px; background: url(/images/bg_contentblockproductright.gif) no-repeat 0 0; } #footer { overflow: hidden; clear: both; width: 956px; margin: 0 auto; padding: 15px 10px; color: #f9f8f8; font-size: 11px; } /* homepage ------------------------------------------------------------------*/ #hp #wrapper { width: 980px; background: url(/images/bg_header.jpg) no-repeat; } #hp #contentWrapper { width: 780px; height: 600px; margin: 0 auto; background: url(/images/bg_homecontent.jpg) no-repeat; } #hp #content { position: relative; height: 600px; background: url(/images/bg_hplogo.png) no-repeat 380px 32px; } #hp #logo { position: absolute; left: 90px; top: 20px; } #hp #slideshow { position: absolute; left: 90px; top: 132px; width: 603px; } #hp #languages { position: absolute; left: 0; top: 548px; width: 695px; height: 33px; padding: 0 85px 0 0; background: #37322e; text-align: right; } #hp #languages a { margin-left: 35px; padding-left: 20px; background: url(/images/bg_hplanguage.gif) no-repeat 0 50%; line-height: 33px; color: #9b9997; text-decoration: none; } #hp #languages a:hover { background: url(/images/bg_hplanguage_active.gif) no-repeat 0 50%; color: #00afb7; } #hp #footer { position: absolute; top: 581px; left: 0; width: 780px; margin: 0; padding: 0; color: #979285; } #hp #footer p { float: left; width: 200px; } #hp #footer a { float: right; width: 200px; text-align: right; color: #979285; text-decoration: none; } /* header ------------------------------------------------------------------*/ #logo { position: absolute; left: 15px; top: 20px; } #indekijker { position: absolute; right: 145px; top: 0px; width: 400px; height: 98px; padding: 53px 25px 0 15px;} #indekijker p { color:#767a74; line-height: 14px; font-size: 11px; padding: 8px 0 0 100px; margin-left: -35px; margin-right: 25px; } #nl #indekijker { background: url(/images/bg_indekijker_nl.gif) no-repeat 0 0px; } #en #indekijker { background: url(/images/bg_spotlight_en.gif) no-repeat 140px -5px; } #groene_folder { position: absolute; right: 0; top: 36px; width: 168px; height: 93px; } #groene_folder a { display: block; height: 93px; text-indent: -99999px; } #groene_folder a#folder_nl { background: url(../images/groene_folder_nl.jpg) no-repeat; } #groene_folder a#folder_en { background: url(../images/groene_folder_en.jpg) no-repeat; } /* navigation ------------------------------------------------------------------*/ #navigation #menuGeneral { position: absolute; left: 332px; top: 0; width: 644px; height: 123px; background: url(/images/bg_menu_algemeen.jpg) no-repeat right top; } #navigation ul { width: 332px; height: 115px; margin: 0; padding: 3px 0 5px; background: #19b6b3; } #navigation li { float: left; width: 332px; } #navigation li a { display: block; width: 205px; margin: 0 0 1px 0; padding: 0 125px 0 0; background: url(/images/bg_navigation.gif) no-repeat right center; text-decoration: none; font-size: 15px; color: #075f60; text-align: right; } #navigation li.active a, #navigation li a:hover { background: #fff url(/images/bg_navigation_active.gif) no-repeat right center; color: #4f4a46; } #navigation li ul { position: absolute; left: 332px; top: 0; width: 644px; height: 123px; padding: 0; background: none; } #navigation li li { position: static; float: left; } #navigation li.active li a { position: relative; float: left; height: 123px; padding: 0; color: #8e8b85; font-size: 10px; text-transform: uppercase; } #navigation li.active li a:hover, #navigation li.active li.active a { color: #cfcbbe; } #navigation li li a span { position: absolute; left: 0; bottom: 5px; display: block; text-align: center; } #navigation li #productSubmenu li, #navigation li.active #productSubmenu li a, #navigation li #productSubmenu li a span { width: 129px; } #navigation li #productSubmenu li#extra_rubriek, #navigation li.active #productSubmenu li#extra_rubriek a, #navigation li #productSubmenu li#extra_rubriek a span { width: 128px; } #navigation li#getuft a { background: url(/images/bg_menu_getuft.jpg) no-repeat; background-position: 0 -123px;} #navigation li#getuft a:hover, #navigation li#getuft a.active { background-position: 0 0; } #navigation li#vlakgeweven a { background: url(/images/bg_menu_vlakgeweven.jpg) no-repeat; background-position: 0 -123px; } #navigation li#vlakgeweven a:hover, #navigation li#vlakgeweven a.active { background-position: 0 -0; } #navigation li#wilton a { background: url(/images/bg_menu_wilton.jpg) no-repeat; background-position: 0 -123px; } #navigation li#wilton a:hover, #navigation li#wilton a.active { background-position: 0 -0; } #navigation li#afgeboord a { background: url(/images/bg_menu_afgeboord.jpg) no-repeat; background-position: 0 -123px;} #navigation li#afgeboord a:hover, #navigation li#afgeboord a.active { background-position: 0 0; } #navigation li#extra_rubriek a { background: url(/images/bg_menu_tegels.jpg) no-repeat; background-position: 0 -123px;} #navigation li#extra_rubriek a:hover, #navigation li#extra_rubriek a.active { background-position: 0 0; } #navigation li #creatuftSubmenu li, #navigation li.active #creatuftSubmenu li a, #navigation li #creatuftSubmenu li a span { width: 215px; } #navigation li#creatuftgroep a { background: url(/images/bg_menu_groep.jpg) no-repeat; background-position: 0 -123px; } #navigation li#creatuftgroep a:hover, #navigation li#creatuftgroep a.active { background-position: 0 -0; } #navigation li#creatuftbedrijf a { background: url(/images/bg_menu_bedrijf.jpg) no-repeat; background-position: 0 -123px; } #navigation li#creatuftbedrijf a:hover, #navigation li#creatuftbedrijf a.active { background-position: 0 -0; } #navigation li#creatuftwol a { background: url(/images/bg_menu_wol.jpg) no-repeat; background-position: 0 -123px; } #navigation li#creatuftwol a:hover, #navigation li#creatuftwol a.active { background-position: 0 -0; } #navigation li #creatuftSubmenu li#creatuftwol, #navigation li.active #creatuftSubmenu li#creatuftwol a, #navigation li #creatuftSubmenu li#creatuftwol a span { width: 214px; } #navigation li #tipsadviesSubmenu li, #navigation li.active #tipsadviesSubmenu li a, #navigation li #tipsadviesSubmenu li a span { width: 322px; } #navigation li#plaatsing a { background: url(/images/bg_menu_plaatsing.jpg) no-repeat; background-position: 0 -123px; } #navigation li#plaatsing a:hover, #navigation li#plaatsing a.active { background-position: 0 -0; } #navigation li#vlekkenoverzicht a { background: url(/images/bg_menu_vlekkenoverzicht.jpg) no-repeat; background-position: 0 -123px; } #navigation li#vlekkenoverzicht a:hover, #navigation li#vlekkenoverzicht a.active { background-position: 0 -0; } #subNav { float: left; width: 173px; min-height: 381px; padding: 35px 0 0 0; background: url(/images/bg_contentblockproductleft.gif) no-repeat right top; } #content #subNav ul { margin: 0; list-style: none; } #subNav a { display: block; width: 145px; padding-left: 26px; background: url(/images/bg_subnav.gif) no-repeat 16px 8px; color: #107675; text-decoration: none; font-size: 13px; } #subNav a:hover { background: #6ccecc url(/images/bg_subnav_active.gif) no-repeat 16px 8px; color: #fff; } #subNav li.active a { background: #19b6b3 url(/images/bg_subnav_active.gif) no-repeat 16px 8px; color: #fff; } #subNav li a#selector, #subNav li.active a#selector { margin-top: 10px; padding-top: 1px; padding-bottom: 1px; color: #bdb29d; background-image: none; background-color: none; border-top: 1px solid #d1c9ba; border-bottom: 1px solid #d1c9ba; } #subNav li.active a#selector { color: #fff; background-color: #bdb29d; border: none; } #subNav li a#selector:hover, #subNav li.active a#selector:hover { color: #fff; background-color: #d7d1c5; } /* content ------------------------------------------------------------------*/ #content ul { list-style-type: disc; } #printLink { position: absolute; right: 10px; top: -60px; display: block; width: 30px; padding-left: 20px; } #sfeerbeeld { float: left; width: 330px;} form#search { position: absolute; left: 27px; top: -60px; width: 332px; height: 73px; } form#search #searchword { width: 127px; margin-left: 10px; color:#aaa; } form#search #searchButton { margin-right: 10px; vertical-align: middle; } form#search a { font-size: 11px; } .download { position: relative; } .download a { padding-left: 20px; } .download img { position: absolute; left: 0; top: 0; } .formContact { margin: 0;} /* product ------------------------------------------------------------------*/ #content #productNav { position: absolute; top: -23px; width:473px; margin: 0 0 0 -24px; list-style: none; } #productNav li { position: absolute; height: 23px; } #productNav #ficheLink { right: 0; width: 153px; } #productNav #ficheLink a.active { width: 153px; background: url(/images/bg_fiche.gif) no-repeat; } #productNav #kleurenLink { left: 0; } #productNav #kleurenLink a.active { width: 170px; background: url(/images/bg_kleuren.gif) no-repeat; } #productNav a { display: block; height: 20px; margin-left: 5px; padding: 3px 10px 0 10px; background: url(/images/bg_productNav.gif) no-repeat 0 8px; } #productNav a.active { margin: 0; padding-left: 0; padding-right: 0; text-align: center; text-decoration: none; } #downloadLink { /*float: right;*/ text-align: right; } #downloadLink span { font-size: 11px; } .odd th, .odd td { background: #e6e3da; padding: 0px 5px 0 5px;} #techfiche { width: 100%; margin: 0 0 25px 0; } #techfiche th { font-weight: normal; } #content #kleuren { margin: 0; list-style: none; } #kleuren li { float: left; width: 98px; height: 114px; font-size: 11px; font-family: Arial, sans-serif; line-height:12px; margin-right: 5px; } #kleuren li img { display: block; margin-bottom: 5px; border: 1px solid #a5a29d; } .icongroup_top { padding-bottom: 2px; } .icongroup { padding-bottom: 3px; width: 250px; } .gutCode { position: relative; width: 137px; padding-right: 5px; display: block; } .icongroup_gut { position: absolute; left: 310px; } .gutCode span { position: absolute; left: 14px; top: 12px; font-size: 11px; color: #e6e3da; } .gutSmall, .twoIcons { float: left; padding-right: 5px; text-align: center; position: relative; } .gutSmall span { font-size: 11px; position: absolute; top: 39px; left: 10px; color: #56534c; } .twoIcons span { font-size: 11px; position: absolute; bottom: 0; left: 10px; color: #56534c; } .techlink { margin: 20px 0;} .techlink a { text-decoration: none;} a.boordenSelector { display: block; width: 183px; padding: 16px 0; background: url("/images/btn_boorden.png") no-repeat; font-size: 14px; text-transform: uppercase; text-decoration: none; text-align: center; } a.boordenSelector:hover { background: url("/images/btn_boorden_hover.png") no-repeat; } #navBoorden { position: relative; float: right; width: 473px; margin-top: -61px; margin-right: -24px; z-index: 10; *float: left; *margin-left: -24px; _margin-left: -12px; } #navBoorden a { display: inline-block; width: 154px; padding: 5px 0; text-align: center; background: url("/images/arrow-boorden.png") no-repeat; } #navBoorden a.A { background: url("/images/arrow-boorden.png") 24px 9px no-repeat; } #navBoorden a.B{ background: url("/images/arrow-boorden.png") 16px 9px no-repeat; margin: 0 1px; } #navBoorden a.C { background: url("/images/arrow-boorden.png") 14px 9px no-repeat; } #navBoorden a#active.A, #navBoorden a.A:hover { background: url("/images/nav-a.png") no-repeat; text-decoration: none; color: #000; } #navBoorden a#active.B, #navBoorden a.B:hover { background: url("/images/nav-b.png") no-repeat; text-decoration: none; color: #000; } #navBoorden a#active.C, #navBoorden a.C:hover { background: url("/images/nav-c.png") no-repeat; text-decoration: none; color: #000; } .type { position: relative; clear: none; float: left; margin-right: 20px; } .type span { position: absolute; left: 0; text-transform: uppercase; text-align: center; margin-bottom: 14px; } .type img { position: absolute; left: 0; top: 25px; display: inline-block; } .type .lists { clear: left; float: left; margin-top: 105px; } .type ul { clear: left; float: left; margin: 9px 0 0 0; } .type ul li { list-style-type: none; margin: 0 0 6px 0; } .type ul li select { display: block; min-width: 140px; max-width: 150px; } .type .front { z-index: 10; } /* footer ------------------------------------------------------------------*/ #adres span { padding: 0 5px; color: #19cce2; } #copyright, #adres, #footer ul { float: left; margin: 0 30px 0 0; } #footer ul li { float: left; color: #f9f8f8; } #footer ul li span { padding: 0 5px; color: #f9f8f8; } #footer ul li a { color: #f9f8f8; } #footer ul li.active a, #footer ul li a:hover, #duo:hover, ul#languages li { color: #19cce2; text-decoration: none; } #duo { display: block; float: right; width: 40px; color: #f9f8f8; text-align: right; } ul#languages { margin: 0; } ul#languages li { margin: 0 5px; text-transform: uppercase; } /* CMS Preview ------------------------------------------------------------------*/ #CMSpreviewBar { margin-bottom: 10px; padding: 3px; background-color: red; color: #fff; } #CMSpreviewBar a { color: #fff; } /* sitemap ------------------------------------------------------------------*/ #sitemap ul li { font-weight: bold; font-size: 13px; text-transform: uppercase; list-style: none; } #sitemap ul li li { font-weight: bold; font-size: 11px; list-style: none; } #sitemap ul li li li { font-weight: normal; font-size: 12px; text-transform: none; list-style: disc; line-height: 13px; font-size: 11px; } #sitemap ul li a { text-decoration: none; } /* vlekkenoverzicht ------------------------------------------------------------------*/ #vlekken { margin: 0 0 20px 0; } #vlekken h5 { cursor: pointer; } #vlekken h5 span { padding: 0 0 0 20px; background: url(../images/vlekken_pijltje.gif) no-repeat 0 5px; } #vlekken h5 span.active { padding: 0 0 0 20px; background: url(../images/vlekken_pijltje_on.gif) no-repeat 0 5px; color:#048a89; } #vlekken .oplossing { padding: 5px 0 10px 20px; margin: 0 0 5px 0; }