body{
  background-color: #000000; /* Used if the image is unavailable */
  padding: 0px;
  width: 100%;
  line-height: 120%;
  color: #000000;
  font-size: 16pt;
  font-family: 'Bookerly', 'Baskerville', 'Garamond', 'Georgia', 'Times New Roman', serif;
}
h1{
  font-weight:bold;
  font-size: 18pt;
  margin-top:20px;
  margin-bottom:20px;
  color: #ffffff;
}
h2{
  font-weight:bold;
  font-size: 16pt;
  margin-bottom:20px;
  color: #ffffff;
}
h3{
  font-weight:bold;
  font-size:16pt;
  margin-bottom:20px;
}
p{
  margin-bottom:20px;
}
a{
  color: #b57236;
  font-weight: bold;
  text-decoration:none;
}
a:hover{
  color: #F0A85D;
  text-decoration:underline;
}

#container{
  width: 100%;
  text-align:center;
/*  padding-top:20px; */
}

.central{
  width:100%;
  min-width:800px;
  max-width:1000px;
  display:inline-block;
  text-align:center;
}

#pageContent{
  clear:both;
  display:inline-block;
  text-align:center;
  width:100%;
  min-width:800px;
  max-width:1200px;
  margin:0px;
  padding:0px;
  min-height:700px;
  padding-bottom: 100px;
}
#fixed-bg {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width:800px;
  max-width: 1200px; /* match site width */
  height: auto;
  aspect-ratio: 16 / 9; /* or remove for auto height */
  background-color: #000000; /* Used if the image is unavailable */
  background-image: url('/webimages/SherlockE.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: -1;
  pointer-events: none;
}

.pageDark{
  background: rgba(0, 0, 0, 0.2) !important;
  color: rgba(233, 222, 207, 1) !important;
}

#pageCentral{
  padding: 20px;
  text-align: left;
  width:80%;
  min-width:700px;
  max-width:1000px;
  display:inline-block;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #c0c0c0;
  line-height: 160%;
  font-size: 18pt;
  font-weight: normal;
  font-family: 'Bookerly', 'Baskerville', 'Garamond', 'Georgia', 'Times New Roman', 'serif';
}

#mainMenu{
  width: 100%;
  text-align: center;
  height: 50px;
  padding:0px;
  background: black;
  font-size: 14pt;
}
#mainMenu ul{
  display: block;
  width:100%;
  text-align:center;
  height:50px;
}
#mainMenu li{
  display: inline-block;
  margin-left:10px;
  margin-right:10px;
  height:50px;
  line-height:50px;
}
#mainMenu li a{
  color: #E8C184;
  height:50px;
  line-height:50px;
  text-decoration: none;
  font-weight: normal;
}
#mainMenu li a:hover{
  color: #ffffff;
  text-decoration: underline;
}
#title{
  display:block;
  max-width: 290px;
  float:left;
  font-size:24pt;
  line-height:50px;
  height:50px;
  color:#ffffff;
}

#adminMenu{
  clear:both;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: #600000;
  color: white;
  background-image: url('/webimages/adminBkg.png');
  background-repeat: repeat-x; /* Repeat only horizontally */
  background-position: top center; /* Start at the top center */
  background-size: auto 100%;
}
#adminMenu li{
  display: inline-block;
  margin-right:20px;
}
#adminMenu li a{
  color: #E8C184;
  text-decoration: none;
  font-weight: normal;
}
#adminMenu li a:hover{
  color: #ffffff;
  text-decoration: underline;
}

#userMenu{
  clear:both;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: #B6AA93;
  color: #ffffff;
  background-image: url('/webimages/userBkg.png');
  background-repeat: repeat-x; /* Repeat only horizontally */
  background-position: top center; /* Start at the top center */
  background-size: auto 100%;
}
#userMenu ul, #adminMenu ul, #footerMenu ul, #mainMenu ul{
  margin-top:0px;
  margin-bottom:0px;
}
#userMenu li{
  display: inline-block;
  margin-right:20px;
}
#userMenu li a{
  color:#E8C184;
  text-decoration: none;
  font-weight: normal;
}
#userMenu li a:hover{
  color: #ffffff;
  text-decoration: underline;
}

#footerMenu{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background: black;
  color: white;
}
#footerMenu ul{
  height: 50px;
  display: block;
}

#footerMenu li{
  display: inline-block;
  margin-right:20px;
  height:50px;
  line-height:50px;
}
#footerMenu li a{
  color: #E8C184;
  height:50px;
  line-height:50px;
  text-decoration: none;
  font-weight: normal;
}
#footerMenu li a:hover{
  color: #ffffff;
  text-decoration: underline;
}
#stories{
  text-align: left;
  padding:20px;
  line-height: 160%;
  background: rgba(255, 255, 255, 1);
/*  position:relative; */
  color: black;
  font-size: 22pt;
  width:90%;
  margin-top:20px;
/*  margin-left:-50%;
  left:50%; */
  display:inline-block;
  font-family: 'Bookerly', 'Baskerville', 'Garamond', 'Georgia', 'Times New Roman', serif;
  border-radius: 12px; /* Soft rounded corners */
}
#stories h1{
  color:black !important;
  font-size: 24pt;
}
#stories h2{
  color:black !important;
  font-size: 22pt;
}
#stories h3{
  color:black !important;
  font-size: 22pt;
}

.storyResult{
  clear:both;
  width: 100%;
  display: block;
  text-align:left;
  margin-top: 20px;
  padding-top:20px;
  padding-bottom:20px;
  border-bottom: 1px dotted #B6AA93;
  overflow:hidden;
}

.dataCells{
  text-align:left;
  padding:4px;
  border-bottom: 1px solid #B6AA93;
}

input, select, textarea {
  background-color: #333; /* Dark background for form elements */
  color: #E0D6C3; /* Light text color to contrast */
  border: 1px solid #B57236; /* Subtle, warm border color */
  border-radius: 4px; /* Soft rounded corners */
  padding: 4px;
  font-size: 16pt;
  height:40px;
}

input:focus, select:focus, textarea:focus {
  background-color: #444; /* Slightly lighter on focus */
  border-color: #F0A85D; /* Golden border on focus */
  outline: none; /* Remove default outline */
}

label {
  color: #E0D6C3; /* Light label color */
  font-weight: bold;
  margin-bottom: 5px;
}

button, input[type="submit"] {
  background-color: #B57236; /* Button background */
  color: #fff; /* White text */
  border: none;
  padding: 4px 10px 4px 10px;
  font-size: 16pt;
  cursor: pointer;
  border-radius: 6px;
}

button:hover,  input[type="submit"]:hover{
  background-color: #C48A4F; /* Lighter golden color on hover */
}

td{
  color: #c0c0c0;
  line-height: 160%;
  font-size: 16pt;
  font-weight: normal;
  font-family: 'Bookerly', 'Baskerville', 'Garamond', 'Georgia', 'Times New Roman', 'serif';
  padding:4px;
}
#stories td{
  color: black !important;
}
.errors{
  color: #FF3B30;
  font-weight: bold;
}

#prevPage{
  display:inline-block;
  float:left;
  width:200px;
  text-align: left;
}
#nextPage{
  display:inline-block;
  float:right;
  width:200px;
  text-align: right;
}
.bigLink{
  font-size: 1.6em !important; 
}
.storyResultHome{
  clear:both;
  width: 100%;
  display: block;
  text-align:left;
  margin-top: 20px;
  padding-top:20px;
  padding-bottom:20px;
  border-bottom: 1px dotted #B6AA93;
  overflow:hidden;
  font-size:14pt;
}
.storyResultHome p, .storyResultHome h2, .storyResultHome a{
 font-size: 11pt !important;
}