/*This stylesheet is used with pages containing a top navigation bar*/

header {
  grid-area: headbox;  /*put id="headbox" in html code*/
  background-color: #c8102e;
  padding: 10px;
}

main {
  grid-area: main-content;  /*put id="main-content" in html code*/
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  padding-right: 20px;
}

/*the following is for a top navigation bar*/
nav {
  grid-area: navbar;  /*put id="navbar" in html code*/
  padding-top: 5px;
  padding-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;  
  font-style: normal;  
  font-variant: normal;  
  font-weight: normal;  
  font-size: 12pt;  
  font-family: "Crimson", sans-serif;
  color: #c8102e;
  background-color: #fff9d9;

  a {
  color: #c8102e;
  text-decoration: none;
  display: block;
  padding: 0.5em 0em 0.5em 1em;  /*changed from 1rem 0rem 1rem 1rem */
  &:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 12px;
    border-right: 1px solid black;
    margin-left: 1em;
    }
  &:hover {text-decoration: underline;}
  &:focus {text-decoration: underline;}
  }

} /*end of nav element*/

nav ul li {
  font-family: "Crimson", sans-serif;
  font-size: 12pt;  
}

/*The following code makes sure that the last navigation list element does not have a vertical bar to the right*/
nav li {
  display: inline-block;
  &:last-child a:after {
    border-right: none;
  }
}


footer {
  padding: 10px;
  grid-area: footbox;  /*put id="footbox" in html code*/
  background-color: #c8102e;
  font-family: "Crimson", sans-serif;
}

.wrapper {
  display: grid;
  grid-gap: 0px;

  grid-template-areas: 
    "headbox"
    "navbar"
    "main-content"
    "footbox";
}

.skip-to-main-content-link {    <!--Allows screen reader users to access main content easily, as soon as they press the tab key-->
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

body {
  font-family: "Crimson", sans-serif;
  font-size:14pt;
}

.hang1 {                  /*use for hanging indent list items with single digit numbers*/
  padding-left: 48px;     /*pads all of the text 48px = 0.5 inches*/
  text-indent: -17px;     /*moves first line back 17 px which accounts for the single digit and the space*/
  margin-top: 10px;
  margin-bottom: 14px;
}

.hang2 {                  /*use for hanging indent list items with double digit numbers*/
  padding-left: 48px;     /*pads all of the text 48px = 0.5 inches*/
  text-indent: -25px;     /*moves first line back 25 px which accounts for the double digit and the space*/
  margin-top: 10px;
  margin-bottom: 14px;
}

.hang3 {		/*use for bulleted list items where the bullet is indented 0.5 inch = 48px*/
  padding-left: 73px;
  text-indent: -25px;  /*moves first line back by the given amount*/
}

.indent {
  margin-left: 48px;
}

.indent2 {		/*used for text after numbered h2 elements (when number is single digit)*/
  margin-left: 28px;	
}

.indent3 {
  margin-left: 40px;
}

main table {
  font-size:14pt;
}  /*If this is not specified, the table font size is smaller.*/

main table th {
  font-family: "Crimson", sans-serif;
}

main ul {
  font-family: "Crimson", sans-serif;
}  /*WITHOUT THIS UL CODE, THE UNORDERED LISTS REVERTED TO DEFAULT FONT.*/

main ul {
  text-indent: 48px; \*48px is 0.5 inches8\
}

main ol {
  font-family: "Crimson", sans-serif;
}  /*WITHOUT THIS UL CODE, THE UNORDERED LISTS REVERTED TO DEFAULT FONT.*/


footer ul {
  font-family: "Crimson", sans-serif;
}  /*WITHOUT THIS UL CODE, THE UNORDERED LISTS REVERTED TO DEFAULT FONT.*/


a {
  font-family: "Crimson", sans-serif;
  color: #c8102e;
}

a:link       { color: #c8102e }
a:visited    { color: #c8102e }

p {
  margin-top: 0pt;
}

h1  {font-size:36pt;
  font-family: "League Gothic", sans-serif;
  text-align: left;
  margin-bottom: 20pt;
}

h2 {
  font-size:22pt;
  font-family: "Crimson", sans-serif;
  font-weight: bold;
  margin-top: 12pt;
  margin-bottom: 0pt;
}

h3 {
  font-size: 16pt;
  font-family: "Crimson", sans-serif;
  font-weight: bold;
  margin-top: 12pt;
  margin-bottom: 0pt;
}

h4 {
  font-size: 16pt;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: bold;
}

#footbox {  
  clear: both;  
  text-align: center;  
  font-size: 12pt;  
  color: white;

  a:link {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }

  a:visited {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }

  a:hover {
  color: white;
  background-color: #c8102e;
  text-decoration: underline;
   }

  a:focus {
  color: white;
  background-color: #c8102e;
  text-decoration: underline;
    }

  a:active {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }
}

#footbox ul li
{
    list-style-type: none;
    display: inline;  <!--CREATES HORIZONTAL LIST-->
}