/*
	Theme Name: St Mary's with St. Peter's
	Theme URI: http://www.fellowshipproductions.co.uk/web-development/wordpress/themes
	Description: A bespoke responsive Wordpress theme designed and built for the churches of St. Mary's and St. Peter's in Bury St. Edmunds, Suffolk.
	Version: 2.0.0
	Author: Fellowship Productions Ltd.
	Author URI: http://www.fellowshipproductions.co.uk
	Tags: HTML5, CSS3, Responsive
	
*/

/* IMPORT RESET */
@import url("css/reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS - derived from http://responsive.gs/ */
@import url("css/responsive.gs.12col.css");

/* IMPORT AQUARIUS SLIDER STYLES */
@import url("css/aquarius-slider.css");

/* ---------------------------------------------------------------------- COLOURS -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
	A quick ref of the main colour palette:
	Main Blue				#1a3e88
	Hyperlink Red			#ac0221
	Main text dark grey		#303030
*/

/* ------------------------------------------------------------------- SHARED STYLES ----------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */

* {
	font-weight:			normal;
	margin-top:				0;
}
body{
	background-color:		white;
	color:					#303030;
}
img{
	width:					100%;
	height:					auto;
	border:					0;
}
a{
	text-decoration:		none;
	color:					#ac0221;
}
a:hover{
	text-decoration:		underline;
}
ul {
	padding:				0;
	margin:					0.5em 1em 1em 2em;
	font-size:				1.125em;
	list-style-type:		disc;
}
ol {
	padding:				0;
	margin:					0.5em 1em 1em 2em;
	font-size:				1.125em;
	list-style-type:		decimal;
}
blockquote{
	font-style:				italic;
	margin:					1.5em 1em 2.25em 1em;
	padding:				0 0 0 40px;
	background-image:		url('img/common/blockquote_bg.png');
	background-repeat:		no-repeat;
	background-size:		36px 30px;
	color:					#1a3e88;
	font-size:				1.111111111em;					/* 20px */
}
p{
	font-size:				1.125em;
	margin-bottom:			1em;
}
h1{
	font-size:				3.25em;							/* 52px */
	color:					#1a3e88;
	margin-bottom:			0.384615385em;					/* 20px */
	letter-spacing:			-1px;
}
h2{
	font-size:				2.8125em;						/* 45px */
	color:					#3f5fa2;
	margin-bottom:			0.311111111em;					/* 14px */
	letter-spacing:			-1px;
}
h3{
	font-size:				2.625em;
}
h4{
	font-size:				1.5em;
	color:					#303030;
	margin-bottom:			0.333333333em;					/* 8px */
}
h5{
	font-size:				1.111111111em;					/* 20px */
	margin-bottom:			0.25em;							/* 5px */
}
h6{
	text-transform:			uppercase;
	color:					#b5c3e0;
	font-size:				0.875em;						/* 14px */
}
hr{
	border:					0;
	height:					2px;
	background-color:		#d9d6e8;
}
table{
	border:					1px solid #cccccc;
	font-size:				0.625em;
	margin-top:				1em;
}
	th{
		padding:				0.5em;
		font-size:				1.4em;
		border-right:			1px solid #cccccc;
	}
	th.last-child{
		border-right:			0;
	}
	td{
		padding:				0.5em;
		border-top:				1px solid #cccccc;
		border-right:			1px solid #cccccc;
	}
	td.last-child{
		border-right:			0;
	}
div.image_container{
	line-height:			0;
}
.full_width{
	width:					100%;
}
.row{
	margin:					0 auto;
	display:				block;
	width:					100%;
	max-width:				1216px;
	padding:				0 1.25em;						/* 20px */
}
.no_padding{
	padding:				0 !important;
	line-height:			0;
}
span.button_container{
	display:				block;
	text-align:				right;
	clear:					both;
}
span.button_container_left{
	display:				block;
	text-align:				left;
	clear:					both;
}
a.button{
	background-color:		#ac0221;
	padding:				0.5em 1em;
	color:					white;
	text-transform:			uppercase;
	font-size:				14px;
	display:				inline-block;
	text-align:				center;
	margin-top:				0.625em;						/* 10px */
}
.locked{
	position:				absolute;
	width:					90%;
	bottom:					3%;
}

header #top_nav_container{
	display:				none;
	background-color:		#ccd8f0;
	border-bottom:			2px solid white;
}
	ul#menu-top-navigation li{
		font-size:				0.9375em;					/* 15px */
		text-transform:			uppercase;
	}
		ul#menu-top-navigation li a{
			color:					#303030;
			border-right:			2px solid #303030;
			padding-right:			10px;
		}

header #primary_nav_container{
	display:				none;
	background-color:		#1a3e88;
}
	ul#menu-primary-navigation li{
		font-size:				1.125em;							/* 18px */
		text-transform:			capitalize;
		padding-top:			0.888888889em;						/* 16px */
		padding-bottom:			0.888888889em;						/* 16px */
		margin-right:			0.777777778em !important;			/* 14px */
	}
		ul#menu-primary-navigation li a{
			color:					white;
			border-right:			2px solid #b5c3e0;
			padding-right:			0.777777778em !important;		/* 14px */
		}

ul.desktop_menu{
	margin:					0;
	list-style-type:		none;
	font-size:				0.875em;
}
	ul.desktop_menu li{
		float:					left;
		margin-right:			10px;
		padding:				10px 0;
		/*position:				relative;*/
	}

		ul.desktop_menu li:last-child{
			margin-right:			0;
		}
		ul.desktop_menu li:last-child a{
			border-right:			0 !important;
			padding-right:			0;
		}
	ul.desktop_menu ul.sub-menu{
		display:				none;
		position:				absolute;
		background-color:		#ccd8f0;
		padding:				10px;
		z-index:				200;
		margin:					10px 0 0 -10px;
		font-size:				1em;
	}
		ul.desktop_menu ul.sub-menu li{
			float:					none;
			list-style-type:		none;
			margin:					0;
			border:					0;
			padding:				0;
		}
			ul.desktop_menu ul.sub-menu li a{
				border-right:			0 !important;
				padding-right:			0 !important;
				padding-bottom:			0.5em;
				display:				inline-block;
			}

	ul.desktop_menu li:hover ul.sub-menu{
		display:				block;
	}

	ul.desktop_menu ul.sub-menu ul.sub-menu{
		display:				block;
		position:				relative;
		padding:				0 10px 10px 10px;
		margin-left:			0;
		margin-top:				0;
	}

	ul.desktop_menu.primary ul.sub-menu{
		background-color:		#1a3e88;
		margin-top:				0.888888889em;
		margin-left:			-0.777777778em;
		padding:				0.777777778em;
	}
		ul.desktop_menu.primary ul.sub-menu li{
			padding:				0 !important;
			font-size:				0.95em !important;
		}


#header_container{
	background-image:		url('img/common/header_gradient_bg.jpg');
	background-repeat:		repeat-x;
	background-size:		10px 34px;
	background-color:		#ffffff;
	padding:				1.25em 0 1.25em 0;						/* 20px 0 20px 0 */
}
	#header_container_row{
		background-image:			url('img/common/c_of_e_logo_2x.png');
		background-size:			contain;
		background-repeat:			no-repeat;
		background-position:		center;
		min-height:					170px;
	}
		#header_container_site_details{
			display:					block;
		}
			#header_container_row h2{
				font-size:				2.875em;					/* 46px */
				color:					#1a3e88;
				letter-spacing:			-0.019230769em;				/* -1px */
				margin-bottom:			4px;
				padding-top:			28px;
				text-align:				center;
			}
			#header_container_row h3{
				margin-top:				4px;
				text-align:				center;
			}

#header_container_images{
	width:					327px;
	margin:					10px auto 20px auto;
	float:					none;
}
	.header_thumb{
		width:					155px;
		height:					118px;
		background-color:		white;
		padding:				5px;
		box-shadow:				0 5px 15px rgba(0, 0, 0, 0.55);
		display:				inline-block;
	}
	#stmarys{
		margin-right:				12px;
	}
	#header_container_images:after{
		content:"";
		display: table-cell;
		clear:both;
	}

#header_container_contacts{
	text-align:				center;
}
	#header_container_contacts span{
		font-size:				1.375em;
	}
	#header_container_contacts span.telephone{
		margin-right:			26px;
	}
	#header_container_contacts span a{
		color:					#303030;
	}

#feature{
	padding:					0;
	min-height:						360px;
	margin-top:					10px;
}
#feature_services_and_location{
	min-height:					360px;
	position:					relative;
	color:						white;
	z-index:					100;
}
	h3.feature_tab{
		border-radius:			0.5em 0.5em 0 0;
		width:					49%;
		padding:				10px;
		text-align:				center;
		height:					44px;
		background-color:		white;
		text-transform:			uppercase;
		font-size:				1.25em;
		border:					2px solid #b5c3e0;
		border-bottom:			0;
	}
	h3.feature_tab a,visited{
		color:					#303030;
	}
	h3.feature_tab.current{
		background-color:		#11306f;
		border:					2px solid #11306f;
	}
		h3.feature_tab.current a,visited{
			color:				white;
		}
	h3#services_tab{

	}
	h3#locations_tab{
		position:				absolute;
		top:					0;
		right:					0;
		color:					#303030;
	}
	#feature .textwidget{
		min-height:				316px;
		background-color:		#11306f;
		display:				none;
		padding:				1.25em;
	}
	#feature .shown{
		display:				block !important;
	}
	#feature h4{
		color:					#ccd8f0;
		font-size:				1.375em;					/* 22px */
	}
	#feature ul{
		font-size:				1.0625em;					/* 17px */
	}

#feature_images{

}
#feature_services .textwidget a{
	color: white;
}
	#new{
		overflow:hidden;
	}

	.slider{
		min-height:					360px;
		/*background-image:			url('img/common/placeholder_image3.jpg');*/
		background-image:			url('/wp-content/uploads/2014/04/test_image2-1080x675.jpg');
		background-repeat:			no-repeat;
		background-position:		center;
		background-size:			cover;
		border-radius:				0.5em 0.5em 0 0;
	}

span.bible_verse_chapter_and_verse{
	display:				block;
	text-align:				right;
	font-size:				1.125em;
}

#content_container{
	background-color:		#ffffff;
	padding-top:			1.5em;
	padding-bottom:			1.5em;
	padding-left:			1em;
	padding-right:			1em;
}
	#content_container img{
		border-color:			#1a3e88 !important;
	}

	#content_sidebar_container .widget{
		background-color:		#eeeeee;
		margin:					0 1.25em 1.5625em 0;					/* 0 20px 25px 0 */
		padding:				1.125em;								/* 18px */
		clear:					both;
		overflow:				hidden;
	}
	.textwidget p:last-of-type{
		margin-bottom:			0;
	}
	#content_sidebar_container h4.widgettitle{
		font-size:				1.875em;
		color:					#1a3e88;
	}

.pagination{
	margin:					0 auto;
	text-align:				center;
}
.pagination ul.page-numbers{
	list-style-type:		none;
	margin:					0;
	padding:				0;
	display:				inline-block;
}
.pagination ul.page-numbers li{
	float:					left;
	margin:					0 0 0 4px;
}
.pagination ul.page-numbers li:first-child{
	margin-left:			0
}
.pagination ul.page-numbers li a{
	background-color:		#264e87;
	padding:				5px 8px 2px 8px;
	color:					#eeeeee;
}
.pagination ul.page-numbers li a:hover{
	background-color:		#8dd2e2;
	color:					white;
	text-decoration:		none;
	color:					#264e87;
}
.pagination ul.page-numbers li span.current{
	width:					20px;
	background-color:		#eeeeee;
	border-radius:			2px;
	padding:				5px 8px 2px 8px;
}
.pagination ul.page-numbers li span.dots{
	background-color:		#446eaa;
	padding:				5px 8px 2px 8px;
	color:					#cccccc !important;
}
footer{
	padding-top:				1.25em;
	padding-bottom:				4em;
	font-size:					0.9375em;
}
	footer a{
		color:					#303030;
	}
#footer_nav_container{
	display:				inline-block;
	float:					right;

}
	#footer_container_credits span{
		display:				block;
		text-align:				center;
	}
		#credits{
			width:					60%;
			float:					left;
		}
	#footer_nav_container ul.desktop_menu{
		font-size:					1em !important;
	}
	#footer_nav_container ul.desktop_menu li{
		padding:				0;
	}
		#footer_nav_container ul li a{
			border-right:			2px solid #303030;
			padding-right:			10px;
		}
		#footer_nav_container ul li:last-child a{
			padding-right:			0;
		}

#top_nav{
	text-align:				left;
	background-color:		yellow;
}

#twitter-widget-0{
	width:					100% !important;
}
.iframe_includes{
	padding:				0;
	clear:					both;
	padding-top:			1em;
}

.page_module {
	margin-bottom:			1em;
	position:				relative;
	min-height:				490px;
	line-height:			1.4;
	word-wrap:				break-word;
	background-color:		#e3e5f4;
	padding:				1.5%;

}
.page_module h3{
	font-size:				2.25em;
	line-height:			1;
	margin-top:				0.277777778em;
	margin-bottom:			0.166666667;
}
	.page_module h3 a{
		text-decoration:		none;
	}
	.page_module img{
		width:					100%;
		height:					auto;
	}
#content_container .page_module:nth-child(3n+1){
	margin-left:			0;
	clear:					both;
}

#twitter_feed{
	margin-top: 1rem;
	max-height: 600px;
	overflow-y: scroll;
}

/*
ul.multi_menu{
	display:				inline-block;
}
ul.multi_menu li{
	float:					left;
	padding:				0 20px;
	border-right:			1px solid black;
}
ul.multi_menu li:last-child{
	border-right:			0;
}
ul.multi_menu ul.child, ul.multi_menu ul.grandchild{
	display:				none;
	opacity:				1;
	position:				absolute;
	background-color:		green;
	margin:					0;
	padding:				0;
	width:					200px;
}
ul.multi_menu ul.child li, ul.multi_menu ul.grandchild li{
	float:					none;
	padding:				0;
	position:				relative;

}

li.current a, ul.child li.current a{
	color:					red;
}
ul.child a{
	color:					blue;
}
*/






/* --------------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
@media screen and (max-width:320px){
	.three_col, .four_col{
		width:					93.375%;
	}
}

@media screen and (min-width:321px) and (max-width:567px){
	.three_col{
		width:					43%;
	}
}
@media screen and (min-width:321px) and (max-width:820px){
	.four_col{
		width:					43%;
	}
}
@media screen and (min-width:568px) and (max-width:820px){
	.three_col{
		width:					26.87777778%;
	}
}
@media screen and (max-width:479px){
	.two_col{
		width:					93.83333333%;
	}
}
*/
@media screen and (max-width:320px){
	body{
		font-size:					0.875em;
	}
	#header_container{
		padding:					0.5em 0;						/* 8px 0 */
	}
	#header_container_images{
		width:						267px;
	}
		.header_thumb{
			width:						125px;
		}
	#header_container_row h2{
		padding-top:				0;
		font-size:					2.25em;							/* 36px */
	}
	#header_container_row h3{
		font-size:					2.25em;							/* 36px */
	}
}

@media ( min-width : 568px ) and ( max-width: 768px ){
	#content_container .page_module:nth-child(3n+1){
		margin-left:			1%;
		clear:					none;
	}
}

@media screen and (max-width:600px){
	#header_container_contacts{
		margin-top:					0.5em;
	}
	#header_container_contacts span{
		display:					inline-block;
	}
}

@media screen and (min-width:650px) and (max-width:799px){
	#feature .textwidget{
		width:						48.5%;
		display:					block;
		float:						left;
		min-height:					22.5em;							/* 360px */
		padding-left:				1em;
		padding-right:				1em;
	}
	#feature #feature_locations .textwidget{
		right:						1.5%;
		position:					absolute;
	}
	#feature h3.feature_tab{
		background-color:			#11306f;
		border-color:				#11306f;
	}
	#feature h3.feature_tab a{
		color:						white;
		cursor:						default;
	}
	#feature h3.feature_tab a:hover{
		text-decoration:			none;
	}

	#content_container{
		padding-left:			1.5em;
		padding-right:			1.5em;
	}
	table{
		font-size:				0.875em;
	}
}

@media screen and (max-width:767px){
	#credits{
		float:						none;
		width:						100%;
	}
	#footer_nav_container{
		float:						none;
		display:					block;
	}
	.menu-footer-navigation-container{
		text-align:					center;
		width:						90%;
		margin:						1em auto 0;
	}
	#menu-footer-navigation.desktop_menu{
		text-align:					center;
	}
	#menu-footer-navigation.desktop_menu li{
		float:						none;
		display:					inline;
	}
	#content_sidebar_container .widget{
		margin-right:				0;
	}
}
@media screen and (min-width:768px){
	#footer_container_credits span{
		text-align:				left;
	}
}

@media screen and (max-width:799px){
	#feature_services_and_location{
		padding:					0 1.5%;
		width:						100%;
		margin-bottom:				0.625em;
	}
	h3.feature_tab{
		width:						48.5%;
	}
	h3#locations_tab{
		right:						1.5%;
	}
	#feature_images.span_8{
		width:						100%;
	}
}
@media screen and (max-width:959px){
	footer{
		background-color:			#dce1eb;
	}
}
@media screen and (min-width:800px){
	#content_container{
		padding-left:			2em;
		padding-right:			2em;
	}
	table {
		font-size:				1em;
	}
}

@media screen and (min-width:960px){
	body{
		background-color:			#dce1eb;
	}
	header #top_nav_container{
		display:					block;
	}
	header #primary_nav_container{
		display:					block;
	}	
	#header_container{
		
	}
	#header_container_row{
		background-image:			url('img/common/c_of_e_logo_2x.png');
		background-size:			contain;
		background-repeat:			no-repeat;
		background-position:		10px;
		min-height:					170px;
	}
	#header_container_site_details{
		display:					inline-block;
		float:						left;
	}
			#header_container_row h2{
				font-size:					3em;						/* 48px */
				color:						#1a3e88;
				letter-spacing:				-0.019230769em;				/* -1px */
				padding-top:				28px;
				text-align:					left;
			}
			#header_container_row h3{
				margin-top:					4px;
				text-align:					left;
			}
	#header_container_images{
		float:					right;
		width:					auto;
		margin:					-3px 0 0 0;
	}
	#header_container_contacts{
		text-align:					right;
		clear:						both;
	}

}
@media screen and (min-width:960px) and (max-width:1000px){
	.header_thumb{
		width:					135px;
		height:					101px;
	}
}
@media screen and (min-width:1110px){
	ul.desktop_menu{
		font-size:				1.0625em;
	}
}

@media screen and (min-width:1199px){
	body{
		background-image:					url('img/common/background.jpg');
	}
		#header_container{
			padding-left:				0.9375em;						/* 15px */
		}
			#header_container_row h2{
				font-size:					3.25em;						/* 52px */
			}
		#header_container_site_details{
			margin-left:				9%;
		}
}


/* ------------------------------------------------------------------- WORDPRESS ADMIN --------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------- */



.size-full{
	width:					100%;
	height:					auto;
	line-height:			0;
	/*max-width:				677px;*/
}
.size-medium{
	width:					40%;
	max-width:				300px;
}
.size-thumbnail{
	width:					20%;
	max-width:				150px;
}
.alignright{
	float:					right;
	margin-left:			0.625em;
}
.alignleft{
	float:					left;
	margin-right:			0.625em;
}