/* CSS Reset Stylesheet */
/* Flaming Bucket Technologies, flamingbucket.com */
/* Based on http://meyerweb.com/eric/tools/css/reset/ */
/*----------------------------------------------------*/
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, font, 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 {
margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* Remember to define focus style */
:focus { outline: 0; }
/* Remember to highlight inserts */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* Tables need cellspacing='0' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*
// CSS Reference
//---------------
// Curved corners - Mozilla and Webkit (Safari) extensions.
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
*/
/* Generic Content Style
----------------------------------------------------------------------------------------------*/
body { font: 12px Arial, Helvetica, sans-serif; color: #404040; background: #f6f6f6 url(Image/background.png) top center; }
/* Headings, No general style required. Modify unique page heading below. */
h2 { font: 18px Arial, Helvetica, sans-serif; margin-bottom: 10px; }
h3 { font: 12px Arial, Helvetica, sans-serif; padding: 6px 0; padding-left: 10px; color: #002d62; border-bottom: 2px solid #002d62; /* background: url(Image/menuTop.png); */ }
/* Input */
input { background: #fafafa; border: 1px solid #333; padding: 2px; }
select { background: #fafafa; border: 1px solid #333; padding: 2px; }
textarea { background: #fafafa; border: 1px solid #333; padding: 2px; }
/* Tables */
table { margin: 20px 0; border: 1px solid #ededed; position: relative; left: 2px; }
tr { }
th { background: #fafafa; color: #666; text-align: left; }
td { }
img { -ms-interpolation-mode: bicubic; }
/* Anchor elements / links */
a { text-decoration: none; }
a:link { color: #2467a1; }
a:visited { color: #2467a1; }
a:hover { color: #259865; text-decoration: underline; }
a:focus { }
a:active { color: #2467a1; }
/* Definition lists */
dl { margin-bottom: 10px; }
dt { font-weight: bold; }
dd { margin-bottom: 10px; }
/* Ordered lists */
ol { }
ol li { }
/* Unordered lists */
ul { }
ul li { background: url(Image/bullet.png) no-repeat 0 3px; }
/* Paragraphs, general formatting */
p { padding: 5px 0; }
/* Specific client front page content
----------------------------------------------------------------------------------------------*/
/* imageScroller */
#imageScroller { width: 280px; height: 200px; }
/* productReel */
.productReel { margin: 10px auto; width: 750px; overflow: hidden; }
.productReel .productBox {
width: 172px; float: left; text-align: center;
border: 1px solid #999; overflow: hidden;
}
.productReel .productBox .productImage { background: white; width: 172px; overflow: hidden; }
.productReel .productBox a { }
.productReel .productBox img:hover { opacity: 0.6; }
.productReel .productBox .productText { margin-top: 10px; padding: 5px 0; border-top: 1px solid #999; background: url(Image/h3.png) no-repeat; color: #444; }
/* magnifier
#magnifier { height: 150px; white-space: nowrap; padding-left: 10px; position: relative; top: 15px; }
#magnifier img { border: 2px solid #ccc; }
#magnifier img:hover { border: 2px solid #ededed; }*/
#thumbs { margin-top: 20px; height: 100px; white-space: nowrap; padding-left: 10px; position: relative; width: 105%; margin-right: -5%; }
#thumbs .thumb { float: left; width: 128px; height: 100px; }
#thumbs img { border: 2px solid #ccc; }
#thumbs img:hover { border: 2px solid #ededed; }
/* scrollBox */
#scrollBox { overflow: auto; float: left; width: 280px; height: 200px; }
#scrollBox h3 { padding: 5px 0; color: #666; background: none; font-weight: bold; }
#scrollBox h3:first { padding-top: 0; }
/* Large QOP Divisions
----------------------------------------------------------------------------------------------*/
#wrapper { margin: 0 auto; width: 960px; position: relative; }
#inner-wrapper { }
/* header */
#header { background: white url(Image/heading.png) top center no-repeat; width: 100%; height: 198px; overflow: hidden; border-bottom: 8px solid #f6f6f6; }
#header h1 { position: relative; bottom: 30px; }
#header h1 a { width: 100%; height: 200px; display: block; opacity: 0; }
#header p.logged-in-as { display: none; }
/* header -> top-links */
#header #top-links { margin-top: 2px; float: right; clear: both; color: white; }
#header #top-links li { float: right; margin-right: 10px; }
#header #top-links a { color: white; }
/* header -> tab-links */
#header #tab-links { width: 100%; height: 26px; color: #666; background: #2e71ab url(Image/menu.png); position: relative; bottom: 30px; }
#header #tab-links ul { float: right; }
#header #tab-links li { background: none; float: left; border-left: 1px solid #24659d; }
#header #tab-links li.currentPage { background: black; }
#header #tab-links li a {
height: 20px; display: block; float: left;
padding: 0 12px; padding-top: 6px;
color: white; text-decoration: none;
}
#header #tab-links li:first-child { border: none; }
#header #tab-links li a:hover { background: #248cf0 url(Image/menu.png) 0 -28px; }
/* search
----------------------------------------------------------------------------------------------*/
#search { width: 170px; float: left; clear: both; margin-bottom: 10px; position: absolute; top: -155px; left: 0; }
#search h3 { background: #f4f4f4; border-bottom: 1px solid #ccc; width: 160px; }
#search ol { }
#search li { margin: 0 0 0 10px; }
#search label { display: block; }
#search input { width: 150px; margin: 0; }
#search select { width: 150px; }
#search fieldset.submit { margin: 2px 0 0 10px; }
#search fieldset.submit input { width: auto; }
/* primary -> main content area */
#primary { margin-top: 20px; margin-bottom: 40px; min-height: 620px; width: 765px; float: right; }
#primary p { padding-left: 10px; padding-right: 40px; }
#primary .body livechat {display:none;}
/* primaryLeft */
#primary #primaryLeft { float: left; width: 570px; height: 200px; background: green; display: none; }
/* primaryRight -- vertical menu on the right */
#primary #primaryRight { float: right; width: 180px; height: 200px; background: blue; display: none; }
#primary #primaryRight ul { margin-bottom: 10px; padding-bottom: 20px; background: #fafafa; }
#primary #primaryRight li { color: black; }
#primary #primaryRight li a { padding-top: 7px; padding-left: 18px; width: 150px; display: block; }
#primary #primaryRight li a:hover { text-decoration: none; }
/* secondary */
#secondary { width: 170px; float: left; background: blue; } /* Extra side menus */
#login { }
#mini-basket { display: none; }
#mini-enquiry-basket { display: none; }
/* secondary -> secondary-links */
#secondary-links {
padding-top: 29px; width: 170px;
background: #fafafa url(Image/h3.png) repeat-x;
-moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;
}
#secondary-links .link-box { background: #fafafa; }
#secondary-links ul { }
#secondary-links li { width: 170px; float: left; } /* Space out links */
/* tertiary -- vertical menu on the left */
#tertiary { width: 180px; float: left; position: relative; top: 145px; }
/* tertiary -> category-nav */
#tertiary #category-nav {
margin-top: 135px; padding-top: 28px; width: 170px; float: left;
background: url(Image/menu.png) repeat-x; border: 1px solid #ccc; border-left: none; text-transform: uppercase;
position: absolute; top: 116px;
}
#tertiary #category-nav ul { padding-bottom: 10px; background: #fdfdfd; }
#tertiary #category-nav li { background: none; color: black; text-transform: lowercase; }
#tertiary #category-nav li a { padding-top: 6px; padding-left: 20px; width: 150px; display: block; background: url(Image/menuBullet.png) no-repeat 10px 14px; }
#tertiary #category-nav li a:hover { background: url(Image/menuBulletOn.png) no-repeat 10px 14px; text-decoration: none; }
#tertiary #category-nav li.location { }
#tertiary #category-nav ul ul { padding-left: 5px; }
#tertiary #category-nav ul ul li { background: none; }
#tertiary #category-nav ul ul li.location { background: none; } /* Stop double location graphic issue */
#tertiary #category-nav ul ul a { background: none; }
#tertiary #category-nav ul ul a:hover { }
#tertiary #category-nav ul ul li a { background: none; color: #666; width: 132px; }
#tertiary #category-nav ul ul li a:hover { background: none; color: #259865; }
/* tertiary -> page-nav */
#tertiary #page-nav { margin-top: 10px; width: 170px; float: left; display: none; }
/* tertiary -> tertiary-links */
#tertiary #tertiary-links {
padding-top: 29px; background: url(Image/h3.png) no-repeat;
margin: 10px 0; width: 170px; float: left;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
/* footer
----------------------------------------------------------------------------------------------*/
#footer { margin-top: 100px; width: 80%; height: 70px; float: right; clear: both; background: #4f8dc2; color: white; }
#footer ul { }
#footer li { display: inline; margin: 0 8px; background: none; }
#footer #meta { margin-top: 10px; margin-left: 10px; }
#footer #back-to-top { display: none; } /* Link back to the top of the page */
#footer #contactDetails { float: right; width: 400px; padding-right: 10px; text-align: right; }
#footer #contactDetails a { border-bottom: 1px solid white; color: white; }
/* footer -> bottom links (LVHA order) */
#bottom-links { color:#FFFFFF; font-weight:500; z-index: 999; }
#bottom-links a { color:#FFFFFF;}
#bottom-links a:link {color:#FFFFFF; }
#bottom-links a:visited {color:#FFFFFF; }
#bottom-links a:hover { color:#FFFFFF;}
#bottom-links a:active { color:#FFFFFF;}
/* CONTACT US
----------------------------------------------------------------------------------------------*/
#primary form.datamate { }
#primary form.datamate label { padding-top: 5px; display: block; width: 160px; float: left; }
#primary form.datamate input { margin-bottom: 10px; }
#primary form.datamate textarea { margin-bottom: 10px; }
/* Contact form specific tags */
#primary form.datamate .text label { }
#primary form.datamate .text input { }
#primary form.datamate .email-address label { }
#primary form.datamate .email-address input { }
#primary form.datamate .web-address label { }
#primary form.datamate .web-address input { }
#primary form.datamate .postal-code label { }
#primary form.datamate .postal-code input { }
#primary form.datamate .checkbox label { }
#primary form.datamate .checkbox input { }
#primary form.datamate .text-box label { }
#primary form.datamate .text-box textarea { }
/* FAVOURITES
----------------------------------------------------------------------------------------------*/
#primary #favourites .inner-box fieldset { display: none; } /* 'Add all favourites to basket' */
/* LOGIN PAGE
----------------------------------------------------------------------------------------------*/
#primary #login .text label { padding-top: 5px; display: block; width: 100px; float: left; }
#primary #login .text input { margin-bottom: 10px; }
#primary #login .submit input { cursor: pointer; }
#primary #login ol { margin-top: 20px;}
#secondary #login {display:none;}
/* SEARCH - Advanced Search Page
----------------------------------------------------------------------------------------------*/
#primary #search { display: block; margin-bottom: 60px; }
#primary #search fieldset ol { margin-bottom: 50px; }
#primary #search fieldset ol li { display: block; margin-bottom: 10px; float: left; clear: both; }
#primary #search fieldset label { display: block; width: 180px; float: left; clear: left; }
#primary #search fieldset input { display: block; float: left; clear: right; }
#primary #search fieldset select { display: block; float: left; clear: right; }
/* 'other' search options */
#primary #search fieldset span.other-Enum { display: block; float: left; clear: both; display: none; }
#primary #search fieldset span.other-Enum input { display: block; float: left; }
/* 'Search results for' */
#primary p.info { font: bold 16px Arial, Helvetica, sans-serif; }
/* PRODUCT PAGES
----------------------------------------------------------------------------------------------*/
#qo-bigpic { float: left; clear: both; }
#qo-bigpic p { display: none; }
/* sub-categories */
#sub-categories { margin-top: 10px; }
#sub-categories ul { }
#sub-categories ul li { background: none; float: left; text-align: center; margin: 2px; padding: 5px 10px; border: 1px solid #ccc; white-space: nowrap; }
#sub-categories ul li a { text-decoration: none; }
#sub-categories ul li a:hover { text-decoration: underline; }
#sub-categories ul li a img { }
#sub-categories ul li a span { display: block; }
/* Number of items per page */
div.per-page { padding-left: 10px; margin-bottom: 20px; }
/* Next and previous buttons */
.next { margin: 5px 0; }
.next a {
background: url(Image/nextButton.png) no-repeat;
display: block; width: 47px; height: 19px;
/* -moz-border-radius: 4px;
-webkit-border-radius: 4px; */
border: 1px solid #333;
}
.next a:hover { background: url(Image/nextButton.png) no-repeat 0 -19px; }
.next a img { display: none; } /* Hide button image */
.prev { margin: 5px 0; }
.prev a {
background: url(Image/prevButton.png) no-repeat;
display: block; width: 76px; height: 19px;
/* -moz-border-radius: 4px; -webkit-border-radius: 4px; */
border: 1px solid #333;
}
.prev a:hover { background: url(Image/prevButton.png) no-repeat 0 -19px; }
.prev a img { display: none; } /* Hide button image */
/* Product list */
.product-list { float: left; clear: both; }
.product-list .pagination { display: block; float: left; clear: both; padding: 10px 0; width: 100%; } { /* num items, next, previous etc. */ }
.product-list h3 { padding: 10px; background: none; border: none; } /* Product name, heading. Font defined in headings section. */
.product-list h3 a { }
.product-list h3 .pid { display: none; } /* Product code */
.product-list ol { display: block; float: left; clear: both; width: 100%; }
.product-list li {
margin: 0 5px; margin-bottom: 10px; width: 220px; height: 280px;
float: left; overflow: hidden; text-align: center;
/* -moz-border-radius: 8px; -webkit-border-radius: 8px; */
border: 1px solid #ccc;
}
.product-list li.odd { }
.product-list li.even { }
.product-list li .image { padding: 10px; } /* Product image */
.product-list li .body { padding: 0 10px; } /* Product body text */
.product-list .options { display: none; } /* Add to basket button */
.enquiry { display: none; }
.price { }
p.price-box { margin: 10px 0; font: 18px Arial, Helvetica, sans-serif; }
.value { font: 18px Arial, Helvetica, sans-serif; }
a.more-info { background: #ec008c; color: white; padding: 5px; cursor: pointer; position: relative; top: 50px; display: none; }
.excerpt { height: 50px; } /* Product description text */
.favourite input { display: none; background: black; color: white; border: none; padding: 3px; cursor: pointer; position: relative; left: 70px; top: 30px; }
/* Playing with item-info Screws up in IE6 (for now)
.item-info { float: left; clear: both; }
.item-info dt.min-qty { float: left; font-style: italic; }
.item-info dd.min-val { margin-left: 5px; float: left; font-style: italic; }
.item-info dd.value { float: left; clear: both; }
*/
div .back { float: left; clear: both; display: none; } /* 'Back up to' link */
/* PRODUCT DETAILS PAGE
----------------------------------------------------------------------------------------------*/
.small { }
#primary h1 { background: none; height: auto; font: 24px Arial, Helvetica, sans-serif; margin-top: 10px; } /* h1 within the primary division */
#product h2 .pid { } /* Product id */
#product .options h3 { display: none; } /* Hide 'instant quote!' text */
#product p.msg a { font-size: 18px; }
.product-details { margin-bottom: 10px; } /* Product image and textual description */
.product-details img { }
.product-details .body { } /* Textual product description */
.product-details p { width: 400px; } /* ALT Textual product description */
#product .image { float: left; display: block; }
#product .options form { background: none; }
#product .options fieldset { background: none; }
#product .options label { float: left; }
#product .options span.desc { margin-right: 15px; } /* qty (quantity) text within label */
#product .options fieldset input.submit { float: right; margin-right: 200px; } /* Add to basket/favourites and other buttons */
#product .related { margin-top: 20px; }
#product .related li { margin-top: 10px; }
/* Code, Price, 'Add to basket' button */
.embedleft { font: 18px Arial, Helvetica, sans-serif; color: #ec008c; }
.embedleft b { display: none; } /* 'Code' and 'Price' */
.embedleft input { margin: 10px 0; }
.embedleft input.image { margin: 0; background: none; border: none; } /* Add to basket button */
/* Lead time table */
#product .item-info { width: 300px; }
#product .item-info th { }
/* Discounts table */
#product .discounts { width: 560px; }
/* Quantity validation text */
#product #qty-validation { margin: 10px 0; }
/* BASKET
----------------------------------------------------------------------------------------------*/
.steps { margin: 5px 0; } /* basket, checkout, confirm and payment link steps */
.steps a { margin: 0 2px; } /* Space out steps: */
.steps a:hover { text-decoration: none; }
.steps span { margin: 0 2px; }
.steps input { margin: 0 2px; background: none; border: none; cursor: pointer; color: #174986; } /* confusing breadcrumb button, make it look like a 'link' */
.steps .current { border-bottom: 1px solid #404040; } /* The current step */
.steps input:hover { color: #404040; }
#basket p.warning { font-style: italic; } /* Warning message */
/* Shopping basket table */
#basket table.nc { margin-bottom: 20px; width: 100%; }
#basket table.nc tr { padding: 0; }
#basket table.nc th { padding: 15px 5px; }
#basket table.nc td { padding: 5px; vertical-align: top; }
#basket table.nc tr.odd { }
#basket table.nc tr.even { }
#basket table.nc tr.odd td { background: #fdfdfd; }
#basket table.nc tr.odd input { background: white; border: 1px solid #ededed; }
#basket table.nc tr.even input { background: white; border: 1px solid #ededed; }
#basket table.nc tbody { padding-bottom: 40px; border-bottom: 1px solid #ededed; } /* above delivery options (i.e. padding below first half of table */
#basket table.nc tfoot { }
#basket table.nc tfoot td { vertical-align: middle; }
/* Basket table headers */
#basket table.nc thead { text-transform: uppercase; }
#basket table.nc th { }
#basket #pd { background: black; color: white; text-align: left; padding-left: 20px; } /* product title */
#basket #qt { background: black; color: white; } /* quantity title */
#basket #pr { background: black; color: white; } /* price title */
#basket #ac { background: black; color: white; } /* additional costs title */
#basket #lst { background: black; color: white; } /* subtotal title */
#basket #rm { background: black; color: white; } /* remove title (no text) */
#basket #pr br { display: none; } /* Hide space between 'Price' and '(each)'*/
/* Basket table data */
#basket table.nc tr.odd td.img { background: white; } /* small product image */
#basket td.pd { width: 200px; } /* product description */
#basket td.qt { } /* quantity */
#basket td.pr { } /* price cell */
#basket td.ac { } /* additional costs cell */
#basket td.lst { } /* subtotal cells */
#basket td.rm { } /* remove link cells */
#basket #d { padding: 10px 20px; text-align: right; } /* delivery (title and selection box) */
#basket td.ttop { } /* cell to the right of delivery value */
#basket .select-Link { padding-left: 10px; } /* Drop down payment selection */
#basket #st { padding-right: 20px; text-align: right;} /* subtotal */
#basket #tx { padding-right: 20px; text-align: right; } /* VAT */
#basket #tt { padding-right: 20px; text-align: right; } /* total */
#basket #pay_type { margin-left: 10px; }
/* Update button */
#basket table.nc input.submit { background: #404040; border: 1px solid #666; color: white; cursor: pointer; }
#basket table.nc input.submit:hover { background: #c6c8ca; border: 1px solid #404040; color: #404040; }
#basket .additional { padding-right: 20px; display: none; } /* 'Additional information' box */
#basket .additional li { margin-bottom: 20px; font-weight: bold; } /* Additional information (Payment method, special requirements) */
#basket .additional #pay_type { margin: 0; margin-bottom: 20px; float: right; clear: both; }
#basket .additional label { float: right; clear: both; font-weight: bold; } /* Special requirements and payment method labels */
#basket .additional #notes { float: right; clear: both; display: none; } /* Special requirements text area */
/* Payment Logos */
#logos { position: absolute; top: 215px; left: 600px; }
/* CHECKOUT
----------------------------------------------------------------------------------------------*/
#checkout { } /* encompassing division */
#checkout p { margin: 10px 0; }
#checkout legend { margin-bottom: 10px; font-weight: bold; font: bold 16px Arial, Helvetica, sans-serif; }
#checkout li { margin-bottom: 10px; float: left; clear: both; display: block; width: 90%; }
#checkout li input { margin-left: 15px; }
#checkout li.required em { width: 15px; } /* Required text '*' */
#checkout li.required input { margin-left: 0; } /* Required text input area */
#checkout li.textarea { } /* */
#checkout label { float: left; clear: left; width: 200px; height: 20px; } /* All labels */
#checkout input { width: 220px; }
#checkout input.confirm-step { width: auto; cursor: pointer; }
#checkout input.submit { width: auto; }
#checkout em { float: left; color: red; }
/* Hide payment options depending on payment type */
#checkout .paytype-OCI .delivery-address { display: none; }
#checkout .paytype-OCI .billing-address { display: none; }
#checkout .paytype-OCI #additional { display: none; }
#checkout .paytype-OCI #personal-details { display: none; }
/* Correct lack of * character on billing address required input */
#checkout .billing-address li input { margin-left: 0; }
#checkout .billing-address legend { display: none; }
/* Checkout - optional information */
#additional li.textarea label { width: 100%; display: block; float: left; clear: both; }
#additional li.textarea textarea { display: block; float: left; clear: both; }
#additional li.text label { float: left; clear: left; margin-top: 10px; width: 80px; }
#additional li.text input { float: left; clear: right; margin-top: 8px; }
#checkout fieldset.submit { float: left; margin-top: 20px; }
/* Checkout - artwork upload */
#checkout #additional ol li.file fieldset { display: block; float: left; clear: both; margin: 10px 0; }
#checkout #additional ol li.file fieldset label { float: left; clear: left; width: 100%; height: 20px; margin-bottom: 10px; }
#checkout #additional ol li.file fieldset label span { float: left; }
#checkout #additional ol li.file fieldset label input { float: left; }
/* CONFIRM
----------------------------------------------------------------------------------------------*/
/* Correct non-h3 headings (Order no. & Name) */
dl.order-info { }
dl.order-info dt { font: 18px Arial, Helvetica, sans-serif; }
/* Big table headings */
#checkout table.nc #pd { } /* products */
#checkout table.nc #qt { } /* quantities */
#checkout table.nc #ist { background: black; } /* subtotal */
#checkout table.nc td.tac { text-align: center; } /* quantity data cells */
#checkout table.nc td.tar { text-align: center; } /* subtotal data cells */
#payment fieldset.submit { float: right; margin-right: 20px; } /* Proceed button */
/* LOGIN PAGE
----------------------------------------------------------------------------------------------*/
.text label { padding-top: 5px; display: block; width: 100px; float: left; }
.text input { margin-bottom: 10px; }
.submit input { cursor: pointer; }