/* This file is auto generated, change code in the source folder to update. */ /* =============================================================================== 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, main, 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; } /* border box model */ *, *:before, *:after { -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. If this default setting for images is causing issues replace with a .responsive class instead. */ 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 { outline: none; } /* ========================== marked up copy ========================== */ del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #333333; cursor: help; } /* ========================== 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; *overflow: visible; } 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 */ input:focus, textarea:focus, select:focus, button:focus { 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%; } /* ========================== 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; } /* ========================== css transition page load fix ========================== */ .preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } /*************************************************/ /*! * Font Awesome 3.2.1 * the iconic font designed for Bootstrap * ------------------------------------------------------------------------------ * The full suite of pictographic icons, examples, and documentation can be * found at http://fontawesome.io. Stay up to date on Twitter at * http://twitter.com/fontawesome. * * License * ------------------------------------------------------------------------------ * - The Font Awesome font is licensed under SIL OFL 1.1 - * http://scripts.sil.org/OFL * - Font Awesome CSS, LESS, and SASS files are licensed under MIT License - * http://opensource.org/licenses/mit-license.html * - Font Awesome documentation licensed under CC BY 3.0 - * http://creativecommons.org/licenses/by/3.0/ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: * "Font Awesome by Dave Gandy - http://fontawesome.io" * * Author - Dave Gandy * ------------------------------------------------------------------------------ * Email: dave@fontawesome.io * Twitter: http://twitter.com/davegandy * Work: Lead Product Designer @ Kyruus - http://kyruus.com */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('/Shared/Fonts/fontawesome-webfont.eot?v=3.2.1'); src: url('/Shared/Fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('/Shared/Fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('/Shared/Fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('/Shared/Fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MuseoSans100'; src: url('/Shared/Fonts/museosans_100-webfont.eot'); src: url('/Shared/Fonts/museosans_100-webfont.eot?#iefix') format('embedded-opentype'), url('/Shared/Fonts/museosans_100-webfont.woff') format('woff'), url('/Shared/Fonts/museosans_100-webfont.ttf') format('truetype'), url('/Shared/Fonts/museosans_100-webfont.svg#MuseoSans100') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MuseoSans300'; src: url('/Shared/Fonts/museosans_300-webfont.eot'); src: url('/Shared/Fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), url('/Shared/Fonts/museosans_300-webfont.woff') format('woff'), url('/Shared/Fonts/museosans_300-webfont.ttf') format('truetype'), url('/Shared/Fonts/museosans_300-webfont.svg#MuseoSans300') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MuseoSans500'; src: url('/Shared/Fonts/museosans_500-webfont.eot'); src: url('/Shared/Fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'), url('/Shared/Fonts/museosans_500-webfont.woff') format('woff'), url('/Shared/Fonts/museosans_500-webfont.ttf') format('truetype'), url('/Shared/Fonts/museosans_500-webfont.svg#MuseoSans500') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MuseoSans700'; src: url('/Shared/Fonts/museosans_700-webfont.eot'); src: url('/Shared/Fonts/museosans_700-webfont.eot?#iefix') format('embedded-opentype'), url('/Shared/Fonts/museosans_700-webfont.woff') format('woff'), url('/Shared/Fonts/museosans_700-webfont.ttf') format('truetype'), url('/Shared/Fonts/museosans_700-webfont.svg#MuseoSans700') format('svg'); font-weight: normal; font-style: normal; } /* =============================================================================== COMMON PAGE STRUCTURE AND ELEMENTS =============================================================================== */ html, body { height: 100%; } body { min-width: 280px; min-width: 28rem; background-color: #fff; } #page-wrapper { min-height: 100%; } .wrapper { margin: 0 auto; width: 1050px; width: 105rem; max-width: 100%; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } /* ========================== header ========================== */ #page-head { position: fixed; z-index: 100; width: 100%; height: 85px; height: 8.5rem; background-color: #2a3744; border-top: solid 0 transparent; } #page-head.static { position: static; } /* ========================== primary navigation ========================== */ #page-head nav { position: relative; z-index: 10; height: 85px; height: 8.5rem; } #page-head nav > ul { position: relative; z-index: 30; display: table; border-collapse: collapse; height: 85px; height: 8.5rem; } #page-head nav > ul > li { display: table-cell; vertical-align: middle; margin: 0; padding: 0; } #page-head nav > ul > li > a, #page-head nav > ul > li > h1 a, #site-menu > ul > li > a { position: relative; display: block; padding: 0 10px; padding: 0 1rem; margin: 0; border: none; font-size: 18px; font-size: 1.8rem; line-height: 85px; line-height: 8.5rem; color: #ffffff; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } /* alternative nav styling */ /* ----------------------- */ #page-head nav ul li.alt { width: 10px; width: 1rem; overflow: hidden; padding: 0 0 0 14px; padding: 0 0 0 1.4rem; } #page-head nav ul li.alt a { opacity: 0.6; padding: 0; font-family: 'MuseoSans700'; font-size: 12px; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase; } #page-head nav ul li.alt a:before { content: none; } #page-head nav ul li.alt a:hover, #page-head nav ul li.alt a:focus { opacity: 1; } /* social nav styling */ /* ------------------ */ #page-head nav ul li.alt.social-links { width: 10px; width: 1rem; } #page-head nav ul li.alt.social-links + li.alt.social-links { padding-left: 5px; padding-left: 0.5rem; } #page-head nav ul li.alt.social-links a { display: block; overflow: hidden; margin: 0; padding: 0; width: auto; text-align: center; background: none; text-indent: 0; } #page-head nav ul li.alt.social-links a span { display: inline-block; overflow: hidden; text-indent: -999px; text-indent: -999rem; } #page-head nav ul li.alt.social-links a:before { font-family: 'FontAwesome'; font-size: 18px; font-size: 1.8rem; line-height: 1; } #page-head nav ul li.alt.social-links a.fb:before { content: '\f082'; } #page-head nav ul li.alt.social-links a.tt:before { content: '\f081'; } #page-head nav ul li.alt.social-links a.li:before { content: '\f08c'; } /* home nav item */ /* ------------- */ #page-head nav ul li.home { padding-right: 20px; padding-right: 2rem; vertical-align: middle; width: 180px; width: 18rem; } #page-head nav ul li.home a { height: 85px; height: 8.5rem; line-height: 1; } #page-head nav ul li.home a:before { content: ''; position: absolute; z-index: -1; top: 0; bottom: -14px; bottom: -1.4rem; left: 0; display: block; border-bottom: solid 14px transparent; border-bottom: solid 1.4rem transparent; border-left: solid 17px #4a5560; border-left: solid 1.7rem #4a5560; } #page-head nav ul li.home span { display: inline-block; width: 129px; width: 12.9rem; height: 43px; height: 4.3rem; overflow: hidden; margin-top: 20px; margin-top: 2rem; text-indent: -999px; text-indent: -999rem; background: url(/images/chorus-logo.svg) center center no-repeat transparent; background-size: contain; } #page-head nav ul li.home img { display: none; } #page-head nav ul li.home a, #page-head nav ul li.home a.active, #page-head nav ul li.home a:hover, #page-head nav ul li.home a:focus { background-color: #4a5560; } /* sub-menu pages */ /* -------------- */ #site-menu > ul { display: table; border-collapse: collapse; width: auto; } #site-menu > a { display: none !important; } #site-menu > ul > li { display: table-cell; vertical-align: middle; margin: 0; padding: 0; } #site-menu > ul > li > a:before { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; height: 0.5rem; content: ''; background-color: transparent; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } #site-menu > ul > li:hover > a:before, #site-menu > ul > li > a.active:before, #site-menu > ul > li > a:hover:before, #site-menu > ul > li > a:focus:before { background-color: #33a5e7; } #site-menu > ul > li:hover > ul { visibility: visible; opacity: 1; } /* mega menus */ /* ---------- */ #site-menu > ul > li > ul { visibility: hidden; opacity: 0; position: absolute; z-index: -1; top: 100%; left: 30px; left: 3rem; width: 940px; width: 94rem; padding: 20px; padding: 2rem; background-color: #f9f9f9; -webkit-box-shadow: 0 1rem 0.7rem rgba(0,0,0,0.65); -moz-box-shadow: 0 1rem 0.7rem rgba(0,0,0,0.65); box-shadow: 0 0.7rem 1rem rgba(0,0,0,0.65); color: #666666; text-align: left; font-size: 14px; font-size: 1.4rem; line-height: 1.3; text-transform: none; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } #site-menu > ul > li ul { list-style-type: none; } #site-menu > ul > li ul a { border: none; } #site-menu > ul > li ul li { padding: 4px 0; padding: 0.4rem 0; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ } /* level 2 nav items */ #site-menu > ul > li > ul > li { border-bottom: solid 1px #d3dde3; border-bottom: solid 0.1rem #d3dde3; } #site-menu > ul > li > ul > li > a { font-family: 'MuseoSans700'; font-size: 15px; font-size: 1.5rem; color: #38ac8c; text-transform: uppercase; } #site-menu > ul > li > ul > li > a:hover, #site-menu > ul > li > ul > li > a:focus { border-bottom: solid 1px #38ac8c; border-bottom: solid 0.1rem #38ac8c; } /* level 3 nav items */ #site-menu > ul > li > ul > li > ul > li { border-bottom: solid 1px #d3dde3; border-bottom: solid 0.1rem #d3dde3; } #site-menu > ul > li > ul > li > ul > li:last-child { border-bottom: solid 0 #d3dde3; padding-bottom: 0; } #site-menu > ul > li > ul > li > ul > li > a { font-family: 'MuseoSans700'; font-size: 14px; font-size: 1.4rem; color: #333; } #site-menu > ul > li > ul > li > ul > li > a:hover, #site-menu > ul > li > ul > li > ul > li > a:focus { border-bottom: solid 1px #333; border-bottom: solid 0.1rem #333; } /* level 4 nav items and onwards */ #site-menu > ul > li > ul > li > ul > li ul { margin-left: 16px; margin-left: 1.6rem; } #site-menu > ul > li > ul > li > ul > li > ul > li:last-child { padding-bottom: 0; } #site-menu > ul > li > ul > li > ul > li > ul > li a { font-family: 'MuseoSans500'; color: #666; } #site-menu > ul > li > ul > li > ul > li > ul > li a:hover, #site-menu > ul > li > ul > li > ul > li > ul > li a:focus { border-bottom: solid 1px #888888; border-bottom: solid 0.1rem #888888; } #site-menu > ul > li > ul > li > ul li { -webkit-break-inside: avoid; -moz-break-inside: avoid; break-inside: avoid; } /* ========================== page banner ========================== */ #page-banner { position: relative; text-align: center; overflow: hidden; background-image: url(/images/page-banner.png); background-repeat: no-repeat; background-size: cover; background-position: top center; } /*#page-banner:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 -20rem 20rem -10rem rgba(0, 0, 0, 0.25); z-index: 1; }*/ #page-banner #title-wrapper { max-width: 1089px; max-width: 108.9rem; margin: 0 auto; position: relative; } #page-banner, #page-banner #title-wrapper { height: 225px; height: 22.5rem; } #page-banner #title-wrapper h1 { font-family: 'MuseoSans700'; color: #fff; font-size: 50px; font-size: 5rem; font-weight: bold; position: absolute; bottom: 78px; bottom: 7.8rem; text-align: center; width: 100%; z-index: 2; } #page-banner #title-wrapper h1 span { display: block; } /* ========================== page upper ========================== */ #page-upper { border-top: solid 85px transparent; border-top: solid 8.5rem transparent; padding: 18px 0; padding: 1.8rem 0; background-color: #15202B; } /* breadcrumbs */ /* ----------- */ #breadcrumbs-page-utils { border-bottom: solid 1px #e5e5e5; border-bottom: solid 0.1rem #e5e5e5; font-size: 12px; font-size: 1.2rem; color: #999999; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #breadcrumbs-page-utils .wrapper { position: relative; padding: 12px 230px 8px 30px; padding: 1.2rem 23rem 0.8rem 3rem; } #breadcrumbs-page-utils a { color: #999999; border-bottom: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #breadcrumbs-page-utils a:hover, #breadcrumbs-page-utils a:focus { border-bottom: dotted 1px #808080; border-bottom: dotted 0.1rem #808080; } #breadcrumbs-page-utils:hover, #breadcrumbs-page-utils:hover a { color: #808080; } /* ========================== banner tiles ========================== */ #banner-tiles { margin-top: 22px; margin-top: 2.2rem; margin-bottom: 37px; margin-bottom: 3.7rem; } #banner-tiles > .inner { margin-top: -2px; margin-top: -0.2rem; margin-left: -2px; margin-left: -0.2rem; margin-right: -2px; margin-right: -0.2rem; } #banner-tiles .banner-tile-holder { float: left; position: relative; width: 25%; height: 194px; height: 19.4rem; padding: 2px; padding: 0.2rem; overflow: hidden; } #banner-tiles .banner-tile-holder.double { width: 50%; } #banner-tiles .banner-tile { position: relative; z-index: 5; display: block; width: 100%; height: 190px; height: 19rem; padding: 18px 0; padding: 1.8rem 0; overflow: hidden; border: none; text-align: center; background-color: #d0d0d0; font-family: 'MuseoSans500'; font-size: 32px; font-size: 3.2rem; color: #ffffff; } #banner-tiles .banner-tile:before { content: ''; display: inline-block; width: 0; height: 100%; margin: 0; padding: 0; overflow: hidden; vertical-align: middle; } #banner-tiles .banner-tile > .content { position: relative; z-index: 1; display: inline-block; vertical-align: middle; line-height: 1.2; } #banner-tiles .banner-tile > .content span { display: inline-block; } /* images centralised and covering tile */ /* ------------------------------------ */ #banner-tiles .banner-tile .img-holder { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-position: center center; background-repeat: no-repeat; background-color: transparent; background-size: cover; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 3s linear; -moz-transition: all 3s linear; -ms-transition: all 3s linear; transition: all 3s linear; } #banner-tiles a.banner-tile:hover .img-holder, #banner-tiles a.banner-tile:focus .img-holder { -webkit-transform: scale(1.12); -moz-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } /* alignment and colour variations */ /* ------------------------------- */ /* bottom alignment */ #banner-tiles .banner-tile.bottom:before, #banner-tiles .banner-tile.bottom > * { vertical-align: bottom; } /* text options */ #banner-tiles .banner-tile .bold { font-family: 'MuseoSans700'; } #banner-tiles .banner-tile .text-shadow { text-shadow: 0 0 0.6rem rgba(60,60,60,0.5); } #banner-tiles .banner-tile .extra-large { font-size: 78px; font-size: 7.8rem; line-height: 1; } #banner-tiles .banner-tile .large { font-size: 44px; font-size: 4.4rem; line-height: 1.1; } #banner-tiles .banner-tile .small { font-size: 20px; font-size: 2rem; } #banner-tiles .banner-tile .teal { color: #3F5966; } /* colours */ #banner-tiles .banner-tile.green { background-color: #38AF8C; } #banner-tiles .banner-tile.green-alt { background-color: #81c3cd; } #banner-tiles .banner-tile.blue { background-color: #34A6E8; } #banner-tiles .banner-tile.orange { background-color: #F48C37; } #banner-tiles .banner-tile.purple { background-color: #9173CD; } #banner-tiles .banner-tile.apricot { background-color: #F2736F; } #banner-tiles .banner-tile.cream { background-color: #ffe9c7; } /* animations */ /* ---------- */ /* green animation */ @-webkit-keyframes tile-fade-green { 0% { background-color: #38AF8C; } 100% { background-color: #34A6E8; } } @-moz-keyframes tile-fade-green { 0% { background-color: #38AF8C; } 100% { background-color: #34A6E8; } } @keyframes tile-fade-green { 0% { background-color: #38AF8C; } 100% { background-color: #34A6E8; } } #banner-tiles .banner-tile.fade.green { -webkit-animation: tile-fade-green 4s linear infinite alternate; -moz-animation: tile-fade-green 4s linear infinite alternate; animation: tile-fade-green 4s linear infinite alternate; } /* green alternative animation */ @-webkit-keyframes tile-fade-green-alt { 0% { background-color: #38AF8C; } 100% { background-color: #81c3cd; } } @-moz-keyframes tile-fade-green-alt { 0% { background-color: #38AF8C; } 100% { background-color: #81c3cd; } } @keyframes tile-fade-green-alt { 0% { background-color: #38AF8C; } 100% { background-color: #81c3cd; } } #banner-tiles .banner-tile.fade.green-alt { -webkit-animation: tile-fade-green-alt 4s linear infinite alternate; -moz-animation: tile-fade-green-alt 4s linear infinite alternate; animation: tile-fade-green-alt 4s linear infinite alternate; } /* blue animation */ @-webkit-keyframes tile-fade-blue { 0% { background-color: #2F698E; } 100% { background-color: #34A6E8; } } @-moz-keyframes tile-fade-blue { 0% { background-color: #2F698E; } 100% { background-color: #34A6E8; } } @keyframes tile-fade-blue { 0% { background-color: #2F698E; } 100% { background-color: #34A6E8; } } #banner-tiles .banner-tile.fade.blue { -webkit-animation: tile-fade-blue 4s linear infinite alternate; -moz-animation: tile-fade-blue 4s linear infinite alternate; animation: tile-fade-blue 4s linear infinite alternate; } /* orange animation */ @-webkit-keyframes tile-fade-orange { 0% { background-color: #F48C37; } 100% { background-color: #DEBF5C; } } @-moz-keyframes tile-fade-orange { 0% { background-color: #F48C37; } 100% { background-color: #DEBF5C; } } @keyframes tile-fade-orange { 0% { background-color: #F48C37; } 100% { background-color: #DEBF5C; } } #banner-tiles .banner-tile.fade.orange { background-color: #F48C37; -webkit-animation: tile-fade-orange 4s linear infinite alternate; -moz-animation: tile-fade-orange 4s linear infinite alternate; animation: tile-fade-orange 4s linear infinite alternate; } /* purple animation */ @-webkit-keyframes tile-fade-purple { 0% { background-color: #9173CD; } 100% { background-color: #DEBF5C; } } @-moz-keyframes tile-fade-purple { 0% { background-color: #9173CD; } 100% { background-color: #DEBF5C; } } @keyframes tile-fade-purple { 0% { background-color: #9173CD; } 100% { background-color: #DEBF5C; } } #banner-tiles .banner-tile.fade.purple { background-color: #9173CD; -webkit-animation: tile-fade-purple 4s linear infinite alternate; -moz-animation: tile-fade-purple 4s linear infinite alternate; animation: tile-fade-purple 4s linear infinite alternate; } /* orange animation */ @-webkit-keyframes tile-fade-apricot { 0% { background-color: #F2736F; } 100% { background-color: #DEBF5C; } } @-moz-keyframes tile-fade-apricot { 0% { background-color: #F2736F; } 100% { background-color: #DEBF5C; } } @keyframes tile-fade-apricot { 0% { background-color: #F2736F; } 100% { background-color: #DEBF5C; } } #banner-tiles .banner-tile.fade.apricot { background-color: #F2736F; -webkit-animation: tile-fade-apricot 4s linear infinite alternate; -moz-animation: tile-fade-apricot 4s linear infinite alternate; animation: tile-fade-apricot 4s linear infinite alternate; } /* cream animation */ @-webkit-keyframes tile-fade-cream { 0% { background-color: #ffe9c7; } 100% { background-color: #DEBF5C; } } @-moz-keyframes tile-fade-cream { 0% { background-color: #ffe9c7; } 100% { background-color: #DEBF5C; } } @keyframes tile-fade-cream { 0% { background-color: #ffe9c7; } 100% { background-color: #DEBF5C; } } #banner-tiles .banner-tile.fade.cream { background-color: #ffe9c7; -webkit-animation: tile-fade-cream 4s linear infinite alternate; -moz-animation: tile-fade-cream 4s linear infinite alternate; animation: tile-fade-cream 4s linear infinite alternate; } /* text transition tiles */ /* --------------------- */ #banner-tiles .banner-tile-holder.multiple .banner-tile { position: absolute; top: 2px; top: 0.2rem; right: 2px; right: 0.2rem; bottom: 2px; bottom: 0.2rem; left: 2px; left: 0.2rem; width: auto; height: auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } #banner-tiles .banner-tile-holder.multiple .banner-tile.alt { visibility: hidden; opacity: 0; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } #banner-tiles .banner-tile-holder.multiple:hover .banner-tile { visibility: hidden; opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } #banner-tiles .banner-tile-holder.multiple:hover .banner-tile.alt { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* company tag line tile */ /* --------------------- */ #banner-tiles .banner-tile.tag-line { background-color: #34a6e8; } #banner-tiles .banner-tile.tag-line h2 { padding: 0 30px; padding: 0 3rem; font-family: 'MuseoSans300'; font-size: 33px; font-size: 3.3rem; line-height: 1.2; color: #ffffff; text-align: left; } /* ========================== main body ========================== */ #main-page-area { padding: 32px 30px 50px 30px; padding: 3.2rem 3rem 5em 3rem; display: table; table-layout: fixed; } #main-page-area > *, section.document-content > * { display: table-cell; vertical-align: top; } #main-page-area .secondary { width: 180px; width: 18rem; } #main-page-area .secondary + main { padding-left: 30px; padding-left: 3rem; } #main-page-area aside { width: 220px; width: 22rem; } #main-page-area main + aside, section.document-content > .inner + aside { width: 250px !important; width: 25rem !important; padding-left: 30px; padding-left: 3rem; } * + .document-tile-row { margin-top: 1.6rem; } /* back to top */ /* ----------- */ main .back-to-top { display: block; visibility: hidden; opacity: 0; position: fixed; z-index: 50; bottom: 6px; bottom: 0.6rem; right: calc(50% - 50rem); width: 58px; width: 5.8rem; height: 58px; height: 5.8rem; padding: 36px 0 0 0; padding: 3.6rem 0 0 0; background: url(/images/back-to-top-arrow.png) center 0.5rem no-repeat rgba(226,224,224,0.4); background-size: 50%; text-decoration: none; border: none; text-align: center; cursor: pointer; font-family: 'Museosans700'; color: #1fc9b0; font-size: 15px; font-size: 1.5rem; text-transform: uppercase; } main .back-to-top:hover, main .back-to-top:focus { border: none; background-color: rgba(226,224,224,1); color: #1fc9b0; } main .back-to-top.show { visibility: visible; opacity: 1; } /* ========================== secondary nav / utility ========================== */ section.secondary h2 { font-family: 'MuseoSans500'; font-size: 14px; font-size: 1.4rem; line-height: 1.2; text-transform: uppercase; } section.secondary h2 + nav { margin-top: 10px !important; margin-top: 1rem !important; } #secondary-navigation ul { list-style-type: none; } #secondary-navigation ul li { font-size: 12px; font-size: 1.2rem; line-height: 1.25; padding: 7px 0 6px 0; padding: 0.7rem 0 0.6rem 0; border-bottom: solid 1px #d8e2d8; border-bottom: solid 0.1rem #d8e2d8; } #secondary-navigation ul li:first-child { border-top: solid 1px #d8e2d8; border-top: solid 0.1rem #d8e2d8; } #secondary-navigation ul li ul { margin-top: 6px; margin-top: 0.6rem; margin-bottom: -6px; margin-bottom: -0.6rem; } #secondary-navigation ul li ul li { border: none; } #secondary-navigation ul li ul li + li { border-top: solid 1px #d8e2d8; border-top: solid 0.1rem #d8e2d8; } #secondary-navigation ul li a { display: inline-block; margin: 0 8px; margin: 0 0.8rem; color: #333333; border-bottom: none; } #secondary-navigation ul li a:hover, #secondary-navigation ul li a:focus { color: #33a5e5; } #secondary-navigation ul li a.active { color: #33a5e5; } #secondary-navigation ul li li a { margin-left: 16px; margin-left: 1.6rem; } #secondary-navigation ul li li li a { margin-left: 24px; margin-left: 2.4rem; } #secondary-navigation ul li li li li a { margin-left: 32px; margin-left: 3.2rem; } #secondary-navigation ul li li li li li a { margin-left: 40px; margin-left: 4rem; } /* ========================== aside content ========================== */ #main-page-area > aside { font-size: 13px; font-size: 1.3rem; } /* ========================== footer ========================== */ #page-foot { position: relative; margin-top: -220px; margin-top: -22rem; height: 220px; height: 22rem; clear: both; background: #2a3744; /* Old browsers */ background: -moz-linear-gradient(left, #2a3744 0%, #2a3744 50%, #15202b 50%, #15202b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a3744), color-stop(50%,#2a3744), color-stop(50%,#15202b), color-stop(100%,#15202b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #2a3744 0%,#2a3744 50%,#15202b 50%,#15202b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #2a3744 0%,#2a3744 50%,#15202b 50%,#15202b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #2a3744 0%,#2a3744 50%,#15202b 50%,#15202b 100%); /* IE10+ */ background: linear-gradient(to right, #2a3744 0%,#2a3744 50%,#15202b 50%,#15202b 100%); /* W3C */ overflow: hidden; font-size: 12px; font-size: 1.2rem; color: #ffffff; } #page-foot .wrapper > * { float: left; height: 220px; height: 22rem; width: 20%; /* min-width fall-back */ padding: 46px 30px 0 30px; padding: 4.6rem 3rem 0 3rem; } #page-foot .wrapper #utility-footer { width: 36%; } #page-foot .wrapper .social-links, #page-foot .wrapper #utility-footer { background-color: #15202b; } #page-foot a { color: #ffffff; border: none; } #page-foot a:hover, #page-foot a:focus { border-bottom: solid 1px #ffffff; border-bottom: solid 0.1rem #ffffff; } #page-foot h5 { font-family: 'MuseoSans500'; font-size: 15px; font-size: 1.5rem; color: #ffffff; } /* logo */ /* ---- */ #page-foot .wrapper #footer-logo { display: block; padding: 0; margin: 32px 30px 0 30px; margin: 3.2rem 3rem 0 3rem; width: 139px; width: 13.9rem; height: 48px; height: 4.8rem; } /* footer nav */ /* ---------- */ #page-foot .wrapper > nav { width: 24%; } #page-foot nav ul { list-style-type: none; margin: 0; padding: 0; } #page-foot nav ul li { font-family: 'MuseoSans500'; font-size: 15px; font-size: 1.5rem; text-transform: uppercase; } #page-foot nav ul li + li { margin-top: 4px; margin-top: 0.4rem; } /* footer social links */ /* ------------------- */ #page-foot .social-links > div { margin-top: 14px !important; margin-top: 1.4rem !important; } .social, a.social { display: inline-block; width: 24px; width: 2.4rem; height: 24px; height: 2.4rem; overflow: hidden; border: none; text-indent: -999px; text-indent: -999rem; } .social:hover, .social:focus, a.social:hover, a.social:focus { border: none !important; } .social.fb { background: url(/images/webicon-facebook.svg) 0 0 no-repeat transparent; } .social.tt { background: url(/images/webicon-twitter.svg) 0 0 no-repeat transparent; } .social.li { background: url(/images/webicon-linkedin.svg) 0 0 no-repeat transparent; } .social.mail { background: url(/images/webicon-mail.svg) 0 0 no-repeat transparent; } .social + .social { margin-left: 5px; margin-left: 0.5rem; } /* utility footer area */ /* ------------------- */ #utility-footer > h5, #jargon-controls { display: inline-block; } #utility-footer > h5 { margin-right: 6px; margin-right: 0.6rem; font-family: 'MuseoSans700'; font-size: 13px; font-size: 1.3rem; color: #34a6e8; } #jargon-controls label + label { margin-left: 8px; margin-left: 0.8rem; } #utility-footer nav { margin-top: 12px; margin-top: 1.2rem; } #utility-footer nav p + p { margin-top: 4px; margin-top: 0.4rem; } /* ========================== columns and tables ========================== */ /* NB difference between columns and tables, columns more for layout and will change with responsive CSS, whereas tables will be maintained on smaller viewports where possible */ .columns, .table { display: table; width: 100%; border-collapse: separate; table-layout: fixed; margin: 0; padding: 0; } .columns .column, .columns .sp, .table .column, .table .sp { display: table-cell; vertical-align: top; } .columns .sp, .table .sp { width: 20px !important; width: 2rem !important; } /* default two column layout */ /* ------------------------- */ .columns.two .column, .table.two .column { width: 50%; } .columns.two .sp, .table.two .sp { width: 20px !important; width: 2rem !important; } /* default three column layout */ /* --------------------------- */ .columns.three .column, .table.three .column { width: 33.3333%; } .columns.three .sp, .table.three .sp { width: 20px !important; width: 2rem !important; } .columns.three .column.double, .table.three .column.double { width: 66.66667%; } .columns.three .column.full-width, .table.three .column.full-width { width: 100%; } /* default four column layout */ /* -------------------------- */ .columns.four .column, .table.four .column { width: 25%; } .columns.four .sp, .table.four .sp { width: 20px !important; width: 2rem !important; } .columns.four .column.double, .table.four .column.double { width: 50%; } .columns.four .column.full-width, .table.four .column.full-width { width: 100%; } /* auto table layout */ /* ----------------- */ .table.auto { table-layout: auto; } .table.auto .column { width: auto !important; } .table.auto .sp { width: 20px !important; width: 2rem !important; } /* table alignment options */ /* ----------------------- */ .table.bottom .column { vertical-align: bottom; } .table.middle .column { vertical-align: middle; } /* ========================== newspaper style multi-column layout ========================== */ .multi-column-layout { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } main * + .multi-column-layout { margin-top: 16px; margin-top: 1.6rem; } .multi-column-layout.two { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } /* =============================================================================== TYPOGRAPHY =============================================================================== */ /* ========================== default text ========================== */ html, body { font-size: 10px; } body, select, input, textarea { font-size: 14px; font-size: 1.4rem; font-family: 'MuseoSans500', sans-serif; color: #333; line-height: 1.4; font-weight: normal; } /* ========================== headings ========================== */ h1, h2, h3, h4, h5, h6 { font-family: 'MuseoSans300'; color: #33a5e5; font-weight: normal; } h1.page-title { margin-bottom: 12px; margin-bottom: 1.2rem; font-size: 36px; font-size: 3.6rem; line-height: 1.1; } h2 { font-size: 26px; font-size: 2.6rem; line-height: 1.2; } h3 { font-family: 'MuseoSans500'; font-size: 20px; font-size: 2rem; line-height: 1.2; } h4 { font-family: 'MuseoSans700'; font-size: 16px; font-size: 1.6rem; line-height: 1.2; color: #396c8c; } h5 { font-family: 'MuseoSans700'; font-size: 12px; font-size: 1.2rem; line-height: 1.2; text-transform: uppercase; } * + h2 { margin-top: 24px; margin-top: 2.4rem; } * + h3, * + h4, * + h5, * + h6 { margin-top: 20px; margin-top: 2rem; } h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: 4px !important; margin-top: 0.4rem !important; } h1.page-title + h2 { margin-top: 4px; margin-top: 0.4rem; } main h2, main h3 { clear: both; } /* headings with 'more' style link */ /* ------------------------------- */ a.view-more { float: right; margin-top: 10px; margin-top: 1rem; font-size: 12px; font-size: 1.2rem; } /* ========================== paragraphs ========================== */ /* intro text */ /* ---------- */ .intro-text { font-size: 18px; font-size: 1.8rem; line-height: 1.25; color: #33a5e5; } .intro-text.black { color: #333; } * + .intro-text { margin-top: 10px; margin-top: 1rem; } /* info text */ /* --------- */ main .info { font-family: 'Museosans700'; font-size: 16px; font-size: 1.6rem; color: #396c8c; } main .info + * { margin-top: 10px; margin-top: 1rem; } /* paragraphs following floated images */ /* ----------------------------------- */ main figure.in-flow + p { margin-top: 2px; margin-top: 0.2rem; } /* default paragraph behaviour */ /* --------------------------- */ main * + p { margin-top: 10px; margin-top: 1rem; } b, strong { font-family: 'MuseoSans700'; font-weight: normal; } /* Jargon Buster */ /* ------------- */ span.jargon.highlight { border: 1px solid #34A6E8; border: 0.1rem solid #34A6E8; padding: 0 1px 1px 1px; padding: 0 0.1rem 0.1rem 0.1rem; cursor: pointer; } div.jargonPopUp { position: absolute; z-index: 500; display: none; background-color: #e4f1fc; width: 199px; width: 19.9rem; border-top: 1px dotted #000066; border-top: 0.1rem dotted #000066; border-bottom: 1px dotted #000066; border-bottom: 0.1rem dotted #000066; text-align: center; color: #000066; padding: 11px 20px; padding: 1.1rem 2rem; font-family: 'MuseoSans300', sans-serif; font-size: 13px; font-size: 1.3rem; line-height: 1.15; text-transform: none; } img.jargonArrow { position: absolute; z-index: 501; display: none; border: none !important; } /* ========================== links ========================== */ a { color: #00ace5; text-decoration: none; border-bottom: dotted 1px #00ace5; border-bottom: dotted 0.1rem #00ace5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:hover, a:focus { color: #396c8c; text-decoration: none; border-bottom: dotted 1px #396c8c; border-bottom: dotted 0.1rem #396c8c; } /* in-page big link icons */ /* ---------------------- */ a.big-link { border: none; font-family: 'MuseoSans700'; font-size: 12px; font-size: 1.2rem; line-height: 1; color: #3f5966; text-transform: uppercase; } a.big-link span { display: inline-block; vertical-align: middle; } a.big-link:before { content: ''; display: inline-block; height: 48px; height: 4.8rem; width: 48px; width: 4.8rem; margin-right: 6px; margin-right: 0.6rem; vertical-align: middle; background-color: #71c1ef; -webklit-border-radius: 5rem; -moz-border-radius: 5rem; border-radius: 5rem; -webkit-box-shadow: inset 0 0 0 0.3rem #71c1ef, inset 0 0 0 0.4rem #ffffff; -moz-box-shadow: inset 0 0 0 0.3rem #71c1ef, inset 0 0 0 0.4rem #ffffff; box-shadow: inset 0 0 0 0.3rem #71c1ef, inset 0 0 0 0.4rem #ffffff; font-family: 'FontAwesome'; text-align: center; font-size: 20px; font-size: 2rem; line-height: 2.4; color: #ffffff; } a.big-link.play:before { content: '\f04b'; } a.big-link.video:before { content: '\f03d'; } /* ========================== document links ========================== */ .document:before { content: ''; display: inline-block; width: 30px; width: 3rem; height: 40px; height: 4rem; overflow: hidden; margin-right: 6px; margin-right: 0.6rem; background: url(/images/document-icons/blank-file-icon.svg) 0 0 no-repeat transparent; background-size: contain; } .document.avi:before { background-image: url(/images/document-icons/avi-file-icon.svg); } .document.doc:before { background-image: url(/images/document-icons/doc-file-icon.svg); } .document.gif:before { background-image: url(/images/document-icons/gif-file-icon.svg); } .document.jpg:before { background-image: url(/images/document-icons/jpg-file-icon.svg); } .document.mov:before { background-image: url(/images/document-icons/mov-file-icon.svg); } .document.mp3:before { background-image: url(/images/document-icons/mp3-file-icon.svg); } .document.mpg:before { background-image: url(/images/document-icons/mpg-file-icon.svg); } .document.pdf:before { background-image: url(/images/document-icons/pdf-file-icon.svg); } .document.png:before { background-image: url(/images/document-icons/png-file-icon.svg); } .document.ppt:before { background-image: url(/images/document-icons/ppt-file-icon.svg); } .document.psd:before { background-image: url(/images/document-icons/psd-file-icon.svg); } .document.rar:before { background-image: url(/images/document-icons/rar-file-icon.svg); } .document.txt:before { background-image: url(/images/document-icons/txt-file-icon.svg); } .document.wav:before { background-image: url(/images/document-icons/wav-file-icon.svg); } .document.wmv:before { background-image: url(/images/document-icons/wmv-file-icon.svg); } .document.xls:before { background-image: url(/images/document-icons/xls-file-icon.svg); } .document.zip:before { background-image: url(/images/document-icons/zip-file-icon.svg); } /* ========================== images ========================== */ figure { position: relative; display: block; width: 100%; overflow: hidden; } * + figure { margin-top: 10px; margin-top: 1rem; } figure .inner { position: relative; display: block; width: 100%; border: solid 2px #e2e2e2; border: solid 0.2rem #e2e2e2; overflow: hidden; } figure img { display: block; width: 100%; height: auto; } figure figcaption { position: relative; margin-top: 2px; margin-top: 0.2rem; padding: 6px 10px; padding: 0.6rem 1rem; background-color: #e9faf8; text-align: center; color: #666666; } figure .closer-look { position: absolute; bottom: 5px; bottom: 0.5rem; left: 5px; left: 0.5rem; height: 25px; height: 2.5rem; line-height: 27px; line-height: 2.7rem; padding: 0 12px 0 0; padding: 0 1.2rem 0 0; white-space: nowrap; cursor: pointer; opacity: 0.92; background-color: #ffffff; border: none; font-size: 12px; font-size: 1.2rem; color: #396c8c; } figure .closer-look:before { content: '\f067'; display: block; float: left; margin-right: 5px; margin-right: 0.5rem; width: 26px; width: 2.6rem; height: 25px; height: 2.5rem; background-color: #34A6E8; font-family: 'FontAwesome'; font-size: 17px; font-size: 1.7rem; text-align: center; line-height: 1.6; color: #ffffff; } figure .closer-look:hover, figure .closer-look:focus { opacity: 1; } /* image rows */ /* ---------- */ * + .image-row { margin-top: 10px; margin-top: 1rem; } .image-row figure .inner { height: 150px; height: 15rem; } .image-row figure { float: left; margin-top: 0; } .image-row figure img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: none; width: auto; height: 102%; } .image-row figure.portrait img, figure.portrait img { width: 102%; height: auto; } /* 2 image row */ .image-row.two figure { width: 49%; } .image-row.two figure + figure { margin-left: 2%; } /* 3 image row */ .image-row.three figure { width: 32%; } .image-row.three figure .inner { height: 100px; height: 10rem; } .image-row.three figure + figure { margin-left: 2%; } /* Repository */ .image-row.two.repository figure .inner { height: 210px; height: 21rem; } .image-row.three.repository figure .inner { height: 140px; height: 14rem; } /* in-flow images */ /* -------------- */ figure.in-flow { float: left; width: 150px; width: 15rem; margin: 5px 10px 2px 0 !important; margin: 0.5rem 1rem 0.2rem 0 !important; } /* no border figures */ /* ----------------- */ figure.no-border .inner { border: none !important; } /* ========================== page header images ========================== */ .header-image { border: solid 2px #e2e0e0; border: solid 0.2rem #e2e0e0; height: 260px; height: 26rem; background-repeat: no-repeat; background-position: center center; background-size: cover; } .header-image img { display: block; } .header-image.no-border { border: none !important; } /* ========================== page header image gallery ========================== */ .rsArrow { position: absolute; bottom: 25px; bottom: 2.5rem; right: 385px; right: 38.5rem; width: 40px; width: 4rem; height: 40px; height: 4rem; background-color: rgba(43,199,178,0.6); } .rsArrowRight { bottom: 70px; bottom: 7rem; } .rsArrowIcn { width: 30px; width: 3rem; height: 28px; height: 2.8rem; margin: 6px 5px; margin: 0.6rem 0.5rem; background: url(/images/small-arrow-left-right.png) bottom left no-repeat; background-size: cover; } .rsArrowRight .rsArrowIcn { background-position: top left; } .rsGCaption { position: relative; height: 0; overflow: visible; } .rsGCaption > * { position: absolute; bottom: 0; right: 0; width: 380px; width: 38rem; height: 110px; height: 11rem; padding: 10px; padding: 1rem; background-color: rgba(255,255,255,0.84); text-align: left; overflow: hidden; line-height: 1.3; } .rsGCaption h3 { font-family: 'MuseoSans700'; font-size: 18px; font-size: 1.8rem; } .rsGCaption p + p { margin-top: 0; } .rsGCaption p.more { margin-top: 3px; margin-top: 0.3em; font-size: 12px; font-size: 1.2rem; } /* ========================== rich media ========================== */ .rich-media { border: solid 2px #e2e2e2; border: solid 0.2rem #e2e2e2; } /* ========================== blockquotes ========================== */ main blockquote { background-color: #e9faf8; border-bottom: solid 3px #d3d8d8; border-bottom: solid 0.3rem #d3d8d8; padding: 14px 16px; padding: 1.4rem 1.6rem; box-shadow: inset 0 -0.2rem 0 #ffffff; font-family: 'MuseoSans300'; font-size: 15px; font-size: 1.5rem; line-height: 1.3; color: #415967; text-align: center; } main blockquote.right { float: right; width: 50%; margin: 10px 0 10px 20px; margin: 1rem 0 1rem 2rem; } main * + blockquote { margin-top: 12px; margin-top: 1.2rem; } /* ========================== content lists ========================== */ main ul { margin-left: 20px; margin-left: 2rem; } main ol { margin-left: 32px; margin-left: 3.2rem; } main ol ol li { list-style-type: lower-roman; } main dl dt { font-family: 'Museosans700'; font-size: 16px; font-size: 1.6rem; color: #396c8c; } main dl * + dt { margin-top: 12px; margin-top: 1.2rem; } main dl dt + dd { margin-top: 2px; margin-top: 0.2rem; } main * + ul, main * + ol, main * + dl { margin-top: 10px; margin-top: 1rem; } /* documents in lists */ /* ------------------ */ li.document { list-style-type: none; clear: both; overflow: hidden; position: relative; left: -16px; left: -1.6rem; } li.document:before { float: left; display: block; } /* document lists */ /* -------------- */ ul.document-list { margin-left: 0; padding-left: 0; list-style-type: none; } ul.document-list li.document { position: static; overflow: hidden; margin-top: 6px; margin-top: 0.6rem; } ul.document-list li.document:before { float: none; display: inline-block; width: 22px; width: 2.2rem; height: 29.333px; height: 2.93333rem; vertical-align: middle; } /* ========================== tables ========================== */ main * + .table-wrapper { margin-top: 16px; margin-top: 1.6rem; } main div.data table { border-collapse: collapse; width: 100%; border-bottom: solid 2px #d3d8d8; border-bottom: solid 0.2rem #d3d8d8; } main div.data.table-default-width table { width: auto; } main * + div.data { margin-top: 16px; margin-top: 1.6rem; } main div.data table tr th { border-bottom: solid 2px #d3d8d8; border-bottom: solid 0.2rem #d3d8d8; padding: 0 0 3px 0; padding: 0 0 0.3rem 0; background-color: #ffffff; font-family: 'MuseoSans700'; font-weight: normal; text-align: left; color: #19252d; } main div.data table th div { padding: 8px 16px; padding: 0.8rem 1.6rem; background-color: #c4d3dd; } main div.data table td { padding: 8px 16px; padding: 0.8rem 1.6rem; border-left: solid 2px #d3d8d8; border-left: solid 0.2rem #d3d8d8; } main div.data table tr td:first-child { border-left: none; } main div.data table tr:nth-child(2n-1) { background-color: #e9faf8; } /* ========================== forms ========================== */ main * + .form-holder { margin-top: 20px; margin-top: 2rem; } .form-holder .form { padding: 18px; padding: 1.8rem; background-color: #f9f9f9; border: solid 1px #e2e0e0; border: solid 0.1rem #e2e0e0; font-size: 13px; font-size: 1.3rem; } .form .field + .field { margin-top: 10px; margin-top: 1rem; } /* labels */ /* ------ */ .form .field label, .form .field .label { display: block; } .form .field label + * { margin-top: 1px; margin-top: 0.1rem; } .form .field label.visuallyhidden + *, .form .field label.hidden + * { margin-top: 0; } .form .field .char-count { display: none; } .form .field .char-count.active { display: inline-block; margin: 5px 0 0 0; color: #990000; } /* core styling of inputs */ /* ---------------------- */ .form .field input, .form .field select, .form .field textarea { display: block; width: 100%; border: solid 1px #e2e0e0; border: solid 0.1rem #e2e0e0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .form .field input[name="search-type"], .form .field select[name="search-type"], .form .field textarea[name="search-type"] { width: auto; } .form .field input:focus, .form .field select:focus, .form .field textarea:focus { border-color: #b2b0b0; } select, input, textarea { padding: 5px; padding: 0.5rem; font-size: 13px; font-size: 1.3rem; } .form .field input.medium, .form .field select.medium, .form .field textarea.medium { width: 40%; } .form .field input.small, .form .field select.small, .form .field textarea.small { width: 42px; width: 4.2rem; } /* radio and checkbox lists */ /* ------------------------ */ .field.checkbox-radio-list label { position: relative; display: block; width: auto; overflow: hidden; padding-left: 18px; padding-left: 1.8rem; } .field.checkbox-radio-list label + label { margin-top: 3px; margin-top: 0.3rem; } .field.checkbox-radio-list label input { position: absolute; top: 2px; top: 0.2rem; left: 0; display: block; padding: 0; width: auto; border: none; } .form .field .time-field select { width: 6.5rem; display: inline-block; margin: 0 0.5rem 0 0; } /* help text in fields */ /* ------------------- */ .form .field p { margin-top: 2px; margin-top: 0.2rem; font-size: 12px; font-size: 1.2rem; color: #666666; } /* required label */ /* -------------- */ .required { font-size: 80%; color: #666666; } /* action buttons */ /* -------------- */ .form .field.action { margin-top: 18px; margin-top: 1.8rem; padding-top: 16px; padding-top: 1.6rem; border-top: solid 1px #d3d8d8; border-top: solid 0.1rem #d3d8d8; text-align: right; } .form .field-radio-block table th { padding: 0 10px 5px 0; padding: 0 1rem 0.5rem 0; } .form .field-radio-block table td { padding-bottom: 5px; padding-bottom: 0.5rem; } /* errors and messages */ /* ------------------- */ .error-msg, .error-msg *, .error, .error .required { color: #990000 !important; } .error input, .error textarea, .error select { border-color: #990000 !important; } .form-holder .form-posted-msg { padding: 2rem 0; } .form-holder .error-msg { margin-bottom: 10px; margin-bottom: 1rem; } .form-holder .error-msg p { margin: 0; } /* help text in fields */ /* ------------------- */ .form .field p { margin-top: 2px; margin-top: 0.2rem; font-size: 12px; font-size: 1.2rem; color: #666666; } /* required label */ /* -------------- */ .required { font-size: 80%; color: #666666; } /* action buttons */ /* -------------- */ .form .field.action { margin-top: 18px; margin-top: 1.8rem; padding-top: 16px; padding-top: 1.6rem; border-top: solid 1px #d3d8d8; border-top: solid 0.1rem #d3d8d8; text-align: right; } /* errors and messages */ /* ------------------- */ .error-msg, .error-msg *, .error, .error .required { color: #990000 !important; } .error input, .error textarea, .error select { border-color: #990000 !important; } /* placeholder text styling */ /* ------------------------ */ ::-webkit-input-placeholder { color: #999999; } :-moz-placeholder { color: #999999; } :-ms-placeholder { color: #999999; } /* ========================== buttons ========================== */ button, .button { display: inline-block; height: 30px; height: 3rem; padding: 0 18px; padding: 0 1.8rem; border: solid 1px #e2e2e2; border: solid 0.1rem #e2e2e2; background-color: #34A6E8; font-family: 'Museosans700'; font-size: 16px; font-size: 1.6rem; color: #ffffff; line-height: 1.8; text-transform: uppercase; white-space: nowrap; } button:disabled, .button:disabled { border: solid 1px #e2e2e2; border: solid 0.1rem #e2e2e2; background-color: #ccc; } button:hover, button:focus, .button:hover, .button:focus { border: solid 1px #e2e2e2; border: solid 0.1rem #e2e2e2; color: #ffffff; } button.naked, .button.naked { padding: 0; border: none; background-color: transparent; font-family: 'Museosans500'; font-size: 13px; font-size: 1.3rem; line-height: 2.2; color: #666666; } button + button, .button + .button { margin-left: 15px; margin-left: 1.5rem; } /* ========================== bookmarks ========================== */ .bookmarks { margin: 20px 0; margin: 2rem 0; padding: 10px 0; padding: 1rem 0; border-top: solid 3px #d3d8d8; border-top: solid 0.3rem #d3d8d8; border-bottom: solid 3px #d3d8d8; border-bottom: solid 0.3rem #d3d8d8; font-family: 'MuseoSans300'; font-size: 13px; font-size: 1.3rem; } /* default vertical view */ /* --------------------- */ .bookmarks.vertical { background: url(/images/down-arrow.png) 2px 13px no-repeat transparent; background: url(/images/down-arrow.png) 0.2rem 1.3rem no-repeat transparent; background-size: 28px 38px; background-size: 2.8rem 3.8rem; } .bookmarks.vertical ul { margin: 0 0 0 40px; margin: 0 0 0 4rem; padding: 0; min-height: 40px; min-height: 4rem; list-style-type: none; } .bookmarks.vertical ul li { position: relative; } .bookmarks.vertical ul li + li { margin-top: 4px; margin-top: 0.4rem; } .bookmarks.vertical ul li a { color: #333333; border-color: #333333; } /* nested sub-layer bookmarks */ /* -------------------------- */ .bookmarks.vertical ul ul { margin-left: 0; } .bookmarks.vertical ul li.sub-heading { padding-left: 14px; padding-left: 1.4rem; } .bookmarks.vertical ul li.sub-sub-heading { padding-left: 28px; padding-left: 2.8rem; } .bookmarks.vertical ul li.sub-heading:before, .bookmarks.vertical ul li.sub-sub-heading:before { position: absolute; top: 0; left: 0; font-family: 'FontAwesome'; font-size: 15px; font-size: 1.5rem; line-height: 1.2; content: '\f107'; color: #00c2a2; } .bookmarks.vertical ul li.sub-sub-heading:before { left: 14px; left: 1.4rem; } /* horizontal bookmarks */ /* -------------------- */ .bookmarks.horizontal { background: none; } .bookmarks.horizontal ul { display: inline; margin: 0; line-height: 1.6; } .bookmarks.horizontal ul li { display: inline; } .bookmarks.horizontal ul li:before { position: static; content: '|'; display: inline-block; margin: 0 4px; margin: 0 0.4rem; } .bookmarks.horizontal > ul > li:first-child:before { content: ''; content: none; } .bookmarks.horizontal ul li a { font-family: 'MuseoSans500'; color: #396c8c; border-bottom-color: #396c8c; } .bookmarks.horizontal ul li.sub-heading a, .bookmarks.horizontal ul li.sub-sub-heading a { font-family: 'MuseoSans300'; color: #00ace5; border-bottom-color: #00ace5; } /* ========================== on this page list ========================== */ .on-this-page { overflow: hidden; margin-top: -3px !important; margin-top: -0.3rem !important; } .on-this-page .toggle, .on-this-page .inner .close { display: none; float: right; font-size: 12px; font-size: 1.2rem; color: #405966; cursor: pointer; } .on-this-page .toggle:before, .on-this-page .inner .close:before { font-family: 'FontAwesome'; display: inline-block; margin-right: 4px; margin-right: 0.4rem; color: #00ace5; } .on-this-page .toggle:before { content: '\f067'; } .on-this-page .inner .close:before { content: '\f00d'; } .on-this-page .toggle { margin-bottom: 4px; margin-bottom: 0.4rem; } .on-this-page .inner { display: none; clear: both; background-color: #f9f9f9; border: solid 3px #d3d8d8; border: solid 0.3rem #d3d8d8; border-left: none; border-right: none; padding: 10px 18px; padding: 1rem 1.8rem; } .on-this-page.active .inner { display: block; } .on-this-page .inner h3 { margin-top: 0; font-size: 16px; font-size: 1.6rem; color: #396c8c; } .on-this-page .inner ul { list-style-type: none; margin: 7px 0 0 0 !important; margin: 0.7rem 0 0 0 !important; padding: 0; } .on-this-page .inner ul li + li { margin-top: 3px; margin-top: 0.3rem; } .on-this-page .inner ul li a { border: none; font-size: 14px; font-size: 1.4rem; color: #333333; } /* ========================== special headings ========================== */ h2.special-heading { position: relative; padding: 10px; padding: 1rem; background-color: #a6bac8; font-family: 'Museosans700'; font-size: 13px; font-size: 1.3rem; line-height: 1; text-transform: uppercase; color: #2a3744; } h2.special-heading:after { content: ''; position: absolute; top: 100%; left: 25px; left: 2.5rem; width: 0; height: 0; overflow: hidden; border-top: solid 10px #a6bac8; border-top: solid 1rem #a6bac8; border-left: solid 10px transparent; border-left: solid 1rem transparent; border-right: solid 10px transparent; border-right: solid 1rem transparent; } h2.special-heading + * { margin-top: 0 !important; } /* alternative special heading with bottom left corner extension */ /* ------------------------------------------------------------- */ h2.special-heading.alt { position: relative; z-index: 2; padding: 10px; padding: 1rem; margin-left: -10px; margin-left: -1rem; font-family: 'Museosans500'; font-size: 20px; font-size: 2rem; line-height: 1.2; text-transform: none; } h2.special-heading.alt:after { display: none; content: none; } h2.special-heading.alt:before { content: ''; position: absolute; z-index: -1; top: 0; bottom: -14px; bottom: -1.4rem; left: 0; display: block; border-bottom: solid 14px transparent; border-bottom: solid 1.4rem transparent; border-left: solid 17px #a6bac8; border-left: solid 1.7rem #a6bac8; } h2.special-heading.alt + * { margin-top: 20px !important; margin-top: 2rem !important; } /* ========================== article / result lists ========================== */ * + .article-list { margin-top: 10px !important; margin-top: 1rem !important; } .article-list article { border-top: solid 3px #d2d6d9; border-top: solid 0.3rem #d2d6d9; padding: 10px; padding: 1rem; } .article-list article:last-child { border-bottom: solid 3px #d2d6d9; border-bottom: solid 0.3rem #d2d6d9; } .article-list article h2 { font-family: 'MuseoSans500'; font-size: 20px; font-size: 2rem; } .article-list article h2 + * { margin-top: 4px !important; margin-top: 0.4rem !important; } .article-list article .info { margin-bottom: 0; font-family: 'Museosans700'; font-size: 14px; font-size: 1.4rem; color: #333333; } .article-list article .info + *, .article-list article p + p { margin-top: 0; } .article-list article a { border-bottom: none; } /* article as link */ /* --------------- */ .article-list article > a { display: block; border: none; padding: 10px; padding: 1rem; margin: -10px; margin: -1rem; color: #333333; } .article-list article > a:hover, .article-list article > a:focus { background-color: #e9faf8; } .article-list article > a h2 span { border-bottom: dotted 1px #33a5e5; border-bottom: dotted 0.1rem #33a5e5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .article-list article > a:hover h2, .article-list article > a:focus h2 { color: #396c8c; } .article-list article > a:hover h2 span, .article-list article > a:focus h2 span { border-color: #396c8c; } /* ========================== pagination ========================== */ .pagination { margin-top: 20px; margin-top: 2rem; text-align: right; font-size: 14px; font-size: 1.4rem; } .pagination .links { display: inline-block; margin-left: 10px; margin-left: 1rem; } .pagination .links > * { display: inline-block; padding: 0 6px; padding: 0 0.6rem; font-family: 'MuseoSans300'; } .pagination .links > * + * { margin-left: 2px; margin-left: 0.2rem; } .pagination .links span { font-family: 'Museosans700'; } .pagination .links a { border: none; color: #333333; } .pagination .links a:hover, .pagination .links a:focus { color: #00ace5; } .pagination .controls { width: 20px; width: 2rem; height: 14px; height: 1.4rem; padding: 0; overflow: hidden; text-indent: 999em; } .pagination .controls.prev { margin-right: 2px; margin-right: 0.2rem; background: url(/images/small-arrow-left-matrix.png) 0 0 no-repeat transparent; background-size: 100% auto; } .pagination .controls.next { margin-left: 2px; margin-left: 0.2rem; background: url(/images/small-arrow-right-matrix.png) 0 0 no-repeat transparent; background-size: 100% auto; } .pagination .controls.prev.inactive, .pagination .controls.next.inactive { background-position: 0 100%; } /* ========================== main page columns ========================== */ main * + .columns, main * + .table { margin-top: 16px; margin-top: 1.6rem; } /* ========================== main page sectioned areas ========================== */ main * + section { margin-top: 26px; margin-top: 2.6rem; padding-top: 16px; padding-top: 1.6rem; border-top: solid 3px #d4d9dc; border-top: solid 0.3rem #d4d9dc; } /* ========================== feature items / tiles ========================== */ .feature-item { display: block; width: 220px; width: 22rem; font-family: 'Museosans300'; font-size: 18px; font-size: 1.8rem; line-height: 1.25; } .columns.four .feature-item.double, .table.four .feature-item.double { width: 50%; } .feature-item figure { width: 100%; border: solid 2px #e2e0e0; border: solid 0.2rem #e2e0e0; } .feature-item figure.no-border { border: none !important; } .feature-item figure img { display: inline-block; width: auto; max-width: 100%; vertical-align: top; } .feature-item figure + * { margin-top: 8px; margin-top: 0.8rem; } .feature-item h2 { font-family: 'MuseoSans300'; font-size: 24px; font-size: 2.4rem; line-height: 1.2; } .feature-item h3 { font-family: 'MuseoSans500'; font-size: 18px; font-size: 1.8rem; line-height: 1.4; margin-bottom: 3px; margin-bottom: 0.3rem; } .feature-item * + p { margin-top: 2px; margin-top: 0.2rem; } .feature-item .link-text { display: none; } /* tiled feature */ /* ------------- */ .feature-item.tile { padding: 10px; padding: 1rem; border: solid 1px #e2e0e0; border: solid 0.1rem #e2e0e0; background-color: #ffffff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .feature-item.tile.no-border { border: none; } .feature-item.tile .more { font-size: 12px; font-size: 1.2rem; } /* link feature */ /* ------------ */ a.feature-item { border-bottom: none; color: #333333; } a.feature-item.tile:hover, a.feature-item.tile:focus { background-color: #e9faf8; cursor: pointer; } a.feature-item .link-text { display: block; } a.feature-item h2 span, a.feature-item h3 span, a.feature-item .link-text span { color: #00ace5; border-bottom: dotted 1px #00ace5; border-bottom: dotted 0.1rem #00ace5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a.feature-item:hover h2 span, a.feature-item:focus h2 span, a.feature-item:hover h3 span, a.feature-item:focus h3 span, a.feature-item:hover .link-text span, a.feature-item:focus .link-text span { color: #396c8c; border-bottom: dotted 1px #396c8c; border-bottom: dotted 0.1rem #396c8c; } /* feature-item - promo tile */ /* ------------------------- */ .feature-item.tile.promo { padding: 12px 14px; padding: 1.2rem 1.4rem; background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; color: #19252d; } .feature-item.tile.promo.blue { background-color: #00ace5; } .feature-item.tile.promo.teal { background-color: #405966; } .feature-item.tile.promo .blue { color: #00ace5; } .feature-item.tile.promo .teal { color: #405966; } .feature-item.tile.promo .white { color: #ffffff; } .feature-item.tile.promo .purple { color: #9173CD; } .feature-item.tile.promo .apricot { color: #F2736F; } .feature-item.tile.promo .cream { color: #ffe9c7; } .feature-item.tile.promo .medium { font-family: 'MuseoSans300'; font-size: 20px; font-size: 2rem; line-height: 1.1; } .feature-item.tile.promo .large { font-family: 'MuseoSans500'; font-size: 30px; font-size: 3rem; line-height: 1.1; } .feature-item.tile.promo .heavy { font-family: 'MuseoSans500'; } .feature-item .link-text.white span, .feature-item .link-text.white span { color: #ffffff; border-bottom: dotted 1px #ffffff; border-bottom: dotted 0.1rem #ffffff; } .feature-item:hover .link-text.white span, .feature-item:focus .link-text.white span { color: #396c8c; border-bottom: dotted 1px #396c8c; border-bottom: dotted 0.1rem #396c8c; } /* features in aside page area */ /* --------------------------- */ aside * + .feature-item, aside * + .feature-tile { margin-top: 18px; margin-top: 1.8rem; } aside h3.feature-item { margin-top: 26px; margin-top: 2.6rem; padding-top: 16px; padding-top: 1.6rem; border-top: solid 3px #d4d9dc; border-top: solid 0.3rem #d4d9dc; } /* feature row */ /* ----------- */ main .feature-row + .feature-row { margin-top: 20px !important; margin-top: 2rem !important; } main h2 + .feature-row { margin-top: 6px !important; margin-top: 0.6rem !important; } .feature-row .feature-item.column { height: 80px; height: 8rem; } .feature-row .feature-item.column.full-width { height: auto; max-width: 100px; max-width: 600px; max-width: 60rem; text-align: center; display: block; margin: 0 auto; } /* ========================== list blocks ========================== */ .list-block { width: 220px; width: 22rem; } * + .list-block { margin-top: 18px; margin-top: 1.8rem; } .list-block h2 { border-top: solid 1px #d3d8d8; border-top: solid 0.1rem #d3d8d8; border-bottom: solid 3px #d3d8d8; border-bottom: solid 0.3rem #d3d8d8; padding: 5px 0 3px 0; padding: 0.5rem 0 0.3rem 0; font-family: 'Museosans700'; font-size: 14px; font-size: 1.4rem; text-transform: uppercase; } /* standard list */ /* ------------- */ .list-block ul { margin: 6px 0 0 0 !important; margin: 0.6rem 0 0 0 !important; padding: 0 0 0 16px; padding: 0 0 0 1.6rem; } .list-block ul li { margin: 0; padding: 0; } .list-block ul li + li { margin-top: 4px; margin-top: 0.4rem; } /* list block tabular information */ /* ------------------------------ */ .list-block ul.table { display: table; table-layout: auto; width: 100%; } .list-block ul.table li { display: table-row; } .list-block ul.table li > * { display: table-cell; padding: 2px; padding: 0.2rem; } .list-block ul.table li > *:first-child { padding-left: 0; } .list-block ul.table li > *:last-child { padding-right: 0; } /* ========================== aside heading ========================== */ h2.aside-heading { border-top: solid 1px #d3d8d8; border-top: solid 0.1rem #d3d8d8; border-bottom: solid 3px #d3d8d8; border-bottom: solid 0.3rem #d3d8d8; padding: 5px 0 3px 0; padding: 0.5rem 0 0.3rem 0; margin-bottom: 12px; margin-bottom: 1.2rem; font-family: 'Museosans700'; font-size: 14px; font-size: 1.4rem; text-transform: uppercase; } /* ========================== back to previous page link ========================== */ .back-to-previous { float: right; margin: 4px 0 0 20px; margin: 0.4rem 0 0 2rem; font-size: 12px; font-size: 1.2rem; } .back-to-previous a { border-color: transparent; color: #396c8c; } .back-to-previous a:before { display: inline-block; padding-right: 4px; padding-right: 0.4rem; content: '\f053'; font-family: 'FontAwesome'; } .back-to-previous a:hover, .back-to-previous a:focus { border-bottom: dotted 1px #396c8c; border-bottom: dotted 0.1rem #396c8c; } /* ========================== spinner / loader ========================== */ div#customOverlay { display: none; position: fixed; z-index: 5000; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; opacity: 0.72; } div#customOverlay #customOverlayLoader { position: absolute; top: 40%; left: 50%; } /* ========================== modal styles ========================== */ /* modal structure */ /* --------------- */ .modal-bg { display: none; position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; opacity: 0.72; } .modal-wrapper { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1010; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: center; align-items: center; } /* display modal */ /* ------------- */ .modal-bg.active { display: block; } .modal-wrapper.active { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* modal styles */ /* ------------ */ .modal { flex: none; max-height: 100%; overflow-y: scroll; overflow-x: hidden; background-color: #ffffff; -webkit-box-shadow: 0 0 1.2rem 0.5rem rgba(0,0,0,0.8); -moz-box-shadow: 0 0 1.2rem 0.5rem rgba(0,0,0,0.8); -ms-box-shadow: 0 0 1.2rem 0.5rem rgba(0,0,0,0.8); box-shadow: 0 0 1.2rem 0.5rem rgba(0,0,0,0.8); } .modal > .inner { width: 768px; width: 76.8rem; } /* ========================== step-by-step styles ========================== */ .step-by-step { position: relative; display: none; } .step-by-step.active { display: block; } .step-by-step:before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 60px; width: 6rem; background-color: #798994; -webkit-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; -moz-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; } .step-by-step > .inner { position: relative; z-index: 2; } /* header */ /* ------ */ .step-by-step header { position: relative; margin: 0; padding: 46px 0 0 0; padding: 4.6rem 0 0 0; background-color: #798994; } .step-by-step header:before { content: ''; position: absolute; z-index: 8; top: 0; left: 0; bottom: 0; width: 60px; width: 6rem; -webkit-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; -moz-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; background-color: transparent; } .step-by-step header h2, .step-by-step header h3 { margin: 0 0 0 60px !important; margin: 0 0 0 6rem !important; padding: 10px; padding: 1rem; background-color: #425968; text-align: center; line-height: 1.1; } .step-by-step header h2 { font-size: 30px; font-size: 3rem; color: #ffffff; } .step-by-step header h3 { padding: 9px 10px 7px 10px; padding: 0.9rem 1rem 0.7rem 1rem; font-size: 14px; font-size: 1.4rem; text-transform: uppercase; color: #a1acb4; } .step-by-step header hr { position: relative; z-index: 10; margin: 0 !important; opacity: 0.5; } .step-by-step header .close { position: absolute; top: 0; left: 0; z-index: 4; height: 46px; height: 4.6rem; width: 100%; margin-top: 0 !important; background-color: #ffffff; text-align: right; } .step-by-step header .close a { display: inline-block; width: 26px; width: 2.6rem; height: 26px; height: 2.6rem; margin: 10px; margin: 1rem; padding: 0; background-color: #425968; border: none; overflow: hidden; -webkit-border-radius: 2rem; -moz-border-radius: 2rem; border-radius: 2rem; font-family: 'FontAwesome'; font-size: 16px; font-size: 1.6rem; text-align: center; line-height: 1.6; color: #ffffff; cursor: pointer; text-decoration: none; opacity: 0.7; } .step-by-step header .close a:hover, .step-by-step header .close a:focus { opacity: 1; } .step-by-step header .print-download { position: absolute; top: 0; left: 70px; left: 7rem; z-index: 4; height: 46px; height: 4.6rem; margin-top: 0 !important; } .step-by-step header .print-download a { font-size: 13px; font-size: 1.3rem; line-height: 3.6; color: #666666; border: none; } .step-by-step header .print-download a:before { font-family: 'FontAwesome'; content: '\f02f\00a0\f019\00a0'; } .step-by-step header .print-download a:hover, .step-by-step header .print-download a:focus { border-bottom: dotted 1px #666666; border-bottom: dotted 0.1rem #666666; } /* main step-by-step inner area */ /* ---------------------------- */ .step-by-step .step-inner { display: table; margin: 0 !important; padding: 0; } .step-inner > * { display: table-cell; vertical-align: top; } /* steps */ /* ----- */ .step-inner .steps { width: 60px; width: 6rem; list-style-type: none; margin: 0; padding: 0; background-color: #798994; -webkit-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; -moz-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; } .step-inner .steps li { margin-bottom: 3px; margin-bottom: 0.3rem; } .step-inner .steps li a { display: block; height: 40px; height: 4rem; position: relative; z-index: 5; background-color: #425968; -webkit-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; -moz-box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; box-shadow: inset -0.8rem 0 0.8rem -0.8rem #333333, inset 0.8rem 0 0.8rem -0.8rem #333333; border: none; text-align: center; color: #a1acb4; font-size: 30px; font-size: 3rem; line-height: 1.3333; } .step-inner .steps li a:hover, .step-inner .steps li a:focus, .step-inner .steps li a.active { background-color: #34a6e8; -webkit-box-shadow: inset 0.8rem 0 0.8rem -0.8rem #333333, 0 0 0.4rem #333333; -moz-box-shadow: inset 0.8rem 0 0.8rem -0.8rem #333333, 0 0 0.4rem #333333; box-shadow: inset 0.8rem 0 0.8rem -0.8rem #333333, 0 0 0.4rem #333333; color: #ffffff; } .step-inner .steps li a:before, .step-inner .steps li a:after { content: ''; position: absolute; z-index: 5; top: 0; right: -6px; right: -0.6rem; display: block; height: 40px; height: 4rem; width: 6px; width: 0.6rem; background-color: #34a6e8; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .step-inner .steps li a:after { right: -12px; right: -1.2rem; width: 0; background-color: transparent; border-left: solid 6px #34a6e8; border-left: solid 0.6rem #34a6e8; border-top: solid 20px transparent; border-top: solid 2rem transparent; border-bottom: solid 20px transparent; border-bottom: solid 2rem transparent; } .step-inner .steps li a:hover:before, .step-inner .steps li a:focus:before, .step-inner .steps li a:hover:after, .step-inner .steps li a:focus:after, .step-inner .steps li a.active:before, .step-inner .steps li a.active:after { opacity: 1; visibility: visible; } /* step content */ /* ------------ */ .step-inner .step-content { padding: 20px 40px; padding: 2rem 4rem; } .step-inner .step-content h2.step-title { font-size: 46px; font-size: 4.6rem; } .step-inner .step-content .intro-text { font-size: 28px; font-size: 2.8rem; color: #666666; line-height: 1.2; } .step-content * + p, .step-content * + ul, .step-content * + ol { margin-top: 12px; margin-top: 1.2rem; } .step-content ul { margin-left: 20px; margin-left: 2rem; } .step-content ol { margin-left: 32px; margin-left: 3.2rem; } .step-content ol ol li { list-style-type: lower-roman; } /* images and image rows */ /* --------------------- */ .step-by-step figure.large { width: auto; } .step-by-step .large, .step-by-step .image-row { margin-left: -40px; margin-left: -4rem; margin-right: -40px; margin-right: -4rem; } .step-by-step .large .inner, .step-by-step .image-row figure .inner { border: none !important; } /* 2 image row */ .step-by-step .image-row.two figure .inner { height: 220px; height: 22rem; } /* 3 image row */ .step-by-step .image-row.three figure .inner { height: 150px; height: 15rem; } /* columns / tables */ /* ---------------- */ .step-content * + .columns, .step-content * + .table { margin-top: 16px; margin-top: 1.6rem; } /* ========================== misc styles ========================== */ /* horizontal rule */ hr { display: block; height: 1px; height: 0.1rem; border: 0; border-top: 1px solid #ccc; border-top: 0.1rem solid #ccc; margin: 20px 0 !important; margin: 2rem 0 !important; padding: 0; clear: both; } /* custom text-selection colors */ ::-moz-selection { background: #33a5e5; color: #fff; text-shadow: none; } ::selection { background: #33a5e5; color: #fff; text-shadow: none; } /* custom webkit tap highlight color */ a:link { -webkit-tap-highlight-color: rgba(0,0,0,0); /* disables tap highlight colour by making it 0 opacity */ } ins { background-color: #33a5e5; color: #000; text-decoration: none; } mark { background-color: #33a5e5; color: #000; font-style: italic; font-weight: bold; } dfn { font-style: normal; } .txt-right { text-align: right; } .txt-left { text-align: left; } /* Jquery UI autocomplete styles */ /* ----------------------------- */ .ui-autocomplete { list-style-type: none; padding: 0; margin: 0; border-radius: 0; background-color: #fff; border: 1px solid #E2E0E0; border: 0.1rem solid #E2E0E0; width: 340px !important; width: 34rem !important; } .ui-autocomplete li { list-style-type: none; padding: 0; margin: 0; border: none; } .ui-autocomplete li a { font-weight: normal; font-size: 12px; font-size: 1.2rem; padding: 5px 10px; padding: 0.5rem 1rem; text-decoration: none; border: none; cursor: pointer; display: block; font-family: 'MuseoSans500', sans-serif; } .ui-autocomplete .ui-state-focus { font-weight: normal !important; background-color: #F9F9F9 !important; border: none !important; border-radius: 0 !important; } /* =============================================================================== PAGE TYPE OVERRIDE STYLES =============================================================================== */ /* ========================== home page ========================== */ .home-page #page-wrapper { background-color: #e9faf8; } .home-page #main-page-area { padding-top: 0; padding-right: 0; } .home-page #main-page-area main + aside { width: 350px !important; width: 35rem !important; padding-top: 30px; padding-top: 3rem; } .home-page h1.page-title + * { margin-top: 0; } .home-page .special-heading.alt { padding-top: 30px; padding-top: 3rem; padding-left: 20px; padding-left: 2rem; margin-left: -30px; margin-left: -3rem; font-family: 'MuseoSans300'; font-size: 34px; font-size: 3.4rem; } .home-page .special-heading.alt span { font-family: 'MuseoSans500'; } /* home page articles */ /* ------------------ */ .home-page .article-list { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .home-page .article-list article { border-top: none; border-bottom: solid 1px #a6bac8; border-bottom: solid 0.1rem #a6bac8; padding-left: 0; padding-right: 0; break-inside: avoid; /* W3C */ -webkit-column-break-inside: avoid; /* webkit */ page-break-inside: avoid; /* firefox */ } .home-page .article-list article a:after { content: '\00a0\00bb'; } .home-page .article-list article h2 a:after { content: none; } /* home page tiles */ /* --------------- */ a.home-tile { display: block; width: 320px; width: 32rem; border: none; font-family: 'MuseoSans700'; font-size: 16px; font-size: 1.6rem; color: #141F2B; } a.home-tile.feature-tile { width: 220px; width: 22rem; } .home-tile + .home-tile { margin-top: 4px; margin-top: 0.4rem; } .home-tile .image-holder img { display: block; width: 100%; } .home-tile .content { padding: 15px; padding: 1.5rem; } .home-tile h2 { display: inline-block; font-family: 'MuseoSans700'; font-size: 20px; font-size: 2rem; line-height: 1; color: #ffffff; text-transform: uppercase; } .home-tile p { display: inline-block; } .home-tile.navy .content { background-color: #2A3744; } .home-tile.orange .content { background-color: #F48C37; } .home-tile.teal .content { background-color: #38AF8C; } .home-tile.blue .content { background-color: #34A6E8; } .home-tile.purple { background-color: #9173CD; } .home-tile.apricot { background-color: #F2736F; } .home-tile.cream { background-color: #ffe9c7; } .home-tile.navy .content p { color: #33a5e6; } /* overlay style of tile */ .home-tile.overlay { display: table; min-height: 150px; min-height: 15rem; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: transparent; } .home-tile.overlay .content { display: table-cell; height: 150px; height: 15rem; background-color: transparent; vertical-align: middle; overflow: hidden; } .home-tile.overlay h2, .home-tile.overlay p { display: block; margin: 0 !important; line-height: 1.2; } .home-tile.navy.overlay .content { background: -moz-linear-gradient(left, rgba(42,55,68,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(42,55,68,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(42,55,68,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(42,55,68,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(42,55,68,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(42,55,68,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a3744', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.orange.overlay .content { background: -moz-linear-gradient(left, rgba(244,140,55,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(244,140,55,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(244,140,55,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(244,140,55,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(244,140,55,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(244,140,55,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48c37', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.teal.overlay .content { background: -moz-linear-gradient(left, rgba(56,175,140,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(56,175,140,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(56,175,140,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(56,175,140,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(56,175,140,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(56,175,140,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38af8c', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.blue.overlay .content { background: -moz-linear-gradient(left, rgba(52,166,232,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(52,166,232,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(52,166,232,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(52,166,232,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(52,166,232,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(52,166,232,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6e8', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.purple.overlay .content { background: -moz-linear-gradient(left, rgba(145,115,205,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(145,115,205,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(145,115,205,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(145,115,205,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(145,115,205,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(145,115,205,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9173CD', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.apricot.overlay .content { background: -moz-linear-gradient(left, rgba(242,115,111,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(242,115,111,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(242,115,111,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(242,115,111,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(242,115,111,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(242,115,111,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2736F', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } .home-tile.cream.overlay .content { background: -moz-linear-gradient(left, rgba(255,233,199,1) 28%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(28%,rgba(255,233,199,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,233,199,1) 28%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,233,199,1) 28%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,233,199,1) 28%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,233,199,1) 28%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a6e8', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } /* ========================== landing page ========================== */ .landing-page #page-wrapper { background-color: #e9faf8; } .landing-page .article-list article { border-top: none; border-bottom: solid 1px #a6bac8; border-bottom: solid 0.1rem #a6bac8; padding-left: 0; padding-right: 0; break-inside: avoid; /* W3C */ -webkit-column-break-inside: avoid; /* webkit */ page-break-inside: avoid; /* firefox */ } .landing-page .article-list article a:after { content: '\00a0\00bb'; } .landing-page .article-list article h2 a:after { content: none; } /* ========================== search page ========================== */ /* filters */ /* ------- */ .secondary.search-filters h2 { margin-bottom: 10px; margin-bottom: 1rem; font-family: 'MuseoSans500'; font-size: 16px; font-size: 1.6rem; text-transform: none; color: #396c8c; } .search-filters .filter { margin-top: 10px; margin-top: 1rem; padding-bottom: 10px; padding-bottom: 1rem; border-bottom: solid 1px #e2e0e0; border-bottom: solid 0.1rem #e2e0e0; } .search-filters .filter h3 { font-size: 14px; font-size: 1.4rem; text-transform: uppercase; color: #33a5e5; } .search-filters .filter ul { list-style-type: none; margin: 0; padding: 0; font-size: 13px; font-size: 1.3rem; } .search-filters .filter ul li a { color: #333333; border: none; } main .search-filters { display: none; } /* search form customisation */ /* ------------------------- */ #main-search-form { overflow: hidden; } #main-search-form .columns { table-layout: auto; } #main-search-form .columns .column { vertical-align: middle; } #main-search-form .field.action { border: none; margin: 0; padding: 0; width: auto; } #main-search-keywords { width: 340px; width: 34rem; margin-top: 0; } #main-search-form .field.checkbox-radio-list label { display: inline-block; } #main-search-form .field.checkbox-radio-list label { margin-left: 10px; margin-left: 1rem; } #main-search-form #main-search-sort { width: 340px; width: 34rem; display: table; border-collapse: collapse; table-layout: auto; } #main-search-form #main-search-sort > * { display: table-cell; vertical-align: middle; } #main-search-form #main-search-sort > div { width: 70%; } /* search result info */ /* ------------------ */ .result-info { font-size: 16px; font-size: 1.6rem; color: #396c8c; } .result-info + .article-list { margin-top: 10px; margin-top: 1rem; } /* ========================== news index page ========================== */ /* news filter form */ /* ---------------- */ #news-filter-form .columns { table-layout: auto; } #news-filter-form .columns .column + .column { padding-left: 10px; padding-left: 1rem; } #news-filter-form .field select, #news-filter-form .field input { height: 30px; height: 3rem; } #news-filter-form .column.field.action { margin: 0; padding-top: 0; border: none; width: 1%; } /* ========================== glossary page ========================== */ .glossary-bookmarks a, .glossary-bookmarks span { display: inline-block; margin: 2px 4px; margin: 0.2rem 0.4rem; padding: 6px 0; padding: 0.6rem 0; font-size: 18px; font-size: 1.8rem; line-height: 0.8; } /* ========================== document tabs ========================== */ .document-nav-tabs { padding: 0; } * + .document-nav-tabs { margin-top: 20px; margin-top: 2rem; } .document-nav-tabs .inner { border-bottom: 1px solid #34A6E8; display: table; table-layout: fixed; position: relative; top: 2px; top: 0.2rem; width: 100%; max-width: 100%; border-collapse: collapse; margin: 0; padding: 0; } .document-nav-tabs .inner > a { transition: all 0.3s; cursor: pointer;; display: table-cell; margin: 0; padding: 10px 15px; padding: 1rem 1.5rem; border-right: 1px solid #ffffff; text-align: center; vertical-align: middle; background-color: #f3f4f5; font-family: 'MuseoSans500'; font-size: 14px; font-size: 1.4rem; color: #00ace5; text-transform: none; } .document-nav-tabs .inner > a:hover { background-color: #edeff0; color: #34A6E8; } .document-nav-tabs .inner > a:focus, .document-nav-tabs .inner > a.active { background-color: #34A6E8; color: #fff;; } /* ========================== document navigation ========================== */ .document-navigation { list-style-type: none; margin: 0; padding: 0; background-color: #f9f9f9; border: solid 1px #e2e0e0; border: solid 0.1rem #e2e0e0; } * + .document-navigation { margin-top: 20px; margin-top: 2rem; } .document-navigation.hidden { display: none; } .document-navigation > li { float: left; margin: 0 !important; padding: 2px; padding: 0.2rem; } .document-navigation > li + li { border-left: solid 1px #e2e0e0; border-left: solid 0.1rem #e2e0e0; } .document-navigation > li > a, .document-navigation > li > h2 { display: block; height: 34px; height: 3.4rem; line-height: 36px; line-height: 3.6rem; padding: 0 14px; padding: 0 1.4rem; border: none; font-family: 'MuseoSans700'; font-size: 13px; font-size: 1.3rem; color: #405966; text-transform: uppercase; } .document-navigation > li > a:hover, .document-navigation > li > a:focus, .document-navigation > li > h2:hover { background-color: #dae9f0; } /* menu and drop down */ /* ------------------ */ .document-navigation .menu { position: relative; overflow: visible; } .document-navigation .menu h2 { cursor: pointer; vertical-align: middle; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .document-navigation .menu h2:before { display: inline-block; margin-top: -2px; margin-top: -0.2rem; margin-right: 7px; margin-right: 0.7rem; content: '\f03a'; font-family: 'FontAwesome'; font-size: 19px; font-size: 1.9rem; color: #00c2a2; vertical-align: middle; } .document-navigation .menu:after { visibility: hidden; opacity: 0; content: ''; position: absolute; bottom: -4px; bottom: -0.4rem; left: 50%; margin-left: -10px; margin-left: -1rem; border-bottom: solid 9px #405966; border-bottom: solid 0.9rem #405966; border-left: solid 10px transparent; border-left: solid 1rem transparent; border-right: solid 10px transparent; border-right: solid 1rem transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .document-navigation .menu ul { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: -10px; left: -1rem; z-index: 10; width: 240px; width: 24rem; background-color: #f9f9f9; border: solid 2px #405966; border: solid 0.2rem #405966; list-style-type: none; margin-top: 4px !important; margin-top: 0.4rem !important; margin-left: 0 !important; padding: 0; -webkit-box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); -moz-box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); font-size: 14px; font-size: 1.4rem; line-height: 1.4; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .document-navigation .menu ul li + li { border-top: solid 1px #d4d9dc; border-top: solid 0.1rem #d4d9dc; } .document-navigation .menu ul li a { display: block; padding: 5px 10px; padding: 0.5rem 1rem; border: none; } /* hide / show menu pull down */ .document-navigation.menu-active .menu:after, .document-navigation.menu-active .menu ul { visibility: visible; opacity: 1; } /* navigation controls */ /* ------------------- */ .document-navigation .nav-control + .nav-control { border-right: solid 1px #e2e0e0; border-right: solid 0.1rem #e2e0e0; } .document-navigation .nav-control > a.prev:before { content: ''; display: inline-block; margin-top: -3px; margin-top: -0.3rem; margin-right: 7px; margin-right: 0.7rem; width: 28px; width: 2.8rem; height: 20px; height: 2rem; vertical-align: middle; background: url(/images/small-arrow-left-matrix.png) 0 0 no-repeat transparent; background-size: cover; } .document-navigation .nav-control > a.next:after { content: ''; display: inline-block; margin-top: -3px; margin-top: -0.3rem; margin-left: 7px; margin-left: 0.7rem; width: 28px; width: 2.8rem; height: 20px; height: 2rem; vertical-align: middle; background: url(/images/small-arrow-right-matrix.png) 0 0 no-repeat transparent; background-size: cover; } .document-navigation .nav-control a.inactive { opacity: 0.6; } .document-navigation > li.nav-control > a.inactive:hover, .document-navigation > li.nav-control > a.inactive:focus { background-color: transparent !important; } /* print / download */ /* ---------------- */ .document-navigation .print-download { float: right; position: relative; overflow: visible; } .document-navigation .print-download > a:before { display: inline-block; margin-top: -2px; margin-top: -0.2rem; margin-right: 7px; margin-right: 0.7rem; content: '\f02f\00a0\f019'; font-family: 'FontAwesome'; font-size: 19px; font-size: 1.9rem; color: #00c2a2; vertical-align: middle; } .document-navigation .print-download:after { visibility: hidden; opacity: 0; content: ''; position: absolute; bottom: -4px; bottom: -0.4rem; left: 50%; margin-left: -10px; margin-left: -1rem; border-bottom: solid 9px #405966; border-bottom: solid 0.9rem #405966; border-left: solid 10px transparent; border-left: solid 1rem transparent; border-right: solid 10px transparent; border-right: solid 1rem transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .document-navigation .print-download > ul { visibility: hidden; opacity: 0; position: absolute; top: 100%; right: -10px; right: -1rem; z-index: 10; width: 280px; width: 28rem; background-color: #f9f9f9; border: solid 2px #405966; border: solid 0.2rem #405966; list-style-type: none; margin-top: 4px !important; margin-top: 0.4rem !important; margin-left: 0 !important; padding: 0; -webkit-box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); -moz-box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); box-shadow: 0 0.6rem 0.8rem rgba(0,0,0,0.65); font-size: 14px; font-size: 1.4rem; line-height: 1.4; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .document-navigation .print-download > ul li + li { border-top: solid 1px #d4d9dc; border-top: solid 0.1rem #d4d9dc; } .document-navigation .print-download > ul li > * { display: block; padding: 5px 10px; padding: 0.5rem 1rem; border: none; } .document-navigation .print-download > ul li label { position: relative; min-height: 1em; padding-left: 28px; padding-left: 2.8rem; } .document-navigation .print-download > ul li label input { position: absolute; top: 7px; top: 0.7rem; left: 10px; left: 1rem; } .document-navigation .print-download > ul li.all { border-bottom: solid 2px #d4d9dc; border-bottom: solid 0.2rem #d4d9dc; } .document-navigation .print-download > ul li.all a:before, .document-navigation .print-download > ul li.selected a:before { display: inline-block; margin-right: 5px; margin-right: 0.5rem; content: '\f02d'; font-family: 'FontAwesome'; font-size: 19px; font-size: 1.9rem; } .document-navigation .print-download > ul li.all a:before { content: '\f02d'; } .document-navigation .print-download > ul li.selected a:before { content: '\f0c5'; } /* hide / show print pull down */ .document-navigation.print-active .print-download:after, .document-navigation.print-active .print-download ul { visibility: visible; opacity: 1; } /* ========================== document content area ========================== */ section.document-content { display: table; border-collapse: collapse; table-layout: fixed; width: 100%; padding-top: 0; border-top: none; } section.publication-page { page-break-after: always; } section.publication-page:last-child { page-break-after: auto; } section.document-content > * { display: table-cell; } section.document-content > .inner + aside { width: 250px !important; width: 25rem !important; padding-left: 30px; padding-left: 3rem; } /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ code[class*="language-"], pre[class*="language-"] { color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ .code-block pre { word-wrap: normal; } pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: #a67f59; background: hsla(0,0%,100%,.5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.regex, .token.important { color: #e90; } .token.important { font-weight: bold; } .token.entity { cursor: help; } pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; } /* ========================== interactive maps ========================== */ section.interactive-map { padding: 0; border: none; position: relative; max-width: 480px; max-width: 48rem; } * section.interactive-map { margin-top: 16px; margin-top: 1.6rem; } .interactive-map .inner { position: absolute; top: 30px; top: 3rem; left: 0; width: 46%; } .interactive-map figure .inner { position: static; width: auto; } .interactive-map figure.in-flow { width: 12rem; } .interactive-map .inner h2 { font-family: 'Museosans500'; font-size: 24px; font-size: 2.4rem; } section.interactive-map img.map-bg { width: 100%; max-width: none; display: block; margin: 0; padding: 0; } /* map markers */ /* ----------- */ .interactive-map .marker-set .marker { position: absolute; z-index: 5; display: block; margin: 0; padding: 0; width: 4.792%; text-decoration: none; border: none; -webkit-transform: translate(-50%,-100%); -moz-transform: translate(-50%,-100%); -ms-transform: translate(-50%,-100%); transform: translate(-50%,-100%); } .interactive-map .marker-set .marker img { display: block; margin: 0; padding: 0; width: 100%; max-width: none; } .interactive-map .marker-set .marker.northland { top: 10%; left: 59%; } .interactive-map .marker-set .marker.auckland { top: 20%; left: 66%; } .interactive-map .marker-set .marker.waikato { top: 29%; left: 72%; } .interactive-map .marker-set .marker.bay-of-plenty { top: 30%; left: 83%; } .interactive-map .marker-set .marker.gisborne { top: 33%; left: 93%; } .interactive-map .marker-set .marker.hawkes-bay { top: 41%; left: 82%; } .interactive-map .marker-set .marker.manawatu-wanganui { top: 45%; left: 73%; } .interactive-map .marker-set .marker.taranaki { top: 39%; left: 62%; } .interactive-map .marker-set .marker.wellington { top: 54%; left: 71%; } .interactive-map .marker-set .marker.marlborough { top: 57%; left: 59%; } .interactive-map .marker-set .marker.nelson { top: 53%; left: 54.5%; } .interactive-map .marker-set .marker.tasman { top: 57%; left: 48%; } .interactive-map .marker-set .marker.west-coast { top: 67%; left: 34%; } .interactive-map .marker-set .marker.cantebury { top: 71%; left: 44%; } .interactive-map .marker-set .marker.otago { top: 87%; left: 27%; } .interactive-map .marker-set .marker.southland { top: 90%; left: 14%; } /* map content */ /* ----------- */ .interactive-map .map-content-set { height: 0; } .interactive-map .map-content-set .map-point { position: absolute; z-index: 10; background-color: #ffffff; border: solid 4px #cccccc; border: solid 0.4rem #cccccc; padding: 20px 10px 10px 10px; padding: 2rem 1rem 1rem 1rem; visibility: hidden; opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .interactive-map .map-content-set .map-point.active { visibility: visible; opacity: 1; } .interactive-map .map-content-set .map-point.north { top: 12%; left: 48%; bottom: auto; right: 2%; } .interactive-map .map-content-set .map-point.south { top: auto; left: 2%; bottom: 15%; right: 48%; } .interactive-map .map-content-set .map-point.north.columns1 { left: 18%; right: 2%; } .interactive-map .map-content-set .map-point.south.columns1 { left: 2%; right: 18%; } .interactive-map .map-content-set .map-point.north.columns2 { left: 0; right: 0; } .interactive-map .map-content-set .map-point.south.columns2 { left: 0; right: 0; } .interactive-map .map-content-set h3 { font-family: 'MuseoSans700'; font-size: 18px; font-size: 1.8rem; line-height: 1.38; } .interactive-map .map-content-set .map-point .close { position: absolute; top: 4px; top: 0.4rem; right: 4px; right: 0.4rem; color: #00ace5; line-height: 1; border: none; text-align: center; } .interactive-map .map-content-set .map-point .close:before { content: '\f057'; font-family: 'FontAwesome'; font-size: 18px; font-size: 1.8rem; line-height: 1; } /* map style */ /* --------- */ .map img { max-width: none; } /* Media Player Overrides */ main .mejs-overlay-loading span { background-image: url('/Shared/Images/MediaPlayer/loading.gif'); } main .mejs-overlay-button { background-image: url('/Shared/Images/MediaPlayer/bigplay.png'); } main .mejs-overlay-loading { background-image: url('/Shared/Images/MediaPlayer/background.png'); } main .mejs-container .mejs-controls { background-image: url('/Shared/Images/MediaPlayer/background.png'); } main .mejs-controls .mejs-button button { background-image: url('/Shared/Images/MediaPlayer/controls.png'); } main .mejs-controls .mejs-volume-button .mejs-volume-slider { background-image: url('/Shared/Images/MediaPlayer/background.png'); } main .mejs-controls .mejs-captions-button .mejs-captions-selector { background-image: url('/Shared/Images/MediaPlayer/background.png'); } main .mejs-captions-text { background-image: url('/Shared/Images/MediaPlayer/background.png'); } main .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { background-image: url('/Shared/Images/MediaPlayer/background.png'); } section.media { border-top: none; } /* Footnote */ .footNotes { font-size: 13px; font-size: 1.3rem; } /* share social links */ div.shareSocialLinks { border-top: 0.1rem solid #D4D9DC; border-top: 1px solid #D4D9DC; text-align: center; margin: 15px 0; margin: 1.5rem 0; } div.shareSocialLinks span.shareSocialLinksInner { padding: 10px 13px; padding: 1rem 1.3rem; background-color: #F3F3F3; display: inline-block; margin: 0 auto; } div.shareSocialLinks h4 { font-family: MuseoSans700, Verdana, Sans-Serif; font-size: 12px; font-size: 1.2rem; color: #33A5E6; float: left; text-transform: uppercase; margin: 2px 5px 0 0; margin: 0.2rem 0.5rem 0 0; } div.shareSocialLinks h4 + * { margin-top: 0 !important; } div.shareSocialLinks div { display: inline-block; } div.shareSocialLinks div.addthis_toolbox { float: left; } div.shareSocialLinks div.addthis_toolbox a { text-decoration: none; border: none; margin: 0 5px 0 0; margin: 0 0.5rem 0 0; padding: 0; } div.shareSocialLinks div.addthis_toolbox a span { background-image: url(/Shared/Images/icons-connect.png); background-repeat: no-repeat; width: 16px; height: 16px; } div.shareSocialLinks a.addthis_button_facebook span { background-position: 0 0; } div.shareSocialLinks a.addthis_button_twitter span { background-position: -16px 0; } div.shareSocialLinks a.addthis_button_linkedin span { background-position: -32px 0; } div.shareSocialLinks a.addthis_button_email span { background-position: -48px 0; } div.shareSocialLinks .addthis_default_style .at4-icon, div.shareSocialLinks .at4-icon { background-size: auto !important; } .comments .comments-results { margin: 20px 0 0; margin: 2rem 0 0; } .comments .comments-results ul { margin: 20px 0 0; margin: 2rem 0 0; padding: 0; } .comments .comments-results ul li { list-style-type: none; border-bottom: 0.1rem solid #d3d8db; margin: 10px 0 0; margin: 1rem 0 0; padding-bottom: 10px; padding-bottom: 1rem; } .comments .comments-results ul li:last-child { border-bottom: 0; } .comments .comments-results h4 { font-size: 18px; font-size: 1.8rem; } .comments .comments-results .info { font-size: 14px; font-size: 1.4rem; } .symbol-target { padding-top: 110px; margin-top: -110px; width: 1px; display: inline-block; } .provider-button { display: inline-block; height: 24px; height: 2.4rem; overflow: hidden; border: none; margin-right: 10px; margin-right: 1rem; margin-top: 10px; margin-top: 1rem; cursor: pointer; } .provider-button:hover, .provider-button:focus { border: none !important; color: #00ace5; } .provider-button:before { font-family: 'FontAwesome'; font-size: 18px; font-size: 1.8rem; line-height: 1; margin-right: 5px; margin-right: 0.5rem; } .provider-button.provider-facebook:before { content: '\f082'; } .provider-button.provider-google:before { content: '\f082'; } .provider-button.provider-linkedin:before { content: '\f08c'; } .provider-button.provider-twitter:before { content: '\f081'; } /* login */ /* ----- */ .login-additional { padding-top: 12px; padding-top: 1.2rem; } .login-additional .feature-item { border-top: 0; } /*************************************************/ /* broadband search area */ /* --------------------- */ #bb-search { font-family: 'MuseoSans300'; font-size: 24px; font-size: 2.4rem; color: #cccccc; } #bb-search form { padding: 0 30px; padding: 0 3rem; } #bb-search form > * { vertical-align: middle; } #bb-search form span { position: relative; display: inline-block; border: solid 1px #cccccc; border: solid 0.1rem #cccccc; border-radius: 0.4rem; margin-left: 8px; margin-left: 0.8rem; } #bb-search form span:before { content: '\f002'; position: absolute; z-index: 1; top: 10px; top: 1rem; left: 12px; left: 1.2rem; bottom: 0; font-family: 'FontAwesome'; font-size: 20px; font-size: 2rem; line-height: 1; color: #cccccc; } #bb-search form input { position: relative; z-index: 2; width: 604px; width: 60.4rem; border: none; background: transparent; padding: 6px 6px 6px 40px; padding: 0.6rem 0.6rem 0.6rem 4rem; margin-right: 64px; margin-right: 6.4rem; border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem; font-family: 'MuseoSans300'; font-size: 24px; font-size: 2.4rem; line-height: 1; color: #cccccc; } #bb-search form button { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: 64px; width: 6.4rem; height: auto; padding: 0; border: none; border-left: solid 1px #cccccc; border-left: solid 0.1rem #cccccc; border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem; background-color: #15202B; font-family: 'MuseoSans700'; font-size: 20px; font-size: 2rem; line-height: 1; color: #cccccc; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } #bb-search form input:focus { color: #ffffff; } #bb-search form button:hover, #bb-search form button:focus { color: #ffffff; } /* search drop down */ #bb-search-result-wrapper { visibility: hidden; opacity: 0; position: absolute; z-index: 20; top: 100%; left: -1px; left: -0.1rem; right: -1px; right: -0.1rem; margin-top: 3px; margin-top: 0.3rem; padding: 16px 12px 16px 40px; padding: 1.6rem 1.2rem 1.6rem 4rem; background-color: #15202B; border: solid 1px #cccccc; border: solid 0.1rem #cccccc; border-radius: 0.4rem; font-size: 18px; font-size: 1.8rem; color: #ffffff; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } #bb-search-result-wrapper h3 { font-family: 'MuseoSans700'; font-size: 16px; font-size: 1.6rem; color: #ffffff; text-transform: uppercase; } .display-results #bb-search-result-wrapper { visibility: visible; opacity: 1; } /* share price variation */ /* --------------------- */ #share-price-table { margin-top: 16px; margin-top: 1.6rem; } #share-price-table table { background-color: #ffffff; } #share-price-table > p { text-align: right; } #share-price-chart { background-color: #ffffff; } .share-price-tile table.data th div { padding: 0.3rem; font-size: 12px; font-size: 1.2rem; } .share-price-tile table.data td { padding: 0.3rem; font-size: 12px; font-size: 1.2rem; } .share-price-tile #share-price-table { margin-top: 0; } .share-price-tile #chart-container { height: 248px; } .highcharts-range-selector { height: 2.3rem; height: 23px !important; } /* High load form */ .highLowForm .utilityBox { background-color: #f9f9f9; border: 0.1rem solid #e2e0e0; } .highLowForm .utilityBoxBody { padding: 20px; padding: 2rem; } .highLowForm .utilityBoxBody .formPair .field input { } /*.highLowForm .addressOptions {display:none;}*/ .highLowForm .utilityBox strong { font-weight: normal; } .highLowForm .field { margin-top: 0 !important; margin-bottom: 10px; } .highLowForm .form-holder { padding: 0; } .highLowForm .form-holder form { border: none; padding: 0; } .highLowForm div.form-holder div.field strong.question { margin-bottom: 0px; } .highLowForm div.form-holder h3 { margin: 1rem 0 1.5rem 0; clear: both; } .highLowForm div.form-holder div.field strong.question, .highLowForm div.form-holder div.field p { font-size: 13px; } .highLowForm .formPair .field { width: 48%; float: left; margin-right: 15px; position: relative; } .highLowForm .formPair .field:last-child { float: left; margin-right: 0; } .highLowForm .formPair { width: 100%; border: 0px solid #000000; } .highLowForm .formTrio .field { width: 28%; float: left; margin-left: 2.5rem; margin-right: 2.5rem; } .highLowForm .formTrio .field:first-child { float: left; margin-left: 0; margin-right: 7px; } .highLowForm .formTrio .field:last-child { float: right; margin-left: 0; margin-right: 7px; } .highLowForm .formTrio { width: 100%; border: 0px solid #000000; } .highLowForm .datepickerFrom strong { display: block; } .highLowForm .datepickerFrom input, .highLowForm .datepickerFrom select { width: 55%; display: inline-block; } .highLowForm .datepickerTo strong { display: block; } .highLowForm .datepickerTo input, .highLowForm .datepickerTo select { width: 55%; display: inline-block; } .highLowForm .datepickerFrom strong { display: block; } .highLowForm form input[type="checkbox"] { width: auto; float: left; margin: 0 0.5rem 0 0; } .highLowForm form input.button { width: auto; } .highLowForm input:required, .highLowForm textarea:required { /* box-shadow:0 0 3px red;*/ } .highLowForm input:invalid, textarea:invalid { background-color: #f0dddd; } .errormessage { color: #f00; padding: 5px 0 1.5rem; } .emailMatchError { display: none; } .heightSmallError { display: none; } .highLowForm .addressOptions { background-color: #f5f5f5; border: 1px solid #ccc; display: none; padding: 15px; position: absolute; top: 42px; z-index: 2; } .highLowForm div.form-holder input.hasDatepicker { width: 70%; } .highLowForm div.form-holder .timeSelect { width: 75px; height: 27px; } /* Wialus network map */ /*********************/ #wivolo-map-wrapper { height: 66rem; height: 660px; width: 665px; border: 1px solid #CBCBCB; } #wivolo-map-wrapper .map-copyright { font-family: Arial,sans-serif; font-size: 11px; overflow: visible; padding: 2px; text-align: right; white-space: nowrap; } .wivolo-legend-item { font-size: 12px; padding-right: 30px; } #wivolo-location-result h3, #wivolo-location-result h4, #wivolo-sam h4 { color: #34A6E8; font-family: MuseoSans300, Verdana, sans-serif; font-weight: normal; margin: 0; } #wivolo-location-result { padding-top: 5px; font-size: 12px; margin-top: 2px; line-height: 1.45; } #wivolo-location-result ul { padding: 0; list-style-type: none; } #wivolo-location-result .column-container { padding-top: 5px; clear: both; } #wivolo-location-result .left-column { float: left; width: 21px; } #wivolo-location-result .right-column { float: left; margin-left: 21px; min-width: 200px; } #wivolo-location-result td { padding: 2px; } #wivolo-search #search-result { display: none; position: absolute; width: 400px; z-index: 102; } #wivolo-search #no-results, #wivolo-search #address-list { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #FFFFFF; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-color: -moz-use-text-color #CCCCCC #CCCCCC; border-image: none; border-right: 1px solid #CCCCCC; border-style: none solid solid; border-width: medium 1px 1px; } #wivolo-search #address-list { border: 0 none; border-spacing: 0; list-style-type: none; margin: 0; padding: 0; } #wivolo-search .address-list-li { border-bottom: 1px solid #DDDDDD; color: #666666; margin: 0; padding: 4px 15px 4px 4px; width: 380px; } #wivolo-search .address-list-hover { background-color: #DDDDDD; cursor: pointer; } #wivolo-search #no-results { color: #666666; padding: 3px; font-size: 11px; padding-left: 10px; } #wivolo-search #no-results-heading { margin-left: -10px; padding-left: 12px; color: #000000; font-size: 16px; height: 23px; background-color: #F9F9F9; border-bottom: 1px solid #E8E8E8; } #wivolo-search #no-result-msg { margin: 3px; } #wivolo-search #no-results ul { margin-left: 15px; } #wivolo-search #no-results ul li { font-size: 11px; padding: 1px; color: #666666; margin: 3px; } #wivolo-search #no-results, #wivolo-search .multiple-results, #wivolo-search #address-list { background-color: #FFF; border: 1px solid #CCCCCC; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-right-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-top: none; } .pac-container { font-family: Arial, sans-serif; } .pac-item { border-top: 1px solid #E6E6E6; color: #999999; cursor: default; font-size: 11px; line-height: 30px; overflow: hidden; padding: 0 4px; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .pac-item b { font-size: 13px; color: #000000; } #wivolo-layers ul { padding-left: 0; } #wivolo-layers ul.layers { padding-left: 0; margin-left: 5px; margin-right: 5px; } #wivolo-layers ul.layer-legend { padding-left: 12px; } #wivolo-layers li { list-style-type: none; } #wivolo-layers li.layer-li { padding: 5px; border: solid 1px #EEEEEE; } #wivolo-layers li.layer-li:hover { border: solid 1px #808080; cursor: pointer; } #wivolo-layers li.layer-li-active { background-color: #F6F6F6; } #wivolo-layers div.layer-tick { width: 10px; height: 10px; float: left; margin-top: 5px; margin-right: 3px; } #wivolo-layers li.layer-li div.layer-tick { background: url("/shared/images/dash.png") repeat scroll rgba(0, 0, 0, 0) !important; visibility: visible; } #wivolo-layers li.layer-li-active div.layer-tick { background: url("/shared/images/sprite-1-9.png") repeat scroll -46px -123px rgba(0, 0, 0, 0) !important; visibility: visible; } #wivolo-sam .sam-performance { border-color: #AAA; border-width: 0 0 1px 1px; border-style: solid; margin-top: 10px; font-size: 10px; margin-bottom: 10px; } #wivolo-sam .sam-performance td, #wivolo-sam .sam-performance th { border-style: solid; border-width: 1px 1px 0 0; border-color: #AAA; margin: 0; padding: 5px; } #wivolo-sam .sam-performance .col-sam { width: 50px; } #wivolo-sam .sam-performance .col-address { min-width: 300px; } #wivolo-sam .sam-fibre .col-speed { width: 100px; } #wivolo-sam .sam-copper .col-speed { width: 100px; } #wivolo-sam .sam-fibre .col-product { width: 150px; } #wivolo-sam .sam-copper .col-product { width: 25px; } #wivolo-sam .sam-copper .col-modem { width: 75px; } #wivolo-sam .col-distance { width: 50px; } * + .network-map { margin-top: 1.5rem; margin-top: 15px; } .network-map + * { margin-bottom: 1.5rem; margin-bottom: 15px; } .network-map { margin-bottom: 1.5rem; margin-bottom: 15px; } .network-map .wivolo-search-wrapper { background-color: #F9F9F9; padding: 2rem 2.5rem 1rem; padding: 20px 25px 10px; border: 0.1rem solid #E2E0E0; margin: 0 0 1rem 0; margin: 0 0 10px 0; } .network-map .wivolo-search-wrapper label { font-family: MuseoSans700, arial; font-size: 1.3rem; font-size: 13px; color: #415967; display: block; text-transform: uppercase; margin: 0 0 1rem 0; margin: 0 0 10px 0; } .network-map .wivolo-search-wrapper label strong { font-family: MuseoSans300, arial; font-size: 2.4rem; font-size: 24px; text-transform: none; } .network-map #wivolo-location-result-wrapper { display: none; } .network-map #wivolo-search { margin: 0; padding: 0; position: relative; height: 4.6rem; height: 46px; } .network-map #wivolo-search-input { border: 0.1rem solid #000; height: 4.6rem; height: 46px; font-family: MuseoSans300, arial; color: #425968; font-size: 2.4rem; font-size: 24px; width: 100%; margin-right: 0; position: static; border-radius: 0 7px 7px 0; background: url("/shared/images/map-bg-search.png") no-repeat scroll 10px 12px rgba(0, 0, 0, 0); background-color: #ffffff; padding: 0 6.3rem 0 4rem; padding: 0 63px 0 40px; float: none; vertical-align: middle; display: inline-block; } .network-map #wivolo-search-btn { background: url("/shared/images/map-btn-go.png") no-repeat scroll center center rgba(0, 0, 0, 0); width: 6.3rem; width: 63px; height: 4.6rem; height: 46px; border: none; position: absolute; right: 0; top: 0; left: auto; border-left: 0.1rem solid #000; display: none; } .network-map #wivolo-location-result .right-column { float: none; margin-left: 40px; margin-left: 4rem; max-width: none; } .network-map #wivolo-location-result { padding: 0; margin: 0; } .network-map #speed-dial { width: 64rem; width: 640px; height: 39rem; height: 390px; } svg .ts1 { fill: #444444; font-family: MuseoSans500; font-size: 12px; } svg .ts2 { fill: #231F20; font-family: MuseoSans500; font-size: 15px; } svg .ts3 { fill: #FFFFFF; font-family: MuseoSans700; font-size: 16px; } svg .ts6 { fill: #FFFFFF; font-family: MuseoSans700; font-size: 14px; } svg .ts4 { fill: #FFFFFF; font-family: MuseoSans700; font-size: 46px; } svg .ts5 { fill: #FFFFFF; font-family: MuseoSans300; font-size: 24px; } #speed-table-wrapper { position: relative; margin-top: 30px; } #speed-table-viewport { width: 100%; overflow: hidden; position: relative; } .speed-table { width: 1435px; border-collapse: collapse; position: relative; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } .speed-table td { width: 205px; } .speed-table-outer-bg { text-align: center; padding: 20px; color: #fff; border-top: 7px solid #c4d3dd; } .speed-table-middle-bg { text-align: center; padding: 20px; color: #fff; } .speed-table-inner-bg { text-align: center; padding: 20px; color: #fff; border-bottom: 3px solid #c4d3dd; } .speed-table-outer-bg td, .speed-table-middle-bg td, .speed-table-inner-bg td { font-family: MuseoSans700; border-right: 1px solid #c4d3dd; } .speed-table-info td { padding: 14px; border-right: 1px solid #c4d3dd; border-bottom: 1px solid #c4d3dd; background-color: #fff; } .speed-table-outer-bg td:last-child, .speed-table-middle-bg td:last-child, .speed-table-inner-bg td:last-child, .speed-table-info td:last-child { border-right: 0; } .speed-table-outer-bg td { font-size: 19px; } .speed-table-middle-bg td { font-size: 17px; color: #333333; border-right: 0; } .speed-table-inner-bg td { font-size: 16px; color: #333333; } .speed-table-outer-bg td span, .speed-table-middle-bg td span, .speed-table-inner-bg td span { padding: 14px; display: block; position: relative; } .speed-table-outer-bg td.center, .speed-table-middle-bg td.center { border-right: 0; } .speed-table-outer-bg td.center span, .speed-table-middle-bg td.center span { left: 50%; } .speed-table-postion-1 .speed-table { left: 0; } .speed-table-postion-2 .speed-table { left: -190px; } .speed-table-postion-3 .speed-table { left: -395px; } .speed-table-postion-4 .speed-table { left: -600px; } .speed-table-postion-5 .speed-table { left: -805px; } .speed-table-postion-6 .speed-table { left: -1010px; } .speed-table-postion-7 .speed-table { left: -1215px; } .speed-table-postion-8 .speed-table { left: -1420px; } .speed-table-postion-9 .speed-table { left: -1625px; } .speed-table-postion-10 .speed-table { left: -1830px; } .speed-table-postion-11 .speed-table { left: -2035px; } .speed-table-postion-12 .speed-table { left: -2240px; } .speed-table-postion-13 .speed-table { left: -2445px; } .speed-table-postion-14 .speed-table { left: -2650px; } .speed-table-postion-15 .speed-table { left: -2855px; } .speed-table-postion-16 .speed-table { left: -3060px; } .speed-table-postion-17 .speed-table { left: -3265px; } .speed-table-postion-18 .speed-table { left: -3470px; } .speed-table-postion-19 .speed-table { left: -3675px; } .speed-table-postion-20 .speed-table { left: -3880px; } .speed-table-viewport-button { position: absolute; width: 50px; height: 50px; top: 138px; background-color: rgba(0,193,165,0.5); z-index: 2; cursor: pointer; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } .speed-table-viewport-button:hover { background-color: rgba(0,193,165,1); } .speed-table-viewport-button span { display: none; } #speed-table-viewport-previous { left: -25px; background-image: url('/images/dial-left-arrow.png'); } #speed-table-viewport-next { right: -25px; background-image: url('/images/dial-right-arrow.png'); } #dial-intro { font-family: MuseoSans700; font-size: 13px; margin: 30px 0 0; position: relative; } #dial-result { font-family: MuseoSans700; text-align: center; font-size: 20px; margin: 20px 0; } #dial-disclaimer { text-align: right; color: #666; font-size: 12px; } .dial-zoom { background-image: url('/images/dial-zoom.png'); position: absolute; right: 0; background-repeat: no-repeat; background-position: right 2px; padding: 15px 33px 15px 0; top: -14px; text-align: right; text-transform: uppercase; cursor: pointer; } .dial-show-dial .dial-show-table { display: none; } .dial-show-dial .dial-show-dial { display: block; } .dial-show-table .dial-show-table { display: block; } .dial-show-table .dial-show-dial { display: none; } /* Hide a stray div */ .network-map #wivolo-location-result div:nth-child(3) { display: none; } /* hide first data row, not needed to be displayed */ .network-map #wivolo-location-result .column-container:nth-child(1) { display: none; } .network-map #wivolo-location-result .column-container { display: block; margin-top: 1.5rem; margin-top: 15px; } .network-map #wivolo-location-result h3 { font-family: MuseoSans700, arial; font-size: 1.8rem; font-size: 18px; color: #333333; } .network-map #wivolo-location-result h4 { font-family: MuseoSans700, arial; font-size: 1.4rem; font-size: 14px; text-transform: uppercase; color: #333333; } .network-map #wivolo-location-result ul { margin: 0; padding: 0; margin-bottom: 1rem; margin-bottom: 10px; } .network-map #wivolo-location-result ul li { list-style-type: none; font-family: MuseoSans500, arial; color: #333333; } .network-map .area-map { margin-left: 1rem; } .network-map .area-legend { float: left; width: 220px; height: 556px; background-color: #f9f9f9; } .network-map .area-legend h2 { font-family: MuseoSans700, arial; font-size: 1.3rem; font-size: 13px; color: #3F5966; font-weight: normal; text-transform: uppercase; background-color: #C4D3DD; margin: 0; padding: 1rem; padding: 10px; position: relative; } .network-map .area-legend h2 .bullet { width: 9px; height: 20px; background: url("/shared/images/map-layers-bullet.png") no-repeat scroll center center rgba(0, 0, 0, 0); position: absolute; right: -9px; top: 8px; } .network-map .area-legend h2 .toggle { position: absolute; right: 1rem; right: 10px; display: none; text-transform: none; cursor: pointer; } .network-map .area-legend h2 .toggle-show:after { content: "Show >"; } .network-map .area-legend h2 .toggle-hide:after { content: "< Hide"; } .network-map .area-legend h2 + * { margin-top: 0 !important; } .network-map #wivolo-layers { margin-top: 0; } .network-map #wivolo-layers ul.layers { margin: 0; background-color: #f9f9f9; } .network-map .area-map { float: left; } .network-map .area-map, .network-map #wivolo-map-wrapper { max-width: 50rem; max-width: 500px; } .document-content .network-map .area-map, .document-content .network-map #wivolo-map-wrapper { max-width: 71rem; max-width: 710px; } .document-content .network-map #wivolo-map-wrapper { width: 71rem; width: 710px; } .network-map img, .network-map object, .network-map embed { max-width: none; } .heatmap #map-canvas { height: 500px; margin: 0; padding: 0; margin-top: 30px; } .heatmap .form .field label { display: inline-block; margin-left: 20px; } .heatmap .form .field #heatmap-range-01, .heatmap .form .field #heatmap-range-02 { width: 100px; display: inline-block; } /* Whispir */ /* --------- */ .load-icon-wrapper { text-align: center; } .load-icon-wrapper .load-icon { display: none; } .load-icon-wrapper.loading .load-icon { display: block; } .load-icon { font-size: 100px; color: #ddd; display: inline-block; margin-top: 30px; margin-bottom: 30px; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } .load-icon:before { content: "\f021"; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } #whispir-message table img { border: 0; } #whispir-message table tr td { border: 0; } #whispir-message div.stepGuide { height: auto; } #whispir-message div.stepGuide div.content { height: auto; } #whispir-message div.stepGuide div.page { height: auto; } #load-whispir-wrapper { display: none; } .whispir-searchitem { margin-bottom: 15px; } .whispir-searchitem div { margin-top: 10px; } #last-updated { float: right; font-style: italic; } .whispir-page.wrapper h3 { padding-bottom: 10px; } .whispir-page.wrapper .form-holder { padding-bottom: 10px; } /* Step guide */ div.viewStepByStep { margin: 0 0 15px 0; } div.viewStepByStep a { border: none; display: block; width: 134px; height: 48px; overflow: hidden; background-image: url("/shared/images/view-step-by-step.gif"); background-repeat: no-repeat; } div.viewStepByStep a:hover { background-position: 0 -48px; } div.stepGuideContainer { } div.stepGuide { position: absolute; z-index: 6000; display: none; width: 766px; height: 900px; overflow: hidden; margin: 0 auto 20px auto; background-color: #798994; box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); } div.stepGuide div.index { float: left; width: 60px; } div.stepGuide div.index a { border: none; display: block; width: 60px; height: 40px; margin: 0 0 2px 0; background-color: #425968; color: #788A94; font-family: MuseoSans300,verdana,arial; font-size: 30px; text-align: center; line-height: 40px; cursor: pointer; } div#container div.stepGuide div.index a:hover, div.stepGuide div.index a:hover { background-color: #3CA4DB; color: #ffffff; } div.stepGuide div.index a.active { background-color: #3CA4DB; color: #ffffff; } div.stepGuide div.content { width: 706px; height: 773px; background-color: #ffffff; float: left; } div.stepGuide div.content, div.stepGuide div.banner { box-shadow: -4px 1px 6px rgba(0, 0, 0, 0.22); -moz-box-shadow: -4px 1px 6px rgba(0, 0, 0, 0.22); -webkit-box-shadow: -4px 1px 6px rgba(0, 0, 0, 0.22); } div.stepGuide div.stepGuideBanner { background-color: #ffffff; margin: 0 0 0 60px; padding: 48px 0 0 0; position: relative; } div.stepGuide div.stepGuideBanner div.bannerInner { background-color: #425968; padding: 5px 0; } div.stepGuide div.stepGuideBanner p { margin: 0; text-transform: uppercase; text-align: center; font-family: MuseoSans500,verdana,arial; color: #A1ACB4; font-size: 14px; } div.stepGuide div.stepGuideBanner a.btnClose { position: absolute; top: 12px; right: 10px; } div#content div.stepGuide div.stepGuideBanner h2, div.stepGuide div.stepGuideBanner h2 { color: #ffffff; text-align: center; border-bottom: 1px solid #A1ACB4; padding: 0 0 5px 0; margin: 0 0 5px 0; font-family: MuseoSans300,verdana,arial; font-size: 30px; font-weight: normal; } div.stepGuide div.page { display: none; padding: 15px 0; height: 743px; } div.stepGuide div.page h1, div.stepGuide div.page h2, div.stepGuide div.page h3, div.stepGuide div.page h4 { margin: 0 0 10px 0; } div.stepGuide div.page h2 { font-family: MuseoSans300,verdana,arial; font-size: 48px; font-weight: normal; } div.stepGuide div.page h3 { font-size: 30px; } div.stepGuide div.page h4 { font-size: 22px; } div.stepGuide div.page section { padding: 0 40px; } div.stepGuide div.pages .default { display: block; } div.stepGuide div.pages .active { } div#customOverlay { display: none; background-color: #000000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } div#customOverlay #customOverlayLoader { position: absolute; top: 40%; left: 50%; } div.stepGuide section.introText { font-family: MuseoSans300,verdana,arial; font-size: 36px; color: #666666; line-height: 1.2em; } div.stepGuide div.page section.image { padding: 0; } div.stepGuide div.page section.image img { border: none; } div.stepGuide div.page section.image a { border: none; text-decoration: none; } div.stepGuide section.image div.imageTitle { margin: 0; padding: 10px; background-color: #E9FAF8; color: #666666; text-align: center; font-family: MuseoSans500,verdana,arial; font-size: 14px; } div.stepGuide div.doubleImage div.image { width: 350px; overflow: hidden; float: left; background-color: #dddddd; } div.stepGuide div.doubleImage div.image1 { margin: 0 6px 0 0; } div.stepGuide div.tripleImage div.image { width: 230px; overflow: hidden; float: left; } div.stepGuide div.tripleImage div.image1, div.stepGuide div.tripleImage div.image2 { margin: 0 8px 0 0; } #container div.stepGuide section.tiles { padding: 0; margin: 10px 10px 0 20px; } div.stepGuide section.tiles h3 { font-family: MuseoSans300,verdana,arial; font-size: 30px; font-weight: normal; color: #666666; margin: 0 0 10px 0; } div.stepGuide div.tileItem { border: 1px solid #E2E0E0; width: 218px; overflow: hidden; margin: 0 5px 5px 0; float: left; font-size: 13px; } div.stepGuide div.tileItemInner { padding: 10px; } div.stepGuide div.tileItemImage { margin: 0 0 10px 0; height: 130px; overflow: hidden; } div.stepGuide div.tileItemImage img { border: 2px solid #E1DFDF; border: none; } div.stepGuide div.tileItemImage a { border: none; text-decoration: none; } div.stepGuide div.tileItem h4 { margin: 0 0 10px 0; font-size: 13px; } div.stepGuide div.tileItem a { font-family: MuseoSans700,verdana,arial; font-size: 13px; color: #33A5E5; border: none; } a.btnClose { display: block; border: none; text-decoration: none; width: 24px; height: 24px; background-image: url("/shared/images/stepguide-close.png"); background-repeat: no-repeat; } div.stepGuide, div.video { box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.92); } a.btnPrint { display: block; border: none; text-decoration: none; width: 24px; height: 24px; background-image: url("/shared/images/publication-icons.png"); background-repeat: no-repeat; position: absolute; top: 55px; right: 6px; background-position: 0 -125px; } /* Speed dial info */ .speed-dial-info { } .speed-dial-info.compacted { } .speed-dial-info.fibre { border-left: 5px solid #00adee; } .speed-dial-info.copper { border-left: 5px solid #f28d78; } .speed-dial-info-header { position: relative; } .speed-dial-info-trigger { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; } .speed-dial-info-header h3 { color: #fff; padding: 10px 30px; } .speed-dial-info-header span { position: absolute; width: 46px; height: 100%; right: 0; top: 0; margin: 0 !important; padding: 0 !important; cursor: pointer; background-image: url(/images/speed-dial-toggle.png); background-position: top right; } .speed-dial-info.compacted .speed-dial-info-body { display: none; } .speed-dial-info.compacted .speed-dial-info-header h3 { background-color: #f8f8f8; color: #00394F; border-bottom: 5px solid #fff; } .speed-dial-info.compacted .speed-dial-info-header span { border-bottom: 5px solid #fff; background-image: url(/images/speed-dial-toggle.png); background-position: top left; } .speed-dial-info:last-child .speed-dial-info-header h3 { border-bottom: 0; } .speed-dial-info:last-child .speed-dial-info-header span { border-bottom: 0; } .speed-dial-info-body { padding-bottom: 5px; } .speed-dial-info-body .speed { font-size: 17px; color: #13212C; } .speed-dial-info-body .speed span { color: #00adee; text-transform: uppercase; } .speed-dial-info-content { padding: 20px 30px; float: left; width: 500px; } .speed-dial-info-content hr { border: 0; border-bottom: 1px dotted #13212C; margin: 10px 0 5px !important; margin: 1rem 0 0.5rem !important; } .speed-dial-info-content h4 { color: #00adee; text-transform: uppercase; } .speed-dial-info-image { float: left; width: 295px; position: relative; } .speed-dial-info-link { position: absolute; left: 50%; width: 150px; margin-left: -70px; bottom: 20px; background-color: #38AF8C; border-radius: 7px; text-align: center; color: #fff; padding: 5px 10px; } .speed-dial-intro { text-align: center; } .speed-dial-intro h1 { text-transform: uppercase; margin-bottom: 0.7rem; font-family: 'MuseoSans700'; } .speed-dial-intro p { font-size: 18px; } .speed-dial-intro .blue { color: #00aced; margin: 28px 0 28px; } .speed-dial-template .speeddial-intro { padding: 0; } .speed-dial-template .speeddial-fullwidth { padding: 0; } .speed-dial-template #main-page-area { padding: 27px 100px 50px 100px; padding: 2.7rem 10rem 5rem 10rem; } .wrapper.speeddial-fullwidth { margin: 0 0; width: 100%; } .speeddial-fullwidth { position: relative; } #bb-results-list { z-index: 20; position: absolute; top: 242px; left: 50%; margin-left: -410px; width: 820px; background-color: #fff; border-radius: 7px; box-shadow: rgba(0,0,0,0.4) 0 0 10px; padding: 20px 20px 0; } #speed-dial-map-wrapper-outer { width: 100%; height: 705px; background-color: #eee; } #speed-dial-map-wrapper { width: 100%; height: 100%; } #speed-dial-map-wrapper-outer.no-address #speed-dial-map-wrapper { opacity: 0.1; } #speed-dial-map-wrapper-outer.no-result { height: 250px; } .speed-dial-wrapper-info { margin-bottom: 40px; } .speed-dial-wrapper-info h1 { font-size: 27px; text-align: center; color: #00394F; padding-bottom: 25px; text-transform: uppercase; font-family: 'MuseoSans700'; } .bb-search-form-input { z-index: 20; position: absolute; top: 35px; left: 50%; margin-left: -335px; width: 670px; border: 2px solid #00aced; border-radius: 7px; padding: 5px 10px 5px 40px; background-color: #fff; } .bb-search-form-input:before { content: '\f002'; position: absolute; z-index: 1; top: 7px; top: 0.7rem; left: 12px; left: 1.2rem; bottom: 0; font-family: 'FontAwesome'; font-size: 27px; font-size: 2.7rem; line-height: 1; color: #00aced; } .bb-search-form-input input { font-family: 'MuseoSans500'; font-size: 18px; width: 100%; border: 0; } .bb-results-list-item { width: 50%; float: left; text-align: center; position: relative; } .bb-results-list-item.no-service { font-family: 'MuseoSans500'; font-size: 17px; color: #00aced; } .bb-results-list-item.no-service img { padding: 15px 0 10px; } .bb-results-list-item.no-service p { padding: 0 60px; } .bb-results-list-item h4 { font-size: 27px; text-transform: uppercase; font-family: 'MuseoSans300'; padding: 10px 0 10px; } .bb-results-list-item .bb-results-list-item-image img { width: 340px; } .bb-results-list-item .bb-results-list-item-speed-wrapper { position: absolute; left: 50%; width: 200px; margin-left: -100px; text-align: center; top: 185px; line-height: 18px; font-weight: bold; font-size: 11px; color: #fff; } .bb-results-list-item .bb-results-list-item-speed-wrapper.vdsl { position: absolute; left: 50%; width: 110px; margin-left: -52px; text-align: center; top: 215px; line-height: 15px; font-weight: bold; font-size: 38px; color: #fff; } .bb-results-list-item .bb-results-list-item-speed-wrapper.vdsl a { font-size: 15px; display: block; margin-top: 10px; width: 80px; margin-left: 14px; color: #fff; border-bottom: dotted 0.1rem #fff; } .bb-results-list-item .bb-results-list-item-speed { font-size: 50px; padding: 12px 0 15px; } .bb-results-list-item .bb-results-list-item-unit { font-size: 20px; } #speed-dial-upgrade-message-wrapper { } #speed-dial-upgrade-message { margin: 0 auto; padding: 25px 0 0; } #speed-dial-upgrade-message h1 { font-size: 27px; text-align: center; padding: 0; text-transform: uppercase; font-family: 'MuseoSans700'; } .speed-dial-upgrade-message-container { background-color: #fff; border-radius: 7px; padding: 0 10px 0; border: 1px solid #00aced; } .speed-dial-upgrade-message-container.no-link { background-image: none; } .d-table { display: table; } .d-table-row { display: table-row; } .d-table-cell { display: table-cell; } .d-table-cell-50 { width: 50%; padding: 10px 10px 20px; vertical-align: middle; } .speed-dial-upgrade-message-messages { } .speed-dial-upgrade-message-message { display: table; margin: 15px 0; } .speed-dial-upgrade-message-message div { display: table-cell; vertical-align: middle; } .speed-dial-upgrade-message-message span.fibre { background-image: url('/images/sd-tick.png'); background-size: cover; width: 20px; height: 20px; background-repeat: no-repeat; display: block; margin-right: 10px; } .speed-dial-upgrade-message-message span.copper { background-image: url('/images/sd-tick2.png'); background-size: cover; width: 20px; height: 20px; background-repeat: no-repeat; display: block; margin-right: 10px; } .speed-dial-upgrade-message-message div.fibre { color: #00aced; font-size: 13px; line-height: 16px; font-family: 'MuseoSans500'; } .speed-dial-upgrade-message-message div.copper { font-size: 12px; line-height: 16px; font-family: 'MuseoSans500'; } .speed-dial-upgrade-message-button { vertical-align: middle; width: 215px; margin: 0 auto; font-family: 'MuseoSans500'; font-size: 12px; } .speed-dial-upgrade-message-button-link { margin: 0 0 10px 0; background-color: #38AF8C; border-radius: 7px; text-align: center; color: #fff; padding: 10px 20px; display: block; } .speedinfo { font-size: 12px; } .no-service { margin-bottom: 15px; } .collapsible-wrapper { margin: 15px 0; } .collapsible-wrapper-header, .wrapper-header { background-color: #EBF7FB; position: relative; } .collapsible-wrapper-header-trigger { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; } .collapsible-wrapper-header:before { content: ''; position: absolute; right: 15px; top: 12px; background-image: url(/images/speed-dial-toggle2.png); background-position: top left; background-repeat: no-repeat; width: 18px; height: 100px; } .collapsible-wrapper.collapsed .collapsible-wrapper-header:before { background-position: top right; } .collapsible-wrapper-header h2, .wrapper-header h2 { color: #00394F; font-size: 17px; padding: 12px 20px; } .collapsible-wrapper-header h2 { cursor: pointer; } .collapsible-wrapper-body { padding: 20px; } .collapsible-wrapper.collapsed .collapsible-wrapper-body { display: none; } .refineAddresses { list-style: none outside; margin: 10px 0; max-height: 300px; overflow-y: scroll; } .refineAddresses li { border-top: 1px dotted #ccc; cursor: pointer; margin: 0; padding: 10px 15px; } .refineAddresses li:hover { background-color: #00aced; color: #fff; } .refineAddresses li.active { background-color: #00aced; color: #fff; } /* Helper classes */ /******************/ .cf { clear: both; }