/*

https://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels

I realise this is an old post, but given that it hasn't been suggested it is worth mentioning that if you are writing for CSS3-compliant browsers, you can use calc:

height: calc(100% - 18px);

It's worth it to note that not all browsers currently support the standard CSS3 calc() function, so implementing the browser specific versions of the function may be required like the following:

/* Firefox */
/* height: -moz-calc(100% - 18px); */
/* WebKit */
/* height: -webkit-calc(100% - 18px); */
/* Opera */
/* height: -o-calc(100% - 18px); */
/* Standard */
/* height: calc(100% - 18px); */

.fi:hover,
.fi:focus,
.fi.brown:hover,
.fi.bron:focus {
  border-radius: 5px;
  cursor: pointer;
  background-color: white;
  border: .01em solid grey;
  /* box-shadow: 0.25rem 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.25); */
}

.fi {
	text-align: center;
  height: 30px;
  width: 30px;
  padding: 4px;
  margin-left: 2px;
  border-radius: 3px;
  background-color: grey;
  transition: 0.3s;
}

.fi.brown{
  background-color: #9c8773;
}

.fiSplitShow {
  float: right;
  position: static;
  float: right;
  margin-right: 5em;
  height: 30px;
  width: 30px;
}

.fiSplitHide {
  /* position: fixed; */
  float: right;
  margin-right: 5em;
  transition: auto;
}

html {
  height: 100%;
  width: 100%;
}

body {
  /* height: 980px; */
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  padding: 1em;
  width: 100%;
  background: #c1e3b5;
}

header h1 {
  margin: 0;
  font-size: 1.5em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  /* font-weight: bold; */
}

#content {
  margin-left: 25px;
  padding-top: 2em;
}

footer {
  bottom: 0;
  width: 100%;
  margin: 2em 0 0px 0;
  padding: .2em .5em .2em .5em;
  font-size: .9em;
  background: #c1e3b5;
  color: black;
}

.public-footer {
  clear: both;
  height: 3em;
  /* margin: 0; */
  margin-top: 2em;
  padding: 1em;
  text-align: center;
  /* background: #e03e52; */
  background: #70695a;
  color: #FFFFFF;
}

a {
  color: #70695a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul.subjects {
  margin-top: 20px;
  margin-left: 20px;
  padding: 0;
  list-style: none;
}

ul.subjects > li {
  margin-bottom: 1em;
}

ul.pages {
  margin-left: 15px;
  padding: 0;
  list-style: none;
  font-weight: normal;
}

td {
  word-break: break-all;
}
.selected > a {
  color: #e3bb64;
  font-style: normal;
}

/* Errors */

.errors {
  display: inline-block;
  border: 2px solid red;
  color: red;
  padding: 1em;
  margin-bottom: 1em;
}

.errors ul {
  margin-bottom: 0;
  padding-left: 1em;
}