/* govuk_frontend_toolkit includes */ @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @font-face { font-family: GDS-Logo; src: local("HelveticaNeue"), local("Helvetica Neue"), local("Arial"), local("Helvetica"); } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } #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; margin: 0 15px; } @media (min-width: 641px) { #global-header-bar, #global-cookie-message p, #footer .footer-wrapper { margin: 0 30px; } } @media (min-width: 1020px) { #global-header-bar, #global-cookie-message p, #footer .footer-wrapper { margin: 0 auto; } } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } #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; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } /* 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: #2e8aca; } a:active { color: #2e8aca; } a[rel="external"]:after { background-image: url(<%= asset_path 'external-links/external-link.png' %>); background-repeat: 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) { a[rel="external"]:after { background-image: url(<%= asset_path 'external-links/external-link-24x24.png' %>); background-size: 12px 400px; } } a[rel="external"]:after { content: "\A0\A0\A0\A0\A0"; background-position: right 3px; } a[rel="external"]:hover:after { background-position: right -385px; } @media (min-width: 641px) { a[rel="external"]:after { content: "\A0\A0\A0\A0"; background-position: right 6px; } a[rel="external"]:hover:after { background-position: right -382px; } } .external-link:after { content: "\A0\A0\A0\A0\A0\A0\A0\A0"; background-position: right 0px; } .external-link:hover:after { background-position: right 0px; } .external-link:after { background-image: url(<%= asset_path 'external-links/external-link-black-12x12.png' %>); background-repeat: 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) { .external-link:after { background-image: url(<%= asset_path 'external-links/external-link-black-24x24.png' %>); background-size: 12px 400px; } } /* * 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; } 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; /* * 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 skiplinks visible when they are tabbed to */ .skiplink { position: absolute; left: -9999em; } .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; margin: 0.75em 0 0 30px; } input:focus, textarea:focus, select:focus, button:focus, #global-header input:focus { outline: 3px solid #ffbf47; } #global-header h1 a:focus { background-color: transparent; outline: none; } #global-header a:focus { color: #0b0c0c; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } #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; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } #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; } @media (min-width: 641px) { #global-header .header-wrapper { padding-left: 15px; padding-right: 15px; } } #global-header .header-wrapper .header-global .header-logo { float: left; } @media (min-width: 769px) { #global-header .header-wrapper .header-global .header-logo { 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: 5px 0 2px; } @media (min-width: 769px) { #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%; } } @media (min-width: 769px) { #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; position: relative; top: -1px; height: 30px; overflow: visible; vertical-align: baseline; color: white; font-weight: bold; font-size: 30px; line-height: 1em; text-decoration: none; text-rendering: optimizeLegibility; margin-bottom: -3px; padding-top: 2px; border-bottom: 1px solid transparent; background: url(<%= asset_path 'images/gov.uk_logotype_crown.png' %>) no-repeat; background-size: 35px 31px; background-position: 0 0; } #global-header #logo img { position: relative; top: -2px; width: 35px; height: 31px; padding-right: 6px; float: left; display: inline; line-height: inherit; border: none; visibility: hidden; } #global-header #logo:hover, #global-header #logo:focus { text-decoration: none; border-bottom-color: white; } #global-header .header-proposition { padding-top: 10px; } @media (min-width: 769px) { #global-header .header-proposition { padding-top: 0; } } #global-header .header-proposition #proposition-name { font-family: "nta", Arial, sans-serif; font-size: 24px; line-height: 1.25; font-weight: 400; text-transform: none; font-weight: bold; color: white; text-decoration: none; } @media (max-width: 640px) { #global-header .header-proposition #proposition-name { font-size: 18px; line-height: 1.2; } } #global-header .header-proposition a#proposition-name:hover { text-decoration: underline; } #global-header .header-proposition a.menu { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 400; text-transform: none; color: white; display: block; float: right; text-decoration: none; padding-top: 6px; } @media (max-width: 640px) { #global-header .header-proposition a.menu { font-size: 14px; line-height: 1.14286; } } @media (min-width: 769px) { #global-header .header-proposition a.menu { 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-hidden:after { content: " \25B2"; } #global-header .header-proposition #proposition-menu { margin-top: 5px; } @media (min-width: 769px) { #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; } @media (min-width: 769px) { .js-enabled #global-header .header-proposition #proposition-link, .js-enabled #global-header .header-proposition #proposition-links { 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; } @media (min-width: 769px) { #global-header .header-proposition #proposition-link li, #global-header .header-proposition #proposition-links li { 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-size: 14px; line-height: 1.42857; font-weight: 700; text-transform: none; } @media (max-width: 640px) { #global-header .header-proposition #proposition-link a, #global-header .header-proposition #proposition-links a { font-size: 12px; line-height: 1.25; } } @media (min-width: 769px) { #global-header .header-proposition #proposition-link a, #global-header .header-proposition #proposition-links a { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 700; text-transform: none; line-height: 23px; } } @media (min-width: 769px) and (max-width: 640px) { #global-header .header-proposition #proposition-link a, #global-header .header-proposition #proposition-links a { font-size: 14px; line-height: 1.14286; } } #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; } .js-enabled #global-header .header-proposition #proposition-link { display: block; } @media (min-width: 769px) { #global-header .header-proposition #proposition-link { float: none; } } /* Global header bar */ #global-header-bar { height: 10px; background-color: #005ea5; } /* 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-size: 16px; line-height: 1.25; font-weight: 400; text-transform: none; margin-top: 0; margin-bottom: 0; } @media (max-width: 640px) { #global-cookie-message p { font-size: 14px; line-height: 1.14286; } } /* Global footer */ #footer { background-color: #dee0e2; border-top: 1px solid #a1acb2; } #footer .footer-wrapper { background-color: #dee0e2; padding-top: 20px; } @media (min-width: 641px) { #footer .footer-wrapper { padding-top: 60px; } } #footer a { color: #454a4c; } #footer a:hover { color: #171819; } #footer h2 { font-family: "nta", Arial, sans-serif; font-size: 24px; line-height: 1.25; font-weight: 400; text-transform: none; font-weight: bold; color: #0b0c0c; margin: 0; } @media (max-width: 640px) { #footer h2 { font-size: 18px; line-height: 1.2; } } #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%; } @media (min-width: 641px) { #footer .footer-meta .footer-meta-inner { width: 75%; } } #footer .footer-meta .footer-meta-inner ul { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; text-transform: none; display: inline-block; list-style: none; margin: 0 0 1.5em 0; padding: 0; } @media (max-width: 640px) { #footer .footer-meta .footer-meta-inner ul { font-size: 14px; line-height: 1.5; } } @media (min-width: 641px) { #footer .footer-meta .footer-meta-inner ul { margin: 0 0 1em 0; } } #footer .footer-meta .footer-meta-inner ul li { display: inline-block; margin: 0 15px 0 0; } #footer .footer-meta .footer-meta-inner .open-government-licence { clear: left; position: relative; } @media (min-width: 641px) { #footer .footer-meta .footer-meta-inner .open-government-licence { padding-left: 53px; } } #footer .footer-meta .footer-meta-inner .open-government-licence .logo { margin-bottom: 1em; padding-top: 0; } @media (min-width: 641px) { #footer .footer-meta .footer-meta-inner .open-government-licence .logo { 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-size: 16px; line-height: 1.25; font-weight: 400; text-transform: none; margin: 0; padding-top: 0.1em; } @media (max-width: 640px) { #footer .footer-meta .footer-meta-inner .open-government-licence p { font-size: 14px; line-height: 1.14286; } } #footer .footer-meta .copyright { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 400; text-transform: none; margin: 30px 0 0 0; width: 100%; display: block; } @media (max-width: 640px) { #footer .footer-meta .copyright { font-size: 14px; line-height: 1.14286; } } @media (min-width: 641px) { #footer .footer-meta .copyright { display: inline-block; text-align: inherit; width: 25%; padding-top: 15px; margin-top: 0; } } #footer .footer-meta .copyright a { display: block; background-image: url(<%= asset_path 'images/govuk-crest.png' %>); background-repeat: no-repeat; background-position: 50% 0%; text-align: center; text-decoration: none; padding: 115px 0 0 0; } @media (min-width: 641px) { #footer .footer-meta .copyright a { background-position: 100% 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; } } @media (min-width: 641px) { #footer .footer-meta .copyright a { text-align: right; } }