/* Sample Stylesheet 2 for QOP @author: $Author: rob $ @copyright: Versatilia Ltd 2008 @lastmodified: $Date: 2008-12-11 18:42:07 +0000 (Thu, 11 Dec 2008) $ ----------------------------------------------------------------------------------- This CSS file is split into 3 areas to enable web developers and designers of different abilities to make edits and alterations to the default design. Reset: This removes all default browser styling. The advantage is closer agreement between different browsers so there are fewer hacks to do Layout: This is where the main layout is put together. By this we mean the columns boxes, header and footer sections. The more fine-grained layouts of each individual section are handled separately in section 2. Boxes: Element and section styles can be handled here, for example .sidebar ul enables you to style all menus in a sidebar. Backgroud images are applied where appropriate to avoid duplication, also background images and padding, margins on boxes etc.. should be kept together as they are not necessarily mutually exclusive when it comes to creating certain effects You can search through the file using crtl+F and search for specific sections via the id eg. #top-search, #basket etc... or use the section flag eg. =box, =search, =top, =links, =nav Basics: Basic element styles. Notes: 1/ There are some extra CSS hooks available to you to make the template as customisable as possible. Firstly the tag has an id similar to the sites hostname eg. #www-example-quickorder-uk-com, which is useful if you need to over-ride downstream styles (ids over-ride styles applied via classes and single elements. 2/ =nav - any section that is the default navigation, eg. page list and category list =links - any section that pulls its data from the links table. =basket - shopping and enquiry baskets =top - any section that appears at the top eg. inside the header =bottom - bottom section =box - any section that relates to the styling of the .box construct surrounding each section of the site. =sidebar - anything that appears in the 3/ Take a look at the information regarding the .body class in the bottom section of the file. */ /* Reset */ body { background: #fff url(../images/body-bg.gif) repeat-x; font-family: arial, helvetica, sans-serif; color: #666666; } * { margin: 0px; padding: 0px; } img { border: 0px; } img.full-width { margin: 15px 0px; } a { text-decoration: none; color: #333; } ol, ul { list-style: none outside; } /* remove bullets by default, only desirable under the .body-text class */ caption { margin-top: 15px; font-size: 15px; text-align: left; color: #00356a; } table.nc { border-collapse: collapse; border-spacing: 0;} /* collapse space between table cells by default. 'nc' is a special class for tables written out by the template and not by the wysiwyg editor */ fieldset, img { border: 0; } q:before, q:after { content: ''; } /* bring good browsers in line with IE <= 6 (!?) */ button { width: auto; overflow: visible; } a.remove { color: #00356a; } a.remove:hover { color: #578ebb; } .price-box { display: none; } /* Layout ------------------------------------------------------------------------------------*/ #wrapper { /* this wraps everything inside the tag */ width: 974px; margin: 0px auto; } #header { background: url(../images/masthead-bg.gif) no-repeat; position: relative; } #header h1 { width: 230px; height: 82px; float: left; font-size: 0px; margin: 21px 0px 10px 0px; } #header h1 a { display: block; width: 230px; height: 82px; background: url(../images/shirtworks-logo.png) no-repeat; margin: 0px 0px 0px 91px; } #cta-contact { float: right; margin-right: 103px; padding-top: 42px; } #cta-contact h3 { font-size: 19px; color: #21578A; } #cta-badge { position: absolute; top: 0px; right: -21px; } .logged-in-as { float: right; font-size: 19px; color: #21578A; position: absolute; right: 103px; top: 45px; } .logged-in-as a { color: #578ebb; } .logged-in-as a:hover { color: #00356a; } #tab-links { clear: both; background: url(../images/nav-bg.gif) no-repeat; width: 708px; height: 36px; padding: 13px 10px 0px 10px; } #tab-links li { display: inline; color: #fff; font-weight: bold; font-size: 13px; padding: 11px 5px; } #tab-links li.tab-link-products-active { background: url(../images/nav-active-bg.png) repeat-x; } #tab-links a { color: #fff; font-weight: bold; text-decoration: none; } #tab-links a:hover { color: #D1EEEE; text-decoration: none; } #tab-links li.tab-link-products-active a { color: #D1EEEE; text-decoration: none; } #top-search { float: right; background: url(../images/search-box-bg.gif) no-repeat; width: 236px; height: 43px; margin-top: -49px; } #top-search a { display: none; } #top-search span { display: none; } input#keywords { background: url(../images/keyword-search-bg.gif) no-repeat; border: 0px; width: 162px; height: 14px; padding: 3px 10px; margin: 10px 3px 10px 10px; color: #A7A7A7; font-size: 11px; } #top-search input.submit { margin-left: -3px; } #inner-wrapper { /* this wraps the main content blocks, useful with float clearing methods for background images etc */ clear: both; overflow: hidden; padding: 0; margin-top: 3px; position: relative; height: 100%; } #primary { float: left; width: 96%; margin: 0; padding: 0; min-height: 1000px;} #primary-top { width: 481px; height: 14px; background: url(../images/primary-top-bg.png) no-repeat; margin: 0px 206px 0px 246px; } #primary .content { margin: 0px 208px 0px 246px; min-height: 600px; padding: 0px 0px 21px 0px; overflow: visible; background: #fff; height: 100%; } #primary .inner-content { padding: 1px 16px 3000px; margin: -1px 0 -3000px; width: 445px; } #secondary { float: left; width: 235px; margin: 0 0 -16px -197px;} #secondary .content {padding: 0px 0px 60px 0px;} #login { background: url(../images/secondary-bg.png) top no-repeat; width: 236px; overflow: visible; } #login-bottom { background: url(../images/secondary-bottom-bg.png) top no-repeat; width: 236px; height: 7px; overflow: visible; margin-bottom: 8px; } #login .inner-box { padding: 14px 20px; } #login h4 { color: #fff; font-size: 11px; font-weight: normal; padding: 5px 0px; margin: 0px 0px 10px 0px; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; } #login h4 span.pid { display: none; } fieldset.submit { margin: 10px 0px; } #login input.submit { display: block; margin: 15px 0px 15px 0px; } fieldset.submit input, fieldset.submit a {} #secondary h3 { color: #fff; } #secondary .inner-box li { color: #fff; } .inner-box select { width: 130px; class1 } .inner-box select.class1 { width: 130px; margin-bottom: 20px; } table#print-colours-table { display: none; } .sidebar #login span.info-link { display: none; } .sidebar #login input#save-quote { display: none; } .sidebar #login #submits { margin-top: 40px; clear: both; float: none; } .mini-basket { } .sidebar .mini-basket li { list-style: none; margin-left: 0; color: #000; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; } .mini-basket .checkout-link { display: block; text-align: center; } .mini-basket .inner-box { background: url(../images/enquiry-bg.png) top no-repeat; padding: 13px 18px 14px 18px; height: auto; width: 200px; height: 125px; } /*#mini-basket-top { width: 236px; height: 17px; background: url(../images/enquiry-top-bg.png) no-repeat; } #mini-basket-bottom { width: 236px; height: 21px; background: url(../images/enquiry-bottom-bg.png) no-repeat; }*/ #tertiary { float: left; width: 236px; margin: 0 0 -16px -100%; background: url(../images/tertiary-top-bg.png) top no-repeat; } #tertiary .content { margin-top: 14px; padding: 0px 20px 20px 20px; background: #fff;} #tertiary-bottom { background: url(../images/tertiary-bottom-bg.png) no-repeat; width: 236px; height: 14px; } .sidebar ul, .mini-nav { } .sidebar li, .mini-nav li{ list-style: none; border-bottom: 1px dotted #666666; padding: 5px 0px; } .sidebar li.parent { } .sidebar li.parent li a { } .sidebar li.location { border: 0px; font-weight: bold; } .sidebar li li{ font-size: 13px; color: #00356a; padding: 3px 0px 3px 10px; } .sidebar a, .mini-nav li a { font-size: 13px; color: #00356a; text-decoration: none; } .sidebar a:hover, .mini-nav li a:hover { color: #578ebb; text-decoration: none; } .sidebar li a { font-size: 13px; font-weight: bold; color: #00356a; } .sidebar li ul li a { font-size: 11px; font-weight: normal; color: #00356a; } .sidebar li ul li.location{ border-bottom: 1px dotted #666666; } .sidebar li ul li.location a { font-size: 11px; font-weight: bold; color: #578ebb; } #footer { background: url(../images/footer-bg.png) no-repeat; width: 934px; height: 58px; padding: 10px 20px 0px 20px; } #footer .content { } .content {} .inner-content { font-size: 11px; } /* Product list */ .product-list h3 a { color: #666; } .product-list h3 a:hover { color: #333; } #product-list .colour-swatches h4 { display: none; } .product-list li.odd { background: #fff; border-top: 0px; } .product-list li.even { background: #fff; } #secondary .inner-box h3 a { color: #fff; } #secondary .inner-box h3 a:hover { color: #ccc; } /* Homepage boxes */ .homepage-button-pink { float: left; width: 170px; height: 52px; background: url(../images/homepage-button-pink.gif) no-repeat; margin: 15px 20px 15px 0px; padding: 14px 20px; cursor: pointer; } .homepage-button-blue { float: left; width: 170px; height: 52px; background: url(../images/homepage-button-blue.gif) no-repeat; padding: 14px 20px; margin: 15px 0px 15px 0px; cursor: pointer; } .homepage-button-blue h3, .homepage-button-pink h3 { color: #fff; padding: 0px; margin: 0px; font-size: 19px; } .homepage-button-blue h3 a, .homepage-button-pink h3 a { color: #fff; font-size: 19px; text-decoration: none; } .homepage-button-blue p, .homepage-button-pink p { color: #fff; font-size: 9px; line-height: 100%; padding: 5px 0px 0px 0px; margin: 0px; } .homepage-button-blue p a, .homepage-button-pink p a { color: #fff; font-size: 9px; text-decoration: none; } h3.home { color: #666; font-weight: normal; } /* Boxes - specific section styling ------------------------------------------------------------------------------------*/ /* =box */ .box { } #sub-pages, #footer .content { } #top-search { float: right; } .box .tl, .box .tr, .box .bl, .box .br { } #footer .ctl, #footer .ctr, #footer .cbl, #footer .cbr, #sub-pages .tl, #sub-pages .tr, #sub-pages .bl, #sub-pages .br { } #top-search .tl, #top-search .tr, #top-search .bl, #top-search .br { } #sub-pages .tl, #sub-pages .tr, #sub-pages .bl, #sub-pages .br, #footer .ctl, #footer .ctr, #footer .cbl, #footer .cbr, #top-search .tl, #top-search .tr, #top-search .bl, #top-search .br { } .box, #sub-pages { } .tl, #sub-pages .tl, #footer .ctl, .ltl { } .tr, #sub-pages .tr, #footer .ctr, .ltr { } .bl, #sub-pages .bl, #footer .cbl, .lbl {} .br, #sub-pages .br, #footer .cbr, .lbr {} .inner-box, #footer .inner-content { } #footer .content { overflow: visible; } #top-search .inner-box { } #top-search form { } #sub-pages .inner-box { } #footer .inner-content { } #footer .inner-content .box, #sub-pages ul { } /* stop p covering the list */ /* =links =box */ .ltl, .ltr, .lbl, .lbr { } /* =links =sidebar =box */ .sidebar .link-box { } .ltl { } .lbl { } /* =primary =box */ .primary .box, .primary .inner-box { } .primary .tl, .primary .tr, .primary .bl, .primary .br { } .primary .box { } #footer .box, #footer .inner-box, #footer .box .tr, #footer .box .tl, #footer .box .bl, #footer .box .br { } /* =table (tables that ARE NOT user submitted content via FCKin editor */ .nc { border: 1px solid #aaa; border-width: 0px 0; width: 99.8%; margin: 0.81em 0; font-size: small; } .nc td, .nc th { font-size: small; padding: 2px 3px; margin: 0; line-height: 1.205em; vertical-align: middle; } .nc th { font-weight: bold; text-align: left; } .nc thead th { color: #393a3d; font-size: 1.1em; font-weight: bold; border-bottom: 1px dotted #aaa; } .nc tfoot th, .nc tfoot td { border-top: 1px solid #aaa; font-size: 1.1em; font-weight: bold; line-height: 1.62em; } .nc tfoot td { border-top-style: dotted; } .nc tbody td { padding: 8px 3px; } .nc .tac { text-align: center; } .nc .tar { text-align: right; padding-right: 6px; } .nc .tal { text-align: left; } .nc .odd { background: #eee; } .nc .even { background: #f2f2f2; } /* =basket =steps */ .steps { padding: 0.81em 0; text-align: center; } .steps * { display: inline; margin: 0 8px; background: none; border: 0; padding: 0; } .steps input, .steps span, .steps a:link, .steps a:visited, .steps a:hover, .steps a:active { color: #393a3d; text-decoration: none; border-bottom: 1px solid #343833; } .steps a, .steps span { padding: 1px 3px; } .steps input { cursor: pointer; } .steps input:hover, .steps a:hover { border-color: #999; text-decoration: none;} .steps .current { border: 1px solid #999; background: #eee; padding: 3px; } /* =basket */ #primary .basket fieldset { } .basket .nc { } .basket #pd { } .basket #rm { } .basket td[headers="pd"] { } .basket input.submit { } #primary .basket fieldset.submit { } .basket fieldset.submit a, .basket fieldset.submit input {} .basket table[class="nc"] img { } .basket table img { } .tac input { } .quantity { } #tt { } .tot { } /* =nav =back */ .back, fieldset.submit { } .back a { color: #578ebb; } .back a:hover { color: #00356A; } /* =news */ #news { } #news * { } #news .inner-box { } #news li { } #news h3 a { } #news img { } /* =links =top */ #top-links { } #top-links * { } #top-links .tr { } #top-links li { } #top-links a {} /* leave room for background image */ /* =nav =breadcrumbs */ #primary #breadcrumbs { font-size: x-small; background: none; margin-top: 0; color: #666;} #primary #breadcrumbs a { font-size: x-small; background: none; margin-top: 0; color: #666;} /* =nav =subcats */ #sub-categories { margin: 5px 0px; } /* these may have an associated image */ #sub-categories li { display: block; width: 121px; height: 127px; float: left; background: url(../images/sub-category-index-bg.gif) no-repeat; margin: 0px 14px 14px 0px; padding: 5px 5px 8px 5px; text-align: center; } #sub-categories li img { border: 1px solid #ccc; overflow: hidden; display: block; margin-bottom: 5px; } #sub-categories li a { display: block; overflow: hidden; width: 121px; height: 120px; color: #666; font-size: 11px; } /*#sub-categories li a span { color: #666; font-size: 11px; }*/ #sub-categories li a:hover { color: #333; } /* =product-list */ .product-list { width: 100%; } .product-list ol { list-style: none outside; border-top: 1px dotted #ccc; clear: both; } .product-list ol li { position: relative; border-bottom: 1px dotted #ccc; padding: 0px 0px 16px 150px; font-size:small; min-height: 109px; background: #cac9d6; height: 140px;} .product-list ol li a { position: absolute; top: 16px; left: 0px; display: block; width: 121px; height: 127px; background: url(../images/sub-category-index-bg.gif) no-repeat; margin: 0px; padding: 5px 5px 5px 5px; text-align: center; } .product-list ol h3 { margin: 0px 0px 15px 0px; padding: 0px; position: relative; } .product-list ol h3 span a{ margin: 0px; padding: 0px; } .product-list ol h3 a { font-weight: bold; position: relative; text-align: left; background: none; width: 240px; height: auto; padding: 0px; margin: 0px; } .product-list ol .pid { font-weight: normal; color: #aaa; font-size: 11px; position: absolute; right: 5px; } .product-list ol li img { border: 1px solid #ccc; position: relative; margin: 0px; padding: 0px;} .product-list ol .options { overflow: hidden; padding-top: 0.81em; } .product-list ol .options input { display: none; } .product-list ol .small { margin: 0; padding: 0; } .product-list ol .item-info { clear: both; border: 1px dotted #aaa; margin: 0; } .product-list ol .item-info th { width: 20%; } .product-list ol .item-info th, .product-list ol .item-info td { padding: 0.1em; } .product-list ol li { cursor: pointer; } /* =product =detail */ #product .image { float: left; display: block; background: url(../images/product-detail-image-bg.png) no-repeat; width: 185px; height: 251px; clear: left; margin: 3px 10px 0px 0px; padding: 8px; position: relative; } #product .lightbox-enabled { position: absolute; } #product img { border: 1px solid #cccccc; } #product img { border: 1px solid #cccccc; } #product .item-info { width: auto; margin: 0.81em 0; } #product .item-info th { border-bottom: 1px solid #c8dbbf; padding: 3px 6px 3px 0; color: #666; } #product .item-info td { border-bottom: 1px dotted #c8dbbf; padding: 3px 0 3px 6px; color: #666;} #product .small { display: block; clear: both; text-align: right; margin: 0.81em 0; color: #666;}*/ #product .small fieldset { display: block; } #product .small .submit { margin-right: 16px; }*/ .product-variations { text-align: left; } #product .body { margin-top: 16px; } #product .basket { background: url(../images/secondary-bg.png) top no-repeat; width: 236px; overflow: visible; position: absolute; right: 0px; top: 159px; text-align: left; } #product .basket table { display: none; } #product .basket h3 { color: #fff; font-size: 15px; padding-left: 20px; padding-top: 14px; } #product .basket h4 { color: #fff; font-size: 11px; font-weight: normal; padding: 5px 0px; margin: 0px 20px 10px 20px; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; } #product .basket h4 span.pid { display: none; } #product .basket fieldset { } #product .basket input.submit { display: block; margin: 15px 0px 15px 0px; } /* Add to basket button */ #product .basket input.quantity { margin-bottom: 10px; } /* Qty field on quick request */ #product .basket select { } #product .basket table { } #product .basket label {} #product .basket label span { margin-left: 20px; } #product .basket span.desc { color:#FFFFFF; display:block; float:left; width:50px; } #product .basket .basket-bottom { background: url(../images/secondary-bottom-bg.gif) top no-repeat; width: 236px; height: 7px; overflow: visible; } #product .basket span.info-link { display: none; } #product .basket .filter { margin: 15px 20px 0px 20px; padding: 10px 0px; border-top: 1px dotted #fff; } #product .basket .filter span.desc { margin-left: 0px; } #product .basket #submits { margin: 20px; clear: both; float: none; } .global-body { clear: both; padding-top: 25px; } /* =nav =subpages */ #sub-pages { } #sub-pages ul { } #sub-pages li { } #sub-pages li li { } #sub-pages a { } /* =sidebar =nav */ /* =links */ .links { } .links .tl, .links .bl, .links .tr, .links .br { } .links .inner-box { } .links ul { } .links li { } .links img { } .links a.link { } .links .description { } /* =links =bestsellers */ #primary .links {} #primary .links li { } /* 3 column list */ #primary .links li.a { } #primary .links li.c { } #primary .links img { } #primary .links .image { } /* =nav =site-map */ #site-map { } #site-map * { } #site-map ul ul { } #site-map li {} #site-map a { } #site-map li li { } #site-map li li a { } /* =meta */ #footer #meta { } #meta p { } /* =links =bottom */ #footer #bottom-links { } #footer #bottom-links li { } #footer #bottom-links a { } /* =nav =back-to-top */ #back-to-top { position: absolute; height: 12px; width: 32px; top: -14px; left: 50%; margin-left: -16px; font-size: x-small; text-align: center; z-index: 10; } #back-to-top a { display: block; background: url(/templates/blank/lib/back-to-top.png) no-repeat center; height: 12px; width: 32px; overflow: hidden; text-indent: -9999px; } /* =location - this class is applied to the containing

around any link that matches the current location */ .location a, .location .location a { font-weight: bold; } .location ul a { font-weight: normal; } /* =basket =mini */ .mini-basket {} .mini-basket li { list-style: none; margin-left: 0; color: #000; } .mini-basket .checkout-link { display: block; text-align: center; color: #fff;} .mini-basket h3 a {color: #fff; font-size: 15px; text-decoration: none;} .mini-basket a {color: #fff; font-size: 13px; text-decoration: underline;} .mini-basket p a:hover {color: #B0EA96;} /* =sidebar =news */ #latest-news { font-size: small; } /* news box on home page, contains a list of the most recent 6 articles */ #latest-news h4 a { line-height: 1.21em; font-weight: bold; font-variant: small-caps; margin-bottom: 0.4em; } #latest-news ol { margin: 0; padding: 0; } #latest-news li { margin: 0.81em 0 0.6em; padding: 0 0 0.6em; border-bottom: 1px dotted #393a3d; overflow: hidden; } #latest-news p { color: #000; line-height: 1.4em; margin: 0.2em 0; color: #000; } #latest-news img { margin: 0 6px 0 0; } /* =form */ form { font-size: small; } .primary fieldset { border-top: 1px solid #808280; padding: 0.81em 0 2.44em; } .primary legend { font-weight: bold; font-size: normal; padding: 0.4em 0.4em 0.4em 0; color: #36f; } .primary form h3 { font-weight: bold; font-size: normal; padding: 0.4em 0.3em; } .primary fieldset p.needhelp { padding: 0px 20px 15px 20px; font-size: 13px; color: #fff;} .primary fieldset p.needhelp strong { font-size: 15px;} .primary fieldset p.needhelp a { color: #fff; font-weight: bold; font-size: 15px;} .primary fieldset p.needhelp a:hover { text-decoration: underline; color: #eee;} .primary fieldset ol { margin: 0 0 2em; border-top: 1px dotted #ccc; } .primary fieldset li { overflow: hidden; padding: 0.4em; position: relative; border-bottom: 1px dotted #ccc; list-style: none;} .primary form li label { float: left; width: 10em; padding: 0.2em 0 0; line-height: 1.2em; } .primary form li label.file-browse { clear: left; float: left; width: 10em; padding: 0.2em 0 0; line-height: 1.2em; margin-top: 10px;} .primary fieldset p { margin: 0.4em; } .primary form li em, .req { color: #c00; } .primary form li em { position: absolute; left: 10.2em; top: 1em; } .primary .extras em { display: none; } body.quote-basket .msg a { display: none; } .primary form li input, .primary form li select, .primary form li textarea {width: 236px;} .primary form li textarea { line-height: 1.4em; padding: 0.2em 2px;} #wrapper .currency input { width: 6em; margin-right: 4px; vertical-align: middle; padding-top: 2px; } /* use #id overrides */ #wrapper .currency select { margin-left: 0; vertical-align: middle; } form .text input, form .Text input, form .number input, form .Number input, form .URL input, form .Postcode input, form .Email input, form .email input, form .readonly input, form .password input, form .select input { padding-top: 2px; padding-left: 2px; padding-right: 2px; line-height: normal; } form .readonly input { background: #fff; border: 1px solid #fff; color: #393a3d; } form li.checkbox input, form li.Checkbox input { margin: 0.35em 0 0.35em 1em; } /* capital letters because of the datamate form write out */ form li.nolabel select { margin-left: 0; width: 70%; } .amount input, input.qty { width: auto; } form li.TextBox label { margin-bottom: 5px; } input[type="file"]{ margin-top: 10px; float: left; } li.checkbox input { vertical-align: middle; } option { padding: 0em 0.2em 0em 0.4em; } li.file { padding: 1.2em 0; margin: 0; border: 0; } li.file { padding: 0; margin-bottom: 0.6em; } li.file label { display: block; width: 100%; padding: 0.2em 0; } li.file span.desc { } .sidebar form .text input, .sidebar form .password input, .sidebar form .email input { padding-left: 0; padding-right: 0; } #wrapper .small {} #wrapper .small, #wrapper .small fieldset { padding: 0; margin: 0; border: 0; } fieldset.submit {} fieldset.submit input{ color: #00356a; } fieldset.submit a { color: #578ebb; } fieldset.submit a:hover { color: #00356a; } /* =addresses */ #addresses .address-list { border-top: 1px dotted #ccc; } #addresses .address-list li { overflow: hidden; padding: 0.4em 0; border-bottom: 1px dotted #ccc; } #addresses .address-list .options { float: right; clear: right; width: 30%; padding: 4px; border-left: 1px solid #eee; margin: 0; height: 3.6em; } #addresses .address-list .options fieldset { border: 0; padding: 0 0 6px 4px; margin: 0 0 4px; border-bottom: 1px dotted #ccc; } #addresses .address-list .options label { padding: 0; display: inline; float: none; margin-right: 8px; } #addresses .address-list .options input { margin: 0; vertical-align: top; } #addresses .address-list .options a { margin: 0 8px 0 4px; } #addresses .address-list .adr { font-size: small; line-height: 1.21em; text-align: left; float: left; width: 60%; padding: 0.4em 16px 0.4em 16px; } /* =orders */ #my-orders fieldset { border: 0; text-align: center; } #my-orders label { margin: 0 2px; } /* =logos */ #logos { text-align: center;background: none; } #logos div { background: none; } /* =users */ #my-users form h3 { padding-left: 0; padding-right: 0; } #my-users form input.submit { padding: 0; width: auto; } /* =sidebar =form */ .sidebar fieldset ol { margin: 0.4em 0; padding: 0; } .sidebar fieldset li { margin: 0; padding: 0.2em 0; border: 0px;} .sidebar li.text input { width: 98%; margin-top: 4px; } .sidebar li label { color: #fff; } .sidebar #login .mini-nav { margin-bottom: 16px; } .sidebar #login .mini-nav li { border: 0px; } .sidebar #login .mini-nav li a { text-decoration: underline; border: 0px; } abbr { text-decoration: none; border: 0px; } .sidebar #login .mini-nav li a:hover { color: #fff; } /* =sidebar =login */ .sidebar #login #pwd { margin-bottom: 0.3em; } .sidebar #login .checkbox input { margin-left: 0; margin-top: 0.18em; } .sidebar #login span { color: #fff; font-size: 13px; padding-right: 5px; float: left; display: block; width: 50px; } .sidebar #login input { width: 130px; margin-bottom: 10px; } .sidebar #login input.submit { margin-top: 10px; } /* =msg */ .msg { border: 1px solid #ccc; background-color: ivory; padding: 0.4em 0.4em 0.4em 26px; margin: 0.4em 0; line-height: 1.2em; font-size: small; color: #666; } .msg a { color: #578ebb; } .msg a:hover { color: #00356a; } .primary p.msg { margin: 0.4em 0; } .msg h3 { margin: 0 0 0.2em 0; } .msg p { margin: 0.2em 0 0; } .info { background: ivory url(/templates/blank/lib/info.png) no-repeat 6px 0.44em; } .error { background: ivory url(/templates/blank/lib/error.png) no-repeat 6px 0.44em; } .success { background: ivory url(/templates/blank/lib/success.png) no-repeat 6px 0.44em; } /* Basic element styles (low level stuff) ---------------------------------------------------------------------------------------*/ h1 { font-size: 19px; font-weight: normal; color: #00356a; margin-top: 10px; } h2 { font-size: 19px; font-weight: normal; color: #00356a; margin-top: 10px;} h3 { font-size: 15px; color: #578ebb; margin: 0 0 0.4em; } h4 { font-size: small; font-weight: bold; } /* may want some alternate styling in sidebars or on .tertiary, .secondary, #basket etc... */ .sidebar h3 { margin: 0; padding: 0 0 0.4em; } .date { margin-bottom: 0.2em; font-size: x-small; color: #aaa; font-style: italic; } .pid { font-weight: normal; color: #aaa; font-size: small;} /* product id span */ .price { color: #578ebb; font-weight: bold; } /* price display (not always a span) */ .sidebar .price { color: #ccc; } .pagination { font-size: small; float: left; width: 100%; padding: 0.4em 0; vertical-align: bottom; } .pagination .per-page { float: left; line-height: normal; } .pagination .next { float: right; padding-left: 8px; } .pagination .prev { float: right; } .pagination a{ color: #00356a; } .pagination a:hover { color: #578ebb; } dl { overflow: hidden; font-size: small; border-bottom: 1px dotted #ddd; margin: 1.62em 0; } dl dt { float: left; width: 10em; padding: 0.4em 0; border-top: 1px dotted #ddd; clear: left; line-height: 1.2em; } dl dd { margin-left: 10em; padding: 0.4em; border-top: 1px dotted #ddd; line-height: 1.2em; } .adr { font-size: small; line-height: 0.8em; } /* .body encompasses the output from FCK Editor, try to avoid styling the colors etc as it's meant to be WYSIWYG and customers complain otherwise. They'll complain anyway coz they put tables in and it can break the layout but there's only so much you can do. Refer everyone to the documentation for guidelines on using FCK Editor to the best effect. */ .body { font-size: small; line-height: 1.41em; } /* container for FCK Editor output */ p, .body ol, .body ul, .primary ul, .body blockquote, .body dl, .body table { margin: 0.81em 0; } .body ol { list-style: decimal outside; margin-left: 32px; } .body ul { list-style: disc outside; margin-left: 32px; } .body li { line-height: 1.62em; } li { vertical-align: middle; } /* aligns bullet points in IE */ .body img { border: 1px solid #ccc; background: #fff; } /*img.fl-l { float: left; clear: left; margin: 0 16px 0.81em 0; border: 1px solid #393a3d; padding: 4px; background: #000; } img.fl-r { float: right; clear: right; margin: 0 0 0.81em 16px; border: 1px solid #393a3d; padding: 4px; background: #000; }*/ img.news-image { float: right; clear: right; margin: 0.4em 0 0.81em 16px; border: 1px solid #393a3d; padding: 4px; background: #000; } .body blockquote { margin: 0.81em 80px 0.81em 20px; border: 1px solid #ccc; border-width: 1px 0; background: #393a3d; padding: 0.81em 16px; } small { font-size: small; } big { font-size: normal; font-weight: bold; } strong { font-weight: bold; } em { font-style: italic; } .inner-content #product #decorations { padding: 10px 20px; } .inner-content #product #decorations button { margin-top: 10px; } .inner-content #product #decorations .dec-box { border: 0px; } .inner-content #product #decorations .dec-box h5 { background: none; font-weight: normal; color: #fff; margin-bottom: 10px; padding: 0px; } .inner-content #product #decorations .dec-box h5 select { margin-top: 3px; } .inner-content #product #decorations .dec-box .dec-controls { background: none; color: #fff; border-top: 1px dotted #BCE6FA; border-bottom: 1px dotted #fff; padding: 10px; } .inner-content #product #decorations .dec-box .dec-controls a { color: #fff; text-decoration: underline; } .inner-content #product #decorations fieldset { background: none; border-top: 1px dotted #BCE6FA; border-bottom: 0px; padding:0 0 0 0; } #product #decorations, #product #global-additional-costs { color: #fff; } .inner-content #product #decorations fieldset ul { background: none; border: 0px; } .inner-content #product #decorations fieldset li { background: none; border: 0px; } #product #decorations li.selected li { display: block; float: left; width: 30px; margin-right: 5px; margin-bottom: 5px; } .inner-content #product #decorations fieldset li label, .inner-content #product #decorations fieldset li.selected label, .inner-content #product #decorations fieldset li label:hover, .inner-content #product #decorations fieldset li.selected li.selected label, .inner-content #product #decorations fieldset li.selected li.selected label:hover { background: none; border: 0px; color: #fff; font-weight: bold; } .inner-content #product #decorations li.selected label, .inner-content #product #decorations li.selected label:hover, .inner-content #product #decorations li.selected li.selected label, .inner-content #product #decorations li.selected li.selected label:hover { background: none; color:#e2e2e2; text-decoration:none; } .inner-content #product #decorations li.selected, .inner-content #product #decorations li.selected li.selected { background: none; } .inner-content #product #decorations fieldset input { background: none; border: 0px; } .inner-content #product #decorations .dec-box h5 { font-weight: bold; } .inner-content #product #decorations fieldset.dec-opts legend { color: #fff; display: none; } .inner-content #product #decorations fieldset.colours legend { color: #fff; display: block; } #product #product .small .dec-summary { color:#fff; } .inner-content #product #decorations legend { color: #fff; } .inner-content #product #decorations fieldset.colours { background: none; border: 0px; padding:0 0 0 0; } .colour-swatches { margin-top: 5px; } .colour-swatches h4 { margin-bottom: 7px; } .colour-swatches span.swatch { display: block; float: left; width: 16px; height: 16px; margin-right: 3px; margin-bottom: 3px; position: relative; } .swatch-overlay { background: url(../images/swatch-overlay.png) no-repeat; width: 16px; height: 16px; position: absolute; top: 0px; left: 0px; z-index: 100; }