/* =============================================================================
   Mobile Styles
   ========================================================================== */
 
@media only screen and (max-width: 259px) {
	
	/* Whos Who - one column */
	#content .whos-who li {
		width: 100%;
		margin-right: 0 !important;
	}
	
}


@media only screen and (min-width: 260px) and (max-width: 499px) {

	/* Whos Who - two columns */
	#content .whos-who li {
		width: 48%;
		margin-right: 2% !important;
	}
	#content .whos-who li:nth-of-type(2n+3) { clear: left; }
	
}


@media only screen and (min-width: 500px) and (max-width: 700px) {

	/* Whos Who - three columns */
	#content .whos-who li {
		width: 31.33333333333333%;
		margin-right: 2% !important;
	}
	#content .whos-who li:nth-of-type(3n+4) { clear: left; }
	
}

@media only screen and (max-width: 700px) {
	
	/* Hide these elements
	---------------------------------*/
	#canvas,
	#top-donate,
	.random-ad,
	#random-banner,
	#sidebar,
	#laserred,
	#ruddocks,
	#top-links,
	.search-top,
	#community-link,
	#contact-link { display: none; }
	
	
	/* Wrapper
	---------------------------------*/
	.wrapper { width: auto; }
	
	
	/* Typography
	---------------------------------*/
	p {
		font-size: 14px;
		line-height: 21px;
	}
	
	
	/* Images
	---------------------------------*/
	img {
		max-width: 100% !important;
		height: auto !important;
		border: none !important;
	}
	
	
	/* Header
	---------------------------------*/
	#header {
		height: auto;
		margin: 0 0 1em;
	}
	
	
	/* Logo
	---------------------------------*/
	#logo,
	#logo:hover {
		top: auto;
		left: auto;
		position: relative;
		float: none;
		margin-top: 15px;
		background: url(../graphics/logo.lincoln-cathedral.mobile.png) no-repeat 0 0;
		background-size: contain;
		width: 167px;
		height: 55px;
	}
	
	
	/* Menu Link
	---------------------------------*/
	#menu-button {
		display: block;
		background: #786783;
		padding: 0.5em 0.75em;
		width: auto;
		float: right;
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: -1px;
		text-decoration: none;
		margin-top: 0.9em;
		border-radius: 2px;
	}
	
	#menu-button .down {
		display: block;
		float: right;
		margin: 12px 0 0 0.25em;
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #FFF;
	}
	#menu-button .up {
		display: block;
		float: right;
		margin: 7px 0 0 0.25em;
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #FFF;
		border-top: 5px solid transparent;
	}
	
	
	/* Nav -> Top
	---------------------------------*/
	#nav-top {
		display: none;
		width: auto;
		left: auto;
		right: auto;
		top: auto;
		position: relative;
		float: none;
		clear: left;
		height: auto;
		padding: 1em 15px;
		margin: 1em -15px 0;
		background: #786783;
		font-size: 14px;
	}
	#nav-top ul li {
		float: none;
		margin: 0;
	}
	#nav-top ul li a {
		float: none;
		display: block;
		margin: 0;
		border-top: 1px solid rgba(255,255,255,0.3);
		border-bottom: 1px solid rgba(0,0,0,0.3);
		padding: 8px 0 8px 2px;
		line-height: 1.3;
		color: #FFF !important;
	}
	#nav-top ul li:first-of-type a { border-top: none; }
	#nav-top ul li:last-of-type a { border-bottom: none; }
	
	#nav-top ul li a:hover { color: rgba(255,255,255,0.6) !important; }
	
	/* Show Support Us link on mobile */
	#nav-top ul li.support-us { display: block; }
	
	/* Show Contact Us link on mobile */
	#nav-top ul li.contact-us { display: block; }
	
	
	/* Nav -> Side
	---------------------------------*/
	#nav-side {
		display: block;
		float: none;
		width: 100%;
		margin: 1em auto;
		font-size: 14px;
	}
	
	/* Container
	---------------------------------*/
	#container {
		margin: 0 auto !important;
		float: none !important;
		width: 100% !important;
	}
	
	
	/* Banner 
	---------------------------------*/
	#banner {
		width: 97%;
		margin: 1em auto;
	}
	
	
	/* Content
	---------------------------------*/
	#content {
		float: none !important;
		width: 100% !important;
	}
	/* Contact Sidebar */
	.page-contact #sidebar {
		display: block;
		margin: 0;
	}
	.page-contact #sidebar,
	.page-contact #sidebar .contact-list,
	.page-contact #sidebar .contact-list ul li { width: 100%; }
	.page-contact #sidebar .contact-list ul { padding: 0; }
	
	/* Support Us button */
	#form-contact + div + #support-us-button { display: none !important; }
	#support-us-button {
		background: #766085;
		padding: 1em;
		text-align: center;
		color: #FFF !important;
		display: block;
		text-decoration: none !important;
		border-radius: 2px;
	}
	#support-us-button:hover { background: #574763; }
	#support-us-button span {
		font-size: 18px;
		font-size: 1.8rem;
		font-weight: bold;
		letter-spacing: -1px;
	}
	#support-us-button p { margin: 0; }
	
	/* iframes */
	#content iframe { width: 100% !important; }
	
	/* Whos Who */
	#content .whos-who li .photo { width: auto; height: auto; }
	#content .whos-who li .photo img { width: 100%; }
	
	
	/* Tables
	---------------------------------*/	
	/* Force table to not be like tables anymore */
	table.mobile,
	table.mobile thead,
	table.mobile tbody,
	table.mobile th,
	table.mobile td,
	table.mobile tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.mobile thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.mobile tr { border: 1px solid #CCC; }
	
	table.mobile td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 6px 0 6px 35% !important; 
	}
	
	table.mobile td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/* Cookies Policy Table */
	table.cookies-policy.border td { border: none; }
	table.cookies-policy.border tr:nth-of-type(odd) { background: #EEE; }
	/* 	Label the data */
	
	table.cookies-policy tr.title td { padding-left: 6px !important; }
	table.cookies-policy tr.title td:nth-of-type(1):before { content: ""; }
	
	table.cookies-policy td:nth-of-type(1):before { content: "Cookie Name"; font-weight: bold; }
	table.cookies-policy td:nth-of-type(2):before { content: "Provider"; font-weight: bold; }
	table.cookies-policy td:nth-of-type(3):before { content: "Description"; font-weight: bold; }
	table.cookies-policy td:nth-of-type(4):before { content: "Expiration"; font-weight: bold; }
	
	
	/* Events
	---------------------------------*/
	.events .event-content { width: 78%; }
	.events .event-date {
		width: 14%;
		padding: 2%;
	}
	.events .event-date span { line-height: 1; margin: 0; }
	.events .event-date .day { font-size: 150%; }
	.events .event-date .number { font-size: 300%; }
	
	.events-list.home.right { margin-left: 0; }
	
	
	/* Forms
	---------------------------------*/
	form { width: 100% !important; }
	input,
	textarea { width: 94% !important; }
	
	form#commentform {
		width: 90% !important;
		padding: 0 5%;
	}
	
	
	/* Footer
	---------------------------------*/
	#footer {
		margin: 0 -15px;
		padding: 0 0 1em;
		text-align: center;
	}
	#footer-contact,
	#footer-links { padding: 0 15px; }
	#footer-links {
		margin-top: 1em;
		padding-bottom: 1em;
		font-size: 110%;
	}

	/* Show site view link */
	#view-site {
		display: block;
		font-size: 14px;
	}
	
	
	/* Front Page
	---------------------------------*/
	/* HLF Grant banner */
	.hlf-grant-banner {
		width: 100%;
		height: auto;
		max-width: 350px;
		border: none;
		margin-bottom: 10px;
	}

	.bx-wrapper,
	#slideshow-small-wrapper { display: none; }
	
	#highlight-week {
		width: 100%;
		max-width: 350px;
		border: none;
		background-size: cover;
		margin-right: 0;
	}
	#highlight-week article { height: auto; max-height: 90px; }
	#highlight-week a { width: auto; }
	#highlight-week div {
		margin-left: -10px;
		width: 90%;
		max-width: 300px;
		padding: 4% 2% 4% 6%;
	}
	
	#bottom-links {
		width: 100%;
		max-width: 350px;
		margin: 1em 0;
	}
	#become-part-of { 
		width: 100%;
		max-width: 350px;
		background-size: cover;
	}
	#become-part-of p { margin-top: 35px; }
	#who-is-jesus { 
		height: auto;
		width: 92%;
		max-width: 350px;
		padding: 10px 4%;
		margin-top: 1em;
	}
	
	#choral-evensong {
		width: 95%;
		max-width: 350px;
		margin-left: 0;
		display: none;
	}
	
	.events-list.home { 
		width: 100%;
		max-width: 350px;
		padding: 0;
		margin-top: 0;
	}
	.events-list.home > h3 { margin: 10px 15px 0 !important; }
	.events-list.home > section { margin: 10px 15px !important; }

	.events-list.home.visitlincoln {
		margin-top: 0;
	}
	
	#diary { 
		width: 100%;
		max-width: 350px;
		margin: 1em 0;
	}

	/* Footer
	---------------------------------*/
	#tag-line a,
	#tag-line .sep {
		display: none;
	}

}