@charset "utf-8";
/* RESET / STANDARDISE */
* { margin: 0; padding: 0; text-decoration: none; border-radius: 0; border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none }
*:not(#key-list):not(#clear-filters):not(#up-box):not(.downloads-site):not(#sub-nav):not(.q-and-a-a):not(#link-blocks):not(.hidden):not(.SKFormTextBox) { transition: 0.3s; }
*:not(label):after { transition: 0.3s }
/* FONTS */
/*
REGULAR: font-family:'Frutiger LT W01_55 Roma1475738';
LIGHT: font-family:'Frutiger LT W01_45 Ligh1475730';
BOLD: font-family:'Frutiger LT W01_65 Bold1475746';
REGULAR ITALIC: font-family:'Frutiger LT W01_56 Italic';
*/
/* FAMILY */
body, .home-box-inner h2, .home-box-inner-full h2, .home-news-events-header h2, #key-filter h3, button, input, .split-downloads h4, th, textarea, select { font-family: 'Frutiger LT W01_45 Ligh1475730', Arial, Helvetica, sans-serif }
h1, h2, h3, h4, h5, strong, dt, .header-hr, .newsarticletitle a { font-family: 'Frutiger LT W01_65 Bold1475746', Arial, Helvetica, sans-serif }
/* SIZE */
html { font-size: 62.5% }
h1 { font-size: 5rem }
#page-heading h2 { font-size: 3.2rem; }
#body-copy h3, #link-blocks h3, .newsarticletitle a { font-size: 2.8rem }
#key-box h2, #body-copy h4, #body-copy h5, #results h3, #body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { font-size: 2.2rem }
.home-box-inner h2, .home-box-inner-full h2, .home-news-events-header h2 { font-weight: 400; text-align: center; text-transform: uppercase; }
.home-box-inner p, .home-box-inner-full p, .home-news-events-copy p { padding-bottom: 20px; }
#menu li, #sub-menu li, #search input[type="search"] { font-size: 2rem }
p, li:not(.downloadbody), #key-filter h3, .download-link-title, .split-downloads h4, #nav-column-expander, .SKFormRow span, label, input, select, textarea, dl, table, table p, table li:not(.downloadbody) { font-size: 1.6rem }
#copyright p, #clear-filters, .downloadSize, .download-type { font-size: 1.4rem }
button.filter-button, .filter-dummy { font-size: 1.2rem }
#open-search { font-size: 0.5rem }
/* WEIGHT (MAY NEED TO BE FORCED FOR HEADINGS) */
#key-filter h3, .split-downloads h4, th { font-weight: normal }
#sub-menu:before { font-size: 3.0rem }
.date-day { font-size: 3.2rem; }
.date-month { font-size: 2.0rem; text-transform: uppercase; }
.date-year { font-size: 1.6rem; }
.header-dbop, .header-hr { display: block; }
.header-dbop { font-size: 2.2rem; padding-bottom: 0; }
.header-hr { font-size: 6.4rem; height: 54px; line-height: 54px; }
/* BACKGROUND IMAGES */
/* URL */
header { background-image: url(/images/hr/images/hero-bg-3349x1009.jpg) }
#home-nav a:before { background-image: url(/images/layout/images/otov/otov-sprite.png) }
/* SIZE */
header { background-size: cover }
#home-nav a:before { background-size: 240px 60px } /* Size of "otov-sprite.png" / 2 - update if size of image changes */
/* POSITION */
header { background-position: center center }
#home-link-contacts:before { background-position: 0 0 }
#home-link-structures:before { background-position: -60px 0 }
#home-link-maps:before { background-position: -120px 0 }
#home-link-strategy:before { background-position: -180px 0 }
/* LAYERING */
#burger, #open-search { z-index: 20000 }
#main-nav { z-index: 10000 }
#search-wrapper { z-index: 9999 }
#down-box, #up-box { z-index: 1000 }
#home-nav a, #key-box a, #menu a, #search input[type="submit"], #sub-nav a, #results h3 a { z-index: 3 }
.home-link-line:after, .key-link-line:after, #menu li:after, .sub-nav-link-line:after, #results h3:after { z-index: 2 }
.home-link-line:before, .key-link-line:before, #menu li:before, #results h3:before { z-index: 1 }
/* "IMAGE REPLACEMENT */
#cta-main-text, #down, #search input[type="submit"], #up, .type-colon, .SKFEPageNavigatorNext a, .SKFEPageNavigatorLast a, .SKFEPageNavigatorFirst a, .SKFEPageNavigatorPrevious a { text-indent: 100%; overflow: hidden; white-space: nowrap }
/* CLEAR FLOATS */
.SKFEPageNavigator ul:after { content: ""; display: block; clear: both }
/* SHADOWS ON BUTTONS AND LINKS (AND A COUPLE OF OTHER THINGS */
#intro a, #home-video iframe, .filter-button, #down, #burger-inner, .intranet-link, .search-button, #up, .download-type:before, .download-expander, .page-link, #body-copy input[type="submit"], #body-copy input[type="button"], #home-page-links ul.home-links li a, .home-box-inner ul li a, .home-box-inner-full ul li a, #home-box-video, .video-box, .video-body, .home-news-events-inner ul li a, #print-button, .post-it {
/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] */
-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
-o-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2)
}
#intro a:hover, .intranet-link:hover, #search-wrapper .search-button:hover, .search-button:hover, .downloadlink:hover .download-type:before, .page-link:hover, #body-copy input[type="submit"]:hover, #home-page-links ul.home-links li a:hover, #burger-inner:hover, .home-box-inner ul li a:hover, .home-box-inner-full ul li a:hover, #home-box-video:hover, .video-box:hover, .video-body:hover, .home-news-events-inner ul li a:hover, #print-button:hover {
-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
-o-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4)
}
.home-news-events-copy ul li .blog-link-line a.read-more-link, .home-news-events-copy ul li .blog-link-line a.read-more-link:hover, .home-box-blog ul li a, .home-box-blog ul li a:hover {
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
/* DEFAULT SELECTORS */
html, body { height: 100% }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%
}
body { /* background-color: #e8edee; */ background-color: #fff; color: #425563 }
header { color: #005eb8 }
ul > li { list-style: none }
button, input[type="submit"], input[type="button"] { cursor: pointer }
input[type="radio"], input[type="checkbox"] { position: fixed; top: -100px; left: -100px }
table { margin: 30px 0 0; border-collapse: collapse }
table ul li { padding: 0 0 0 20px; position: relative }
table ul li:not(:last-child) { margin: 0 0 10px }
th, td { padding: 10px; vertical-align: top; text-align: left; border-bottom: 2px solid #fff; border-left: 2px solid #fff }
td { background-color: #e8edee }
th { color: #fff; background-color: #ae2573 }
footer { background-color: #e8edee; padding: 0 20px 80px }
dl, dt { padding: 10px 0 0 }
dd { padding: 5px 0 0 25px }
/* BESPOKE SELECTORS */
#intro { padding: 40px 20px }
#intro p, .downloadhead p { padding: 15px 0 20px }
#intro a, .intranet-link { padding: 15px 20px; display: table; color: #005eb8; border-radius: 10px; background-color: #fff }
#intro a:hover, .intranet-link { color: #0072ce }
#intro a:before { content: "Find out more" }
#header-home .h1-line { display: block }
#header-inner h1.header-home, #header-inner h1.header-lower { font-family: 'Frutiger LT W01_45 Ligh1475730', Arial, Helvetica, sans-serif; font-weight: 400; position: relative; text-align: center; text-transform: uppercase; }
#header-inner h1.header-home { padding: 164px 20px 68px 20px; }
#header-inner h1.header-lower { padding: 40px 20px; font-size: 3.2rem; line-height: 40px; }
#header-inner h1.header-home:before { background-image: url(/images/hr/images/icon-hr.svg); background-position: top center; background-repeat: no-repeat; background-size: 90px 106px; content: ""; height: 106px; left: calc(50% - 45px); position: absolute; top: 50px; width: 90px; }
.header-lower { background-image: url(/images/hr/images/icon-hr.svg); background-position: center 22px; background-repeat: no-repeat; background-size: 90px 106px; display: block; height: 106px; left: calc(50% - 45px); padding: 20px 0 26px; position: relative; top: 0; width: 90px; }
#intranets { margin: 0 0 10px }
#intranets li { margin: 0 10px 10px 0; display: inline-block }
#menu li, #menu a, #sub-menu li, #sub-menu a { display: table; position: relative }
#menu li, #sub-menu li { margin: 30px 0 0 }
#menu li:before, #menu li:after, #sub-menu li:before, #sub-menu li:after { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; transition: width .3s ease; -webkit-transition: width .3s ease; }
#menu li:before, #sub-menu li:before { background-color: #41b6e6; opacity: 0.5; width: 100%; }
#menu li:after, #sub-menu li:after { background-color: #fff; width: 0; }
#menu li:hover:after, #sub-menu li:hover:after { background-color: #fff; width: 100%; }
#menu a, #sub-menu a { padding: 0 5px 12px; color: #fff }
#sub-menu:before { color: #fff; content: "See also"; display: block; font-weight: 400; line-height: 34px; margin-top: 90px; padding-bottom: 10px; text-transform: uppercase; }
#cta-main-text { width: 0; height: 0; display: block }
#home-video-wrapper { width: calc(100% - 40px); margin: auto }
#home-video { width: 100%; height: 0; margin: auto; padding: 56.25% 0 0; position: relative }
#home-video:before { content: ""; width: calc(100% + 40px); height: 33.33%; display: block; position: absolute; bottom: 0; left: -20px; background-color: #fff }
#home-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0 }
#logo { width: 132px; padding: 20px 0 0 20px }
#logo img { width: 100%; max-width: 100% }
#burger, #burger-inner, #burger-parts, #burger-mid, #burger-parts:before, #burger-parts:after { display: block }
@-moz-keyframes burger-bounce {
0% { top: 5px; opacity: 0 }
30% { top: 15px; opacity: 1 }
55% { top: 8px }
75% { top: 15px }
90% { top: 12px }
100% { top: 15px }
}
@-webkit-keyframes burger-bounce {
0% { top: 5px; opacity: 0 }
30% { top: 15px; opacity: 1 }
55% { top: 8px }
75% { top: 15px }
90% { top: 12px }
100% { top: 15px }
}
@keyframes burger-bounce {
0% { top: 5px; opacity: 0 }
30% { top: 15px; opacity: 1 }
55% { top: 8px }
75% { top: 15px }
90% { top: 12px }
100% { top: 15px }
}
#burger { right: 20px; top: 20px; }
#burger, #open-search { width: 40px; height: 50px; position: fixed; background-color: transparent;
/* [NAME] [DURATION] [TIMING FUNCTION] [DELAY (OPTIONAL - LEAVE BLANK IF 0)] [ITERATION COUNT] [DIRECTION] [FILL MODE] */
-webkit-animation: burger-bounce 1s 0.6s linear 1 normal both;
-moz-animation: burger-bounce 1s 0.6s linear 1 normal both;
animation: burger-bounce 1s 0.6s linear 1 normal both }
#burger-parts, #burger-inner, #burger-mid, #burger-parts:before, #burger-parts:after { position: absolute }
#burger-inner { width: 40px; height: 40px; bottom: 5px; border-radius: 20px; background-color: #00a499 }
#burger-mid, #burger-parts:before, #burger-parts:after { width: 20px; height: 4px; left: 0; background-color: #fff }
#burger-parts { width: 20px; height: 20px; top: 10px; left: 10px }
#burger-parts:before, #burger-parts:after { content: "" }
#burger-mid { top: 8px }
#burger-parts:before { top: 0 }
#burger-parts:after { bottom: 0 }
.burger-open #burger-inner, .search-open .search-button { background-color: #da291c !important }
.burger-open #burger-parts { width: 24px; height: 24px; top: 8px; left: 8px }
.burger-open #burger-parts:before, .burger-open #burger-parts:after { width: 24px; top: 10px }
.burger-open #burger-parts:before { transform: rotate(45deg) }
.burger-open #burger-parts:after { bottom: auto; transform: rotate(-45deg) }
.burger-open #burger-mid { width: 0; left: 20px }
#main-nav { width: calc(100% - 40px); min-height: calc(100% - 130px); padding: 80px 20px 50px; position: fixed; top: 0; left: 100%; background-color: #0072ce; }
#main-nav.nav-open { left: 0 }
#home-nav { padding: 10px 0 50px; text-align: center; border-bottom: 2px solid #e8edee }
#home-nav li, .home-link-line, #home-nav a { display: table }
#home-nav li { display: table; margin: 40px auto 0 }
.home-link-line { position: relative }
.home-link-line:before, .home-link-line:after, .key-link-line:before, .key-link-line:after, #clear-filters:before, #clear-filters:after, #menu li:before, #menu li:after, #sub-menu li:before, #sub-menu li:after, .body-link:before, .body-link:after, .block-link:before, .block-link:after, .download-line:before, .download-line:after, .sub-nav-link-line:before, .sub-nav-link-line:after, #results h3:before, #results h3:after, .q-and-a-q h3:before, .q-and-a-q h3:after, .q-and-a-q h4:before, .q-and-a-q h4:after { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; transition: width .3s ease; -webkit-transition: width .3s ease; }
.home-link-line:before, .body-link:before, .block-link:before, .download-line:before, #results h3:before, .q-and-a-q h3:before, .q-and-a-q h4:before { background-color: #e8edee; width: 100%; }
.sub-nav-link-line:before { width: 100%; }
.home-link-line:after, .body-link:after, .block-link:after, .download-line:after, #results h3:after, .q-and-a-q h3:after, .q-and-a-q h4:after { background-color: #0072ce; width: 0; }
.sub-nav-link-line:after { width: 0; }
.home-link-line:hover:after, .body-link:hover:after, .block-link:hover:after, .download-line:hover:after, .downloadlink:hover .download-line:after, .sub-nav-link-line:hover:after, #results h3:hover:after, .q-and-a-q h3:hover:after, .q-and-a-q h4:hover:after { width: 100%; }
.home-link-line:after { background-color: #ae2573 }
#home-nav a { padding: 65px 5px 12px; position: relative; color: #ae2573 }
#home-nav a:before { content: ""; width: 50px; height: 50px; margin: 0 0 0 -25px; display: block; position: absolute; top: 0; left: 50% }
#open-search { position: fixed; top: 20px; right: 70px }
#open-search .search-button { display: block; position: absolute; left: 0; bottom: 5px }
#open-search .search-button:hover { background-color: #00a499 }
#search-wrapper { width: calc(100% - 40px); min-height: calc(100% - 210px); padding: 160px 20px 50px; position: fixed; top: 0; left: 100%; background-color: #005eb8; }
#search-wrapper.search-wrapper-open { left: 0 }
#search { position: relative }
#search input[type="search"] { width: calc(100% - 50px); margin: 0 10px 0 0; padding: 0 10px 10px; display: inline-block; box-sizing: border-box; color: #fff; border-bottom: 2px solid #fff; background-color: transparent }
#search input[type="submit"] { width: 40px; height: 40px; position: relative; background-color: transparent }
#search .search-button { display: inline-block; position: relative }
.search-button { width: 40px; height: 40px; border-radius: 20px; background-color: #00a499 }
.search-button:hover { background-color: #11b5aa }
.search-button:before { content: ""; width: 16px; height: 16px; display: block; position: absolute; top: 10px; left: 10px; border: 4px solid #fff; border-radius: 8px; box-sizing: border-box }
.search-icon-stem { width: 24px; height: 24px; display: block; position: absolute; top: 8px; left: 8px; transform: rotate(-45deg) }
.search-icon-stem:before, .search-icon-stem:after { content: ""; display: block; position: absolute; background-color: #fff }
.search-icon-stem:before { width: 0; height: 4px; top: 10px; left: 0 }
.search-icon-stem:after { width: 4px; height: 10px; left: 10px; bottom: 0 }
.search-open .search-icon-stem:after { height: 24px }
.search-open .search-button:before { width: 2px; height: 2px; top: 17px; left: 17px; border: 1px solid #fff }
.search-open .search-icon-stem:before { width: 24px }
@-moz-keyframes menu-line {
from { width: 0 }
to { width: 100% }
}
@-webkit-keyframes menu-line {
from { width: 0 }
to { width: 100% }
}
@keyframes menu-line {
from { width: 0 }
to { width: 100% }
}
.key-link-line:hover:after, #clear-filters:hover:after {
/* [NAME] [DURATION] [TIMING FUNCTION] [DELAY (OPTIONAL - LEAVE BLANK IF 0)] [ITERATION COUNT] [DIRECTION] [FILL MODE] */
-webkit-animation: menu-line 0.3s ease-out 1 normal both;
-moz-animation: menu-line 0.3s ease-out 1 normal both;
animation: menu-line 0.3s ease-out 1 normal both
}
#key-box { padding: 50px 20px; color: #005eb8; background-color: #e8edee }
#key-box h2 { padding: 0 0 30px }
#key-list li, .key-link-line, #key-box a { display: table }
#key-list li { margin: 30px 0 0; position: relative }
.key-link-line:before { width: 100%; background-color: rgba(118,134,146,0.2) }
.key-link-line:after, .body-link:after, .block-link:after, .download-line:after, #results h3:after, .q-and-a-q h3:after, .q-and-a-q h4:after { background-color: #0072ce }
#key-box a { padding: 0 5px 12px 25px; position: relative; color: #005eb8 }
#key-filter { padding: 20px 0 20px 20px; color: #fff; position: relative; background-color: #0072ce }
#key-filter h3 { margin: 0 0 20px }
.filter-button { width: 40px; height: 40px; margin: 0 10px 0 0; text-align: center; color: #fff; border-radius: 20px; background-color: #005eb8 }
.filter-dummy { width: 40px; margin: 0 10px 0 0; display: inline-block; text-align: center; color: #41b6e6 }
.filter-button.active-filter { color: #005eb8; background-color: #fff }
#clear-filters { display: table; position: absolute; top: 15px; right: 15px; color: #fff; padding: 0 5px 7px 20px; background-color: transparent }
#clear-filters:before { width: 100%; background-color: #41b6e6 }
#clear-filters:after { background-color: #fff }
#clear-filter-icon { width: 12px; height: 12px; margin: -10px 0 0; display: block; position: absolute; top: 50%; left: 4px; transform: rotate(45deg) }
#clear-filter-icon:before, #clear-filter-icon:after { content: ""; display: block; position: absolute; background-color: #fff }
#clear-filter-icon:before { width: 12px; height: 2px; top: 5px; left: 0 }
#clear-filter-icon:after { width: 2px; height: 12px; top: 0; left: 5px }
.link-list-bullet, #nav-column-expander-pointer { width: 10px; height: 10px; display: block; position: absolute }
.link-list-bullet { top: 6px; left: 4px; transform: rotate(-45deg) }
.link-list-bullet:before, .link-list-bullet:after, #nav-column-expander-pointer:before, #nav-column-expander-pointer:after { content: ""; display: block; position: absolute; right: 0; bottom: 0 }
.link-list-bullet:before, #nav-column-expander-pointer:before { width: 2px; height: 100% }
.link-list-bullet:after, #nav-column-expander-pointer:after { width: 100%; height: 2px }
#key-box .link-list-bullet:before, #key-box .link-list-bullet:after, .body-link .link-list-bullet:before, .body-link .link-list-bullet:after, .block-link .link-list-bullet:before, .block-link .link-list-bullet:after { background-color: #0072ce }
@-moz-keyframes scroll-bounce {
0% { bottom: 30px; opacity: 0 }
30% { bottom: 20px; opacity: 1 }
55% { bottom: 27px }
75% { bottom: 20px }
90% { bottom: 23px }
100% { bottom: 20px }
}
@-webkit-keyframes scroll-bounce {
0% { bottom: 30px; opacity: 0 }
30% { bottom: 20px; opacity: 1 }
55% { bottom: 27px }
75% { bottom: 20px }
90% { bottom: 23px }
100% { bottom: 20px }
}
@keyframes scroll-bounce {
0% { bottom: 30px; opacity: 0 }
30% { bottom: 20px; opacity: 1 }
55% { bottom: 27px }
75% { bottom: 20px }
90% { bottom: 23px }
100% { bottom: 20px }
}
#down-box { position: fixed; right: 20px;
/* [NAME] [DURATION] [TIMING FUNCTION] [DELAY (OPTIONAL - LEAVE BLANK IF 0)] [ITERATION COUNT] [DIRECTION] [FILL MODE] */
-webkit-animation: scroll-bounce 1s 0.6s linear 1 normal both;
-moz-animation: scroll-bounce 1s 0.6s linear 1 normal both;
animation: scroll-bounce 1s 0.6s linear 1 normal both }
#down-box, #down, #up-box, #up { width: 40px; height: 40px }
#down, #up { display: block; border-radius: 20px; background-color: #00a499 }
#down { position: absolute; top: 0; left: 0 }
#down.down-deactivated { background-color: #768692; cursor: default }
#up-box { position: fixed; display: block; display: none; right: 70px; bottom: 20px }
#up:before { content: ""; width: 20px; height: 2px; display: block; position: absolute; top: 10px; left: 10px; background-color: #fff }
.scroll-parts, .scroll-parts:before, .scroll-parts:after { display: block; position: absolute }
.scroll-parts { width: 14px; height: 14px; left: 13px }
#down .scroll-parts { top: 10px; transform: rotate(45deg) }
#up .scroll-parts { bottom: 10px; transform: rotate(225deg) }
.scroll-parts:before, .scroll-parts:after { content: ""; right: 0; bottom: 0; background-color: #fff }
.scroll-parts:before, #back-arrow:before { width: 4px; height: 14px }
.scroll-parts:after, #back-arrow:after { width: 14px; height: 4px }
#content { padding: 40px 20px 50px; position: relative; background-color: #ffffff; }
#body-copy, .long-cell {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
/* -ms-word-break: break-all; DON'T USE - forces all words to break in IE11*/
/* This is the dangerous one in WebKit, as it breaks things wherever */
/* word-break: break-all; */
/* Instead use this non-standard one: */
word-break: break-word }
#page-heading h2 { padding: 0 0 10px; color: #003087 }
#body-copy h3, #body-copy h4, #body-copy h5 { clear: right; padding: 30px 0 0 }
#body-copy h3, #link-blocks h3 { color: #005eb8 }
#body-copy h4, #body-copy h5, #body-copy h6 { color: #0072ce }
#body-copy p, #body-copy li:not(.body-link-item), p#first-para { line-height: 1.5em }
#body-copy p, .body-link-item, .block-link-item { padding: 20px 0 0 }
#body-copy ul { padding: 10px 0 }
#body-copy table .res-td > ul:first-child { padding: 0 }
#body-copy ul ul, #body-copy ul ol { padding: 0 }
#body-copy a, .block-link, .downloadlink { position: relative; color: #005eb8 }
#body-copy ol { padding: 20px 0 0 }
#body-copy ol li, #body-copy ul:not(.body-links) li ol li { margin: 0 0 0 20px; padding: 10px 0 0 5px }
#body-copy ul:not(.body-links):not(.SKFormOptionVertical):not(.home-links) li { padding: 10px 0 0 25px; position: relative }
#body-copy table .res-td > ul:not(.body-links):not(.SKFormOptionVertical):first-child > li:first-child { padding: 0 0 0 25px }
#body-copy ul:not(.body-links):not(.SKFormOptionVertical):not(.home-links) > li:before { content: ""; width: 10px; height: 10px; display: block; position: absolute; top: 18px; left: 7px; border-radius: 5px; background-color: #ae2573 }
#body-copy table .res-td ul:not(.body-links):not(.SKFormOptionVertical):first-child > li:first-child:before { top: 8px }
#body-copy img { max-width: 100%; height: auto !important }
#body-copy div.SKFormOptionVertical, #body-copy div.SKFormTextArea, #body-copy div.SKFormEmailReplyTo, #body-copy div.SKFormTextBox { padding: 30px 0 0 }
#body-copy textarea, #body-copy input[type="text"], #body-copy input[type="email"] { width: 100%; margin: 10px 0 0; padding: 10px; box-sizing: border-box; color: #231f20; background-color: #e8edee }
#body-copy textarea { height: 150px }
#body-copy input[type="submit"], #body-copy input[type="button"] { margin: 40px 0 0; padding: 15px 20px; display: table; color: #fff; border-radius: 10px; background-color: #005eb8 }
#body-copy input[type="submit"]:hover, #body-copy input[type="button"]:hover { background-color: #0072ce }
#body-copy .SKFormOptionVertical label, #body-copy div.SKFormCheckbox label { min-height: 28px; margin: 20px 0 0; padding: 2px 0 0 40px; display: block; position: relative }
#body-copy .SKFormOptionVertical label:before, #body-copy .SKFormOptionVertical label:after, #body-copy div.SKFormCheckbox label:before { content: ""; display: block; position: absolute; top: 0; left: 0 }
#body-copy .SKFormOptionVertical label:before { width: 30px; height: 30px; border: 2px solid #ffb81c; border-radius: 15px; box-sizing: border-box }
#body-copy .SKFormOptionVertical label.checked:after { width: 22px; height: 22px; top: 4px; left: 4px; border-radius: 11px; background-color: #ffb81c }
#body-copy div.SKFormCheckbox { padding: 20px 0 0 }
#body-copy div.SKFormCheckbox label:before { width: 30px; height: 30px; border: 2px solid #ffb81c; box-sizing: border-box }
#body-copy div.SKFormCheckbox label.checked:before { background-color: #ffb81c }
.check-tick, .check-tick:before, .check-tick:after { display: block; position: absolute }
.check-tick { width: 20px; height: 20px; top: -1px; left: 2px; transform: rotate(45deg) }
.check-tick:before, .check-tick:after { content: ""; right: 0; bottom: 0; background-color: #fff }
.check-tick:before { width: 4px; height: 20px }
.check-tick:after { width: 10px; height: 4px }
.SKFormDropDownSingle .SKFormInput { border: 2px solid #e8edee; position: relative; overflow: hidden; width: calc(100% - 4px); }
.SKFormDropDownSingle .SKFormInput { background-image: url(/images/hr/images/sprite-form-dropdown.png); background-position: top right; background-repeat: no-repeat; background-size: 25px 24px; }
.SKFormDropDownSingle select { background-color: transparent; line-height: 1.4em; padding: 10px 0 10px 10px; position: relative; width: 100%; }
.SKFormDropDownSingle label { display: block; margin: 0 0 10px; }
#content .SKFormRow { padding: 20px 0 0; }
#body-copy button.form-button { background-color: #ae2573; color: #fff; cursor: pointer; font-size: 1.6rem; padding: 10px; }
#body-copy button.form-button:hover { background-color: #7C2855; }
.page-heading-nav-page { padding: 40px 0 0 }
.body-link-item, .body-link, .block-link-item, .block-link { display: table }
.body-link, .block-link { padding: 0 5px 12px 25px }
.body-link-inline, td a { text-decoration: underline }
#body-copy a.body-link-inline:hover, #body-copy td a:hover { color: #ae2573 }
#body-copy.body-copy-home-page { margin-top: -20px; }
#body-copy.body-copy-home-page p { text-align: center; }
#home-page-links { padding-top: 30px; }
#home-page-links ul.home-links { padding: 0; }
#home-page-links ul.home-links li a { background-color: #da291c; border-radius: 10px; color: #fff; display: table; margin: 0 auto; padding: 15px 20px; text-align: center; }
#home-page-links ul.home-links li a:hover { background-color: #e5231f; }
#link-blocks.link-blocks-sticky { width: 100%; margin: 0; position: static; top: auto; left: auto }
#link-blocks h3 { padding: 40px 0 10px }
.downloadbody { min-height: 50px; padding: 20px 0 0 }
.downloadlink, .download-line { display: table }
.downloadlink { padding: 0 0 0 50px }
.download-type { width: 40px; min-height: 33px; line-height: 1em; padding: 17px 0 0; display: block; position: absolute; top: 0; left: 0; text-align: center; color: #fff }
.download-type:before { content: ""; width: 40px; height: 40px; display: block; position: absolute; bottom: 0; left: 0 }
.download-pdf { background-color: #da291c }
.download-word { background-color: #005eb8 }
.download-excel { background-color: #009639 }
.downloadlink:hover .download-pdf { background-color: #eb3a2d }
.downloadlink:hover .download-word { background-color: #0072ce }
.downloadlink:hover .download-excel { background-color: #02ad3f }
.type-colon { width: 0; height: 0; display: inline-block }
.downloadSize { padding: 5px 0 0; display: block }
.download-corner { width: 10px; height: 10px; display: block; position: absolute; top: 0; right: 0; background-color: #fff }
.download-corner:before, .download-corner:after { content: ""; width: 0; height: 0; display: block; position: absolute; left: 0 }
.download-pdf .download-corner:before { top: 0; border-bottom: 10px solid #fc4b3e; border-right: 10px solid transparent }
.download-pdf .download-corner:after { top: 10px; border-top: 10px solid #8a1538; border-left: 10px solid transparent }
.download-word .download-corner:before { top: 0; border-bottom: 10px solid #41b6e6; border-right: 10px solid transparent }
.download-word .download-corner:after { top: 10px; border-top: 10px solid #003087; border-left: 10px solid transparent }
.download-excel .download-corner:before { top: 0; border-bottom: 10px solid #00ad3e; border-right: 10px solid transparent }
.download-excel .download-corner:after { top: 10px; border-top: 10px solid #006747; border-left: 10px solid transparent }
.downloadlink:hover .download-pdf .download-corner:before { border-bottom: 10px solid #fd5c4f }
.downloadlink:hover .download-pdf .download-corner:after { border-top: 10px solid #9b2649 }
.downloadlink:hover .download-word .download-corner:before { border-bottom: 10px solid #52c7f7 }
.downloadlink:hover .download-word .download-corner:after { border-top: 10px solid #114198 }
.downloadlink:hover .download-excel .download-corner:before { border-bottom: 10px solid #00C943 }
.downloadlink:hover .download-excel .download-corner:after { border-top: 10px solid #008458 }
.download-line { padding: 5px 5px 12px; position: relative }
.download-expander, .download-expander h4 { display: table }
.download-expander { margin: 30px 0 0; padding: 15px 20px 15px 36px; position: relative; color: #fff; border-radius: 10px; background-color: #0072ce }
.download-expander h4:after { content: " downloads" }
.download-plus, .download-plus:before, .download-plus:after { display: block; position: absolute }
.download-plus:before, .download-plus:after { content: ""; background-color: #fff }
.download-plus { width: 16px; height: 16px; top: 17px; left: 10px }
.download-plus:before { width: 16px; height: 2px; top: 7px; left: 0 }
.download-plus:after { width: 2px; height: 16px; top: 0; left: 7px }
.download-expanded .download-plus { width: 20px; height: 20px; top: 15px; left: 8px; transform: rotate(45deg) }
.download-expanded .download-plus:before { width: 20px; top: 9px }
.download-expanded .download-plus:after { height: 20px; left: 9px }
.downloads-site { padding: 10px 0 0 }
#nav-column-expander { width: 100%; padding: 15px 70px 15px 20px; display: block; position: relative; text-align: left; color: #425563; box-sizing: border-box; background-color: #e8edee }
#nav-column-expander-icon { display: block; position: absolute }
#nav-column-expander-icon { width: 50px; height: 100%; top: 0; right: 0; background-color: #ae2573 }
#nav-column-expander-pointer { margin: -7px 0 0; top: 50%; left: 20px; transform: rotate(45deg) }
.nav-column-expander-open #nav-column-expander-pointer { margin: -3px 0 0; transform: rotate(-135deg) }
#nav-column-expander-pointer:before, #nav-column-expander-pointer:after { background-color: #fff }
#sub-nav > ul { padding: 0 20px 40px; background-color: #ae2573 }
#sub-nav li, #sub-nav a, .sub-nav-link-line { display: table }
#sub-nav li { padding: 30px 0 0 }
.sub-nav-link-line { position: relative }
.sub-nav-link-line:before { width: 100%; background-color: rgba(255,255,255,0.2) }
.sub-nav-link-line:after { background-color: #fff }
#sub-nav a { padding: 0 5px 12px 25px; position: relative; color: #fff }
#sub-nav .SKNavCurrent > ul { margin: 0 0 0 20px }
#sub-nav .link-list-bullet:before, #sub-nav .link-list-bullet:after { background-color: #fff }
#sub-nav .link-list-bullet { top: 6px; transform: rotate(-135deg) }
#sub-nav .SKNavCurrent > span .link-list-bullet, #sub-nav .SKNavCurrent ~ li .link-list-bullet, #sub-nav .sub-nav-sibling .link-list-bullet { top: 4px; transform: rotate(-45deg) }
#sub-nav .SKNavCurrent > ul .link-list-bullet { top: 2px; transform: rotate(45deg) }
.SKNavCurrent > span .sub-nav-link-line:after, .SKNavCurrent > .sub-nav-link-line:after { width: 100% !important }
#sub-nav.sub-nav ul#sub-nav-outer-menu li#parent-section { padding-top: 0; }
.SearchIndexResult { padding: 30px 0 0 }
#results h3, #results h3 a { display: table; position: relative }
#results h3 { margin: 0 0 0 -5px }
#results h3 a { padding: 0 5px 12px; color: #005eb8 }
.SearchIndexDescription, .SearchIndexLink { padding: 10px 0 0 }
.SearchIndexLink a { color: #0072ce }
.SearchIndexLink a:hover { color: #ae2573 }
.SKFEPageNavigator, .SKFEAlertYellow p { padding: 40px 0 0 }
.SKFEPageNavigator li { margin: 0 10px 10px 0; display: table; float: left }
.page-link, .no-page-link { padding: 15px 20px; display: table-cell; vertical-align: middle; border-radius: 10px }
.page-link { position: relative; color: #fff; background-color: #da291c }
.page-link:hover { background-color: #8a1538 }
.no-page-link { color: #768692; background-color: #e8edee }
.SKFEPageNavigatorNext .page-link, .SKFEPageNavigatorLast .page-link, .SKFEPageNavigatorFirst .page-link, .SKFEPageNavigatorPrevious .page-link { width: 50px; max-width: 50px; padding: 15px 0 }
.single-pag, .single-pag:before, .single-pag:after, .SKFEPageNavigatorLast .page-link:after, .SKFEPageNavigatorFirst .page-link:after { display: block; position: absolute }
.single-pag { width: 14px; height: 14px; margin: -7px 0 0; top: 50% }
.SKFEPageNavigatorNext .single-pag, .SKFEPageNavigatorLast .single-pag { transform: rotate(45deg) }
.SKFEPageNavigatorFirst .single-pag, .SKFEPageNavigatorPrevious .single-pag { transform: rotate(-135deg) }
.SKFEPageNavigatorNext .single-pag { left: 16px }
.SKFEPageNavigatorLast .single-pag { left: 12px }
.SKFEPageNavigatorFirst .single-pag { right: 12px }
.SKFEPageNavigatorPrevious .single-pag { right: 16px }
.single-pag:before, .single-pag:after, .SKFEPageNavigatorLast .page-link:after, .SKFEPageNavigatorFirst .page-link:after { content: ""; background-color: #fff }
.single-pag:before, .single-pag:after { top: 0; right: 0 }
.single-pag:before { width: 14px; height: 4px }
.single-pag:after { width: 4px; height: 14px }
.SKFEPageNavigatorLast .page-link:after, .SKFEPageNavigatorFirst .page-link:after { width: 4px; height: 20px; margin: -10px 0 0; top: 50% }
.SKFEPageNavigatorLast .page-link:after { left: 32px }
.SKFEPageNavigatorFirst .page-link:after { left: 14px }
.q-and-a-q, .q-and-a-q h3, .q-and-a-q h4 { display: table }
.q-and-a-q { margin: 30px 0 0 }
#body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { padding: 0 5px 17px 35px; position: relative }
.q-and-a-a { padding: 10px 0 0 }
.question-expander, .question-expander:before, .question-expander:after { display: block; position: absolute; }
.question-expander { height: 20px; left: 5px; top: 2px; width: 20px; }
.question-expander:before, .question-expander:after { background-color: #0072ce; content: ""; }
.question-expander:before { height: 4px; left: 0; top: 8px; width: 20px; }
.question-expander:after { height: 20px; left: 8px; top: 0; width: 4px; }
.q-expanded .question-expander:before, .q-expanded .question-expander:after { background-color: #da291c; }
.q-expanded .question-expander:after { height: 4px; top: 8px; }
#vision, #copyright { padding: 70px 0 0 }
#vision { width: 50%; min-width: 250px; max-width: 300px; margin: auto }
#vision img { width: 100%; max-width: 100% }
#copyright { text-align: center; color: #768692 }
.bio-wrap { padding-top: 30px; width: 100%; }
.half-quote { background-color: #005eb8; color: #fff; margin-top: 20px; padding: 0 20px 20px 20px; }
#body-copy.body-copy-nav-page .half-quote ul li:before { background-color: #fff; }
.survey-icon { float: right; padding: 20px 0 20px 20px; }
.post-it {
background-color: #e8edee;
margin: 20px 0 0;
padding: 20px 20px 20px 16px;
}
.post-it > *:first-child {
padding-top: 0 !important;
}
.post-it--information {
border-left: 4px solid #005eb8;
}
.post-it--warning {
border-left: 4px solid #ffb81c;
}
.post-it--alert {
border-left: 4px solid #da291c;
}
/* ---- home boxes ------------------------------- */
.home-box-wrap, .home-box, .home-box-full { width: 100%; }
.home-box-inner, .home-box-inner-full { padding: 40px 20px; width: calc(100% - 40px); }
.home-box-inner h2, .home-box-inner-full h2 { color: #ffffff; font-size: 2.2rem; padding-bottom: 20px; }
.home-box-inner p, .home-box-inner-full p { color: #ffffff; text-align: center; }
.home-box-inner ul li a, .home-box-inner-full ul li a { background-color: #fff; border-radius: 10px; color: #005eb8; display: table; margin: 0 auto; padding: 15px 20px; text-align: center; }
.home-box-inner ul li a:hover, .home-box-inner-full ul li a:hover { color: #0072ce; }
a.read-more-link:before { content: "Read more"; }
.read-more-text { display: block; height: 0; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 0; }
#box-employee, #box-blog { background-color: #0072ce; }
#box-work-life, #box-video { background-color: #005eb8; }
#box-recruit { background-color: #003087; }
#box-pay { background-color: #330072; }
#box-homeworking { background-color: #ae2573; }
#box-occupational { background-color: #7c2855; }
#box-wellbeing { background-color: #006747; }
#box-talent-management { background-color: #425563; }
/* ---- home video/blog -------------------------- */
#home-box-video, .video-box, .video-body { height: 0; padding: 56.25% 0 0; position: relative; width: 100%; }
#home-box-video { margin: auto auto 20px auto; }
.video-box, .video-body { margin: 20px auto auto auto; }
#home-box-video iframe, .video-box iframe, .video-body iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0 }
.home-box-blog { margin: 0 0 30px 0; }
.home-box-blog ul li a { background-color: transparent; border-radius: 0; color: #fff; padding: 0 10px 10px 10px; }
.home-box-blog ul li a, .home-box-blog ul li a:hover { color: #fff; }
.blog-link-line { display: table; margin: 0 auto; position: relative; }
.blog-link-line:before, .blog-link-line:after { bottom: 0; content: ''; display: block; height: 2px; left: 0; position: absolute; }
.blog-link-line:before { background: #41b6e6; opacity: 0.5; width: 100%; }
.blog-link-line:after { background: #fff; width: 0; transition: width .3s ease; -webkit-transition: width .3s ease; }
.blog-link-line:hover:before { transition: width .3s ease; -webkit-transition: width .3s ease; }
.blog-link-line:hover:after { background: #fff; width: 100%; }
/* ---- home news/events ------------------------- */
.home-news-events-wrap { background-color: #fff; width: 100%; }
.home-news-events { width: 100%; }
.home-news-events-inner { padding: 40px 20px; width: calc(100% - 40px); }
.home-news-events-header { background-color: #e8edee; border-bottom-color: #da291c; border-bottom-style: solid; border-bottom-width: 6px; height: 94px; margin-bottom: 46px; position: relative; }
.home-news-events-header h2 { color: #425563; font-size: 2.6rem; padding: 18px 14px 0; position: absolute; width: calc(100% - 140px); }
.home-news-events-icon { position: absolute; right: 14px; top: -4px; }
.home-news-events-icon img { height: 108px; width: 98px; }
.home-news-events-item { display: table; margin: 0 auto; padding-bottom: 20px; }
.home-news-events-item:last-of-type { padding-bottom: 40px; }
.home-news-events-date { color: #da291c; display: table-cell; padding-right: 20px; vertical-align: middle; width: 48px; }
.home-news-events-date p { padding-bottom: 0; }
.date-day, .date-month, .date-year { display: block; text-align: center; }
.date-month { padding-bottom: 5px; }
.home-news-events-copy { border-left-color: #e8edee; border-left-style: solid; border-left-width: 2px; color: #425563; display: table-cell; padding: 10px 0 10px 24px; vertical-align: top; width: calc(100% - 70px); }
.home-news-events-copy p { text-align: center; }
.home-news-events-copy ul li .blog-link-line a.read-more-link { background-color: transparent; border-radius: 0; color: #fff; padding: 0 10px 10px 10px; }
.home-news-events-copy ul li .blog-link-line a.read-more-link { color: #da291c; }
.home-news-events-copy ul li .blog-link-line a.read-more-link:hover { color: #8a1538; }
.home-news-events-copy ul li .blog-link-line:before, .home-news-events-copy ul li .blog-link-line:after { background: #da291c; opacity: 0.5; }
.home-news-events-copy ul li .blog-link-line:hover:after { background: #8a1538; }
.home-news-events-inner ul li a { background-color: #da291c; border-radius: 10px; color: #fff; display: table; margin: 0 auto; padding: 15px 20px; text-align: center; }
.home-news-events-inner ul li a:hover { background-color: #8a1538; }
/* ---- news/events/blog ------------------------- */
.newstitle, .newsarticlesummary, .newsarticledate { display: none; }
.newsListingItem { position: relative; width: 100%; }
.newsListingItemPic { padding-right: 20px; position: absolute; top: 4px; width: 50px; }
.newsListingItemPic img { max-width: 100%; }
.newsListingItemText { margin: 0 0 0 70px; position: relative; width: calc(100% - 70px); }
.newsarticletitle a { color: #005eb8; }
/* ---- "Grid" styles -------------------- */
.content-row {
display: flex;
flex-wrap: wrap;
margin: 20px 0 0 -20px
}
.content-column {
margin: 0 0 20px 20px;
}
/* ---- Custom boxes -------------------- */
.bordered-box {
border-style: solid;
border-width: 4px;
box-sizing: border-box;
padding: 20px 16px;
width: 100%
}
.bordered-box--standard {
border-color: #e8edee
}
.bordered-box--rag-r {
border-color: #da291c
}
.bordered-box--rag-a {
border-color: #ed8b00
}
.bordered-box--rag-g {
border-color: #78be20
}
#body-copy .bordered-box > *:first-child {
padding-top: 0
}
.bordered-box .ul--narrow li {
border-bottom: 2px solid #e8edee;
padding: 15px 0
}
.bordered-box .ul--narrow li:last-child {
border-bottom: none;
padding: 15px 0 0
}
#body-copy .bordered-box__heading {
border-bottom: 2px solid #425563;
color: #425563;
padding: 0 0 10px
}
/* HIDE VISUALLY ONLY */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* HIDE */
#uhb-large, #search label, .internalSummary, #link-blocks br, .externalSummary, .downloadIcon, .downloads-site, .delete, #print-button, .hide { display: none }
/* BREAKPOINT */
@media (min-width: 320px) {
.home-news-events-header { height: 104px; }
.home-news-events-header h2 { font-size: 3.0rem; padding: 18px 20px 0; width: calc(100% - 168px); }
.home-news-events-icon { right: 20px; }
.home-news-events-icon img { height: 118px; width: 108px; }
}
/* BREAKPOINT */
@media (min-width: 375px) {
.home-box-inner h2, .home-box-inner-full h2, .header-dbop { font-size: 2.4rem; }
.home-news-events-header { height: 114px; margin: 0 auto 46px auto; }
.home-news-events-header h2 { font-size: 3.2rem; padding: 20px 40px 0; width: calc(100% - 220px); }
.home-news-events-icon img { height: 128px; width: 118px; }
}
/* BREAKPOINT */
@media (min-width: 414px) {
.home-news-events-header { height: 118px; width: 374px; }
.home-news-events-header h2 { padding: 24px 44px 0; width: calc(100% - 230px); }
.home-news-events-icon { top: -9px; }
.home-news-events-icon img { height: 142px; width: 132px; }
}
/* BREAKPOINT */
@media (min-width: 750px) {
/* FONTS */
/* FAMILY */
.split-downloads h4 { font-family: 'Frutiger LT W01_65 Bold1475746', Arial, Helvetica, sans-serif }
/* SIZE */
h1 { font-size: 5.2rem }
#page-heading h2 { font-size: 3.4rem }
#key-box h2, #body-copy h3, #link-blocks h3 { font-size: 3.0rem }
#body-copy h4, .split-downloads h4, #results h3, #body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { font-size: 2.4rem }
#menu li, #sub-menu li, #search input[type="search"] { font-size: 2.4rem }
p, li:not(.downloadbody), #key-filter h3, .download-link-title, #nav-column-expander, .SKFormRow span, label, input, textarea, dl, button.filter-button, .filter-dummy, table, table p, table li:not(.downloadbody) { font-size: 1.8rem }
#clear-filters { font-size: 1.6rem }
/* LAYERING */
#search-wrapper { z-index: 10001 }
#sub-nav { z-index: 2000 }
/* CLEAR FLOATS */
#home-menu:after, #key-list:after, .split-downloads:after { content: ""; display: block; clear: both }
/* DEFAULT SELECTORS */
table { margin: 40px 0 0 }
th, td { padding: 15px }
footer { padding: 0 25px 100px }
dl, dt { padding: 15px 0 0 }
dd { padding: 10px 0 0 30px }
/* BESPOKE SELECTORS */
#logo { width: 300px; padding: 25px 0 0 25px }
#intro { padding: 50px 50px 70px }
#header-home { position: relative }
/* #header-home:before { content: ""; width: 100%; height: 80px; display: block; position: absolute; bottom: 0; left: 0; background-color: #fff } */
.header-lower { padding-bottom: 32px; }
#burger, #open-search { width: 55px; height: 60px }
#burger { right: 25px }
#open-search { right: 90px }
#burger-inner, .search-button { width: 50px; height: 50px; border-radius: 25px }
#burger-parts { top: 15px; left: 15px }
.burger-open #burger-parts { top: 13px; left: 13px }
.search-button:before { top: 15px; left: 15px }
.search-open .search-button:before { top: 22px; left: 22px }
.search-icon-stem { top: 13px; left: 13px }
#search-wrapper { width: 100%; padding: 225px 0 100px }
#search, #home-video-wrapper { width: calc((((100% - 250px) / 6) * 4) + 90px); margin: auto }
#search input[type="search"] { width: calc(100% - 65px); min-height: 50px; margin: 0 15px 0 0 }
#search input[type="submit"] { width: 50px; height: 50px }
#main-nav { min-height: calc(100% - 195px); padding: 145px 50px 50px; width: calc(100% - 100px); }
#home-nav { padding: 50px 50px 100px }
#home-nav li { width: calc(50% - 15px); margin: 50px 0 0; display: block }
#home-nav li:nth-child(odd) { float: left }
#home-nav li:nth-child(even) { float: right }
.home-link-line { margin: auto }
#key-box { padding: 70px 50px }
#key-box h2 { padding: 0 0 40px }
#key-list { width: calc(100% + 30px); margin: 0 0 0 -30px; padding: 10px 0 0 }
#key-list li { width: calc(50% - 30px); margin: 40px 0 0 30px; display: block; float: left }
/* #key-list li:nth-child(odd) { clear: left } */
.key-link-line { position: relative }
#key-box a, .body-link, .block-link { padding: 0 5px 17px 30px }
#key-filter { padding: 30px; display: table }
#key-filter h3 { margin: 0 0 30px }
.filter-button { width: auto; height: auto; margin: 0 20px 0 0; padding: 15px 20px; border-radius: 10px }
.filter-dummy { width: auto; margin: 0 20px 0 0 }
#clear-filters { top: 25px; right: 25px }
.link-list-bullet, #nav-column-expander-pointer { width: 12px; height: 12px }
.scroll-parts { width: 14px; height: 14px; left: 18px }
#down-box, #up-box { width: 50px; height: 55px }
#down-box { right: 25px }
#up-box { right: 90px }
#down, #up { width: 50px; height: 50px; border-radius: 25px }
#up:before { top: 17px; left: 15px }
#down .scroll-parts { top: 15px }
#up .scroll-parts { bottom: 17px }
#content { padding: 50px 50px 100px }
#body-copy {
/* These are technically the same, but use both */
overflow-wrap: normal;
word-wrap: normal;
/* -ms-word-break: break-all; DON'T USE - forces all words to break in IE11*/
/* This is the dangerous one in WebKit, as it breaks things wherever */
/* word-break: break-all; */
/* Instead use this non-standard one: */
word-break: normal }
#home-page-links { padding-top: 40px; }
.page-heading-nav-page { padding: 50px 0 0 }
#body-copy h3, #body-copy h4 { padding: 40px 0 0 }
#body-copy p, #body-copy ol { padding: 30px 0 0 }
#body-copy ul:not(.body-links):not(.SKFormOptionVertical):not(.home-links) li { padding: 10px 0 0 30px }
#body-copy table .res-td > ul:not(.body-links):not(.SKFormOptionVertical):first-child > li:first-child { padding: 0 0 0 30px }
#body-copy ol li, #body-copy ul:not(.body-links) li ol li { margin: 0 0 0 25px }
#body-copy ul:not(.body-links) > li:before { top: 20px }
#body-copy div.SKFormOptionVertical, #body-copy div.SKFormTextArea, #body-copy div.SKFormEmailReplyTo, #body-copy div.SKFormTextBox { padding: 40px 0 0 }
#body-copy textarea, #body-copy input[type="text"], #body-copy input[type="email"] { margin: 20px 0 0 }
#body-copy input[type="submit"] { margin: 50px 0 0 }
#body-copy .SKFormOptionVertical label { min-height: 30px; padding: 0 0 0 40px }
.SKFormDropDownSingle label { margin: 0 0 20px; }
/* #body-copy .SKFormOptionVertical label:before { width: 30px; height: 30px; border: 2px solid #ffb81c; border-radius: 15px; box-sizing: border-box }
#body-copy .SKFormOptionVertical label.checked:after { width: 22px; height: 22px; top: 4px; left: 4px; border-radius: 11px; background-color: #ffb81c } */
#link-blocks h3 { padding: 50px 0 10px }
.download-line { padding: 5px 5px 17px }
.dl-column { width: calc(50% - 15px) }
#dl-column-hgs { float: left }
#dl-column-qehb { float: right }
.download-expander { margin: 0; padding: 0; background-color: transparent; cursor: default;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none }
.split-downloads h4 { padding: 50px 0 0; color: #0072ce }
#sub-nav { position: relative }
#sub-nav > ul { width: calc(100% - 80px); padding: 10px 40px 50px; position: absolute; top: 0; left: 0 }
#sub-nav li { padding: 40px 0 0 }
#sub-nav a { padding: 0 5px 17px 30px }
#sub-nav .SKNavCurrent > ul { margin: 0 0 0 25px }
#nav-column-expander, #sub-nav { width: calc((((100% - 150px) / 6) * 4) + 90px); box-sizing: border-box }
#nav-column-expander-pointer { margin: -9px 0 0 }
.nav-column-expander-open #nav-column-expander-pointer { margin: -5px 0 0 }
.SearchIndexResult, .SKFEAlertYellow p { padding: 40px 0 0 }
#results h3 a { padding: 0 5px 17px }
.SearchIndexDescription, .SearchIndexLink { padding: 15px 0 0 }
.SKFEPageNavigator { padding: 50px 0 0 }
.q-and-a-q { margin: 50px 0 0 }
#body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { padding: 0 5px 17px 40px }
.question-expander { top: 3px; }
#vision { padding: 100px 0 0 }
.post-it {
margin: 30px 0 0;
padding: 30px 30px 30px 26px;
}
/* .home-box-wrap { display: table; } */
.home-box-row, .home-box-row-full { width: 100%; }
.home-box-row { display: table-row; }
.home-box { display: table-cell; vertical-align: top; width: 50%; }
.home-box-inner, .home-box-inner-full { padding: 50px 25px; }
.home-box-inner { width: calc(100% - 50px); }
.home-box-inner h2, .home-box-inner-full h2 { font-size: 2.8rem; line-height: 34px; padding-bottom: 24px; }
.home-box-inner p, .home-box-inner-full p, .home-news-events-copy p, .home-box-blog p { padding-bottom: 24px; }
.home-box-inner p, .home-box-inner-full p, .home-news-events-copy p, .home-box-blog p, .home-box-inner li, .home-news-events-copy li, .home-box-blog li, .home-news-events-inner li { font-size: 2.0rem; }
.home-news-events-inner { padding: 60px 25px; width: calc(100% - 50px); }
.home-news-events-header { margin-bottom: 60px; }
.home-news-events-item-wrap { margin-left: -50px; }
.home-news-events-item { display: inline-block; margin: 0; margin-left: -4px; padding: 0 0 50px 50px; vertical-align: top; width: calc(50% - 50px); }
.home-news-events-date { padding-right: 25px; width: 50px; }
.home-news-events-copy { padding-right: 25px; }
#home-box-video { margin-bottom: 30px; }
.video-wrap { margin: 50px 0 0 0; min-height: 146px; position: relative; }
.video-header, .video-text { margin-left: 308px; position: relative; top: 0; width: clac(100% - 258px); }
.video-box { height: 146px; margin: 0; padding: 0; position: absolute; top: 0; width: 258px; }
#body-copy.body-copy-nav-page .video-wrap .video-header h3 { padding-top: 0; }
.half-quote { float: right; margin: 30px 0 10px 30px; padding: 0 30px 30px 30px; width: calc(50% - 60px); }
.survey-icon { padding: 20px 0 30px 30px; }
/* ---- "Grid" styles -------------------- */
.content-column--2-col-m {
display: flex;
float: left;
width: calc(50% - 20px)
}
#body-copy .content-column {
overflow-wrap: break-word;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
}
/* HIDE */
#uhb-small, #home-video:before, .download-plus, .download-expander h4:after { display: none }
/* DISPLAY WHAT WAS HIDDEN */
#uhb-large, .downloads-site { display: block !important }
}
/* BREAKPOINT */
@media (min-width: 1000px) {
/* CLEAR FLOATS */
#header-inner:after, #content-inner:after { content: ""; display: block; clear: both }
/* DEFAULT SELECTORS */
footer { padding: 0 30px 110px }
dl { padding: 25px 0 0 }
dt { padding: 15px 0 0 }
/* BESPOKE SELECTORS */
#logo { width: 360px; padding: 30px 0 0 30px }
#intro { padding: 60px 50px }
#header-home #intro { width: calc((((100% - 450px) / 8) * 3) + 110px); padding: 60px 0 0 50px; float: left }
#header-home:before { height: 15px }
#burger, #open-search { width: 50px; height: 65px }
#burger { right: 30px }
#open-search { right: 100px }
#search { width: calc((((100% - 450px) / 8) * 4) + 150px) }
#home-video-wrapper { width: calc((((100% - 450px) / 8) * 5) + 200px); margin: 0 50px 0 0; padding: 60px 0 0; float: right }
#home-nav { padding: 20px 50px 90px }
#home-nav li { width: calc(25% - (150px / 4)); margin: 50px 50px 0 0; display: block }
#home-nav li:nth-child(even) { float: left }
#home-nav li:last-child { margin: 50px 0 0 }
#key-list { width: calc(100% + 50px); margin: 0 0 0 -50px; padding: 10px 0 0 }
#key-list li { width: calc(50% - 50px); margin: 40px 0 0 50px }
.body-copy-reflowed { width: calc((((100% - 350px) / 8) * 5) + 200px); float: left }
#body-copy.body-copy-reflowed p:first-child { padding: 50px 0 0 }
#body-copy.body-copy-reflowed > ul:not(.body-links):first-child { padding: 40px 0 0 }
#body-copy textarea, #body-copy input[type="text"], #body-copy input[type="email"] { width: 50% }
#body-copy textarea { height: 200px }
.SKFormDropDownSingle .SKFormInput { width: calc(50% - 4px); }
#body-copy.body-copy-nav-page.body-copy-reflowed .half-quote { margin: 30px 0 30px 0; width: calc(100% - 60px); }
#body-copy.body-copy-nav-page.body-copy-reflowed .half-quote p { padding-top: 30px; }
.page-heading-nav-page { padding: 60px 0 0 }
#link-blocks:not(.full-width) { width: calc((((100% - 350px) / 8) * 3) + 100px); margin: -10px 0 0; float: right }
/* #link-blocks.link-blocks-sticky { width: calc((((100% - 450px) / 8) * 3) + 100px); margin: 0 0 0 calc(((((100% - 450px) / 8) * 3) / 2); position: fixed; top: 100px; left: 50% } */
#link-blocks.link-blocks-sticky { width: calc((((100% - 450px) / 8) * 3) + 100px); margin: 0 0 0 calc(((50% - 225px) / 4) + 75px); position: fixed; top: 100px; left: 50% }
#link-blocks.link-blocks-sticky h3 { padding: 30px 0 10px }
#link-blocks.link-blocks-sticky > div:first-child h3 { padding: 0 0 10px }
.dl-column { width: calc(50% - 25px) }
#nav-column-expander, #sub-nav { width: calc(50% - 25px) }
#down-box { right: 30px }
#up-box { right: 100px }
#content { padding: 60px 50px 100px }
.home-box-inner, .home-box-inner-full, .home-news-events-inner { width: calc(100% - 70px); }
.home-box-inner, .home-box-inner-full { padding: 50px 35px; }
.home-news-events-inner { padding: 70px 35px; }
.home-news-events-header { height: 134px; }
.home-news-events-icon { top: -12px; }
.home-news-events-icon img { height: 164px; width: 148px; }
.home-news-events-header h2 { font-size: 3.6rem; padding: 28px 40px 0; width: calc(100% - 250px); }
.video-wrap { min-height: 170px; }
.video-header, .video-text { margin-left: 350px; width: clac(100% - 300px); }
.video-box { height: 170px; width: 300px; }
/* ---- "Grid" styles -------------------- */
.content-column--3-col-l {
display: flex;
float: left;
max-width: calc(33.33% - 20px);
}
.content-column--1-col-l {
display: flex;
float: left;
max-width: 100%;
}
/* TABLE STYLES - MAINTAIN RESPONSIVENESS WHEN BODY COPY CONTAINER IS DOUBLE-NARROW */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1, .body-copy-nav-page.body-copy-reflowed .responsive-table-1 td { border: none }
/* Override "default" table styles */
/* Force table to not be like tables anymore */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1, .body-copy-nav-page.body-copy-reflowed .responsive-table-1 thead, .body-copy-nav-page.body-copy-reflowed .responsive-table-1 tbody, .body-copy-nav-page.body-copy-reflowed .responsive-table-1 tr, .body-copy-nav-page.body-copy-reflowed .responsive-table-1 th/* , .responsive-table-1 td */ { display: block }
/* Hide table headers (but not display: none;, for accessibility) */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1 thead tr { position: absolute; top: -9999px; left: -9999px }
/* Make a "td" behave like a "tr" */
/* .responsive-table-1 tr { display: block } */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1 td { width: 100%; margin: 0 0 2px; display: table; text-align: left; color: #fff; background-color: #e8edee }
/* Mimic the "th" */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1 td:before { width: 40%; padding: 15px; display: table-cell; background-color: #ae2573 }
/* Populate the "fake th" */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1 td:before { content: attr(data-res-th) }
/* Mimic the "td" */
.body-copy-nav-page.body-copy-reflowed .res-td { width: 60%; padding: 15px; display: table-cell; position: relative; color: #425563 }
/* Add borders */
/* #full-index td { border-bottom: 2px solid #005eb8 } */
/* Mimic border as border-spacing is not working on parent | */
.body-copy-nav-page.body-copy-reflowed .res-td:before { content: ""; width: 2px; height: calc(100% + 2px); display: block; position: absolute; top: 0; left: 0; background-color: #fff }
/* Mimic separate tables */
.body-copy-nav-page.body-copy-reflowed .responsive-table-1 tbody tr:not(:last-child) { margin: 0 0 20px }
/* Force long stuff (mainly email addresses) to wrap */
.body-copy-nav-page.body-copy-reflowed .long-cell-inner { width: 50px; min-width: 100% }
}
/* BREAKPOINT */
@media (min-width: 1280px) {
/* FONTS */
/* SIZE */
h1 { font-size: 6rem }
#page-heading h2 { font-size: 3.6rem }
#key-box h2 { font-size: 5rem }
#body-copy h3, #link-blocks.full-width h3 { font-size: 3.2rem }
#body-copy h4, #body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { font-size: 2.6rem }
p, li:not(.downloadbody):not(.block-link-item), #link-blocks.full-width li.downloadbody, #link-blocks.full-width .download-link-title, .SKFormRow span, label, input, textarea, dl, table, table p, table li:not(.downloadbody):not(.block-link-item) { font-size: 2rem }
#menu li, #intranets li { font-size: 1.6em }
/* BACKGROUND IMAGES */
#print-button:before { background-image: url(/images/hr/images/icon-print.svg) }
/* SHADOWS ON BUTTONS AND LINKS (AND A COUPLE OF OTHER THINGS */
#up:hover, #down:not(.down-deactivated):hover, .filter-button:not(.active-filter):hover, #body-copy input[type="button"]:hover {
-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
-o-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4);
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.4)
}
/* DEFAULT SELECTORS */
footer { padding: 0 0 150px }
dd { padding: 10px 0 0 40px }
/* BESPOKE SELECTORS */
#logo { padding: 30px 0 0; position: absolute; top: 0; left: 0 }
#intro { padding: 80px 0 }
#header-home #intro { width: 366px; padding: 80px 0 0 }
.logged-out #intro { padding: 152px 0 80px }
#intro p, .downloadhead p { padding: 25px 0 30px }
#header-home:before { height: 50px }
#header-inner { position: relative }
.header-lower { background-position: center 190px; padding-top: 190px; }
#home-video-wrapper { width: 782px; margin: 0; padding: 70px 0 0 }
#home-nav { padding: 50px 0 110px }
#header-inner, #home-nav-inner, #key-box-inner, #content-inner { width: 1200px; margin: auto }
#home-nav li { width: 262px; margin: 50px 50px 0 0; display: block }
#down-box, #up-box { right: 50% }
#down-box { margin: 0 -600px 0 30px }
#up-box { margin: 0 -530px 0 30px }
#main-nav { width: auto; min-height: 0; padding: 172px 0 0; position: relative; top: auto; left: auto; background-color: transparent }
#main-nav.nav-open { left: 0 }
#intranets { position: absolute; top: 50px; right: 0 }
#menu li { display: inline-block; margin: 0 10px 0 0 }
#menu li:before { background-color: rgba(255,255,255,0.2) }
.filter-button:not(.active-filter):hover { background-color: #0072ce }
#content { padding: 100px 0 120px }
#header-inner h1.header-home { padding-top: 194px; }
#header-inner h1.header-home::before { top: 124px; }
#header-inner h1.header-lower { padding-top: 142px; }
#print-button { margin: 0 -600px 0 0; padding: 15px 20px 15px 50px; display: table; position: absolute; top: 20px; right: 50%; color: #fff; border-radius: 10px; background-color: #005eb8 }
#print-button:before { content: ""; width: 20px; height: 20px; margin: -10px 0 0; display: block; position: absolute; top: 50%; left: 20px }
#print-button:hover { background-color: #0072ce }
.page-heading-nav-page { padding: 0 }
#body-copy h3, #body-copy h4 { padding: 50px 0 0 }
#body-copy ul:not(.body-links):not(.SKFormOptionVertical):not(.home-links) li { padding: 10px 0 0 40px }
#body-copy table .res-td > ul:not(.body-links):not(.SKFormOptionVertical):first-child > li:first-child { padding: 0 0 0 40px }
#body-copy ol li, #body-copy ul:not(.body-links) li ol li { padding: 10px 0 0 15px }
#body-copy ul:not(.body-links) > li:before { top: 22px; left: 10px }
#body-copy .SKFormOptionVertical label { min-height: 36px; margin: 25px 0 0 0; padding: 0 0 0 51px }
#body-copy .SKFormOptionVertical label:before { width: 36px; height: 36px; border-radius: 18px }
#body-copy .SKFormOptionVertical label.checked:after { width: 28px; height: 28px; border-radius: 14px }
.body-copy-reflowed, .body-copy-nav-page { width: calc((((100% - 550px) / 12) * 9) + 400px) }
.body-copy-nav-page { float: left }
.body-copy-nav-page.body-copy-reflowed { width: calc((((100% - 550px) / 12) * 6) + 250px) }
#link-blocks:not(.full-width), #nav-column { width: calc((((100% - 550px) / 12) * 3) + 100px); margin: 0 }
#link-blocks.link-blocks-sticky { width: 262.5px; margin: 0 0 0 337.5px }
#link-blocks.full-width, #body-copy.full-width { float: right; width: calc((((100% - 550px) / 12) * 9) + 400px) }
#nav-column { margin: 0 50px 0 0; float: left }
#nav-column #sub-nav.sub-nav ul#sub-nav-outer-menu li#parent-section ul.SKNavLevel1 li#sub-navNode_0.SKNavActive { padding-top: 8px; }
#sub-nav, #sub-nav > ul { width: 100%; background-color: transparent }
#sub-nav > ul { padding: 0; position: static }
#sub-nav > ul > li { padding: 10px 0 0 }
.sub-nav-link-line:before { background-color: #e8edee }
.sub-nav-link-line:after { background-color: #0072ce }
#sub-nav a { color: #005eb8 }
#sub-nav .link-list-bullet:before, #sub-nav .link-list-bullet:after { background-color: #0072ce }
.long-cell { min-width: 300px }
.long-cell-inner { width: 300px; min-width: 100% }
.SearchIndexResult, .SKFEAlertYellow p { padding: 50px 0 0 }
.SKFEPageNavigator { padding: 70px 0 0 }
.q-and-a-q { margin: 60px 0 0 }
#body-copy .q-and-a-q h3, #body-copy .q-and-a-q h4 { padding: 0 5px 17px 44px }
.question-expander { top: 5px; }
#up:hover, #down:hover { background-color: #11b5aa }
#down.down-deactivated:hover { background-color: #768692 }
#vision { max-width: 400px; padding: 120px 0 0 }
#top-bar { position: absolute; width: 100%; }
#search-wrapper { height: 116px; left: 0; margin: 0; min-height: 116px; padding: 0; position: relative; top: -116px; width: 100%; z-index: inherit; }
#search { background-color: transparent; left: calc(50% + 234px); margin: 0 0 0 0; min-height: 0; padding: 0; position: absolute; top: 30px; width: 366px; }
#search input[type="search"] { width: calc(100% - 70px) }
#main-nav { background-color: transparent; left: 0; margin: 0 auto; min-height: 0; padding: 0; position: relative; top: 0; width: 1200px; }
#main-nav ul#menu { float: left; margin-left: -10px; margin-top: 14px; }
#main-nav ul#sub-menu { margin-left: -10px; position: absolute; top: -190px; }
#menu a { color: #005eb8; padding: 0 5px 8px; }
#menu li, #sub-menu li { display: inline-block; font-size: 1.6rem; line-height: 22px; margin: 0 0 0 10px; }
#menu li:before { background-color: #005eb8; opacity: 0.5; }
#menu li:after, #menu li:hover:after { background-color: #003087; }
#menu li.active:before, #sub-menu li.active:before { opacity: 1.0; }
#menu li.active:before { background-color: #003087; }
#sub-menu li.active:before { opacity: 1.0; }
#sub-menu::before { display: none; }
header { margin-top: 116px; min-height: 0; }
#header-inner, .home-box-wrap, .home-news-events, .home-news-events-inner { margin: 0 auto; width: 1200px; }
#header-inner h1.header-home { padding-bottom: 84px; padding-top: 306px; }
#header-inner h1.header-home:before { top: 190px; }
.home-box-wrap { margin-top: -50px; z-index: 9; }
.home-news-events-wrap { z-index: 8; }
.home-box-wrap, .home-news-events-wrap { position: relative; }
.home-box-inner h2, .home-box-inner-full h2 { font-size: 3.6rem; }
.home-box-inner p, .home-box-inner-full p, .home-box-inner ul li a, .home-box-inner-full ul li a, .home-news-events-inner ul li a { font-size: 2.4rem; }
.home-box-inner h2, .home-box-inner-full h2, .home-box-inner p, .home-box-inner-full p { padding-bottom: 30px; }
.home-box-inner, .home-box-inner-full { padding: 50px; width: calc(100% - 100px); }
.home-news-events-inner { margin-top: -50px; padding: 150px 0; }
.home-news-events-header { display: inline-block; margin: 0 50px 44px 0; width: 366px; }
.home-news-events-header h2 { padding: 28px 36px 0; width: calc(100% - 240px); }
.home-news-events-item-wrap { display: inline-block; margin-left: -53px; vertical-align: top; width: 834px; }
.home-news-events-item { margin-left: 46px; padding: 0 0 50px 0; width: 368px; }
.home-news-events-item:last-of-type { padding-bottom: 50px; }
.home-news-events-copy { padding: 6px 0 6px 24px; }
.home-news-events-copy p { padding-bottom: 14px; }
.home-news-events-copy p, .home-news-events-copy ul li span.blog-link-line a.read-more-link, .home-box-blog ul li span.blog-link-line a.read-more-link, #print-button { font-size: 2.0rem; line-height: 26px; }
.home-box-blog p { padding-bottom: 24px; }
.home-box-blog { margin-bottom: 40px; }
#hne-two.home-news-events-wrap .home-news-events .home-news-events-inner { padding-bottom: 100px; }
.video-wrap { min-height: 180px; }
.video-header, .video-text { margin-left: 368px; width: clac(100% - 318px); }
.video-box { height: 180px; width: 318px; }
/* REMOVE WHEN FULL HOME PAGE GOES LIVE */
.footer-home-interim { position: relative; }
.footer-home-interim:before { background-color: #e8edee; content: ""; display: block; height: 50px; left: 0; position: absolute; top: -50px; width: 100%; }
/* HIDE */
#open-search, #burger, #nav-column-expander { display: none }
/* SHOW WHAT WAS HIDDEN */
#sub-nav { display: block !important }
}
/* ~~~~~~~~~~ RESPONSIVE TABLES - SWITCH IT UP TO AVOID HAVING TO UNPICK TABLE STYLES WHEN USING "MOBILE-FIRST" APPROACH ~~~~~~~~~~ */
@media screen and (max-width: 999px) {
/* TABLE STYLES */
.responsive-table-1, .responsive-table-1 td { border: none }
/* Override "default" table styles */
/* Force table to not be like tables anymore */
.responsive-table-1, .responsive-table-1 thead, .responsive-table-1 tbody, .responsive-table-1 tr, .responsive-table-1 th { display: block }
/* Hide table headers (but not display: none;, for accessibility) */
.responsive-table-1 thead tr { position: absolute; top: -9999px; left: -9999px }
/* Make a "td" behave like a "tr" */
/* .responsive-table-1 tr { display: block } */
.responsive-table-1 td { width: 100%; margin: 0 0 2px; display: table; text-align: left; color: #fff; background-color: #e8edee }
/* Mimic the "th" */
.responsive-table-1 td:before { width: 40%; padding: 15px; display: table-cell; background-color: #ae2573 }
/* Populate the "fake th" */
.responsive-table-1 td:before { content: attr(data-res-th) }
/* Mimic the "td" */
.res-td { width: 60%; padding: 15px; display: table-cell; position: relative; color: #425563 }
/* Add borders */
/* #full-index td { border-bottom: 2px solid #005eb8 } */
/* Mimic border as border-spacing is not working on parent | */
.res-td:before { content: ""; width: 2px; height: calc(100% + 2px); display: block; position: absolute; top: 0; left: 0; background-color: #fff }
/* Mimic separate tables */
.responsive-table-1 tbody tr:not(:last-child) { margin: 0 0 20px }
/* Force long stuff (mainly email addresses) to wrap */
.long-cell-inner { width: 50px; min-width: 100% }
}
@media screen and (max-width: 750px) {
.responsive-table-1:before { padding: 10px }
.res-td { padding: 10px }
#full-index tbody tr:not(:last-child) { margin: 0 0 30px }
}
/* ~~~~~~~~~~ PRINT STYLES ~~~~~~~~~~ */
@media print {
#open-search, #burger, #down-box, #up-box, #home-video-wrapper, footer, #link-blocks, iframe, #nav-column, #uhb-small, .header-lower, #print-button, .body-link {
display: none !important;
}
header {
height: auto;
margin: 0;
padding: 0 0 5mm;
border-bottom: 2pt solid #005eb8
}
#header-inner {
padding: 0
}
#logo {
width: 60mm;
padding: 5mm 0 0
}
#uhb-large {
display: block
}
#content {
padding: 0
}
h2, h3, h4, h5, h6, p {
margin: 0
}
h2, h3, h4, h5, h6 {
padding: 4mm 0 1mm !important
}
h2 {
font-size: 18pt
}
h3 {
font-size: 16pt
}
h4 {
font-size: 14pt
}
h5 {
font-size: 12pt
}
h6, p, li, th, td {
font-size: 10pt !important;
}
p {
padding: 2mm 0 0 !important
}
table, th, td {
border: 1pt solid #005eb8;
}
table {
margin: 2mm 0 0
}
th {
font-family: 'Frutiger LT W01_65 Bold1475746', Arial, Helvetica, sans-serif;
color: #005eb8
}
#content {
padding: 0 !important;
}
.q-and-a .q-and-a-a {
display: block !important;
}
.q-and-a-q {
padding: 0 !important;
}
.q-and-a-q span {
display: none;
}
.q-and-a-a li::before {
display: none;
}
ul {
/* padding-left: 40px !important; */
padding: 1mm 0 0
}
ul > li {
margin: 0 0 0 4mm;
padding: 1mm 0 0 0 !important;
list-style: disc;
}
.half-quote {
font-family: 'Frutiger LT W01_65 Bold1475746', Arial, Helvetica, sans-serif;
width: calc(50% - 2mm);
margin: 3mm 0 4mm 4mm !important;
padding: 0 2mm 2mm;
box-sizing: border-box;
float: right;
color: #005eb8;
border: 2pt solid #005eb8
}
} |