/* Quicksite CSS Definition */ /* global reset */ body,html, h1,h2,h3,h4,h5,h6,p,blockquote, ul,ol,li,dl,dt,dd, .nc,.nc thead,.nc tbody,.nc tfoot,.nc tr,.nc th,.nc td, form,fieldset,label,legend, input,select,textarea { padding: 0; margin: 0; } /* body definition -> quietly confident with a hint of hazelnut and mint */ body { color: ; background-color: #fff; font: 100.01%/normal Arial, sans-serif; text-align: center; } /* column layouts - ids and classes ------------------------------------------------------------------------------*/ #root { margin: 0 auto; text-align: left; width: 850px; } #top { float: left; width: 100%; color: ; background: url(/utils/template-bits/gfx/tabs/rounded-line.png) repeat-x left 102%; } * html #top { background: url(/utils/template-bits/gfx/tabs/rounded-line.gif) repeat-x left bottom; position: relative; } #layout { float: left; width: 100%; } /* faux-column, repeated background etc.. layout tool */ #content { clear: both; background: #fff; padding: 12px 12px 12px 0; } /* used with #content to create alternative layouts */ #secondary-content { background: #fff; } #tertiary-content { background: #fff; font-size: 0.7em; text-align: center; padding: 1px; } /* for three column layouts or footer section navigation */ #footer { width: 100%; clear: both; } .sidebar-right #content-wrapper { overflow: hidden; } * html .ie-wrap { float: left; width: 100%; } /* alternators */ .sidebar-left #content-wrapper { width: 100%; float: right; margin-left: -180px; } .sidebar-left #content { margin-left: 180px; } .sidebar-left #secondary-content { clear: left; float: left; width: 180px; } .sidebar-left #tertiary-content { clear: left; float: left; width: 180px; } .sidebar-right #content-wrapper { width: 100%; float: left; margin-right: -250px; } .sidebar-right #content { margin-right: 250px; } .sidebar-right #secondary-content { clear: right; float: right; width: 248px; } .sidebar-right #tertiary-content { clear: both; } .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 #content { padding: 12px 0; } .no-sidebar #secondary-content { float: none; clear: both; } .no-sidebar #tertiary-content { float: none; clear: both; } /* elements ------------------------------------------------------------------------------*/ /* main header */ #top h2 { clear: both; font-size: 1.4em; padding: 0; margin: 0; background: #fff url() no-repeat right center; } /* reserved for #top - regular text inside it is the page title etc... */ #top h2 a { margin: 0; color: #e3f2f5; } #top h2 a, #top h2 a:visited { color: #e3f2f5; } #top h2 a:hover, #top h2 a:active { color: #e3f2f5; } /* optional hover state */ #top h2 img { display: inline; } /* site logo */ /* pages list */ #top-nav { float: right; padding: 2px 0 4px; margin: 0 12px 0 200px; font-size: 0.7em; font-weight: bold; list-style: none; } /* links in top-menu category including home page link */ #top-nav li { float: left; margin: 0 0 0; padding: 0 8px; display: inline; } #top-nav li.title { position: absolute; top: -999em; } #top-nav li a { color: #fff; } #top-nav li a:visited { color: #eee; } #top-nav li a:hover { color: #fff; text-decoration: underline; } #top-nav li a:active { color: #fff; } /* l10n menu */ #top .l10n { position: relative; z-index: 400; padding: 0; } #top #l10n-top a.l10n-toggle { border: 1px solid ; border-width: 1px 1px 0; padding: 1px 4px 1px; position: relative; z-index: 500; background: ; } #top #l10n-top:hover a.l10n-toggle, #top #l10n-top.showOpts a.l10n-toggle { border-color: ; text-decoration: underline; } #top #l10n-top .l10n-opts-wrap { width: 160px; background: ; position: absolute; right: 0; top: 99%; z-index: 400; font-size: small; border: 1px solid ; display: none; } #top #l10n-top:hover .l10n-opts-wrap, #top #l10n-top.showOpts .l10n-opts-wrap { display: block; overflow: hidden; } #top #l10n-top .l10n-opts-wrap ul { padding: 6px; } #top #l10n-top .l10n-opts-wrap li { float: none; text-align: left; display: block; padding: 1px; margin: 0; } #top #l10n-top .l10n-opts-wrap a { padding: 2px; display: block; margin: 0; color: ; text-decoration: none; } #top #l10n-top .l10n-opts-wrap a img { display: inline; margin: 0; } #top #l10n-top .l10n-opts-wrap .current a { background: ; color: ; cursor: default; } #top #l10n-top .l10n-opts-wrap a:hover { background: ; color: ; } #main-nav { background: transparent; float: left; width: 100%; clear: both; } /* any links nav */ #page-nav { background: #fff; float: left; width: 100%; font-size: 0.7em; font-weight: bold; margin: 0; text-align: center; list-style: none; } /* page navigation */ #page-nav li { float: left; padding: 0 0 0 6px; margin: 0 1px; background: url(/utils/template-bits/gfx/tabs/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; background-image: url(/utils/template-bits/gfx/tabs/tab-right.png); background-repeat: no-repeat; background-position: right top; padding: 0 6px 0 0; } #page-nav li span.nolink { padding: 6px 6px 5px 0; line-height: 1.2em; line-break: none; } #page-nav li a { display: block; padding: 6px 0 5px 0; line-height: 1.2em; line-break: none; color: #fff; } #page-nav li a:link { color: #fff; } #page-nav li a:visited { color: #fff; } #page-nav li a:hover { text-decoration: underline; color: #fff; } #page-nav li a:active { color: #fff; } #page-nav li.location a { font-weight: bolder; } #page-nav ul { position: absolute; top: -999em; } /* 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 { } /* sidebar advanced search for all ages */ #top-search { margin: 0 0; padding: 5px 0 0; font-size: 0.74em; clear: both; text-align: center; background: url(/utils/template-bits/gfx/tabs/rounded-line.png) repeat-x top; } * html #top-search { background: url(/utils/template-bits/gfx/tabs/rounded-line.gif) repeat-x top; } #top-search div { border: solid #fff; border-width: 1px 0; padding: 3px 12px 1px; margin: 0; background: ; } #top-search form { display: inline; margin-right: 0.6em; } #top-search fieldset { display: inline; } #top-search a { margin: 0 4px 0; font-weight: bold; color: #fff; } #top-search a:hover { color: #fff; } #top-search label { margin: 0 0 0; padding: 1px 0; font-weight: normal; } #top-search label span.desc { margin: 0 4px; font-weight: bold; } #top-search input { margin: 0 0 0; font-size: inherit; font-size: 0.9em; padding: 1px; } #top-search select { margin: 0 0 0; width: 16em; font-size: 0.9em; } #top-search input.submit { margin: 0 4px 0 0; width: auto; padding: 1px; } * html #top-search input { padding: 0; } * html #top-search input.submit { padding: 1px 1px 0; } * html #top-search div { padding-bottom: 3px; } #top-search option { padding: 0 2px; margin-top: 2px; } #top-search option.child { padding-left: 12px; font-size: 0.9em; margin-bottom: 2px; } /* news ticker/reel */ .news { height: 12em; margin: 0; padding: 0 0 1px; overflow: auto; } #news-feed { padding: 0; position: relative; z-index: 300; } #news-feed h4 { font-size: 0.8em; border-bottom: 1px solid ; padding: 1px 0 6px; margin: 0 11px; } #news-feed p { margin: 0 11px; padding: 6px 0; font-size: 0.8em; } /* headers */ #content h1 { font-size: 1.7em; line-height: 1.1em; border-bottom: 2px solid ; color: ; margin: 0 0 16px 0; padding: 1px 0; } /* page title */ h2 { font-size: 1.6em; margin: 16px 0; } h3 { font-size: 1.3em; line-height: 1em; margin: 0 0 10px; } h4 { font-size: 1em; margin: 0 0 6px; } /* rarely get lower than this */ /* 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 ; } /* image */ img { display: block; border: 0; } *:first-child+html img.fl-r { position: relative; } /* 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 */ q { font-style: oblique; } q:before, q:after { content: ''; } /* basic links */ a:link { color: ; text-decoration: none; } a:visited { color: ; text-decoration: none; } a:hover { color: ; text-decoration: underline; } a:active { color: ; text-decoration: none; } .box fieldset { border: 0; padding: 12px; } form { border: 0; } fieldset { border: 0; } fieldset fieldset { border: 2px solid ; background: ; padding: 16px; } form h3 { font-size: 1.1em; padding: 6px; background: ; color: ; } /* 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.nc { caption-side: top; margin: 0 auto 12px; width: 100%; font-size: 0.9em; clear: both; border: 1px solid ; } table.nc caption { text-align: left; padding: 1px 4px; font-weight: bold; font-size: 1em; color: ; } table.nc colgroup th { speak-header: always; } table.nc rowgroup th { speak-header: once; } table.nc td, table.nc th { padding: 4px; } table.nc thead th { font-weight: normal; background: ; color: ; } table.nc tbody { font-size: 0.9em; } table.nc tbody th { font-weight: normal; background: #efefef; } table.nc tbody td { margin: 2px; background: #efefef; } table.nc tbody .odd td { background: #efefef; } table.nc tbody .even td { background: ; } table.nc tfoot { font-size: 0.9em; } table.nc td.ra { text-align: right; } table.nc td.ca { text-align: center; } table.nicelist tbody th { font-weight: bold; background: ; } table.discounts { width: auto; } #past-order-filter label { margin-right: 16px; } #past-order-filter .submit { vertical-align: middle; } #my-orders form.small, #my-orders form.small fieldset { border: 0; padding: 0; margin: 0; } /* 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; } .tar { text-align: right; } .tal { text-align: left; } .tac { text-align: center; } /* multi-use class names that appear on multiple page types ------------------------------------------------------------------------------*/ .body { font-size: 0.75em; padding: 0; } /* container for FCKin editor's output */ .body ul { list-style: square outside; margin: 12px 12px 12px 22px; } .body table { width: auto; } .breadcrumbs { font-size: 0.75em; float: right; width: 25em; text-align: right; } .breadcrumbs a { color: ; } .breadcrumbs a:visited { color: ; } .breadcrumba a:hover { color: ; text-decoration: underline; } .breadcrumba a:visited:hover { color: ; } /* home page sidebar */ #secondary-content .box { margin: 12px 0 12px 12px; padding: 0; background: ; border: 1px solid ; } #secondary-content .box h3 { font-size: 1.1em; padding: 6px; background: ; color: ; } #secondary-content .box ul { font-size: 0.75em; padding: 6px; } /* regislation and forgot links */ #secondary-content .box a { color: ; } #login-form { font-size: 0.9em; } #login-form label { float: left; width: 90%; margin-left: 5%; 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: 62%; } #login-form label.remember-user span.desc { float: none; width: auto; } #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; } .image-links { clear: both; text-align: center; padding: 1px 0; } .image-links a { display: inline; padding: 0; margin: 0; } .image-links a img { display: inline; } /* advanced search at the top of search results */ #advanced-search-top { margin: 0 0 8px; padding: 0 2px 2px; } #advanced-search-top fieldset { background: ; border: 2px solid ; margin: 0 auto; padding: 8px 0; } #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 { margin: 0; margin-left: 3%; display: inline; padding: 0 0 4px; font-size: 0.9em; vertical-align: middle; float: left; width: 16em; } #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; width: 90%; } #advanced-search-top select { margin: auto; width: 92%; } #advanced-search-top div { text-align: center; float: left; width: 8em; margin: 20px 0 0; } #advanced-search-top div input { margin: 0 auto; width: auto; padding: 2px; } * html #advanced-search-top input { padding: 0; } /* 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, .addall { text-align: center; padding: 12px; margin: 0; clear: both; display: block; } .add-all input, .addall input { padding: 2px; } /* definition list for product info */ .item-info { display: block; margin-bottom: 12px; } /* dl */ .item-info .price { color: #900;} .item-info .value { color: #900; font-weight: bold; font-size: 110%; } .item-info .min-qty { color: #999; } .item-info .min-val { color: #999; } #content .product-list h3 { background: none; color: ; } div.hide, .hidden-Enum { position: absolute; left: -999em; } /* 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: #900;} #qo-sl1 .product-list .item-info .value { color: #900; 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; } #qo-sl1 .product-list form img { 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-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 12px; padding: 0; line-height: 1em; } #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: #900;} #qo-2col .product-list .item-info .value { color: #900; font-weight: bold; font-size: 110%; } #qo-2col .product-list .item-info .min-qty { color: #999; } #qo-2col .product-list .item-info .min-val { color: #999; } #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-bigpic .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 0 0 0; padding: 12px 0; } #qo-bigpic .product-list li { float: left; display: block; width: 100%; padding: 14px 0; margin: 0 0 -1px 0; text-align: center; border: solid ; border-width: 1px 0; font-size: 0.8em; overflow: visible; } #qo-bigpic .product-list>li { } #qo-bigpic .product-list li.odd { clear: both; } #qo-bigpic .product-list li.even { /*float: right; clear: right;*/ } #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; overflow: hidden; margin: 0 0 6px 0; padding: 14px 0 0; 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: #900;} #qo-bigpic .product-list .item-info .value { color: #900; font-weight: bold; font-size: 110%; } #qo-bigpic .product-list .item-info .min-qty { color: #999; } #qo-bigpic .product-list .item-info .min-val { color: #999; } #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; } #qo-bigpic .product-list .item-options { line-height: 28px; } #qo-bigpic .product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */ #qo-bigpic .product-list form { margin: 0; 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-tc1 .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 1px 0 1px; padding: 1px 0; text-align: center; } #qo-tc1 .product-list li { float: left; width: 23.5%; padding: 0; margin: 6px 1% 6px 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; margin-left: 0; margin-right: 2%; } #qo-tc1 .product-list li.two { margin-left: 0; margin-right: 2%; } #qo-tc1 .product-list li.three { margin-left: 0; margin-right: 0; } #qo-tc1 .product-list li.four { float: right; margin: 6px 0; } #qo-tc1 .product-list h3 { margin: 0; padding: 8px 16px 2px; line-height: 1.2em; font-size: 1.2em; height: 2.4em; 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.4em; height: auto; } #qo-tc1 .product-list h3 a { text-decoration: underline; float: none; color: ; } #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 .body-text { height: 3.65em; } #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: #f00; } #qo-tc1 .product-list .item-info .value { color: #f00; font-weight: bold; font-size: 110%; } #qo-tc1 .product-list .item-info .min-qty { color: #999; } #qo-tc1 .product-list .item-info .min-val { color: #999; } #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 abbr { } #qo-tc1 .product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; } #qo-pp .product-list { clear: both; float: left; width: 100%; list-style: none; margin: 1px 0 1px; padding: 1px 0; text-align: center; } #qo-pp .product-list li { float: left; width: 19.2%; padding: 0; margin: 6px 1% 6px 0; font-size: 0.7em; background: url(/utils/template-bits/gfx/product-lists/white-corner-right-top.png) no-repeat right top; } #qo-pp .product-list li.one { clear: both; margin-left: 0; margin-right: 1%; } #qo-pp .product-list li.two { margin-left: 0; margin-right: 1%; } #qo-pp .product-list li.three { margin-left: 0; margin-right: 1%; } #qo-pp .product-list li.four { margin-left: 0; margin-right: 0; } #qo-pp .product-list li.five { float: right; margin: 6px 0; } #qo-pp .product-list h3 { margin: 0; padding: 8px 8px 2px; line-height: 1.2em; font-size: 1.2em; height: 2.4em; background: url(/utils/template-bits/gfx/product-lists/white-corner-left-top.png) no-repeat left top; } #qo-pp .product-list li>h3 { min-height: 2.4em; height: auto; } #qo-pp .product-list h3 a { text-decoration: underline; float: none; color: ; text-transform: capitalize; } #qo-pp .product-list .prod-info { overflow: hidden; height: 19em; margin: 2px 2px; background: #fff; padding: 6px 8px 3px; } #qo-pp .product-list a { display: inline; } /* the link surrounding the image */ #qo-pp .product-list a img { padding: 0; margin: 4px auto; } #qo-pp .product-list a.more-info { display: inline; text-align: center; vertical-align: middle; color: #000; } #qo-pp .product-list a.more-info img { margin: 0; display: inline; vertical-align: middle; } #qo-pp .product-list .body-text { height: 3.65em; overflow: hidden; } #qo-pp .product-list .item-info { text-align: center; overflow: hidden; padding: 2px 0 0; margin: 0; } #qo-pp .product-list .item-info * { display: inline; margin: 0; padding: 0; } #qo-pp .product-list .item-info dt { text-align: right; padding: 0 0 0 12px; } #qo-pp .product-list .item-info dd { text-align: left; padding: 0 12px 0 0; } #qo-pp .product-list .item-info .price, #qo-pp .product-list .item-info .value { color: #f00; font-weight: bold; font-size: 110%; text-transform: uppercase; } #qo-pp .product-list .item-info .min-qty { color: #999; } #qo-pp .product-list .item-info .min-val { color: #999; } #qo-pp .product-list .item-info abbr { border-bottom: 0; text-decoration: none; } #qo-pp .product-list .item-options { padding: 0; margin: 0; } #qo-pp .product-list .item-options * { vertical-align: middle; } /* options like quantity, add to basket/faves */ #qo-pp .product-list form { margin: 0; padding: 0; display: inline; vertical-align: middle; } #qo-pp .product-list form * { vertical-align: middle; width: auto; float: none; clear: none; } #qo-pp .product-list form img { display: inline; } #qo-pp .product-list form label { margin: 0 6px 0 0; display: inline; } #qo-pp .product-list form>label { margin: 0; } #qo-pp .product-list form label abbr { } #qo-pp .product-list form label input { text-align: center; font-size: 0.9em; padding: 1px; } #qo-pp .favourites .prod-info { height: 24em; } /* 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 */ /* custom PDV related */ #product .related { float:left; } #product .related li { list-style: none; } #product .related li img { float: left; margin-right: 10px; } #product .related li a { font-size: 0.9em; float: left; } /* 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 ; border-width: 1px 0; background: ; 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: ; } .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: ; } * html .prev, * html .next { margin-top: 0; } *:first-child+html .prev, *:first-child+html .next { margin-top: 0; } .bold-pagination .pagination { float: left; width: 70%; display: inline; clear: none; margin: 0; border: 0; } .bold-pagination .nb { float: right; display: inline; clear: none; margin: 8px 0; width: 160px; text-align: right; } .bold-pagination .next, .bold .back { float: right; margin-left: 8px; display: inline; } /* 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; } /* 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; } #redundant-nav { float: left; } /* links in the redundant category i.e. those in the footer */ #redundant-nav li { float: left; padding-right: 20px; } #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 { } /* 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 ; 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 ; border-width: 0 1px; } #content .account-links li a { padding: 2px 3px; } /* pages ------------------------------------------------------------------------------*/ .category { float: right; clear: right; width: 49%; } .category .product-list { } .category .product-list li { overflow: hidden; float: none; width: auto; clear: left; } .category .product-list li img { width: 80px; } /* category ------------------------------------------------------------------------------*/ .sub-category-list { list-style: none outside; } .sub-category-list li { } .sub-category-list li h3 { } .sub-category-list li p { } /* short desc */ .category-list ul { list-style: none; padding: 0; margin: 0; font-size: 0.8em; } .category-list li { background: url(/utils/template-bits/gfx/tabs/cat-img.png) no-repeat left top; width: 24.5%; float: left; height: 120px; position: relative; } .category-list li img { position: absolute; left: 8px; top: 6px; } .category-list li span { text-decoration: underline; vertical-align: middle; margin: 30px 4px 0 100px; display: block; height: auto; cursor: pointer; } *:first-child+html .category-list ul { width: 100%; } /* product details on single product page */ .product-details table { border-collapse: separate; clear: left; font-size: 0.8em; width: auto; margin: 0 0 12px 0; } /* the quantity discounts */ .product-details thead th { background: ; color: ; } .product-details caption { display: none; } .product-details .item-info { overflow: hidden; line-height: 1.2em; margin: 0; padding: 0 0 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-details .box { float: left; width: 26em; border: 2px solid ; background: ; padding: 16px; } .product-details .box h3 { font-size: 1.1em; padding: 6px; background: ; color: ; } .product-details .box div { padding: 8px; } .product-details img.embedleft { float: left; padding: 0 8px 8px 0; } .item-options { vertical-align: middle; text-align: center; clear: both; } .item-options h3 { text-align: center; font-size: 90%; } .item-options form { display: inline; } .item-options form * { vertical-align: middle; display: inline; } .item-options form label { font-size: 0.9em; } .item-options form input { text-align: center; } .item-options form option { display: block; } /* list of news articles ------------------------------------------------------------------------------*/ .articles { } .articles ul { float: left; width: 100%; list-style: none; clear: both; padding: 1px 0; margin: 0 0 24px; } .articles li { float: left; width: 100%; clear: both; padding: 6px 0; margin: 24px 0 0; } .articles .date { font-size: 0.7em; font-style: italic; color: ; } .articles .headline { font-size: 1.2em; border-bottom: 1px solid ; margin: 0; padding: 1px; } .articles .strapline { text-transform: small-caps; } .articles li div { font-size: 0.8em; } /* single news item ------------------------------------------------------------------------------*/ .article .date { font-size: 0.7em; font-style: italic; color: ; } .article .strapline { text-transform: small-caps; font-style: italic; font-size: 1.2em; margin: 0; padding: 1px;} .article .body { padding: 8px 0 16px; margin: 0 0 16px; } /* 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 { clear: both; } .approve-orders table { margin: 16px 0; } .approve-orders tbody .odd td { background: #efefef; } .approve-orders tbody .even td { background: ; } .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 tbody .odd td { background: #efefef; } .order-history tbody .even td { background: ; } .order-history .order-detail { } .order-history a { text-decoration: underline; } .order-history td form { display: inline; } /* reference update and approval */ /* 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: #900;} .order-detail dd { float: left; width: 60%; } .order-detail dd.value { color: #900; } .order-detail h3 { clear: both; 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 caption { } .order-detail thead { } .order-detail thead tr { } .order-detail thead th { padding: 4px; } .order-detail thead td { } .order-detail tbody { margin: 16px auto; } /* order summary */ .order-detail tbody tr { } .order-detail tbody th { } .order-detail tbody td { padding: 4px; } .order-detail tbody .odd td { background: #efefef; } .order-detail tbody .even td { background: ; } .order-detail tfoot { } .order-detail tfoot tr { } .order-detail tfoot th { } .order-detail tfoot td { } .order-detail table a { text-decoration: none; } /* user details */ #account-details { margin: 12px auto; width: 600px; padding: 4px 0; font-size: 0.9em; } /* the form */ #account-details fieldset { border: 0; background: none; } #account-details fieldset fieldset { background: ; border: 1px solid ; width: auto; margin: 0 0 8px 0; padding: 8px 0; } #account-details fieldset fieldset legend { } #account-details label { float: left; width: 90%; margin-left: 5%; padding: 4px 0; display: inline; } #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 .account-info dd label { } #account-details .account-info dd input { } #account-details .account-info dd select { } #account-details .addresses { } #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 5%; 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; width: 600px; padding: 4px 0; text-align: center; font-size: 0.9em; } #new-address fieldset { background: ; border: 1px solid ; } #new-address h3 { text-align: left; } #new-address label { float: left; width: 90%; display: inline; padding: 4px 0; margin-left: 5%; line-height: 24px; } #new-address label span.desc{ float: left; clear: left; width: 27%; 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.4%; } #new-address div { clear: both; padding: 12px; } #new-address div input { padding: 2px; margin: 4px 0; } * html #new-address #new-postcode { margin-right: 30.1%; } #new-address .address-lookup, #edit-address .address-lookup { margin-left: 33%; } .address-lookup { clear: both; margin: 4px 0 4px 37%; display: inline; float: left; } /* single address edit form */ #edit-address { margin: 8px auto; width: 600px; padding: 4px 0; text-align: center; font-size: 0.9em; } #edit-address fieldset { background: ; border: 1px solid ; margin: 0 auto; } #edit-address h3 { text-align: left; } #edit-address label { display: inline; float: left; width: 90%; clear: both; line-height: 24px; padding: 4px 0; margin: 0 0 0 5%; } #edit-address label span.desc { float: left; clear: left; width: 28%; 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.4%; } #edit-address div { clear: both; padding: 12px; } #edit-address div input { padding: 2px; margin: 4px 0; } * html #edit-address #edit-postcode { margin-right: 30.1%; } /* the stored addresses list */ .address-list { list-style: none; margin: 0 auto; padding: 16px 0; width: 600px; } .address-list li { float: left; width: 40%; height: 130px; text-align: center; margin: 12px 4%; border: solid ; 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 ; } .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 li { } .special-prices .product-list h3 { } .special-prices .product-list img { } .special-prices .product-list .highlight { } /* highlight a product */ .special-prices .product-list p { } /* the excerpt */ .special-prices .product-list .more-link { } .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; } /* favourites */ #root .favourites .product-list ul { } #root .favourites .product-list li { } #root .favourites .product-list h3 { } #root .favourites .product-list a, .favourites a:visited { } #root .favourites .product-list a:hover, .favourites a:active { } #root .favourites .product-list img { } #root .favourites .product-list .highlight { } /* highlight a product */ #root .favourites .product-list p { } /* the excerpt */ #root .favourites .product-list .more-link { } #root .favourites .product-list .item-info { clear: both; } #root .favourites .product-list .item-info dt { } #root .favourites .product-list .item-info dd { } #root .favourites .product-list .item-info a { } #root .favourites .product-list .item-info a:visited { } #root .favourites .product-list .item-info a:hover { } #root .favourites .product-list .item-info a:active { } #root .favourites .product-list .item-info { } #root .favourites .product-list .item-options form { float: none; } #root .favourites .product-list .item-options form label { } /* quantity label */ #root .favourites .product-list .item-options form input { } * html #root .favourites .product-list .item-options form { } * html #root .favourites .product-list .item-options a.remove { float: right; clear: right; } /* add to basket button */ /* gallery */ #user-gallery { width: 100%; } #user-gallery form { clear: both; text-align: center; } #user-gallery form legend { color: ; text-align: center; font-weight: bold; margin: 0 auto; } #user-gallery form label { clear: both; padding: 0.2em 0; margin: 0 12px; } #user-gallery ul.galleries { overflow: hidden; list-style: none; margin: 0; padding: 16px 0; } #user-gallery ul.galleries .image { display: block; float: left; width: 31%; text-align: center; font-size: small; padding: 6px 0; margin: 0 0.8% 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%; overflow: hidden; } #user-gallery .single-image img { width: auto; max-width: 100%; } * 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; } #user-gallery #technologo-image, #user-gallery #technologo-image form { text-align: left; } #technologo-image ol { list-style: none; margin: 0; padding: 0; } #technologo-image li { width: auto; margin: 0; } #technologo-image li.file fieldset { padding: 0 0 0.6em 0; margin: 0; border: 0; background: none; } #technologo-image li.file fieldset legend { padding: 0; margin-bottom: 0.6em; } #technologo-image li.file fieldset img { float: left; margin-right: 10px; border: 1px solid #ccc; } #technologo-image li.file fieldset label { width: auto; clear: none; margin: 0; padding: 0; display: block; overflow: hidden; } #technologo-image li.file fieldset label.image-browse { height: 2.4em; } #technologo-image li.file fieldset label.image-remove input { padding: 0; margin: 0; } #technologo-image li.file fieldset span.desc { float: left; clear: none; width: 10em; padding: 0; line-height: 1em; } /* forms - try to limit it to padding + fonts, form control styling isn't well /* supported in IE ------------------------------------------------------------------------------*/ /* login in content area */ #content #login-form { font-size: 0.9em; margin: 0 0 8px; padding: 6px 2px 2px; width: 400px; } #content #login-form fieldset { padding: 0 0 16px; border: 2px solid ; background: ; } #content #login-form label { float: left; width: 90%; margin-left: 5%; 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 5% 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; } /* dm forms */ .datamate { margin: 16px 0; padding: 0; width: 600px; font-size: 0.9em; } .datamate fieldset { padding: 0 0 16px; background: ; border: 1px solid ; position: relative; } .datamate h3 { display: block; line-height: 1.4em; font-weight: bold; font-size: 1.2em; z-index: 1; } .datamate label { display: inline; padding: 4px 0; font-size: 0.9em; float: left; width: 90%; margin: 0 0 0 5%; } .datamate label span.desc { display: block; float: left; width: 30%; margin: 4px 0; clear: both; } .datamate label.Checkbox input, .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 { padding: 6px 0 12px; clear: both; border-width: 1px 0; margin: 12px 5% 12px; } .datamate fieldset fieldset legend { font-size: 0.9em; padding-right: 2px; font-weight: bold; } .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; } #root #layout .date-and-time select { width: auto; display: inline; float: none; } #root #layout .date-and-time select.day { margin-left: 48px; } #root #layout .date-and-time option { padding-right: 0.6em; } #root #layout .date-and-time img { display: inline; } * html .datamate fieldset { padding-top: 0; } * html .datamate fieldset legend { position: relative; top: -0.64em; margin-left: -7px; } #root form div.file { padding: 0.3em 0; border: 1px solid #000; border-width: 1px 0; margin: 0.4em 0; } #root form div.file span.desc { font-weight: bold; display: block; padding: 1px 0 4px; } #root form div.file label { display: block; margin: 0; font-size: small; } #root form div.file label span.desc { display: block; float: left; width: 7em; padding: 0.2em 0; font-weight: normal; } /* fieldset ids for contact / enquiry */ #details { } #contact-method { } /* only contains radio butts */ #address { } #message { } #submit { } #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; width: 400px; } #request-new-pwd fieldset { padding: 0 0 16px; border: 2px solid ; background: ; } #request-new-pwd label { float: left; clear: both; width: 90%; display: inline; text-align: left; margin-left: 5%; } #request-new-pwd label span.desc { display: block; float: left; width: 30%; } #request-new-pwd label input { float: right; width: 60%; 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 ----------------------------------------------------------------------------------------*/ #root #content fieldset fieldset fieldset { width: auto; } /* new account registration */ #register-account { font-size: 0.9em; padding: 0; margin: 0; width: 600px; } #register-account fieldset { padding: 0; margin: 0 0 16px; } #register-account fieldset fieldset { padding: 0 0 16px; margin: 8px auto; } /* grouped inputs */ #register-account #login-details label { float: left; width: 90%; margin-left: 5%; padding: 4px 0; } #register-account #login-details label span.desc { float: left; width: 36%; } #register-account #login-details label input { float: right; width: 60%; } #register-account #personal-details { } #register-account #personal-details label { float: left; width: 90%; margin-left: 5%; 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 .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: 90%; margin-left: 5%; 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 .address-lookup { margin-left: 39.2%; } #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 #del-post-code { margin-right: 27%; } * html #register-account .delivery-address label.business-type { margin-right: -3px; overflow: hidden; } fieldset p { margin: 12px 6px; } /* knowledge base ----------------------------------------------------------------------------------------*/ .kb-article { line-height: 1.3em; font-size: 0.9em; overflow: hidden; padding: 8px 0; margin: 8px 0; border: solid ; border-width: 1px 0; } /* definition list for the article */ .kb-article dt { float: left; width: 30%; font-weight: bold; clear: left; } .kb-article dd { float: left; width: 68%; } .kb-article dt.title { float: none; clear: both; font-size: 130%; width: auto; padding: 16px 0 0; } .kb-article dd.issue { float: none; width: auto; } .kb-article dd.details { float: none; width: auto; } .date { color: ; } /* inside h2 w. subject line */ /* knowledge base search + list */ #kb-search { padding: 2px 0; font-size: 0.9em; width: 400px; margin: 0; } /* wide form */ #kb-search fieldset { background: ; border: 1px solid ; } #kb-search label { display: inline; float: left; width: 90%; margin-left: 5%; 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 { clear: both; padding: 12px; text-align: center; margin: 2px 0; } #kb-search div input { padding: 2px; } .kb-records .pagination { padding: 1px 0; margin:0 0 12px 0; } /* div containing the records table */ .kb-records .pagination .next, .kb-records .pagination .prev { margin-top: 0; margin-bottom: 0; padding: 0; } .kb-reocrds table { margin: 16px 0; } /* e-commerce, the joy ----------------------------------------------------------------------------------------*/ /* the shopping basket */ #shopping-basket { text-align: center; } /* the shopping basket - div */ #shopping-basket .product-list { overflow: hidden; width: 100%; } #shopping-basket .product-list .item-info .price { color: #900;} #shopping-basket .product-list .item-info .value { color: #900; 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; width: 596px; padding: 0; text-align: left; } #shopping-basket table tbody td { background: ; } #shopping-basket table tbody th { background: ; } #shopping-basket table tfoot td { background: ; color: ; font-weight: bold; } #shopping-basket table tfoot th { background: ; color: ; } #shopping-basket .additional { display: block; text-align: left; clear: both; width: 582px; margin: 12px auto; padding: 6px; font-size: 0.8em; background: ; border: 1px solid ; } /* fieldset for extra notage with shopping */ #shopping-basket .additional label { font-weight: bold; padding: 3px; margin: 3px; } #shopping-basket .additional textarea { vertical-align: middle; margin: 3px auto; width: 70%; font-size: inherit; } #shopping-basket .proceed { padding: 12px; 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/tabs/thin-border.png) no-repeat top; } #mini-basket .btm { padding: 12px; background: url(/utils/template-bits/gfx/tabs/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: ; } #mini-basket .links { } /* checkout ------------------------------------------------------------------------------*/ #checkout { clear: both; } /* step1 */ .step1 { width: 600px; margin: 0 auto; font-size: 0.9em; } /* containing div with class name for step */ .step1 label { display: inline; } .step1 fieldset fieldset { margin: 0; background: ; border: 1px solid ; padding: 4px 0; } .step1 #personal-details { padding: 0 0 16px; margin-top: 16px; } .step1 #personal-details label { float: left; width: 90%; margin-left: 5%; 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: 4%; display: inline; padding: 0; } .step1 .addresses { background: ; border: 1px solid ; padding: 8px 0; float: left; margin: 16px 0; width: 99.7%; } .step1 .addresses p { padding: 6px 5%; } .step1 .addresses fieldset { border-width: 1px; padding: 0; margin: 0; display: inline; width: 100%; } .step1 .addresses fieldset.delivery-address { float: left; width: 44%; margin: 0 0 0 28px; padding: 0 0 8px 0; } .step1 .addresses fieldset.billing-address { float: right; width: 44%; margin: 0 28px 0 0; padding: 0 0 8px 0; } .step1 .addresses fieldset label { display: inline; float: left; width: 90%; margin-left: 5%; overflow: hidden; padding: 4px 0; clear: left; } .step1 .addresses fieldset label span.desc { float: left; width: 30%; display: block; } .step1 .addresses fieldset label select { width: 100%; float: left; clear: left; padding: 0; } .step1 .addresses fieldset label input { float: right; width: 145px; } .step1 .addresses fieldset label.select span.desc { width: 90%; } .step1 .addresses fieldset label.select input { margin-top: 6px; } .step1 .addresses fieldset label.post-code input { width: 78px; margin-right: 28.5%; display: inline; } .step1 .addresses fieldset #new-del-address { width: 100%; clear: left; overflow: hidden; } /* overflow hidden is important for the js effect to work */ .step1 .addresses fieldset #new-bill-address { width: 100%; clear: left; overflow: hidden; } .step1 #additional { padding: 5%; margin-bottom: 16px; clear: both; } .step1 #additional label { width: auto; padding: 4px 0; margin: 0 auto; display: block; } .step1 #additional textarea { width: 100%; height: 6em; margin: 4px 0 12px; } .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; float: left; overflow: visible; } /* 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; float: left; overflow: visible; } * html .step1 #personal-details label { margin-right: -3px; } /* bizarre fix for duplicate characters bug in AIEEEEEEEE */ * html .step1 .addresses fieldset label.select { padding: 4px 0; display: inline; } * html .step1 .addresses fieldset label.first-select { margin-left: 2.5%; } * html .step1 .addresses fieldset label.post-code { margin-right: -3px; } * html .step1 .addresses fieldset label.post-code input { margin-right: 25.6%; } #root #layout .date-field option { padding-right: 0.6em; } #root #layout .date-field img { display: inline; } /* step2 */ .step2 { width: 600px; margin: 0 auto; } .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: 0 0 16px 0; float: left; width: 40%; margin: 0 4%; border: solid ; border-width: 1px 0; display: inline; } .step2 .addresses .billing-address { padding: 0 0 16px 0; float: right; width: 40%; margin: 0 4%; border: solid ; border-width: 1px 0; display: inline; } .step2 .addresses br { display: block; } .step2 .order-summary { clear: both; border: 1px solid ; } .step2 .order-summary thead { } .step2 .order-summary thead tr { } .step2 .order-summary thead th { font-weight: bold; color: ; background: ; } .step2 .order-summary tbody .odd td { background: #efefef; } .step2 .order-summary tbody .even td { background: ; } .step2 .order-summary tfoot th { background: ; color: ; } .step2 .order-summary tfoot td { background: ; color: ; font-weight: bold; } #payment { width: 600px; margin: 12px auto; } #payment #pay-by-card fieldset { text-align: center; font-size: 0.9em; } #payment #pay-by-card input { padding: 2px; } #payment fieldset { } #payment legend { } #payment p { } #payment button { } /* payment partner referral */ /* step3 - call back */ .step3 { width: 600px; margin: 0 auto; padding: 1px 0; } .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 { border: 0; clear: both; text-align: center; margin: 32px auto; float: left; width: 100%; font-size: 0.9em; } .step3 .addresses .delivery-address { padding: 16px 0; float: left; width: 40%; margin: 0 4%; border: solid ; border-width: 1px 0; display: inline; } .step3 .addresses .billing-address { padding: 16px 0; float: right; width: 40%; margin: 0 4%; border: solid ; border-width: 1px 0; display: inline; } .step3 .addresses br { display: block; } .step3 .order-summary { clear: both; } .step3 .order-summary tbody .odd td { background: #efefef; } .step3 .order-summary tbody .even td { background: ; } .step3 .order-summary tfoot th { background: ; color: ; } .step3 .order-summary tfoot td { background: ; color: ; 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: #900;} #enquiry-basket .product-list .item-info .value { color: #900; 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; width: 596px; padding: 0; } #enquiry-basket table tbody td { background: ; text-align: right; } #enquiry-basket table tbody th { font-weight: bold; background: ; color: ; text-align: left; } #enquiry-basket table tfoot td { background: ; color: ; text-align: right; font-weight: bold; } #enquiry-basket table tfoot th { background: ; color: ; } #enquiry-basket #additional { width: 584px; margin: 0 auto; padding: 6px; text-align: right; font-size: 0.8em; background: ; border: 1px solid ; } /* fieldset for extra notage with enquiry */ #enquiry-basket #additional label { font-weight: bold; padding: 3px; line-height: 1.4em; display: inline; } #enquiry-basket #additional textarea { display: inline; vertical-align: middle; margin: 3px 0; width: 70%; font-size: inherit; } #enquiry-basket .proceed { padding: 12px; text-align: center; } /* container for buttons */ #enquiry-basket .proceed * { display: inline; vertical-align: bottom; } #enquiry-basket .proceed .back { display: inline; } /* definition lists */ #quick-order dl, #order-forms dl { overflow: hidden; font-size: small; border-bottom: 1px dotted #ddd; margin: 1.62em 0; } #quick-order dl dt, #order-forms dl dt { float: left; width: 10em; padding: 0.4em 0; border-top: 1px dotted #ddd; line-height: 1.2em; } #quick-order dl dd, #order-forms dl dd { margin-left: 10em; padding: 0.4em; border-top: 1px dotted #ddd; line-height: 1.2em; } /* quick order pad - two steps ------------------------------------------------------------------------------*/ #root #layout .group-line th { font-weight: bold; } #root #layout #order-forms form.small, #root #layout #order-forms form.small fieldset { background: none; width: auto; display: inline; padding: 0; margin: 0; border: 0; } #root #layout #order-forms form.small fieldset input { width: auto; display: inline; } /* step1 - choose products */ #quick-order form { width: 400px; margin: 12px 0; padding: 0 0 1px; font-size: 0.9em; clear: left; } #quick-order fieldset { margin: 12px 0; padding: 0 0 8px; position: relative; background: ; border: 1px solid ; } #quick-order legend { } #quick-order p { padding: 1px; margin: 8px 12px; } #quick-order dl { margin-top: 4px; } #quick-order h4 { margin-bottom: 0; } #quick-order ol { margin: 12px 12px 2px; list-style: none; clear: both; } #quick-order ol li { padding: 4px 0; display: block; } #quick-order label { margin: 0; text-align: left; padding: 0 16px; } #quick-order div.details { margin: 12px 0; } #quick-order li img { border: 1px solid ; } #quick-order ol input { width: auto; padding: 2px; } #quick-order ol input.pcode { width: 15em; } #quick-order form fieldset.submit { text-align: center; padding: 12px; } #quick-order form fieldset.submit input { vertical-align: middle; } #order-forms form { width: 400px; margin: 12px 0; padding: 0 0 1px; font-size: 0.9em; clear: left; } #order-forms fieldset { margin: 12px 0; padding: 0 0 8px; background: ; border: 1px solid ; } #order-forms legend { display: none; } #order-forms p { padding: 1px; margin: 8px 12px; } #order-forms dl { margin-top: 4px; } #order-forms h4 { margin-bottom: 0; } #order-forms ol { margin: 12px 12px 2px; list-style: none; clear: both; } #order-forms ol li { padding: 4px 0; display: block; } #order-forms label { padding: 0; text-align: left; margin: 0 16px; } #order-forms div.details { margin: 12px 0; } #order-forms li img { border: 1px solid ; } #order-forms ol input { width: auto; padding: 2px; } #order-forms ol input.pcode { width: 15em; } #order-forms form fieldset.submit { text-align: center; padding: 12px; } #order-forms form fieldset.submit input { vertical-align: middle; } #order-forms ul { list-style: none; margin: 16px 0; padding: 0; clear: both; } #order-forms ul li { padding: 16px; } legend { font-weight: bold; font-size: 1em; color: ; } /* 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 td, #quick-order table th { padding: 4px; } #quick-order table tbody .odd td { background: #efefef; } #quick-order table tbody .even td { background: ; } #quick-order table tbody td input { text-align: center; } #link-cloud { margin: 1px 0; padding: 12px; border-top: 2px solid ; } #link-cloud a { color: ; } #link-cloud a:hover { color: ; } /* footer ---------------------------------------------------------------------------------------*/ #footer { text-align: center; color: #fff; padding: 22px 0 12px; font-size: 0.7em; background: ; } * html #footer { background: url(/utils/template-bits/gfx/tabs/rounded-line.gif) repeat-x top; } #footer #back-to-top { text-align: center; font-size: 120%; clear: left; } #footer #back-to-top a { padding: 3px 20px; text-decoration: underline; } #footer #copyright { padding: 3px; } #register-account #lookup-project { margin-left: 15.8em; } #register-account #project-message { margin: 0 12px 0 14.6em; } #register-account #project-step2 a { margin: 0 12px 0 14.6em; } * html #register-account #project-step1 { height: 1%; } * html #register-account #project-step2 { position: relative; left: -30px; } * html #register-account #lookup-project { margin-left: 13em; } *:first-child+html #register-account #lookup-project { margin-left: 13em; } #user-gallery .a { clear: left; } /* 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 { clear: left; }