/* Add a footer at the bottom of the content or the bottom of the page. */
html
  {
  height: 100%;
  box-sizing: border-box;
  }

*,
*:before,
*:after
  {
  box-sizing: inherit;
  }

/* Modify core HTML elements. */

/* HTML body. */
body
  {
  /* Use a nice, tight font. */
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5em;

  /* Get rid of all body margins. */
  margin: 0;

  /* Make sure the footer appears properly at the bottom of the content
     or the bottom of the page. */
  position: relative;
  margin: 0;
  min-height: 100%;
  padding-bottom: 8rem;
  }

/* Images. */
img
  {
  /* Turn off image borders. */
  border: none;
  }

/* Links. */
a
  {
  /* Use a proper pointer. */
  cursor: pointer;
  
  /* Fix Firefox. */
  outline: none !important;
  }

/* Active links. */
a:active
  {
  /* While the button is pressed, keep the underline and press the link. */
  text-decoration: underline;
  }

/* Header. */
div.header
  {
  /* Make a fixed header across the top. */
  
  /* Fixed height. */
  height: 5em;
  
  /* No margin. */
  margin: 0;
  
  /* Keep at the top of the page. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  /* Make sure the header is on top of the content. */
  z-index: 3000;
  }

/* Header table layout. Use a table to keep items from overlapping and
   automatically resize. */
div.header table
  {
  /* Remove borders and stretch across the page. */
  border: 0px;
  width: 100%;
  height: 100%;
  }

/* Header logo. */
div.header .logo
  {
  /* Don't let the logo get too big. */
  height: 4em;
  
  vertical-align: middle;
  margin-left: 0.5em;
  }
  
/* Header title. */
div.header h1
  {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  }

/* Language switcher. */
div.header .language
  {
  /* Float the language controls at the right of the header. */
  float: right;
  width: 7em;
  font-size: 14px;
  }

/* Language switcher labels. */
div.header .language label
  {
  /* Give the controls a little whitespace. */
  margin-left: 5px;
  }

/* Don't show an underline on header links. */
div.header a
  {
  text-decoration: none;
  }
  
/* Site content. */
.content
  {
  /* Add some spacing. */
  padding: 10px;
  padding-top: 5em;

  /* Position in the middle. */
  position: relative;
  margin-left: 10em;
  margin-right: 10em;

  /* Make sure it is underneath the header and footer. */
  z-index: 1000;
  }

.content_backdrop
  {
  position: absolute;
  width: 100%;
  top: 5em;
  bottom: 9em;

  /* Make sure it is underneath the header and footer. */
  z-index: 900;
  }

/* Content headers. */
.content h1
  {
  /* Give multi-line headers more room. */
  line-height: 1em;
  }

/* Content title. */
.content h1.title
  {
  /* Hide by default on desktop. */
  display: none;
  }

/* Footer menu and backdrop. */
#footer
  {
  /* Stretch the footer across the bottom of the screen. */
  margin: 0;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

  /* Use a fixed height. */
  height: 10em;

  /* Make the text easy to see. */
  font-size: .9em;
  line-height: 1.2em;

  /* Make sure the footer is on top of the content. */
  z-index: 3000;
  }

/* Menu. */
#menu
  {
  /* Put the address in the lower left corner. */
  position: absolute;
  left: 15px;
  top: 10px;
  margin: 0;
  text-align: left;
  }

#menu a
  {
  margin-right: 10px;
  font-weight: bold;
  }

/* Address. */
#address
  {
  /* Put the address in the lower left corner. */
  position: absolute;
  left: 15px;
  bottom: 0px;
  margin: 0;
  text-align: left;
  }

/* Legal stuff. */
#legal
  {
  /* Put the legal stuff in the lower right corner. */
  position: absolute;
  right: 10px;
  bottom: 0px;
  margin: 0;
  text-align: right;
  }

/* Wrap these nicely. */
#legal span
  {
  margin-left: .5em;
  }

/* Social media. */
.social-media-list
  {
  /* Put the social media list in the upper right corner. */
  position: absolute;
  right: 0;
  top: 10px;
  width: 100px;
  margin: 0;
  margin-right: 10px;
  text-align: right;
  }

/* Social media items. */
.social-media-list li
  {
  /* Display horizontally. */
  display: inline-block;
  
  /* Remove the disc. */
  list-style-type: none;
  }

/* Social media svg images. */
.social-media-list .icon > svg
  {
  /* Use inline-blocks, rather small, and centered. */
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  }

/* Social media svg image fills. */
.social-media-list .icon > svg path
  {
  /* Use the standard grey. */
  fill: #828282;
  }