/* ### general ### */ * { padding: 0px; margin: 0px; } html, body { font-family: Arial; font-size: 12px; color: #525252; } input, select, textarea { font-family: Arial; font-size: 12px; color: #525252; } img { border: 0px; display: block; } a, input { outline: none; } a:hover { text-decoration: underline; } /* ### global classes ### */ .clear { clear: both; height: 0px; overflow: hidden; } .error { padding-left: 20px;} /* ### main container ### */ #mainCntr { margin: 0 auto; width: 100%; } /* ### header container ### */ #headerCntr { margin: 0 auto; position: relative; width: 1056px; height: 152px; overflow: hidden; } #headerCntr h1 { position: absolute; top: 13px; left: 53px; } #headerCntr h1 a { display: block; width: 450px; height: 104px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; } #headerCntr h1.pool { position: absolute; display: block; top: 13px; left: 53px; } #headerCntr h1.pool a { display: block; width: 450px; height: 104px; text-indent: -9999px; background: url('../images/logo.png') no-repeat; } #headerCntr h1.hottub { position: absolute; top: 13px; left: 53px; } #headerCntr h1.hottub a { display: block; width: 450px; height: 104px; text-indent: -9999px; background: url('../images/logo_sectie_hottub.png') no-repeat; } #headerCntr h1.industry { position: absolute; top: 13px; left: 53px; } #headerCntr h1.industry a { display: block; width: 450px; height: 104px; text-indent: -9999px; background: url('../images/logo_sectie_industry.png') no-repeat; } #headerCntr h1.aqua { position: absolute; top: 63px; left: 278px} #headerCntr h1.aqua a { display: block; width: 500px; height: 75px; text-indent: -9999px; background: url('../images/logo_aquafinesse.png') no-repeat; } /* ### link box ### */ .linkBox { width: 992px; overflow: hidden;} .linkBox ul { list-style: none; width: 515px; float: right; } .linkBox li { float: left;} .linkBox li a { width: 121px; height: 29px; display: block; background: url('../images/inactief.png') no-repeat; } .linkBox li a.aqua { width: 141px; height: 29px; display: block; background: url('../images/link-aqua2.png') no-repeat; } .linkBox li a.pool span { margin: 0px 0px 0px 42px; width: 43px; height: 26px; text-align: center; display: block; text-indent: -9999px; background: url('../images/pool.png') no-repeat;} .linkBox li a.hottub span { margin: 0px 0px 0px 33px; width: 63px; height: 26px; text-align: center; display: block; text-indent: -9999px; background: url('../images/hottub.png') no-repeat;} .linkBox li a.industry span { margin: 0px 0px 0px 27px; width: 74px; height: 26px; text-align: center; display: block; text-indent: -9999px; background: url('../images/industry.png') no-repeat;} .linkBox li a:hover, .linkBox li.selected a { background: url('../images/actief.png') no-repeat;} .linkBox li a.aqua:hover, .linkBox li.selected a.aqua { background: url('../images/link-aqua-hover2.png') no-repeat;} .linkBox li a.aqua span { width: 150px; display: block; height: 26px; text-indent: -9999px; background: url('../images/aqua.png') no-repeat; background-position: 12px 10px; } /* ### language box ### */ .languageBox { padding: 13px 0px 90px 0px; margin-right: 75px; float: right; width: 172px; overflow: hidden; position: relative; } .languageBox fieldset { border: none; } .languageBox label { font-family: Verdana, Arial; color: #000; } .languageBox select { width: 100px; color: #16232d; } #bestelButton { position: absolute; top: 37px; left: 50px; float: left; } #bestelButton img { float: left; margin-left: 10px; } #northamerica { position: absolute; top: 35px; left: 80px; float: left; } #northamerica img { float: right; margin-left: 10px; width: 80px; } /* ### Lavalamp ### */ .menuBox { padding-left: 45px; width: 1056px; overflow: hidden; position: absolute; top: 120px;} .menuBox ul { list-style: none; } .menuBox li a { padding-bottom: 6px; line-height: 17px; display: block; text-transform: capitalize; font-weight: bold; color: #9c9c9c; text-decoration: none; } .menuBox li.dark a { color: #646464; } .menuBox li a:hover, .menuBox li.current a { font-weight: bold; color: #0a74ab; } .lavaLampWithImage { position: relative; height: 30px; width: 1056px; overflow: hidden; } .lavaLampWithImage li { padding: 0 7px; float: left; font-family: Verdana, Arial; } .lavaLampWithImage li.back { background: url('../images/menu-hover.png') center bottom no-repeat -30px; width: 9px; height: 25px; z-index: 8; position: absolute; } .lavaLampWithImage li.back .left { background: url('../images/menu-hover.png') center bottom no-repeat; height: 25px; margin-right: 12px; /* 7px is the width of the rounded shape */ } .lavaLampWithImage li a { text-decoration: none; color: #9c9c9c; outline: none; text-align: center; text-transform: capitalize; z-index: 10; display: block; float: left; position: relative; overflow: hidden; } .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { border: none; } #bannerCntr { padding-top: 8px; margin: 0 auto; width: 100%; height: 357px; background: url('../images/achtergrond.jpg') center no-repeat; } #bannertestCntr { padding-top: 8px; margin: 0 auto; width: 100%; height: 335px; background: url('../images/achtergrond.jpg') center no-repeat; } #bannerBox #banners {list-style: none;} #bannerBox #banners li { padding: 0px 0px 0px 0px; float: left; width: 930px; } #bannerBox #prevBtn a { position: absolute; left: -40px; top: 150px; display: block; text-indent: -9999px; width: 20px; height: 23px; background: url('../images/prev.png') left top no-repeat; } #bannerBox #nextBtn a { position: absolute; right: -40px; top: 150px; width: 20px; height: 23px; display: block; text-indent: -9999px; background: url('../images/next.png') right top no-repeat; } /* ### banner container ### */ #bannerDoorwayCntr { padding-top: 8px; margin: 0 auto; width: 100%; height: 357px; background: #fff url('../images/achtergrond.jpg') center no-repeat; } /*#bannerDoorwayCntr { padding-top: 8px; margin: 0 auto; width: 100%; height: 357px; background: url('../images/banner-bg.jpg') center no-repeat; } */ /* ### banner box ### */ .bannerDoorwayBox { padding-bottom: 2px; margin: 0 auto; width: 1056px; position: relative; } .bannerDoorwayBox img { margin: 0px 0px 0px 53px; border: 10px solid #0a74ab; } .bannerDoorwayBox ul { list-style: none; padding-top: 40px; } .bannerDoorwayBox li.pool { float: left; width: 440px; margin-left: 49px; height: 251px; border: 10px solid #0a74ab;} .bannerDoorwayBox li.hottub { float: left; margin-left: 32px; width: 440px; height: 251px; border: 10px solid #24b1ce;} .bannerDoorwayBox li:hover { border: 10px solid #7bc0d7;} .bannerDoorwayBox li img.bg { margin: 0; border: none;} .bannerDoorwayBox li img.titel { position: absolute; top: 210px; margin: 0; border: none;} /* ## DOORWAY BOX (gebruikt op de doorway 2x divs met tekst) */ .doorwayBox1 { float: left; width: 435px; margin-left: 5px; margin-bottom: 20px; } .doorwayBox2 { float: left; width: 430px; margin-left: 61px; margin-right: 10px; margin-bottom: 20px; } .doorwayBox1 h2, .doorwayBox2 h2 { font-size: 18px; padding: 5px; text-transform: uppercase;} .doorwayBox1 p, .doorwayBox2 p{ line-height: 24px; padding: 5px; } .doorwayBox1 span { color: #0a74ab; } .doorwayBox2 span { color: #24b1ce; } .doorwayBox3 span { color: #c6d64e; } /* ### np box ### */ .npBox { padding-left: 80px; margin: 0 auto; width: 900px; overflow: hidden; } .npBox ul { list-style: none; } .npBox li { padding-left: 5px; float: left; font-size: 10px; background: url('../images/icon.jpg') right center no-repeat; } .npBox li.last { padding-left: 5px; float: left; font-size: 10px; background: none;} .npBox li a, .npBox li.last a { padding-right: 10px; display: block; color: #525252; line-height: 22px; text-decoration: underline; } .npBox li a:hover, .npBox li.last a:hover { text-decoration: none; } /* ### content container ### */ #contentCntr { padding: 0 53px; margin: 0 auto; overflow: hidden; width: 947px; } #contentCntr p { line-height: 24px } #contentCntr img { margin-bottom: 20px; } #contentCntr2 { padding: 0 0px; margin: 0 auto; overflow: hidden; width: 1056px; } #dealer_flash { float: left; padding-right: 30px; } #dealer_content { float: left; position: relative; background: url('../images/achtergrond-AF.png') right repeat; padding: 5px; } #dealer_content p { padding-left: 3px; padding-right: 3px; } #dealer_content_tekst { width: 336px; height: 137px; margin-top: 70px; padding-top: 10px;} #dealer_content_tekst p{ font-size: 14px; font-weight: bold; margin: 13px 10px 0 10px;} #dealer_content h2 { font-size: 14px;} #contactCntr { overflow: hidden; width: 430px; } #contactCntr h3 { line-height: 24px; font-size: 12px; font-weight: bold; color: #58307d; } #contactCntr div.formulier form { padding-top: 10px; width: 430px; } div.formulier label {float:left;width:150px;text-align:left;} div.formulier input[type="text"], div.formulier input[type="password"] { width: 200px; height: 20px;} div.formulier select { width: 200px; height: 20px;} div.formulier textarea { width: 250px; height: 100px;} div.padding { padding-top: 10px;} div.optioneel {padding-top: 3px;} div.padding { padding-top: 10px;} .invoicebutton { background-color: #B1DAEC; height: 28px; cursor: pointer; border: 1px solid #0a74ab; color: #0a74ab; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px 5px 5px 5px; } .invoicebutton:hover { background-color: #0a74ab; color: #fff; } #contentCntr .container { padding-left: 20px; width: 450px;} #contentCntr .container p{ padding-left: 20px; width: 350px; line-height: 18px; padding: 0; position: inline;} #contentCntr .container p span { width: 100px; position: inline; float: left;} #contentCntr .container p span.info { width: 230px; position: inline;padding: 0 0 0 20px;} /* ### Producten overzicht container ### */ .productenBox { padding: 20px 60px; background: url('../images/footer-bg.jpg') left bottom no-repeat; } .productenBox img { float: left; padding-right: 20px; width: 283px; height: 212px;} .productenBox h2 { text-transform: uppercase; } .productenBox p { line-height: 24px; min-height: 180px; } .overzichtBox { padding: 20px 60px; background: url('../images/footer-bg.jpg') left bottom no-repeat; } .overzichtBox img { float: left; padding-right: 20px; width: 283px; height: 212px;} .overzichtBox h2 { text-transform: uppercase; } .overzichtBox p { line-height: 24px; min-height: 200px; } .overzichtBox2 { padding: 20px 60px; min-height: 200px; background: url('../images/footer-bg.jpg') left bottom no-repeat; } .overzichtFotoBox { width: 250px; float: left; } .overzichtFotoBox img { width: 250px; } .overzichtContentBox { float: left; width: 500px; padding-left: 20px; } .overzichtContentBox h2 { text-transform: uppercase; } .overzichtContentBox p { line-height: 24px; min-height: 200px; } /* ### Product pagina ### */ .productBox { width: 947px; padding-bottom: 20px; } .productBox .fotoBox { float: right; background: #cbe0eb; width: 305px;} .productBox .fotoBox img { float: right; padding: 11px; width: 283px; height: 212px;} .productBox .fotoBox img.thumb1 { padding: 0 11px 10px 4px; width: 63px; height: 47px; } .productBox .fotoBox img.thumb2 { padding: 0 5px 10px 5px; width: 63px; height: 47px; } .productBox .fotoBox img.thumb4 { padding: 0 4px 10px 11px; width: 63px; height: 47px; } .productBox h2 { text-transform: uppercase; width: 470px; } .productBox p { line-height: 24px; width: 575px; margin-bottom: 10px; min-height: 260px;} #speccontent { background: url('../images/cases_spec_ulbg.png') no-repeat bottom left; padding-left: 35px;} .fotoalbum { padding-left: 30px; float: left; margin-right: 0px; padding-bottom: 50px; margin-top: 0px; width: 850px;} .fotoalbum h1 { padding-bottom: 20px; } .fotoalbum a { color: #000; } .fotoalbum ul#fotoalbums { list-style: none; margin-top: 20px; padding-left: 100px;} .fotoalbum ul#fotoalbums li { position: relative; width: 340px; float: left; padding: 0px; background: url('../images/af_thumbBg.png') no-repeat; height: 224px; display: block; margin-right: 5px; margin-bottom: 10px; } .fotoalbum ul#fotoalbums li h2 { position: absolute; font-family: Arial, Verdana; font-size: 14px; font-weight: normal; color: #fff; background: url('../images/af_portfolio_titelBg.png') no-repeat; text-decoration: none; width: 217px; height: 46px; top: 160px; margin-left: -8px; padding: 12px 0 0 10px;} .fotoalbum ul#fotoalbums li h2:hover { background: url('../images/portfolio_titelBg_hover.png') no-repeat; } .fotoalbum ul#fotoalbums li img { padding-top: 9px; padding-left: 9px; width: 300px; height: 200px;} .fotoalbum .ladengif { margin: 0 auto; padding-top: 40px; } #fotosspecifiek { position: relative; padding-left: 150px; height: 320px; width: 590px; overflow:hidden; margin: 0 auto;} #fotosspecifiek #sliderBox { height: 300px; width: 450px;overflow:hidden;} #fotosspecifiek #slider ul{ list-style:none; height: 300px; width: 450px; overflow:hidden; padding-left: 0px;} #fotosspecifiek #slider li{ overflow:hidden;overflow:hidden;height: 300px; width: 458px;} #fotosspecifiek #slider li img {margin-top: 20px; height: 300px; width: 450px;} #hoekjerechtsboven { display: block; width: 90px; height: 90px; position: absolute; right: 170px; top: 0px; background: url('../images/port_spec_rechtboven.png') no-repeat; } #hoekjelinksonder { display: block; width: 90px; height: 90px; position: absolute; left: 120px; top: 190px; background: url('../images/port_spec_linksonder.png') no-repeat; } #fotosspecifiek #sliderBox #prevBtn{ text-indent: 9999px; left: 90px; display:block; width:45px; height:77px; position:absolute; top:125px;} #fotosspecifiek #sliderBox #nextBtn{ text-indent: 9999px; display:block; width:45px; height:77px; position:absolute; right:70px; top:125px;} #fotosspecifiek #sliderBox #prevBtn a, #nextBtn a{ display:block; width:45px; height:77px; background:url('../images/af_shuffle_left.png') no-repeat 0 0;} #fotosspecifiek #sliderBox #nextBtn a{ background:url('../images/af_shuffle_right.png') no-repeat 0 0;} .fotoalbum ul#fotoalbum { list-style: none; margin-top: 40px; } .fotoalbum ul#fotoalbum li { float: left; margin: 0 0 20px 20px;} .flashBox { width: 947px; padding-bottom: 10px; } .flashBox ul { width: 947px; } .flashBox ul li { float: left; width: 314px; height: 248px; display: block; background: url('../images/wheretobuy_Bg.jpg') no-repeat; line-height: 12px; } .flashBox ul li img { float: left; display: block; height: 48px; width: 48px; margin-left: 10px; margin-top: 5px;} .flashBox ul li h2 { float: left; margin-top: 0px; width: 314px; padding-left: 20px; line-height: 24px;} .flashBox ul li span { line-height: 16px; float: left; margin-top: 5px; width: 280px; padding-left: 20px; } .flashBox ul li a { font-weight: bold; width: 314px; float: left; padding-left: 20px; margin-top: 20px; } #flashcontent { width: 947px; height: 640px;} /* ### left container ### */ #leftCntr { padding-top: 2px; float: left; width: 456px; } /* ### text box ### */ .textBox { padding-left: 4px; width: 452px; } .textBox h2 { padding-left: 31px; text-transform: uppercase; font-size: 18px; background: url('../images/icon1.jpg') left center no-repeat; } .textBox p { padding: 5px 0px 20px 32px; line-height: 24px; } /* ### right container ### */ #rightCntr { float: right; width: 460px; } .doorBox { padding-top: 10px; width: 460px; } .doorBox ul { overflow: hidden; width: 460px; list-style: none; } .doorBox li { float: left; width: 460px; background: url('../images/product-mid.jpg') repeat-y; margin-bottom: 10px; } .doorBox li a { padding: 10px; width: 440px; display: block; float: left; text-decoration: none; background: url('../images/product-top.jpg') left top no-repeat; } .doorBox li a:hover { background: #0a74ab; } .doorBox li a img { padding-right: 10px; float: left; width: 240px; height: 180px;} .doorBox li a strong { color: #525252; font-size: 18px; text-transform: uppercase; } .doorBox li a span { line-height: 24px; color: #525252; } .doorBox li a:hover span, .doorBox li a:hover strong { color: #fff; } /* ### info box ### */ .infoBox { padding: 18px 0px 0px 0px; width: 455px; } .infoBox h2 { padding-bottom: 5px; font-size: 18px; } .infoBox p { padding-bottom: 22px; line-height: 24px; } #DealMenCon { float: left; width: 250px; margin-right: 40px; } #DealMenCon ul { list-style: none; float: left; width: 250px; padding: 20px 0px 20px 20px; background: #c7eef5; border-bottom: 1px solid #3274ab;} #DealMenCon ul li a { padding: 15px; font-weight: bold; display: block; } #DealMenCon ul li a:hover, #DealMenCon ul li a.active { background: url('../images/dealer_navi.png') no-repeat right #fff; text-decoration: none; } #DealConCon { width: 600px; float: left; padding: 20px;} .ConBox { width: 600px; } .ConBox fieldset { border: none; position: relative; } .dealerlogin { padding: 10px; width: 400px;} .dealerlogin h3 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #3274ab; } .dealerlogin img { float: left; margin-right: 20px; } .dealerlogin .username { float: left; margin-top: 15px; } .dealerlogin .username label { float: left; width: 100px; height: 20px; } .dealerlogin .username input { float: right; width: 150px; height: 20px; } .dealerlogin a { font-size: 10px; position: absolute; left: 160px; bottom: 18px; } input.signin_submit { float: right; width: 150px; border: 1px solid #3274ab; height: 20px; margin-top: 20px; font-weight: bold; } /* ### Producten overzicht container ### */ .prod-dealerBox { padding: 20px 0px; border-bottom: 1px solid #3274ab; } .prod-dealerBox img { float: left; padding-right: 20px; width: 283px; height: 212px;} .prod-dealerBox h2 { text-transform: uppercase; } .prod-dealerBox h3 { float: left; padding-top: 15px; } .prod-dealerBox p { line-height: 24px; min-height: 180px; } #DealConCon input[type="submit"], #DealConCon input.orderbutton { float: right;width: 120px; border: 1px solid #3274ab; font-weight: bold; } .addtocart { border: 1px solid #3274ab; padding: 10px; font-weight: bold; background: #c7eef5; float: right; margin-top: 0px; } .addtocart input[type="submit"] { width: 80px; border: 1px solid #3274ab; font-weight: bold; } /* ### footer container ### */ #footerCntr { padding: 14px 53px 50px 53px; margin: 0 auto; overflow: hidden; width: 950px; background: url('../images/footer-bg.jpg') left top no-repeat; } #footerCntr ul { padding-left: 15px; float: left; list-style: none; } #footerCntr li { padding: 0 8px; float: left; font-size: 10px; background: url('../images/footer-line.jpg') right center no-repeat; } #footerCntr li a { display: block; float: left; color: #454545; text-decoration: none; } #footerCntr li a:hover { text-decoration: underline; } #footerCntr li.last { background: none; } #footerCntr ul.copy { padding-right: 15px; text-transform: uppercase; float: right; list-style: none; } #footerCntr li span { padding-right: 4px; float: left; display: block; }