@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:wght@300;400;500;700&family=Caveat&family=Shadows+Into+Light&display=swap');
body { font-family: Roboto, Arial, sans-serif; font-size:14pt; margin: 0; padding: 0; text-align: center; color: #000; background-color:#fff; }
img {max-width: 100%; height: auto; }
* {box-sizing: border-box;}
H1, H2, H3, H4, H5   { 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; 	text-align: center; }
H1   { 	color: #000; 	font-size: 22pt; }
H2  { 	color: #000; 	font-size: 18pt; }
H3 { 	color: #422d37; 	font-size: 18pt; }
H4 {color:#422d37; font-size:16pt; text-align:left; padding-left: 8px;  }
@media only screen and (max-width: 768px) {H1, H2, H3, H4, H5   {font-size: 16pt; } }
p, ul  { font-size: 14pt; line-height:20pt; padding-right: 8px; padding-left: 8px; color:#000; text-align:left; }
table {font-size:14pt; line-height:1em; padding:2px; color:#333; margin:0 auto; }

H4 a.black {color:#000; font-weight:bold; text-decoration-thickness: 1px; }

a:link {color:#422d37; text-decoration:underline; font-weight:500;}
a:visited {color:#422d37; text-decoration:underline; font-weight:500;}
a:hover {color:#422d37; text-decoration:none; font-weight:500;}
a:active {color:#422d37; text-decoration:underline; font-weight:500;}

#contctr { width:100%; text-align:center; }
#content { width: 88%; border-left:solid #aa8866 thin; border-right:solid #aa8866 thin; border-bottom:none; padding: 0; margin: 0 auto; text-align:left; background-color: #fff; }
@media only screen and (max-width: 768px) { #content { width: 99%; }  }

#hdr {width:100%; background-color:#fff; border-bottom:inset #ffcc99 thin; max-height:60%vh; }
#tbl p {font-size:14pt; line-height:1em; padding:0; color:#000; text-align:left; margin:0; font-weight:normal; }

#fltrtbox {	width:300px; max-width:28%; margin:0; padding:0 36px 0 36px; background-color:#fff; color:#030; z-index:3; position:fixed; top:0; right:0; }
@media only screen and (max-width: 600px) { #fltrtbox { float:none; width:100%; padding:0 12px 0 12px; } }
#fltlftbox { float:left; width:100%; border:none; margin:0; padding:0px; background-color:#fff; }
@media only screen and (max-width: 600px) { #fltlftbox { float:none; width:100%; margin:0; } }

#contentnav { width: 88%; border-left:none; border-right:none; padding: 0; margin: 0 auto; text-align:left; background-color: #fff; }
@media only screen and (max-width: 768px) { #contentnav { width: 99%; }  }

.nav {font-family: Arial, sans-serif; width:25%; padding:4px; margin:0; float:left; display:inline-block; text-align:center; color:#422D37; line-height:1em; font-weight:bold; border-bottom:solid #aa8866 thin; }
.nav a:link {color:#422D37; text-decoration:underline;}
.nav a:visited {color:#422D37; text-decoration:underline;}
.nav a:hover {color:#303; text-decoration:none; }
.nav a:active {color:#422D37; text-decoration:underline; }

.nav2 {font-family: Arial, sans-serif; width:25%; padding:4px; margin:0; float:left; display:inline-block; text-align:center; color:#422D37; line-height:1em; font-weight:bold; border-bottom:solid #aa8866 thin; }
.nav2 a:link {color:#422D37; text-decoration:underline;}
.nav2 a:visited {color:#422D37; text-decoration:underline;}
.nav2 a:hover {color:#303; text-decoration:none; }
.nav2 a:active {color:#422D37; text-decoration:underline; }

#postings p {font-size:12pt; }

#footer {padding:8px; font-family: Arial, sans-serif;  font-size:11pt; border-top:inset #ffcc99; padding-top:8px;}
#footer p, td, ul  { font-family: Arial, sans-serif;  font-size: 11pt; line-height:normal; padding-right: 6px; padding-left: 6px; color:#333; font-weight:bold; }

.bgblk { background:#000; color:#fff; }
.bgltblue { background:#99ccff; }
.bgltgold { background:#ffffcc; }
.bluelt {color:#008282; }
.caption  { color: #9cf; font-size: 11pt; font-weight: bold; text-align:center; }
.captionlft  { color: #9cf; font-size: 11pt; font-weight: bold; text-align:left; }
.gray {color:#6f6f6f; }
.grayind {color:#6f6f6f; margin:0 auto; width:300px; }
.list { margin-left:12%; }
.p500 {font-weight:500; text-align:inherit; }
.p400 {font-weight:400; text-align:inherit; }
.p80 {font-size:80%; }
.pcenter { text-align: center; }
.pright {text-align: right; }
.pleft {text-align:left; }
.pcenter10 { text-align: center; font-size:12pt;}
.pright10 {text-align: right; font-size:12pt; line-height:1em;}
.pleft10 {text-align:left; font-size:12pt;}
.big {font-size:"+4pt"; font-weight:bold; line-height:normal; }
.boldital { font-style: italic; font-weight: bold; }
.bold { font-weight: bold; }
.dates {font:#000; font-size:11pt!important; text-align:center; line-height:8pt!important; font-weight:normal!important; margin:0!important; }
.ital {font-style:italic; }
.nomar {margin:0; }
.nomartop {margin-top:0; }
.nopad {padding:0; }
.nopadmar {padding:0; margin:0; }
.fltlft33 {float:left; width:32%; padding-right:12px; display:block; }
.fltrt {float:right;}
.fltrt50 {float:right; width:49%;}
.white {color:#fff;}
.black {color:#000;}
.green-hdr {color:#167030; }
.red {color:#c00000; }
.silver {color:#6f6f6f; }
.teal {color:#008282; }
a.teal {color:#008282; }
.poem {font-family: 'Caveat', cursive; color:#333; font-size:18pt; font-stretch:semi-expanded; }
.poemind {margin:0 10%; }
@media only screen and (min-width: 680px) and (max-width:1139px) { .poemind {margin:0 20%; }  }
@media only screen and (min-width: 1140px) { .poemind {margin:0 30%; }  }
.proph {color:#422d37; font-weight:500; }
.script {color:#1f497d; margin: 8px 36px 18px 36px; display:block; font-family: "Roboto Condensed", Geneva, sans-serif; text-align:justify; line-height:1.4em; }
@media only screen and (min-width: 800px) { .script {color:#1f497d; margin: 8px 54px 18px 54px; display:block; font-family: "Roboto Condensed", Geneva, sans-serif; text-align:justify; line-height:1.4em; }  }
.script0aft {color:#1f497d; margin: 8px 36px 0px 36px; display:block; font-family: "Roboto Condensed", Geneva, sans-serif; text-align:justify; line-height:1.4em; }
@media only screen and (min-width: 800px) { .script0aft {color:#1f497d; margin: 8px 54px 0px 54px; display:block; font-family: "Roboto Condensed", Geneva, sans-serif; text-align:justify; line-height:1.4em; }  }
.scriptctr {color:#1f497d; margin: 8px 36px 18px 36px; display:block; font-family: "Roboto Condensed", Geneva, sans-serif; text-align:center; line-height:1.4em; }
.scripthigh {color:#920000; }
.scriptinline {font-family: "Roboto Condensed", Geneva, sans-serif; color:#1f497d;}
.scriptblue {color:#1f497d;}
.songs {color:#355269; font-weight:500; }
.subtan {color:#966550; }
a.subtan {color:#966550; font-weight:500; }
.subtitle {color:#8c9f4f; }
.subpurp {color:#422d37; }
a.subpurp {color:#422d37; font-weight:500; }
.toc {width: auto; max-width:70%; margin:0 0 0 8px; font-weight:500; padding:0; }
@media only screen and (max-width: 600px) { .toc { max-width:88%;  }  }
.tocflt50 {width:48%; margin:0 8px 0 8px; float:left; display:block; line-height:normal; font-weight:500; padding:0;}
@media only screen and (min-width:601px) and (max-width: 914px) { .tocflt50 {width:46%; margin-left:8px; margin-right:8px; float:left; display:block; line-height:normal; }  }
@media only screen and (max-width: 600px) {.tocflt50 {float:none; width:98%; } }

.versenum {color:#F00; font-size:8pt; vertical-align:top; }
.numdegree {font-size:10pt; vertical-align:top; line-height:normal; }
sup {vertical-align:baseline; position:relative; top:-.8em; font-size:8pt; line-height:normal; }

.ltl-img {text-align:center; vertical-align:middle; max-width:18%; padding:8px; height:auto; }
@media only screen and (max-width: 600px) { .ltl-img {text-align:center; vertical-align:middle; max-width:32%; padding:8px; height:auto; }  }

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.fltrtbox {	float:right; width:63%; margin:0; padding:0 36px 0 0; color:#fff; }
@media only screen and (max-width: 600px) { .fltrtbox { float:none; width:100%; padding:0; } }
.clear { clear:both; font-size:1px; line-height:1px; margin:0; padding:0; }

.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */  flex-wrap: wrap; padding: 0 4px; }
.column {  -ms-flex: 25%; /* IE10 */  flex: 25%;  max-width: 25%;  padding: 0 4px;}
.column img {  margin-top: 8px;  vertical-align: middle;  width: 100%;}

@media screen and (max-width: 1200px) { .column { -ms-flex: 50%; flex: 50%; max-width: 50%; } }
@media screen and (max-width: 768px) { .column { -ms-flex: 100%; flex: 100%; max-width: 100%; } }

/* Button used to open the contact form - fixed at the bottom left of the page */
.open-button {
  background-color: #000;
  color: white;
  padding: 8px;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  position: fixed;
  bottom: 0;
  left: 0;
  width:300px;
  max-width: 47%;
  font-weight:bold;
  font-size:120%;
  text-align:center;
  border-radius:8px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width:300px;
  border: 2px solid #f1f1f1;
  border-radius:8px;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  position: fixed;
  bottom: 0;
  width: 300px;
  padding: 10px;
  background-color: white;
  z-index:1;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width:100%;
  padding: 12px;
  margin: 5px 0 5px 0;
  border: 1px solid #ddd;
  background: #f1f1f1;
  border-radius:8px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btnfrm {
  background-color: #99ccff;
  color: white;
  font-size:120%;
  font-weight:bold;
  padding: 12px;
  border: none;
  cursor: pointer;
  width:100%;
  margin-bottom:10px;
  margin-top:10px;
  opacity: 0.7;
  border-radius:8px;
}

/* Add a dark gray background color to the cancel button */
.form-container .cancel {
  background-color: #333;
}

/* Add some hover effects to buttons */
.form-container .btnfrm:hover, .open-button:hover {
  opacity: 1;
}