/* RESET STYLE*/ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, input, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 16px; font-family: inherit; vertical-align: baseline; text-align: left; text-decoration: none; list-style: none; } /* GENERAL*/ body{ border-top: 4px solid #92140c; font-family: Calibri, Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 11px; } .container{ width: 1145px; margin: 0 auto; position: relative; } /* HEADER*/ #logo{ margin: 18px 0 0 24px; float: left; } #logo h1 a{ font-size: 30px; color: black; font-weight: bold; } #logo h1 a:hover{ text-decoration: underline; } #taal{ float: right; margin-top: 29px; } #taal a{ float: left; margin-right: 5px; } #clear{ height: 50px; clear: both; } /* MENU*/ ul.menu_top{ background: url(../images/menu_bg.png) no-repeat; width: 1145px; height: 50px; } ul.menu_top li{ float: left; margin-right: 30px; } ul.menu_top li.home{ width: 98px; padding-left: 50px; } ul.menu_top li a{ color: #fff; font-size: 12px; height: 32px; padding-top: 18px; display: block; } ul.menu_top li a:hover{ text-decoration: underline; } /* DROPDOWN*/ ul.menu_top li.last{ float: right; width: 197px; padding-left: 4px; margin-right: 0; position: relative; height: 32px; display: block; } #dropdown_content{ width: 195px; position: absolute; left: -9999em; background: #eaf0f2; border-top: 2px solid #fff; padding-left: 4px; padding-bottom: 2px; } ul.menu_top li.last:hover #dropdown_content{ left: auto; margin-top: 0; margin-left: -4px; } #dropdown_content a{ color: #353535; float: left; width: 203px; font-size: 12px; margin-top: 6px; padding-top: 0; height: 16px; } /* SLIDER*/ #slider{ width: 670px; float: left; } #slider ul li{ height: 268px; } ol#controls{ margin:1em 0; padding:0; height:23px; width: 76px; background: #f8f8f8; padding: 12px 0 0 16px; position: absolute; top: 140px; left: 10px; } ol#controls li{ margin:0 6px 0 0; padding:0; float:left; list-style:none; height:11px; line-height:11px; width: 11px; } ol#controls li a{ float:left; height:11px; width: 11px; line-height:11px; background: url(../images/dot_grey.jpg) no-repeat; color:#555; padding:0 10px; text-decoration:none; } ol#controls li.current a{ background: url(../images/dot_orange.jpg) no-repeat; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{ outline:none; } .blok{ background: url(../images/hoofdaanbieding_bg.png) no-repeat; width: 670px; height: 266px; margin-top: 2px; position: relative; } .blok img.dot{ position: absolute; top: 10px; left: 10px; } .blok h2{ position: absolute; top: 20px; left: 140px; font-size: 14pt; color: black; font-family: "Lucida Grande"; } .blok h2 a{ color: black; } .blok img.aanbieding_thumb{ position: absolute; top: 50px; left: 80px; } .blok p.aanbieding_specs{ position: absolute; top: 75px; left: 347px; font-size: 7pt; font-family: "Lucida Grande"; color: #666666; line-height: 11px; } .price{ position: absolute; top: 27px; left: 484px; background: url(../images/dot_big.png) no-repeat; width: 128px; height: 128px; } .price p.line_through{ color: #fff; font-family: Cambria; font-weight: bold; font-size: 8pt; margin: 40px 0 10px 56px; text-decoration: line-through; } .price p{ color: #fff; font-family: Cambria; font-weight: bold; font-size: 14pt; margin-left: 26px; } /* WINKELMANDJE*/ #winkelmandje{ float: left; margin: 16px 0 0 30px; } #winkelmandje h4.mand{ background: url(../images/winkelwagen.png) top left no-repeat; padding-left: 40px; color: #000; font-family: Calibri; font-size: 9pt; line-height: 18px; font-weight: bold; } #winkelmandje h4.lijst{ background: url(../images/verlanglijstje.png) top left no-repeat; padding-left: 40px; margin-bottom: 4px; color: #000; font-family: Calibri; font-size: 9pt; line-height: 18px; font-weight: bold; } #winkelmandje table{ margin-bottom: 12px; } #winkelmandje td{ width: 100px; color: #555555; font-family: Calibri; font-size: 9pt; } #winkelmandje .inhoud{ padding-bottom: 22px; margin-bottom: 10px; border-bottom: 1px solid #b4b3b3; width: 150px; } #winkelmandje .inhoud a{ color: #000; font-weight: bold; font-size: 10pt; } #winkelmandje .inhoud a:hover{ text-decoration: underline; } #winkelmandje p{ width: 150px; color: #555555; } .spacer{ clear: both; height: 75px; } /* CONTENT*/ #cats{ width: 210px; float: left; } #cats h3{ background: url(../images/menu_top_bg.png) no-repeat; width: 184px; height: 30px; color: #fefefe; font-weight: bold; font-size: 13pt; padding: 12px 0 0 15px; margin-bottom: 10px; } #cats ul li{ width: 190px; height: 16px; border-bottom: 1px solid #dcdcdc; padding: 2px 0 1px 10px; } #cats ul li a{ color: #8f8f8f; font-size: 13pt; font-family: arial; } #cats ul li a:hover{ font-style: italic; } #cats ul li:hover{ background: url(../images/arrow.png) center right no-repeat; } #products{ width: 720px; float: left; } #products p{ color: #000; font-family: Calibri; font-size: 11pt; margin-top: 12px; margin-bottom: 22px; } #products p a{ color: #000; font-family: Calibri; font-size: 11pt; } #products p a:hover{ text-decoration: underline; } .prod{ width: 670px; height: 200px; margin-bottom: 20px; } .prod_left{ width: 180px; float: left; } .prod_right{ width: 370px; float: left; margin-left: 20px; } .prod_left img{ margin-left: 40px; } .prod_left .specs{ text-align: center; width: 180px; height: 32px; background: #dddddd; padding-top: 10px; } .prod_left .specs a{ color: #7b7676; font-family: arial; font-size: 10pt; } .prod_left .specs a:hover{ text-decoration: underline; } #products .prod_right h2{ color: #000; font-size: 11pt; font-family: calibri; font-weight: bold; } #products .prod_right p{ color: #958b8b; font-size: 11pt; font-family: Calibri; margin-bottom: 30px; } #products .prod_right a.leesverder{ float: right; color: #000; font-family: Calibri; font-size: 9pt; } #products .voorraad{ float: left; width: 230px; } #products .voorraad p{ font-size: 10pt; padding: 0; margin: 0; } #products p.groen{ background: url(../images/dot_green.jpg) center left no-repeat; padding: 0 0 0 20px; margin: 4px 0 0 26px; font-size: 10pt; } #products .ww{ background: #34444c; float: right; } #products .ww a{ color: white; font-family: calibri; font-size: 11pt; display: block; width: 124px; height: 21px; padding-top: 4px; text-align: center; } #products .ww a:hover{ text-decoration: underline; } /* SIDEBAR*/ .cats2{ width: 210px; float: left; margin-bottom: 105px; } .cats2 h3{ background: url(../images/menu_top_bg.png) no-repeat; width: 184px; height: 30px; color: #fefefe; font-weight: bold; font-size: 13pt; padding: 12px 0 0 15px; margin-bottom: 10px; } .cats2 ul li{ width: 196px; height: 16px; border-bottom: 1px solid #dcdcdc; padding: 3px 0 3px 4px; } .cats2 ul li a{ color: #958b8b; font-size: 11pt; font-family: calibri; } .cats2 ul li a:hover{ font-style: italic; } .cats2 p{ color: #958b8b; font-size: 11pt; font-family: Calibri; margin-bottom: 10px; } .cats2 input.input{ background: url(../images/nieuwsbrief_bg.jpg) no-repeat; width: 199px; height: 32px; padding-left: 6px; } /* FOOTER*/ #footer{ height: 227px; background: #881209; } #footer .footer_list{ width: 240px; height: 195px; margin-top: 28px; float: left; } #footer .footer_list h3{ margin-bottom: 20px; color: #fff; font-weight: bold; font-family: Calibri; font-size: 11pt; } #footer .footer_list ul li{ margin-bottom: 15px; } #footer .footer_list ul li a{ color: #d1c6c6; font-size: 10pt; } #footer .footer_list ul li a:hover{ text-decoration: underline; } #footer .betaalmethodes{ float: right; margin-right: 10px; margin-top: 25px; } #footer .betaalmethodes img{ margin-left: 17px; }