/* BASIC SETUP */ * { margin: 0; padding: 0; } body { font-size: .85em; font-family: avantgarde-book, Helvetica, Arial, sans-serif; color: #555555; background-color: #BBBBBB; } /* useful styles */ .hr hr { display: none; } .hr { border-bottom: 1px solid #b2b2b2; margin-bottom: 1em; } .error { color: #FF0000; } .small { font-size: 0.75em; } .align-left { text-align: left !important; } .align-center { text-align: center !important; } .align-right { text-align: right !important; } .valign-top { vertical-align: top; } .valign-middle { vertical-align: middle; } .valign-bottom { vertical-align: bottom; } .clear { clear: both; font-size: 0; line-height: 0; height: 0px; } .float-left { float: left; } .float-right { float: right; } /* common elements */ p { margin-bottom: 1em; line-height: 1.2em; } p.tall-spacing { line-height: 1.5em; } img { border: 0; } a { text-decoration: none; color: #555555; } a:hover { color: #777777; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.8em; font-weight: normal; font-family: avantgarde-extra-light, avantgarde-book, Helvetica, Arial, sans-serif; color: #1A2A58; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } h4, h5, h6 { font-size: 1.1em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } /* FORMS */ form { } fieldset { border: 0; } input.text, textarea.text { color: #000000; } input.text-ghosted, textarea.text-ghosted { color: #808080; } input, select, textarea { vertical-align: middle; padding: 4px; border: 1px solid #CCCCCC; border-radius: 0; font-family: avantgarde-book, Helvetica, Arial, sans-serif; font-size: 1em; margin-bottom: 3px; border-radius: 0; } .form-button, .button { height: 20px; line-height: 20px; padding: 0 25px; background-image: url(../images/arrow-circle20-red.png); background-position: left center; background-repeat: no-repeat; font-size: 0.8em; text-transform: lowercase; cursor: pointer; width: auto; background-color: transparent; border: 0; transition: all .4s ease; } .form-button:hover, .button:hover { background-color: transparent; background-position: center right; } .form-button2, .button2 { height: 20px; line-height: 20px; padding: 0 25px; background-image: url(../images/arrow-circle20-red.png); background-position: left center; background-repeat: no-repeat; font-size: 0.8em; text-transform: lowercase; cursor: pointer; width: auto; background-color: transparent; border: 0; } .nolabels { } .nolabels input.text, .nolabels input.text-ghosted, .nolabels textarea.text, .nolabels textarea.text-ghosted { width: 95%; } #contact_form_notes { position: absolute; top: -10000px; left: -10000px; display: block; width: 1px; height: 1px; } /* useful */ table { } table.data { width: 100%; border: 0; border-collapse: collapse; font-size: 0.9em; margin-bottom: 1em; } table.data tr { } table.data th, table.data td { padding: 5px 12px; } table.data th { background-color: #555555; color: #FFFFFF; text-align: left; font-weight: normal; padding: 8px 12px; } table.data td { border-bottom: 1px solid #b2b2b2; } .highlight-red { color: #E9284F; } .more { display: inline-block; height: 20px; line-height: 20px; padding: 0 25px; background-image: url(../images/arrow-circle20-red.png); background-position: left center; background-repeat: no-repeat; font-size: 0.8em; text-transform: lowercase; transition: all .4s ease; } a.more:hover, a:hover .more { background-position: center right; } .more.grey { background-image: url(../images/arrow-circle20-grey.png); } .more.mail { background-image: url(../images/mail-circle20-red.png); } .more.plus { background-image: url(../images/plus-circle20-blue.png); } .roundbutton { display: inline-block; width: 14px; height: 14px; } .minus.roundbutton { background-image: url(../images/minus-circle14-grey.png); } .plus.roundbutton { background-image: url(../images/plus-circle14-grey.png); } .minus.roundbutton span, .plus.roundbutton span { display:none; } /* PAGE STRUCTURE */ #header-box { width: 100%; height: 120px; background-color: #284180; } #header { width: 980px; margin: 0 auto; position: relative; } #logo { float: left; padding: 30px 0; display: block; } #logo img { display: block; } #header .accreditations { float: left; margin-left: 150px; padding-top: 15px; } #header .accreditations img { display: inline-block; width: auto; height: 90px; } #signin { position: absolute; right: 14px; top: 0; z-index: 100; } #signin a { display: block; width: 88px; margin-left: 4px; float: right; height: 20px; line-height: 20px; color: #FFFFFF; background-color: #3d548d; text-transform: uppercase; text-align: center; font-size: 0.8em; transition: all .3s ease; } #signin a:hover { background-color: #FFFFFF; color: #284180; } #strapline { float: right; display: inline-block; font-size: 1.4em; color: #FFFFFF; text-transform: lowercase; margin: 35px 14px 0 0; text-align: right; font-family: avantgarde-extra-light, avantgarde-book, Helvetica, Arial, sans-serif; } #strapline span { color: #E9284F; font-size: 1.35em; } #strapline strong { font-family: avantgarde-book, Helvetica, Arial, sans-serif; font-weight: normal; } #main-image { width: 100%; height: 360px; position: relative; } #main-image-arrows { width: 980px; margin: 0 auto; position: relative; } #main-image-arrows .arrow { display: block; position: absolute; top: 265px; width: 30px; height: 30px; background: transparent; z-index: 30; background-repeat: no-repeat; background-position: 0 0; } #main-image .arrow:hover { background-position: 0 -30px; } #main-image .arrow.left { background-image: url(../images/arrow-left.png); left: 20px; } #main-image .arrow.right { background-image: url(../images/arrow-right.png); right: 20px; } #main-image .imagerotator { width: 100%; height: 360px; } #main-image .item { position: absolute; width: 100%; height: 360px; background-position: center; background-repeat: no-repeat; background-size: cover; } #main-image .item .content-box { width: 980px; margin: 0 auto; height: 360px; position: relative; } #main-image .item .content { position: absolute; bottom: 50px; right: 14px; padding: 15px; width: 150px; height: 265px; background-image: url(../images/red-trans.png); color: #FFFFFF; font-size: 1.6em; } #main-image .item .content p { } #no-main-image { height: 44px; background-color: #E9284F; border-bottom: 6px solid #404040; } #main-image .item .content .small { font-size: 0.7em; text-transform: uppercase; } #main-grey { width: 966px; padding: 14px 0 0 14px; margin: -50px auto 20px; position: relative; background-color: #DDDDDD; z-index: 50; min-height: 200px; } #main-grey ul, #main-grey ol { margin-left: 1.5em; margin-bottom: 1em; } #main-grey li { margin-bottom: 0.3em; } #main-grey strong, #main-grey b { font-family: avantgarde-bold, Helvetica, Arial, sans-serif; font-weight: normal; } #main-1 { width: 912px; background-color: #FFFFFF; padding: 20px; margin-bottom: 20px; } #main-2 { float: left; width: 308px; margin-right: 14px; } #main-4 { float: left; width: 630px; margin-right: 14px; } #main-content { padding: 0 20px 30px; background-color: #FFFFFF; } #main-content.alone { margin-right: 14px; } #main-content h2, #main-content h3 { font-family: avantgarde-book, Helvetica, Arial, sans-serif; } #main-grey > #main-content { margin-bottom: 14px; } #main-4-2 { background-image: url(../images/main-4-2-bg.png); background-position: left top; background-repeat: repeat-y; margin-bottom: 14px; } /* default */ #banner-image { width: 630px; height: 147px; margin: 0 14px 0 0; } #banner-image.wide { width: 952px; } #banner-image img { display: block; } /* featured tiles */ .featured-item { display: block; float: left; position: relative; width: 147px; height: 147px; margin: 0 14px 14px 0; background-color: #FFFFFF; overflow: hidden; } .featured-item h2 { margin-bottom: 0.4em; } .featured-item .image { display: block; margin: 15px 0 0 15px; } .featured-item .title { display: block; position: absolute; bottom: 0px; left: 10px; width: 103px; padding: 0 10px 0 24px; color: #666666; text-transform: uppercase; letter-spacing: .2em; background-image: url(../images/arrow-circle14.png); background-position: bottom left; background-repeat: no-repeat; font-size: 0.75em; min-height: 14px; transition: all .4s ease; } a.featured-item:hover .title { color: #000000; } .featured-item:hover .title { } #stock-search { width: 248px; height: 112px; padding: 20px 20px 15px 40px; background-color: #29417A; color: #FFFFFF; font-size: 1.1em; } #stock-search .search { background-color: #5a6d99; } #stock-search .search .text, #stock-search .search .text-ghosted { display: block; color: #FFFFFF; border: 0; background: transparent; font-size: 0.8em; padding: 8px 0 8px 12px; margin: 0; } #stock-search .search .form-button { height: 35px; width: 35px; padding: 0; margin: 0; background-color: transparent; background-image: none; } #callback, #delivery, #request-stocklist { position: relative; width: 132px; height: 132px; padding: 15px 0 0 15px; color: #FFFFFF; font-size: 1.2em; background: url(../images/callback-bg.png) 45px 55px no-repeat #999999; transition: all .7s ease; } #callback span, #delivery span, #request-stocklist span { font-size: 1.4em; } #callback .arrow, #delivery .arrow, #request-stocklist .arrow { position: absolute; bottom: 15px; left: 15px; transition: all .7s ease; } #callback:hover, #delivery:hover, #request-stocklist:hover { background-position: 28px 55px; } #callback:hover .arrow, #delivery:hover .arrow, #request-stocklist:hover .arrow { left: 110px; } #delivery { background-color: #bcbdc0; background-image: url(../images/delivery-bg.png) !important; } #request-stocklist { background-image: url(../images/request-stocklist-bg.png) !important; } #news-feed { } #news-feed .content { padding: 15px 15px 0 20px; } #news-feed h2 { color: #E9284F; } #news-feed .article { font-size: 0.7em; } #why-weller { width: 278px; padding: 0 15px; background-color: #E9284F; color: #FFFFFF; } #why-weller .arrow { display: block; width: 30px; height: 30px; margin: 58px 0px 0 0px; background-position: 0 0; background-repeat: no-repeat; } #why-weller .arrow.left { float: left; background-image: url(../images/arrow-left.png); margin-right: 15px; } #why-weller .arrow.right { float: right; background-image: url(../images/arrow-right.png); margin-left: 15px; } #why-weller .arrow:hover { background-position: 0 -30px; } #why-weller .content { float: left; width: 180px; height: 132px; padding: 15px 0 0; } #why-weller h2 { color: #FFFFFF; height: 35px; margin: 0; } #why-weller .why-rotator .item { width: 180px; height: 97px; font-size: 1.2em; } #bespoke { position: relative; background-image: url(../images/bespoke-feature-bg.jpg); } #bespoke .arrow { position: absolute; top: 15px; right: 15px; transition: all .7s ease; } #bespoke:hover .arrow { right: 5px; } #question { width: 268px; height: 122px; padding: 15px 20px 10px 20px; background: url(../images/question-bg.png) 215px 20px no-repeat #ABABAB; color: #FFFFFF; font-size: 1.35em; } #question .bigtitle { display: inline-block; text-align: center; } #question .bigtitle .l1 { } #question .bigtitle .l2 { font-size: 1.5em; } #question .bigtitle .l3 { font-size: 0.6em; } #question .bigtitle .l4 { font-size: 0.9em; color: #1D2D5D; } #question:hover { background-image: url(../images/question-bg-red.png); } #question:hover .bigtitle .l4 { color: #E9284F; } #social { width: 107px; height: 117px; padding: 15px 20px; position: relative; } #social h2 { color: #999999; } #social .icons { position: absolute; left: 20px; bottom: 20px; } #social .icons a { margin-right: 10px; float: left; } #social .icons a, #social .icons img { display: block; } #twitter-feed { position: relative; padding: 14px 14px 8px; background-color: #e1effa; color: #29A9E1; margin-bottom: 14px; } #twitter-feed h2 { height: 35px; line-height: 35px; padding: 0 0 0 38px; color: #29A9E1; background-image: url(../images/twitter-icon.png); background-position: left center; background-repeat: no-repeat; font-family: avantgarde-book, Helvetica, Arial, sans-serif; font-size: 1em; } #twitter-feed .social-title { color: #555555; font-size: 1.7em; position: absolute; right: 14px; top: 14px; font-family: avantgarde-extra-light, Helvetica, Arial, sans-serif; } #twitter-feed .item { padding: 6px 6px 14px; background-color: #f5f9fd; margin-bottom: 6px; color: #777777; } #twitter-feed .item .small { margin-bottom: 2px; } /* subpage list */ .page { } .page .image { float: left; width: 130px; } .page .text { margin-left: 150px; } .page h2 { color: #E9284F; } .page h2 .small { font-size: 0.6em; color: #555555; } /* contact template */ #contact-form { } #google-map { width: 100%; height: 270px; margin-bottom: 1em; } #google-map-large { width: 100%; height: 500px; } /* shop browse */ #shop-browse { background-image: url(../images/category-column-bg.png); background-position: left top; background-repeat: repeat-y; margin-bottom: 14px; } #shop-quick-column { float: left; width: 119px; padding: 14px 14px 0; font-size: 0.9em; margin: 0 14px 0 0; background-color: #FFFFFF; } .title { text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.1em; margin-bottom: 1.5em; } #shop-quick-column a { display: block; } #shop-quick-column a.active { font-weight: bold; } #shop-quick-column p.item a:visited { color: #E9284F; } #browse-column { float: left; width: 805px; } #heading-block { background-color: #E9284F; color: #FFFFFF; font-size: 1.3em; } #heading-block .content { padding: 14px; } .breadcrumb-trail { float: left; height: 35px; line-height: 35px; font-size: 0.9em; } .view-options { float: right; height: 35px; line-height: 35px; font-size: 0.9em; text-align: right; vertical-align: middle; } .view-icon { display: block; float: right; width: 20px; height: 20px; background-position: 0 20px; margin: 7px 0 0 7px; } .view-icon.grid { background-image: url(../images/grid-icon.png); } .view-icon.list { background-image: url(../images/list-icon.png); } .view-icon.active, .view-icon:hover { background-position: 0 0; } .shop-category-tile { display: block; float: left; width: 149px; height: 260px; margin-bottom: 30px; border-right: 1px solid #b2b2b2; } .shop-category-tile.lastcol { border-right: 0; } .shop-category-tile .content { position: relative; height: 255px; padding: 20px 0 0; margin: 0 15px; border-bottom: 1px solid #b2b2b2; } .shop-category-tile.lastrow .content { border-bottom: 0; } .shop-category-tile .content .image { display: block; margin-bottom: 12px; } .shop-category-tile .content h2 { font-size: 1em; } .shop-category-tile .content .more-links { position: absolute; bottom: 10px; left: 0; font-size: 0.9em; } .shop-category-tile:hover { } .shop-category-tile:hover h2 { color: #000000; } .shop-item-listed { margin-bottom: 1em; } .shop-item-listed .content { position: relative; background-image: url(../images/b2b2b2.png); background-position: 570px 0; background-repeat: repeat-y; } .shop-item-listed .content .image { float: left; margin: 0 0 20px 0; } .shop-item-listed .content .text { margin-left: 170px; padding: 10px 0; width: 320px; font-size: 0.8em; } .shop-item-listed .content h2 { font-size: 1.4em; } .shop-item-listed .content .more-links { position: absolute; bottom: 6px; right: 0; width: 160px; } .more-links a { display: block; padding-top: 4px; padding-bottom: 4px; } .shop-item-listed .br { position: absolute; right: 200px; bottom: 10px; color: #1D2D5D; text-align: right; } /* shop detail */ #product-image { float: left; width: 380px; padding: 0 35px; } #product-info { float: right; width: 260px; } #product-info h1 { font-family: avantgarde-bold, Helvetica, Arial, sans-serif; font-size: 1.5em; color: #555555; } #footer-box { width: 100%; background-color: #1A2A58; color: #FFFFFF; } #footer { position: relative; width: 940px; margin: 0 auto; padding: 15px 0 25px; font-size: 0.8em; } #footer a { color: #FFFFFF; } #footer a:hover { text-decoration: underline; } /* MEGAMENU */ #megamenu-footer { } #megamenu-footer ul { float: left; margin: 0; padding: 0 25px 0 0; list-style-type: none; } #megamenu-footer ul li { margin: 0; padding: 0; } #megamenu-footer ul li.large { font-size: 1.2em; padding: 0 0 6px; text-transform: uppercase; letter-spacing: 0.2em; } #megamenu-footer ul li a { display: block; padding: 0 0 3px; } #footer-contact { position: absolute; right: 0; bottom: 40px; width: 270px; line-height: 1.5em; font-size: 1.3em; } #footer-contact .contact-key { display: inline-block; width: 14px; height: 14px; background-image: url(../images/white-circle14.png); line-height: 14px; text-align: center; color: #1A2A58; margin-right: 0.2em; font-size: 1em; } /* FANCYBOX PAGE */ body.popup { background-image: none; background-color: #FFFFFF; padding: 0; } #popup-root { padding: 40px; }@font-face { font-family: 'avantgarde-book'; src: url('fonts/avantgarde-book-webfont.eot'); src: url('fonts/avantgarde-book-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/avantgarde-book-webfont.woff') format('woff'), url('fonts/avantgarde-book-webfont.ttf') format('truetype'), url('fonts/avantgarde-book-webfont.svg#avantgarde-book') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'avantgarde-extra-light'; src: url('fonts/avantgarde-extra-light-webfont.eot'); src: url('fonts/avantgarde-extra-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/avantgarde-extra-light-webfont.woff') format('woff'), url('fonts/avantgarde-extra-light-webfont.ttf') format('truetype'), url('fonts/avantgarde-extra-light-webfont.svg#avantgarde-extra-light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'avantgarde-bold'; src: url('fonts/avantgarde-bold-webfont.eot'); src: url('fonts/avantgarde-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/avantgarde-bold-webfont.woff') format('woff'), url('fonts/avantgarde-bold-webfont.ttf') format('truetype'), url('fonts/avantgarde-bold-webfont.svg#avantgarde-bold') format('svg'); font-weight: normal; font-style: normal; }/* Copyright (c) Stu Nicholls. All rights reserved. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop.html */ .main-navigation-box { width: 100%; height: 30px; background-color: #E9284F; } .main-navigation { width: 980px; margin: 0px auto; height: 30px; position: relative; z-index: 100; } /* hack to correct IE5.5 faulty box model */ * html .main-navigation { width: 981px; w\idth: 980px; } .main-navigation ul { width: 780px; list-style-type: none; margin: 0; padding: 0; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .main-navigation ul ul { visibility: hidden; position: absolute; height: 0; top: 30px; left: 0; width: 179px; } /* another hack for IE5.5 */ * html .main-navigation ul ul { top: 30px; t\op: 30px; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .main-navigation li { float: left; position: relative; margin: 0; padding: 0; } /* style the first level links */ .main-navigation ul a, .main-navigation ul a:visited { display: block; padding: 0 20px; height: 30px; line-height: 30px; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.2em; } /* a hack so that IE5.5 faulty box model is corrected (use for widths, refer to website) */ * html .main-navigation ul a, * html .main-navigation ul a:visited { } .main-navigation ul a.active { background-color: #E5637F; } .main-navigation ul a.first { } .main-navigation ul a.last { border: 0; } /* style the first level hover */ .main-navigation ul a:hover, .main-navigation ul ul a:hover{ background-color: #E5637F; color: #FFFFFF; } .main-navigation ul :hover > a, .main-navigation ul ul :hover > a { background-color: #E5637F; color: #FFFFFF; } /* yet another hack for IE5.5 */ * html .main-navigation ul ul a, * html .main-navigation ul ul a:visited { width: 180px; w\idth: 140px; } /* style the second level links */ .main-navigation ul ul a, .main-navigation ul ul a:visited { text-align: left; height: auto; text-transform: none; border: 0; background-color: #FFFFFF; color: #555555; line-height: 1em; padding: 5px 20px; width: 140px; font-size: 0.85em; letter-spacing: 0; border-left: 1px solid #808080; border-right: 1px solid #808080; } .main-navigation ul ul a.active2 { background-color: #E5637F; color: #FFFFFF; } .main-navigation ul ul a.first2 { padding-top: 20px; } .main-navigation ul ul a.last2 { padding-bottom: 20px; border-bottom: 1px solid #808080; } /* style the second level hover */ .main-navigation ul ul a:hover { background-color: #E5637F; color: #FFFFFF; } .main-navigation ul ul :hover > a { background-color: #E5637F; color: #FFFFFF; } #basket { float: right; display: block; width: 153px; padding: 0 0 0 27px; height: 30px; line-height: 30px; color: #FFFFFF; background-color: #E5637F; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.85em; margin-right: 14px; text-align: center; background-image: url(../images/arrow-circle15.png); background-position: 12px center; background-repeat: no-repeat; } /* DON'T CHANGE */ /* style the table so that it takes no part in the layout - required for IE to work */ .main-navigation table { position: absolute; top: 0; left: 0; border-collapse: collapse; } /* make the second level visible when hover on first level list OR link */ .main-navigation ul li:hover ul, .main-navigation ul a:hover ul{ visibility: visible; }#viewbasket { margin-bottom: 10px; } table.basket { margin-bottom: 5px; } table.basket th { padding: 4px; background-color: #e6e5e0; } table.basket td { padding: 4px; background-color: #f8f8f8; } table.basket .optionlabels { font-size: 0.9em; } table.form { margin-bottom: 5px; } table.form th { padding: 4px; background-color: #e6e5e0; } table.form td { padding: 2px 4px; background-color: #f8f8f8; }