/* (C) 2019 Endis Ltd.
No permission is given to use this code, except on an Endis/ChurchInsight website.
ChurchInsight over-ride CSS file for the Creation template.
WARNING - do not edit this file unless you know exactly what you are doing.
You might consider making a BACKUP COPY before you change anything.
If you need advice, contact ChurchInsight Support. */
/* Size of LOGO image */
header .logo-icon img {
height: 40px !important; /* <<< mobile logo height */
}
@media(min-width:467px){header .logo-icon img
{
height: 40px !important; /* <<< tablet logo height */
}}
@media(min-width:992px){
header .logo-icon img {
height: 40px !important; /* <<< desktop logo height */
}
header.HeaderSmall section.slice_Header_L .logo-icon img {
height:40px !important; /* <<< desktop shrunken logo height */
}
}
/* Gap between logo and top/bottom of screen */
header div.logo-container
{
margin-top: 5px !important; /* <<< logo gap from top for mobile/tablet */
}
@media(min-width:992px){
header div.logo-container {
margin-top: 40px !important; /* <<< logo gap from top for desktop */
}
header.HeaderSmall section.slice_Header_L div.logo-container {
margin-top:20px !important; /* <<< logo gap from top for shrunken desktop */
}
}
/* To make more space in the header when menu entries start over-writing the logo, adjust this */
header section.slice_Header_L div.nav-menu {margin-top:10px;}
@media (max-width:900px) {
header section.slice_Header_L div.nav-menu {margin-top:55px;}
}
@media (max-width:900px) {
header.HeaderSmall section.slice_Header_L div.nav-menu {margin-top:20px;}
}
header section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > a {padding-right:5px;}
.slice_Header_L .nav-menu ul.root_menu > li > a {font-size:18px;font-weight:600;}
@media (max-width:1300px) and (min-width:992px) {
header div.logo-container {margin-top:5px !important;}
.slice_Header_L .nav-menu ul.root_menu > li > a {
font-size:16px;padding-left:12px;padding-right:12px;}
}
/* Control header indentation on desktop screens */
section.slice_Header_L div.top-link-wrapper { transition:margin-right 300ms linear; }
section.slice_Header_L div.logo-container {transition:margin-left 300ms linear;}
section.slice_Header_L div.nav-menu {transition:padding-right 300ms linear;}
@media (min-width: 1400px) {
section.slice_Header_L div.top-link-wrapper { margin-right: 50px; }
section.slice_Header_L div.logo-container {margin-left: 50px;}
section.slice_Header_L div.nav-menu {padding-right: 50px;}
}
@media (max-width:1500px) {
header.HeaderSmall section.slice_Header_L div.logo-container {margin-left:10px;}
header.HeaderSmall section.slice_Header_L div.top-link-wrapper {margin-right:10px;}
header.HeaderSmall section.slice_Header_L div.nav-menu {padding-right:10px;}
}
header .logo-icon img {
width: auto !important;
transition:width 300ms linear, height 300ms linear;
}
header div.logo-container {margin-bottom: 0 !important;}
section.slice_Header_L div.nav-menu ul.root_menu ul {
box-shadow: 0px 10px 10px 2px rgba(0,0,0,.12);
}
/* slide show button and round pager button colour */
section.slice_content_page div.main-content div.bx-pager a
{
background-color: #f5f5f5 !important; /* <<< slide show button background color */
border-color: #f5f5f5 !important; /* <<< slide show button border color */
}
section.slice_content_page div.main-content div.bx-pager a:hover,
section.slice_content_page div.main-content div.bx-pager a.active
{
background-color: #1C4226 !important; /* <<< slide show button background color */
border-color: #1C4226 !important; /* <<< slide show button border color */
}
.slice_SlidesFullWidth a.slideButton,
body.OnSmallAppleDevice section.slice_SlidesFullWidth a.slideButton:hover
{
background-color: #1C4226 !important; /* <<< slide show button background color */
border-color: #1C4226 !important; /* <<< slide show button border color */
color: white !important;
}
.slice_SlidesFullWidth a.slideButton:hover
{
background-color:white !important; /* <<< slide show button background color */
border-color: #34495e !important; /* <<< slide show button border color */
color: #34495e !important; /* <<< slide show button color */
}
section.slice_WhatsOnSlidesEB_L div.bx-pager a,
section.slice_WhatsOnSlidesEB_L div.bx-pager a
{
background-color: #1C4226 !important; /* <<< slide show button background color */
border-color: #1C4226 !important; /* <<< slide show button border color */
}
section.slice_WhatsOnSlidesEB_L div.bx-pager a:hover,
section.slice_WhatsOnSlidesEB_L div.bx-pager a.active
{
background-color: #1C4226 !important; /* <<< slide show button background color */
border-color: #1C4226 !important; /* <<< slide show button border color */
}
/* Time and Location logos */
section.slice_ServiceText_L {background-color:white;margin:10px 0 50px;}
section.slice_ServiceText_L div.blocks {
background-color:#faf9f7;border:none;border-radius:10px;
}
section.slice_ServiceText_L div.block2-1,
section.slice_ServiceText_L div.block2-2 {color:inherit;}
.slice_ServiceText_L .block2-1::after, .slice_ServiceText_L .block2-2::after,
.slice_ServiceTextEB_L .block2-1::after, .slice_ServiceTextEB_L .block2-2::after
{
color: #1C4226 !important; /* <<< Clock and Location icon colour */
}
/* Search box */
header div.search-overlay
{
background-color: #1C4226 !important; /* <<< Search box back-ground colour */
}
/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth,
section.slice_WhatsOnSlidesEB_L {overflow-x:hidden;} /* hide anything that pokes outside */
@media (max-width:767px) {
section.slice_SlidesFullWidth div.bannerSlides {
width: 200%; /* double the width, which doubles the height, and then translate so we see the middle 50% */
transform: translateX(-25%);
overflow-x:hidden; /* hide anything that pokes outside */
}
section.slice_WhatsOnSlidesEB_L div.bannerSlides {
width: 150%; /* double the width, which doubles the height, and then translate so we see the middle 50% */
transform: translateX(-16.6667%);
overflow-x:hidden; /* hide anything that pokes outside */
}
/* Adjust the captions back again, so they look normal */
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption {
/* div.bx-wrapper has position:relative set, so this is ok */
left: 25%;
right: 25%;
width: 50%;
overflow-x:hidden; /* hide anything that pokes outside */
}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption {
/* div.bx-wrapper has position:relative set, so this is ok */
left: 16.6667%;
right: 16.6667%;
width: 66.6666%;
overflow-x:hidden; /* hide anything that pokes outside */
}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper {margin-bottom:50px;}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper div.bx-pager a {width:15px;height:15px;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-prev {left:25%;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper a.bx-next {right:25%;}
section.slice_WhatsOn3Buttons_L {padding:30px 10px 0;}
section.slice_WhatsOn3Buttons_L div.bannerSlides {margin-left:0; margin-right:0;}
section.slice_WhatsOnSlidesEB_L {padding-bottom:0;}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-prev {left:16.6667%;}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper a.bx-next {right:16.6667%;}
}
section.slice_SlidesFullWidth div.slideTitle {margin:0 20px;}
/* Fix various issues */
div.endis-jquery-ui div#divOverlay {font-size:17px;line-height:1.3;}
body.OnSmallAppleDevice input {-webkit-appearance: none;}
body.ArticleEditor img.module_icon {width:auto !important;}
section.slice_Footer_L div.footerbar span:last-child:not([id]),
section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; }
/* prevent text-overwriting when desktop menus wrap around */
section.slice_Header_D ul.root_menu ul,
section.slice_Header_L ul.root_menu ul,
section.slice_Header_T ul.root_menu ul {z-index:4;}
section.slice_Footer_D div.footerbar a#footer_cookies::after,
section.slice_Footer_L div.footerbar a#footer_cookies::after { content: "|"; padding: 0 5px; }
@media (min-width: 768px) {
section.slice_Footer_D div.footerbar a#footer_cookies::after,
section.slice_Footer_L div.footerbar a#footer_cookies::after { padding: 0 10px; }
}
.HideElement {display:none !important;}
/* Fix system page ul lists */
section.slice_system_page div.system_content ul {
list-style-type: disc;
padding-left:40px;
}
section.slice_system_page._media_allmedia_aspx ul.media_recording_links,
section.slice_system_page._media_allmedia_aspx ul.media_recording_details {
list-style-type: none;
padding-left:0;
}
section.slice_system_page._media_allmedia_aspx a.system_toggle_advanced,
section.slice_system_page._publisher_search_aspx a.system_toggle_advanced {
margin:0 0 10px;padding:5px 10px; background-color:#1C4226; color:white;
font-size:18px; line-height:1; border-radius:6px;
}
section.slice_system_page._media_allmedia_aspx a.system_toggle_advanced:hover,
section.slice_system_page._publisher_search_aspx a.system_toggle_advanced:hover {
background-color:#1C4226;
}
section.slice_system_page._media_allmedia_aspx div#media_sort,
section.slice_system_page._media_allmedia_aspx ul#media_buttons {
margin:10px 0 5px; padding-left:0;
}
section.slice_system_page._media_allmedia_aspx div#media_sort {margin-right:20px;}
section.slice_system_page._media_allmedia_aspx div#media_sort select {margin:0;}
section.slice_system_page._media_allmedia_aspx ul#media_buttons a {border:none;}
section.slice_system_page._media_allmedia_aspx div.media_option_right a {margin:0;}
/* Fix the new calendar page pop-up */
div.dialog-content.calendar-event-content > h4,
div.dialog-content.calendar-event-content > h4 a.event-location-link {
display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;
}
/* Extra icon using a square background image */
footer i.icomoon-icon-XXXXXX.ImageSocialMediaIcon::after
{ /* Replace url below with actual url of square icon image */
background-image: url(/Images/Content/1495/Templates/46170/images/CommissionLogo.png);
}
section.slice_CommunityText_L > div.container > div.ArticleBody {float:none;margin:0;width:100%;}
section.slice_CommunityText_L div.WelcomeWrapper {
display:flex;flex-flow:row nowrap;justify-content:center;align-items:flex-start;
text-align:left; max-width:1020px; margin:0 auto;
}
section.slice_CommunityText_L div.WelcomeWrapper h1 {
margin:0 0 20px;font-size:40px;line-height:1.1;font-weight:700;
}
section.slice_CommunityText_L div.WelcomeWrapper img {
display:block;margin-right:40px; border-radius:150px;border:6px solid #d5d5d5;
background-color:#d5d5d5;
}
section.slice_CommunityText_L div.WelcomeWrapper a.button,
section.slice_CommunityText_L div.WelcomeWrapper a.button2 {
font-weight:400;line-height:1.3; font-size:15px;
display:inline-block;margin:0;
}
@media (max-width:1100px) {
section.slice_CommunityText_L div.WelcomeWrapper h1 {font-size:26px;}
}
@media (max-width:767px) {
section.slice_CommunityText_L div.WelcomeWrapper {
flex-flow:column nowrap;justify-content:flex-start;align-items:center;
text-align:center;
}
section.slice_CommunityText_L div.WelcomeWrapper img {margin:0 0 20px 0;}
section.slice_CommunityText_L div.WelcomeWrapper a.button,
section.slice_CommunityText_L div.WelcomeWrapper a.button2 {
font-size:15px;padding-left:15px;padding-right:15px;
}
}
@media (max-width:467px) {
section.slice_CommunityText_L div.WelcomeWrapper a.button,
section.slice_CommunityText_L div.WelcomeWrapper a.button2 {
font-size:13px;padding-left:10px;padding-right:10px;
}
}
/* Sort out article text */
section.slice_content_page div.main-content div.ArticleBody span {
font-size:inherit !important;
font-family:inherit !important;
}
section.slice_content_page.WideContent div.main-content {
width:100%;
float:none;
margin-left:0; margin-right:0;
padding-left:10px; padding-right:10px;
background-color:#faf9f7;
}
section.slice_content_page.WideContent div.CenterButton {text-align:center;}
section.slice_content_page.WideContent div.CenterButton a.button {margin:0;}
section.slice_content_page.WideContent div.CenterButton a.button:hover {text-decoration:none;}
/*
UML_ML_1: Universal Mini-Layout Media-List 1
Code is for a 3 > 2 > 1 column layout.
The media-list module outputs a "span.MediaList" wrapper, around all the card div's.
*/
section.slice_content_page div.UML_ML_1 span.MediaList {
display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch;
}
section.slice_content_page div.UML_ML_1 span.MediaList > div { background-color: white; width: 100%; margin:15px 0;} /* 1 column */
@media (min-width: 467px) { /* 2 columns */
section.slice_content_page div.UML_ML_1 span.MediaList > div { width: 49%; margin:15px 0; }
section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */
section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(2n) {margin-left:1%;}
}
@media (min-width: 992px) { /* 3 columns */
section.slice_content_page div.UML_ML_1 span.MediaList > div { width:32%; margin:15px 0;}
section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+1) {margin-left:0;margin-right:0;}
section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */
section.slice_content_page div.UML_ML_1 span.MediaList > div:nth-child(3n) {margin-left:0;margin-right:0;}
}
section.slice_content_page div.UML_ML_1 div.MediaListImage img { display: block; width: 100%; }
section.slice_content_page div.UML_ML_1 div.MediaListImage a { display: block; margin: 0; }
section.slice_content_page div.UML_ML_1 div.MediaListImage a:hover,
section.slice_content_page div.UML_ML_1 div.MediaListTitle a:hover { opacity: 0.6;text-decoration:none; }
section.slice_content_page div.UML_ML_1 div.MediaListTitle { padding: 10px 10px;}
section.slice_content_page div.UML_ML_1 div.MediaListTitle a { font-weight: 700; font-size: larger; text-transform: capitalize;text-align: center;line-height: 1.2; display:block;}
section.slice_content_page div.UML_ML_1 div.MediaListSpeaker,
section.slice_content_page div.UML_ML_1 div.MediaListDate,
section.slice_content_page div.UML_ML_1 div.MediaListBible,
section.slice_content_page div.UML_ML_1 div.MediaListLength
{ padding: 0 10px 10px; font-weight: 400; text-align: center;line-height: 1.3;}
section.slice_content_page div.UML_ML_1 div.MediaListLink {flex:1 1 auto;font-size:0;line-height:1;color:transparent;} /* takes up the height slack */
/* Banner Image code */
section.slice_BannerImage {
position:relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding: 200px 10px;
}
@media(max-width:992px){
section.slice_BannerImage {padding:100px 10px;}
}
section.slice_BannerImage h1 {
position:relative; z-index:0;
line-height:1.2;
margin:0;
text-align:center;
color: white;
font-size: 60px;
text-transform:uppercase;
}
@media(max-width:992px){
section.slice_BannerImage h1 {font-size: 40px;}
}
@media(max-width:467px){
section.slice_BannerImage h1 {font-size: 30px;}
}
section.slice_BannerImage div.BannerImgCustomFields {display:none;}
section.slice_BannerImage div.container {text-align:center;}
section.slice_BannerImage div.OverlayTint {
position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background-color:rgba(0,0,0,0.4);
}
section.slice_content_page.AddTopBorder {border-top:1px solid #dddddd;}
/* Media Landing page search box */
section.slice_MediaSearch div.search-overlay {padding:25px 10px 25px 0; background-color: white; }
section.slice_MediaSearch div.search-overlay input.button, section.slice_MediaSearch div.search-overlay label { display: none; }
section.slice_MediaSearch div.search-overlay div.search-form { position: relative; max-width:600px;}
section.slice_MediaSearch div.search-overlay div.search-form span.top-link { position: absolute; top: 0; right:0 ; background-color: #a97c50; display: inline-block; line-height: 1; padding: 13px; font-size: 15px; transition: color 500ms linear, background-color 500ms linear; cursor:pointer;}
section.slice_MediaSearch div.search-overlay div.search-form span.top-link:hover { background-color: #038e63; }
section.slice_MediaSearch div.search-overlay div.search-form span.top-link img { display: inline-block; padding: 3px 3px 0; }
section.slice_MediaSearch div.search-overlay .search_div { margin: 0 50px 0 0; }
section.slice_MediaSearch div.search-overlay .search_div input.text { height: 47px; margin-bottom: 0px; border: none; background-color: #faf9f7; font-size: 15px; line-height: 1; width: 100%; color: #414141; outline: none; margin-left: 10px; padding-left: 20px; padding-right: 5px; }
@media (max-width: 400px) { section.slice_MediaSearch div.search-overlay div.search-form div.search_div input.text { font-size: 16px; letter-spacing: -0.5px; } }
@media(max-width:467px){
section.slice_content_page div.main-content {padding-left:10px;padding-right:10px;}
}
div.slice_Cookies {
background-color:#1C4226;
color:white;
padding:10px;
text-align:center;
float:none;clear:both;
}
div.slice_Cookies img { margin:0 0 0 10px; float:right !important;}
div.slice_Cookies a {color:white !important; text-decoration:underline;}
@media (max-width:500px) {
div.slice_Cookies {font-size:13px; line-height:1.2;padding:5px 10px;}
}
footer div.FooterSafeGuarding {
text-align:center; width:100%; margin:0 auto 20px; max-width:870px;
font-size:16px; line-height:1.625; font-weight:300;
padding:10px 10px 0 10px;
}
footer div.FooterSafeGuarding h1 {
font-size:22px; line-height:1; font-weight:600; margin:0;
}
footer div.FooterSafeGuarding h1 + p {margin-top:5px;}
footer div.FooterSafeGuarding a {color:#1C4226;}
footer div.FooterSafeGuarding a:hover {color:#34495e;}
footer div.FooterSafeGuarding.BottomBorder {border-bottom:1px solid #cccccc;}
/* Supporter logos */
footer div.LogoWrapper {
border-bottom:1px solid #EFB2B1;
margin:-20px 1.28866% 20px;
}
footer div.LogoWrapper ul {
list-style-type:none;
padding:0;margin:0;
display:flex;
flex-flow: row wrap;
justify-content:center;
align-items:center;
}
footer div.LogoWrapper img {margin:30px 40px 40px 40px;display:block;}
@media (max-width:991px) {
footer div.LogoWrapper img {margin:20px 30px 20px 30px;display:block;}
}
/* Code for the Seeker Boxes */
section.SeekerBox {
position:fixed;right:20px;bottom:20px;width:275px;
border-radius:4px;
background-color:white;
padding:15px;
box-shadow: 0px 0px 4px 4px rgba(128,128,128,.2);
line-height:1.2;
}
section.SeekerBox div.FullSeekerArticle {display:none;}
section.SeekerBox div.SmallSeekerArticle a.HeadLink {
display:block; background-color:transparent; font-size:0; padding:0;
}
section.SeekerBox img.Photo {
position:absolute; right:10px; top:-85px;
width:93px;height:93px;border-radius:50px;
display:block;
}
section.SeekerBox img.Photo,
body.ArticleEditor img.Photo {
background-color:#1C4226;
}
section.SeekerBox img.Close {
width:30px;position:absolute; left:14px; bottom:16px; cursor:pointer;
background-color:#c5bfbf; padding:4px; border-radius:50px;
}
section.SeekerBox img.Close:hover {background-color:#9fa4a7;}
section.SeekerBox.Shrink img.Close {
left:7px; bottom:7px;
}
section.SeekerBox.BigBox img.Close {
width:auto; left:initial; bottom:initial; right:5px; top:5px;
padding:0; background-color:transparent;
}
section.SeekerBox.BigBox img.Close.Outer {display:none;}
section.SeekerBox b,
section.SeekerBox strong {font-weight:700;}
section.SeekerBox div.SmallSeekerArticle a {
font-size:17px; font-weight:700;
display:inline-block;padding:8px 10px 5px 40px;background-color:white;color:#1C4226;
border-radius:7px;
}
section.SeekerBox div.SmallSeekerArticle a:hover {color:#686262;}
body.OnSmallAppleDevice section.SeekerBox div.SmallSeekerArticle a {
background-color:#686262 !important;
}
section.SeekerBox div.VerboseText a {margin-top:10px;}
section.SeekerBox.Shrink {width:195px;padding:5px 5px 5px 10px;width:auto;right:10px;bottom:10px;}
section.SeekerBox.Shrink div.VerboseText,
section.SeekerBox div.NonVerboseText {display:none;}
section.SeekerBox.Shrink div.NonVerboseText {display:block;}
section.SeekerBox.BigBox {
left:0;right:0;bottom:0;top:0;width:100%;height:100vh;border-radius:0;padding:0;
background-color:rgba(0,0,0,0.6); box-shadow:none;
z-index:110;
display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;
}
@media (max-width:900px) {
section.SeekerBox.BigBox {
align-items:flex-end;
}
}
section.SeekerBox.BigBox div.SmallSeekerArticle {display:none;}
section.SeekerBox.BigBox div.FullSeekerArticle {
display:block;position:relative;max-width:840px;
background-color:white;
box-shadow: 0px 0px 20px 5px rgba(0,0,0,.12);
}
section.SeekerBox.BigBox div.FullSeekerArticle > h2 {
background-color:#1C4226;color:white;
padding:5px 5px 5px 20px;margin:0;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.12), 0 2px 10px 0 rgba(0,0,0,.12);
}
section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody {
overflow-y:scroll;max-height:70vh;
padding:10px 10px 20px 10px;
}
@media (max-width:767px) {
section.SeekerBox.BigBox div.FullSeekerArticle > h2 {padding:10px 5px 10px 20px;}
section.SeekerBox.BigBox div.FullSeekerArticle div.ArticleBody {max-height:80vh;}
}
/* On a seeker box page, the reCAPTCHA widget has to move */
div.grecaptcha-badge {
width:237px !important;
height:58px !important;
left:-75px;
right:initial !important;
bottom:0 !important;
}
section.slice_content_page div.main-content div.grecaptcha-badge,
section.SeekerBox div.grecaptcha-badge,
section.slice_system_page div.grecaptcha-badge {
position:static !important;
box-shadow:none !important;
border:1px solid #bbbbbb;
margin-top:10px;
width:256px !important;
height:60px !important;
}
section.slice_system_page div.grecaptcha-badge {margin:10px auto 0;}
footer {background-color:#f4f1ee;}
@media (max-width:1600px) {
footer.WidgetShowing {padding-bottom:50px;}
}
@media (max-width:1400px) {
footer.WidgetShowing {padding-bottom:130px;}
}
footer div.footer-column-3 div.EmailWrapper {display:inline-block;text-align:center;}
@media (max-width:767px) {
footer div.footer-column-1 {margin-top:10px;}
}
section.slice_content_page aside nav div.group_nav_selected {font-weight:700;}
section.slice_content_page aside nav div.group_nav_child {font-weight:400;}
div.endis-jquery-ui-dialog div.media-player-audio h3 {margin:5px 0;}
div.endis-jquery-ui-dialog div.media-player-audio h4 {margin:5px 0;}
/* Fixed Header stuff */
header.HeaderSmall {
position:fixed; left:0; right:0; top:0; width:100%; z-index:100;
}
header.HeaderSmall section.slice_Header_L {
border-bottom:1px solid #EFB2B1;
}
@media (min-width:992px) {
header section.slice_Header_L.SystemPage {
border-bottom:1px solid #EFB2B1;
}
}
header.HeaderSmall.HasCookieBar section.slice_Header_L {
border-bottom:none;
}
header.HeaderSmall section.slice_Header_L div.logo-container .logo-name a {
font-weight:700;
font-size:24px;
}
header section.slice_Header_L div.top-link-wrapper div.search-form,
header section.slice_Header_L div.top-link-wrapper div.search_div {
font-size:0;line-height:0;display:inline-block;
}
header section.slice_Header_L div.top-link-wrapper div.search-form {display:none;}
header div.top-link-wrapper div.search-form input[type=text] {
transition:padding-top 300ms linear, padding-bottom 300ms linear, height 300ms linear;
line-height:1;height:44px;
}
header.HeaderSmall div.top-link-wrapper {position:relative;top:-2px;}
header.HeaderSmall div.top-link-wrapper a.top-link {
padding-top:5px;padding-bottom:5px;
}
header.HeaderSmall section.slice_Header_L div.top-link-wrapper div.search-form input[type=text] {
padding-top:5px;padding-bottom:4px;height:24px;
}
header.HeaderSmall section.slice_Header_L div.top-link-wrapper div.search-form i {top:0;}
header.HeaderSmall section.slice_Header_L div.nav-menu {margin-top:2px;}
header.HeaderSmall section.slice_Header_L div.nav-menu ul.root_menu > li > a {
padding-top:10px;padding-bottom:10px;
}
header div.top-link-wrapper i.journey-icon-search::before {top:1px;}
header div.top-link-wrapper i.InFocus {cursor:pointer;}
header div.MobileMenuMask {
display:none;
background-color:rgba(0,0,0,0.6);
position:fixed;top:0;left:0;width:100%;height:100vh;z-index:58;
}
header div.search-overlay.On + div.MobileMenuMask {display:block;z-index:70;}
header section.slice_Header_L.SlickNavFullWidth {
width:100%;position:absolute;
}
@media (max-width:991px) {
header section.slice_Header_L div.logo-container {
position:absolute; top:0; left:0;
max-width:calc(100% - 100px);
z-index:2;
margin-right:0;
}
}
header section.slice_Header_L div.logo-container .logo-name a {line-height:1;}
header li.MenuSearchOpen i::before {top:2px;right:7px;}
header ul.slicknav_nav li.MenuSearchOpen {display:none !important;}
header div.SearchText {color:white;padding:0 10px 10px;}
header div.search-overlay h1 {color:white;padding-left:10px;}
header div.SearchWrapper {position:relative;padding-right:10px;}
header div.search-overlay .search-close {top:3px; right:10px; font-size:30px;}
@media (min-width:992px) {
header div.search-overlay {
padding:25px 10%;
}
}
@media (min-width:360px) {
header div.SearchText {font-size:16px;}
}
section.slice_content_page div.main-content h1 {margin:0;}
/* Global Fix for slide-show captions */
section.slice_SlidesFullWidth div.slideTitle,
section.slice_SlidesFullWidth div.slideText,
section.slice_WhatsOnSlidesEB_L div.slideTitle,
section.slice_WhatsOnSlidesEB_L div.slideText {
max-width:90%; /* some templates will set this to eg. 1170px */
text-shadow:0 0 2px #00000036;
}
section.slice_SlidesFullWidth a.bx-prev::after,
section.slice_SlidesFullWidth a.bx-next::after,
section.slice_WhatsOnSlidesEB_L a.bx-prev::after,
section.slice_WhatsOnSlidesEB_L a.bx-next::after,
section.slice_image_blocks_3 div.image_block_title_wrapper {
text-shadow:0 0 4px #00000036;
}
section.slice_image_blocks_3 a:hover div.image_block_title_wrapper {text-shadow:none;}
/* Fix media page display. Needs JS fixes applied. */
section.slice_system_page._media_allmedia_aspx input#btnSearchTemplate {
margin:0 0 10px;
height:auto;
}
section.slice_system_page._media_allmedia_aspx div#media_controls,
section.slice_system_page._publisher_search_aspx div#media_controls {
padding-top:10px; padding-right:40px; position:relative;
}
section.slice_system_page._media_allmedia_aspx div#media_controls img,
section.slice_system_page._publisher_search_aspx div#media_controls img {
position:absolute; top:5px; right:5px; cursor:pointer;
width:25px; height:25px;
background-color:#aaaaaa;
border:1px solid #aaaaaa;
border-radius:14px;
flex:none; flex-basis:0;
}
section.slice_system_page._media_allmedia_aspx div.media_option_right a {margin-bottom:10px;}
section.slice_system_page._media_allmedia_aspx div#media_controls div.Line {
width:100%; flex-basis: 100%; border-top:1px solid #bbbbbb;
}
section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB {
width:100%; flex-basis: 100%;
}
section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB + div {margin-left:0;}
section.slice_system_page._media_allmedia_aspx ul#media_buttons {padding-top:4px;}
@media(min-width:1200px) {
section.slice_system_page._media_allmedia_aspx div#media_controls div.LineB {display:none;}
}
/* Fix calendar display. Needs JS fixes applied. */
@media(min-width:1200px) {
section.slice_system_page._calendar_month_aspx div.calendar_week div.calendar_event_time,
section.slice_system_page._calendar_month_aspx div.calendar_week a span
{font-size:14px; line-height:1.2;}
}
section.slice_system_page._calendar_month_aspx select.group-selector {margin:1px 5px 0 10px;}
section.slice_system_page._calendar_month_aspx ul#calendar_buttons li.list-view-toggle i::before {
font-size:48px; line-height:1; position:relative; top:-7px;
}
section.slice_system_page._calendar_month_aspx div.Line {display:none;margin-bottom:10px;}
section.slice_system_page._calendar_month_aspx span.calendar_children_select label {font-size:16px;}
@media(max-width:860px) {
section.slice_system_page._calendar_month_aspx div#calendar_title {float:none;}
section.slice_system_page._calendar_month_aspx select.group-selector {margin:10px 5px 0 16px;}
section.slice_system_page._calendar_month_aspx div#calendar_header {position:relative;}
section.slice_system_page._calendar_month_aspx ul#calendar_buttons {
position:absolute; top:-1px; right:0;margin:0;padding:0
}
section.slice_system_page._calendar_month_aspx div.Line {display:block;}
section.slice_system_page._calendar_month_aspx input#chkIncludeCalendarSubgroups {
margin-left:16px !important;
}
}
section.slice_content_page.NoGroupNav aside.sidebar nav {display:none !important;}
/* Global Fix to ensure certain icons are not bold */
section.slice_content_page aside.sidebar div.sidebar_buttons a.button_1::after,
section.slice_content_page aside.sidebar div.sidebar_buttons a.button_2::after,
section.slice_content_page aside.sidebar div.sidebar_buttons a.button_3::after,
section.slice_content_page aside.sidebar div.sidebar_buttons a.button1::after,
section.slice_content_page aside.sidebar div.sidebar_buttons a.button2::after,
section.slice_content_page aside.sidebar div.sidebar_buttons a.button3::after {font-weight:400;}
/* Social media icons - hide the unused ones */
footer section.slice_FooterTop_L div.footer-column.footer-column-1 a.footer_icon_block[href$="/#"],
footer section.slice_FooterTop_L div.footer-column.footer-column-1 a.footer_icon_block[href$="/#/"]
{display:none;}
section.Xslice_SlidesFullWidth a.bx-pager-link {
box-shadow:0 0 5px 1px #bbbbbb;
}
section.slice_content_page div.main-content ul {
list-style: none; /* Remove default bullets */
}
section.slice_content_page div.main-content > div.ArticleBody ul:not([class]) > li::before {
content: "\2022" !important; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: #1C4226 ; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline; /* Needed to add space between the bullet and the text */
margin-left: -14px; /* Also needed for space (tweak if needed) */
padding:0;
}
section.slice_content_page div.main-content ol {padding-left:25px;}
/* Robin's mobile fixes */
@media (max-width:767px) {
section.slice_CommunityText_L div.WelcomeWrapper img {border-width:4px;}
section.slice_ServiceText_L {margin:10px 10px 20px;}
section.slice_ServiceText_L div.block2-1,
section.slice_ServiceText_L div.block2-2 {font-size:15px;}
section.slice_ServiceText_L div.block2-1 span,
section.slice_ServiceText_L div.block2-2 span {font-size:16px;}
section.slice_ServiceText_L div.block2-1 a,
section.slice_ServiceText_L div.block2-2 a {font-size:14px;}
section.slice_ServiceText_L div.block2-1 {border-width:1px;}
section.slice_image_blocks_3 div.image_blocks ul.gallery_ul li.gallery_li a div.image_block_title
{font-size:32px;}
section.slice_WhatsOn3Buttons_L {background-color:white;}
section.slice_WhatsOn3Buttons_L h1 {font-size:28px;}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption div.slideTitle {font-size:22px;}
section.slice_WhatsOnSlidesEB_L div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption div.slideText {font-size:15px;}
}
@media (max-width:599px) {
div.SermonsAndPDFs div.article_cards > span > div div.articleListTitle a {font-weight:600;}
footer div.FooterSafeGuarding h1 {font-size:18px;}
}
header div.search-overlay div.search_div input.text {margin:0; font-size:16px;}
header div.SearchWrapper {padding-left:10px;}
div.calendar-event-dialog div.calendar-event-content div.event-link a {text-decoration:underline;}
section.slice_system_page._media_allmedia_aspx div.media_recording_file_title,
section.slice_system_page._media_allmedia_aspx div.MobileRecorded {display:none;}
@media (max-width:767px){
section.slice_system_page._media_allmedia_aspx div.system_row.media_recording {
display:block; position:relative; width:100%;
}
section.slice_system_page._media_allmedia_aspx div.media_recording_main {
display:block; width:100%;
}
section.slice_system_page._media_allmedia_aspx div.media_recording_extra {
display:table-cell;width:0;height:0;padding:0;margin:0;border:none;
}
section.slice_system_page._media_allmedia_aspx ul.media_recording_links,
section.slice_system_page._media_allmedia_aspx ul.media_recording_details li {display:none;}
section.slice_system_page._media_allmedia_aspx ul.media_recording_details,
section.slice_system_page._media_allmedia_aspx ul.media_recording_details li {
padding:0;margin:0;
}
section.slice_system_page._media_allmedia_aspx div.MobileRecorded {
display:block; font-size:14px; font-weight:700;
}
}
section.slice_FooterTop_L div.footer-column-2 {margin-right:0;}
section.slice_content_page div.main-content div.bx-wrapper div.bx-pager {padding:0; bottom:5px;}
section.slice_content_page div.main-content div.bx-pager a {width:15px;height:15px;border-radius:8px;}
section.slice_content_page div.main-content div.bx-wrapper a.bx-prev,
section.slice_content_page div.main-content div.bx-wrapper a.bx-next {
background-image:none;
color:transparent;
text-indent:0;
box-shadow:none;
}
section.slice_content_page div.main-content div.bx-wrapper a.bx-prev::before {
font-family: journey;
content:"\e901";
color:white;
font-size:30px;
}
section.slice_content_page div.main-content div.bx-wrapper a.bx-next::before {
font-family: journey;
content:"\e900";
color:white;
font-size:30px;
}
section.slice_content_page aside div.ContentPageImage {text-align:center;line-height:1;font-size:1px;}
section.slice_content_page aside div.ContentPageImage a {
display:block; margin:10px auto 0;line-height:1;font-size:1px;}
section.slice_content_page aside div.ContentPageImage img {
width:100%; max-width:263px; display:block;
}
@media (max-width:768px) {
section.slice_content_page aside div.ContentPageImage a {display:inline-block;}
}
section.slice_content_page aside div.ContentPageImage:last-child {margin-bottom:30px;}
/* above 1200px make the image exactly 263px so it appears crisp */
@media (min-width:1200px) {
section.slice_content_page aside div.ContentPageImage img {width:263px;}
}
/* Code that was in the "New To Church?" article */
section.SeekerBox.BigBox div.FullSeekerArticle table table td:first-child {
vertical-align:middle !important;
}
section.SeekerBox.BigBox div.FullSeekerArticle td.SendButton {padding-left:40.5%;}
@media (max-width:500px) {
section.SeekerBox.BigBox div.FullSeekerArticle td.SendButton {padding-left:0;}
}
section.CoronaVirus {
padding:10px; background-color:#c0392b;
}
section.CoronaVirus div.ArticleBody > div {
text-align:center;
display:flex; flex-flow:row nowrap; justify-content:center; align-items:center;
}
section.CoronaVirus a {display:inline-block; color:white; font-size:24px;line-height:1.3;}
section.CoronaVirus a:hover {text-decoration:underline;}
section.CoronaVirus img {
display:inline-block;
margin-right:10px;
width:50px;
height:auto;
}
@media (max-width:991px) {
section.CoronaVirus a {font-size:18px;}
}
@media (max-width:359px) {
section.CoronaVirus a {font-size:16px;}
}
section.slice_SlidesFullWidth li > a {display:block;}
body.ArticleEditor span.ServicesLocation {
display:block;
margin:20px 0;
font-weight:700;
}
body.ArticleEditor a.ServicesLocation {
display:block;
margin:20px 0;
font-size:smaller;
}
body.ArticleEditor a.footer_icon_block {
display:block; margin:20px 10px; width:100%;
}
body.ArticleEditor a.footer_icon_block i {
position:relative;
z-index:-1;
}
body.ArticleEditor div.WelcomeWrapper h1 {margin-top:10px;}
header ul.root_menu i.journey-icon-search {color:#a1a1a1;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager { display: block; bottom: 0; }
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {
display: block;
font-size:20px; line-height: 1; font-weight:600;
color:white; padding: 8px 12px; margin: 0 3px;
background-color:#34495e;
transition: color 500ms linear, background-color 500ms linear;
width:auto; height:auto;
border:none; border-radius:0;
}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link:hover,
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link.active {
background-color:#faf9f7; color: #34495e;
}
section.SlideShowWrapper {
background-color:white;
}
section.SlideShowWrapper div.container {
width:100%; max-width:1300px;
display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:stretch;
margin-bottom:-60px;
}
section.SlideShowWrapper div.HeroText {
width:70%; margin:10px 0 0; padding:0 0 0 10px;
}
section.SlideShowWrapper div.SlideShowArticle {
width:30%; padding:40px 0; font-size:20px;
flex:1 1 auto;
display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;
background-color:#1C4226; color:white;
position:relative; z-index:10; top:40px;
/* box-shadow:0 0 5px 5px #1C4226; */
}
section.SlideShowWrapper div.SlideShowArticle div.ArticleBody {
max-width:79%; flex:1 1 auto;
}
section.SlideShowWrapper div.SlideShowArticle h1 {
font-size:36px; font-weight:700; line-height:1; margin:0; color:white;
}
section.SlideShowWrapper div.SlideShowArticle a {
color:white; text-decoration:underline; font-size:19px;
}
section.SlideShowWrapper div.SlideShowArticle a:hover {color:#fccd99;}
section.SlideShowWrapper div.SlideShowArticle div.FlexRow {
display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;
}
section.SlideShowWrapper div.SlideShowArticle div.FlexRow img {margin-right:15px;}
@media (max-width:1300px) {
section.SlideShowWrapper div.container {flex-flow:column nowrap; align-items:center;}
section.SlideShowWrapper div.HeroText {
width:100%; max-width:900px; margin:0; padding:30px 20px;
}
section.SlideShowWrapper div.SlideShowArticle {
position:static;
width:100%; max-width:100%; padding:30px 10px;
text-align:center;
}
section.SlideShowWrapper div.SlideShowArticle div.FlexRow {
justify-content:center;
}
section.SlideShowWrapper div.SlideShowArticle div.ArticleBody {
max-width:800px;
}
}
section.SlideShowWrapper div.HeroText div:first-child {
font-weight:300;
font-style:italic;
font-size:52px; line-height:1;
}
section.SlideShowWrapper div.HeroText div:nth-child(2) {
font-weight:400; color:#1C4226;
font-size:175px; line-height:1; margin:-10px 0 20px;
}
section.SlideShowWrapper div.HeroText a {
margin-left:46%; font-weight:600;
}
@media (max-width:991px) {
section.SlideShowWrapper div.HeroText {text-align:center;}
section.SlideShowWrapper div.HeroText a {margin:20px 0 0;}
section.SlideShowWrapper div.HeroText div:first-child {font-size:36px;}
section.SlideShowWrapper div.HeroText div:nth-child(2) {font-size:80px;margin:20px 0;}
}
@media (max-width:467px) {
section.SlideShowWrapper div.HeroText div:nth-child(2) {font-size:60px;}
}
a.PillButton {
display:inline-block;
padding:10px 40px;
background-color:#1C4226;
color:white;
border-radius:50px;
border:1px solid #1C4226;
}
a.PillButton:hover {
background-color:white;
color:#1C4226;
opacity:1;
}
a.ArrowToRight {color:#1C4226;}
a.ArrowToRight:hover {color:#757575;}
a.ArrowToRight::after {
content:' ';
display:inline-block; font-size:17px; line-height:17px;
width:19px; height:17px;
background-image:url(/Images/Content/2155/Templates/63563/images/ArrowRed.png);
background-repeat:no-repeat;
position:relative; top:1px; left:12px;
transition:left 300ms linear;
}
a.ArrowToRight:hover::after {
background-image:url(/Images/Content/2155/Templates/63563/images/ArrowGrey.png);
left:18px;
}
section.IntersectingBlocks {
background-image:none; /* added via JS */
background-color:#1C4226; /* backup color */
background-repeat:repeat;
padding:80px 0;
}
section.IntersectingBlocks div.container {
max-width:1200px;
display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;
}
section.IntersectingBlocks div.container > div:first-child {
width:50%; display:block; position:relative; left:25px;
}
section.IntersectingBlocks div.container > div:last-child {
width:50%; display:block; position:relative; right:25px;
}
section.IntersectingBlocks div.container > div:first-child img {width:100%; display:block;}
section.IntersectingBlocks div.ArticleBody {
width:100%; font-size:20px;
background-color:white; /* box-shadow:0 0 5px 5px white; */
padding:50px 67px;
}
section.IntersectingBlocks div.ArticleBody h1 {font-weight:700;}
section.IntersectingBlocks div.ArticleBody a {
text-decoration:underline; font-size:19px;
}
@media (max-width:1100px) {
section.IntersectingBlocks {padding:40px 20px;}
section.IntersectingBlocks div.container > div:first-child {
left:15px;
}
section.IntersectingBlocks div.container > div:last-child {
right:15px;
}
section.IntersectingBlocks div.ArticleBody {padding:20px;}
}
@media (max-width:991px) {
section.IntersectingBlocks {padding:40px 20px 0;}
section.IntersectingBlocks div.container {
max-width:600px;
flex-flow:column nowrap;justify-content:flex-start;align-items:center;
}
section.IntersectingBlocks div.container > div:first-child {
width:100%; left:0;
}
section.IntersectingBlocks div.container > div:last-child {
width:100%; right:0; top:-40px; padding:0 30px;
}
section.IntersectingBlocks div.ArticleBody {font-size:18px;}
}
@media (max-width:467px) {
section.IntersectingBlocks {padding:30px 15px 0;}
section.IntersectingBlocks div.container > div:last-child {
padding:0 15px;
}
}
section.IntersectingBlocks.Reverse div.container > div:first-child {z-index:1;}
section.IntersectingBlocks.Reverse div.container > div:last-child img {width:100%; display:block;}
@media (max-width:991px) {
section.IntersectingBlocks.Reverse div.container {
flex-flow:column-reverse nowrap;
}
section.IntersectingBlocks.Reverse div.container > div:last-child {
left:0; right:0; top:0; padding:0;
}
section.IntersectingBlocks.Reverse div.container > div:first-child {
left:0; right:0; top:-40px; padding:0 30px;
}
}
@media (max-width:467px) {
section.IntersectingBlocks div.container > div:first-child {
padding:0 15px;
}
section.IntersectingBlocks div.container > div:last-child {
padding:0;
}
}
/* Move the SlideShow button up, and fade in, at the same time */
@keyframes CIA_MoveRedTile {
0% {top:140px; right:100px;}
100% {top:40px; right:0;}
}
@media(min-width:1301px){
section.SlideShowWrapper div.SlideShowArticle {
animation-name: CIA_MoveRedTile;
animation-iteration-count: 1;
animation-duration: 1000ms;
animation-delay:500ms; /* initial delay */
animation-timing-function: linear;
animation-fill-mode:both;
}
}
/* Move the SlideShow button up, and fade in, at the same time */
@keyframes CIA_MoveHeroText {
0% {margin-top:10px;}
100% {margin-top:80px;}
}
@media(min-width:1301px){
section.SlideShowWrapper div.HeroText {
animation-name: CIA_MoveHeroText;
animation-iteration-count: 1;
animation-duration: 1000ms;
animation-delay:500ms; /* initial delay */
animation-timing-function: linear;
animation-fill-mode:forwards;
}
}
@keyframes CIA_DiagMove {
0% {top:100px; right:100px;}
100% {top:0; right:0;}
}
@media(min-width:992px){
/* code needed to prepare the cards for animation */
section.IntersectingBlocks div.ArticleBody {position:relative;top:100px; right:100px;}
/* JS will add the class "RunAnimation" to start the animation going */
section.IntersectingBlocks div.ArticleBody.RunAnimation {
animation-name: CIA_DiagMove;
animation-iteration-count: 1;
animation-duration: 750ms;
animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
animation-timing-function: linear;
animation-fill-mode:forwards; /* keep opacity on at the end */
}
}
@keyframes CIA_DiagMoveReverse {
0% {top:100px; left:100px;}
100% {top:0; left:0;}
}
@media(min-width:992px){
/* code needed to prepare the cards for animation */
section.IntersectingBlocks.Reverse div.ArticleBody {position:relative;top:100px; left:100px;}
/* JS will add the class "RunAnimation" to start the animation going */
section.IntersectingBlocks.Reverse div.ArticleBody.RunAnimation {
animation-name: CIA_DiagMoveReverse;
animation-iteration-count: 1;
animation-duration: 750ms;
animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
animation-timing-function: linear;
animation-fill-mode:forwards; /* keep opacity on at the end */
}
}
/* UML_AL_1: Universal Mini-Layout Article-List 1 */
div.ArticleBody > div.UML_AL_1 {
display: flex; flex-flow: row wrap; justify-content: center; align-items:stretch;
}
div.ArticleBody > div.UML_AL_1 > div { background-color: #f3f3f3; width: 100%; margin:15px 0;} /* 1 column */
@media (min-width: 467px) { /* 2 columns */
div.ArticleBody > div.UML_AL_1 > div { width: 49%; margin:15px 0; }
div.ArticleBody > div.UML_AL_1 > div:nth-child(2n+1) {margin-right:1%;} /* Extra 1% on each */
div.ArticleBody > div.UML_AL_1 > div:nth-child(2n) {margin-left:1%;}
}
@media (min-width: 992px) { /* 3 columns */
div.ArticleBody > div.UML_AL_1 > div { width:32%; margin:15px 0;}
div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+1) {margin-left:0;margin-right:0;}
div.ArticleBody > div.UML_AL_1 > div:nth-child(3n+2) {margin-left:2%;margin-right:2%;} /* extra 4% on the middle one only */
div.ArticleBody > div.UML_AL_1 > div:nth-child(3n) {margin-left:0;margin-right:0;}
}
div.ArticleBody > div.UML_AL_1 div.articleListImage img { display: block; width: 100%; margin:0;}
div.ArticleBody > div.UML_AL_1 div.articleListImage a { display: block; margin: 0; }
div.ArticleBody > div.UML_AL_1 div.articleListImage a:hover,
div.ArticleBody > div.UML_AL_1 div.articleListTitle a:hover { opacity: 0.6;text-decoration:none; }
div.ArticleBody > div.UML_AL_1 div.articleListTitle { padding: 10px 10px;}
div.ArticleBody > div.UML_AL_1 div.articleListTitle a { font-weight: 700; font-size: larger;text-align: center;line-height: 1.2; display:block;text-decoration:none;}
div.ArticleBody > div.UML_AL_1 div.articleListSummary { padding: 0 10px 10px; font-weight: 400; text-align: center;line-height: 1.3;}
div.ArticleBody > div.UML_AL_1 div.articleListLink {
flex:1 1 auto;line-height:1;padding:5px 10px 20px;text-align: center;
} /* takes up the height slack */
div.ArticleBody > div.UML_AL_1 div.articleListLink a {text-decoration:none;}
/* ============================================================
CLIENT ADDITIONS -- The Vine Leeds (Hannah requests, Jul 2026)
============================================================ */
/* --- 1. Hero logo variant ---------------------------------
The hero headline ("We are family / together") and the About Us
pill are hand-authored HTML inside div.HeroText, NOT a module,
so swapping them for a logo image touches no stored Hubb config.
In Body Contents, replace the two text divs and the PillButton
anchor with a single img.HeroLogo, keeping the div.HeroText wrap. */
section.SlideShowWrapper div.HeroText img.HeroLogo {
display:block; width:100%; max-width:520px; height:auto; margin:0;
}
@media (max-width:1300px) { /* hero stacks -- centre the logo */
section.SlideShowWrapper div.HeroText img.HeroLogo { margin:0 auto; }
}
@media (max-width:991px) {
section.SlideShowWrapper div.HeroText img.HeroLogo { max-width:360px; }
}
@media (max-width:467px) {
section.SlideShowWrapper div.HeroText img.HeroLogo { max-width:260px; }
}
/* --- 2. Impact / values columns ---------------------------
Reusable 3-up block for "Our Impact" stats or values, built as
hand-authored HTML pasted into an Article module Source view
(the same approach All Souls used on their Vision + Values page).
The .impact-icon line is optional. Responsive: 1 column, 2 from
600px, 3 from 992px. gap math: 3 cols share two 24px gaps. */
.impact-grid {
display:flex; flex-flow:row wrap; justify-content:center;
align-items:stretch; gap:24px; margin:30px 0;
}
.impact-box {
flex:1 1 100%; max-width:100%; text-align:center;
padding:28px 22px; background-color:#faf9f7; border-radius:8px;
}
@media (min-width:600px) {
.impact-box { flex-basis:calc(50% - 12px); max-width:calc(50% - 12px); }
}
@media (min-width:992px) {
.impact-box { flex-basis:calc(33.333% - 16px); max-width:calc(33.333% - 16px); }
}
.impact-box .impact-icon { display:block; margin-bottom:12px; font-size:44px; line-height:1; color:#1C4226; }
.impact-box .impact-icon img { display:block; margin:0 auto 12px; height:56px; width:auto; }
.impact-box h3 { margin:0 0 8px; font-weight:600; font-size:34px; line-height:1.1; color:#1C4226; }
.impact-box p { margin:0; font-size:16px; line-height:1.4; color:#34495e; }
/* --- 3. Remove the right-hand section list menu -----------
Content pages render a left .main-content column and a right
.sidebar holding the group-navigation list. Client asked to
remove that list site-wide. Hide the sidebar and let the main
column fill the width. Purely presentational: no module config
is touched, and it is reversible by deleting these rules. The
768px breakpoint matches the base float breakpoint so there is
no half-styled dead zone between widths. */
.slice_content_page .sidebar { display:none; }
@media (min-width:768px) {
.slice_content_page .main-content {
float:none; width:auto; max-width:1170px;
margin-left:auto; margin-right:auto;
}
}
/* --- 4. Uniform heading font + colour --------------------
Base template styled only h1 (Montserrat + green #1C4226); h2-h6 were
left to inherit the body font (Nunito Sans) and body colour (navy
#34495e), so headings read as a mix of two fonts and two colours.
Bring h2-h6 into line with h1. Weight 600 matches h1 and the loaded
Montserrat weights (imported at 400 + 600 only, so 700 would render as
faux-bold). Dark-context headings (Welcome box, footer, seeker, search
overlay) keep their own more-specific colour rules and are untouched. */
h2, h3, h4, h5, h6 {
font-weight: 600;
color: #1C4226;
}
/* --- 5. Nav dropdown alignment ---------------------------
Base right-aligns the dropdowns of the last three root items to stop
right-edge menus overflowing, but the search icon (li.MenuSearchOpen)
is itself a root and inflates that count -- so the mid-nav
"Getting involved" dropdown (3rd-from-last) was right-aligned while
"About Us" stayed left. Re-left-align that one dropdown so they match.
The selector matches the base rule's specificity and loads later, so
it wins. Same 992px breakpoint as the base desktop nav.
NOTE: position-based (search icon assumed last root ). If the
top-level menu items change, re-check dropdown alignment. */
@media (min-width:992px) {
.slice_Header_L .nav-menu ul.root_menu > li:nth-last-child(3) > ul {
left: 0 !important;
right: auto !important;
}
}
header ul.root_menu li.MenuSearchOpen a {height:58px!important;}
header section.slice_Header_L div.nav-menu ul.root_menu > li > ul a {
padding-right: 35px !important;
padding-left: 21px !important;
}
/* Hide login and register entry points, group does not accept applications */
.top-link-wrapper a.Login,
.top-link-wrapper a.Bookings,
.slicknav_nav li.ExtraLink:has(a[href*="ogin"]),
.nav-menu li.ExtraLink:has(a[href*="ogin"]) { display: none !important; }
.slicknav_nav li.ExtraLink a[href*="ogin"],
.nav-menu li.ExtraLink a[href*="ogin"] { display: none !important; }
/* --- 6. Login and Register entry points -------------------
This group does not accept applications, so REGISTER is not usable
and LOGIN is not wanted in the public header. Two things to know
before touching this block.
1. Hubb reuses the same classes for both signed-in states:
a.top-link.Login is LOGIN to a guest but LOGOUT to a member, and
a.top-link.Bookings is REGISTER to a guest but WEB OFFICE to an
admin. Hiding by class alone therefore strips Logout and Web
Office as well, so the guest links are matched on href instead.
[href*="ogin"] matches login but not logout (no "ogin" in it).
2. div.logo-container is position:absolute from 992px up, so it adds
nothing to the header height: the band is sized by the floated
top-link-wrapper and nav-menu. Emptying the wrapper collapses the
band by about 44px and the logo then hangs below it. LOGIN is set
to visibility:hidden rather than display:none so its box still
holds the band open, in both states, with no magic min-height.
The first rule restores what an earlier display:none attempt hid.
:not(.MyArea) is essential: My Area must stay hidden to guests by
the base body.guest_user rule, which is not !important. */
header .slice_Header_L div.top-link-wrapper a.top-link:not(.MyArea) {
display: inline-block !important;
}
header .slice_Header_L div.top-link-wrapper a.top-link[href*="ogin"] {
visibility: hidden !important;
}
header .slice_Header_L div.top-link-wrapper a.top-link[href*="egistration"] {
display: none !important;
}