body {
	background-color: #666666;
	font-family: Cabin;
	text-align: justify;
	background-image: url('back.png');
}

.back {
  font-size: 1.5ex;
  color: #FFFFFF;
  text-align: left; 
  margin: 0.5em auto;
  border: none;
}
 
.back a {
  color: #FFFFFF;
  font-size: 90%;
}
 
.back a:hover {
  color: orange;
  text-decoration: underline; 
}

.contentPane {
  border: 1px none #223344;
	width: 95%;
  margin: 0px auto;
}

.header {
  font-weight: bold;
  text-align: center;
	color: #444444;
} 

.header td.left {
  font-family: "gill sans", verdana, sans-serif;
  font-size: 150%;
  vertical-align: top;
  color: #FFFFFF;
	color: #000000;
} 

.header td.right {
  font-family: "gill sans", verdana, sans-serif;
  font-size: 150%;
  vertical-align: top;
  color: #FFFFFF;
	color: #444444;
}

.header table {
    border: 0;
    width: 100%;
}

.nav {
	font-size: 1.9ex;
	font-weight: bold;
	text-align: center;
}

.nav ul {
  border-bottom: 1px solid #223344;
  text-align: center;
  font-family: sans-serif, arial;
}


 
.nav a {
  border: 1px solid #223344;
  border-bottom-color: #4F8BAE;
	background-color: #4F8BAE;
  color: #FFFFFF;
}

.nav a.selected {
  font-size: 2.1ex;
  border-bottom: 1px solid #FFFFFFF3;
  background-color: #FFFFFFF3;
  color: #2F5D78;
}

.nav a.selected:hover {
  background-color: #FFFFFFF3;
  color: #2F5D78;
  cursor: default;
	border-bottom-color: #FFFFFFF3;
}

.nav a:hover {
    background-color: #2F5D78;
	border-bottom-color: #2F5D78;
}

.mainBody {
  background-color: #FFFFFFF3;
  border-bottom: 1px solid #223344;
  border-right: 1px solid #223344;
  border-left: 1px solid #223344;
}

.mainBody h1, h2, h3, h4, h5 {
  text-align: justify;
  color: #2F5D78;
  padding: 0ex;
  margin: 1ex 0ex;
}

.mainBody p, ul, ol {
  text-align: justify;
}

.mainBody h1 {
  font-family: "Ubuntu", verdana, sans-serif;
  font-size: 150%; 
  font-weight: bold;
} 
  
.mainBody h2 {
  font-family: "Ubuntu", verdana, sans-serif;
  font-size: 140%;
  font-weight: bold;
} 
     
.mainBody h3 {
  font-family: "Ubuntu", verdana, sans-serif;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
} 
     
.mainBody h4 {  
  font-family: "Ubuntu", verdana, sans-serif;
  font-size: 120%;
  font-weight: bold;
} 
  
.mainBody h5 { 
  font-family: "Ubuntu", verdana, sans-serif;
  font-weight: bold;
} 
  
.mainBody a { 
  color: #0070df;
  font-weight: bold;
}

.mainBody a:hover {
  color: #1e90ff;
  text-decoration: underline;
}

.mainBody pre {
  font-family: "Bitstream Vera Sans Mono", monaco, "Courier New", courier, monospace;
  font-weight: normal;
  background-color: #fff5e9;
  font-size: 1.6ex;
  padding: 1.2ex;
  text-align: left;
  border: 1px solid #98b3be;
}

.mainBody select {
    border: 1px solid #445566;
    color: #223344;
    background-color: #ffffff;
}

.option {
    border: 1px solid #445566;
    color: #223344;
    background-color: #ffffff;
}

.mainBody input.text {
    border: 1px solid #445566;
    padding-left: 0.25em;
    padding-right: 0.25em;
    color: #223344;
    background-color: #ffffff;
    width: 22em;
}

.mainBody input.button {
    padding: 0.25em;
    font-weight: bold;
    color: #202080;
}

.mainBody input.file {
    border-style: none;
	border-color: inherit;
	border-width: medium;
	padding: 0ex 0ex 0ex 12px;
	margin: 0ex 0.4ex 0ex 0ex;
	font-size: 2ex;
    font-weight: bold; 
    color: #245b72;
    background: #fff5c9 url('file:///C:/Users/Ari/images/bullet.gif') no-repeat left center;
    cursor: pointer;
}

.mainBody textarea { 
  border: 1px solid #445566;
  padding: 0.25em;
}

.mainBody td.info {
  text-align: left;
  vertical-align: top;
}

.mainBody ul.info {
  list-style-type: none;
}

.chapterNav {
  border-color: #008F35;
  border-width: 0;
}

.chapterSelected {
	border: 1px solid #008F35;
	text-align: center;
	color: #FFFFFF;
	background-color: #008F35;
}

.chapterSelected a{
	color:white !important;
	font-weight:normal
}

.chapterNotSelected {
	border: 1px solid #008F35;
	text-align: center;
}

.chapterNotSelected a{
	color: #000001;
	font-weight:normal
}


.footer {
  color: #ffffff;
}

.footer td {
  vertical-align: top;
  text-align: center;
}

.footer a { 
  color: #FF0000;
}


/* this probably shouldnt be here, but we can change */
/* it later if we find the need to make another form */
form {
  text-align: left;
}
/* <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700*/

.cabin-<apple> {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}
a {
  text-decoration: none;
}

img {
  border: 0px none;
}

img.left {
  float: left;
}

img.right {
  float: right;
}

hr {
  border-top: 1px solid #98b3be;
  border-bottom: 1px solid #98b3be;
  width: 100%;
  margin: 2ex 0ex;
  clear: both;
}


td {
  text-align: justify;
  vertical-align: top;
}

td.left {
  text-align: left;
} 

td.right {
  text-align: right;
}


.error {
  font-weight: bold;
  color: #ff0000;
}

.formtable {
  text-align: left;
  font-size: 1em;
}

.bib {
  padding: 0px 20px 10px 40px;
  margin: 0px;
}

.center {
  text-align: center;
}

.email {
  font-style: italic;
}

@media (max-width: 768px) {
    .nav ul {
        display: flex;
        flex-direction: column; /* Stack navigation items */
        padding: 0;
    }

    .nav li {
        display: block; /* Ensure <li> wraps around its children */
        margin: 5px 0; /* Optional: Add spacing between items */
    }

    .nav a {
        display: block; /* Ensure <a> behaves as a block to respect padding */
        padding: 10px;
        text-align: center;
        border: none;
    }
}

@media (max-width: 480px) {
    h1, h2, h3 {
        font-size: 20px;
    }

    .nav ul {
        font-size: 14px;
    }
}