/*
Theme Name: Tyndale Baptist Church 2026
Theme URI: http://tyndalebaptist.co.uk/
Description: Theme for Tyndale Baptist Church.
Author: Ian Waddington
Author URI: http://www.ianwaddington.com/
Version: 2.1
Tags: 

License:
License URI:

Copyright (c) Tyndale Baptist Church 2020-2026.  All rights reserved.

*/

body {
	margin: 0;
	padding: 0;
	background-color: #218fcb;
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	font-weight: 400;
	font-size: 1rem;
}

#container {
	min-width: 768px;
	max-width: 1024px;
	width: 100%;
	margin: auto auto;
}

#super-banner {
	position: relative;
	margin: 20px;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	font-size: normal;
	color: #ffffff;
	background-color: #188ae7;
}
#super-banner > h2 {
	font-weight: 800;
	font-size: 1.1em;
	margin: 0px;
}
#super-banner a {
	color: white;
}

#innerContainer {
	position: relative;
	margin: 0px 40px 20px 40px;
	min-height: 400px;
}

#no-banner-title {
	display: none;
}

#header {
	position: relative;
	padding: 0;
	text-align: left;
	height: 140px;
	margin: 20px auto 20px auto;
	overflow: hidden;
}

#banner {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100px;
	margin: 40px 0px 0px 0px;
	overflow: hidden;
	border-radius: 15px;
}

#newsBanner {
	padding: 3px 15px;
	margin-bottom: 20px;
	background-color: white;
	border: 2px solid #76A9D5;
	border-radius: 15px;
}

#sideBar {
	float: right;
	margin-top: 0px;
	position: relative;
	margin-left: 30px;
}
#sideBar div.sideMenu {
	width: 200px;
	float: none;
	font-weight: bold;
	font-size: 1.1em;
	text-align: right;
}
#sideBar div.sideMenu ul {
	list-style: none;
	padding-right: 30px;
	margin: 0px;
}
#sideBar div.sideMenu ul li {
	line-height: 2em;
}
#sideBar div.sideMenu ul li a,
#sideBar div.sideMenu ul li a:visited,
#sideBar div.sideMenu ul li a:active {
	color: #ffffff;
	text-decoration: none;
}

#sideBar div.socialLinks {
	margin: 30px 30px 25px auto;
	width: 120px;
}

#sideBar div.socialLinks.fb {
	padding: 4px 8px;
	background-color: white;
	border-radius: 5px;
}

.sideBar {
	width: 200px;
	float: none;
	background-color: white;
	margin: 0px 0px auto 20px;
	padding: 15px;
	border: 2px solid #76A9D5;
	border-radius: 15px;
}

.sideBar h2 {
	margin: 0px auto 20px auto;
	font-size: 1rem;
	font-weight: bold;
}

div.ko-calendar-event-list > div {
	padding-bottom: 8px;
}

.fullCalendarLink {
	margin-top: 15px;
	border-top: 1px solid #76A9D5;
	padding-top: 5px;
	text-align: right;
	font-style: italic;
}

#articles {
	margin-top: 20px;
}

#articles ul {
	list-style-type: none;
	padding: 0;
	margin-left: 0;
}

#articles ul li {
	padding-bottom: 8px;
}

#sideBarFooter {
	height: 20px;
}

#content {
	margin-right: 230px;
	padding: 15px 15px 30px 15px;
	background-color: white;
	border: 2px solid #76A9D5;
	border-radius: 15px;
}

#content h1 {
	margin: 0px 0px 20px 0px;
	font-size: 1.4em;
	font-weight: bold;
}

#content h2 {
	margin: 20px 0px 20px 0px;
	font-size: 1.2em;
	font-weight: bold;
}


/* Front page */
#frontpage {
	position: relative;
	background-image: url("images/frontpageLogo.png");
	background-repeat: no-repeat;
	background-position: center center;
	height: 680px;
	min-width: 768px;
	font-size: 1rem;
	margin: 0px 0px 20px 0px;
}
#frontpage div.frontpage-main-logo {
	display: none;
}
#frontpage div.socialLinks {
	position: absolute;
	top: 5%;
	right: 20px;
	width: 120px;
	z-index: 20;
}
#frontpage div.socialLinks.fb {
	padding: 4px 8px;
	background-color: white;
	border-radius: 5px;
}
#frontpage div.pagelink {
	position: absolute;
	z-index: 10;
	border: 1px solid #218fcb;
	border-radius: 8px;
	color: #ffffff;
	padding: 8px;
	background-color: #218fcb;
}
#frontpage div.pagelink.active {
	border-color: #b0e0ee;
	color: #ffffff;
}
#frontpage div.pagelink h2 {
	font-weight: 800;
	font-size: 1.3rem;
	margin: 0px;
}
#frontpage div.pagelink a {
	color: inherit;
	text-decoration: none;
}
#frontpage div.pagelink p {
	width: 200px;
	margin: 0px;
	padding: 0px;
}
#frontpage div.pagelink.welcome {
	top: 5%;
	left: 2%;
	color: #ffffff;
}
#frontpage div.pagelink.welcome.active {
	border-color: #ffffff;
}
#frontpage div.pagelink.welcome p {
	width: 180px;
}
#frontpage div.pagelink.item-left-two {
	top: 33%;
	left: 8%;
}
#frontpage div.pagelink.item-left-three {
	top: 63%;
	left: 12%;
}
#frontpage div.pagelink.item-left-three p {
	width: 150px;
}
#frontpage div.pagelink.item-left-four {
	top: 85%;
	left: 5%;
}
#frontpage div.pagelink.item-right-one {
	top: 12%;
	right: 17%;
}
#frontpage div.pagelink.item-right-two {
	top: 35%;
	right: 1%;
}
#frontpage div.pagelink.item-right-two p {
	width: 150px;
}
#frontpage div.pagelink.item-right-three {
	top: 58%;
	right: 5%;
}
#frontpage div.pagelink.search {
	bottom: 0%;
	left: 30%;
}
#frontpage div.pagelink.search h2 {
	text-align: left;
}
#frontpage div.pagelink.search form {
	display: inline;
	margin: 0px;
	padding: 0px;
}
#frontpage div.pagelink.search div.searchBox {
	display: inline;
	vertical-align: top;
	position: relative;
}
#frontpage div.pagelink.search div.searchBox input[type='text'] {
	padding: 0px 20px 0px 3px;
	height: 17px;
	border: 1px solid #cccccc;
	font-size: 12px;
	background-color: #b0e0ee;
}
#frontpage div.pagelink.search.active div.searchBox input[type='text'] {
	background-color: #ffffff;
}
#frontpage div.pagelink.search div.searchBox input[type='image'] {
	padding: 0px 0px 0px 6px;
	border-left: 1px solid #cccccc;
	position: absolute;
	right: 8px;
	top: 2px;
}
#frontpage div.pagelink.item-right-four {
	bottom: 4%;
	right: 15%;
}
#frontpage div.pagelink.item-right-four p {
	width: 160px;
}
#frontpage div.image {
	position: absolute;
	z-index: 5;
}
#frontpage div.image.welcome {
	top: 8%;
	left: 24%;
}
#frontpage div.image.item-left-three {
	top: 62%;
	left: 1%;
}
#frontpage div.image.item-right-two {
	top: 35%;
	right: 200px;
}
#frontpage div.image.item-right-four {
	bottom: 4%;
	right: 5%;
}



/* Events */

#content.events {
	margin-right: 230px;
	padding: 0px;
	background-color: inherit;
	border: none;
}
#content.events div.tilerow {
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
    margin: -10px
}
#content.events div.tile {
	display: table-cell;
	width: 30%;
	padding: 15px;
	vertical-align: top;
	background-color: white;
	border: 2px solid #76A9D5;
	border-radius: 15px;
}
#content.events div.tile.empty {
	background-color: #218fcb;
	border: 2px solid #218fcb;
	border-radius: 15px;
}
#content.events div.tile img.fullwidth {
    width: 100%;
}
#content.events div.tile h2 {
	font-size: 1.2em;
	margin-top: 0px;
}

.searchBox {
    position: relative;
}

.searchBox input[type=text] {
    border: 2px solid #555555;
    height: 17px;
    width: 150px;
}

.searchBox input[type=image] {
	padding: 0px 0px 0px 6px;
	position: absolute;
	top: 2px;
}


/* Thoughts */
#content .active-thought {
	border: 2px solid #218fcb;
	border-radius: 15px;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.5rem;
	margin-top: 2rem;
	margin-bottom: 3rem;
}
#content .excerpt-thought {
	padding-left: 1rem;
	padding-right: 1rem;
}


/* Morning Worship */
#content .previous-services-header {
	margin-top: 3rem;
}


/* Advanced Ads */

#advanced-adds-wrapper {
	clear: both;
	position: relative;
	left: 25%;
	width: 50%;
	margin-top: 50px;
	padding-bottom: 30px;
	text-align: center;
	color: #ffffff;
}

#advanced-adds-wrapper > div {
	border-style: solid;
	border-width: 1px;
	border-color: #ffffff;
	border-radius: 10px;
	background-color: #188ae7;
}

#advanced-adds-wrapper > div > p {
	margin-top: 8px;
	margin-bottom: 8px;
}

#advanced-adds-wrapper a,
#advanced-adds-wrapper a:visited,
#advanced-adds-wrapper a:active {
	color: #ffffff;
	text-decoration: none;
}
#advanced-adds-wrapper a:hover {
	text-decoration: underline;
}


/* Footer */

#footer {
	position: relative;
	clear: both;
	border-top: 1px solid white;
	padding: 5px;
	margin: 30px 40px 15px 40px;
	color: white;
}
#footer::after {
	content: "";
	clear: both;
	display: block;
}
#footer.frontpage {
	max-width: 1024px;
	margin: 15px auto 15px auto;
}
#footer .footer-links {
	float: left;
}
#footer .footer-copyright {
	float: right;
}
#footer span a {
	color: white;
	text-decoration: none;
}
#footer span a:hover {
	text-decoration: underline;
}


/* Utility classes */

div.clear-both {
	clear: both;
}


/* Reponsive design for phone screens */

@media only screen and (max-width: 767px) {
	#container {
		min-width: 0;
	}

	#super-banner {
		margin: 20px 10px;
	}

	#innerContainer {
		margin: 0px 10px 20px 10px;
	}

	#no-banner-title {
		display: block;
		width: 100%;
		margin: 20px 0px;
		text-align: center;
		font-variant: small-caps;
		font-weight: bold;
		font-size: 1.5rem;
		border: 1px solid #ffffff;
		border-radius: 8px;
	}

	#no-banner-title a,
	#no-banner-title a:visited,
	#no-banner-title a:active {
		color: #ffffff;
		text-decoration: none;
	}

	#content {
		float: none;
		margin-right: 0;
	}

	#sideBar {
		float: none;
		margin: 0;
		padding: 0;
	}

	#sideBar > div.side-logo {
		display: none;
	}

	#sideBar div.sideMenu {
		width: 100%;
	}

	#sideBar div.sideMenu ul {
		text-align: center;
	}

	#sideBar div.sideMenu ul {
		padding: 0px;
	}

	#sideBar div.sideMenu ul li {
		display: inline;
		white-space: nowrap;
		padding: 0px 10px;
	}

	#sideBar > div.socialLinks {
		display: none;
	}

	#header {
		height: auto;
		margin: 10px 0px;
	}

	#header > div#banner {
		display: none;
	}

	#footer {
		margin: 30px 20px 15px 20px;
	}
	#footer .footer-links {
		float: none;
		text-align: center;
	}
	#footer .footer-copyright {
		float: none;
		text-align: center;
	}

	/* Home page */
	#frontpage {
		width: 100%;
		min-width: 0;
		height: auto;
		margin: 0;
		background-image: none;
	}
	#frontpage div.frontpage-main-logo {
		display: block;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
	}
	#frontpage div.frontpage-main-logo > img {
		width: 100%;
	}
	#frontpage div.socialLinks {
		position: absolute;
		top: 0;
		right: 20px;
		width: 120px;
	}
	#frontpage div.socialLinks.fb {
		padding: 4px 8px;
		background-color: white;
		border-radius: 5px;
	}
	#frontpage div.pagelink {
		position: relative;
		border-style: none;
		padding: 10px 20px;
	}
	#frontpage div.image {
		display: none;
	}
	#frontpage div.pagelink.welcome,
	#frontpage div.pagelink.item-left-two,
	#frontpage div.pagelink.item-left-three,
	#frontpage div.pagelink.item-left-four,
	#frontpage div.pagelink.item-right-one,
	#frontpage div.pagelink.item-right-two,
	#frontpage div.pagelink.item-right-three,
	#frontpage div.pagelink.search,
	#frontpage div.pagelink.item-right-four {
		top: auto;
		left: auto;
		right: auto;
		color: #ffffff;
		padding-bottom: 20px;
	}
	#frontpage div.pagelink.welcome {
		font-weight: normal;
	}
	#frontpage div.pagelink.welcome p,
	#frontpage div.pagelink.item-left-two p,
	#frontpage div.pagelink.item-left-three p,
	#frontpage div.pagelink.item-left-four p,
	#frontpage div.pagelink.item-right-one p,
	#frontpage div.pagelink.item-right-two p,
	#frontpage div.pagelink.item-right-three p,
	#frontpage div.pagelink.search p,
	#frontpage div.pagelink.item-right-four p {
		width: 100%;
	}
	
	#advanced-adds-wrapper {
		position: relative;
		left: 5%;
		width: 90%;
		margin-top: 20px;
		padding-bottom: 30px;
		text-align: center;
		color: #ffffff;
	}

}



/* WordPress Core ----------------------------------------------------- */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}
/* END WordPress Core ------------------------------------------------- */