/* 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, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after { content: ""; display: block; clear: both; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } #global-header .header-wrapper, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper:after, #footer .footer-meta:after { content: ""; display: block; clear: both; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } /* local styleguide includes */ /* Old depricated greys, new things should use the toolkit greys */ 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; } .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: white; } body { color: #0b0c0c; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; } ol, ul, nav ol, nav ul { list-style: inherit; } fieldset { border: none; padding: 0; } a:link { color: #005ea5; } a:visited { color: #2e8aca; } 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"; 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; } 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 { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders */ .visuallyhidden { position: absolute; left: -9999em; /* * Extends the .visuallyhidden class to allow the element to be * focusable when navigated to via the keyboard */ } .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 { position: static; } #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, #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, #global-header .header-wrapper .header-global, #global-header .header-wrapper .header-global .header-logo, #global-header .header-proposition #proposition-links, #global-header-bar, #global-cookie-message .outer-block, #footer .footer-wrapper, #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-links:after, #global-header-bar:after, #global-cookie-message .outer-block:after, #footer .footer-wrapper: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; 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: 5px 0 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; 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: -1px; padding-bottom: 1px; } #global-header #logo img { position: relative; top: -2px; width: 35px; height: 31px; padding-right: 6px; float: left; display: inline; line-height: inherit; border: none; } #global-header #logo:hover, #global-header #logo:focus { text-decoration: none; border-bottom: 1px solid; padding-bottom: 0; } #global-header #logo:active { color: #2b8cc4; } #global-header .header-proposition { padding-top: 10px; 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: 20px; line-height: 1.2; } } #global-header .header-proposition a.menu { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 300; text-transform: none; color: white; display: block; float: right; text-decoration: none; padding-top: 6px; display: none; } @media (max-width: 640px) { #global-header .header-proposition a.menu { font-size: 14px; line-height: 1.14286; } } #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; } #global-header .header-proposition #proposition-links { clear: both; margin: 2px 0 0 0; padding: 0; } .js-enabled #global-header .header-proposition #proposition-links { display: none; display: block; } .js-enabled #global-header .header-proposition #proposition-links.js-visible { display: block; } #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-links li.clear-child { clear: left; } #global-header .header-proposition #proposition-links li a { color: white; text-decoration: none; font-family: "nta", Arial, sans-serif; font-size: 14px; line-height: 1.42857; font-weight: 400; text-transform: none; font-weight: 700; font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 300; text-transform: none; font-weight: 700; line-height: 23px; } @media (max-width: 640px) { #global-header .header-proposition #proposition-links li a { font-size: 12px; line-height: 1.25; } } @media (max-width: 640px) { #global-header .header-proposition #proposition-links li a { font-size: 14px; line-height: 1.14286; } } #global-header .header-proposition #proposition-links li a:hover { text-decoration: underline; } #global-header .header-proposition #proposition-links li a.active { color: #28a197; } /* Global header bar */ #global-header-bar { margin: 0 auto; width: auto; max-width: 1020px; width: 1020px; } #global-header-bar .inner-block { padding-left: 15px; padding-right: 15px; padding-left: 30px; padding-right: 30px; } #global-header-bar .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 { background-color: #d5e8f3; padding-top: 10px; padding-bottom: 10px; } #global-cookie-message .outer-block { margin: 0 auto; width: auto; max-width: 1020px; width: 1020px; } #global-cookie-message .inner-block { padding-left: 15px; padding-right: 15px; padding-left: 30px; padding-right: 30px; } #global-cookie-message p { font-family: "nta", Arial, sans-serif; font-size: 16px; line-height: 1.25; font-weight: 300; text-transform: none; margin: 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 { margin: 0 auto; width: auto; max-width: 1020px; width: 1020px; padding-top: 20px; padding-top: 60px; background-color: #dee0e2; margin: 0 auto; } #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: #171819; margin: 0; } @media (max-width: 640px) { #footer h2 { font-size: 20px; line-height: 1.2; } } #footer h2 a { color: inherit; } #footer .footer-meta { padding-left: 15px; padding-right: 15px; padding-left: 30px; padding-right: 30px; 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-size: 16px; line-height: 1.5; font-weight: 300; text-transform: none; display: inline-block; list-style: none; margin: 0 0 1.5em 0; padding: 0; margin: 0 0 1em 0; } @media (max-width: 640px) { #footer .footer-meta .footer-meta-inner ul { font-size: 14px; line-height: 1.5; } } #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 h2 { margin-bottom: 1em; position: absolute; left: 0; top: 0; width: 41px; height: 100%; } #footer .footer-meta .footer-meta-inner .open-government-licence h2 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 h2 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: 300; 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: 300; text-transform: none; 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%; } @media (max-width: 640px) { #footer .footer-meta .copyright { font-size: 14px; line-height: 1.14286; } } #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; } }