/*Color usage:
whitesmoke = very pale grey, use for menu banner and background
gainsboro  = slighty darker grey to highlight a menu item when hovering
slateblue  = menu text, with or without highlighting
*/
/* laptop display*/
body {
  margin: 0;
  font-family: Arial, Helvetica, serif;
  font-size: 100%;
}
h1 {
  font-size: 1.125em;  /* 18px/16px per em */
  line-height: 1.5em;
  font-weight: bold; 
  color: darkblue;
  padding: 0;
  margin: 0;
}

h2 {
  font-size: 1.0em; /* 16px/16px per em */
  line-height: 1.5em;
  font-weight: bold; 
  color: maroon;
  padding: 0;
  margin: 0;
}
ul.a {
  list-style-position: outside;
  font-size: 1.0em; /* 16px/16px per em */
  line-height: 1.5em;
  font-weight: normal; 
  color: black;
  padding-left: 1em;
  margin: 0;
}
/*paragraph with spacing*/
p {
  font-size: 1.0em; /* 16px/16px per em */
  line-height: 1.5em;
  font-weight: normal; 
  color: black;
  padding-bottom: 0.5em;
  margin: 0;
}
/*paragraph without spacing*/
pn {
  font-size: 1.0em; /* 16px/16px per em */
  line-height: 1.5em;
  font-weight: normal; 
  color: black;
  padding-bottom: 0em;
  margin: 0;
}
/*copyright notice*/
p1 {
  font-size: 0.75em; /* 12px/16px per em */
  line-height: 3em;
  font-weight: normal; 
  color: black;
  padding: 0.5em;
  margin: 0;
}
/*horizontal blue line for separation */
table {
   width: 100%;
}
tr.bl{
   height: 0.2em;
   background-color: blue;/*"#00ffff";*/
}
td.bl{
   color: red;
   width: 100%;
   background-color: blue; /*"#00ffff";*/
}
div.content {
  margin-left: 0.5mem;
  padding: 0.5em 0.5em;
  height: auto;
}

.nav {
  overflow: hidden;
  background-color: whitesmoke;  
}
/* main menu button, without sub-menu */
.nav a {
  float: left;
  font-size: 1em; /*16px*/
  color: slateblue;
  text-align: center;
  padding: 1em 0.25em;/*16px 4px*/
  text-decoration: none;
}
/*sub-menu bar*/
.subnav {
  float: left;
  overflow: hidden;
}
/*hover sub-menu button, main menu button still highlighted*/
.subnav .subnavbtn:hover {
  background-color: aliceblue;
  border: 1px solid black;
}

/*sub-menu button*/
.subnav .subnavbtn {
  font-size: 1em; /*16px*/  
  border: none;
  outline: none;
  color: slateblue;
  padding: 1em 0.25em;/*16px 4px*/
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/*hover over main buttons without sub-menu*/
.nav a:hover{
  background-color: gainsboro;
  border: 1px solid black;
}
/*hover over main buttons with sub-menu*/
.subnav:hover .subnavbtn {
  background-color: aliceblue;
  border: 1px solid black;
}

/*sub-menu bar*/
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: aliceblue;
  width: 100%;
  z-index: 1;
}

/*sub-menu button*/
.subnav-content a {
  float: left;
  color: slateblue;
  text-decoration: none;
}
/*hover submenu buttons */
.subnav-content a:hover {
  background-color: gainsboro;
  color: slateblue;
}
/*hover submenu buttons */
.subnav:hover .subnav-content {
  display: block;
}

/*caret down-triangle definition*/
.triangle {
    width: 0; 
    height: 0; 
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid slateblue;
}
/*
Default mobile screen definition, portrait.
Sidebar now takes up the entire width, at the top.
Content now below sidebar, entire width.
*/
@media screen and (max-width: 700px) {
  /*copyright notice, mobile*/
  p1 {
     font-size: 0.75em; /* 12px/16px per em */
     line-height: 1em;
     font-weight: normal; 
     color: black;
     padding: 0;
     margin: 0em;
  }  
}