body {
	background-repeat: repeat-x;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11pt;
	scrollbar-3dlight-color:#2B6B86;
	scrollbar-arrow-color:white;
	scrollbar-base-color:#2B6B86;
	scrollbar-darkshadow-color:#2B6B86;
	scrollbar-face-color:#2B6B86;
	scrollbar-highlight-color:;
	scrollbar-shadow-color:#2B6B86;
	background-image: url(/images/bg.gif);
	background-color: #F2F2F2;
	color: #1A4050;
}
.shadow {
  box-shadow:9px 9px 9px 1px #999999;  
}
ul,li,caption {
	font-family:Arial,Helvetica,sans-serif;
	font-size:11pt;
	color:#2B6B86
}
h1 {
	font-family:Arial,Helvetica,sans-serif;
	font-size:18pt;
	color:#004080
}
h2 {
	font-family:Arial,Helvetica,sans-serif;
	font-size:16pt;
	color:#004080
}
h3 { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:14pt;
	color:#004080
}
th {
	font-family:Arial,Helvetica,sans-serif;
	font-size:11pt;
	color:#004080;
}
td,p {
	font-family:Arial,Helvetica,sans-serif;
	font-size:11pt;
	color: #1A4050;
}
.disc {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #004080
}
a:link {
	color: #6633CC;
}
a:visited {
	color: #009900;
}
a:active {
	color: #336699;
}
.side {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #2B6B86
}
.heading {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11pt;
	color:#004080;
	font-weight: bold;
}
pre {
	color: #004080;
}
del {
	color: #FF0000;
}
input[type=number]{
    width: 48px;
} /*NAV*/
/* main menu */
nav ul { list-style:none; padding: 0 4px;
}/*add background color here if menu will be different from body bg color*/
nav ul::after {content:"_"; clear:both; visibility:hidden; display:block; height:0px;
}
nav ul li {float:left; position:relative;
}
nav ul li a:link,nav ul li a:visited{
	color:#2B6B89;
}
nav ul li a:hover{
	color:#6633CC;
}
nav ul li a {display:block; text-decoration:none; padding: 0px 0px 0px; font-size:18px; -webkit-transition: 0.25s ease-out;
}
 /*nav ul li:hover > a { background:LightCyan;
}Add color here if changing the text color for rollovers. I am leaving them purple.*/
nav ul li:active > a { color:#FFF;
} 
.menu {
    margin-top:-4px;
	display: flex;
    justify-content: space-between;
}
nav > ul > li > a{
	font-family:Garamond, "Times New Roman", Times, serif;
	font-size:18px;
	font-weight:bold;
}
/* sub menu */
nav ul li > ul:before {
  content: "";
  border-style:solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent LightCyan transparent;
  width:0;
  height:0;
  position:absolute;
  left:15px;
  top: 5px;
}
/*above code makes the little arrow*/
nav ul li > ul { position:absolute; left:16px; top:80%; padding-top: 12px; background:none; width: 120px; z-index:-9999; opacity: 0; -webkit-transition: 0.25s ease-out; }
nav ul li:hover > ul { display:block; z-index:100; opacity: 1; top:95%}
nav ul li > ul li:first-child {border-radius: 4px 4px 0 0; padding-top: 3px;}
nav ul li > ul li:last-child {border-radius: 0 0 4px 4px; }
nav ul li > ul li { padding:0 3px 3px; background:LightCyan; width:100%; }
nav ul li > ul li a {display:block; padding:3px 3px; border-radius: 2px; font-size:14px;}
nav ul li > ul li:hover > a {color: #FFF; background: #2B6B89;
}
/*nav ul li > ul li.active > a {color: #FFF; background: #000000;} Not sure why I need this*/

/*sub sub menu*/
nav ul li > ul li > ul:before {
  content: "";
  border-style:solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent LightCyan transparent;
  width:0;
  height:0;
  position:absolute;
  left:0;
  top: 12px;
  -webkit-transform: rotate(270deg);
}
/*above code makes the little arrow*/
nav ul li > ul li > ul { top:0; left:90%; padding:0; padding-left:12px; -webkit-transition: 0.25s ease-out;
}
nav ul li > ul li:hover > ul { display:block; z-index:100; opacity: 1; top:0; left:100%;
}