/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #434141;
    font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif;
    font-size: 18px;
}

body {
    line-height: 1.4;
    background: url(../images/elements/canvas-back.jpg) repeat center top;
}

/* heading styles */
h1 { font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-weight: normal; font-size: 45px; margin: 0; }
h2 { font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-weight: normal; font-size: 30px; margin: 0; }
h3 { text-transform: uppercase; font-weight: normal; margin: 0; }
.home-page h1 { color: #D80446; }

/* link styles */
a { text-decoration: none; color: #0073CF; }
a:hover { text-decoration: none; color: #004384; }

a.button-link-orange,
a.button-link-magenta { display: inline-block; vertical-align: top; width: 220px; height: 40px; line-height: 40px; font-size: 18px; text-align: center; text-transform: uppercase; color: white; border-radius: 2px; margin-right: 10px; }
a.button-link-orange { background: #FC670E; }
a.button-link-orange:hover { background: #E93E03; }
a.button-link-magenta { background: #D80446; }
a.button-link-magenta:hover { background: #B00339; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* tables */
table { border: 1px solid #464748; border-collapse: collapse; }
table th,
table td { border: 1px solid #464748; padding: 2px 5px; vertical-align: top; text-align: left; }


/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

div.section-content { position: relative; width: 964px; width: 1000px; margin: 0 auto; }
div.section-content .text { position: relative; z-index: 2000; }
#content { min-width: 964px; min-width: 1000px; overflow: hidden; /* prevent circles from resizing the page */ }

/* header */
header { position: fixed; top: 0; width: 100%; z-index: 3000; background: url(../images/elements/canvas-back.jpg) repeat center top; }
#section-home { height: 145px; }

/* header top */
#header-top { position: relative; background: url(../images/elements/header-top.jpg) repeat-x center top; z-index: 5; }
#header-top .section-content { position: relative; height: 44px; }
#header-top #slogan { position: absolute; }
#header-top #slogan h1 { color: white; font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-transform: uppercase; margin: 0.67em 0; }
#header-top #top-menu { position: absolute; right: 187px; font-size: 15px; line-height: 44px; }
#header-top #top-menu ul { margin: 0; }
#header-top #top-menu ul li { float: left; margin-left: 24px; }
#header-top #top-menu ul li a { text-transform: uppercase; color: #4F4C4D; }
#header-top #top-menu ul li a:hover { color: #2F2D2D; }

/* login drop down */
#login-drop-container { position: absolute; right: 0; top: 11px; width: 155px; }
#login-drop-down { display: none; position: absolute; text-transform: uppercase; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-size: 15px; width: 155px; z-index: 2000; background: #1F987B; border: 1px solid white; }
#login-drop-down a { color: white; text-decoration: none; display: block; }
#login-drop-down a:hover,
#login-drop-down a:active,
#login-drop-down a:focus { color: white; }

#login-drop-down .drop-down-button-link a { display: block; text-align: left; margin: 0 8px; }
#login-drop-down .drop-down-button-link a.drop-icon { background: transparent url(../images/icons/related-sites.png) no-repeat right center; }
#login-drop-down .links { display: none; margin: 0 9px; padding: 4px 0; border-top: 1px solid white; }
#login-drop-down .links ul { margin: 0; padding: 0; list-style-type: none !important; }
#login-drop-down .links ul li { margin: 0; padding: 3px 0; list-style-type: none !important; }

/* header bottom */
#header-bottom {
	background: white;
	-webkit-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.36);
	-moz-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.36);
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.15);
}
#header-bottom .section-content { position: relative; height: 89px; }
#header-bottom #logo { position: absolute; top: 8px; }
#header-bottom #menu { position: absolute; right: 0; top: 31px; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-size: 17px; }


/* banner */
#section-banner .section-content { height: 600px; }
/* circles */
#banner-orange-circle { width: 162px; height: 162px; left: 482px; top: 27px; background: #ffba2a; opacity: 1; filter: alpha(opacity=100); z-index: 1001; }
#banner-purple-circle2 { width: 208px; height: 208px; left: -87px; top: 4px; background: #722a7a; opacity: 0.1; filter: alpha(opacity=10); z-index: 1005; }
#banner-blue-circle2 { width: 306px; height: 306px; left: -11px; top: 3px; background: #16ace4; opacity: 0.5; filter: alpha(opacity=50); z-index: 1006; }
#banner-white-circle { width: 170px; height: 170px; left: 904px; top: 129px; background: #ffffff; opacity: 0.33; filter: alpha(opacity=33); z-index: 1007; }
#banner-pink-circle { width: 215px; height: 215px; left: 570px; top: 338px; background: #cf3a9e; opacity: 0.88; filter: alpha(opacity=88); z-index: 1008; }
#banner-pink2-circle { width: 215px; height: 215px; left: 608px; top: 1px; background: #d03e9f; opacity: 0.78; filter: alpha(opacity=78); z-index: 1009; }
#banner-red2-circle { width: 333px; height: 333px; left: 324px; top: 237px; background: #ea4b3a; opacity: 0.09; filter: alpha(opacity=9); z-index: 1001; }
#banner-red3-circle { width: 248px; height: 248px; left: 732px; top: 52px; background: #e84a38; opacity: 0.84; filter: alpha(opacity=84); z-index: 1010; }
#banner-pink3-circle { width: 105px; height: 105px; left: 891px; top: 196px; background: #cf3a9e; opacity: 0.69; filter: alpha(opacity=69); z-index: 1012; }
#banner-purple-circle { width: 260px; height: 260px; left: -29px; top: 284px; background: #76327f; opacity: 0.9; filter: alpha(opacity=90); z-index: 1013; }
#banner-green-circle { width: 306px; height: 306px; left: -201px; top: 89px; background: #cad815; opacity: 0.85; filter: alpha(opacity=85); z-index: 1014; }
#banner-blue-circle { width: 91px; height: 91px; left: -78px; top: 333px; background: #1b78d0; opacity: 0.93; filter: alpha(opacity=93); z-index: 1015; }
#banner-purple2-circle { width: 162px; height: 162px; left: 446px; top: 311px; background: #722c7b; opacity: 0.1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); z-index: 1002; }
#banner-orange2-circle { width: 471px; height: 471px; left: 82px; top: 4px; background: #fdbd34; opacity: 0.9; filter: alpha(opacity=90); z-index: 1016; }
#banner-red-circle { width: 363px; height: 363px; left: 518px; top: 69px; background: #ea4e3c; opacity: 0.92; filter: alpha(opacity=92); z-index: 1011; }
/* animated */
#banner-orange-circle.animated { width: 162px; height: 162px; left: 482px; top: 27px; }
#banner-purple-circle2.animated { width: 208px; height: 208px; left: -87px; top: 4px; }
#banner-blue-circle2.animated { width: 306px; height: 306px; left: -11px; top: 3px; }
#banner-white-circle.animated { width: 170px; height: 170px; left: 904px; top: 129px; }
#banner-pink-circle.animated { width: 215px; height: 215px; left: 570px; top: 338px; }
#banner-pink2-circle.animated { width: 215px; height: 215px; left: 608px; top: 1px; }
#banner-red2-circle.animated { width: 333px; height: 333px; left: 324px; top: 237px; }
#banner-red3-circle.animated { width: 248px; height: 248px; left: 732px; top: 52px; }
#banner-pink3-circle.animated { width: 105px; height: 105px; left: 891px; top: 196px; }
#banner-purple-circle.animated { width: 363px; height: 363px; left: 518px; top: 69px; opacity: 0.9; filter: alpha(opacity=90); }
#banner-green-circle.animated { width: 306px; height: 306px; left: -201px; top: 89px; }
#banner-blue-circle.animated { width: 471px; height: 471px; left: 82px; top: 4px; opacity: 0.93; filter: alpha(opacity=93); }
#banner-purple2-circle.animated { width: 162px; height: 162px; left: 446px; top: 311px; }
#banner-orange2-circle.animated { width: 250px; height: 250px; left: 768px; top: 282px; opacity: 0.8; filter: alpha(opacity=80); }
#banner-red-circle.animated { width: 177px; height: 177px; left: 897px; top: 213px; opacity: 0.12; filter: alpha(opacity=12); }

/* text */
#banner-text1 a.previous-button { display: block; position: absolute; left: 48px; top: 225px; width: 20px; height: 40px; background: url(../images/buttons/banner-left.png); text-indent: -99999px; }
#banner-text1 .banner-heading { position: absolute; left: 120px; top: 180px; width: 375px; text-transform: uppercase; }
#banner-text1 .banner-heading .first-line { font-size: 68px; text-align: center; color: white; }
#banner-text1 .banner-heading .second-line { font-size: 32px; text-align: center; color: #E03629; margin-top: -18px; line-height: 1; }
#banner-text1 .banner-description { position: absolute; left: 600px; top: 104px; width: 270px; line-height: 1.25; font-size: 20px; text-align: left; text-transform: uppercase; color: white; }
#banner-text1 .banner-description span.alt { color: #ffd375; }
/* animated */
#banner-text1 a.previous-button.animated { left: 700px; top: 360px; opacity: 0; filter: alpha(opacity=0); zoom: 1; }
#banner-text1 .banner-heading.animated { left: 749px; top: 350px; }
#banner-text1 .banner-heading .first-line.animated { font-size: 44px; opacity: 0; filter: alpha(opacity=0); zoom: 1; }
#banner-text1 .banner-heading .second-line.animated { font-size: 21px; opacity: 0; filter: alpha(opacity=0); zoom: 1; }
#banner-text1 .banner-description.animated { left: 920px; top: 240px; font-size: 9px; opacity: 0; filter: alpha(opacity=0); zoom: 1; }

/* hidden banner 2 text */
#banner-text2 a.next-button { display: block; position: absolute; left: 600px; top: 360px; width: 20px; height: 40px; background: url(../images/buttons/banner-right.png); opacity: 0; text-indent: -99999px; }
#banner-text2 .banner-heading { position: absolute; left: -208px; top: 403px; width: 390px; height: 400px; text-transform: uppercase; line-height: 1; }
#banner-text2 .banner-heading .first-line { font-size: 10px; color: #7DD3F2; text-align: center; opacity: 0; }
#banner-text2 .banner-heading .second-line { font-size: 18px; color: white; text-align: center; margin-top: -2%; opacity: 0; }
#banner-text2 .banner-heading .third-line { font-size: 6px; color: #7DD3F2; text-align: center; margin-top: -1%; opacity: 0; }
#banner-text2 .banner-description { position: absolute; left: 40px; top: 364px; width: 270px; height: 400px; font-size: 14px; color: white; text-align: left; text-transform: uppercase; opacity: 0; line-height: 1.25; }
#banner-text2 .banner-description span.alt { color: #6ed5f5; }
/* animated */
#banner-text2 a.next-button.animated { left: 902px; top: 225px; opacity: 1; filter: alpha(opacity=100); zoom: 1; }
#banner-text2 .banner-heading.animated { left: 112px; top: 164px; }
#banner-text2 .banner-heading .first-line.animated { font-size: 50px; opacity: 1; filter: alpha(opacity=100); zoom: 1; }
#banner-text2 .banner-heading .second-line.animated { font-size: 92px; opacity: 1; filter: alpha(opacity=100); zoom: 1; }
#banner-text2 .banner-heading .third-line.animated { font-size: 31px; opacity: 1; filter: alpha(opacity=100); zoom: 1; }
#banner-text2 .banner-description.animated { left: 584px; top: 164px; font-size: 20px; opacity: 1; filter: alpha(opacity=100); zoom: 1; }

/* hide the banner buttons */
#section-banner a.banner-button { display: none !important; }

/* circles */
.circles .circle { position: absolute; border-radius: 50%; z-index: 1000; }
.lt-ie9 .circle { zoom: 1; behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }

/* home page welcome text */
#section-welcome { font-size: 18px; margin-bottom: 40px; }

/* home page news section */
#section-news { margin-bottom: 30px; }
#section-news h1 { margin-bottom: 18px; }

/* jcarousel */
.jcarousel { position: relative; }
.jcarousel .scroll-button { position: absolute; top: 0; width: 30px; height: 158px; background: url(../images/buttons/next.png) no-repeat 0 0; text-indent: -99999px; z-index: 2000; }
.jcarousel .scroll-button:hover { background-position: 0 -158px; }
.jcarousel .jcarousel-prev { background-image: url(../images/buttons/prev.png); left: -55px; }
.jcarousel .jcarousel-next { right: 30px; }

/* news tour */
.news-panel .jcarousel-inner { position: relative; overflow: hidden; width: 912px; height: 330px; }
.news-panel .carousel-items { width: 20000em; position: absolute; margin: 0; padding: 0; }
.news-panel .carousel-item { float: left; width: 294px; height: 330px; margin-right: 15px; margin-right: 25px; }
.news-panel .carousel-item a { color: #222; }
.news-panel .carousel-item a:hover { color: #0073CF; }
.news-panel .carousel-item .thumbnail { display: block; }
.news-panel .carousel-item .description { display: block; margin-top: 15px; line-height: 1.3em; height: 7.8em; overflow: hidden; }


/* footer */
footer { height: 134px; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-size: 15px; background: #E6E6E6; }
footer .section-content { position: relative; z-index: 900; min-height: 70px; padding: 25px 0; color: #717171; background: #E6E6E6; }
footer a { color: #717171; }
footer a.active,
footer a:hover { color: #000000; text-decoration: underline; }
#footer-links a { text-transform: uppercase; }
/* sticky footer */
.footer-placeholder { height: 134px; }
footer.sticky { position: fixed; left: 0; bottom: 0; width: 100%; }

/* social media buttons */
.social-media-buttons { position: absolute; right: 0; top: 15px; }
.social-media-buttons a { display: inline-block; vertical-align: top; width: 43px; height: 43px; background: url(../images/buttons/twitter.png) no-repeat 0 0; text-indent: -99999px; }
.social-media-buttons a:hover { background-position: 0 -43px; }
.social-media-buttons a.twitter-button { background-image: url(../images/buttons/twitter.png); }
.social-media-buttons a.linkedin-button { background-image: url(../images/buttons/linkedin.png); }
.social-media-buttons a.facebook-button { background-image: url(../images/buttons/facebook.png); }
.social-media-buttons a.instagram-button { background-image: url(../images/buttons/instagram.png); }

/* ==========================================================================
   Sub pages
   ========================================================================== */

#section-sub-home { height: 145px; }

/* sub page banner */
#section-sub-banner { /*position: fixed; top: 145px; z-index: 3000; width: 100%;*/ height: 9px; background: #FFC32A url(../images/elements/sub-page-banner.jpg) no-repeat center top; }

/* main panel */
.sub-page .side-panel { position: relative; display: block; float: left; width: 195px; margin: 0 35px 0 0; }
.sub-page .side-panel .text-panel { padding: 20px 23px 30px; background: white; }

.sub-page .main-panel { display: block; width: 737px; width: 770px; margin: 0 0 0 230px; /*overflow: hidden; */ }
.sub-page .main-panel .text-panel { padding: 20px 44px 30px 36px; background: white; }

/* full width layout */
.full-width-layout .main-panel { float: none; width: 100%; }
.full-width-layout .main-panel .text-panel { padding: 20px 44px 30px 36px; }

/* browse panel */
nav.browse-panel { width: 192px; margin: 17px 0 30px; position: absolute; }
nav.browse-panel ul { padding: 0; margin: 0; }
nav.browse-panel ul li a { display: block; font-family: "Gill Sans Light", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; color: #257CC0; padding: 8px 10px; border-top: 1px solid #C2C0C0; background: white; }
nav.browse-panel ul li:first-child a { border-top: none; }
nav.browse-panel ul li.active a,
nav.browse-panel ul li a.current,
nav.browse-panel ul li a:hover { color: white; background: #257CC0; text-decoration: none; }
nav.browse-panel.sticky { position: fixed; top: 162px; z-index: 10000; margin: 0; }

/* related sites panel */
.related-sites-panel { position: absolute; left: 0; top: 0; max-width: 192px; overflow: hidden; font-family: "Gill Sans Light", Helvetica, Arial, sans-serif; padding: 6px 15px 24px; margin-top: 15px; background: white; }
.related-sites-panel h2 { margin: 0 0 8px; }
.related-sites-panel ul { list-style: none; padding: 0; margin: 0; }
.related-sites-panel ul li { padding: 5px 0; margin: 0; }

/* ==========================================================================
   About page
   ========================================================================== */

#about-page h2 { font-size: 32px; }

/* values diagram */
#about-page .values-diagram { position: relative; height: 183px; margin: 42px 0 36px; }
#about-page .values-diagram .values-item { display: block; position: absolute; left: 0; bottom: 0; width: 183px; height: 183px; color: white; background: #B63B6A; overflow: hidden; transition: all 0.2s ease; }
#about-page .values-diagram .values-item .number { display: block; position: absolute; left: 0; top: 0; width: 45px; height: 45px; line-height: 45px; text-align: center; background: #9C244A; }
#about-page .values-diagram .values-item .title,
#about-page .values-diagram .values-item .description {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	-ms-flex: 0 1 auto;
}
#about-page .values-diagram .values-item .title { text-align: center; height: 183px; text-transform: uppercase; font-weight: bold; }
#about-page .values-diagram .values-item .description { position: absolute; left: 0; top: 0; width: 189px; height: 224px; padding: 0 20px 0 48px; text-align: left; line-height: 1.2; background: #B63B6A; opacity: 0; transition: opacity 0.2s ease; }
.lt-ie9 #about-page .values-diagram .values-item .title { display: block; padding-top: 70px; }
.lt-ie9 #about-page .values-diagram .values-item .description { top: 183px; padding-top: 60px; }
/* hover effect */
#about-page .values-diagram .values-item:hover { width: 257px; height: 224px; margin-left: -37px; }
#about-page .values-diagram .values-item:hover .number { z-index: 101; }
#about-page .values-diagram .values-item:hover .description { top: 0; z-index: 100; opacity: 1; }
/* other items */
#about-page .values-diagram .values-item-2 { left: 183px; background: #F13C6E; }
#about-page .values-diagram .values-item-2 .description { background: #F13C6E; }
#about-page .values-diagram .values-item-2 .number { background: #EB2A56; }
#about-page .values-diagram .values-item-3 { left: 366px; background: #F6772C; }
#about-page .values-diagram .values-item-3 .description { background: #F6772C; }
#about-page .values-diagram .values-item-3 .number { background: #F25E1E; }
#about-page .values-diagram .values-item-3 .title { text-align: left; padding: 0 24px; }
#about-page .values-diagram .values-item-4 { left: 549px; background: #FFBB42; }
#about-page .values-diagram .values-item-4 .description { background: #FFBB42; }
#about-page .values-diagram .values-item-4 .number { background: #F39E2C; }
#about-page .values-diagram .values-item-4 .title { text-align: left; padding: 0 24px; }


/* resource groups panel */
#about-page #resource-groups { padding: 14px 0 0; background: #CAD1D4 url(../images/elements/resource-groups-back.jpg) repeat center top; }

/* about dla piper panel */
#about-page #about-dla-piper { padding: 20px 0; color: white; background: #1EB9C5; }
#about-page #about-dla-piper a { color: white; }
#about-page #about-dla-piper a.button-link { display: inline-block; padding: 8px 12px; margin: 16px 0; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; text-transform: uppercase; border: 1px solid white; }
#about-page #about-dla-piper a.button-link:hover { background: white; color: #1EB9C5; }

/* what people say */
#about-page #what-people-say { padding: 20px 0; }
#about-page #what-people-say .people-profiles { margin: 20px -50px 0 0; }
#about-page #what-people-say .people-profiles .people-profile { position: relative; display: inline-block; vertical-align: top; width: 181px; height: 181px; border-radius: 50%; overflow: hidden; margin: 0 9px 15px 0; }
.lt-ie9 #about-page #what-people-say .people-profiles .people-profile img { width: 181px; height: 181px; border-radius: 50%; zoom: 1; behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
#about-page #what-people-say .people-profiles .people-profile span { display: block; }
#about-page #what-people-say .people-profiles .people-profile .description { position: absolute; width: 181px; height: 181px; left: 0; top: 181px; line-height: 1.2; text-align: center; color: white; background: #E02750; }
.lt-ie9 #about-page #what-people-say .people-profiles .people-profile .description { width: 181px; height: 181px; border-radius: 50%; zoom: 1; behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
#about-page #what-people-say .people-profiles .people-profile .description {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	text-align: center;
}
#about-page #what-people-say .people-profiles .people-profile .description .position { font-style: italic; }
#about-page #what-people-say .people-profiles .people-profile .description .city { font-style: italic; }
.lt-ie9 #about-page #what-people-say .people-profiles .people-profile .description .inner { margin-top: 60px; }
#about-page #what-people-say .people-profiles .people-profile:hover .description { top: 0; }
/* people popup dialog */
#about-page #people-popup { position: absolute; left: 136px; top: 118px; width: 360px; height: auto; padding: 52px 62px; color: white; background: #E02750; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
.lt-ie9 #about-page #people-popup { behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
#about-page #people-popup a { color: white; }
#about-page #people-popup a.close-button { display: block; position: absolute; right: 16px; top: 14px; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-size: 30px; line-height: 1;  width: 30px; text-align: center; }
#about-page #people-popup .double-quote { position: absolute; left: 24px; top: 36px; font-size: 60px; }
#about-page #people-popup .author { display: block; }
/* themes */
#about-page #what-people-say .people-profiles .theme-yellow .description,
#about-page #what-people-say #people-popup.theme-yellow { background: #ffb720; }
#about-page #what-people-say .people-profiles .theme-orange .description,
#about-page #what-people-say #people-popup.theme-orange { background: #f68a1e; }
#about-page #what-people-say .people-profiles .theme-light-purple .description,
#about-page #what-people-say #people-popup.theme-light-purple { background: #c43e97; }
#about-page #what-people-say .people-profiles .theme-dark-purple .description,
#about-page #what-people-say #people-popup.theme-dark-purple { background: #5c2781; }
#about-page #what-people-say .people-profiles .theme-red .description,
#about-page #what-people-say #people-popup.theme-red { background: #f14537; }
#about-page #what-people-say .people-profiles .theme-magenta .description,
#about-page #what-people-say #people-popup.theme-magenta { background: #e02750; }
#about-page #what-people-say .people-profiles .theme-light-blue .description,
#about-page #what-people-say #people-popup.theme-light-blue { background: #01b5f0; }
#about-page #what-people-say .people-profiles .theme-dark-blue .description,
#about-page #what-people-say #people-popup.theme-dark-blue { background: #296bb7; }
#about-page #what-people-say .people-profiles .theme-light-green .description,
#about-page #what-people-say #people-popup.theme-light-green { background: #a2b826; }
#about-page #what-people-say .people-profiles .theme-dark-green .description,
#about-page #what-people-say #people-popup.theme-dark-green { background: #26a146; }
#about-page #what-people-say .people-profiles .theme-light-teal .description,
#about-page #what-people-say #people-popup.theme-light-teal { background: #02b6cf; }
#about-page #what-people-say .people-profiles .theme-dark-teal .description,
#about-page #what-people-say #people-popup.theme-dark-teal { background: #028fbd; }


/* diversity team */
#about-page #team { padding: 20px 0 60px; color: #242323; background: #FFB340; }
.team-members { margin-right: -47px; }
.team-members a { color: #242323; }
.team-members a:hover { color: #004384; }
.team-members .team-member { display: inline-block; vertical-align: top; width: 143px; text-align: center; margin-right: 6px; }
.team-members .team-member .thumbnail { margin-bottom: 20px; }
.team-members .team-member .thumbnail img { width: 143px; height: 143px; border-radius: 50%; }
.lt-ie9 .team-members .team-member .thumbnail img { zoom: 1; behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
.team-members .team-member .position { font-style: italic; }


/* ==========================================================================
   Initiatives detail page
   ========================================================================== */

/* initiatives detail page */
#initiative-detail .intro-text { margin-bottom: 30px; }


/* initiatives tabs */
/* tabs */
.tabs { display: inline-block; }
/* Clearfix */
/*.tab-links:after { display: block; clear: both; content:''; }*/
.tabs .tab-links { margin: 0; }
.tabs .tab-links li { display: inline-block; vertical-align: top; list-style: none; width: 153px; height: 165px; background: url(../images/buttons/tab-grey.png) no-repeat 0 0; padding: 0; margin: 0 14px 0 0; }
.tabs .tab-links a { display: block; width: 153px; width: 133px; height: 165px; padding: 0 10px; font-size: 18px; text-align: center; text-transform: uppercase; color: #434141; background: url(../images/buttons/tab-yellow.png) no-repeat 0 -200px; }
.tabs .tab-links .theme-yellow a { background-image: url(../images/buttons/tab-yellow.png); }
.tabs .tab-links .theme-magenta a { background-image: url(../images/buttons/tab-magenta.png); }
.tabs .tab-links .theme-purple a { background-image: url(../images/buttons/tab-purple.png); }
.tabs .tab-links .theme-green a { background-image: url(../images/buttons/tab-green.png); }

/* flexbox */
.tabs { text-align: center; }
.tabs .tab-links { display: inline-block; text-align: center; }
.tabs .tab-links a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	padding-bottom: 12px;
}
.tabs .tab-links a .tab-title { display: inline-block; margin-bottom: 12px; line-height: 1; }
.lt-ie9 .tabs .tab-links a .tab-title { margin-top: 50px; }
.tabs .tab-links a:hover { background-position: 0 0; color: white; }
.tabs .tab-links li.active a,
.tabs .tab-links li.active a:hover { background-position: 0 0; color: white; }
/* tab content */
.tab-content { text-align: left; }
.tab-content .tab { display: none; }
.tab-content .tab.active { display: block; }
/* tab content themes */
.tab-content .theme-yellow h2,
.tab-content .theme-yellow a { color: #f97805; }
.tab-content .theme-yellow a:hover { color: #D7972B; }
.tab-content .theme-magenta h2,
.tab-content .theme-magenta a { color: #D80446; }
.tab-content .theme-magenta a:hover { color: #8A002C; }
.tab-content .theme-purple h2,
.tab-content .theme-purple a { color: #5C2781; }
.tab-content .theme-purple a:hover { color: #29113B; }
.tab-content .theme-green h2,
.tab-content .theme-green a { color: #1EBA67; }
.tab-content .theme-green a:hover { color: #127541; }


/* project list */
.project-list { margin-top: 30px; }
.project-list .project-item { padding: 38px 0 16px; background: url(../images/elements/project-border.png) repeat-x left top; }
.project-list .project-item-left .thumbnail { float: left; width: 321px; padding-bottom: 20px; }
.project-list .project-item-left .details { margin-left: 354px; }
.project-list .project-item-right .thumbnail { float: right; width: 321px; padding-bottom: 20px; }
.project-list .project-item-right .details { margin-right: 354px; }
.project-list .project-item h2.project-title { margin-top: -5px; line-height: 1; }
.project-list .project-item .project-location { font-style: italic; }


/* related team members panel */
#section-related-team { padding: 25px 0 35px; color: #242323; background: #0E949E url(../images/elements/related-team-back.png) repeat-y center top; }

/* related news panel */
#section-related-news { padding: 25px 0 0; background: #FFAA2B url(../images/elements/related-news-back.png) repeat-y center top; }
.related-news-panel { margin: 20px 0; }
.related-news-panel .jcarousel-inner { position: relative; overflow: hidden; width: 737px; height: 330px; }
.related-news-panel .carousel-items { width: 20000em; position: absolute; margin: 0; padding: 0; }
.related-news-panel .carousel-item { float: left; width: 235px; height: 330px; margin-right: 15px; }
.related-news-panel .carousel-item a { color: #242323; }
.related-news-panel .carousel-item a:hover { color: #9f1e04; }
.related-news-panel .carousel-item .thumbnail { display: block; }
.related-news-panel .carousel-item .description { display: block; line-height: 1.3em; height: 9.1em; overflow: hidden; margin-top: 15px; }
/* buttons */
.related-news-panel .scroll-button { width: 30px; height: 126px; }
.related-news-panel .scroll-button:hover { background-position: 0 -126px; }
.related-news-panel .jcarousel-prev { background-image: url(../images/buttons/prev-clear.png); left: -30px; }
.related-news-panel .jcarousel-next { background-image: url(../images/buttons/next-clear.png); right: -30px; right: 3px; }


/* ==========================================================================
   Initiatives landing page
   ========================================================================== */

/* initiatives diagram */
.initiatives-diagram { position: relative; }
.initiatives-diagram a {
	position: absolute;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
	text-align: center;
	color: white;
	font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 1;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 1px solid transparent;
	transition: background 0.4s ease,
				color 0.4s linear;
}
.initiatives-diagram a:hover {
	color: #333;
	background: rgba(255, 255, 255, 0.25);
}
.lt-ie9 .initiatives-diagram a { behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
.lt-ie9 .initiatives-diagram a span { display: block; margin-top: 45%; }
/* initiatives circles */
#initiatives-diagram { width: 717px; height: 524px; background: url(../images/elements/initiatives-diagram.png) no-repeat 0 0; }
#education-and-awareness-circle { top: 201px; left: 131px; width: 284px; height: 284px; }
#education-and-awareness-circle:hover { color: #013f54; }
#partnerships-circle { top: 54px; left: 22px; width: 253px; height: 253px; }
#partnerships-circle:hover { color: #063a14; }
#flexibility-circle { top: 18px; left: 311px; width: 306px; height: 306px; }
#flexibility-circle:hover { color: #973502; }
#pipeline-development-circle { top: 226px; left: 440px; width: 252px; height: 252px; }
#pipeline-development-circle:hover { color: #861d01; }
/* resource groups circles */
#resource-groups-diagram { width: 737px; height: 524px; background: url(../images/elements/resource-groups-diagram.png) no-repeat 0 0; }
#lgbt-circle { top: 18px; left: 24px; width: 258px; height: 258px; }
#lgbt-circle:hover { color: #025d7e; }
#family-circle { top: 254px; left: 509px; width: 225px; height: 225px; }
#family-circle:hover { color: #973502; }
#race-and-culture-circle { top: 179px; left: 86px; width: 289px; height: 289px; }
#race-and-culture-circle:hover { color: #130237; }
#women-circle { top: 84px; left: 297px; width: 306px; height: 306px; }
#women-circle:hover { color: #660109; }
#interfaith-circle { top: 19px; left: 522px; width: 212px; height: 212px; }
#interfaith-circle:hover { color: #410b2e; }

/* ==========================================================================
   News page
   ========================================================================== */

/* sub page top */
#section-sub-page-top {
	margin: -12px auto 20px;
	height: 66px;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(221, 221, 221);
	/* RGBa with 0.6 opacity */
	background: rgba(150, 150, 150, 0.2);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#51969696, endColorstr=#51969696);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#51969696, endColorstr=#51969696)";
}

/* news filter panel */
#section-news-filter .form-heading { float: left; width: 110px; font-size: 18px; line-height: 66px; }
#section-news-filter .filter-field { float: left; width: 236px; padding-top: 18px; }
#section-news-filter .filter-field select { width: 213px; height: 29px; padding: 2px; border: 1px solid #CAC8C9; background: white;}
#section-news-filter .filter-form-buttons { padding-top: 16px; }
#section-news-filter .filter-form-button { display: block; float: left; border: 1px solid #D5D5D5; color: #6A6A6A; width: 100px; height: 29px; font-size: 16px; line-height: 27px; text-align: center; border-radius: 4px; }
#section-news-filter .filter-form-button {
	background: #f2f2f2; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlN2U1ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f2f2f2 0%, #e9e9e9 50%, #e7e5e6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(50%,#e9e9e9), color-stop(100%,#e7e5e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f2f2f2 0%,#e9e9e9 50%,#e7e5e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f2f2f2 0%,#e9e9e9 50%,#e7e5e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f2f2f2 0%,#e9e9e9 50%,#e7e5e6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f2f2f2 0%,#e9e9e9 50%,#e7e5e6 100%); /* W3C */
}
.lt-ie9 #section-news-filter .filter-form-button { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e7e5e6',GradientType=0 ); /* IE6-8 */ behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
#section-news-filter input[type="submit"] { width: 52px; height: 29px; margin-right: 5px; }
.js #section-news-filter input[type="submit"] { display: none; }
#section-news-filter input::-moz-focus-inner { border: 0; padding: 0; }
#section-news-filter .filter-form-button:hover { text-decoration: none; background: white; }

/* news landing page */
#section-news h2-disabled { font-size: 70px; font-weight: normal; color: #326DC3; }
.news-article { min-height: 178px; padding: 11px 30px 11px 12px; margin: 0 -4px 0 -12px; }
#section-news .news-article:first-child {   /*background: url(../images/elements/news-box.png) no-repeat 0 0;*/ }
#section-news .news-article:first-child {
	border: 1px solid #E1E1E1;
	box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.2);
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(254, 246, 244);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.5);
	/* For IE 5.5 - 7*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); 
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)";
	zoom: 1;
}
.news-article .thumbnail { float: left; width: 332px; }
.news-article .description { font-size: 16px; margin-left: 332px; }
.news-article .meta { position: relative; font-size: 16px; margin-bottom: 14px; }
.news-article .meta .date { text-transform: uppercase; }
.news-article .meta .region { position: absolute; top: 0; right: 0; }
.news-article .teaser { font-size: 18px; min-height: 80px; }
.news-article-sep { height: 12px; background: url(../images/elements/news-sep.png) no-repeat center top; margin-bottom: 17px; }
/* read more button */
a.read-more { display: block; width: 94px; height 22px; line-height: 22px; margin: 20px 0; text-align: center; text-decoration: none; border: 1px solid #BCBCBC; border-radius: 3px; color: #5E5E5E; font-size: 15px; }
a.read-more {
	background: #f5f5f5; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1ZjVmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlY2VjZWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f5f5f5 0%, #f1f1f1 50%, #ededed 51%, #ececec 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#f1f1f1), color-stop(51%,#ededed), color-stop(100%,#ececec)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f5f5f5 0%,#f1f1f1 50%,#ededed 51%,#ececec 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f5f5f5 0%,#f1f1f1 50%,#ededed 51%,#ececec 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f5f5f5 0%,#f1f1f1 50%,#ededed 51%,#ececec 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f5f5f5 0%,#f1f1f1 50%,#ededed 51%,#ececec 100%); /* W3C */
}
.lt-ie9 a.read-more {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ececec',GradientType=0 ); /* IE6-8 */ behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
a.read-more:hover { text-decoration: none; color: #2E2E2E; background: white; }
#section-news .pagination-container { margin: 20px 200px 40px; }

/* news detail page */
#section-sub-page-top a.back-to-landing-page { line-height: 60px; font-size: 20px; color: black; padding-left: 22px; background: url(../images/icons/back-to-landing.png) no-repeat left center; }
#section-news-detail { font-size: 17px; }
#section-news-detail h2 { font-size: 70px; font-weight: normal; color: #326DC3; }
#section-news-detail .article-top { /* padding: 11px 30px 0 12px; margin: 0 -4px 40px -12px; background: url(../images/elements/news-detail-box.png) no-repeat 0 0; */ }
#section-news-detail .article-top .thumbnail { float: left; width: 530px; height: 283px; }
#section-news-detail .article-top .meta { position: relative; font-size: 16px; margin-bottom: 14px; }
#section-news-detail .article-top .meta .date { text-transform: uppercase; }
#section-news-detail .article-top .meta .region { position: absolute; top: 0; right: 0; }
#section-news-detail .article-top h3 { font-size: 18px; font-weight: bold; text-transform: none; }
/* other news articles */
#section-news-detail .other-news-articles { margin-bottom: 50px; }
#section-news-detail .other-news-articles h3 { font-size: 33px; font-size: 20px; margin-bottom: 20px; color: #326DC3; }

/* pagination */
.pagination { font-size: 13px; font-weight: normal; position: relative; }
.pagination a { display: block; height: 24px; line-height: 24px; background: #E9E9E9 url(../images/buttons/pagination-button.png) repeat-x 0 0; text-align: center; text-decoration: none; overflow: hidden; border: 1px solid #ADADAD; }
.pagination a:hover { background-position: 0px -24px; border-color: #888888; }
/* rounded corners */
.pagination a { -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px;	border-radius: 3px; }
.pagination .previous-link { position: absolute; left: 0; }
.pagination .next-link { position: absolute; right: 0; }
.pagination .pagination-buttons a { width: 100px; width: auto; padding: 0px 10px; color: #5D5D5D; }
.pagination .pagination-buttons a:hover { color: #484848; }
.pagination .pages-container { float: right; right: 50%; position: relative; }
.pagination .pages { float: right; right: -50%; position: relative; }
.pagination .page-number { float: left; text-align: center; width: 22px; height: 24px; line-height: 24px; margin: 0px 3px; }
.pagination .pages a { color: #1976B8; margin: 0px 3px; }
.pagination .pages a:hover { color: #104E7A; }
.pagination .previous-link-text { padding-left: 9px; background: url(../images/buttons/pagination-prev.gif) no-repeat left center; }
.pagination .next-link-text { padding-right: 9px; background: url(../images/buttons/pagination-next.gif) no-repeat right center; }
.pagination .ellipsis {	float: left; display: block; height: 24px; line-height: 24px; padding: 0px 2px; color: #1976B8; }
/* ie6 and old browsers */
.lt-ie9 .pagination a { zoom: 1; behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
.lt-ie8 .pagination .pagination-buttons a { width: 100px; }
.lt-ie8 .pagination .pages-container { float: none; position: static; margin-left: 150px; }
.lt-ie8 .pagination .pages { float: none; position: static; }


/* ==========================================================================
   Contact page
   ========================================================================== */

/* contact form */
form .validating-row { display: none; }
.js form label .compulsory { color: #0073CF; }
.js form label .non-compulsory { visibility: hidden; }
.js form .row { position: relative; }
.js form label2 { position: absolute; font-size: 14px; left: 11px; top: 7px; color: #777; }

#portrait-contact-form { position: relative; margin: 12px 0 40px; }
#portrait-contact-form .label { float: left; width: 195px; }
#portrait-contact-form .input { margin: left: 205px; }
#portrait-contact-form input.text-field { border: 1px solid #C5C5C5; padding: 2px 10px; width: 508px; height: 29px; margin-bottom: 11px; font-size: 14px; }
#portrait-contact-form textarea { border: 1px solid #C5C5C5; padding: 10px 10px; width: 508px; height: 105px; }
#portrait-contact-form input[type="submit"] { width: 220px; height: 40px; border: none; background: #D80446; color: white; text-transform: uppercase; font-size: 16px; border-radius: 2px; margin-top: 14px; }
#portrait-contact-form input[type="submit"]:hover { background: #B00339; }
#portrait-contact-form textarea { resize: none; }
/* send another button */
#success-message { margin-bottom: 20px; }
#success-message a.send-another { display: block; width: 220px; height: 40px; line-height: 40px; border: none; background: #D80446; color: white; text-align: center; text-transform: uppercase; font-size: 16px; border-radius: 2px; margin: 40px 0; }
#success-message a.send-another:hover { background: #B00339; text-decoration: none; }


/* ==========================================================================
   jQuery UI overwrites
   ========================================================================== */

.ui-widget { font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; font-size: 18px; }
.jquery-dialog { display: none; }   

/* ==========================================================================
   Central CMS overwrites
   ========================================================================== */

/* filter panel */
.central-cms .search-and-filter-panel { background: #E8E8E8; border: 1px solid #D6D6D6; }
.central-cms a.view-all { font-size: 18px; text-transform: uppercase; }

/* forms */
.central-cms form { overflow: hidden; }
.central-cms form .row .input input.text-field { width: 510px; }


/* publication items */
.central-cms .publication-list { margin-right: 0; margin-bottom: 30px; }
.central-cms .publication-item { display: block; position: relative; width: auto; height: 170px; margin: 17px 0; background: white; }
.central-cms .publication-item { 2px 4px 6px 3px rgba(0, 0, 0, 0.15); 2px 4px 6px 3px rgba(0, 0, 0, 0.15); box-shadow: 2px 4px 6px 3px rgba(0, 0, 0, 0.15); }
.central-cms .publication-item a { display: block; height: 170px; }
.central-cms .publication-item a:hover { text-decoration: none; }
.central-cms .publication-item .publication-item-inner { display: block; position: relative; height: 170px; overflow: hidden; }
.central-cms .publication-item .publication-item-inner .image { float: left; width: 170px; }

.central-cms .publication-item img { display: block; position: static; width: 170px; height: 170px; }
.central-cms .publication-item .details { display: block; position: relative; top: 0; height: 170px; font-size: 18px; font-weight: normal; /* margin: 5px 12px 20px; */ padding: 16px 21px 20px; overflow: hidden; margin-left: 170px; }
.central-cms .publication-item .details span { display: block; }
.central-cms .publication-item .details .sub-title { font-size: 20px; }
.central-cms .publication-item .details .meta { font-style: italic; }
.central-cms .publication-item .pdf-marker { display: none; }
.central-cms .publication-item .teaser { display: block; height: 376px; height: 170px; position: absolute; top: 100%; padding: 16px 21px; font-size: 18px; margin-left: 170px; }
.central-cms .publication-item .teaser .teaser-text { display: block; height: 305px; height: 170px; overflow: hidden; }

/* animation */
.central-cms .publication-item-small a img { transition: none; }
.central-cms .publication-item-small a:hover img { top: 0; }
.central-cms .publication-item-small a .details { transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
.central-cms .publication-item-small a:hover .details { top: -100%; }
.central-cms .publication-item-small a .teaser { transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
.central-cms .publication-item-small a:hover .teaser { top: 0; }

/* large publication item */
.central-cms .publication-item-large { width: auto; }
.central-cms .publication-item-large img { width: 170px; height: 170px; }
.central-cms .publication-item-large .details { position: relative; top: 0; bottom: 0; left: 0; height: 170px; max-height: 170px; font-size: 18px; padding: 16px 21px 20px; color: #434141; text-shadow: none; margin-left: 170px; }
.central-cms .publication-item-large .details .meta { color: #818383; }
.central-cms .publication-item-large .details .meta span { display: block; }
.central-cms .publication-item-large .details .meta span.date:after { content: "," }
.central-cms .publication-item-large .teaser { display: block; width: auto; height: 170px; position: absolute; top: 100%; padding: 16px 21px; font-size: 18px; color: #434141; text-shadow: none; background-color: white; margin-left: 170px; }
.central-cms .publication-item-large .teaser .teaser-text { height: 170px; }
.central-cms .publication-item-large .dark-text,
.central-cms .publication-item-large .light-text { color: #434141; }

/* animation */
.central-cms .publication-item-large a .details { transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
.central-cms .publication-item-large a:hover .details { top: -100%; }
.central-cms .publication-item-large a .teaser { transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
.central-cms .publication-item-large a:hover .teaser { top: 0; }

/* publication detail pages */
.central-cms .publication-detail .article-top .details h2 { margin: 10px 0; }
.central-cms .publication-detail h2 { color: #257CC1; }
.central-cms .long-page-buttons .share-buttons { background: #E3E7E8 url(../images/elements/shading.png) repeat 0 0; }


/* event landing page */
.central-cms .event-list { background: transparent; padding: 3px 0 30px 2px; margin-bottom: 20px; margin-right: -18px; }
.central-cms .event-items .event-item { display: inline-block; vertical-align: top; width: 356px; width: 374px; height: 132px; margin-left: 0; margin-right: 18px; margin-top: 15px; line-height: 1.2; background: white; }
.central-cms .event-items .event-item {
	-webkit-box-shadow: 1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow:    1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	box-shadow:         1px 1px 11px 0px rgba(0, 0, 0, 0.35);
}
.central-cms .event-items .event-item a { display: block; position: relative; width: 374px; height: 132px; overflow: hidden; }
.central-cms .event-items .event-item a:hover { text-decoration: none; }
.central-cms .event-items .event-item span { display: block; }
.central-cms .event-items .event-item .event-date { float: left; width: 107px; height: 105px; padding: 1px 5px; margin: 13px; font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-weight: normal; background: #9E0144; text-transform: uppercase; }
.central-cms .event-items .event-item .event-date span { color: white; text-align: center; line-height: 1; }
.central-cms .event-items .event-item .event-date .day { font-size: 42px; margin-top: 18px; }
.central-cms .event-items .event-item .event-date .days { font-size: 32px; margin-top: 22px; margin-bottom: 2px; }
.central-cms .event-items .event-item .event-date .month { font-size: 21px; }
.central-cms .event-items .event-item .event-date .months { font-size: 18px; }
.central-cms .event-items .event-item .details { margin: 13px; }
.central-cms .event-items .event-item .details .title { font-size: 18px; max-height: 86px; overflow: hidden; }
.central-cms .event-items .event-item .details .location { font-style: italic; }
.central-cms .event-items .event-item .description { position: absolute; left: 0; top: 100%; width: 334px; height: 132px; padding: 10px 20px; color: white; overflow: hidden; }
.central-cms .event-items .event-item .description .description-text { height: 112px; height: 108px; overflow: hidden; }

/* animation */
.central-cms .event-items .event-item .description { transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94); }
.central-cms .event-items .event-item:hover .description { top: 0; }
/* colours */
.central-cms .event-items .event-color-1 .event-date,
.central-cms .event-items .event-color-1 .description { background: #9E0144; }
.central-cms .event-items .event-color-2 .event-date,
.central-cms .event-items .event-color-2 .description { background: #C20F47; }
.central-cms .event-items .event-color-3 .event-date,
.central-cms .event-items .event-color-3 .description { background: #E23B35; }
.central-cms .event-items .event-color-4 .event-date,
.central-cms .event-items .event-color-4 .description { background: #FF5517; }
.central-cms .event-items .event-color-5 .event-date,
.central-cms .event-items .event-color-5 .description { background: #FF8927; }
.central-cms .event-items .event-color-6 .event-date,
.central-cms .event-items .event-color-6 .description { background: #FFB236; }


/* events detail page */
.central-cms .event-box { padding: 0; font-size: 18px; background: transparent; }
.central-cms .event-schedules .event-schedule { padding-bottom: 0; }
.central-cms .event-schedules .event-schedule h2 { color: #9E0144; font-size: 24px; font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; }
.event-detail-page a { color: #9E0144; }
.event-detail-page a:hover { color: #6F002F; }


/* events booking form */
.central-cms.event-booking-form .event-box { padding-top: 0; margin: 20px 0; }
.central-cms .event-review-table { background: white; padding: 24px 28px; overflow: hidden; }
.central-cms .event-review-table {
	-webkit-box-shadow: 1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow:    1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	box-shadow:         1px 1px 11px 0px rgba(0, 0, 0, 0.35);
}
.central-cms .event-review-table .header { width: 714px; height: 38px; font-size: 24px; margin-bottom: 14px; }
.central-cms .event-review-table .items .row { width: 714px; margin-bottom: 10px; }
.central-cms .event-review-table .description { float: left; width: 62%; padding-right: 10px; }
.central-cms .event-review-table .price { float: left; width: 20%; padding-right: 10px; }
.central-cms .event-review-table .remove { float: left; width: 14%; }

/* events button panel */
.events-button-panel { width: 155px; padding: 7px 20px 12px !important; overflow: hidden; }
.events-button-panel h1 { font-size: 24px; }
.events-button-panel form { padding: 10px 0; margin: 0; }
.events-button-panel form .row .input { padding: 0; margin: 0; }
.events-button-panel form input[type="submit"] { width: 100%; }


/* member directory */
.central-cms.member-directory .user-profile-list { padding: 22px 0 1px; background: transparent; }
.central-cms.member-directory .user-profile-list .user-profile { width: 43%; }


/* profile page */
.central-cms .notice-board-box { background-color: #E8E8E8; }
.central-cms.profile-page .buttons { margin-bottom: 30px; }

/* notice board */
.central-cms .notice-board-box .notice-board-box-inner .items { font-family: "Gill Sans", "Gill Sans MT", Arial, Helvetica, sans-serif; font-size: 18px; }
.central-cms .notice-board-box .notice-board-box-inner h1 { font-family: "Gill Sans Light", "Gill Sans", "Gill Sans MT", sans-serif; font-size: 28px; }

/* profile detail page */
.profile-detail-outer { margin-top: 20px; }
.profile-detail-box { padding: 20px 28px; background: white; }
.profile-detail-box {
	-webkit-box-shadow: 1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow:    1px 1px 11px 0px rgba(0, 0, 0, 0.35);
	box-shadow:         1px 1px 11px 0px rgba(0, 0, 0, 0.35);
}
.profile-detail-box .row { min-height: 20px; padding: 2px 0; }
.profile-detail-box .row .label { float: left; width: 152px; }
.profile-detail-box .row .detail { margin-left: 152px; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}