html
	{
	background: gray url('../web_images/Flag and Vane.jpg') no-repeat center center fixed;
	background-size: cover;
	/*background: gray url('../web_images/fleurdelis_2.jpg');*/
	/*background:  #1a001a;*/
	width: 100vw
	}
	{
	overflow-y: scroll
	}
   *{	
	box-sizing: border-box
	}
ul,li,div,nav
	{
	padding: 0;
	margin: 0;
	}
p
	{	
	font-size: 17px;
	padding-bottom: 10px;
	margin: 0px
	}
body
	{
	font-family: Calibri, Arial, Helvetica, Trebuchet MS;
	font-size: 15px;
	margin: 0
	}
strong 
	{
	font-weight: bold;
	color: black
	}
h1 
	{	
	/*Main header*/
	padding-bottom: 15px;
	color: grey;
	text-align: left;
	font-size: 26px
	}
h2
	{
	/*page article headings*/
	width: 98%;
	font-weight: bold;
	font-size: 140%;
	background-color: darkgrey;
	/*background-color: #26004d;*/
	padding: 2px 2px 2px 10px;
	margin: 4px 0px 10px 0px;
	color: white
	}
h4, h6
	{
	font-weight: bold;
	color: #819FF7
	}
h3 
	{
	/*weddings page*/
	font-weight: bold;
	font-size: 150%;
	color: #800080;
	}
h4 
	{
	/*Churchyard page*/
	color: darkgreen;
	font-size: 120%;
	margin: 1px;
	
	}
h5
	{
	/*page 1 box headlines*/	
	text-align: center;
	font-weight: bold;
	font-size: 140%;
	background-color: darkgrey;
	/*background-color: #26004d;*/
	color: white;
	padding: 3px;
	margin: 5px 0px 15px 0px
	}	
hr 
	{
	border: 0;
	width: 100%;
	color: grey;
	background-color: darkgrey;
	height: 1px
	}

.floating-box
	{
	font-size: 15px;
    display: inline-block;
	vertical-align: top;
    width: 248px;
    min-height: 150px;
    margin: 3px 1px;
	padding: 4px;
	text-align: left
	}
.floating-box-2 
	{
    display: inline-block;
	float: left;
    margin: 2px;
	padding: 10px;
	min-width: 240px
	}
.floating-box-3 
	{
    display: inline-block;
	float: left;
    margin: 5px;
	padding: 5px;
	}
.box-3
	{
	display: flex;
	margin: 3px;
	padding: 4px;
	flex: 1 0 auto;
	width: 100%;
	background-color: #9933FF; 
	color: white
	}
.after-box
	{
    border: 3px solid red; 
	}
.heading1
	{
	width: 75%;
	font-family: Trebuchet MS;
	padding-top: 22px;
	padding-bottom: 14px;
	margin-left: 55px; 
	float: right;
	margin-right: 35px;
	color: black;
	text-align: left;
	font-size: 26px
	}
.heading2
	{
	float: left;
	visibility: visible;
	color: black;
	padding-top: 9px;
	padding-left: 5px;
	font-size: 15px
	}
.tabletext1
	{
	font-size: 18px;
	}
.figure1
	{
	min-width: 240px;
	max-width: 80%;
	overflow: hidden;
	margin: auto
	}
div#headerimagewrapper
	{
	position: relative;
	float: right;
	padding-top: 9.8%;
	margin-right: 35px;
	margin-bottom:10px;
	border: 6px solid white;
	width: 75%
	}
div#headerimagewrapper img
	{
	width: 100%;
	top: 0;
	left: 0;
	display: block;
	position: absolute
	}
.footerbutton
	{
	background-color: darkslateblue;
	border-radius: 4px;
	text-align: center;
	padding: 4px;
	font-size: 10px
	}
.footerbutton:hover
	{
	background-color: #2e2e2e		
	}
	/* added for embedding videos to flex correctly  DKT */
.video-container 
{
    position: relative;
    padding-bottom: 56.25%; /*16:9 aspect ratio */
    padding-top: 35px;     /*allows for chrome in YouTubde videos */
    height: 0;
    overflow: hidden;
}

.video-container iframe {   /* for the iframe within that class */
    position: absolute;
    top:0;
    left: 0;
    width: 100%;  /* of the container */
    height: 100%;
}

div#page1_img
	{
	display: block;
	width: 220px;
	height: 158px;
	overflow: hidden;
	border: none;   /*1px solid #E6E6E6;*/
	margin: auto
	}
div#page1_img img
	{
	width: 100%;
	vertical-align: top
	}

div#chyd
	{
	width: 100%
	}
div#chyd_img
	{
	display: inline-block;
	width: 248px;
	height: 248px;
	overflow: hidden;
	border: 1px solid black;
	margin: 2px
	}
div#chyd_img img
	{
	width: 100%;
	vertical-align: top
	}
div#chyd_text
	{
	display: inline-block;
	width: 248px;
	height: 248px;
	overflow: hidden;
	border: none;
	margin: 2px;
	padding: 7px;
	vertical-align: top
	}
div#chyd_text p 
	{
	font-size: 15px
	}

div#link 
	{
	display: inline-block;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border: none;
	margin: 2px;
	padding: 2px;
	text-align: center;
	}
div#link a
	{
	text-decoration: none;
	position: relative;
	top: 35% /*tune this in the <a> tag on the page to centre vertically*/
	}
	
div#right_image_1
	{
	margin: 5px 5px 5px 10px;
	border: 1px solid black;
	float: right;
	width: 30%;
	min-width: 200px
	}
div#right_image_1 img
	{
	display: block;
	width: 100%
	}

div#left_image_1
	{
	margin: 5px 10px 5px 5px;
	border: 1px solid black;
	float: left;
	width: 35%;
	min-width: 240px
	}
div#left_image_1 img
	{
	display: block;
	width: 100%
	}	
	
/*Red Table*/
table#t01
	{
	border: 2px solid indianred;
	border-spacing: 3px;
	border-radius: 5px;
	width: 100%;
	min-width: 248px
	}
table#t01 th
	{
	background-color: indianred;
	text-align: center;
	padding: 8px;
	font-size: 140%;
	color: #ffffff
	}
table#t01 td
	{
	padding: 5px;
	border: none;
	text-align: left;
	font-size: 18px
	}
table#t01 tr:nth-child(odd) td
	{
	background-color: #f9ebea
	}
table#t01 tr:nth-child(even) td 
	{
	background-color: #ffffff
	}

/*Blue Table*/
table#t02 
	{
	border: 2px solid #819FF7;
	border-spacing: 3px;
	border-radius: 5px;
	width: 100%;
	min-width: 180px
	}
table#t02 th
	{
	background-color: #819FF7;
	text-align: center;
	padding: 8px;
	font-size: 140%;
	color: #ffffff
	}
table#t02 td 
	{
	padding: 5px;
	border: none;
	text-align: left;
	font-size: 16px
	}
table#t02 tr:nth-child(odd) td 
	{
	background-color: #F0F8FA
	}
table#t02 tr:nth-child(even) td
	{
	background-color: #ffffff
	}

/*Mural Page*/
table#t03 
	{
	padding: 5px; 
	border: 1px solid black
	}
table#t03  td
	{
	border: 1px solid black;
	text-align: center;
	padding: 3px;
	font-size: 12px
	}
table#organ_table
	{
	width: 210px;
	display: inline;
	margin: 0
	}
table#organ_table th
	{
	padding: 5px;
	font-family: Arial;
	color: #ffffff;
	font-size: x-large;
	font-weight: bold
	}
table#organ_table td
	{
	padding: 5px;
	font-family: Arial;
	color: gold;
	font-size: medium
	}
.parent-menu 
	{
	background-color: darkslateblue;
	max-width: 160px;
	margin: auto;
	z-index: 2
	}
#menu
	{

	}	
#menu ul
	{
	list-style-type:none;
	position: relative
	}
#menu ul li a 
	{
	padding: 10px 15px;
	display: block;
	color: white;/*main menu text color*/
	text-decoration: none;
	}
#menu ul li a:hover 
	{
	background-color: #2e2e2e;
	}
.sub-menu
	{
	max-width: 150px;
	float: right;
	z-index: 1
	}
#menu ul li:hover > ul
	{
	display: block;
	}
#menu ul li > ul
	{
	background-color: brown/*#819FF7*/;
	display: none;
	width: 150px;
	position: absolute;
	left: 120px;
	top: 50px
	/*left:140px;
	top:-40px;
	position: relative;*/
	}
#menu ul li ul li a
	{
	color: #F0F8FA/*sub menu text color*/
	}
#menu ul li > ul li a:hover 
	{
	background-color: midnightblue/*#007ee9*/;
	}

/* Top Menu item for Mobile width*/
#menutop
	{
	
	}
#menutop ul
	{
	list-style-type: none;
	}
#menutop ul li
	{
		padding: 0px
	}
#menutop ul li a
	{
	padding: 5px 0px 3px 15px;
	display: block;
	color: white;/*main menu text color*/
	text-decoration: none;
	}
#menutop ul li a:hover 
	{
	background-color: #2e2e2e;
	}

.nav_mobilemenu
	{
	display: none;
	-webkit-flex: 0 1 100%;
	flex: 0 1 100%;
	-webkit-order: 2;
	order: 2
	}
.nav_mobile 
	{
	background-color: darkslateblue;
	text-align: left;
	max-width: 100%;
	margin: 5px
	}
/*mobile nav ends*/

.flex-container 
	{
	background: white;
	position: relative;
	max-width: 1000px;
	min-width: 280px;
	margin: 2px auto;
    display: -webkit-flex;
    display: flex;  
	-webkit-flex-wrap: wrap; 
	flex-wrap: wrap;
    text-align: center;
	}
.flex-container > * 
	{
    padding: 15px;
	}

article
	{
	-webkit-flex: 1 0;
	flex: 1 0;
	-webkit-order: 3;
	order: 3;
	min-width: 295px;
	padding-top: 1px;
    text-align: left;
	border-style: solid;
    border-color: grey;
	border-width: 1px
	}
aside 
	{
	float: right;
	margin: 0 1.5%;
	width: 50%;
	}
header
	{
	-webkit-flex: 1 100%;
    flex: 1 100%;
	background: #FFFF6F;
	color: white;
	min-height: 230px;
	min-width: 295px;
	border-style: solid;
    border-color: grey;
	border-width: 1px;
	border-bottom: 0px;
	}
footer
	{
	-webkit-flex: 1 100%;
    flex: 1 100%;
	-webkit-order: 4;
	order: 4;
	background: #FFFF6F;
	color: black;
	border-style: solid;
    border-color: grey;
	border-width: 1px;
	border-top-style: none
	}
.slide_show
	{
	}
.slide_show img
	{
	animation: slide_show 24s infinite;
	opacity: 0
	}
@keyframes slide_show
	{
	0% {opacity: 0}
	4% {opacity: 1}
	45%{opacity: 1}
	50%{opacity: 0}
	100% {opacity: 0}
	}
.slide_show img:nth-child(1)
	{animation-delay: 0s}
.slide_show img:nth-child(2)
	{animation-delay: 12s}
.nav 
	{
	-webkit-flex: 0 0 170px;
	flex:0 0 170px;
	-webkit-order: 2;
	order: 2;
	text-align: left;
	border-style: solid;
    border-color: grey;
	border-width: 1px;
	border-right-style: none;
	}
.nav ul
	{
	float: left;
	width: 160px;
    list-style-type: none;
	padding: 0;
	}	
.nav ul a
	{
	text-decoration: none;
	}

@media only screen and (max-width: 650px)
	{
	.nav
		{
		border-right-style: solid
		}
	.heading2
		{
		visibility: hidden;
		font-size: 1px
		}
	}

@media only screen and (max-width: 481px)
	{
	.nav
		{
		-webkit-order: 3;
		order: 3;
		border-style: none;
		}
    article
		{
		-webkit-flex: 1 100%;
		flex: 1 100%;
		-webkit-order: 2;
		order: 2;
		text-align: center
		}
	footer
		{
		border-top-style: solid
		}
	.nav_mobilemenu
		{
		display: inline
		}
	.floating-box-3
		{
		min-width: 248px
		}
	.box-3
		{
		width: 248px;
		background-color: #8000ff;
		color: white
		}
	table#t01 td 
		{
		font-size: 12px
		}
	table#t02 td 
		{
		font-size: 14px
		}
	.heading1
		{
		font-size: 8vw;
		margin-left: 40px;
		float: left;
		margin-right: 0
		}
	.tabletext1
		{
		font-size: 4vw
		}
	div#chyd_text p 
		{
		font-size: 14px
		}
	div#right_image_1
		{
		float: none;
		margin: 5px auto
		}
	div#left_image_1
		{
		float: none;
		margin: 5px auto
		}
	#tfheader .tftextinput
		{
		margin-right: -20px;
		border-radius: 0px;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		}
	#tfheader .tfbutton
		{
		margin-left: 42px;
		margin-top: 2px;
		border-radius: 0px;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 0px
		}
	}

/*Search*/
#tfheader
	{
	margin: 0px 13px 10px 0px;
	/*-webkit-order: 1;
	order: 1;
	background-color:#F0F8FA;
	border-style: solid;
	border-color: #E6E6E6;
	border-width: 1px;
	border-top:0px;
	border-bottom:0px*/
	}
#tfnewsearch
	{
	float: right;
	padding-right: 24px;
	}
.tftextinput
	{
	margin: 5px 0px 0px 0px;
	padding: 5px 15px;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border: 1px solid darkgrey;/* border-right:0px;*/
	border-radius: 5px 0px 0px 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	}
.tfbutton 
	{
	margin: 5px 0px 3px 0px;
	padding: 5px 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: solid 1px darkgrey; 
	background: grey;
	background: -webkit-gradient(linear, left top, left bottom, from(darkgrey), to(grey));
	background: -moz-linear-gradient(top,  darkgrey,  grey);
	
	border-radius: 0px 5px 5px 0px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	}
.tfbutton:hover
	{
	text-decoration: none;
	background: darkgrey;
	background: -webkit-gradient(linear, left top, left bottom, from(palegrey), to(darkgrey));
	background: -moz-linear-gradient(top,  palegrey,  darkgrey);
	}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner 
	{
	border: 0;
	}
.tfclear
	{
	clear:both;
	}