/* FONTFACE */ /* Viewport declaration for IE10 / WIN 8 */ @-ms-viewport { width: device-width; } /* Hide content panels when loading */ .content_panel { display:none; } /*#content #feature_panel { margin-top:15px; } #content #feature_panel a { border:none; padding:0; margin:0; } #content .row .orbit-wrapper { margin:0 0 0 2px; } #content .row .orbit-wrapper .timer { display:none; }*/ /* *BASE */ body { background:#555; } a { color:#213a7d; } .container { margin:auto; padding:0; width:1024px; } /* * MAIN */ body#main .container { background:#555 url(../images/backgrounds/main-bg.jpg) 50% 0 no-repeat; overflow:hidden; } /* * TOP NAVIGATION */ #top_navigation .twelve.columns { width:940px; margin:0 auto 15px auto; overflow:hidden; height:110px; position:relative; } #top_navigation a.view_profile { position:absolute; top:66px; right:220px; color:#fff; margin:0; padding:5px; text-decoration:underline; display:block; font-size:11px; line-height:11px; } #top_navigation a.change_password { position:absolute; top:66px; right:300px; color:#fff; margin:0; padding:5px; text-decoration:underline; display:block; font-size:11px; line-height:11px; } #top_navigation a.view_profile:hover,#top_navigation a.change_password:hover { text-decoration:none; } #top_navigation ul { position:absolute; top:56px; right:20px; margin:0; padding:0; } #top_navigation ul li { display:inline-block; margin:0; padding:0; height:30px; } #top_navigation ul li a.home { background:url(../images/top-nav-home-icon.png) top right no-repeat; display:block; width:30px; height:30px; text-indent:-5000px; text-decoration:none; padding:0 0 0 25px; margin-top:0; } #top_navigation ul li a.print { background:url(../images/top-nav-print-icon.png) top right no-repeat; display:block; width:30px; height:30px; text-indent:-5000px; text-decoration:none; padding:0 0 0 15px; margin-top:0; } #top_navigation ul li a.help { background:url(../images/top-nav-help-icon.png) top right no-repeat; display:block; width:30px; height:30px; text-indent:-5000px; text-decoration:none; padding:0 0 0 15px; margin-top:0; } #top_navigation ul li a.logout { background:url(../images/top-nav-logout-icon.png) top right no-repeat; display:block; width:30px; height:30px; text-indent:-5000px; text-decoration:none; padding:0 0 0 15px; margin-top:0; } #top_navigation .pilot_logo { position:absolute; top:20px; left:17px; background:url(../images/pilot-logo-strapline.png) 0 0 no-repeat; width:204px; height:85px; text-indent:-5000px; } /* * PROGRESS */ #progress .twelve.columns { width:940px; margin:0 auto 27px auto; background:#fff; background:rgba(255,255,255,0.5); overflow:hidden; border-radius:20px; height:75px; } #progress .twelve.columns .three p { font-size:18px; line-height:18px; color:#213a7d; padding:0; margin:0; } #progress .twelve.columns .three p.hi { padding:0; margin:16px 0 3px 20px; } #progress .twelve.columns .three p.visit { padding:0; margin:0 0 0 20px; font-size:15px; line-height:15px; } #progress .twelve.columns .nine { position:relative; } #progress .twelve.columns .nine p { font-size:18px; line-height:18px; color:#ed1c24; padding:0; margin:16px 0 0 0; } #progress .twelve.columns .nine .progress_linear { position:absolute; top:34px; left:0; padding:0; margin:0; width:675px; height:28px; overflow:hidden; } #progress .twelve.columns .nine .progress_linear_count { position:absolute; top:12px; right:20px; padding:0; margin:0; color:#fff; font-size:24px; line-height:24px; } /* Use 10x classes progress_linear_10 - progress_linear_100 to display linear progress bar */ #progress .twelve.columns .nine .progress_linear_70 { background:url(../images/progress-linear-70.png) 0 0 no-repeat; } /* * TABS */ #tabs .twelve.columns { width:940px; margin:0 auto 0 auto; } #tabs ul { margin:0; margin-bottom:0; } #tabs ul li { display:inline-block; position:relative; background:#c5d5e3; width:231px; height:48px; margin:0 0 4px 5px; padding:0; border-radius:0 20px 0 0; } #tabs ul li.active { background:#fff; margin:0 0 0 5px; height:52px; } #tabs ul li.tab_one { margin-left:0; } #tabs ul li a { font-size:17px; padding:25px 4px 6px 14px; display:block; } #tabs ul li img { position:absolute; top:-15px; left:10px; } /* * CONTENT */ #content .twelve.columns { width:940px; margin:0 auto 28px auto; overflow:hidden; } /* Welcome */ #content .twelve.columns.welcome { background:#fff url(../images/content-clouds-bg.jpg) 7px 7px no-repeat; height:355px; } #content .twelve.columns.welcome .seven { width:631px; } #content .twelve.columns.welcome .seven h2 { padding-top:185px; padding-left:40px; color:#e63529; margin:0 0 7px 0; font-size:40px; line-height:40px; font-weight:normal; } #content .twelve.columns.welcome .seven p { padding-left:40px; color:#213a7d; font-size:16px; line-height:21px; font-weight:normal; width:460px; } #content .twelve.columns.welcome .five { position:relative; width:267px; } #content .twelve.columns.welcome #progress_circle { position:absolute; top:43px; right:68px; width:220px; height:220px; } #content .twelve.columns.welcome #progress_circle.start { background:url(../images/progress-circle-start.png) 0 0 no-repeat; } #content .twelve.columns.welcome #progress_circle.start p { display:none; } /* Use 10x classes in_progress_10 - in_progress_100 to display circular progress bar */ #content .twelve.columns.welcome #progress_circle.in_progress_70 { background:url(../images/progress-circle-in-progress-70.png) 0 0 no-repeat; } #content .twelve.columns.welcome #progress_circle.in_progress p { display:block; color:#ec1c23; text-align:center; font-size:15px; line-height:15px; margin:0; padding:0; } #content .twelve.columns.welcome #progress_circle.in_progress p.your_progression { margin-top:63px; margin-bottom:3px; } #content .twelve.columns.welcome #progress_circle.in_progress p.percentage { font-size:67px; line-height:67px; font-family:'Raleway', sans-serif; } #content .twelve.columns.welcome #progress_circle.in_progress p.last_visited { font-size:13px; line-height:13px; } #content .twelve.columns.welcome #your_journey { position:absolute; top:288px; right:45px; display:block; text-align:center; background:#ed1c24; color:#fff; font-size:17px; line-height:17px; padding:7px 0 3px 0; border-radius:20px; width:270px; height:23px; } /* What do I have */ #content .twelve.columns.what_do_i_have { background:#fff url(../images/content-what-do-i-have-bg.jpg) 7px 7px no-repeat; height:496px; } #content .twelve.columns.what_do_i_have h2 { padding-top:34px; padding-left:18px; color:#213a7d; margin:0 0 7px 0; font-size:40px; line-height:40px; font-weight:normal; } #content .twelve.columns.what_do_i_have h3 { color:#213a7d; margin:0 0 10px 8px; font-size:20px; line-height:20px; font-weight:normal; } #content .twelve.columns.what_do_i_have .four { width:297px; height:305px; margin:95px 0 0 6px; } #content .twelve.columns.what_do_i_have .four.first { margin-left:17px; } #content .twelve.columns.what_do_i_have .four .down_icon { background-image:url(../images/icon-down-arrow.png); background-position:263px 14px; background-repeat:no-repeat; } #content .twelve.columns.what_do_i_have .four .add_more_pension_savings { display:block; text-align:center; background:#ed1c24 url(../images/icon-circle-plus.png) 7px 50% no-repeat; color:#fff; font-size:18px; line-height:18px; padding:9px 0 9px 0; border-radius:20px; } #content .twelve.columns.what_do_i_have .four #wdih_income { display:block; position:relative; width:297px; height:190px; padding-top:18px; background-color:#ed1c24; margin-bottom:16px; } #content .twelve.columns.what_do_i_have .four #wdih_grows { display:block; position:relative; width:297px; height:83px; padding-top:18px; background-color:#f16421; margin-bottom:38px; } #content .twelve.columns.what_do_i_have .four #wdih_stop_working { display:block; position:relative; width:297px; height:83px; padding-top:18px; background-color:#f16421; } #content .twelve.columns.what_do_i_have .four #wdih_transfer { display:block; position:relative; width:297px; height:145px; padding-top:18px; background-color:#f9a61a; margin-bottom:6px; } #content .twelve.columns.what_do_i_have .four #wdih_db_benefits { display:block; position:relative; width:297px; height:83px; padding-top:18px; background-color:#f9a61a; } #content .twelve.columns.what_do_i_have .four p { color:#fff; margin:0 50px 0 24px; font-size:19px; line-height:19px; } #content .twelve.columns.what_do_i_have .four p.pushdown { padding-top:35px; } #content .twelve.columns.what_do_i_have .four p.large { font-size:37px; line-height:37px; padding-top:8px; margin-right:0; } #content .twelve.columns.what_do_i_have .popup_panel { width:908px; height:322px; position:absolute; top:154px; left:16px; padding:0; margin:0; display:none; } #content .twelve.columns.what_do_i_have .popup_panel.retirement_income { background-color:#e7342a; } #content .twelve.columns.what_do_i_have .popup_panel a.close_popup { width:32px; height:32px; position:absolute; top:20px; right:6px; display:block; padding:0; margin:0; background:url(../images/icon-close-x.png) 0 0 no-repeat; text-indent:-5000px; } #content .twelve.columns.what_do_i_have .popup_panel h2 { padding-top:21px; padding-left:18px; color:#213a7d; margin:0 0 7px 0; font-size:32px; line-height:32px; font-weight:normal; } #content .twelve.columns.what_do_i_have .popup_panel p { padding-top:20px; padding-left:0; color:#fff; margin:0 0 5px 0; font-size:18px; line-height:18px; font-weight:normal; } #content .twelve.columns.what_do_i_have .popup_panel p.based_on { padding-top:0; font-size:11px; line-height:26px; } #content .twelve.columns.what_do_i_have .popup_panel .four { width:290px; height:260px; margin:0 0 0 6px; position:relative; } #content .twelve.columns.what_do_i_have .popup_panel .four.first { margin-left:17px; } #content .twelve.columns.what_do_i_have .popup_panel .four.projection { width:245px; } #content .twelve.columns.what_do_i_have .popup_panel .four.projection p { font-size:14px; margin-bottom:0; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button { position:absolute; bottom:15px; left:0; display:block; width:214px; height:28px; padding:0; margin:0; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options { position:relative; margin:0; padding:0; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .one { position:absolute; top:0; left:0; margin:0; padding:0; width:70px; font-size:12px; line-height:28px; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .two { position:absolute; top:0; right:0; margin:0; padding:0; width:70px; font-size:12px; line-height:28px; text-align:right; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .toggle_button { position:absolute; top:0; left:74px; display:block; margin:0; padding:0; width:78px; background:#fff; border-radius:20px; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .toggle_button_hit_target { position:absolute; top:0; left:74px; display:block; margin:0; padding:0; height:28px; width:78px; background:none; border-radius:20px; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .toggle_button_node { position:absolute; top:2px; margin:0; padding:0; display:block; text-indent:-5000px; width:42px; height:24px; background:#e7342a; border-radius:20px; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .toggle_button_node.one { left:76px; } #content .twelve.columns.what_do_i_have .popup_panel .toggle_button .toggle_options .toggle_button_node.two { left:108px; } #content .twelve.columns.what_do_i_have .popup_panel .four .add_more_pension_savings { position:absolute; bottom:15px; left:0; width:240px; font-size:17px; line-height:17px; padding:9px 20px 9px 0; text-align:right; border-radius:20px; border:1px solid #fff; } #content .twelve.columns.what_do_i_have .popup_panel a.help { width:30px; height:30px; display:inline-block; padding:0; margin:10px 0 0 0; background:url(../images/top-nav-help-icon.png) 0 0 no-repeat; text-indent:-5000px; } /* * PROMOTIONAL */ #promotional .twelve.columns { width:940px; margin:0 auto 27px auto; } #promotional #feature_panel { height:283px; } #promotional #feature_panel img { display:none; } #promotional #feature_panel.orbit { } #promotional #feature_panel.orbit img { display:block; } #promotional #rotator_wrapper { height:283px !important; margin-bottom:10px; overflow:hidden; margin-left:0; } #promotional #rotator .content { background:#fff; } #promotional #rotator .content div { background:#edecea !important; height:90px !important; padding:8px 10px; overflow:hidden; } #promotional div.orbit-wrapper, div.orbit { height:283px !important; } #promotional div.orbit-wrapper div.slider-nav span { top:175px !important; left:-4px; height:44px; width:26px; background:url(../images/promotional/promo-left.png) 0 0 no-repeat; } #promotional div.orbit-wrapper div.slider-nav span.right { left:auto; right:-4px !important; background:url(../images/promotional/promo-right.png) 0 0 no-repeat;} #promotional ul.orbit-bullets { display:none !important; } /* *FLIGHT SCHOOL */ #flight_school .twelve.columns { width:940px; margin:0 auto 27px auto; overflow:hidden; } #flight_school h2 { background:url(../images/flight-other-header-bg.png) 0 0 no-repeat; height:37px; width:259px; color:#213a7d; font-size:18px; line-height:37px; font-weight:normal; text-indent:40px; margin-bottom:15px; } #flight_school h3 { color:#fff; font-size:14px; line-height:14px; font-weight:normal; padding:5px 0 7px 1px; margin:0; } #flight_school .info_panel { width:223px; margin-left:5px; padding:4px; border-radius:0 20px 0 0; } #flight_school .info_panel a { background-color:#fff; padding:2px; overflow:hidden; display:block; width:219px; height:120px; position:relative; } #flight_school .info_panel a img { width:220px; height:120px; } #flight_school .info_panel a img.play { width:44px; height:44px; position:absolute; top:40px; left:90px; } #flight_school .info_panel_one { background-color:#ed1c24; margin-left:0; } #flight_school .info_panel_two { background-color:#f15a24; } #flight_school .info_panel_three { background-color:#f7931e; } #flight_school .info_panel_four { background-color:#fbb03b; } /* * OTHER INFORMATION */ #other_information .twelve.columns { width:940px; margin:auto; } #other_information h2 { background:url(../images/flight-other-header-bg.png) 0 0 no-repeat; height:37px; width:259px; color:#213a7d; font-size:18px; line-height:37px; font-weight:normal; text-indent:40px; margin-bottom:15px; } #other_information ul { } #other_information ul li { display:inline-block; margin-left:10px; } #other_information ul li a { padding:10px 0 10px 45px; color:#fff; font-size:21px; line-height:36px; } #other_information ul li a.docs { background:url(../images/icon-doc.png) 0 50% no-repeat; } #other_information ul li a.scheme { background:url(../images/icon-scheme.png) 0 50% no-repeat; } #other_information ul li a.help { background:url(../images/icon-help.png) 0 50% no-repeat; } /* * LOGIN */ body#login .container { background:#555 url(../images/backgrounds/login-bg.jpg) 50% 0 no-repeat; overflow:hidden; } #login_panel { position:relative; height:600px; width:470px; margin-top:45px; margin-bottom:49px; padding:0; background-image:url(../images/pilot-circle-logo.png); background-position:50% 28px; background-repeat:no-repeat; background-color:#cbd9e5; border-radius:20px; } #login_panel h1 { position:absolute; top:235px; left:39px; color:#ec1c23; font-weight:normal; background:url(../images/check-in-plane.png) 0 50% no-repeat; padding-left:45px; margin:0; font-size:40px; } #login_panel p { padding:0; margin:0; } #login_panel #username { position:absolute; top:295px; left:39px; width:350px; padding:9px 20px; margin:0; font-size:18px; line-height:22px; color:#fff; background:#4582bb url(../images/username-bg.png) 50% 50% no-repeat; border:none; border-radius:20px; } #login_panel #password { position:absolute; top:350px; left:39px; width:350px; padding:9px 20px; margin:0; font-size:18px; line-height:22px; color:#fff; background:#4582bb url(../images/password-bg.png) 50% 50% no-repeat; border:none; border-radius:20px; } #login_panel a { text-decoration:underline; } ::-webkit-input-placeholder { color:#fff; } :-moz-placeholder { color:#fff; /* Firefox 18- */ } ::-moz-placeholder { color:#fff; /* Firefox 19+ */ } :-ms-input-placeholder { color:#fff; } #login_panel .forgotten_password { position:absolute; top:420px; left:57px; color:#00338d; text-decoration:underline; font-size:15px; line-height:15px; } #login_panel .submit_button { position:absolute; top:406px; right:39px; width:188px; height:42px; background:#213a7d url(../images/button-icon-arrow-right.png) 9px 50% no-repeat; color:#fff; text-align:left; font-size:18px; line-height:40px; border:none; padding-left:43px; border-radius:20px; } #login_panel .remember_me input, #login_panel .accept_tcs input { position:absolute; top:-9999px; left:-9999px; } #login_panel .remember_me { position:absolute; top:468px; right:30px; width:165px; height:42px; color:#00338d; font-size:13px; line-height:28px; background:url(../images/checkbox-unchecked.png) 0 0 no-repeat; padding-left:33px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; } #login_panel .accept_tcs { position:absolute; top:506px; left:39px; width:375px; height:42px; padding-top:5px; color:#00338d; font-size:13px; line-height:22px; background:url(../images/checkbox-unchecked.png) 0 0 no-repeat; padding-left:33px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; } #login_panel .remember_me.checked, #login_panel .accept_tcs.checked { background-image:url(../images/checkbox-checked.png); } #login_row { position:relative; } #login_row .what_is_pilot { position:absolute; top:600px; right:35px; color:#fff; padding:0 10px 0 35px; background:url(../images/icon-question.png) 0 50% no-repeat; font-size:14px; line-height:30px; } /* * FORGOT PASSWORD */ #forgot_password_panel { position:relative; height:442px; width:470px; margin-top:120px; margin-bottom:49px; padding:0; background-image:url(../images/pilot-circle-logo.png); background-position:50% 28px; background-repeat:no-repeat; background-color:#cbd9e5; border-radius:20px; } #forgot_password_panel h1 { position:absolute; top:251px; left:30px; width:410px; color:#ec1c23; font-weight:normal; padding-left:0; margin:0; font-size:24px; line-height:24px; text-align:center; } #forgot_password_panel p { padding:0; margin:0; } #forgot_password_panel #email { position:absolute; top:295px; left:39px; width:350px; padding:9px 20px; margin:0; font-size:18px; line-height:22px; color:#fff; background:#4582bb url(../images/email-bg.png) 50% 50% no-repeat; border:none; border-radius:20px; } #forgot_password_panel a { text-decoration:underline; } ::-webkit-input-placeholder { color:#fff; } :-moz-placeholder { color:#fff; /* Firefox 18- */ } ::-moz-placeholder { color:#fff; /* Firefox 19+ */ } :-ms-input-placeholder { color:#fff; } #forgot_password_panel .back_to_login { position:absolute; top:370px; left:57px; color:#00338d; text-decoration:underline; font-size:15px; line-height:15px; } #forgot_password_panel .submit_button { position:absolute; top:353px; right:39px; width:122px; height:42px; background:#213a7d url(../images/button-icon-arrow-right.png) 9px 50% no-repeat; color:#fff; text-align:left; font-size:18px; line-height:40px; border:none; padding-left:43px; border-radius:20px; } #forgot_password_row { position:relative; min-height:694px; } /* * RESET PASSWORD */ #new_password_panel { position:relative; height:600px; width:470px; margin-top:45px; margin-bottom:49px; padding:0; background-image:url(../images/pilot-circle-logo.png); background-position:50% 28px; background-repeat:no-repeat; background-color:#cbd9e5; border-radius:20px; } #new_password_panel h1 { position:absolute; top:249px; left:58px; color:#ec1c23; font-weight:normal; padding-left:0; margin:0; font-size:24px; } #new_password_panel p { padding:0; margin:0; } #new_password_panel #new_password { position:absolute; top:295px; left:39px; width:350px; padding:9px 20px; margin:0; font-size:18px; line-height:22px; color:#fff; background:#4582bb url(../images/username-bg.png) 50% 50% no-repeat; border:none; border-radius:20px; } #new_password_panel #confirm_password { position:absolute; top:420px; left:39px; width:350px; padding:9px 20px; margin:0; font-size:18px; line-height:22px; color:#fff; background:#4582bb url(../images/confirm-password-bg.png) 50% 50% no-repeat; border:none; border-radius:20px; } #new_password_panel #new_password_requirements { position:absolute; top:350px; left:43px; width:350px; color:#00338d; font-size:12px; line-height:12px; } #new_password_panel #new_password_requirements li { float:left; width:175px; margin-bottom:3px; } #new_password_panel a { text-decoration:underline; } ::-webkit-input-placeholder { color:#fff; } :-moz-placeholder { color:#fff; /* Firefox 18- */ } ::-moz-placeholder { color:#fff; /* Firefox 19+ */ } :-ms-input-placeholder { color:#fff; } #new_password_panel .submit_button { position:absolute; top:498px; right:39px; width:226px; height:42px; background:#213a7d url(../images/button-icon-arrow-right.png) 9px 50% no-repeat; color:#fff; text-align:left; font-size:18px; line-height:40px; border:none; padding-left:43px; border-radius:20px; } #new_password_row { position:relative; } /* * FOOTER */ #footer #kpmg_logo_strapline { position:relative; clear:both; margin:0; width:980px; padding:0; background-image:url(../images/kpmg-footer-bg.png); background-position:0 0; background-repeat:no-repeat; background-color:#bcd2e4; background-color:rgba(255,255,255,0.5); border-radius:0 30px 0 0; height:74px; } #footer #kpmg_logo_strapline p { text-indent:-5000px; } #footer #kpmg_logo_strapline ul { position:absolute; top:34px; left:370px; } #footer #kpmg_logo_strapline ul li { display:inline-block; margin:0 4px 0 0; padding:0 0 0 4px; border-left:1px solid #213a7d; font-size:11px; line-height:11px; } #footer #kpmg_logo_strapline ul li.first { border-left:none; } #footer #kpmg_logo_strapline ul li a { margin:0; padding:0; font-size:11px; line-height:11px; color:#213a7d; }