/*hr {
  border-color: black;
  border-width: 2px;
  width: 430px;
  float:left;
}*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 100px;
    overflow: hidden;
    /*border-bottom:1px solid black;
    length: 300px;*/
}

li {
    float: left;
    font-style:
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 1px 18px;
    padding-bottom: 0px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    color: red;
}

table.tg {
  margin-left:auto;
  margin-right:auto;
  margin-top: 32px;
}

.tg {
  text-align: center;
}

.imgWrap {
  position: relative;

}
/*

I have to figure out how to format hover text later; so frustrating!

*/

span.text-content{

  font-size: 14px;
  opacity: 0;
  color: maroon;
  display: table;
  left: 0;
  position: absolute;
  top: 0;
  height: 28px;
  width: 28px;
  cursor: pointer;
  text-align: center;

}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  color: maroon;
  cursor: pointer;
  display:block;
  height: 0px;
  left: 0;
  position:relative;
  top: 0;
  width: 0px;
  opacity: 1;
}

 .imgWrap:hover .text-content {
  visibility: visible;
  opacity: 1;
}