/* Fonts, colors, etc */ * { margin: 0px; padding: 0px; } body { margin: 0px; padding: 0px; background-color: #e2e0e7; overflow: auto; } body, p, li, div, form, input, ul, td, h1, h2, h3, h4 { font-family: verdana; color: #FFFFFF; font-size: 12px; } p { text-align: justify; margin: 5px 0px; } fieldset { padding: 10px; } /* Headings */ h1 { font-size: 16px; } h2 { font-size: 14px; } h1, h2, h3, h4 { color: #f88418; } /* Links */ a { color: #ffcc00; text-decoration: none; font-weight: bold; } a:link { color: #ffcc00; } a:visited { color: #ffcc00; } a:hover { text-decoration: underline; } a img { border: 0px; } .header_r a, .header a:link, .header a:visited, .header a:active { color: #181d5f; text-decoration: none; } /* Scrollbar */ body { scrollbar-base-color: #FFFFFF; scrollbar-track-color: #FFE8E8; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FF0000; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-shadow-color: #550000; scrollbar-arrow-color: #FF0000; } /* Structure */ div#wrapper { width: 1068px; } div#header { width: 1068px; float: left; position: relative; height: 59px; background-color: #545082; border-bottom: 4px solid #ffffff; z-index: 1; } div#header div#logo img { position: relative; left: 30px; top: 28px; } .header_l { float: left; width: 298px; padding: 10px; color: #181d5f; font-size: 13px; font-family: arial; font-weight: bold; } .header_r { float: right; width: 168px; padding: 10px; color: #181d5f; font-family: arial; font-weight: bold; font-size: 13px; } div#promobase { float: left; position: relative; width: 1050px; background-image: url('../bm/background.gif'); background-repeat: repeat-y; background-position: top-left; overflow: auto; padding: 30px 10px; } div#footer { float: left; width: 1068px; height: 120px; background-color: #545082; border-top: 4px solid #ffffff; } #footer img { cursor: pointer; } #footer img.button { position: relative; top: -35px; /* kerst */ /* top: -15px; /* normaal */ } #footer img#aanbieding { position: relative; top: -30px; padding-left: 10px; } #footer img#kerstpakketten { position: relative; top: -40px; padding-left: 10px; } #footer img#naarPromoBase { position: relative; top: -10px; /*padding-left: 20px;*/ left: 20px; } div#header_left, div#header_center, div#header_right { height: 59px; } div#footer_left, div#header_left { position: relative; float: left; width: 250px; border-right: 4px solid #ffffff; } div#footer_center, div#header_center { float: left; width: 550px; background-color: #e2e0e7; border-right: 4px solid #ffffff; } div#footer_right, div#header_right { float: left; width: 250px; } div#footer_right, div#footer_left, div#footer_center { height: 100%; } div#footer_left, div#footer_right, div#header_left, div#header_right { background-color: #545082; } /* TODO: what is? */ #contact { position: absolute; font-weight: bold; top: 10px; left: 10px; } #contact a { color: #ffffff; } /* Christmas page */ div #kerst { width: 900px; } div #kerst h1 { font-size: 20px; } div#kerst div.kerstaanbieding { width: 450px; float: left; cursor: pointer; margin: 20px 0px; } div#kerst div.kerstaanbieding a img { float: left; } div#kerst div.kerstaanbieding div.kerstaanbiedingtekst { width: 230px; float: left; padding: 10px;} div#kerst div.kerstaanbieding div.kerstaanbiedingtekst h2 { font-size: 16px; } div#kerst div.kerstaanbieding div.kerstaanbiedingtekst span.beschrijving { display: block; margin-bottom: 20px; } div#kerst div.kerstaanbieding div.kerstaanbiedingtekst span.prijs { font-weight: bold; } /* Sidebar on homepage */ div#sidebar { float: left; width: 175px; margin-right: 20px; border: 0px solid yellow;} div.zoeken { font-size: 10px; margin-bottom: 25px; } div.zoeken div.form_fields .right { float: right; margin-bottom: 5px; font-size: 10px; } div.zoeken form fieldset { padding: 15px; padding-bottom: 5px; width: 145px; } div.zoeken form fieldset legend { color: #f88418; font-size: 11px;} div.zoeken form fieldset select { display: block; clear: both; margin: 5px 0px; width: 135px; } div.zoeken fo rm fieldset, div.zoeken form fieldset select, div.zoeken.form fieldset input { font-size: 10px; } div.zoeken form fieldset input { width: 135px; padding-top: 5px; } div.zoeken form fieldset input.checkbox { clear: both; width: 15px; } div.zoeken form fieldset label { clear: both; } div.speciaalshops { border: 2px solid #ffffff; padding: 15px; padding-top: 5px; width: 145px; margin-bottom: 20px; } div.speciaalshops a { display: block; } /* Dynamic contents */ div#contents { float: left; width: 800px; border: 0px solid red;} div#contents h1 { color: #f88418; font-size: 16px;} div#contents div#artikelen h2 { margin: 0px; padding: 0px; color: #f88418; } div#contents div#artikelen table.artikelen tr td { text-align: center; width: 190px; vertical-align: top; padding-bottom: 8px; } div#contents div#artikelen table.artikelen tr td a img { padding-bottom: 8px; } /* Detailpagina */ div#nav_top { height: 50px; width: 800px; } div#nav_top ul { float: right; list-style-type: none; } div#nav_top ul li { display: inline; padding-right: 25px; } div#detail_main { float: left; } div#detail_image { float: left; width: 325px; } div#detail_contents { float: left; width: 600px; } div#detail_bestellen { clear: both; } table#staffel { border: 1px solid #ffffff; } table#staffel td { padding-right: 10px; text-align: right; } /* Search page */ div#search_main { float: left; position: relative; } div#search_narrow { width: 25px; float: left; } div#search_contents { width: 900px; float: left; position: relative; } div#search_contents div.search_option { float: left; margin-right: 60px; } div#search_contents div.search_option h3 { margin-bottom: 5px; } /* Navigation and page count */ div#search_contents div.search_nav { width: 900px; margin-top: 10px; float: left; margin-bottom: 10px; } div#search_contents div.search_nav div.items { float: left; margin-right: 5px; } div#search_contents div.search_nav div.items p { margin: 0px; margin-right: 5px; } div#search_contents div.search_nav div.items p, div#search_contents div.search_nav div.items div.select { float: left; } div#search_contents div.search_nav div.items div.select select { width: 50px; } div#search_contents div.search_nav div.search_nav_paging { float: right; } div#search_contents div.search_nav div.search_nav_paging .pagecount { float: right; margin-right: 10px; } div#search_contents div.search_nav div.search_nav_paging ul.search_paging { float: right; margin-right: 10px; } /* View and sorting */ div#search_contents div.search_view { clear: both; height: 35px; background-color: #545082; border-top: 1px solid #f88418; border-bottom: 1px solid #f88418; } div#search_contents div.search_view ul { margin: 0px 5px; } div#search_contents div.search_view div.searchview { float: left; line-height: 35px; padding-left: 10px; } div#search_contents div.search_view div.sorting { float: right; line-height: 35px; } /* Search results */ div#search_contents div#search_results { position: relative; } div#search_contents div#search_results div.product_row { clear: both; } /* View (global) */ div#search_contents div#search_results div.product { position: relative; padding: 20px 0px; } div#search_contents div#search_results div.product div.image { width: 125px; } div#search_contents div#search_results div.product div.price { position: absolute; top: 20px; right: 0px; } div#search_contents div#search_results div.product div.price p { color: #ff0000; font-weight: bold; font-size: 150%; } /* Grid view */ div#search_contents div#search_results div.gridView { float: left; margin-right: 25px; width: 200px; margin-bottom: 25px; } div#search_contents div#search_results div.gridView div.information .description{ display: none; } div#search_contents div#search_results div.gridView div.price p { font-size: 150%; } /* List view */ div#search_contents div#search_results div.listView { border-bottom: 1px solid #f88418; border-top: 1px solid #000000; } div#search_contents div#search_results div.listView div.image { float: left; } div#search_contents div#search_results div.listView div.information { margin-left: 125px; } div#search_contents div#search_results div.listView div.price p { font-size: 200%; } /* Pager */ ul.pager { clear: both; list-style-type: none; float: right; font-weight: bold; padding: 10px; } ul.pager li { display: inline; } ul.pager li a { padding: 5px; text-decoration: none; color: #f88418; border: 1px solid #bbb; } ul.pager li a:link, ul.pager li a:visited { color: #f88418; } ul.pager li.selected a { background-color: #f88418; font-size: 150%; color: #181d5f; } ul.pager li a:hover { background: #ddd; color: #f88418; } /* Lists */ ul, li { margin: 0px; padding: 0px; } ul.horizontal { display: inline; list-style-type: none; } ul.horizontal li { display: inline; } ul.split li { border-right: 1px solid #ffffff; padding: 0px 10px; } ul.split li.last { border-right: none; } li.sortASC { background-image: url('../bm/iconSortUp.png'); background-repeat: no-repeat; } li.sortDESC { background-image: url('../bm/iconSortDown.png'); background-repeat: no-repeat; } /* Forms */ /* Form on search page */ div#search_contents form { border: 1px solid #f88418; border-left: 0px; border-right: 0px; background-color: #545082; height: 75px; margin-bottom: 10px; height: 100px; } div#search_contents form fieldset { border: none; } div#search_contents form { font-weight: bold; } div#search_contents form div#search_primary { margin-bottom: 5px; } div#search_contents form div.search_option label { display: block; font-weight: bold; margin-bottom: 5px; } div#search_contents form select { width: 175px; } div#search_contents form div#search_trefwoord { clear: both; } div#search_contents form div#search_trefwoord input.text { width: 415px; height: 18px; margin-right: 50px; } input { color: #000000; border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; border-top: #000000 1px solid; } form.offerte fieldset { margin-bottom: 10px; } form.offerte fieldset ol { margin: 0; padding: 0; } form.offerte fieldset li { list-style: none; padding: 5px; margin: 0; } form.offerte fieldset fieldset { border: none; margin: 3px 0 0; } form.offerte fieldset fieldset legend { padding: 0 0 5px; font-weight: normal; color: #f88418;} form.offerte fieldset fieldset label { display: block; width: auto; margin-left: 123px; } form.offerte legend { padding: 0 2px; font-weight: bold; color: #f88418;} form.offerte label { display: inline-block; line-height: 1.8; vertical-align: top; width: 120px; } form.offerte label.radio { width: auto; } form.offerte em { font-weight: bold; font-style: normal; color: #f00; } form.offerte textarea { width: 325px; } form.offerte input.long { width: 250px; } form.offerte div.form_error { color: #ff0000; display: block; } fieldset legend { color: #f88418; } .form_fields { margin-top: 10px; } /* Buttons */ .buttonOrange { font-family: verdana; font-size: 12px; color: #ffffff; background-color: #f88418; border: 1px solid #ffffff; padding: 0px 0px; font-weight: bold; letter-spacing: -1; width: 135px; cursor: pointer; margin: 10px 0px; } .buttonOrangeSmall { font-family: verdana; font-size: 12px; color: #ffffff; background-color: #f88418; border: 1px solid #ffffff; padding: 0px 0px; font-weight: bold; letter-spacing: -1; cursor: pointer; } input#search { position: relative; top: -10px; right: -10px; font-size: 200%; color: #ffffff; background-color: #f88418; border: 2px solid #ffffff; padding: 10px; font-weight: bold; cursor: pointer; } /* Tables */ td { border-right: 0px solid #FFFFFF; border-left: 0px solid #FFFFFF; border-top: 0px solid #FFFFFF; border-bottom: 0px solid #FFFFFF; } /* Misc */ strong { font-weight: bold; } .Streep { font-size: 12px; font-family: verdana; color: #FFFFFF; border-right: 1px solid #FFFFFF; } .leeg { font-family: verdana; background: #181D5F; border-bottom: #181D5F 1px solid; border-left: #181D5F 1px solid; border-right: #181D5F 1px solid; border-top: #181D5F 1px solid; } .hidden { display: none; } .white { color: #ffffff; } .no-margin-bottom { margin-bottom: 0px; } .normal { color: #ffffff; font-size: 12px; }