/* Quicksite CSS Definition */ /* global reset */ * { padding: 0; margin: 0; } body { color: #000; background-color: ; font: 100.01%/normal Tahoma, sans-serif; text-align: center; padding-bottom: 12px; } /* elements ------------------------------------------------------------------------------*/ /* main header */ #top h2 { vertical-align: bottom; font-size: 1.4em; padding: 12px 0; margin: 0; background: #fff; float: left; width: 100%; } /* reserved for #top - regular text inside it is the page title etc... */ #top h2 a { margin: 0 12px; color: ; } #top h2 a, #top h2 a:visited { color: ; } #top h2 a:hover, #top h2 a:active { color: ; } /* optional hover state */ #top h2 a img, #top h2 a:visited img { } #top h2 a:hover img, #top h2 a:active img { } /* optional hover state */ #top h2 img { display: inline; position: relative; bottom: -4px; } /* site logo */ #top h2 .site-name { } /* web title */ /* headers */ #content h1 { font-size: 2.2em; line-height: 1.1em; border-bottom: 3px solid; color: #999999; margin: 0 0 12px; position: relative; } /* page title */ #content h2 { font-size: 1.6em; margin: 16px 0; } #content h3 { font-size: 1.3em; line-height: 1em; margin: 0 0 10px; } #content h4 { display: run-in; font-size: 1em; margin: 0 0 6px; } /* block */ p { margin: 6px 0 12px; } blockquote { margin: 0 0 12px; } blockquote p { } address { font-style: normal; display: inline; } pre { margin: 0 0 12px; border: 1px solid #999999; } /* image */ img { display: block; border: 0; } /* lists */ ul { list-style: square outside; margin: 12px 12px 12px 22px; } ul li { } ul ul, #content ul ol { margin: 0 0; } ol { list-style: decimal-leading-zero outside; margin: 0; } ol li { } ol ol, #content ol ul { margin: 0 0; } dl { margin: 0; } dl dt { } dl dd { } /* inline */ span { } acronym { } abbr { border-bottom: 0; } q { font-style: oblique; } q:before, q:after { content: ''; } em { font-style: italic; } strong { font-weight: bold; } code, samp { font-family: monospace; } kbd { font-family: monospace; } ins { text-decoration: underline; } del { text-decoration: line-through; } /* basic links */ a:link { color: #999999; text-decoration: none; } a:visited { color: #999999; text-decoration: none; } a:hover { color: #990000; text-decoration: none; } a:active { color: #990000; text-decoration: none; } /* form controls */ form { } form br { display: none; } form fieldset { border: 0; width: auto; } form fieldset fieldset { margin: 16px 0; } form fieldset legend { color: #999; } /* display like an h1 or h2 */ form fieldset p { text-align: left; } form fieldset fieldset legend { color: #000; } form fieldset fieldset fieldset { } /* don't nest further than this */ form fieldset fieldset fieldset legend { } form label { vertical-align: middle; font-size: inherit; } form label br { display: inline; } form input { font-family: inherit; font-size: inherit; vertical-align: middle; padding: 0; } form button { width: auto; margin: auto; font-size: inherit; } /* usually the submit button or contains a link */ form select { font-family: inherit; width: auto; font-size: inherit; padding: 0; overflow: visible; } form label span.desc { line-height: 23px; } form label input { font-family: inherit; font-size: inherit; vertical-align: middle; padding: 0; } form label select { font-family: inherit; width: auto; font-size: inherit; padding: 0; } form optgroup { padding-bottom: 0.5em; font-weight: bold; } form option { padding: 0 1em 0 2px; font-weight: normal; font-size: inherit; width: auto; } form textarea { font-family: inherit; margin: 0 auto; display: block; } form div input { font-family: inherit; font-size: inherit; vertical-align: middle; } /* typically the submit button */ /* good browsers, use this to add hover styles etc.. */ input[type="text"] { } input[type="checkbox"] { width: auto; margin-left: 4px; } input[type="password"] { } input[type="submit"] { width: auto; } input[type="file"] { } input[type="reset"] { width: auto; } input[type="image"] { width: auto; border: 0; } input[type="radio"] { width: auto; margin-left: 4px; } input[type="hidden"] { display: none; padding: 0; } /* tables */ table { caption-side: top; margin: 0 auto 12px; width: 100%; font-size: 0.9em; clear: both; } table caption { text-align: left; padding: 1px 4px; font-weight: bold; font-size: 1em; color: #999; } table colgroup th { speak-header: always; } table rowgroup th { speak-header: once; } table td, table th { padding: 4px; } table thead { } table thead tr { } table thead th { font-weight: normal; background: ; color: ; } table thead td { } table tbody { font-size: 0.9em; } table tbody tr { } table tbody th { font-weight: normal; background: #efefef; } table tbody td { margin: 2px; background: #efefef; } table tbody .odd td { background: #efefef; } table tbody .even td { background: #fff; } table tfoot { font-size: 0.9em; } table tfoot tr { } table tfoot th { } table tfoot td { } table td.ra { text-align: right; } table td.ca { text-align: center; } table.nicelist tbody th { font-weight: bold; background: ; color: ; } table.nicelist tr td.nicelistedge { background: #fff; } table.nicelist .nicelistedge form { margin: 2px 0; } table.nicelist .altbg td { background: #fefefe; } table.product-variations input { width: 2em; text-align: center; } /* utility belt ------------------------------------------------------------------------------*/ .fl-l { float: left; margin: 0 8px 8px 0; display: inline; } .fl-r { float: right; margin: 0 0 8px 8px; display: inline; } .cb { clear: both; } hr { display: none; } /* multi-use class names that appear on multiple page types ------------------------------------------------------------------------------*/ #content .body { font-size: 0.75em; padding-bottom: 12px; position: relative; } /* container for FCKin editor's output */ #content .body ul { position: relative; list-style: square outside; margin: 12px 12px 12px 22px; } #content .body table * { background: none; } .breadcrumbs { font-size: 0.75em; position: relative; } .breadcrumbs a { color: #999; } .breadcrumbs a:visited { color: #999; } .breadcrumba a:hover { color: #990000; } .breadcrumba a:visited:hover { color: #990000; } /* common mini forms */ .add, .basket, .enquiry, .favourite, .update, .edit, .remove { vertical-align: middle; padding: 0; margin: 0; } .add img, .basket img, .enquiry img, .favourite img, .update img, .edit img, .remove img { display: inline; width: auto; margin: 0; padding: 0; vertical-align: middle; } .add-all { text-align: center; padding: 1px; margin: 11px; clear: both; } .add-all input { padding: 2px; } /* special links */ .more-link { } .archive-link { } .register { } /* gallery on page/product */ .gallery { clear: both; text-align: center; overflow: hidden; } .gallery { padding: 0 8px 8px 0; } .gallery a { margin: 8px 0 0 8px; display: inline; width: auto; } .gallery a:hover { } .gallery img { display: inline; margin: 0 auto; width: 100px; } .gallery a img { } .gallery a:hover img { } /* the category block attached to a page/index */ .category { } /* definition list for product info */ .item-info { display: block; margin-bottom: 12px; } /* dl */ .item-info .price { color: #990000; } .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } .item-info .min-qty { color: #999; } .item-info .min-val { color: #999; } /* item options in the baskets */ /* definition list for account info */ .account-info { } /* dl for main account details */ .account-info dt { } .account-info dt label { } .account-info dt input { } .account-info dd { } .account-info dd label { } .account-info dd input { } .account-info dd select { } /* product lists */ #qo-sl1 .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 0 0 0; padding: 12px 0; text-align: center; } #qo-sl1 .product-list li { float: left; width: 48%; padding: 14px 0; margin: 0 1% 12px 0; font-size: 0.8em; } #qo-sl1 .product-list li.odd { clear: left; } #qo-sl1 .product-list li.even { margin: 0 0 12px 1%; float: right; clear: right; } #qo-sl1 .product-list h3 { margin: 0; padding: 0; line-height: 1em; font-size: 1.3em; height: 2.1em; } #qo-sl1 .product-list li>h3 { min-height: 2.2em; height: auto; } #qo-sl1 .product-list h3 a { float: none; } #qo-sl1 .product-list a { display: inline; } /* the link surrounding the image */ #qo-sl1 .product-list a img { padding: 0; margin: 4px auto; } #qo-sl1 .product-list .excerpt { margin: 0 0 10px 0; color: #000000; } #qo-sl1 .product-list .excerpt * { margin: 0; line-height: 0.8em; } #qo-sl1 .product-list a.more-info { display: inline; font-weight: bold; color: #000; width: 109px; height: 26px; text-decoration: none; text-align: center; vertical-align: middle; } #qo-sl1 .product-list a.more-info img { margin: 0; display: inline; vertical-align: middle; } #qo-sl1 .product-list a.more-info:hover { color: #000; text-decoration: none; } #qo-sl1 .product-list .item-info { text-align: center; overflow: hidden; padding: 8px 0; } #qo-sl1 .product-list .item-info * { display: inline; margin: 0; padding: 0; } #qo-sl1 .product-list .item-info dt { text-align: right; padding: 0 0 0 12px; } #qo-sl1 .product-list .item-info dd { text-align: left; padding: 0 12px 0 0; } #qo-sl1 .product-list .item-info .price { color: #990000; } #qo-sl1 .product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } #qo-sl1 .product-list .item-info .min-qty { color: #999; } #qo-sl1 .product-list .item-info .min-val { color: #999; } #qo-sl1 .product-list .item-info abbr { border-bottom: 0; text-decoration: none; } #qo-sl1 .product-list .item-options { line-height: 28px; } #qo-sl1 .product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */ #qo-sl1 .product-list form { margin: 0; padding: 0; display: inline; vertical-align: middle; } #qo-sl1 .product-list form * { vertical-align: middle; width: auto; float: none; clear: none; display: inline; } #qo-sl1 .product-list form label { margin: 0 6px 0 0; display: inline; } #qo-sl1 .product-list form>label { margin: 0; } #qo-sl1 .product-list form label abbr { } #qo-sl1 .product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; } #qo-sl1 .addall { padding: 10px 0; clear: both; width: 100%; } #qo-2col .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 0 0; padding: 12px 0; } #qo-2col .product-list li { float: left; width: 48%; padding: 14px 0; margin: 0 0 -1px 0; border: solid ; border-width: 1px 0; font-size: 0.8em; overflow: visible; } #qo-2col .product-list>li { } #qo-2col .product-list li.odd { clear: both; } #qo-2col .product-list li.even { margin-left: 16px; /*float: right; clear: right;*/ } #qo-2col .product-list h3 { margin: 0 0 0 0; padding: 0; line-height: 1em; height: 4em; } #qo-2col .product-list>h3 { height: auto; min-height: 4em; } #qo-2col .product-list h3 a { float: none; } #qo-2col .product-list a { float: left; } /* the link surrounding the image */ #qo-2col .product-list a img { padding: 0; margin: 0 10px 0 0; } #qo-2col .product-list .excerpt { margin: 0 0 10px 0; color: #000000; height: 4em; } #qo-2col .product-list>.excerpt { height: auto; min-height: 4em; } #qo-2col .product-list .excerpt * { margin: 0; line-height: 0.8em; } #qo-2col .product-list a.more-info { float: none; display: block; font-weight: bold; color: #000; text-decoration: none; text-align: center; margin: 8px 0 10px; } #qo-2col .product-list a.more-info:hover { color: #000; text-decoration: none; } #qo-2col .product-list .item-info { text-align: center; overflow: hidden; margin-bottom: 6px; } #qo-2col .product-list .item-info * { display: inline; margin: 0; padding: 0; } #qo-2col .product-list .item-info dt { text-align: right; padding: 0 0 0 12px; } #qo-2col .product-list .item-info dd { text-align: left; padding: 0 12px 0 0; } #qo-2col .product-list .item-info .price { color: #990000; } #qo-2col .product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } #qo-2col .product-list .item-info .min-qty { color: #bbb; } #qo-2col .product-list .item-info .min-val { color: #bbb; } #qo-2col .product-list .item-info abbr { border-bottom: 0; text-decoration: none; } #qo-2col .product-list form { margin: 6px 0 0 6px; display: block; text-align: right; vertical-align: middle; float: right; } #qo-2col .product-list form * { vertical-align: middle; } #qo-2col .product-list form label { margin: 0 6px 0 0; } #qo-2col .product-list form>label { margin: 0; } #qo-2col .product-list form label abbr { } #qo-2col .product-list form label input { text-align: center; width: 3em; font-size: 0.8em; } #qo-2col .product-list form button { padding: 0 0 1px; margin: 0; line-height: 1em; } #qo-2col .product-list form button img { margin: 1px 1px 0; } #qo-2col .product-list form button { font-size: 0.8em; } #qo-2col .addall { padding: 10px 0; clear: both; width: 100%; } .hide { position: absolute; left: -999em; } #qo-bigpic { overflow: hidden; width: 100%; } #qo-bigpic .product-list { clear: both; list-style: none; margin: 12px 0; padding: 0 0 1px; border: solid #000; border-width: 1px 0 0; } #qo-bigpic .product-list li { clear: both; float: left; display: block; width: 100%; padding: 14px 0; margin: 0; text-align: center; border: solid #000; border-width: 0 0 1px 0; } #qo-bigpic .product-list h3 { margin: 0 0 8px 250px; padding: 0; line-height: 1em; height: 1.8em; text-align: left; } #qo-bigpic .product-list li>h3 { height: auto; min-height: 1.8em; } #qo-bigpic .product-list h3 a { float: none; } #qo-bigpic .product-list a { float: left; } /* the link surrounding the image */ #qo-bigpic .product-list a img { padding: 0; margin: 0 10px 0 0; } #qo-bigpic .product-list .excerpt { margin: 0 0 10px 250px; color: #000000; text-align: left; height: 13em; } #qo-bigpic .product-list li>.excerpt { height: auto; min-height: 13em; } #qo-bigpic .product-list .excerpt * { margin: 0; line-height: 0.8em; } #qo-bigpic .product-list a.more-info { float: right; width: 278px; display: block; font-weight: bold; color: #000; text-decoration: none; text-align: center; margin: 8px 0 10px 0; } #qo-bigpic .product-list a.more-info:hover { color: #000; text-decoration: none; } #qo-bigpic .product-list .item-info { text-align: center; margin: 0 0 6px 0; padding: 14px 0 3px; float: right; width: 278px; clear: right; } #qo-bigpic .product-list .item-info * { display: inline; margin: 0; padding: 0; } #qo-bigpic .product-list .item-info dt { text-align: right; padding: 0 0 0 12px; } #qo-bigpic .product-list .item-info dd { text-align: left; padding: 0 12px 0 0; } #qo-bigpic .product-list .item-info .price { color: #990000; } #qo-bigpic .product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } #qo-bigpic .product-list .item-info .min-qty { color: #bbb; } #qo-bigpic .product-list .item-info .min-val { color: #bbb; } #qo-bigpic .product-list .item-info abbr { border-bottom: 0; text-decoration: none; } #qo-bigpic .product-list .item-options { float: left; clear: left; text-align: center; width: 240px; line-height: 30px; height: auto !important; height: 28px; overflow: visible; } #qo-bigpic .product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */ #qo-bigpic .product-list form { margin: 0 2px; padding: 0; display: inline; vertical-align: middle; } #qo-bigpic .product-list form * { vertical-align: middle; width: auto; float: none; clear: none; display: inline; } #qo-bigpic .product-list form label { margin: 0 6px 0 0; display: inline; } #qo-bigpic .product-list form>label { margin: 0; } #qo-bigpic .product-list form label abbr { } #qo-bigpic .product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; } #qo-bigpic .addall { padding: 10px 0; clear: both; width: 100%; } #qo-tc1 .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 1px 0; padding: 12px 0; text-align: center; } #qo-tc1 .product-list li { float: left; width: 31.5%; padding: 0; margin: 12px 1% 12px 0; font-size: 0.8em; background: url(/utils/template-bits/gfx/product-lists/white-corner-right-top.png) no-repeat right top; } #qo-tc1 .product-list li.one { clear: both; } #qo-tc1 .product-list li.two { margin-left: 1.7%; margin-right: 0; } #qo-tc1 .product-list li.three { float: right; margin: 12px 0; } #qo-tc1 .product-list h3 { margin: 0; padding: 8px 16px 2px; line-height: 1em; font-size: 1.3em; height: 2.1em; background: url(/utils/template-bits/gfx/product-lists/white-corner-left-top.png) no-repeat left top; } #qo-tc1 .product-list li>h3 { min-height: 2.1em; height: auto; } #qo-tc1 .product-list h3 a { float: none; } #qo-tc1 .product-list .prod-info { overflow: hidden; height: 18em; margin: 2px 2px; background: #fff; padding: 8px; } #qo-tc1 .product-list a { display: inline; } /* the link surrounding the image */ #qo-tc1 .product-list a img { padding: 0; margin: 4px auto; } #qo-tc1 .product-list a.more-info { display: inline; text-align: center; vertical-align: middle; } #qo-tc1 .product-list a.more-info img { margin: 0; display: inline; vertical-align: middle; } #qo-tc1 .product-list a.more-info:hover { } #qo-tc1 .product-list .item-info { text-align: center; overflow: hidden; padding: 8px 0 0; } #qo-tc1 .product-list .item-info * { display: inline; margin: 0; padding: 0; } #qo-tc1 .product-list .item-info dt { text-align: right; padding: 0 0 0 12px; } #qo-tc1 .product-list .item-info dd { text-align: left; padding: 0 12px 0 0; } #qo-tc1 .product-list .item-info .price { color: #900; } #qo-tc1 .product-list .item-info .value { color: #900; font-weight: bold; font-size: 110%; } #qo-tc1 .product-list .item-info .min-qty { color: #bbb; } #qo-tc1 .product-list .item-info .min-val { color: #bbb; } #qo-tc1 .product-list .item-info abbr { border-bottom: 0; text-decoration: none; } #qo-tc1 .product-list .item-options { padding: 0 0 8px; margin: 0; } #qo-tc1 .product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */ #qo-tc1 .product-list form { margin: 0; padding: 0; display: inline; vertical-align: middle; } #qo-tc1 .product-list form * { vertical-align: middle; width: auto; float: none; clear: none; } #qo-tc1 .product-list form img { display: inline; } #qo-tc1 .product-list form label { margin: 0 6px 0 0; display: inline; } #qo-tc1 .product-list form>label { margin: 0; } #qo-tc1 .product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; } #qo-tc1 .addall { padding: 10px 0; clear: both; width: 100%; } /* related lists */ .related-items .product-list ul { list-style: none outside; } .related-items .product-list li { float: left; width: 49%; overflow: hidden; } .related-items .product-list h3 { } .related-items .product-list a, .related-items .product-list a:visited { } .related-items .product-list a:hover, .related-items .product-list a:active { } .related-items .product-list img { width: 100px; } .related-items .product-list .highlight { } /* highlight a related */ .related-items .product-list p { } /* the excerpt */ .related-items .product-list .more-link { } .related-items .product-list .item-info { clear: both; } .related-items .product-list .item-info a { } .related-items .product-list .item-info a:visited { } .related-items .product-list .item-info a:hover { } .related-items .product-list .item-info a:active { } .related-items .product-list .item-info { } .related-items .product-list form { } .related-items .product-list form label { } /* quantity label */ .related-items .product-list form input { } .related-items .product-list form button { } /* add to basket button */ /* attached document link */ .document { } /* thinking of using a button */ .document:hover { } /* if .document is a link itself */ .document a { } /* if button contains the link */ .document a:hover { } /* pagination */ .pagination { float: left; clear: both; width: 100%; font-size: 0.7em; border: 1px solid #ccc; border-width: 1px 0; background: #eee; padding: 2px 0; } .pagination p { margin: 0; padding: 0 4px; float: left; } .pagination div { display: inline; } .pagination .per-page { float: left; clear: left; padding: 2px 4px; } .prev { float: right; margin: -1em 16px 0 0; font-size: 120%; line-height: 2em; } .prev a { text-decoration: underline; } .prev a:hover { text-decoration: none; color: #900; } .prev a:visited { } .prev a:visited:hover { color: #900; } .next { float: right; font-size: 120%; line-height: 2em; margin: -1em 16px 0 0; } .next a { text-decoration: underline; } .next a:hover { text-decoration: none; color: #900; } .next a:visited { color: #999; } .next a:visited:hover { color: #900; } * html .pagination .prev, * html .pagination .next { margin-top: 0; } *:first-child+html .pagination .prev, *:first-child+html .pagination .next { margin-top: 0; } /* messages */ #content .msg { margin: 12px 0; padding: 8px 8px 8px 20px; background: #ffffcc; border: 1px solid #000000; color: #000; font-size: 0.9em; clear: both; } #content .msg h3 { margin: 0; padding: 0; } #content .msg p { margin: 0; padding: 0; } /*.successful { background: url(/utils/template-bits/gfx/silky/accept.png) no-repeat 8px 8px; } .error { background: url(/utils/template-bits/gfx/silky/error.png) no-repeat 8px 8px; } .info { background: url(/utils/template-bits/gfx/silky/information.png) no-repeat 8px 8px; } */ .successful p { } .error p { } .info p { } .successful h3 { color: #008000; } .error h3 { color: #d40000; } .info h3 { color: #0045ff; } /* site-wide elements ------------------------------------------------------------------------------*/ #logo { } /* this image should be in the markup */ #banner { } /* this image will most likely go in the CSS as a background */ #tagline { } #copyright { } #extra { } /* some variability across pages */ #btt { } /* the back to top link */ /* column layouts - ids and classes ------------------------------------------------------------------------------*/ /* home page layout over-rides */ #home #top { } #home #layout { } #home #content-wrapper { } #home #content { } #home #secondary-content { } #home #tertiary-content { } #root { margin: 0 auto; width: 840px; text-align: left; } #top { width: auto; float: left; width: 100%; padding-bottom: 39px; background: url(/utils/template-bits/gfx/simple/top-to-body.png) no-repeat bottom; } /* html #top { background: url(/utils/template-bits/gfx/simple/top-to-body.gif) no-repeat bottom; }*/ #layout { background: url(/utils/template-bits/gfx/simple/faux-col.png) repeat-y; float: left; width: 100%; } /* faux-column, repeated background etc.. layout tool */ #content-wrapper { clear: both; } #content { clear: both; background: #fff; padding: 0 20px 16px; overflow: hidden; } /* used with #content to create alternative layouts */ #secondary-content { background: #fff; } #tertiary-content { background: #fff; padding-bottom: 2em; } /* for three column layouts or footer section navigation */ #footer { width: 100%; clear: both; padding-top: 26px; background: url(/utils/template-bits/gfx/simple/footer-top.png) no-repeat top; position: relative; } * html #footer { background: url(/utils/template-bits/gfx/simple/footer-top.gif) no-repeat top; } /* alternators, default to 200px width columns */ .sidebar-left #content-wrapper { width: 100%; float: right; margin-left: -254px; } .sidebar-left #content { margin-left: 272px; width: 528px; } .sidebar-left #secondary-content { clear: left; float: left; width: 254px; } .sidebar-left #tertiary-content { clear: left; float: left; width: 254px; } .sidebar-right #content-wrapper { width: 100%; float: left; margin-right: -200px; } .sidebar-right #content { margin-right: 200px; } .sidebar-right #secondary-content { clear: right; float: right; width: 200px; } .sidebar-right #tertiary-content { clear: right; float: right; width: 200px; } .three-column #content-wrapper { float: left; width: 100%; } .three-column #content { margin: 0 200px; } .three-column #secondary-content { float: left; width: 200px; margin-left: -100%; } .three-column #tertiary-content { float: left; width: 200px; margin-left: -200px; } .no-sidebar { } .no-sidebar #secondary-content { float: none; clear: both; } .no-sidebar #tertiary-content { float: none; clear: both; } /* This only works in good browsers so far but removes the primary page nav from the sidebar to a horizontal nav */ .tab-nav div[id="layout"] { position: relative; padding-top: 3em; } .tab-nav ul[id="page-nav"] { position: absolute; top: 0; left: 0; width: 100%; line-height: 3em; text-align: center; } .tab-nav ul[id="page-nav"] { } .tab-nav ul[id="page-nav"] .title { position: absolute; left: -999em; } .tab-nav ul[id="page-nav"] li { float: left; display: block; white-space: normal; } .tab-nav ul[id="page-nav"] a { float: left; display: block; } .secondary-left #secondary-content { clear: right; float: none; width: auto; margin: 0 -200px 0 -400px; padding: 0 200px; } .secondary-right #secondary-content { clear: left; float: none; width: auto; margin: 0 200px 0 -200px; padding: 0 0 0 200px; } /* navigation - all uls ------------------------------------------------------------------------------*/ li.title { list-style: none outside; } /* contains an h3 with the menu title in it */ li.title h3 { margin: 0; padding: 0; } #top-nav { float: right; padding: 10px 0 0; margin: 0 12px -3em 300px; font-size: 0.6em; list-style: none; position: relative; z-index: 4; } /* links in top-menu category including home page link */ #top-nav li { float: left; margin: 0 -1px 0 0; padding: 0 6px; border: solid #ccc; border-width: 0 1px; display: inline; } #top-nav li strong { } #top-nav li a { } #top-nav li a:visited { } #top-nav li a:hover { } #top-nav li a:active { } /* general sub-lists styling for drop down etc.. ** this is the top nav version of the template coz IE couldnt handle my awesome css techniques (.tab-nav above)) */ #main-nav { background: transparent; float: right; width: 100%; margin-top: 0; } #secondary-nav { background: url(/utils/template-bits/gfx/simple/thin-border.png) no-repeat top; margin: 0 20px; } /* container for cat-nav and search in sidebar */ #secondary-nav .btm { background: url(/utils/template-bits/gfx/simple/thin-border-btm.png) no-repeat bottom; padding: 0; } #redundant-nav { float: left; } /* links in the redundant category i.e. those in the footer */ #redundant-nav li { float: left; } #redundant-nav li strong { } #redundant-nav li a { color: ; } #redundant-nav li a:visited { color: ; } #redundant-nav li a:hover { color: ; text-decoration: underline; } #redundant-nav li a:active { } #cat-nav { margin: 0; padding: 12px; list-style: none; font-size: 0.75em; position: relative; } /* categories navigation */ #cat-nav li { border: solid #999; border-width: 0 0 1px; line-height: normal; } #cat-nav li.title { border-width: 0 0 1px; margin: 0; padding: 0; width: 100%; } #cat-nav li.title h3 { position: absolute; top: -999em; line-height: 0; font-size: 0; } #cat-nav li.title h3 a { display: block; text-indent: 0; height: auto; background: #fff; padding: 4px; } #cat-nav li a { display: block; width: 182px; background: #fff; margin: 0; padding: 2px 4px; color: #000; line-height: 1.3em; } #cat-nav li a:visited { color: #000; } #cat-nav li a:hover { background: #eee; color: #990000; } #cat-nav li a:active { } #cat-nav li.location a { background: #eee; } #root #cat-nav ul li a:link { background: none; } #root #cat-nav ul { list-style: none; margin: 0; font-size: 0.9em; position: relative; } /* sub-nav lists, dropdown when not in #main-nav */ #root #cat-nav ul li { border: solid #999; border-width: 1px 0 0; line-height: normal; } #root #cat-nav ul li a { width: 166px; background: none; margin: 0; padding: 2px 12px; color: #000; line-height: 1.3em; } #root #cat-nav ul li a:visited { color: #000; } #root #cat-nav ul li a:hover { background: #eee; color: #990000; } #root #cat-nav ul li a:active { } #root #cat-nav ul li.location a { background: #eee; } /* fixes for the dunce */ * html #cat-nav li ul { border: solid #999; border-width: 0 0 1px; } /* html #root #cat-nav ul li a { padding: 0px 12px 4px; }*/ #prod-nav { } /* could be useful... */ #page-nav { float: left; width: 90%; font-size: 0.7em; margin: 0 15px; text-align: center; list-style: none; display: inline; border-collapse: separate; } /* page navigation */ #page-nav li { float: left; padding: 0 0 0 10px; margin: 0 2px 0 2px; line-height: 24px; background: url(/utils/template-bits/gfx/simple/tab-left.png) no-repeat left top; } #page-nav li.title { margin: 0; padding: 0; display: block; background: none; } #page-nav li.title h3 { position: absolute; top: -999em; display: block; } #page-nav li span { display: block; padding-right: 10px; background-image: url(/utils/template-bits/gfx/simple/tab-right.png); background-repeat: no-repeat; background-position: right top; } #page-nav li a { display: block; padding: 6px 0 5px 0; line-height: 1.2em; line-break: none; color: #ddd; } #page-nav li a:link { color: #ddd; } #page-nav li a:visited { color: #ddd; } #page-nav li a:hover { border-color: #000; color: #fff; } #page-nav li a:active { } #page-nav li.location a { border-color: #107142; } #page-nav ul { } /* sub-nav lists, dropdown when not in #main-nav */ #page-nav ul li { } #page-nav ul li a { } #page-nav ul li a:visited { } #page-nav ul li a:hover { } #page-nav ul li a:active { } #gallery-nav { } /* list of the galleries */ #gallery-nav li { } #gallery-nav li.title { } #gallery-nav li a { } #gallery-nav li a:visited { } #gallery-nav li a:hover { } #gallery-nav li a:active { } /* line-height: inherit doesn't work in ie7 */ #site-map #content p { font-size: 0.9em; } #site-map #content h2 { font-size: 1.4em; margin: 8px 0 8px -15px; } #site-map .sm-pages { float: left; width: 40%; margin: 0 4%; padding: 0; display: inline; font-size: 0.9em; } #site-map .sm-pages li { float: none; } #site-map .sm-pages li a { float: none; } #site-map .sm-pages li.title { position: static; left: 0; } #site-map .sm-cats { float: left; width: 40%; margin: 0 4%; padding: 0; display: inline; font-size: 0.9em; } #site-map .sm-links { float: left; width: 40%; margin: 0 4% 16px; padding: 0; display: inline; font-size: 0.9em; } #site-map #content ul { padding: 0; } #site-map #content ul ul { font-size: 0.9em; margin: 4px 4%; } #tertiary-content .closed ul { position: absolute; left: -999em; } /* if we decide to write out all the sub lists hide them */ #tertiary-content .open ul { display: block; } /* display the appropriate one, useful for pages */ /* sub page and account links menus in content area */ #content .sub-nav { float: left; width: 100%; list-style: none; font-size: 0.75em; margin: 0 0 8px 0; padding: 0; } #content .sub-nav li { float: left; margin-right: -1px; border: solid #ccc; border-width: 0 1px; } #content .sub-nav li a { padding: 0 6px; display: block; float: left; } #content .account-links { text-align: center; font-size: 0.75em; } #content .account-links li { display: inline; margin: 0 -1px 0 0; border: solid #ccc; border-width: 0 1px; } #content .account-links li a { padding: 2px 3px; } #secondary-content #countries { text-align: center; margin: 20px 20px 0; background: url(/utils/template-bits/gfx/simple/thin-border.png) no-repeat top; } #secondary-content #countries .btm { padding: 12px; background: url(/utils/template-bits/gfx/simple/thin-border-btm.png) no-repeat bottom; } #secondary-content #countries a { display: inline; margin: 0 2px; padding: 2px; background: #fff; } #secondary-content #countries a:hover img, #secondary-content #countries a.current img { border-color: #ddd; } #secondary-content #countries a img { display: inline; border: 2px solid #fff; } #countries { position: relative; } #countries span { position: relative; top: -0.1em; padding: 3px 0; cursor: default; } #countries:hover .hvr, #countries.open .hvr { top: 1.2em; } #countries .hvr { top: -999px; position: absolute; width: 110px; left: -4px; padding: 4px; background: #fff; border: 1px solid #ccc; } #countries .hvr img { display: inline; margin-right: 3px; } #countries .hvr a { position: static; display: block; float: left; clear: left; width: 104px; background: #eee; padding: 3px; margin: 1px 0; } * html #countries .hvr a { margin-right: -3px; } /* stem widows */ #countries .hvr a:hover, #countries .hvr a.current { background: #ccc; } /* home page specific ------------------------------------------------------------------------------*/ #home #links { } /* links in the home page category - template specific markup? */ #home #category { } /* the category attached to the home page */ #home .category { float: left; width: 50%; } #home .category li { float: none; width: auto; clear: both; } #home .category li img { width: 80px; } #home .articles { float: right; width: 49%; } #home .articles li img { width: 80px; } /* pages ------------------------------------------------------------------------------*/ #page .body { } /* need this to float: left; if there is a gallery or category attached */ #page .gallery { padding: 0 8px 8px 0; clear: both; width: 100%; } #page .gallery a { margin: 8px 0 0 8px; text-align: center; } #page .gallery a:hover { } #page .gallery img { display: inline; margin: 0 auto; } #page .gallery a img { } #page .gallery a:hover img { } #page .category { float: right; clear: right; width: 49%; } #page .category .product-list { } #page .category .product-list li { overflow: hidden; float: none; width: auto; clear: left; } #page .category .product-list li img { width: 80px; } #page .document { } #page .child-nav { } /* selected page child links only */ #page .child-nav li { } /* category ------------------------------------------------------------------------------*/ #category .sub-category-list { list-style: none outside; } #category .category-list { padding: 1px 0; position: relative; } #category .category-list h2 { margin-top: 0; } /* single products / services ------------------------------------------------------------------------------*/ #product .body { } #product #content { overflow: hidden; } #product #content img { float: right; margin: 0 0 8px 16px; } #product .cat-link { } /* back to the list of products */ /* product details on single product page */ .product-details table { border-collapse: separate; clear: both; font-size: 0.8em; } /* the quantity discounts */ .product-details thead th { background: ; color: ; } .product-details .item-info { overflow: hidden; line-height: 1.2em; margin: 0; padding: 16px 0; } .product-details .item-info dt { float: left; width: 38%; clear: both; font-size: 0.8em; font-weight: bold; margin: 0; padding: 0; } .product-details .item-info dd { float: right; width: 60%; font-size: 0.8em; clear: right; margin: 0; padding: 0; } .product-details .item-info .price { margin: 8px 0 0; line-height: 26px; } .product-details .item-info .value { margin: 8px 0 0; line-height: 26px; } * html .product-details .item-info { width: 245px; } #product .item-options { vertical-align: middle; text-align: center; clear: both; } #product .item-options h3 { text-align: center; font-size: 90%; } #product .item-options form { display: inline; } #product .item-options form * { vertical-align: middle; display: inline; } #product .item-options form label { font-size: 0.9em; } #product .item-options form input { text-align: center; } div#product .basket { margin: 0 0 24px; } div#product .basket h3 { border-bottom: 1px solid #ccc; margin: 24px 0 0; } div#product .basket label { font-size: 0.9em; width: 100%; display: block; float: left; padding: 4px 0; clear: both; overflow: visible; border: 1px solid #eee; border-width: 0 0 1px 0; } div#product .basket span.desc { display: block; width: 8em; float: left; } div#product .basket label span.info-link { display: none; } div#product .basket label span.info-link acronym { display: none; } div#product .basket label span.info-link span { display: block; background: #ffc; border: 1px solid #ccc; padding: 6px; } div#product .basket label input { width: 15em; text-align: left; } div#product .basket label select { width: 15.4em; } div#product .basket .msg { clear: both; margin-top: 36px; } div#product .results { padding: 16px 4px; clear: both; line-height: 1.2em; } div#product .results .calculate { float: left; margin-right: 16px; } div#product .results strong { color: #c00; } div#product .basket .submit { float: left; } div#product .enquiry, div#product .favourites { margin: 12px 0;} div#product #upsell { font-size: 0.9em; padding: 6px; float: left; margin: -1.6em 12px 0; } div#product #product-links { margin: 16px 0; padding: 0; list-style: none; overflow: hidden; } div#product #product-links li { margin: 0; padding: 0; float: left; } div#product .back { text-align: center; clear: both; font-size: 0.9em; border-top: 1px solid #ccc; padding: 6px 0 0; } /* list of news articles ------------------------------------------------------------------------------*/ .articles { clear: right; } .articles li { clear: both; } /* if anything needs altering in news view*/ #news .articles { clear: right; float: none; width: auto; } /* list of */ #news .articles li img { width: 80px; } /* list of galleries - w sample or just links ------------------------------------------------------------------------------*/ #gallery .gallery-list { clear: both; } /* ul, ol or if you like headaches dl */ #gallery .gallery-list ul { clear: both; overflow: hidden; } #gallery .gallery-list li { float: left; width: 49%; text-align: center; display: block; } #gallery .gallery-list li h2 { text-align: left; clear: left; } /* title is a link to each gallery */ #gallery .gallery-list h2 a, #gallery .gallery-list h2 a:visited { } #gallery .gallery-list h2 a:hover, #gallery .gallery-list h2 a:active { } #gallery .gallery-list li p { margin-bottom: 16px; text-align: left; } #gallery .gallery-list li a { } #gallery .gallery-list li img { display: inline; /*max-width: 140px; min-width: 80px; width: 25%;*/ width: 80px; margin: 0 auto; } /* single gallery specific styles ------------------------------------------------------------------------------*/ #gallery .thumbs { clear: both; text-align: center; } #gallery .thumbs a { display: inline; padding: 0; } #gallery .thumbs img { display: inline; width: 120px; } #gallery .thumbs .pagination { float: left; width: 100%; clear: both; } #gallery #view-mode { clear: both; } .gallery-display { height: 200px; overflow: auto; } /* site map ------------------------------------------------------------------------------*/ #site-map .lists ul { width: 49%; float: left; } /* accepted card logos */ #logos { margin: 12px 20px 3em; text-align: center; } #logos img { display: inline; border: 0; margin: 4px; } /* my account - large section ------------------------------------------------------------------------------*/ /* approve order lists */ .approve-orders table { margin: 16px 0 0; } .approve-orders thead th { color: ; } .approve-orders tbody .odd td { background: #efefef; } .approve-orders tbody .even td { background: #fff; } .approve-orders a { text-decoration: underline; } /* link to single order view */ /* if admin account */ .approve-orders table form { } .outstanding-orders table form button { } /* view/deny */ /* order history */ .order-history { margin: 16px 0; clear: both; } .order-history thead th { padding: 4px; } .order-history tbody td { padding: 4px; } .order-history tbody .odd td { background: #efefef; } .order-history tbody .even td { background: #fff; } .order-history .order-detail { } .order-history a { text-decoration: underline; } /* order detail */ .order-detail .despatches ul { margin: 0; padding: 0; list-style: none; } .order-detail .despatches li { margin: 0; padding: 0; clear: both; border-top: 1px solid #efefef; } .order-detail dl { float: left; width: 100%; padding: 16px 0; font-size: 0.9em; line-height: 1.3em; overflow: hidden; } .order-detail dt { float: left; width: 30%; clear: left; font-weight: bold; } .order-detail dt.price { color: #990000; } .order-detail dd { float: left; width: 60%; } .order-detail dd.value { color: #990000; } .order-detail h3 { margin: 16px 0 8px; } .order-detail p { margin: 0 0 16px; font-size: 0.9em; } .order-detail form { clear: both; } .order-detail form div { text-align: center; } .order-detail form div input { padding: 2px; } .order-detail .back { font-size: 0.9em; } .order-detail table { clear: both; } .order-detail thead th { padding: 4px; color: ; } .order-detail tbody { margin: 16px auto; } /* order summary */ .order-detail tbody td { padding: 4px; } .order-detail tbody .odd td { background: #efefef; } .order-detail tbody .even td { background: #fff; } .order-detail table a { text-decoration: none; } /* user details */ #account-details { margin: 12px 0; padding: 4px 0; background: #eee; border: 1px solid #ccc; font-size: 0.9em; } /* the form */ #account-details fieldset { width: 60%; margin: 0 auto; } #account-details fieldset fieldset { width: auto; margin: 8px 0; padding: 8px 0; border: solid #ccc; border-width: 1px 0; } #account-details fieldset fieldset legend { } #account-details label { float: left; width: 100%; padding: 4px 0; } #account-details label span.desc{ float: left; width: 36%; } #account-details label input { float: right; width: 60%; } #account-details label select { float: right; width: 62%; } #account-details .account-info { overflow: hidden; } /* dl for main account details */ #account-details .account-info dt { float: left; width: 30%; clear: both; } #account-details .account-info dt label { } #account-details .account-info dt input { } #account-details .account-info dd { float: left; width: 68%; } #account-details .addresses label span.desc{ width: 96%; display: block; } #account-details .addresses label select { width: 100%; font-size: inherit; margin: 3px 0; } #account-details p { margin: 8px 0; font-weight: bold; } #account-details div { text-align: center; margin: 8px 0; } #account-details div input { padding: 2px; } /* single address entry form */ #new-address { margin: 8px auto; padding: 4px; text-align: center; background: #eee; border: 1px solid #ccc; font-size: 0.9em; } #new-address fieldset { width: 60%; margin: 0 auto; } #new-address h3 { text-align: left; } #new-address label { display: block; overflow: hidden; line-height: 24px; margin: 2px 0; } #new-address label span.desc { float: left; clear: left; width: 30%; text-align: left; display: block; } #new-address label input { float: right; width: 66%; } #new-address label select { float: right; width: 67.3%; } #new-address label #new-postcode { width: 32.5%; margin-right: 33.5%; } #new-address div input { padding: 2px; margin: 4px 0; } .address-lookup { clear: both; margin: 4px 0 4px 33%; float: left; display: inline; } /* single address edit form */ #edit-address { margin: 8px auto; padding: 4px; text-align: center; background: #eee; border: 1px solid #ccc; font-size: 0.9em; } #edit-address fieldset { width: 60%; margin: 0 auto; } #edit-address h3 { text-align: left; } #edit-address label { display: block; overflow: hidden; line-height: 24px; margin: 2px 0; } #edit-address label span.desc{ float: left; clear: left; width: 30%; text-align: left; display: block; } #edit-address label input { float: right; width: 66%; } #edit-address label select { float: right; width: 67.3%; } #edit-address label #edit-postcode { width: 32.5%; margin-right: 33.5%; } #edit-address div input { padding: 2px; margin: 4px 0; } /* the stored addresses list */ .address-list { list-style: none; margin: 0; padding: 16px 0; } .address-list li { float: left; width: 40%; height: 130px; text-align: center; margin: 12px 4%; border: solid #ccc; border-width: 1px 0; } .address-list>li { height: auto; min-height: 130px; } .address-list li.odd { clear: left; } .address-list li.even { float: right; clear: right; } .address-list .adr { font-size: 0.9em; margin: 16px 0; } .address-list form { display: inline; } /* the below classes differentiate the buttons */ /* future versions - manage addresses inline with my details, use tabs or similar */ #address-details { } #address-details fieldset { } #address-details legend { } #address-details fieldset fieldset { } #address-details fieldset fieldset legend { } #address-details label { } #address-details input { } #address-details select { } #address-details .billing-address { } #address-details .delivery-address { } #address-details #new-bill-address { } #address-details #new-del-address { } #address-details button { } /* user account list */ .account-list { } .account-list ul { list-style: none; width: 100%; float: left; padding: 0; margin: 0; } .account-list li { width: 100%; padding: 16px 0; float: left; clear: left; border-top: 1px solid #ccc; } .account-list li.odd { } .account-list li.even { } .account-list h3 { } .account-list form { display: inline; } .account-list form img { display: inline; vertical-align: middle; } .account-list form input { display: inline; } .account-list fieldset { } .account-list fieldset legend { } .account-list .account-info { font-size: 0.8em; float: left; width: 100%; padding: 0 0 16px; } .account-list .account-info dt { float: left; width: 30%; clear: left; font-weight: bold; } .account-list .account-info dt label { } .account-list .account-info dt input { } .account-list .account-info dd { float: left; width: 66%; } .account-list .account-info dd label { } .account-list .account-info dd input { vertical-align: middle; padding: 1px; } .account-list .account-info dd select { padding: 0; vertical-align: middle; } /* special prices order pad */ .special-prices .product-list ul { list-style: none outside; } .special-prices .product-list .item-info { clear: both; } .special-prices .product-list .item-info dt { } .special-prices .product-list .item-info dd { } .special-prices .product-list .item-info a { } .special-prices .product-list .item-info a:visited { } .special-prices .product-list .item-info a:hover { } .special-prices .product-list .item-info a:active { } .special-prices .product-list .item-info { } .special-prices .product-list form { } .special-prices .product-list form label { } /* quantity label */ .special-prices .product-list form input { } .special-prices .product-list form button { } /* add to basket button */ .special-prices .unavailable { padding: 8px 0; } /* forms - try to limit it to padding + fonts, form control styling isn't well /* supported in IE ------------------------------------------------------------------------------*/ /* login form */ #login-box { margin: 20px 20px 0; background: url(/utils/template-bits/gfx/simple/thin-border.png) no-repeat top; } #login-box .btm { padding: 12px; background: url(/utils/template-bits/gfx/simple/thin-border-btm.png) no-repeat bottom; } #login-box h3 { font-size: 1.1em; } #login-box ul { font-size: 0.75em; } /* regislation and forgot links */ #login-form { font-size: 0.9em; } #login-form label { float: left; width: 100%; padding: 4px 0; clear: both; } #login-form label span.desc { float: left; width: 36%; } #login-form input#username { float: right; width: 60%; } #login-form input#password { float: right; width: 60%; } #login-form label.remember-user { clear: both; width: 65%; } #login-form label.remember-user span.desc { float: none; width: auto; } #login-form label.remember-user input { margin-left: 0; } #login-form div { margin: 8px 0 0; text-align: right; } #login-form div input { padding: 2px; } /* login box error message */ #login-box .msg { padding: 0; margin: 8px 0; font-size: 0.75em; } #login-box .msg h3 { margin: 0; padding: 8px 8px 0; } #login-box .msg p { margin: 0; padding: 4px 8px 8px; } /* login in content area */ #content #login-form { font-size: 0.9em; margin: 0 0 8px; padding: 6px 2px 2px; border: 1px solid #ccc; background: #eee; } #content #login-form fieldset { width: 60%; margin: 0 auto; } #content #login-form label { float: left; width: 100%; padding: 4px 0; clear: both; } #content #login-form label span.desc { float: left; width: 36%; } #content #login-form input#username { float: right; width: 60%; } #content #login-form input#password { float: right; width: 60%; } #content #login-form label.remember-user { clear: both; width: 62%; } #content #login-form label.remember-user span.desc { float: none; width: auto; } #content #login-form div { margin: 8px 0 0; text-align: right; } #content #login-form div input { padding: 2px; } #search-form { float: right; width: 24%; text-align: right; } #search-form label { display: inline; width: auto; } #search-form input { } #search-form button { width: 32px; vertical-align: middle; } /* sidebar advanced search for all ages */ #advanced-search { margin: 16px 0; padding: 0 12px; } #advanced-search label { } #advanced-search fieldset { } #advanced-search legend { display: block; line-height: 1.4em; font-weight: bold; font-size: 1.2em; z-index: 1; background: #fff; } #advanced-search label { display: block; margin: 0; padding: 0; font-size: 0.9em; font-weight: normal; } #advanced-search label span.desc { display: block; margin: 4px 0; } #advanced-search input { margin: auto; font-size: inherit; font-size: 0.9em; padding: 1px; } #advanced-search select { margin: auto; font-size: 0.9em; float: left; width: 58%; } #advanced-search label.keywords { } #advanced-search label.keywords span.desc { } #advanced-search #keywords, #advanced-search #side-keywords { width: 97.5%; padding: 0; font-size: inherit; } #advanced-search label.code { clear: both; overflow: hidden; padding: 12px 0 6px 0; } #advanced-search label.code span.desc { float: left; width: 30%; margin: 0; vertical-align: middle; } #advanced-search #code, #advanced-search #side-code { float: right; width: 63%; padding: 0; font-size: inherit; vertical-align: middle; } #advanced-search label.price-range { padding: 8px 0 4px; } #advanced-search label.price-range span.desc { float: left; width: 47%; } #advanced-search #price-range, #advanced-search #side-price-range { float: right; width: 50%; } #advanced-search label.min-price { float: left; width: 48%; clear: both; } #advanced-search label.min-price span.desc { } #advanced-search label.min-price input { width: 92%; } #advanced-search label.max-price { float: right; width: 48%; } #advanced-search label.max-price span.desc { } #advanced-search label.max-price input { width: 93%; } #advanced-search label.cat-search { clear: both; overflow: hidden; padding: 8px 0 4px 1px; } #advanced-search label.cat-search span.desc { float: left; width: 30%; } #advanced-search label.cat-search select { float: right; width: 65%; } #advanced-search label.class-search { clear: both; overflow: hidden; padding: 8px 0 4px 1px; } #advanced-search label.class-search span.desc { float: left; width: 30%; } #advanced-search label.class-search select { float: right; width: 65%; } #advanced-search label.class-search input { float: right; width: 62%; } #advanced-search div { clear: both; text-align: center; width: 100%; margin: 8px auto; } #advanced-search div input { margin: 0 auto; width: auto; padding: 2px; } /* advanced search at the top of search results */ #advanced-search-top { margin: 0 0 8px; padding: 0 2px 2px; border: 1px solid #ccc; background: #eee; } #advanced-search-top fieldset { width: 60%; margin: 0 auto; } #advanced-search-top legend { display: block; line-height: 1.4em; font-weight: bold; font-size: 1.2em; z-index: 1; background: #fff; } #advanced-search-top label { display: block; margin: 0; padding: 0; font-size: 0.9em; vertical-align: middle; } #advanced-search-top label span.desc { display: block; margin: 4px 0; } #advanced-search-top input { margin: auto; font-size: inherit; font-size: 0.9em; padding: 1px; } #advanced-search-top select { margin: auto; float: left; width: 58%; } #advanced-search-top label.keywords { width: 48%; float: left; margin-bottom: 6px; } #advanced-search-top label.keywords span.desc { } #advanced-search-top #keywords-t { padding: 0; font-size: inherit; width: 96%; } #advanced-search-top label.code { width: 48%; float: right; margin-bottom: 6px; } #advanced-search-top label.code span.desc { margin: 4px 0 4px; } #advanced-search-top #product-id { padding: 0; font-size: inherit; width: 96%; } #advanced-search-top label.price-range { float: left; width: 99%; padding: 4px 0 4px 0; clear: both; } #advanced-search-top label.price-range span.desc { float: left; width: 30%; } #advanced-search-top #price-range-t { float: right; width: 66%; } #advanced-search-top label.min-price { float: left; width: 48%; clear: both; } #advanced-search-top label.min-price span.desc { } #advanced-search-top label.max-price { float: right; width: 48%; } #advanced-search-top label.max-price span.desc { } * html #advanced-search-top label.min-price input { padding: 0; } * html #advanced-search-top label.max-price input { padding: 0; } #advanced-search-top label.cat-search { clear: both; float: left; width: 99%; padding: 4px 0 4px; } #advanced-search-top label.cat-search span.desc { float: left; width: 30%; } #advanced-search-top label.cat-search select { float: right; width: 66%; } #advanced-search-top label.search-class { clear: both; float: left; width: 99%; padding: 4px 0 4px; } #advanced-search-top label.search-class span.desc { float: left; width: 30%; } #advanced-search-top label.search-class select { float: right; width: 66%; } #advanced-search-top label.search-class input { float: right; width: 64%; } #advanced-search-top div { clear: both; text-align: center; width: 100%; margin: 8px auto; } #advanced-search-top div input { margin: 0 auto; width: auto; padding: 2px; } /* dm forms */ .datamate { margin: 16px 0; padding: 0; font-size: 0.9em; } .datamate fieldset { padding: 12px 15%; background: #eee; border: 1px solid #ccc; position: relative; } .datamate h3 { display: block; line-height: 1.4em; font-weight: bold; font-size: 1.2em; z-index: 1; } .datamate label { display: block; clear: both; margin: 3px 0; padding: 1px 0; font-size: 0.9em; float: left; width: 100%; } .datamate label span.desc { display: block; float: left; width: 30%; margin: 0 0; clear: both; line-height: 1.5em; } .datamate label.Checkbox input, .datamate label.Radio input { width: auto; float: none; margin-left: 10%; } .datamate input, .datamate textarea { float: right; width: 60%; font-size: inherit; font-size: 0.9em; padding: 1px; } .datamate select { margin: auto; font-size: 0.9em; float: right; width: 58%; } .datamate fieldset fieldset { background: #f9f9f9; padding: 6px 12px 12px; clear: both; } .datamate fieldset fieldset legend { font-size: 0.9em; } .datamate fieldset fieldset select { width: 60.5%; } .datamate fieldset fieldset label.Checkbox input, .datamate fieldset fieldset label.Radio input { margin-left: 9.5%; } .datamate div { text-align: center; clear: both; padding: 6px; clear: both; } .datamate div input { width: auto; float: none; padding: 0; } * html .datamate fieldset { padding-top: 0; } * html .datamate fieldset legend { position: relative; top: -0.64em; margin-left: -7px; } #newsletter-form { } /* basic mailcannon */ #newsletter-form fieldset { } #newsletter-form legend { } #newsletter-form label { } #newsletter-form input { } #newsletter-form button { width: auto; } /* forgot password form */ #request-new-pwd { font-size: 0.9em; background: #eee; border: 1px solid #ccc; padding: 4px 0; } #request-new-pwd fieldset { width: 60%; margin: 0 auto; } #request-new-pwd label { float: left; width: 49%; display: inline; text-align: left; } #request-new-pwd label.usr { } #request-new-pwd label.pwd { float: right; } #request-new-pwd label span.desc { display: block; } #request-new-pwd label input { width: 96%; padding: 0; margin: 3px 0; } #request-new-pwd div { clear: both; text-align: center; } #request-new-pwd div input { clear: both; padding: 2px; margin: 4px 0; } /* account forms - heavy duty lifting ----------------------------------------------------------------------------------------*/ /* new account registration */ #register-account { font-size: 0.9em; padding: 0; margin: 0; } #register-account fieldset { padding: 0; margin: 0 0 16px; } #register-account fieldset fieldset { background: #eee; border: 1px solid #ccc; padding: 4px 20%; } /* grouped inputs */ #register-account #login-details label { float: left; width: 100%; padding: 8px 0; } #register-account #login-details label span.desc { float: left; width: 36%; } #register-account #login-details label input { float: right; width: 60%; } #register-account #login-details fieldset { padding: 8px 0; margin: 8px 0; border-width: 1px 0; clear: both; overflow: hidden; } #register-account #login-details fieldset label { width: 49%; padding: 0; } #register-account #login-details fieldset label span.desc { width: 90%; display: block; padding-left: 2px; } #register-account #login-details fieldset label input { width: 96%; margin: 3px 0; } #register-account #login-details fieldset label.new-email { float: left; } #register-account #login-details fieldset label.new-email-conf { float: right; } #register-account #login-details fieldset label.pwd { float: left; } #register-account #login-details fieldset label.pwd-conf { float: right; } #register-account #personal-details label { float: left; width: 100%; padding: 4px 0; } #register-account #personal-details label span.desc { float: left; width: 36%; } #register-account #personal-details label input { float: right; width: 60%; } #register-account #personal-details label select { float: right; width: 61%; position: relative; } #register-account .addresses { } #register-account .delivery-address { } #register-account .delivery-address label.option { } /* check-box for same-as delivery if ever needed */ #register-account .delivery-address label.option input { width: auto; } #register-account .delivery-address #new-del-address { } /* div to contain the new delivery address if required */ #register-account .delivery-address label { float: left; width: 100%; padding: 4px 0; overflow: hidden; } #register-account .delivery-address label span.desc { float: left; width: 36%; } #register-account .delivery-address label input { float: right; width: 60%; } #register-account .delivery-address label select { float: right; width: 61%; } #register-account .delivery-address #del-post-code { width: 30%; margin-right: 30%; position: relative; } #register-account p { } #register-account label { } #register-account #referrer { } #register-account div.create input { padding: 2px; } /* wierd ie6 fixes */ * html option { display: none; } * html #register-account .delivery-address label.del-post-code { margin-right: -3px; overflow: hidden; } * html #register-account .delivery-address label.business-type { margin-right: -3px; overflow: hidden; } * html #register-account #personal-details label.ie6 #jt { margin-top: -1.6em; } /* =gallery */ #user-gallery form { clear: both; font-size: 0.9em; } #user-gallery form fieldset { clear: both; border-bottom: 0; margin: 8px 0; border-top: 1px solid ; } #user-gallery form fieldset.submit { border-top: 0; margin-top: 0; padding: 8px auto; } #user-gallery form label { clear: both; display: block; padding: 0.2em 0; } #user-gallery form label span.desc { float: left; text-align: left; width: 10em; padding: 0.35em 0; line-height: 1.2em; } #user-gallery form label input { margin-left: 0; } #user-gallery ul.galleries { overflow: hidden; list-style: none; margin: 0; padding: 16px 0; } #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; margin: 0 auto 6px; } #user-gallery ul.galleries .image img { display: block; width: 95%; margin: auto; } #user-gallery .single-image { width: 100%; } #user-gallery .single-image img { width: 100%; } #user-gallery .a { clear: left; } * html #user-gallery form legend { margin-left: -7px; } *:first-child+html #user-gallery form legend { margin-left: -7px; } * html #user-gallery form fieldset { padding: 8px; } *:first-child+html #user-gallery form fieldset { padding: 8px; } * html #user-gallery ul.galleries .image-link { width: 140px; } /* knowledge base ----------------------------------------------------------------------------------------*/ #knowledge-base { } /* body id - careful now */ #knowledge-base .kb-article { line-height: 1.3em; font-size: 0.9em; overflow: hidden; padding: 8px 0; margin: 8px 0; border: solid #ccc; border-width: 1px 0; } /* definition list for the article */ #knowledge-base .kb-article dt { float: left; width: 30%; font-weight: bold; clear: left; } #knowledge-base .kb-article dd { float: left; width: 68%; } #knowledge-base .kb-article dt.title { float: none; clear: both; font-size: 130%; width: auto; padding: 16px 0 0; } #knowledge-base .kb-article dd.issue { float: none; width: auto; } #knowledge-base .kb-article dd.details { float: none; width: auto; } #knowledge-base .kb-article .body { } #knowledge-base #content h2 { font-size: 1.2em; margin: 16px 0 0; } #knowledge-base .date { color: #999; } /* inside h2 w. subject line */ /* knowledge base search + list */ #kb-search { background: #eee; border: 1px solid #ccc; padding: 2px 0; font-size: 0.9em; } /* wide form */ #kb-search fieldset { width: 60%; margin: 0 auto; overflow: hidden; } #kb-search label { float: left; width: 100%; clear: left; padding: 4px; } #kb-search label span.desc { float: left; width: 36%; } #kb-search label span.input-info { clear: left; float: left; width: 36%; font-size: 0.6em; } #kb-search label input { float: right; width: 60%; margin-top: -1.1em; } /* keywords */ #kb-search select { float: right; width: 61%; padding: 0; } /* the main set of options */ #kb-search div { text-align: center; margin: 2px 0; } #kb-search div input { padding: 2px; } #knowledge-base .kb-records { } /* div containing the records table */ #knowledge-base .kb-records .pagination { } #knowledge-base table { margin: 16px 0; } #knowledge-base thead { } #knowledge-base thead tr { } #knowledge-base thead th { color: ; } #knowledge-base thead td { } #knowledge-base tbody { } #knowledge-base tbody tr { } #knowledge-base tbody th { } #knowledge-base tbody td { } #knowledge-base tbody .odd td { background: #efefef; } #knowledge-base tbody .even td { background: #fff; } /* e-commerce, the joy ----------------------------------------------------------------------------------------*/ /* the shopping basket */ #shopping-basket { } /* the shopping basket - div */ #shopping-basket legend { } /* display like an h1 */ #shopping-basket .product-list { overflow: hidden; width: 100%; } #shopping-basket .product-list li { } #shopping-basket .product-list li h3 { } #shopping-basket .product-list li img { } #shopping-basket .product-list li .item-info { } #shopping-basket .product-list .item-info .price { color: #990000; } #shopping-basket .product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } #shopping-basket .product-list li .item-options { clear: both; } /* contains quantity, update and remove */ #shopping-basket .product-list li .item-options label { display: inline; } /* this is the quantity field */ #shopping-basket .product-list li .item-options label input { padding: 1px; text-align: center; /*font-size: 1em;*/ } #shopping-basket .product-list li .item-options * { display: inline; vertical-align: middle; } /* update + remove */ #shopping-basket table { clear: both; } #shopping-basket table tbody { } #shopping-basket table tbody tr { } #shopping-basket table tbody td { background: #eee; } #shopping-basket table tbody th { background: #eee; } #shopping-basket table tfoot { } #shopping-basket table tfoot tr { } #shopping-basket table tfoot td { background: #ccc; font-weight: bold; } #shopping-basket table tfoot th { background: #ccc; } #shopping-basket .additional { padding: 4px; font-size: 0.8em; background: #eee; border: 1px solid #ccc; } /* fieldset for extra notage with shopping */ #shopping-basket .additional label { margin: 3px 11%; } #shopping-basket .additional textarea { margin: 3px auto; width: 80%; font-size: inherit; } #shopping-basket .proceed { text-align: center; } /* container for buttons */ #shopping-basket .proceed * { display: inline; vertical-align: bottom; } #shopping-basket .proceed .back { display: inline; } #shopping-basket .proceed .checkout-link { display: inline; width: auto; } /* mini basket widget */ #mini-basket { margin: 20px 20px 12px; background: url(/utils/template-bits/gfx/simple/thin-border.png) no-repeat top; } #mini-basket .btm { padding: 12px; background: url(/utils/template-bits/gfx/simple/thin-border-btm.png) no-repeat bottom; } #mini-basket table { text-align: left; } #mini-basket tbody {} #mini-basket tbody th { font-weight: bold; background: #fff; } #mini-basket tbody td { font-weight: normal; background: #fff; } #mini-basket tfoot {} #mini-basket tfoot th { font-weight: bold; } #mini-basket tfoot td { font-weight: normal; color: #990000; } #mini-basket .links { } /* checkout ------------------------------------------------------------------------------*/ #checkout { clear: both; } /* step1 */ .step1 { } .step1 { font-size: 0.9em; } /* containing div with class name for step */ .step1 label { display: block; } .step1 fieldset fieldset { margin: 0; background: #eee; border: 1px solid #ccc; padding: 4px 0; } .step1 #personal-details { padding: 4px 20%; margin-top: 16px; } .step1 #personal-details label { float: left; width: 100%; clear: left; padding: 4px 0; } .step1 #personal-details label span.desc { float: left; width: 36%; display: block; } .step1 #personal-details label input { float: right; width: 60%; } .step1 #personal-details label select { float: left; width: 6em; margin-left: 9px; display: inline; padding: 0; } .step1 .addresses { background: #eee; border: 1px solid #ccc; padding: 8px 0; float: left; margin: 16px 0; } .step1 .addresses p { padding: 0 5%; } .step1 .addresses fieldset { border-width: 1px 0; padding: 0; margin: 0; display: inline; width: 100%; } .step1 .addresses fieldset.delivery-address { float: left; width: 224px; margin: 0 0 0 28px; padding: 8px 0; } .step1 .addresses fieldset.billing-address { float: right; width: 224px; margin: 0 28px 0 0; padding: 8px 0; } .step1 .addresses fieldset label { float: left; width: 100%; overflow: hidden; padding: 4px 0; clear: left; text-align: right; } .step1 .addresses fieldset label span.desc { float: left; width: 30%; display: block; text-align: left; } .step1 .addresses fieldset label select { width: 100%; float: left; clear: left; padding: 0; } .step1 .addresses fieldset label input { width: 145px; clear: none; } .step1 .addresses fieldset label.post-code span { float: left; width: 30%; display: block; text-align: left; } .step1 .addresses fieldset label.select span.desc { width: 100%; } .step1 .addresses fieldset label.post-code input { width: 78px; margin-right: 30%; display: inline; } .step1 .addresses fieldset #new-del-address { width: 100%; clear: left; float: left; } /* overflow hidden is important for the js effect to work */ .step1 .addresses fieldset #new-bill-address { width: 100%; clear: left; float: left; } .step1 #additional { padding: 4px 0; margin-bottom: 16px; clear: both; } .step1 #additional label { width: 60%; padding: 4px 0; margin: 0 auto; } .step1 #additional textarea { width: 100%; height: 4em; margin: 4px 0; } .step1 #additional label input { width: 50%; } .step1 .proceed { text-align: center; } .step1 .proceed * { display: inline; padding: 0; margin: 0; vertical-align: bottom; } * html .step1 .addresses fieldset #new-del-address { height: 150px; } /* ie needs a fixed pixel height for the effect to work else it returns 'auto' i.e. NaN */ * html .step1 .addresses fieldset #new-bill-address { height: 150px; } * html .step1 #personal-details label { margin-right: -3px; } /* bizarre fix for duplicate characters bug in AIEEEEEEEE */ * html .step1 .addresses fieldset label.post-code { margin-right: -3px; } #root form #additional div.file { border: solid #ccc; border-width: 1px 0; padding: 6px 0; margin: 6px auto 12px; overflow: hidden; width: 60%; } #root form #additional div.file span { font-weight: bold; } #root form #additional div.file label { width: 100%; clear: both; padding: 0; text-align: left; font-weight: bold; } #root form #additional div.file label span.desc { font-weight: normal; float: left; width: 30%; } #root form #additional div.file label.file-title input { float: left; width: 68%; vertical-align: top; } #root form #additional div.file label.file-browse input { float: left; width: 55.6%; vertical-align: top; } #root form #additional div.file label.file-title { display: block; padding: 4px 0; } #root form #additional div.file label.file-browse { display: block; padding: 4px 0; } .hidden-Enum, .hidden-Link { position:absolute; left:-999em; } * html #root form #additional div.file label.file-title input { float: right; width: 66%; } * html #root form #additional div.file label.file-browse input { float: right; width: 67%; padding: 1px; } /* step2 */ .step2 { } .step2 .msg { } .step2 .msg p { line-height: 1.4em; } .step2 .msg input { padding: 2px; } .step2 .order-info { overflow: hidden; font-size: 0.9em; padding: 16px 0 0; } .step2 .order-info dt { float: left; width: 30%; font-weight: bold; clear: left; } .step2 .order-info dd { float: left; width: 60%; } .step2 .addresses { background: #fff; border: 0; clear: both; text-align: center; margin: 32px 0; float: left; width: 100%; font-size: 0.9em; } .step2 .addresses .delivery-address { padding: 16px 0; float: left; width: 40%; margin: 0 4%; border: solid #ccc; border-width: 1px 0; display: inline; } .step2 .addresses .billing-address { padding: 16px 0; float: right; width: 40%; margin: 0 4%; border: solid #ccc; border-width: 1px 0; display: inline; } .step2 .addresses br { display: block; } .step2 .order-summary { clear: both; } .step2 .order-summary thead { } .step2 .order-summary thead tr { } .step2 .order-summary thead th { color: ; background: ; } .step2 .order-summary tbody { } .step2 .order-summary tbody tr { } .step2 .order-summary tbody th { } .step2 .order-summary tbody td { } .step2 .order-summary tbody .odd td { background: #efefef; } .step2 .order-summary tbody .even td { background: #fff; } .step2 .order-summary tfoot { } .step2 .order-summary tfoot tr { } .step2 .order-summary tfoot th { background: #ccc; } .step2 .order-summary tfoot td { background: #ccc; font-weight: bold; } #payment .payform fieldset { text-align: center; font-size: 0.9em; } #payment .payform input { padding: 2px; } #payment fieldset { } #payment legend { } #payment p { } #payment button { } /* payment partner referral */ /* step3 - call back */ .step3 { } .step3 .msg { } .step3 .order-info { overflow: hidden; font-size: 0.9em; padding: 16px 0 0; } .step3 .order-info dt { float: left; width: 30%; font-weight: bold; clear: left; } .step3 .order-info dd { float: left; width: 60%; } .step3 .addresses { background: #fff; border: 0; clear: both; text-align: center; margin: 32px 0; float: left; width: 100%; font-size: 0.9em; } .step3 .addresses .delivery-address { padding: 16px 0; float: left; width: 40%; margin: 0 4%; border: solid #ccc; border-width: 1px 0; display: inline; } .step3 .addresses .billing-address { padding: 16px 0; float: right; width: 40%; margin: 0 4%; border: solid #ccc; border-width: 1px 0; display: inline; } .step3 .addresses br { display: block; } .step3 .order-summary { clear: both; } .step3 .order-summary thead { } .step3 .order-summary thead tr { } .step3 .order-summary thead th { color: ; background: ; } .step3 .order-summary tbody .odd td { background: #efefef; } .step3 .order-summary tbody .even td { background: #fff; } .step3 .order-summary tfoot { } .step3 .order-summary tfoot tr { } .step3 .order-summary tfoot th { background: #ccc; } .step3 .order-summary tfoot td { background: #ccc; font-weight: bold; } /* order pad */ #order-pad { text-align: center; margin: 16px 0; } #order-pad input { padding: 2px; } /* enquiry basket ---------------------------------------------------------------------------------------*/ /* the enquiry basket */ #enquiry-basket { } #enquiry-basket fieldset { } #enquiry-basket legend { } /* display like an h1 */ #enquiry-basket ul.product-list { list-style: none outside; } #enquiry-basket .product-list li { } #enquiry-basket .product-list li h3 { } #enquiry-basket .product-list li img { } #enquiry-basket .product-list li .item-info { } #enquiry-basket .product-list .item-info .price { color: #990000; } #enquiry-basket .product-list .item-info .value { color: #990000; font-weight: bold; font-size: 110%; } #enquiry-basket .product-list li .item-options { clear: both; } /* contains quantity, update and remove */ #enquiry-basket .product-list li .item-options label { display: inline; } /* this is the quantity field */ #enquiry-basket .product-list li .item-options label input { padding: 1px; text-align: center; } #enquiry-basket .product-list li .item-options * { display: inline; } /* update + remove */ #enquiry-basket table { clear: both; } #enquiry-basket table tbody td { background: #eee; } #enquiry-basket table tbody th { background: #eee; } #enquiry-basket table tfoot { } #enquiry-basket table tfoot tr { } #enquiry-basket table tfoot td { background: #ccc; font-weight: bold; } #enquiry-basket table tfoot th { background: #ccc; } #enquiry-basket #additional { padding: 4px; font-size: 0.8em; background: #eee; border: 1px solid #ccc; } /* fieldset for extra notage with enquiry */ #enquiry-basket #additional label { padding: 3px 55px; } #enquiry-basket #additional textarea { margin: 3px auto; width: 80%; font-size: inherit; } #enquiry-basket .proceed { text-align: center; } /* container for buttons */ #enquiry-basket .proceed * { display: inline; vertical-align: bottom; } #enquiry-basket .proceed .back { display: inline; } /* quick order pad - two steps ------------------------------------------------------------------------------*/ /* step1 - choose products */ #quick-order fieldset { margin: 0 10%; } #quick-order form.step1 { margin: 12px 0; padding: 4px 0; background: #eee; border: 1px solid #ccc; font-size: 0.9em; clear: left; } #quick-order form.step1 fieldset { width: 60%; margin: 0 auto; } #quick-order legend { } #quick-order ol { margin: 0 auto; } #quick-order li { padding: 2px 0; } #quick-order label { } #quick-order div { margin: 4px 0 8px 0; } #quick-order div input { width: auto; padding: 2px; } /* step2 - choose quantities and add to basket */ #quick-order .back { font-size: 0.9em; } #quick-order form.step2 { background: none; font-size: 0.9em; } /* enclosing div */ #quick-order table { } #quick-order table td, #quick-order table th { padding: 4px; } #quick-order table thead { } #quick-order table thead tr { } #quick-order table thead th { font-weight: normal; background: ; color: ; } #quick-order table thead td { } #quick-order table tbody { } #quick-order table tbody tr { } #quick-order table tbody th { font-weight: normal; } #quick-order table tbody .odd td { background: #efefef; } #quick-order table tbody .even td { background: #fff; } #quick-order table tbody td input { text-align: center; } /* footer, layout taken care of up above ---------------------------------------------------------------------------------------*/ #footer { text-align: center; color: #fff; font-size: 0.7em; } #footer #back-to-top { position: absolute; left: 0; top: -1em; width: 254px; text-align: center; font-size: 120%; } #footer #back-to-top a { padding: 0 20px; } #footer #copyright { } /* javascript css */ .toggle-box { margin: 0 27px; padding: 0 0 0 8px; overflow: hidden; } .toggle-box h3 { float: left; margin: 0 4px -1px 0; font-size: 0.8em; font-weight: normal; position: relative; z-index: 10; } .toggle-box h3 a { display: block; border: 1px solid #999; border-top-color: #999; padding: 0 4px; background: #cecfce; color: #000; } .toggle-box h3 a:visited { color: #000; } .toggle-box h3 a:hover { color: #000; } .toggle-box h3 a:active { outline: none; } .toggle-box h3 a:focus { outline: none; } .stretchy-search, .stretchy-browse { clear: left; } h3.on a { border-top: 1px solid #c00; background: #fff; }