/*
file: lav.css -- Lou and Victor site styles
Last Edit: jf 2025-02-08: Major Revision - see update at end of file

* Use this style sheet for all pages on the site to keep the look and
* behavior of the site consistent. The results class has two sets of
* styles, one for narrow screens <= 600 px (eg phones in vertical mode)
* and the other for screens >= 601 px (eg laptops and desktops). Phones
* have only one long column with everything displayed linearly. Laptops
* and desktops can have multiple columns with information displayed in
* horizontal rows. Tables become more complex on a phone. */

/* All elements are to use border-box model per w3schools. It standardizes
 * what's included in measurements for margins, padding, borders, etc.
 * This model is used by the Firefox web development tools. */
* { box-sizing: border-box; }

/* Sans-serif font styles preferred for all elements. Easier to read.
 * Use relative font-size (vw) to allow browser to scale fonts depending
 * on the width of the browser window. Use fixed font-size (px) to keep
 * text size the same regardless of window width. Each has it's pros
 * and cons especially with narrow display phones!  */

/* Styling the html element gets inherited by everything unless
 * over-ridden by class, in-line or generic styles. html styles become
 * the entire site defaults.
 * Example: font-family: Arial, Helvetica, sans-serif;
 * defined only in html - inherited everywhere else unless a special
 * font needed via a class or in-line style */
html {
background-color: black; /* instead of grey per Victor and Lou 1/28/25 */
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 20px;
margin: 0;
padding: 0;
}

/* Each major section of the site has a unique body class so the
 * background for all pages in a section can be different from the
 * other sections. class="{home|victor|lou|us|river}" can be used
 * for other elements to distinguish them in a particular part of the
 * site such as theRiver. */

/* default body of all pages without a background image */
body {
background-color: black;
margin: 0;
padding: 10px;
}

/* body for home page - blue fern background image */
body.home {
background-image: url('images/black_blue_fern_bkgd.jpg');
}

/* body for victor section - removed fern too distracting for database 1/28/25 */
body.victor {
background-color: black;
}

/* body for lou section - western-black-leather background image */
body.lou {
background-image: url('images/western-black-leather-bg.jpg');
}

/* body for us section - vintage-denim background image */
body.us {
background-image: url('images/vintage-denim.jpg');
}

/* body for The River section - faint white water background image */
body.river {
background-image: url('images/white-water-background.jpg');
}


/* sections of all pages inherit body and html defaults */
section {
padding: 0;
}

/* header has it's own background, h1, h2 and minimal margins, padding */
header {
margin-top: 0;
margin-bottom: 10px;
height: auto;
}

/* navigation section inherits body background with
default medium size white text */
nav {
color: white;
font-size: 20px;
height: auto;
}

/* footer inherits body background with default
medium size centered yellow text */
footer {
color: white;
font-size: 16px;
text-align: center;
clear: both;
padding: 5px;
}

/* Use class="collapse" to hide any element, change with javascript */
.collapse {
display: none;
}

/* Use class="expand" to show any element, change with javascript */
.expand {
display: block;
}


/* BEGIN GENERIC NO CLASS (bad pun) */



/* h1 used for main title in <header> at top of each page */
h1 {
font-size: 4.5vw; /* scales with browser window width looks best */
color: sandybrown; /* changed from yellow, easier on eyes in darker room */
text-align: center;
margin: 0px;
padding: 0px;
}

/* h2 used primarily for sub-titles in <header> at top of each page */
h2 {
font-size: 3vw; /* also scales with browser window width */
color: dodgerblue;
text-align: left; /* use in-line for text-align: center; */
padding: 0;
margin: 0px;
}

/* h3 left justified section titles and headings */
h3 {
font-size: 25px;
color: lime;
text-align: left;
}

/* h3 class="underline" for underlined section titles and headings */
h3.underline {
text-decoration: underline;
}

/* h4 centered section titles and headings */
h4 {
font-size: 25px;
color: sandybrown;  /* changed from yellow, less bright jf 1/28/25 */
text-align: center;
}

/* h5 footer last update at bottom of page */
h5 {
font-size: 16px;
color: sandybrown; /* changed from yellow, less bright jf 1/28/25 */
text-align: center;
font-weight: normal;
}

/* h6 Special emphasis */
h6 {
font-size: 25px;
color: fuchsia; /* Very bright eye catching - use sparingly */
text-align: left;
}

/* p is the most commonly used text paragraph, inherits from html */
p {
}

/* pre-formatted text such as code snippet or quotation */
pre {
color: yellow;
padding-left: 25px; /* indentation */
text-align: left;
}

/* bullet list intro and ending text (eg not the actual bullet list
 * entries - they are styled by the li element) */
ul {
font-size: 20px;
color: white;
text-align: left;
}

li {
font-size: 20px; /* was medium */
text-align: left;
padding-bottom: 10px; /* need space between bullets for easier reading */
}

/* ordered list has decimal numbers instead of bullets */
ol {
font-size: 20px; /* was medium */
color: yellow;
text-align: left;
list-style-type: decimal;
padding-bottom: 10px; /* need space between bullets for easier reading */
}

/* BEGIN formMessage CLASS JF depracated 4 Feb 2025 */
/* generic styles for forms */
input {
font-size: 20px;
color: yellow;
background-color: transparent;
border-style: none;
}

input[type=button],
input[type=submit],
input[type=text],
type[hidden] {
background-color: white;
color: black;
font-size: 20px;
padding: 4px 4px;
margin-top: 10px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 10px;
display: inline-block;
border: 2px solid cyan;
border-radius: 4px;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
background-color: blue;
color: white;
cursor: pointer;
}

/* Responsive button - larger - colors change upon mouse hover */
button {
background-color: white;
color: black;
font-size: 20px;
padding: 4px 4px;
margin-top: 10px;
display: inline-block;
border: 2px solid lime;
border-radius: 4px;
}

/* Responsive pull down menu - larger - colors change upon mouse hover */
select {
background-color: white;
color: black;
font-size: 20px;
padding: 4px 4px;
margin-top: 10px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 10px;
display: inline-block;
border-style: none;
}

/* END GENERIC NO CLASS (bad pun) STYLES */


.row:after {
content: "";
clear: both;
display: block;
}

/* phones use one column only */
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}

/* laptops, desktops use 12-column grid model */
@media only screen and (min-width: 769px) {
[class*="col-"] {
padding-right: 10px;
}
}

/* grid column width definitions */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* centered class */
.centered { text-align: center; }


a:link {color: lime;}
a:visited {color: cyan;}
a:hover {color: fuchsia;}
a:active {color: fuchsia;}

/* color-links class to use nicer colors for anchor links
/* (1) unvisited link */
a.color-links:link {color: lime;}
/* (2) visited link */
/* 2023-12-11: modified by lg per jf */
a.color-links:visited {color: cyan;} /* alternative yellow */
/* (3) mouse over link */
a.color-links:hover {color: fuchsia;}
/* (4) selected link */
a.color-links:active {color: fuchsia;}


/* Navigation Menu Class */
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li.menu {
float: left;
background-color: transparent ;
font-size: 18px;
border-style: solid;
border-width: 1px;
border-color: white;
padding: 0;
}

li.menuselected { /* use javascript to add, remove this class */
float: left;
background-color: transparent ;
font-size: 18px;
border-style: solid;
border-width: 1px;
border-color: lime;
padding: 0;
}

li.menufeatured { /* use javascript to add, remove this class */
float: left;
background-color: transparent;
font-size: 18px;
border-style: solid;
border-width: 2px;
border-color: cyan;
}

/* Menu links need to change color as mouse hovers and when selected */
/* first define the menu class */
.menu a {
display: block;
width: auto;
/* changed height to auto to allow variable amount of text */
/* consequence is height of menu items will be larger for long text */
height: auto;
color: white;
text-align: center;
padding: 3px 5px;
text-decoration: none;
margin: 0;
/* border-style: solid;
border-width: 1px;
border-color: yellow; */
}

.menu a:link {
background-color: transparent;
}

.menu a:hover
{
background-color: blue;
}
/* End of Navigation Menu Styles */

/* figure styles with captions used for images, audio, video
*  Must style the figure element, not the img element to "float" image right
*  and have it's caption below the image. Otherwise caption displays badly! */

/* default figure caption using centered lime text */
figcaption {

font-size: 18px;

color: lime;
text-align: center;
}

figcaption.full { font-size: 20px; }

figcaption.right35, figcaption.right40,
figcaption.left35, figcaption.left40 { font-size: 16px; }

figcaption, figcaption.right45, figcaption.right50,
figcaption.left45, figcaption.left50 { font-size: 20px; }

/* default figure style */
figure {
border: none;
margin-left: 10px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
padding: 0;
}

figure.header {
margin: 0;
padding-right: 10px;
}

figure.right35 {
float: right;
width: 35%;
}

figure.left35 {
float: left;
width: 35%;
}

figure.right40 {
float: right;
width: 40%;
}

figure.left40 {
float: left;
width: 40%;
}

figure.right45 {
float: right;
width: 45%;
}

figure.left45 {
float: left;
width: 45%;
}

/* slightly less than 50% to have two figures side-by-side */
figure.right50 {
float: right;
width: 48.8%;
}

/* slightly less than 50% to have two figures side-by-side */
figure.left50 {
float: left;
width: 48.8%;
}

/* Center image class */
.centerimg {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/* full size image class */
.fullsizeimg {
display: block;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
max-width: 100%;
max-height: 100%;
padding: 4px;
background-color: black;
border-style: solid;
border-width: 2px;
border-color: yellow;
}

/* w3schools Responsive Image Gallery */
.rowz {
	display: flex;
	flex-wrap: wrap;
}

/* On screens that are >= 1008px wide use four columns next to each other. */
@media screen and (min-width: 1008px) {
	.column {
		flex: 25%;
	}
}

/* On screens that are <= 1007px use two columns */
@media screen and (max-width: 1007px) {
	.column {
		flex: 50%;
	}
}

/* On screens that are <= 600px such as vertical phones use a single column */
@media screen and (max-width: 600px) {
	.column {
		flex: 100%;
	}
}
/* End of @media queries for responsive gallery */

.column img {
 vertical-align: middle;
 padding: 0;
 max-width: 100%;
 }

.column figure {
display: block;
margin-left: auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
padding: 0;
width: 100%;
max-width: 100%;
border-style: solid;
border-width: 2px;
border-color: black;
}

.column figure:hover { border-color: yellow; }

.column figcaption {

font-size: 15px;

color: lime;
background-color: black;
text-align: center;
width: 100%;
}


/* BEGIN RIVER CLASS */

header.river {
/* white water rafting with oval photo of Victor (left) and Lou (right) */
background-image: url(images/river-header-background.jpg);
background-size: cover;
padding: 10px;
height: auto;
margin-bottom: 15px;
}

/* h1 class="river" for the river pages - adds visual impact to header */
h1.river {

color: yellow;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;

font-size: 50px;
text-align: center;
}

/* h2 class="river" for the river pages - adds visual impact to header */
h2.river {

color: blue;
background-color: ivory;
font-weight: bold;
font-size: 35px;
text-align: center;
display: table;
margin: 5px auto 3px auto;
}

/* h3 class="river" for the river pages - adds visual impact to pages */
h3.river {

color: lime;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;

font-size: 25px;
text-align: center;
}

/* END RIVER CLASS */


/* BEGIN LIBRARY CLASS */

/* Begin styles for screens larger than 600px - laptops & desktops */
@media screen and (min-width: 601px) { /* Note curly brace! */
select.library {
font-size: 20px; /* increase from 15px */
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
text-align: left;
width: fit-content;
margin: 0;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

table.libraryparent { /* parent table needs a border */
border-collapse: collapse; /* eliminates dual border lines */
border-style: solid; /* change to none eliminate border around table */
border-width: 1px; /* thin border looks nice and not intrusive */
border-color: dodgerblue; /* easier on the eyes */
width: 100%; /* table width within the container element */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
table-layout: auto;
}

table.library { /* for nested tables within td cell of parent table */
border-style: none; /* nested table borders look distracting on wider screens */
border-width: 1px; /* thin border looks nice and not intrusive */
border-color: dodgerblue; /* easier on the eyes */
width: 100%; /* table width within the container element */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
table-layout: auto;
}

/* Table caption centered above the table */
caption.library {
font-size: 20px; /* reduced from 25px */
text-align: center;
color: sandybrown; /* instead of lime */
margin-top: 25px; /* adds space between sermons */
margin-bottom: 2px;
}

tr.library {
border-style: none; /* change this to solid to remove table row borders */
border-width: 1px;
border-color: dodgerblue;
}

tr.library:hover { /* highlight table row when mouse hovers */
background-color: blue;
}

td.library {
padding: 5px;
text-align: center;
}

th.library { /* removed translate to uppercase and bold */
color: dodgerblue; /* instead of lime */
font-size: 16px;
text-align: center;
border-style: none; /* change to solid for table header cell borders */
border-width: 1px;
border-color: dodgerblue;
}

hr.library {
color: transparent; /* horizontal line not needed tables have border */
}

tr.librarywide {
}

td.librarywide {
color: dodgerblue;
padding: 5px;
text-align: center;
}
} /* end min-width: 601px for laptops and desktops */

@media screen and (max-width: 600px) {
/* begin max-width 600px for phone */

select.library {
font-size: 17px; /* decrease from 20px on wider screens */
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
text-align: center;
width: fit-content;
margin: 0;
padding: 3px; /* decrease from 8px on wider screens */
border-style: solid;
border-width: 1px;
border-color: sandybrown;
}

table.libraryparent,
table.library {
border-collapse: collapse; /* eliminates dual border lines */
border-style: none; /* change to none eliminate border around table */
border-width: 1px; /* thin border looks nice and not intrusive */
border-color: dodgerblue; /* easier on the eyes */
width: 100%; /* table width within the container element */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
table-layout: auto;
}

caption.library {
font-size: 18px; /* reduced from 22px */
color: sandybrown; /* instead of lime */
margin-top: 15px; /* instead of 25 - adds space between sermons */
margin-bottom: 0px; /* instead of 2px */
}

thead.library { /* thead section hidden on phone data-labels used instead */
display: none;
}

th.library { /* th not displayed on phone - data-labels displayed instead */
color: dodgerblue;
font-size: 16px;
text-align: center;
border-style: none;
border-width: 1px;
border-color: dodgerblue;
}

tr.library {
display: block;
border-style: none; /* change this to solid to add table row borders */
border-width: 1px;
border-color: dodgerblue;
margin-bottom: 0px;
}

td.library {
display: block;
font-size: 15px;
text-align: right;
}

td.library::before { /* data-labels left justified */
content: attr(data-label);
float: left; /* data-labels left-justified */
font-weight: normal;
color: dodgerblue;
padding-right: 10px; /* space between data-label and comments in div */
}

div.library { /* used for sermon comments within nested table cell */
text-align: right; /* together with padding-right on data-label */
}

td.library:last-child { /* adds a little space after comment row */
border-bottom: 0;
}

hr.library { /* thicker line between tables with no borders on phone */
color: dodgerblue;
height: 4px;
}

tr.librarywide {
display: none;
}

td.librarywide {
display: none;
}
} /* end max-width 600px for phone */

/* END LIBRARY CLASS */


/* BEGIN QUERYTABLE CLASS */
/* Overall style design goal - more subdued colors avoiding very bright
 * elements to reduce eyestrain on forms and tables. Thus, overall style
 * for sermon database is:
 * black background - nothing distracting on any size browser screen
 * elements color scheme: dodgerblue, blue, sandybrown, white, grey
 * text colors: cyan, white, black
 * avoiding green, yellow
 * @media queries used for laptop/desktop and phone screen widths */

/* Querytable class for laptops and desktop displays >= 601px wide */
@media screen and (min-width: 601px) {  /* Note curly brace! */
div.querytable {
display: none;
margin: 0px;
padding: 2px;
background-color: black;
}

h3.querytable {
font-size: 22px;
text-align: center;
color: sandybrown;
padding: 0;
margin-top: 0px;
margin-bottom: 0px;
}

table.querytable {
border-collapse: collapse; /* eliminates dual border lines */
border-style: solid; /* change to none eliminate border around table */
border-width: 1px;
border-color: dodgerblue;
width: 100%; /* table width within the container element */
table-layout: fixed; /* forces table to stay within container */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
}

caption.querytable {
color: sandybrown;
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
}

/* Note: margins have no effect on internal table elements */
td.querytable {
overflow-wrap: break-word; /* when text overflows wrap whole words */
vertical-align: middle; /* makes labels and input fields look aligned */
border-style: none; /* change to solid for table cell borders */
border-width: 1px;
border-color: grey;
}

tr.querytable {
border-style: none; /* change to solid for table row borders */
border-width: 1px;
border-color: grey;
}

form.querytable {
margin: 0; /* compacts form */
padding: 0;
}

input.querytable {
font-size: 20px;

color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
width: 95%;
margin: 0;
margin-bottom: 10px;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

input[type=text].querytable {
text-align: left;
}


select.querytable:hover, select.querytable:focus,
input[type=submit].querytable:hover, input[type=submit].querytable:focus,
input[type=button].querytable:hover input[type=button].querytable:focus
input.querytable:hover,
input.querytable:active,
input.querytable:focus {
background-color: blue;
color: white; /* color must change to black on a white background */
border-style: solid; /* optional change border upon hover */
border-width: 2px;
border-color: lime;
}

select.querytable,
input[type=submit].querytable,
input[type=button].querytable {
display: block;
text-align: right;
font-size: 17px;
font-weight: bold;
color: white;
background-color: dodgerblue;
width: fit-content;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
border-style: solid;
border-width: 2px;
border-color: lime;
border-radius: 25px;
}

select.querytable:hover, select.querytable:focus,
input[type=submit].querytable:hover, input[type=submit].querytable:focus,
input[type=button].querytable:hover input[type=button].querytable:focus {
background-color: blue;
color: white;
}

label.querytable {
display: block;
text-align: right;
font-size: 18px;
padding-right: 5px;
color: cyan;
vertical-align: middle;
}

span.querytable { /* used to left-justify submit & clear text row */
text-align: left;
font-size: 20px;
color: cyan;
padding-left: 5px;
}

/*
select.querytable {
font-size: 20px;
color: white; /* looks better than black on dodgerblue background
background-color: dodgerblue;
text-align: left;
width: 95%;
margin: 0;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

select.querytable:hover {
background-color: white;
color: black;
}
*/
} /* end of laptop/desktop screens >= 601px */

@media screen and (max-width: 600px) {  /* NOTE: curly brace */
/* Begin max-width 600px for phone */
div.querytable {
display: none;
margin: 0px;
padding: 2px;
background-color: black;
}

h3.querytable {
font-size: 20px;
text-align: center;
color: sandybrown;
padding: 0;
margin-top: 0px;
margin-bottom: 0px;
}

table.querytable {
border-collapse: collapse; /* eliminates dual border lines */
border-style: solid; /* change to none eliminate border around table */
border-width: 1px;
border-color: dodgerblue;
width: 100%; /* table width within the container element */
table-layout: fixed; /* forces table to stay within container */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
}

caption.querytable {
color: sandybrown;
font-size: 18px;
margin-top: 5px;
margin-bottom: 5px;
}

thead.querytable {
display: none;
}

/* Note: margins have no effect on internal table elements */
td.querytable {
overflow-wrap: break-word; /* when text overflows wrap whole words */
vertical-align: middle; /* makes labels and input fields look aligned */
border-style: none; /* change to solid for table cell borders */
border-width: 1px;
border-color: grey;
}

tr.querytable {
border-style: none; /* change to solid for table row borders */
border-width: 1px;
border-color: grey;
}

form.querytable {
margin: 0; /* compacts form */
padding: 0;
}

input.querytable {
font-size: 17px;
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
width: 95%;
margin: 0;
margin-bottom: 10px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
border-style: solid;
border-width: 1px;
border-color: sandybrown;
}

input[type=text].querytable {
text-align: left;
}

input.querytable:hover,
input.querytable:active,
input.querytable:focus {
background-color: white;
color: black; /* color must change to black on a white background */
}

input[type=submit].querytable,
input[type=button].querytable {
display: block;
text-align: center;
font-size: 17px;
font-weight: normal;
color: white;
background-color: dodgerblue;
width: fit-content;
padding-left: 2px;
padding-right: 2px;
margin-right: auto;
margin-left: auto;
border-style: solid;
border-width: 2px;
border-color: lime;
border-radius: 25px;
}

input[type=submit].querytable:hover,
input[type=button].querytable:hover {
background-color: blue;
color: white;
}

label.querytable {
display: block;
text-align: left;
font-size: 17px;
padding-left: 2px;
color: cyan;
vertical-align: middle;
}

span.querytable { /* used to left-justify submit & clear text row */
display: none;
text-align: left;
font-size: 20px;
color: cyan;
padding-left: 5px;
}

select.querytable {
font-size: 17px;
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
text-align: left;
width: 95%;
margin: 0;
margin-bottom: 10px;
padding-left: 2px;
padding-right: 2px;
border-style: solid;
border-width: 1px;
border-color: sandybrown;
}

select.querytable:hover {
background-color: blue;
color: white;
}
}  /* end of querytable class for phone */
/* ****END QUERYTABLE CLASS**** */

/* BEGIN TABLE RESULTS CLASS  */

@media screen and (min-width: 601px) {  /* Note curly brace! */
select.results {
font-size: 20px; /* increase from 15px */
color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
text-align: left;
width: fit-content;
margin: 0;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

div.results {
width: 100%;
margin-top: 25px;
padding: 2px;
}

table.results {
border-collapse: collapse;
border-style: solid;
border-width: 2px;
border-color: dodgerblue;
width: 100%; /* within the container element */
table-layout: fixed
}

caption.results {
color: sandybrown;
font-size: 20px;
text-align: center;
}

td.results {
color: white;
text-align: center;
vertical-align: middle;
overflow-wrap: break-word;
font-size: 16px;
border-style: none;  /* change this to solid to display table cell borders */
border-width: 1px;
border-color: grey; /* makes cell borders less obtrusive dodgerblue is also ok */
}

td.anchor {
text-align: center;
}

th.results {
color: dodgerblue;
font-size: 16px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: dodgerblue;
}

tr.results {
border-style: solid; /* change this to none to remove table row borders */
border-width: 1px;
border-color: dodgerblue;
}

tr.results:hover { /* highlight table row when mouse hovers */
background-color: blue;
}

button.results {
/* display: block; */
text-align: right;
font-size: 17px;
font-weight: bold;
color: white;
background-color: dodgerblue;
width: fit-content;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
border-style: solid;
border-width: 2px;
border-color: lime;
border-radius: 25px;
}
 
} /* end styles for laptop and desktop screens >= 601px */

@media screen and (max-width: 600px) {
/* begin max-width 600px for phone */
select.results {
font-size: 20px; /* increase from 15px */

color: white; /* looks better than black on dodgerblue background */
background-color: dodgerblue;
text-align: left;
width: fit-content;
margin: 0;
padding: 8px;
border-style: solid;
border-width: 2px;
border-color: sandybrown;
}

table.results {
border-collapse: collapse; /* eliminates dual border lines */
border-style: solid; /* change to none eliminate border around table */
border-width: 1px; /* thin border looks nice and not intrusive */
border-color: dodgerblue; /* easier on the eyes */
width: 100%; /* table width within the container element */
color: white; /* default text color within table */
font-size: 17px; /* default text size within table */
table-layout: auto;
}

caption.results {
font-size: 20px; /* reduced from 22px */
color: sandybrown; /* instead of lime */
margin-top: 15px; /* instead of 25 - adds space between sermons */
margin-bottom: 0px; /* instead of 2px */
}

thead.results {
display: none;
}

th.results {
color: dodgerblue;
font-size: 16px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: blue;
}

tr.results {
border-style: solid; /* change this to none to remove table row borders */
border-width: 1px;
border-color: dodgerblue;
display: block;
margin-bottom: 0px;
}

td.results {
display: block;
font-size: 15px;
text-align: right;
padding-right: 5px;
}

td.results::before {
content: attr(data-label);
float: left;
font-weight: normal;
color: dodgerblue;
padding-left: 5px;
}

td.results::after {;
clear: right;
}

td.results:last-child {
border-bottom: 0;
padding-bottom: 5px;
}

button.results {
/* display: block; */
text-align: right;
font-size: 17px;
font-weight: bold;
color: white;
background-color: dodgerblue;
width: fit-content;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
border-style: solid;
border-width: 2px;
border-color: lime;
border-radius: 25px;
}
 
} /* end max-width 600px for phone */

/* END TABLE RESULTS CLASS  */


/* BEGIN MEDIA CLASS  */

@media screen and (min-width: 601px) {  /* Note curly brace! */
div.media {
width: 100%;
}

video.media {
width: 90%;
margin-left: auto; /* combined with margin-right centers video */
margin-right: auto; /* combined with margin-left centers video */
border-style: solid;
border-width: 1px;
border-color: lime;
padding: 0px;
}

figcaption.media {
color: sandybrown;
text-align: center;
font-size: 20px;
}

img.media {
width: 100%; /* within it's container element */
padding: 2px;
margin: 0px;
}

span.media,
a.media,
p.media {
font-size: 20px;
color: white;
}

} /* end styles for laptop and desktop screens >= 601px */

@media screen and (max-width: 600px) {
/* begin max-width 600px for phone */
div.media {
width: 100%;
}

audio.media,
video.media {
width: 100%;
border-style: solid;
border-width: 1px;
border-color: lime;
}

figcaption.media {
color: sandybrown;
text-align: center;
font-size: 17px;
}

img.media {
width: 100%; /* within it's container element */
padding: 2px;
margin: 0px;
}

span.media,
a.media,
p.media {
font-size: 17px;
color: sandybrown;
}

} /* end max-width 600px for phone */

/* END MEDIA CLASS  */

/*
Update: 28 Sep 2015 by Jack F to merge changes from various versions, re-arrange styles and add more comments
2015-10-17: added div.collapse and div.expand
2015-11-27: added .collapse as a test
2016-01-25: changed nav ul li a (lines 295 and 321) from 170px to 190px
2016-02-04: changed the color of h2, unvisited links from red to orangered; changed the size for h1 from 200% to 150%;
2016-02-24: changed hover background color from #7A991A to mediumslateblue
2016-07-16: modified body for lav;
added .expand and commented out div.collapse and div.expand;
2016-07-29: commented out parts of body background
2016-08-06: changed h4 to be left justified
2022-12-16: lg added h3.undeline;
2022-12-27: jf added class="river" styles at beginning of file
2022-12-27: jf added figure styles developed for ggg archive from ggg3.css
2022-12-27: jf changed p font-size from medium to 20px (previous was too small)
2022-12-27: jf added padding-bottom: 10px to li element makes lists more readable
2022-12-30: lg changed font-size for ul, li, ol, figcaption per jf;
2023-03-02: lg changed figcasption to lime and center per jf;
2023-03-05: jf fixed column using propoer @media for col at 768 display width;
2023-03-05: jf fixed column class @media for <=600 1 column; 601 to 850 2 columns and >850 four columns; galleries now change columns reliably;
2023-03-05: jf gave each section body a different background image; home page and victor = original blue fern, lou = western black leather, us = vintage denim except photo galleries no background image, and theRiver = faint white water;
2023-03-05: jf added html styling (didn't know that could be done) as a container with max-width 1400px (prevents over-stretching/scaling of images on huge TV displays; also added default text color and size for echo statements and error messages prior to the html body statement;
2023-03-05: jf added styles for select, button button.hover;
2023-03-05: jf consolidated figure and figcaption styles (much cleaner)
2023-08007: jf removed extraneous </style> line - web console was giving error
2023-12-11: lg modified visited links in color-links class per jf;
lg added default link definitions per jf;
2024-08-02: jf fixed missing { } in responsive galleries and adjusted @media widths
2024-12-23: lg added nav.fixed1 and nav.fixed2 per jf
2025-01-13: removed errant closing comment tag per jf;
2025-01-27: made additions and modifications per jf;
2025-02-05: jf Complete revision of entire file as follows:
* created and/or modified class styles for library, results, querytable
* did not change class river, did not create class gallery
* cloned library @media for narrow screens (phone) to results attempting to make
* sermon-database usable on a phone, fixed conflict with anchor class color-links
* updated font-sizes to be either variable width (vw) or fixed (px)
* removed redundant styles, font-family only in html inherited everywhere else
* edited and added LOTS of comments
* changed overall color scheme to reduce brightness, contrast and eye strain
* new colors sandybrown replaced yellow, dodgerblue replaced cyan, minimized use
* of lime and fuschia, removed fern background from victor section, now is black
2025-02-08: jf adjusted library class table for phone, removed borders, added hr.library
2025-03-19: per jf, changed all auto-fit to fit-content;
2025-04-09: per jf added button.results;
2025-04-10: per jf, commented out button.results display attribute for both flavors;
*/