/************************************************************** ** Algemeen ***************************************************************/ .png{ behavior: url(http://www.stofzuigerartikelen.nl/Includes/iepngfix.php);} HTML{ height: 100.01%;} BODY{ margin: 0; height: 100%; text-align: center; background: url(http://www.stofzuigerartikelen.nl/Images/bg.gif) #f3f3f3 repeat-x 0 0;} HTML, BODY{ font-size: 11px; color: #000; line-height: normal; font-family: Arial, Helvetica, sans-serif;} A{ color: #000;} A:hover{ color: #be020b;} A:focus{ outline: none;} P{ margin: 0; margin-bottom: 10px;} IMG{ border: none;} FORM{ margin: 0;} UL, OL{ margin: 0 0 10px 15px; padding: 0 0 0 18px;} LI{ padding-bottom: 2px;} LI LI{ padding-bottom: 2px;} H1{ font-size: 44px; line-height: 49px;} H2{ font-size: 38px; line-height: 42px;} H3{ font-size: 28px; line-height: 32px;} H4{ font-size: 20px; line-height: 25px;} H5{ font-size: 18px; line-height: 23px;} H6{ font-size: 12px; line-height: 14px;} H1, H2, H3, H4, H5, H6{ margin: 0 0 5px 0; font-family: Arial, Helvetica, sans-serif; color: #000;} H5{ color: #FFF;} SELECT.form_text, INPUT.form_text{ float: left; height: 15px; padding-top: 1px; padding-left: 2px; font-size: 12px; font-weight: normal; color: #000; margin: 0 0 2px 0; font-family: Arial, Helvetica, sans-serif;} INPUT.form_btn{ float: left; margin: 0; font-size: 13px; color: #000; font-family: Arial, Helvetica, sans-serif;} SELECT.form_text{ padding: 0; height: 24px; font-size: 12px;} TEXTAREA{ font-family: Arial, Helvetica, sans-serif; font-size: 11px; border: #82A9EC 1px solid;} BR.clearer{ margin: 0; padding: 0; line-height: 0; font-size: 1px; height: 0; clear: both;} .clear-element:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} .ie_clearer{ content: "."; display: inline; height: 0; font-size: 1px; clear: both; visibility: hidden;} .spamcontrole { width: 5px; visibility: hidden;} A.button_left{ float: left; width:105px; height: 21px; white-space: nowrap; display: block; text-decoration: none; cursor: pointer;} A.button_left:hover SPAN{ text-decoration: underline;} A.button_left SPAN.pijl{ height: 21px; padding: 0; float: left; width: 18px; display: inline; background: url(http://www.stofzuigerartikelen.nl/Images/button_links.jpg) no-repeat 0 0;} A.button_left SPAN{ height: 21px; line-height: 19px; color: #000; float: left; font-size: 10px; padding: 0 10px 0 5px; font-weight: bold; background: url(http://www.stofzuigerartikelen.nl/Images/button_bg.jpg) repeat-x 0 0;} .product A.button_left{ margin-top: -21px; clear:left; position:relative;} A.button_right{ float: left; height: 21px; white-space: nowrap; display: block; text-decoration: none; cursor: pointer;} A.button_right:hover SPAN{ text-decoration: underline;} A.button_right SPAN{ display: block; height: 21px; font-weight: bold; font-size: 10px; float: left; line-height: 19px; padding: 0 5px 0 10px; color: #000; background: url(http://www.stofzuigerartikelen.nl/Images/button_bg.jpg) repeat-x 0 0;} A.button_right SPAN.pijl{ float: left; height: 21px; padding: 0; width: 18px; display: inline; background: url(http://www.stofzuigerartikelen.nl/Images/button_rechts.jpg) no-repeat 0 0;} A.important_btn SPAN{ background-image: url(http://www.stofzuigerartikelen.nl/Images/important_btn_bg.jpg); color: #FFF; padding-right: 0;} A.important_btn SPAN.refresh{ width: 21px; display: inline; padding: 0; background: url(http://www.stofzuigerartikelen.nl/Images/refresh.png) no-repeat 50% 50%;} SPAN.important_left{ background-image: url(http://www.stofzuigerartikelen.nl/Images/important_btn_links.jpg) !important;} SPAN.important_right{ background-image: url(http://www.stofzuigerartikelen.nl/Images/important_btn_rechts.jpg) !important;} .separator{ color: #BE020B; font-weight: bold; font-size: 13px; line-height: 13px;} /************************************************************** ** Inhoud v/d ***************************************************************/ .total_container{ width: 863px; margin: 0 auto; text-align: left;} .container{ width: 100%; float: left;} .container DIV.wrapper{ width: 100%; float: left; background: url(http://www.stofzuigerartikelen.nl/Images/rechtsonder_bg.jpg) #FFF no-repeat 100% 100%; position: relative;} /************************************************************** ** Header ***************************************************************/ .header{ width: 100%; float: left;} .header A.logo{ width: 558px; height: 52px; display: block; float: left; background: url(http://www.stofzuigerartikelen.nl/Images/logo.jpg) no-repeat 0 0; margin-top: 15px; margin-bottom: 20px;} .header DIV.zoeken{ width: 195px; float: right; margin-bottom: 5px;} .header DIV.zoeken FORM{ width: 100%; display: block; float: right; border: #000 dotted; border-width: 1px 0; margin: 20px 0 3px; padding: 3px 0;} .header DIV.zoeken LABEL{ float: left; display: block; margin-right: 10px;} .header DIV.zoeken INPUT{ float: left; width: 120px; margin-right: 5px;} .header DIV.zoeken A.submit_button{ width: 14px; height: 20px; float: left; display: block; font-size: 16px; font-weight: bold; line-height: 19px; text-decoration: none;} .header DIV.zoeken DIV.onder_zoeken{ clear: left; text-align: right; color: #BFBFBF; padding-right: 25px;} .header DIV.zoeken DIV.onder_zoeken A{ color: #BFBFBF;} .header DIV.zoeken DIV.onder_zoeken A:hover{ color: #000;} .header DIV.zoeken DIV.winkelwagen{ clear: right; text-align: left;} .header DIV.zoeken DIV.winkelwagen A{ padding-left: 25px; display: block; float: left; height: 17px; line-height: 17px; text-decoration: none; background: url(http://www.stofzuigerartikelen.nl/Images/shop_icon.png) no-repeat 0 50%;} .header DIV.zoeken DIV.winkelwagen A SPAN{ margin-right: 10px;} /************************************************************** ** Menu ***************************************************************/ .menu{ width: 250px; padding: 25px 0 0 0; margin: 15px 20px; float: left; display: inline; background: url(http://www.stofzuigerartikelen.nl/Images/red_border.jpg) repeat-x 0 0;} UL#menu{ margin: 0; padding: 0; list-style: none;} UL#menu UL{ margin: 0; padding: 0 0 0 20px; list-style: none;} UL#menu LI{ padding: 2px 0;} UL#menu LI A{ text-decoration: none; font-weight: bold; font-size: 13px;} UL#menu LI A.aan{ color: #be020b;} UL#menu LI A SPAN{ float: left; margin-right: 3px; font-weight: normal; font-size: 16px; line-height: 13px;} UL#menu LI LI A{ font-weight: normal;} .onder_menu{ width: 268px; left: 0; bottom: 0; position: absolute;} .verzendskosten_ster{ margin:30px 0px 30px 0px;} /************************************************************** ** Content ***************************************************************/ .content{ width: 558px; float: left; display: inline; padding-top: 8px; margin: 15px 0 0; padding-bottom: 80px; background: url(http://www.stofzuigerartikelen.nl/Images/blue_border.jpg) repeat-x 0 0;} .content DIV.textvenster{ width: 523px; padding: 15px 15px 15px 20px; position: relative; float: left; background: #CBDCF8 !important;} .content DIV.textvenster STRONG.pagina_titel{ text-transform: uppercase; width: 300px; margin-bottom: 6px; display: block;} .content DIV.textvenster H3{ font-weight: normal; width: 300px; color: #000; clear: left; line-height: 32px; margin-bottom: 6px;} .content DIV.textvenster P{ text-align: left; width: 300px; font-size: 12px;} .content DIV.textvenster IMG{ float: right; width: 195px;} .content DIV.textvenster DIV.flash{ float: right; width: 195px;} .content_text{ margin: 5px 0; float: left; width: 100%; margin-bottom: 15px;} .content_text DIV.venster{ width: 534px; float: left; border: #82A9EC solid; border-width: 0 2px 2px; padding: 0 10px 10px;} .content_text DIV.venster DIV.venster_header{ width: 100%; float: left; padding: 5px 10px 0; background-color: #82A9EC; margin: 0 -10px 10px;} .content_text DIV.venster DIV.venster_header H5{ color: #FFF;} .content DIV.content_venster{ width: 100%; float: left; clear: left;} DIV.terug{ border-top: #6B8BBE 1px dotted; padding-top: 5px; float: left; clear: left; width: 100%;} UL.opsomming_merken{ padding-top: 15px; font-size: 13px; font-weight: bold;} /************************************************************** ** Carousel ***************************************************************/ DiV.sidescroller_container{ float: left; width: 548px; padding: 5px; border-top: #FFF 1px solid; background-color: #82A9EC; color: #FFF;} DiV.sidescroller_container SPAN.titel{ font-size: 13px;} DiV.sidescroller_container SPAN.titel SPAN.pijl{ float: left; margin-right: 3px; font-weight: normal; font-size: 16px; line-height: 13px;} DIV.sidescroller{ width: 548px; background-color: #FFF; float: left; position: relative; height: 139px; overflow: hidden; padding: 10px 0; margin-top: 5px;} DIV.sidescroller DIV.scroll_area{ position: relative;} DIV.sidescroller DIV.scroll_area UL{ position: relative; margin: 0; padding: 0; list-style: none;} DIV.sidescroller DIV.scroll_area UL LI{ position: relative; float: left;} DIV.sidescroller A.product{ width: 147px; display: block; text-decoration: none; cursor: pointer; position: relative; float: left; text-align: center; border-right: #000 1px dotted;} DIV.sidescroller A.product SPAN.foto{ width: 100px; display: block; height: 117px; margin: 0 auto; position: relative;} DIV.sidescroller A.product SPAN.foto IMG{ width: 100%;} DIV.sidescroller A.product SPAN.foto SPAN.korting{ position: absolute; display: block; width: 61px; height: 61px; left: 50%; margin-left: -30px; bottom: 0; background: url(http://www.stofzuigerartikelen.nl/Images/korting.png) no-repeat 0 0; font-size: 12px; font-weight: bold; line-height: 61px; text-align: center; color: #FFF;} DIV.sidescroller A.product STRONG{ font-size: 12px;} DIV.sidescroller A.product:hover STRONG{ text-decoration: underline;} DiV.sidescroller_container DIV.controls{ float: left; position: relative; width: 100%; height: 8px; padding-top: 3px;} DiV.sidescroller_container DIV.controls A.prev{ position: absolute; left: 0; top: 0;} DiV.sidescroller_container DIV.controls A.next{ position: absolute; right: 0; top: 0; width: 65px;} DiV.sidescroller_container DIV.controls A{ color: #FFF; text-decoration: none; text-transform: uppercase; cursor: pointer;} DiV.sidescroller_container DIV.controls A:hover{ color: #000;} DiV.sidescroller_container DIV.controls SPAN.pijl_links{ float: left; margin-right: 3px; cursor: pointer; font-weight: normal; font-size: 16px; line-height: 12px; letter-spacing: -3px;} DiV.sidescroller_container DIV.controls SPAN.pijl_rechts{ float: right; margin-left: 3px; cursor: pointer; font-weight: normal; font-size: 16px; line-height: 12px; letter-spacing: -3px;} /************************************************************** ** Kolommen ***************************************************************/ DIV.kolom_left{ float: left; width: 260px; margin-left: 5px;} DIV.kolom_right{ float: right; width: 260px; margin-right: 5px;} DIV.kolom DIV.productvenster{ float: left; width: 100%; padding: 10px 0;} DIV.kolom DIV.productvenster DIV.foto{ width: 100px; text-align: center; position: relative; float: right; margin-left: 10px;} DIV.kolom DIV.productvenster DIV.foto IMG{ width: 100%;} DIV.kolom DIV.productvenster DIV.foto DIV.aanbieding{ width: 57px; height: 57px; position: absolute; bottom: 0; right: 0; background: url(http://www.stofzuigerartikelen.nl/Images/aanbieding.png) no-repeat 0 0;} DIV.kolom DIV.productvenster DIV.uitleg{ min-height: 200px; height: auto !important; height: 200px;} DIV.kolom DIV.productvenster DIV.uitleg H6{ text-transform: uppercase; font-size: 11px; color: #D4030B;} DIV.kolom DIV.productvenster DIV.uitleg H6 A{ color: #D4030B;} DIV.kolom DIV.productvenster DIV.uitleg H6 A:hover{ color: #000;} DIV.kolom DIV.productvenster DIV.uitleg P{ line-height: 12px;} DIV.kolom DIV.productvenster DIV.prijs{ padding: 0 5px; font-size: 16px; height: 21px; float: left; line-height: 21px; color: #FFF; font-weight: bold;} DIV.kolom DIV.productvenster DIV.prijs SUP.excl{ float: left; font-size: 11px; font-weight: normal; margin-right: 5px; line-height: 11px;} DIV.kolom DIV.productvenster DIV.prijs SUP.cent{ line-height: 12px; font-size: 11px; vertical-align: text-top;} DIV.kolom DIV.productvenster DIV.product_footer{ width: 260px; float: left; background: url(http://www.stofzuigerartikelen.nl/Images/prijs_bg.jpg) repeat-x 0 0;} /************************************************************** ** Product gegevens ***************************************************************/ .product{ width: 100%; float: left; padding-top: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: #EBEBEB 2px solid;} .product DIV.foto_container{ width: 200px; float: right;} .product DIV.foto_container DIV#big_foto{ width: 198px; height: 198px; border: #82A9EC 1px solid; margin-bottom: 8px;} .product DIV.foto_container DIV#big_foto IMG{ width: 100%; height: 100%;} .product DIV.foto_container DIV.small_fotos{ width: 100%;} .product DIV.foto_container DIV.small_fotos A.small_foto{ width: 42px; height: 42px; display: block; border: #82A9EC 1px solid;} .product DIV.foto_container DIV.small_fotos A.small_foto:hover{ border-color: #be020b;} .product DIV.foto_container DIV.small_fotos IMG{ width: 100%; height: 100%; float: left;} .gegevens{ width: 350px; float: left; border-bottom: #dbdbdb 1px solid;} .gegevens H6{ font-size: 16px; margin-bottom: 10px;} .gegevens DIV.row{ width: 100%; float: left; border-top: #dbdbdb 1px solid; clear: left; font-size: 12px;} .gegevens DIV.row DIV.onderwerp{ width: 120px; padding: 3px; float: left; display: inline; font-weight: bold;} .gegevens DIV.row DIV.gegeven{ float: left; padding: 3px; display: inline;} .row_aan{ background-color: #ebebeb;} .row_uit{ background-color: #FFF;} .goedleverbaar{ color: green;} .slechtleverbaar{ color: red;} .onder_gegevens{ width: 350px; float: left; text-align: right; padding-top: 5px;} .onder_gegevens DIV.vanprijs{ font-size: 11px; float: right; clear:right; margin-right: 20px;} .onder_gegevens DIV.voorprijs{ font-weight: bold; float: right; clear:right; margin-right: 20px;} .onder_gegevens DIV.voorprijs H4{ font-size: 24px; color: #000; margin: 0; line-height: 24px; display: inline;} .onder_gegevens DIV.voorprijs SUP{ vertical-align: text-top; font-size: 16px;} .onder_gegevens A.button_right{ float: right; clear:right; margin-top: 5px;} .onder_gegevens A.button_right SPAN.winkelwagen_btn{ padding-right: 0;} .onder_gegevens A.button_right SPAN.winkelwagen_btn IMG{ margin-left: 5px; vertical-align: middle;} .onder_gegevens A.button_right:hover SPAN.winkelwagen_btn{ text-decoration: none;} /************************************************************** ** Nieuws ***************************************************************/ .nieuwsberichten{ float: left; width: 558px; margin: 10px 0 20px;} .nieuwsberichten DIV.bericht{ padding: 10px; position: relative; border: #82A9EC 2px solid; margin-bottom: 10px;} .nieuwsberichten DIV.bericht DIV.datum{ width: 60px; position: absolute; top: 0; right: 0;} .nieuwsberichten DIV.bericht DIV.datum SPAN{ display: block;} .nieuwsberichten DIV.bericht DIV.datum SPAN.dag{ width: 40px; font-size: 32px; text-align: center; line-height: 32px; float: left;} .nieuwsberichten DIV.bericht DIV.datum SPAN.maand{ width: 40px; text-align: center; font-size: 22px; text-transform: lowercase; line-height: 20px;} .nieuwsberichten DIV.bericht DIV.datum SPAN.jaar{ width: 10px; font-size: 16px; border-left: #82A9EC 1px solid; background-color: #82A9EC; color: #FFF; padding: 2px; float: right; line-height: 13px; font-weight: bold;} .nieuwsberichten DIV.bericht H5.titel{ font-size: 24px; padding: 32px 0 0 10px; color: #000; background: url(http://www.stofzuigerartikelen.nl/Images/nieuws_bg.jpg) no-repeat 0 0; margin: -10px -10px 10px; border-bottom: #82A9EC 2px solid;} .nieuwsberichten DIV.bericht H5.titel A{ text-decoration: none;} .nieuwsberichten DIV.bericht DIV.foto{ float: left; width: 200px; margin-right: 5px;} .nieuwsberichten DIV.bericht DIV.text{ float: left; text-align: justify; width: 329px;} .nieuwsberichten DIV.bericht DIV.lees-verder{ float: right;} /************************************************************** ** Winkelwagen ***************************************************************/ .stappenplan{ width: 100%; height: 40px; background-color: #82A9EC; margin-top: 20px; float: left;} .stappenplan DIV.stap{ float: left; display: inline; cursor: default; text-align: center; padding-right: 18px; height: 100%; font-size: 12px; line-height: 40px; background: url(http://www.stofzuigerartikelen.nl/Images/shop_pijl_blauw.png) no-repeat 100% 0;} .stappenplan DIV#stap1{ width: 95px;} .stappenplan DIV#stap2{ width: 130px;} .stappenplan DIV#stap3{ width: 90px;} .stappenplan DIV#stap4{ width: 85px;} .stappenplan DIV#stap5{ width: 86px; padding-right: 0; background-image: none;} .stappenplan DIV.geweest{ background: url(http://www.stofzuigerartikelen.nl/Images/shop_pijl_rood.png) #BE020B no-repeat 100% 0; color: #FFF;} .stappenplan DIV.aan{ background-color: #BE020B; font-size: 13px; color: #FFF; font-weight: bold;} .winkelwagen_container{ width: 558px; float: left; margin-top: 5px;} .winkelwagen_container TABLE.winkelwagen{ width: 100%; float: left; border: #82A9EC solid; margin-bottom: 10px; border-width: 0 2px;} .winkelwagen_container TABLE.winkelwagen TH{ background-color: #82A9EC; padding: 5px;} .winkelwagen_container TABLE.winkelwagen TD{ padding: 5px; border-bottom: #dbdbdb 1px solid;} .winkelwagen_container TABLE.winkelwagen TD INPUT.aantal{ width: 38px; height: 14px; padding-top: 2px; text-align: right; background-color: #f9f9f9; padding-left: 2px; font-size: 11px; border: #dbdbdb 1px solid;} .winkelwagen_container TABLE.winkelwagen TD A.delete{ width: 20px; height: 20px; display: block; background: url(http://www.stofzuigerartikelen.nl/Images/delete.png) no-repeat 50% 50%;} .winkelwagen_container TABLE.winkelwagen TD SPAN.euro{ float: left; margin-right: 3px;} .winkelwagen_container TABLE.winkelwagen TR.totaal TD{ background-color: #82A9EC; border: 0; padding: 2px 5px;} TABLE.formulier{ width: 100%; float: left; border: #82A9EC solid; border-width: 0 2px 2px 2px; margin-bottom: 10px;} TABLE.formulier TH{ background-color: #82A9EC; padding: 3px;} TABLE.formulier TD{ padding: 3px; border-bottom: #dbdbdb 1px solid;} TABLE.formulier TD INPUT.form_text{ height: 14px; padding-top: 2px; float: left; margin-right: 3px; background-color: #FFF; padding-left: 2px; font-size: 11px; border: #82A9EC 1px solid;} /************************************************************** ** Footer ***************************************************************/ .footer{ width: 823px; padding: 15px 20px; float: left; background-color: #82a9ec;} .footer A.ideal{ float: right;} .footer DIV.footer_menu{ float: left;} .footer DIV.footer_menu UL{ margin: 0; float: left; clear: left; padding: 0; list-style: none;} .footer DIV.footer_menu UL LI{ float: left; margin-right: 3px;} .footer DIV.footer_menu UL LI A{ text-decoration: none;} .footer DIV.footer_menu UL LI A:hover{ color: #FFF;} .footer DIV.footer_menu UL LI A.aan{ text-decoration: underline; color: #000;} .footer .LP_menu{ margin:15px 0 0 0; float:left; width:823px; font-size:9px; line-height:10px; color:#305ba4; text-align:center; } .footer .LP_menu A{ text-decoration:none; color:#305ba4; }