* {
    box-sizing: border-box;
  }
  

/* Style the header */
nav {
  width: 90%;
  padding-bottom: 10px;
  text-align: right;
}

/* Create two unequal columns golden ratio that floats next to each other */
.column {
  float: left;
}

/* left column */
.column.left {
  width: 61.8%;
  padding: 0px 12px 0px 0px;
}

/* right column */
.column.right {
  width: 38.2%;
  padding: 0px 0px 0px 0px;
}

/* only one column */
.column.full {
  width: 100%;
  padding: 0px 0px 0px 0px;
}

#column.full li {
  display: block;
}

.li_block {
  display: block;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
  }
  
/* Style the footer */
footer {
  padding: 10px;
  text-align: center;
}



/* Responsive layout - makes the tow columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {
  .column.left, .column.right, nav {
    width: 100%;
  }
}

@media (max-width: 480px) {

  nav li {
    width: 100%;
    line-height: 50px;
  }


  nav a {
    width: 100%;
    display: block;

    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px;
    font-size: 1.1em;

    text-align: center;
    
    color: rgba(0, 0, 153, 0.9);
    background-color: rgba(153, 153, 153, 0.5);
  }
  
  nav a:link {
    color: rgba(0, 0, 153, 0.9);
    background-color: rgba(153, 153, 153, 0.5);
  }
  
  nav a:visited {
    color: rgba(0, 0, 153, 0.9);
    background-color: rgba(153, 153, 153, 0.5);
  }
  
  nav a:hover {
    font-weight: 700;
    color: rgba(0, 0, 153, 0.9);
    background-color: rgba(102, 102, 102, 0.5);
  }

  #Table-of-Contents li {
    line-height: 18px;
  }

  #Table-of-Contents a {
    text-align: left;
  }

}