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

/* More settings for the footer. */
*,
*: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: 1.75em;
  
  vertical-align: middle;
  }
  
/* Header title. */
div.header h1
  {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  }

/* Language switcher. */
div.header .language
  {
  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: 10px;
  margin-right: 10px;

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

/* Content background. */
.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
  {
  font-size: 1.6em;
  
  /* Give multi-line headers more room. */
  line-height: 2em;
  }

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

/* Content headers. */
.content h2
  {
  font-size: 1.4em;
  
  /* Give multi-line headers more room. */
  line-height: 1em;
  }
  
/* Footer menu and backdrop. */
#footer_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;
  }

/* iPhone portrait */
@media only screen and (max-device-width: 480px) and (orientation: portrait)
  {
  /* Menu. */
  #menu
    {
    /* Put the address in the lower left corner. */
    position: static;
    left: auto;
    top: auto;
    margin: auto;
    text-align: center;
    min-width: auto !important;
    }

  #menu a
    {
    display: block;
    text-align: center;
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    }

  /* Address. */
  #address
    {
    /* Put the address in the lower left corner. */
    position: static;
    left: auto;
    bottom: auto;
    margin: 1em;
    }

  /* Legal stuff. */
  #legal
    {
    /* Put the legal stuff in the lower right corner. */
    position: static;
    right: auto;
    bottom: auto;
    margin: 1em;
    text-align: center;
    }
  }