/* --------------------------------------------------------------------------------------------------------------------------------- LiquidShop v2.0 CSS Document Copyright Sitemakers Ltd. - http://www.sitemakers.co.uk /* --------------------------------------------------------------------------------------------------------------------------------- */ body { background:#d0e2ee url(/images/body_bg.gif); color:#4c4c4c; cursor:default; font-size:62.5%; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; text-align:center;} #wrapper { background:#fff url(/images/wrapper_bg.gif) repeat-y 0 0; font-size:1.2em; margin:10px auto 20px; text-align:left; width:986px;} /* --------------------------------------------------------------------------------------------------------------------------------- 1) RESETS & UNIVERSAL CLASSES /* --------------------------------------------------------------------------------------------------------------------------------- */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;} fieldset, img, abbr, acronym { border:0 none;} table { border-collapse:separate; border-spacing:0;} :focus { outline:0;} address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal;} caption, th { text-align:left;} h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after { content:"";} span.hidden, .special_message { display:none;} legend.hidden { display:none;} label.hidden { display:inline; left:-9000px; position:absolute;} .nomargin { margin:0 !important;} .fleft { float:left;} .fright { float:right;} .clear { clear:both; height:0; line-height:0; visibility:hidden;} *[style], pre /* override inline styles */{ font-size:inherit !important; font-family:Arial, Helvetica, sans-serif !important;} .clearfix:after, .subheading:after, dl:after, .prodlist dd:after, .selectpop dd:after { content:"."; display:block; height:0; clear:both; visibility:hidden;} #ie6 .clearfix, #ie6 dl, #ie6 .subheading, #ie6 .prodlist dd, #ie6 .selectpop dd, #ie7 .clearfix, #ie7 dl, #ie7 .subheading, #ie7 .prodlist dd, #ie7 .selectpop dd { display:inline-block;} /* --------------------------------------------------------------------------------------------------------------------------------- 2) TYPOGRAPHY /* --------------------------------------------------------------------------------------------------------------------------------- */ a { color:#1A2674; border-bottom:1px dotted #1A2674; font-weight:normal; text-decoration:none;} a:hover { cursor:pointer; text-decoration:underline;} a:active { text-decoration:underline; } h1, h2, h3, h4, h5, h6, p { margin:0 0 15px 0;} p { line-height:1.6em;} h1 { font-size:1.8em;} h2 { font-size:1.5em;} h3 { font-size:1.2em; font-weight:bold;} h4, h5, h6 { font-size:1em; font-weight:bold; margin-bottom:7px;} ol, ul { margin-left:20px;} li { margin-bottom:3px;} input, select, textarea, optgroup { font:1em Arial, Helvetica, sans-serif;} strong { font-weight:bold;} em { font-style:italic;} acronym { font-weight:bold;} .pageheading { color:#1a2674; border-bottom: 1px dashed #619cca; height:1%; margin:0; position:relative; padding:0; } .pageheading .results { color:#417eae;} .pageheading .smaller { display:block; font-size:0.6em;} .pageheading a { color:#fff; font-weight:bold;} .subheading { color:#1A2674; background:#e2ecf3; border-bottom:1px dashed #619cca; border-top:1px dashed #619cca; height:1%; margin:0; position:relative; font-weight:bold;} .subheading span, .subheading a { color:#1A2674; float:left; padding:4px;} .subheading a { float:right; text-decoration:underline;} /* Notices for error, warning and success messages */ .notice { margin-bottom:10px;} .notice * { margin:0 0 5px 0;} .notice.error { background:#ffeded; border:1px solid #f89090; color:#d10000; padding:2px;} .notice.warning { background:#fffced; border:1px solid #dfd292; color:#866c13; padding:2px;} .notice.success { background:#f3ffed; border:1px solid #c2e1b6; color:#51713d; padding:2px;} .notice.info { background:#eff8ff; border:1px solid #b7d4ee; color:#455a6d; padding:2px;} .notice .inner { margin:0 0 10px; padding:5px 15px;} .notice dl { padding-left:15px;} .notice dt { margin:5px 0 0; width:100%;} .notice dd { display:inline;} .results/*num results eg Electronics(43)*/{ color:#aaa; font-size:0.9em; font-weight:normal;} a:hover .results, a.selected .results { color:#4c4f57;} .comment/*below some inputs on page forms*/{ font-size:0.9em;} .smaller { font-size:0.9em ;} #cookie_message { margin:0;} /* --------------------------------------------------------------------------------------------------------------------------------- 3) BUTTONS LOGOS ICONS /* --------------------------------------------------------------------------------------------------------------------------------- */ .icon, .logo, .button { display:block; text-indent:-9000px;} input.button, input.icon { font-size:0px; line-height:0;} /* Buttons */ .button { background:#fff url(/images/buttons.jpg) no-repeat 0 0; border:0; cursor:pointer; font-size:1.2em; height:34px; width:154px;} .button.add { background-position:-5px -54px;} .button.moreinfo { background-position:-5px -504px;} .button.addsmall { background-position:-433px -57px; height:31px; width:76px;} .button.moreinfosmall { background-position:-433px -505px; height:31px; width:76px;} .button.move { background-position:-433px -158px; float:right; height:31px; width:76px;} .button.productadd { background-position:-5px -106px; height:37px;} .button.checkout { background-position:-5px -6px; margin:10px 0; width:167px;} .button.checkout_disabled { background-position:-223px -6px; margin:10px 0; width:167px; cursor:default;} .button.continueshop { background-position:-5px -152px; margin:10px 0; width:174px;} .button.viewbasket { background-position:-5px -202px; width:174px;} .button.editbasket { background-position:-5px -352px;} .button.newcustomer { background-position:-5px -252px; width:183px;} .button.returningcustomer { background-position:-5px -302px; width:183px;} .button.download { background-position:-5px -352px;} .button.update { background-position:-637px -36px; height:17px; width:51px;} .button.qtyneg { background-position:-629px -11px; height:16px; width:13px;} .button.qtypos { background-position:-682px -11px; height:16px; width:13px;} .button.continue { background-position:-5px -402px; margin:0 0 10px 0;} .button.editaddress { background-position:-610px -76px; height:17px; width:78px;} .button.deleteaddress { background-position:-597px -266px; height:17px; width:91px;} .button.back { background-position:-630px -117px; height:20px; margin-top:14px; width:58px;} .button.signout { background-position:-627px -166px; height:17px; width:61px;} .button.returnshop { background-position:-598px -216px; height:17px; width:90px;} .button.vieworder { background-position:-604px -306px; height:17px; width:84px;} .button.repeatorder { background-position:-604px -346px; height:17px; width:84px;} .button.payatprotx { background-position:-5px -454px; width:205px;} .button.reserve { background-position:-225px -454px; width:174px;} .button.addaddress { background-position:-5px -552px;} input.button.remove { background:none; border:none; color:#70727a; display:inline; font-size:0.9em; height:auto; line-height:normal; text-indent:0; width:auto;} .button.change { background-position:-630px -386px; height:17px; width:58px;} /* Logos */ .logo.security { background:url(/images/logos.gif) no-repeat 0 -448px; height:65px; width:115px;} .logo.companylogo { background:url(/images/logos.gif) no-repeat left top; cursor:pointer; height:127px; width:199px;} .logo.companylogo:hover { background-position:left -160px;} .logo.liquidshop { background:url(/images/logos.gif) no-repeat left -536px; height:33px; margin:10px 0 0 0; width:137px;} /* Icons */ .icon { border:0; height:32px; width:32px; background:url(/images/icons.gif) no-repeat 0 0;} .icon.remove { background-position:-884px -4px; cursor:pointer; float:left; height:16px; width:16px;} .icon.basketbig { background-position:0 -664px; float:left; margin:-5px 10px 0 0; width:29px;} .icon.review { background-position:0 -744px; float:left; margin:-5px 10px 0 0; width:29px;} .icon.emailfriend { background-position:0 -789px; float:left; margin:-5px 10px 0 0; width:29px;} .icon.account { background-position:0 -834px; float:left; margin:-5px 10px 0 0; width:29px;} .icon.ordersuccess { background-position:-55px -742px; margin:0 10px 0 0;} .icon.orderfail { background-position:-55px -704px; margin:0 10px 0 0;} .tick { background-position:right -522px !important; border:1px solid #8F8F8F;} .cross { background-position:right -335px !important; border:1px solid #f89090 !important;} .icon.soffer { background:url(/images/pngs.png) no-repeat 0 0; height:40px; width:40px;} #ie6 .icon.soffer/*dont use pngs in IE6 even with the alphatransparency fix unless absolutely necessary*/{ background:url(/images/pngs.gif) no-repeat 0 0;} .icon.conditionnew { background-position:-432px -805px; height:18px; width:43px;} .icon.conditionused { background-position:-432px -835px; height:18px; width:43px;} .icon.conditionrefurbished { background-position:-432px -865px; height:18px; width:43px;} .icon.viewlist { background-position:-38px -667px; border-color:#b8cddd; height:19px; padding:0; width:19px;} a:hover .icon.viewlist, .lselected .icon.viewlist { background-position:-63px -667px; border-color:#417eae;} .icon.viewgallery { background-position:-88px -667px; border-color:#b8cddd; height:19px; padding:0; width:19px;} a:hover .icon.viewgallery, .gselected .icon.viewgallery { background-position:-113px -667px; border-color:#417eae;} .icon.gbp { background:url(/images/logos.gif) no-repeat right -162px; height:13px; width:32px;} .icon.eur { background:url(/images/logos.gif) no-repeat right -146px; height:13px; width:32px;} .icon.usd { background:url(/images/logos.gif) no-repeat right -178px; height:13px; width:32px;} .icon.collect { background-position:-432px -871px; width:45px; height:53px;} .icon.deliver { background-position:-493px -871px; width:45px; height:53px;} .icon.collect_dis { background-position:-432px -931px; width:45px; height:53px;} .icon.deliver_dis { background-position:-493px -931px; width:45px; height:53px;} .icon.sm_collect { background-position:-553px -931px; width:44px; height:16px;} .icon.sm_deliver { background-position:-553px -871px; width:44px; height:16px;} .icon.sm_collect_dis { background-position:-553px -960px; width:44px; height:16px;} .icon.sm_deliver_dis { background-position:-553px -900px; width:44px; height:16px;} /* Star Rating Icons */ .star { float:left; height:14px; width:80px;} .star.star5 { background:url(/images/stars.gif) no-repeat 0 0;} .star.star4 { background:url(/images/stars.gif) no-repeat 0 -14px;} .star.star3 { background:url(/images/stars.gif) no-repeat 0 -28px;} .star.star2 { background:url(/images/stars.gif) no-repeat 0 -41px;} .star.star1 { background:url(/images/stars.gif) no-repeat 0 -55px;} .star.star0 { background:url(/images/stars.gif) no-repeat 0 -68px;} #stars input { float:left;} #stars acronym { float:right;} #stars span { display:block; height:20px; overflow:hidden; width:100%;} /* --------------------------------------------------------------------------------------------------------------------------------- 4) TEMPLATE STRUCTURE /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Header */ #header { background:#fff url(/images/wrapper_bg.gif) no-repeat -986px 0; color:#dadce4; padding: 12px 0 0; text-align:center; } #header #innerheader { height:100px; padding-top:25px; position:relative; background: url(/images/wrapper_bg.gif) repeat-y 0 0; text-align:center; width:100%;} #header h1 { cursor:pointer; left:25px; margin-right:5px; position:absolute; top:0px; z-index:1;} #header a { color:#dadce4; border:none;} #header a:hover { color:#fff;} #header #innerimage { background: #fff url(/images/header_text.gif) no-repeat 250px 30px; height:100px; left:3px; position:absolute; top:0; width: 980px; } /* Search box */ #header #search { background: url(/images/xgradients.gif) no-repeat 0 -45px; margin-top: -2px; height:26px; padding:8px 0 0 10px; width:223px; float: left; position:relative; } #header #search #simpleSearch { background: none; border: none; font-size:1.1em; height:19px; padding:2px 57px 0 5px; width:138px; color: #4c4c4c;} #header #search #searchgobutton { background:url(/images/logos.gif) no-repeat right -117px; border:none; color:#fff; cursor:pointer; font-size:0.1em; height:25px; position:absolute; right:17px; top:5px; width:57px;} #header .notice/*searchbox errors*/{ font-size:1.2em; left:37.5%; position:absolute; text-align:center; top:2px; width:25%; z-index:2;} /* Account box */ #header #account { position:absolute; right:60px; top:8px; width:auto;} #header #account a { font-size:0.9em; background:#fff url(/images/icons.gif) no-repeat 0 2px; padding:5px 0 0 20px; color:#1a2674; font-size: 1.0em; } #header #account #accaccount a{ margin-left: 10px; } /* Phone number */ #header #contact { font-size:1.0em; position:absolute; right:30px; display:block; width:230px; top:130px; font-weight: bold; color:#fff; text-align:right;} /* Info pages */ #header #infopages { position:absolute; left:250px; top:5px;} /*EXTRA CSS -> look in css/basket for #minibasket basket styles if set to be in header*/ /*EXTRA CSS -> look in css/nav for header #nav styles*/ /* Page Layout */ /*EXTRA CSS -> look in css/columns for page layout widths*/ #content { background:#fff; border-left:207px solid #fff; display:block; position:relative; margin:0 20px;} #ie6 #content{ border-left-width: 200px; } #inner { display:block; overflow:hidden;} #left, #right { background:#fff; position:relative;} #left { float:left; left:0px;} #left .inner { padding:38px 0 20px;} #ie6 #left .inner, #ie7 #left .inner { padding:32px 0 20px;} #right { float:right; right:0px;} #right .inner { padding:5px 6px;} #centre { display:block; height:1%; padding:20px 0 20px 32px; position:relative;} #ie6 #centre{ padding-left:19px; padding-right: 4px; } #centre .inner { overflow:hidden;} /* Footer - For a fixed width design place a width on the footer to remove the annoying horizontal scroll*/ #footer { background:#fff url(/images/wrapper_bg.gif) repeat-y 0 0; clear:both; margin:0; padding:0; position:relative; text-align:left; overflow:hidden; color:#aaa;} #footer #directory { display: none;} #footer #services { background:url(/images/logos.gif) no-repeat 0 -600px; border:none; width:980px; margin: 0 3px; text-align:center; color:#fff;} #services a { color:#555; background:url(/images/icons.gif) no-repeat -2px -252px; border:none; display:inline; padding:0 0 0 17px;} #services h3, #services p { width:235px; text-align:left; position: absolute; right:0; } #services h3 { top:3px; font-size:1.4em;} #services p { top:18px; font-size:0.8em; color:#cae0ed} #services img {} #services .vlist { width:944px; background: url(/images/wrapper_bg.gif) no-repeat -2958px 0; height: 25px; margin: 0 auto; padding-top: 9px; } #services .vlist dd { float: left; position:relative; margin-left: 8px; } #services .vlist dd a { color: #fff !important; } #footer #subfooter { background:url(/images/wrapper_bg.gif) no-repeat -1972px bottom; height:35px; padding:0 20px; clear:both; position:relative;} #subfooter #copyright { float:left;} #subfooter #copyright span { margin-right:5px;} #subfooter #copyright br { display:none;} #subfooter .vcard { line-height:normal; text-align:center; display:none;} #subfooter .vcard .adr{ margin-right: 5px; } #subfooter .vcard p { margin:0; width:auto; display:inline-block;} #subfooter .logo.liquidshop { float:right; border:none; margin:0; position:relative; top:-39px;} /* --------------------------------------------------------------------------------------------------------------------------------- 5) CENTRE COLUMN SPECIFIC STYLES /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Box for border on all content sections */ .box, .rtecontent { background:#fff; height:1%; margin-bottom:15px; position:relative;} #ie6 .box { width:99.2%;} .rtecontent { padding:15px 0 20px;} #fcontent .rtecontent{ padding-bottom: 0; margin-bottom: 5px; } #fcontent .pageheading{ margin-top: 10px; } .box .inner { height:1%; /*padding:15px 10px;*/ padding:15px 0 5px;} .box .hlist { margin:10px 5px;} .box .hlist.collist { margin:0;} /* Rounded Box borders */ .b { display:block; width:15px; height:15px; background:url(/images/icons.gif) no-repeat 0 -896px; position:absolute; overflow:hidden;} .tl { top:-1px; left:-1px;} .tr { top:-1px; right:-1px; background-position:-15px -896px;} .bl { bottom:-1px; left:-1px; background-position:0 -911px;} .br { bottom:-1px; right:-1px; background-position:-15px -911px;} #ie6 .tr, #ie6 .br { right:-2px;} #ie6 .br, #ie6 .bl { bottom:-2px;} #ie6 .pageheading .b { height:12px;} .pageheading .bl, .pageheading .br { display:none;} .catlist .tl, .catlist .tr { display:none;} /* Columns within centre for login/address etc in checkout */ .col2 { width:49%;} .col2 div { background:#EDF4F8; border:1px solid #E3E7EC; margin:0 0 15px 0; padding:10px;} .col3 { width:32%;} .col3.fleft { margin-right:2%;} .col3 div { background:#fff; border:1px solid #E3E7EC; margin:0 0 15px 0; padding:10px;} .col2 h3, .col3 h3 { font-size:1em;} .col3 #delivery_comments, .col3 #order_reference { display:block; width:98%;} .col3 strong { display:block;} /* Breadcrumbs */ #crumbs, #crumbsbasket { margin:-20px 0 5px; overflow:hidden;} #crumbs dt, #crumbsbasket dt{ padding-left:0; font-size:0.9em; font-weight:normal; color:#aaa;} #crumbs { margin-left:-230px; font-style:italic;} #crumbs a{ font-size:0.9em; padding:0 0 0 7px; background:url(/images/icons.gif) no-repeat -8px -351px; margin-right:5px; color:#aaa; border:none;} #crumbs a:hover { text-decoration:none; color:#333;} #crumbs a.selected:hover { color:#aaa; cursor:default;} #crumbsbasket dd { color:#aaa; display:block; float:left; padding:3px 6px; text-align:left; width:22.5%;} #crumbsbasket .complete { background:#fff; color:#4c4f57; font-size: 0.9em;} #crumbsbasket .selected { font-size: 0.9em;} #crumbsbasket dd{ font-size: 0.9em; } /* Centre Banner */ #banner { display:block; margin:0 0 10px; text-align:right;} #banner a { border:none;} /* Imgholder - change the valign to move the image position*/ .imgholder { background:#fff; display:table-cell; height:130px; text-align:center; vertical-align:bottom; width:23.5%;} .caption { background: #fff; display:block; color:#4c4f57;} /* Vertical Lists */ .vlist { } .vlist dd a { color:#4c4f57; background:url(/images/icons.gif) no-repeat 0 2px; display:block; padding:4px 10px 4px 23px; border:none;} .vlist dd a:hover { background:url(/images/icons.gif) no-repeat 0 2px;} /* Horizontal Lists */ .hlist { } .hlist dd, .hlist dt { float:left; padding:2px 0; margin-right:5px;} .hlist dd a, .hlist dt { color:#4c4f57; background:url(/images/icons.gif) no-repeat -4px -2px; padding-left:15px;} .hlist dt, .hlist dt a { background:none; font-weight:bold;} .hlist dt strong, .hlist dt strong a { display:block; text-transform:uppercase; width:150px;} .hlist img { margin-right:3px;} .hlist dd a:hover { background:url(/images/icons.gif) no-repeat -4px -2px;} .hlist dd.selected a { font-weight:bold; text-decoration:underline;} /* Image Based Lists */ .imglist { padding-bottom:10px;} .imglist a { border:none; cursor:pointer; display:block; float:left; overflow:hidden; font-weight:normal; height:150px; /*margin:10px 0 3px 1%;*/ margin:2.5% 2.5% 3px 0; padding:3px 0; text-align:center; width:23.5%;} #ie6 .imglist a { margin-right:10px;} .imglist .imgholder { height:130px;} .imglist .imgholder img { padding:3px; border:1px solid #D9DBE8;} .imglist a:hover {} .imglist .selected a { font-weight:bold; text-decoration:underline;} .imglist .caption { white-space:nowrap;} /* Home Page Lists - recommended brands, cats, specialcats imglists */ #fbrands dd a { height:40px; vertical-align:middle;} #fbrands .imgholder, #fbrands .imgholder span { height:35px;} /*#fcategories.imglist a{ margin:10px 0 3px 1%; }*/ #fcategories .subheading{ display: none; } #fcategories dd a { border:none; height:102px; width: 219px; position:relative; padding-top: 20px; padding-left: none; } #fcategories dd a .caption{ position:absolute; top:0; left:0; font-weight: bold; text-decoration:underline; color:#1a2674; } #fcategories dd a:hover .caption{ text-decoration: none; } #fcategories .imgholder, #fcategories .imgholder span { height:70px;} #fcategories .imgholder img { border:none; padding:0;} #fspecialcats dd a { height:85px;} #fspecialcats .imgholder, #fspecialcats .imgholder span { height:70px;} /* Subcategories */ .catlist { padding:0;} .catlist a { border:none; height:102px; position:relative; /*margin:0 1% 3px 0;*/ padding:20px 0 3px; width:219px;} .catlist .imgholder { height:70px;} .catlist .imgholder img { border:none; padding:0;} .catlist a:hover { } .catlist .caption { white-space:normal; position:absolute; top:0; left:0; } .catlist a .caption{ position:absolute; top:0; left:0; font-weight: bold; text-decoration:underline; color:#1a2674; } .catlist a:hover .caption{ text-decoration: none; } /* Tabs used on Product page and cat pages */ .tabs { background:#619CCA; background: #fff; position:relative; margin-top: 5px;} .tabs dd { padding:0; margin:0;} .tabs dd a { background:#8fb9d9; border-bottom:none; margin-right:1px; display:block; color:#fff; padding:3px 10px; text-decoration:none;} .tabs dd a:hover { background:#619CCA;} .tabs dd a.selected, .tabs dd a#active { background:#619CCA; font-weight:bold; text-decoration:none;} .tabs .results, .tabs a:hover .results { color:#fff;} /* Page chooser, view mode and sort by lists for pagination */ .sortbar { background:#619CCA; height:25px; margin-bottom:15px; position:relative; padding:5px 0 0; width:100%;} .sortbar select { float:left; margin:0 2px 0 10px; width:140px;} .sortbar .bl, .sortbar .br { bottom:0;} .sortlist { color:#fff; height:1%; margin:0 6px; width:auto;} .sortlist dd { float:left;} .sortlist dd a, .sortlist dt { border:none; color:#fff; background:#8fb9d9; float:left; margin:0 3px 0 0; padding:2px 4px;} .sortlist dt { border:none; font-weight:bold; margin:0; padding:2px 4px 0 0;} .sortlist dd a:hover, .sortlist a.selected, .sortlist a.lselected, .sortlist a.gselected { background:#1A2674; text-decoration:none; color:#fff;} .sortlist.perpage { float:left;} .sortlist.page { float:right;} .sortlist.page dd a {} .sortlist.page .selected, .sortlist.page a:hover {} .sortlist.page .disabled, .sortlist.page .disabled:hover { display:none;} .sortlist.page .separator, .sortlist.page .separator:hover { background:none; border:none; cursor:default; padding:2px 0;} .sortlist.view { float:left; margin:0 0 0 5px;} .sortlist.view a { padding:0 4px 0 2px;} .sortlist.view strong { float:left; font-weight:normal; padding:2px 0;} .sortlist.view .icon { float:left; margin-right:2px; padding:0;} /* Input Forms for signup etc */ .textlist { clear:both; margin-bottom:20px; background:#edf4f8;} .textlist dd, .textlist dt { overflow:hidden; position:relative; width:100%;} .textlist .subheading { margin-bottom:5px; border-bottom:1px dashed #619CCA;} .textlist .hr { border-bottom:1px solid #E3E7EC; margin:15px 0;} .textlist .comment { clear:both; display:block; margin-left:180px;} #ie6 .textlist .comment { margin-left:190px;} .textlist .notice { border-width:0px; display:block; font-size:0.9em; margin:0 0 0 5px; max-width:200px; padding:0 1px; width:100%;} .textlist .small + acronym + .notice { width:120px;} .textlist .col { display:block; float:left; padding:3px 0 3px 1%;} .textlist .col#stars { width:110px;} #ie6 .textlist .col { padding:3px 0 3px 3px;} .textlist .col.lcol { margin-right:15px;} .textlist .col.mcol { margin-left:10px; width:62%;} .textlist .col.rcol { float:right; width:100px;} .textlist .col.rcol .button { margin-bottom:3px;} .textlist .col.label { font-weight:bold; margin-left:10px; padding:7px 0 0 0; text-align:right; width:160px;} #ie6 .textlist .col.input { width:320px;} .textlist .col.input input, .textlist .col.input select, .textlist .col.input textarea { border:1px solid #8F8F8F; margin-left:5px; padding:2px 0; width:200px;} .textlist .col.input input.checkbox, .textlist .col.input input.button { border:none; padding:0; width:auto;} .textlist .col.input input.button.returningcustomer { width:183px;} .textlist .col.input .small { width:120px;} .textlist .col.input .large { width:300px;} .textlist.largelist { border-top:1px solid #E3E7EC; margin-bottom:15px;} .textlist.largelist dd { border-bottom:1px solid #E3E7EC; padding:10px 0;} .textlist.largelist strong, .textlist.largelist .price { display:block; font-size:1.2em; font-weight:bold;} .textlist.largelist .price { text-align:right;} .textlist.largelist .rcol .fright { margin-right:10px;} /* --------------------------------------------------------------------------------------------------------------------------------- 6) LEFT / RIGHT COLUMN SPECIFIC STYLES /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Sideboxes */ .column dl { background:#fff; width:210px; margin:0 0 25px;} .column a { color:#1a2674; border-bottom:none;} /*EXTRA CSS -> look in css/sideborder for column list borders*/ .column .title { background:#D0DFEA url(/images/xgradients.gif) repeat-x left -365px; border:1px solid #3e4c64; border-width:0 1px; color:#fff; display:block; font-size:1.4em; letter-spacing:-0.05em; padding:0 10px;} /*EXTRA CSS -> look in css/sidetitle for column list titles*/ .column .sub0 a { background:#fff url(/images/icons.gif) no-repeat 0 2px; border-bottom:1px dashed #619CCA; color:#1a2674; padding:4px 10px 4px 23px;} .column .sub0 a:hover { background:#e2ecf3 url(/images/icons.gif) no-repeat 0 -38px;} .column .sub0 a.selected { background:#e2ecf3 url(/images/icons.gif) no-repeat 0 -38px; color:#1a2674; font-weight:bold;} .column .sub1 a { background:#edf4f9 url(/images/icons.gif) no-repeat 0 -134px; padding:4px 10px 4px 23px; color:#1a2674;} .column .sub1 a:hover { background:#edf4f9 url(/images/icons.gif) no-repeat 0 -134px;} .column .sub1 a.selected { background:#edf4f9 url(/images/icons.gif) no-repeat 0 2px; color:#4c4c4c; font-weight:bold; color:#1a2674;} .column .sub1.bottom a { border-bottom:1px dashed #619CCA;} .column .sub2 a { background:#f6fcff url(/images/icons.gif) no-repeat 0 -134px; padding:4px 10px 4px 23px; color:#1a2674;} .column .sub2 a:hover { background:#f6fcff url(/images/icons.gif) no-repeat 0 -134px;} .column .sub2 a.selected { background-color:#f6fcff; font-weight:bold; color:#1a2674;} .column .sub2.bottom a { border-bottom:1px dashed #619CCA;} .column select { margin:10px 5px; width:158px;} .column .scrollable .scroller { display:block; max-height:230px; overflow:auto;} .column .imglist dd a { background:#fff; border-width:1px 0 0; font-weight:normal; height:30px; margin:0; padding:0; text-align:left; width:100%;} .column .imglist dd a:hover { background:#E2ECF3; text-decoration:none;} .column .imglist dd img { margin:1px 0 1px 10px;} .column#right dl { float:right;} /* Side Banners*/ .column .banners { background:none; border:none; margin:7px 0; padding:0; text-align:center; width:100%;} .column .banners dd { background:none; margin:0 0 5px 0; padding:0;} .column .banners a { border:none;} /* Refine Results box */ /*EXTRA CSS -> look in css/filters for #refine filters */ #refine { z-index:1;} #refine input { background:#fff url(/images/icons.gif) no-repeat right -741px; border:1px solid #ABADB3; color:#4c4f57; cursor:pointer; padding:2px 18px 2px 5px; width:125px;} #refine input:hover { background:#fff url(/images/icons.gif) no-repeat right -865px;} #refine .selectpop { background:#fff; border:1px solid #999; left:0px; margin:-1px 0 0; height:expression( this.scrollHeight > 279 ? "280px" : "auto" );/*sets max-height forIE*/ max-height:280px; overflow:auto; padding:0; position:absolute; z-index:5; width:148px;} #ie6 #refine .selectpop, #ie7 #refine .selectpop { margin-top:21px;} #refine .selectpop dd { float:none; background:#fff; margin:0; padding:0;} #refine .selectpop a { background:none; border:none; color:#000; display:block; margin:0; padding:1px 0;} #refine .selectpop dd a:hover { background:#3399ff; color:#fff; text-decoration:none;} #refine .selectpop em { font-style:normal;} #refine .selectpop a:hover em { color:#fff;} #refine .selectpop dd span { display:block; padding:1px 2px;} #refine .selectpop .sub0 a, #refine .selectpop .sub0 span { border-top:1px solid #E3E6F0; padding-top:3px;} #refine .selectpop .sub1 a, #refine .selectpop .sub1 span { background:url(/images/icons.gif) no-repeat -5px -138px; padding-left:14px;} #refine .selectpop .sub2 a, #refine .selectpop .sub2 span { background:url(/images/icons.gif) no-repeat 9px -138px; padding-left:28px;} /* Shopping Basket */ /*EXTRA CSS -> look in css/basket for #minibasket shopping basket if set to be right_side_nav */ /* Promotion Code box */ #promotions { } #promotions dd { overflow:hidden; padding:10px 5px;} #promotions label { display:block; font-size:0.9em; margin-bottom:3px;} #promotions #voucher { margin-right:3px; width:90px;} #promotions input { float:left;} /* --------------------------------------------------------------------------------------------------------------------------------- 7) PRODUCT DISPLAY LISTS /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Elements used in both list views */ .prodlist { padding-bottom:10px;} .prodlist a {} #centre .prodlist dd { position:relative;} #ie6 #centre .prodlist dd .imgholder { display:block; width:auto;} #ie6 .prodlist .imgholder span { display:none;} .prodlist .imgholder img{ padding: 3px; border: 1px solid #d9dbe8; } .prodlist .imgholder a { border:none;} .prodlist .product { margin:5px; text-align:center;} .prodlist .soffer { left:2px; position:absolute; top:2px;} .prodlist .desc { text-align:left;} .prodlist .desc h3{ font-size:1.0em; } .prodlist .desc h3 a { font-weight:bold; color:#1a2674;} .prodlist .desc h3 a:hover{} .prodlist .desc p { font-size:0.9em; line-height:normal; margin:0;} .prodlist .attriblist { height:30px; overflow:hidden;} .prodlist .attriblist div { margin:0 3px 0 0; float:left;} .prodlist .attriblist .label { display:none !important;} .prodlist .cost { text-align:left;} .prodlist .cost .offertext, .prodlist .cost .offertext a { color:#c10e13; display:block;} .prodlist .cost .offerexpiretext { display:block;} .prodlist .cost .price { font-size:1.1em; font-weight:bold;} .prodlist .cost .pricenow .price { color:#c10e13;} .prodlist .cost .pricenow .pre{ color: #898989; } .prodlist .cost .pricewas { color:#AAAAAA; font-size:1.0em; padding:0 5px; text-decoration:line-through;} .prodlist .cost .pricewas .price { color:#AAAAAA; font-size:1em; font-weight:normal;} .prodlist .cost .pricevat { display:block; position:relative; top:-3px;} .prodlist .cost .message /*for out of stock/has opts*/{ display:block; margin-bottom:6px; position:relative; top:-3px;} .prodlist .controls { float:right; width:75px;} .prodlist .qty { display:none;} .prodlist .more { white-space:nowrap;} .prodlist .more:hover { border-bottom:none;} /* Gallery View */ .prodlist.galleryview a {} .prodlist.galleryview dd { float:left; height:273px; margin:2.5% 2.5% 0 0; background: url(/images/prod_box.gif) no-repeat top left;} #ie6 .prodlist.galleryview dd { margin:8px 10px 0 0; } .prodlist.galleryview .imgholder{ height: 175px; } .prodlist.galleryview .icon { left:5px; position:absolute; top:110px;} .prodlist.galleryview .icon.scatoverlay { top:5px; width:auto;} .prodlist.galleryview .icon.brandoverlay { top:5px; width:auto; height:auto;} .prodlist.galleryview .icon.soffer { top:2px; left:2px;} .prodlist.galleryview .icon.star { position:absolute; top:215px; left:72px; background-color:#fff; z-index:1;} /*EXTRA CSS -> look in css/prodbox for galleryview % widths */ .prodlist.galleryview .desc h3 { margin:2px 0 5px 0; text-align:center; } .prodlist.galleryview .desc p { display:none;} .prodlist.galleryview .cost { background:#fff; bottom:0; height:55px; left:5px; position:absolute; text-align:center; width: 210px;} .prodlist.galleryview .buttons { bottom:0; left:0; margin:0; width: 219px; height: 15px; position:absolute; background: url(/images/prod_box.gif) no-repeat bottom left;} .prodlist.galleryview .buttons .moreinfo{ display: none; } .prodlist.galleryview .buttons * { float:left;} /* List View */ .prodlist.listview { } .prodlist.listview dd { margin:10px 5px 0; width:98%;} .prodlist.listview .icon { left:56%; position:absolute; top:5px;} .prodlist.listview .icon.scatoverlay { display:none;} .prodlist.listview .icon.brandoverlay { display:none;} .prodlist.listview .icon.soffer { display:none;} .prodlist.listview .icon.star { position:static;} .prodlist.listview .imgholder { float:left; height:40px; width:40px; margin-right: 5px;} .prodlist.listview .imgholder span { display:none;} .prodlist.listview .desc { float:left; margin:0 4% 5px 10px; width:52%;} .prodlist.listview .desc h3 { margin:0 0 3px 0;} .prodlist.listview .cost { float:left; font-size:0.9em; width:18%;} .prodlist.listview .cost .offertext a, .prodlist.listview .cost .message { font-weight:normal; margin:0;} .prodlist.listview .button, .prodlist.listview fieldset { float:right;} /* Modified Gallery view - for Recommended products */ .prodlist.featured { } .prodlist.featured dd { height:273px;} .prodlist.featured .desc h3 a { font-size:1em;} .prodlist.featured .desc p { display:none;} .prodlist.featured .cost { padding-top:2px;} /* Modified List view - used on email a friend, stock reminders */ .prodlist.viewer { margin-bottom:15px;} .prodlist.viewer dd { margin:0 5px;} .prodlist.viewer .cost, .prodlist.viewer .button, .prodlist.viewer .more { display:none;} /* Modified List view - used on product page to show the buy this+this offers */ .prodlist.offerlist { } .prodlist.offerlist dt { background:#D0DFEA;} .prodlist.offerlist .imgholder { float:left; margin:5px;} .prodlist.offerlist .plus { float:left; font-size:1.3em; margin:15px 0 0;} .prodlist.offerlist .desc { margin:5px 0 0 10px; width:40%;} .prodlist.offerlist .desc h3 { font-size:1.2em;} .prodlist.offerlist .cost { margin:5px;} .prodlist.offerlist .cost .save { display:block; font-size:1.3em; position:relative; top:-3px;} .prodlist.offerlist .cost .price_preword { color:#c10e13; font-size:1.4em; font-weight:bold;} .prodlist.offerlist .button { background:#ff9900 url(/images/buttons.jpg) no-repeat -433px -108px; margin:5px;} /* Left/Right Column Product Lists */ .prodlist.sidelist { padding-bottom:0;} .prodlist.sidelist dd { border-top:1px solid #e3e6f0; padding:0 0 5px;} .prodlist.sidelist .imgholder { float:left; height:50px; margin-right:5px; width:50px;} .prodlist.sidelist .imgholder span { display:none;} .prodlist.sidelist .text /*used to align text next to image*/ { float:left; width:112px;} .prodlist.sidelist .desc h3 { font-size:1em; margin:0;} .prodlist.sidelist .desc p { display:none;} .prodlist.sidelist .cost { font-size:0.8em;} .prodlist.sidelist .cost .pricenow { display:block; float:left; margin-right:3px} .prodlist.sidelist .cost .pricewas { display:block; float:left; padding:0; margin-top:3px;} .prodlist.sidelist .cost .message { display:none !important;} .prodlist.sidelist .button { display:none;} .prodlist.sidelist .soffer { display:none;} .prodlist.sidelist .offertext { display:none !important;} .prodlist.sidelist .message { display:none;} .prodlist.sidelist .star { display:none;} /* --------------------------------------------------------------------------------------------------------------------------------- 8) PAGE SPECIFIC STYLES /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Product Page */ #product .box#overview { padding:10px 0;} #product #brandlogo { float:right;} #product #imagewrapper { float:left; height:1%; margin:0 10px 0 0; text-align:center; width:256px;} #product #imagewrapper #prod_img { position:relative; margin-bottom:10px;} #product #imagewrapper #prod_img #main_image { padding:3px; border:1px solid #D9DBE8;} #product #imagewrapper #prod_img span { display:none;} #product #imagewrapper #prod_img a { border-bottom:none;} #product #imagewrapper #prod_img a:hover { cursor:pointer; cursor:-moz-zoom-in;} #product #imagewrapper #prod_img a:hover span { background:#fff url(/images/icons.gif) no-repeat -432px -662px; border:1px solid #BCC4CE; color:#4c4f57; display:block; left:20%; padding:5px 5px 5px 30px; position:absolute; text-align:left; text-decoration:none; top:45%; width:110px;} #product #imagewrapper #poptThumbs dd { display:inline; margin-right:1px;} #product #imagewrapper #poptThumbs img { padding: 3px; border: 1px solid #d9dbe8;} #product #imagewrapper #poptThumbs a { border:none;} #product #imagewrapper #poptThumbs a:hover img, #product #imagewrapper #poptThumbs .optsel img { border:1px solid #c10e13;} #product #summary { height:1%; width:250px; float:left;} #product #summary #activeAjax { height:32px; position:absolute; right:5px; top:10px; width:32px;} #product #summary .offertext { color:#c10e13; display:block;} #product #summary .offerexpiretext { color:#c10e13; display:block;} #product #summary .cost dd { display:inline;} #product #summary .cost .pricenow .price { color:#c10e13; font-size:2.4em; font-family:"Comic Sans MS", cursive; letter-spacing:-0.05em; margin-right:5px;} #product #summary .cost .pricenow .pre { color:#c10e13; font-size:1.2em; font-weight:bold;} #product #summary .cost .pricenow .post { color:#aaa; font-size:0.7em; font-weight:normal;} #product #summary .cost .pricewas { font-size:1.1em; text-decoration:line-through;} #product #summary .cost .pricewas .pre { text-decoration:none;} #product #summary .cost .pricevat { display:block; position:relative; top:-3px;} #product #summary .message { display:block; margin:-2px 0 10px;} #product #summary #attriblist { margin:0 0 10px;} #product #summary #attriblist dd a { background:none; margin-right:5px; padding:0; color:#4c4f57;} #product #summary #product_options { margin-bottom:10px;} #product #summary #product_options dd { padding-bottom:4px;} #product #summary #product_options select { width:220px;} #product #summary #product_options .arw_holder { margin:0 0 0 5px;} #product #summary #product_options .notice { border-width:0px; display:block; font-size:0.9em; margin:0; max-width:250px; padding:0 1px; width:100%;} #product #summary #qtybox { display:none; font-size:1.4em; vertical-align:middle;} #product #summary #qtybox label { line-height:22px;} #product #summary #qtybox #qty { height:16px; line-height:16px; width:23px;} #product #summary #details { width:270px;} #product #summary #details a { color:#4C4C4C;} #product #summary #details dt /* for out of stock notice*/{ display:none;} #product #summary #details dd /* for out of stock notice*/{ margin-bottom:1px; padding-top:5px;} #product #summary #details .stock { margin-top:10px;} #product #summary #details dt.notice { border:0; font-weight:bold; margin:7px 0 0 4px; padding:0;} #product #summary #details dd.notice { margin:2px 0 0; padding-bottom:5px;} #product #summary #details .icon { text-align:left;} #product #summary #details acronym { font-weight:normal;} #product .hlist.tabs { border-bottom:1px dashed #619CCA; bottom:-1px; position:relative; z-index:2; display:block; padding-left:10px;} #product .hlist.tabs dd { margin:0;} #product .hlist.tabs dd a { padding:5px 20px; border-bottom:none; background:#e5eff6; color:#1A2674; margin-bottom:-1px; font-size:1.2em; font-weight:normal;} #product .hlist.tabs dd a:hover { text-decoration:underline;} #product .hlist.tabs dd a#active, #product .hlist.tabs dd a#active:hover { background:#fff; border:1px dashed #619CCA; border-bottom:none; text-decoration:none;} #product .hlist.tabs dd a#active .results, #product .hlist.tabs dd a#active:hover .results { color:#aaa;} #product #reviews { clear:none;} #product #reviews h3 { text-align:center;} #product #reviews h3 a { color:#c10e13;} #product .refer { display:none;} /* Lightview - used on product page and for RTE created popups on info pages */ #lightbody { background:#fff; font:62.5% Arial, Helvetica, sans-serif; padding:5px; text-align:left;} #lightbody #wrapper { background:#fff;} #lightbody .inner { padding-bottom:0;} #lightbody p { line-height:normal;} #lightbody strong.restrict { background:#fff url(/images/icons.gif) no-repeat -889px -335px; color:#4c4f57; font-size:1.2em; padding-left:10px;} /* Shopping basket - also used on shopping basket confirm and account previous orders */ .textlist.basket { padding:0; background:none;} .textlist.basket dd, .textlist.basket dt { margin-bottom:0;} .textlist.basket dd { border-bottom:1px solid #cad5dd; background:#EDF4F8;} .textlist.basket dt { padding:0; text-indent:0;} .textlist.basket dd .col { border-right:1px solid #cad5dd; min-height:60px; padding-top:10px;} .textlist.basket dd .col .imgholder{ height:50px; width: 50px; } .textlist.basket dd .col .imgholder img{padding: 3px; border: 1px solid #d9dbe8; } #ie6 .textlist.basket dd .col { height:60px;} .textlist.basket dt .col { font-weight:bold; min-height:18px;} #ie6 .textlist.basket dt .col { height:18px;} .textlist.basket dd .col.price { border-right:none; text-align:right; width:13%;} .textlist.basket .subheading .col.price { border-right:none; text-align:right; width:13%;} .textlist.basket .blabel, .textlist.basket .total { display:block; float:left; padding:5px 0; text-align:right; width:55%;} .textlist.basket .imgholder { float:left; height:130px; margin-right:10px; width:130px;} .textlist.basket .col.item { text-align:left; width:54.5%;} .textlist.basket .col.item a { color:#4c4f57;} .textlist.basket .subheading .col.item { border-left:none;} .textlist.basket .col.unit { text-align:center; width:12%;} .textlist.basket .col.qty { text-align:center; width:15%;} .textlist.basket .col.qty strong { display:block; margin:0 auto; margin-bottom:4px; width:64px;} .textlist.basket .col .pricewas { display:block; font-weight:normal; text-decoration:line-through;} .textlist.basket .col .pricevat { display:block; font-size:0.8em; font-weight:normal;} .textlist.basket .col input.qty { font-weight:bold; text-align:center; width:25px;} .textlist.basket .totals { background:#EDF4F8; margin-left:56%; width:44%; color:#1A2674; border-bottom:1px dashed #619CCA;} .textlist.basket .total { float:right; padding-right:3px; width:32%;} .textlist.basket .totals#grandtotal { font-weight:bold;} .textlist.basket .col em { display:block; font-style:normal;} .textlist.basket .col b {} .textlist.basket .col a { border:none;} .textlist.basket .button { margin:0;} .textlist.basket .button.download { margin-left:140px;} .textlist.basket .col.qty .qtyneg { float:left; margin-top:1px;} .textlist.basket .col.qty .qtypos { float:left; margin-top:1px;} .textlist.basket .col.qty input.qty { float:left; margin:0 1px;} .textlist.basket .col.qty .update { clear:both; left:5px; position:relative; top:3px;} #ie6 .textlist.basket .col.qty .update, #ie7 .textlist.basket .col.qty .update, #ie7 .textlist.basket .col.qty .remove { left:-3px; position:relative;} #ie6 .textlist.basket .col.qty .remove { left:12px; position:relative;} .textlist.basket .extrainfo { border:none; float:right; margin:15px 0 0; width:44%;} .textlist.basket .extrainfo div.notice { border-width:1px; font-size:1em; margin:0; max-width:none; padding:0 2px 5px; width:auto;} .textlist.basket .promotion .col { border:none; height:auto; min-height:20px;} #ie6 .textlist.basket dd.promotion .col { height:30px;} .textlist.basket .promotion .col.desc { width:68%;} .textlist.basket .promotion h3 { margin:0;} .textlist.basket .promotion .icon.scissors { margin:0 25px 0 0; position:relative; top:-20px;} .textlist.basket .promotion .icon.soffer { float:left; margin:0 45px;} .textlist.basket .promotion.voucher { border:3px dotted #ccc; border-width:3px 0; margin:3px 0;} .textlist.basket .promotion.offer .col.desc { width:84.5%;} #cart #minorder { margin:0 0 0 56%; font-size:1.1em; text-align:center;} #p_checkout .inner { padding:0;} #p_checkout h1 { border-bottom:0;} /* For collect in store baskets */ #cart.cartcollect .col.item { width:43%;} #cart.cartcollect .col.delmeth { width:17%;} #cart.cartcollect .col.delmeth .collect, #cart.cartcollect .col.delmeth .collect_dis { font-size:0.9em; line-height:1em; width:55px; float:left; margin-right:10px; text-align:center;} #cart.cartcollect .col.delmeth .deliver, #cart.cartcollect .col.delmeth .deliver_dis { font-size:0.9em; line-height:1em; width:55px; float:left; text-align:center;} #cart.cartcollect .col.delmeth .icon { float:none; margin:0 5px 5px; width:45px;} #cart.cartcollect .col.unit { width:10%;} #cart.cartcollect .col.qty { width:10%;} #cart.cartcollect .col.price { width:13%;} #cart.cartcollect .totals { margin-left:44%; width:56%;} #cart.cartcollect .blabel { width:60%;} #cart #collectopts { margin-left:44%;} #cart #collectopts dt { margin:0;} #cart #collectopts .icon { height:36px; float:left; margin-right:15px;} #cart #collectopts .icon.deliver, #collectopts .icon.deliver_dis { background-position:-493px -880px; height:30px;} #cart #collectopts .col.mcol { width:90%;} #cart #collectopts .notice { color:#d10000; margin:0 0 0 60px !important; font-size:1em; width:85%; display:block; max-width:none;} /* For collect in store on product page */ #product #collectopts { margin:0 0 10px;} #product #collectopts dd { display:block; line-height:1.6em;} #product #collectopts .icon { float:left; margin-right:5px;} #product #collectopts em { font-style:normal;} /* Login Page */ #signin form { position:relative;} #signin a { color:#4c4f57;} #signin .col { margin-top:4px; padding:0;} #signin .textlist .col.label { margin:0; max-width:100px; padding:7px 0 0; width:35%;} #signin .textlist .col.input { width:60%;} #signin .textlist .col.input input { height:18px; max-width:170px; width:100%;} #signin .textlist .notice { max-width:170px;} #signin .button { bottom:10px; position:absolute; right:10px;} #signin .col2 div { min-height:150px; padding:5px 10px 25px; position:relative;} #ie6 #signin .col2 div { height:160px;} /* Orders section of Account pages */ #orders.textlist .col.mcol { width:50%;} #orders.textlist .col.rcol { width:100px;} #orders.textlist .col .row { background:url(/images/icons.gif) no-repeat -10px -2px; display:block; padding-left:14px;} #orders .textlist.basket .col.qty { width:20%;} #orders .textlist.basket .col.price { width:21%;} #orders .textlist.basket .promotion .col.desc { width:76.5%;} /* Sitemap */ .sitemaplist { margin:0 0 10px 0;} .sitemaplist a { color:#4c4f57; background:url(/images/icons.gif) no-repeat -6px -2px; display:inline; margin-bottom:2px; padding-left:15px;} .sitemaplist dt { clear:both; font-weight:bold;} .sitemaplist dt a { background:none; font-weight:bold; padding:0;} .sitemaplist .sub1 a { background:#fff url(/images/icons.gif) no-repeat 5px -139px; padding-left:25px;} .sitemaplist .sub2 a { background:#fff url(/images/icons.gif) no-repeat 15px -139px; padding-left:35px;} .sitemaplist .sub3 a { background:#fff url(/images/icons.gif) no-repeat 25px -139px; padding-left:45px;} /* Page at the end of the checkout process which sends customers to Protx */ #p_redirect, #p_redirect #wrapper, #p_redirect #content, #p_redirect #centre { background:#fff; color:#333;} #p_redirect .box { width:400px; margin:70px auto 0;} #p_redirect .box.noborder { border:none; text-align:center;} #p_redirect .button.payatprotx { margin:0 auto;} table { border:1px solid #D0E2EE; padding:3px; background:#edf4f8;} table td { border-bottom:1px solid #fff; padding:2px 10px; color:#1A2674;} /* Flat Edged Tabs */ #nav { height:34px; background: url(/images/wrapper_bg.gif) repeat-y 0 0; position:relative; text-align:center;} #nav dl { display:inline-block; width: 944px; height:32px; padding-top: 2px; background: url(/images/wrapper_bg.gif) no-repeat -2958px 0; text-align:left; margin: 0 auto; } #nav dd { display:inline; margin-right: 10px;} #nav a { background:url(/images/icons.gif) no-repeat 0 -243px; color:#fff; padding:8px 0 8px 20px; margin:0 -2px; display:-moz-inline-stack; display:inline-block; white-space:nowrap; position:relative; cursor:pointer;} #nav a:hover { text-decoration:underline;} #nav a:focus, #nav a:active, #nav a.selected, #nav a.selected:hover { } /* 2 column layout */ #content { border-left-width:210px; border-right:none !important;} .noleftcol #content { border-left:none !important;} #inner { margin-left:-207px;} #ie6 #inner { margin-left:-198px; } .noleftcol #content #inner { margin-left:0 !important;} #left, #right { width:200px;} #centre { margin-left:200px;} .noleftcol #content #centre { margin-left:0 !important;} /* As this can only appear on a 2 column layout, its placed in this css file */ /* Modified Gallery view - for related products on product page when in 2cols and set to show related on right */ #psuedowrapper /*wrapper for product/cart*/ { float:left; width:73%;} .prodlist#relatelist /*wrapper for relateds*/ { width:25%; float:right;} .prodlist#relatelist dd { width:100%; overflow:hidden; margin:0 0 3px; height:auto; border:none; background:none;} .prodlist#relatelist dt { text-align:center;} .prodlist#relatelist dt span { width:170px;} .prodlist#relatelist .imgholder { text-align:left; text-align:center; height:auto;} .prodlist#relatelist .text { float:left; width:112px;} .prodlist#relatelist .desc { text-align:center;} .prodlist#relatelist .desc h3 { font-size:1.1em; margin:0; max-width:168px;} .prodlist#relatelist .desc p { display:none;} .prodlist#relatelist .cost { font-size:0.9em; position:static; height:auto; max-width:168px;} .prodlist#relatelist .cost .message { margin:0;} .prodlist#relatelist .buttons { display:none;} .prodlist#relatelist .soffer { display:none;} .prodlist#relatelist .offertext { display:none !important;} .prodlist#relatelist .message { display:none;} .prodlist#relatelist .star { display:none;} #cart #psuedowrapper { width:100%;} #cart .prodlist#relatelist { display:none !important} #cart .prodlist#relatelist dd { margin:0;} #cart .prodlist#relatelist .imgholder { float:left; height:40px; margin-right:5px; width:40px;} #cart .prodlist#relatelist .imgholder span { display:none;} #cart .prodlist#relatelist .cost { font-size:0.8em;} #cart .prodlist#relatelist .desc h3 { font-size:1em; max-width:none;} /* Shopping Basket */ #header #minibasket { border:none; background: #e5eff6 url(/images/xgradients.gif) no-repeat 0 -105px; display:block; width:228px; height:64px; color:#dadce4; position:absolute; right:22px; top:35px; text-align:left;} #header #minibasket:hover { text-decoration:none; background: #eef7ff url(/images/xgradients.gif) no-repeat 0 -175px;} #header #minibasket .title { font-size:1.4em; display:block; text-indent: -9000px;} #header #minibasket:hover .title { text-decoration:none;} #header #minibasket .totals { font-weight:normal; display:inline; color: #4c4c4c; position: absolute; top: 38px;} #header #minibasket #items{ left: 77px; } #header #minibasket #total{ left: 130px; } /* Currencies */ #header #currency { position:absolute; top:5px; right:10px; color:#dadce4;} #header #currency dd { float:left;} #header #currency span { float:left; font-size:0.9em;} #header #currency .icon { float:left;} #added_item_box { width:370px; position:absolute; margin:-154px -10px 0 0; border:10px solid #D0CBCF; border-color:rgba(199,201,205,0.8); z-index:11; text-align:left; color:#70727A; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} #added_item_box .subheading { display:block; height:30px; margin:0; border:none; font-size:1.4em; font-weight:bold; background:#EBEBEB; padding:5px 10px;} #header #added_item_close { padding:1px 6px 1px 0; color:#1A2674; font-size:0.7em; text-decoration:none; position:absolute; top:5px; right:0;} #header #added_item_close .close { border:1px solid #000; background:#1A2674; color:#fff; padding:0 4px; font-style:normal;} #newproduct { padding:20px 10px; background:#fff; border-bottom:1px solid #ddd;} #newproduct #added_img { margin-right:10px; width:40px;} #newproduct .product { width:290px;} #newproduct a.name { display:block; color:#444; font-size:1.1em;} #newproduct .pricewas { text-decoration:line-through; color:#aaa;} #added_item_box .totals { background:#fff; border-bottom:1px solid #ddd; padding:5px 10px;} #added_buttons { padding:20px 10px 10px; background:#fff;} #added_buttons .continueshop { margin:0;} /* Refine Results box */ #refine dl { margin:0;} #refine dd { color:#aaa;} /* Expanded Filters */ #refine { z-index:1;} #refine a, #refine span { display:block;} #refine .sub0 span, #refine .sub0 a, #list_filter_price dt { background:#fff; border-bottom:1px dashed #619CCA; padding:2px 0; margin-top:5px; font-weight:bold; color:#1A2674;} #refine .sub1 span, #refine .sub1 a, #list_filter_price a { background:#fff url(/images/icons.gif) no-repeat 0 0; padding:2px 0 2px 23px;} #refine .sub2 span, #refine .sub2 a { background:#fff url(/images/icons.gif) no-repeat 15px -137px; padding:2px 0 2px 35px;} #refine dt, #refine .head, #refine .foot { display:none;} #refine #list_filter_price dt, #refine dt.title { display:block;} #refine a.refinement { background:url(/images/icons.gif) no-repeat -886px -894px; padding:2px 0 2px 15px; margin:0; display:block; color:#cc0000;} #refine a.refinement:hover { background-position:-886px -979px; text-decoration:none;} /************************************* * LiquidShop RTE PAGES CSS Stylesheet *************************************/ .rte_wrapper { width:100%; overflow:hidden;} .rte_twoeqcol_left, .rte_twoeqcol_right, .rte_twocol_small_left, .rte_twocol_big_right, .rte_twocol_big_left, .rte_twocol_small_right, .rte_threecol { float:left;} .rte_twoeqcol_left {width: 48%; } .rte_twoeqcol_right {width: 48%;} .rte_twocol_small_left {width: 38%;} .rte_twocol_big_right {width: 58%;} .rte_twocol_big_left {width: 58%;} .rte_twocol_small_right {width: 38%;} .rte_threecol {width: 31%;} /* sIFR Instructions 1) To configure load up the webworking .fla and change the font used within it to the one you want to use. Export it with the stored settings and name the experted .swf with the name of the font you are using. 2) Replace the css tags in the section below to the tags you want to replace with the font used in the .fla (eg to restyle all h1 tags put h1 below instead of dt.heading) 3) Load up /scripts/sifr-config.js and change the font size and colours and configure the font used and Flash based text effects /* sIFR - to use sifr to style other elements, replace dt.title and related css (eg the .column) with the css element to be restyled */ /* sIFR screen css - do not edit */ .sIFR-flash { visibility: visible !important; margin: 0; padding: 0;} /*.textlist.basket #sIFR_callback_1.sIFR-flash{ visibility:hidden !important; } .textlist.basket #sIFR_callback_1_alternate{ visibility:visible !important; }*/ .sIFR-replaced, .sIFR-ignore { visibility: visible !important;} .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;} .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none;} .column dt.title { border-bottom: 1px dashed #619cca; background: none; border-width: 0 0 1px 0; padding:5px 0; } .column dt.title span { background:url(/images/sidetitles.gif) no-repeat left top; display:block; height:24px; text-indent:-9000px;} /* Left */ #refine dt.title span { background-position:left -396px;} #categories dt.title span { background-position:left top;} #brands dt.title span { background-position:left -36px;} #specialcats dt.title span { background-position:left -72px;} #infopages dt.title span { background-position:left -108px;} /* Right */ #minibasket dt.title span { background-position:left -144px;} #recommended dt.title span { background-position:left -180px;} #recentlyviewed dt.title span { background-position:left -216px;} #bestsellers dt.title span { background-position:left -252px;} #cartinfopages dt.title span { background-position:left -288px;} #promotions dt.title span { background-position:left -324px;} #wishlist dt.title span { background-position:left -360px;} /* 3 products per row */ .prodlist.galleryview dd { width:219px;}