html {
  position: relative;
  min-height: 100%;
}
body {
  font-size: 0.9rem;
  margin-bottom: 60px;
}

/* header & footer layout */
#header {
  border-bottom: 1px solid #e7e7e7;
  padding-top:0;
  padding-bottom:0;
  margin-bottom: 4px;
}

#navigation {
  font-size:1rem;
}

#wrapper {
  padding-bottom: 4px;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  border-top: 1px solid #e7e7e7;
  margin-top: 4px;
}

/* link coloring */
a {
  color: #337ab7;
}
a:hover, a:focus {
  color: #23527c;
}

/* help icon in navigation */
#nav-help {
  padding: 1px 15px;
}

#nav-help > i {
  font-size: 22px;
  line-height: 1.7;
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.toc {
  list-style: none;
}

.toc li a {
  padding-left: 6px;
}

/* Override hover color so it is more obviously a link */
.selectable>tbody>tr:hover {
    background-color: #A9D0F5;
    cursor: pointer;
}