/* Lloyds TSB Offshore Mini Site Layout and Presentation CSS Author(s): M. J. Magee (www.e-scape.co.uk) Date: 25.01.10 Version: 1b www.e-scape.co.uk Change Log: 12.02.10 - MM - 1b - sidebar amends */ /* Standards */ * { margin: 0px; padding: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; } hr, .hidden { display: none; } .clear { clear: both; height: 1px; } a { color: #0055ba; text-decoration: underline; } a:hover { color: #013675; text-decoration: none; } a:active, a:focus { outline: none; } a img { border: 0px; } .margin-top-0px { margin-top: 0px !important; } /* Main Body */ #wrapper { width: 758px; background: #FFFFFF; margin: 0 auto 20px auto; text-align: center; } #wrapper #content-wrapper { width: 734px; background: url(../img/your-journey/backgrounds/wrapper_sides-bg.png) repeat-y; position: relative; margin: 0 auto; padding: 7px 15px 16px 9px; text-align: center; } #wrapper #content-wrapper .bottom { width: 758px; height: 12px; background: url(../img/your-journey/backgrounds/wrapper_bottom-bg.png) no-repeat; position: absolute; bottom: 0px; left: 0px; display: block; } /* Header */ #header { width: 100%; text-align: left; } #header span { display: none; } #header p#logo { width: 357px; float: left; margin: 23px 0 21px 5px; } #header p#logo a { width: 357px; height: 34px; background: url(../img/your-journey/backgrounds/header_logo.png) no-repeat; display: block; } #header p#homepage-url { width: 158px; float: right; margin: 32px 4px 0 0; } #header p#homepage-url a { width: 158px; height: 19px; background: url(../img/your-journey/backgrounds/header_url.png) no-repeat 0 0; display: block; } #header p#homepage-url a:hover { background-position: 0 -19px; } #header #navigation { clear: both; width: 750px; background: url(../img/your-journey/backgrounds/header_subnav-bg.png) no-repeat -750px 29px; position: relative; margin: 0 4px 0 5px; padding-bottom: 2.5em; } #header #navigation.no-nav { background-position: 0 29px; padding-bottom: 10px; } #header #navigation ul { width: 100%; list-style: none; } #header #navigation ul li { width: 123px; float: left; margin-right: 1px; } #header #navigation ul li a { width: 123px; height: 29px; background: url(../img/your-journey/backgrounds/header_tabs.png) no-repeat; display: block; } #header #navigation ul li#nav-home a { background-position: 0 0; } #header #navigation ul li#nav-home a:hover { background-position: 0 -29px; } #header #navigation ul li#nav-home.selected a, #header #navigation ul li#nav-home.selected a:hover { background-position: 0 -58px; } #header #navigation ul li#nav-starting-out a { background-position: -124px 0; } #header #navigation ul li#nav-starting-out a:hover { background-position: -124px -29px; } #header #navigation ul li#nav-starting-out.selected a, #header #navigation ul li#nav-starting-out.selected a:hover { background-position: -124px -58px; } #header #navigation ul li#nav-settling-down a { background-position: -248px 0; } #header #navigation ul li#nav-settling-down a:hover { background-position: -248px -29px; } #header #navigation ul li#nav-settling-down.selected a, #header #navigation ul li#nav-settling-down.selected a:hover { background-position: -248px -58px; } #header #navigation ul li#nav-financial-solutions, #header #navigation ul li#nav-financial-solutions a { width: 131px; } #header #navigation ul li#nav-financial-solutions a { background-position: -372px 0; } #header #navigation ul li#nav-financial-solutions a:hover { background-position: -372px -29px; } #header #navigation ul li#nav-financial-solutions.selected a, #header #navigation ul li#nav-financial-solutions.selected a:hover { background-position: -372px -58px; } #header #navigation ul li#nav-small-change, #header #navigation ul li#nav-small-change a { width: 181px; } #header #navigation ul li#nav-small-change a { background-position: -504px 0; } #header #navigation ul li#nav-small-change a:hover { background-position: -504px -29px; } #header #navigation ul li#nav-growing-together a { background-position: -686px 0; } #header #navigation ul li#nav-growing-together a:hover { background-position: -686px -29px; } #header #navigation ul li#nav-growing-together.selected a, #header #navigation ul li#nav-growing-together.selected a:hover { background-position: -686px -58px; } #header #navigation ul li ul { width: 740px; position: absolute; top: 29px; left: 0px; padding: 3px 0 0 10px; } #header #navigation ul li ul li { width: auto; font-size: 1.2em; margin-right: 5px; } #header #navigation ul li ul li a { width: auto; height: auto; background: none; padding: 4px 10px 1.0em 10px; color: #FFFFFF; text-decoration: none; display: block; } #header #navigation ul li ul li a:hover { color: #000000; } #header #navigation ul li ul li.selected { background: url(../img/your-journey/backgrounds/header_subnav-selected-left.png) no-repeat 0 0 #FFFFFF; } #header #navigation ul li ul li.selected a { background: url(../img/your-journey/backgrounds/header_subnav-selected-right.png) no-repeat; background-position: 100% 0% !important; color: #000000; } #header #navigation ul li#nav-growing-together ul li, #header #navigation ul li#nav-growing-together ul li a { font-size:1.1em; margin-right:0px; } #header #navigation ul li ul li.color-change a { color:#0055BA; } #header #navigation ul li ul li.color-change a:hover { color:#000000; } /* Homepage Content */ #wrapper p#main-banner { width: 755px; margin: 6px auto 0 auto; } #wrapper dl.bucket { width: 253px; float: left; margin-top: 5px; display: inline; } #wrapper dl.bucket dt a { width: 100%; height: 176px; background: url(../img/your-journey/banners/content_homepage-buckets.png) no-repeat; display: block; } #wrapper dl#homepage-first-banner { width: 251px; margin-left: 1px; } #wrapper dl#homepage-first-banner dt a { background-position: 0 0; } #wrapper dl#homepage-first-banner dt a:hover { background-position: 0 -176px; } #wrapper dl#homepage-second-banner dt a { background-position: -253px 0; } #wrapper dl#homepage-second-banner dt a:hover { background-position: -253px -176px; } #wrapper dl#homepage-third-banner dt a { background-position: -504px 0; } #wrapper dl#homepage-third-banner dt a:hover { background-position: -504px -176px; } #wrapper dl#homepage-third-banner.b dt a { background-position: -757px 0; } #wrapper dl#homepage-third-banner.b dt a:hover { background-position: -757px -176px; } #wrapper dl.bucket dt span, #wrapper dl.bucket dd { display: none; } /* Sidebar */ #wrapper #content-wrapper #sidebar { width: 187px; float: left; text-align: left; } #wrapper #content-wrapper #sidebar ul#subnavigation { width: 183px; list-style: none; position: relative; margin-bottom: 10px; margin-left: -3px; z-index: 100; } #wrapper #content-wrapper #sidebar ul#subnavigation li { width: 183px; margin-bottom: 2px; } #wrapper #content-wrapper #sidebar ul#subnavigation li a, #wrapper #content-wrapper #sidebar ul#subnavigation li a span { background: url(../img/your-journey/backgrounds/sidebar_navigation-bg.png) no-repeat; display: block; } #wrapper #content-wrapper #sidebar ul#subnavigation li a { width: 183px; background-position: 0 100%; padding-bottom: 7px; font-size: 1.2em; color: #403f3f; font-weight: bold; text-decoration: none; } #wrapper #content-wrapper #sidebar ul#subnavigation li a span { width: 143px; background-position: 0 0; padding: 7px 20px 0 20px; cursor: pointer; } #wrapper #content-wrapper #sidebar ul#subnavigation li a:hover { background-position: -183px 100%; } #wrapper #content-wrapper #sidebar ul#subnavigation li a:hover span { background-position: -183px 0; } #wrapper #content-wrapper #sidebar ul#subnavigation li.selected a, #wrapper #content-wrapper #sidebar ul#subnavigation li.selected a:hover { background-position: -366px 100%; color: #FFFFFF; } #wrapper #content-wrapper #sidebar ul#subnavigation li.selected a span, #wrapper #content-wrapper #sidebar ul#subnavigation li.selected a:hover span { background-position: -366px 0; } #wrapper #content-wrapper #sidebar .banner { width: 187px; position: relative; bottom: 5px; margin-bottom: 2px; } #wrapper #content-wrapper #sidebar dl.banner span, #wrapper #content-wrapper #sidebar dl.banner dd { display: none; } #wrapper #content-wrapper #sidebar dl.banner dt a { width: 187px; height: 185px; background-repeat: no-repeat; display: block; } #wrapper #content-wrapper #sidebar dl.banner dt a:hover { background-position: 0 -185px; } #wrapper #content-wrapper #sidebar dl#banner-money-questionnaire dt a { background-image: url(../img/your-journey/banners/sidebar_money-questionnaire.png); } #wrapper #content-wrapper #sidebar dl#banner-personal-loans dt a { background-image: url(../img/your-journey/banners/sidebar_personal-loans.png); } #wrapper #content-wrapper #sidebar dl#banner-island-cheque-account dt a { background-image: url(../img/your-journey/banners/sidebar_island-cheque-account.png); } #wrapper #content-wrapper #sidebar dl#banner-regular-savings dt a { background-image: url(../img/your-journey/banners/sidebar_regular-savings.png); } #wrapper #content-wrapper #sidebar dl#banner-credit-cards dt a { background-image: url(../img/your-journey/banners/sidebar_credit-cards.png); } #wrapper #content-wrapper #sidebar dl#banner-budget-planner dt a { background-image: url(../img/your-journey/banners/sidebar_budget-planner.png); } #wrapper #content-wrapper #sidebar dl#banner-mortgage-calculator dt a { background-image: url(../img/your-journey/banners/sidebar_mortgage-calculator.png); } #wrapper #content-wrapper #sidebar dl#banner-lend-a-hand dt a { background-image: url(../img/your-journey/banners/sidebar_lend-a-hand-mortgage.png); } #wrapper #content-wrapper #sidebar dl#banner-financial-planning dt a { background-image: url(../img/your-journey/banners/sidebar_financial-planning.png); } #wrapper #content-wrapper #sidebar dl#banner-survey dt a { background-image: url(../img/your-journey/banners/sidebar_survey.png); } #wrapper #content-wrapper #sidebar dl#banner-financial-planningGT dt a { background-image: url(../img/your-journey/banners/growing_banners/your-journey-financial-planning.png); } #wrapper #content-wrapper #sidebar dl#banner-fixed-termGT dt a { background-image: url(../img/your-journey/banners/growing_banners/your-journey-FTD.png); } #wrapper #content-wrapper #sidebar dl#banner-firstGT dt a { background-image: url(../img/your-journey/banners/growing_banners/your-journey-firstacc.png); } #wrapper #content-wrapper #sidebar dl#banner-futureGT dt a { background-image: url(../img/your-journey/banners/growing_banners/your-journey-future.png); } #wrapper #content-wrapper #sidebar dl#banner-more-help { height: 265px; } .starting-out #wrapper #content-wrapper #sidebar dl#banner-more-help { height: 302px; } #wrapper #content-wrapper #sidebar dl#banner-more-help span { text-indent: -999999px; display: block; } #wrapper #content-wrapper #sidebar dl#banner-more-help dt { display: none; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd, #wrapper #content-wrapper #sidebar dl#banner-more-help dd .link a { width: 187px; background: url(../img/your-journey/banners/sidebar_more-help.png) no-repeat; display: block; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd { height: 205px; position: relative; display: block; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd .link a { position: absolute; left: 0px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul { list-style: none; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li ul { display: none; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.callback a { height: 25px; background-position: 0 -205px; top: 205px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.callback a:hover { background-position: 0 -507px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.email a { height: 28px; background-position: 0 -230px; top: 230px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.email a:hover { background-position: 0 -532px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.advice a { height: 44px; background-position: 0 -258px; top: 258px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.advice a:hover { background-position: 0 -560px; } #wrapper #content-wrapper #sidebar dl#banner-more-help dd ul li.bottom { width: 187px; height: 7px; background: url(../img/your-journey/banners/sidebar_more-help.png) no-repeat 0 -610px; position: absolute; top: 258px; left: 0px; display: block; } /* Content */ #wrapper #content-wrapper h1 { width: 544px; height: 197px; background: url(../img/your-journey/banners/content_titles.jpg) no-repeat; float: right; margin: 0 auto 10px auto; } #wrapper #content-wrapper h1 span, .sIFR-active #wrapper #content-wrapper h2 { display: none; } #wrapper #content-wrapper h2 { clear: right; width: 544px !important; float: right; margin-bottom: 10px; font-size: 1.4em; color: #52a621; } #wrapper #content-wrapper h1#title-starting-out { background-position: 0 0; } #wrapper #content-wrapper h1#title-money-management { background-position: 0 -197px; } #wrapper #content-wrapper h1#title-saver-tool { background-position: 0 -394px; } #wrapper #content-wrapper h1#title-advice-and-guidance { background-position: 0 -591px; } #wrapper #content-wrapper h1#title-questionnaire { background-position: 0 -788px; } #wrapper #content-wrapper h1#title-borrowing { background-position: 0 -985px; } #wrapper #content-wrapper h1#title-saving { background-position: 0 -1182px; } #wrapper #content-wrapper h1#title-day-to-day-banking { background-position: 0 -1379px; } #wrapper #content-wrapper h1#title-jargon-buster { background-position: 0 -1576px; } #wrapper #content-wrapper h1#title-competition { background-position: 0 -1773px; } #wrapper #content-wrapper h1#title-understanding-credit-scoring { background-position: 0 -1970px; } #wrapper #content-wrapper h1#title-keeping-track { background-position: 0 -2167px; } #wrapper #content-wrapper h1#title-students { background-position: 0 -2364px; } #wrapper #content-wrapper h1#title-school-leavers-guide { background-position: 0 -2561px; } #wrapper #content-wrapper h1#title-top-money-tips { background-position: 0 -2758px; } #wrapper #content-wrapper h1.settling-down { background-image: url(../img/your-journey/banners/content_settling-down-titles.jpg); } #wrapper #content-wrapper h1#title-settling-down { background-position: 0 0; } #wrapper #content-wrapper h1#title-you-are-getting-married { background-position: 0 -197px; } #wrapper #content-wrapper h1#title-controlling-costs { background-position: 0 -394px; } #wrapper #content-wrapper h1#title-joint-finances { background-position: 0 -591px; } #wrapper #content-wrapper h1#title-preparing-for-marriage { background-position: 0 -788px; } #wrapper #content-wrapper h1#title-your-new-home { background-position: 0 -985px; } #wrapper #content-wrapper h1#title-what-are-mortgages { background-position: 0 -1182px; } #wrapper #content-wrapper h1#title-borrowing-and-the-costs { background-position: 0 -1379px; } #wrapper #content-wrapper h1#title-sealing-the-deal { background-position: 0 -1576px; } #wrapper #content-wrapper h1#title-important-information { background-position: 0 -1773px; } #wrapper #content-wrapper h1#title-mortgages { background-position: 0 -1970px; } #wrapper #content-wrapper h1#title-competition.settling-down { background-position: 0 -2167px; } #wrapper #content-wrapper h1#title-jargon-buster.settling-down { background-position: 0 -2364px; } #wrapper #content-wrapper h1#title-mortgage-calculator { background-position: 0 -2561px; } #wrapper #content-wrapper h1#title-financial-planning { background-position: 0 -2758px; } #wrapper #content-wrapper h1#title-survey { background-position: 0 -2955px; } /* Growing Together */ #wrapper #content-wrapper h1#title-growingtogether { background-image: url(../img/your-journey/banners/growing_banners/growing-together.jpg);} #wrapper #content-wrapper h1#title-moneymanagement { background-image: url(../img/your-journey/banners/growing_banners/moneyman.jpg); } #wrapper #content-wrapper h1#title-budgeting { background-image: url(../img/your-journey/banners/growing_banners/budgeting.jpg); } #wrapper #content-wrapper h1#title-planning { background-image: url(../img/your-journey/banners/growing_banners/planning.jpg); } #wrapper #content-wrapper h1#title-flexiblemoney { background-image: url(../img/your-journey/banners/growing_banners/flexiblemoney.jpg); } #wrapper #content-wrapper h1#title-finacialplanning { background-image: url(../img/your-journey/banners/growing_banners/financialplanning.jpg); } #wrapper #content-wrapper h1#title-childcare { background-image: url(../img/your-journey/banners/growing_banners/childcare.jpg); } #wrapper #content-wrapper h1#title-education { background-image: url(../img/your-journey/banners/growing_banners/savingforeducation.jpg); } #wrapper #content-wrapper h1#title-investing { background-image: url(../img/your-journey/banners/growing_banners/investing.jpg); } #wrapper #content-wrapper h1#title-childsaving { background-image: url(../img/your-journey/banners/growing_banners/childsaving.jpg); } #wrapper #content-wrapper h1#title-moneysense { background-image: url(../img/your-journey/banners/growing_banners/teachingchildren.jpg); } #wrapper #content-wrapper h1#title-family { background-image: url(../img/your-journey/banners/growing_banners/protectingfamily.jpg); } #wrapper #content-wrapper h1#title-wills { background-image: url(../img/your-journey/banners/growing_banners/wills.jpg); } #wrapper #content-wrapper h1#title-mortgage { background-image: url(../img/your-journey/banners/growing_banners/mortgagepayment.jpg); } #wrapper #content-wrapper h1#title-health { background-image: url(../img/your-journey/banners/growing_banners/yourhealth.jpg); } #wrapper #content-wrapper h1#title-childcarer { background-image: url(../img/your-journey/banners/growing_banners/childcarer.jpg); } #wrapper #content-wrapper h1#title-panel { background-image: url(../img/your-journey/banners/growing_banners/childcarer.jpg); } #wrapper #content-wrapper h1#title-nominate { background-image: url(../img/your-journey/banners/growing_banners/howtonominate.jpg); } #wrapper #content-wrapper h1#title-winners { background-image: url(../img/your-journey/banners/growing_banners/winners.jpg); } #wrapper #content-wrapper h1#title-growingtogethersurvey { background-image: url(../img/your-journey/banners/growing_banners/survey.jpg); } #wrapper #content-wrapper h1#title-resources { background-image: url(../img/your-journey/banners/growing_banners/resources.jpg); } #wrapper #content-wrapper h1#title-jersey { background-image: url(../img/your-journey/banners/growing_banners/jersey.jpg); } #wrapper #content-wrapper h1#title-guernsey { background-image: url(../img/your-journey/banners/growing_banners/guernsey.jpg); } #wrapper #content-wrapper h1#title-isleofman { background-image: url(../img/your-journey/banners/growing_banners/IOM.jpg); } #wrapper #content-wrapper h1#title-events { background-image: url(../img/your-journey/banners/growing_banners/dairyofevents.jpg); } #wrapper #content-wrapper #main-banner { width: 544px; height: 197px; float: right; margin: 0 auto 10px auto; } #wrapper #content-wrapper dl.bucket { width: 270px; height: 159px; position: relative; left: 2px; float: right; margin-top: 0px; } #wrapper #content-wrapper dl#bucket-borrowing, #wrapper #content-wrapper dl#bucket-day-to-day { margin-left: 7px; } #wrapper #content-wrapper dl#bucket-mortgages, #wrapper #content-wrapper dl#bucket-day-to-day { margin-bottom: 10px; } #wrapper #content-wrapper dl.bucket dt a { height: 159px; background: url(../img/your-journey/banners/content_buckets.png) no-repeat; } #wrapper #content-wrapper dl#bucket-savings dt a { background-position: 0 0; } #wrapper #content-wrapper dl#bucket-savings dt a:hover { background-position: 0 -160px; } #wrapper #content-wrapper dl#bucket-borrowing dt a { background-position: -274px 0; } #wrapper #content-wrapper dl#bucket-borrowing dt a:hover { background-position: -274px -160px; } #wrapper #content-wrapper dl#bucket-mortgages dt a { background-position: 0 -320px; } #wrapper #content-wrapper dl#bucket-mortgages dt a:hover { background-position: 0 -480px; } #wrapper #content-wrapper dl#bucket-day-to-day dt a { background-position: -274px -320px; } #wrapper #content-wrapper dl#bucket-day-to-day dt a:hover { background-position: -274px -480px; } #wrapper #content-wrapper #content, #wrapper #content-wrapper dl.container { clear: right; width: 509px; background: url(../img/your-journey/backgrounds/content_bottom-bg.png) no-repeat 0% 100%; position: relative; float: right; padding: 24px 18px 15px 18px; text-align: left; } #wrapper #content-wrapper #content .top, #wrapper #content-wrapper dl.container .top { width: 545px; height: 9px; background: url(../img/your-journey/backgrounds/content_top-bg.png) no-repeat; position: absolute; top: 0px; left: 0px; display: block; } #wrapper #content-wrapper #content h1 { width: auto; height: auto; background: none; float: none; margin: -12px 0 0 0; font-size: 2.6em; color: #036735; } #wrapper #content-wrapper #content h3 { margin-top: 8px; margin-bottom: 0px; font-size: 2.2em; color: #046635; font-weight: normal; } .top-money-tips #wrapper #content-wrapper #content h3, .important-information #wrapper #content-wrapper #content h3 { margin-bottom: -1.5em; } #wrapper #content-wrapper #content h3 a { color: #046635; cursor: pointer; } #wrapper #content-wrapper #content h3 a:hover { color: #56a625; } #wrapper #content-wrapper #content h4, #wrapper #content-wrapper #content big { margin: 2.0em 0 0.5em 0; font-size: 1.4em; color: #4fa810; font-weight: bold; visibility: visible; display: block; } #wrapper #content-wrapper #content h4.no-bottom-margin { margin-bottom: -1.2em; } #wrapper #content-wrapper #content p { font-size: 1.2em; margin-bottom: 1.0em; } #wrapper #content-wrapper #content p.find-out-more { float: left; margin-right: 20px; margin-bottom: 0.5em; font-size: 1.3em; } #wrapper #content-wrapper #content p.find-out-more a { background: url(../img/your-journey/backgrounds/content_arrows.png) no-repeat 100% 2px; padding-right: 26px; padding-bottom: 5px; text-decoration: none; display: block; } #wrapper #content-wrapper #content p.find-out-more a:hover { background-position: 100% -21px; } #wrapper #content-wrapper #content p small { font-size: 0.9em; } #wrapper #content-wrapper #content ul { list-style: none; position: relative; margin-top: 2.5em; display: block; z-index: 100; } #wrapper #content-wrapper #content ul li { min-height: 1.9em; background: url(../img/your-journey/backgrounds/content_tick.png) no-repeat; padding: 2px 0 0 32px; font-size: 1.2em; margin-bottom: 1.0em; } #wrapper #content-wrapper #content ol { position: relative; margin-left: 25px; display: block; z-index: 100; } #wrapper #content-wrapper #content ol li { font-size: 1.2em; margin-bottom: 1.0em; } #wrapper #content-wrapper #content .answer big { margin-top: 0px; margin-bottom: 8px; font-size: 2.2em; color: #4ea911; font-weight: normal; display: block; } #wrapper #content-wrapper #content .answer p { color: #016734; } .sIFR-active #wrapper #content-wrapper #content .answer p { margin-top: -15px; } .sIFR-active #wrapper #content-wrapper #content .answer p input { margin-top: 15px; } #wrapper #content-wrapper #content .div { clear: both; width: 100%; margin-bottom: 2.2em; padding-top: 1.0em; border-bottom: 1px solid #cfcfcf; display: block; } /* Forms */ #wrapper #content-wrapper #content .required { color: #0254ba; } #wrapper #content-wrapper #content dl { width: 332px; margin-top: 3.0em; font-size: 1.2em; } #wrapper #content-wrapper #content dl dt { clear: both; width: 140px; float: left; margin: 0.2em 8px 1.0em 0; } #wrapper #content-wrapper #content dl dt.clear { clear: both !important; float: none; } #wrapper #content-wrapper #content dl dt.error { width: 332px; color: #960404; } #wrapper #content-wrapper #content dl dd { width: 183px; float: right; margin-bottom: 1.0em; } #wrapper #content-wrapper #content dl dd input, #wrapper #content-wrapper #content dl dd select { width: 177px; padding: 1px 3px; font-size: 1.2em; } #wrapper #content-wrapper #content dl dd select { width: 185px; font-size: 12px; } #wrapper #content-wrapper #content dl dd select#day, #wrapper #content-wrapper #content dl dd select#month { width: 50px; margin-right: 8px; } #wrapper #content-wrapper #content dl dd input#year { width: 49px; } #wrapper #content-wrapper #content dl dd input#buttonSubmit { width: auto; } #wrapper #content-wrapper #content dl dt.radio-buttons { width: 180px; } #wrapper #content-wrapper #content dl dd.radio-buttons { width: 70px; } #wrapper #content-wrapper #content dl dd.radio-buttons input { clear: both; width: auto; height: auto; float: left; margin-right: 10px; margin-bottom: 5px; } #wrapper #content-wrapper #content dl dd.radio-buttons label { float: left; margin-bottom: 5px; display: inline; } /* Checkbox forms */ #wrapper #content-wrapper #content .checkboxes { clear: both; width: 525px; position: relative; border: 0px; } #wrapper #content-wrapper #content .checkboxes big { position: absolute; top: 0px; right: 2.0em; margin-top: 0px; font-size: 2.0em; color: #4fa810; text-transform: capitalize; z-index: 100; } #wrapper #content-wrapper #content .checkboxes big span { display: none; } #wrapper #content-wrapper #content .checkboxes ul { width: 474px; background: url(../img/your-journey/backgrounds/content_tick-box-bg.png) no-repeat 100% 100%; margin-top: 0px; padding: 0 51px 30px 0; } #wrapper #content-wrapper #content .checkboxes ul li { clear: both; min-height: 1.0em; background: url(../img/your-journey/backgrounds/content_bullet.png) no-repeat 0 0.4em; margin-bottom: 0px; padding: 0 0 0.8em 12px; } #wrapper #content-wrapper #content .checkboxes ul li label { width: 388px; float: left; display: block; } #wrapper #content-wrapper #content .checkboxes ul li input { float: right; } #wrapper #content-wrapper #content .checkboxes ul li span { clear: both; width: 100%; height: 1px; display: block; } #wrapper #content-wrapper #content .checkboxes p { clear: both; float: right; margin: 5px 18px 0 0; } /* Survey */ .survey #wrapper #content-wrapper #content #questionnaireForm h3 { margin-bottom: -0.8em; } .survey #wrapper #content-wrapper #content #questionnaireForm h3.margin { margin-bottom: 0px; } .survey #wrapper #content-wrapper #content dl { width: 509px; margin-top: 2.2em; } .survey #wrapper #content-wrapper #content dl dt { width: 509px; float: none; margin-right: 0px; font-weight: bold; } .survey #wrapper #content-wrapper #content dl dt em { margin-top: 0.4em; font-weight: normal; display: block; } .survey #wrapper #content-wrapper #content dl dt.error { display: block; } #wrapper #content-wrapper #content dl.ranking dd { width: 169px; float: left; margin-top: 0.5em; } #wrapper #content-wrapper #content dl.ranking dd select { width: 150px; } #wrapper #content-wrapper #content dl.ranking dd.full-width { width: 509px; float: none; } #wrapper #content-wrapper #content dl.ranking dd.full-width select { width: 509px; } #wrapper #content-wrapper #content dl.ranking dd p { font-size: 1.0em; font-weight: bold; } #wrapper #content-wrapper #content dl.four-col dd { width: 127px; float: left; } #wrapper #content-wrapper #content dl.four-col dd select { width: 120px; } .survey #wrapper #content-wrapper #content dl.small { width: 332px; } .survey #wrapper #content-wrapper #content dl.small dt { width: 140px; float: left; } .survey #wrapper #content-wrapper #content dl.small dd { width: 183px; } #wrapper #content-wrapper #content dl.other { clear: both; width: 509px; margin-top: 0px; display: block; } #wrapper #content-wrapper #content dl.other dt { width: 150px; float: left; margin-right: 9px; } #wrapper #content-wrapper #content dl.other dd { width: 350px; float: left; } #wrapper #content-wrapper #content dl.other dt.radio-buttons, #wrapper #content-wrapper #content dl.small dt.radio-buttons, #wrapper #content-wrapper #content dl.other dt.error { width: 509px; float: none; margin-right: 0px; } .survey #wrapper #content-wrapper #content dl dd.radio-buttons, #wrapper #content-wrapper #content dl.other dd.radio-buttons, #wrapper #content-wrapper #content dl.small dd.radio-buttons { width: 489px; float: none; margin-left: 20px; } .survey #wrapper #content-wrapper #content dl dt.clear { float: none; } .survey #wrapper #content-wrapper #content p input.button { float: right; } /* Growing Together Survey CSS */ #wrapper #content-wrapper #content #questionnaireForm #preparations { position: relative; right:250px; width:400px; } #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_0, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_1, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_2, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_3, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_4, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_5, #wrapper #content-wrapper #content #questionnaireForm tr td input#preparations_6 { width: 20px; margin-right:20px; float:left; } /* single answer drop down lists in survey */ #wrapper #content-wrapper #content #questionnaireForm dl.oneAnswer select { width :185px; float:left; position:relative; right: 250px; } /* Calculator forms */ #wrapper #content-wrapper #content .calculator { position: relative; border: 0px; } #wrapper #content-wrapper #content .left { width: 199px; float: left; } #wrapper #content-wrapper #content .right { width: 279px; float: right; } #wrapper #content-wrapper #content .full { width: 509px; position: relative; } #wrapper #content-wrapper #content .calculator h3 { width: auto; } #wrapper #content-wrapper #content .calculator dl { width: auto; margin-top: 0px; } #wrapper #content-wrapper #content .calculator dl dt { clear: both; width: 130px; float: left; margin-right: 8px; font-size: 1.1em; color: #4ea910; font-weight: bold; } #wrapper #content-wrapper #content .left dl dt { width: 52px; } #wrapper #content-wrapper #content .full dl dt { width: 200px; } #wrapper #content-wrapper #content .full dl dt.clear { clear: both !important; width: 360px !important; float: none; } #wrapper #content-wrapper #content .full dl dt.float { float: left; } .mortgage-calculator #wrapper #content-wrapper #content .full dl dd.error { width: 500px; } #wrapper #content-wrapper #content .calculator dl dd { width: 78px; float: left; } #wrapper #content-wrapper #content .left dl dd { margin-right: 0px; } #wrapper #content-wrapper #content .calculator dl dd input { width: 70px; } #wrapper #content-wrapper #content .calculator dl dd.button { width: 53px; float: right; margin-right: 0px; } #wrapper #content-wrapper #content .calculator dl dd.clear { clear: none; } #wrapper #content-wrapper #content .calculator dl dd.submit input { width: auto; height: auto; position: relative; right: 2px; } #wrapper #content-wrapper #content .calculator dl dd.clear input, #wrapper #content-wrapper #content .calculator dl dd.cancel input, #wrapper #content-wrapper #content .calculator dl dd.button input { width: auto; height: auto; } .mortgage-calculator #wrapper #content-wrapper #content .calculator dl dd { width: 108px; position: relative; } .mortgage-calculator #wrapper #content-wrapper #content .calculator dl dd span { position: absolute; top: 0px; left: 0px; } .mortgage-calculator #wrapper #content-wrapper #content .calculator dl dd input { margin-left: 1.5em; } #wrapper #content-wrapper #content .calculator dl dd.text { width: auto; margin-left: 0.5em; } #wrapper #content-wrapper #content .calculator dl dd.error { clear: both; width: 261px; float: none; color: #CC0000; } #wrapper #content-wrapper #content .left dl dd.error { width: 183px; } #wrapper #content-wrapper #content .calculator dl dd.error span { margin-top: 20px; display: block; } #wrapper #content-wrapper #content #results .calculator dl dt { font-size: 1.3em; } #wrapper #content-wrapper #content #results .calculator dl dd { margin-top: 3px; font-size: 1.4em; } .mortgage-calculator #wrapper #content-wrapper #content #results .calculator, .mortgage-calculator #wrapper #content-wrapper #content #results .calculator dl { width: 250px; } .mortgage-calculator #wrapper #content-wrapper #content #results .calculator dl dt { width: 130px; } /* Jargon Buster */ #wrapper #content-wrapper dl.container { padding-top: 5.0em; margin-bottom: 10px; } #wrapper #content-wrapper dl.container dt { margin-bottom: 0.8em; font-size: 1.4em; color: #56a625; font-weight: bold; } #wrapper #content-wrapper dl.container dd { margin-bottom: 2.2em; padding-bottom: 2.2em; font-size: 1.2em; border-bottom: 1px solid #cccccc; } #wrapper #content-wrapper dl.container dd.last { margin-bottom: 0px; padding-bottom: 0px; border: 0px; } #wrapper #content-wrapper dl.container dd.top { margin: 0px; padding: 0px; border: 0px; } #wrapper #content-wrapper dl.container dd.top h3 { position: absolute; top: 12px; left: 18px; font-size: 2.0em; color: #046635; font-weight: normal; } #wrapper #content-wrapper dl.anchors { background-position: -544px 100%; } #wrapper #content-wrapper dl.anchors dd.last ul { list-style: none; margin-top: -2.0em; } #wrapper #content-wrapper dl.anchors dd.last ul li { float: left; margin: 0 0.8em; } #wrapper #content-wrapper dl.anchors dd.last ul li a { font-weight: bold; display: block; } /* Defined lists */ #wrapper #content-wrapper #content dl.list { width: 100%; margin-top: 0px; } #wrapper #content-wrapper #content dl.list dt { width: 100%; float: none; margin: 0 0 0.4em 0; font-size: 1.4em; color: #56a625; font-weight: bold; } #wrapper #content-wrapper #content dl.list dd { width: 100%; float: none; margin-bottom: 1.0em; } /* Footer */ ul#footer { width: auto; list-style: none; margin: 0 auto; padding-bottom: 15px; text-align: center; } ul#footer li { background: url(../img/your-journey/backgrounds/footer_div.png) no-repeat 0% 50%; padding: 0 14px; font-size: 1.2em; display: inline; } ul#footer li.first { background: none; } ul#footer li a { color: #0054a6; text-decoration: none; } ul#footer li a:hover { color: #144497; }