/* (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 Catalyst 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
{
width: auto !important;
height: 50px !important; /* <<< mobile logo height */
}
@media(min-width:468px){header .logo-icon img
{
height: 69px !important; /* <<< tablet logo height */
}
}
@media(min-width:1300px){header .logo-icon img
{
height: 69px !important; /* <<< desktop logo height */
}
}
/* Gap between logo and top/bottom of screen */
header div.logo-container
{
margin-top: 5px !important; /* <<< gap from top for mobile/tablet */
margin-bottom: 5px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){
header div.logo-container {
margin-top: 20px !important; /* <<< gap from top for desktop */
margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
}
}
/* To make more space in the header adjust this */
header section.slice_Header_D div.nav-menu {margin-top:70px;}
@media (max-width:1300px) {
header div.logo-container {margin-top:5px !important;}
}
/* ############ Mobile menu colours */
header section.slice_Header_D div.SlickNavCloseIcon
{
color: #99CC01 !important; /* <<< colour of the menu close icon */
}
/* ############ Desktop/Mobile menu hover-over text-link color, top-link icons colour, footer email-link text color */
header .slice_Header_D .nav-menu ul.root_menu > li:last-child > a {padding-right:5px;}
header .slice_Header_D .nav-menu.AddBoxShadow ul.root_menu ul {
box-shadow:2px 2px 3px 0 #d5d5d5,-2px 2px 3px 0 #d5d5d5,0 5px 10px 0 #d5d5d5;
}
/* ############ Search box background colour */
header div.search-overlay
{
background-color: #99CC01 !important; /* <<< Search box background colour */
}
header a.search-close
{
color: white !important; /* <<< Search box close icon */
}
header section.slice_Header_D div.slicknav_menu ul.slicknav_nav {
padding-bottom:10px;border-bottom:none;
}
@media (max-width:991px) {
header section.slice_Header_D .search-overlay .search-close {top:25px;}
}
/* Form responses */
div.endis-jquery-ui div#divOverlay,
div.endis-jquery-ui div#divOverlay input.button {
font-size: 17px !important;
line-height: 1.3 !important;
letter-spacing: 1px !important;
}
/* extra fixes for the header */
header ul a {
line-height: 1 !important;
}
header section.slice_Header_D div.slicknav_menu ul.slicknav_nav a {padding: 10px 20px;}
/* Content page spacing */
@media(max-width:991px){
section.slice_content_page div.main-content {
margin-top:0;
border-top:2px solid #f2f1f6;}
}
/* ############ slide show caption button, and active/hover round pager button colour */
section.slice_SlidesFullWidth a.bx-pager-link:hover,
section.slice_SlidesFullWidth a.bx-pager-link.active
{
background-color: transparent !important; /* <<< slide show button background color */
border-color: #f5f5f5 !important; /* <<< slide show button border color */
}
/* Slide show inactive round pager buttons */
section.slice_SlidesFullWidth a.bx-pager-link
{
background-color: #f5f5f5 !important; /* <<< slide show inactive round button color */
border-color: #f5f5f5 !important; /* <<< slide show inactive round button border color */
}
section.slice_SlidesFullWidth a.slideButton {
border-radius:6px !important;
border-color:#f2f1f6 !important;
transition:300ms background-color linear,300ms color linear !important;}
section.slice_SlidesFullWidth a.slideButton:hover {
background-color:#f2f1f6 !important;
color:#3a4360 !important;
opacity:1 !important;
}
section.slice_SlidesFullWidth .bannerSlides .bx-wrapper .bx-prev::after,
section.slice_SlidesFullWidth .bannerSlides .bx-wrapper .bx-next::after {opacity:0.7;}
section.slice_SlidesFullWidth div.slideTitle {margin:0 20px;}
/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth {overflow: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: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:hidden; /* hide anything that pokes outside */
}
}
@media (max-width:467px) {
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {
display:block;bottom:5px;
}
}
section.slice_content_page {background-color:#f2f1f6;}
section.slice_content_page div.main-content {background-color:white;}
section.slice_content_page div.main-content div.ArticleBody {background-color:white;}
/* ############ Top bar of Group-Nav on the content page */
section.slice_content_page aside nav td.boxout_header_middle a
{
color:white !important;
background-color: #3892c5 !important; /* <<< Group-Nav top bar background colour */
font-weight:700;
text-transform:none !important;
}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1 img {top:4px;padding-right:16px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2 img {top:4px;margin-left:4px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 img {top:7px;margin-left:2px;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 {background-color:white !important; border:1px solid white; color:#3a4360; border-radius:0; margin-bottom:10px; font-weight:700;}
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1:hover,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2:hover,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3:hover {background-color:white !important;color:#f56348;}
@media (max-width:991px) {
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton1,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton2,
section.slice_content_page .sidebar .sidebar_buttons a.SBbutton3 {margin:0 20px 10px;}
}
section.slice_content_page .sidebar .sidebar_buttons a img.IconDark,
section.slice_content_page .sidebar .sidebar_buttons a:hover img.IconLight {display:inline-block;}
section.slice_content_page .sidebar .sidebar_buttons a img.IconLight,
section.slice_content_page .sidebar .sidebar_buttons a:hover img.IconDark {display:none;}
/* Fix various issues */
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; }
@media(max-width:467px){
section.slice_content_page nav {padding:0 10px;}
}
section.slice_WelcomeArticle.TopVersion {background-color:#f2f1f6;}
section.slice_Gallery8_L {padding-top:0;}
/* code for > and < on desktop menus */
section.slice_Header_D div.nav-menu ul.root_menu > li ul li.has_sub_menu::after,
section.slice_Header_D div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before,
section.slice_Header_D div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before
{top:4px;}
section.slice_Header_D div.nav-menu ul.root_menu > li ul li.has_sub_menu:hover::after,
section.slice_Header_D div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu:hover::before,
section.slice_Header_D div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu:hover::before
{color:white;}
section.slice_Header_D div.top-link-wrapper {
margin-top:0;}
section.slice_Header_D div.top-link-wrapper a.top-link {
margin:0;
}
/* prevent text-overwriting when desktop menus wrap around */
section.slice_Header_D ul.root_menu ul {z-index:4;}
section.slice_Header_D ul.root_menu > li > a {text-transform:uppercase; font-weight:700;}
section.slice_Header_D .nav-menu {font-size:0;}
header div.ColourBand {
font-size:0;
height:8px;
background-image:url(/Images/Content/2155/Templates/52452/images/ColourBand.png);
background-repeat:repeat-y;
background-size:100% auto;
}
.slice_content_page .sidebar .sidebar_buttons a[class^="button"] {
font-size:18px; font-weight: 600; color: #fff; letter-spacing: 1px; padding: 16px 0 16px 75px;
display: block; border: none; margin-bottom: 4px; white-space: nowrap; word-spacing: 0.375em;
position: relative; border-radius:0;}
.slice_content_page .sidebar .sidebar_buttons a[class^="button"]:hover { opacity: 1; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"]::after { font-family: journey; position: absolute; top: 18px; left: 22px; font-size: 2.5rem; color: #fff; opacity: 0.5; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_1 { background-color: #767676; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_1::after { content: "\e919"; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_2 { background-color: #99CC01; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_2::after { content: "\e910"; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_3 { background-color: #a949b2; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_3::after { content: "\e907"; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_1:hover { background-color: #565656; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_2:hover { background-color: #79aC00; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_3:hover { background-color: #7d2e94; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"] { font-size: 18px; letter-spacing: 0.5px; padding: 15px 0 15px 62px; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"]::after { font-size: 2.5rem; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_1::after { top: 8px; left: 16px;font-size:30px }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_2::after { top: 11px; left: 18px; }
.slice_content_page .sidebar .sidebar_buttons a[class^="button"].button_3::after { top: 9px; left: 18px; }
section.slice_WelcomeArea {display:flex;flex-flow:row nowrap;width:100%;background-color:#f2f1f6;}
section.slice_WelcomeArea div.WhiteBox,
section.slice_WelcomeArea div.GreyBox {width:50%;padding:40px 10px 50px 10px;}
@media (min-width:992px) {
section.slice_WelcomeArea div.WhiteBox {padding-right:0;}
section.slice_WelcomeArea div.WhiteBox > div {border-right:2px solid #d1dbdf;}
}
section.slice_WelcomeArea div.WhiteBox {
background-color:#f2f1f6;text-align:center;
}
section.slice_WelcomeArea div.WhiteBox div.ArticleBody {max-width:450px;margin:0 auto;}
section.slice_WelcomeArea div.WhiteBox h1 {margin-bottom:10px;}
section.slice_WelcomeArea div.WhiteBox a.button {margin:25px 0 0;}
section.slice_WelcomeArea div.GreyBox {
background-color:#f2f1f6;display:flex;flex-flow:column nowrap;justify-content:center;
}
section.slice_WelcomeArea div.GreyBox img {display:block;margin:4px 30px 0 0;}
section.slice_WelcomeArea div.GreyBox div.block2 {display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start;max-width:460px;margin:0 auto 0 40px;}
section.slice_WelcomeArea div.GreyBox div.block2:last-child {margin-top:40px;}
section.slice_WelcomeArea div.GreyBox span {display:block;font-weight:700;}
section.slice_WelcomeArea div.blockBorder {
display:none;
font-size:0;width:80%;margin:0 auto;border-bottom:2px solid #d1dbdf;
}
@media (max-width:991px) {
section.slice_WelcomeArea {flex-flow:column nowrap;}
section.slice_WelcomeArea div.WhiteBox {width:100%;padding:30px 10px 40px 10px;}
section.slice_WelcomeArea div.GreyBox {width:100%;padding:30px 10px 40px 20px;}
section.slice_WelcomeArea div.GreyBox div.block2 {margin:0 auto;width:430px;}
section.slice_WelcomeArea div.GreyBox img {margin:4px 20px 0 0;}
section.slice_WelcomeArea div.blockBorder {
display:block;
}
}
@media (max-width:500px) {
section.slice_WelcomeArea div.GreyBox div.block2 {width:100%;}
}
section.slice_CloserLook .article_cards > div:nth-of-type(3n+1) {background-color:#99CC01;}
section.slice_CloserLook .article_cards > div:nth-of-type(3n+2) {background-color:#3892c5;}
section.slice_CloserLook .article_cards > div:nth-of-type(3n+3) {background-color:#963f9e;}
section.slice_CloserLook ul {display:none;}
.slice_FooterTop_D .footer-column.footer-column-1 a i.icomoon-icon-youtube::after { background-color: #ff0000; border: 8px solid #ff0000; }
.slice_FooterTop_D .footer-column.footer-column-1 a:hover i.icomoon-icon-youtube::after { color: #ff0000; }
.slice_FooterTop_D .footer-column.footer-column-1 a i.icomoon-icon-vimeo::after { background-color: #1ab7ea; border: 8px solid #1ab7ea; }
.slice_FooterTop_D .footer-column.footer-column-1 a:hover i.icomoon-icon-vimeo::after { color: #1ab7ea; }
/* Slide-show bottom buttons */
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:30px;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {
width:18px;height:18px;border-radius:9px;border-width:2px;margin:0 6px;
}
@media (max-width:1200px) {
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager {bottom:10px;}
section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper div.bx-pager a.bx-pager-link {width:14px;height:14px;border-radius:7px;}
}
/* Fix system page ul lists */
section.slice_system_page div.system_content ul {
list-style-type: disc;
padding-left:40px;
}
/* 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;
}
/* make sure these are not set */
html,body {height:initial;}
header section.slice_Header_D div.top-link-wrapper a:last-child,
header section.slice_Header_L div.top-link-wrapper a:last-child
{padding-top:19px;}
/* Change the colors of a footer-icon */
footer i.icomoon-icon-XXXXX::after {
background-color: blue !important;
border-color: blue !important;
}
footer a:hover i.icomoon-icon-XXXXX::after {
color:blue !important;
}
/* 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_content_page div.main-content div.DocFiles,
section.slice_content_page div.main-content div.AVFiles {
margin-top:30px;
}