/* ### GENERAL ### */ * { margin: 0px; padding: 0px; } html, body { font-family: 'Trebuchet MS', Trebuchet; font-size: 12px; color: #535353; } #zoekCntr input, #zoekCntr select, #zoekCntr textarea { font-family: 'Trebuchet MS', Trebuchet; font-size: 10px; color: #313231; } body { background: url('../images/bodyBg.gif') #d9d9d5 repeat-x; } img { border: 0px; display: block; } /* ### GLOBAL CLASSES ### */ .clear { clear: both; height: 1px; } /* ### WRAPPER ### */ #wrapper { display: block; position: relative; width: 100%; min-height: 100%; } /* ### MAIN CONTAINER ### */ #mainCntr { margin: 0 auto; padding-bottom: 20px; width: 931px; } /* ### HEADER CONTAINER ### */ #headerCntr { position: relative; width: 931px; height: 245px; background: url('../images/headerBg.png') no-repeat; } #headerCntr h1 { position: absolute; top: 30px; left: 242px; z-index: 10; width: 435px; height: 134px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; } #headerCntr a.keur { position: absolute; top: 10px; right: 15px; z-index: 10; width: 135px; height: 28px; text-indent: -9999px; background: url('../images/keur.png') no-repeat; } #headerCntr img.header { position: absolute; top: 0px; left: 0px; z-index: 5; } /* ### MENU CONTAINER ### */ #menuCntr { position: absolute; top: 194px; left: 0px; z-index: 10; width: 600px; } #menuCntr ul { overflow: hidden; width: 600px; list-style: none; } #menuCntr li { margin-left: 20px; float: left; display: inline; } #menuCntr li a { font-size: 14px; font-weight: bold; text-decoration: none; color: #fff; } #menuCntr li a:hover, #menuCntr li.selected a { color: #00b7ff; } /* ### ZOEK CONTAINER ### */ #zoekCntr { padding: 0px 30px 0px 40px; position: absolute; top: 222px; left: 0px; z-index: 10; overflow: hidden; width: 862px; } #zoekCntr ul { padding-top: 2px; float: left; overflow: hidden; width: 650px; list-style: none; } #zoekCntr li { float: left; display: inline; color: #fff; } #zoekCntr li span { padding: 0px 5px 0px 5px; } #zoekCntr li a { padding: 0px 5px 0px 5px; text-decoration: none; color: #fff; } #zoekCntr li a:hover, #zoekCntr li.selected a { text-decoration: underline; color: #313231; } #zoekCntr fieldset { float: right; overflow: hidden; width: 156px; border: 0px; } #zoekCntr input.field { padding: 3px 5px 0px 5px; float: left; width: 124px; height: 16px; border: 0px; background: #d1e0e0;} #zoekCntr input.submit { float: left; width: 22px; height: 19px; } /* ### WW CONTAINER ### */ #wwCntr { padding: 8px 10px 5px 85px; position: absolute; top: 143px; left: 684px; z-index: 10; width: 164px; height: 69px; line-height: 18px; background: url('../images/wwBg.png') no-repeat; } #wwCntr h3 { font-size: 12px; font-weight: bold; color: #0098d4; } #wwCntr ul { list-style: none; } #wwCntr li { color: #313231; } #wwCntr a { position: absolute; top: 15px; left: 20px; display: block; width: 45px; height: 40px; text-indent: -9999px; } /* ### CONTENT CONTAINER ### */ #contentCntr { padding: 20px 0px 20px; width: 931px; background: url('../images/contentBg.gif') repeat-y; } #contentCntr div.cTop { background: url('../images/contentBar.gif') repeat-y left; } #contentCntr div.cBottom { padding: 0px 32px 0px 40px; width: 859px; background: url('../images/logos.gif') no-repeat left bottom; z-index:1000;} /* ### LEFT CONTAINER ### */ #leftCntr { float: left; width: 164px; } /* ### NAV BOX ### */ .navBox { position: relative; width: 164px; } .navBox img { position: absolute; bottom: -150px; left: -163px; z-index: 5; } .navBox ul { position: relative; z-index: 10; list-style: none; } .navBox ul ul { padding: 10px 0px 0px 20px;} .navBox ul ul li { padding-bottom: 5px; } .navBox ul ul li a { padding-left: 0px; font-size: 12px; font-weight: normal; color: #535353; background: none; } .navBox ul ul li a:hover, .navBox ul ul li a.selected a { text-decoration: underline; color: #0681b2; background: none; } .navBox li { padding-bottom: 10px; } .navBox li a { padding-left: 20px; font-size: 16px; font-weight: bold; text-decoration: none; color: #0098d4; background: url('../images/navBg.gif') no-repeat left; } .navBox li a:hover, .navBox li a.selected { background: url('../images/navHBg.gif') no-repeat left; } /* ### RIGHT CONTAINER ### */ #rightCntr { float: right; width: 676px; min-height:500px; } #rightCntr a{ color:#438097; } /* ### PRODUCT BOX ### */ .productBox { padding-bottom: 30px; position: relative; overflow: hidden; width: 676px; } .productBox h1 { margin-bottom: 10px; padding-bottom: 8px; font-size: 20px; font-weight: bold; color: #0098d4; border-bottom: 1px solid #bbb; } #rightCntr .top { margin-bottom: 10px; padding-bottom: 8px; font-size: 20px; font-weight: bold; color: #0098d4; border-bottom: 1px solid #bbb; } #rightCntr .topTable { background: #0098d4; color:#FFF; height:25px; } .productBox div.pic { padding-left: 10px; float: left; display: inline; width: 270px; } .productBox div.text { padding-right: 10px; float: right; display: inline; width: 340px; } .productBox a.star { position: absolute; top: 5px; right: 10px; display: block; width: 89px; height: 15px; text-indent: -9999px; background: url('../images/stars2.gif') no-repeat; } .productBox p {line-height: 22px; } .productBox div.large { height: 215px; } .productBox div.large img { padding: 5px; border: 1px solid #cecece; } .productBox a.prev { position: absolute; top: 28px; left: 0px; display: block; width: 12px; height: 14px; text-indent: -9999px; background: url('../images/prev.gif') no-repeat; } .productBox a.next { position: absolute; top: 28px; right: 0px; display: block; width: 12px; height: 14px; text-indent: -9999px; background: url('../images/next.gif') no-repeat; } .productBox div.slider { position: relative; height: 80px; } .productBox div.slider ul { padding-left: 18px; overflow: hidden; width: 252px; list-style: none; } .productBox div.slider li { margin-left: 4px; float: left; display: inline; } .productBox div.slider img { padding: 2px; border: 1px solid #cecece; } .productBox ul.buttons { padding: 30px 0px 0px 70px; list-style: none; } .productBox ul.buttons li { padding-bottom: 5px; height: 22px; } .productBox ul.buttons li a { display: block; width: 133px; height: 22px; line-height: 22px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/button2.gif') no-repeat; } .productBox ul.buttons li a:hover { background-image: url('../images/button3.gif'); } .productBox div.voor { float: left; width: 120px; height: 80px; } .productBox div.voor ul { padding-top: 25px; overflow: hidden; width: 120px; list-style: none; } .productBox div.voor li { margin-right: 5px; float: left; display: inline; } .productBox div.voor li a { display: block; height: 10px; text-indent: -9999px; } .productBox div.prijs { padding: 5px 15px 0px 0px; float: right; width: 120px; height: 75px; font-weight: bold; text-align: right; font-size: 22px; color: #fff; background: url('../images/prijsBg.gif') no-repeat bottom; } .productBox div.prijs .our_price_displaySingle {padding: 15px 20px 0px 0px;height:75px;display:block;clear:both;} .productBox div.prijs span.prijs { font-size: 17px; color: #ffba00; } .productBox div.prijs span span { text-decoration: line-through; } .productBox h3 { padding: 0px 0px 5px 5px; font-size: 16px; font-weight: bold; color: #0098d4; } .productBox fieldset { padding: 15px 95px 15px 15px; overflow: hidden; width: 230px; border: 1px solid #d0d0d0; } .productBox label { margin-bottom: 3px; display: block; float: left; width: 100px; height: 22px; line-height: 22px; } .productBox select { margin-bottom: 3px; padding: 1px; float: left; width: 114px; height: 22px; font-size: 12px; color: #535353; border: 1px solid #a7a6aa; background: #fff; } .productBox input.field { margin-bottom: 3px; padding: 3px 5px 0px 5px; float: left; width: 47px; height: 17px; font-size: 12px; color: #535353; border: 1px solid #a7a6aa; background: #fff; } .productBox select.red { color: red; } .productBox a.button { margin: 4px 0px 0px 98px; display: block; width: 104px; height: 22px; line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } a.button { cursor:hand;margin: 0px 0px 0px 0px; display: block; width: 104px; height: 22px; line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } .productBox input.button { margin: 4px 0px 0px 98px; width: 104px; height: 22px; border:0px;line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } input.button { cursor:hand;margin: 0px 0px 0px 0px; width: 104px; height: 22px; border:0px;line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } .productBox a.button:hover { background-image: url('../images/buttonHBg.gif'); } .productBox div.voor a.red { width: 10px; background: url('../images/order.gif') no-repeat 0px 3px; } .productBox div.voor a.orange { width: 23px; background: url('../images/order.gif') no-repeat 0px 3px; } .productBox div.voor a.light { width: 36px; background: url('../images/order.gif') no-repeat 0px 3px; } .productBox div.voor a.green { width: 49px; background: url('../images/order.gif') no-repeat 0px 3px; } div.voor { float: left; width: 50px; height: 20px; } div.voor a { display: block; height: 10px; text-indent: -9999px; } div.voor a.red { width: 10px; background: url('../images/order.gif') no-repeat 0px 3px; } div.voor a.orange { width: 23px; background: url('../images/order.gif') no-repeat 0px 3px; } div.voor a.light { width: 36px; background: url('../images/order.gif') no-repeat 0px 3px; } div.voor a.green { width: 49px; background: url('../images/order.gif') no-repeat 0px 3px; } .productBox a.one { background-position: left -45px;} .productBox a.two { background-position: left -30px; } .productBox a.three { background-position: left -15px; } .productBox a.four { background-position: left -0px; } .productBox a.five { background-position: left -60px ; } /* ### SLIDER BOX ### */ .sliderBox { padding-bottom: 8px; position: relative; overflow: hidden; width: 676px; border-bottom: 1px solid #bbb;margin-bottom:15px;} .sliderBox h3 { padding-bottom: 8px; font-size: 14px; font-weight: bold; color: #0098d4; border-bottom: 1px solid #bbb; } .sliderBox a.prev { position: absolute; top: 68px; left: 20px; display: block; width: 12px; height: 14px; text-indent: -9999px; background: url('../images/prev.gif') no-repeat; } .sliderBox a.next { position: absolute; top: 68px; right: 20px; display: block; width: 12px; height: 14px; text-indent: -9999px; background: url('../images/next.gif') no-repeat; } .sliderBox ul { padding: 0px 30px 0px 60px; overflow: hidden; width: 586px; height: 100px; list-style: none; } .sliderBox li { padding: 10px 10px 0px 0px; float: left; display: inline; } .sliderBox li img { height: 90px; } /* ### RECENSIE BOX ### */ .recensieBox { padding-bottom: 30px; position: relative; overflow: hidden; width: 676px; } .recensieBox h3 { padding-bottom: 20px; font-size: 14px; font-weight: bold; color: #0098d4; } .recensieBox h4 { padding-bottom: 5px; font-size: 13px; font-weight: bold; color: #0098d4; } .recensieBox a.button { display: block; width: 104px; height: 22px;line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } .recensieBox a.button:hover { background-image: url('../images/buttonHBg.gif'); } .recensieBox a.top1 { position: absolute; top: 0px; right: 0px; } .recensieBox div.recensie { margin-bottom: 15px; padding: 10px 10px 0px 10px; position: relative; background: #e5e5e5; } .recensieBox p { padding-bottom: 10px; line-height: 22px; } .recensieBox a.star { position: absolute; top: 10px; right: 10px; display: block; height: 13px; text-indent: -9999px; background: url('../images/stars.gif') no-repeat right; } .recensieBox a.one { width: 14px; } .recensieBox a.two { width: 30px; } .recensieBox a.three { width: 46px; } .recensieBox a.four { width: 63px; } .recensieBox a.five { width: 79px; } /* ### FLASH BOX ### */ .flashBox { padding: 0px 0px 30px 8px; width: 658px; } /* ### THUMB BOX ### */ .thumbBox { padding-bottom: 30px; overflow: hidden; width: 676px; } .thumbBox h3 { margin-bottom: 10px; padding-bottom: 5px; font-size: 16px; font-weight: bold; color: #0098d4; border-bottom: 1px solid #bbb; } .thumbBox div.thumb { padding: 5px 9px 5px 9px; float: left; display: inline; width: 150px; text-align: center; border-right: 1px solid #e3e3e3; } .thumbBox div.last { border-right: 0px; } .thumbBox h2 { padding-bottom: 5px; font-size: 15px; font-weight: normal; height:55px;overflow:hidden;color: #0098d4;} .thumbBox img { margin-left: 15px; } .thumbBox em { padding-bottom: 10px; display: block; font-style: normal; font-weight: bold; color: #4f4e4e; } .thumbBox a.button { margin-left: 23px; display: block; width: 104px; height: 22px; line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } .thumbBox a.button:hover { background-image: url('../images/buttonHBg.gif'); } /* ### THUMB BOXCAT ### */ .thumbBoxCat { padding-bottom: 30px; overflow: hidden; width: 676px; } .thumbBoxCat h3 { margin-bottom: 10px; padding-bottom: 5px; font-size: 16px; font-weight: bold; color: #0098d4; border-bottom: 1px solid #bbb; } .thumbBoxCat div.thumb { padding: 10px 9px 15px 9px; float: left; display: inline; width: 150px; text-align: center; border-right: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3; } .thumbBoxCat div.last { border-right: 0px; } .thumbBoxCat h2 { padding-bottom: 5px; font-size: 15px; font-weight: normal; color: #0098d4;height:55px;overflow:hidden; } .thumbBoxCat img { margin-left: 15px;border:1px solid #bbb; } .thumbBoxCat em { border-top:1px solid #ccc;padding-bottom: 10px; display: block; font-style: normal; font-weight: bold; color: #4f4e4e; } .thumbBoxCat a.button { margin-left: 23px; display: block; width: 104px; height: 22px; line-height: 20px; text-align: center; font-size: 11px; text-decoration: none; color: #6b6b6b; background: url('../images/buttonBg.gif') no-repeat; } .thumbBoxCat a.button:hover { background-image: url('../images/buttonHBg.gif'); } /* ### FOOTER CONTAINER ### */ #footerCntr {margin-left: 10px; padding: 10px 15px 0px 15px; position: relative; overflow: hidden; width: 878px; height: 80px; background: url('../images/footerBg.gif') no-repeat; } #footerCntr ul { float: left; overflow: hidden; width: 878px; list-style: none; padding-left:25px;} #footerCntr li { float: left; display: inline; color: #fff; } #footerCntr li a { padding: 0px 5px 0px 5px; text-decoration: none; font-weight: bold; color: #fff; } #footerCntr li a:hover { color: #2e2e2d; } #footerCntr p { padding-right: 5px; float: right; display: inline; width: 330px; text-align: right; color: #fff; } #footerCntr a.martin { position: relative; top: 28px; left: 840px; display: block; width: 25px; height: 17px; text-indent: -9999px; } #footerCntr span.aquilo {position: relative; top: 25px; left: 10px; display: block; width: 150px; height: 17px;color:#fff; } .line { padding: 0px 0px 0px 0px; margin: 0px; color: #0098d4; height: 1px; width: 300px; margin-left:373px; } .bestellingTable .odd { background-color:#EEE; } .bestellingTable td { height: 30px; padding-left: 5px; } input.formulier { border: 1px solid #BBBBBB; font-family: Arial, verdana; font-size: 9pt; color: #444444; background-color: #FFFFFF; width: 250px; } textarea.formulier { border: 1px solid #BBBBBB; font-family: Arial, verdana; font-size: 9pt; color: #444444; background-color: #FFFFFF; width: 250px; height: 125px; } #thumbs_list_items{ overflow:hidden; float:left; width:536px; margin-left:70px; } #thumbs_list{ overflow:hidden; float:left; width:220px; margin-left:25px; } #thumbs_list ul{ padding-left:0px; list-style-type:none; margin-top: 5px; } #thumbs_list li{ float:left; cursor:pointer; } #view_scroll_left, #view_scroll_right{ } #view_scroll_right{ } #color_picker p { margin: 0 0 0.4em 0; padding: 0 0 0 0; } #color_picker { padding: 0.7em; background: #e5e6e7 url('../img/product-short-desc-bg.gif') repeat-x top left; height: 42px; border: 1px #d0d3d8 solid; margin-bottom: 1.5em; } a.color_pick { width: 20px; height: 20px; float: left; border: 1px solid #666; margin: 0 0.5em 0 0; cursor: pointer; } a.color_pick:hover { border: 1px solid #000; } .productBox div .lower { padding-top:45px; border:1px solid black; } #navGegevens li { float:left; margin-right: 20px; } #navGegevens { float:left; margin-bottom: 20px; width: 100%; } #navGegevens img { float:left; margin-top:4px; margin-right: 5px; } .melding { color: #E32727; } img.smbanner { border: 1px solid #ccc; padding: 2px; margin: 3px; margin-left: 5px; }