/* Sample FreeStyle Stylesheet for QOP @author: $Author: robert o'rourke $ @copyright: Versatilia Ltd 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 { color: #393a3d; } html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,table,td,th,tr,form,fieldset { /* normalise margin, padding, typography */ margin: 0; padding: 0; font-family: Ariel, sans-serif; font-size: 100%; line-height: inherit; vertical-align: baseline; } input,textarea,select,option { /* normalise typography, you don't really need this but some browsers have naff defaults */ font-family: Ariel, sans-serif; font-size: 100%; } ol, ul { list-style: none outside; } /* remove bullets by default, only desirable under the .body-text class */ 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; } /* Layout - Standard 3 column layout. You can start this from scratch if you prefer ------------------------------------------------------------------------------------*/ html, body { text-align: center; height: 100%; } #wrapper { /* this wraps everything inside the tag */ text-align: left; width: 960px; margin: 0 auto; min-height: 100%; padding-bottom: 10px; overflow: hidden; background: #fff; } #header { position: relative; } #header h1 { margin: 2px 12px; float: left; } #header { background-image:url(Image/Header.gif); background-repeat:no-repeat; } #inner-wrapper { /* this wraps the main content blocks, useful with float clearing methods for background images etc */ overflow: hidden; padding: 0; position: relative; } #primary { float: left; width: 100%; margin: 0; padding: 0; } #primary .content { margin: 0 180px; min-height: 600px; padding: 0; overflow: visible; } #primary .inner-content { padding: 1px 0 3000px; margin: -1px 0 -3000px; } #secondary { float: left; width: 180px; margin: 0 0 -10px -180px; } #tertiary { float: left; width: 180px; margin: 0 0 -10px -100%; } #footer { margin: 10px 0 0; clear: both; font-size: small; position: relative; } #footer .content { margin: 0 10px; padding: 3px;} /* Added padding: 3px; - DT */ .content { overflow: hidden; } .inner-content { /* a generic helper wrapper inside each main content block, best used in the context of its parent eg. #primary .content {} */ margin: 0 10px; /* using margin means we can apply 100% width to boxes inside without layout breaking */ } #a-z-list {margin-top: 20px; background-image: url(Image/foot_tab.gif); background-repeat:no-repeat; height:25px; margin-left: 50px;} /* Added to give Quick Find links distance from left nav links - DT */ /* shifting the tertiary links over to the right hand side */ #inner-wrapper { position: relative; } #secondary { padding-top: 0em; } /* Changed padding:top to 0 to move right navs to top - DT */ #tertiary-links { float: left; width: 160px; margin: 0px; } /* Boxes - specific section styling ------------------------------------------------------------------------------------*/ /* =box */ /*.sidebar .box { /* set basic styles for all .box sections in the sidebars (#secondary and #tertiary) background: #f5f5f5; }*/ /* Commented this out as we dont need this background in the sidebar - DT */ #sub-pages, #footer .content { background: #FFFFFF; } /* Changed background colour - DT */ #top-search { background: #cecdda; } /*.box .tl {background-image: url(Image/tab_left_mblue.gif); color:#FFFFFF; font-size:0.9em; margin:0; padding:5px 0 5px 0;} .box .tr {background-image: url(Image/main_bg_mblue_bot.gif); color:#FFFFFF; font-size:0.9em; margin:0; padding:3px 0 4px 5px;} .box .bl {background-image: url(Image/testbot.jpg); color:#FFFFFF; font-size:0.9em; margin:0; padding:3px 0 4px 5px;}*/ /* =table (tables that ARE NOT user submitted content via FCKin editor */ .nc { border: 1px solid #aaa; border-width: 0; width: 99.8%; margin: 0.81em 0; font-size: small; clear: both; } .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: #ccc; } .nc .even { background: #eee; } /* =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; } .steps .current { border: 1px solid #999; background: #eee; padding: 3px; } /* =basket */ #primary .basket fieldset { margin-top: 5px; padding: 0; position: relative; } .basket .nc { margin: 0.6em 0; } .basket #pd { width: 50%; } .basket #rm { width: 12%; } .basket td.pd p { margin: 2px 0; } #primary .basket td.img { width: 54px; padding: 3px; } .basket input.submit { margin: 0; } #primary .basket fieldset.submit { padding: 5px 0; } .basket fieldset.submit a, .basket fieldset.submit input { margin: 0 8px; } .basket table img { border: 1px solid #aaa; margin: 0; padding: 2px; background: #fff; } .tac input { text-align: center; } .quantity { width: 2.8em; text-align: center; } #tt { color: #000; } .tot { color: #36f; border-bottom: 1px solid #000; } /* =nav =back */ .back, fieldset.submit { clear: both; border-top: 1px solid #ccc; line-height: 1.62em; padding: 0.81em 0; font-size: small; text-align: center; margin-bottom: 1.82em; background: url(Image/prices_text.gif) no-repeat bottom; height: 40px; } /* =news */ #news { background: none; font-size: small; } #news .inner-box { padding: 0; } #news li { padding: 0.81em 0; overflow: hidden; } #news h3 a { padding: 0 0 0.2em; font-weight: bold; border-bottom: 1px solid #ccc; display: block; } #news img { float: left; margin: .81em 12px 0.2em 0; } /* =links =top */ #top-links { position: absolute; top: 0; right: 0; text-align: right; background: none; } #top-links * { background: none; margin: 0px 4px 0 0; font-size: 14px; font-weight: bold; color: #154398;} /* Added margin: 0px 2px 0 0; to move links from right of page + font-size: 14px; font-weight: bold; - DT */ #top-links .tr { padding: 0 0 25px; } #top-links li { display: inline; } #top-links a { } /* add left padding to make room for a background image ie. an icon */ /* =links =tabs */ #tab-links div { background: none; padding: 2px; margin-top: 9px; } #tab-links { background: none; clear: both; padding: 49px 0 0 0; margin: 0; font-size: 0.9em;} /* Added font-size and padding, changed bottom padding to move search box higher - DT */ #tab-links li { display: inline; line-height: 1.62em; background: url(Image/tab_right.gif) no-repeat bottom right; padding: 4px 8px 6px 0;} /* Added background image for tabs, padding and right margin for spacing - DT */ #tab-links a { padding: 4px 4px 6px 9px; white-space: nowrap; color: #fff; font-weight:normal; background: url(Image/tab_left.gif) no-repeat bottom left;} /* Changed padding to 6px to shorten distance between links, changed font colour and made bold - DT */ #tab-links .tab-link-eco-gifts {background: url(Image/eco-gifts.gif) no-repeat bottom right;} #tab-links .tab-link-eco-gifts a {background: url(Image/eco-gifts-tab-left.gif) no-repeat bottom left;} /* =nav =breadcrumbs */ #primary #breadcrumbs { font-size: x-small; background: none; margin-top: 0; } /* =nav =subcats */ #sub-categories { font-size: small;} /* these may have an associated image */ #sub-categories li {float:left; height:147px; margin-bottom:7px; margin-left:25px; width:115px; text-align: center;} #sub-categories a img { padding: 4px; background: #fff;} #sub-categories a span {margin-left:auto; margin-right:auto;} /* =nav =subpages */ #sub-pages { font-size: small; text-align: center; } #sub-pages ul { padding: 0; margin: 0; } #sub-pages li { display: inline; padding: 0; margin: 0 8px; line-height: 1.41em; } #sub-pages li li { display: none; } #sub-pages a { padding: 0.2em; white-space: nowrap; } /* =sidebar =nav */ .sidebar ul, #login ul { list-style: disc outside; width: 160px; } /* Added width and bacground image to sidebar - DT */ .sidebar li, #login ul li { font-size: small; clear: both; text-color: #154398; padding: 3px 0 3px 6px; border-bottom: 1px solid #c6d0e5; border-right: 1px solid #154398; border-left: 1px solid #154398; } /* Changed padding, added border to left links - DT */ .sidebar .box .bl {background-image: url(Image/main_bot_dblue.gif); color:#FFFFFF; font-size:0.9em; margin:0; padding:10px; background-repeat: no-repeat;} #page-nav .bl {display:none;} .mini-basket .box .bl {background-image:none;} #category-nav { display:none;} #category-nav .inner-box {background-image: url(Image/main_bg_dblue.gif); background-position: bottom; background-repeat: no-repeat;} .sidebar a, #login ul a { padding: 0; display: block; width: 100%; color: #154398;} /* Added text colour - DT */ /* =links */ .links .inner-box { margin: 0; padding: 0; background-image: url(Image/main_bg_dblue.gif); background-position: center bottom; background-repeat:no-repeat;} .links ul { list-style: none; margin: 0; padding: 0px 0; } .links li { margin: 0; padding: 3px 0 3px 6px; position: relative; } .links img { display: block; margin: 0; width: 100%; } #virtual-category-nav .inner-box { margin: 0; padding: 0; background-image: url(Image/main_bg_dblue.gif); background-position: center bottom; background-repeat:no-repeat;} .links a.link { /* use the .link class if just image and text. HTML box has .body styling */ /* aligned links to left - DT */ font-size: small; text-align: left; display: block; line-height: 1.2em; overflow: hidden; } .links .description { color: #153984; display: block; margin: 0; } #secondary-links .tr {background-image: url(Image/useful-links-header.gif); background-repeat: no-repeat; height: 22px;} /* =links =bestsellers */ #primary .links { text-align: center; } #primary .links li { float: left; width: 30%; } /* 3 column list */ #primary .links li.a { clear: both; display: block; cursor: pointer; margin-right: 5%; } #primary .links li.c { float: right; margin-right: 0; } #primary .links img { width: 100%; } #primary .links .image { display: block; width: 100%; height: 14em; overflow: hidden; } /* =nav =site-map */ #site-map ul ul { list-style: disc outside; } #site-map li { margin-left: 14px; font-weight: bold; clear: both; color: #7d7d7d; padding: 0.25em 0; } #site-map a { font-weight: bold; } #site-map li li { font-weight: normal; font-size: small; } #site-map li li a { padding: 0; font-weight: normal; width: 100%; line-height: 1.2em; } /* =gallery */ #user-gallery { width: 100%; } #user-gallery form { clear: both; } #user-gallery form label { display: block; padding: 0.2em 0; } #user-gallery form label span.desc { float: left; width: 10em; padding: 0.35em 0; line-height: 1.2em; } #user-gallery ul.galleries { overflow: hidden; list-style: none; margin: 0; padding: 16px 0; clear: both; } #user-gallery ul.galleries li { overflow: hidden; } #user-gallery ul.galleries .image { display: block; float: left; width: 30.8%; min-width: ; text-align: center; font-size: small; padding: 6px 0; margin: 0 1% 12px; border: 1px solid #ccc; } #user-gallery ul.galleries .image-link { display: block; height: 140px; max-width: 140px; width: 140px; margin: 0 auto 6px; } #user-gallery ul.galleries .image img { display: block; width: 95%; margin: auto; } #user-gallery .single-image { width: 100%; overflow: hidden; } #user-gallery .single-image img { width: auto; max-width: 100%; } #user-gallery .a { clear: left; } /* =meta */ #footer #meta { float: left; position: relative; z-index: 20; margin: 20px 0 0 365px;} #meta p { margin: 0; padding: 0; line-height: 1.2em; font-size: 11px;} #footer #back-to-top a {visibility: hidden;} #footer #back-to-top {background-image: url(Image/footer.jpg); background-repeat: no-repeat; height: 190px; width: 647px; margin: 0px 150px; clear: both;} /* =links =bottom */ #footer #bottom-links { text-align: justify; ; margin-left: 130px; overflow: visible; z-index: 20; font-size:10px; width: 75%;} #footer #bottom-links li { display: inline; border-right: #393a3d; } #footer #bottom-links a { line-height: 1.2em; padding-right: 5px;} /* text size and alignment for the product list page - DT */ .odd .body {width: 400px; font-size: 12px;} .even .body {width: 400px; font-size: 12px;} /*#tab-links .tab-link-eco-gifts {background:#000000;}*/ /* =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 { font-size: 0.9em; } .mini-basket li { list-style: none; margin-left: 0; color: #000; } .mini-basket .checkout-link { display: block; text-align: center; } #mini-enquiry-basket h3 a {color: #FFFFFF;} #mini-enquiry-basket p {margin: 0; border-right: 1px solid #154398; border-left: 1px solid #154398; font-size: 13px; padding-left: 25px; padding-top: 5px;} #mini-enquiry-basket .inner-box {background-image: url(Image/main_bg_dblue.gif); background-repeat: no-repeat; background-position: bottom;} /* Added class to position background image correctly - DT */ /* =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; margin-bottom: 0.4em; font-size: 12px; font-weight: normal;} #latest-news ol { margin: 0; padding: 0; background-image: url(Image/news_bg.gif); background-position: bottom; background-repeat: no-repeat;} #latest-news li { margin: 0; padding: 0 0 0 5px; 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: 0.9em; } /* Added font size - DT */ .primary fieldset { border-top: 1px solid #808280; padding: 0.81em 0 2.44em; } .primary legend { font-weight: bold; font-size: normal; padding: 0.4em; color: #153984; } .primary form h3 { font-weight: bold; font-size: normal; padding: 0.4em 0.3em; } .primary fieldset p { margin-top: 0; } .primary fieldset ol { margin: 0 0 5px; border-top: 1px dotted #ccc; } .primary fieldset li { overflow: hidden; padding: 0 0 5px 0; position: relative; border-bottom: 1px dotted #ccc; } .primary form li label { float: left; width: 8em; padding: 0.2em 0 0; line-height: 1.2em; } .primary fieldset li .file-title { float: left; width: 100px; padding: 0.2em 0 0; line-height: 1.2em; display: none; } .primary fieldset li .file-browse { float: left; width: 250px; padding: 0.2em 0 0; line-height: 1.2em; } .primary fieldset p { margin: 0.4em; } .primary form li em, .req { color: #c00; } .primary form li em { position: absolute; left: 10.1em; top: 0.5em; } .primary form li input, .primary form li select, .primary form li textarea { margin-left: 1em; vertical-align: bottom; } .primary form li textarea { width: 23em; 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.email-address, 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-left: 60px; float:left; width:20px; } /* capital letters because of the datamate form write out */ form li.nolabel select { margin-left: 0; width: 70%; } .amount input, input.qty { width: 2.4em; } #edit-address .em {position: absolute; left: 18.5em; top: 1em;} li.checkbox input { vertical-align: middle; } option { padding: 0em 0.2em 0em 0.4em; } li.file fieldset { padding: 0 0 0.6em 0; margin: 0; border: 0; } li.file fieldset legend { padding: 0; margin-bottom: 0.6em; } li.file fieldset img { float: left; margin-right: 10px; border: 1px solid #ccc; } li.file fieldset label { width: auto; display: block; overflow: hidden; padding: 0em 0; } li.file fieldset span.desc { float: left; width: 9em; padding: 0; line-height: 1.2em; } .sidebar form .text input, .sidebar form .password input, .sidebar form .email input { padding-left: 0; padding-right: 0; } #wrapper .small { vertical-align: middle; } #wrapper .small, #wrapper .small fieldset { display: inline; padding: 0; margin: 0; border: 0; } fieldset.submit { text-align: center; } fieldset.submit input, fieldset.submit a { vertical-align: middle; } #technologo-image fieldset { border: 0; margin: 0; padding: 0 0 10px; } .price-box {float:right; display: none;} /* =product */ #product .image { float: right; border: 1px solid #ccc; padding: 4px; background: #fff; width: 250px; height: 250px; position: relative; margin-left: 16px; } #product .image img { position: absolute; width: 250px; height: 250px; top: 4px; left: 4px; } #product .item-info { background: #EFEFEF; clear: both; width: 100%; margin: 0.81em 0; } #product .item-info th { padding: 3px 6px 3px 5px; width: 120px; border-bottom: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; font-weight: bold; background-color: #dcdcdc;} #product .item-info td { border-bottom: 1px dotted #c8dbbf; padding: 3px 0 3px 6px; background-color: #f7f7f7; width: 490px;} #product .discounts { position:relative; left: 0px; } #product .small { display: block; margin: 0 0 6px; float: left;}/* Added float:left - DT */ #product .small fieldset { display: block; } #product .favourites { margin-left: 0px; } #product .basket .submit { clear: left; } .product-variations { text-align: left; } #product .basket { clear: both; } #product .basket h3 { margin: 0; padding-left: 0; display: none; } #product .basket label { width: 100%; display: block; padding: 4px 0; clear: both; overflow: visible; } #product .basket span.desc { display: block; width: 8em; float: left; margin-top: 0.2em; } #product .basket label span.info-link { display: none; } #product .basket label span.info-link acronym { display: none; } #product .basket label span.info-link span { display: block; background: #ffc; border: 1px solid #ccc; padding: 6px; } #product .basket label input { width: 15em; text-align: left; } #product .basket label select { width: 15.4em; } #product .results { padding: 16px 4px; clear: both; line-height: 1.2em; } #product .results .calculate, #product .results table { float: left; margin-right: 16px; } #product .results table th, #product .results table td { padding-right: 16px; } #product .results strong { color: #c00; } #upsell { border: 1px solid #ccc; border-width: 3px 0; clear: both; margin: 10px 0 16px; } /* =addresses */ #addresses .address-list { border-top: 1px dotted #ccc; width: 95%;} #addresses .address-list li { float: left; width: 100%; padding: 5px 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; } #past-order-filter label { margin-right: 16px; } #past-order-filter .submit { vertical-align: middle; } /* =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: 0em 0; padding: 0; } /* Reduced margin to 0 - DT */ .sidebar fieldset li { margin: 0; padding: 0.2em 0; } .sidebar li.text input { width: 90%; margin: 4px 0 4px 4px; } /* Changed textbox width and margins - DT */ .sidebar li label { color: #154398; padding-left: 4px;} /* Changed text colour and added padding - DT */ .sidebar fieldset.submit { text-align: center; margin-bottom: 0.4em; } .sidebar input.submit { float:left; } /* =sidebar =login */ .sidebar #login fieldset.submit { width: auto; margin: 0px; padding: 2px; border-right: 1px solid #154398; border-left: 1px solid #154398; border-bottom: 1px solid #C6D0E5; background:#FFFFFF;} /* border and positioning - DT */ .sidebar #login ul { clear: both; background-image: url(Image/main_bg_dblue.gif); background-position:bottom; background-repeat: no-repeat;} .sidebar #login #pwd { margin-bottom: 3px; } /* Changed margin-bottom - DT */ .sidebar #login .checkbox input { margin-left: 0; margin-right: 35px; margin-top: 0.18em; width: 20px; float:right;} /* =msg */ .msg { background-color: #fff; padding: 0.4em 0.4em 0.4em 26px; margin: 0; line-height: 1.2em; font-size: small; color: #343833; clear: both; } .primary p.msg { margin-bottom: 8px; } /* Changed margin - DT */ .msg h3 { margin: 0 0 0.2em 0; } .msg p { margin: 0.2em 0 0; } .info { background: url(Image/main_bg_dblue.gif); no-repeat bottom;} .error { background: ivory url(/templates/blank/lib/error.png) no-repeat 6px 0.44em; border-right: 1px solid #153984; border-left: 1px solid #153984;} /* added border left and right - DT */ .success { background: ivory url(/templates/blank/lib/success.png) no-repeat 6px 0.44em; } .warning { background: ivory url(/templates/blank/lib/warning.png) no-repeat 6px 0.44em; } /* =top =search */ #top-search { clear: both; margin: 0; } #top-search form fieldset { text-align: center; margin: 0; padding: 0; } #top-search form * { font-size: small; } #top-search form input { vertical-align: bottom; } #top-search form select { vertical-align: baseline; } #top-search form input.submit { margin-left: 0; vertical-align: baseline; } /* =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: 16px 16px 16px 140px; font-size:small; min-height: 109px; background: #d4dbec; } .product-list ol li.even { background: #EFF2FA; } .product-list ol h3 a { font-weight: bold; } .product-list ol .pid { font-weight: normal; color: #000000; font-size: small; } .product-list ol li img { position: absolute; top: 16px; left: 16px; margin: 0 16px 0.4em 0; border: 1px solid #ccc; padding: 4px; background: #fff; } .product-list ol .options { overflow: hidden; padding-top: 0.81em; } .product-list ol .options input { margin-right: 8px; } .product-list ol .small { float: left; 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; } #a-z-list h3 {padding: 4px; color: #082B6D;} #a-z-list ul { width: 20%; /* 4 column layout */ float: left; } #a-z-list a { display: block; font-size: 0.8em;} /* Basic element styles (low level stuff) ---------------------------------------------------------------------------------------*/ h1 { font-size: 0.8em; } /* Changed the H1 tag to 0.8em for top keywords - DT */ h2, #primary h1 { font-size: x-large; font-weight: normal; margin: 0 0 0.4em; border-bottom: 1px solid #efb023; padding: 0 0 0.2em; line-height: 0.81em; color: #000; } h3 { font-size: medium; font-weight: bold; margin: 0 0 0.4em; } /* Removed font-variant: small-caps; - DT */ h4 { font-size: small; font-weight: bold; } h3 .sub-nav {background-image: url(Image/main_bg_mblue_bot.gif); color:#FFFFFF; font-size:0.9em; margin:0; padding:3px 0 4px 5px;} /* may want some alternate styling in sidebars or on .tertiary, .secondary, #basket etc... */ .sidebar h3 { margin: 0; padding: 3px 0 4px 5px; font-size: 0.8em; background: url(Image/Headers.gif); color:#FFFFFF; } /* Added padding to top bottom and left added background colour, font-size and color - DT */ div.date { margin-bottom: 0.2em; font-size: x-small; color: #aaa; font-style: italic; background:center} .pid { font-weight: normal; color: #aaa; font-size: small; } /* product id span */ .price { color: #164399; font-weight: bold; } /* price display (not always a span) */ .sidebar .price { color: #164399; } .pagination { font-size: small; overflow: hidden; 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; } 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; } .logged-in-as { text-align: right; color: #efb023; position: absolute; text-align: right; top: 127px; left: 15px; font-weight: bold;} /* Changed margin to 5em to create distance from the top links and changed colour - DT */ a { text-decoration: none; } a:link { color: #36f; } a:visited { color: #777; } a:hover { color: #0cf; text-decoration: underline; } a:active { background: #d4dbec; color: #fff; } p.line-shipping { color: #666; } caption { font-weight: bold; text-align: left; padding: 16px 4px 0; text-transform: uppercase; text-decoration: underline; } .add-costs-info { border: 1px solid #ccc; } .add-costs-info th { background: #eee; } /* .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; width: 590px; margin-left: 3px;} /* container for FCK Editor output */ /* Added width:590px; margin-left: 3px; to body content - DT */ 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 { padding: 0px; background: #fff; } img.fl-l { float: left; clear: left; margin: 0 16px 0.81em 0; border: 1px solid #393a3d; padding: 4px; background: #000; display: none;} img.fl-r { float: right; clear: right; margin: 0 0 0.81em 16px; border: 1px solid #393a3d; padding: 4px; background: #000; display: none;} img.news-image { float: right; clear: right; margin: 0.4em 0 0.81em 16px; border: 1px solid #154398; background: #fff; } .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; } /* Home Page Promo Boxes - DT */ #virtual-brochure {background-image: url(Image/home/virtual-broch-box.jpg); background-repeat:no-repeat; width: 199px; height: 358px; float: left; } #usb-drives {background-image: url(Image/home/usb-promo-box.jpg); background-repeat:no-repeat; width: 199px; height: 365px; float: left;} #merchandise {background-image: url(Image/home/merchandise-schemes-box.jpg); background-repeat:no-repeat; width: 195px; height: 358px; float: left;} #quickorder {background-image: url(Image/home/quick-order.jpg); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #go-green {background-image: url(Image/home/green-products.jpg); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #credit-crunch {background-image: url(Image/home/custom-clothes.gif); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #spotlight {background-image: url(Image/home/spotlight-on.jpg); background-repeat:no-repeat; width: 191px; height: 180px; float: left;} .quickorder-text {color:#154398; left:57px; line-height:14px; position:relative; text-align:justify; top:50px; width:125px;} .brochure-text {position:relative; top:48px; left:60px; width: 125px; text-align: justify; color: #154398; line-height: 14px;} .usb-text {position:relative; top:50px; left:57px; width: 127px; text-align: justify; color: #154398; line-height: 16px;} .green-text {position:relative; top:45px; left:57px; width: 127px; text-align: justify; color: #154398; line-height: 15px;} .crunch-text {position:relative; top:45px; left:53px; width: 130px; text-align: justify; color: #154398; line-height: 15px;} .spotlight-text {position:relative; top:49px; left:61px; width: 122px; text-align: justify; color: #154398; line-height: 14px;} /* Home Page boxes to promote specific products - DT */ #box1-2 {background-image: url(Image/home/promo-template-box.jpg); background-repeat:no-repeat; width: 200px; height: 271px; float: left;} #box1-2-home {background-image: url(Image/home/promo-template-box.jpg); background-repeat:no-repeat; width: 200px; height: 271px; float: left;} #box3 {background-image: url(Image/home/promo-template-box.jpg); background-repeat:no-repeat; width: 192px; height: 260px; float: left;} #box1-2 img {position:relative; top:10px; left:35px;} #box1-2-home img {position:relative; top:10px; left:35px;} #box3 img {position:relative; top:10px; left:35px;} #body-text {position:relative; top:20px; left:10px; width: 170px; text-align: justify; color: #707070; line-height: 15px;} #headers {position:relative; top:25px; left:10px; text-align: justify; } #promo-header {background-image: url(Image/home/promo-header.jpg); background-repeat:no-repeat; width: 592px; height: 38px; clear:both;} .promo-header-text {position:relative; top:9px; left:45px; width: 590px; text-align: justify; color: #082b6d; line-height: 15px;} .promo-bold a:link {color: #c90000; font-size: 1em; position:relative;} .promo-bold {font-weight: bold; color: #c90000; font-size: 1.1em; position:relative; left: 20px;} .promo-titles1 {position:relative; top:10px; left:0px; color: #082b6d; font-weight: bold; font-size: 1.4em;} .promo-titles1 a:link {position:relative; color: #082b6d; font-weight: bold;} .promo-titles2 {position:relative; top:10px; left:-3px; color: #082b6d; font-weight: bold; font-size: 1.4em;} .promo-titles2 a:link {position:relative; color: #082b6d; font-weight: bold;} .header-1 {position:relative; top:10px; left:23px; color: #082b6d; font-weight: bold; font-size: 1.4em;} .header-1 a:link {position:relative; color: #082b6d;} .header-2 {position:relative; top:10px; left:35px; color: #082b6d; font-weight: bold; font-size: 1.4em;} .header-2 a:link {position:relative; color: #082b6d;} .header-3 {position:relative; top:10px; left:28px; color: #082b6d; font-weight: bold; font-size: 1.4em;} .header-3 a:link{position:relative; color: #082b6d;} #trees4business {background-image: url(Image/static-pages/trees-for-business.jpg); background-repeat:no-repeat; width: 593px; height: 714px; float: left;} .treestext {position:relative; top:260px; left:220px; color: #FFFFFF; font-size: 1em; width: 350px; text-align: justify;} .trees-text-bold {font-weight: bold; color: #174300;} #trees4business a {text-decoration :underline; color:#FFFFFF; font-weight: bold;} /* Go Green Stuff - DT */ #virtual-brochure-green {background-image: url(Image/home/virtual-brochure-green.jpg); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #t-gif {background-image: url(Image/t-gif.gif); background-repeat:no-repeat; width: 201px; height: 180px; float: left; z-index:100;} #request-catalogue {background-image: url(Image/home/credit-crunch.jpg); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #go-green2 {background-image: url(Image/home/green-products.jpg); background-repeat:no-repeat; width: 201px; height: 180px; float: left;} #personal-brochure {background-image: url(Image/home/usb-memory-drives.jpg); background-repeat:no-repeat; width: 191px; height: 180px; float: left;} #req-cat-green {background-image: url(Image/home/real-brochure-green.jpg); background-repeat:no-repeat; width: 191px; height: 180px; float: left;} #green-info-pic {background-image: url(Image/static-pages/green-info.jpg); background-repeat:no-repeat; width: 350px; float: left;} .green-info-text {position:relative; top:80px; left:170px; color: #707070; font-size: 1em; width: 420px; text-align: justify;} .green-info-bold {font-weight:bold; color: #19780c;} #green-box1-2 {background-image: url(Image/static-pages/promo-template-box.jpg); background-repeat:no-repeat; width: 200px; height: 271px; float: left;} #green-box3 {background-image: url(Image/static-pages/promo-template-box.jpg); background-repeat:no-repeat; width: 192px; height: 260px; float: left;} .green-promo-titles {position:relative; top:10px; left: -3px; color: #7b8b41; font-weight: bold; font-size: 1.4em;} .green-promo-titles a:link {position:relative; color: #7b8b41; font-weight: bold;} .green-promo-header-text {position:relative; top:9px; left:45px; width: 590px; text-align: justify; color: #082B6D; line-height: 15px;} #copy-box {background-image: url(Image/static-pages/copy-box.jpg); background-repeat:no-repeat; width: 597px; float: left;} #copy-box img {float:right; margin-right: 6px; margin-top: 10px; padding-left: 8px;} .copy-box-text {text-align: justify; padding-left: 10px; padding-top: 8px; width: 418px; color: #848484;} /* jacvascript stuff -----------------------------------------------------------------------*/ #quick-order label, #order-forms label { float: none; display: inline; margin: 0 22px; } #quick-order label input, #order-forms label input { margin: 0; } .details { margin: 12px; } .details h4 { margin-bottom: 4px; } .details dl { margin-top: 0; margin-bottom: 0; } #order-forms ul { clear: both; border-bottom: 1px dotted #ccc; } #order-forms ul li { margin: 0 0 16px; border-top: 1px dotted #ccc; } #order-forms .copy label, #order-forms .copy input { margin: 0; } #order-forms .copy { margin: 8px 0 16px; } /* GMB Styles ------------------------------------------------------------------------ */ #gmb-box1 {background-image:url(Image/gmb/gmb_b1.gif); background-repeat:no-repeat; width: 191px; height: 173px; float: left; padding-right: 10px;} .gmb-box1-text {color:#7f7f7f; left:57px; line-height:15px; position:relative; text-align:justify; top:46px; width:130px;} #gmb-box2 {background-image:url(Image/gmb/gmb_b2.gif); background-repeat:no-repeat; width: 191px; height: 173px; float: left; padding-right: 10px;} .gmb-box2-text {color:#7f7f7f; left:57px; line-height:15px; position:relative; text-align:justify; top:46px; width:130px;} #gmb-box3 {background-image:url(Image/gmb/gmb_b3.gif); background-repeat:no-repeat; width: 191px; height: 173px; float: left;} .gmb-box3-text {color:#7f7f7f; left:57px; line-height:15px; position:relative; text-align:justify; top:46px; width:130px;} #gmb-box4 {background-image:url(Image/gmb/gmb10.gif); background-repeat:no-repeat; width: 191px; height: 296px; float: left; padding-right: 10px;} .gmb-box4-text {color:#7f7f7f; left:6px; line-height:15px; position:relative; text-align:justify; top:161px; width:180px;} #gmb-box5 {background-image:url(Image/gmb/gmb7.gif); background-repeat:no-repeat; width: 392px; height: 276px; float: left;} a.gmb_large:link { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none; position:relative; top:48px; left:48px;} a.gmb_large:visited { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none;} a.gmb_large:hover { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; } a.gmb_large:active { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; } a.gmb_large2:link { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none; position:relative; top:166px; left:40px;} a.gmb_large2:visited { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none;} a.gmb_large2:hover { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; } a.gmb_large2:active { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; } a.gmb_large3:link { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none; position:relative; top:254px; left:115px;} a.gmb_large3:visited { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: none;} a.gmb_large3:hover { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; } a.gmb_large3:active { font-size: 18px; color : #f47920; font-weight:bold; text-decoration: underline; }