body {
	background-color: LightSkyBlue;
	font-family: Verdana, sans-serif;
	font-size: 16px; /* was medium */
	line-height: 1.25; /* added for readability */
	text-align: center;
}

.siteHeader {
	font-family: Times, serif;
	display: inline-block;
	border: none;
	padding: 5px;
	font-size: 30px; /* Was xx-large */
	color: white;
	font-weight: bold;
	font-style: italic;
	margin: auto;
}

.navlist {
	size: 1;
	width: 125px;
	text-overflow: ellipsis;
	background: lightGray;
}

/* Navbar container */
nav {
	display: inline-block;
	overflow: hidden;
	margin: auto;
}

/** A navigation button with or without dropdown */
.navbutton, header a {
	font-size: 14px;
	background-color: blue;
	text-align: center;
	padding: 5px;
	display: inline-block;
	border: none;
	border-radius: 5px;
	vertical-align: middle;
	background-color: blue;
}

/* Link inside the navbutton */
.navbutton a {
	font-size: 14px;
	color: white;
	text-decoration: none;
	color: white;
}

/* Navbutton hover behavior */
.navbutton:hover {
	background-color: cyan;
}

.navbutton:hover a {
	color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: cyan;
	z-index: 1;
	min-width: max-content; /* Ensures it does not collapse */
	white-space: nowrap; /* Prevents wrapping */
}

/* Links inside the dropdown */
.dropdown-content a {
	font-size: 14px;
	float: none;
	color: black;
	padding: 2px;
	text-decoration: none;
	display: block;
	text-align: center;
}
/* Labels inside the dropdown */
.dropdown-content div {
	font-size: 14px;
	float: none;
	color: gray;
	padding: 2px;
	text-decoration: none;
	display: block;
	text-align: center;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
}

/* Show the dropdown menu on hover */
.navbutton:hover .dropdown-content, .navbutton.open .dropdown-content {
	display: block;
}

header {
	font-family: Times, serif;
	display: inline-block;
	background-color: lightGray;
	font-size: 20px; /* Was x-large */
	font-weight: bold;
	font-style: italic;
	width: 100%;
	position: sticky;
	top: 0;
	margin-bottom: 0;
}

header a {
	background-color: #eee;
}

header a:hover {
	background-color: cyan;
}

.linkleft {
	font-style: normal;
	text-decoration: none;
	float: left;
	background: cyan;
}

.linkleft:hover {
	background-color: blue;
	color: white;
}

.linkright {
	font-style: normal;
	text-decoration: none;
	background: cyan;
	float: right;
}

.linkright:hover {
	background-color: blue;
	color: white;
}

footer {
	border: none;
	padding: 5px;
	font-size: 13px;
	color: black;
	margin: auto;
	display: inline-block;
}

article { /* Was doc-box */
	display: inline-block;
	background-color: white;
	width: 100%;
	/* margin: auto; */
	border: none;
	padding: 5px;
}

section {
	display: inline-block;
	vertical-align: top;
	margin: auto;
	border: 1px solid blue;
	padding: 0.25em;
}

section.scripture {
	border-radius: 6px;
}

p {
	text-align: left;
	margin: 3px;
}

.question {
	font-weight: bold;
	margin-top: 0.5em;
}

.scripture {
	font-family: Times, serif;
	font-size: 17px;
	font-style: italic;
	margin: 0.5em 0 0 0;
	font-style: italic;
	font-style: italic;
}

.citation {
	font-style: normal;
	font-family: Verdana, sans-serif;
	font-size: 13px;
	margin: 0 0 0.5em 0;
}

h3 {
	font-size: inherit;
	font-weight: bold;
	text-align: left;
	margin: 3px;
}

figure {
	background-color: white;
	padding: 2px;
	margin: auto;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid gray;
	border-radius: 2px;
}

figcaption {
	font-family: Courier, monospace;
	font-weight: bold;
	font-size: smaller;
	text-align: center;
	line-height: 115%;
	padding: 2px;
}

ol {
	margin: 0.5em;
}

ul {
	margin: 0.5em;
}

li {
	text-align: left;
}
/* Scaling for mobile */
img, iframe {
	max-width: 100%;
	height: auto;
}

code {
	font-family: Courier, monospace;
	font-size: smaller;
}

.playerButton {
	font-size: 20px;
}

caption {
	font-size: 18px;
	font-weight: bold;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}