cfinput:focus, input:focus {
    background-color: #e1eff5;
}
cfinput, input{
	text-align: left;
	font-size: 14px;
    font-family: Calibri, Arial;
}
cfselect, select {
	font-size: 14px;
    font-family: Calibri, Arial;
}
cfinput::placeholder, input::placeholder, textarea::placeholder {
  font-weight: normal;
  opacity: 0.9;
  color: silver;
font-style: italic;
}
p.sc {
text-shadow: 3px 2px #eee;
font-family: Arial;
font-variant: small-caps;
}
p.indent {
text-indent: 25px;
font-family: Arial;
}
p {
font-family: Arial;
}
p.comments {
    font-size: 0.8em;
    padding-left: 30px;

}
label {
*/ text-shadow: 2px 1px #eee;
font-variant: small-caps;
cursor: pointer; 
font-family: Arial;
font-size: 1em;
font-weight: bold;
color: #2d5f7d;
}
img {
border-style: none;
vertical-align:middle;
float: middle;
padding-right: 0px;
}
img.right {
border-style: none;
vertical-align:middle;
padding-right: 0px;
}

.edit {
border-style: none;
vertical-align:middle;
float: middle;
padding-right: 0px; 
opacity: 1;
max-height: 20px;
}
.edit:hover {
border-style: none;
vertical-align:middle;
float: middle;
padding-right: 0px;  
opacity: 1;
}

hr {
padding-top: 0px;
padding-bottom: 0px;
width: 50%;
}

hr.articlesHR {
    border: 0; 
    height: 1px; 
    background: #333; 
    background-image: linear-gradient(to right, #e1e1e1, #b1b1b1, #e1e1e1);
}
a.blue {
    text-decoration: none;
	color: darkblue;
}
a.blue:hover {
    text-decoration: none;
	text-shadow: 1px 0 0 silver;
	color: maroon;
}
a.maroon {
    text-decoration: none;
	color: maroon;
}

a.article {
    text-decoration: none;
    color: inherit;
}
a.headerlinks {
    text-decoration: none;
    font-size: .9em; 
    color: #8a8a8a;
}
a.headerlinks:hover {
    text-decoration: none;
    font-size: .9em; 
    color: black;
}
span.headerlinks {
    text-decoration: none;
    font-size: .9em; 
    color: #8a8a8a;
}

div {
margin-left: auto; 
margin-right: auto;
/*    border: 2px solid red; */     /* Used for troubleshooting */
}

div.page {
display: table;
margin-left: auto;
margin-right: auto;
}

div.mainbody {
position: absolute;
margin: 10px auto auto auto;
max-width:1200px;
box-sizing: border-box;
height:fit-content;
border-radius: 5px;
border: 1px solid #1b92b4;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
opacity: 1.0;
font-family: Arial;
background-color: white;
display: inline-block;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Optional spacing between child DIVs */
}

.parentArticles {
    display: flex;
    justify-content: center;
    align-items: center;

}

.alerts {
font-family: aptos, verdana, arial;
border: 1px solid #e1e1e1; 
border-radius: 5px;
padding: 10px;
width: fit-content;
flex: 1 1 calc(33.333% - 10px); /* 3 items per row with spacing */
box-sizing: border-box;
text-align: left;
vertical-align: top;
}

.notices {
font-family: aptos, verdana, arial;
border: 1px solid #e1e1e1; 
border-radius: 5px;
padding: 10px;
flex: 1 1 calc(33.333% - 10px); /* 3 items per row with spacing */
box-sizing: border-box;
width: fit-content;
text-align: left;
vertical-align: top;
}

.articles {
font-family: aptos, verdana, arial;
border: 1px solid #e1e1e1; 
border-radius: 5px;
padding: 10px;
display: flex; 
align-content: center;
justify-content: center;
align-items: stretch;   /* ensures all items match the tallest one */
flex-wrap: wrap;        /* allows items to wrap to the next line */
gap: 20px;
background-color: ##ffffff;
margin: auto;
flex: 1 1 calc(25% - 10px);
 min-width: 220px; /* prevent article contents in thumnail version from exceeding table boundries */
}

.articles table {
max-width: 20%;
border: 1px solid #e1e1e1;
border-radius: 10px;
margin: 10px;
box-sizing: border-box; 
display: flex;
flex-direction: column;
/*height: 100%;*/ /* stretch to match tallest */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.articlebody {
font-family: aptos, verdana, arial;
padding: 10px;
text-align: left;
}

.tacomment {
    width: 100%;
    height: 5em;
}


table {
	
	font-size: 11pt;
	padding: 0px;
	border-spacing: 0;
    border-collapse: collapse;
	margin-top: 0px;
}
table.home {
	
	font-size: 11pt;
	padding: 0px;
	border-spacing: 0;
    border-collapse: separate;
	margin-top: 0px;
    width: 100%;
}

table.options {

	font-size: 10pt;
	padding: 10px;
	border-spacing: 0;
    border-collapse: collapse;
	margin-top: 0px;
	margin-left:auto; 
    margin-right:auto;
}
table.comments {
    width: 100%;
    border-radius: 10px;
}
td {
text-align: center;
font-weight: normal;
    font-size: 1em;
border: 0px solid black;
padding: 5px 5px 5px 5px;
border-radius: 0px;
}
td.maintitle {
text-align: center;
font-weight: normal;
font-size: 2em;
font-family: aptos, verdana, arial;
color: #2d5f7d;
border: 0px solid black;
padding: 5px 5px 5px 5px;
border-radius: 0px;
}
td.main {
text-align: left;
vertical-align: top;
font-weight: normal;
font-size: 1em;
font-family: aptos, verdana, arial;
color: #2d5f7d;
border: 0px solid black;
padding: 5px 5px 5px 5px;
border-radius: 0px;
width: 33%;
}
td.divider {
border: 0px solid #1b92b4;
border-radius: 10px; 
box-shadow: 0 2px 4px 4px rgba(27, 146, 180, 0.1), 0 0 3px 0 rgba(27, 146, 180, 0.1);
    padding: 0px;
}

td.left {
text-align: left;
font-weight: normal;
border: 0px solid black;
padding: 5px 5px 5px 5px;
}

td.ManageMenusLeft {
text-align: left;
font-weight: normal;
border: 0px solid black;
padding: 5px 5px 5px 5px;
vertical-align: top;
white-space: nowrap;
}

td.ManageMenusRight {
text-align: right;
font-weight: normal;
border: 0px solid black;
padding: 5px 5px 5px 5px;
vertical-align: top;
    white-space: nowrap;
}

td.DropDownsLeft {
text-align: left;
font-weight: bold;
border: 0px solid black;
padding: 5px 15px 5px 5px;
vertical-align: top;
}

td.right {
text-align: right;
font-weight: bold;
border: 0px solid black;
padding: 5px 5px 5px 5px;
}



td.arrow {
text-align: center;
width: 20px;
padding: 5px 5px 5px 5px;
vertical-align: top;
}

td.hide {
	display: none;
}

td.comments {
    background-color: #ededed;
    text-align: left;
    font-style: italic;
    border-radius: 10px;
}
tr.light {
	background-color: EEEEEE;
}
tr.dark {
	background-color: 99CCDD;
}
td.articlesTD {
    padding: 10px;
}

td.GroupList {
text-align: left;
padding: 5px 50px 5px 5px;
vertical-align: top;
white-space: nowrap;
}

th {
text-align: center;
font-weight: bold;
border: 0px 0px 0px 0px solid black;
background-color: #a6d0e3;
padding: 5px 5px 5px 5px;
font-variant: small-caps;
font-size: 12pt;
}
th.left {
text-align: left;
font-weight: bold;
border: 0px 0px 0px 0px solid black;
background-color: #a6d0e3;
padding: 5px 5px 5px 5px;
font-variant: small-caps;
font-size: 12pt;
}


div.scroll {
  width: 100%;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}
.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

body {
    background-color: #2d5f7d;
height: 100%
}

.homecontent {
    /* display: inline-block; */
}

.header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

div.footer {
    /* position: absolute; */
    bottom: 0;
    text-align: center;
    width: 100%;
    display: inline-block;
}

body::after {
	font-family: Arial;
	font-size: 12pt;
background-image: url("images/EmersonSkyline.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
	}
.shadow:hover {
      box-shadow: 0 4px 8px -8px rgba(0, 0, 0, 0.1), 0 0 6px 0 rgba(0, 0, 0, 0.1);
    }
fieldset {
border: 0;
}

.menuIcon {
    max-height: 1.5em;
    vertical-align: middle;
    display: inline-block;
}

.menuIconLarge {
    max-height: 2em;
}

.hide {
 display: none;
}
button.expcol {
border: 0px;
font-size: 0.75em;
background-color: transparent;
}

button.thumb {
border: 0px;
font-size: 0.75em;
background-color: transparent;
color: #333333;
cursor: pointer;
}

.title {
    font-weight: bold;
    white-space: nowrap;
}

.fieldvalue {
    font-size: .8em;
}

span.notes {
    text-decoration: none;
	color: darkblue;  
    font-size: .9em;
    font-style: italic;
}

.description {
    font-size: .8em;
    color: #a1a1a1;
}

.articlename {
    font-size: 2em;
    color: #a1a1a1;
    font-weight: bold;
}
.articlenamethumb {
    font-size: 1.25em;
    color: #2d5f7d;
}
.articlebody {
font-family: aptos, verdana, arial;
}

.articleIMG {
    height: 1em;
    vertical-align:middle
}
h2 {
margin-bottom: 0;
padding-bottom: 0

}

<!--- ------------------------------ Drop Down Menu Items ------------------------------ --->
.main {
	background-color: white;
	border: none;
	white-space: nowrap;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #eeeeee;
}

/* li {
  float: left;
} */

li a, .dropbtn {
  display: inline-block;
  color: #2D5F7D;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  background-color: white;
}

.dropbtnPreMain {
  display: inline-block;
  color: #2D5F7D;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #ffffff;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: rgba(45, 95, 125, 0.08);
    border-radius: 0px;
}

li.dropdown {
  display: inline-block;
font-size: .9em;
    max-width: 120px;
}

li.dropdownPreMain {
  display: inline-block;
font-size: .9em;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 175px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
    background-color: #eeeeee;
    font-size: .9em;
}


.dropdown-content a:hover  {
background-color: #ffffff;
    border-radius: 0px;
    font-size: 1em;
    font-weight: bold;
    color: #2D5F7D;
}

.dropdown:hover .dropdown-content {
  display: block;
}