@charset "UTF-8";
/*  _________      ___                          ___     ___     */
/*  \_   ___ \     \  |                         \  |   / _ \    */
/*  /   /   \/ ____ | |__ _____  _____    ______|  |_ / /_\ \   */
/* /    \     /  _ \| __ \\__  \ \__  \  /  ___\   __/       \  */
/* \     \___(  |_| | \_\ \/ __ \_/ __ \_\___ \ |  |/    |    \ */
/*  \______  /\____/|___  (____  (____  /____  ||__|\____|__  / */
/*         \/           \/     \/     \/     \/             \/  */
/*             | ' |)    |? /\ ¨|¨ |-| [- |?    |} [-           */
/*            _\¨ |< /\ ¨|¨ [- |} () /\ |? |) | |\| (¬          */


/**
 * Custom styles for general layout elements
 * -----------------------------------------
 */
 
html {
    height: 100%;
    /** If the window is shortened and a scrollbar for horizontal scrolling appears, everything 
     *  should rather stay centered against each other than being centered against the window. 
     *  Neither the header, main and footer nor the background should move against each other!
     *  Attention: 
     *  IE shows unnecessary vertical scrollbars as soon as the horizontal one appears when the html element 
     *  is declared to display as inline-block! Avoid this by displaying the body element inline-block too. */
    display: inline-block;  /* Needed for horizontal stretching and background image placement */
    min-width: 100%;        /* Needed for horizontal stretching */
}

body {
    margin: 0;
    font-size: small;
    font-family: arial, sans-serif;
    background-image: url(/img/bg_color.gif);
    background-position: center center;
}

main {
    background-color: rgba(255, 255, 255, 0.8);
}
main > div  {
    padding: 10px;
    text-align: left;
}
@media (min-width: 501px) {
main > div {
    display: inline-block;
    min-width: 480px;
}
}

header > pre {
 /* margin: 5px; Don't set margin to avoid unnecessary vertical scrollbars in IE */ 
    font-size: smaller; /* Use smaller to keep it under 500px, specially on old android native browser. */
    font-weight: bolder;
}

footer > div {
    overflow: hidden; /* Otherwise the special characters '♡ ☮ ☺' produce unnecessary vertical scrollbars... */
    font-size: large;
}

/**
 * 100% height stretch layout with header and footer
 * -------------------------------------------------
 * http://philipwalton.github.io/solved-by-flexbox/
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from shrinking them smaller than their content's minimum size. 
 *    See http://bit.ly/1Mn35US for details. 
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 * 4. Use display block for main flex element in IE10 and Android native browser.
 * 5. Use inline flex for Android native browser who ignores that the html element is displayed inline-block
 *    and for IE who shows unnecessary vertical scrollbars when the html element is displayed inline-block.
 */

.Site {
    min-width: 100%; /* 3, 5 */
    min-height: 100%; /* 3 */
    display: -webkit-inline-box;    /* OLD - iOS 6-, Safari 3.1-6, native Android */
    display: -moz-inline-box;       /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-inline-flexbox;    /* TWEENER - IE 10 */
    display: -webkit-inline-flex;   /* NEW - Chrome */
    display: inline-flex; /* 5 */
    text-align: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/* IE11 and IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.Site {
    width: calc(100vw - 20px); /* 1 */
    height: 100%; /* 1, 3 */
}
}

.Site-header,
.Site-footer {
    flex: none; /* 2 */
}

.Site-content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto; /* 2 */
    width: 100%;
    display: block; /* 4 */
}

/**
 * Responsive main navigation
 * --------------------------
 * http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
 */

/* Styles for main navigation list */
ul#menu, 
ul#menu ul {
    margin: 0;
    padding: 0;
    z-index: 1; /* Otherwise video controls have higher index in android browsers */ 
    position: relative;
    list-style-type: none;
}

/* Styles for main navigation top level list on desktops (centered horizontal items) */
@media (min-width: 501px) {
ul#menu > li > ul {
    display: inline-block; /* for centering the list items */
}
}

/* Styles for main navigation top level list on mobile (initially hidden overlay) */
@media (max-width: 500px) {
ul#menu > li > ul {
    top: auto;
    left: 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.2s ease 0s; /* Dropup, collapse */
}
}

/* Styles for main navigation dropdown list (initially hidden) */
ul#menu ul li ul {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.2s ease 0s; /* Dropup, collapse */
    margin-left: 20px;
}

/* Styles for main navigation first dropdown list on desktops (overlay) */
@media (min-width: 501px) {
ul#menu > li > ul > li > ul {
    top: auto;
    left: 0;
    width: 100%;
    position: absolute;
    margin-left: 0px;
}
}

/* Display the main navigation list on hover */
.mouse ul#menu li:hover > a + ul,
.mouse ul#menu li:hover > input ~ ul,
.mouse ul#menu:hover,
.mouse ul#menu ul:hover {
 /* An alternative for overflow and max-height transition would be display block and none. */
    max-height: 560px; /* Expand for max 10 items. Use 56px per list item. Addappt if necessary! */
    transition: max-height 1s ease 0.2s; /* Dropdown, expand */
}
.mouse ul#menu:hover,
.mouse ul#menu ul:hover {
    overflow: visible; /* Needed for dropdown list in dropdown list */
}

/* Display the main navigation list on checked */
.touch ul#menu li input[type=checkbox]:checked ~ ul {
 /* An alternative for overflow and max-height transition would be display block and none. */
    max-height: 560px; /* Expand for max 10 items. Use 56px per list item. Addappt if necessary! */
    transition: max-height 1s ease 0s; /* Dropdown, expand */
}
.touch ul#menu li input[type=checkbox]:checked ~ ul {
    overflow: visible; /* Needed for small viewports */
}

/* Styles for main navigation item */
ul#menu li {
    float: none;
    display: block;
}

/* Styles for main navigation first dropdown item on desktop */
@media (min-width: 501px) {
ul#menu > li > ul > li {
    float: left; /* avoid margins from space between tags */
    display: inline-block;
}
ul#menu > li > ul > li:last-child {
    float: none; /* avoid margins from space after tag */
}
}

/* Styles for main navigation link and label */
ul#menu li a,
ul#menu li label {
    color: #ffffff;
    margin: 5px 0px 0px 0px;
    padding: 1em;
    display: block;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: medium;
    text-decoration: none;
}
.mouse ul#menu li:hover > a,
.mouse ul#menu li:hover > label,
.touch ul#menu input[type=checkbox]:checked + label {
    background-color: rgba(0, 0, 0, 1);
}

/* Styles for main navigation label and input */
ul#menu li label {
    cursor: pointer;
}
ul#menu input[type=checkbox] + label:after {
    content: ' +';
}
.touch ul#menu input[type=checkbox]:checked + label:after {
    content: ' -';
}
ul#menu input[type=checkbox] {
    display: none; /*Hide checkbox*/
}

/* Styles for main navigation root level label, top level link and label on desktop */
@media (min-width: 501px) {
ul#menu > li > label {
    display: none;
}
ul#menu > li > ul > li > a,
ul#menu > li > ul > li > label {
    margin: 5px 0px 0px 5px;
}
ul#menu > li > ul > li:first-child > a,
ul#menu > li > ul > li:first-child > label {
    margin: 5px 0px 0px 0px;
}
}

/**
 * Sibling selector Bugfix for Webkit based browsers
 * -------------------------------------------------
 * https://css-tricks.com/webkit-sibling-bug/
 */

body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
    display: block 
} to {
    display: block
}
}

/**
 * Custom styles and classes for content elements
 * ----------------------------------------------
 */
 
.displayBlockIfWide {
    display: none;
}
.displayBlockIfNarrow {
    display: block;
}
@media (min-width: 501px) {
.displayBlockIfWide {
    display: block;
}
.displayBlockIfNarrow {
    display: none;
}
}

.smaller {
    font-size: smaller;
}

.button {
    color: #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0.8em;
    display: inline-block;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: medium;
    text-decoration: none;
}
.button:hover {
    background-color: rgba(0, 0, 0, 1);
}

input[type=checkbox],
input[type=radio] {
    margin: 0.2em;
    vertical-align: middle;
}

label {
    white-space: nowrap;
}

table {
    border-collapse: collapse;
}

/**
 * Responsive img and video tags
 * -----------------------------
 * See https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 * Attention: IE > 9 does not work as expected with width 100% and display:flex!
 *            This occurs with .mp4 video source and any img inside a flex box.
 * See http://codepen.io/leonderijke/post/flexbox-and-intrinsic-sizing-some-browser-inconsistencies
 */

img {
  width: 100% !important;
  height: auto;
  border: 0;
}

video {
  width: 100% !important;
  height: auto;
}
video.sd {
  max-width: 640px;
}
video.qhd {
  max-width: 768px;
}
video.hd {
  max-width: 1080px;
}
video.fhd {
  max-width: 1920px;
}

/* IE11 and IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div.sd {
    height: 0px;
    padding-bottom: 75%; /* 3/4 */
}
div.qhd, div.hd, div.fhd {
    height: 0px;
    padding-bottom: 56.25%; /* 9/16 */
}
}

div#overlay { /* do the fixed positioning and background color */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
    overflow: auto;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
}
div#overlay > div { /* do the centering */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
div#overlay > div > div { /* do the padding */
    padding: 1em;
}
div#overlay img#overlayImg {
    margin: 5px 0px 5px 0px;
}