/* Colours Main (buttons): #4f738a Darker (button hover and links): #4f738a Darkest (Link hover): #1D5987 Alt green: #87B547 Alt light green: #a8ca79 Link colour: #4f738a Link hover: #4f738a */ * {box-sizing:border-box;} a, a:active, a:visited, .linkstyle, .ui-widget-content a{color:#4f738a;} a:hover{color:#4f738a; text-decoration:none;} input, select{border-radius:0 !important;} input.addButton[type="submit"], input.addButton[type="button"], .b_fundpickera #fund_search_results th span{color:#4f738a !important;} button, .ui-state-default, .tool_icon{border-radius:0 !important;} /* HTML elements */ html{height:100%; margin:0; padding:0; min-width:990px; -webkit-font-smoothing: antialiased; background:#f9f9f9; position:relative;} html > body{display:block; /* Display Block, for browsers that don't support Flex*/ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;} /* FOUC. Page hidden till parent CSS loaded (this one). overdide less specific selector in child CSS*/ body{margin:0; padding:0; color:#444; font-size:14px; line-height:1.5em; position:relative; height:100%; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;} h1{ font-size: 36px; margin:0; padding:25px 0 20px 0; color:#3e1051; font-family: 'Arial',sans-serif; font-weight:normal;} h2{ font-size: 32px; margin:0; padding:0 0 10px 0; line-height: 1.2em; font-weight:normal; color:#3e1051; font-family: 'Arial',sans-serif;} h3, h4{font-family:'Arial', sans-serif;} /* General */ .container{box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); border:none; border-radius:0; } .return_data{color:#333} .graph_key_font {font-family: arial, helvetica, sans-serif;} .graph_key_shapes {width: 10px;} .small_input, .currency_input{height:auto} /* Main structure */ #pageContainer{background:#f9f9f9; clear:both; padding:0; width:100%; margin:0px auto; height: auto !important; overflow:hidden; border-top:0 solid #fff; border-radius:0; position:relative; background-color: #f9f9f9; background-image: linear-gradient(#3e1051 78px, #f9f9f9 0px); background-repeat: repeat-x; } #page_content{min-height:0; padding-bottom:0; min-width:990px; max-width:990px; margin:0 auto; float:none;} #page_content, #container_main, #tabs_main {overflow: visible;} /* Main structure (continued) Sticky footer stuff. Cater for inconsistent markup */ body > #pageContainer{ -webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} body > #container {height: auto; -webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} body > #container > #pageContainer{ -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /*Explore section responsive layout*/ #b_explore #page_content{min-width:100%; max-width:100%;} #b_explore .container_main {float: none; margin: 0 auto; max-width: 990px; width: 100%;} #b_explore .ui-accordion .ui-accordion-header{width:100%} /* Header */ /* first page, before entering the tool */ #page_top { overflow:hidden; /* background-color:#3e1051; */ width:100%; margin-bottom:20px; } #page_top #logo { padding:10px 0 0 0; width:980px; margin:0 auto; float:none; overflow:hidden; } #page_top #but_logo, #topnav #mainlinks li#tn_1 input, #topnav #mainlinks input#nav_home[value="home"], #topnav #mainlinks input#nav_home[value="Home"], #topnav #mainlinks input#nav_home[value=""]{ background:url("resource?name=logo&companyName=mbeedemo5product") no-repeat; background-position:0 50%; background-color:transparent; background-repeat:none; outline:none; height:60px; width:230px; margin:0 0 10px 0; position:relative; } /* specifically for the tool selection 'index' page */ #b_index #page_top { background-color:#3e1051; } /* the tool */ #page_top_menu { padding-top:10px; margin-bottom:20px; /* background-color:#3e1051;*/ } #topnav { overflow:hidden; width:990px; margin:0 auto; border-radius:0; height:auto; } /* specific some of the tools - topnav */ #quickToolsBody #topnav, .b_incomeQuestionnaireA #topnav, #b_portfoliobuilderb #topnav, #b_savings #topnav, #b_protection #topnav, #b_storyboard #topnav, #b_lifeplan #topnav, #b_retirement #topnav { padding-top:10px; margin-bottom:20px; } /* some more specific for logo positioning */ .b_fundpickera #tn_1 { padding-top:10px; } .b_fundpickera #topnav #mainlinks input#nav_home[value="Home"] { margin-bottom:0; } #topnav #mainlinks { padding:0; width:960px; margin:0 auto; float:none; overflow:hidden; border-radius:0; } #topnav #mainlinks li#tn_1 { border-radius:0; margin:0; padding-bottom:0; } /* the things to consider steps */ #b_explore #page_content form#controller { padding-top:10px; margin-bottom:20px; } #b_retirementPlan #containerTool form:first-child { overflow:auto; padding-top:10px; margin-bottom:20px; } /* #topnav{ width:auto; min-width:990px; max-width:990px; min-height:auto; float:none; margin: 14px auto 10px; } #topnav #mainlinks{margin:0;} */ #topnav #mainlinks li#tn_1:hover{border-color:#4f738a;} #topnav #mainlinks li#tn_1:before{ padding:15px; content:"\e901"; font-family:"icomoon"; margin-left: -60px; font-size: 24px; line-height: 60px; vertical-align: top; border:2px solid #ccc; border-radius:5px; } /* Home icon */ #topnav #mainlinks span.tool_title{background:transparent;} #topnav #mainlinks li{color:#fff;} #topnav #mainlinks input[type="submit"], #topnav #mainlinks a {background-color:transparent; border:2px solid transparent; color:#4f738a;} #topnav #mainlinks input[type="submit"]:hover, #topnav #mainlinks a:hover{background-color:transparent; border-color:#ccc; color:#4f738a ;} #topnav #mainlinks li#tn_2, #topnav #mainlinks li#tn_3, #topnav #mainlinks li#tn_4, #topnav #mainlinks li#tn_5, #topnav #mainlinks li#tn_6, #topnav #mainlinks li#tn_7{display:none} #topnav #mainlinks .subnav {background:#eee;} #topnav #mainlinks .subnav li {border:none;} #topnav #mainlinks .subnav li input {background:#eee; color:#666;} #topnav #mainlinks li span.tool_title {font-family: 'Arial',sans-serif;} #topnav #mainlinks li#tn_2 #nav_home{background:transparent; width:auto; height:auto;} #page_top #client {color: #666; font-size: 14px; padding: 0; margin: 5px 5px 0 0;} #topnav #mainlinks #tn_1:after{font-size:28px; color:#fff; font-weight:normal; line-height: 60px; vertical-align: top; margin-left:20px; font-family: 'Arial',sans-serif;} #b_retirement #topnav #mainlinks #tn_1:after{content:"Retirement planner";} #quickToolsBody #topnav #mainlinks #tn_1:after{content:"ISA forecaster";} #b_portfoliobuilderb #topnav #mainlinks #tn_1:after, #b_fundpickera #topnav #mainlinks #tn_1:after{content:"Fund picker";} #b_protection #topnav #mainlinks #tn_1:after{content:"Protection planner";} #b_retirementPlan #topnav #mainlinks #tn_1:after{content:"Retirement planner+";} #b_savings #topnav #mainlinks #tn_1:after{content:"Savings planner";} #b_storyboard #topnav #mainlinks #tn_1:after, .b_cashflowAnalysis #topnav #mainlinks #tn_1:after{content:"Life planner";} #inp_cash_value_what_if, #inp_forecast_type_what_if, #inp_forecast_type {margin: 10px 0 -10px 0;} /* Footer */ #page_footer{color:#4f738a; background:#dce3e8; border-top:2px solid #7390a2; height:100px; position:relative; width: 100%; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #page_footer p {color:#4f738a;} #page_footer a {color:#4f738a} #footer_wrapper{width:auto; min-width:990px; max-width:990px; /*max-width:1200px;*/} body > form[action='moneybee/controller']:last-of-type:not(.report){height:100%; position:relative; webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* when for #page_footer happens to be in its own form*/ /* Icons */ .but_help .icon, a.help, .help, .tool_icon, .tool_intro:before, .icon_next, .icon_warning, .button_loud:after, .button_loud:before, .icon_arrow_right, .but_slide, .slider_icon, .field_icon, .intro_image:after, #t_protectionA div.protection_forecast:after, #b_index #tabs_main .ui-tabs-panel:before, #qt_investment_content #investment #multiYearTermSliderContainer .ui-slider .ui-slider-handle, .question ul.qresponse li:after, .question .radio:after, .tool_title:before, #topnav #mainlinks #tn_1:before, .icon_trash, .ui-accordion .ui-accordion-header.ui-state-default:before, .ui-accordion .ui-accordion-header.ui-state-active:before, div#dialog_target div#targetCalcTabs table thead td.buttonContainer a.fillDown .ui-button-text:before, .q_nav span.stats_arrow:after, .q_nav span.statsNext:after, button.icon { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size:22px; padding:0; border:none; background:transparent; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ret_plan_container .ui-accordion .ui-accordion-header.ui-state-default:before, .ret_plan_container .ui-accordion .ui-accordion-header.ui-state-active:before { vertical-align: top; } .accordion-heading { display: inline-block; width: 90%; } /* hide the old, background image style icons */ .accordion .ui-state-default .ui-icon, .accordion .ui-state-active .ui-icon, #userDataB_accordions .ui-accordion-header.ui-state-default .ui-icon, #userDataB_accordions .ui-accordion-header.ui-state-active .ui-icon { background-image:none; display:none; } /* replace the icons with icon fonts */ .ui-accordion .ui-accordion-header.ui-state-default:before, .ui-accordion .ui-accordion-header.ui-state-active:before { margin-left:-25px; font-size:18px; vertical-align: text-bottom; } .ui-accordion .ui-accordion-header.ui-state-default:before { content:"\edc5"; } .ui-accordion .ui-accordion-header.ui-state-active:before { content:"\edc6"; } .but_help .icon:before, .help:before{ content:"\ed60"; font-size: 20px; } .icon_trash:before{ content:"\ebfb"; font-size: 20px; } .icon_risk:before{ content:"\eb7f"; /* pie chart */ } .icon_state:before{ content:"\ea0d"; /* coin */ } .icon_target:before{ content:"\ec28"; /* target */ } #icon_partTimePercentage:before{ content:"\ea4e"; /* clock */ } .icon_spouse_percentage:before{ content:"\ecec"; /* love heart */ } #guaranteePeriod .icon_target:before{ content:"\ea5e"; /* f1f4f7r */ } .icon_pensionIncrease:before{ content:"\eb8f"; /* stats growth */ } #icon_salary:before{ content:"\ea0d"; /* coin */ } .icon_salaryIncrease:before { content:"\eb8f"; /* stats growth */ } .icon_warning { background-image: none!important; } .icon_warning:before { content:"\ed4d"; } .button_loud{border-radius:0 !important;} .button_loud .icon_next:before{ content: "\edba"; } .section_prev.button_loud:before, .button_prev.button_loud:before{ content: "\edc2"; margin-right:10px; } .section_next.button_loud:after, .button_next.button_loud:after{ content: "\edba"; margin-left:10px; } .icon_arrow_right:before{ content: "\ee35"; } #icon_retage:before{ content:"\ea62"; /* calender */ } .icon_savings:before{ content:"\eb54"; /* safe */ } .icon_cont:before{ content:"\e604"; /* pig */ } .but_help .icon, .help, span.icon-bin2:hover, .icon_trash:hover, .selected_option { color:#4f738a; } .but_help .icon:hover, .help:hover{color:#4f738a ;} .help:hover{background:transparent;} a.icon-info, #userDataB_accordions .form .icon-info {color:#4f738a!important; margin: 0; font-size: 1.5em !important;} a.icon-info:hover, #userDataB_accordions .form .icon-info:hover {color:#4f738a !important;} span.icon-bin2{color: #ccc;} #b_retirement .help, .b_cashflowAnalysis a.icon-info{overflow:hidden;} /* injection of :before plus the width means outline not a square box, a funny shape. So crop the shape.*/ .icon_trash{background:transparent; color: #ccc;} /* .but_help .icon, .help{color:#999;} .but_help .icon:hover, a.help:hover, .help:hover{color:#666;} */ .icon_warning{color:#F9B201; font-size: 28px;} .icon_warning:visited{color:#F9B201;} .icon_warning:hover{color:#E2A100; font-weight:normal;} .button_loud .icon_next{background:none; height:30px; margin: 8px 0 0; width: 25px;} .icon_arrow_right{background:none; display: inline-block; width: 23px; padding:0!important;} .slider_icon, .field_icon{background:none!important; width: 50px; font-size:42px; color:#4f738a;} .field_icon{margin: 5px 10px 10px 0; font-size:36px;} .icon_risk{font-size: 38px; margin-top:14px;} .tool_title:before{line-height: 0.8em; float:left; width:30px;} /* Material Design changes */ .tool_icon{ background:#4f738a; border:2px solid #4f738a; height: auto; font-size:18px; color:#fff;; margin: 0 10px 0 0; padding: 5px 3px 6px 5px; width:32px; } .tool_icon:hover{ background:#4f738a; border-color:#4f738a; } .tool_icon:active, .tool_icon:focus { background-color:#4f738a; border-color:#4f738a; } .ui-state-active .tool_icon { color:#fff; } .ui-tabs .ui-tabs-nav li.ui-state-default a { color:#4f738a; } #b_index .ui-tabs .ui-tabs-nav li.ui-state-default a:hover { color:#4f738a; } li.ui-tabs-selected .tool_icon { background:#2A3D49!important; border-color:#2A3D49!important; } .icon_currentA:before{content:"\ed61";} /* Getting started i */ .icon_riskSummaryA:before{content:"\ebab";} .icon_quicktoolsInvestment:before{content:"\eb8d";} .icon_portfolioBuilderB:before{content:"\ea06";} .icon_protectionA:before, .nav_but_protectionA:before{content:"\ec32";} .icon_retirementA:before{content:"\e604"; font-size:24px; height: 21px; margin: -3px 0 0 -3px; float:left;} .icon_incomeQuestionnaireA:before{content:"\ead7";} .icon_comingSoonA:before{content:"\eb6a";} .icon_findadviserA:before{content:"\eb0a";} .icon_guidanceA:before{content:"\ea48";} .icon_cashflowanalysisA:before{content:"\ec28";} .icon_cashflowanalysisARO:before{content:"\ea4a";} .icon_savingsPlannerA:before{content:"\ea90";} .icon_userDataA:before{content:"\ea7b";} .calc_animation {background-image: url("resource?name=ev-spinner&companyName=mbeedemo5product");} /* Flip numbers */ .xdsoft_flipcountdown.xdsoft_size_sm.xdsoft_colour_amber > .xdsoft_digit {background-image: url("resource?name=digit-sm-amber&companyName=mbeedemo5product");} .xdsoft_flipcountdown.xdsoft_size_sm.xdsoft_colour_blue > .xdsoft_digit {background-image: url("resource?name=digit-sm-grey&companyName=mbeedemo5product");} /* Menu bar icons */ /* Forms */ .ui-dialog .form {width:100%} .form span.data, .form span.data2 {font-size: 16px !important; font-weight:normal; margin: 4px 0 0 10px;} .accordion .form {background:transparent;} .accordion .form li {border-bottom: 1px solid #eee;} .form label, .form span.label {font-size: 14px!important; font-weight: normal;} .slider input, .field input, .slider div.sliderOutput, span.sliderOutput, .selector select{padding:5px 0 5px 5px;} .field .currency_symbol, .slider .currency_symbol {font-size: 22px; color:#666;} .field .currency_target, .slider .currency_target {color: #666;} .field .percent_symbol, .slider .percent_symbol {color:#666;} .sub_value {color:#666;} .slider label, .field label, .slider span.label, .field span.label, .selector label, .selector .main_label{font-size:18px;} .slider input, .field input, .slider div.sliderOutput, span.sliderOutput{color: #666; font-size: 20px;} .selector {border-bottom:none} .selector select{color: #666; font-size:18px; margin: 11px 0 10px;} /* Tables */ /* Lists */ .step_no { background: none repeat scroll 0 0 #999; border-radius: 40px; color: #FFFFFF; float: left; font-family: 'Arial',sans-serif; font-size: 20px; height: 30px; margin-bottom: 10px; margin-right: 10px; padding-top: 10px; text-align: center; width: 40px;} .ul_guides { float: left; list-style: inherit; margin: 0; padding:25px 0 0 65px; width: auto; } .ul_guides .step_no {border-radius: 2px;font-size: 14px; height: 24px; padding-top: 2px; width: 24px;} .ul_guides li { display: block; float: left; font-size: 14px; width: 100%;} /* Tabs */ .ui-tabs {border: none; background: transparent; margin:4px;} .ui-tabs .ui-tabs-nav {margin: 0 0 0 10px; border: none; background: transparent;} .ui-tabs .ui-tabs-nav li {margin:0 0.5em 0 0; border-color:transparent; background:transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 0 !important; font-size: 16px;} .ui-tabs .ui-tabs-nav li a{font-weight: normal; border-radius:0px;} .ui-tabs .ui-tabs-nav li.ui-state-active {background:#fff; border-color:#fff; color:#333; /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);*/} .ui-tabs .ui-tabs-nav li:hover {border-color: #fff;} .ui-tabs .ui-tabs-nav li.ui-state-active a{cursor:pointer; color:#666; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);} .ui-tabs .ui-tabs-nav .ui-tabs-anchor {padding: 6px 10px; font-weight: normal;} .ui-tabs .ui-tabs-panel {background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); width:100%;} .subtabs.ui-tabs .tab_body {background:transparent; border:none;} /* Buttons */ /* Material design changes */ .button_loud { color:#fff!important; } /* button default and hover states */ .button, .button:hover, button.button_loud, button.button_loud:hover, .button_loud, .button_loud:hover, a.button_loud, a.button_loud:hover, input.button_loud, input.button_loud:hover, .ui-widget-content a.button_loud, .ui-widget-content a.button_loud:hover, .ui-widget-content input.button_loud, .ui-widget-content input.button_loud:hover, .ui-widget-content button.button_loud, .ui-widget-content button.button_loud:hover { background-image:none; background-color:#4f738a; border-color:#4f738a; border-width:2px; color:#fff; } /* button active and focus states */ button.button_loud:active, button.button_loud:focus, .button:active, .button:focus, .button_loud:active, .button_loud:focus, a.button_loud:active, a.button_loud:focus, input.button_loud:active, input.button_loud:focus, .ui-widget-content a.button_loud:active, .ui-widget-content a.button_loud:focus, .ui-widget-content input.button_loud:active, .ui-widget-content input.button_loud:focus, .ui-widget-content button.button_loud:active, .ui-widget-content button.button_loud:focus { background-color:#4f738a; border-color:#4f738a; filter:none; } /* specific case: create report button doesn't have the padding */ #b_retirement_intro .reportButton-container, #but_change_current_situation { margin-top:30px; } #reportButton.button_loud { padding:22px 20px; } #b_retirementPlan #containerTool #report_form { padding-top:0; } #b_retirementPlan .topNavLinksContainer { float: right; clear: left; margin: 15px 10px 0 0; position: relative; right: 0rem; top: 0rem; } #b_retirementPlan.b_cashflowAnalysis #create_report { font-size:14px; line-height:21px; } /* buttonsets */ .ui-buttonset{padding:0;} .buttonset .ui-state-default{ background:#f1f4f7; filter:none; -ms-filter:"none"; border:2px solid #f1f4f7; color:#4f738a; } .buttonset .ui-state-hover:active, .ui-buttonset .ui-button.ui-state-hover:active, .buttonset .ui-state-active, .ui-buttonset .ui-button.ui-state-active { border-color:#2A3D49; background:#2A3D49; color:#fff; } .ui-button:hover:active .ui-button-text { color:#fff!important; } /* specific cases for buttons/button sets */ .ui-buttonset .ui-button {margin-right:10px;} .easyInput .buttonset label{color:#4f738a;} .easyInput .buttonset label.ui-state-active{background:#2A3D49;} .easyInput .buttonset label:hover {border:2px solid #f1f4f7;} /*.ui-button .ui-button-text {color:#4f738a;}*/ .ui-button.ui-state-active .ui-button-text{color:#fff;} .buttons_container{background:transparent;} .but_action {background:#f1f4f7; border: 2px solid #f1f4f7;} .but_action:hover{border-color:#4f738a ; text-decoration:none;} .but_help .but_text {margin-left:10px;} /* the b_explore pages, big buttons ("learn more") that open the modals */ .ui-corner-all{border-radius:0;} .explanation .but_help, .explanation .but_help:hover, .explanation .but_help:focus, .explanation .but_help:active { background-color:#f1f4f7; border-color:#f1f4f7; color:#4f738a; } .explanation .but_help .icon-info { color:#4f738a!important; } /* the "I like this option" in the 3 in 1 "cards" */ #initial_income_question .option .button_loud:focus, #initial_income_question .option .button_loud:active { border-color:#4f738a; } /* sliders */ .horizontalSlider{background: none repeat scroll 0 0 #DCE3E8; filter:none; ms-filter:"none"; height:4px;} .ui-slider-horizontal .ui-slider-handle {height: 1.5em; width: 1.5em; margin-left: -0.6em; top: -0.6em;} .ui-slider-horizontal .ui-slider-range {background:transparent; filter:none; ms-filter:"none";} .but_slide_down:before{content:"\ed5f"} .but_slide_up:before{content:"\ed5e"} .slider a.help {margin:0px!important;} .slider {border:none} .slider .note {padding: 5px 0 0 70px;} /* material design .ui-slider .ui-slider-handle, .ui-slider .ui-slider-handle:hover, #b_retirementPlan #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle:hover, #b_retirementPlan .flipNumberContainer .mortality-slider .ui-slider .ui-slider-handle:hover, .sliderContainer .ui-slider .ui-slider-handle { border-radius:100%; filter:none; ms-filter:"none"; background:#4f738a; border: 2px solid #4f738a; } .ui-slider .ui-slider-handle:focus, .ui-slider .ui-slider-handle:active{ background:#4f738a; border-color:#4f738a; } */ .ui-slider .ui-slider-handle, .ui-slider .ui-slider-handle:hover, #b_retirementPlan #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle:hover, #b_retirementPlan .flipNumberContainer .mortality-slider .ui-slider .ui-slider-handle:hover, .sliderContainer .ui-slider .ui-slider-handle, .b_cashflowAnalysis #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle, .b_cashflowAnalysis #whatif .horizontalSlider .ui-slider-handle, .b_cashflowAnalysis #whatif .horizontalSlider .ui-state-hover { background-image: none; border-radius:50% !important; background-color:#4f738a; border-color:#4f738a; } .ui-slider-vertical .ui-slider-handle, .ui-slider-vertical .ui-slider-handle:hover{border-radius:0 !important;} #slider_start_age.horizontal_slider a { box-sizing: content-box; border-radius:0; } .sliderContainer .ui-slider .ui-slider-handle.ui-state-active.ui-state-focus, .b_cashflowAnalysis #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle.ui-state-active.ui-state-focus { background-image: none; background-color:#4f738a; border-color:#4f738a; } /* for the chart sliders on the retirement planner+ */ #b_retirementPlan .target_slider.ui-slider .ui-slider-handle.ui-state-hover { border-radius:50%; background-color:#777; } #b_retirementPlan .target_slider.ui-slider .ui-slider-handle.ui-state-active { background-color:#666; } .target_slider.ui-slider .ui-slider-handle.ui-state-hover:after { border-left-color:#777; } .target_slider.ui-slider .ui-slider-handle.ui-state-active:after { border-left-color:#666; } /* #b_retirementPlan .target_slider.ui-slider .ui-slider-handle:hover{background:#666;} */ /* Accordions *********************************************************** */ /* Material Design changes */ .ui-accordion .ui-accordion-header, .ui-accordion .ui-accordion-header.ui-state-hover, .easyInput .ui-accordion .ui-accordion-header, #userDataB_dialog_more_options .ui-accordion .ui-accordion-header { border:2px solid #f1f4f7; color:#4f738a; background-image:none; background-color:#f1f4f7; } .ui-accordion .ui-state-active a, .ui-accordion .ui-state-active a:link, .ui-accordion .ui-state-active a:visited{color:#fff;} .ui-accordion .ui-accordion-header.ui-state-focus, .ui-accordion .ui-accordion-header.ui-state-active { color: #fff; background-color: #4F738A; border:2px solid #4F738A; border-radius:0; } .ui-accordion-icons .ui-accordion-header a { display: inline-block; } .ui-accordion .ui-accordion-header .ui-icon{ background-image:none; } .accordion .ui-accordion-header h2 { font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; } #userDataB_accordions .form span.currency_symbol.fixed { margin: 2px 0 0 5px; } /* specific pages */ #b_explore .ui-accordion .ui-accordion-header, #b_explore .ui-accordion .ui-accordion-header:hover, #b_explore .ui-accordion .ui-accordion-header.ui-state-hover { font-weight:normal; font-size:16px; border-color:#f1f4f7; color:#666; } #b_explore .ui-accordion .ui-accordion-header:focus, #b_explore .ui-accordion .ui-accordion-header.ui-state-focus, #b_explore .ui-accordion .ui-accordion-header.ui-state-active { background-color:#97acb9; color:#fff; } .ui-accordion-header span#whatif_savemoremoney_extra_contributions_text { color:#666; } .ui-accordion-header.ui-state-active span#whatif_savemoremoney_extra_contributions_text, .ui-accordion-header.ui-state-focus span#whatif_savemoremoney_extra_contributions_text { color:#fff; } /* #b_explore .ui-accordion .ui-accordion-header{ color:#4f738a; } #b_explore .ui-accordion .ui-accordion-header:hover { color:#1D5987; } */ /* JQuery UI */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ color: #4f738a; } .ui-dialog .ui-dialog-titlebar-close {background: transparent; border: 0 none; padding: 0;} .ui-dialog-buttonset .ui-button{background: #2A3D49 ; color: #fff !important;} .ui-widget-header {background: #4f738a; color: #fff;} .ui-widget-header .ui-icon {background-image: url("resource?name=ui-icons_ffffff_256x240&companyName=mbeedemo5product");} /* "how much do I need" tabs */ .ui-dialog-buttonpane .ui-state-default, .ui-dialog-buttonpane .ui-state-hover { color:#fff !important; background-color:#4f738a; border-color:#4f738a; border-width:2px; } .ui-dialog-buttonpane .ui-state-hover.ui-state-active { background-color:#2A3D49; border-color:#2A3D49; color:#fff; } .ui-dialog-buttonset .ui-button:hover:active .ui-button-text { color:#fff!important; } /* Flash Of Unstyled Content FUOC */ /* Hide uninitialised dialogs, accordions. Issue has been fixed on Internal Test (code change, using 'notYetStyledByJQuery' class) but unable to promote within f1f4f7frame */ .js .dialog:not(.ui-dialog){display:none;} /* FUOC for accordions A.) Space is reserved for the first item (heading and panel). But it is hidden (visible:hidden) B.) The remaining panels are hidden (display:none)*/ .js .accordion:not(.ui-accordion){display:block;} .js .accordion:not(.ui-accordion) > h2, .js .accordion:not(.ui-accordion) > div{display:none} .js .accordion:not(.ui-accordion) > h2:first-of-type{visibility:hidden;} .js .accordion:not(.ui-accordion) > div:first-of-type{visibility:hidden;} /*Handle the CashFlow Products accordion, our ropey home brew accordion which will never have '.ui-accordion'*/ .js #products{display:block;} .js #products > h2, .js #products > div{display:block;} .js #products > h2:first-of-type{visibility:initial;} .js #products > div:first-of-type{visibility:initial;} /* FUOC for tabs. Show first tab. Hide other tabs. Copied from framework.css. Will NOT work in IE8-*/ .js .tabs:not(.ui-tabs){display:block;} .js .tabs:not(.ui-tabs) > ul{display:none;} .js .tabs:not(.ui-tabs) > div{display:none;} .js .tabs:not(.ui-tabs) > div:first-of-type{display:block;} /* FOUC for sub tabs. Show first tab. Hide other tabs.*/ .js .subtabs:not(.ui-tabs){display:block;} .js .subtabs:not(.ui-tabs) > ul{display:none;} .js .subtabs:not(.ui-tabs) > div{display:none;} .js .subtabs:not(.ui-tabs) > div:first-of-type{display:block;} /* Not all tabs use correct jQuery UI tabs markup. Some have an extra, intermediate div.tab_body, which then contains the tab panels. Copied from retirementa.css. Will NOT work in IE8- */ .js .subtabs:not(.ui-tabs) > div.tab_body{display:block;} .js .subtabs:not(.ui-tabs) > div.tab_body > div{display:none;} .js .subtabs:not(.ui-tabs) > div.tab_body > div:first-of-type{display:block;} .js #pagehelp{display:none;} /************************************************************** LOGIN POPUPS **************************************************************/ .bubble_wrap {position: absolute; right:5px; width: 65px; margin-bottom: 5px; font-size: 12px !important;} .bubble_login {right: 73px; top: -71px;} .bubble_register{top:-71px;} #topnav .bubble_wrap {clear: none;} #topnav .bubble_login{top: 34px;} #topnav .bubble_register{top:34px; position: absolute; } #topnav .bubble_register button{position: absolute; top:0;} #topnav .bubble_wrap button{padding:4px 6px;} #topnav .bubble_register .bubble {left: -410px;} .bubble_wrap button {width:inherit; box-shadow:none !important; color:#fff !important; font-weight:normal !important;} .bubble{width: 255px; left:-220px; z-index:102} /* Stop Retirement Planner dropdowns ("Retirement Income", "bar chart") bleeding through*/ .bubble_register .bubble{top: 30px; width: 475px;} .bubble .form li {list-style:none!important;} .bubble fieldset{padding:0; line-height:1.3em !important;} .bubble .form label{margin-left:0 !important; font-size:1.2em;} .bubble .form input{margin-left:0 !important;} .ui-tabs .bubble_wrap button{padding:4px 10px; color:#117FBA!important; border:none!important; font-size: 14px;} .bubble_pointer{left: 84%;} .bubble input.but_link{padding: 0!important; border:0; background:none!important; color:#117FBA;} .bubble input.but_link:hover{text-decoration:underline;} #tabs_main .bubble input[type="submit"] { margin:10px 0; padding:5px 10px; } #page_top #but_logout{color:#fff;} #page_top #but_logout:hover{color:#fff; text-decoration:underline;} .bubble_wrap { font-size:12px !important; } .bubble_wrap button.button_loud, .bubble_wrap button.button{ color:#117FBA!important; border:none!important; font-size: 14px; background:transparent!important; filter:none; ms-filter:"none";} .bubble_wrap button.button_loud:hover, .bubble_wrap button.button:hover{ background:transparent !important; filter:none; ms-filter:"none"; text-decoration:underline!important; } /* .bubble_wrap .form .button{} .bubble_wrap .form .button:hover{} */ .bubble .form_popup{z-index:1000;} .bubble #li_inp_info{display:none;} #accept input.button_loud { background:#057AB8 !important; filter:none; ms-filter:"none";} #accept input.button_loud:hover { background:#045c8c !important; filter:none; ms-filter:"none";} /************************************************************** SECURITY LOGIN **************************************************************/ body {background-color:#f9f9f9;} .securityPage{min-height:300px;} .securityPage #page_top{float:left; width:100%; height: 100px;} .securityPage #login{width:400px; margin:0 auto;} .securityPage .container{border:none;} .securityPage h1 {color:#666; margin: 10px auto; max-width: 990px;} .securityPage p{color:#666; font-size:16px;} .securityPage #page_content{float: none; clear:both; margin: 0 auto; position: relative; max-width: 990px;} .securityPage #page_content input.button, .securityPage #page_content input[type="submit"]{background:#4f738a !important; filter:none; border-radius:0; padding:10px 20px; cursor:pointer; width:auto; font-size: 16px; border: 2px solid #fff!important; color:#333;} .securityPage #page_content input.button:hover, .securityPage #page_content input[type="submit"]:hover{background:#4f738a !important; filter:none; -ms-filter:"none"; border: 2px solid #4f738a !important;} #accept input.button_loud { background:#4f738a !important; filter:none; -ms-filter:"none"; border: 2px solid #fff!important;} #accept input.button_loud:hover { background:#4f738a !important; filter:none; -ms-filter:"none"; border: 2px solid #4f738a !important;} .securityPage #page_content input#but_login{width:100%;} .securityPage #page_content input#but_forgotten{padding:0; background:transparent!important; border:none!important; text-decoration:none!important; color:#4f738a; text-align: center; width:100%;} .securityPage #contactus{text-align: center; width:100%; float: left; margin-top: 20px;} .securityPage{background:none no-repeat scroll 0 20px transparent; max-width:990px; margin:0 auto; padding: 20px 0; font-family:Arial,sans-serif;} .securityPage #errordiv {border-radius: 0; padding: 20px; width:auto; color:#B30505; } .securityPage #errordiv h3{margin-top:0; color:#666!important; font-size:18px; font-weight:normal;} .securityPage #errordiv ul{border:none;} .securityPage .invalidFormText{padding-bottom:10px; color:#B30505; display:block;} #b_index .securityPage .form ul{box-sizing: border-box; margin:0px 0 20px; padding: 20px 60px; width: 100%; box-shadow: 0 2px 5px #dddddd; background:#fff;} #b_index .securityPage #errordiv{width:400px;} #b_index .securityPage #page_top{background-color: transparent;} /* Security forms - no framework css available for some reason */ .securityPage br{display:none} .securityPage .container{background:transparent; box-shadow:none; padding:0;} .securityPage .form legend{display:none;} .securityPage .form, .securityPage .formunder{padding:0; width:100%; font-size:16px; background:transparent; border-radius:0; border:none; margin: 0 0 20px;} .securityPage .form li {list-style:none; padding: 20px 0 0; clear:left; vertical-align:bottom; width:100%; box-sizing:border-box;} .securityPage .form label, .securityPage .form span.label{margin:0px 5px 0 0; padding:0; font-weight:normal; color:#666; width:auto; display:block; float:none; font-size:16px !important;} .securityPage .form input, .securityPage .form select, .securityPage .form textarea, .securityPage .form .buttonset {display:inline; } .securityPage .form select, .securityPage .formunder select{margin-top:2px; font-size: 16px; padding: 8px 5px;} .securityPage .form input, .securityPage .formunder input{border:1px solid #ccc; border-radius:5px; padding:7px 5px; font-size:16px; width:100%;} .securityPage .form input{display:block;} .securityPage .form .checkbox{margin-top:10px;} .securityPage .formunder ul{margin:0; padding:0px 0px 40px 0px; float:left; width:100%; box-sizing:border-box;} .securityPage .formunder li{list-style:none; padding:5px 0; vertical-align:bottom; clear:left; float:left; width:100%;} .securityPage .formunder label, .securityPage .formunder span.label{display:block; padding-bottom:10px; color: #666; font-weight: normal;} .securityPage .formunder select, .securityPage .formunder input{margin: 0 0 20px 0;} #b_questions .formunder{margin-bottom:20px;} #b_questions ul#email{padding:0;} #b_questions ul#email p{margin:0;} #b_password .form ul{padding:0;} #b_password .form{margin-bottom:20px;} #b_password input[type="submit"] {margin-left:0;} /* Opensecurity login (the redirect page). Hide "Logging in" text, give the white page a pretty background*/ #b_redirect h1{display:none;} #b_redirect form{display:none;} #b_redirect #javascriptversion{display:none} #b_redirect div#wrapper{height:35em} /* reasonable size for gradient fill back ground */ /************************************************************** MISC PAGES **************************************************************/ /* Terms */ #b_terms #accept{width: 100%; text-align: right;} #b_terms #accept #cb_terms{margin-right:2rem} #b_terms #terms_content {margin-top:0; width:100%;} /* Simplify width of Terms page. It will make future Responsive CSS easier*/ #b_terms #page_content {min-width: 0; max-width: 100%; width:990px} /* moneybee.css uses min-width *and* max-width to effectively set width. Very weird*/ #b_terms #page_content > .container_main{width:100%;} #b_terms #page_content.gdpr_consents{width:70%;} #b_terms #termsIframe {border: none;} #termsContainer #terms{text-align:left;} #termsContainer h1{display:none;} #termsContainer h2, #termsContainer h3 {color: #333;} #termsMini {text-align: left;} /* Timeout page */ #b_timeout #pageContainer {background:#fff} #b_timeout #page_content{background:url("resource?name=timeout&companyName=mbeedemo5product") no-repeat center center #fff; height: 500px;} #b_timeout h1{display:none;} #b_timeout p{display:none} /* Logged out page (applies to specific logout html page resource) */ #b_logout h1{font-size:40px; font-weight:normal; color:#aaaaaa; width:100%; margin-top:20%; text-align:center; float:left;} /************************************************************** HOME PAGE **************************************************************/ #b_index .container_main{float:none; margin: 0 auto; width: 990px;} #b_index > #pageContainer{overflow:visible;} /* Other wise Dialogs get chopped off by footer*/ /* 30/03/16 - onlyOneTool code - hide the left column and make the right column full width */ #b_index .onlyOneTool { border-radius:5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); margin-right:10px; width:100%!important; padding:50px 40px 40px 28%; border:1px solid #f1f4f7; } #b_index .onlyOneTool .tool_intro .intro_text {width: 100%;} #b_index .onlyOneTool .tool_intro img{display:none;} #b_index .onlyOneTool:before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size:22px; padding:0; border:none; background:transparent; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #b_index .onlyOneTool:before{ color: #ccc; font-size: 160px; left: 60px; position: absolute; top: 40px; } .single_tool .container_intro { display:none; } /* Tabs */ #b_index #tabs_main{ border-radius:0; } #b_index #tabs_main h3{font-size:inherit;} #b_index #tabs_main .ui-tabs-nav{left:0; background:transparent; margin:0; padding:0; float:left; width: 23%; position:inherit;} #b_index #tabs_main .ui-tabs-nav li a {font-size: 16px; margin-bottom:10px; } #b_index .tabs_icons .ui-tabs-nav li a span.label{padding:6px 0 0;} #b_index #tabs_main .ui-tabs-nav li.ui-tabs-selected a {box-shadow:none; background:transparent;} #b_index .ui-tabs .ui-tabs-nav li.ui-state-active{background:transparent; box-shadow:none;} #b_index #tabs_main .ui-tabs-nav li a:hover{box-shadow:none; background:transparent;} #b_index #tabs_main li.tool_group_heading_container {font-family:'Arial',sans-serif; font-size: 22px; font-weight: normal; margin: 20px 0 5px; color:#333;} #b_index .container_main .tabledata {border:none} #b_index #tabs_main #riskButtonSet.ui-buttonset .ui-button{margin-right:0;} #b_index #tabs_main .ui-tabs-nav li a:hover .tool_icon{ border-color:#4f738a; } #b_index #tabs_main .ui-tabs-nav li.ui-state-focus a:hover .tool_icon{ border-color:#4f738a; background-color:#4f738a; } /* Tabs body */ #b_index #tabs_main .ui-tabs-panel {border-radius:5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); margin-right:10px; width:75%; padding:40px 40px 40px 28%;border:1px solid #eee; } #b_index #tabs_main #t_currentA{padding: 40px 100px;} #b_index #tabs_main #t_riskSummaryA, #b_index #tabs_main #t_comingSoonA, #b_index #tabs_main #t_findadviserA{padding:20px;} #b_index #tabs_main .ui-tabs-panel:before{font-size:160px; color:#D8D1DC; position:absolute; top:40px; left:60px} #b_index #tabs_main .tool_intro{background:transparent; width:100%; padding:0; min-height: auto;} #b_index #tabs_main .tool_intro .intro_text, #b_index #tabs_main #t_protectionA div.protection_detail {width:100%; float:left; border:none; min-height:0; padding:0;} #b_index #tabs_main .tool_intro .intro_image, #b_index #tabs_main #t_protectionA div.protection_forecast{display:none;} #b_index #tabs_main .tool_intro .intro_image img, #b_index #tabs_main #t_protectionA div.protection_forecast img, #b_index #tabs_main .intro_image{display:none;} #b_index #tabs_main #t_comingSoonA .tool_intro .intro_image{display:block; width: 58%;} #b_index #tabs_main #t_comingSoonA .tool_intro .intro_image img{display:block;} #b_index #tabs_main #t_comingSoonA .tool_intro .intro_text{width: 38%;} #t_investments div.investment_detail{border:none; min-height:0; padding:0; width:100%;} .tool_intro .intro_image_2{display:none;} #t_savingsPlanner #investmentTable {width:100%; } #t_savingsPlanner #investmentTable td{white-space:nowrap;} #t_savingsPlanner #sp_forecast_beaker{width:100%; border:none; border-top:1px solid #ccc; padding:20px 0 0 0;} #t_savingsPlanner #sp_forecast_beaker .twocol2{width:60%;} #t_savingsPlanner #sp_forecast_beaker .twocol1 {width: 30%;} #t_portfolioBuilderB .tool_intro{background: url("resource?name=fund_picker_intro&companyName=mbeedemo5product") no-repeat !important; height:200px;} #t_guidanceA .ul_guides {padding: 25px 35px 0 0;} /* icon images for the intros */ #t_userDataA:before{content:"\ea7b"; } #t_incomeQuestionnaireA:before{content:"\ead7";} #t_protectionA:before{content:"\ec32";} #t_retirement:before{content:"\e604"; top: 20px !important;} #t_cashflowanalysisA:before{content:"\ec28";} #t_cashflowanalysisARO:before{content:"\ea4a";} #t_savingsPlanner:before{content:"\ea90";} #t_investments:before{content:"\eb8d"; } #t_portfolioBuilderB:before{content:"\ea06";} #t_guidanceA:before{content:"\ea48";} /* .icon_quicktoolsInvestment:before{content:"\eb8d";} .icon_portfolioBuilderB:before{content:"\ea06";} .icon_retirementA:before{content:"\e604"; font-size:24px; height: 21px; margin: -3px 0 0 -3px; float:left;} .icon_incomeQuestionnaireA:before{content:"\ead7";} .icon_comingSoonA:before{content:"\eb6a";} .icon_findadviserA:before{content:"\eb0a";} .icon_guidanceA:before{content:"\ea48";} .icon_cashflowanalysisA:before{content:"\ec28";} .icon_cashflowanalysisARO:before{content:"\ea4a";} .icon_savingsPlannerA:before{content:"\ea90";} */ /* Getting started */ /*#t_currentA h2{display:none;} #t_currentA div.intro_text{display:none;} #t_currentA div.tool_intro{background-repeat: no-repeat; background-position: top center; background-image: url("resource?name=getting_started_intro&companyName=mbeedemo5product"); min-height: 350px; margin: 40px 0 0;}*/ #t_currentA a.evalue_logo{display:none;} #t_currentA div.tool_intro{background-image:none;} /* Risk tab */ #b_index #tabs_main #t_riskSummaryA.ui-tabs-panel h2{margin-bottom:0!important; width:100%; float:none;} #t_riskSummaryA .tool_intro {padding: 0;} #t_riskSummaryA .riskSummaryDescription{display:block;} #t_riskSummaryA .selectedRisk, #t_riskSummaryA .assessedRisk {margin:10px 0 10px; padding:0; width:100%; border:none; box-shadow:none;} #t_riskSummaryA .container { } #t_riskSummaryA .forecast_column {background-color: #FFFFFF; border:none; border-left: 1px solid #ccc; padding: 10px 0 0 30px; border-radius:0; width:52%; position:inherit; box-shadow:none;} #t_riskSummaryA .forecast_column h3 {font-size: 18px;} #t_riskSummaryA .assessedRisk {border: medium none;} #t_riskSummaryA .risk_column {width:43%;} #t_riskSummaryA .riskButtonset {margin: 20px 0 20px; width: 100%;} #t_riskSummaryA .riskButtonset .ui-button-text-only .ui-button-text{font-size:1.6em; font-weight: normal; padding: 0.2em 0.6em;} #t_riskSummaryA .forecast_box {float:left; padding:0; } #t_riskSummaryA .forecast_box .twocol1{width:13%; margin: 0; position: absolute; top: 180px;} #t_riskSummaryA .forecast_box .twocol2{width:100%; height:auto; } #t_riskSummaryA .forecast_box table{margin: 115px 0 25px 120px;} #t_riskSummaryA #risk_summary{margin:0 auto 0; float:left;} #t_riskSummaryA .risk_label{font-weight:bold; font-size:1.2em; color:#333; display: block; margin: 10px 0;} #t_riskSummaryA .assessedRisk #but_risk_summary_questionnaire {margin: 10px 0;} #t_riskSummaryA .highlight{font-weight:bold;} #t_riskSummaryA .forecast_column .calculating{left:70px; top:55px;} #t_riskSummaryA .selected_risk_result{float:left} /*#t_riskSummaryA .riskButtonset .ui-button-text-only .ui-button-text{padding: 0 35%;}*/ #t_riskSummaryA .forecast_box table .return_data {font-size: 18px;} #t_riskSummaryA .forecast_box table td{font-size: 14px;} #t_riskSummaryA .highlight{font-weight:normal; color:inherit;} #t_riskSummaryA .forecast_column h3 + #t_riskSummaryA .forecast_column .hidden{display:none;} .key {border: 2px solid #FFF;} #t_riskSummaryA #risk_summary_assessed_risk_description{display:block;} /*Cashflow tab */ #tabs_main #t_cashflowanalysisA{background-image: url("resource?name=cashflowanalysisAIntro&companyName=mbeedemo5product&versionStamp=1"); background-position: 94% 14%; background-repeat: no-repeat;} #t_cashflowanalysisA > h2{visibility: hidden;} #t_cashflowanalysisA .tool_intro .intro_text p{visibility: hidden;} /* Fund Picker tab*/ #b_index #tabs_main #t_portfolioBuilderB.ui-tabs-panel{padding-left:27%;} /* Other tabs*/ #t_investments div.investment_forecast {display: none;} #b_index #adviser_list .dataTables_filter, div.contactAdviser #adviser_list .dataTables_filter {background:#f1f4f7!important; filter:none; ms-filter:"none";} #t_retirement .action_footer #nInOneIntro{display:none;} #t_retirement #nInOneRetirement .current_values_summary {width: 100%;} #t_retirement #nInOneRetirement .nInOneForecast {margin-top:20px; width: 100%; padding: 0;} #t_retirement .action_footer #nInOneIntro .intro_text{width: 100%; height:auto} #t_retirement .return_data {color: #666; font-size: 18px; font-weight:normal;} #t_retirement #forecast .emoticon a.help{margin-top:0} #b_index #tabs_main h3 {font-size: 18px;} #b_index .container_main .tabledata{border-top:1px solid #ccc;} #b_index .container_main .tabledata td, #b_index .container_main .tabledata th {padding: 10px 0; border:none;} #b_index .container_main .tabledata td, #b_index .container_main .tabledata th, #t_retirement #forecast .tabledata th.col1 {width: 66%; font-weight: normal;} /************************************************************** RISK QUESTIONNAIRE **************************************************************/ #dialog_risk_questions h2{font-size:32px;} #dialog_risk_questions .questionnaire_start_screen {margin:0; padding:10px;} #dialog_risk_questions #questionnaire_info .icon {display: none;} #dialog_risk_questions #questionnaire_info span {font-size: 22px; margin: 15px 0;} #dialog_risk_questions .questionnaire_start_screen .twocol2{background:#fff;} #dialog_risk_questions .inner {width:100%;} #dialog_risk_questions .questionnaire_start_screen .twocol2 {width:50%; box-shadow:none;} #dialog_risk_questions #questionnaire_list ul{list-style:disc;} #dialog_risk_questions #questionnaire_list li{font-size:14px;} /* Questions */ #b_retirement .questionContainer{border:none;} #b_retirement #questionProgress{float:left; border-bottom: 1px solid #ccc; width: 100%!important; text-align: center; padding: 10px 0;} #b_retirement #questionProgress li{margin:0px; float:none; padding:5px; display: inline-block;} #b_retirement #questionProgress li a{padding:0px; font-size: 0.8em;} #b_retirement #questionProgress li a.done{color:#666;} #dialog_risk_questions #page_content_risk {width:auto;} #b_retirement #statsQuestion .question h3 {color: #666666; font-size: 1.3em; font-weight: normal; line-height: 1.4em; margin: 0; padding:0; width: 100%; text-align:left;} .question ul.qresponse li, .question div.radio{background:#f1f4f7; color: #4f738a; filter:none; width: 100%; border-radius: 0; margin:2px 0; padding:0;} .question ul.qresponse li:hover, question ul.qresponse li:hover label{background:#f1f4f7; border:1px solid #f1f4f7;} .question ul.qresponse label:hover{background:none;} .question ul.qresponse li:after, .question div.radio:after { content: "\edba"; line-height: 1.8em; color: #BAC8D1; } .question ul.qresponse label, .question div.radio label{padding: 10px 10px 10px 0; width:84%; font-size: 1.1em; background:none; color:#4f738a;} .question ul.qresponse input, .question div.radio input {margin: 14px 10px; vertical-align:top;} #dialog_risk_questions{border-bottom: 1px solid #ccc; } /************************************************************** INCOME RISK QUESTIONNAIRE **************************************************************/ /* Intro */ .questionnaireIntro{padding:20px;} .questionnaireIntro .icon {display: none;} .questionnaireIntro .twoColContainer .twoCol1 p {font-size: 14px; margin-top: 20px;} .questionnaireIntro .twoColContainer .twoCol1 div {margin: 20px 0 25px;} .questionnaireIntro .twoColContainer .twoCol1 {float: left; margin-right:0; width: 45%;} .questionnaireIntro .twoColContainer .twoCol2{float:right; width: 50%; background:#fff;} .questionnaireIntro .twoColContainer .twoCol2 ul{ margin-right: 20px; list-style: disc outside none;} .questionnaireIntro .twoColContainer .twoCol2 ul li{font-size: 14px; padding-bottom: 10px; padding-left: 10px;} .questionnaireIntro .buttonContainer {float: right; clear: right;} .questionnaireIntro button.button_loud{padding: 20px; font-size:18px; font-weight:normal;} /* Questions inherited from risk quest */ /* Result*/ .questionnaireResult{float: left; padding: 40px; width: auto;} .questionnaireResult .questionnaireResultImage{float:left; padding:0px 20px; } .questionnaireResult .questionnaireResultText{float:right;} .questionnaireResult .questionnaireResultText h2{line-height: 1.4em;} .questionnaireResult .buttonContainer {float: left; clear:both;} .questionnaireResult button.button_loud{padding: 20px; font-size:18px; font-weight:normal;} .question .radio label:hover{background:none;} .question .radio:hover{background: #f1f4f7; border:1px solid #f1f4f7;} /************************************************************** QUICK TOOLS **************************************************************/ #quickTools_content {background:transparent; border-radius:0;} .containerTool { width: 100%;} /* Quick tools sticky footer */ #quickToolsBody {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} #quickToolsBody > form#controller {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} #quickToolsBody > form#controller > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} #quickToolsBody > form#controller > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /************************************************************** ISA FORECASTER **************************************************************/ /* Data inputs */ #qt_investment_content #investment .twocol1 {background:#fff; border-radius:0px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); border:none; padding: 5px 15px 10px; width: 36%;} #qt_investment_content #investment .form label, #qt_investment_content #investment .form span.label {width:100%; margin:0 0 5px 0; padding:0 0 0 15px; line-height: 1.6em;} #qt_investment_content #investment .accordion .form li {padding: 15px 0; border-color:1px solid #eee;} #qt_investment_content #investment #li_inv_risk_profile{margin-top:0;} #qt_investment_content #investment .form span.currency {margin: 5px 0 0; font-size: 18px; font-weight:normal;} #qt_investment_content .form input, #qt_investment_content .form select {margin-left:15px; font-size: 18px; font-weight:normal;} #qt_investment_content .form input.currency {margin-left: 10px;} #qt_investment_content .form span.data {margin: 0 0 0 15px;} #qt_investment_content #investment .form .buttonset {margin-left: 15px;} #qt_investment_content #investment .form .buttonset label{width:auto; margin: 0; padding: 0;} #qt_investment_content #investment #li_inv_risk_profile .buttonset span {padding: 4px 15px;} #qt_investment_content #li_risk_profile{display:none;} #qt_investment_content #investment .form .buttonset{background:url("resource?name=risk-scale-labels&companyName=mbeedemo5product") bottom no-repeat; padding-bottom: 38px; padding-left: 5px; padding-right: 5px;} #qt_investment_content .ui-slider-horizontal .ui-slider-handle{top: -0.7em;} #qt_investment_content #inp_investment_term ~ .sliderContainer{width:57%} /* Forecast */ #qt_investment_content #investment .twocol2{background:transparent; padding:0;} #qt_investment_content .forecastOptions select {font-size: 16px; padding: 6px;} #investment div#explain{left:auto; padding:0; right: 6px; top: 20px; width: auto;} #investment div#explain a {background:none; padding: 6px 0 15px 28px; padding:0; position:initial;} #investment #investment_currentpod {width: 455px;} /* Forecast results */ #qt_investment_content #investment #multiYearTermSliderContainer .ui-slider .ui-slider-handle{background:transparent; color:#4f738a; font-size: 32px; position: relative; top: -9px;} #qt_investment_content #investment #multiYearTermSliderContainer .ui-slider .ui-slider-handle:before{ content:"\edc9";} #qt_investment_content #investment #multiYearTermSliderContainer .ui-slider .ui-slider-handle:hover{background-color:transparent;} #qt_investment_content #investment .isaResults{padding-top: 10px;} #qt_investment_content #investment .isaResults #isaResultsHeading {background-color: #4f738a;} #qt_investment_content #investment .isaResults #investment_results_table {border: 2px solid #ccc;} #qt_investment_content #investment .isaResults th.col1 {width: 22% !important;} #qt_investment_content .results table {width:100%; background:#fff;} #qt_investment_content #investment #isaWarningTable, #investment #capitalLossMessageContainer{background:#fff;} #qt_investment_content #investment #multiYearTermSliderContainer .ui-slider-horizontal {background: #DCE3E8; margin: 8px 0 0 9px;} #qt_investment_content #investment #investment_results thead th {font-size: 16px; padding: 5px 30px 5px 0; text-align: right;} #qt_investment_content #investment #investment_results thead th label{padding-left:5px;} #qt_investment_content #investment #investment_results thead th input{float:right; margin:5px 3px 0 5px} #qt_investment_content #investment .bk_forecast1 label{border-left: 17px solid #3394DB;} #qt_investment_content #investment .bk_forecast2 label{border-left: 17px solid #FF9B04;} #qt_investment_content #investment .bk_forecast1 {border:none!important;} #qt_investment_content #investment .bk_forecast2 {border:none!important;} #qt_investment_content #investment .isaResults #investment_results_table table td, #investment .isaResults #investment_results_table table th {font-weight:normal; border-bottom: 1px solid #eee!important; background:transparent!important;} #qt_investment_content .return_data, #qt_investment_content span.return_data_cash, #investment #investment_results #investment_cash_capital_loss {color: #333;} #qt_investment_content #investment .isaResults #isaResultsHeading #isaResultsYearsHeading {font-size:16px; width: 58%;} #qt_investment_content #investment .isaResults #isaResultsHeading #isaResultsInvestmentAmountHeading {font-size: 16px; width:auto; border-left: 20px solid transparent; margin: 15px 5px; padding: 0 10px;} #qt_investment_content .results span.return_data, #qt_investment_content .results span.return_data_cash {padding-right: 23px !important;} /************************************************************** ISA Fund picker **************************************************************/ /* Intro */ #b_portfoliobuilderb #home_page_container h1, #b_portfoliobuilderb #home_page_container h2, #b_portfoliobuilderb #home_page_container p, #b_portfoliobuilderb #home_page_guidance {display:none;} #b_portfoliobuilderb #route_picker {border:none; width:100%;} #b_portfoliobuilderb #route_picker #but_page_route_route_managed_funds{display:none;} #b_portfoliobuilderb #route_picker #home_page_routes_table_header{display:none;} #b_portfoliobuilderb #portfolio_builder_b_home_page_content {width: 100%;} #b_portfoliobuilderb #route_picker{background:url("resource?name=portfolio-builder-intro&companyName=mbeedemo5product") no-repeat; height: 290px; padding:0;} #b_portfoliobuilderb #home_page_routes_table .button_loud{width:60%; margin: 100px; float: right; color:#fff!important; background:#4f738a;} #b_portfoliobuilderb #home_page_container{margin-bottom:130px;} /* Stop footer cropping content when browser window shrunk*/ /* Portfolio Builder footer (not Flex box) */ #b_portfoliobuilderb > form {height:100%} #b_portfoliobuilderb > form > #pageContainer{height:auto; min-height: 100%} #b_portfoliobuilderb > form > #pageContainer > #page_footer{position: absolute; z-index:1; bottom:0;} /* Page 1*/ #b_portfoliobuilderb > form > #pageContainer > #page_content > #page_footer{display:none;} /* Page 2 - different place in markup can't get it to work*/ /* Portfolio Builder footer for Page 2 (when new page name is prommoted)*/ #b_portfoliobuilderb.b_portfolio > form > #pageContainer{position:relative;} #b_portfoliobuilderb.b_portfolio > form > #pageContainer > #page_content{position:static;} #b_portfoliobuilderb.b_portfolio div.container.portfolio_page_container{margin-bottom:100px} #b_portfoliobuilderb.b_portfolio > form > #pageContainer > #page_content > #page_footer {bottom: 0; left: 0; position: absolute; width: 100vw; z-index: 1; display:block;} /* Main tool */ #b_portfoliobuilderb div.container.portfolio_page_container {background:transparent; border-radius:0; margin:0; padding:0; width:100%; box-shadow:none;} #b_portfoliobuilderb #portfolio_builder_b_page_top{display:none;} #b_portfoliobuilderb #target_portfolio {background: transparent;} #b_portfoliobuilderb #portfolio_summary_title_section {background: transparent; width:auto;} #b_portfoliobuilderb #target_portfolio #target_portfolio_fieldset {padding: 0;} #b_portfoliobuilderb #user_risk_profile {display: none;} #b_portfoliobuilderb #portfolio_target_risk{margin-top:20px;} #b_portfoliobuilderb #target_portfolio .help {margin-top: -5px;} #b_portfoliobuilderb #funds_table {border: 0 solid #EEEEEE; margin-top: 10px; width: 100%;} #b_portfoliobuilderb #funds_table th:first-child{border-left: 1px solid #fff;} #b_portfoliobuilderb #funds_list .tr_asset .asset input { font-weight: normal; padding:0;} #b_portfoliobuilderb #funds_list th {border-color:transparent;} #b_portfoliobuilderb .navigation {background:transparent;} #b_portfoliobuilderb #compliance_text {margin:10px;} #b_portfoliobuilderb #but_add_portfolio_to_basket_2{display:none!important;} #but_filter_0_0, #but_filter_0_1{display:none;} #filters_portfolio_number_of_funds {margin:0; padding:10px 0;} #portfolio_summary h2#portfolio_summary_label {font-size:24px;} #funds_table th:first-child{border-left:none;} .dataTables_paginate .paginate_button {height: 22px; background-color:#4f738a; border:2px solid #4f738a;} .dataTables_paginate .paginate_button:hover{border-color:#4f738a ;} #portfolio_summary_title_section {padding: 20px 0 0 10px;} #portfolio_summary h2#portfolio_summary_label{margin:0;} #portfolio_summary_table{margin-top:10px; border: 0px solid #EEEEEE;} #portfolio_summary_table th { padding: 7px 5px !important; font-weight:normal; border-left: 1px solid #EEEEEE; border-right: 0px solid #EEEEEE;} #portfolio_summary_table th:first-child, #portfolio_summary_table td:first-child{border-left: 1px solid #fff;} #portfolio_summary_table td {padding: 7px 5px; vertical-align: top; color:#333;} #portfolio_summary_table #risk_rating_message p{margin-top:0;} #portfolio_summary_table_section { padding: 10px 18px 10px 10px; width: 73%;} .portfolio_summary_table_header_column_text {color: #666666;} #portfolio_summary_table{padding:0; margin:0;} #portfolio_allocation_percentage {width: 86px;} #portfolio_builder_b_page_bottom {background:transparent;} #funds_list #green_arrow_guide { /* background: rgba(0, 0, 0, 0) url("../../../resource?name=green_arrow&company=moneybee") no-repeat scroll left top;*/ left: 324px; margin-top: 50px; padding: 72px 0 20px 46px; width: 390px;} #funds_list #green_arrow_guide_body_no_suggested_route { /* background: #f4fee9 url("../../../resource?name=sample_portfolio&company=moneybee") no-repeat scroll 10px 10px;*/ padding: 8px 10px 35px 197px; width: 100%;} #funds_list .guide_text_1 {width:auto;} .cr2, .rating_2 {background-position: 0 -10px;} .cr4, .rating_4 {background-position: 0 -32px;} .cr5, .rating_5 {background-position: 0 -44px;} .input_area .help {background:transparent;} /* Portfolio Builder Sticky Footer*/ .b_portfoliobuilderb {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} .b_portfoliobuilderb > form#controller > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} .b_portfoliobuilderb > form#controller > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} .b_portfoliobuilderb > form#controller > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* Fund picker*/ .b_fundpickera #funds_page{background:transparent; box-shadow:none;} .b_fundpickera #funds_page .header{display:none;} .b_fundpickera #funds_page .navigation {background:transparent;} .b_fundpickera #funds_page .navigation .selected{display:none;} .b_fundpickera #funds_page .filter_heading{display:none;} .b_fundpickera #funds_page .filters {background:transparent;} .b_fundpickera #funds_page .funds {width: 76%;} .b_fundpickera #funds_page .input_area div.ui-slider {margin-top: 5px; width: 80%;} .b_fundpickera .tabledata td:first-child {width: 45%;} .b_fundpickera .table_funds.tabledata td.td_adv_search_primaryAssetclass{width: 19%;} .b_fundpickera .funds .table_funds .td_adv_search_add_nav{min-width:45px;} .b_fundpickera .funds .tabledata .th_adv_search_add_nav {width: auto;} .b_fundpickera #fund_search_results th span {color: #117FBA;} .b_fundpickera #fund_search_results th{cursor:pointer;} /* Fund table Headings. Clicking headings will sort the table. cursor for feedback to user.*/ /************************************************************** Savings planner **************************************************************/ #b_savings div#tabs_planner {margin-top:100px;} #b_savings .tab_body .data_section {border-right: 1px solid #ccc;} #b_savings .graph_term {width: 130px;} #b_savings .graph_type {width: 215px;} #b_savings .selected_option {font-weight: normal;} .button_dropdown label {font-weight: normal;} #b_savings .multiyear_single {padding: 15px 5px 0 0; width: 40%;} #b_savings .iconMagnify, #b_savings .pencilIcon{display:none;} #b_savings .sliderContainer{float:left; width:85%; margin-top:10px} #b_savings #risk_slider{margin-top:-20px;} #b_savings #inp_risk{margin:10px 0 0 0; padding:0 0 10px;} #b_savings .multiYearTable .multiYearComparison {padding: 10px 20px;} #b_savings .multiyear_table {padding-left: 0; width: 100%; margin-top:20px;} #b_savings .multiYearTable{border:none;} #b_savings > form:last-of-type:not(.report){height:100px; position:relative; webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* Sticky footer*/ /* Advanced fund search */ #advanced_search #advanced_search_fields #fields1 label {font-weight: normal; width: 25%;} #advanced_search #advanced_search_fields fieldset select {margin-left:0;} #advanced_search #fields2{display:none;} #advanced_search #advancedSearchRestrictFunds{float:left; width:auto;} /************************************************************** Protection planner **************************************************************/ #b_protection .container, #b_protection #main_content, #b_protection #main_container {padding:0; margin: 5px 0 0; box-shadow:none; background:transparent; width:100%;} #b_protection #main_content .twocol1 {width:48%;} #b_protection #cover_basis {border-bottom:none} #b_protection #container .form {background:#fff; padding:10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); border:none; border-radius:0px; margin:20px 4px 8px;} #b_protection #container .form table{border:none;} #b_protection #container .form input.addButton[type="submit"], #b_protection #container .form input.addButton[type="button"] {background:none; margin: 0; padding: 0;} #b_protection #subNavBarForm{display:none;} #b_protection .form input.currency{width: 90px;} #b_protection #fund_search {margin-left: 24px;} #b_protection #a_add_funds_manual a.pencilIcon, #b_protection #a_add_funds_manual .pencilIcon {background:transparent;} #b_protection #cover_basis .ui-slider-horizontal { height: 8px; margin-top: 8px;} #b_protection div#dataEntryDialog div#expenses{width:99%;} #b_protection div#dataEntryDialog div#expenses div.accordianHeader{padding-right:0;} #b_protection div#dataEntryDialog div#product_maint ul#riskBasedFunds{margin-left:24px;} #b_protection div#dataEntryDialog div#product_maint ul#riskBasedFunds label{width:170px;} #b_protection div#dataEntryDialog div#product_maint ul#riskBasedFunds li{width:96%;} #b_protection div#dataEntryDialog div#debt_maint li#debt_interest_rate li.debt_interest_adjustment_li label {margin-left:12px;} #b_protection #tr_expenses .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_debts .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_newCover .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_cover .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_expensesReduction .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_income .ui-slider-horizontal .ui-slider-handle, #b_protection #tr_assets .ui-slider-horizontal .ui-slider-handle { border-width:0; } #b_protection #container .form table td.col2{background:#f5f5f5;} /* red handle */ #b_protection #tr_expenses .ui-slider-horizontal .ui-slider-handle:hover{ border-color:#c75558; } /* purple handle */ #b_protection #tr_debts .ui-slider-horizontal .ui-slider-handle:hover{ border-color:#990066; } /* green handle */ #b_protection #tr_assets .ui-slider-horizontal .ui-slider-handle:hover, #b_protection #tr_cover .ui-slider-horizontal .ui-slider-handle:hover, #b_protection #tr_newCover .ui-slider-horizontal .ui-slider-handle:hover, #b_protection #tr_expensesReduction .ui-slider-horizontal .ui-slider-handle:hover, #b_protection #tr_income .ui-slider-horizontal .ui-slider-handle:hover{ border-color:#339900; } .form .sliderContainer .ui-slider-horizontal {border-color:#eee;} /* Forecast */ #b_protection #graphOptions{width:auto;} #b_protection #inp_inflationType{display:none;} #b_protection #graphOptions select {padding: 5px; margin: 5px 0 0;} #b_protection p#lifeMessage{float: left; width:auto; margin: 20px 0 30px;} #b_protection .reportContainer {margin: 0 0 20px 0;} /* Protection Sticky Footer*/ #b_protection {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} #b_protection > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} #b_protection > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} #b_protection > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* #b_protection #graphOptions{float:left; width:auto; margin-left:10px;} #b_protection #graphOptions select{font-size:16px; margin:5px 0px; padding: 5px; width:auto;} */ /************************************************************** 3-in-1 **************************************************************/ /* Stepped data entry */ /*#b_stepped_data_entry #page_content, #b_level_mini1 #page_content, #b_retirement_intro #page_content{padding-top:20px;}*/ div#targetCalcTabs .ui-tabs-panel {border-radius:0;} #total_income{border-radius:0 !important; padding:10px !important;} .slider label, .question_title{font-family:'Arial', sans-serif !important;} #b_stepped_data_entry #page_content{padding-top:0;} #inputs_section {background:#fff; border-radius:0px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); min-height: 420px; border:1px solid #eee;} #inputs_section .input_guidance{background:transparent; margin-bottom:0;} #inputs_section .input_guidance p{padding:0; text-align:center;} #inputs_section .slider label.inputsHeading, #inputs_section label.inputsHeading {font-size: 28px; min-height: auto;} #inputs_section .slider input {font-size: 30px;} .progressControls{max-width:100%;} .progressControls .progressMeter{right: 25%; text-align: center; width: 50%;} .progressControls .progressItem {background: none repeat scroll 0 0 #ddd; border-radius: 20px; height: 30px; margin: 20px 10px; width: 30px;} .progressControls .progressItem.progressDone{background:#999; } #inputs_section .slider input.but_slide[type="button"] {height: 41px; width: 41px;} #inputs_section .ui-slider .ui-slider-handle{ width:38px; height:38px; top: -1.1em; } #inputs_section .horizontalSlider {margin: 18px 0 0;} /* Material Design changes */ #inputs_section .slider input.but_slide_down[type="button"], .slider input.but_slide_down[type="button"]:hover { /* background-color:#4f738a; */ background-image:url("resource?name=minus&companyName=mbeedemo5product") !important; background-repeat:no-repeat !important; background-position:center center!important; background-size:80% auto !important; } /* the plus/minus buttons on the sliders */ #inputs_section .slider input.but_slide_down[type=button], #inputs_section .slider input.but_slide_down[type=button]:hover, #inputs_section .slider input.but_slide_down[type=button]:focus, #inputs_section .slider input.but_slide_down[type=button]:active, #inputs_section .slider input.but_slide_up[type=button], #inputs_section .slider input.but_slide_up[type=button]:hover, #inputs_section .slider input.but_slide_up[type=button]:focus, #inputs_section .slider input.but_slide_up[type=button]:active { background-color:#4f738a; border-color:#4f738a; } #inputs_section .slider input.but_slide_down[type=button]:focus:active, #inputs_section .slider input.but_slide_up[type=button]:focus:active { background-color:#4f738a; border-color:#4f738a; } /* #inputs_section .slider input.but_slide_up[type="button"], .slider input.but_slide_up[type="button"]:hover { background-color:#4f738a; } #inputs_section .slider input.but_slide_down[type="button"]:focus, #inputs_section .slider input.but_slide_up[type="button"]:active, .slider input.but_slide_down[type="button"]:focus, .slider input.but_slide_up[type="button"]:active { background-color:#4f738a; border-color:#4f738a; } */ #b_stepped_data_entry #div_risk_choice{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ padding-bottom:20px; } #b_stepped_data_entry #div_risk_choice.notYetStyledByJQuery{display:none;} /* FOUC*/ #b_stepped_data_entry #inputs_section #div_risk_choice.ui-buttonset .ui-button {width:auto; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #inp_risk.ui-buttonset .ui-button {color: #4f738a; border: 2px solid #f1f4f7;} #inp_risk.ui-buttonset .ui-state-active{border: 2px solid #4f738a; background-color:#4f738a;} #inp_risk.ui-buttonset .ui-state-hover{border: 2px solid #f1f4f7;} #inputs_section #risk_buttons {white-space: nowrap;} #inputs_section .risk_desc p {font-size: 14px;} #inputs_section .fund-legend {margin: 10px 0 0 20px;} #inputs_section td.legendLabel {color: #666; font-size: 16px;} #inputs_section #li_risk_choice_default p {margin-left:0; margin-right:0; width: 76%;} #inputs_section .risk_choice p {margin-left:0; margin-right:0;} #inputs_section .risk_desc {margin: 40px auto 0; padding:20px 0 0 0; /*max-width:600px;*/ float:none} /*inputs_section .fund-split {margin-left:50px;}*/ #inputs_section .buttons_container{width: 84%;} .tableFunds {border: 1px solid #ccc;} .tableFunds tfoot th, .tableFunds thead th { background: none repeat scroll 0 0 #fff; font-weight:bold; font-size:0.95em; border-left: 0px solid #fff; padding:10px; color:#666; } .tableFunds th, .tableFunds td{padding:10px!important; vertical-align: middle;} .tableFunds td {border-left: 0px solid #fff;} .tableFunds label { display: inline; width:auto!important; float:none!important; } .tableFunds span.label{padding:0;} .billboard h2 {font-family:'Arial', sans-serif; color:inherit;} #b_level_mini1 .container{background:#fff!important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); margin-bottom:20px;} #b_level_mini1 #level_info h3 {color:#666;} #b_level_mini1 > #page_footer{z-index:1;} /* Expect footer to move if markup is ever fixed*/ #b_level_mini1 #pageContainer{min-height:auto} /* For sticky footer*/ /* you could have X at age Y */ #b_level_mini1 #person_info { width:100%; border:1px solid #f1f4f7; } #b_level_mini1 #level_info { display:none; } /* 3-in-1 comparison */ #initial_income_question #iiq_intro_section h2 {font-family:'Arial', sans-serif; color:inherit; margin:0 0 0 20px; width: 100%;} #initial_income_question .option h3{font-family:'Arial', sans-serif;} #initial_income_question #iiq_intro_section .intro_text {font-size: 26px; margin-top: 8px;} #initial_income_question #settings {background:transparent; box-shadow:none;} #initial_income_question #income_options { background:transparent; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #initial_income_question .infotab{ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } #initial_income_question .option{/*border:none!important;*/ width:auto; flex-grow:1;} #initial_income_question .option h3 {width: 65%;} #li_risk_choice_default img {width:auto; margin-right: 4%; margin-top: 4%; margin-left:0;} #initial_income_question .option .but_help{background:transparent; border-color:transparent;} #initial_income_question .option .but_help:hover .but_text{text-decoration:none;} #initial_income_question .option .but_help:focus { outline-color:#4f738a ; } #initial_income_question .option .but_help .icon{display:none;} #initial_income_question .option .button_loud:after{content: "\edba"; margin-left:10px; float: right;} /* #initial_income_question .button_prev{margin-left:20px;} */ #initial_income_question .showTab{float:left;min-height:0} #initial_income_question #settings #market_conditions {width: 80%;} #initial_income_question #settings #market_conditions p {margin: 8px 54px 0 0; width: 245px;} #initial_income_question #market_conditions #sliderWrapper_market_returns {height: 58px; margin: 0 ; width: 389px;} #initial_income_question #sliderWrapper_market_returns { /* one of these properties had the develish !important on it. work out which one, */ background-image: url("resource?name=sliderMarketReturnsBackground&companyName=mbeedemo5product"); background-repeat:no-repeat; background-attachment: scroll; background-position: right center ; background-color:transparent; } #initial_income_question #slider_market_returns {left: 0; top: 34px; width:40%;} #initial_income_question #slider_market_returns.ui-slider .ui-slider-handle {margin-left: -0.8em; top: -0.5em;border-radius:50%;} #initial_income_question #settings #sublinks {width: 20%;} #initial_income_question #settings #sublinks a {border:none; padding: 2px 0; background:transparent;} #initial_income_question #settings #sublinks a:hover{border:none;} #dialog_ninone_widget #initial_income_question{float:left;width:100%;} #dialog_ninone_widget #initial_income_question #iiq_intro_section h2 {margin:0 0 0 10px; width: 96%;} #dialog_ninone_widget #initial_income_question #income_options{background-color:transparent} #dialog_ninone_widget #initial_income_question #settings{background-color:transparent; border: none; box-shadow: none; } #dialog_ninone_widget #initial_income_question #settings #market_conditions {width: 100%;} #dialog_ninone_widget #initial_income_question #settings #market_conditions p {margin: 8px 0 0 0; width: 100%;} .choices_general_help_icon .icon-info { color: #4f738a; float: right; font-size: 25px; margin-top: 27px; } #b_retirement_intro .infotab #age_warning1 {margin-left:2px;} /* IE8 and IE9 bug. Help icon wrapping to next line. Reduce left margin slightly*/ #b_retirement_intro .infotab{ /* flex box stuff for the Annuity, drawdon, lumpsum tabs*/ display:block; /* Remove fIexbox for IE10 */ display:-webkit-inline-flex; /*Safari7-8,Android4.1-4.3*/ display:inline-flex; /* Decent browsers*/ width:32%; /* Width for non-flexbox browsers*/ flex-direction:column; /* The 3 Options are laid out in a horizontal row, BUT allow each option to grow *verticaly* to be the same height*/ } /* 30/03/16 - fix for spacing of the three 'cards' */ #initial_income_question #income_options { padding:0; } #b_retirement_intro .infotab { margin-right:1.5%; margin-left:0; } #b_retirement_intro #infotab2{ margin-right:0; } #initial_income_question .option { border:1px solid #f1f4f7; } #initial_income_question #settings { padding:5px 0 10px 0; } #initial_income_question #iiq_intro_section h2 { margin-left:0; } /* 3 in 1 data entry - Sticky Footer*/ #b_stepped_data_entry {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} #b_stepped_data_entry > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} #b_stepped_data_entry > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} #b_stepped_data_entry > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* Retirement intro page - sticky footer*/ #b_retirement_intro {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} #b_retirement_intro > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} #b_retirement_intro > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} #b_retirement_intro > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /************************************************************** Retirement planner **************************************************************/ /*#b_retirement #pageContainer{background:url("resource?name=header-bar&companyName=mbeedemo5product") repeat-x top #f9f9f9;}*/ #b_retirement .container_main{ /*width:auto; min-width:990px; max-width:990px; /*max-width:1200px;*/ min-height:auto;} #b_retirement .twocol1 {margin:0;} #b_retirement .twocol2 {margin-top: -2px;} #b_retirement #a_pensions:after{content:""; display:none;} #b_retirement #chartBars {margin-top: 20px; width:100%;} #b_retirement #targetSlider .ui-slider-range, #b_retirement #targetLumpSumSlider .ui-slider-range {background:transparent;} #b_retirement #targetSelector input.simpleTarget, th.simpleTarget {color: #666;} #t_retirementOptions .slider_icon {margin-right: 10px; width: 50px;} #t_retirementOptions h3 {margin: 10px 0 6px 10px;} .extra_links {margin: 15px 15px 0;} .extra_links a{color:#4f738a; font-weight:normal; font-size: 16px;} .extra_links span{display:none; background:none;} .extra_links span.report{background:none;} #b_retirement .twocol2 .container h2{font-size:26px;} #b_retirement #t_bars .state_benefit_output {font-size: 14px;font-weight: normal; color:#333;} #b_retirement #retirementOptionsButtonSet{margin: -10px 0 20px;} #b_retirement #tabs_planner.ui-tabs .ui-tabs-nav{margin:0;} #b_retirement #tabs_planner.ui-tabs .ui-tabs-nav li a{padding: 0.5em 8px;} #b_retirement #t_bars table th.col1 {font-weight: normal; padding: 10px 0; width: 17% !important;} #b_retirement .twocol2 {width:55%;} #b_retirement #t_bars table .emoticon {margin:0;} #b_retirement .emoticon { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size:42px; padding:0; border:none; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background:none;} #b_retirement .emo_tick:before {content:"\e603"; color:#00a667;} #b_retirement .emo_cross:before {content:"\e602"; color:#A12743;} #b_retirement .state_benefit_output {width:100%} #b_retirement .warning_box{width:100%} #b_retirement #dialog_target{overflow:hidden;} #b_retirement #dialog_target #help_icon {width: auto; color:#4f738a} #b_retirement #dialog_target #help_icon:hover{color: #4f738a } #b_retirement .sliderContainer{margin-top:7px;} #b_retirement .sliderContainer .horizontalSlider{margin-top:8px;} #b_retirement .state_benefit_output span{color:inherit; font-weight: bold} #b_retirement .riskChargeContainer {margin-top: 20px;} #b_retirement .riskSlider.slider .sliderOutput {padding-top: 20px;} /* Retirement Tool. Old Skool Sticky footer. Turn off body{display:flex} since it breaks $("tr").show() */ #b_retirement {float:left; height:auto; display:block; min-height: 100vh;} /* all children floated, so give it Layout*/ #b_retirement > #pageContainer{ -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #b_retirement > #pageContainer{ margin-bottom:100px;} /* make room for absolutely positioned footer*/ #b_retirement > form:nth-of-type(2) { position: relative; /*Was absolute, but it overlaps with main content*/ height: 100px; bottom: 0; } /* #page_footer sits in this form*/ /* Retirement Tool. Align "Forecast Explained" and "create summary report", but only on Bunker Demo (different markup. Different order of div#extraLinks)*/ #b_retirement .container_main > div#extraLinks{position:absolute; right:0;} #b_retirement div#extraLinks ~ form#controller > div.twocol2{ margin-top: 40px; margin-top: 2.5rem;} /* Risk Questionnaire (within Retirement Tool)*/ /* whole tool was written with the old Box Model. Quick fix ...*/ #b_retirement #dialog_risk_questions .q_pic{box-sizing:content-box}/*width:220px;*/ #b_retirement #dialog_risk_questions .question{box-sizing:content-box} #b_retirement #dialog_risk_questions .questionContainer{box-sizing:content-box; -moz-box-shadow:none !important; -webkit-box-shadow: none !important; box-shadow:none !important; padding:0; width:100%; margin-top:20px;} #b_retirement #dialog_risk_questions .q_nav{box-sizing:content-box; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important; background:#f5f5f5; border:none;} #b_retirement #dialog_risk_questions .questionAndResponse{box-sizing:content-box} #b_retirement #dialog_risk_questions .question ul.qresponse{box-sizing:content-box} #b_retirement #dialog_risk_questions .question ul.qresponse label{box-sizing:content-box; display: inline-block!important; width:78%; margin-top: 0 ; margin-left: 0; padding-top:5px; padding-bottom:5px; color:#333; font-weight:normal;} /*Nasty !important to override inline style*/ #b_retirement #dialog_risk_questions .question ul.qresponse input[type="radio"]{box-sizing:content-box; margin-top:10px; margin-bottom: 10px;} #b_retirement #dialog_risk_questions .question ul.qresponse li::after{font-size:20px} #b_retirement .q_nav span.stats_arrow{background:transparent; padding:0 0 0 15px;} #b_retirement .q_nav span.stats_arrow:after{content:"\edc2"; font-size: 33px;} /* previous */ #b_retirement .q_nav span.statsNext:after, #b_retirement .q_nav span.stats_arrow.statsCalc:after, #b_retirement .q_nav span.stats_arrow.statsFinish:after{content:"\edba"; font-size: 33px;} /* Target estimator */ div#targetCalcTabs {float: left;} div#targetCalcTabs .ui-tabs-nav {float: none; padding-top: 0; position: relative; right: 0; top: 11px; width: 73%; background: #fff!important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-default {background: #f1f4f7 !important; color:#4f738a !important; border-color:transparent !important; width: 31%!important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-default:hover{background:#4f738a!important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-default:hover a{color:#fff !important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-active, div#targetCalcTabs table tr.expenseRow td.expenseButton label.ui-state-active {background-color: #4f738a !important; border-color: #4f738a !important; padding:0px!important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-default a {padding: 7px 10px; width: 100%; float:left!important;} div#targetCalcTabs ul#target_tabs_ul li.ui-state-active a {background-color: #4f738a !important; color: #fff !important;} div#targetCalcTabs a span.title {margin:0;} div#targetCalcTabs a span.cat_total{margin:0; float: right; width: auto;} div#targetCalcTabs .ui-tabs-panel {background: #fff; border-color: #4f738a !important; color: #666; float: left; width: 73%!important;} div#targetCalcTabs.tabs_right .ui-tabs-nav .ui-corner-top {border-radius: 5px 5px 0 0; margin: 0 0 0 10px !important; width: 31%;} div#dialog_target .icon_fillDown {height:24px;} div#dialog_target div#targetCalcTabs table thead td.buttonContainer a.fillDown span.icon_fillDown { display:none!important; } div#dialog_target div#targetCalcTabs table thead td.buttonContainer a.fillDown .ui-button-text:before { content:"\edc6"; font-size:32px; color:#4f738a; } #dialog_target #total_income dl.income_type dt { float: left; } #dialog_target #total_income dl.income_type dd#budget_total_gross { float: right; } #dialog_target #total_gross{ font-size:60px; } div#dialog_target div#targetCalcTabs .expenseRow{border-bottom:1px dashed #ccc!important;} div#dialog_target input.customTargetAmount {top: 15px; right: 14px; padding: 3px 5px;} div#targetCalcTabs .ui-widget-content .ui-state-default{background: #eee none repeat scroll 0 0 !important; color:#4f738a; border:1px solid #eee!important; height:auto; font-size: 14px; padding: 0;} div#targetCalcTabs .ui-widget-content .ui-state-hover{border:1px solid #ccc!important;} div#targetCalcTabs .ui-widget-content .ui-state-active{color:#fff;} div#dialog_target div#targetCalcTabs table td {/*border-bottom: 1px dashed #ccc;*/ padding:10px 5px;} div#dialog_target div#target_value_type {width: 100%;} #dialog_target{position:relative;} #dialog_target .but_help {background: #fff none repeat scroll 0 0; border: 0 none; border-radius: 0; padding: 0; float:right;} #dialog_target a.but_help:hover { text-decoration:underline!important; } #dialog_target .but_help .icon {display:none;} #dialog_target #help_icon{font-family:Arial,sans-serif;} #dialog_target #help_icon:before{content:normal;} #dialog_target #help_icon .but_text{font-size:15px;} #dialog_target div#total_income {background-color: #4f738a; border: 0 none; padding: 20px; top: 118px; width: 24%;} #dialog_target #total_income dl.tweak_1 {margin-bottom: 20px !important;} #dialog_target #total_income dl {color: #fff;} #dialog_target .target_data {color: #fff;} #dialog_target #set_target {bottom: 0; /*top: auto;*/} #dialog_target #set_target p {margin-top:0; text-align:right;} #dialog_target #set_target .target_data {color: #333; display: inline-block;font-size: 36px;font-weight: normal; padding-top: 10px;} div#targetCalcTabs .ui-tabs-panel {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} div#dialog_target div#targetCalcTabs ul#target_tabs_ul li.ui-state-default {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} div#dialog_target div#targetCalcTabs ul#target_tabs_ul li.ui-state-default a {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} div#dialog_target div#targetCalcTabs ul#target_tabs_ul li.ui-state-active, div#dialog_target div#targetCalcTabs table tr.expenseRow td.expenseButton label.ui-state-active {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} div#dialog_target div#targetCalcTabs ul#target_tabs_ul li.ui-state-active a {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} div#dialog_target div#targetCalcTabs table thead td.buttonContainer a:hover.fillDown {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"!important;} /* Comparison popup */ #initial_income_question #iiq_intro_section .intro_text {display: inline-block; margin-top: 8px; vertical-align: top;} #initial_income_question #iiq_intro_section .currencyMobile{display: inline-block; margin-top: 8px; vertical-align: top;} /* Retirement Summary page. Old Skool Sticky footer. Turn off body{display:flex} since it breaks $("tr").show() */ #b_retaction {float:left; height:auto; display:block;} /* all children floated, so give it Layout*/ #b_retaction > #pageContainer{ -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #b_retaction > #pageContainer{ margin-bottom:100px;} /* make room for absolutely positioned footer*/ #b_retaction > form:nth-of-type(2) { position: absolute; height: 100px; bottom: 0; } /* #page_footer sits in this form*/ /************************************************************** Pensions Freedom Planner (PFP) **************************************************************/ /* Responsive tweaks */ #b_retirementPlan #pageContainer{/*background:$background-color;*/ clear:both; padding:0; width:100%; margin:0px auto; min-height: 900px; height: auto !important; overflow:hidden; border-top:0 solid #fff; border-radius: 0px; position:relative; background-image: linear-gradient(#3e1051 78px, #703F71 79px, #703F71 127px, #F9F9F9 130px);} #b_retirementPlan #pageContainer::after{content: ""; visibility: hidden; display: block; height: 0; clear: both;} #b_retirementPlan #page_content{min-height:1000px; padding-bottom:0; width:100%; min-width:inherit; max-width:1440px; margin:0 auto; float:none;} #b_retirementPlan #page_content, #b_retirementPlan #container_main, #b_retirementPlan #tabs_main {overflow: visible;} #b_retirementPlan #main_content{width:100%; min-width:inherit; max-width:1440px; margin:0 auto; float:none;} #b_retirementPlan #main_content::after{content: ""; visibility: hidden; display: block; height: 0; clear: both;} /* Main structure (continued) Sticky footer stuff. Cater for inconsistent markup */ /* body#b_retirementPlan > #pageContainer{ -webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} body#b_retirementPlan > #container {height: auto; -webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} body#b_retirementPlan > #container > #pageContainer{ -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} */ #footer_wrapper {max-width: 1440px;} /* End responsive tweaks */ .form .upper_selects {width:83%;} .form .lower_selects {width: 100%;} #b_retirementPlan .easyInput .form label{width:100%;} #b_retirementPlan .easyInput .ui-buttonset{margin-right:0;} #b_retirementPlan .easyInput .ui-buttonset label {width:17% !important; margin:1%;} #b_retirementPlan #main_content {background: transparent; box-shadow: none; width: 100%; padding:10px;} #b_retirementPlan #whatIfOptions div#whatif{box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); min-height: 660px; border-radius:0px;} #b_retirementPlan .easyInput li.ui-tabs-selected a {background:#fff; border-radius: 0px;} #b_retirementPlan .easyInput.ui-tabs .ui-tabs-panel {background:#fff;} #b_retirementPlan .returnSlider_container {min-width:285px; margin-left: 10px;} #b_retirementPlan .returnSlider_container .slider_labels {font-size:12px !important; line-height: 1.2em;} #b_retirementPlan .returnSlider_container #return_slider_weak_outcome{text-align: right;} #b_retirementPlan .returnSlider_container #return_slider_strong_outcome {text-align:left;} #b_retirementPlan #returnSliderDisplay {width:auto} #b_retirementPlan #returnSliderDisplay.sliderContainer .returnSlider, #b_retirementPlan #whatIf_returnSlider .returnSlider {width: 130px; height: 9px;} #b_retirementPlan .sliderContainer .but_slide{font-size:1.3em;} #b_retirementPlan .sliderContainer .ui-slider .ui-slider-handle {height: 1.5em; width: 1.5em;} #b_retirementPlan .ret_plan_container .horizontal_slider a {padding-left: 10px; width:35px; height:55px;} #b_retirementPlan #returnSliderDisplay .horizontalSlider {margin: 10px 15px 8px;} #b_retirementPlan #slider_help{margin: 5px 0 0 5px;} #b_retirementPlan #flipNumberContainer, #b_retirementPlan .easyInput.ui-tabs .ui-tabs-panel {min-height: 613px; border-radius: 0px;} #b_retirementPlan #flipNumberContainer_what_if{min-height: 620px;} #b_retirementPlan #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle, #b_retirementPlan .flipNumberContainer .mortality-slider .ui-slider .ui-slider-handle {top: -0.6em;} #b_retirementPlan #slider_target_income, #b_retirementPlan #slider_target_income_what_if {margin: 8px 0 0 5px; height: 275px; padding-top: 0;} #b_retirementPlan .target_slider.ui-slider .ui-slider-handle .forecast_income {font-weight: bold;} #b_retirementPlan .target_slider.ui-slider .ui-slider-handle {font-size: 14px; height:69px; margin-bottom: -32px; padding: 3px 11px 0 12px; width: 88px;} #b_retirementPlan .mortality-slider {display:none;} /* Hide the mortility slider for general users */ #b_retirementPlan .mortality-slider_labels {display:none;} #b_retirementPlan span.icon-arrow-up11{display:none;} #b_retirementPlan span.mortality-slider-text.icontext-left {margin:0 0 0 5px;} #b_retirementPlan span.mortality-slider-text.icontext-middle {margin:0 0 0 43px;} #b_retirementPlan span.mortality-slider-text.icontext-right {margin:0 0 0 135px;} #b_retirementPlan .easyInput .ui-accordion .ui-accordion-content{padding:10px 0 10px 5px;} #b_retirementPlan #whatif .sliderContainer {width: 97%;} #b_retirementPlan .easyInput .sliderContainer .horizontalSlider {margin: 11px 0 10px 22px;} #b_retirementPlan .forecastCheckboxes{margin: 50px 0 0 83px!important;} #b_retirementPlan.b_cashflowAnalysis .horizontal_slider {width:83%;} #b_retirementPlan.b_cashflowAnalysis .horizontal_slider .ui-slider-handle {border-radius:27% !important;} #b_retirementPlan .ret_plan_container {padding: 10px; min-height:617px;} #b_retirementPlan #retirement_graph_content_what_if{min-height: 620px;} #b_retirementPlan #pageContainer{overflow: visible;} /* Dialogs cropped when they overflow container*/ #userDataB_accordions .form .icon-info, .b_cashflowAnalysis .flipNumberContainer a.icon-info, a.icon-info, #userDataB_accordions .form .icon-info { margin:0 2px 0 0; width:25px; } /* PFP Nav bar (tabs made to look like a progress bar) */ /* #b_retirementPlan #tab_select .what_if_tabs_panel{background:transparent; padding:0; box-shadow:none; width: 100%;} #b_retirementPlan #tab_select ul{margin:0;} #b_retirementPlan .tabs.ui-tabs .tabs-comparison li{background:transparent; border-radius:5px;} #b_retirementPlan .tabs.ui-tabs .tabs-comparison li.ui-state-active {background:#fff;} #b_retirementPlan .tabs.ui-tabs .tabs-comparison li:hover {border-color:transparent;} */ #b_retirementPlan #tab_select{background-image: none; border-radius:0px; margin:0; position:relative; top: -23px; width: 100%;} #b_retirementPlan #tab_select ul{padding:0px;} #b_retirementPlan #tab_select > ul{background-color: transparent; border-radius: 0; position: relative; z-index: 0; margin:0px;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li{border:none; width:33.33%; margin:0; background:#703f71;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a{border:none; color:#B89FB8; font-size:18px; padding:12px; width:100%; text-align:center; height:49px;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a:hover{color:#fff;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li.ui-state-active a{background:#703F71; color:#fff;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a::after { content: " "; display: block; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #703F71; position: absolute; top: 50%; margin-top: -25px; left: 100%; z-index: 2; } #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li.ui-state-active a::after{ border-left-color:#703F71; } #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a::before { content: " "; display: block; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #B89FB8; position: absolute; top: 50%; margin-top: -25px; margin-left: 1px; left: 100%; z-index: 1; } #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li:last-of-type a::after{ display:none;} #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li:last-of-type a::before{ display:none;} #b_retirementPlan #tab_select .what_if_tabs_panel {background: transparent; padding:50px 0 10px 10px; box-shadow: none;} #b_retirementPlan .form span.currency {margin-top:2px;} /* Error message */ .errorbox { border: 0px solid #fff; width: 100%; font-size: 16px; position: absolute; top: 132px; text-align:left; background:transparent; } .errorbox #icon_error{ display:none; } /* PFP - Forecast */ #b_retirementPlan .datalist li {position: relative;} #b_retirementPlan #easy_input {margin: 3px 10px 0 0;} #b_retirementPlan #main_content{padding:0;} #b_retirementPlan .tabs.ui-tabs .tabs-comparison li {border-radius: 5px 5px 0 0; margin-left:10px; } #b_retirementPlan .tabs.ui-tabs .tabs-comparison li.ui-state-active {background: #eee; box-shadow:none;} #b_retirementPlan .grid_age_you_live_to #ageYouMightLiveToWhatIfFlip{display:none;} #b_retirementPlan .grid_age_you_live_to .label_current, .grid_age_you_live_to .label_what_if{display:none;} #b_retirementPlan .ui-state-default .ui-icon{display:none;} #b_retirementPlan #waitprogress{ top: 50%; left: 60%;} #b_retirementPlan .chartDiv{width: 100%;} #b_retirementPlan #chartDivWhatIfIncome {width: 100%;} /* PFP Flip numbers removed*/ #b_retirementPlan .xdsoft_flipcountdown.xdsoft_size_xs.xdsoft_colour_default >.xdsoft_digit {background-image: url(resource?name=number-sprite-small);} #b_retirementPlan .xdsoft_flipcountdown.xdsoft_size_xs.xdsoft_colour_red >.xdsoft_digit {background-image: url(resource?name=number-sprite-small-red);} #b_retirementPlan .xdsoft_flipcountdown.xdsoft_size_xs.xdsoft_colour_amber >.xdsoft_digit{background-image: url(resource?name=number-sprite-small-amber);} #b_retirementPlan .xdsoft_flipcountdown.xdsoft_size_md.xdsoft_colour_default >.xdsoft_digit{background-image: url(resource?name=number-sprite-medium);} #b_retirementPlan .flipNumberGrid .currency {margin:1px 1px 0 0; color:#000000; font-weight:normal;} #b_retirementPlan .grid_short_fall.flipNumberGrid .currency {color: #B40000;} /* "Select specific fund" dialog.*/ /* Reduce width of fund name table column*/ #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds th.fundName, #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds tbody td.col1{width:44%} /* "Advanced Fund search" dialog*/ #b_retirementPlan div[aria-labelledby='ui-dialog-title-userDataB_dialog_advanced_fund_select']{width:970px} /* Most pages are 990px wide. So dialog *almost* as wide as page*/ #b_retirementPlan #advanced_search #advanced_search_fields, #b_retirementPlan #advanced_search #results_section{ width:100%} #b_retirementPlan #advanced_search #advanced_search_fields fieldset select{margin-left:0;} /* Facts accordion*/ .b_cashflowAnalysis #easy_input #products {margin: 0!important; width:100%!important;} .b_cashflowAnalysis #easy_input #products h2 {height:auto; margin: 2px auto 0; padding: 10px 20px; width: auto; cursor:pointer; cursor:hand;} .b_cashflowAnalysis #easy_input #products div.sub ul.tabledata {width: auto;} .b_cashflowAnalysis #easy_input #products div.sub li, .b_cashflowAnalysis #easy_input #products_current li, .b_cashflowAnalysis #easy_input #products_solution li {padding: 5px 0 5px 17px; background:#fff;} .b_cashflowAnalysis #easy_input #products .sub input.addButton, .b_cashflowAnalysis #products_current .sub input.addButton, .b_cashflowAnalysis #products_solution .sub input.addButton {background:none; padding: 0px;} .b_cashflowAnalysis #easy_input #products div.last, .b_cashflowAnalysis #products_current div.last, .b_cashflowAnalysis #products_solution div.last {border-top: 1px solid #eee !important; padding: 5px 0 5px 13px;} .b_cashflowAnalysis .easyInput .ui-button-text-only .ui-button-text {padding: 0.4em 1em;} .b_cashflowAnalysis .readonlyName {color: #666;} .easyInput .form input {padding: 3px 5px 2px;} #userDataB_accordions .form select {padding: 3px 4px;} #userDataB_dialog_more_options .but_action, #userDataB .but_action {background:#f1f4f7; color:#4f738a; border: 2px solid #f1f4f7;} #userDataB_dialog_more_options .but_action:hover, #userDataB .but_action:hover {background:#f1f4f7; color:#4f738a; border: 2px solid #f1f4f7;} .sliderContainer .but_slide{color:#ccc;} .sliderContainer .but_slide:hover{color:#4f738a;} /* Facts user data */ .b_cashflowAnalysis .userData #eventIcon, .b_cashflowAnalysis .userData .eventIcon{display:none;} .b_cashflowAnalysis .userData .form span.data{font-size: 14px !important; margin: 4px 0 0 10px;} /*input.addButton[type="submit"], input.addButton[type="button"] {background:#fff!important; color: #4f738a!important; padding: 2px 0 4px 12px;}*/ .b_cashflowAnalysis .userData .form select {color: #222; font-size: 14px;} .b_cashflowAnalysis .userData .form .help {float: none; vertical-align: middle;} .b_cashflowAnalysis #dataEntryDialog .form {background: none repeat scroll 0 0 #eee;} .b_cashflowAnalysis .annuity_icon_wrapper{display:none;} .b_cashflowAnalysis #dataEntryDialog #debt_interest_rate fieldset {border: medium none; margin: 0; padding: 0;} /* "Interest rate" is inside a random unnecesary fieldset"*/ #dataEntryDialog .dataEntrySummary ul.tabledata li .submitLink {float: left; text-align: left;} /* Expenses */ /*#dataEntryDialog #expensesTabs .multiInputExpenseIcon {background:#4f738a!important; border:none; color: #ffffff;} #dataEntryDialog #expensesTabs .multiInputExpenseIcon:hover{ background: #4f738a!important;}*/ #dataEntryDialog #expensesTabs .accordianHeader { width:100%} #dataEntryDialog table.expensesTable.tabledata thead th {background:#fff;} #dataEntryDialog table.expensesTable select {width: auto;} #dataEntryDialog .dataEntrySummary .but_add_cashflow {padding-bottom:20px;} #dataEntryDialog .dataEntrySummary #helpExpenseLoadcashflow {height: 21px;} /* What if */ #whatif span.subtext, #easy_input span.subtext {padding-top:1px;} #whatif span.subtext {margin-right: 1px;} #whatif .icon-info{margin-right: 8px;} #whatif #help_on_partial_annuity {margin-right: 0px;} #whatif #help_investment_risk {margin-right: 8px;} @media only screen and (min-width: 768px) { #target_journey_inputs label.currency_symbol {width: 138px;} } #target_journey_inputs .col-icon {padding-top: 8%;} #whatif_tarIncomeJourney_del_btn {padding-bottom: 0;} .easyInput .form label, .easyInput.form span.label {color: #444;} .easyInput .form select{margin: 0;} .label_what_if, .label_current {margin-left: 5px;} .b_cashflowAnalysis .flipNumberContainer .flipNumberGrid .ret_plan_flip_text {padding: 10px 30px 5px 0; position: relative;} .b_cashflowAnalysis .flipNumberContainer a.icon-info {position: absolute; right: 0; top: 10px;} #investment_strategy_dropdown_holder label {width: 65%;} /* Cashflow Analysis Sticky Footer*/ .b_cashflowAnalysis {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} .b_cashflowAnalysis > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} .b_cashflowAnalysis > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} .b_cashflowAnalysis > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* Tax Forecast Sticky Footer*/ #b_taxForecast {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height:100%;} #b_taxForecast > #container {display:block; -webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; height:auto;} #b_taxForecast > #container > #pageContainer{-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /* Complex version of user data */ #b_retirementPlan .form .help {font-size: 0 !important;} #b_retirementPlan #a_adavanced_fund_search span, #b_retirementPlan #a_add_funds_manual span, #b_retirementPlan #a_add_investment_funds_manual span {background:none; padding: 0;} #b_retirementPlan .optional_links .a_link_wrapper{padding:0 10px 0 0;} /* Action changes */ #b_retirementPlan .ui-tabs .ui-tabs-panel.action-changes-content {background: transparent; box-shadow: none;} #b_retirementPlan #main_content.container .has-changed h3, #b_retirementPlan #actionChanges .has-changed {color:#000;} /************************************************************** Life planner **************************************************************/ .b_cashflowAnalysis #main_content {width:100%;} .b_cashflowAnalysis #products h2{height:auto; padding:7px 0 5px 35px;} .b_cashflowAnalysis #products h2 .keyClr{top:9px;} .b_cashflowAnalysis #products ul.tabledata{background-color: transparent;} .b_cashflowAnalysis #products div.ui-accordion-content{background-color: transparent;} .b_cashflowAnalysis .reportButton-container{ margin:0;} .b_cashflowAnalysis #events div.event_slider a{width:34px; height: 65px;} /* Events slider. may need other selectors to catch the other event sliders*/ .b_cashflowAnalysis #incomeExpenditureInclude label, .b_cashflowAnalysis #expensesAsPostRetirementTarget label, .b_cashflowAnalysis #disableAutoRecalculate label{width:65%;} .b_cashflowAnalysis #returnSliderDisplay.sliderContainer .ui-slider .ui-slider-handle{top:-8px;} .b_cashflowAnalysis #returnSliderDisplay .horizontalSlider{height:7px} #b_expenses #products h2 .keyClr{top:30%;} /* Initial AC design of Event Sliders used box-sizing:initial and many negative margins. -ve margins break the layout with box-sizing:border-box, so use proper 'position' and tweak all the width and heights*/ .b_cashflowAnalysis #forecast.events > ul{position: relative;} .b_cashflowAnalysis #forecast.events ul.scale{margin-left:0; position: absolute; top:-34px; left:115px;} .b_cashflowAnalysis #forecast.events ul.scale li{margin-top:0; width:56px;} .b_cashflowAnalysis #forecast.events ul div.slider a {width:33px; height: 25px;border-radius: 0;outline: initial;} #b_storyboard .displayBox {height:208px} #b_storyboard .displayBox h2{font-size:30px;} #b_storyboard .table_balances td{padding:0;} #b_storyboard #displayTitleBar #buttonAlert { width: 7em; width: 6rem; height: 2.5rem; height: 1.8rem;} #b_storyboard .event{z-index:1;} #b_storyboard .eventCount{line-height: 1.25em;} #b_storyboard .up, #b_storyboard .down{background-repeat: no-repeat;} #b_storyboard .investments{width:86px!important; height:33px!important; padding:10px 0 0 24px !important; text-align: left; font-size: 12px;} /************************************************************** DATA ENTRY POPUP **************************************************************/ #dataEntryDialog div#main_content {margin: 0; width: 75%;} input.addButton[type="submit"], input.addButton[type="button"]{background-image:none!important; padding-left:0;} .submitLink {color:#4f738a!important;} .submitLink:hover {color:#4f738a !important;} /* Expenses */ #dataEntryDialog #expensesTabs .accordianHeader {font-size: 16px;} #dataEntryDialog #expensesTabs .expensesTotalHeader {font-size: 16px;} #expensesTabs .multiInputExpenseIcon {background-color:#4f738a!important; border: 2px solid #fff!important;} #expensesTabs .multiInputExpenseIcon:hover{border: 2px solid #4f738a !important; background-color:#4f738a!important;} #dataEntryDialog .dataEntrySummary .but_simple_input, #dataEntryDialog .dataEntrySummary .but_add_cashflow {background-image:none!important; padding-left:0; padding-right:20px} /************************************************************** User Data **************************************************************/ #b_product_maint #products h2{height:auto; padding:7px 0 5px 35px;} #b_product_maint #products ul.tabledata{background-color: transparent;} #b_product_maint #products div.ui-accordion-content{background-color: transparent;} #b_product_maint ul.tabledata li .submitLink{max-width: 190px;} .b_userData #main_content{width:76%;} .b_userData .tabledata tfoot th, .b_userData .tabledata tfoot td{background-color: transparent;} /* cleaner look*/ .b_userData #debt_interest_rate fieldset {border: medium none; margin: 0; padding: 0;} /* "Interest rate" is inside a random unnecesary fieldset"*/ .b_userData ul li.product_name input[type="submit"].deleteIcon, .b_userData ul li.product_name button[type="submit"].deleteIcon{right:3%;} /* User Data Sticky Footer*/ .b_userData {display:block; height:100%; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial;} .b_userData > form#controller{height:100%;} .b_userData > form#controller > #container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: 100%;} .b_userData > form#controller > #container > #pageContainer{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} .b_userData > form#controller > #container > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} /************************************************************** Knowledge Centre (ToolExploreA) **************************************************************/ /* Sticky Footer*/ #b_explore {display:block; -moz-flex-direction:initial; -webkit-flex-direction:initial; -ms-flex-direction:row; flex-direction: initial; height:auto; float:left;} #b_explore > #pageContainer {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column; height: auto!important; min-height: 100vh;} /*note: Topsy turvy way of specifying height. 100vh = 100% ; */ #b_explore > #pageContainer > #page_content{-webkit-box-flex: 1 0 auto; -moz-box-flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto;} #b_explore > #pageContainer > #page_footer {-webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #b_explore .ui-dialog .ui-widget-header{border:1px solid #eee} .js #b_explore .dialogsContainer{display:none;} /* FOUC. Dialog container hidden when JS is on*/ /************************************************************** RESPONSIVE LAYOUTS **************************************************************/ /************************************************************** FONTS **************************************************************/ @font-face { font-family: 'museo300'; src: url('resource?name=museo-300-eot&companyName=mbeedemo5product'); src: url('resource?name=museo-300-eot&companyName=mbeedemo5product#iefix') format('embedded-opentype'), url('resource?name=museo-300-woff&companyName=mbeedemo5product') format('woff'), url('resource?name=museo-300-ttf&companyName=mbeedemo5product') format('truetype'), url('resource?name=museo-300-svg&companyName=mbeedemo5product') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'museo700'; src: url('resource?name=museo-700-eot&companyName=mbeedemo5product'); src: url('resource?name=museo-700-eot&companyName=mbeedemo5product#iefix') format('embedded-opentype'), url('resource?name=museo-700-woff&companyName=mbeedemo5product') format('woff'), url('resource?name=museo-700-ttf&companyName=mbeedemo5product') format('truetype'), url('resource?name=museo-700-svg&companyName=mbeedemo5product') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src:url("resource?name=iconfont_eot&companyName=mbeedemo5product"); src:url('resource?name=iconfont_eot&companyName=mbeedemo5product#iefixgkion2') format('embedded-opentype'), url('resource?name=iconfont_woff&companyName=mbeedemo5product') format('woff'), url('resource?name=iconfont_ttf&companyName=mbeedemo5product') format('truetype'), url('resource?name=iconfont_svg&companyName=mbeedemo5product') format('svg'); font-weight: normal; font-style: normal; } ev-budget-planner [class^="icon-"] { font-size:1.2em; padding-top:5px; font-family: var(--ev-font-common-base_-_font-family)!important; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'!important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size:1.8em; color:#4f738a; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:hover, [class*=" icon-"]:hover{ color:#117FBA; } .icon-info:before { content: "\ed60" !important; } /* #RESPONSIVE CSS *********************************************************** */ @media screen and (max-width:992px) {/* ************ Medium sized desktop browser *********** */ html {min-width:100%;} #page_top, #topnav { width:100%; min-width:0; /* background-color:red; */ } #mainlinks #tn_3 input[type="submit"], #mainlinks #tn_4 a{ margin-right:10px; } #page_content { width:100%; min-width:0; } #footer_wrapper { max-width: none; min-width: 0; } /* Home page */ #b_index .container_main{width:100%} #b_index #page_content{max-width:none; min-width:0} #b_index #tabs_main #t_currentA{padding-left:40px; padding-right:40px;} #b_index #tabs_main .ui-tabs-panel{padding-left:40px; width:64%} #b_index #tabs_main .ui-tabs-panel:before{content:none;} /* Remove pretty tool icon and the space made for it*/ #b_index #tabs_main .ui-tabs-nav{width:34%} /* N In one Tool*/ /* sliders - N In one Tool */ .input_item .slider .sliderContainer{ width:90%; width:86vw; padding:15px; position: relative; margin-left:auto; margin-right:auto; clear:left; } .input_item .slider .horizontalSlider { /* Centre the slider*/ float:none; width:80%; position: absolute; left:0; right:0; margin-left:auto; margin-right:auto; } #inputs_section .horizontalSlider { /* Over ride awkward margin style selector from earlier.*/ margin-left:auto; margin-right:auto; } .input_item .slider input[type='button'].but_slide { float:none; position: absolute; } .input_item .slider input[type='button'].but_slide_up { margin-left:1%; right:1%; } .input_item .slider input[type='button'].but_slide_down { margin-right:1%; left:1%; } /* Current page indicator at bottom of page*/ .progressMeter { width:50%; display:block; /* float:left; */ /* position:relative; */ margin-left:25%; /* margin-top:-50px; */ } /* Rest of N In one Tool*/ /* input questions: 1. the heading/question text */ .slider label#label_retirementAge.inputsHeading, .slider label#label_cont.inputsHeading, .slider label#label_cont_emp.inputsHeading, .slider label#label_target.inputsHeading { width:100%; margin:0; padding:0; text-align:center; margin-bottom:30px; min-height:0; height:auto; } /* input questions: 2. the slider input */ #slider_retirementAge .slider_input, #slider_cont .slider_input, #slider_cont_emp .slider_input, #slider_target .slider_input { width:40%; clear:both; overflow:hidden; margin:0 30% 30px 30%; float:left; } #slider_retirementAge .slider_input input.inp_small { width:25%; margin:0; padding:10px 0 10px 5px; } #slider_retirementAge .slider_input { width:50%; margin-left:25%; margin-right:25%; } #slider_retirementAge .slider_input .spaLabel { position:static; float:none; display:inline; width: auto; text-align: left; margin-left:2em; } #cont_retirementAge.slider .slider_input label.inputsHeading { } #slider_cont .slider_input, #slider_cont_emp .slider_input { } #slider_cont .slider_input input.inp_small, #slider_cont_emp .slider_input input.inp_small { width:30%; } /* input questions: 3. the guidance text at the bottom of each slide */ /* input questions: 4. all £ symbols */ .input_item .slider .slider_input .currency_symbol { margin-left:0%!important; } /* slide 7 - risk */ .b_toolninonea #inputs_section #inp_risk.ui-buttonset .ui-button{ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 100%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .b_toolninonea #inputs_section #risk_buttons > .buttons_container { width:100%; } .b_toolninonea #inputs_section #risk_buttons > div { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 13%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .b_toolninonea #inputs_section #risk_buttons > .buttons_container > div { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 19%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ margin-right: 1% } .b_toolninonea #inputs_section #risk_buttons > .buttons_container > div:last-child{margin-right:0;} .b_toolninonea #inputs_section #risk_buttons > div:not(.buttons_container):first-child, .b_toolninonea #inputs_section #risk_buttons > div:not(.buttons_container):last-child{display:none;} /* TODO incorporate the "high"/"low labels"*/ .b_toolninonea #slider_risk_choice .risk_desc .fund-split{margin-bottom:10px;} .b_toolninonea #slider_risk_choice .risk_desc .risk_desc_content{width:100%; float:left;} /* 3in 1 options page */ #initial_income_question #settings #market_conditions p{margin-right:10px;} /* billboard page */ #page_content a.button_loud.button_prev, #page_content a.button_loud.button_next { margin-bottom:20px; } #b_retirementPlan #tab_select .ui-tabs-nav li a, .easyInput .ui-tabs-nav li a{font-size:14px; padding:13px 4px} #b_retirementPlan #tab_select .what_if_tabs_panel{padding: 50px 10px 10px 10px;} #b_retirementPlan .leftContent{width:100%} #b_retirementPlan #flipNumberContainer, #b_retirementPlan .easyInput.ui-tabs .ui-tabs-panel{min-height:auto; margin-bottom:10px;} #b_retirementPlan #flipNumberContainer, #b_retirementPlan #whatIfOptions div#whatif { min-height:auto !important; height:auto; margin-bottom:10px; } #b_retirementPlan .ret_plan_container{width:100%} #b_retirementPlan .slider_labels{width:38px;} #b_retirementPlan #flipNumberContainer, #flipNumberContainer_what_if{margin:10px 0} #b_retirementPlan .ret_plan_container .horizontal_slider a{display:none;} /* Risk questionnaire modal */ #b_retirement .questionContainer {width:100% !important; padding: 5px 0px 70px!important; position: relative;} #b_retirement .ui-dialog{left: 0; width:auto !important; margin: 0 1%;} #b_retirement #dialog_risk_questions .ui-dialog-content{width:95%; height:auto !important;} #b_retirement #questionProgress{width:100% !important;} #b_retirement #dialog_risk_questions .q_pic{display:none} #b_retirement .questionAndResponse{width:100% !important;} #b_retirement .question {width:100%; padding: 10px 0 30px;} #b_retirement #dialog_risk_questions .question h3{font-size: 15px; padding:0;} #b_retirement .question ul.qresponse{padding:10px 0 0;} #b_retirement #dialog_risk_questions .question ul.qresponse label{width:60%} #b_retirement .question ul.qresponse {width: 100% !important;} #b_retirement #dialog_risk_questions .question ul.qresponse input[type="radio"]{float:left;} #b_retirement .q_nav span.arrow, #b_retirement .q_nav span.stats_arrow{padding:9px 7px; margin-left:-14px;} #b_retirement .q_nav {position: absolute; width:33%; padding:10px; bottom:20px; right:0;} #b_retirement #q_next_stats{right:0;} #b_retirement #q_prev, #b_retirement #q_prev_stats{left:0;} #b_retirement #questionProgress li a{font-size:1.2em;} #b_retirement #quest_result {width: 100%; padding: 0 0 80px;} #b_retirement #quest_result table {width: 100%;} /* 3-in-1 modal */ #b_retirement #initial_income_question #income_options{width: 100%;} #b_retirement .infotab{width:100%;} #b_retirement #initial_income_question .option{width:95%; height: auto;} #b_retirement #initial_income_question .option h3{width:auto;} #b_retirement #initial_income_question .option p{width:100%;} /* Terms and Conditions page*/ #b_terms #page_content{width:100%} /* Forecast page*/ /* Risk help dialog. JIRA LG-152 Linearise the table*/ #dialog_help_risk_1 table.tabledata > tbody > tr > td {display:block;width:100%; clear:left;}/* Selector Should *not* effect the table.fundlist*/ #dialog_help_risk_1 .tabledata .col3 { float:left;} /* Its children are floated*/ #dialog_help_risk_1 table.tabledata > tbody > tr > td{border-bottom:none;} /* Table borders meaningless now the table is linearised*/ #dialog_help_risk_1 table.tabledata > tbody > tr > td:last-of-type{margin-bottom:1rem; border-bottom:1px solid #eee;} /* Create vertical spacing between table rows.*/ #dialog_help_risk_1 table.tabledata > tbody > tr:last-of-type > td:last-of-type{margin-bottom:0; border-bottom:none;} #dialog_help_risk_1 table.tabledata > tbody > tr > td > p:last-of-type{margin-bottom:0;} /* Remove vertical spacing between risk description (td.col2) and asset mix (td.col3)*/ #dialog_help_risk_1 .tabs_risk .t_risk .col3 table.fundlist .col1{width:10rem;} #dialog_help_risk_1 table.fundlist .bar{width:100%;} } @media screen and (max-width:850px) { #explore-text{ width:50%; } .ui-dialog { /*Many jQuery UI Dialogs have width set with JS that will be too wide for small screens */ /*max-width: 100%;*/ } } @media screen and (max-width: 800px) {/* ************ For the summary screen only *********** */ #topnav { width:100%; /* background-color:yellow; */ } #b_retirement_intro #page_content, #ninone_app_model #page_content { overflow:hidden; } #pageContainer { /*overflow:hidden;*/ } #page_content { width:96%; min-height:0; } /*slide 1 - age #slider_age */ /*slide 2 - gender #slider_sex */ /*slide 3 - retirement age #slider_retirementAge */ #slider_retirementAge .slider_input { margin-left: 20%; margin-right: 20%; width: 60%; } /*slide 4 - income #slider_salary */ /*slide 5 - savings #slider_fundBalance */ /*slide 6 - amount saved #slider_cont */ /*slide 7 - amount employer #slider_cont_emp */ /* slide 8 - retirement annual amount #slider_target */ /* bill board page with summary */ .billboard { border:0; padding:10px; } .billboard h2 { padding:3%; width:94%; } .billboard h2 span { clear:none; } .billboard h3{ font-family: 'Arial', sans-serif; } /* "You could have £X at age..." page*/ #b_level_mini1 .billboard h2 .intro_text{ margin-top:20px; margin-bottom:20px; } #initial_income_question #iiq_intro_section .currencyMobile { margin-top:12px; } #b_level_mini1 #person_info { width:100%; } #person_info .datalist li span.label, #person_info .datalist li span.data{ display:inline-block; } #person_info .datalist li span.label { width:55%; } #person_info .datalist li span.data { width:39%; margin-left:4%; } /* 3in 1 options page */ #initial_income_question #iiq_intro_section h2 { font-size:26px; padding-left:3%; line-height:20px; margin-left:0; } #initial_income_question #settings { margin-top:0; padding-top:10px; padding-left:0; padding-right:0; float:left; width:100%; } #initial_income_question #settings #market_conditions { border:0; width: 94%; padding:0; margin-left: 3%; margin-right: 3%; } #initial_income_question #settings #market_conditions p { width:45%; margin-right:0; } #initial_income_question #sliderWrapper_market_returns { width:50%; background-size: contain; float:right; } #initial_income_question #market_conditions #sliderWrapper_market_returns { width:50%; background-position:50% 50%; } #initial_income_question #slider_market_returns { top:80%; } .tabPanel { display:block; } #b_retirement_intro .infotab{ display:block; } #initial_income_question #income_options { padding:3%; width:100%; float:left; overflow:auto; display:block; } #initial_income_question .infotab { -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; margin-top:20px; } #initial_income_question .infotab:first-child{ margin-top:0; } #initial_income_question #income_options .infotab { width:100%; margin-left:0; } #initial_income_question .option{ width:100% } #initial_income_question #income_options .infotab .option { padding:20px; min-height:0; } #mobile-tabs ul { display:none; } #initial_income_question .option .button_loud { display:block; width:100%; float:left; clear:both; position:relative; margin:10px 0 0 0; left:0; } #b_retirementPlan .chartDiv{width: 100%;} #b_retirementPlan #chartDivWhatIfIncome {width: 100%;} /* Footer*/ #footer_wrapper #footer_links{margin-top:0; padding-left:0;} #footer_wrapper #footer_links #links{padding-bottom:0;} #footer_wrapper #footer_links #links > ul > li{display:list-item; padding-top:5px; padding-bottom:5px;} #footer_wrapper #footer_links #links > ul > li:first-child{padding-top:0;} #footer_wrapper #footer_links #links > ul > li:last-child{padding-bottom:0;} #footer_wrapper .bottomtext{display:none;} } @media screen and (max-width: 780px) { /* ************ Override no-data-intro.css @media screen and (max-width: 780px) *********** */ /* Home page */ /* Hide tools that are not responsive.*/ #b_index #tabs_main #t_riskSummaryA{ display:none;} #b_index #tabs_main #t_incomeQuestionnaireA{ display:none;} #b_index #tabs_main #t_portfolioBuilderB{ display:none;} #b_index #tabs_main #t_investments{ display:none;} #b_index #tabs_main #t_savingsPlanner{ display:none;} #b_index #tabs_main #t_savingsPlanner{ display:none;} #b_index #tabs_main #t_protectionA{ display:none;} #b_index #tabs_main #t_cashflowanalysisA{ display:none;} #b_index #tabs_main #t_guidanceA{ display:none;} #b_index #tabs_main #t_comingSoonA{ display:none;} #b_index #tabs_main #t_findadviserA{ display:none;} /* Unfortunately, only the link itself has an ID/tool name, not the parent
  • . So this section will have to be edited for every client. Numbering is 1 based.*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(1){display:list-item;} /* Getting started*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(2){display:none;} /* Group heading*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(3){display:none;} /* Risk*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(4){display:none;} /* Income Profile*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(5){display:none;} /* Fund picker*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(6){display:list-item;} /* group heading*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(7){display:list-item;} /* Retirement planner*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(8){display:list-item;} /* Retirement planner++*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(9){display:none;} /* ISA forecast*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(10){display:none;} /* savings planner*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(11){display:none;} /* protection*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(12){display:none;} /* Life planner*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(13){display:none;} /* group heading*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(14){display:none;} /* Guides*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(15){display:none;} /* Coming soon*/ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(16){display:none;} /* Find an adviser*/ /* N In one Tool*/ /* User Data Inputs - N In one Tool */ .input_item .slider label, .input_item .slider .question_title{ width: 90%;margin-left: 5%;margin-right: 5%; /* Element has float:left, so margin-left:auto will not work*/} /* Retirement Planner + */ .reportButton-container{width:100%;} #b_retirementPlan.b_cashflowAnalysis #create_report{width:100%;} #report_form{width:100%;} #but_explore_pop_up, #but_ninone_widget, #main_content>div:nth-of-type(3){width:95%; margin-left:2%; text-align:center;} #but_ninone_widget{width:95%; margin:0 10px 2px 0;} #but_explore_pop_up{margin-bottom:15px;} } @media screen and (max-width: 700px) { /* ************ For the 3in 1 options page only *********** */ /* 3in 1 options page */ #initial_income_question #settings #market_conditions p{width:100%;} #initial_income_question #market_conditions #sliderWrapper_market_returns {width:389px; margin-top:1rem; float:left; clear:left;} } @media screen and (max-width: 667px) {/* ************ TABLETS browser *********** */ #topnav { /* background-color:pink; */ display:block; border:0; } #topnav #mainlinks, #topnav #mainlinks li { border:0; } .progressMeter { display:none; } /*slide 1 - age #slider_age */ /*slide 2 - gender #slider_sex */ /*slide 3 - retirement age #slider_retirementAge */ /*slide 4 - income #slider_salary */ /*slide 5 - savings #slider_fundBalance */ /*slide 6 - amount saved #slider_cont */ /*slide 7 - amount employer #slider_cont_emp */ /* slide 8 - retirement annual amount #slider_target */ #initial_income_question { text-align:left; } #slider_retirementAge .slider_input { } #slider_retirementAge .slider_input .spaLabel { margin-left: 1em; } /* slide 7 - risk */ #slider_risk_choice #li_risk_choice_default p{width:100%;} /* Forecast page*/ /* Risk help dialog. JIRA LG-152. Compress the Asset allocation table.*/ #dialog_help_risk_1 .tabs_risk .t_risk .col3 table.fundlist .col1{width:6rem;} } @media screen and (max-width: 620px) {/* ************ Tablets/iphone6 browser *********** */ #pageContainer { min-height:0; } #page_top { width:100%; padding:0; margin:0; display:none; } #topnav { display:block!important; /* overide naughty @media screen and (max-width: 620px) {#topnav {display:none!important;}*/ } #page_top_menu{ margin-bottom:0; } #topnav #mainlinks { display:block; background-color:transparent; margin-top:0; position:relative; top:0 } #topnav #mainlinks #tn_3, #topnav #mainlinks #tn_4 { display:none; } #page_top #logo { /*margin:10px 0 0 10px;*/ } h2{font-size: 19px !important;} h3{font-size: 1em;} /* Home page */ #b_index #tabs_main .ui-tabs-panel{ width:100%; clear:left; float:left;} /* Linearise tabs*/ #b_index #tabs_main .ui-tabs-nav{width:100%} /* 3 in 1 tool*/ #inputs_section { margin-top:0; min-height:300px; box-shadow: none; padding-top:0; padding-bottom:0; } .input_item .slider { margin-top:0; clear:both; } .input_item .sliderContainer { display: none; } #inputs_section .slider label.inputsHeading, #inputs_section label.inputsHeading{ font-size:22px; } /* input questions: 1. the heading/question text */ .slider label#label_age.inputsHeading, #slider_sex .slider label.inputsHeading, .slider label#label_retirementAge.inputsHeading, .slider label#label_salary.inputsHeading, .slider label#label_fundBalance.inputsHeading, .slider label#label_cont.inputsHeading, .slider label#label_cont_emp.inputsHeading, .slider label#label_target.inputsHeading { width:100%; margin:0; padding:0; text-align:center; margin-bottom:30px; min-height:0; height:auto; } /* input questions: 2. the slider input */ #slider_age .slider_input, #slider_sex .slider_input, #slider_retirementAge .slider_input, #slider_salary .slider_input, #slider_fundBalance .slider_input, #slider_cont .slider_input, #slider_cont_emp .slider_input, #slider_target .slider_input { width:100%; clear:both; overflow:hidden; margin:0 auto; text-align:center; } .input_item .slider_input > span:not([class]){ display:block; } /* The two classes 'otherMessage_wrapper' and 'spa_wrapper' have not yet been promoted. For the f1f4f7 being the items have no class. Hence the awkward '> span:not([class])' selector above */ .input_item .slider_input > span.otherMessage_wrapper { display:block; } .input_item .slider_input > span.spa_wrapper { display:block; } .input_item .slider_input .spaLabel{ margin-left:0; margin-right:0; } .slider .slider_input #inp_age, #slider_retirementAge .slider_input input.inp_small { width:25%; margin:0 auto; padding:10px 0 10px 5px; } #slider_sex .slider { padding-bottom:0; } #div_sex_choice { margin-top:0; margin-bottom:12px; } #slider_retirementAge .slider_input { /*margin-left:25%;*/ } #slider_retirementAge .slider_input input.inp_small { /*margin-left:15%;*/ } #slider_retirementAge .slider_input .spaLabel { margin-left:0; } #cont_retirementAge.slider .slider_input label.inputsHeading { margin:0 0 0 30%; } #slider_salary .slider_input input, #slider_fundBalance .slider_input input, #slider_target .slider_input input { width:31%; } #slider_target .slider_input { /*width:30%; margin-left:36%;*/ } #slider_cont .slider_input, #slider_cont_emp .slider_input { width:35%; margin-left:36.5%; } #slider_cont .slider_input input.inp_small, #slider_cont_emp .slider_input input.inp_small { width:30%; } /* input questions: 3. the guidance text at the bottom of each slide */ #slider_age .input_guidance, #slider_sex .input_guidance, #slider_retirementAge .input_guidance, #slider_salary .input_guidance, #slider_fundBalance .input_guidance, #slider_cont .input_guidance, #slider_cont_emp .input_guidance, #slider_target .input_guidance { margin-top:24px; padding-top:0; } #slider_age .input_guidance p, #slider_sex .input_guidance p, #slider_retirementAge .input_guidance p, #slider_salary .input_guidance p, #slider_fundBalance .input_guidance p, #slider_cont .input_guidance p, #slider_cont_emp .input_guidance p, #slider_target .input_guidance p { margin-top:0; padding-top:0; } /* input questions: 4. all £ symbols */ .input_item .slider .slider_input .currency_symbol { /*margin-left:10%;*/ } /* slide 7 - risk */ /* Resize the 'Lifestyle fund' graph*/ #slider_risk_choice #li_risk_choice_default img{width:auto; height:auto; max-width:100%; float:none; margin:0; padding:0} /* risk Descriptions*/ #slider_risk_choice .risk_desc{padding-left:5%; padding-right: 5%;} #slider_risk_choice .risk_desc p{clear:left; margin-left:0; margin-right:0; width:100%} /* Hide the "in specific funds" option*/ /*#b_stepped_data_entry #slider_risk_choice #label_inp_risk_choice_user_defined{display:none} #b_stepped_data_entry #slider_risk_choice #li_risk_choice_user_defined{display:none}*/ #b_stepped_data_entry #pageContainer{background-image:linear-gradient(#3e1051 80px, #ffffff, #ffffff 0%)} /* "You could have X at retirement age Y" screen*/ #b_level_mini1 a.button_prev, #b_level_mini1 a.button_next{width:100%} #b_level_mini1 a.button_prev{text-align:left;} #b_level_mini1 a.button_next{text-align:right;} /* Comparison screen*/ #b_retirement_intro #pageContainer{background-image:linear-gradient(#3e1051 80px, #ffffff, #ffffff 0%)} } @media screen and (max-width: 480px) {/* ************ mobile browser *********** */ #topnav { height:60px; } #topnav > .bubble_wrap{ display:none } form#logout { display:none; } /* Logo and Home button*/ #page_top #but_logo, #topnav #mainlinks li#tn_1 input { width:160px !important; background-size:60% auto !important; background-repeat:no-repeat !important; background-position: left center !important; } #topnav #mainlinks li#tn_1:before{ margin-left:-52px !important; padding:8px !important; font-size:19px !important; } #topnav #mainlinks li#tn_1:after{width:100px; overflow:auto; margin-left:0; font-size:16px !important;} .slider { margin-top:0; } /* buttons */ #page_content a.button_loud.button_prev, #page_content a.button_loud.button_next { /*width:110px; font-size:15px; height:40px; background-size:7%; margin-bottom:20px;*/ } /* input questions: 1. the heading/question text */ .slider label#label_age.inputsHeading, .slider label#label_sex.inputsHeading, .slider label#label_retirementAge.inputsHeading, .slider label#label_salary.inputsHeading, .slider label#label_fundBalance.inputsHeading, .slider label#label_cont.inputsHeading, .slider label#label_cont_emp.inputsHeading, .slider label#label_target.inputsHeading { width:100%; margin:0; padding:0; text-align:center; margin-bottom:30px; } /* input questions: 2. the slider input */ #slider_age .slider_input, #slider_sex .slider_input, #slider_retirementAge .slider_input, #slider_salary .slider_input, #slider_fundBalance .slider_input, #slider_cont .slider_input, #slider_cont_emp .slider_input, #slider_target .slider_input { width:100%; clear:both; overflow:hidden; margin:0 auto; } .slider .slider_input #inp_age, #slider_retirementAge .slider_input input.inp_small { width:35%; margin:0 25%; padding:10px 0 10px 5px; } /*#slider_fundBalance .slider_input { width:60%; margin:0 20%; }*/ #slider_salary .slider_input input, #slider_fundBalance .slider_input input, #slider_target .slider_input input { width:60%; } /*#slider_cont .slider_input, #slider_cont_emp .slider_input { width:60%; }*/ /*#slider_cont .slider_input input.inp_small, #slider_cont_emp .slider_input input.inp_small { width:30%; }*/ /* input questions: 3. the guidance text at the bottom of each slide */ #slider_age .input_guidance, #slider_sex .input_guidance, #slider_retirementAge .input_guidance, #slider_salary .input_guidance, #slider_fundBalance .input_guidance, #slider_cont .input_guidance, #slider_cont_emp .input_guidance, #slider_target .input_guidance { margin-top:24px; padding-top:0; } #slider_age .input_guidance p, #slider_sex .input_guidance p, #slider_retirementAge .input_guidance p, #slider_salary .input_guidance p, #slider_fundBalance .input_guidance p, #slider_cont .input_guidance p, #slider_cont_emp .input_guidance p, #slider_target .input_guidance p { margin-top:0; padding-top:0; } /* input questions: 4. all £ symbols */ .input_item .slider .slider_input .currency_symbol { margin-left:5% } /* anything that overrides the x4 above groups for each individual slide */ /* slide 2 - gender */ #slider_sex .slider label.inputsHeading { margin-top:0; } #div_sex_choice label.ui-state-default, .formunder .buttonset .ui-state-default { width:100%; text-align:center; margin-bottom:5px; } #div_sex_choice { margin:20px 25% 12px 25%; width:50%; } /* slider 3 - retirement */ #slider_retirementAge .slider_input input.inp_small { /*margin-left:0; */ } #slider_retirementAge .slider_input .spaLabel { /*width:50%; margin-left:50%;*/ } #cont_retirementAge.slider .slider_input label.inputsHeading { width:70%; margin-left:10% } /* slide 7 - risk */ #slider_risk_choice #div_risk_choice.ui-buttonset{display:block; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #slider_risk_choice #div_risk_choice.ui-buttonset .ui-button{width:100%; margin-right:0%; margin-bottom:1%; display:block; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none;} #slider_risk_choice #div_risk_choice.ui-buttonset .ui-button:last-child, #slider_risk_choice #div_risk_choice.ui-buttonset .ui-button#label_risk_dont_know {margin-right:0; margin-bottom:0} /* rubbish IE8- doesnot support :last-child()*/ #inputs_section #slider_risk_choice #div_risk_choice.ui-buttonset .ui-button{display:block; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; width:100%;} #slider_risk_choice #inp_risk.ui-buttonset .ui-button{margin: 0 0 1% 0; width: 100%;} #slider_risk_choice #inp_risk #risk_buttons > .buttons_container{display: block; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; width:100%} #slider_risk_choice #inp_risk #risk_buttons > .buttons_container > div {display: block; -webkit-box-flex: none; -moz-box-flex: none; -webkit-flex: none; -ms-flex: none; flex: none; width:100%; margin-bottom:1%;} #slider_risk_choice #inp_risk #risk_buttons > .buttons_container > div:last-child {margin-bottom:0} #slider_risk_choice #li_risk_choice_default, #slider_risk_choice #li_risk_choice_risk_rated, #slider_risk_choice #li_risk_choice_custom, #slider_risk_choice #li_risk_choice_dont_know{border-top:1px solid #CCCCCC} /* Remove the 'Lifestyle fund' graph. It is too small to be legible*/ #slider_risk_choice #li_risk_choice_default img{ display:none; } /* Hide the "low" "High" labels that sit at either end of the risk scale. Has no ID or class, so will fail miserabbly when these 2 labels become configurable (optional)*/ #slider_risk_choice #risk_buttons > div:not(.buttons_container):first-child, #slider_risk_choice #risk_buttons > div:not(.buttons_container):last-child{display:none;} #slider_risk_choice #risk_buttons > .buttons_container { width:100%;} #slider_risk_choice #risk_buttons > div{width:19%;} #slider_risk_choice .risk_desc fund-split-chart{display:none;} /* "fund-split-chart" is actually the name of one of our custom tags*/ #initial_income_question .option .button_loud{display:none;} /* billboard summary page */ .billboard { margin-top:0; } #b_level_mini1 .billboard h2 { padding:3%; font-size:28px; } #b_level_mini1 .currencyMobile { clear:left; } /* bill board page with three options */ #b_level_mini1 #person_info { width:100%; } #initial_income_question #iiq_intro_section h2 { padding:3%; font-size:28px; line-height:1; margin:0; float:left; width:94%; font-weight:normal; } #iiq_intro_section h2 span.currencyMobile { clear:left; } #b_retirement_intro #initial_income_question #settings { float:left; margin-bottom:20px; } #initial_income_question #settings #market_conditions p { width:100%; } #initial_income_question #market_conditions #sliderWrapper_market_returns { width:100%; margin-top:10px; } #b_retirement .sliderContainer{width: 98%; margin-left:2%;} } @media screen and (max-width: 350px) {/* ************ small mobile browser *********** */ #slider_retirementAge .slider_input .spaLabel { margin-top:0; } #b_logout h1{ font-size:20px; } /** Enter specific fund **/ #b_stepped_data_entry .tabledata { font-size: 12px;} #b_stepped_data_entry .tableFunds th, #b_stepped_data_entry .tableFunds td { padding:3px !important} #b_stepped_data_entry .tableFunds td.fundAllocation, #b_stepped_data_entry .tableFunds th.fundAllocation{ min-width:50px; } #b_stepped_data_entry .tableFunds input{width:25px} /** Realign forecast explained link **/ #b_retirement #chartBars {margin-top:30px;} #b_retirement #a_forecast_explained {float:left; width:100%;} } .td_balance { width: 15%; } /* retirement 33 */ #b_level_mini1 .button_next, #b_level_mini1 .button_prev { margin-bottom:20px; } /******************************************************* NEW RESPONSIVE CSS **********************************************************/ /* ************ Tablet viewport ************/ @media screen and (max-width: 768px){ #b_index #tabs_main .ui-tabs-nav >li:nth-of-type(3) {display:block;} /* show the risk tab link */ #b_index #tabs_main #t_riskSummaryA {display:block;} /* show the risk tab body */ #b_retirement .container_main{max-width:100%; min-width:100%;} #b_retirement .twocol1, #b_retirement .twocol2{float:left; width: 100%; max-width:768px;} } /* ************ Mobile viewport ************/ @media screen and (max-width: 480px) { /********************************************* General ****************************************/ .ui-dialog {top: 0px!important; left:0 !important; max-width: auto!important; width: auto!important;} .ui-dialog .ui-dialog-titlebar-close{height: 30px; top: 30%; width: 30px;}/* Make the close X larger, easier for fat fingers*/ #privacyPolicyDialog th, #privacyPolicyDialog td, #termsDialog th, #termsDialog td{padding:0px; font-size:12px;} /********************************************* Header ****************************************/ #page_top #logo {padding: 10px 0 0 20px;} #topnav{padding-left:5px;} /********************************************* Footer ****************************************/ #page_footer{height:auto;} #page_footer #footer_wrapper{text-align:center; padding-bottom:20px;} #page_footer #footer_wrapper #footer_links {width: 100%; text-align: center; margin: 10px 0; } #page_footer #footer_wrapper a {padding:0;} /********************************************* Terms page ****************************************/ #b_terms #termsIframe{border:1px solid #ccc; height: 200px; overflow: hidden;} #b_terms #accept label{text-align:left; font-size:14px; font-weight: normal;} #b_terms #accept input.button_loud{width:100%; margin-top:10px;} /********************************************* Start page ****************************************/ #b_index .ui-tabs {margin: 10px 0;} #b_index .tabs_icons span.tool_group_heading{display:none;} #b_index #tabs_main .ui-tabs-panel {padding: 20px;} #b_index #tabs_main #t_currentA {padding: 20px;} #b_index #tabs_main #t_currentA p:nth-of-type(2){display:none;} #b_index #tabs_main h3 {margin: 20px 0 0 0;} #b_index #t_retirement #forecast .link_right {float: left;} #b_index #t_retirement table {margin-top: 10px;} #b_index .container_main .tabledata td, #b_index .container_main .tabledata th, #t_retirement #forecast .tabledata th.col1 {width: 50%;} /********************************************* Risk profiler ****************************************/ #t_riskSummaryA .risk_column{width:100%;} #t_riskSummaryA .forecast_column{width:100%; position: relative; border:none; margin:40px 0 0 0; padding:0px; right:0; top:0;} #t_riskSummaryA .forecast_box .twocol1{top:100px;} #t_riskSummaryA .forecast_box table {margin: 230px 0 25px 5px; width: 100%;} #dialog_risk_questions .questionnaire_start_screen .twocol1 {width: 100%;} #dialog_risk_questions .questionnaire_start_screen .twocol2 {width: 100%; margin: 0; padding: 0;} #dialog_risk_questions div.innerQuestionnaire {width: 100%;} #dialog_risk_questions #questionProgress li {font-size: 20px; padding: 0px;} #dialog_risk_questions div.q_pic{display:none;} #dialog_risk_questions .questionAndResponse {width: 100%; padding:0;} #dialog_risk_questions .question h3 {font-size: 18px;} #dialog_risk_questions .question ul.qresponse label, #dialog_risk_questions .question div.radio label {width: 77%;} #dialog_help_selected_risk table td{display:block; width:100%;} #dialog_help_selected_risk table.fundlist td{display:table-cell; width:auto;} #dialog_help_selected_risk table.fundlist td.col1{width:60%;} #dialog_help_selected_risk table.fundlist td.col2{width:10%;} /********************************************* 3-in-1 ****************************************/ #b_stepped_data_entry #inputs_section {margin-top: 10px; border: 0px;} #b_stepped_data_entry #inputs_section #slider_risk_choice .risk_desc{margin:0; padding:0;} #initial_income_question .showTab{margin-top:10px;} #initial_income_question .option h3 {width: 60%;} #initial_income_question #settings #sublinks {width: 100%; display:block;} #initial_income_question #settings #sublinks a {margin: 10px 0 0 0; width:100%; text-align:center; padding:0;} #initial_income_question .button_loud{width:100%;} .reportButton-container, #initial_income_question #b_retirement_intro .reportButton-container .button_loud {width:100%;} #lifespan_table{width: 180%;} #lifespan_table{min-width:500px;} #initial_income_question .option .button_loud {display: block;} .dialog_annuity_warning table td {white-space: nowrap;} /********************************************* Retirement planner A ****************************************/ /* Header*/ #b_retirement #page_top #but_logo, #topnav #mainlinks li#tn_1 input {background-size: 61% auto; } #b_retirement #topnav #mainlinks #tn_1:after {font-size: 16px; margin-left:5px;} #b_retirement #topnav #mainlinks li#tn_1:before {margin-left: -53px; padding: 8px;} /* Body*/ /* PUT EXTRA LINKS E.G. FORECAST EXPLANATION WITHIN TWOCOL2 */ #b_retirement .container_main {min-width: 100%; max-width: 100%;} /* Inputs */ #b_retirement .twocol1 {width: 100%;} #b_retirement .extra_links{margin:0; padding: 0 10px 0 0} #b_retirement .extra_links li{padding:0 0 0 10px;} #b_retirement .extra_links li a{font-size:12px !important;} #b_retirement #tabs_planner.ui-tabs .ui-tabs-nav li{font-size:12px; margin:0; width: 33%; height:40px;} #b_retirement #tabs_planner.ui-tabs .ui-tabs-nav li a{padding:5px 10px; white-space: normal;} #t_retirementOptions h3 {margin: 10px 0 0px 0px;} #b_retirement #retirementOptionsButtonSet{padding:0;} #b_retirement #retirementOptionsButtonSet .ui-button {width:100%; margin-right: 0; border-radius: 0px;} #b_retirement #retirementOptionsButtonSet .ui-button-text-only .ui-button-text {padding: .4em 10px;} #b_retirement .slider_icon, #b_retirement .field_icon{display:none;} #b_retirement #t_retirementOptions .slider a.help {margin: 5px 0 0 0!important;} #b_retirement #t_retirementOptions .slider input {width: 80px;} #b_retirement .slider fieldset.fieldset {width: 84%; margin: 5px 0 0 0;} #b_retirement selector .select {font-size: 14px; max-width: 133px;} #b_retirement .slider .note {padding: 5px 0 0 0px;} #b_retirement .riskSlider.slider{margin-left:0; width:100%; margin-top: -26px;} #b_retirement .riskSlider.slider div.sliderOutput{padding-top:20px} #b_retirement #accordion_pensions .ui-accordion-header a {width: auto;} /* Graph */ #b_retirement .twocol2 {width: 100%; position:relative;} #b_retirement .twocol2 .container{width:100%; border:none; box-shadow:none; background:transparent} #b_retirement .twocol2 .container h2 {font-size: 22px;} #b_retirement .twocol2 #extraLinks{position:absolute; top:70px; right: 10px; z-index: 100;} #b_retirement .twocol2 #extraLinks .extra_links{padding:0; margin:0;} #b_retirement .twocol2 #extraLinks li{padding:0 0 0 20px;} #b_retirement .twocol2 #extraLinks a{font-size:12px;} #b_retirement .twocol2 #extraLinks span{display:none;} #b_retirement #t_bars table {margin: 0; width: 94%; line-height: 1em;} #b_retirement #t_bars th, #b_retirement #t_bars td{font-size:12px; background:transparent; border:none;} #b_retirement #t_bars table th.col1 {width: 30% !important;} /********************************************* PFP ****************************************/ /* #b_retirementPlan #waitprogress{top:950px; left:100px;} #b_retirementPlan .returnSlider_container {min-width:auto; margin-left: 0px;} #b_retirementPlan #slider_help {margin: -6px 0 0 8px;} #b_retirementPlan #ret_planner_inp_whatif_risk_buttons .ui-button-text-only .ui-button-text {padding: 5px 10px 5px 8px;} #b_retirementPlan #ret_planner_inp_whatif_risk_buttons span.current {left: -6px;} #b_retirementPlan #tab_select .ui-accordion .ui-accordion-header {font-size: 16px!important;} #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds th, #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds td {white-space: nowrap;} */ #b_retirementPlan #tab_select{background:transparent;} #b_retirementPlan #tab_select.tabs.ui-tabs .tabs-comparison li {clear: left; width: 100%; border-radius: 0px!important; } #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a::before, #b_retirementPlan #tab_select .tabs-comparison.ui-tabs-nav li a::after{display:none;} #b_retirementPlan #tab_select.tabs.ui-tabs .tabs-comparison li.ui-state-active{left:0px;} #b_retirementPlan .ret_plan_container {width: 100%; min-height:0px;} #b_retirementPlan .easyInput {margin: 10px 0 0 0;} #b_retirementPlan .flipNumberContainer{width: 100%; min-height:0px!important; margin:10px 0px;} #b_retirementPlan .easyInput .ui-tabs-nav li a {padding: 13px 13px; margin-left: 10px;} #b_retirementPlan #easy_input {margin: 25px 0px 0 0;} #b_retirementPlan .top_selects, #b_retirementPlan #inp_cash_value, #b_retirementPlan #inp_cash_value_what_if {padding: 10px; margin-top: 0px !important;} #b_retirementPlan #returnSliderDisplay.sliderContainer .returnSlider, #b_retirementPlan #whatIf_returnSlider .returnSlider {width: 91px;} #b_retirementPlan #waitprogress{ top: 968px; left: 50%;} #b_retirementPlan .returnSlider_container {min-width:auto; margin-left: 0px;} #b_retirementPlan #slider_help {margin: -6px 0 0 8px;} #b_retirementPlan #ret_planner_inp_whatif_risk_buttons .ui-button-text-only .ui-button-text {padding: 5px 10px 5px 8px;} #b_retirementPlan #ret_planner_inp_whatif_risk_buttons span.current {left: -6px;} #b_retirementPlan #tab_select .ui-accordion .ui-accordion-header {font-size: 16px!important;} #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds th, #b_retirementPlan #userDataB_dialog_fund_selecttable_advancedFunds td{white-space: nowrap;} #b_retirementPlan.b_cashflowAnalysis .chartDiv {width: 265px;} #b_retirementPlan.b_cashflowAnalysis .chartContainer .horizontal_slider{width: 163px;} #main_content.container #actionChanges .icon_arrow_right {margin-left: 10px; margin-right: 10px;} #b_retirementPlan.b_cashflowAnalysis .horizontal_slider .ui-slider-handle {margin-left: -40px;} .action-changes-content .difference, #main_content.container #actionChanges h3{font-size:18px;} #b_retirementPlan .errorbox {top: 220px;} }