/* =============================================================================== MAJOR UPDATE 05/08/21 - 08/08/21 - REMOVE UNUSED STYLES 09/08/21 - RE-SET ALL FONT SIZES TO BE ACCESSIBLE 15/08/21 - removed all commented-out styles 06/09/21 - final tidy-up before handover to developer PLEASE NOTE - for accessibility purposes I have replaced all px font sizing with ems FOR THE STYLES WE USE IN RELEASE C. I didn't update styles we didn't use, in order to save time. This means, if you use any other styles in this stylesheet within the PIER build, you must also update any px font sizing amd re-set it as ems, in order to maintain accessibility. See https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html for more info =============================================================================== */ /* =============================================================================== RESET DEFAULTS AND BROWSER STANDARDISATION =============================================================================== */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, canvas { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* Enable border-box sizing model for fluid sizing, responsive layout simplicity. Add htc to site root and behaviour to CSS for IE6/7 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, figure, footer, header, hgroup, nav, section { display: block; } audio, video, canvas { display: inline-block; } /* Responsive images and other embedded objects Note: keeping IMG here will cause problems when using foreground images as sprites. */ img, object, embed { max-width: 100%; } /* Prevents modern browsers from displaying 'audio' without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, and Safari 4. Known issue: no IE 6 support. */ [hidden] { display: none; } /* force a vertical scrollbar to prevent a jumpy page, and text size adjust fix when changing page orientation */ html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* ========================== quotes ========================== */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* ========================== links ========================== */ a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } a:hover, a:focus, a:active { xxoutline: none; } /* ========================== marked up copy ========================== */ del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #333333; cursor: help; } /* ========================== tables ========================== */ table { border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } td img { vertical-align: top; } /* ========================== forms ========================== */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } textarea { resize: none; } /* clickable elements */ .clickable, label, input[type="button"], input[type="submit"], button { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } /* mozilla input centering fix */ input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* removal of default glow colour to input fields */ /* Removed by AliG 29/07/22 */ input:focus, select:focus, select:hover, textarea:focus, textarea:hover { /*outline: none; outline: 0;*/ } @media (min-width: 790px) { input:hover { /*outline: none; outline: 0;*/ } } /* removal of webkit styling on certain form fields */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* removal of default invalid field shadow and glow on HTML5 form error */ :-moz-submit-invalid { box-shadow: none; } :-moz-ui-invalid { box-shadow: none; } /* ========================== pre copy ========================== */ pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* ========================== character styles ========================== */ small { font-size: 85%; } strong, b, th { font-weight: bold; } /* ========================== sub / superscript ========================== */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================== monospaced elements ========================== */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* ========================== lightweight clearfix ========================== */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* ========================== visibility options ========================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } /* BRAND COLOURS */ /* BREAKPOINTS */ /* THEME COLOURS */ /* DIMENSIONS */ /* FONTS */ /* transition * ========== * Generates CSS cross-browser transition rules. * * @param $args Transition arguments. */ /* truncateParahraph * ================= * Truncates paragraph to set number of rows. * * @param $rows Number of rows. */ /* hyphenate * ========= * Generates CSS cross-browser hyphens rules. */ /* transform * ========= * Generates CSS cross-browser transform rules. * * @param $args Transform arguments. */ /* tileBoxShadow * ============= * Tile glow hover effect used in feature tiles and other tile components. * * @param $strength Box shadow strength. */ /* noBoxShadow * =========== * Removes any element box shadow. */ /* disableUserSelect * ================= * Disables user cursor selection. */ /* elementHover * =========== * Removes any element box shadow. * * @param $opacity Element opacity. */ /* linkStyles * ========== * Standardises hyperlink behaviour. * * @param $linkColour Link colour. * @param $linkHoverColour Link hover colour. * @param $linkHoverBorderColour Link hover border colour. */ /* heading * ========== * Common heading styles. */ /* imageZoomEffect * ========== * Generates the image zoom effect on hover that's used in feature tiles for example. */ /* heading * ========== * Common landing page sitemap styles. */ /* Downloaded from https://fonts.google.com/specimen/Source+Sans+Pro */ /* Webfont generated by https://www.fontsquirrel.com/tools/webfont-generator */ /* EOT/SVG formats exported with https://everythingfonts.com/font-face */ /* Source Sans Pro - Light */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-light.eot"); src: url("../font/sourcesanspro-light.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-light.woff") format("woff2"), url("../font/sourcesanspro-light.woff2") format("woff"); font-weight: 300; font-style: normal; } /* Source Sans Pro - Light Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-lightitalic.eot"); src: url("../font/sourcesanspro-lightitalic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-lightitalic.woff") format("woff2"), url("../font/sourcesanspro-lightitalic.woff2") format("woff"); font-weight: 300; font-style: italic; } /* Source Sans Pro - Regular */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-regular.eot"); src: url("../font/sourcesanspro-regular.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-regular.woff") format("woff2"), url("../font/sourcesanspro-regular.woff2") format("woff"); font-weight: normal; font-style: normal; } /* Source Sans Pro - Regular Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-italic.eot"); src: url("../font/sourcesanspro-italic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-italic.woff") format("woff2"), url("../font/sourcesanspro-italic.woff2") format("woff"); font-weight: normal; font-style: italic; } /* Source Sans Pro - Bold */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-semibold.eot"); src: url("../font/sourcesanspro-semibold.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-semibold.woff") format("woff2"), url("../font/sourcesanspro-semibold.woff2") format("woff"); font-weight: bold; font-style: normal; } /* Source Sans Pro - Bold Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-semibolditalic.eot"); src: url("../font/sourcesanspro-semibolditalic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-semibolditalic.woff") format("woff2"), url("../font/sourcesanspro-semibolditalic.woff2") format("woff"); font-weight: bold; font-style: italic; } /* CORE */ a.secure:before { font-family: "font_icon"; content: '\E81A'; } .wf-inactive #home-nav .entypo { display: none; } /* menu nav styles */ #menu-nav > a:before { font-family: "font_icon"; content: '\E808'; } /* menu nav styles */ .wf-inactive #menu-nav > a:before { font-family: "font_icon"; content: ''; } #menu-nav > a:after { font-family: "font_icon"; content: '\E83B'; } #menu-nav:hover > a:after, #menu-nav.active > a:after { content: '\E83E'; } .wf-inactive #menu-nav > a:after , .wf-inactive #menu-nav:hover > a:after , .wf-inactive #menu-nav.active > a:after { content: ''; } /* login nav styles */ #login-nav > a:after { font-family: "font_icon"; content: '\E81A'; } .wf-inactive #login-nav > a:after { content: ''; } /* contact nav styles */ #contact-nav > a:after { font-family: "font_icon"; content: '\E832'; } .wf-inactive #contact-nav > a:after { content: ''; } /* button with plus sign */ button.plus:after, .button.plus:after { font-family: "font_icon"; content: '\E80E'; } /* button with minus sign */ button.minus:after, .button.minus:after { font-family: "font_icon"; content: '\E811'; } button.search-button, .button.search-button { font-family: "font_icon"; } main ul.bookmarks:before { font-family: "font_icon"; content: '\E873'; } main blockquote:before { content: '\201C'; font-family: arial; } main blockquote:after { content: '\201D'; font-family: arial; } main form span.helper { font-family: "font_icon"; } ul.simple-document-list li:before { font-family: "font_icon"; content: '\E86B'; } .article-list article .icon { font-family: "font_icon"; } /* .wf-active is applied if web fonts load succesfully */ .wf-active .article-list article.toggle .show-hide:before { font-family: "font_icon"; content: '\E80E'; } .wf-active .article-list article.toggle.open .show-hide:before { content: '\E811'; } /* .wf-inactive is applied if web fonts fail to load */ /* * closed/default is: * * * * */ .wf-inactive .article-list article.toggle .show-hide { background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNiA4YzAtNC40MTgtMy41ODItOC04LThzLTggMy41ODItOCA4IDMuNTgyIDggOCA4IDgtMy41ODIgOC04ek0xLjUgOGMwLTMuNTkgMi45MS02LjUgNi41LTYuNXM2LjUgMi45MSA2LjUgNi41LTIuOTEgNi41LTYuNSA2LjUtNi41LTIuOTEtNi41LTYuNXoiPjwvcGF0aD4NCjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik00Ljk1NyA1LjU0M2wtMS40MTQgMS40MTQgNC40NTcgNC40NTcgNC40NTctNC40NTctMS40MTQtMS40MTQtMy4wNDMgMy4wNDN6Ij48L3BhdGg+DQo8L3N2Zz4=") no-repeat; width: 16px; height: 16px; } /* * open base-64 encoded is: */ .wf-inactive .article-list article.toggle.open .show-hide { background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik04IDE2YzQuNDE4IDAgOC0zLjU4MiA4LThzLTMuNTgyLTgtOC04LTggMy41ODItOCA4IDMuNTgyIDggOCA4ek04IDEuNWMzLjU5IDAgNi41IDIuOTEgNi41IDYuNXMtMi45MSA2LjUtNi41IDYuNS02LjUtMi45MS02LjUtNi41IDIuOTEtNi41IDYuNS02LjV6Ij48L3BhdGg+DQo8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTAuNDU3IDQuOTU3bC0xLjQxNC0xLjQxNC00LjQ1NyA0LjQ1NyA0LjQ1NyA0LjQ1NyAxLjQxNC0xLjQxNC0zLjA0My0zLjA0M3oiPjwvcGF0aD4NCjwvc3ZnPg==") no-repeat; width: 16px; height: 16px; } .entypo { font-family: "font_icon"; } #page-head-search button { font-family: "font_icon"; } #search-page-form .form-group button { font-family: "font_icon"; } #glossary-search-form .form-group button { font-family: "font_icon"; } a.checkout { font-family: "font_icon"; } div.alert .wrapper:before { font-family: "font_icon"; content: '\E82D'; } .dst-back-links a:before { content: '\AB\A0'; } /* buttons */ /* ------- */ button, .button, .button:visited, .Actions input { display: inline-block; height: 2.0625em; /* 33px */ width: auto; padding: 0 0.8125em; /* 13px */ background-color: #333333; border: none; -webkit-border-radius: 0.125em; /* 2px */ -moz-border-radius: 0.125em; /* 2px */ border-radius: 0.125em; /* 2px */ text-align: center; font-size: 1em; /* 16px */ line-height: 2.0625em; /* 33px */ white-space: nowrap; color: #ffffff; -webkit-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); -moz-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; text-shadow: 0 0 0 transparent; text-shadow: 0 0 0 transparent; } button:hover, button:focus, .button:hover, .button:focus, .Actions input:hover, .Actions input:focus { background-color: #555555; text-decoration: none; } button.inactive, button[inactive], .button.inactive, button.inactive:hover, button.inactive:focus, button[inactive]:hover, button[inactive]:focus, .button.inactive:hover, .button.inactive:focus, .Actions input[type='reset'], .Actions input.inactive, .Actions input.inactive:hover, .Actions input.inactive:focus { background-color: #666666; -webkit-box-shadow: inset 0 -0.3rem 0 0 #999999; -moz-box-shadow: inset 0 -0.3rem 0 0 #999999; box-shadow: inset 0 -0.3rem 0 0 #999999; cursor: default; } .Actions input[type='reset'] { cursor: pointer; } .Actions input[type='reset']:focus { background-color: #999999; } /* button with plus sign */ button.plus:after, .button.plus:after, button.minus:after, .button.minus:after { display: inline-block; vertical-align: middle; padding-left: 1rem; font-size: 1.6rem; -webkit-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); -moz-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); } /* search button */ button.search-button, .button.search-button { display: inline-block; width: 3.6rem; height: 3.6rem; margin: 0; padding: 0; overflow: hidden; font-size: 2rem; line-height: 1; } /* placeholder text styling */ /* ------------------------ */ ::-webkit-input-placeholder { color: #999999; } :-moz-placeholder { color: #999999; } :-ms-placeholder { color: #999999; } .button--secondary { background: transparent; color: #333333; border: 2px solid #333333 !important; line-height: inherit; } .button--secondary:hover, .button--secondary:active, .button--secondary:focus { background: #333333; color: #ffffff; } .button--small { color: #1875B4 !important; float: right; margin: 0 0 0 15px; border: none !important; border-bottom: 1px solid #333333 !important; padding: 0; font-size: 0.75em; font-weight: 100 !important; border-radius: 0; height: 2.5em; color: #1875B4; border-bottom: 1px dotted #1875B4 !important; } .button--small:hover, .button--small:active, .button--small:focus { outline: none !important; color: #1875B4 !important; background: transparent; border-bottom: 1px solid #1875B4 !important; } /* ========================== bookmarks ========================== */ ul.bookmarks { width: 100%; position: relative; margin: 2rem 0; padding: 1.2rem 1.2rem 1.2rem 7rem; border: solid 0.4rem #D9E2E9; min-height: 9.6rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; list-style-type: none; font-size: 1.5rem; } ul.bookmarks:before { position: absolute; top: -0.7rem; left: 1.6rem; display: block; content: '\E873'; font-family: "font_icon"; font-size: 10rem; line-height: 0.9; color: #90ca00; } ul.bookmarks li { margin: 0; padding: 0; } ul.bookmarks li + li { margin-top: 0.2rem; } ul.bookmarks li a { color: #454545; } /* ========================== simple highlight question text ========================== */ img.left { float: left; margin-right: 30px; } /* PARTIALS */ /* Downloaded from https://fonts.google.com/specimen/Source+Sans+Pro */ /* Webfont generated by https://www.fontsquirrel.com/tools/webfont-generator */ /* EOT/SVG formats exported with https://everythingfonts.com/font-face */ /* Source Sans Pro - Light */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-light.eot"); src: url("../font/sourcesanspro-light.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-light.woff") format("woff2"), url("../font/sourcesanspro-light.woff2") format("woff"); font-weight: 300; font-style: normal; } /* Source Sans Pro - Light Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-lightitalic.eot"); src: url("../font/sourcesanspro-lightitalic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-lightitalic.woff") format("woff2"), url("../font/sourcesanspro-lightitalic.woff2") format("woff"); font-weight: 300; font-style: italic; } /* Source Sans Pro - Regular */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-regular.eot"); src: url("../font/sourcesanspro-regular.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-regular.woff") format("woff2"), url("../font/sourcesanspro-regular.woff2") format("woff"); font-weight: normal; font-style: normal; } /* Source Sans Pro - Regular Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-italic.eot"); src: url("../font/sourcesanspro-italic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-italic.woff") format("woff2"), url("../font/sourcesanspro-italic.woff2") format("woff"); font-weight: normal; font-style: italic; } /* Source Sans Pro - Bold */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-semibold.eot"); src: url("../font/sourcesanspro-semibold.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-semibold.woff") format("woff2"), url("../font/sourcesanspro-semibold.woff2") format("woff"); font-weight: bold; font-style: normal; } /* Source Sans Pro - Bold Italic */ @font-face { font-family: 'SourceSansPro'; src: url("../font/sourcesanspro-semibolditalic.eot"); src: url("../font/sourcesanspro-semibolditalic.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro-semibolditalic.woff") format("woff2"), url("../font/sourcesanspro-semibolditalic.woff2") format("woff"); font-weight: bold; font-style: italic; } /* ========================== access links ========================== */ #accessibility-links { font-size: 0.875em; /* 14px */ display: inline-block; margin-right: 30px; margin-top: 17px; font-family: "SourceSansPro"; font-weight: bold; line-height: 22px; color: #fff; text-decoration: none; } #accessibility-links.active, #access-keys.active { position: relative; width: auto !important; overflow: visible; border-bottom: 2px solid #ffffff; margin-top: 17px; height: auto; } /* ========================== secondary nav ========================== */ #PrimaryNavClose { margin: 25px 45px; cursor: pointer; } #secondary-nav { float: left; width: 100%; } #secondary-nav ul { list-style-type: none; margin: 0; padding: 0; font-size: 0.9375em; /* 15px */ line-height: 1.375em; /* 22px */ } #secondary-nav ul li { margin: 10px 0; border-left: 3px solid transparent; padding: 0 15px; } #secondary-nav ul li a { display: inline; position: relative; padding: 0; color: #333333; border-bottom: 1px dotted transparent; text-decoration: none; } #secondary-nav ul li a:hover, #secondary-nav ul li a:active, #secondary-nav ul li a:focus { text-decoration: none; background: transparent; border-bottom: 1px solid #333333; } #secondary-nav ul li a.active { border-bottom: 1px solid #333333; } #secondary-nav ul li .current { font-family: "SourceSansPro"; padding: 0 15px; margin: 10px 0; border-left: 3px solid #333333; } #secondary-nav ul li .current > a { border-bottom: 1px solid #333333; } #secondary-nav ul li .current--hasChildren > a:before { background: transparent url(43c41656fe07c80864ba1c982c6680da.svg) 0 0 no-repeat; width: 20px; height: 20px; display: block; content: ''; float: right; margin-right: -15px; } #secondary-nav ul li .currentLink { border-bottom: 1px solid #333333; } #secondary-nav ul li a.parent { color: #333333; } /* menu nav styles */ #menu-nav > a:before { display: inline-block; height: 2.2rem; font-size: 2.4rem; line-height: 0.75; padding: 0 0.6rem 0 0; vertical-align: middle; } #menu-nav > a:after { display: inline; font-size: 2rem; padding: 0 0.1rem 0 0.5rem; } #menu-nav ul { font-size: 1.8rem; } @media (max-width: 767px) { #primaryNav > ul { text-align: right; } #primaryNav > ul * { text-align: left; } #primaryNav > ul > li { float: none; position: static; } #primaryNav > ul > li#home-nav, #primaryNav > ul > li#menu-nav { float: left; } #login-nav > a > span, #contact-nav > a > span { display: none; } #login-nav > a:after, #contact-nav > a:after { padding-right: 10px; padding-left: 10px; padding-top: 10px; } #primaryNav > ul > li.social { display: none; } #primaryNav > ul > li.checkout.active { display: inline-block; } .primary-nav-dropdown:hover:before, .primary-nav-dropdown.active:before { display: none; } .primary-nav-dropdown:hover > a, .primary-nav-dropdown.active > a { color: #fff !important; } .primary-nav-dropdown > ul { position: fixed; top: 13.4rem; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: -webkit-calc(100% - 13.4rem); max-height: -moz-calc(100% - 13.4rem); max-height: calc(100% - 13.4rem); overflow: auto; z-index: 20 !important; border: none; margin: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(-110%, 0, 0); -moz-transform: translate3d(-110%, 0, 0); transform: translate3d(-110%, 0, 0); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s; } .sticky .primary-nav-dropdown > ul { top: 4.6rem; max-height: -webkit-calc(100% - 4.6rem); max-height: -moz-calc(100% - 4.6rem); max-height: calc(100% - 4.6rem); } .primary-nav-dropdown.active > ul { z-index: 20 !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* menu nav */ /* -------- */ #menu-nav a:after { content: ''; display: none; } #menu-nav > ul li { padding-right: 0; } #menu-nav > ul ul li { margin-right: 0; } /* contact nav styling */ /* ------------------- */ #contact-nav > a:hover { color: #1875B4 !important; } #contact-nav > ul { left: 0; right: 0; width: auto; font-size: 90%; } #contact-nav-follow-list li a span { text-align: center; } /* search nav styles */ /* ----------------- */ #primaryNav #search-nav { display: inline-block; } #primaryNav #search-nav span { display: none; } #primaryNav #search-nav a:after { display: inline; font-family: "font_icon"; content: '\E800'; font-size: 2rem; padding: 0 0 0 0.6rem; } } @media (min-width: 769px) and (max-width: 1023px) { /* nav tags */ /* -------- */ ul#home-nav-tags { display: block; float: none; width: 100%; min-height: 0; margin: 2.4rem 0 0 0; text-align: center; } ul#home-nav-tags li { display: inline-block; float: none; margin: 0 0.4rem 0.5rem 0; } ul#home-nav-tags li a { height: 3.5rem; font-size: 2.2rem; line-height: 3.7rem; } .home #page-banner { background-position: center calc(100% - 2rem); min-height: 35em; } /* primary navigation */ /* ------------------ */ .primary-nav-dropdown > ul { width: 34rem; } #menu-nav > ul li { white-space: normal; position: relative; padding: 0.4rem 0.4rem 0.4rem 3.4rem; font-size: 1.7rem; } #menu-nav > ul li a { display: block; } /* icon styling for parent / link / open / close */ #menu-nav > ul li > .icon { display: block; position: absolute; left: 0.4rem; top: 0; width: 2.4rem; height: 2.4rem; margin-right: 1.2rem; padding-top: 0.2rem; font-family: "SourceSansPro"; font-weight: bold; text-align: center; font-size: 2.8rem; line-height: 0.9; } #menu-nav > ul li > .icon:before { content: '\BB'; } #menu-nav > ul li.parent > .icon { top: 0.2rem; } #menu-nav > ul li.parent > .icon:before { content: '+'; color: #1875B4; cursor: pointer; } #menu-nav > ul li.parent.active > .icon { top: 0; } #menu-nav > ul li.parent.active > .icon:before { content: '\2013'; color: #1875B4; cursor: pointer; } /* sub-list styling */ #menu-nav ul li.active > a { font-family: "SourceSansPro"; font-weight: bold; } #menu-nav ul ul { display: block; list-style-type: none; margin-top: 0.4rem; } #menu-nav ul ul li { margin-right: -0.4rem; font-size: 1.7rem; } /* contact nav styling */ #contact-nav > ul { left: auto; right: -2.2rem; width: 32rem; } #contact-nav-follow-list { white-space: nowrap; } /*#secondary-nav { display: none; }*/ #secondary-nav + #main-content { width: auto; float: none; } } @media (max-width: 991px) { #secondary-nav { display: none; } } .article__info__label { font-family: "SourceSansPro"; font-weight: bold; margin-top: 15px; } .article__info__label--noMargin { margin: 0; } article__info__label .article-list article { clear: both; margin: 1rem 0 0 0; padding: 1rem 0 0 0; border-top: solid 1px #f4f4f4; font-size: 1.5rem; overflow: hidden; } .article-list article + article { margin-top: 1.2rem; } .article-list article h2 { clear: none; margin-top: 0 !important; font-size: 1.8rem; } .article-list article.media-release h2 { margin-bottom: 10px; } .article-list article h3 { clear: none; text-transform: uppercase; font-size: 1.3rem; color: #00849f; } .article-list article h3 span { color: #131313; text-transform: none; } .article-list article h3 + h3 { margin-top: 0.4rem !important; } /* article expand/collapse */ /* ----------------------- */ .article-list article.toggle { position: relative; } .article-list article.toggle h2 { padding-right: 5rem; } .article-list article.toggle .show-hide { position: absolute; top: 0.8rem; right: 1.2rem; margin-top: 0 !important; font-size: 2.2rem; line-height: 1; color: #666; text-decoration: none; background: transparent; padding-left: 0px; padding-right: 0px; outline: none; } /* closed */ .article-list article.toggle.closed .article-thumbnail, .article-list article.toggle.closed .article-info > * { display: none; } .article-list article.toggle.closed .article-info > .download-print { display: table; width: 100%; } /* open */ .article-list article.toggle.open h2 { padding-bottom: 0.6rem; } @media (max-width: 767px) { /* article styling */ /* --------------- */ .article-list article { font-size: 1.3rem; } .article-list article + article { margin-top: 1rem; } .article-list article h2 { font-size: 1.4rem; } .article-list article h3 { font-size: 1.3rem; } } /* ========================== page banner ========================== */ #banner { position: relative; z-index: 1; } #page-banner header { padding: 3.8rem 0 3rem 0; font-size: 2.2rem; line-height: 1.2; color: #fff; } #page-banner header .wrapper { position: relative; padding: 0; } #page-banner .wrapper { position: relative; } .toggle-content { display: none; } .toggle-link { cursor: pointer; color: #1875B4; } .toggle-link:hover { text-decoration: underline; } #page-banner header .wrapper > h2 { font-size: 4.4rem; font-weight: normal; color: #fff; text-transform: uppercase; -webkit-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); -moz-text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); } div.banner { background-attachment: scroll; background-size: cover; background-repeat: no-repeat; z-index: 1; width: 100%; float: left; padding-top: 50px; padding-bottom: 50px; } body.home div.banner { padding-top: 190px; } body.landing div.banner { padding-top: 200px; padding-bottom: 50px; height: 300px; } @media (max-width: 768px) { body.landing div.banner { padding-top: 110px; padding-bottom: 10px; } } div.banner > .wrapper { max-width: 950px; position: relative; } div.banner h1 { color: #ffffff; font-weight: bold; margin: 10px 0; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); letter-spacing: 1px; } div.banner h2 { font-size: 1em; /* 16px */ font-family: "SourceSansPro"; font-weight: bold; color: #000; margin: 20px 0 0 0; } body.home div.banner { background: url("/assets/branches/headers/home.jpg") center center; background-size: cover; } body.home div.banner__overlay { height: 500px; } html.wf-inactive, .wf-inactive body { font-size: 0.5625em; /* 9px */ } body, select, input, textarea { font-family: "SourceSansPro"; font-weight: bold; } .wf-inactive body { font-size: 0.9em; } h2 { font-family: "SourceSansPro"; font-weight: bold; } h3, h4, h5 { font-family: "SourceSansPro"; font-weight: bold; } b, strong, .bold { font-family: "SourceSansPro"; font-weight: bold; } button, .button, .button:visited, .Actions input { font-family: "SourceSansPro"; font-weight: bold; } .entypo, .font-icon { font-family: 'font_icon'; } main form label, main form .field fieldset { font-family: "SourceSansPro"; font-weight: bold; } main form .optionset label, main form .checkbox label { font-family: "SourceSansPro"; font-weight: bold; } main table th { padding: 0.8rem 1.3rem 0.6rem 1.3rem; background-color: #333333; font-family: "SourceSansPro"; font-weight: bold; } main blockquote { font-family: Georgia, serif; } main .table-header { font-family: "SourceSansPro"; font-weight: bold; } main .feature-doc a, main .feature-link a { font-family: "SourceSansPro"; font-weight: bold; } main .feature-link a:after { font-family: "SourceSansPro"; font-weight: bold; } .page-info-feedback time { font-family: "SourceSansPro"; font-weight: bold; } #main-page .tile h2 { font-family: "SourceSansPro"; font-weight: bold; } #page-foot h2 { font-family: "SourceSansPro"; font-weight: bold; } .tag-list { font-family: "SourceSansPro"; font-weight: bold; } .article-list article h3 { font-family: "SourceSansPro"; font-weight: bold; } .process-step header h3 { font-family: "SourceSansPro"; font-weight: bold; } div.banner { background-attachment: scroll; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 1; width: 100%; float: left; padding-top: 150px; padding-bottom: 50px; font-size: 2.25em; /* 36px */ } @media (max-width: 768px) { div.banner { padding-top: 206px; padding-bottom: 10px; font-size: 1.875em; /* 30px */ } } div.banner__overlay { position: absolute; width: 100%; top: 0; height: 260px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+1,333333+100&0.75+0,0+100 */ background: -moz-linear-gradient(top, rgba(51, 51, 51, 0.75) 0%, rgba(51, 51, 51, 0.74) 1%, rgba(51, 51, 51, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.75) 0%, rgba(51, 51, 51, 0.74) 1%, rgba(51, 51, 51, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(51, 51, 51, 0.75) 0%, rgba(51, 51, 51, 0.74) 1%, rgba(51, 51, 51, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf333333', endColorstr='#00333333',GradientType=0 ); /* IE6-9 */ } @media (max-width: 768px) { div.banner__overlay { height: 185px; } } div.banner > .wrapper { max-width: 95rem; position: relative; } div.banner h2 { font-size: 1em; /* 16px */ font-family: "SourceSansPro"; font-weight: bold; color: #000; margin: 20px 0 0 0; } h2 { font-size: 1em; /* 16px */ font-family: "SourceSansPro"; font-weight: bold; color: #000; margin: 0; } /* ========================== breadcrumbs ========================== */ #breadcrumbs { color: #666; font-size: 1.2rem; line-height: 2rem; clear: both; overflow: hidden; } #breadcrumbs .wrapper { padding-left: 1rem; } #breadcrumbs nav { line-height: 0; width: 100%; } #breadcrumbs span { float: left; padding: 0.6rem 0 0; line-height: 2.4rem; } #breadcrumbs a { color: #666; } /* ========================== breadcrumbs ========================== */ div.breadcrumbs { color: #333333 !important; font-size: 0.75em; /* 12px */ font-size: 1em; /* 16px */ line-height: 1.25em; /* 20px */ clear: both; overflow: hidden; min-height: 50px; padding: 10px; } @media (max-width: 767px) { div.breadcrumbs { padding: 10px 0; } } body.security div.breadcrumbs { border-top: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .breadcrumbs__hr { display: none; } } div.breadcrumbs nav { float: right; line-height: 0; } @media (max-width: 767px) { div.breadcrumbs nav { float: inherit; } } div.breadcrumbs a { color: #333333 !important; } @media print { div.breadcrumbs { display: none; } } .breadcrumbsPath { padding-top: 5px; /*font-size: 0; */ } @media (max-width: 767px) { .breadcrumbsPath { display: none; } } .breadcrumbsPath__item { font-size: 0.875em; /* 14px */ line-height: 20px; display: inline-block; font-weight: 100; } .breadcrumbsPath__item a { text-decoration: none !important; padding-bottom: 2px; color: inherit !important; border-bottom: 1px dotted transparent; } .breadcrumbsPath__item a:hover, .breadcrumbsPath__item a:active, .breadcrumbsPath__item a:focus { border-bottom: 1px solid #333333; } .breadcrumbsPath__item--home svg { vertical-align: text-top; } .breadcrumbsPath__item svg { fill: #333333; } .breadcrumbsPath__delimiter { padding: 0 0.35em; font-size: 1em; /* 16px */ opacity: 0.5; display: inline-block; font-weight: 100; } .breadcrumbsPath--inContent { display: none; padding: 15px; border-top: 3px solid #f4f4f4; border-bottom: 3px solid #f4f4f4; margin-bottom: 20px; } .breadcrumbsPath--inContent .breadcrumbsPath__item svg { fill: #333333; } @media (max-width: 767px) { .breadcrumbsPath--inContent { display: block; } } .mpiSocialButtons nav { width: 100%; } .mpiSocialButtons .social-links { float: right; } .mpiSocialButtons__shareLabel { float: right; font-size: 0.9375em; /* 15px */ margin-top: 17px; font-weight: 100; } /* ========================== columnar layouts ========================== */ .columns:before, .columns:after { content: ""; display: table; } .columns:after { clear: both; } .columns .column { float: left; } .columns > .column:first-child { margin-left: 0 !important; } /* standard layouts */ /* ---------------- */ main .columns.two .column { width: 48%; margin-left: 4%; } main .columns.three .column { width: 31.42857143%; margin-left: 2.857142854%; } html, body { font-family: "SourceSansPro"; font-weight: normal; font-display: block !important; } body, select, input, textarea { color: #131313; line-height: 1.4; } .printonly { display: none !important; } hr { border-top: 3px solid #f4f4f4 !important; } body { min-width: 20rem; background-color: #fff; } @media (max-width: 767px) { body { overflow-x: hidden; } } #page-wrapper { min-height: 100%; } .mobileHidden { display: block !important; } @media (max-width: 767px) { .mobileHidden { display: none !important; } } .mobileVisible { display: none !important; } @media (max-width: 767px) { .mobileVisible { display: block !important; } } .wrapper { margin: 0 auto; width: 950px !important; position: relative; } @media (max-width: 1023px) { .wrapper { width: 100%; padding: 0; margin: 0; } } @media (max-width: 767px) { .wrapper { width: 100% !important; } #main-page aside { padding-top: 2.4rem; margin-top: 2rem; } } @media (min-width: 769px) and (max-width: 1023px) { .wrapper { width: 60rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } } .remove-from-page { position: absolute; top: -10000px; left: -10000px; width: 0; height: 0; overflow: hidden; } .container--noMargin { margin: 0; } .container-fluid--positioner { padding-left: 50px; } .container--noPadding { padding: 0 !important; } .col--narrowLeftPadding { padding-left: 5px !important; } @media (max-width: 768px) { .col--narrowLeftPadding { padding-left: inherit !important; } } .col--narrowRightPadding { padding-right: 5px !important; } @media (max-width: 768px) { .col--narrowRightPadding { padding-right: 15px !important; } } .col--noLeftPadding { padding-left: 0 !important; } @media (max-width: 768px) { .col--noLeftPadding { padding-left: 15px !important; } } .col--noRightPadding { padding-right: 0 !important; } @media (max-width: 768px) { .col--noRightPadding { padding-right: 15px !important; } } .wrapper--lessPadding { width: calc(950px - 20px) !important; } @media (max-width: 768px) { .wrapper--lessPadding { width: auto !important; } } .col--rightFooterBorder { border-right: 1px solid rgba(255, 255, 255, 0.15); } .col--leftFooterBorder { border-left: 1px solid rgba(255, 255, 255, 0.15); } .scrollableTable { overflow-x: scroll; } .scrollableTable:after { margin-bottom: 5px; } @media (max-width: 767px) { .scrollableTable:after { content: 'Scroll for more ...'; font-style: italic; color: #666; } } .scrollableTable::-webkit-scrollbar { height: 15px; } @media (max-width: 767px) { .scrollableTable::-webkit-scrollbar { display: none; } } .scrollableTable::-webkit-scrollbar-thumb { background: #333333; border-radius: 20px; } .scrollableTable::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 20px; } .scrollableTable table { margin-bottom: 15px; } body.branch-biosec main .intro .intro__heroImage--biosec { display: block; } /* ========================== misc styles ========================== */ /* horizontal rule */ /* --------------- */ hr, .hr { display: block; height: 1px; border: 0; border-top: 0.1rem solid #f4f4f4; margin: 1.8rem 0 1.6rem 0; margin: 1.125em 0 1em 0; padding: 0; } hr--lessMargin, .hr--lessMargin { margin: 10px 0; } /* font styles */ /* ----------- */ b, strong .bold { font-weight: normal; } /* standard colour palette */ /* ----------------------- */ .color-01 { color: #003F5F; } .color-02 { color: #6E298D; } .color-03 { color: #A7600C; } .color-04 { color: #CE4643; } .color-05 { color: #4C8324; } .color-06 { color: #6E298D; } .color-08 { color: #6F777B; } /* custom text-selection colors */ /* ---------------------------- */ ::-moz-selection { background: #1875B4; color: #fff; text-shadow: none; } ::selection { background: #1875B4; color: #fff; text-shadow: none; } /* custom webkit tap highlight color */ /* ---------------------------------- */ a:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* other */ /* ----- */ ins { background-color: #fcd700; color: #000; text-decoration: none; } mark { background-color: #fcd700; color: #000; font-style: italic; font-weight: bold; } .txt-left { text-align: left; } .txt-right { text-align: right; } .float-right { float: right; } .float-left { float: left; } /* ========================== fix anchor scrolling behind the fixed header ========================== */ #main-content a:not([href]) { display: block; position: relative; top: -150px; visibility: hidden; } .number_list li { word-wrap: break-word; border-bottom-width: 0px; } ol.number_list { list-style-position: outside; padding-left: 3.8rem; } figure.standard-image img { max-width: 100% !important; height: auto !important; } html.wf-inactive, .wf-inactive body { font-size: 0.5625em; /* 9px */ } body, select, input, textarea { font-family: "SourceSansPro"; } .wf-inactive body { font-size: 0.9em; } h2 { font-family: "SourceSansPro"; } h3, h4, h5 { font-family: "SourceSansPro"; font-weight: bold; } b, strong, .bold { font-family: "SourceSansPro"; font-weight: bold; } button, .button, .button:visited, .Actions input { font-family: "SourceSansPro"; font-weight: bold; } .entypo, .font-icon { font-family: 'font_icon'; } main form label, main form .field fieldset { font-family: "SourceSansPro"; font-weight: bold; } main form .optionset label, main form .checkbox label { font-family: "SourceSansPro"; } main table th { padding: 0.8rem 1.3rem 0.6rem 1.3rem; background-color: #333333; font-family: "SourceSansPro"; font-weight: bold; } main blockquote { font-family: Georgia, serif; } main .table-header { font-family: "SourceSansPro"; font-weight: bold; } .page-info-feedback time { font-family: "SourceSansPro"; font-weight: bold; } #main-page .tile h2 { font-family: "SourceSansPro"; } #page-foot h2 { font-family: "SourceSansPro"; } .article-list article h3 { font-family: "SourceSansPro"; } .article-list article .article-info .columns { font-family: "SourceSansPro"; font-weight: bold; } .process-step header h3 { font-family: "SourceSansPro"; } /* FONT ICONS */ .fontIcon { font-family: "font_icon"; } .fontIcon--search:before { content: "s"; } .icon { font-family: "font_icon"; } /* ========================== decision support tool (DST) ========================== */ /* question page */ /* ------------- */ .dst-back-links { float: left; } .dst-back-links a { background: #1875B4; color: #ffffff !important; padding-left: 20px; padding: 10px 15px 10px 15px; text-decoration: none !important; display: inline-block; font-size: 0.875em; /* 14px */ border: none !important; } .dst-back-links a:hover, .dst-back-links a:focus, .dst-back-links a:active { background: rgba(24, 117, 180, 0.05); color: #1875B4 !important; } .dst-back-links a:hover:before, .dst-back-links a:focus:before, .dst-back-links a:active:before { border-left: 1px solid #1875B4; border-top: 1px solid #1875B4; } .dst-back-links a:before { content: ''; width: 10px; height: 10px; display: inline-block; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; transform: rotate(-45deg); margin-right: 10px; } .dst-back-links * + * { margin-left: 1px; } @media (print) { /* ========================== decision support tool (DST) ========================== */ .dst-back-links * + * { margin-left: 20px; margin-left: 2rem; } } /* ========================== document / link highlight ========================== */ @media (max-width: 767px) { .footer .table-cell { display: block; } .footer #page-foot-upper section ul { float: left; width: 100%; } } .footer__nzgovtLogo { font-size: 0; } @media (max-width: 767px) { .footer__nzgovtLogo { margin: 0 0 20px 0; } } .footer__nzgovtLogo a { display: block; background: url(2347b5e2a7d45442b15bf8c45ff3babf.svg) 0 0 no-repeat transparent; width: 200px; height: 22px; } .footer__nzgovtLogo a:focus { background-color: rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .footer__nzgovtLogo a { float: left; margin-top: 10px; } } .footer__logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .footer__mpiLogo { float: none; display: inline-block; width: auto; margin-right: 30px; font-size: 0; } .footer__mpiLogo a { display: inline-block; background: url(8f9304d0064985a97301a6c4faff6a75.svg) 0 0 no-repeat transparent; width: 200px; height: 50px; margin-bottom: 10px; margin-right: 30px; } @media (max-width: 767px) { .footer__mpiLogo a { margin-bottom: 0; } } .footer__mpiLogo .footer__shielded { background: none; display: inline-block; width: 40px; padding-top: 5px; vertical-align: top; } .footer__sections { min-height: 385px; } @media (max-width: 767px) { .footer__sections { min-height: auto; display: none !important; } } .footer__contacts { min-height: 350px; } @media (max-width: 767px) { .footer__contacts { min-height: auto; } } .footerLinks__item { margin-bottom: 5px; padding-bottom: 2px; display: inline-block; } .footerLinks__item:hover, .footerLinks__item:active, .footerLinks__item:focus { text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); } .footerLinks__delimeter { display: inline-block; padding: 0 3px; opacity: 0.25; } .footerUpdates { border-bottom: 1px solid #454545; padding-bottom: 5px; } @media (max-width: 767px) { .footerUpdates { border: none; } } #page-foot { position: relative; background-color: #333333; font-size: 0.875em; /* 14px */ color: #ccc; } #page-foot h2 { font-size: 2.2rem; font-weight: normal; color: #ccc; margin-top: 30px; font-weight: bold; margin-bottom: 1rem; } #page-foot a { color: #ccc; } #page-foot ul { list-style-type: none; padding: 0; } #page-foot ul li { margin-top: 0.3rem; } #footer-nav .column { margin-left: 2.5rem; } /* contact area */ #footer-contacts a { display: inline-block; margin-right: 2rem; font-size: 1em; display: block; font-weight: bold; letter-spacing: 1px; margin-bottom: 6px; } /* lower footer area */ /* ----------------- */ #page-foot-lower { border-top: solid 0.1rem #454545; padding: 20px 0; float: left; background: #333333; width: 100%; } #page-foot-lower .wrapper { padding: 0 15px; } @media (max-width: 767px) { #page-foot-lower .wrapper { padding: 0; } } #page-foot-lower p { float: left; } /** small size **/ @media (max-width: 767px) { #page-foot-upper, #page-foot-upper .wrapper.table { height: auto; min-height: 0; } #page-foot-upper { padding: 1rem 0 0.8rem 0; background-image: none; } #page-foot-upper .wrapper.table .table-cell { border: none; } #page-foot-upper .wrapper.table .table-cell > * { margin: 0; } #page-foot-upper section h2 { display: block; float: left; padding: 0.6rem 0 0 0; } #page-foot-upper section ul { display: block; float: right; } } /** medium size **/ @media (max-width: 979px) { #page-foot-lower p { max-width: 40rem; } } @media print { #page-foot-upper { margin-top: 12pt; padding-top: 6pt; border-top: solid 1pt #eeeeee; } #page-foot-upper #footer-contacts { display: block; } #footer-contacts h2 { font-size: 16pt; } #footer-contacts ul li span { display: inline-block; margin-right: 12pt; } #footer-contacts ul li a { text-decoration: none; } } .vertical_center { display: flex; align-items: center; } /* ========================== forms ========================== */ main form { padding: 30px; background: #f4f4f4; } main * + form { margin-top: 1.6rem; } /* placeholders */ form input::-webkit-input-placeholder, form input:-ms-input-placeholder, form input::placeholder, form select::-webkit-input-placeholder, form select:-ms-input-placeholder, form select::placeholder { color: #767676; opacity: 1; } /* disable form input */ /* ------------------ */ form.inactive:before { position: absolute; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; content: ''; background-color: rgba(255, 255, 255, 0.5); -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; } form.inactive:after { position: absolute; top: 50%; left: 50%; width: 6.4rem; height: 6.4rem; margin-top: -3.2rem; margin-left: -3.2rem; content: ''; background: url(7ac8dc1d934d1dfe943b85cd025b4bfe.gif) 0 0 no-repeat transparent; background-size: contain; } /* general form inner styles */ /* ------------------------- */ main form input, main form select, main form textarea { display: block; width: 100%; border: none; padding: 10px; background: #ffffff; line-height: inherit !important; } main form .field { position: relative; } main form .field + .field { margin-top: 1.2rem; } .Actions { margin-top: 2rem; padding-top: 2rem; border-top: solid 0.1rem #cdd6dc; text-align: right; } .Actions input + input { margin-left: 1rem; } /* form field labels */ /* ----------------- */ main form label, main form .field fieldset { display: inline-block; color: #333333; } main form .req-indicator, main form .required, main form .validation, main form .error { color: #990000; } main form .error { font-weight: normal; } main form span.extra { display: block; font-size: 90%; color: #666666; } main form span.helper { position: absolute; top: -0.2rem; left: 38rem; width: 2rem; height: 2rem; color: #ffffff; background-color: #999999; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; font-size: 1.3rem; line-height: 1.63; text-align: center; cursor: pointer; } main form span.extra.popup { display: none; position: absolute; z-index: 10; top: -0.2rem; left: 41rem; max-width: 20rem; border: solid 0.2rem #71777B; background-color: #ffffff; padding: 1rem; box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.4); font-size: 1.3rem; color: #131313; } main form span.extra.popup.active { display: block; } /* check boxes and radio buttons */ /* ----------------------------- */ form .twocol.optionset .middleColumn { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; width: 100%; } form .twocol.optionset .middleColumn div { display: block; width: 100%; margin-bottom: 5px; } @media (min-width: 768px) { form .twocol.optionset .middleColumn div { width: calc(50% - 10px); } } main form .optionset { list-style-type: none; margin: 0; } main form .optionset label, main form .checkbox label { display: inline; vertical-align: middle; color: #131313; } main form .optionset input, main form .checkbox input { display: inline; padding: 0; width: auto; margin: 5px 10px 5px 5px; border: none; box-shadow: none; vertical-align: initial; } main form .fieldgroup-field { display: inline-block; width: 44%; } @media (min-width: 769px) and (max-width: 1023px) { main form span.extra.popup { left: auto; right: 15rem; max-width: 28rem; } } /* ========================== glossary page ========================== */ /* search section */ /* -------------- */ @media (min-width: 768px) { body.home header.page { background-color: transparent; } } header.page { overflow: visible; float: left; background: #333333; vertical-align: 60px; background-size: cover; min-width: 100%; z-index: 2; padding-bottom: 10px; position: fixed; top: 0; min-height: 60px; } header.page svg { width: 21px; height: 21px; fill: #ffffff; } header.page body.home { background-color: transparent !important; } header.page body.scrolling { background: #333333; } @media (max-width: 767px) { header.page { padding-bottom: 10px; } header.page #HeaderSearch { position: absolute; right: 10px; bottom: -42px; } } header.page .header__branchLogo { position: relative; z-index: 1; } header.page .header__branchLogo img { display: inline-block; width: 250px; height: 60px; } @media (max-width: 768px) { header.page .header__branchLogo img { max-height: 35px; max-width: 150px; position: absolute; } } header.page .header__branchLogo a:focus { outline: none; } header.page .header__branchLogo a:focus img { outline: none; background: rgba(255, 255, 255, 0.05); } header.page .utility__nav-wrapper, header.page .primary__nav-wrapper, header.page .search__bar-wrapper { display: inline-block; vertical-align: top; } header.page .header__nav { float: right; padding-right: 15px; margin-top: 10px; } @media (max-width: 768px) { header.page .header__nav { margin-top: 0; } } header.page .header__nav nav { line-height: 1.875em; /* 30px */ vertical-align: top; } header.page .header__nav nav li { list-style: none; } header.page .header__nav nav li.dropdown > ul { display: none; line-height: 2em; direction: rtl; position: absolute; overflow: visible; z-index: 1; } header.page .header__nav nav li.dropdown > ul > li { direction: ltr; margin: 0.75rem; } header.page .header__nav nav li.dropdown.active { max-width: none; overflow: visible; } .layout { /* * LINKS */ /* secure links */ /* ------------ */ /* inactive */ /* -------- */ /* external link */ /* ------------- */ } .layout .visually-hidden { display: none; visibility: hidden; } .layout a { color: #1875B4; text-decoration: none; } .layout a:hover, .layout a:focus { text-decoration: underline; } .layout a:focus img { outline: dashed 1px; } .layout a.secure:before { display: inline-block; padding-right: 0.6rem; font-size: 120%; text-decoration: none !important; } .layout a.secure:hover:before, .layout a.secure:focus:before, .layout a.secure:before:hover, .layout a.secure:before:focus { text-decoration: none !important; } .layout a.inactive { color: #999999; } .layout a.external { position: relative; padding-right: 20px; display: inline-block; } .layout a.external:after { display: inline; font-size: 86%; content: ''; background-image: url(22f1cd65b26365255de685dbf79b7247.svg); background-size: 12px; background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; display: block; position: absolute; right: 0; margin-top: -24px; } .layout .feature-link a:after { margin-top: -23px; } .layout--topMargin { margin-top: 30px; } .layout__main { padding-top: 28px; padding-bottom: 75px; font-size: 1em; /* 16px */ /* * IMAEGS */ /* * QUOTES */ /* * BOOKMARKS */ /* * MEDIA */ /* * TOOLTIPS */ /* * PAGE_TITLE */ } .layout__main table td, .layout__main table th { font-size: 1em; } .layout__main .leftAlone { margin: 5px 30px 15px 0; } .layout__main .featureTiles { margin: 60px 0; } @media (max-width: 768px) { .layout__main .featureTiles { margin: 30px 0; } } .layout__main--noPaddingBottom { padding-bottom: 0; } .layout__main .captionImage { font-size: 0; display: table; } .layout__main .captionImage.left { float: left; margin: 30px 30px 30px 0; } .layout__main .captionImage.right { float: right; margin: 30px 0 30px 30px; } .layout__main figure { display: table; float: left; clear: both; margin: 30px 30px 30px 0; overflow: hidden; font-size: 0; } .layout__main figure .leftAlone { margin: 15px 0 0 0; } .layout__main figcaption, .layout__main p.caption { font-size: 0; background: #333; padding: 15px; color: #fff; font-size: 0.875em; /* 14px */ margin: 0; display: table-caption; caption-side: bottom; } .layout__main figcaption a, .layout__main p.caption a { color: #fff; text-decoration: underline; } .layout__main p + figure.standard-image, .layout__main h2 + figure.standard-image, .layout__main h3 + figure.standard-image, .layout__main h4 + figure.standard-image, .layout__main h5 + figure.standard-image { margin-top: 10px !important; } .layout__main p + figure.standard-image img, .layout__main h2 + figure.standard-image img, .layout__main h3 + figure.standard-image img, .layout__main h4 + figure.standard-image img, .layout__main h5 + figure.standard-image img { margin-top: 0; } .layout__main figure.full-width { float: none; width: 100%; margin: 0; } .layout__main figure.full-width img { width: 100%; height: auto; } .layout__main * + figure.full-width { margin-top: 1rem; } .layout__main .standard-image + h2, .layout__main .standard-image + h3 { margin-top: 0.5rem !important; } .layout__main .standard-image ~ h2, .layout__main .standard-image ~ h3 { clear: none; } .layout__main blockquote { position: relative; padding: 40px; font-size: 1.5em; line-height: 1em; font-style: italic; } .layout__main blockquote:before { display: block; position: absolute; top: 30px; left: 0; font-size: 3em; } .layout__main blockquote:after { display: block; position: absolute; bottom: 0; right: 30px; font-size: 3em; } .layout__main * + blockquote { margin-top: 1rem; } .layout__main ul.bookmarks { width: 100%; display: block; position: relative; margin: 2rem 0; padding: 1.2rem 1.2rem 1.2rem 7rem; border: solid 0.4rem #D9E2E9; min-height: 9.6rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; list-style-type: none; font-size: 1.5rem; } .layout__main ul.bookmarks:before { position: absolute; top: -0.7rem; left: 1.6rem; display: block; font-size: 10rem; line-height: 0.9; color: #90ca00; } .layout__main ul.bookmarks li { margin: 0; padding: 0; } .layout__main ul.bookmarks li + li { margin-top: 0.2rem; } .layout__main ul.bookmarks li a { color: #454545; } .layout__main .media { max-width: 100%; max-height: 100%; } .layout__main .media iframe { max-width: 100%; max-height: 100%; } .layout__main a.tool-tip { position: relative; display: inline-block; overflow: visible; padding: 0 0.2rem; border: dashed 0.1rem #73787C; text-decoration: none; cursor: default; color: inherit; } .layout__main a.tool-tip:before { display: block; visibility: hidden; opacity: 0; content: attr(data-tool-tip); position: absolute; z-index: 5; bottom: 100%; left: -50%; width: 22rem; height: auto; margin-bottom: -0.2rem; padding: 1rem 2rem; background-color: #ffffff; border: solid 0.2rem #71777B; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.6); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.6); cursor: default; font-size: 1.4rem; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .layout__main a.tool-tip:after { display: block; visibility: hidden; opacity: 0; content: ''; position: absolute; z-index: 6; bottom: 100%; left: 20%; margin-bottom: -1.4rem; width: 3.2rem; height: 1.4rem; background: url(4a4c263433414b85c7df756353f0bf1c.png) top center no-repeat transparent; background-size: contain; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .layout__main a.tool-tip:hover:before, .layout__main a.tool-tip:focus:before, .layout__main a.tool-tip:hover:after, .layout__main a.tool-tip:focus:after { visibility: visible; opacity: 1; } .layout__main h1.pageTitle { line-height: 1.1; font-family: "SourceSansPro"; font-weight: bold; color: #333333; } .layout__main h2.pageTitle { line-height: 1.1; font-family: "SourceSansPro"; font-weight: bold; color: #333333; } .layout__main .landingpage--title--margin { margin: 0 0 8px 0px; } .layout__main body.landing > h1.pageTitle { padding-left: 15px; padding-right: 15px; margin: 0 0 30px 0; } .layout__main .intro, .layout__main .intro * { line-height: 1.2em; margin-top: 0; } .layout__main .intro .intro__heroImage { float: left; width: 80px; height: 80px; margin: 0 20px 15px 0; } @media (max-width: 767px) { .layout__main .intro .intro__heroImage { width: 65px; margin: 0 11px -8px 0; } } .layout__main .intro hr { margin: 1.8rem 0; border-top: 0.3rem solid #ededed; } .layout__main * + .intro, .layout__main h1.pageTitle + .intro { margin-top: 0.6rem !important; } .layout__main p + p, .layout__main * + p { margin-top: 0.5em; } .layout__main ul, .layout__main ol { padding: 1em; display: table-cell; margin-left: 0; padding-left: 18px; clear: both; } .layout__main ol { list-style-type: decimal; } .layout__main ol ol { margin: 0 0 0 2rem; list-style-type: lower-latin; } .layout__main ol li { padding: 0.125em 0; /* 2px */ } .layout__main ol ol li { border-bottom: none; } @media (max-width: 1024px) { /*.layout__main__sideNav { display: none; } */ } .layout__main__content h1, .layout__main__content h2, .layout__main__content h3, .layout__main__content h4, .layout__main__content h5, .layout__main__content h6 { line-height: 1.1; font-family: "SourceSansPro"; font-weight: bold; color: #333333; } .layout__main__content h1#page-title, .layout__main__content h1.pageTitle, .layout__main__content h2#page-title, .layout__main__content h2.pageTitle, .layout__main__content h3#page-title, .layout__main__content h3.pageTitle, .layout__main__content h4#page-title, .layout__main__content h4.pageTitle, .layout__main__content h5#page-title, .layout__main__content h5.pageTitle, .layout__main__content h6#page-title, .layout__main__content h6.pageTitle { margin-top: 0; } .layout__main__content h1 { font-size: 2.5em; margin-top: 0.75em; } .layout__main__content h2 { font-size: 2em; margin-top: 0.75em; } .layout__main__content h3 { font-size: 1.5em; margin-top: 0.75em; } .layout__main__content h3.pageTitle { font-size: 2em; margin-top: 0.75em; } .layout__main__content h4 { font-size: 1.25em; margin-top: 0.75em; } .layout__main__content h5 { font-size: 1.15em; margin-top: 0.75em; } .layout__main__content h6 { font-size: 1em; margin-top: 0.75em; } .layout__main__content h1:first-child { margin-top: 0 !important; } .layout__main__content .intro { border-bottom: 3px solid #f4f4f4; padding-bottom: 20px; margin-bottom: 10px; } @media (max-width: 768px) { .layout__main__content .intro { margin-bottom: 0; } } .layout__main__content a { text-decoration: none; border-bottom: 1px dotted; } .layout__main__content a:hover, .layout__main__content a:focus, .layout__main__content a:active { text-decoration: none; border-bottom: 1px solid; } .layout__main__content p { line-height: 1.5em; } @media (max-width: 767px) { .layout__main { /* ========================== forms ========================== */ /* general form inner styles */ /* ------------------------- */ /* ========================== tables ========================== */ /* ========================== bookmarks ========================== */ /* ========================== page info and feedback ========================== */ /* main content feedback */ /* --------------------- */ /* ========================== quotes ========================== */ } .layout__main main form { padding: 1.2rem; font-size: 1.4rem; } .layout__main main form input, .layout__main main form select, .layout__main main form textarea { width: 100%; max-width: none; font-size: 0.875em /* 14px */ } .layout__main main form input[type="radio"], .layout__main main form input[type="checkbox"] { width: auto; } .layout__main main form .field + .field { margin-top: 1rem; } .layout__main .Actions { margin-top: 1.6rem; padding-top: 1.6rem; } .layout__main main form .columns .column { float: none; margin-left: 0 !important; width: 100% !important; } .layout__main main form .columns .column + .column { margin-top: 1rem; } .layout__main main form span.helper { left: auto; right: 0; } .layout__main main form span.extra.popup { left: auto; right: 2.4rem; max-width: 24rem; } .layout__main main table { position: relative; line-height: 1.2; } .layout__main main table th { padding: 0.4rem 0.4rem 0.3rem 0.4rem; font-size: 1.3rem; line-height: 1.2; } .layout__main main table td { padding: 0.4rem; } .layout__main main table td img { width: 12rem; margin: 0 0.8rem 0.5rem 0; } .layout__main main .table-wrapper { overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .layout__main main ul.bookmarks { font-size: 1.3rem; } .layout__main .page-info-feedback { font-size: 0.75em; /* 12px */ line-height: 1.4; } .layout__main .page-info-feedback span:last-child { margin-left: 0; display: block; } .layout__main main blockquote { padding: 2.2rem 3.6rem; font-size: 1.8rem; line-height: 2.4rem; } .layout__main main blockquote:before { top: 4.6rem; left: -0.8rem; font-size: 8rem; } .layout__main main blockquote:after { bottom: 0rem; right: 0.8rem; font-size: 8rem; } } .layout__promoTiles { background: #f4f4f4; padding: 30px 0; } .layout__promoTiles__quickLinks h2 { margin-top: 0; } @media (max-width: 768px) { .layout__promoTiles { padding: 15px 0; } } .layout .sidebarToggle { display: none; } @media (min-width: 1024px) { .layout .layout__main .row { position: relative; } .layout .layout__main .row.iframe-row-overflow { overflow: hidden; } .layout .sidebarToggle { display: block; width: 50px; height: 50px; position: absolute; left: 0; top: 0; z-index: 2; text-align: center; padding-top: 10px; cursor: pointer; transition: left .25s ease-in-out; } .layout .sidebarToggle svg { width: 30px; height: 30px; display: none; } .layout .sidebarToggle svg:first-of-type { display: inline-block; } .layout .sidebarToggle.sidebarToggleActive { left: 250px; } .layout .sidebarToggle.sidebarToggleActive svg { display: inline-block; } .layout .sidebarToggle.sidebarToggleActive svg:first-of-type { display: none; } .layout .sideBarToggleWrap { display: block; width: 100%; height: 100%; max-height: calc(100% - 75px - 28px - 68px); background: #ededed; max-width: 300px; position: absolute; padding: 20px; z-index: 1; left: -300px; transition: left .25s ease-in-out; } .layout .sideBarToggleWrap.sideBarToggleWrapActive { left: 0; } .layout .sideBarToggleWrap .col-xs-12 { width: 100%; } .layout .sideBarToggleWrap + .layout__main__content main h1 { padding-left: 50px; } } /* ========================== main content ========================== */ #main-content { display: block; width: 100%; } #secondary-nav + #main-content { width: 70rem; float: right; } /* ========================== modal pop ups ========================== */ .mpi-colour-border-bottom { border-bottom: 5px; } .mpi-colour-border-top { border-top: 5px; } .mpi-colour-border-left { border-left: 5px; } .mpi-colour-border-right { border-right: 5px; } /* ========================== page info and feedback ========================== */ [data-formname="Feedback"] #pageFeedback, [data-formname="Feedback"] #pageFeedback + #FeedbackLink { display: none; } [data-formname="Feedback"] #pageFeedback + #FeedbackLink + #DocCartSideLink a { bottom: 20px; } /* main content feedback */ /* --------------------- */ .page-info-feedback { clear: both; margin-top: 1.875em; /* 30px */ border-top: solid 0.25em #ededed; /* 4px */ padding: 0.75em; /* 12px */ -webkit-border-bottom-left-radius: 0.375em; /* 6px */ -webkit-border-bottom-right-radius: 0.375em; /* 6px */ -moz-border-bottom-left-radius: 0.375em; /* 6px */ -moz-border-bottom-right-radius: 0.375em; /* 6px */ border-bottom-left-radius: 0.375em; /* 6px */ border-bottom-right-radius: 0.375em; /* 6px */ background-color: #f4f4f4; font-size: 1em; /* 16px */ line-height: 1; } .page-info-feedback span:first-child { margin-right: 0.625em; /* 10px */ line-height: 1.5em; } .page-info-feedback span:last-child { margin-left: 0rem !important; } /* ============================== process page & expandable page ============================== */ .expanable-master, .toggle-master { display: flex; justify-content: flex-end; font-size: 0.875em; /* 14px */ font-weight: 700; cursor: pointer; padding-right: 10px; position: relative; color: #333333; } .expanable-master:before, .toggle-master:before { content: '-'; position: absolute; right: 0; top: -1px; color: #333333; } .expanable-master-open:before, .toggle-master-open:before { content: '+'; position: absolute; right: 0; top: 0; color: #333333; } .toggle-master { margin-top: 15px; } .process-flow { position: relative; padding: 0 0 30px 0; padding: 0 0 3rem 0; float: left; width: 100%; } * + .process-flow { margin-top: 1.125em; /* 18px */ } .process-flow .process-show { position: absolute; top: 0; right: 0; } .process-flow h2.process-title { clear: none; margin-bottom: 3rem; font-size: 3rem; } @media (max-width: 767px) { .process-flow .process-show { position: static; } .process-flow h2.process-title { width: 100%; clear: both; } /* process steps */ /* ------------- */ .process-step + .process-step { margin-top: 1.625em; /* 26px */ } /* header */ /* header */ .process-step.non-numbered header > a { min-height: 4.3rem; } .process-step header > a:after { left: -3.6rem; } .process-step.non-numbered header > a:after { left: -1.9rem; } .process-step header h3 span { width: 3.2rem; height: 3.2rem; -webkit-border-radius: 2rem; -moz-border-radius: 2rem; border-radius: 2rem; font-size: 2.3rem; line-height: 3.4rem; } .process-step header h4 { font-size: 1.7rem; margin-top: 0 !important; } } /* process modal pop up specific styles */ /* ------------------------------------ */ .modal.process-modal { text-align: right; } .modal.process-modal * + figure { margin-top: 10px; margin-top: 1rem; } .modal.process-modal figure { display: block; width: 100%; text-align: left; } .modal.process-modal figure img { display: block; margin: 0; padding: 0; max-width: 100%; } /* detail */ .process-detail { background: #f4f4f4; padding: 30px; margin-bottom: 60px; } .process-detail:after { content: ""; display: block; width: 100%; height: 60px; background-color: #f4f4f4; border-bottom-left-radius: 35%; border-bottom-right-radius: 35%; position: absolute; left: 0; } .process-step.closed .process-detail { display: none; } .processStep { margin-top: 15px; } .processStep__title, .processStep__stepIndicator { font-family: "SourceSansPro"; font-weight: bold; font-size: 1.25em; /* 20px */ color: #fff; display: inline-block; } .processStep__title { font-size: 1.25em !important; } .processStep__stepIndicator { white-space: nowrap; font-family: "SourceSansPro"; font-size: 1em; border-bottom-color: #333; border-bottom: 3px solid #ffffff; margin-right: 20px; margin-bottom: 1em; } .processStep__expandIcon { fill: #333333; float: right; border: 2px solid transparent; background: transparent; outline: none; padding: 0; } .processStep__expandIcon span { display: inline-block; width: 29px; } .processStep__expandIcon:before { display: none; } .processStep__expandIcon:hover, .processStep__expandIcon:active, .processStep__expandIcon:focus { border: 2px solid #333333; background: transparent; } @media (max-width: 1024px) { .processStep__icon { position: absolute; top: 15px; right: 15px; } } .processStep .processStep__expandIcon--plus, .processStep .processStep__expandIcon--minus { display: block; width: 30px; /* ie11 required! */ height: 30px; /* ie11 required! */ } .processStep .processStep__expandIcon--plus svg, .processStep .processStep__expandIcon--minus svg { width: 27px; /* ie11 required! */ height: 27px; /* ie11 required! */ } .processStep.closed { border-bottom: 3px solid #f4f4f4; } .processStep.closed .processStep__expandIcon--minus { display: none; } .processStep.closed .processStep__title, .processStep.closed .processStep__stepIndicator { color: #333; } .processStep.closed .processStep__stepIndicator { border-bottom: 3px solid #333333; } .processStep.open .processStep__expandIcon--plus { display: none; } .processStep.open .processStep__expandIcon { border: 2px solid #ffffff; fill: #ffffff; } /* process steps */ /* ------------- */ .process-step header { cursor: pointer; background-color: #333333; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; display: block; position: relative; text-decoration: none; color: #ffffff; padding: 15px; margin-top: 15px; border-bottom: 3px solid #333333; } .process-step header p { color: #ffffff; } .process-step header > a { color: #333333; } .process-step.closed header { background-color: #f4f4f4; } .process-step.closed header:hover, .process-step.closed header:focus .process-step.closed header:active { background-color: #e6e6e6; } .process-step.closed header > a { background-color: #333333; color: #ffffff; } .process-step.closed header p { color: #333333; } .process-step.closed header h3 { color: #333333; border-bottom-color: #333333; } .process-step.closed header h4 { color: #333333; } .process-step header h4 { padding-right: 26px; padding-right: 2.6rem; font-size: 2rem; } /* header */ .process-step header > a:hover { text-decoration: none; } .process-step.closed header > a:after { display: none; } .process-step header p { margin: 0; } .process-detail h1:first-child, .process-detail h2:first-child, .process-detail h3:first-child, .process-detail h4:first-child, .process-detail h5:first-child, .process-detail h6:first-child { margin-top: 0; } ul.social-links.medium { margin: 0; padding: 0 !important; } .social-links li { display: inline-block; text-align: center; list-style-type: none; float: left; margin-left: 7px; } footer .social-links li { margin: 0 5px 5px 0; } @media (max-width: 767px) { .social-links li { margin-left: 0; margin-right: 8px; } } .social-links a:hover, .social-links a:focus, .social-links a:active { opacity: 0.8; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } .breadcrumbs .social-links:hover a { opacity: 0.10; } .breadcrumbs .social-links a:hover { opacity: 1; } .breadcrumbs .social-links a:focus, .breadcrumbs .social-links a:active { opacity: 0.25; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } footer .social-links.medium li a { width: 28px; height: 28px; border-radius: 50%; background-color: #ccc; } .social-links li a { display: block; overflow: hidden; text-decoration: none; text-align: center; position: relative; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-links.small li a { width: 30px; height: 30px; padding: 2px; line-height: 28px; border-radius: 50%; background-color: #ffffff; } .social-links.medium li a { width: 30px; height: 30px; line-height: 25px; padding: 3px; } /* bigger links/buttons */ .social-links.big li a { width: 3rem; height: 3rem; line-height: 3rem; } .social-links li svg { line-height: 2.4rem; vertical-align: middle; width: 60%; height: 60%; } .social-links.no-background li { background: transparent; } .social-links.no-background li:hover svg path , .social-links.no-background li:focus svg path { fill: #1875B4; } .social-links.no-padding { padding: 0; } /* yech, bump it down by 3px without disturbing other things */ #page-head-utilities .social-links.no-padding { position: relative; top: 3px; } /* bump it by an eighth of the eventual text size */ .social-links li.link-linked-in svg { margin-top: -0.2em; } /* ========================== special feature box ========================== */ .column-layout-style { -webkit-columns: 2; -webkit-column-gap: 2.5rem; -moz-columns: 2; -moz-column-gap: 2.5rem; columns: 2; column-gap: 2.5rem; } @media (max-width: 767px) { .column-layout-style { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } /* ========================== pseudo tabular layouts ========================== */ .table { display: table; border-collapse: collapse; width: 100%; } .table-row { display: table-row; } .table-cell { display: table-cell; } /* ========================== tables ========================== */ main table { width: 100%; border-collapse: collapse; font-size: 1em; /* 16px */ } main table tr { border-bottom: 1px solid #333; } main table td { border: none !important; } main table tbody tr:nth-child(2n+1) td { background-color: #f4f4f4; } main table th, main table thead td, main table tfoot td { padding: 0.8rem 1.3rem 0.6rem 1.3rem; background-color: #333333; font-size: 1.8rem; color: #ffffff; font-weight: normal; text-align: left; vertical-align: top; } main table caption { padding: 10px 10px 10px 0; text-align: left; font-family: "SourceSansPro"; font-weight: bold; font-size: 1em; /* 16px */ } main table.no-shading tbody tr td, main table.naked tbody tr td { background: transparent !important; } main table.naked tbody tr { border: none; } main table.naked tbody tr td { border: none; } main table td { padding: 0.8rem 1.3rem; } main table td:first-child, main table th:first-child { border-left: none; } main table td img { display: block; width: 15rem; float: left; margin: 0 1rem 0.5rem 0; } main * + table { margin-top: 0.625em; /* 10px */ } @media (min-width: 841px) and (max-width: 1023px) { main table { font-size: 0.9375em; /* 15px */ line-height: 1.2; } main table th { font-size: 0.9375em; /* 15px */ line-height: 1.2; } main table td img { max-width: 10rem; margin: 0 0.6rem 0.4rem 0; } } /* ========================== article lists (with tags) ========================== */ .ui-accordion .ui-accordion-icons { padding: 15px !important; } .ui-accordion .ui-accordion-content { border: none; } .ui-accordion .ui-accordion-content .checkbox { padding: 0; } .ui-accordion .ui-accordion-content .checkbox input[type=checkbox] { float: left; width: auto !important; } .ui-accordion .ui-accordion-content .optionset li { margin: 15px 25px; } .ui-accordion .ui-accordion-header { background: #333; border-radius: 0; border: none; padding-left: 0; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { display: none; } .ui-accordion .ui-state-active a { color: #fff; font-family: "SourceSansPro"; font-size: 1.25em; /* 20px */ border: none; } .ui-accordion .ui-state-active a:link, .ui-accordion .ui-state-active a:visited { color: #fff; border: none; } .ui-state-default a:link, .ui-state-default a:visited, .ui-state-default a:hover, .ui-state-default a:active { color: #fff !important; border: none; font-size: 1.25em; /* 20px */ } /* COMPONENTS */ .article-list { float: left; width: 100%; } .article-list-toggleAll { width: 100%; clear: both; border-bottom: 3px solid #f4f4f4; float: left; padding: 15px 0; margin-bottom: -30px; } @media (max-width: 768px) { .primary__nav-wrapper #PrimaryNavButton { transition: none; position: absolute; top: 0px; right: 15px; z-index: 2; margin-top: 5px; } } .primary__nav-wrapper button { background-color: transparent !important; padding: 0; margin: 10px 5px 5px 5px; height: 22px; width: 22px; overflow: hidden; } .primary__nav-wrapper button:hover, .primary__nav-wrapper button:active, .primary__nav-wrapper button:focus { opacity: 0.5; outline: none; } .primary__nav-wrapper .primary__nav { white-space: nowrap; height: 100%; display: block; z-index: 10000; transition: width 1s; overflow: auto; position: fixed; right: 0; top: 0; background: #444; } .primary__nav-wrapper .primary__nav a { text-decoration: none; color: #fff; } .primary__nav-wrapper .primary__nav a:hover { text-decoration: none; } .primary__nav-wrapper .primary__nav.closed { display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown { color: #fff; height: auto; margin: -1em 0 0; padding: 0 30px; display: block; clear: both; /* drop down show / hide */ } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown:hover, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown.active { z-index: 10 !important; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown:hover > a, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown.active > a { z-index: 10 !important; color: #fff !important; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown:hover:before, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown.active:before { display: block; z-index: 8 !important; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown:hover > ul, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown.active > ul { display: block; z-index: 5 !important; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown:before { content: ''; position: absolute; border-bottom: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown ul { overflow: hidden; transition: height 2s; margin-left: 1.25em; /* 20px */ } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown ul + li { border-top: solid 0.1rem #eee; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown ul + li:last-child { border-bottom: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem { padding: 0.3125em 0 0 1.25em; line-height: 2.5em; /* 40px */ list-style-type: none; vertical-align: middle; text-align: left; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem a { text-decoration: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; font-size: 1em; /* 16px */ text-transform: none; line-height: initial; color: #fff; background-color: transparent; font-family: "SourceSansPro"; font-weight: bold; margin-right: 20px; display: inline-block; padding-bottom: 3px; padding-right: 1em; white-space: normal; text-decoration: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem a:hover, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem a:focus { color: #fff; text-decoration: underline; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem a.navItem__current { color: #fff; text-decoration: underline; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon { cursor: pointer; float: right; outline: none; position: absolute; right: 30px; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon:hover, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon:active, .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon:focus { opacity: 0.5; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon:before { color: #ffffff; cursor: pointer; font-size: 1.25em; /* 20px */ } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon svg { fill: #ffffff; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon .plus { display: block; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon .minus { display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem__icon .loading { margin: 6px 5px; display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.active ul { display: block; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.active > .navItem__icon .plus { display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.active > .navItem__icon .minus { display: block; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.active > a { color: #ffffff; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.loading > .navItem__icon .plus { display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.loading > .navItem__icon .minus { display: none; } .primary__nav-wrapper .primary__nav ul.primary-nav-dropdown .navItem.parent.loading > .navItem__icon .loading { display: block; } @media (max-width: 768px) { .primary__nav-wrapper .primary__nav { width: 100%; position: fixed; top: 0; right: 0; background: #333; z-index: 2; } } @media (min-width: 768px) and (max-width: 1024px) { .primary__nav-wrapper .primary__nav { width: 50%; } } @media (min-width: 1024px) { .primary__nav-wrapper .primary__nav { width: 400px; } } section.promoArticles article figure img { width: 100%; height: 100%; } section.promoArticles article figure figcaption { background: none; border: none; display: none; } section.promoArticles article.large-image-with-caption figure { width: 100%; float: none; border: none; border-top-width: 5px; } section.promoArticles article.large-image-with-caption figure img { width: 100%; } section.promoArticles article.large-image-with-caption figure figcaption { display: block; } section.promoArticles article.large-image-with-caption h5 { display: none; } section.promoArticles article.large-image-with-caption p { margin-top: 0.5rem; } .promoArticle { width: 100%; } .promoArticle__title, .promoArticle__description { margin: 20px 0 0 0; font-family: "SourceSansPro"; font-size: 1em; /* 16px */ color: #333333; max-height: 60px; /* IE */ word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -ms-word-break: normal; word-break: normal; } .promoArticle__title a, .promoArticle__description a { color: #333333; border: none; } .promoArticle__title a:hover, .promoArticle__title a:active, .promoArticle__title a:focus, .promoArticle__description a:hover, .promoArticle__description a:active, .promoArticle__description a:focus { text-decoration: underline; border: none; } .promoArticle__description { margin: 0 0 20px 0; line-height: 1.2em; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .promoArticle__description p { line-height: 1.2em; } .promoArticle__title { font-family: "SourceSansPro"; font-weight: bold; font-size: 1.25em; /* 20px */ line-height: 1.2em; margin-bottom: 5px; margin-top: 0; } .promoArticle__image { font-size: 0; top: 0; left: 0; margin: 0; display: block; width: 100%; height: 100%; position: relative; overflow: hidden; border-bottom: 7px solid #333333 !important; margin-bottom: 30px; } .promoArticle__image img { width: 100%; transition: all 0.25s ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; max-width: none; -webkit-transition: opacity 0.25s, -webkit-transform 0.25s; transition: opacity 0.25s, transform 0.25s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .promoArticle__image img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: 0.9; } .promoArticle__image a:focus img, .promoArticle__image a:active img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); opacity: 0.9; } .promoArticle__image--noPaddingBottom { padding-bottom: 0; } .search__bar-wrapper.show { width: 200px; display: inline-block !important; } .search__bar-wrapper.active .search__icon { border-bottom: 2px solid transparent; text-decoration: none; cursor: pointer; } .search__bar-wrapper .search__bar fieldset, .search__bar-wrapper .search__bar input, .search__bar-wrapper .search__bar button { display: inline-block; } .search__bar-wrapper .search__bar .search__icon svg { width: 19px; } .search__bar-wrapper .search__bar fieldset { height: auto; float: left; width: 100%; } .search__bar-wrapper .search__bar input { border: none; font-size: 0.875em; /* 14px */ text-transform: none; color: #ffffff; margin-top: 10px; background: rgba(255, 255, 255, 0.1); padding: 0 20px; border-radius: 20px; box-shadow: none !important; height: 33px; font-family: "SourceSansPro"; width: 300px; } @media (max-width: 1023px) { .search__bar-wrapper .search__bar input { width: 230px; } } @media (max-width: 767px) { .search__bar-wrapper .search__bar input { display: block; width: 100%; position: absolute; left: 0; top: 30px; background: #333; border-radius: 0; padding: 20px 15px; } } @media (min-width: 768px) { .search__bar-wrapper .search__bar input { margin-top: 5px; } } .search__bar-wrapper .search__bar button { color: #fff; display: inline-block; overflow: hidden; vertical-align: bottom; outline: none; background-color: transparent !important; padding: 0; height: 21px; margin: 5px 10px; } .search__bar-wrapper .search__bar button:hover, .search__bar-wrapper .search__bar button:active, .search__bar-wrapper .search__bar button:focus { opacity: 0.5; } .utility__nav-wrapper .utility__nav { display: inline-block; font-size: 0.625em; /* 10px */ } .utility__nav-wrapper .utility__nav ul { margin-right: -1px; display: inline-block; position: relative; white-space: nowrap; } .utility__nav-wrapper .utility__nav ul li { position: relative; margin-right: 20px; white-space: nowrap; display: inline-block; } @media (max-width: 768px) { .utility__nav-wrapper .utility__nav ul li.login { display: none !important; } } @media (max-width: 768px) { .utility__nav-wrapper .utility__nav ul li.contacts { display: none !important; } } @media (max-width: 768px) { .utility__nav-wrapper .utility__nav ul li.home { display: none !important; } } .utility__nav-wrapper .utility__nav ul li.home svg { width: 19px; height: 20px; vertical-align: text-bottom; fill: #ffffff; } .utility__nav-wrapper .utility__nav ul li a, .utility__nav-wrapper .utility__nav ul li span { white-space: nowrap; display: inline-block; } .utility__nav-wrapper .utility__nav ul li a { line-height: 1.8em; margin-top: 11px; color: #ffffff; font-weight: normal; font-size: 1.3em; /* 13px */ outline: none; font-family: "SourceSansPro"; font-weight: bold; } .utility__nav-wrapper .utility__nav ul li a:hover, .utility__nav-wrapper .utility__nav ul li a:focus { opacity: 0.5; text-decoration: none; } .dmsDocument { padding: 15px !important; margin: 0 !important; border-bottom: 3px solid #fff; } .dmsDocument .button { border-radius: 0; text-decoration: none !important; margin-top: 5px; margin-right: 5px; background: transparent; border: 2px solid #333333; text-shadow: 0 0 0 transparent; color: #333333; height: auto; font-size: 1em; /* 16px */ padding: 0 1.3rem; line-height: 3.3rem; display: inline-block; font-family: "SourceSansPro"; font-weight: bold; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; border-width: 2px !important; } .dmsDocument .button:hover, .dmsDocument .button:active, .dmsDocument .button:focus { border: 2px solid #333333; background-color: #333333; color: #fff; border: 2px solid #333333; } .dmsDocument .button:hover .button__downloadSize, .dmsDocument .button:active .button__downloadSize, .dmsDocument .button:focus .button__downloadSize { display: inline-block; } .dmsDocument.open, .dmsDocument:hover { background: #f4f4f4; } .dmsDocument__expandIcon { fill: #333333; width: 33px; height: 33px; float: right; margin-top: -5px; border: 2px solid transparent; } .dmsDocument__expandIcon:before { display: none; } .dmsDocument__expandIcon:focus, .dmsDocument__expandIcon:active, .dmsDocument__expandIcon:hover { border: 2px solid #333333; } .dmsDocument__title { font-family: "SourceSansPro"; font-weight: bold; font-size: 1.25em !important; padding-right: 30px; } .dmsDocument .dmsDocument__expandIcon--plus, .dmsDocument .dmsDocument__expandIcon--minus { display: block; width: 30px; /* ie11 required! */ height: 30px; /* ie11 required! */ } .dmsDocument .dmsDocument__expandIcon--plus svg, .dmsDocument .dmsDocument__expandIcon--minus svg { width: 27px; /* ie11 required! */ height: 27px; /* ie11 required! */ } .dmsDocument.closed { border-bottom: 3px solid #f4f4f4; } .dmsDocument.closed .dmsDocument__expandIcon--minus { display: none; } .dmsDocument.open .dmsDocument__expandIcon--plus { display: none; } /* ANIMATIONS and EFFECTS */ body.scrolling .header .header__search__seperator { width: 100%; } @media (max-width: 768px) { body.scrolling .primary__nav-wrapper #PrimaryNavButton { top: -18px; } } @media (max-width: 768px) { body.scrolling #site-search { display: none; } body.scrolling #HeaderSearch { display: none; } } body.scrolling.home header.page { background: #333333; -webkit-transition: background 0.25s ease-out; -moz-transition: background 0.25s ease-out; -ms-transition: background 0.25s ease-out; -o-transition: background 0.25s ease-out; transition: background 0.25s ease-out; } body.scrolling header.page { background: #333333 !important; padding: 0; } body.scrolling header.page .header__nav { margin-top: 0; } body.scrolling .header__branchLogo { min-height: 20px; } body.scrolling .header__branchLogo img { height: 35px; width: 155px; margin-bottom: 15px; } body.scrolling header.page { background: #333333; } body.scrolling header.page nav.primary > ul > li.nav { border-color: transparent; } body.scrolling header.page nav.primary > ul > li.nav.active { border-color: #8DC63F; } body.scrolling header.page div.search > .search__icon { border-color: transparent; } body.scrolling header.page div.search.active > .search__icon { border-color: #8DC63F; } /* PAGE SPECIFIC OVERRIDES */ .page__main__content .col-md-9 { padding-bottom: 50px; margin-bottom: 50px; } @media (max-width: 768px) { .page__main__content .col-md-9 { width: 100%; } }