/* CSS Document */
body,td,th {
	color: #000000;
	font-size:20px;
}
body {
	background-color: #a7caf1;
}
ul,li,caption {
	font-family:Arial,Helvetica,sans-serif;
	font-size:14px;
	color:#003366
}
/* 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:#003300;
}
nav ul li a:hover{
	color:#6633CC;
}
nav ul li a {display:block; text-decoration:none; padding: 0px 0px 0px; font-size:14px; -webkit-transition: 0.25s ease-out;
}
 /*nav ul li:hover > a { background:White;
}Add color here if changing the text color for rollovers. I am leaving them purple.*/
nav ul li:active > a { color:#FFFFFF;
} 
.menu {
    margin-top:-4px;
	display: flex;
    justify-content: space-between;
}
nav > ul > li > a{
	font-size:14px;
	font-weight:bold;
}
/* sub menu */
nav ul li > ul:before {
  content: "";
  border-style:solid;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent White 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:White; 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: #FFFFFF; background: #003366;
}
/*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 White 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%;
}
h1,h2,h3 {
	color: #003366;
}
cite {
	font-size: 12px;
	color: #003366;
}