@charset "utf-8"; body { background:#D7D8D9 url(/images/body_bg.gif) repeat-x; color:#3B474E; cursor:default; font:62.5% Arial, Helvetica, sans-serif; margin:0; padding:0; text-align:center;} #wrapper { background:#fff; font-size:1.2em; margin:0 auto; max-width:1300px; text-align:left; width:980px;} /* --------------------------------------------------------------------------------------------------------------------------------- 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:#3b474e; font-weight:normal; text-decoration:none;} a:hover { cursor:pointer; text-decoration:underline;} a:active { text-decoration:underline;} h1, h2, h3, h4, h5, h6 { 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;} dl { overflow:hidden; width:100%;} input, select, textarea, optgroup { font:1em Arial, Helvetica, sans-serif;} strong { font-weight:bold;} em { font-style:italic;} acronym { font-weight:bold;} .pageheading { background:#F1F1F1; color:#720000; height:1%; margin:0 0 10px; overflow:hidden; padding:5px 10px 8px; border: 1px solid #ccc; border-width: 1px 1px 1px 1px; letter-spacing: -0.05em; } .pageheading .results { color:#F5D1D1;} .pageheading .icon{ display: none; } .pageheading .smaller { display:block; font-size:0.6em; letter-spacing: normal;} .pageheading a { color:#555; font-weight:bold;} .subheading { background:#70001a url(/images/xgradients.gif) repeat-x left -122px; color:#fff; font-size:1.2em; font-weight:normal; margin:0; overflow:hidden; padding:4px 0; width:100%;} .subheading span, .subheading a { color:#fff; float:left; padding:0 10px;} .subheading a { float:right; width: 65px; font-weight:bold;} /* 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 .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:#3b474e;} .comment/*below some inputs on page forms*/{ font-size:0.9em;} .smaller { font-size:0.9em;} /* --------------------------------------------------------------------------------------------------------------------------------- 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;} .button.viewbasket { background-position:-5px -202px;} .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:163px;} .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 -328px; height:65px; width:115px;} .logo.companylogo { background:url(/images/logos.gif) no-repeat left top; cursor:pointer; height:100px; left:0px; margin-right:5px; position:absolute; top:14px; width:243px; z-index:1;} .logo.companylogo:hover { background-position:left -101px;} .logo.liquidshop { background:url(/images/logos.gif) no-repeat left -416px; 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:#939EB1; height:19px; padding:0; width:19px;} a:hover .icon.viewlist, .lselected .icon.viewlist { background-position:-63px -667px; border-color:#BEC5D5;} .icon.viewgallery { background-position:-88px -667px; border-color:#939EB1; height:19px; padding:0; width:19px;} a:hover .icon.viewgallery, .gselected .icon.viewgallery { background-position:-113px -667px; border-color:#BEC5D5;} .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:#000;} #header #innerheader { background: #fff; height:100px; padding-top:25px; position:relative; text-align:center; width:100%;} #header a { color:#3b474e;} #header a:hover { color:#fff;} #header #innerimage { background: #fff; /*background:url(/images/xgradients.gif) no-repeat left -251px;*/ height:125px; left:0; position:absolute; top:0; width:100%;} #header #search { background:url(/images/xgradients.gif) no-repeat left -207px; height:24px; margin:0 auto; padding:14px 10px 5px 10px; position:relative; top:0px; width:299px;} #ie6 #header #search, #ie7 #header #search { top:0;} #header #search #simpleSearch { background:#fff; border:none; font-size:1.2em; font-weight:bold; height:16px; line-height:15px; padding:0 0px 0 5px; width:285px;} #header #search #searchgobutton { background:url(/images/logos.gif) no-repeat -203px -204px; border:none; color:#fff; cursor:pointer; font-size:0.1em; height:23px; position:absolute; right:8px; top:10px; width:42px;} #header #account { background:#B2BBC5 url(/images/xgradients.gif) no-repeat 0 -423px; height:19px; position:absolute; right:0; bottom:0; width:155px; padding: 3px 0 0 25px; border: 1px solid #fff; border-width: 0 0 1px 0;} #header #account a { background: none !important; color:#fff; font-size:0.9em; font-weight:bold;} #header #account a:hover{ background: none; } #header #account #accaccount a{ padding-left: 2px; width:auto; } #header #contact/*phone number*/{ color:#3b474e; position:absolute; right:0px; top:40px;} #header #contact span{ font-weight: bold; color: #8D0222;font-size: 1.5em; } #header .notice/*searchbox errors*/{ font-size:1.2em; left:37.5%; position:absolute; text-align:center; top:2px; width:25%; z-index:2;} /*EXTRA CSS -> look in css/nav for header nav styles*/ /* Page Content */ #content { background:#fff; border-left:200px solid #fff; border-right:200px solid #fff; display:block; position:relative;} #inner { display:block; background: #fff; margin-left:-200px; margin-right:-200px; overflow:hidden; border: 1px solid #777; border-width:0 1px;} #left, #right { background:#fff; position:relative; width:200px;} #left { float:left; left:0px;} #left .inner { padding:5px 6px;} #right { float:right; right:0px;} #right .inner { padding:5px 6px;} .inner { } #centre { display:block; height:1%; margin-left:200px; margin-right:200px; padding:10px 5px 0; position:relative;} /* Footer */ #footer { background:#f1f1f1; clear:both; color:#fff; overflow:hidden; position:relative; text-align:left; border: 1px solid #777777; border-width: 0 1px 0; } #footer a { color:#000;} #footer h3 { color:#000; font-size:1.4em; margin:0;} #footer h3 a, #footer .col2 h3 { font-size:1.1em; font-weight:bold;} #footer .box { background:#B2BBC5; border: 1px solid #999; margin:0 0 10px; padding:10px 15px; } #footer dl { margin-bottom:10px;} #footer dl.vlist a { background:url(/images/icons.gif) no-repeat -11px -258px; border:none; display:inline; padding:0 0 0 10px;} #superfooter { margin:15px 0 0 0; overflow:hidden; width:100%;} #superfooter a{ color: #000; } #superfooter a:hover{ color: #555; } #footer #directory { background:#d5d5d5; float:left; width:54%; margin-left:10px;} #directory dl.sitemaplist { float:left; margin-right:3px; width:48%;} #directory dl.sitemaplist a { background:none; border-bottom:1px solid #F5D1D1; color:#fff; float:left; margin-right:8px; padding:0; white-space:nowrap;} #directory dl.sitemaplist dt { color:#fff; margin-bottom:-2px;} #directory dl.sitemaplist dt a { border:none; float:none; margin-bottom:0;} #directory dl.vlist dd { color:#fff; float:left; margin-right:3px; width:48%;} #directory dl.vlist dd a { border:none; float:none; font-weight:bold; margin-bottom:0;} #footer #services { background: #d5d5d5; float:right; margin:0 5px 10px 0; width:35%;} #services p { margin:-4px 0 10px 0; color: #fff;} #services p, #services h3{ padding: 3px 10px 3px 10px; background: #b5b5b5; color: #fff; } #services p{ border-top: 0; padding-top:0; } #services h3{ border-bottom: 0; } #subfooter { background:#84011F; clear:both; display:block; padding:10px 10px; position:relative;} #subfooter #copyright { left:20px; position:absolute; top:5px;} #subfooter #copyright span { font-size:1.6em; position:relative; top:4px;} #subfooter .vcard { line-height:normal; text-align:center;} #subfooter .vcard p { margin:0;} #subfooter .logo { position:absolute; right:10px; top:-3px;} /* --------------------------------------------------------------------------------------------------------------------------------- 5) CENTRE COLUMN SPECIFIC STYLES /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Box for border on all content sections */ .box { background:#fff;/* border:1px solid #ccc;*/ height:1%; margin-bottom:15px; overflow:hidden; width:548px;} #ie6 .box { width:99.5%;} .box .inner { height:1%; overflow:hidden; padding:5px 0;} .box .hlist { margin:10px 5px;} .box .hlist.collist { margin:0; } .rtecontent { background:#fff; border:1px solid #ccc; height:1%; margin-bottom:15px; overflow:hidden; padding:15px 10px 20px 10px;} /* Columns within centre for login/address etc in checkout */ .col2 { width:49%;} .col2 div { background:none; border:1px solid #E3E7EC; margin:0 0 15px 0; padding:10px;} .col3 { width:32%;} .col3.fleft { margin-right:2%;} .col3 div { background:none; border:1px solid #E3E7EC; margin:0 0 15px 0; padding:10px;} .col3 #delivery_comments, .col3 #order_reference { display:block; width:98%;} .col3 strong { display:block;} /* Breadcrumbs */ #crumbs, #crumbsbasket { margin:0 0 10px; border: none; background: none; } #crumbs dt { padding-left:10px;} #crumbsbasket { margin:0 0px 10px; width:auto;} #crumbsbasket dd { color:#aaa; display:block; float:left; padding:2px 6px; text-align:center; width:22.5%;} #crumbsbasket .complete { background:#fff; color:#3b474e; font-weight:bold;} #crumbsbasket .selected { text-decoration:underline;} /* Centre Banner */ #banner { display:block; margin:0 15px 10px; text-align:center;} /* Imgholder - change the valign to move the image position*/ .imgholder { background:#fff; display:table-cell; height:130px; overflow:hidden; text-align:center; vertical-align:bottom; width:23.5%;} .imgholder span { display:inline-block; height:130px; vertical-align:bottom;} .caption/*text under imgholder images*/{ display:block;} /* Vertical Lists */ .vlist { } .vlist dd a { display:block; padding:4px 10px 4px 10px; color: #1c1f28;} .vlist dd a:hover { background:#f5f5f5; font-weight:bold; text-decoration:none;} /* Horizontal Lists */ .hlist { } .hlist dd, .hlist dt { float:left; padding:0 0; margin-right:5px;} .hlist dd a, .hlist dt { background:url(/images/icons.gif) no-repeat -6px -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/arrowanim.gif) no-repeat 4px 4px;} .hlist dd.selected a { font-weight:bold; text-decoration:underline; color: #555;} /* Image Based Lists */ .imglist { padding-bottom:10px;} .imglist a { border:1px solid #fff; cursor:pointer; display:block; float:left; font-weight:bold; font-weight:normal; height:150px; margin:10px 0 3px 1%; overflow:hidden; padding:3px 0; text-align:center; width:23.5%;} #ie6 .imglist a { margin-left:3px;} .imglist .imgholder { height:130px;} #ie6 .imglist .imgholder span, #ie7 .imglist .imgholder span { display:none;} .imglist a:hover { border:1px solid #ccc; text-decoration:none;} .imglist .selected a { border:1px solid #ccc; 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 dd a { height:140px;} #fcategories .imgholder, #fcategories .imgholder span { height:105px;} #fspecialcats dd a { height:120px;} #fspecialcats .imgholder, #fspecialcats .imgholder span { height:70px;} #fcontent .rtecontent{ border: none; padding: 0; } #fcontent .rtecontent h2{ color: #890808; letter-spacing: -0.05em; } #fcontent .rtecontent .inner{ padding:0; } /* Subcategories */ .catlist { padding:0;} .catlist a { border-color:#fff; height:130px; margin:0 1% 3px 0; width:127px;} #ie6 .catlist a{ margin-right: 2px; } .catlist .imgholder, .catlist .imgholder span { height:100px;} .catlist a:hover { border-color:#ccc;} .catlist .caption { white-space:normal; padding: 2px;} /* Tabs used on Product page and cat pages */ .tabs { background:#c0c0c0; font-size:1.2em; overflow:hidden; width:100%;} .tabs dd a { background:#c0c0c0; border:none; display:block; border-right:1px solid #BEC5D5; color:#555; padding:6px 10px; text-decoration:none;} .tabs dd a:hover { background:#f1f1f1;} .tabs dd a.selected, .tabs dd a#active { background:#f1f1f1; font-weight:bold; text-decoration:none; } .tabs .results { color:#F5D1D1;} .tabs a:hover .results { color:#fff;} /* Page chooser, view mode and sort by lists for pagination */ .sortbar { background:#f1f1f1; height:1%; margin-bottom:15px; overflow:hidden; padding:5px 0; width:100%;} .sortbar select { float:left; margin:0 6px 0 10px;} .sortlist { color:#fff; height:1%; margin:0 6px; width:auto;} .sortlist dd { float:left;} .sortlist dd a, .sortlist dt { border:1px solid #777; color:#555; 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-color:#c0c0c0; text-decoration:none;} .sortlist.perpage { float:left;} .sortlist.page { float:right;} .sortlist.page dd a { background:#f1f1f1;} .sortlist.page .selected, .sortlist.page a:hover { background:#c0c0c0;} .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;} .textlist dd, .textlist dt { overflow:hidden; position:relative; width:100%;} .textlist .subheading { margin-bottom:5px;} .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 /* --------------------------------------------------------------------------------------------------------------------------------- */ /*EXTRA CSS -> look in css/sideborder for column list borders*/ /* Sideboxes */ .column dl { background:#f1f1f1;} .column .title { background:#fff; color:#fff; display:block; font-size:1.4em; letter-spacing:-0.05em; padding:0 10px;} .column .sub0 a { /*background:#fff url(/images/icons.gif) no-repeat 0 2px;*/ padding:4px 10px 4px 11px;} .column .sub0 a:hover { /*background:#f6f6f6 url(/images/arrowanim.gif) no-repeat 10px 8px;*/} .column .sub0 a.selected { background:#70001a url(/images/xgradients.gif) repeat-x left -122px; color:#fff; font-weight:bold;} .column .sub1 a { background:#eee3e5 url(/images/icons.gif) no-repeat 0 -134px; padding:4px 10px 4px 23px;} .column .sub1 a:hover { background:#f5d1d1 url(/images/icons.gif) no-repeat 0 -134px;} .column .sub1 a.selected { background:#F5D1D1 url(/images/icons.gif) no-repeat -1px -255px; color:#000; font-weight:bold;} .column .sub1.bottom a { border-bottom:1px solid #d49393;} .column .sub2 a { background:#fff url(/images/icons.gif) no-repeat 12px -134px; padding:4px 10px 4px 33px;} .column .sub2 a:hover { background:#fff url(/images/icons.gif) no-repeat 12px -134px;} .column .sub2 a.selected { background-color:#fff; font-weight:bold;} .column .sub2.bottom a { border-bottom:1px solid #F5D1D1;} .column select { margin:10px 5px; width:158px;} .column .scrollable .scroller { display:block; max-height:230px; overflow:auto;} .column .imglist dd a { background:#f1f1f1; 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:#f6f6f6; 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;} /* Refine Results box */ #refine { overflow:visible; position:relative;} #refine dd { padding:3px 10px 0;} #refine a.refinement { background:none; margin:0; padding:4px 0;} #refine a.refinement:hover { color:#d10000; text-decoration:underline;} #refine input { background:#fff url(/images/icons.gif) no-repeat right -741px; border:1px solid #ABADB3; color:#3b474e; cursor:pointer; overflow:hidden; padding:2px 18px 2px 5px; width:125px;} #refine input:hover { background:#fff url(/images/icons.gif) no-repeat right -865px;} #refine .bottom { height:5px;} #refine .selectpop { background:#fff; border:1px solid #999; left:5px; margin:-1px 5px 0; height:expression( this.scrollHeight > 279 ? "280px" : "auto" );/*sets max-height forIE*/ max-height:280px; overflow:auto; padding:0; position:absolute; width:148px;} #ie6 #refine .selectpop, #ie7 #refine .selectpop { margin-top:21px;} #ie6 #refine .selectpop dd, #ie7 #refine .selectpop dd { overflow-x:hidden;} #refine .selectpop dd { padding:0;} #refine .selectpop dd a { background:none; border:none; color:#000; display:block; margin:0; padding:1px 2px;} #refine .selectpop dd a:hover { background:#B2BBC5; 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:6px;} #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;} /* Your Basket box */ #minibasket { } #minibasket dd { border-top:1px solid #e3e6f0; overflow:hidden; padding:7px 10px; width:150px;} #minibasket .name { display:block;} #minibasket .qty, .column #minibasket .remove, .column #minibasket fieldset { display:block; float:left;} #minibasket .cost { float:right;} #minibasket .cost .pricewas { color:#aaa; text-decoration:line-through;} #minibasket .smaller { display:block;} #minibasket dd.totals { font-weight:bold;} #minibasket .label { float:left;} #minibasket #empty { border-bottom:1px solid #e3e6f0;} #minibasket #checkout { border:none; padding:0 10px;} #minibasket #currency { border:none;} #minibasket #currency span { float:left; font-size:0.9em;} #minibasket #currency .icon { float:left;} /* Promotion Code box */ #promotions { } #promotions dd { overflow:hidden; padding:10px 5px; width:100%;} #promotions label { display:block; font-size:0.9em; margin-bottom:3px;} #promotions #voucher { margin-right:3px; width:100px;} #promotions input { float:left;} /* --------------------------------------------------------------------------------------------------------------------------------- 7) PRODUCT DISPLAY LISTS /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Elements used in both list views */ .prodlist { padding-bottom:10px;} .prodlist dd { border:1px solid #e3e7ec; overflow:hidden; position:relative;} .prodlist .product { margin:5px; text-align:center;} .prodlist .imgholder img{ padding: 2px; border: 1px solid #e5e5e5; } .prodlist .soffer { left:5px; position:absolute; top:5px;} .prodlist .desc { text-align:left;} .prodlist .desc h3 { font-size: 1.1em; letter-spacing: -0.02em; } .prodlist .desc h3 a { font-weight:bold;/* border-bottom: 1px solid #e5e5e5;*/} .prodlist .desc h3 a:hover{ /*text-decoration: none;*/ border:none; } .prodlist .desc p { font-size:0.9em; line-height:normal; margin:0;} .prodlist .cost { text-align:left;} .prodlist .cost .offertext, .prodlist .cost .offertext a { color:#820000; display:block;} .prodlist .cost .offerexpiretext { display:block;} .prodlist .cost .price { font-size:1.4em; font-weight:bold;} .prodlist .cost .pricenow { color:#820000;} .prodlist .cost .pricewas { font-size:1.1em; padding:0 5px; text-decoration:line-through;} .prodlist .cost .pricewas .price { 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;} #ie6 #centre .prodlist dd .imgholder { display:block; height:130px; width:auto;} #ie6 .prodlist .imgholder span { display:none;} #cart .prodlist#relatelist .imgholder span { display:none;} /* Gallery View */ .prodlist.galleryview { } .prodlist.galleryview dd { float:left; height:267px; margin:10px 0 0 1%; width:31.5%;} #ie6 .prodlist.galleryview dd { margin:10px 0 0 3px;} .prodlist.galleryview .desc h3 { margin:2px 0 5px 0; text-align:center;} .prodlist.galleryview .desc p { display:none;} .prodlist.galleryview .cost { background:#fff; bottom:29px; height:55px; left:5px; position:absolute; width:95%; text-align:center; } .prodlist.galleryview .button { bottom:3px; left:10px; margin:0; position:absolute;} /* List View */ .prodlist.listview { } .prodlist.listview dd { margin:10px 5px 0; width:98%; } #ie6 .prodlist.listview dd{ height: 55px; } .prodlist.listview .soffer { display:none;} .prodlist.listview .imgholder { float:left; height:50px; width:46px;} .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 { background:#2f3b42 url(/images/buttons.jpg) no-repeat -433px -57px; float:right; height:31px; width:76px;} .prodlist.listview a.button /*for more info - only ever an A link*/ { background:#2f3b42 url(/images/buttons.jpg) no-repeat -433px -505px;} /* Modified Gallery view - for Recommended products */ .prodlist.featured { } .prodlist.featured dd { height:323px; margin:10px 0 0 1%;} #ie6 .prodlist.featured dd { margin:10px 0 0 3px;} .prodlist.featured .desc h3 a { font-size:1em;} .prodlist.featured .desc h3{ text-align: left; } .prodlist.featured .desc p { display:block; font-size:0.9em; margin:0 0 6px 0;} .prodlist.featured .cost { bottom:34px; 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:#c0c0c0;} .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:#820000; font-size:1.4em; font-weight:bold;} .prodlist.offerlist .button { background:#2f3b42 url(/images/buttons.jpg) no-repeat -433px -108px; margin:5px;} /* Left/Right Column Product Lists */ .prodlist.sidelist { } .prodlist.sidelist dd { border: 1px solid #d0d0d0; border-width:1px 0 0 0; height:100%; overflow:hidden; width:100%; padding: 5px 0;} .prodlist.sidelist .imgholder { float:left; height:46px; margin-right:8px; width:46px; background: none;} .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:1.0em; margin:0; letter-spacing:normal;} .prodlist.sidelist .desc p { display:none;} .prodlist.sidelist .cost { font-size:0.8em;} .prodlist.sidelist .cost .message { margin:0;} .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 25px 0;} #product #brandlogo { float:right;} #product #imagewrapper { float:left; margin:0 10px 0 0; text-align:center; width:250px;} #product #imagewrapper #prod_img { margin-bottom:10px; position:relative;} #product #imagewrapper #prod_img span { display:none;} #product #imagewrapper #prod_img a:hover { cursor:-moz-zoom-in; cursor:pointer;} #product #imagewrapper #prod_img a:hover span { background:#fff url(/images/icons.gif) no-repeat -432px -662px; border:1px solid #ccc; 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 { border:2px solid #fff;} #product #imagewrapper #poptThumbs a:hover img, #product #imagewrapper #poptThumbs .optsel img { border:2px solid #820000;} #product #summary { height:1%; width:275px; float:left;} #product #summary #activeAjax { height:32px; position:absolute; right:0; top:0; width:32px;} #product #summary .offertext { color:#820000; display:block;} #product #summary .offerexpiretext { color:#820000; display:block;} #product #summary .cost dd { display:inline;} #product #summary .cost .pricenow .price { color:#820000; font-size:1.8em; font-weight:bold;} #product #summary .cost .pricenow .pre { color:#820000; 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;} #product #summary #product_options { margin-bottom:10px;} #product #summary #product_options dd { padding-bottom:4px;} #product #summary #product_options select { width:250px;} #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 { margin-bottom:10px; width:270px;} #product #summary #details dt /* for out of stock notice*/{ border-bottom:1px solid #e3e7ec; float:left; margin-right:5px; padding-top:5px; width:70px;} #product #summary #details dd /* for out of stock notice*/{ margin-bottom:1px; padding-top:5px;} #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 a { border-bottom:1px solid #ccc;} #product #summary #details acronym { font-weight:normal;} #product .hlist.tabs { background:none; bottom:-1px; position:relative;} #product .hlist.tabs a { color: #555;} #product .hlist.tabs dd { margin:0;} #product .hlist.tabs dd a#active { background:#fff; border:1px solid #ccc; border-bottom:none; color:#3b474e;} #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:#820000;} .spectable{ width:547px; font-size:0.9em;} .spectable caption{ font-weight:bold; color:#84011F; font-size:1.2em} .spectable td{ border-bottom:1px solid #D7D8D9; padding:2px} /* 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:#3b474e; font-size:1.2em; padding-left:10px;} /* Shopping basket - also used on shopping basket confirm and account previous orders */ .textlist.basket dd, .textlist.basket dt { border-bottom:1px solid #E3E7EC; margin-bottom:0;} .textlist.basket dt { padding:0; text-indent:0;} .textlist.basket dd .col { border-left:1px solid #fff; border-right:1px solid #E3E7EC; min-height:75px;} #ie6 .textlist.basket dd .col { height:75px;} .textlist.basket dt .col { border-left:1px solid #9c1735; border-right:1px solid #7D011D; font-weight:normal; min-height:20px;} #ie6 .textlist.basket dt .col { height:20px;} .textlist.basket dd .col.price { border-right:none; text-align:right; width:13%;} .box .inner .col3{ width: 31.7%; } .textlist.basket .subheading { font-size: 1.1em; } .textlist.basket .subheading .col.price { border-right:none; text-align:right; width:11%;} .textlist.basket .blabel, .textlist.basket .total { display:block; float:left; padding:5px 0; text-align:right; width:55%;} .textlist.basket .imgholder { float:left; height:50px; margin-right:10px; width:50px;} .textlist.basket .col.item { text-align:left; width:54.5%;} .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:13%;} .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:#f6f6f6; font-size:1.2em; margin-left:55%; width:45%;} .textlist.basket .total { float:right; padding-right:3px; width:25%;} .textlist.basket .totals#grandtotal { font-weight:bold;} .textlist.basket .col em { display:block; font-style:normal;} .textlist.basket .col b { font-size:1.2em;} .textlist.basket .button { margin:0;} .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 {display:none; 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%;} /* 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:12%;} #cart.cartcollect .col.price { width:11%;} #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 dt.subheading{ font-size: 1.1em; } #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;} /* Login Page */ #signin form { position:relative;} #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 { 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;} /* Flat Edged Tabs */ #nav { background:#70001a url(/images/xgradients.gif) repeat-x left -122px; text-align:left; height:31px; } #nav dl { margin:0 auto; display:inline-block; } #nav dd { display:inline;} #nav a { background:#70001a url(/images/nav.gif) no-repeat left -40px; padding:8px 15px; margin:0 -2px; color: #fff; display:-moz-inline-stack; display:inline-block; white-space:nowrap; position:relative; cursor:pointer;} #nav a:hover { background:#68727B url(/images/nav.gif) no-repeat left -71px; text-decoration:none;} #nav a:focus, #nav a:active, #nav a.selected, #nav a.selected:hover { background:#5c6a85 url(/images/nav.gif) no-repeat left -71px; color: #fff;} /* 3 column layout */ #content { border-left-width:200px; border-right-width:200px;} #inner { margin-left:-200px; margin-right:-200px;} #left, #right { width:200px;} #centre { margin-left:200px; margin-right:200px;} /* Shopping basket */ #minibasket {} #minibasket dd { border-top:1px solid #e3e6f0; overflow:hidden; padding:7px 10px; width:88%;} #minibasket .name { display:block;} #minibasket .qty, .column #minibasket .remove, .column #minibasket fieldset { display:block; float:left;} #minibasket .cost { float:right;} #minibasket .cost .pricewas { color:#aaa; text-decoration:line-through;} #minibasket .smaller { display:block;} #minibasket dd.totals { font-weight:bold;} #minibasket .label { float:left;} #minibasket #empty {} #minibasket #checkout { padding:0 10px;} #minibasket #checkout, #minibasket #currency { border-top:none; border-bottom:none;} #minibasket #currency span { float:left; font-size:0.9em;} #minibasket #currency .icon { float:left;} /* Refine Results box */ /* #refine {} #refine dd { padding:3px 10px 0;} #refine .bottom { height:5px;} #refine .selectpop { left:25px; width:150px;} */ a.refinement { background:none; margin:0; padding:4px 0; display:block;} a.refinement:hover { color:#d10000; text-decoration:underline;} /************************************* * 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 */ .column dt.title { } .sIFR-active dt.title { visibility:hidden; line-height:0.8em;} /* sIFR screen css - do not edit */ .sIFR-flash { visibility: visible !important; margin: 0; padding: 0;} .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;} /* Pure CSS Styled Borders */ .column dl { background: #f1f1f1; margin:0 0 10px;} /* 3 products per row */ .prodlist.galleryview dd { width:31.5%;}