/* govuk_frontend_toolkit includes */ #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-link, #global-header .header-proposition #proposition-links, #footer .footer-meta { zoom: 1; } #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-link:after, #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after { content: ""; display: block; clear: both; } #global-header-bar, #global-cookie-message p, #footer .footer-wrapper { max-width: 960px; width: 960px; margin: 0 15px; margin: 0 30px; margin: 0 auto; } #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-link, #global-header .header-proposition #proposition-links, #footer .footer-meta { zoom: 1; } #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-link:after, #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after { content: ""; display: block; clear: both; } /* local styleguide includes */ @-ms-viewport { width: device-width; } html, body, button, input, table, td, th { font-family: "nta", Arial, sans-serif; } html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section { margin: 0; padding: 0; vertical-align: baseline; } main { display: block; } .group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .group:after { clear: both; } .group { zoom: 1; } .content-fixed { top: 0; position: fixed; } .shim { display: block; } /* * 1. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { -webkit-text-size-adjust: 100%; /* 1 */ -ms-text-size-adjust: 100%; /* 1 */ background-color: #dee0e2; } /* Force the scrollbar to always display in IE10/11 */ html { -ms-overflow-style: scrollbar; } body { background: white; color: #0b0c0c; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ol, ul, nav ol, nav ul { list-style: inherit; } fieldset { border: none; padding: 0; } a:link { color: #005ea5; } a:visited { color: #4c2c92; } a:hover { color: #2b8cc4; } a:active { color: #2b8cc4; } /* * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback * http://snook.ca/archives/html_and_css/font-size-with-rem * 2. Keeps page centred in all browsers regardless of content height * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ */ html { font-size: 62.5%; /* 1 */ overflow-y: scroll; /* 2 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 3 */ } /* * 1. Font-size increased to compensate for change to html element font-size in * order to support beta typography which was set in ems * (62.5% * 160% = 100%) * 2. Addresses margins handled incorrectly in IE6/7 */ body { font-size: 160%; /* 1 */ margin: 0; /* 2 */ } b, strong { font-weight: 600; } img { border: 0; } button { overflow: visible; } abbr[title] { cursor: help; } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; margin-right: 2px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* For image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide for both screenreaders and browsers */ .hidden, .js-enabled .js-hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders */ .visually-hidden, .visuallyhidden { position: absolute; left: -9999em; top: auto; width: 1px; height: 1px; overflow: hidden; /* * Extends the .visuallyhidden class to allow the element to be * focusable when navigated to via the keyboard */ } .visually-hidden.focusable:active, .visually-hidden.focusable:focus, .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Give a strong clear visual idea as to what is currently in focus */ a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); } a:focus { background-color: #ffbf47; outline: 3px solid #ffbf47; } /* Make links slightly darker when focused to improve contrast. */ a:link:focus { color: #005798; } /* Make skiplinks visible when they are tabbed to */ .skiplink { position: absolute; left: -9999em; /* Default link colour doesn't have enough contrast against $focus-colour */ } .skiplink:focus, .skiplink:visited { color: #0b0c0c; } .skiplink:focus { left: 0; z-index: 1; } #skiplink-container { text-align: center; background: #0b0c0c; } #skiplink-container div { text-align: left; margin: 0 auto; max-width: 1020px; } #skiplink-container .skiplink { display: -moz-inline-stack; display: inline-block; zoom: 1; display: inline; margin: 0.75em 0 0 30px; } input:focus, textarea:focus, select:focus, button:focus { outline: 3px solid #ffbf47; outline-offset: 0; } #global-header input[type=search]:focus { outline: 3px solid #ffbf47; /* Focus appears inside the input */ outline-offset: -2px; } #global-header h1 a:focus { background-color: transparent; outline: none; } #global-header a:focus { color: #0b0c0c; } #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-link, #global-header .header-proposition #proposition-links, #footer .footer-meta { zoom: 1; } #global-header .header-wrapper:after, #global-header .header-wrapper .header-global:after, #global-header .header-wrapper .header-global .header-logo:after, #global-header .header-proposition #proposition-link:after, #global-header .header-proposition #proposition-links:after, #footer .footer-meta:after { content: ""; display: block; clear: both; } #global-header { background-color: #0b0c0c; width: 100%; } #global-header .header-wrapper { background-color: #0b0c0c; max-width: 990px; margin: 0 auto; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; width: 990px; } #global-header .header-wrapper .header-global .header-logo { float: left; width: 33.33%; } @media screen and (max-width: 379px) { #global-header .header-wrapper .header-global .header-logo { width: auto; float: none; } } #global-header .header-wrapper .header-global .header-logo .content { margin: 0 15px; } #global-header .header-wrapper .header-global .header-logo { margin-top: 2px; } #global-header.with-proposition .header-wrapper .header-global { float: left; width: 33.33%; } #global-header.with-proposition .header-wrapper .header-global .header-logo, #global-header.with-proposition .header-wrapper .header-global .site-search { width: 100%; } #global-header.with-proposition .header-wrapper .header-proposition { width: 66.66%; float: left; } #global-header.with-proposition .header-wrapper .header-proposition .content { margin: 0 15px; } #global-header #logo { float: left; overflow: visible; color: white; font-weight: bold; font-size: 30px; line-height: 1; text-decoration: none; text-rendering: optimizeLegibility; border-bottom: 1px solid transparent; background: url(<%= asset_path 'images/gov.uk_logotype_crown.png' %>) no-repeat; background-size: 36px 32px; background-position: 0 0; background-image: url(<%= asset_path 'images/gov.uk_logotype_crown-1x.png' %>); } #global-header #logo img { margin: 2px 1px 0 0; vertical-align: bottom; visibility: hidden; } #global-header #logo:hover, #global-header #logo:focus { text-decoration: none; border-bottom-color: white; } #global-header .header-proposition { padding-top: 10px; padding-top: 0; } #global-header .header-proposition #proposition-name { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 18px; line-height: 1.2; font-size: 24px; line-height: 1.25; font-weight: bold; color: white; text-decoration: none; } #global-header .header-proposition a#proposition-name:hover { text-decoration: underline; } #global-header .header-proposition a#proposition-name:focus { color: #0b0c0c; } #global-header .header-proposition a.menu { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 14px; line-height: 1.14286; font-size: 16px; line-height: 1.25; color: white; display: block; float: right; text-decoration: none; padding-top: 6px; display: none; } #global-header .header-proposition a.menu:hover { text-decoration: underline; } #global-header .header-proposition a.menu:after { display: inline-block; font-size: 8px; height: 8px; padding-left: 5px; vertical-align: middle; content: " \25BC"; } #global-header .header-proposition a.menu.js-visible:after { content: " \25B2"; } #global-header .header-proposition #proposition-menu { margin-top: 5px; } #global-header .header-proposition #proposition-menu.no-proposition-name { margin-top: 37px; } #global-header .header-proposition #proposition-link, #global-header .header-proposition #proposition-links { clear: both; margin: 2px 0 0 0; padding: 0; } .js-enabled #global-header .header-proposition #proposition-link, .js-enabled #global-header .header-proposition #proposition-links { display: none; display: block; } .js-enabled #global-header .header-proposition #proposition-link.js-visible, .js-enabled #global-header .header-proposition #proposition-links.js-visible { display: block; } #global-header .header-proposition #proposition-link li, #global-header .header-proposition #proposition-links li { float: left; width: 50%; padding: 3px 0; border-bottom: 1px solid #2e3133; display: block; width: auto; padding: 0 15px 0 0; border-bottom: 0; } #global-header .header-proposition #proposition-link li.clear-child, #global-header .header-proposition #proposition-links li.clear-child { clear: left; } #global-header .header-proposition #proposition-link a, #global-header .header-proposition #proposition-links a { color: white; text-decoration: none; font-family: "nta", Arial, sans-serif; font-weight: 700; text-transform: none; font-size: 12px; line-height: 1.25; font-size: 14px; line-height: 1.42857; font-family: "nta", Arial, sans-serif; font-weight: 700; text-transform: none; font-size: 14px; line-height: 1.14286; font-size: 16px; line-height: 1.25; line-height: 23px; } #global-header .header-proposition #proposition-link a:hover, #global-header .header-proposition #proposition-links a:hover { text-decoration: underline; } #global-header .header-proposition #proposition-link a.active, #global-header .header-proposition #proposition-links a.active { color: #1d8feb; } #global-header .header-proposition #proposition-link a:focus, #global-header .header-proposition #proposition-links a:focus { color: #0b0c0c; } #global-header .header-proposition #proposition-link { float: right; line-height: 22px; float: none; } .js-enabled #global-header .header-proposition #proposition-link { display: block; } /* Global header bar */ #global-header-bar { height: 10px; background-color: #005ea5; font-size: 0; } /* Global cookie message */ .js-enabled #global-cookie-message { display: none; /* shown with JS, always on for non-JS */ } #global-cookie-message { width: 100%; background-color: #d5e8f3; padding-top: 10px; padding-bottom: 10px; } #global-cookie-message p { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 14px; line-height: 1.14286; font-size: 16px; line-height: 1.25; margin-top: 0; margin-bottom: 0; } /* Global footer */ #footer { background-color: #dee0e2; border-top: 1px solid #a1acb2; } #footer .footer-wrapper { background-color: #dee0e2; padding-top: 20px; padding-top: 60px; } #footer a { color: #454a4c; } #footer a:hover { color: #171819; } #footer h2 { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 18px; line-height: 1.2; font-size: 24px; line-height: 1.25; font-weight: bold; color: #0b0c0c; margin: 0; } #footer h2 a { color: inherit; } #footer .footer-meta { padding-bottom: 60px; clear: both; font-size: 0; color: #454a4c; } #footer .footer-meta .footer-meta-inner { display: inline-block; vertical-align: bottom; width: 100%; width: 75%; float: left; display: block; } #footer .footer-meta .footer-meta-inner ul { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 14px; line-height: 1.5; font-size: 16px; line-height: 1.5; display: inline-block; list-style: none; margin: 0 0 1.5em 0; padding: 0; margin: 0 0 1em 0; } #footer .footer-meta .footer-meta-inner ul li { display: inline-block; margin: 0 15px 0 0; display: inline; margin-right: 0; padding-right: 15px; } #footer .footer-meta .footer-meta-inner .open-government-licence { clear: left; position: relative; padding-left: 53px; } #footer .footer-meta .footer-meta-inner .open-government-licence .logo { margin-bottom: 1em; padding-top: 0; position: absolute; left: 0; top: 0; width: 41px; height: 100%; } #footer .footer-meta .footer-meta-inner .open-government-licence .logo a { display: block; width: 41px; height: 17px; overflow: hidden; text-indent: -999em; background: url(<%= asset_path 'images/open-government-licence.png' %>) 0 0 no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer .footer-meta .footer-meta-inner .open-government-licence .logo a { background-image: url(<%= asset_path 'images/open-government-licence_2x.png' %>); background-size: 41px 17px; } } #footer .footer-meta .footer-meta-inner .open-government-licence p { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 14px; line-height: 1.14286; font-size: 16px; line-height: 1.25; margin: 0; padding-top: 0.1em; } #footer .footer-meta .copyright { font-family: "nta", Arial, sans-serif; font-weight: 400; text-transform: none; font-size: 14px; line-height: 1.14286; font-size: 16px; line-height: 1.25; margin: 30px 0 0 0; width: 100%; display: block; display: inline-block; text-align: inherit; width: 25%; padding-top: 15px; margin-top: 0; float: right; height: 150px; width: 24%; } #footer .footer-meta .copyright a { display: block; background-image: url(<%= asset_path 'images/govuk-crest.png' %>); background-repeat: no-repeat; background-position: 50% 0%; background-position: 100% 0%; text-align: center; text-decoration: none; text-align: right; padding: 115px 0 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 20 / 10), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer .footer-meta .copyright a { background-image: url(<%= asset_path 'images/govuk-crest-2x.png' %>); background-size: 125px 102px; } }