/* MAIN USWITCH STYLE SHEET ======================== 1. Zero-out 2. Type 3. Links 4. Layout - header, main, nav, accreditation/footer, milk header, milk pages, milk powered by notices 5. XHTML Components - tables, lists, forms 6. Bespoke - box, linkbar, title 6. Color 7. Global */ /* 1.'ZERO-OUT =========== */ /* Zero-out CSS */ #us-header div,#us-header p,#us-header h2, #us-milk-header div,#us-milk-header p,#us-milk-header h2, #us-accredited div,#us-accredited p, #us-footer div,#us-footer p, #us-nav div,#us-nav p,#us-nav ul,#us-nav li,#us-nav span,#us-nav h3,#us-nav h4, #us-main p,#us-main blockquote,#us-main ol,#us-main ul,#us-main li,#us-main h1,#us-main h2,#us-main h3,#us-main h4,#us-main h5,#us-main form,#us-main fieldset, #us-more div,#us-more p,#us-more blockquote,#us-more ol,#us-more ul,#us-more li,#us-more h1,#us-more h2,#us-more h3,#us-more h4,#us-more h5,#us-more form,#us-more fieldset { margin:0; padding:0; background-image:none; background-color:transparent; border:none; line-height:1; } #us-main input,#us-more input { /* margin:0; THIS BREAKS RADIO BUTTONS!!! */ background-image:none; background:none; } /* :BUG don't zero out border for input, as can't restyle as per browser default. Default behaviour seems to be 2px but with special shading (on PC) */ /* :HACK have made specific class to apply white background to input text field */ #us-header a img,#us-header :link img,#us-header :visited img, #us-milk-header a img,#us-milk-header :link img,#us-milk-header :visited img, #us-accredited a img,#us-accredited :link img,#us-accredited :visited img, #us-footer a img,#us-footer :link img,#us-footer :visited img, #us-nav a img,#us-nav :link img,#us-nav :visited img, #us-main a img,#us-main :link img,#us-main :visited img, #us-more a img,#us-more :link img,#us-more :visited img { border:none; } /* + + + + + + + + + + + + + + + */ /* 2.'TYPE ======= */ /* :INFO JR 22/08/2006 No default color set for p, h.x etc. Is this worth doing at some point? */ /* :INFO RL 06/12/2006. Partner specificity issue - have added a links to font-size and family so partners dont override us. :TODO need to keep an eye on this and over time make our styles highly specific for other elements. e.g #8946 */ /* Font sizes ---------- */ #us-header, #us-milk-header, #us-accredited, #us-footer,#us-nav, #us-main, #us-more, #nav-cobrand, #us-main table, #us-more table { font-size:x-small !important; f\ont-size:small !important; } #us-header p,#us-milk-header p,#us-footer p,#us-nav p,#us-nav span,#us-nav li, #nav-cobrand li, #us-main p,#us-main li,#us-main table,#us-main th,#us-main td,#us-main label,#us-main input, #us-more p,#us-more li,#us-more table,#us-more th,#us-more td,#us-more label,#us-more input, #us-accredited .us-poweredby-box p, #us-main #us-content span.linkbar { font-size:85%; line-height:1.3; } #us-header p,#us-milk-header p,#us-footer p,#us-nav p,#us-main p,#us-main h4,#us-more p, #us-main #us-content span.linkbar { margin:0 0 4px; } #us-main h1 { font-size:167%; line-height:167%; } #us-main h2 { font-size:191%; } #us-nav h3,#us-nav h4,#us-more h4,#us-nav h5, #us-main h3,#us-main h4,#us-more h4,#us-main h5 { font-size:85%; line-height:1.2; } #us-more .us-box .linkbar, #us-main .linkbar, #us-main .linkbar-results p, #us-main #us-content span.linkbar { font-size:77%; } #us-main select, #us-main input { font-size:85%; } /* G Slinn R14 */ .us-box input { margin:5px; background:#c0c0c0 !important } .us-box input.input-bg { width:100px; background:#fff !important } /* Prevent Inherited Shrinkage - http://tinyurl.com/4kft3 aka "progressive reduction" http://tinyurl.com/dr8xf */ #us-main p input, #us-main td input, #us-nav li li, #us-nav #us-nav li p, #us-nav td p, #us-nav td li, #us-nav blockquote p, #us-nav p span, #us-main li li, #us-main #us-main li p, #us-main td p, #us-main td li, #us-main blockquote p, #us-main p span, #us-main th p, #us-more li li, #us-more #us-more li p, #us-more td p, #us-more td li, #us-more blockquote p, #us-more p span, /* Partner specificity */ #us-main a, #us-more a, #us-nav a, #us-header a, #us-footer a, #us-main table.us-tableccbalance td label, #us-main table.us-tableccbalance td input, #us-main table.us-tableccbalance td select /* :INFO RL 05/12/06 - for CCards form to avoid .net rework */ { font-size:100%; } #us-main th .linkbar, #us-main td .linkbar { font-size:90%; } /* :KLUDGE 90% of 85%, which is about 77% !! */ #us-main .us-apr { font-weight:bold; font-size:151%; } /* :INFO SB - APR rate legally has to be 151% & bold */ /* Headings -------- */ #us-header,#us-milk-header,#us-accredited,#us-footer,#us-nav,#us-main,#us-more,#nav-cobrand, /* Partner specificity */ #us-wrapper *, #us-wrapper table * /* eg. MSN partner */ { font-family:Verdana, Arial, Helvetica, sans-serif; } #us-header h1,#us-header h2,#us-milk-header h1,#us-milk-header h2,#us-main h1,#us-main h2, #us-main .pictorial-module h4 { font-family:Helvetica, Arial, sans-serif; font-weight:normal; } /* Partner specificity - section title */ #us-main h1 *, #us-main h2 * { font-family:Helvetica, Arial, sans-serif; } /*#us-main h1 { margin-bottom:18px; } :INFO commented out for now as this space is now created by the h3. */ #us-main h3 { text-transform:uppercase; line-height:1.9; margin-bottom:5px; padding-left:6px; color:#fff; background-color:#039; } /* Issue:5525 H3's should no longer have text-transform on them. */ #us-main h3, #us-main h4 { font-weight:bold; } #us-more h4 { text-transform:uppercase; } #us-main h4 { margin-bottom:8px; color:#039; } /* :FLAG substitute color dark */ #us-main h5 { font-weight:normal; text-transform:uppercase; } #us-main h1.noborder { border-bottom:0px !important; padding-top:0 !important; line-height:1.0em !important} /*:INFO h1 with no border and no top padding */ /* GS 28/09/06: Issue:4096 - Opera 9 hack. A spacer for the title object */ #us-header { } @media all and (min-width:0px) { head~body #us-header { padding-bottom:2px !important; } } .titletext ol { list-style-type:none; } /* 3.'LINKS ======== */ /* General links */ #us-main a:link, #us-more a:link, #us-main a:visited, #us-more a:visited { color:#039; } /* :FLAG substitute color dark */ #us-main #us-content a:hover, #us-more a:hover { color:#039; } /* :IMPORTANT :INFO JR 18/08/2006 took off !important as overwriting output table thead links */ /* Faux button */ #us-main a.fauxbutton { float:right; border:2px solid; border-color: #FFFFFF #828177 #828177 #FFFFFF; background:#D4D0C8 !important; padding:2px 5px; color:#000 !important; text-decoration:none; font-size:85%; appearance: push-button; } /* INFO GS ISSUE:1159 Added a right float */ #us-main td a.fauxbutton, #us-main p a.fauxbutton { font-size:100%; } #us-main a.fauxbutton:hover { cursor:default; color:#000 !important; } #us-main a.fauxbutton:active { border:2px inset #D4D0C8; } #us-main .us-comparetable a.fauxbutton { float: none; } #us-main .us-comparetable td.us-continue { text-align: center; } /* Faux link */ /* :INFO RL 27/11/06 - set border to 1px transparent for IE7 and border 0px for IE6 as it doesnt get :hover */ #us-main #us-content input.fauxlink, body.us-popup input.fauxlink { float:none; cursor:pointer; color:#039; background:none; border:none; border-bottom:1px solid #039; margin:0; /* Button width hack */ padding:0; width:auto; overflow:visible; } /* :FLAG substitute color dark */ #us-main #us-content input.fauxlink:hover, body.us-popup input.fauxlink:hover { color:#039; border-bottom:1px solid #039; } /* Make button look like hover link */ /* :FLAG persistent color */ /* Faux link used in results bar */ #us-main #us-content .linkbar-results span.linkbar input.fauxlink {_margin-top:2px !important; border-bottom: 1px solid transparent; _border-bottom: 0px solid #039; } /* Reset border */ #us-main #us-content .linkbar-results span.linkbar input.fauxlink:hover {border-bottom: 1px solid #039;} #us-main #us-content .linkbar-results span.linkbar img { margin-top:2px !important; } #us-main .us-warning .fauxlink, #us-main .fauxlink.linkbold { font-weight:bold; } #us-main input.fixlink { margin-top:-12px } #us-main .us-tabs h3 input.fauxlink, #us-main .us-tabs input.fauxlink { text-align:center !important; font-size:1em !important; } #us-main .us-tabs h3 input.fauxlink { margin-left:-1px !important; _margin-left:0px !important; font-weight:bold; color:#fff !important; border-bottom:1px solid transparent !important; _border-bottom:0px solid #039 !important; } #us-main .us-tabs h3 input.fauxlink:hover { color:#fff !important; border-bottom:1px solid #fff !important; } #us-main .us-tabs input.fauxlink { font-weight:bold ;float:none; cursor:pointer; color:#039; background:none; border:none; border-bottom:1px solid transparent !important; _border-bottom:0px solid #039 !important; margin:0; /* Button width hack */ padding:0; width:auto; overflow:visible; margin-left:5px !important; _margin-left:6px !important; margin-top:3px !important} /* :FLAG substitute color dark */ #us-main .us-tabs input.fauxlink:hover { color:#039; border-bottom:1px solid #039 !important; } /* Make button look like hover link */ /* :FLAG persistent color */ #us-main span.linkbar input.fauxlink { font-size:1.1em; _height:4px !important; line-height:10px !important; font-weight:bold !important; } /* Bigger text for savesearch fauxlink */ #us-main #us-content input.fauxlinkbig {font-size: 0.9em} /* Customer satisfaction links */ .us-tableoutput .ot-satisfaction-cell .ot-satisfaction-top { _padding-bottom:1px !important; margin:3px 0 10px 0 !important; text-align:center; } .us-tableoutput .ot-satisfaction-cell .ot-satisfaction-bottom { _padding-bottom:1px !important; text-align:center; } .us-tableoutput a.customer-satisfaction { color:#fff !important; text-decoration:none; font-weight:bold; font-size:1em; text-align:center; width:45px; height:10px; padding:3px 3px 6px 3px!important; } /* Traffic light colours; Issue #6863 */ .us-tableoutput a.customer-satisfaction-red, .customer-satisfaction-red { background:#CC0033 !important; color:#000 !important; text-decoration:none; font-weight:bold; font-size:1em; text-align:center; width:33px; height:10px; padding:3px 3px 6px 3px!important; } .us-tableoutput a.customer-satisfaction-amber, .customer-satisfaction-amber { background:#FFCC00 !important; color:#000 !important; text-decoration:none; font-weight:bold; font-size:1em; text-align:center; width:33px; height:10px; padding:3px 3px 6px 3px!important; } .us-tableoutput a.customer-satisfaction-green, .customer-satisfaction-green { background:#00CC00 !important; color:#000 !important; text-decoration:none; font-weight:bold; font-size:1em; text-align:center; width:33px; height:10px; padding:3px 3px 6px 3px!important; } /* Traffic light key */ #us-cs-key { float:right; clear:both; border:1px solid #736E41 !important; width:150px; height:80px; } #us-cs-key strong { float:right; margin:0 -68px 5px 0; width:200px; } #us-cs-key .us-width200 { width:100px } #us-cs-key .customer-satisfaction-red-key { float:right; background:#CC0033 !important; color:#000 !important; width:16px; height:16px; padding:0; margin:0 0 0 5px; } #us-cs-key .customer-satisfaction-amber-key { float:right; background:#FFCC00 !important; color:#000 !important; width:16px; height:16px; padding:0; margin:0 0 0 5px; } #us-cs-key .customer-satisfaction-green-key { float:right; background:#00CC00 !important; color:#000 !important; width:16px; height:16px; padding:0; margin:0 0 0 5px; } /* NAV --- */ #us-nav ul { list-style:none !important; border-top:1px solid #039; width:181px; } /* :FLAG substitute color main - missing */ #us-nav li a { display:block;min-height:1.8em; height: auto !important; height: 1.8em; line-height:1.8em; border-bottom:1px solid #039 } /* :FLAG substitute color main - missing */ #us-nav a,#us-nav a:link { text-decoration:none; } /* :INFO SB 26/7/6 added min-height hack as when nav item text wraps in overlays itself. G#3799 */ /* Site nav -------- */ #us-nav #site-nav li { font-weight:bold; } #us-nav #site-nav img { float:left; position:relative; top:3px; margin-right:6px; } #us-nav #site-nav .channel-selected { color:#FFF; background-color:#039; border-bottom:none; } /* :FLAG substitute color main */ #us-nav #site-nav .channel-selected img { margin-right:2px; background-color:transparent !important; border:none !important} /*:INFO SB 24/7/6 added for channel directory where nav colors change in each branch of directory */ #us-nav #site-nav li a.creditreportcentre-nav { font-weight:normal; } #us-nav #site-nav li a.directory-nav { font-weight:normal; } #us-nav #site-nav li a.marketnews-nav { font-weight:normal; } #us-nav #site-nav li a.debtadvicecentre-nav { font-weight:normal; } /* Channel nav ----------- */ #us-nav #channel-nav img { float:left; margin:4px 6px 0 5px; } #us-nav #channel-nav { border-top:none; margin-bottom:2px; } #us-nav #channel-nav li { font-weight:normal; } #us-nav #channel-nav li a { background-image:url(/webresources/images/list-marker/arrow-uswitch.gif); background-position: 5px .7em; background-repeat: no-repeat; padding-left:15px; } /* :FLAG substitute channel image */ #us-nav #channel-nav .item-expanded li a { background-image:none} #us-nav #channel-nav .item-selected a, #us-nav #channel-nav .item-selected a:visited { font-weight:bold; color:#039; } /* :FLAG substitute color dark */ #us-nav #channel-nav .item-selected a:hover, #us-nav #channel-nav .item-selected a:visited:hover { color:#fff !important; } /* :FLAG substitute color dark */ #us-nav #channel-nav .item-expanded a { background-image: url(/webresources/images/list-marker/arrowdown-uswitch.gif); } /* :FLAG substitute channel image */ /* Tertiary nav */ #us-nav #channel-nav ul li a { background-image:none ; padding-left:22px; line-height:1.4em; font-weight:lighter !important; } #us-nav #channel-nav ul li.item-selected a { font-weight:lighter; color:#9AAED7 /* :FLAG substitute color mid*/; background-image: url(/webresources/Images/list-marker/square-uswitch.gif); background-position:15px .7em } /* :FLAG substitute channel image */ #us-nav #channel-nav ul { border:none; } body div#us-nav ul#site-nav li ul#channel-nav li a:hover { background:#E6EBF5 !important; color:#039 !important; } /* :FLAG substitute color dark, background light */ body div#us-nav ul#site-nav li ul#channel-nav ul li.item-selected a { font-weight:lighter; color:#9AAED7 !important;} /* :FLAG substitute color mid */ body div#us-nav ul#site-nav li ul#channel-nav ul li.item-selected a:hover { color:#9AAED7 !important; /* :FLAG substitute color mid */ background:#E6EBF5 url(/webresources/Images/list-marker/square-uswitch.gif) no-repeat 15px .7em !important;} /* :FLAG substitute background light, channel image */ /* Cobrand nav - can be placed at top or bottom (#us-accredited) of the page ----------- */ #us-wrapper #nav-cobrand { margin:0 0 10px 0; clear:left; } #us-accredited #nav-cobrand { margin-top:10px;} /* Change the margin to top for placement in accredited */ #us-wrapper #nav-cobrand { background:#fff url(/webresources/Images/uSwitch/navcobrand-logo.gif) no-repeat left center; } /* :INFO this image is no longer channel specific, & set in ChannelColoursText.xsl. Now persistent. Universal logo */ #nav-cobrand #nav-cobrand-logo { padding-left:51px; } #nav-cobrand #site-nav { border:1px solid #979DA4; width:99.7%; padding:5px 0; background:#FFF; } #nav-cobrand #site-nav ul { list-style:none; margin:0; padding:0 0 0 7px; } #nav-cobrand #site-nav li { list-style:none; font-weight:bold; float:left; width:14em; line-height:19px; } #nav-cobrand #site-nav img { float:left; position:relative; top:3px; margin-right:6px; } #nav-cobrand #site-nav li a, #nav-cobrand #site-nav li a:visited { color:#515B67; text-decoration:underline } /* Cobrand nav - channel selected */ #nav-cobrand #site-nav li.channel-selected { background:none; } #nav-cobrand #site-nav li.channel-selected a, #nav-cobrand #site-nav li.channel-selected a:hover { color:#039 !important; cursor:default !important; text-decoration:none; } /* :FLAG substitute color dark - missing */ #nav-cobrand #site-nav li.channel-selected img { margin-right:6px; } /* Cobrand product header and Powered by Notice */ #us-milk-header a,#us-milk-header a:link { text-decoration:none; color:#039; } /* :FLAG substitute color dark - partnerColoursText.xsl */ #us-milk-header h2 a, #us-milk-header h2 a:visited { color:#039; } /* :FLAG substitute color main - partnerColoursText.xsl */ #us-milk-header p.us-poweredby a:hover, #us-milk-header p.us-poweredby a:visited:hover { color:#039; text-decoration:none; } /* :FLAG substitute color dark - partnerColoursText.xsl */ p.us-poweredby { font-weight:bold; color:#039; padding-left:0} /* :FLAG substitute color dark - partnerColoursText.xsl */ /* Header, accredited & footer links */ #us-header a,#us-header a:link,#us-accredited a,#us-accredited a:link,#us-footer a,#us-footer a:link { text-decoration:none; color:#039; } /* :FLAG substitute color dark */ #us-header p a:hover,#us-accredited a:hover,#us-footer #footlinks a:hover, #us-header p a:visited:hover,#us-accredited a:visited:hover,#us-footer #footlinks a:visited:hover { text-decoration:underline; color:#039; } /* :FLAG substitute color dark */ #us-header h2 a, #us-header h2 a:visited { color:#039; } /* :FLAG substitute color main */ /* :INFO JR 11/08/2006 Added h2, as it is now a link */ /* :INFO SB 15/06/2006 -> #us-header a:hover:link ;#us-accredited a:hover:link ; #us-footer #footlinks a:hover:link */ /* + + + + + + + + + + + + + + + */ /* 4.'LAYOUT =========== */ /* Global layout */ #us-wrapper, #us-header, #us-footer { width:917px; } /* Center everything */ #us-wrapper { margin:0 auto; } /* Aligns wrapper to center :) */ body { text-align:center; } /* For IE5.x only */ body div { text-align:left; } /* Set back to left */ body.us-tandc { text-align:left; } /* Header layout */ #us-header { margin-bottom:10px; width:917px; } #us-header .us-legacy-header { height:70px; margin-top:6px; background-color:#002B82; background-image:url(/webresources/images/global/Legacy-Header/header-background.gif); } #us-header div.inner-header { position:relative; margin:0 auto; overflow:hidden; width:917px; } #us-header div.logo { float:left; margin:21px 0 0 16px; } #us-header div.strapline { display:inline; float:left; margin-left:30px; margin-top:36px; width:540px; } #us-wrapper #us-header div.strapline a { float:left; color:#ffffff !important; } #us-header div.strapline a h1, #us-header div.strapline a h2 { margin:0px; padding:0px; font-size:1.85em !important; color:#ffffff !important; } #us-header div.strapline img { float:right; margin-top:6px;} #us-header div.header-links { position:absolute; top:10px; right:10px; } #us-header div.header-links ul { list-style-type:none; margin:0; } #us-header div.header-links ul li { margin:0 6px 0 0; font-size:0.92em; line-height:1em; float:left; padding:0 7px 0 0; background:transparent url(/siteresources/themes/default/core/images/header-seperator.gif) no-repeat scroll 100% 50%;} #us-header div.header-links ul li a { color:#ffffff !important; } #us-header div.header-links ul li.last { background:transparent none repeat scroll 0 0; margin:0; padding:0;} #us-header .search { position:absolute; top:33px; right:0px; } #us-header .search input { width:118px; padding:2px 0px; margin:0px; } #us-header .search input.button { float:left; width:40px; border-width:0px; padding:0px; margin:1px 0px 0px 3px; height: 28px; background-image:url(/WebResources/Images/Global/Legacy-Header/search-button.gif); } #us-header .us-search label, #us-header .us-search legend { display:none; } #us-header .search fieldset { float:left; border-width:0px; padding-right:0px; margin-right:0px; margin-left:13px; } #us-milk-header h2 { float:left; /* margin-left:5px; */ margin:17px 0 0 5px; font-size:191%; /* line-height:160%; position:relative; top:9px; */ } #us-milk-header p { float:right; line-height:300%; position:relative; top:17px; color:#039; /* :FLAG substitute color dark */ } #header-bar, #us-milk-header #header-bar { float:left; } #us-milk-header #header-icon { float:left; margin:8px 2px 0 7px; /* position:relative; top:8px; */ } /* Milk Header layout */ #us-milk-header { position:relative; margin-bottom:24px; } /* Main */ /* :INFO JR 08/06/2006 pushes footer down */ #us-main, #us-more { padding-bottom:30px; } /* Accredited - sits above footer. Cobrand elements can sit inside here */ #us-accredited { margin-left:188px; clear:both; } body.us-1col #us-accredited { margin-left:0; } #us-accredited #accreditedlinks div { float:left; border-left:solid 1px #515B67; padding:0 15px 3px 7px;} #us-accredited #accreditedlinks div img { margin-bottom:3px; } #us-accredited #accreditedlinks p { font-size:77%; line-height:0.6; color:#373536 ; } #us-accredited #accreditedlinks a, #us-accredited #accreditedlinks a:hover { color:#373536 !important } #us-accredited div p a { font-size:10px !important; } /* INFO: Accredited foot links are too large and does not repond to x-small or small rules. This is a temporary solution */ /* Cobrand Powered by Notice */ p.us-poweredby { float:right; } #us-accredited .us-poweredby-box { margin-top:6px; } /* Footer layout */ #us-footer { border-top:1px solid #E0E0E0; clear:both; font-size:0.73em !important; line-height:1.5em; overflow:hidden; padding:12px 0 0; } #us-footer div.logos { float:left; width:35%; } #us-footer div.logos img { margin:0 20px 0 0; vertical-align:middle; } #us-footer div.links { margin:0 0 12px; overflow:hidden; font-size:0.85em; } #us-footer div.links ul { background:transparent url(/siteresources/themes/default/core/images/footer-separator.gif) repeat-x scroll 0 100%; float:right; margin:0; padding:0 0 15px; list-style:none; } #us-footer div.links ul li { background:transparent none repeat scroll 0 0; border-right:1px solid #0049BC; float:left; margin:0 23px 0 0; padding:0 23px 0 0; } #us-footer div.copyright { clear:right; color:#003399; text-align:right; } #us-wrapper #us-footer a { color:#003399; } #us-wrapper #us-footer div.copyright a { text-decoration:underline; } #us-footer div.links ul li.last { border:medium none; margin-right:0px; padding-right:0px; } /* Nav layout */ #us-nav #site-nav { margin-bottom:20px; } /* Naughty 10px margins ;) */ .margintop { margin-top:10px !important; } .marginright { margin-right:10px !important; } .marginbottom { margin-bottom:10px !important; } .marginleft { margin-left:10px !important; } /* Naughty 1px margin ;) */ .margin1px { margin:1px !important; } /* Adhock Naughty 10px margins ;) */ .marginrightah { margin-right:100px !important; } /* Anti Naughty 10px margins; Used to counter site wide margin top setting where default class cannot be removed */ .cancel-margintop { margin-top:-10px !important; } .cancel-marginleft { margin-left:-10px !important; } .cancel-marginright { margin-right:-10px !important; } .cancel-marginbottom { margin-bottom:-10px !important; } .reduce-margintop { margin-top:-20px !important; } /* Naughty 10px padding ;) */ .paddingtop { padding-top:10px !important; } .paddingright { padding-right:10px !important; } .paddingbottom { padding-bottom:10px !important; } .paddingleft { padding-left:10px !important; } /* Misc */ #us-main #us-content .nopaddingtop { padding-top:0; } #us-main #us-content .nopaddingbottom { padding-bottom:0; } #us-main #us-content .nopaddingright { padding-right:0; } #us-main #us-content .nopaddingleft { padding-left:0; } #us-main #us-content .nopadding { padding:0; } #us-main #us-content .nomargintop { margin-top:0; } #us-main #us-content .nomarginbottom { margin-bottom:0; } #us-main #us-content .nomarginright { margin-right:0; } #us-main #us-content .nomarginleft { margin-left:0; } #us-main #us-content .nomargin { margin:0; } /* Text align */ #us-main .textleft { text-align:left !important; } #us-main .textright { text-align:right !important; } #us-main .textcenter { text-align:center !important; } /* 'MILK PAGES ---------- */ /* :INFO JR 09/06/2006 Styles common to all milk pages :INFO RL 04/12/2006. :TODO Look into make uswitch styles even more specific for cobrands. Some partners have defined general styles such as display inline on h1 and table td which are used instead of our styles. We have to try to make our styles highly specific to avoid cobrand hacking.. something to keep an eye on */ body.Fullfat, body.Semi-Skimmed, body.Skimmed { margin:0; padding:0; } body.Fullfat #us-main, body.Fullfat #us-more, body.Semi-Skimmed #us-main, body.Semi-Skimmed #us-more, body.Skimmed #us-main, body.Skimmed #us-more { margin:0; padding:0; } body.Fullfat #us-nav, body.Semi-Skimmed #us-nav, body.Skimmed #us-nav, body.Fullfat #us-header, body.Semi-Skimmed #us-header, body.Skimmed #us-header { display:none !important; } body.Fullfat #us-wrapper, body.Fullfat #us-header, body.Fullfat #us-milk-header, body.Fullfat #us-footer, body.Semi-Skimmed #us-wrapper, body.Semi-Skimmed #us-header, body.Semi-Skimmed #us-milk-header, body.Semi-Skimmed #us-footer, body.Skimmed #us-wrapper, body.Skimmed #us-header, body.Skimmed #us-milk-header, body.Skimmed #us-footer { width:100%; } body.Fullfat #us-main, body.Semi-Skimmed #us-main, body.Skimmed #us-main { width:auto; margin:0 0 0px 0 !important; } /* R26 CBLunden removed 80px padding bottom) */ /* :INFO { float:none; width:auto; margin:0 171px 80px 0 !important;} - RL 12/9 Orginal code from JR. Remove right margin & float:none. Causing float issues */ /* Header layout */ body.Fullfat #us-header, body.Fullfat #us-milk-header, body.Skimmed #us-header, body.Skimmed #us-milk-header, body.Semi-Skimmed #us-header, body.Semi-Skimmed #us-milk-header { margin-bottom:24px; padding-bottom:3px; border-bottom:3px solid #039; } /* :FLAG substitute color main - Partners */ body.Fullfat #us-header img, body.Skimmed #us-header img, body.Semi-Skimmed #us-header img { display:none; } body.Fullfat #us-main, body.Fullfat #us-footer #footlinks, body.Fullfat #us-accredited, body.Semi-Skimmed #us-main, body.Semi-Skimmed #us-footer #footlinks, body.Semi-Skimmed #us-accredited, body.Skimmed #us-main, body.Skimmed #us-footer #footlinks, body.Skimmed #us-accredited { margin-left:0; width:100%; } /*:INFO RL. Added width as footerlinks has phantom text bug in IE otherwise */ body.Fullfat #us-more, body.Semi-Skimmed #us-more, body.Semi-Skimmed #us-more { background-color:transparent; } body.Fullfat #us-main .cross-sell, body.Semi-Skimmed #us-main .cross-sell, body.Semi-Skimmed #us-main .cross-sell { width:auto; } body.Fullfat #us-main .process-module fieldset span, body.Semi-Skimmed #us-main .process-module fieldset span, body.Skimmed #us-main .process-module fieldset span { _display:block; } body.Fullfat #us-wrapper #us-main #us-content .pl-sandwich-help .us-helpbox { margin-top:120px !important; } body.Semi-Skimmed #us-wrapper #us-main #us-content .pl-sandwich-help .us-helpbox { margin-top:120px !important; } body.Skimmed #us-wrapper #us-main #us-content .pl-sandwich-help .us-helpbox { margin-top:120px !important; } /* Alignment styles (left and centre) (*/ /* For non-restyled channels we are using 920px fixed width for these styles */ .us-cobrand-left #us-wrapper { width:920px !important; margin: 0 10px !important; } .us-cobrand-centre #us-wrapper { width:920px !important; } .us-cobrand-left #us-milk-col3, .us-cobrand-centre #us-milk-col3 { padding-right: 0 !important; } /* :INFO RL 22/11/06 #8950. To handle weird IE6 issue. Lego cant help us so we can only set a general rule and hope.. Limited it to process modules for now */ /*body.Skimmed div#us-milk-title-box, body.Skimmed .linkbar-results { width:636px; }*/ /* :INFO SB 10/15/2006 temporarily disabled the above line as it breaks http://www.test.uswitch.com/Home-Phone/HT_Questionnaire.aspx?ref=morechange&sessionid=F4qnVyrp06HvJMpGANDi4nNKVlA4oNlD need to clarify with paulC why we need this */ /* + + + + + + + + + + + + + + + */ /* 5.'XHTML COMPONENTS =================== */ /* 'TABLES ======= */ /* OUTPUT TABLE ------------ */ .us-tableoutput { border-collapse:separate; border-spacing:0; width:100%; clear:both; }/*:INFO SB 8/6/6 removed top-margin as didn't marry visual in static-fulfilment-single.aspx */ .us-tableoutput thead th { padding:3px 4px 4px 8px; border-right:1px solid #FFF; border-bottom:7px solid #FFF; background-color:#039; color:#FFF; vertical-align:top; } /* :FLAG substitute bg-color main - missing */ .us-tableoutput thead th.rowheading { border-bottom:2px solid #FFF; text-align:center; } .us-tableoutput thead th.lastcol{ border-right:none; } .us-tableoutput tbody th, .us-tableoutput td { vertical-align:top; border-bottom:1px solid #039; } /* :FLAG substitute color main - missing*/ .us-tableoutput tbody tr.first th, .us-tableoutput tbody tr.first td { border-top:1px solid #039 } /* INFO GS 22/09/06: Table update */ .us-tableoutput tbody th, .us-tableoutput tfoot th { padding:4px 2px 5px 8px; } .us-tableoutput tfoot td.heightfix { padding-top:0px; border:0px; background:#fff; height:expression(document.body.clientHeight > 5? "5px": "auto" ) } /* INFO GS 26/09/06: Correct table element height*/ #us-main div.heightfix { margin:0; padding:0; border:0px; height:expression(document.body.clientHeight > 5? "5px": "auto" ) } /* INFO GS 26/09/06: Correct h3 element */ #us-main caption { font-size:85%; text-align:left; margin-top:10px; margin-bottom:-10px; padding:0 6px 12px 6px } /* :INFO RL 30/10/06. To deal with different behaviour (caption & margintop used in output table), set negative bottom margin which only FF understands. Set bottom space as padding. */ @media screen and (min-width: 0px) { #us-main caption {margin-bottom:0 }} /* :HACK Opera. Reset bottom margin */ .us-tableoutput td { padding:4px 2px 5px 8px; text-align:left; } .us-tableoutput td.us-tableSubHeader {background-color:#E6EBF5; color:#003399!important; font-weight:bolder; text-transform:uppercase} .us-tableoutput tfoot td { text-align:right; padding-top:2em; border:none; border-top:0px solid #039; }/* INFO GS 25/09/06: top border removed as no longer required */ /* :FLAG substitute color main - missing */ .us-tableoutput tfoot td.border { border: 0px; border-right:1px solid #039; border-bottom:1px solid #039; border-left:1px solid #039; } #us-main .us-tableoutput.nofoot { border-bottom:1px #039 solid; } /* :FLAG substitute color main - missing */ .us-tableoutput tbody th.firstcol, .us-tableoutput tfoot th.firstcol, .us-tableoutput td.firstcol { border-left:1px solid #039; } /* :FLAG substitute color main */ .us-tableoutput td.lastcol { border-right:1px solid #039; } /* :FLAG substitute color main */ .us-tableoutput td.tabletext { text-align:left; padding-left:8px; } .us-tableoutput tr.us-group-separator td { text-align:center; } .us-tableoutput td.us-provider { border-right:1px solid #C1C4C8; padding:5px 4px 0; text-align:center; } /* :FLAG persistent color */ .us-tableoutput .us-continue { padding:4px 12px 0 5px; text-align:left; } .us-tableoutput .us-continue p { margin-top:4px !important;} .us-tableoutput .us-continue div.us-continuecoltext { font-size:93%; width:65px; } /* :INFO RL 12/12/2006 smaller text for output table continue column */ .us-tableloans td { text-align:left; padding-left:8px; } /* INFO PC 11/10/06: made new adhock table class to left-align td's as i couldn't see an existing one */ /* GS: reverts fg and bg */ .us-tableoutput .us-revert th { background:#fff !important ;border-top:1px solid #000!important ;border-right:0px solid #000!important ;border-left:0px solid #000!important ;color:#000 !important; } .us-tableoutput .us-revert th.firstcol { text-align:left !important; border-top:1px solid #000;border-right:1px solid #000!important ;border-left:1px solid #000!important ; } .us-tableoutput .us-revert th.lastcol { border-top:1px solid #000;border-right:1px solid #000!important ;border-left:0px solid #000!important ; } /*.us-tableoutput.wide { width:100% !important } force tables 100% */ /* Below didnt work in IE - relative position. Replaced by above class by wrapping the link around a p */ /*.us-tableoutput .us-continue a.fauxbutton { position:relative; top:4px; margin:0 12px 0 2px; } */ /* :HACK JR 25/08/2006 as padding doesn't apply */ /* Output table thead links */ #us-content .us-tableoutput thead th, /* INFO GS 19/09/06 Some instances force the header to remain hidden when no link is present */ #us-main #us-content .us-tableoutput thead th a:link, #us-main #us-content .us-tableoutput thead th a:visited { color:#FFF; text-decoration:none; } /* :FLAG persistent color */ #us-main #us-content .us-tableoutput thead th a:hover { color:#FFF; text-decoration:underline; } /* :FLAG persistent color */ /* Output table sorted by column */ #us-main #us-content .us-tableoutput .us-sortedby, #us-main #us-content .us-tableoutput .us-sortedby a:link, #us-main #us-content .us-tableoutput .us-sortedby a:visited, #us-main #us-content .us-tableoutput .us-sortedby a:hover { font-weight:bold; color:#039; /* :FLAG substitute color dark */ background-color:#E6EBF5; } /* :FLAG substitute color light */ /* :FLAG PARTNER Colours needs #us-main #us-content .us-tableoutput .us-sortedby table th, #us-main #us-content .us-tableoutput .us-sortedby table td defined*/ /* issue 7877: link button should not be bold */ #us-main #us-content .us-tableoutput .us-sortedby a.fauxbutton { font-weight:normal; } /* Current account columns */ .ot-apr-cell { font-weight:bold; } /* Issue 7051 redesign table cell contents witg inner border */ #us-main #us-content .us-tableoutput .us-refbox { text-align:center; padding:10px 0px; } #us-main #us-content .us-tableoutput .us-refbox .fauxbutton { float:none; } #us-main #us-content .us-tableoutput .us-refbox div { padding:2px 2px; margin-top:6px; line-height:20px; text-align:center; } #us-main #us-content .us-tableoutput .us-refbox div a { font-size:0.9em; } /* Energy channel - Green Energy tables */ #us-main #us-content table.us-greenenergy thead th { background-color:#6FA96F; } /* :FLAG persistent green energy color */ #us-wrapper #us-main #us-content #us-greenenergy.us-tableoutput .us-sortedby, #us-wrapper #us-main #us-content #us-greenenergy.us-tableoutput .us-sortedby a:link, #us-wrapper #us-main #us-content #us-greenenergy.us-tableoutput .us-sortedby a:visited, #us-wrapper #us-main #us-content #us-greenenergy.us-tableoutput .us-sortedby a:hover { background-color:#F2EEE1; } /* :FLAG persistent green energy color */ /* Output table linkbar formatting */ .us-tableoutput p.linkbar { width:15em; } .us-tableoutput .linkbar label { display:none; } .us-tableoutput .linkbar img { float:left; margin:5px 4px 0 0; } #us-main #us-content .us-tableoutput .linkbar .comparebutton { cursor:pointer; border:0; /* Button width hack */ padding:0; width:auto; overflow:visible; margin:2px 0 0 0; color:#039; } /* :FLAG substitute color dark */ #us-main #us-content .us-tableoutput .linkbar .comparebutton:hover { color:#039; border-bottom:1px solid #039; } /* :FLAG persistent color */ /* Sorting row for 6 columns */ /*#us-main #us-content fieldset.us-sort6 { width:100%; padding:0; float:left; } #us-main #us-content fieldset.us-sort6 div { padding:3px 0px 0px 0px; float:left; height:50px; width:17% !important; _width:10% !important; } #us-main #us-content fieldset.us-sort6 div { padding:3px 0px 0px 0px; float:left; height:50px; width:15% !important; _width:10% !important; } #us-main #us-content .us-sort6 label { padding:4px 0 0 0; clear:both; width:103px; _width:123px; } #us-main #us-content .us-sort6 select, #us-main #us-content .us-sort6 input { margin:3px 0 0px 0px;clear:both; width:70px; _width:60px; } #us-main #us-content .us-sort6 select { width:123px; _width:123px; float:left; margin-left:-5px !important; } #us-main #us-content .us-sort6 p.input-currency { margin:2px 0; } */ /* TABLE WITHIN Table within a table ;) */ #us-main table table.table-within { margin:0 4px; } #us-main table table.table-within td, #us-main table table.table-within th { font-weight:normal; border:0; margin:0; padding:0 0 3px 0; text-align:left; } /* :INFO GS 4 col comparison table */ /* :TODO need to amend too specific css */ .us-tableoutput th.us-creditcard-benefit { text-align:left; padding:0 0 1.5em 0.5em; width:12%; } .us-tableoutput th.us-creditcard-card { text-align:left; padding:0 0 1.5em 0.5em; width:20%; } .us-tableoutput td.linkleft { text-align:left; padding:0.6em; font-weight:bold; } /* :INFO OFB comparison table group headers .us-tableoutput tr.us-group-separator td h3 { margin: 0 !important; padding: 0 !important; text-align: left; text-transform: none !important; } */ /* :INFO GS Issue 5911 */ .us-tableoutput tr.us-group-separator td h3{ background:none !important; font-size:1em !important; margin: 0 -2px 0 -8px !important; padding: 0 0 0 10px !important; text-align: left; text-transform: none !important; } /* :INFO SB 16/10/2006 These rules below are for the voice over IP table that appears here ~/broadband/VoIP.html This is for making the padding slightly less so it fits in. It may well turn out that there are more tables like this in the static files requiring us to make this class name more generic #8768 */ #us-main #us-content .us-tablevoip td{text-align:center} #us-main #us-content .us-tablevoip td.firstcol {text-align:left } #us-main #us-content .us-tablevoip th, #us-main #us-content .us-tablevoip td {padding:2px} /* Output Comparison Table ----------------------- */ .us-comparetable th.firstcol { color:#039; border-right:1px solid #039; } /* :FLAG substitute color main */ #us-main .us-comparetable tfoot input { float:none; } .us-comparetable tfoot td { text-align:center; padding:6px 0; } .us-comparetable tfoot th, .us-comparetable tfoot td { background-color:#E6EBF5; border:none; border-top:1px solid #039; border-bottom:1px solid #039; } /* :FLAG substitute color main */ .us-comparetable tfoot td#us-applybutton { border:0; padding:14px 0 0 0; background:none; } .us-comparetable tfoot td#us-applybutton input { margin-right:0; } .us-comparetable .us-continue { text-align:center; } /* INPUT TABLE ----------- */ /* :INFO SB 3/8/06 This is used in home phone. It is a grid of inputs */ .us-tableinput { width:100%; border-collapse:collapse; border-spacing:0; } .us-tableinput input { width:2em; display:inline !important; float:none !important; } .us-tableinput td, .us-tableinput th { color:#fff; background:#D9E7EB; padding:4px 2px 4px 8px; } /* :FLAG substitute color light */ .us-tableinput thead th { background:#D9E7EB; border-bottom:3px solid #FFF; } .us-tableinput tr.rowgap td , .us-tableinput tr.rowgap th { border-bottom:3px solid #FFF; } .us-tableinput tbody th { font-weight:lighter; } .us-tableinput tbody td { text-align:center !important; } /* :INFO GS 28/9/06 Added link styles */ .us-tableinput thead th, .us-tableinput thead th a:link, .us-tableinput thead th a:visited { color:#FFF !important; text-decoration:none; } /* :FLAG persistent color */ .us-tableinput thead th a:hover { color:#FFF; text-decoration:underline !important; } /* :FLAG persistent color */ /* CCJ TABLE --------- */ /* :INFO JR 23/08/2006 CCJ table in loans */ #us-main .ccj-table { width:100%; border-collapse:collapse; } #us-main .ccj-table th { color:#FFF; border-bottom:3px solid #FFF; } #us-main .ccj-table td { background-color:#E6F1E7; } /* :FLAG substitute color light */ #us-main .ccj-table tfoot td { background-color:#FFF; } #us-main .ccj-table tbody td { border-bottom:solid 3px #FFF; } #us-main .ccj-table p.input-currency { margin-left:0; } #us-main .ccj-table td input.us-button { margin:0; } /* Fulfilment Table ---------------- Single row output table */ .us-tableoutput.us-fulfiltable th { text-align:center; } .us-tableoutput.us-fulfiltable td, .us-tableoutput.us-fulfiltable tbody th { font-weight:bold; vertical-align:middle; color:red; } /* :FLAG substitute color dark */ /* Fulfilment Confirm Table ------------------------ */ #us-main table.us-confirmtable { border-collapse:collapse; background:#E6EBF5; width:100%; } /* :FLAG substitute color light */ #us-main table.us-confirmtable td, #us-main table.us-confirmtable th { vertical-align:top; padding:6px; color:#039; } /* :FLAG substitute color dark */ #us-main table.us-confirmtable th { width:30%; font-weight:bold; } #us-main table.us-confirmtable img { padding-top:6px; } #us-main table.us-confirmtable td { padding-right:40px; } #us-main table.us-tabletvpicker { border-collapse:collapse; width:728px; _width:729px; border:1px solid black; margin-left:1px; _margin:0; } /* :HACK Using underscore hack to show values just to IE */ #us-main table.us-tabletvpicker thead {display:none; } #us-main table.us-tabletvpicker td, #us-main table.us-tabletvpicker th { width:100px;} #us-main table.us-tabletvpicker th.firstcol, #us-main table.us-tabletvpicker tbody th { width:200px; } #us-main table.us-tabletvpicker thead th a:link, #us-main table.us-tabletvpicker thead th a:visited { color:#FFF; text-decoration:none; } /* :FLAG persistent color */ #us-main table.us-tabletvpicker thead th a:hover { color:#FFF !important; text-decoration:underline; } /* :FLAG persistent color */ #us-main table.us-tabletvpicker a:hover.fauxbutton, #us-main table.us-tabletvpicker a:visited.fauxbutton { color:#000 !important; text-decoration:none; } /* :FLAG persistent color */ /* Sorted by column */ #us-main table.us-tabletvpicker .us-sortedby, #us-main table.us-tabletvpicker .us-sortedby a:link, #us-main table.us-tabletvpicker .us-sortedby a:visited, #us-main table.us-tabletvpicker .us-sortedby a:hover { background-color:#E6EBF5; } /* :FLAG substitute color light */ #us-main table.us-tabletvpicker.reverse-background a.fauxbutton { float:none; } /* Bottom links */ #us-main table.us-tabletvpicker.reverse-background th { background:#FFF !important } #us-main table.us-tabletvpicker-head { margin:0 0 3px 0; border:none; } #us-main table.us-tabletvpicker-head thead {display:table-header-group; } #us-main table.us-tabletvpicker-head th { border-left:1px solid white; text-align:center; color:#fff; padding:3px 5px 3px 5px; } /* :FLAG substitute color dark */ #us-main table.us-tabletvpicker-head th.firstcol { border-left:1px solid white; text-align:left; } #us-main table.us-tabletvpicker tbody th label { width:auto; float:left; display:block; margin-top:3px; clear:none; } #us-main table.us-tabletvpicker tbody th input { float:left ; display:block; } #us-main table.us-tabletvpicker tbody td { text-align:left } #us-main table.us-tabletvpicker tbody th a { font-weight:normal; } #us-main .us-collapsible-section { background:none; padding:0; margin-bottom:3px; margin-top:3px; } #us-main .us-collapsible-section .us-collapsible-head { width:auto; margin-bottom:4px; } /* :FLAG substitute color light */ #us-main #us-content .us-collapsible-section .us-collapsible-head a { color:#fff; display:block; margin:0px; float:left; } /* ISSUE: mob-5475 */ #us-main #us-content .us-collapsible-section .us-collapsible-head h4 { color:#fff; font-weight:bold; margin:0px; padding:4px 0px 4px 4px; } #us-main #us-content .us-collapsible-section .us-collapsible-head h4 img { text-decoration:none; margin-left:10px; float:left; } #us-main #us-content .us-collapsible-section .imageexpand { display:none; } #us-main #us-content .us-collapsible-section .imagecontract { display:none; } /* Credit card Balance Transfer table :INFO RL 04/12/2006. #8782. To avoid .net rework we will get this looking pretty in the existing table... :( */ .us-tableccbalance { border-collapse:collapse; border-spacing:0; width:100%; clear:both; } .us-tableccbalance thead th { padding:0; background:#fff !important; _display:none } .us-tableccbalance td.rowgap { border-bottom:4px solid #FFF; } /* :INFO rowgap equiv */ .us-tableccbalance td { padding:6px 6px 2px 6px !important; _padding:6px 6px 4px 6px !important; text-align:left; } .us-tableccbalance input.fauxlink { margin:0 4px 0 0 !important} #us-main .us-tablechannel thead th, #us-main .us-tablechannel thead td, #us-main .us-tablechannel tbody th, #us-main .us-tablechannel tbody td { background-color:#E6EBF5; color:#039; padding:2px 4px} /* :FLAG substitute color light, dark */ /* #us-main #us-content ul, #us-main #us-content ol { margin-left:6px; } #us-main #us-content ul ul, #us-main #us-content ol ol, #us-main #us-content ul ol, #us-main #us-content ol ul { margin-left:0px; } */ /* 'LISTS ------ */ /* :INFO JR 31/08/2006 */ #us-main ol, #us-main ul { margin:0 0 6px 0; } /* Zero out margin, with margin bottom */ #us-more ol, #us-more ul { margin:0 6px 6px 6px; } /* More column */ #us-main #us-content ol { padding-left:2.1em; } /* ol in #us-content - extra padding */ #us-main #us-content ul { padding-left:1.6em; } /* ul in #us-content - extra padding */ #us-main ol /* Plain ol */ #us-main #us-content ol ol, #us-main #us-content ul ol /* Embedded ol - behaves like plain ol */ { padding-left:1.7em; } #us-main ul /* Plain ul */ #us-main #us-content ul ul, #us-main #us-content ol ul /* Embedded ul - behaves like plain ul */ { padding-left:1.2em; } #us-main #us-content table.us-tableoutput ul { margin-left:0; padding-left:1.1em; } /* Just for results table */ #us-more ul { padding-left:1.0em; } /* More column ul */ #us-more ol { padding-left:1.7em; } /* More column ol */ /*#us-content ul li { padding-left:0.6em; } */ /* To mirror ol li indent. Only in content area & HTMLareas for Landing pages */ #us-main #us-content table ul li { padding-left:0; } /* Reset indent for fieldsets & output tables e.g. radiolist */ /* :INFO JR 22/08/2006 General purpose ordered list */ #us-main ul.arrow li { padding-left:8px; list-style:none; background: url(../Images/list-marker/arrow-directory.gif) 0 .45em no-repeat; } /*INFO SB 31/5/06 created for trianglular arrow lists as seen in the link exchange static page. the color css file is used to determin which bullet image is used */ #us-main #us-content ul.arrow { padding:0; margin:6px; } /* Used in consumer guide and other places */ #us-main #us-content ul.us-tabs, #us-main #us-content ul.us-tabs li { padding-left:0; } #us-main ul.us-tabs li { width:172px; display:block; float:left; margin-right: 4px; margin-top:9px; line-height:auto !important; margin-bottom:5px; color:#FFF; background-color:#039; height:22px; } /* :FLAG subsitute color mid - partner is dark */ #us-main ul.us-tabs li a { padding-left:6px; font-weight:bolder; padding-top:3px; display:block } #us-main ul.us-tabs li.us-wider { width:220px; } #us-main ul.us-tabs h3 { height:22px; margin:0 !important; padding:0 0 0 6px; text-transform:none; font-size:100%; } #us-main ul.us-tabs input { float:none; cursor:pointer; color:#039; background:none; border:none; border-bottom:1px solid #039; margin:0; /* Button width hack */ padding:0; width:auto; overflow:visible; margin-top:0 !important; } /* :FLAG substitute color dark */ #us-main .us-tabs.fixmargintabs { _margin-bottom:-22px; } #us-main #us-content ul.us-listinline { padding:0; overflow:hidden; } #us-main ul.us-listinline li { float:left; display:block; margin:-2px 0 0 -1px; border-left:1px solid #003399; padding:0 6px 0 5px; } /* :FLAG substitute color dark */ .us-popup #us-main ul.us-tabs li { margin-right:5px; margin-left:0px; margin-top:5px; width:130px;} /* :INFO 25/9/6 above Its to correct the already existing class that deals with us-tabs. Original did not work in masterpage popup.*/ /*SB :INFO 14/7/6 Each li a floated block to better position. Don't need a "first" or "last" class as we set an overflow hidden on the ul thus "sliding" the li's behind their containers edge. Only downside markup wise is addition clearfix on ul to clear floats */ /*SB 14/7/6 :TODO Apply to more piped link lists across site where possible, only used in repaint jobs so far. */ #us-main ul.us-listinline .selected { font-weight:bolder; } #us-wrapper ul.us-breadcrumbs li { padding:2px 2px 0 8px; background: url(../Images/list-marker/arrow-directory.gif) 0 .45em no-repeat;display:block; float:left; } #us-wrapper ul.us-breadcrumbs { padding:0; position:absolute !important;top:50px;xmargin-top:10px;xbackground:gold } #us-main .us-title-nopic ul.us-breadcrumbs { position:static; padding:0 0 5px 0 !important; } /*'BREADCRUMB without list tag */ .us-breadcrumb, .us_breadcrumb { font-size:85%; } #us-content div ul { margin-left:10px; margin-bottom:5px; } /*:INFO RL 7/11/06 comment this out as above list styles should be used */ /* :INFO 17/07/06 PC allows bullets to display on static content pages */ /* 'FORMS ------ */ #us-main fieldset p { padding:0 !important; margin-bottom:0 !important; }/*:INFO SB 6/6/6 this is to zero out the padding for p content within a fieldset */ /* :TODO these are generic form elements -- make them specific at later date? */ #us-main fieldset .widthauto select { width:auto !important } #us-main input.us-button { background-color:#D4D0C8; padding:0 0.3em 0 0.3em; width:auto; overflow:visible; margin-bottom:10px; _margin-bottom:0px; margin-right:0; margin-left:5px; } /* SB 26/9/6 G#3501 this margin-bottom for FF may not look nice in all occurances. Need to monitor this */ /* RL 06/12/06. Added right and left margins to replace bigformbutton which can't be updated in Lego in its current state */ #us-main table td input.us-button { margin-left:0; } #us-main input.next { margin-right:15px; } /* GS issue:#6294 Gap between buttons must be 15px. This cannot be set globally. */ /* :INFO JR 06/06/2006 Applied to input type="submit", gives background color and IE6 button hack */ /* :HACK fixes extra padding IE6 puts on long buttons http://jehiah.com/archive/button-width-in-ie */ /* #us-main input.bigformbutton, #us-main a.bigformbutton { float:right; margin:0; } */ #us-main input.bigformbutton, #us-main a.bigformbutton { float:right; margin-top:10px; margin-right:0; margin-left:5px;} /* INFO GS 25/09/06 ResultButtons have a 15px right margin and an extended width */ #us-main input.resultbutton, #us-main a.resultbutton { width:80px !important; margin-right:20px; margin-top:10px; } /* :INFO JR 29/08/2006 Style for button at bottom of the form, normally "Continue" */ #us-main a.margin-right { margin-right:5px; } /* :INFO RL 01/09/2006 Reapply the right margin for use on fauxbutton within us-secondary column in Landing pages. Needs to override above class */ #us-main select, #us-main input { font-size:85%; font-family:Verdana, Helvetica, Arial, sans-serif; float:left; margin-right:5px; } #us-main .fulfilmentsingle-module span[id^="Anthem_"], #us-main .fulfilmentsummary-module span[id^="Anthem_"], #us-main .process-module span[id^="Anthem_"] {display:block; } #us-main .ot-inputbar-wrapper fieldset span[id^="Anthem_"]{display:block; float:left; } /* :INFO SB 25/9/6 Gemini#6359 need the above span to be block as the select it contains wasnt dropping down in FF1.0.7 The span is for anthem. will try and get owen to remove as its nasty and might break something else elsewhere UPDATE Added float:left to this rule for bug#7775 */ /* :INFO JR 08/08/2006 Added minmax.js to JavaScripts directory, so that IE recognises min-max height-width stuff. Need to make sure minmax.js is called for each channel!!! */ /* :INFO SJG 16/01/2006 minmax.js was not added for all channels at launch. It will now be added by LEGO if it is switched on for the InputRow. This avoids truncating text in option elements. allowminmaxresize marks parts of the DOM where minmax.js is active */ #us-main fieldset.setwidth select { max-width: 190px; } #us-main fieldset.widthauto select { max-width: auto; } #us-main fieldset.us-margtop { margin-top:-10px !important; } /* :INFO SB 26/7/06 needed to constrain width of dropdown as some instances were being forced too wide by content copywriters are addressing this and rewording. G#3731 */ /* :INFO JR 08/08/2006 have added a Microsoft "expression" to set max width for IE. See http://tinyurl.com/68vrc */ #us-main textarea { font-size:85%; font-family:Verdana, Helvetica, Arial, sans-serif; background-color:#FFF !important} #us-main form { margin-bottom:18px; } /* :TODO SB 19/7/6 this will not work in dotnet (and line below) */ #us-main form br { clear:left; } /* :HACK fixes line returns in Opera 7; */ #us-main fieldset /* :INFO .SB input-row now been fully replaced by a fieldset */ /* :TODO have made Process Row and Fulfilment Single the same, so that need to style Process Module first level div to have same styling as fieldset */ { padding:5px 0 0 6px; border:0px solid transparent}/* :INFO SB 22/6/6 border is for opera 7.1 to get rid of default black borders on fieldsets */ /*body.us-1col #us-main fieldset { xwidth:99.4%; } :TODO SB this is a way to force fieldset to grow to its contain . This is causing probs temporarily commenting out */ #us-main fieldset .input-row { width:97.5%; } #us-main fieldset .input-row.lastcol { border-bottom: 6px solid #E6EBF5; } #us-main fieldset, #us-main div.fulfilmentdouble-module div { background-color:#E6EBF5; }/* :FLAG substitute color light */ #us-main fieldset p { line-height:1.6em; } #us-main #us-content div.process-module fieldset { padding-bottom: 3px; } /* :INFO PC 18/07/06 Get matching padding above and below form input */ #us-main #us-content div.process-module fieldset label.us-view { margin-right:-220px !important; } /* INFO fixes bug for: view my calls by */ #us-content fieldset { padding-bottom: 3px; } /* :INFO PC 18/07/06 Get matching padding above and below form input */ #us-main fieldset fieldset { padding:0; }/* :INFO SB Zero out parent fieldset rules */ #us-main .rowgap { margin-bottom:3px; padding-bottom:3px !important; /* :INFO JR 07/08/2006 added bottom padding for rowgap. Looks nicer ;) */ } #us-main .rowgaptop { margin-top:3px; padding-top:3px !important; /* :INFO DM 25/04/2007 added a top rowgap for use with header rows */ } #us-main .rowborder { border-bottom:3px solid #FFF; } /* :INFO JR 24/08/2006 added equivalent 3px border for creating white gap on coloured background */ #us-main label { float:left; text-align:left; clear:both; padding-bottom:2px; } #us-main .sortcriteria-module label { float:left; text-align:left; clear:none; padding-bottom:2px; } /* Added by Christian Blunden to fix SortCriteria Module */ #us-main select, #us-main input.input-bg { background-color:#FFF; } /* :HACK input type="text" needs to have this class applied to have white background */ body #us-main .address-module fieldset.wider select { width:expression(document.body.clientWidth > 500? "500px": "auto" ); min-width:500px; } body.us-2col #us-main .address-module fieldset.wider select, body.us-2col-cgd #us-main .address-module fieldset.wider select { max-width:98%; width:auto !important} /* :INFO Issue#6954 GS */ #us-main .input-currency { float:left; line-height:1.6em; margin-right:5px; margin-left:-12px; } /* :INFO text preceding input field */ #us-main .input-postinfo { float:left; line-height:1.6em; width:auto; margin:2px 5px 0 0; } /* :INFO text following input field */ #us-main .us-readonly { border:0; /* background:none; */ background-color:transparent !important; font-weight:bold; color:#039; padding:0 0.3em; margin-top:3px; } /* :FLAG substitute color dark - missing */ /* ISSUE 5309 GS 19/09/06 */ /* INPUT WIDTHS */ #us-main #us-content .input-tiny input { width:9em !important; } #us-main #us-content .input-small input { width:12em !important; } #us-main #us-content .input-medium input { width:16em !important; } #us-main #us-content .input-large input { width:20em !important; } /* LABEL WIDTH */ #us-main #us-content .label-tiny label { width:9em !important; } #us-main #us-content .label-small label { width:12em !important; } #us-main #us-content .label-medium label { width:16em !important; } #us-main #us-content .label-large label { width:20em !important; } /* Text boxes & button in the link exchange */ #us-main textarea.full-width { width:536px; height:110px; margin:6px; }/*:FLAG SB 2/6 may need to hard code this width for different layouts*/ /* Radio List for list of radio buttons + Checkbox List for list of, er, checkboxes */ #us-main fieldset fieldset.radiolist, #us-main fieldset fieldset.checkboxlist { float:left; width:403px; padding:0 0 3px; margin:0; } #us-main #us-content .process-module fieldset.checkboxwithhelp label{display:block;float:left;} #us-main #us-content .process-module fieldset.checkboxwithhelp .input-row { width:403px; float:left; } #us-main fieldset fieldset.radiolist.us-wider { width:auto !important; /* _width:397px !important; */ } /* GS 4/10/06 : Issue 4912 fix */ #us-main fieldset fieldset.radiolist input, #us-main fieldset fieldset.checkboxlist input { float:left; /*clear:both;*/ } /* :INFO SB 10/12/2006 I've removed this for #7572 it may make things weird elsewhere */ #us-main fieldset fieldset.radiolist label, #us-main fieldset fieldset.checkboxlist label { width:auto; float:left; clear:none; } #us-main #us-content fieldset fieldset.radiolist ul, #us-main #us-content fieldset fieldset.checkboxlist ul { margin:0; padding:0; display:block; } #us-main fieldset fieldset.radiolist li, #us-main fieldset fieldset.checkboxlist li { float:left; list-style-type:none; margin:0; padding:0; clear:both; font-size:100%; width:100% } /*: INFO RL 6/11/06. #9049 set width to 100% for IE7 */ * html #us-main fieldset fieldset.radiolist li, * html #us-main fieldset fieldset.checkboxlist li { float:none; } /* :HACK JR 09/08/2006 * html hack to feed just to IE */ /* :INFO JR 08/08/2006 Added more specific fieldset, to make sure rules are applied. Otherwise difference between IE & FF */ /* Radio Line for line of radio buttons */ #us-main fieldset.radioline label { width:auto; clear:none; margin-left:5px ;} #us-main fieldset.radioline { float:left; } /*:INFO SB 30/6/6 took out "form" from the selection heirarchy (to fix a prob nils raised)as the form tag appears just below body tag in .net, therefore all above styles may not work, need to look out for this */ /* Checkbox Inline */ #us-main fieldset div.checkboxinline { background:none; padding-bottom:4px; } #us-main .us-cp fieldset div.checkboxinline { background: #e6ebf5 !important; } #us-main fieldset div.checkboxinline label { width:auto; line-height:1.6em; float:none; } #us-main fieldset div.checkboxrightalign label { margin-left:5px; } #us-main fieldset div.checkboxleftalign label { margin-right:5px; } #us-main fieldset div.checkboxcolumn { background:none; padding-bottom:4px; } #us-main fieldset div.checkboxcolumn label { line-height:1.6em; float:left; } #us-main fieldset div.checkboxcolumn input { float:left; margin:0; } #us-main fieldset div.checkboxinline p { display:inline; } /* :HACK Wrap checkbox in

tag - stops IE from shoving it a couple of hundred pixels away */ #us-main fieldset div.checkboxinline input { float:none; margin:0; width:auto;} /* Slider control */ #us-main fieldset .ajax__slider_h_rail { float:left; } /* Date DMY & Date MY */ #us-main fieldset.date-dmy select { margin:0 5px; width:inherit; } @media all and (min-width:0px) { #us-main fieldset.date-dmy select { width:auto;margin-right:40px } } /*:INFO SB 11/10/2006 The above inherit rule causes a bit of grief in opera so I'm overiding for opera only and adding a margin for bug #8509 */ #us-main div.date-dmy input { width:4em; } #us-main div.date-dmy #dob-day { width:2em; } #us-main .date-dmy .us-readonly { border:1px solid #fff !important; } #us-main .date-dmy select.us-readonly { border:none !important; } /* :INFO SB 26/7 /06 changed from divs to fieldsets in above 3 rules. dynamic pages were producing fieldsets. I have gone with dynamic pages because other istances where theres a collection of fields on the right like radioline and radiolist are contained in a fieldset as well. need to change statics now*/ /* :INFO JR 07/08/2006 NOTE TO SELF -- use this format to provide generic classes for putting width & margins on inputs!!! */ #us-main div .char2 { width:2em; margin-right:5px; } #us-main div .char4 { width:4em; margin-right:5px; } #us-main div .char6 { width:6em; margin-right:5px; } /* Date DMY & Date MY */ #us-main div.date-my select { margin:0 5px 0 0; } /* How long? */ #us-main .howlong input { width:3em; } #us-main .howshort { width:17em !important; } #us-main .howlong fieldset label { width:4em; clear:none; margin-left:.5em; } #us-main .howlong label.pixfix { width:4em; clear:none; margin-left:.5em; } /* DIRECT DEBIT */ /* :INFO JR 07/08/2006 specifically for direct debit control. hooray. */ .us-directdebitaccountholder { margin-top: 25px !important; } .us-directdebitaccountholder label { padding-left:6px; } .us-directdebitaccountholder input { margin-left:6px; } #directdebit #dd-col-right { margin-bottom:3px; } #directdebit fieldset { padding-right:3px; } #directdebit.dd-2col #dd-col-right fieldset { padding:7px 3px 0 8px; background-image:url(../Images/Global/sugarcube.gif); background-repeat:repeat-y; background-position:left; } #directdebit.dd-2col #dd-col-wrapper { background:#E6EBF5; } /* :FLAG substitute color light */ #directdebit.dd-2col #dd-col-left, #directdebit.dd-2col .dd-col-left { float:left; width:50%; } #directdebit.dd-2col #dd-col-right, #directdebit.dd-2col .dd-col-right { float:left; width:49.9%; margin-bottom:0px;} /* :KLUDGE IE6 doesn't like 50% ?! */ #us-main #directdebit .sortcode-hypens { float:left; margin-right:4px; } #us-main fieldset .sortcode-hypens { float:left; margin-right:4px; } /* INFO issue 8625 */ #us-main #directdebit.process-module label { width:210px; } body.Semi-Skimmed #us-main #directdebit.process-module label { width:50%; } #dd-col-right .us-borderleft, .us-borderleft { border-left:3px solid #fff !important; } .us-borderright { border-right:5px solid #fff !important; } /* :INFO JR 24/08/2006 sugarcube.gif 3 pixel square, used to simulate border */ #directdebit #dd-col-right fieldset { padding:7px 3px 0 5px; background-repeat:repeat-y; background-position:left; } #us-main #directdebit #dd-col-right .dd-blurb { padding-bottom:6px; } #directdebit table.dd-addresstable { margin:6px 0 6px 6px; width:95%; border-collapse:collapse; background-color:#FFF; border:1px solid #CCC; } #directdebit table.dd-addresstable td, #directdebit table.dd-addresstable th { width:25%; padding:0 10px; } #directdebit table.dd-addresstable th { color:#999; font-weight:normal; padding:3px 10px; } #directdebit table.dd-addresstable td { color:#444; } #directdebit table.dd-reference { border-collapse:collapse; background-color:#FFF; height:1.6em; margin:12px 6px; } #directdebit table.dd-reference td { border:1px solid #333 !important; width:1.6em; } #directdebit .originator-address { margin:0 2.6em; padding:7px 16px 9px 10px !important; border:solid 1px #CCC; background:#FFF; float:right; } #directdebit .dd-instruction img { float:right; margin:0 6px 2px 2px; } #directdebit .dd-instruction h4 { margin-bottom:14px; } #directdebit .dd-instruction label { float:none; } #directdebit .dd-instruction input { float:none; width:9em; } #directdebit .dd-date label { float:none; } #directdebit .dd-date input { float:none; width:16em; } #directdebit .us-readonly { color:#666; background-color:#FFF; padding:3px 0 3px 6px; border:1px solid #CCC; } #directdebit .us-grey td, #directdebit .us-grey th { background:#ccc; color:#000 !important; } /* Pictorial Input The panels at the beginning of the switching process */ #us-main fieldset#pictorial { background:none; padding:0; margin:0; border:0; } #us-main #pictorial div div { float:left; margin-left:6px; background-color:#E6EBF5; } /* :FLAG substitute color light */ /* :INFO PC 19/07/06 added dimensions so page layout still works without images 09/08/2006 JR since taken out?!? */ /* :INFO SB 25/7/6 took out dimaensions again because it doesn't work with 3 pic. Will try and get a control based solution */ #us-main #us-content #pictorial .pic-first { margin-left:0;} /* INFO GS 14/09/06 Temp fix; Added a max width to label to prevent it from pushing left */ #us-main #pictorial label { margin:11px 0 12px 8px; font-weight:bold;display:block; float:none; } #us-main #pictorial.pictorial-3 label {width:160px;} #us-main #pictorial.pictorial-2 label {width:260px;} /*#us-main #pictorial.pictorial-2 div div {margin-left:4px;} potential fix for 2 up pictorials.*/ #us-main #pictorial input { display:block; margin:0 0 7px 8px; float:none } #us-main #pictorial .us-button { float:right; margin:10px 0 0 0; } #us-main #pictorial img { display:block} #us-main .tablepictorial {border:0;padding:0; border-collapse:collapse; width:100% } #us-main .tablepictorial td {background-color:#E6EBF5;zborder:0px; vertical-align:bottom; border-left:6px solid #fff;margin-left:6px;padding:0 !important; } #us-main .tablepictorial td label {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif } #us-main .tablepictorial td.pic-first { border-left:0px } #us-main #us-pictorial { padding:0; background:none; } #us-main #us-pictorial .us-picture { width:276px; background: #E6EBF5; margin:0 0 6px 6px; float:left; }/* :FLAG Substitue color light */ #us-main #us-pictorial .us-pic-odd { margin-left:0;} #us-main #us-pictorial .us-picture div { float:left; width:146px; padding:5px 5px 0px 5px; } #us-main #us-pictorial .us-picture div.us-pic-content { min-height:5.2em; _height:5.2em; padding:0; } /* :INFO content min height box */ #us-main #us-pictorial .us-picture div input { background:#D4D0C8 !important; } /* :INFO GS 19/12/2007 bg added for button, s.gibbs lego update */ #us-main #us-pictorial .us-picture div a { line-height:1.1em; display:block; font-weight:bolder; margin-bottom:9px; } #us-main #us-pictorial .us-picture div a.learnmore {font-weight: normal; margin-bottom:0;}/*XM: created learmore class to remove the margin-bottom and the bold style from the learn more link. This fixes bug N:5992*/ #us-main #us-pictorial .us-picture div a.fauxbutton {font-weight:normal; margin-right:5px; margin-bottom:2px; display:inline;} #us-main #us-pictorial .us-picture div p { line-height:1.1em; margin:3px 0; } #us-main #us-pictorial .us-picture img { float:left;} #us-main #us-pictorial .us-picture h4 { margin-bottom:0px !important} #us-main #us-pictorial .us-picture ul, #us-main #us-pictorial .us-picture ol { padding-top:0; margin:2px 0 4px 0 } /*/* :INFO SB 26/10/2006 The above is the new horizontal pictorials with the new smaller pictures. With this model we only ever have 2 going across. In instances where there is a 3rd we flow inline underneath and create a forth advert image to make even. more the middle spacing we need to put us-pic-odd on every odd item. */ /* :INFO RL 29/11/06. Allow fauxbuttons to be aligned vertically for pictorials via fixed height containers. Another layout variation for pictorials.. Existing margins needed rejiggin */ /* GS 05/12/06 Pictorials (unique styles) for Debt. */ /* :INFO RL 12/12/2006. Created this module for heading-less pictorials having a top margin. This will have to be pulled into Lego at some stage. */ #us-main .pictorial-module { } #us-main .pictorial-module #us-pictorial .us-picture { margin-top:13px; margin-bottom:0px; width:100%; } #us-main .pictorial-module #us-pictorial .adjwidth-med { width:67% !important; } /* INFO: Fixes width for medium images - act as override; image to left/right set float class on image to acheive this*/ #us-main .pictorial-module #us-pictorial .adjwidth-sml { width:73% !important; } /* INFO: Fixes width for small images - act as override; image to right/left */ #us-main .pictorial-module #us-pictorial .adjwidth-med img, #us-main .pictorial-module #us-pictorial .adjwidth-sml img { margin: -5px; padding: 0pt 10px 0pt 0pt; height:auto } #us-main .pictorial-module #us-pictorial .us-picture div p { line-height:1.3em; } #us-main .pictorial-module #us-pictorial .us-picture a.fauxbutton { margin-left:5px; } #us-main .pictorial-module h4 { font-size:145%; } /* INFO: increase size of h4 tag */ /* Form inputs Help contains the "help-link" Controls */ #us-main div.help-input { width:199px; float:right; } #us-main div.help-input p { width:199px; float:left; margin:0 !important; padding:0 !important; line-height:1.3 !important; /* :INFO over-rides

padding for process pages */ margin-top:2px !important; } #us-main div.help-input img { vertical-align:bottom; } /* PROCESS FORMS */ #us-main .process-module label { width:310px; padding-right:10px/*:INFO SB 28/11/06 Added this to stop touching the pound sign*/; line-height:1.6em; margin-bottom:0.3em; } #us-main .process-module form { margin-top:16px; } /*:TODO SB This wont work because the form is the first child of body in dot net. maybe put margin on process module div itself */ #us-main .process-module .checkbox-nohelp label { width:370px; } #us-main div label.full-width, #us-main .us-maxwidth { width:100%; } /*:INFO RL 8/11/06 full width label can be applied to any module */ /* FULFILMENT FORMS */ #us-main .fulfilmentsingle-module label { width:338px; } #us-main .fulfilmentsingle-module .help-input { width:350px; } #us-main .fulfilmentsingle-module fieldset.radiolist, #us-main .fulfilmentsingle-module fieldset.checkboxlist { width:573px; } #us-main .fulfilmentsingle-module fieldset.checkboxlistnarrow { width:338px; } #us-main .fulfilmentsingle-module fieldset.radiolist .help-input, #us-main .fulfilmentsingle-module fieldset.checkboxlist .help-input { width:100px; float:left; } #us-main .fulfilmentsingle-module fieldset.radiolist label, #us-main .fulfilmentsingle-module fieldset.checkboxlist label { width:203px; } #us-main .fulfilmentsingle-module fieldset.checkboxlist div.checkbox-nohelp label { width:380px; } #us-main .fulfilmentdouble-module fieldset.checkboxlist div.checkbox-nohelp label { width:200px; } #us-main .fulfilmentdouble-module fieldset.us-clearfix { width:452px; float:left; } #us-main .fulfilmentdouble-module label { width:224px; padding-right:10px; } #us-main .fulfilmentdouble-module fieldset.radiolist ul, #us-main .fulfilmentdouble-module fieldset.checkboxlist ul { float:left; } #us-main .fulfilmentdouble-module fieldset.checkboxlist, #us-main .fulfilmentdouble-module fieldset.radiolist { width:218px; } /* :INFO JR 11/08/2006 commented these out, causing problems on fulfilment double page */ /* #us-main .fulfilmentdouble-module fieldset.checkboxlist { width:100px !important; } #us-main .fulfilmentdouble-module fieldset.checkboxlist label { width:170px !important; } #us-main .fulfilmentdouble-module fieldset.checkboxlist div { width:200px; } */ /* POP UP FORMS */ body.us-popup #us-main label { width:240px; margin:0px 0 6px 0; } body.us-popup #us-main textarea { width:490px; margin-bottom:5px; } /* HELP LINKS -- move these to components?? oh yes. ---------- */ /* INPUT MODULE HELP */ #us-main p.help-input { float:left; margin:0 0 0 11px; padding:0; position:relative; top:0.5em; } #us-main p.help-input img { display:inline; vertical-align:middle; margin-right:4px; } /* 6.'BESPOKE COMPONENTS ===================== */ /* Content Box Panel Linkbar Introblock Popup Fulfilment Summary Fulfilment Confirmation Site Map Body classes Progress Customer Service Cross-sell H3 extra info */ /* 'CONTENT -------- #us-content is a container div. All

tags have 6px left & right padding. All

tags have mega top margin */ #us-main #us-content {position:relative; clear:both; } /*:INFO SB 8/6/6 This is so we can alter the progress div position without leaving a space in its natural position. */ #us-main #us-content p { padding:0 6px; } /* :INFO SB 2/6/06 -- VERY IMPORTANT, ADDS PADDING FOR PARAGRAPHS IN MAIN CONTENT PART OF PAGE */ #us-main #us-content table p { padding:0; } /* :INFO JR 06/06/06 Exception for padding

tags in tables in #us-content */ /*:INFO SB 8/6/6 added #us-content to ensure sitemap doesn't get the border. */ #us-main #us-content h1 { clear:both; border-bottom:3px solid #039; line-height:1.3; padding-top:8px; } /* :FLAG substitute color main - missing */ #us-main #us-content h3 { margin-top:8px; clear:both; display:block; } /* :INFO SB 2/6/06 */ /* :INFO PC 18/07/06 */ /* :INFO 4/12/06 RL - partner specificity */ /* MB - R21 fix for RSS feeds to stretch full width */ #us-main #us-primary .us-box { width:100% !important; } #us-main #us-content #us-primary .us-box h3 { margin-top:0px !important; } #us-main #us-content h4 { padding:5px 0 0 6px; } /*:INFO RL 10/8/06 - As per fieldset */ #us-main #us-content fieldset h4 { padding-left:0; padding-top:0; } /*:INFO RL 10/8/06 - Override above styles */ #us-main #us-content .cross-sell div h3, #us-main #us-content .cross-sell div p { margin-top:0; padding:0; } /*'BOX maybe put structure and color together, as easier to maintain + color doesn't change?? --- */ #us-nav .us-box, #us-main .us-box, #us-more .us-box { margin-bottom:7px; border:1px solid #039; } /* :FLAG substitute color - missing */ #us-nav .us-box { width:181px; width:179px; } /* :HACK SBMH */ #us-more .us-box, #us-main .us-box { width:164px; width:162px; float:right; } /* :HACK SBMH */ #us-secondary .us-box { width:324px; width:322px; float:right; } /* :HACK SBMH */ /* Box header */ #us-nav .us-box h4, #us-nav .us-box h3, #us-main .us-box h4, #us-main .us-box h3, #us-more .us-box h4, #us-more .us-box h3 { text-transform:uppercase; font-weight:bold; font-size:85%; padding:3px 2px 3px 5px !important; margin:0 0 5px 0; line-height:1.2; } /* Issue:5525 H3's should no longer have text-transform on them. */ /* :INFO 4/12/06 RL - Added display:block for cobrand specificity issue #8946 */ #us-nav .us-box h3, #us-main .us-box h3, #us-more .us-box h3 { text-transform:none; text-transform:uppercase; display:block } /* Box padding */ #us-nav .us-box, #us-main .us-box, #us-more .us-box { padding-bottom:5px; } #us-nav .us-box p, #us-main .us-box p, #us-more .us-box p { padding:0 2px 0 4px; margin-bottom:5px; } #us-nav .us-box img, #us-main .us-box img, #us-more .us-box img { padding:0 0 0 4px; margin-bottom:5px; } #us-main .us-box ul {padding-left:1.6em;} /* Box colors */ #us-nav .us-box, #us-main .us-box, #us-more .us-box { border-color:#515B67; } #us-nav .us-box p, #us-main .us-box p, #us-more .us-box p { color:#515B67; } /* Box colors corporate */ #us-nav .us-box h4, #us-nav .us-box h3, #us-main .us-box h4, #us-main .us-box h3, #us-more .us-box h4, #us-more .us-box h3 { color:#FFF; background-color:#039; } /* :FLAG substitute color - #515B67 - Partners */ #us-more .us-box h4.content, #us-more .us-box h3.content { color:#fff; background-color:#515b67; } #us-more .us-box h4.insight, #us-more .us-box h3.insight { color:#515b67; background-color:#fff; } #us-nav .us-box .linkbar img, #us-more .us-box .linkbar img { background-color:#039; } /* :FLAG substitute color - #515B67 - Partners */ /* Box channel specific content GREY */ #us-nav .us-boxspecific h4, #us-nav .us-boxspecific h3, #us-main .us-boxspecific h4, #us-main .us-boxspecific h3, #us-more .us-boxspecific h4, #us-more .us-boxspecific h3 { background-color:#515B67; } #us-nav .us-boxspecific .linkbar img, #us-main .us-boxspecific .linkbar img, #us-more .us-boxspecific .linkbar img { background-color:#515B67; } /*channel colored us-box's, used for quick look in the channel directory. RL 14/12/2006 they are now channel coloured */ #us-nav .us-boxquicklook, #us-main .us-boxquicklook, #us-more .us-boxquicklook { background-color: #E6EBF5; border:none; width:164px } /* :FLAG substitute color light */ #us-nav .us-boxquicklook h4, #us-main .us-boxquicklook h4, #us-more .us-boxquicklook h4 { text-transform:none; margin:5px 0 0 4px; background-color:transparent !important; color:#039; } /* :FLAG substitute color dark */ #us-nav .us-boxquicklook h3, #us-main .us-boxquicklook h3, #us-more .us-boxquicklook h3 { background-color:#9AAED7; color:#039; } /* :FLAG substitute color mid, dark */ /*#us-nav .us-boxquicklook h3, #us-main .us-boxquicklook h3, #us-more .us-boxquicklook h3 { background-image:url(/directory/qlook.gif); background-position:130px -2px; background-repeat:no-repeat} */ /*:INFO SB 2/10/06 as per g#6849 this now is obsolete, have left in incase they change mind */ #us-nav .us-boxquicklook p, #us-main .us-boxquicklook p, #us-more .us-boxquicklook p { margin:0 0 0 5px; color:#515B67; background-color:transparent !important; } /* :FLAG persistant color main */ #us-more .us-box .linkbar { margin:2px 0; } /* Box link colors */ #us-nav .us-box a, #us-nav .us-box p a:link, #us-nav .us-box p a:visited, #us-main .us-box a, #us-main .us-box a:link, #us-main .us-box a:visited, #us-more .us-box a, #us-more .us-box a:link, #us-more .us-box a:visited { color:#515B67; } #us-nav .us-box a:hover, #us-main .us-box a:hover, #us-more .us-box a:hover { color:#039; } /*'PANEL ----- Light colored backgrounds as per fieldset background. Deep joy. */ /* :INFO 14/06/2006 padding added as margin-bottom collapses on

*/ #us-main .us-panel { background-color:#E6EBF5; margin-bottom:4px; padding:5px 0; } /* :FLAG substitute color light */ #us-main .us-panel h4 { padding-left:6px; } #us-main .us-panel h4.about { color:#666;margin-bottom:0px; } /* GS H4 styling rule is specific to the 'About page' ISSUE:7108 */ #us-main .us-panel img { position:relative; float:right; padding:2px 5px; } #us-main .us-panel img.us-fullwidth { padding:0 10px 5px 0; margin:-4px -10px 0 0; float:left; } /* :INFO for full width images */ #us-main .us-panel .linkbar img { float:none; padding:0; } #us-main .us-panel img.nofloat { float:none; } #us-main .us-panel p.us-label{ padding:5px 0 0 6px; float:left; text-align:left; clear:both; width:316px }/* :INFO SB 27/6/6 this mimics a label except it isnt because its not used for a field input */ #us-main .us-panel p.us-action { float:left } /* :INFO SB 27/6/6 again this mimics an input in that it appears on the right of a us-label, used "action" as user is usually doing something here */ #us-main .us-panel .us-panel-left { float:left; width:49% } #us-main .us-panel .us-panel-right { float:left ; width:49% } #us-main #us-content .us-panel-right-Ins { float:left ; width:48% ; margin-right:-32px } #us-main .us-panel .us-panel-3col { float:left; width:33%; } #us-main .us-panel .us-supplier { margin-top:13px; } #us-main .us-panel .us-supplier h4 { padding:5px 0 5px 25px; margin-left:6px} /* :INFO SB 21/9/6 not sure what this was doing in above rule background:url(../Images/Channels/icons/progress-creditcards.gif) no-repeat center left;*/ #us-main .us-panel .us-supplier p {margin-top:5px } #us-main .us-panel .us-supplier a {margin-top:10px} /* INFO GS 28/9/06 Definition List style rules */ #us-main .us-panel dd { margin:0; margin-bottom:16px !important; } #us-main .us-panel dt { text-align:left; font-weight:bold; } #us-main .us-panel dl { padding:5px 0 0 6px; text-align:left; font-size: 0.85em; line-height: 1.15em; } /* 'TOP CLASS ---------- :INFO Generic class for align*/ #us-main .us-top { clear:both; float:right; margin:0 4px 3px 0; } /*'LINKBAR ------- */ #us-main .linkbar, #us-more .linkbar { font-weight:normal !important; } /* Linkbar colors */ #us-main .linkbar img, #us-main .linkbar-results img { background-color:#039; } /* :FLAG substitute color main */ .linkbar img, #us-main .linkbar-results img { display:inline; vertical-align:middle; margin-right:5px; } /*:INFO SB 18/7/6 I took a position:relative; out of above rule because it was positioned out of place in IE. I can't see why a relative is needed here? */ #us-more .us-box .linkbar img { top:2px; } #us-more .us-box .linkbar img.us-icon { margin:0; padding:0px; background:none; } /* :INFO SB 26/ 7/06 This is used for the rss icon in the dynamic homepage, can be used for other icons in this situation G#3831*/ #us-main th .linkbar img { top:-1px; } /* Linkbar links */ .linkbar a { text-decoration:none; } .linkbar a:hover { text-decoration:underline; } /* Linkbar Results */ #us-main .linkbar-results { margin-top:6px; } #us-main #us-content .linkbar-results p, #us-main #us-content span.linkbar { padding:0; float:left; padding-right:16px; } /* change margin-right to padding for IE6. Extend to span to address different HTML */ #us-main .linkbar-results p a, #us-main #us-content span.linkbar a { text-decoration:none; font-weight:bold; color:#039; /* :FLAG substitute color dark */ font-size:110%; /* :KLUDGE ALERT */ ; } #us-main .linkbar-results p a:hover, #us-main #us-content span.linkbar a:hover { text-decoration:underline; color:#039; } #us-main #linkbar-bottom { float:right; margin:1.5em 0; padding:0; } #us-main #linkbar-bottom a, #us-main #linkbar-bottom a:visited { text-decoration:underline; font-weight:normal; color:#039; } /* :FLAG substitute color dark */ #us-main #linkbar-bottom a:hover, #us-main #linkbar-bottom a:hover:visited { color:#039; } /* :FLAG persitent color */ #us-main #linkbar-bottom img { display:none; margin:0 !important; } #us-main #linkbar-bottom p { margin:0 !important; padding:0 !important;} #us-main #linkbar-bottom span { margin:0 0.5em; } #us-main #linkbar-bottom .us-hide { display:block; float:left; color:#039; } /* :FLAG substitute color dark */ #us-main .linkbar-results .linkbar-right input { font-size:1.05em; margin-top:-1px !important; float:right !important;} #us-main .linkbar-results .linkbar-right img { float:right !important; margin-top:4px !important; } #us-main #us-content .linkbar-results span.linkbar { float:none; padding:0; } /* :INFO override float left for fauxlink linkbars */ /* Help box Surrounds "help-link" Controls after Results Table */ #us-main .us-helpbox { float:left; padding-bottom:30px;_padding-bottom:0; margin-top:5px; } /*:INFO SB 7/11/6 added more padding in firefox and less in ie. firefox wasnt adhering to the rule that us-main should have a bottom padding of 20px. I think this is because of bad floating. G#8024 */ #us-main .us-helpbox img { vertical-align:middle; } #us-main .us-helpbox.fixmargin { margin-top:-6em !important; } /* class required by Owen to overcome the table area issue 6310 */ #us-main .us-backlinks { width:50%;float:right; padding-bottom:10px; text-align:right } /* :INFO SB 22/9/6 this text-align right is for faux buttons used in consumer guide */ #us-main .us-backlinks p { padding-top:1px !important} /* :INFO SB 22/9/6 this is for an ie bug. The top strip of the button dissappears */ #us-main .us-backlinks ul.us-listinline { font-weight:bolder; float:right;clear:right;margin:15px -6px 0 0 }/*:INFO SB 14/7/6 These are derivateives of listinline links but also they are bold and floated to the right of page. Used in consumer guide */ /* RSS feed icon */ #us-wrapper .us-box .us-rss { background: url(/WebResources/Images/List-Marker/rss.gif) no-repeat; padding:2px 0px 0px 18px; } /*'INTRO BLOCK ----------- */ #us-main .us-title img { float:left; margin-right:12px; } #us-main .us-title p img { float:none; margin:0; padding:0; } /* :INFO JR 21/08/2006 enables inline images in title text */ #us-main .us-title .us-splash { margin:0; } #us-main .us-title h2 { font-size:152%; line-height:1em; margin-bottom:8px } #us-main .us-title p { font-size:93%; color:#515B67; padding:0; } #us-main .us-title .titletext { float:left; min-height:138px; height: auto !important; height: 138px; border-bottom:1px solid #979DA4; } /* :FLAG persistent color */ /*:INFO SB 10/7/6 added above fast minhieght hack for ie (http://www.dustindiaz.com/min-height-fast-hack), needed for directory product page, can now bottom align elements to the border using position:absolute and bottom:5px, for example the "any questions" line should be bottom aligned according to creatives */ body.us-1col .us-title .titletext { width:550px; /* width was 550px, see what happens with liquid partners */ } /* :INFO SB 16/10/2006 Made this back to pixels. As touchclarity was brealing in no script */ body.us-2col .us-title .titletext, body.us-2col-cgd .us-title .titletext { width:45.5%; /* width was 332px, see what happens with liquid partners */ } body.us-3col .us-title .titletext { width:59.5%; /* width was 332px, see what happens with liquid partners */ } body.us-1col .us-consumerguide .titletext { width:593px; /* need a narrower width on consumer guide. */ } #us-main .us-title-nopic h1 { margin-bottom:0; padding-left:6px; line-height:1em; } #us-main .us-title-nopic .titletext { border-bottom:1px solid #979DA4; } /* :FLAG persistent color */ #us-main .us-title-nopic .titletext p { padding:6px; } #us-main .us-title-nopic .titletext ul, #us-main #us-milk-title-image .titletext ul { font-size:1.1em; list-style-type:none; } div.titletext ul li { color:#555; } /*:INFO RL 11/12/2006. variation on section title - this one is channel colour coded. Used in Debt centre. */ #us-main .channel-colour { background:#9AAED7; width:100%; } /* :FLAG substitute mid */ #us-main .channel-colour .titletext { border:none; width:59%; } #us-main .channel-colour .titletext p { color:#039; line-height:1.2em} /* :FLAG substitute dark */ /*us tabbar is used in consumer guide at the top and bottom of each table */ #us-main .us-tabbar { width:100%; padding:4px 0 2px 0; margin-bottom:5px; margin-top:4px } #us-main .us-tabbar ul { margin:0 } #us-main .us-tabbar h4 { font-size:100% ;color:#fff; margin:0;padding:1px 0 0 0 !important } #us-main .us-tabbar a { color:#fff !important} #us-main .us-tabbar .us-listinline li {border:none;margin-left:0; } /*'POPUP ----- Styling for pop-up pages */ body.us-popup { margin:7px 12px; padding:0;} body.us-popup #us-main div { background-color:#fff !important; padding:6px; margin-bottom:3px; } /* :FLAG substitute color light */ /* :INFO SB 16/10/2006 commented out the important colour rule above not sure what this was doing. If needed make more specific */ body.us-popup #us-main h1 { font-size:152%; line-height:1.3em; margin:0 0 20px; padding:0; } /* :FLAG substitute color main */ body.us-popup #us-main h2, body.us-popup #us-main h3, body.us-popup #us-main h4, body.us-popup #us-main h5 { font-size:85%; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.9em; padding-left:0px; } body.us-popup #us-main .panel h3 { margin-top:0; } /* :TODO JR this needs fixing for popup panels, will wait til Stu has done sitewide p padding changes */ body.us-popup #us-main h2 { font-weight:bold; text-transform:uppercase; background-color:#9AAED7; padding-left:6px; } body.us-popup #us-main h3 { font-weight:bold; text-transform:uppercase; padding-left: 10px; margin-top:12px} body.us-popup #us-main h4, body.us-popup #us-main h5 { margin-top:6px; text-transform:none; } body.us-popup #us-main img.provider-logo { display:block; margin-top:12px} body.us-popup #us-main table.us-tabletvpicker { border-collapse:collapse; width:100%; border:1px solid black; margin-left:1px; _margin:0; } body.us-popup #us-main .us-collapsible-section .us-collapsible-head { margin:3px 0 3px 0; width:100%; padding:5px 5px 0 5px; _padding-bottom:5px; } /* :FLAG substitute color light */ /* body.us-popup #us-main .us-panel, body.us-popup #us-main h3 { margin-top:-15px; } issue 8244 */ body.us-popup #us-main .us-cp { margin-top: -25px; } body.us-popup #us-main .us-cp h3 { margin-top: 10px; } body.us-popup #us-main div.confirmation-module { padding:0; } /* Popup heading */ body.us-popup #us-main div.popup-heading { background:none !important; padding:0; border-bottom:3px solid #039;} /* :FLAG substitute color mid */ body #us-main div.popup-heading p { margin:0; float:right; margin-top:8px; } /*SB 25/9/6 removedd the body class here to get this working in CG. If I added the body class in the CG html it threw a wobbly */ body.us-popup #us-main div.popup-heading h1 { float:left; } /* Close popup window */ div.popup-heading p a.us-closewindow { display:block; width:8.5em; padding-bottom:2px; background:url(/RepaintWebresources/Images/Channels/Dingbats/close-uswitch.gif) no-repeat center right;} /* :FLAG this image is channel specific, & set in ChannelColoursText.xsl */ #us-main div.popup-heading h1 { position:relative; margin:0; padding:0; } /* :INFO 17/07/06 PC fixes gap in text left by relatively positioning p at -41px */ /* GS Added due as writing style requires list format */ body.us-popup #us-main li { margin-left:2em; } body.us-popup #us-main ol.alpha li {list-style-type:lower-alpha; } /*'FULFILMENT SUMMARY + CONFIRMATION ------------------ */ #us-main .summary-fulfilment { float:left; width:324px; width:322px; border:1px solid #039; border-top:none; margin-top:25px; } /* :FLAG substitute color main */ /* INFO: 10/0/06 RL - moved SBMH from #us-secondary to here so landing page secondary column is correct */ #us-main .summary-block { margin-bottom:10px; } .summary-fulfilment .summary-plan { float:left; width:167px; } /* INFO: Width set for long suppliers */ #us-main .summary-fulfilment .summary-logo { float:right; width:155px; text-align:center; } /* INFO: Max image width */ #us-main .summary-fulfilment .summary-logo img { /*border:1px solid #C1C4C8; */ margin-right:5px; margin-top:10px } /* INFO: Image recut post launch */ #us-main .summary-fulfilment table { border-collapse:collapse; padding:0; margin:0 0 5px 3px; text-align:left } #us-main .summary-fulfilment h5 { margin:0 3px 5px 5px; } #us-main .summary-fulfilment p { margin:0 3px 5px 0px; } #us-main .summary-fulfilment iframe { margin:5px 3px 0 5px; overflow-x: hidden; overflow-y: scroll; } /* INFO: hiding x-overflow eliminates bottom scrollbar in IE */ #us-main .summary-fulfilment table th, .summary-fulfilment table td { vertical-align:top; padding:3px; color:#039; } /* :FLAG substitute color dark */ #us-main table.us-chosen-supplier td, #us-main table.us-chosen-supplier th { padding-top:1px; padding-bottom:1px; } /* Issue:5525 H3's should no longer have text-transform on them. */ #us-main .summary-fulfilment h3, #us-main .summary-fulfilment h4 { font-weight:bold; line-height:1.9; padding-left:6px; text-transform:uppercase; } #us-main .summary-fulfilment h4 { text-transform:uppercase; } #us-main .summary-fulfilment h3 { margin-bottom:0; color:#FFF; /* :FLAG persistent color */ background-color:#039 } /* :FLAG substitute color main */ #us-main #us-content .summary-fulfilment h4 { margin-bottom:5px; color:#039; padding-top:0;/* :FLAG substitute color dark */ background-color:#9AAED7 } /* :FLAG substitute color mid */ #us-main .summary-fulfilment h5 { margin-bottom:2px; font-weight:bold; text-transform:none; color:#039;} /* :FLAG substitute color dark */ #us-main .summary-fulfilment ul { margin:0 3px 5px 8px; } #us-main .summary-fulfilment p.us-crucial { color:#FFF; background-color:#039; font-weight:bold; padding:1px 3px 2px 4px; margin-right:5px; margin-left:5px; } /* :FLAG substitute color main */ #us-main .summary-fulfilment .hinfo { float:right; margin-top:-23px; } #us-main .summary-fulfilment .hinfo a, #us-main .summary-fulfilment .hinfo a:visited { text-transform:uppercase; font-weight:bold; margin-right:2px; color:#039; } /* :FLAG substitute color dark */ #us-main .summary-fulfilment .hinfo a:hover, #us-main .summary-fulfilment .hinfo a:visited:hover { color:#039; } /* :FLAG persistent color */ /* :INFO RL 7/6/06 Fulfilment summary form */ #us-main .fulfilmentsummary-module { margin-top:25px; } #us-main .fulfilmentsummary-module label { width:326px; } /* Fulfilment confirmation panel div */ #us-main .us-panel.us-confirm { margin-top:3px;} /*'SITE MAP -------- */ #us-main #us-content .sitemap-column { float:left; width:300px; margin:0 7px 0 0; padding:0; } /* :INFO 12/07/06 PC sitemap in 3 cols now */ #us-main #us-content .sitemap-lastcolumn { float:left; width:300px; margin:0; padding:0; } /* :INFO 12/07/06 PC sitemap in 3 cols now */ #us-main #us-content .sitemap-widecolumn { margin:0; padding:0; } /* :INFO 12/07/06 PC sitemap in 3 cols now */ #us-main #us-content .sitemap-block h3 { color:#FFF; text-transform:none; border-bottom:3px white solid; margin-top:0px; } #us-main #us-content .sitemap-block { margin:6px 0 0 0; } /* :INFO 12/07/06 PC blocks in 3 cols now, margins between vertical blocks */ #us-main #us-content .sitemap-block div { padding:8px 0 12px; } #us-main #us-content .sitemap-block div ul { margin:0px 0px 6px 0px; padding:0px 0px 0px 8px; } #us-main #us-content .sitemap-block div ul li ul { margin:0px 0px 0px 0px; padding:0px 0px 0px 15px; } #us-main #us-content .sitemap-block div li { list-style-type:none; font-weight:bold; padding-left:6px; } #us-main #us-content .sitemap-block div li li { margin-left:1em;list-style-type:none; font-weight:normal; } #us-main #us-content .sitemap-block div li, #us-main #us-content .sitemap-block div li li { margin:0px; padding:0px; background-image:none; border:none; } /* Channel h3 main background color */ #us-main .sitemap-uswitch h3 { background-color:#003399; } #us-main .sitemap-broadband h3 { background-color:#5B9978; } #us-main .sitemap-creditcards h3 { background-color:#73892D; } #us-main .sitemap-currentaccounts h3 { background-color:#A19A50; } #us-main .sitemap-digitaltv h3 { background-color:#415690; } #us-main .sitemap-directory h3 { background-color:#8A9BAE; } #us-main .sitemap-energy h3 { background-color:#736E41; } #us-main .sitemap-heatingcover h3 { background-color:#702150; } #us-main .sitemap-homephone h3 { background-color:#3D8399; } #us-main .sitemap-loans h3 { background-color:#9D2C70; } #us-main .sitemap-marketnews h3 { background-color:#516E79; } #us-main .sitemap-water h3 { background-color:#3FA9B2; } #us-main .sitemap-mobiles h3 { background-color:#2D635B; } #us-main .sitemap-carinsurance h3 { background-color:#543A7B; } #us-main .sitemap-debtadvicecentre h3 { background-color:#322D17; } #us-main .sitemap-mortgages h3 { background-color:#94A135; } #us-main .sitemap-homeinsurance h3 { background-color:#891010; } #us-main .sitemap-lifeinsurance h3 { background-color:#1D551D; } #us-main .sitemap-travelinsurance h3 { background-color:#C64006; } #us-main .sitemap-creditreportcentre h3 { background-color:#322D17; } #us-main .sitemap-savings h3 { background-color:#76B83E; } /* Channel main/dark link color */ #us-main #us-content .sitemap-uswitch a { color:#003399; } #us-main #us-content .sitemap-broadband a { color:#416F58; } #us-main #us-content .sitemap-creditcards a { color:#586923; } #us-main #us-content .sitemap-currentaccounts a { color:#77733C; } #us-main #us-content .sitemap-digitaltv a { color:#415690; } #us-main #us-content .sitemap-directory a { color:#636F7E; } #us-main #us-content .sitemap-energy a { color:#736E41; } #us-main #us-content .sitemap-heatingcover a { color:#702150; } #us-main #us-content .sitemap-homephone a { color:#3D8399; } #us-main #us-content .sitemap-loans a { color:#9D2C70; } #us-main #us-content .sitemap-marketnews a { color:#516E79; } #us-main #us-content .sitemap-water a { color:#317986; } #us-main #us-content .sitemap-mobiles a { color:#2D635B; } #us-main #us-content .sitemap-carinsurance a { color:#543A7B; } #us-main #us-content .sitemap-debtadvicecentre a{ color:#322D17; } #us-main #us-content .sitemap-mortgages a { color:#626757; } #us-main #us-content .sitemap-homeinsurance a { color:#891010; } #us-main #us-content .sitemap-lifeinsurance a { color:#1D551D; } #us-main #us-content .sitemap-travelinsurance a { color:#C64006; } #us-main #us-content .sitemap-creditreportcentre a{ color:#322D17; } #us-main #us-content .sitemap-savings a{ color:#76B83E; } /* Channel light background color */ #us-main .sitemap-uswitch { background-color:#B9D9BA; } #us-main .sitemap-broadband { background-color:#E6F1E7; } #us-main .sitemap-creditcards { background-color:#C8D0AC; } #us-main .sitemap-currentaccounts { background-color:#EDEBDD; } #us-main .sitemap-digitaltv { background-color:#ECEEF4; } #us-main .sitemap-directory { background-color:#E8EBEF; } #us-main .sitemap-energy { background-color:#F2EEE1; } #us-main .sitemap-heatingcover { background-color:#EADFE6; } #us-main .sitemap-homephone { background-color:#D9E7EB; } #us-main .sitemap-loans { background-color:#ECD6E3; } #us-main .sitemap-marketnews { background-color:#DDE3E5; } #us-main .sitemap-water { background-color:#E3F3F4; } #us-main .sitemap-mobiles { background-color:#E0E8E7; } #us-main .sitemap-carinsurance { background-color:#E7E1EB; } #us-main .sitemap-debtadvicecentre { background-color:#FDF9E3; } #us-main .sitemap-mortgages { background-color:#D5DBAF; } #us-main .sitemap-homeinsurance { background-color:#E8C0C0; } #us-main .sitemap-lifeinsurance { background-color:#C8E8C8; } #us-main .sitemap-travelinsurance { background-color:#F8E1DA; } #us-main .sitemap-creditreportcentre { background-color:#FDF9E3; } #us-main .sitemap-savings { background-color:#DDE8D7; } /*'BODY CLASSES :TODO sort out ============ class goes into body tag at the moment, we have: .us-1col .us-2col ,us-2col-cgd .us-3col .us-channelhome .us-process .us-output .us-fulfilment .us-link-exchange */ /* PROCESS CONTENT Process is another name for the pre-fulfilment, info input module filling part of the whole shebang */ /* OUTPUT CONTENT */ /* :TODO all sorts of layout nonsense going on :( */ /* :TODO JR 08/06/2006 make this affect body class body.us-output */ #us-output { } #us-output h1 { border-bottom:4px solid #5B9978; margin-bottom:0.3em; line-height:1.3em; position:relative; clear:both; } /* :HACK position:relative fixes IE peekaboo bug */ #us-output h3 { position:relative; clear:both; } /* :HACK position:relative fixes IE peekaboo bug */ #us-main #us-output #us-progress { position:relative; top:-33px; } #us-main #us-output form { margin:0 0 15px 0; } /* COMMENTED OUT :INFO 08/06/2006 JR stu is creating new progress indicator #us-main #us-progress.forceleft {margin:0px -170px 0 0 ;} :INFO GS force a negative margin value for positioning results indicator */ #us-main #us-output form label, #us-main #us-output form select, #us-main #us-output form input { margin-right:8px; } /* Sorting row for table */ #us-main #us-content fieldset.us-sort { width:100%; padding:0; } #us-main #us-content fieldset.us-sort div { padding:3px 6px; float:left; } #us-main #us-content .us-sort label { padding:4px 10px 0 0; } #us-main #us-content .us-sort select, #us-main #us-content .us-sort input { margin:3px 0 5px 5px; } #us-main #us-content .us-sort p.input-currency { margin:2px 0; } /* Sorting row for 6 columns */ /**/ #us-main #us-content fieldset.us-sort6 { width:100%; padding:0; float:left; } #us-main #us-content fieldset.us-sort6 div { padding:3px 0px; float:left; border:0px solid red; height:50px; width:auto; } #us-main #us-content .us-sort6 label { padding:4px 10px 0 4px; clear:both;/*float:left;*/ } #us-main #us-content .us-sort6 select, #us-main #us-content .us-sort6 input { margin:3px 0 5px 5px; clear:both; } #us-main #us-content .us-sort6 p.input-currency { margin:2px 0; } #us-main #us-content .us-sort6 input.FilterButton {clear:none;} #us-main #us-content fieldset.us-sort6 span[id^="Anthem_"]{float:none; } /* US-PRIMARY */ /*:INFO RL 1/11/06 - this is affecting long inputs in fulfilment summary, corporate pages & direct debit forms!! and Landing pages. Needs to be revisited. This should be applied to all form labels globally... For now leave the right margin (will solve the overlapping £ issue) but need to reduce the label at the same time */ #us-primary label { margin-right:20px } #us-primary .radioline label, #us-primary .checkboxinline label { margin-right:0px } /* FULFILMENT CONTENT */ /* Link-exchange */ /* :INFO SB 27/7 /06 this is for a form that appears in a narrower 2 col arrangement. This could be scaled up to be used by fulfilment summary which is a form in the same dimensions*/ body.us-link-exchange form label {width:250px} /*'PROGRESS -------- Progress indicator for process */ #us-main #us-progress { position:absolute; top:12px; right:0; xborder:1px solid black } #us-main #us-progress img, #us-progress p { float:left; } #us-main #us-progress img { margin:0 2px; } #us-main #us-progress p { position:relative; top:3px; margin-right:3px; padding:0; } /* :INFO SB 6/10/6 dropped margin from 4px to 3px above here fixed bug#7962 */ /*'CUSTOMER SERVICE ---------------- Customer Service in #us-main */ #us-main div.customerserv { clear:both; border:1px solid #039; padding:3px; margin:10px 0 0 0; } /* :FLAG substitute color main */ #us-main div.customerserv div { background-color:#039; padding:4px 6px 2px 6px; text-align:right; margin:0; } /* :FLAG substitute color main */ /* :INFO PC 18/07/06 customer service box padding amendment */ #us-main div.customerserv h3 { float:left; line-height:100%; text-transform:none; color:#FFF; background:none; padding:0; margin:0 0 0 0.3em;} #us-main div.customerserv p { color:#FFF; padding:0; margin:0; line-height:100%;} #us-main div.customerserv span { font-size:larger; font-weight:bold; margin:0; padding:0; } #us-main div.customerserv br { display:none; } /* Customer Service in #us-nav & #us-more */ #us-nav .customerserv { width:181px; width:179px; /* SBMH */ margin-bottom:7px; padding-bottom:4px; border:1px solid #515B67; } #us-nav .customerserv h3 { text-transform:none; background-color:#060 !important; color:#FFF; margin:2px !important; padding:3px 1px 4px 4px !important; } #us-nav .customerserv p { color:#060; font-size:85%; line-height:1.6em; margin:0; padding:0 3px; } #us-nav .customerserv span { font-size:larger !important; font-weight:bold; } /*'CROSS-SELL ---------- On the home page and thank you pages */ #us-main div.cross-sell { ove\rflow:hidden; } #us-main div.cross-sell div { _overflow:hidden;float:left; width:179px; height:5em;_height:5.9em; margin:12px 5px 0.8em -1px; padding:4px 0 0 0; border-left:1px solid #979DA4; } #us-main div.cross-sell img { float:left; margin:0px 6px 0 5px; height:30px;width:29px; } #us-main div.cross-sell div div { left:0; width:137px; margin:0 ; border:none; } /* :INFO 13/07/06 PC took 1px off width, fix for IE rendering phantom text bug */ #us-main div.cross-sell div div h3 { width:137px;padding:0; background:#FFF !important; line-height:1.2; margin-top:6px !important; } /* :INFO SB 26/7/6 changed a few things here for G#3735. Took top margin off cross sell as per creative. took off postion:relatives(and left:- ) off container div and sub divs. and instead used a negative left margin. increased top margin of h3 as per creative. Took float:left out of div div as already inherited from container. finally upped the right margin of container div to 5px to space them out across page better */ #us-main div.cross-sell div div p a:hover, #us-main div.cross-sell div div p a:visited, #us-main div.cross-sell div div p a:active { color:#515B67 !important; } /* Cross-sell for thank you page */ body.us-2col #us-main div.cross-sell div { width:236px; height:9em; } body.us-2col #us-main div.cross-sell div div { width:196px; } /* Cross-sell links */ .cross-sell div a, .cross-sell div a:link { text-decoration:none; } #us-main .cross-sell div p a, #us-main .cross-sell div p a:link { color:#515B67 ; } .cross-sell div h3 a:hover, .cross-sell div p a:hover { color:#039; text-decoration:underline; } #us-main div.cross-sell .us-homepage-cs-middle { display:block; margin-left:183px; _margin-left:91px; padding-right:5px; border-left:1px solid #979DA4; border-right:1px solid #979DA4; } /* H3 extra info ------------- */ /*Old code using relative positioning*/ /*#us-main .h3info { _margin-bottom:-18px !important; font-size:70%; float:right; position:relative; top:-2.3em; margin:0 8px 0 0; }*/ #us-main .h3info { display:inline; _margin-bottom:-18px !important; font-size:70%; right:0px; position:absolute; margin:0px 8px 0px 0px; margin-top:-1.8em; _margin-top: -2.5em; padding-right:10px;} /*'OVERALL SCORE BOX -------- */ #us-main .us-overall-score .us-overall-score-value { text-align: center; margin-top: 3px; } #us-main .us-overall-score .us-overall-score-value p.price { font-size: 150%; margin:0; padding:0; padding-top: 13px; font-weight: bolder; } #us-main .us-overall-score .us-overall-score-value p.percent { font-size: 220%; font-weight: bolder; } #us-main .us-overall-score .us-overall-score-value .us-overall-score-value-controls { padding:0; margin:0; padding-bottom: 7px; } #us-main .us-overall-score .us-overall-score-value input { float: none; font-weight: normal; } #us-main .us-overall-score .us-overall-score-head { text-align: center; padding-top: 4px; padding-right: 0pt; padding-bottom: 4px; padding-left: 0pt; font-weight: bolder; } div.us-overall-score-controls { text-align: center; } /* Widths */ .us-overall-score .us-overall-score-value { width: 120px; } #us-main .us-overall-score-fullcolumn .us-overall-score-value { width: 164px; } .us-overall-score .us-overall-score-head { width: 120px; } #us-main .us-overall-score-fullcolumn .us-overall-score-head { width: 164px; } /* Heights */ /* head portion */ .us-overall-score .us-overall-score-head { min-height: 26px; } #us-main .us-overall-score-fullcolumn .us-overall-score-head { min-height: 14px; } /* value portion */ .us-overall-score .us-overall-score-value { min-height: 60px; } * html #us-main .us-overall-score .us-overall-score-value { height: 2.5em; } #us-main .us-overall-score-fullcolumn .us-overall-score-value { min-height: 110px; } * html #us-main .us-overall-score-fullcolumn .us-overall-score-value { height: 8.3em; } /* END of OverallScoreBox */ /* + + + + + + + + + + + + + + + */ /* 6.'COLOR ======== The changing ones use body class to set colors? All colors in one stylesheet? */ /* Content background */ #us-main, #us-more { background-color:#FFF; } /* Nav */ #us-nav ul { border-color:#979DA4; } #us-nav li a { border-color:#979DA4; color:#515B67; } #us-nav li a:visited { color:#515B67; } #us-nav li a:hover { color:#515B67; background-color:#039; } #us-nav #channel-nav li a { border-bottom-color:#C1C4C8; } /* These channel colors used for out of channel color experiences */ /* Channel main background color - used for cobrand nav */ .uswitch-bg { background-color:#003399; } .broadband-bg { background-color:#5B9978; } .creditcards-bg { background-color:#73892D; } .currentaccounts-bg { background-color:#A19A50; } .digitaltv-bg { background-color:#415690; } .directory-bg { background-color:#8A9BAE; } .energy-bg { background-color:#736E41; } .heatingcover-bg { background-color:#702150; } .homephone-bg { background-color:#3D8399; } .loans-bg { background-color:#9D2C70; } .marketnews-bg { background-color:#516E79; } .water-bg { background-color:#3FA9B2; } .mobiles-bg { background-color:#2D635B; } .debtadvicecentre-bg{ background-color:#322D17; } .carinsurance-bg { background-color:#543A7B; } .mortgages-bg { background-color:#93A035; } .moneysaving-bg { background-color:#322D17; } .savings-bg { background-color:#76B83E; } .homeinsurance-bg { background-color:#891010; } .lifeinsurance-bg { background-color:#1D551D; } .travelinsurance-bg { background-color:#C64006; } /* Main Nav icons */ a.broadband-nav { background:url(/webResources/images/global/nav-broadband.gif) no-repeat center left !important; padding-left:18px } a:hover.broadband-nav { background:url(/webResources/images/global/nav-broadband-active.gif) no-repeat center left !important; padding-left:18px } a.creditcards-nav { background:url(/webResources/images/global/nav-creditcards.gif) no-repeat center left !important; padding-left:18px } a:hover.creditcards-nav { background:url(/webResources/images/global/nav-creditcards-active.gif) no-repeat center left !important; padding-left:18px } a.currentaccounts-nav { background:url(/webResources/images/global/nav-currentaccounts.gif) no-repeat center left !important; padding-left:18px } a:hover.currentaccounts-nav { background:url(/webResources/images/global/nav-currentaccounts-active.gif) no-repeat center left !important; padding-left:18px } a.digitaltv-nav { background:url(/webResources/images/global/nav-dtv.gif) no-repeat center left !important; padding-left:18px } a:hover.digitaltv-nav { background:url(/webResources/images/global/nav-dtv-active.gif) no-repeat center left !important; padding-left:18px } a.directory-nav { background:url(/webResources/images/global/nav-directory.gif) no-repeat center left !important; padding-left:18px } a:hover.directory-nav { background:url(/webResources/images/global/nav-directory-active.gif) no-repeat center left !important; padding-left:18px } a.heatingcover-nav { background:url(/webResources/images/global/nav-heatingcover.gif) no-repeat center left !important; padding-left:18px } a:hover.heatingcover-nav { background:url(/webResources/images/global/nav-heatingcover-active.gif) no-repeat center left !important; padding-left:18px } a.homephone-nav { background:url(/webResources/images/global/nav-homephone.gif) no-repeat center left !important; padding-left:18px } a:hover.homephone-nav { background:url(/webResources/images/global/nav-homephone-active.gif) no-repeat center left !important; padding-left:18px } a.loans-nav { background:url(/webResources/images/global/nav-loans.gif) no-repeat center left !important; padding-left:18px } a:hover.loans-nav { background:url(/webResources/images/global/nav-loans-active.gif) no-repeat center left !important; padding-left:18px } a.marketnews-nav { background:url(/webResources/images/global/nav-marketnews.gif) no-repeat center left !important; padding-left:18px } a:hover.marketnews-nav { background:url(/webResources/images/global/nav-marketnews-active.gif) no-repeat center left !important; padding-left:18px } a.water-nav { background:url(/webResources/images/global/nav-water.gif) no-repeat center left !important; padding-left:18px } a:hover.water-nav { background:url(/webResources/images/global/nav-water-active.gif) no-repeat center left !important; padding-left:18px } a.energy-nav { background:url(/webResources/images/global/nav-energy.gif) no-repeat center left !important; padding-left:18px } a:hover.energy-nav { background:url(/webResources/images/global/nav-energy-active.gif) no-repeat center left !important; padding-left:18px } a.mobiles-nav { background:url(/webResources/images/global/nav-mobiles.gif) no-repeat center left !important; padding-left:18px } a:hover.mobiles-nav { background:url(/webResources/images/global/nav-mobiles-active.gif) no-repeat center left !important; padding-left:18px } a.debtadvicecentre-nav { background:url(/webResources/images/global/nav-debtcentre.gif) no-repeat center left !important; padding-left:18px } a:hover.debtadvicecentre-nav { background:url(/webResources/images/global/nav-debtcentre-active.gif) no-repeat center left !important; padding-left:18px } a.carinsurance-nav { background:url(/webResources/images/global/nav-carinsurance.gif) no-repeat center left !important; padding-left:18px } a:hover.carinsurance-nav { background:url(/webResources/images/global/nav-carinsurance-active.gif) no-repeat center left !important; padding-left:18px } a.mortgages-nav { background:url(/webResources/images/global/nav-mortgages.gif) no-repeat center left !important; padding-left:18px } a:hover.mortgages-nav { background:url(/webResources/images/global/nav-mortgages-active.gif) no-repeat center left !important; padding-left:18px } a.homeinsurance-nav { background:url(/webResources/images/global/nav-homeinsurance.gif) no-repeat center left !important; padding-left:18px } a:hover.homeinsurance-nav { background:url(/webResources/images/global/nav-homeinsurance-active.gif) no-repeat center left !important; padding-left:18px } a.lifeinsurance-nav { background:url(/webResources/images/global/nav-lifeinsurance.gif) no-repeat center left !important; padding-left:18px } a:hover.lifeinsurance-nav { background:url(/webResources/images/global/nav-lifeinsurance-active.gif) no-repeat center left !important; padding-left:18px } a.travelinsurance-nav { background:url(/webResources/images/global/nav-travelinsurance.gif) no-repeat center left !important; padding-left:18px } a:hover.travelinsurance-nav { background:url(/webResources/images/global/nav-travelinsurance-active.gif) no-repeat center left !important; padding-left:18px } a.creditreportcentre-nav { background:url(/webResources/images/global/nav-debtcentre.gif) no-repeat center left !important; padding-left:18px } a:hover.creditreportcentre-nav { background:url(/webResources/images/global/nav-debtcentre-active.gif) no-repeat center left !important; padding-left:18px } a.moneysaving-nav { background:url(/webResources/images/global/nav-moneysaving.gif) no-repeat center left !important; padding-left:18px } a:hover.moneysaving-nav { background:url(/webResources/images/global/nav-moneysaving-active.gif) no-repeat center left !important; padding-left:18px } a.savings-nav { background:url(/webResources/images/global/nav-savings.gif) no-repeat center left !important; padding-left:18px } a:hover.savings-nav { background:url(/webResources/images/global/nav-savings-active.gif) no-repeat center left !important; padding-left:18px } /* Channel dark/main text color */ .uswitch-color, a.uswitch-color:link, a.uswitch-color:visited { color:#039; } .broadband-color, a.broadband-color:link, a.broadband-color:visited { color:#416F58 !important; } .bundles-color, a.bundles-color:link, a.bundles-color:visited { color:#416F58 !important; } .creditcards-color, a.creditcards-color:link, a.creditcards-color:visited { color:#586923 !important; } .currentaccounts-color, a.currentaccounts-color:link, a.currentaccounts-color:visited { color:#77733C !important; } .digitaltv-color, a.digitaltv-color:link, a.digitaltv-color:visited { color:#415690 !important; } .directory-color a.directory-color:link, a.directory-color:visited { color:#8A9BAE !important; } .energy-color, a.energy-color:link, a.energy-color:visited { color:#736E41 !important; } .heatingcover-color, a.heatingcover-color:link, a.heatingcover-color:visited { color:#702150 !important; } .homephone-color, a.homephone-color:link, a.homephone-color:visited { color:#3D8399 !important; } .loans-color, a.loans-color:link, a.loans-color:visited { color:#9D2C70 !important; } .marketnews-color a.marketnews-color:link, a.marketnews-color:visited { color:#516E79 !important; } .water-color, a.water-color:link, a.water-color:visited { color:#317986 !important; } .mobiles-color, a.mobiles-color:link, a.mobiles-color:visited { color:#2D635B !important; } .debtadvicecentre-color, a.debtadvicecentre-color:link, a.debtadvicecentre-color:visited { color:#322D17 !important; } .carinsurance-color, a.carinsurance-color:link, a.carinsurance-color:visited { color:#543A7B !important; } .mortgages-color, a.mortgages-color:link, a.mortgages-color:visited { color:#94A135 !important; } .homeinsurance-color, a.homeinsurance-color:link, a.homeinsurance-color:visited { color:#891010 !important; } .lifeinsurance-color, a.lifeinsurance-color:link, a.lifeinsurance-color:visited { color:#1D551D !important; } .travelinsurance-color, a.travelinsurance-color:link, a.travelinsurance-color:visited { color:#C64006 !important; } .creditreportcentre-color, a.creditreportcentre-color:link, a.creditreportcentre-color:visited { color:#322D17 !important; } .moneysaving-color, a.creditreportcentre-color:link, a.creditreportcentre-color:visited { color:#322D17 !important; } .travelinsurance-color, a.travelinsurance-color:link, a.travelinsurance-color:visited { color:#C64006 !important; } .savings-color, a.savings-color:link, a.savings-color:visited { color:#76B83E !important; } /* Hilite main */ /* CORPORATE - default colors! --------- */ /* :TODO are these CORPORATE COLORS out of date?!? check and delete if necessary 11/08/2006 JR re-uncommented (new word) these SB 16/8/6 */ /* Text*/ #us-header div,#us-milk-header div,#us-footer div,#us-nav div,#us-main div,#us-more div, #us-header table,#us-footer table,#us-nav table,#us-main table,#us-more table { color:#515B67; } /* header & footer links, h1 & h2*/ #us-header a,#us-header a:link,#us-header a:visited,#us-milk-header a,#us-milk-header a:link,#us-milk-header a:visited,#us-footer a,#us-footer a:link,#us-footer a:visited #us-header h1,#us-header h2,#us-milk-header h1,#us-milk-header h2,#us-main h1,#us-main h2 { color:#039; } /* header-bar & box*/ #us-header #header-bar { background-color:#039; } /* 7.'GLOBAL ========= */ /* COMPONENTS ---------- */ .reverse-color { color:#FFF !important; } .us-intro { color:#515B67 !important; } .us-highlight { color:#900 !important; font-weight:bold !important; } /* Warning, highlighting, errors etc. */ .us-warning, .us-warning p, .us-warning ul, .us-warning ol, .us-warning h5 { color:#cc0000 !important; font-weight:bold !important; font-style:normal !important; } #us-main .us-warning h5 { padding-left:6px; } /* clearfix -- named .us-clearfix to avoid any conflicts with partner css */ /*.us-clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html .us-clearfix { height:1%; } /* :INFO SB 06/11/2006 Old clearfix is above, this was modified for ie7 below to fix #9171 */ .us-clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .us-clearfix {display: inline-block;} /* Holly Hack Targets IE Win only \*/ * html .us-clearfix {height: 1%;} .us-clearfix {display: block;} /* End Holly Hack */ .us-clear { clear:both !important; } /* named us-clear to avoid cs s conflicts */ .floatleft { float:left !important; } .floatright { float:right !important; } .textaligncenter { text-align:center !important; } .textalignleft { text-align:left !important; } .us-normal { font-weight:normal !important; } .us-bold { font-weight:bold !important; } .us-italic { font-style:italic !important; } /* demand made to make specific elements italic where em cannot be added */ /* There are several instances where the content of TextSections needs to be displayed in columns. To this end, I've added a TextSectionColumn class. If TextSection.HasColumns = true, it will accept these as children, which can in turn contain Paragraphs, Lists, etc. */ .us-textsectioncol { width:45%; } .us-text2column { width:49%; } /* RL 13/12/2006 :INFO used in directory - allows for 10px gutter*/ .reverse-background { background:#FFF !important } .us-hide { display:none; color:#039; } /* :FLAG substitu te color dark */ .us-fontweightnormal { font-weight: normal !important; } /* :TODO this is designed to hide text from screen readers, specifically the th headers content, where there's the text compare which you don't want being read out. test this later*/ /* FOR RELEASE 11 */ .us-tableoutput, .tablewide { width:100% !important; } .width100 li fieldset { width:100% !important; float:left; } .width100 .checkboxlist { float:left; background:red; } /*for market news */ #us-main .us-newscategory {display:none} /* PL issue 8002: HACK */ @media all and (min-width:0px) { head~body #us-main table.us-confirmtable th { vertical-align:top; padding:6px; text-align:left;} } /*tab corners*/ #us-main div.us-tab-bar .us-tab .rtop, #us-main .us-tab-bar .us-tab .rbottom {display:block} #us-main div.us-tab-bar .us-tab .rtop *, #us-main div.us-tab-bar .us-tab .rbottom * {display: block; height: 1px; overflow: hidden; } #us-main .us-tab-bar .us-tab .rtop { background-color:White; } #us-main div.us-tab-bar .us-tab .r1{margin: 0 5px} #us-main div.us-tab-bar .us-tab .r2{margin: 0 3px} #us-main div.us-tab-bar .us-tab .r3{margin: 0 2px} #us-main div.us-tab-bar .us-tab .r4{margin: 0 1px; height: 2px} #us-main div.us-tab-bar-negativemargin { margin-bottom: -20px; } #us-main div.us-tab-bar a { display:block !important} /*tabs*/ #us-main div.us-tab-bar { border-bottom-width: 3px; border-bottom-style:solid; } #us-main #us-content div.us-tab-bar ul, #us-main #us-content div.us-tab-bar ul li { margin-left:0px; padding-left:0px !important; margin-bottom:0px; } #us-main div.us-tab-bar li { height:35px !important; display:block; float:left; margin-right: 4px; margin-top:9px; line-height:auto !important; margin-bottom:5px; color:#FFF; background-color:#039; } /* :FLAG subsitute color mid - partner is dark */ #us-main .tabsmall li { width:10em; } #us-main .tabmedium li { width:14em; } #us-main .tablarge li { width:18em; } #us-main div.us-tab-bar input { float:none; cursor:pointer; color:#039; background:none; border:none; border-bottom:1px solid #039; margin:0; /* Button width hack */ padding:0; width:auto; overflow:visible; margin-top:0 !important; } /* :FLAG substitute color dark */ #us-main div.us-tab-bar input.fauxlink { font-size:1.0em; font-weight:bold ;float:none; cursor:pointer; color:#039; background:none; border:none; border-bottom:1px solid transparent !important; _border-bottom:0px solid #039 !important; margin:0; /* Button width hack */ padding:0; width:auto; overflow:visible; margin-left:3px !important; _margin-left:4px !important; margin-top:0px !important} /* :FLAG substitute color dark */ #us-main div.us-tab-bar input.fauxlink:hover { color:#039; border-bottom:1px solid #039 !important; } /* Make button look like hover link */ /* :FLAG persistent color */ #us-main .us-tab-bar a {display:block; text-decoration:underline; font-weight:bold; padding-left:7px !important; padding-right:3px !important; } #us-main .us-tab-bar a:hover { text-decoration:underline; } #us-main div.us-tab-bar a {text-decoration:none; font-weight:bold; } #us-main .us-tab-bar a.us-hide { display:none; } .us-tab-javascriptenabled #us-main .us-tab-bar a.us-hide { display:inline; } /*selectedTab*/ #us-main .us-tab-bar li.us-tabselected a { color:#fff !important; text-decoration:none !important; } #us-main div.us-tab-bar li.us-tabselected input.fauxlink:hover, #us-main .us-tab-bar li.us-tabselected input { color:White !important; border-bottom:0px solid white !important; } #us-main .us-tab-bar {text-align:center;} /*----NEW PANELS CONTROL------*/ /*Panels*/ #us-main #us-content .us-panelgroup { } #us-main #us-content .us-panelwidth-100percent .us-panelitem-container { width:auto; } #us-main #us-content .us-panelwidth-50percent .us-panelitem-container { width:50%; } #us-main #us-content .us-panelwidth-33percent .us-panelitem-container { width:33.33%; } #us-main #us-content .us-panelwidth-50percent .panelheader { width:50%; float:left; } #us-main #us-content .us-panelwidth-50percent .panelheader h3 { margin-right:7px !important; clear:none; margin-left:0px; margin-right:0px; } #us-main #us-content .us-panelwidth-50percent .panelheader h3.last { margin-right:0px !important; } #us-main #us-content .us-panelitem img { padding:5px; } #us-main #us-content .us-panelitem-container { float:left; padding-top:5px; } #us-main #us-content .us-panelitem-last .us-panelitem { margin-right:0px; } #us-main #us-content .us-panelitem { margin-right:7px;height:200px; } /* FF fix for CAMP */ #us-main #us-content .us-panelitem.autoheight { margin-right:7px; min-height:230px; height:auto;} /* IE6 fix for CAMP */ *html #us-main #us-content .us-panelitem.autoheight { margin-right:7px; height:230px;} #us-main #us-content .us-panelitem h4 { margin-bottom:3px; } #us-main #us-content .us-panelitem p { padding-left:7px; padding-right:7px; } #us-main #us-content .us-panelitem label { float:none; display:block; margin:2px 7px 0px 7px; } #us-main #us-content .us-panelitem select { float:none; display:block; width: 92%; margin-bottom:9px; margin-right:3.5%; margin-left:4%; } #us-main #us-content .us-panelitem input.us-button { margin-right:7px; margin-left:7px; } #us-main #us-content .us-panelitem { background-position:bottom; background-repeat:no-repeat; } #us-main #us-content .us-panelwidth-50percent .us-panelitem select { width: 170px; margin-left:7px; margin-right:7px; } /* A messy solution to force a paragraph to the bottom of a page on referral.aspx - check with Mark Holdsworth to see if still required */ .CI-TopSpace { margin-top:485px !important; } /*----------------------------------------------*/ /* Safari hack testing for issue 5836 */ .safwidth { [width:inherit; width:50px;]width:inherit; } /* GS for alignment of vertical checkboxes. Fixed cross browser issue */ .checkboxvertical { width:400px !important; _width:729px !important; } .checkboxvertical label { _margin-right:-6px !important; } .checkboxvertical fieldset { floatleft; margin-right:-240px !important; } .checkboxvertical ul { list-style-type:none; } .checkboxvertical ul li { clear:both; style-type:none; } .checkboxvertical .checkboxlist { clear:both; float:left; } .checkboxvertical fieldset fieldset { width:385px !important; } /* us-box that sits outside title area; located near bottom of content */ .bottombox { clear:both !important; float:left !important; } .bottombox h3 { margin-top:0px !important; } /* us-spec to be used for mobiles but not specifically. Note: this is for POPUPS Warning: Colours have not been added to channel xsl */ /* us-spec to be used for mobiles but not specifically. Note: this is for POPUPS Warning: Colours have not been added to channel xsl */ body #us-spec { width:688px; padding:0px; float:left; clear:both; margin-bottom:10px; } body #us-spec .us-spec-holder{min-height:312px; height:1%; background: #E6F1E7 url(/DesignPrototype/WebResources/Images/specific/mobiles/us-spec-bg.gif) top left repeat-y;} body #us-spec h3 { font-size:0.7em; } body #us-spec h3 a { margin:-18px 5px 0 0 !important; text-decoration:none; } body #us-spec .us-spec-left { border:1px solid #c0c0c0; width:188px; height:auto; padding:40px 16px 38px 30px; margin:4px 4px 4px 0; float:left;} body #us-spec .us-spec-right { background-color:#E6F1E7; width:440px; min-height:306px; height:auto; padding:0px; margin: 4px 0 4px 0; float:right; } body #us-spec .us-spec-right h3 { margin:0 !important; font-size:0.7em; } body #us-spec .us-spec-right p.moddesc { background:#E6F1E7; font-weight:bold; padding:14px 20px 16px 13px !important; width:274px; float:right; } body #us-spec .us-spec-right .us-specicon { width:110px; float:left; margin-top:2px; background-color:#fff;} body #us-spec .us-spec-right .us-specicon img { margin-right:4px; float:left; } body #us-spec .us-spec-right .us-specicon p { margin-top:10px; font-weight:bold; font-size:0.7em } body #us-main #us-spec .us-spec-right div.us-tab-bar { margin-bottom:2px; background-color:#fff; } body #us-main #us-spec .us-spec-right div.us-tab-bar ul {border:0px solid red;} body #us-main #us-spec .us-spec-right div.us-tab-bar li a { font-size:0.8em !important; } body #us-main #us-spec .us-spec-right div.us-tab-bar li { height:20px !important; width:8em; } body #us-main .us-spec-a { float:left; width:1px; height:307px; } body #us-main .us-spec-b { background-color:#fff; padding: 3px 1px 0 0; } body #us-main .us-spec-c { background-color:#fff; padding: 5px 0px 5px 0; height:1%; } body #us-main .us-spec-d { background-color:#fff; } body #us-main .us-spec-da { background-color:#E6F1E7; overflow: auto; height:100px } /* Touch Clarity to the max */ #us-milk-title-box-tc .us-tc-details, #us-milk-title-box-tc .us-tc-details img, #us-milk-title-box-tc .us-tc-details h2, us-milk-title-box-tc .us-tc-details { margin:0; padding:0; } #us-milk-title-box-tc .us-tc-details { width:742px; height:152px; clear:both; float:left; background:#fff; } #us-milk-title-box-tc .us-tc-details.short { width:580px; _width:558px; } #us-milk-title-box-tc .us-tc-details p, #us-milk-title-box-tc .us-tc-details h2 { color:#c0c0c0; width:auto; } #us-milk-title-box-tc .us-tc-details.short p, #us-milk-title-box-tc .us-tc-details.short h2 { color:#c0c0c0; width:330px; float:left; } #us-milk-title-box-tc .us-tc-details img { float:left; width:213px; height:152px; padding-right:33px; } #us-milk-title-box-tc .us-tc-details.short img { padding-right:13px; } #us-milk-title-box-tc .us-tc-details h2 { margin:33px 0 10px; 0; font-size:20px; } /* Touch Clarity to the max colours */ #us-milk-title-box-tc .energy, #us-milk-title-box-tc .us-tc-details.energy p, #us-milk-title-box-tc .us-tc-details.energy h2 { color:#423f28; background:#D4CEA7; } #us-milk-title-box-tc .currentaccounts, #us-milk-title-box-tc .us-tc-details.currentaccounts p, #us-milk-title-box-tc .us-tc-details.currentaccounts h2 { color:#7C7852; background:#EDE5D2; } #us-milk-title-box-tc .homephone, #us-milk-title-box-tc .us-tc-details.homephone p, #us-milk-title-box-tc .us-tc-details.homephone h2 { color:#416770; background:#B6D3DB; } #us-milk-title-box-tc .loans, #us-milk-title-box-tc .us-tc-details.loans p, #us-milk-title-box-tc .us-tc-details.loans h2 { color:#A4698D; background:#ECD8E3; } #us-milk-title-box-tc .creditcards, #us-milk-title-box-tc .us-tc-details.creditcards p, #us-milk-title-box-tc .us-tc-details.creditcards h2 { color:#767A61; background:#CFD8AB; } #us-milk-title-box-tc .broadband, #us-milk-title-box-tc .us-tc-details.broadband p, #us-milk-title-box-tc .us-tc-details.broadband h2 { color:#446556; background:#C9DBCB; } /* skip nav */ .us-skip ul { background:#000; padding: 0;margin: 0;list-style: none; } .us-skip li { padding: 0;margin: 0;list-style: none;display: inline; } .us-skip a { font-size:0.8em !important; color: #000;position: absolute;top:2px;left:860px;overflow:hidden;height:0; } .us-skip a:active, .us-skip a:focus { position: absolute; overflow: visible;width: auto;height: auto;border: 0;margin: 0;padding: 3px;font-size:0.6em; background: #ff9; width: 220px; } .us-skip a:hover { background: #ff0; } /* UI Testing: we're developing some warning with coloured backgrounds */ .us-warning-bg p { background:#fcc !important; display:inline; border:2px solid #fcc !important; } /* issue 6126; output-condtions colour. This needs moving to energy css - see Grahame Hack */ .us-output-conditions-red { color:#CC0000 !important } /* added on request by Simon Gibbs */ .nobold { font-weight:normal !important; } body #us-main .width35 { width:33px; _width:30px; } /* Cobrand section title */ #us-milk-title-box #us-cobrand-title { clear:both; margin-bottom:10px !important; } #us-milk-title-box #us-cobrand-title img { float:left; /*height:auto; comment by C.Blunden 22/8/07 R26 */ } #us-milk-title-box #us-cobrand-title img.us-header-icon { margin:0 5px; } #us-milk-title-box #us-cobrand-title .us-cobrand-title-left { float:left; } #us-milk-title-box #us-cobrand-title .us-cobrand-title-left img.first { background:#fff; padding-right:10px; } #us-milk-title-box #us-cobrand-title .us-icon-small { margin-top:8px; } #us-milk-title-box #us-cobrand-title .us-box { background:#fff; } #us-milk-title-box #us-cobrand-title h2 { margin-top:10px; } #us-milk-title-box #us-cobrand-title .us-poweredby { float:right; margin-top:7px; text-align:right; } #us-milk-title-box #us-cobrand-title { float:left; height:auto; width:100%; padding:0; margin:0; } #us-milk-title-box #us-cobrand-title .us-line { border-bottom:3px solid #5F7286; width:auto; line-height:42px; } #us-milk-title-box #us-cobrand-title .us-cobrand-content { height:auto; width:auto; margin:-66px 0 0 157px; _width:83%; _margin-left:78px; float:left; } #us-milk-title-box #us-cobrand-title .us-cobrand-content-right { margin:5px 0 0 0px; padding:4px 6px; width:120px; float:right; background:#e8ebed; font-size:0.85em; line-height:17px; } #us-milk-title-box #us-cobrand-title .us-cobrand-content-left { margin:5px 0 0 0px; width:79%; } #us-milk-title-box #us-cobrand-title .us-box-mask { float:right; background:#fff; height:70px; } /* GS: 26/03/07: IE7 Hack .us-cobrand-content */ /* applied to all browsers */ #us-milk-title-box #us-cobrand-title .us-cobrand-content { height:auto; width:83%; margin:-66px 0 0 155px; _width:83%; _margin-left:78px; } /* applied to all browsers except for IE and Safari */ *:lang(en) #us-milk-title-box #us-cobrand-title .us-cobrand-content { height:auto; width:auto; margin:-66px 0 0 157px; _width:83%; _margin-left:78px; float:left; } /* applied to Safari */ #us-milk-title-box #us-cobrand-title .us-cobrand-content:empty{ height:auto; width:auto; margin:-66px 0 0 157px; _width:83%; _margin-left:78px; float:left; } /*'CUSTOMER SERVICE 2: GS a variation of the original ---------------- Customer Service in #us-main */ #us-main div.customerserv2 { clear:both; margin:0; } /* :FLAG substitute color main */ #us-main div.customerserv2 div{ background-color:#039; padding:4px 6px 4px 6px; text-align:right; margin:0;} /* :FLAG substitute color main */ /* :INFO PC 18/07/06 customer service box padding amendment */ #us-main div.customerserv2 h3 { float:left; line-height:100%; text-transform:none; color:#FFF; background:none; padding:0; margin:0 0 0 0.3em;} #us-main div.customerserv2 p { color:#FFF; padding:0; margin:0; line-height:100%;} #us-main div.customerserv2 span { font-size:small; font-weight:bold; margin:0; padding:0; } #us-main div.customerserv2 br { display:none; } /* Rating */ .ratingStar { font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat;} .filledRatingStar { background-image: url(../Images/ajax/FilledStar.gif); } .emptyRatingStar { background-image: url(../Images/ajax/EmptyStar.gif); } .savedRatingStar { background-image: url(../Images/ajax/EmptyRed.gif); } .filledRatingCircle { background-image: url(../Images/ajax/FilledCircle.gif); } .emptyRatingCircle { background-image: url(../Images/ajax/EmptyCircle.gif); } .savedRatingCircle { background-image: url(../Images/ajax/SavedCircle.gif);} /* Rate it */ #us-content #us-rate-container { width:100%; margin:5px 0; clear:both; } #us-content .us-rate { float:left; height:auto; min-height:40px; width:19.2em; padding:7px 7px 4px 7px; background:#f1f1f1; overflow:auto; border:1px solid #666; font-weight:bold; font-size:0.75em; } #us-content .us-rate .us-rate-avg { width:186px; height:20px; float:left; background:#D7D7D7 url(../Images/ajax/rateit_left_2.gif) left top no-repeat; } #us-content .us-rate .us-rate-avg p { color:#036; float:left; margin:2px 0 0 3px; padding-left:13px; width:auto; _width:auto; } #us-content .us-rate .us-rate-avg img, #us-content .us-rate .us-rate-avg input { float:left; } #us-content .us-rate .us-rate-avg span.emptyRatingStar { margin-top:2px; background:#D7D7D7 url(../Images/ajax/EmptyStar.gif) no-repeat; width:16px; height:16px;} #us-content .us-rate .us-rate-avg span.filledRatingStar { margin-top:2px; background:#D7D7D7 url(../Images/ajax/FilledStar.gif) no-repeat; width:16px; height:16px;} #us-content .us-rate .us-rate-avg span.savedRatingStar { margin-top:2px; background:#D7D7D7 url(../Images/ajax/EmptyRed.gif) no-repeat; width:16px; height:16px;} #us-content .us-rate p a { margin: 5px 0 0 -2px; float:right; } #us-content .us-rate p { float:left; margin-top:5px !important; } #us-content .us-rate .us-rate-avg span.last { float:right; height:20px; width:11px; background:#D7D7D7 url(../Images/ajax/rateit_right_2.gif) right top no-repeat; } #us-content .us-rate span input { float:left; margin-top:4px !important; } /* Paging lego - MB updated R17 */ #us-content .us-paginglinks { float:right; width:26em; text-align:right} #us-content .us-paginglinks p a, #us-content .us-paginglinks p { float:left; } #us-content .us-paginglinks li { display:inline;} #us-content .p200 { width: 242px; text-align:right; margin:0px !important; padding:0px !important; } #us-content .p200 p, #us-content .p200 a{ margin:0px !important; padding:0px !important; } /* G Slinn R14 */ .us-box input { margin:5px; background:#c0c0c0 !important } .us-box input.input-bg { width:100px; background:#fff !important } /* M Barrett R15 - Scalable header on cobrands 28/03/2007 */ /* Scalable partner headers as per MB 21/08/07*/ #us-milk-title-box #us-cobrand-title { color:#5f7286;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;width:100%; height:auto; } #us-milk-title-box #us-cobrand-title p, #us-milk-title-box #us-cobrand-title h2{ color:#5f7286; } #us-milk-title-box #us-cobrand-title img{ float:left;margin-bottom:10px;z-index:1000;display:block; } #us-milk-title-box #us-cobrand-title .us-cobrand-space{ z-index:1;float:left;background-color:#fff;width:1px;min-height:100px; margin-left:5px} #us-milk-title-box #us-cobrand-title .us-title-wrap{ margin:0px 0px 0px 0px;padding:0px 0px 0px 0px; display:table;} */ #us-milk-title-box #us-cobrand-title .us-title-wrap{ *float:left;} #us-milk-title-box #us-cobrand-title .setwidth { width:100% !important } #us-milk-title-box #us-cobrand-title .us-title-head{ width:100%;height:52px;background:url('/WebResources/Images/poweredby_back.gif') right repeat-y;margin:0px;padding:0px; } #us-milk-title-box #us-cobrand-title img.small-icon{ float:left;margin:9px 0px 0px 5px; } #us-milk-title-box #us-cobrand-title h2.text-icon{ float:left;margin:0px 0px 0px 7px;padding:0px 0px 0px 0px; display:block;margin-top:12px !important} #us-milk-title-box #us-cobrand-title .powered-by{ float:right;margin:0px !important; text-align:right; } #us-milk-title-box #us-cobrand-title .powered-by p{ margin:12px 55px 0px 0px;padding:0px;*margin-top:11px;} #us-milk-title-box #us-cobrand-title .nologo { background:url('/WebResources/Images/poweredby_back_no_logo.gif') right repeat-y !important } #us-milk-title-box #us-cobrand-title .nologo .powered-by p{ margin-right:0px;} #us-milk-title-box #us-cobrand-title .any-questions-border {display:table;border-bottom:1px solid #5F7286;padding:3px 3px 2px 3px; width:100%;margin:0px; } #us-milk-title-box #us-cobrand-title .any-questions-border {*padding:3px;} #us-milk-title-box #us-cobrand-title .any-questions-border {*clear:both!important;} #us-milk-title-box #us-cobrand-title .any-questions-border {*float:none!important;} #us-milk-title-box #us-cobrand-title .any-questions{ float:right;width:99.5%; margin:0px;padding:1px 4px 0px 0px;text-align:left; } #us-milk-title-box #us-cobrand-title .any-questions{*float:none;} #us-milk-title-box #us-cobrand-title .any-questions{*width:100%;} .any-questions p {color:#5F7286 !important; text-align:right; } .any-questions p span { font-size:125%!important;font-weight:bold;} #us-milk-title-box #us-cobrand-title .any-text{ margin:5px 0px 10px 0px; } @media all and (min-width: 0px){#us-milk-title-box { font-size:85%; }} @media all and (min-width: 0px){#us-milk-title-box #us-cobrand-title .any-questions { width:100%;margin:0px 4px 1px 0px }} #us-milk-title-box #us-cobrand-title h2.text-icon, x:-moz-any-link { margin-top:10px !important;*margin-top:7px; } /*\*/ *html*#us-milk-title-box { font-size:50%; } *html*#us-milk-title-box {*font-size:100%} html*#us-milk-title-box #us-cobrand-title h2.text-icon { margin-top:8px!important;} html*#us-milk-title-box #us-cobrand-title h2.text-icon { *margin-top:11px;} html*#us-milk-title-box #us-cobrand-title .any-questions { width:99.5%;min-width:97%; } html*#us-milk-title-box #us-cobrand-title .any-questions-border { _width:97%; } #us-main a.popuplink .watergradient {background-image: url('/WebResources/Images/specific/Cam/waterGradient.gif') !important; background-color:#B3DDE0;} #us-main a.popuplink .broadbandgradient {background-image: url('/WebResources/Images/specific/Cam/broadbandGradient.gif') !important; background-color:#B9D9BA;} #us-main a.popuplink .carinsurancegradient {background-image: url('/WebResources/Images/specific/Cam/carinsuranceGradient.gif') !important; background-color:#BAB0C9;} #us-main a.popuplink .creditcardsgradient {background-image: url('/WebResources/Images/specific/Cam/creditcardsGradient.gif') !important; background-color:#C8D0AC;} #us-main a.popuplink .currentaccountsgradient {background-image: url('/WebResources/Images/specific/Cam/currentaccountsGradient.gif') !important; background-color:#D0CDA8;} #us-main a.popuplink .digitaltvgradient {background-image: url('/WebResources/Images/specific/Cam/digitaltvGradient.gif') !important; background-color:#C6CDDE;} #us-main a.popuplink .energygradient {background-image: url('/WebResources/Images/specific/Cam/energyGradient.gif') !important; background-color:#DFD5B4;} #us-main a.popuplink .heatingcovergradient {background-image: url('/WebResources/Images/specific/Cam/heatingGradient.gif') !important; background-color:#CEB2C3;} #us-main a.popuplink .homephonegradient {background-image: url('/WebResources/Images/specific/Cam/homephoneGradient.gif') !important; background-color:#BAD0DB;} #us-main a.popuplink .loansgradient {background-image: url('/WebResources/Images/specific/Cam/loansGradient.gif') !important; background-color:#D8ABC6;} #us-main a.popuplink .securedloansgradient {background-image: url('/WebResources/Images/specific/Cam/loansGradient.gif') !important; background-color:#D8ABC6;} #us-main a.popuplink .mobilesgradient {background-image: url('/WebResources/Images/specific/Cam/mobilephoneGradient.gif') !important; background-color:#ABC1BD;} #us-main a.popuplink .homeinsurancegradient {background-image: url('/WebResources/Images/specific/Cam/homeinsuranceGradient.gif') !important; background-color:#ABC1BD;} /* Password strength indicator */ #us-main .passwordStrengthIndicator{display:block;width:auto !important;} #us-main .indicatorContainer{clear:both;display:block;visibility:hidden;} #us-main .psLevel1{background-image:url('/WebResources/Images/Global/StrengthSection1.gif');background-repeat:no-repeat;background-position:bottom center;display:block;width:200px;height:25px;} #us-main .psLevel2{background-image:url('/WebResources/Images/Global/StrengthSection2.gif');background-repeat:no-repeat;background-position:bottom center;display:block;width:200px;height:25px;} #us-main .psLevel3{background-image:url('/WebResources/Images/Global/StrengthSection3.gif');background-repeat:no-repeat;background-position:bottom center;display:block;width:200px;height:25px;} /* lego pager Control styling */ #us-main .us-pager-controls ul li.first {width: 110px; border: none !important; } #us-main .us-pager-container {float:right;} #us-main .us-pager-controls ul li { display:inline; width:40px; height:20px; padding: 0px 5px 0px 5px} #us-main .us-pager-controls ul li { border-left: 1px solid black !important;} #us-main .us-pager-controls ul li input { float:none !important; } #us-main .us-pager-controls li.last {border-right: 0px !important; } /* R19 - MB added fix for button whitespace on competition.aspx */ #us-secondary input#ctl00_ctl00_secondaryColumnHolder_InnerCompetitionHolder_btnRegister_btnRegister_btn { *margin-top:-5px !important } /* Printing */ @media print { body { font-size:6pt !important; margin:0; padding: 0; border: 0; float: none !important; } #us-wrapper { width:100% !important; } .us-box { display:none; } #us-main table thead {display: table-header-group;} #us-header #header-bar, #us-main .touch_clarity_container { clear:left; float:none !important; } #us-main .us-title .titletext { width:100%; float:none; _width:70% } /* :INFO 24/11/06 RL #5059 to fix FF table truncation. floats inside header, clarity / section title div were the cause.. */ } /* ACSS */ @media speech { .silent { display:none; } } @media aural { .silent { display:none; } } .audible { margin:0 !important; width:1px; height:1px; overflow:hidden; position:absolute; left:-10000px; } /* Borrowed from wheel.co.uk "invisible semantic headers - using off left technique" :TODO test it! */ /* YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY GS 06 June 2007 NOTICE: DO NOT ADD CSS BEYOND HERE. RULES UNDERNEATH ARE SCHEDULED TO BE MOVED TO ANOTHER STYLE SHEET. YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX CAM XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* Opera fix for CAM */ @media screen and (min-width: 0px) {#us-header .myAccount a {float:right}} /* CAM boxed table layout. GS */ #us-main .us-tableSearches { margin-top:3px; width:100%!important;} #us-main .us-tableSearches tbody tr td { padding:5px; border-bottom:1px solid #636F7E !important; } #us-main .us-tableSearches tbody tr.lastrow td { border-bottom:1px solid #000 !important; } #us-main .us-tableSearches tbody tr.firstrow h3 { margin-top:0px !important; font-size:1em; margin:0 -5px -6px -5px; border-top:1px solid #000 !important; border-right:1px solid #000 !important; border-left:1px solid #000 !important; } #us-main .us-tableSearches tbody tr td span, #us-main .us-tableoutput tbody tr td span { text-align:left; float:left; width:auto; } #us-main .us-tableSearches tbody tr td.firstcol span { text-align:center; width:100%; } #us-main .us-tableSearches tbody tr td span a { font-weight:bold; } #us-main .us-tableSearches tbody tr td a { text-align:left; } #us-main .us-tableSearches tbody tr td.lastcol a { text-align:left; float:left; clear:both } #us-main .us-tableSearches tbody td.firstcol { border-left:1px solid #000; width:120px;} #us-main .us-tableSearches tbody td.lastcol { border-right:1px solid #000; width:140px; } .us-tableSearches thead th {padding:3px 4px 4px 8px; border-right:1px solid #FFF; border-bottom:7px solid #FFF; background-color:#039; color:#FFF; vertical-align:top; } /* CAM Search summary popup */ #us-main a.popuplink:hover {position:relative;} #us-main a.popuplink:hover{text-decoration:none !important; clear:both;} #us-main a.popuplink div.searchSummary{display:none;clear:both;position:absolute;} #us-main a.popuplink:hover div.searchSummary{clear:both;display:block;bottom:20px; left:0px;} #us-main a.popuplink {font-weight:100 !important} #us-main .searchSummary{width:400px;border:1px solid #555;padding:5px;margin:0px;background:#999 url('/WebResources/Images/Global/gradient.gif') repeat-x top left;} #us-main .searchSummaryImage{padding:0px;margin:0px;width:50px;float:left;text-align:center;} #us-main .searchSummaryText{padding:0px;margin:0px;width:330px;float:left;} #us-main .searchSummaryLine{margin:0 0 5px 0;font:10pt Verdana;color:#444;} #us-main .searchSummaryHeader{font:bold 11pt Verdana;margin:0 0 5px 0;color:#444;} /* CAM Alert summary popup */ #us-main .alertSummary{width:320px;border:1px solid #555;padding:5px;margin:0px;background:#999 url('/WebResources/Images/Global/gradient.gif') repeat-x top left;} #us-main a.popuplink div.alertSummary{display:none;clear:both;position:absolute; right:-100px} #us-main a.popuplink:hover div.alertSummary{clear:both;display:block;bottom:20px;} #us-main .alertSummaryText{padding:0px;margin:0px;width:250px;float:left;} /* CAM - wider dropdown for Security questions on registration page */ #us-main #us-content .squestions select {width:auto;} /* CAM - Added by MB to fix issue with boxes overflowing past image on sign up page */ .us-panelitem-last div {width: 100% !important } .us-panelitem-last fieldset { padding-right:2px !important } /* 20 - RB styling for Expired text */ #us-main .us-tableSearches .camExpiredText p {float:left} #us-main .us-tableSearches .camExpiredText a {clear:none !important; margin-left: 15px} /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX CAR INSURANCE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* Car Insurance - MB fixed an issue with spacing on terms and conditons */ #Anthem_ctl00_ctl00_mainHolder_MI_mainHolder_ctlSaveSearchLower_SaveSearchButton_SaveSearchButton_btn__ input { padding:0px 0px 0px 0px!important; margin:0px 0px 20px 0px!important; *margin:0px 0px 10px 0px !important; } /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX DTV XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* R19 - MB added fix for button whitespace on competition.aspx */ #us-secondary input#ctl00_ctl00_secondaryColumnHolder_InnerCompetitionHolder_btnRegister_btnRegister_btn { *margin-top:-5px !important } /* R19 - GS new text colours introduced for DTV table */ #us-main .us-color-red { color:#FF0000; } #us-main .us-color-amber { color:#FF9900; } #us-main .us-color-green { color:#669933; } /* MB - Makes a div float to the left */ #us-main .CitiesLeft { float:left; padding-right:100px} /*Styles for the header in the refine box*/ #us-main #us-content .us-refine-container .us-refine-header a { display:none; } #us-main #us-content .us-refine-container .us-refine-header input {/* display:none;*/ } #us-main #us-content .open .us-refine-header {padding-bottom:21px;} :root #us-main #us-content .open .us-refine-header {padding-bottom:20px;} #us-main #us-content .us-refine-header h4 { background:url(/gas-electricity/webresources/images/specific/energy/arrowdown-energy.gif) 4px 15% no-repeat; display:inline; padding: 0 15px 5px 30px; min-height: 24px;} #us-main #us-content .us-refine-header h4 input {float:none;} #us-main #us-content .us-refine-header h4 a {display:none;} #us-main #us-content .us-refine-header .us-refine-results {float:left;padding:2px 15px 6px 3px; cursor:pointer;} #us-main #us-content .us-refine-header ul { margin:0; padding:0 0 5px 0; list-style-type:none; text-align:right!important; } #us-main #us-content .us-refine-header ul li { cursor:pointer; display:inline; margin: 0; padding: 1px 15px 10px 35px; text-align:right!important; /*background:url(/energy/webresources/images/specific/energy/arrowdown-energy.gif) 6px 25% no-repeat;*/ } #us-main #us-content .us-refine-header ul li a { text-decoration:underline; font-weight:bold;} #us-main #us-content .us-refine-container .us-refine-body div.hide {display: none;} #us-main #us-content .us-refine-container .help-input { display:none; } #us-main #us-content div.open .help-input {display:block;width: auto!important; padding: 0;position:absolute; right:10px; border:0px solid red;} #us-main #us-content div.open .help-input p {width: auto!important;float:none;} #us-main #us-content .us-refine-header .us-refine-actions { width: auto; border:none; float:right; } #us-main #us-content div.selected h4 { background:url(/gas-electricity/webresources/images/specific/energy/arrowup-energy.gif) 4px 15% no-repeat; } body .us-javascriptenabled #us-main #us-content .us-refine-container .us-refine-header input { display:none; } body .us-javascriptenabled #us-main #us-content .us-refine-header h4 a { display:inline; } body .us-javascriptenabled #us-main #us-content .us-refine-header .us-refine-actions a { display:inline; } /* MB - R23 CSS to make h1 and h2 tags look the same on homepages as they have been reversed in the HTML */ #us-header h1.us-homepage-uswitchheader { margin-bottom:0px!important;margin-top:23px;*margin-top:0px!important;float:left;display:block;font-size:191%;padding:6px 0px 0px 5px !important;*padding:13px 0px 0px 5px !important;line-height:0em!important;*line-height:normal!important;} #us-nav #site-nav .channel-selected { line-height:1.7em !important } #us-main #us-content h2.us-homepage-pageheader { border-bottom-width:3px; border-bottom-style:solid; clear:both !important; display:block;line-height:1.3;padding-top:8px;font-size:167%; } /* MB - R23 fix to drop p tags underneath floated elements */ #us-main p.us-clearleft {clear:both} /* 20 - RB styling for Expired text */ #us-main .us-tableSearches .camExpiredText p {float:left} #us-main .us-tableSearches .camExpiredText a {clear:none !important; margin-left: 15px} /* LEGO MODAL EXTENDER - JH*/ .modalPopup {background-color:#fff !important; border:solid 2px #999 !important; padding:3px; width:600px; } .modalPopup fieldset.setwidth span { float:none !important; } /* Fix to span in the fieldset which was added via lego */ .modalPopup h3, .modalPopup fieldset { margin:10px !important; } .modalPopup fieldset { background:#fff !important; border:solid 1px #c0c0c0 !important; } .modalPopup fieldset fieldset { margin:0px !important; border:none!important; } .modalBackground {background-color:gray!important; opacity:0.6 ! important; filter: alpha(opacity=60) ! important; -moz-opacity: 0.60 ! important; } /* .modalPopup .radioline {height: 50px;} .modalPopup .radioline span {border:0px solid red; width:55px!important; float:left; position:relative;} .modalPopup .radioline label{position:absolute; top: 0; left:0;} */ .modalPopup .radioline input {margin: 20px 0 0 10px;} .modalPopup .setwidth fieldset.radioline label{display:block!important; float:left; padding:0!important; margin:30px 0 10px -18px!important;} .modalPopup .setwidth fieldset.radioline input {display:block!important; float:left; padding:0!important; margin:10px 0 5px 15px!important;} .modalPopup fieldset.us-modalPopup-sideBySideAlignment .input-row {float:left!important; width: 53%!important; border:0px solid blue!important;} .modalPopup fieldset.us-modalPopup-sideBySideAlignment select {margin:2px 0 0 0;} .modalPopup fieldset.us-modalPopup-submitButtons {padding-left: 450px!important;} .modalPopup fieldset.us-modalPopup-submitButtons span {margin-right: 8px;} /* Apply to controls you dont want to display when javascript is enabled */ .us-scriptenabled .noscript { display:none; } /* feed links for us-box */ .us-feedlinks { margin-top:5px !important; list-style-type:none; } #us-main #us-content .continuecolumnphonenumber { font-size:80%;text-align:center;clear:both;padding-top:12px;width:90px; } #us-main #us-content .continuecolumnphonenumber p { margin:0px;padding:0px; } #us-main #us-content .us-calltoactionbox { padding:5px 0px; border:solid 1px; } #us-main #us-content .us-calltoactionbox .fauxbutton { background:transparent url(/siteresources/themes/default/controls/categorystyleimporter/images/categories/utilities/medium-button.jpg) no-repeat !important; border-width:0px; font-weight:bold; width:140px; height:25px; margin-right:0px; margin-left:10px; padding:6px 6px 6px 10px;} #us-main #us-content .us-calltoactionbox p { } #us-main #us-content .us-scroll { overflow:auto; height:100px; background-color:#FFFFFF; border-left:solid 1px grey; border-top:solid 1px grey; } /* New CAM account box before login */ #us-more .cam-pane-login-top {display:block; clear:both;} #us-more .cam-pane-login-top p {font-weight:bold; } #us-more .cam-pane-login-top a {display:block; font-size:85%; padding:0px 0px 10px 5px; margin:0 10px 0px 0px; clear:right; width:150px; } #us-more .cam-pane-login-top span {margin-left:4px; font-size:85%; width:100px; } #us-more .cam-pane-login-top input.input-bg {width:145px; margin-top:2px; padding-top:2px; clear:right;} #us-more .cam-pane-login-top label{font-size:85%; clear:left; margin:0px; } #us-more .cam-pane-login-top label.floatleft {margin:0; padding:0; clear:both; } #us-more .cam-pane-login-top input.us-button {font-size: 85%; margin-top:2px; padding-top:0; clear:both; } #us-more .cam-pane-login-top div.margintop {margin:0; padding:0; clear:both;} #us-more .cam-pane-login-bottom {display:block; } #us-more .cam-pane-login-bottom p {clear:both; font-size:85%; margin:0px; padding:0px;} #us-more .cam-pane-login-bottom a {padding:0px 0px 0px 5px; font-size:100%; clear:both; margin:0px 0px 0px 0px;} #us-more .cam-global-pane div.cam-pane-login-bottom {clear:both; font-size:85%; padding-left:5px; line-height:1.4em;} .cam-pane-personalisation {font-size:85%; clear:both !important; margin:10px 0px 0px 5px !important; line-height:1.4em !important;} .cam-login-pane-register{margin:5px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;} input.cam-not-user{clear:both !important; border-bottom:solid 1px 0000ee !important; border:none !important; background-color:#ffffff !important; cursor:pointer !important; color:#0000EE !important; text-decoration:underline !important; } /*input.cam-not-user{background-color:red !important;}*/ /* New CAM account box after login state and roll over */ #us-wrapper #us-more a.cam-nav{ text-decoration:none; background:url(/webresources/images/global/cam_rounded_1.gif) no-repeat; height:16px; margin-left:0; display:block; padding:5px 2px 2px 25px; color:#ffffff; font-weight:bold; margin-bottom:0; cursor: pointer; } #us-wrapper #us-more a:hover.cam-nav{text-decoration:none; background:url(/webresources/images/global/cam_rounded_2.gif) no-repeat; height:16px; margin-bottom:0; margin-left:0; display:block; padding:5px 2px 2px 25px; color:#798CA2; font-weight:bold; cursor: pointer; } #us-wrapper #us-more .accordionHeaderSelected a.cam-nav { background:url(/webresources/images/global/cam_rounded_1_selected.gif) no-repeat; } #us-wrapper #us-more .accordionHeaderSelected a:hover.cam-nav { background:url(/webresources/images/global/cam_rounded_2_selected.gif) no-repeat; } #us-more .ul-cam-nav {padding-left:0px; margin-left:0px; clear:both; font-size:85% ;} #us-more .li-cam-nav {display:block;} #us-wrapper #us-more div .accordionContent {font-size:85%; line-height:1.4em; margin:0; padding-left:5px;} #us-wrapper #us-more .cam-accordion {display:none; } .us-scriptenabled #us-wrapper #us-more .cam-accordion { display:block; } #us-more .camWelcomeMessage {line-height:0em!important; padding-top:5px !important; padding-left:5px !important; clear:both !important;} #us-more .cam-noscriptl-link {font-size:85%; margin: 10px 5px;} /*.cam-save-searches-button { position:inherit!important; bottom:110px!important; }*/ #us-more .cam-view-all {padding-left:105px; } #us-more .cam-0-search {padding-bottom:64px; padding-top:5px;} #us-more .cam-1search-spacer {height:48px;} #us-more .cam-2search-spacer {height:16px;} .us-cgd-content h2.us-notbold {font-weight:normal !important;} /*Cam Header LoginBox css*/ #us-header .myAccountContainer .us-camloginbox-container { display:none; } #us-header .myAccountContainer { position:relative; display:block; text-align:right; z-index:1; } #us-header .myAccountContainer .myAccount { text-align:right; } #us-header .myAccountContainer .myAccount .fauxlink { background-color:#003399; color:#FFFFFF; border: 1px solid;font-size:0.8em; text-align:right; display:block; padding:3px; position:absolute; top:5px; right:0px; } #us-header .myAccountContainer .myAccount .fauxlink:hover { background-color:#FFFFFF; color:#003399; } #us-header .myAccount #usHeaderLoggedIn { position:absolute; right:75px; top:5px; font-size:0.8em; padding:3px 3px 4px; } #us-header .myAccountContainer .us-camloginbox-container { font-size:0.85em; top:15px; right:-10px; height:241px; position:absolute; border:solid gray; background-color:#F5F5F5; padding:9px; width:158px; z-index:1000; border-width:1px 2px 2px 1px; } #us-header .myAccountContainer .us-camloginbox-container .us-button { color:#000000 !important; position:static; right:0px; text-decoration:none; padding:3px; border-style:solid; width:auto; clear:both; border-width:1px; float:right; top:5px; background:#D4D0C8 none repeat scroll 0%; border-color:#FFFFFF #828177 #828177 #FFFFFF; color:#000000; margin-bottom:3px; } #us-header .us-camloginbox-container label { float:left; margin-top:0px; clear:both; width:100px; line-height:22px; } #us-header .us-camloginbox-container h4 { color:#000000; margin: 0px; font-size:1.1em; } #us-header .myAccountContainer .us-camloginbox-container a { color:#003399 !important; } #us-header .us-camloginbox-container .textbox { font-size:1.2em; float:left; width:155px; } #us-header .us-camloginbox-container .checkboxinline { width: 100%; padding:4px 0pt 0pt; } #us-header .us-camloginbox-container .checkboxinline label { width:150px; margin-top:0px !important;; } #us-header .us-camloginbox-container .us-login-link { padding:3px; position:static; clear:both; display:block; text-decoration:underline; } #us-header .us-camloginbox-container .us-newuser { font-size:1.0em; color:#515B67; padding:0px; margin:0px; width:100%; } #us-header .us-camloginbox-container .us-newuser a { text-decoration:underline; } /* SEO content/landingpage call to action buttons */ #us-main .us-rounded-continue-button, #us-main .us-rounded-continue-button:visited { background-color:#999; font-size:85%; float:right; color:#fff !important; font-weight:bold; line-height:1.5em;margin:5px 0px 3px 0px; padding:5px 34px 0px 0px; text-align:center; display:block; width:101px; height:29px; border:none; text-decoration:none; } #us-main .us-rounded-continue-button:hover { cursor:pointer; } /*Survey Control*/ #us-wrapper .us-surveysidebox .floatright { text-align:right; width:90px; padding-left:2px; } #us-wrapper .us-surveysidebox .floatrightnowidth { float: right; padding-left:2px; } #us-wrapper .us-surveysidebox .innerbox { background-color:#ECF5FF; border:1px solid #CCCCCC; text-align:center; } #us-wrapper .us-surveysidebox .innerbox p { display:block; } #us-wrapper #us-nav .us-surveysidebox .link { margin:0px; text-align:left; } #us-wrapper #us-nav .us-surveysidebox .link a { display:block; margin-top:7px; margin-left:25px; padding:2px 5px 5px 8px; color:White; background-repeat:no-repeat; background-image:url(/WebResources/Images/Global/survey-link.jpg); } #us-wrapper #us-nav .us-surveysidebox span { display: block; padding: 3px 4px 3px 4px; } #us-wrapper #us-nav .us-surveysidebox img { padding: 3px; } #us-wrapper #us-nav .us-surveysidebox ul.us-surveyradiolist { width: 179px; border: none; background-color: #D5EAFF; } #us-wrapper #us-nav .us-surveysidebox ul.us-surveyradiolist li { font-size: 0.9em; padding: 4px; border-bottom: solid 1px #fff; } #us-wrapper #us-nav .us-surveysidebox ul.us-surveyradiolist li.altrow { } #us-wrapper #us-nav .us-surveysidebox ul.us-surveyradiolist label { display: block; float: left; margin-top: 2px; margin-left: 5px; width: 150px; font-size: 11px; } #us-wrapper #us-nav .us-surveysidebox ul.us-surveyradiolist input { float: left; background-color: transparent !important; padding: 0px !important; margin: 0px !important; margin-top: 4px !important; } #us-wrapper #us-nav .us-surveysidebox input { margin-left: 45px; } #us-wrapper #us-nav .us-surveysidebox a.textlink {display: block; font-size: 0.8em; color: #0049C5; text-align: center; } #us-wrapper #us-nav .us-surveysidebox div.us-surveyanswerlist { background-color: #ECF5FF; } #us-wrapper #us-nav .us-surveysidebox div.us-surveyanswerlist label { color: #000; font-size: 11px; display: block; padding: 4px 3px 4px 3px; } #us-wrapper #us-nav .us-surveysidebox div.uc-surveyanswerarea { color: #F60; font-size: 11px; background-color: #FFF; padding: 4px 3px 4px 3px; } #us-wrapper #us-nav .us-surveysidebox div.uc-surveyanswerarea div.uc-surveyanswerbar { float: left; height: 8px; border: solid 1px #CCC; background: url(/webresources/images/global/surveybarbg.gif) repeat; margin-right: 4px; } #us-wrapper #us-nav .us-surveysidebox div.uc-surveyanswerarea div.uc-surveyanswerbar div.fill { float: left; height: 8px; background: url(/webresources/images/global/surveybarfillbg.gif) repeat-x; }