/* 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: 3px; -moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;
// Text effects
text-shadow: 1px 1px black;
// Opacity
Standards compliant: opacity: 0.5;
IE: filter: alpha(opacity = 50);
*/
/* Generic Content Style
----------------------------------------------------------------------------------------------*/
body { font: 12px Arial, Helvetica, sans-serif; color: #404040; }
p.error { display: none; } /* QOP error messages */
/* Headings, No general style required (used by QOP in #header). */
h2 { font: 24px Arial, Helvetica, sans-serif; }
h3 { font: 12px Arial, Helvetica, sans-serif; padding: 6px 0; padding-left: 10px; }
/* Input */
input { background: white; border: 1px solid #bbb; }
select { border: 1px solid #bbb; }
textarea { border: 1px solid #bbb; }
/* Tables */
table { border: 1px solid #eee; }
tr { }
th { background: #eee; text-align: left; }
td { }
/* LVHA anchors: Link, Visited, Hover, Active */
a { text-decoration: none; color: #174986; }
a:link { }
a:visited { }
a:hover { color: #5587b2; }
a:active { }
/* Definition lists */
dl { margin-bottom: 10px; }
dt { font-weight: bold; }
dd { margin-bottom: 10px; }
/* Specific client front page content
----------------------------------------------------------------------------------------------*/
/* bannerFade */
#bannerFade { width: 770px; height: 220px; background: black; }
#bannerFade ul li { background: none; padding: 0; }
#bannerFade .hideImage { display: none; }
/* productReel */
.productReel { margin: 20px 0; width: 100%; overflow: hidden; }
.productReel .productBox { margin: 0 10px 0 0; width: 221px; float: left; text-align: center; overflow: hidden; }
.productReel .productBox .productImage { }
.productReel .productBox a { }
.productReel .productBox img:hover { }
.productReel .productBox .productText { display: none; }
/* Large QOP Divisions
----------------------------------------------------------------------------------------------*/
#wrapper { margin: 0 auto; position: relative; width: 1000px; }
#inner-wrapper { width: 1000px; padding: 0px; margin: 0px; }
/* header
----------------------------------------------------------------------------------------------*/
#header { width: 100%; background: url(/static/images/structure/banner.png) no-repeat top; margin: 0px 0px 10px 0px; padding: 0px; }
#header h1 { width: 70px; position: relative; bottom: 30px; font-size: 12px; } /* Moved up in order to 'hide' text link */
#header h1 a { height: 150px; width:550px; display: block; }
#header p.logged-in-as { display: none; }
/* top-links
----------------------------------------------------------------------------------------------*/
#top-links { position: absolute; top: 10px; right: 20px; }
#top-links ul { width: 267px; }
#top-links li { padding: 0 7px; background: none; float: left; border-left: 1px solid #FFFFFF; }
#top-links li a { color: #FFFFFF; }
#top-links li a:hover { text-decoration: underline; }
#top-links li:first-child { border-left: none }
/* tab-links
----------------------------------------------------------------------------------------------*/
#tab-links { width: 100%; position: absolute; left: 110px; top: 28px; }
#tab-links ul { width: 960px; margin: 0 auto; }
#tab-links ul li { background: white; float: left; margin-left: 5px; }
#tab-links li a { height: 20px; display: block; float: left; padding: 0 8px; padding-top: 4px; background: #eee; color: #393939; text-transform: uppercase; }
#tab-links li:first-child { }
#tab-links li a:hover { background: black; color: white; }
#tab-links li.location { } /* The current location */
#tab-links li.location a { background: black; color: white; }
/* top-search
----------------------------------------------------------------------------------------------*/
#top-search { width: 212px; height: 23px; position: absolute; top: 50px; right: 50px; }
#top-search .inner-box { width: 225px; position: relative; }
#top-search a { color: white; float:left; text-align:right; width: 203px; height: 20px; padding-top: 7px; } /* 'Advanced Search' */
#top-search a:hover { text-decoration: underline; } /* 'Advanced Search' */
#top-search form { }
#top-search .select { width: 212px; float: left; }
#top-search input { float: left; width: 145px; padding: 2px; height: 20px; }
#top-search #cat-select { padding: 2px; }
#top-search input.submit { float: left; border: none; background: #55388B; width: 50px; color:#FFFFFF; margin-top: 2px; cursor:pointer; }
#top-search input#keywords { font-size: 11px; float: left; padding-left: 3px; margin-right: 4px; height: 15px; border: none; background: white; position: relative; top: 3px; } /* Keyword search input field */
#top-search label.text { float:left; }
#top-search label.text span.desc { display: none; } /* 'Keywords' */
#top-search span.desc { color: #FFFFFF; }
/* primary -> main content area
----------------------------------------------------------------------------------------------*/
#primary { margin-bottom: 0px 0px 20px 20px; width: 805px; float: right; min-height: 740px; }
html>body #primary { height: auto; }
#primary #breadcrumbs { }
#primary #request-new-pwd legend { font-size: 24px; font-family: Arial, Helvetica, sans-serif; padding-bottom: 10px; }
#primary #request-new-pwd p, #primary #request-new-pwd li, #primary #request-new-pwd ol { padding-left: 0px; }
#primary #request-new-pwd input.submit { background:url(/static/images/buttons/send.gif) no-repeat center; text-align: left; color:#FFFFFF; cursor: pointer; margin-top: 10px; border: none; height: 26px; width: 350px; }
/* Give user-generated headings, paragraphs, lists etc. some style without affecting everything else */
#primary h2 { display: block; margin: 10px 0px 20px 0px; width: 100%; }
#primary p { padding: 0 40px 5px 10px; }
#primary .body p { padding: 0 40px 5px 0px; }
#primary li { background: url(Image/bullet.png) no-repeat 0 0; padding-left: 20px; }
#primary #checkout li { padding-left: 0px; }
/* secondary
----------------------------------------------------------------------------------------------*/
#secondary { width: 170px; float: left; } /* Extra side menus */
/* login (there is another #login, hence the need for #secondary #login) */
#secondary #login { display: none; }
body.home #secondary #login { display: block; position:absolute; background:url(/static/images/structure/sign-in-background.gif) no-repeat; top: 159px; height: 170px; left: 760px; z-index: 1; text-align: center; width: 240px; }
#secondary #login .inner-box { padding: 40px 0px 8px 0px; }
#secondary #login h3 { display: none; }
#secondary #login a { color: #FFFFFF; }
#secondary #login a:hover { text-decoration: underline; }
#secondary #login input { padding: 2px 3px; width: 200px; }
#secondary #login ul li { background: none; }
#secondary #login li.text label { display: none; } /* username and password label fields */
#secondary #login li.text input { margin-bottom: 10px; } /* username AND password input fields */
#secondary #login li.text input#usr { } /* username input field */
#secondary #login li.text input#pwd { } /* password input field */
#secondary #login fieldset.submit input { background:url(/static/images/buttons/sign-in.gif) center no-repeat; border: none; text-align:left; font-size: 0.001em; color: #6633FF; height: 25px; cursor: pointer; } /* Login button */
#secondary #login li.forgot-link { margin-top: 10px; } /* Forgotten password link */
#secondary #login li.register-link { margin: 10px 0px 0px 0px; display: block; background:url(/static/images/buttons/signup-now.gif) center no-repeat; border: none; text-align:left; font-size: 0.001em; color: #6633FF; height: 25px; cursor: pointer; } /* Link to register */
#secondary #login li.register-link a { display: block; height: 25px; }
#secondary #login fieldset li.checkbox { display: none; } /* Remember me? */
/* mini-basket & mini-enquiry-basket */
#mini-basket { margin-bottom: 20px; text-align: center; }
#mini-basket h3 { font-weight: bold; padding: 0px 0px 5px 0px; }
#mini-basket a.proceed-link { width: 170px; margin: 4px 0px; float: left; height: 26px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/checkout.gif) no-repeat center; cursor: pointer; }
#mini-basket .info { font-size: 0.90em; padding-left: 10px; }
#mini-enquiry-basket { display: none; }
/* secondary -> secondary-links */
#secondary-links { display: none; }
#secondary-links .link-box { }
#secondary-links ul { }
#secondary-links li { background: none; float: left; }
/* menu -- right hand home page menu
----------------------------------------------------------------------------------------------*/
#primary td#right-menu p { padding: 0px 0px 10px 25px; }
#primary td#right-menu { padding-top: 190px; }
/* tertiary -- vertical menu on the left (Categories, Virtual Categories etc.)
----------------------------------------------------------------------------------------------*/
#tertiary { width: 170px; float: left; }
#tertiary h3 { }
#tertiary ul { position: relative; }
#tertiary ul li { white-space: nowrap; cursor: pointer; }
#tertiary ul li a { padding: 4px 0 2px 8px; width: 162px; height: 17px; display: block; background: #F6F4F9; color: #644491; }
#tertiary ul li a:hover { background: url(/static/images/structure/nav-hover-bg.gif); color: #644491; text-decoration: none; }
#tertiary ul li.cat-link-sale-items a:hover { background: none; color: #FEECD5; }
#tertiary ul li.cat-link-just-arrived a:hover { background: none; color: #DBD4E8; }
#tertiary ul li.cat-link-eco-friendly { display: none; }
#tertiary ul li.cat-link-sale-items>a, #tertiary ul li.cat-link-just-arrived>a { font-size: 0.001em; background:none; }
#teritary ul li a:active { }
#tertiary ul li.location { font-weight: bold; background: url(/static/images/structure/nav-on-bg.gif); color: #FFFFFF; }
#tertiary ul li.location a { font-weight: bold; background: url(/static/images/structure/nav-on-bg.gif); color: #FFFFFF; }
#tertiary ul ul { }
#tertiary ul ul li { background: none; }
#tertiary ul ul li.location { background: none; } /* Stop double location graphic issue */
#tertiary ul ul li a { width: 162px; overflow: hidden; background: none; color: #644491; }
#tertiary ul ul li a:hover { background: #eee; color: #333; }
#teritary ul ul li a:active { }
#tertiary ul li.cat-link-sale-items { background: none; font-size: 0.001em; }
#tertiary ul li.cat-link-sale-items a { background: none; }
#tertiary ul li.cat-link-sale-items { position: absolute; top: 370px; background: url(/static/images/structure/sale-items.gif); height: 34px; }
#tertiary ul li.cat-link-sale-items a { color: #FEECD5; }
#tertiary ul li.cat-link-just-arrived { background: none; font-size: 0.001em; }
#tertiary ul li.cat-link-just-arrived a { background: none; }
#tertiary ul li.cat-link-just-arrived { position: absolute; top: 410px; background: url(/static/images/structure/just-arrived.gif); height: 34px; }
#tertiary ul li.cat-link-just-arrived a { color: #DBD4E8; }
/* tertiary menu first-child stuff */
#tertiary ul li:first-child { }
#tertiary ul li:first-child a { }
#tertiary ul li:first-child a:hover { }
#tertiary ul li:first-child a:active { }
#tertiary ul ul li:first-child { }
#tertiary ul ul li:first-child a { }
#tertiary ul ul li:first-child a:hover { }
#tertiary ul ul li:first-child a:active { }
/* tertiary subdivisions */
#category-nav>div.inner-box { background:url(/static/images/structure/category-header.jpg) top; padding-top: 9px; }
#category-nav { background:url(/static/images/structure/category-footer.jpg) bottom; padding-bottom: 9px; }
#virtual-category-nav { }
#page-nav { display: none; }
#tertiary-links { position: relative; }
#tertiary-links div.inner-box { position: absolute; top: 26px; }
#tertiary #tertiary-links ul li a { background: none; padding: 0px; height: 33px; margin: 0px 0px 10px; }
#tertiary #tertiary-links ul li a span.description { display: none; }
/* Content
----------------------------------------------------------------------------------------------*/
.home table { border: none; }
div.body td { vertical-align: top; }
/* footer
margin-top: 100px;
----------------------------------------------------------------------------------------------*/
#footer { width: 100%; float: left; clear: both; color:#999999; padding: 15px 0px 0px; background:url(/static/Image/accepted-card-logos.png) no-repeat right; }
#footer>div.content { }
#footer a { color:#666666; }
#footer a:hover { text-decoration: underline; }
#footer ul { text-align: left; }
#footer li { display: inline; margin: 0; padding: 0 10px; background: none; border-left:#999999 solid 1px; }
#footer #meta { width: 240px; }
#footer #back-to-top { display: none; } /* Link back to the top of the page */
#footer p { white-space:nowrap; width: 235px; float: left; }
/* footer -> bottom links (LVHA order) */
#bottom-links { float: right; text-align: left; width: 750px; }
#bottom-links a { }
#bottom-links a:link { }
#bottom-links a:visited { }
#bottom-links a:hover { }
#bottom-links a:active { }
/* TARGETED PAGE STYLE
----------------------------------------------------------------------------------------------*/
/*
// Page - Body Class
//-------------------
Home / Index - body.home
User Created Page - body.page
Category - body.category
Product Details - body.product
Checkout - body.checkout
Basket - body.basket
Advanced Search - body.advanced-search
*/
/* CONTACT US
----------------------------------------------------------------------------------------------*/
#primary form.datamate { }
#primary form.datamate fieldset p.info { padding: 10px 0px; }
#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; }
#primary form.datamate input, #primary form.datamate textarea { padding: 3px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; width: 300px; }
#primary form.datamate input[type=submit] { width: 160px; margin-left: 240px; border: none; background:url(/static/images/buttons/send.gif) center no-repeat; font-size: 0.001em; cursor: pointer; height: 26px; text-align: left; color: #FFFFFF; }
#primary form.datamate li { padding-left: 0px; }
#primary form.datamate ol { padding-top: 10px; }
body.enquiry #primary form.datamate li.date-and-time select.year { display: none; }
/* 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 { }
/* ENQUIRIES PAGE
----------------------------------------------------------------------------------------------*/
#primary #enquiry fieldset.submit input[type=submit] { width: 64px; float: left; height: 26px; border: none; cursor: pointer; padding-top: 28px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/update.gif) no-repeat center; }
#primary #enquiry form.datamate fieldset.submit input[type=submit] { width: 77px; float: left; height: 26px; border: none; cursor: pointer; padding-top: 28px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/send.gif) no-repeat center; }
#primary #enquiry fieldset.submit a.continue-link { width: 145px; float: left; font-size: 0.001em; color: #FFFFFF; height: 26px; background: url(/static/images/buttons/continue-shopping.gif) no-repeat center; }
#primary #enquiry fieldset.submit a.proceed-link { width: 92px; float: left; height: 26px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/proceed.gif) no-repeat center; }
/* FAVOURITES
----------------------------------------------------------------------------------------------*/
#primary #favourites .inner-box fieldset { display: none; } /* 'Add all favourites to basket' */
/* BASKET PAGE
----------------------------------------------------------------------------------------------*/
#primary #basket fieldset.delivery-address { width: 340px; }
#primary #basket fieldset.delivery-address legend { font-size: 16px; }
#primary #basket fieldset.delivery-address li { padding-left: 0px; padding-top: 10px; }
#primary #basket fieldset.delivery-address li label { width: 75px; float: left; padding: 3px 0px; margin-bottom: 5px; }
#primary #basket fieldset.delivery-address li.required label { width: 65px; }
#primary #basket fieldset.delivery-address li em { width: 10px; float: left; }
#primary #basket fieldset.delivery-address li input { width: 200px; float: left; padding: 3px; margin-bottom: 5px; }
#primary #basket fieldset.submit input[type=submit] { width: 64px; float: left; height: 26px; border: none; cursor: pointer; padding-top: 28px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/update.gif) no-repeat center; }
#primary #basket fieldset.submit a.continue-link { width: 145px; float: left; font-size: 0.001em; color: #FFFFFF; height: 26px; background: url(/static/images/buttons/continue-shopping.gif) no-repeat center; }
#primary #basket fieldset.submit a.proceed-link { width: 92px; float: left; height: 26px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/checkout.gif) no-repeat center; }
/* LOGIN PAGE
----------------------------------------------------------------------------------------------*/
#primary #login { padding-top: 20px; width: 80%; }
#primary #login h3 { display: none; }
#primary #login .text { margin-bottom: 10px; }
#primary #login .text label { padding-top: 5px; display: block; width: 100px; float: left; }
#primary #login .text input { width: 150px; }
#primary #login .checkbox { margin-top: 15px; }
#primary #login .checkbox label { }
#primary #login .checkbox input { border: none; }
#primary #login fieldset.submit input { cursor: pointer; background:url(/static/images/buttons/log-in.gif) no-repeat center; text-align: left; color:#FFFFFF; cursor: pointer; margin-top: 10px; border: none; height: 26px; width: 400px; }
#primary #login ul { margin: 10px 0 0; padding: 0; }
/* REGISTER PAGE
----------------------------------------------------------------------------------------------*/
#primary #register legend { font-size: 17px; padding: 10px 0px; }
#primary #register h3 { font-size: 24px; padding-left: 0px; }
#primary #register li { padding: 0px; }
#primary #register p { padding: 5px 0px; }
#primary #register #login-details { width: 400px; }
#primary #register #login-details ol li { height: 30px; }
#primary #register #login-details ol li label { margin-top: 4px; float: left; clear: left; }
#primary #register #login-details ol li input { float: right; clear: right; }
#primary #register ol li input { width: 200px; }
#primary #register #org-type-item { display: none; }
#primary #register #login-details ol li em { margin-left: 2px; float: left; }
#primary #register #personal-details { width: 400px; }
#primary #register #personal-details ol li { height: 30px; }
#primary #register #personal-details ol li label { margin-top: 4px; float: left; clear: left; }
#primary #register #personal-details ol li input { float: right; clear: right; }
#primary #register #personal-details ol li select { float: right; clear: right; }
#primary #register #personal-details ol li em { margin-left: 2px; float: left; }
#primary #register fieldset.submit input[type=submit] { width: 73px; height: 26px; border: none; cursor: pointer; padding-top: 28px; padding-left: 400px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/submit.gif) no-repeat center; }
/* SEARCH - Advanced Search Page
----------------------------------------------------------------------------------------------*/
#search { display: block; float: left; clear: both; margin-bottom: 60px; }
#search fieldset ol { margin-bottom: 50px; }
#search fieldset ol li { display: block; margin-bottom: 10px; float: left; clear: both; }
#search fieldset label { display: block; width: 180px; float: left; clear: left; }
#search fieldset input { display: block; float: left; clear: right; }
#search fieldset.submit input[type=submit] { background:url(/static/images/buttons/search.gif) no-repeat center; text-align: left; color:#FFFFFF; cursor: pointer; margin-top: 10px; border: none; height: 26px; width: 550px; }
#search fieldset select { display: block; float: left; clear: right; }
#search legend { font-weight: bold; font-size: 16px; margin-bottom: 10px; }
/* 'other' search options */
#search fieldset span.other-Enum { display: block; float: left; clear: both; display: none; }
#search fieldset span.other-Enum input { display: block; float: left; }
/* 'Search results for' */
.advanced-search p.info { float: left; clear: both; font: bold 16px Arial, Helvetica, sans-serif; padding: 0; }
.advanced-search p.error { display: none; } /* ERROR message - 'categoryname: Something is wrong!' */
/* SEARCH RESULTS - Advanced Search Page
----------------------------------------------------------------------------------------------*/
#search-results { }
#search-results ol li { }
#search-results ol li h3 { }
#search-results ol li h3 a { }
#search-results ol li .body { } /* Product description */
#search-results ol li p.price-box { margin-top: 5px; } /* Price */
#search-results ol li .options { margin: 5px 0; } /* 'Add to basket' button and other options */
/* PRODUCT PAGES
----------------------------------------------------------------------------------------------*/
/* Product list (also present on search results page, keep as class so it works on both pages!) */
.product-list { float: left; clear: both; }
body.category .back { display: none; } /* 'Back up to' link */
body.category .body { width: 400px; } /* Ensure to overwrite width of #product-list li .body further down! */
/* sub-categories */
#sub-categories { margin-top: 10px; }
#sub-categories ul { position: relative; left: -15px; }
#sub-categories ul li { background: url(/static/images/structure/category-border.gif) no-repeat center; float: left; text-align: center; margin: 2px; padding: 14px 10px 5px 10px; border: 1px none #ccc; white-space: nowrap; width: 230px; height: 180px; }
#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; color:#666666; font-weight: bold; font-size: 1.1em; }
/* Pagination - next / previous buttons */
.product-list .pagination { display: block; float: left; clear: both; padding: 10px 0; width: 100%; } /* num items, next, previous etc. */
.product-list .pagination p { padding: 0; text-align: center; }
.product-list div.per-page { display: none; } /* Number of items per page */
.product-list .next, .product-list .prev { cursor: pointer; }
.product-list .next { margin: 5px 0; float: right; background: url(/static/images/structure/next-button.gif) no-repeat; display: block; width: 79px; height: 25px; }
.product-list .next:hover { background: url(/static/images/structure/next-button.gif) no-repeat 0 -25px; }
.product-list .next a, .product-list .prev a { font-size: 0.01em; display: block; width: 150px; height: 25px; } /* Hide button image */
.product-list .next a img { display: none; } /* Hide button image */
.product-list .prev { margin: 5px 0; float: left; background: url(/static/images/structure/prev-button.gif) no-repeat; display: block; width: 121px; height: 25px; }
.product-list .prev:hover { background: url(/static/images/structure/prev-button.gif) no-repeat 0 -25px; }
.product-list .prev a img { display: none; } /* Hide button image */
/* Actual product list */
.product-list h3 { padding: 10px; height: 23px; background: none; border: none; } /* Product name, heading. Font defined in headings section. */
.product-list h3 a { display: block; color:#666666; font-weight: bold; font-size: 1.1em; } /* Product name */
.product-list h3 .pid { display: none; } /* Product code */
.product-list ol { display: block; float: left; clear: both; width: 100%; }
#primary .product-list li { margin: 0 5px; margin-bottom: 10px; padding:0px; width: 240px; height: 290px; float: left; overflow: hidden; text-align: center; border: 1px none #ccc; background: url(/static/images/structure/product-border.gif) no-repeat center top; }
#primary .product-list .body { width: 220px; overflow: hidden; height: 29px; }
.product-list li.odd { }
.product-list li.even { }
.product-list li .image { padding: 0px; } /* Product image */
.product-list li .body { padding: 0 10px; } /* Product body text */
/* Product options */
.product-list .options { display: none; } /* Add to enquiry/basket/favourites buttons */
.product-list .options .enquiry { }
.product-list .options .basket { }
.product-list .options .favourites { }
/* Moved to account for '1' or 'each' text next to it */
.product-list li p { position: relative; background:url(/static/images/structure/star-background.gif) no-repeat center top; height: 50px; text-transform: lowercase; }
#primary .product-list p { padding: 7px 0px 5px 0px; font-size: 0.75em; color: #644491; }
.product-list li p em { display: block; }
.product-list li p span.price { display: block; font-size: 1.6em; font-weight: bold; }
form#info li.text input { padding: 3px; }
/* PRODUCT DETAILS PAGE
----------------------------------------------------------------------------------------------*/
#product { margin-bottom: 10px; }
#product h2 { display: block; float: left; clear: both; margin-bottom: 10px; width: 100%; } /* Product header */
#product h2 .pid { } /* Product id */
#product .back { display: none; }
/* General table formatting */
#product table { display: block; margin-top: 1px; border: 1px solid #ededed; width: 300px; }
#product table th { padding: 5px 0 0 10px; background: #fafafa; text-align: left; }
#product table td { padding: 5px; }
/* Product message ('successfully added to basket' etc.) */
#product p.msg { margin: 10px 20px; }
/* Product description */
#product .body { padding: 10px; width: 278px; display: block; float: left; border: 1px solid #ededed; }
/* Product image */
#product .image { float: left; display: block; margin-right: 10px; }
#product .image a { }
#product .image a img { }
/* item-info */
#product .item-info { float: left; }
/* Price box */
#product p.price-box { float: left; margin-top: 1px; padding: 5px 10px; border: 1px solid #ededed; width: 278px; }
#product p.price-box em { }
#product p.price-box span { }
/* Product stock level */
#product p.stock { float: left; margin-top: 1px; padding: 5px 10px; border: 1px solid #ededed; width: 278px; }
/* Product options */
#product .options { float: left; margin-top: 2px; /*width: 300px; position: relative;*/ }
#product .options h3 { display: none; } /* Hide 'instant quote!' text */
#product .options form { background: none; }
#product .options fieldset { background: none; }
#product .options label { float: left; clear: both; margin: 5px 0; }
#product .options input { float: left; clear: both; min-width: 50px; }
#product .options input.submit { width: auto; }
#product .options .enquiry input.submit { float: left; clear: left; /*position: relative; top: 50px;*/ background: url(/static/images/buttons/add-to-enquiry.gif) no-repeat left; cursor: pointer; border: none; color: #FFFFFF; width: 220px; height: 22px; text-align: right; } /* Add to basket button */
#product .options form.enquiry fieldset { /*float: left;*/ }
#product .options select { float: left; clear: both; min-width: 200px; }
#product .options span { float: left; clear: both; }
#product .options p { float: left; clear: both; }
#product .options span.desc { } /* All label text */
#product .options form.basket .product-variations-wrap { } /* Product variations e.g. t-shirt sizes */
/* Specific buttons */
#product .options .basket { /*float: left;*/ }
#product .options .basket input.submit { float: left; clear: left; /*position: relative; top: 50px;*/ background: url(/static/images/buttons/add-to-basket.gif) no-repeat left; cursor: pointer; border: none; color: #FFFFFF; width: 220px; height: 22px; text-align: right; } /* Add to basket button */
#product .options .basket label { /*position: relative; top: 40px;*/ }
#product .options .enquiry { padding-top: 30px; } /* Add to Enquiry */
#product .options .favourites { position: absolute; bottom: 0; left: 200px; display: none; } /* Add to Favourites */
#product .options p.small { position: absolute; bottom: 0; left: 300px; display: none; } /* Virtual Sample */
/* Results */
#product .options .results { float: left; clear: both; }
#product .options .results .calculate { float: left; clear: both; } /* 'Calculate' button */
#product .options .results .total { float: left; clear: both; margin: 10px 0; } /* Resulting total after pressing 'Calculate' */
/* Discounts table */
#product .discounts { width: 300px; float: left; }
/* Quantity validation text */
#product #qty-validation { margin: 10px 0; }
#product .back { } /* 'Back up to' link */
#product .options .info-link { display: none; } /* info-link 'i' popups */
/* Related items */
#product .related { float: left; clear: both; margin-top: 20px; width: 100%; }
#product .related h3 { border: 1px solid #ccc; border-left: none; border-right: none; padding: 10px 0; padding-left: 20px; }
#product .related ul { margin-top: 10px; }
#product .related ul li { margin: 0; padding: 5px; background: none; float: left; width: 100px; height: 80px; text-align: center; }
#product .related ul li a img { margin-left: 30px; float: left; clear: both; }
#product .related ul li a span { float: left; clear: both; display: block; width: 100px; }
/* 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, #enquiry table.nc { margin: 20px 0px; width: 100%; }
#basket table.nc tr, #enquiry table.nc tr { padding: 0; }
#basket table.nc th, #enquiry table.nc th { padding: 5px 5px; }
#basket table.nc td, #enquiry table.nc td { padding: 5px; vertical-align: top; }
#basket table.nc tr.odd, #enquiry table.nc tr.odd { }
#basket table.nc tr.even, #enquiry table.nc tr.even { }
#basket table.nc tr.odd td, #enquiry table.nc tr.odd td { background: #fafafa; }
#basket table.nc tr.odd input, #enquiry table.nc tr.odd input { background: white; border: 1px solid #ededed; }
#basket table.nc tr.even input, #enquiry table.nc tr.even input { background: white; border: 1px solid #ededed; }
#basket table.nc tbody, #enquiry 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, #enquiry table.nc tfoot { }
#basket table.nc tfoot td, #enquiry table.nc tfoot td { vertical-align: middle; }
/* Basket table headers */
#basket table.nc thead, #enquiry table.nc thead { color: white; text-transform: uppercase; }
#basket #pd, #enquiry #pd { background: #61418F; text-align: left; padding-left: 20px; } /* product title */
#basket #qt, #enquiry #qt { background: #61418F; } /* quantity title */
#basket #pr, #enquiry #pr { background: #61418F; } /* price title */
#basket #ac, #enquiry #ac { background: #61418F; } /* additional costs title */
#basket #lst, #enquiry #lst { background: #61418F; } /* subtotal title */
#basket #rm, #enquiry #rm { background: #61418F; } /* remove title (no text) */
#basket #pr br, #enquiry #pr br { display: none; } /* Hide space between 'Price' and '(each)'*/
/* Basket table data */
#basket table.nc tr.odd td.img, #enquiry table.nc tr.odd td.img { background: white; } /* small product image */
#basket td.pd, #enquiry td.pd { width: 200px; } /* product description */
#basket td.qt, #enquiry td.qt { text-align: center; } /* quantity */
#basket td.pr, #enquiry td.pr { text-align: center; } /* price cell */
#basket td.ac, #enquiry td.ac { } /* additional costs cell */
#basket td.lst, #enquiry td.lst { text-align: center; } /* subtotal cells */
#basket td.rm, #enquiry td.rm { text-align: center; } /* remove link cells */
#basket #d, #enquiry #d { padding: 10px 20px; text-align: right; } /* delivery (title and selection box) */
#basket td.ttop, #enquiry td.ttop { } /* cell to the right of delivery value */
#basket .select-Link, #enquiry .select-Link { padding-left: 10px; } /* Drop down payment selection */
#basket #st, #enquiry #st { padding-right: 20px; text-align: right;} /* subtotal */
#basket #tx, #enquiry #tx { padding-right: 20px; text-align: right; } /* VAT */
#basket #tt, #enquiry #tt { padding-right: 20px; text-align: right; } /* total */
#basket #pay_type { margin-left: 10px; }
div#basket fieldset.submit, div#enquiry fieldset.submit { margin-top: 20px; }
/* Update button */
#basket table.nc input.submit { width: 64px; float: left; height: 26px; border: none; cursor: pointer; padding-top: 28px; font-size: 0.001em; color: #FFFFFF; background: url(/static/images/buttons/update.gif) no-repeat center; }
#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 */
/* CHECKOUT
----------------------------------------------------------------------------------------------*/
#checkout { } /* encompassing division */
#checkout p { margin: 10px 0; }
#checkout legend { margin-bottom: 10px; padding-top: 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: 130px; height: 20px; } /* All labels */
#checkout fieldset.billing-address p { padding-left: 0px; }
#checkout fieldset.billing-address label { width: 145px; }
#additional li.text label[for=ref] { width: 200px; }
#checkout input { width: 220px; }
#checkout input.confirm-step { width: auto; cursor: pointer; }
#checkout input.submit { width: auto; background: url(/static/images/buttons/submit.gif) no-repeat center; width: 73px; height: 26px; padding-left: 500px; border: none; cursor: pointer; padding-top: 28px; font-size: 0.001em; color: #FFFFFF; }
#checkout em { float: left; color: red; }
#primary #checkout h3 { font-size: 14px; font-weight: bold; padding: 0px; }
#primary #checkout p { padding-left: 0px; padding-top: 1px; margin-top: 0px; }
/* 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: 14px Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px 0px 1px 0px; }
#checkout p.msg { float: none; }
#checkout input.checkout-step { background: none; border: none; width: auto; }
/* Big table headings */
#checkout table.nc { margin-bottom: 20px; }
#checkout table.nc tr { padding: 0; }
#checkout table.nc th { padding: 15px 5px; }
#checkout table.nc td { padding: 5px; vertical-align: top; }
#checkout table.nc #pd { } /* products */
#checkout table.nc #qt { } /* quantities */
#checkout table.nc #ist { } /* 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 */
/* MY-ACCOUNT
----------------------------------------------------------------------------------------------*/
/* my-account */
body.my-account #primary { }
body.my-account #sub-pages { float: left; clear: both; margin-top: 20px; }
body.my-account #sub-pages ul { float: left; clear: both; }
body.my-account #sub-pages li { float: left; clear: both; width: 400px; margin-bottom: 2px; }
body.my-account #sub-pages li ul { margin: 5px 0 0; padding: 0; float: left; clear: both; position: relative; right: 20px; }
/* edit-my-profile */
body.user-details #my-details { margin-left: 20px; }
body.user-details #my-details ol li { display: block; height: 20px; margin: 10px 0; }
body.user-details #my-details label { float: left; clear: left; width: 160px; }
body.user-details #my-details em { float: left; width: 10px; }
body.user-details #my-details input { float: left; clear: right; }
body.user-details #my-details p.info { margin-bottom: 10px; }
body.user-details #my-details fieldset.submit { margin: 10px 0; margin-left: 10px; }
body.user-details #my-details legend { display: none; }
/* manage-addresses */
body.my-addresses #addresses { padding-top: 20px; width: 588px; height: 800px; overflow: auto; float: left; clear: both; display: block; }
body.my-addresses #addresses p.msg { margin: 20px; }
body.my-addresses #addresses fieldset { float: left; }
body.my-addresses #addresses ul li { display: block; height: auto; margin-bottom: 10px; padding: 0; }
body.my-addresses #addresses ul .options { margin-left: 20px; }
body.my-addresses #addresses ul .options fieldset { margin: 5px 0; display: none; }
body.my-addresses #addresses ul .options a { margin: 5px 0; padding: 0 5px; }
body.my-addresses #addresses ul .options a.edit { padding-left: 0; }
body.my-addresses #addresses ul .options a.remove { padding-right: 0; border-left: 1px solid #004165; }
body.my-addresses #addresses fieldset p a { padding: 5px; padding-left: 0; background: #004165; color: white; text-decoration: none; border: none; }
body.my-addresses #addresses input { }
/* manage-addresses new-address */
body.my-addresses #new-address fieldset ol li { display: block; width: 380px; height: 20px; margin-bottom: 5px; }
body.my-addresses #new-address fieldset ol li label { float: left; clear: left; width: 160px; }
body.my-addresses #new-address fieldset ol li em { float: left; width: 10px; }
body.my-addresses #new-address fieldset ol li input { width: 200px; float: right; clear: right; }
body.my-addresses #new-address fieldset.submit { margin: 10px 0; margin-left: 10px; }
/* manage-addresses edit-address */
body.my-addresses #edit-address fieldset ol li { margin-bottom: 5px; }
body.my-addresses #edit-address fieldset ol li label { float: left; clear: left; width: 160px; }
body.my-addresses #edit-address fieldset ol li em { float: left; width: 10px; }
body.my-addresses #edit-address fieldset ol li input { float: left; clear: right; }
body.my-addresses #edit-address fieldset.submit { margin: 10px 0; margin-left: 10px; }