@charset "utf-8";
/* CSS Document */
/* added "responsive table" to clean up main section pages, November 2, 2017 */
/* new edits April 22, 2019 */

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, /*blockquote,*/ pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} /*blockquote,*/ q{quotes:none;} /*blockquote:before, blockquote:after,*/ q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}



/*MAIN*/
body { 
	font-size: 1em;
	line-height: 1.25em;
	font-family: Helvetica Neue, Helvetica, Arial;
	background: #f9f9f9;
	color: #555;
}

a {
	color: #4C9CF1;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #444;
}

/*
img {
	width: 100%;
}
*/ 

header {
	font-size: 1.10em;
	background: #fff;
	width: 100%;  
	height: 65px; /* most recently 60 -- ensures that menu-icon fits in header space when viewed on phone */
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 4px solid #4C9CF1;
	z-index: 100;
}

#logo{
	color: #4C9CF1;  /* add color when converted to span */
	font-weight: bold;  /* add color when converted to span */
	font-size: 1.10em;   /* add size when converted to span  changed font-size to match size in header and nav */
	margin: 20px; /* was 20px */
	float: left;
	width: 200px;  /* was 200px */
	height: 100px;  /* was 110px */
/* 	background: url(./img/sandell-john.jpg) no-repeat center;   was ../img/logo.png */
	display: block;
}


nav { 
	font-size: 1.10em;
	float: right;
	padding: 20px 5px; /* was 20px, so top and bottom 30px and right and left 5px */
}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px; 
	background: #4C8FEC url(../img/menu-icon.png) center; 
}

a:hover#menu-icon {
	background-color: #444;
	border-radius: 4px 4px 0px 0px;
}

ul {
	list-style: none;
}

li {
	display: inline-block; 
	float: left;
	padding-right: 10px; 
}

sunday {
	float:left
}

.current {
	color: #2262AD;
}

section {
	margin: 75px auto 10px;  /* top=80px, right & left "auto", bottom=40px */
	max-width: 980px;
	position: relative;
	padding: 0px 20px 5px; /* top 10px, right and left 20px, bottom 5px */
}

h1 {
	font-size: 1.50em;
	color: #2262AD;
	line-height: 1.15em;
	margin: 10px 0px; /* top and bottom 20px, right and left 0px */
}

p {
	line-height: 1.45em;
	margin-bottom: 20px;
	text-indent: 1.5em;
}

/* this class can be used to float an element right in your page. The floated 
element must precede the element it should be next to on the page. */
.fltrt {  
	float: right; 
	margin-left: 8px; 
} 

.fltlft { 
	float: left; 
	margin-right: 8px; 
}

#footer {
	clear: left;
	width: 100%;
	background: #fff;
	color: #000;  
	text-align: left;
	font-size: 0.70em;
	padding: 5px 30px 5px 10px;  /* top right bottom left  */
	border-top: 4px solid #4C9CF1;
}

p.note { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 70%; 
text-indent: 0px; 
color: teal;
clear: both; 
}

p.audio {
text-indent: 0em;
margin-top: 0px;
}

/* attempt to set up responsive table, November 2, 2017 */

table, td, th {
   <!-- border: 1px solid black; -->
}

table {
    font-size: 1em; /* added font-size 04-22-2019 */
	border-collapse: collapse;
    width: 100%;
}

tr:nth-child(even) {
	background-color: #e6e6e6; /* strip table rows   f2f2f2  #e6e6e6  #b3b3b3 */
}

th {
	font-size: 1.20em;
	color: #2262AD;
   /* height: 50px; */
}


/*MEDIA QUERY*/      
/* original (max-width : 640px) Affected by length, that is the number of letters, in the menu selection. */
@media only screen and (max-width : 640px) {

	header {
		position: fixed;  /* changed from "absolute" to make it available on small screen */
	}

	#menu-icon {
		display:inline-block;
	}

	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 5px solid #444; 
		right: 20px;
		top: 60px;  
		width: 40%; /* was 50% */
		border-radius: 4px 4px 4px 4px;
	}

	nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0px;
		margin: 0px;
	}

	nav:hover ul {
		display: block;
	}

/* does not work ?????? */
@media only print {
    header, footer, nav {
        display: none!important;
    }
}