body
          {
          background-image: url("Index/image001.jpg");
		  margin-top: 5px;
          margin-left: 5px;
          margin-right: 5px;
          margin-bottom: 5px;
          color: #000000;
          }

          table, th, td
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  border: 2px solid black;
		  border-collapse: collapse;
		  padding: 5px;
		  border-spacing: 1px;
		  text-align: left;
		  }

	      HR 
	      {
          display: none;
          }

          DIV.hr 
	      {
          margin: 0em 0;
          height: 0.2em;
          background-color: #800000;
          clear: both;
          }		  
		  
	  .iconlist
          {
          list-style: none;
          margin: 0;
          padding: 0;
          }
          
	  li.crossbullet
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: url(Index/largecross.gif);
          background-repeat: no-repeat;
          background-position: 0px 50%;
          padding: 2px 0px 0px 30px;
          margin: 0em ;
          }

	  li.nocrossbullet
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: none;
          background-repeat: no-repeat;
          background-position: 0px 50%;
          padding: 2px 0px 0px 30px;
          margin: 0em ;
          }
		  
	  li.smallcross
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: url(Index/smallcross.gif);
          background-repeat: no-repeat;
          background-position: 15px 50%;
          padding: 2px 0 5px 40px;
          margin: 0em ;
		  }

	  li.smallcross0
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: none;
          background-repeat: no-repeat;
          background-position: 40px 50%;
          padding: 2px 0 5px 40px;
          margin: 0em ;
          }

	  li.dotpoint
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: url(Index/dotpoint.gif);
          background-repeat: no-repeat;
          background-position: 0px 50%;
          padding: 2px 0 0px 30px;
          margin: 0em ;
          }

      li.dotpoint0
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: none;
          background-repeat: no-repeat;
          background-position: 0px 50%;
          padding: 2px 0 0px 30px;
          margin: 0em ;
          }
          
	  li.xscross
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: url(Index/xscross.gif);
          background-repeat: no-repeat;
          background-position: 40px 50%;
          padding: 2px 0 0px 65px;
          margin: 0em ;
          }

	  li.nocross
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: none;
          background-repeat: no-repeat;
          background-position: 40px 50%;
          padding: 2px 0 0px 65px;
          margin: 0em ;
          }

	  li.nocross0
          {
          color: black;
		  font-family: Comic Sans MS, Comic Sans, Arial;
		  font-size: 0.938em;
		  background-image: none;
          background-repeat: no-repeat;
          background-position: 40px 50%;
          padding: 2px 0 0px 2px;
          margin: 0em ;
          }

h1 {
  padding: 0px 0px 0px;
  color: #800000;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 1.875em;
}

h3 {
  padding: 0px 0px 0px;
  color: black;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 1.0em;
}

h4 {
  padding: 5px 0px 0px;
  color: black;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 0.8em;
  font-weight: lighter;
}

p {
  padding: 0px 0px 0px;
  color: black;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 0.938em;
  }		  
	
div.ex1 {
  width: 640px;
  border: 1px solid black;
  padding: 0px 0px 0px 0px;
}

figure {
  border: 0px Black solid;
  padding: 0px;
  margin: auto;
}

figcaption {
  color: black;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 0.8em;
  padding: 0px;
  text-align: left;
}

.center {
  text-align: center;
}	
	
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.1s;
  padding-top: 0px;
}

  
  /* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
 font-family: Comic Sans MS, Comic Sans, Arial; 
 padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.563em;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
  
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
  }

.dropdown-container {
  display: none;
  background-color: black;
  padding-left: 20px;
}

.sidenav .closebtn  {
  position: right;
  top: 0;
  right: 0px;
  font-size: 2.25em;
  margin-left: 300px;
  color: #818181;
}

.active {
  text-align: left;
  width: 100%;
  color: white;
}

.fa-caret-down {
  float: right;
  padding-right: 8px;
}

#main {
  transition: margin-left .5s;
  padding: 5px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 5px;}
  .sidenav a {font-size: 5px;}
}

footer {
  padding: 20px 0px 0px;
  color: black;
  font-family: Comic Sans MS, Comic Sans, Arial;
  font-size: 0.875em;
  text-align: left;
}

.vertical-menu {
  width: 100%; /* Set a width if you like */
}

.vertical-menu a {
  /* background-color: #eee;  Grey background color */
  font-family: Comic Sans MS, Comic Sans, Arial; 
  font-size: 0.938em;
  background-image: url(Index/smallcross.gif);
  background-repeat: no-repeat;
  background-position: 15px 50%;
  padding: 5px 0 8px 40px;
  margin: 0em;
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  /* padding: 10px; Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:link {
    color: blue;
}

.vertical-menu a:visited {
    color: purple;
}

.vertical-menu a:hover {
  /* background-color: #ffffcc; Dark grey background on mouse-over #ccc; */
    font-weight: bold;
}

.vertical-menu a.active {
  /*background-color: #04AA6D; Add a green color to the "active/current" link 
  color: white; */
}