body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #495d71;
    color: #d2d2d2;
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
}
@media screen and (max-width: 899px) {
    body {
        overflow-x: hidden;
    }
}
/* Lenovo tablet */
@media screen and
       (orientation: landscape) and
       (max-width: 1280px) and
       (min-width: 1200px) {
    body.recipe {
        font-size: 300%;
    }
}

body.photo {
    overflow: hidden;
}

div#header {
    flex: 0 0 auto;
}

body.photo div#header {
    position: absolute;
    top: 0px;
    width: 100vw;
    background-color: rgba(64, 75, 87, 0.4); /* #404b57 */
    z-index: 4;
}

div#main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
body.photo div#main {
    background-color: #404b57;
}

div#loader {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
div#loader div {
    position: absolute;
    top: calc(50vh - 30px);
    left: calc(50vw - 30px);
    height: 50px;
    width: 50px;
    border: 10px solid #f3f3f3;
    border-top: 10px solid #000000;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
    opacity: 0.4;
    z-index: 11;
}

div#footer {
    flex: 0 0 auto;
    margin: 0px 1em;
    padding: 1em 0px;
}

div#main > div#body,
div#main > div#body-photo-index,
div#main > div#body-photo-album {
    flex: 1 1 auto;
    max-width: 60em;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
}

div#main > div#body {
    padding: 1em 0.5em;
}

div#main > div#body-photo {
    margin: auto;
}

div#menu-button {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    padding-left: 1.25em;
    display: block;
    z-index: 5;
    color: none;
    font-size: 150%;
    cursor: pointer;
}

div#menu-button:before {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: .9em;
    height: 0.125em;
    border-top: 0.375em double #edff00;
    border-bottom: 0.125em solid #edff00;
}

div#menu-button.menu-photo {
    top: 0.1em;
    right: 0.2em;
}

div#sidebar, div#sidebar.hidden {
    float: right;
    position: absolute;
    right: 0px;
    display: none;
    flex-direction: column;
    z-index: 3;
    background-color: #404b57;
    padding: 1em;
    box-shadow: 0 4px 4px 0 #222222;
}

div#sidebar.hidden {
    max-height: calc(100vh - 2em);
    overflow-y: auto;
}

@media screen and (min-width: 85em) {
    div#sidebar {
        display: flex;
        box-shadow: none;
    }
}
@media screen and (max-width: 60em) {
    div#main {
        flex-direction: column;
        justify-content: start;
    }
}

div#sidebar > div.top-menu {
    margin-top: 1em;
}

div#sidebar > div.menu {
    margin-top: 0.5em;
}

div#sidebar > div.lang {
    text-align: right;
    margin-top: 2em;
    font-family: monospace;
    font-size: 80%;
}

div#sidebar > div.lang a {
    color: #d2d2d2;
    text-decoration: none;
}

/****** general definitions */

a:link, a:active, a:visited, a:hover {
    background-color: none;
    text-decoration: none;
    color: #00f2ee;
    outline: none;
}
a:hover {
    text-decoration: underline;
}

h1 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

h2 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

h3 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

h4 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

h5 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

h6 {
    color: #ffaa00; /* orange */
    font-family: sans-serif;
}

ul.history {
    color: #d2d2d2; /* fore */
}

dt {
    color: #ffaa00; /* orange */
}

li {
    line-height: 125%;
}

div.latest,
li.latest, li.version {
    color: #00fb9e; /* green */
    line-height: 120%;
}

li.version {
    margin-bottom: 1em;
}

tt {
    font-family: monospace;
}

em {
    color: #ffffff; /* white */
}

div.error {
    color: #edff00; /* yellow */
    font-weight: bold;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

pre, pre.code {
    font-family: monospace;
    white-space: pre;
    overflow-x: auto;
}

pre.code {
    margin-left: 2em;
    margin-top: 1em;
    margin-right: 0em;
    margin-bottom: 1em;
}
@media screen and (max-width: 899px) {
    pre.code {
        margin-left: 1em;
    }
}

img {
    border: 0px;
    max-width: 100%;
    max-height: auto;
}

img.icon {
    padding-left: 0.5ch;
    height: 0.7em;
    vertical-align: baseline;
    display: inline;
}

div.table {
    overflow-x: auto;
    margin-left: 2em;
}
@media screen and (max-width: 899px) {
    div.table {
        margin-left: 1em;
    }
}
table {
    border-style: none;
    padding: 0px;
    background-color: #404b57;
    clear: none;
}

table.none, table.nonebig {
    background-color: #495d71;
}

table.big, table.nonebig {
    padding: 1em;
}

th, td {
    text-align: left;
    border-style: none;
    padding-left: 4px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

td {
    background-color: #495d71;
    padding-left: 6px;
}

tr.dark td {
    background-color: #465769;
}

table.big td, table.nonebig td {
    padding-bottom: 1em;
    padding-right: 2em;
}

th {
    background-color: #404b57;
}

td.top, th.top {
    vertical-align: top;
}

td.center, th.center {
    vertical-align: middle;
}

td.bottom, th.bottom {
    vertical-align: bottom;
}

@media screen and (max-width: 899px) {
    ul, ol {
        padding-left: 1em;
    }
}

/****** specialized definitions */

/**** title */
div.title {
    background-color: #404b57;
    color: #ffaa00; /* orange */
    text-align: center;
    font-family: sans-serif;
    margin: 0px;
    padding: 0.5em;
}

body.photo div.title {
    background-color: inherit;
    white-space: nowrap;
    padding: 0.2em;
    max-width: calc(100vw - 2em);
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (max-width: 899px) {
    body.photo div.title {
        text-align: left;
    }
}

h1.title {
    background-color: inherit;
    color: inherit;
    text-align: center;
    font-family: inherit;
    font-size: 32pt;
    margin: 0em;
    padding: 0px;
}

h2.title {
    background-color: inherit;
    color: inherit;
    text-align: center;
    font-family: inherit;
    font-size: 16pt;
    margin: 0em;
    padding: 0px;
}

/**** menu and language selection container */
a.cont:link, a.cont:active, a.cont:visited, a.cont:hover,
a.cont-act:link, a.cont-act:active, a.cont-act:visited, a.cont-act:hover {
    color: #00fb9e;
    font-weight: bold;
    text-decoration: none;
    white-space: pre-wrap;
}

a.cont-act:link, a.cont-act:active, a.cont-act:visited, a.cont-act:hover {
    color: #ffaa00;
}

a.cont:hover {
    color: #edff00;
}

a.action, a.action-active,
a.action-compact, a.action-active-compact {
    display: inline-block;
    background-color: #404b57;
    color: #d2d2d2;
    text-decoration: none;
    padding: 0.5em 1em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
}

a.action-compact, a.action-active-compact {
    margin-left: 0.3em;
    margin-right: 0;
}

a.action-active,
a.action-active-compact {
    background-color: #45586b;
    color: #ffaa00;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}

a.action:hover, a.action-active:hover,
a.action-compact:hover, a.action-active-compact:hover {
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 4px 6px 0 rgba(0,0,0,0.19);
}

/**** photo album */
span.album-number {
    font-weight: normal;
    font-size: 80%;
    float: right;
}

span.photo-album-date {
    color: #ffffff;
}

table.photo-album {
    /*background-color: #404b57;*/
    background-color: #495d71;
    clear: left;
    border-style: none;
    padding: 0px;
    margin-left: 0em;
    width: 100%;
}

th.photo-album, td.photo-album {
    border-style: none;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
}

th.photo-album {
    background-color: #404b57;
    text-align: center;
}

td.photo-album {
    background-color: #495d71;
    text-align: left;
    vertical-align: top;
    padding-top: 4px;
    padding-bottom: 4px;
}

img.photo-album-preview {
    border: 0px;
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
}

div.photo,
div.photo-select,
div.photo-selected {
    max-width: 100vw;
    max-height: 100vh;
    height: auto;
    text-align: center;
    color: inherit;
}

div.photo img {
    max-width: calc(100vw - 4px);
    max-height: calc(100vh - 4px);
    border-left: 2px solid;
    border-right: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-color: #404b57;
}

div.photo-selected {
    background-color: #00bb00;
}

div.photo-select div:hover, div.photo-selected div:hover {
    cursor: pointer;
}

div.photo-path {
    text-align: left;
    padding-left: 5px;
    left: 0px;
    width: 100%;
}

div.photo-navigation {
    background-color: rgba(64, 75, 87, 0.4); /* #404b57 */
    position: absolute;
    z-index: 4;
    top: 0px;
    right: 0px;
    padding-right: 2.5em;
}

ul.album-path {
    list-style-type: disc;
    padding-left: 1em;
}
@media screen and (max-width: 899px) {
    ul.album-path li {
        padding: 0.3em;
        font-size: 120%;
    }
}

a.navigation:link, a.navigation:active, a.navigation:visited, a.navigation:hover,
a.navigation-dead:link, a.navigation-dead:active,
a.navigation-dead:visited, a.navigation-dead:hover {
    background-color: none;
    text-decoration: none;
    text-shadow: 1px 1px #000000;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 120%;
    font-weight: bold;
}
a.navigation-dead:link, a.navigation-dead:active,
a.navigation-dead:visited, a.navigation-dead:hover {
    color: #a2a2a2;
}

div.photo-navigation-help {
    background-color: #404b57;
    color: inherit;
    font-size: 100%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    z-index: 3;
    left: 40%;
    top: 20%;
    text-align: left;
}

a.photo:link, a.photo:active, a.photo:visited, a.photo:hover {
    background-color: none;
    text-decoration: none;
    color: #404b57;
}


div#exif {
    display: none;
    overflow: auto;
    background-color: #495d71;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: calc(100vh - 2.5em);
    padding-top: 2em;
    border-bottom: 0.5em;
    border-style: solid;
    border-color: #495d71;
    z-index: 2;
}

div#exif div.table {
    margin: 0px;
}

div#exif div.table table {
    margin: 0 auto;
}

table.thumbnail {
    background-color: inherit;
    border-style: none;
    border-collapse: collapse;
    padding: 0px;
    margin: 0px;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-table;
    clear: none;
}

td.thumbnail {
    background-color: #404b57;
    text-align: center;
    border-style: none;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

td.thumbnail-caption, td.thumbnail-caption-select, td.thumbnail-caption-selected {
    background-color: inherit;
    text-align: center;
    border-style: none;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 10px;
}

td.thumbnail-caption-selected {
    background-color: #00bb00;
}

td.thumbnail-caption-select:hover, td.thumbnail-caption-selected:hover {
    cursor: pointer;
}


/**** news */
ul.news {
    color: #d2d2d2; /* fore */
    list-style-type: none;
    margin-top: 0px;
    padding-left: 0px;
}
div.news-date {
    background-color: #404b57;
    line-height: 140%;
    padding: 2px;
}

ul.news ul {
    padding-left: 2em;
    padding-bottom: 10px;
}
li.news-new {
    color: #ffffff; /* white */
    list-style-type: disc;
}
li.news-updated {
    color: #ffffff; /* white */
    list-style-type: circle;
}

div.news-photo {
    padding: 4px;
}

div.news-photo div.news-date {
    background-color: inherit;
    line-height: 100%;
    padding: 0px;
    display: inline;
}

div.news-photo ul.news {
    margin: 0px;
}


/* frames */
div.frame {
    margin: 1em 0;
    padding: 1em;
}

div.frame-top {
    margin: 0 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
}

form div.frame, form div.frame-top {
    display: flex;
    flex-direction: column;
    padding: 0px;
}

form div.frame-top {
    background-color: #45586b;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
}

div.frame-top div.frame {
    margin: 1em 0.5em;
}

div.frame {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 2px 6px 0 rgba(0,0,0,0.12);
}

form div.frame div, form div.frame-top div {
    padding: 4px;
}

form div.frame div.frame, form div.frame-top div.frame {
    padding: 0px;
}

div.frame > div.label, div.frame-top > div.label {
    font-size: 200%;
}

form div.frame > div.label, form div.frame-top > div.label {
    font-size: inherit;
    background-color: #404b57;
    font-weight: bold;
    padding: 0.5em 1em;
}

div.frame-top > div.label {
    color: #ffaa00;
}

div.frame > div.item,
div.frame-top > div.item {
    display: flex;
    flex-direction: row;
    flex: 1;
}
@media screen and (max-width: 899px) {
    div.frame > div.item, div.frame-top > div.item {
        flex-direction: column;
    }
}

div.frame > div.def > div.label {
    color: #ffaa00;
}

div.frame > div.item > div.label,
div.frame-top > div.item > div.label {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 150px;
}
@media screen and (max-width: 899px) {
    div.frame > div.item > div.label,
    div.frame-top > div.item > div.label {
        flex-basis: 0;
    }
}

div.frame > div.item > div.input, div.frame-top > div.item > div.input {
    flex-grow: 1;
    flex-shrink: 1;
}

div.frame > div.vspace {
    margin-top: 1em;
}

div.frame > div.item > div.input > div.section {
    margin-top: 1em;
    margin-bottom: 0.3em;
    padding-left: 1em;
    width: calc(100% - 1em);
    background-color: #404b57;
}

div.frame > div.item > div.input > div.section:first-of-type {
    margin-top: 0px;
}

input, select, textarea {
    background-color: #abb6c2;
    color: black;
    border-style: solid;
    border-color: #404b57;
    border-width: 1px;
    border-radius: 0px;
    padding: 8pt;
    margin: 1px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2) inset, 0 2px 4px 0 rgba(0,0,0,0.19) inset;
}

input:disabled, select:disabled, textarea:disabled {
    color: #828282;
}

input[type=button], input[type=submit] {
    background-color: #404b57;
    color: #d2d2d2;
    padding-left: 16pt;
    padding-right: 16pt;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 100%;
}

input[type=button]:hover, input[type=submit]:hover,
input[type=button]:focus, input[type=submit]:focus {
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 4px 6px 0 rgba(0,0,0,0.19);
}

input[type=button]:active, input[type=submit]:active {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}

input[type=radio] {
    margin-left: 2em;
}

/*input[type=radio]:checked + label {
    color: #ffaa00;
}*/


div.copyright {
    background-color: inherit;
    color: #999999;
    text-align: center;
}


.allergen-good {
    color: #00fb9e; /* green */
}

.allergen-bad {
    color: #ffaa00; /* orange */
}


/**** color definitions */
.back-light {
    color: #495d71;
}

.back-dark {
    color: #404b57;
}

.fore {
    color: #d2d2d2;
}

.orange {
    color: #ffaa00;
}

.green {
    color: #00fb9e;
}

.yellow {
    color: #edff00;
}

.gray {
    color: #999999;
}

.magenta {
    color: #dd9eff;
}

.cyan {
    color: #00f2ee;
}

.white {
    color: #ffffff;
}

.black {
    color: #000000;
}