/* 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; */ /* Colour reference ----------------------------------------------------------------------------------------------*/ /* - Primary colour: DARK BLUE: #345aa1; - Secondary colour LIGHT BLUE: #6495ed; */ /* Generic Content Style ----------------------------------------------------------------------------------------------*/ body { font: 12px Arial, Helvetica, sans-serif; color: #404040; } /* Headings, No

general style required. Modify unique header division. */ h2 { font: 24px Arial, Helvetica, sans-serif; } h3 { font: 12px Arial, Helvetica, sans-serif; padding: 6px 0; padding-left: 10px; color: white; background: #345aa1; } /* Input */ input { background: #fafafa; border: 1px solid #bbb; } select { background: #fafafa; border: 1px solid #bbb; } textarea { background: #fafafa; border: 1px solid #bbb; } /* Tables */ table { border: 1px solid #ededed; } tr { } th { background: #fafafa; color: #666; text-align: left; } td { } /* Anchor elements / links */ a, a:link, a:visited, a:active { text-decoration: none; color: #174986; } a:focus { } a:hover { color: #5587b2; } /* 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; } /* Specific client front page content ----------------------------------------------------------------------------------------------*/ /* imageScroller */ #imageScroller { width: 280px; height: 200px; } /* productReel */ .productReel { margin: 10px 0; width: 770px; overflow: hidden; } .productReel .productBox { margin: 0 20px 0 0; width: 221px; float: left; text-align: center; overflow: hidden; } .productReel .productBox .productImage { } .productReel .productBox a { } .productReel .productBox img:hover { opacity: 0.6; } .productReel .productBox .productText { display: none; } /* magnifier */ #magnifier { height: 150px; white-space: nowrap; padding-left: 20px; position: relative; top: 15px; } #magnifier img { border: 2px solid #ccc; } #magnifier img:hover { border: 3px 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 { background: url(Image/background.png) no-repeat 0 123px; margin: 0 auto; position: relative; width: 960px; height: 600px; } #inner-wrapper { margin: 0 auto; width: 960px; position: relative; } /* header ----------------------------------------------------------------------------------------------*/ #header { width: 100%; height: 110px; background: url(Image/header.gif) no-repeat 0 10px; } #header h1 { width: 220px; position: relative; bottom: 30px; } /* Moved up in order to 'hide' text link */ #header h1:hover { } #header h1 a { height: 110px; display: block; opacity: 0; } #header p.logged-in-as { position: absolute; top: 140px; left: 0; color: white; z-index: 20; width: 150px; text-align: center; } #header p.logged-in-as a { color: white; } /* top-links ----------------------------------------------------------------------------------------------*/ #top-links { position: absolute; top: 88px; right: 20px; display: none; } #top-links ul { width: 200px; } #top-links li { padding: 0 20px; background: none; float: left; } #top-links li a { } #top-links li a:hover { } #top-links li:first-child { border-right: 1px solid #ededed; } /* tab-links ----------------------------------------------------------------------------------------------*/ #tab-links { width: 100%; position: absolute; top: 85px; } #tab-links ul { width: 960px; height: 30px; margin: 0 auto; background: #345aa1; } #tab-links ul li { background: none; float: left; border-left: 1px solid white; height: 30px; } #tab-links li.currentPage { background: black; } #tab-links li a { display: block; float: left; padding: 8px 10px 7px; color: white; text-transform: capitalize; } #tab-links li:first-child { border-left: none; } #tab-links li a:hover { background: #6495ed; } #tab-links li.location { } /* The current location */ #tab-links li.location a { } /* top-search ----------------------------------------------------------------------------------------------*/ #top-search { width: 240px; height: 23px; position: absolute; top: 91px; right: 0; } #top-search .inner-box { } #top-search a { margin-top: 6px; text-decoration: underline; display: block; color: white; display: none; } /* 'Advanced Search' */ #top-search form { } #top-search input#keywords { font-size: 11px; float: left; margin-right: 6px; padding: 2px; padding-left: 3px; height: 15px; border: none; background: white; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* Keyword search input field */ /* #top-search input.submit { float: left; cursor: pointer; width: 50px; height: 23px; background: none; color: white; border: none; position: relative; left: 5px; bottom: 3px; } /* Login button */ #top-search input { float: left; } /* Login button */ #top-search input.submit:hover { /* background: url(Image/menu.png) 0 -28px; */ cursor: pointer; } #top-search label.text { } #top-search label.text span.desc { display: none; } /* 'Keywords' */ /* primary -> main content area ----------------------------------------------------------------------------------------------*/ #primary { width: 800px; height: auto; position: absolute; top: 13px; left: 160px; } #primary #breadcrumbs { } #primary h2 { display: block; margin-top: 10px; width: 100%; } #primary p { padding: 0 40px 5px 0; } #primary #bestsellers { display: none; } /* secondary ----------------------------------------------------------------------------------------------*/ #secondary { width: 150px; float: left; position: absolute; left: 0; top: 0; } /* Extra side menus */ /* login (there is another #login, hence the need for #secondary #login) */ #secondary #login { background: #eee; text-align: center; width: 150px; height: 180px; overflow: hidden; position: absolute; top: 13px; } #secondary #login .inner-box { padding-bottom: 8px; } #secondary #login h3 { margin-bottom: 10px; } #secondary #login a { } #secondary #login input { padding: 2px 3px; } #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: 8px; } /* 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: none; border: none; } /* Login button */ #secondary #login li.forgot-link { margin-top: 5px; } /* Forgotten password link */ #secondary #login li.register-link { } /* Link to register */ #secondary #login fieldset li.checkbox { display: none; } /* Remember me? */ /* Latest news */ #latest-news { width: 201px; position: absolute; top: 329px; left: 760px; display: none; } #latest-news ol { margin: 10px 10px 0; } /* mini-basket & mini-enquiry-basket */ .mini-basket { width: 200px; } .mini-basket h3 { padding: 0; height: 30px; } .mini-basket h3 a { color: white; width: 180px; height: 15px; display: block; padding: 7px 10px 8px; } .mini-basket h3 a:hover { background: #6495ed; color: white; } .mini-basket p { padding: 5px 0 5px 10px; } .mini-basket p a { display: none; } .mini-basket ul { padding: 5px 0 5px 10px; } #mini-basket { position: absolute; top: -110px; left: 559px; } #mini-enquiry-basket { position: absolute; top: -110px; left: 760px; } /* secondary -> secondary-links */ #secondary-links { display: none; } #secondary-links .link-box { } #secondary-links ul { } #secondary-links li { background: none; float: left; } /* tertiary -- vertical menu on the left ----------------------------------------------------------------------------------------------*/ #tertiary { width: 150px; height: 540px; position: absolute; top: 171px; float: left; clear: both; } #tertiary h3 { } #tertiary ul { } #tertiary ul li { margin-bottom: 1px; white-space: nowrap; background: #6495ed; } #tertiary ul li a { padding: 2px 0; padding-top: 4px; padding-left: 8px; height: 17px; display: block; color: white; } #tertiary ul li a:hover { background: #345aa1; text-decoration: none; } #tertiary ul li.location { } #tertiary ul ul { } #tertiary ul ul li { margin: 0; background: white; border: none; } #tertiary ul ul li.location { background: white; } /* Stop double location graphic issue */ #tertiary ul ul li a { padding-top: 2px; border-bottom: 1px dotted #dedede; color: #064a8c; } #tertiary ul ul li a:hover { background: none; } /* category-nav first-child stuff */ #tertiary ul li:first-child { } #tertiary ul li:first-child a { } #tertiary ul li:first-child a:hover { } #tertiary ul ul li:first-child { } #tertiary ul ul li:first-child a { } #tertiary ul ul li:first-child a:hover { } /* tertiary -> category-nav */ #category-nav { margin-top: 10px; } /* tertiary -> virtual-category-nav */ #virtual-category-nav { } /* tertiary -> page-nav */ #page-nav { display: none; } /* tertiary -> tertiary-links */ #tertiary-links { padding-top: 29px; background: url(Image/h3.png) no-repeat; display: none; margin: 10px 0; width: 170px; height: 400px; float: left; } /* footer ----------------------------------------------------------------------------------------------*/ #footer { margin-top: 100px; width: 100%; float: left; clear: both; position: relative; top: 800px; } #footer ul { text-align: center; } #footer li { display: inline; margin: 0 8px; background: none; } #footer #meta { margin-top: 20px; text-align: center; } #footer #back-to-top { display: none; } /* Link back to the top of the page */ /* footer -> bottom links */ #bottom-links { } #bottom-links a { } #bottom-links a:link { } #bottom-links a:visited { } #bottom-links a:active { } #bottom-links a:hover { } /* 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 */ body.home #latest-news { display: block; } body.product #primary { } /* CONTACT US ----------------------------------------------------------------------------------------------*/ #primary form.datamate { width: 400px;} #primary form.datamate li { padding: 5px; } #primary form.datamate legend { display: none; } #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 fieldset.submit input { margin-top: 40px; cursor: pointer; } /* REGISTER PAGE ----------------------------------------------------------------------------------------------*/ /*#primary #register #login-details { width: 400px; padding-top: 10px; padding-bottom: 10px; } #primary #register #login-details legend { display: none; } #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 #login-details ol li em { margin-left: 2px; float: left; } #primary #register #personal-details { width: 400px; } #primary #register #personal-details legend { display: none; } #primary #register #personal-details p { } #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 input .tel { float: right; clear: right; width: 300px;} #primary #register #personal-details ol li select { float: right; clear: right; } #primary #register #personal-details ol li em { margin-left: 2px; float: left; }*/ /* REGISTER PAGE v2 ----------------------------------------------------------------------------------------------*/ #primary #register { padding: 20px;} #primary #register p.info { font-size: 12px; color: #CC0000; } #primary #register #login-details { width: 400px; display:block; } #primary #register #login-details legend { display: none; } #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; width: 15em;} #primary #register #login-details ol li em { margin-left: 2px; float: left; color: #CC0000; } #primary #register #personal-details { width: 400px; } #primary #register #personal-details legend { display: none; } #primary #register #personal-details ol li { height: 30px; margin-top: 5px; margin-bottom: 5px;} #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; width: 15em; } #primary #register #personal-details ol li select { float: right; clear: right; width: 15.2em;} #primary #register #personal-details ol li em { margin-left: 2px; float: left; color: #CC0000; } /* SEARCH - Advanced Search Page ----------------------------------------------------------------------------------------------*/ #search { display: block; 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 select { display: block; float: left; clear: right; } /* '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' */ #primary p.info { padding: 0; font: bold 16px Arial, Helvetica, sans-serif; } #primary 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 { color: white; } #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 */ .product-list { float: left; clear: both; margin-left: 5px; } body.category .back { display: none; } /* 'Back up to' link */ body.category .body { margin-top: 10px; width: 400px; } /* Ensure to overwrite width of #product-list li .body further down! */ /* 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: 3px solid #6495ed; -moz-border-radius-bottomright: 12px; 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; } /* Pagination - next / previous buttons */ .product-list .pagination { display: block; float: left; clear: both; margin-left: 5px; padding: 10px 0; width: 100%; } { /* num items, next, previous etc. */ } .product-list .pagination p { padding: 0; position: relative; right: 10px; } .product-list div.per-page { display: none; } /* Number of items per page */ .product-list .next { margin: 5px 0; } .product-list .next a { background: url(Image/nextButton.png) no-repeat; display: block; width: 47px; height: 19px; border: 1px solid #333; } .product-list .next a:hover { background: url(Image/nextButton.png) no-repeat 0 -19px; } .product-list .next a img { display: none; } /* Hide button image */ .product-list .prev { margin: 5px 0; } .product-list .prev a { background: url(Image/prevButton.png) no-repeat; display: block; width: 76px; height: 19px; border: 1px solid #333; } .product-list .prev a:hover { background: url(Image/prevButton.png) no-repeat 0 -19px; } .product-list .prev a img { display: none; } /* Hide button image */ /* Actual product list */ .product-list h3 { padding: 10px; height: 30px; background: #6495ed; border: none; overflow: hidden; } /* Product name, heading. Font defined in headings section. */ .product-list h3 a { color: white; display: block; } /* Product name */ .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: 200px; height: 280px; float: left; overflow: hidden; text-align: center; border: 1px solid #6495ed; -moz-border-radius-bottomright: 20px; } .product-list li.odd { } .product-list li.even { } .product-list li .image { padding: 10px; } /* Product image */ .product-list li .body { margin: 0; padding: 0 10px; width: 180px; } /* 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 p.price-box { margin: 10px 0; font: 18px Arial, Helvetica, sans-serif; color: white; position: relative; left: 40px; } .product-list p.price-box em { color: #888; font-size: 12px;} .product-list p.price-box span.price { color: #888; font-size: 12px;} /* PRODUCT DETAILS PAGE ----------------------------------------------------------------------------------------------*/ #product { margin-bottom: 10px; } #product h2 { display: block; float: left; clear: both; margin-bottom: 10px; } /* 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; margin-top: 1px; } /* 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 options */ #product .options { float: left; margin-top: 2px; width: 300px; } #product .options h3 { display: none; } /* Hide 'instant quote!' text */ #product .options form { background: none; } #product .options fieldset { background: none; } #product .options label { } #product .options span.desc { margin-right: 15px; } /* qty (quantity) text within label */ #product .options form.basket input.submit { float: right; clear: both; } /* Add to basket/favourites and other buttons */ #product .options form.basket .product-variations-wrap { } /* Product variations e.g. t-shirt sizes */ #product .options form.basket .results { } /* 'Calculate' button and results AND 'Add to basket' button */ #product .options form.basket .results .calculate { display: none; } /* 'Calculate' button */ #product .options form.basket .results .total { display: none; } /* Resulting total after pressing 'Calculate' */ /* Specific options buttons */ #product .options .enquiry { float: right; clear: both; margin-top: 10px; } #product .options .favourites { float: right; clear: both; margin-top: 10px; } /* Discounts table */ #product .discounts { width: 300px; float: left; } /* Quantity validation text */ #product #qty-validation { margin: 10px 0; } /* 'Back up to' link */ #product .back { } /* 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 ----------------------------------------------------------------------------------------------*/ #basket .steps { margin: 5px 0; } /* basket, checkout, confirm, payment */ #basket .steps a { margin: 0 2px; } /* Space out steps: */ #basket .steps a:hover { text-decoration: none; } #basket .steps span { margin: 0 2px; } #basket .steps input { margin: 0 2px; background: none; border: none; cursor: pointer; color: #174986; } /* confusing breadcrumb button, make it a 'link' */ #basket .steps .current { border-bottom: 1px solid #404040; } /* The current step */ #basket .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: #fafafa; } #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 { font-weight: normal; } #basket #pd { background: #345aa1; color: white; text-align: left; padding-left: 20px; } /* product title */ #basket #qt { background: #345aa1; color: white; } /* quantity title */ #basket #pr { background: #345aa1; color: white; } /* price title */ #basket #ac { background: #345aa1; color: white; } /* additional costs title */ #basket #lst { background: #345aa1; color: white; } /* subtotal title */ #basket #rm { background: #345aa1; 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 { text-align: center; } /* quantity */ #basket td.pr { text-align: center; } /* price cell */ #basket td.ac { } /* additional costs cell */ #basket td.lst { text-align: center; } /* subtotal cells */ #basket td.rm { text-align: center; } /* 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: #345aa1; border: 1px solid #666; color: white; cursor: pointer; } #basket table.nc input.submit:hover { background: #6495ed; } #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; 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 label { width: 150px; } #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; } #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 */ /* 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; } /* user-details */ 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; } /* my-addresses 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 { } /* my-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; } /* mye-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; } /* ENQUIRY FORM ----------------------------------------------------------------------------------------------*/ #enquiry { } #enquiry table { margin-top: 20px; width: 100%;} #enquiry table th { padding: 10px; } #enquiry table td { padding: 10px; } #enquiry table td.img { height: 40px; vertical-align:bottom;}