@import url(https://fonts.googleapis.com/css?family=Oswald);

body {
  margin: 1rem auto;
  max-width: 72rem;
}

p {
  text-align: justify;
}

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

table td {
  padding: 0.5rem;
}

.header {
  width: 100%;
  /*
  display: table;
  */
}

.header img {
  width: 5rem;
}

.header > div {
  /*display: table-cell;*/
  display: inline-block;
  margin: 0;
  padding: 0.125rem;
}

.header > .header-left {
  max-width: 6rem;
}

.header > .title {
  vertical-align: top;
  padding: 0.25rem;
  max-width: 46rem;
  text-align: center;
}

.header > .header-right {
  max-width: 10rem;
}

nav {
  width: 100%;
  margin: 0;
  padding: 0;
  /* background-color: blue; */
  background-color: #eeeeee;
}

nav > ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav > ul > li {
  z-index: 99;
  flex: 1 1 auto;
  padding: 0.75rem;
  position: relative;
  /* background-color: green; */
}

nav > ul > li.current {
  background-color: lightgrey;
}

nav > ul ul {
  position: absolute;
  list-style: none;
  top: 100%;
  padding: 0;
  background-color: #dddddd;
  display: none;
}

nav > ul > li:hover {
  background-color: lightgrey;
}

nav > ul > li:hover > ul {
  display: block;
}

nav > ul ul li {
  padding: 0.5rem;
}

nav > ul ul li:hover {
  background-color: #efefef;
}

/* index only */
.sidebar {
  /*margin: 1em;
  padding: 1em;
  background-color: lightgrey;*/
  float: right;
}

.sidebar > div {
  margin: 1em;
  padding: 1em;
  background-color: orange;
}

footer {
  margin-top: 1rem;
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px #dddddd solid;
  background-color: #eeeeee;
  /* background-color: blue; */
}

footer > div {
  margin: 1rem auto;
  padding: 0.625rem;
  max-width: 64rem;
  display: flex;
  flex-wrap: wrap;
  /* background-color: red; */
}

footer > div > div {
  flex: 1 1 auto;
  padding: 0.25rem;
}

footer > div > div.doublewidth {
  flex: 2 2 auto;
}

.fr {
  float: right;
}

.pl05 {
  padding-left: 0.5rem;
}

.ta-c {
  text-align: center;
}

.w-8 {
  max-width: 8rem;
}

.w-16 {
max-width: 16rem;
}

.w-24 {
  max-width: 24rem;
}

.w-40 {
  max-width: 40rem;
}

.w-50 {
  max-width: 50rem;
}

.w-60 {
  max-width: 60rem;
}

.ff-os {
  font-family: 'Oswald', sans-serif;
}

.pd-05 {
  padding: 0.5rem;
}

.d-b {
  display: block;
}

.ma-0a {
  margin: 0 auto;
}

.ta-l {
  text-align: left;
}

.d-ib {
  display: inline-block;
}

.toggleable {
  -webkit-transition: max-height 0.25s; 
  -moz-transition: max-height 0.25s; 
  -ms-transition: max-height 0.25s; 
  -o-transition: max-height 0.25s; 
  transition: max-height 0.25s; 
  overflow: hidden;

  max-height: 100rem;
}

.hidden {
  max-height: 0;
}