html, input, textarea {
 font-size: medium;
 font-family: sans-serif;
 font-kerning: normal;
 font-stretch: normal;
}

body {
 margin: 0;
 color: #663300;
 background-color: #faf4e5;
 line-height: 1.5;
}

a,
a:visited {
 color: #663300;
}

#menu-mobile {
 position: sticky;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #e4dcc9;
 font-weight: bold;
 font-size: larger;
 width: 100%;
 cursor: pointer;
 /* position: fixed; */
 top: -1px;
 height: 41px;
}

#wrapper {
 margin-top: 1.5em;
}

#header {
 display: none;
}

#menu {
 width: 100%;
 background: url('assets/menu.jpg') 0 0 repeat-y #faf4e5;
 top: 40px;
  position: fixed;
  bottom: 0;
  overflow: auto;
  padding-bottom: 10px;
}

#soc a {
 display: inline-block;
 margin: 8px;
}

#menu form {
  padding: 0 0.2em;
}

#menu form input[type=submit] {
  margin: 10px 0 5px;
}

#main {
 padding: 15px;
}

.menu-mobile-hidden, .mobile-hidden {
 display: none;
}

/* forms */
div.row {clear: both;}
div.w25 {display: inline-block; width: 100%; float: left;}
div.w75 {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  flex-wrap: wrap;
  width: 100%;
  float: left;
  padding-bottom: 0.5em;
  display: flex;
}
div.w25 label {display: inline-block; width: 100%;}
div.w75 input, div.w75 textarea, div.w75 select {
  display: inline-block;
  width: 100%;
  flex: 1 1 0%;
}
div.w75 a.button {
 line-height: normal;
 padding: 1px 2px 1px 2px;
 flex: 0;
}
input[type="submit"], input[type="button"], button {
 display: inline-block;
 cursor: pointer;
 font-weight: bold;
 background: #e4dcc9;
 border: 1px solid #663300;
 color: #663300;
 padding: 0.25em;
}

input[type="submit"]:hover, input[type="button"]:hover {
 background: #faf4e5;
}

@media only screen and (min-width: 640px) {
 body {
  background-color: #eeeeee;
  text-align: center;
  padding: 2px;
 }

 #menu-mobile {
  display: none;
 }

 .mobile-hidden {
  display: revert;
 }

 #wrapper {
  margin: 0 auto 0 auto;
  max-width: 1024px;
  display: grid;
  grid-template: auto 1fr / auto 1fr;
  gap: 2px;
  text-align: left;
 }

 #wrapper > div {
  background-color: #faf4e5;
  border: 1px solid #663300;
  display: block;
 }

 #wrapper > div#header {
  grid-column: 1 / 3;
  height: 98px;
  background: url('assets/alpy.jpg');
  background-color: #c9c8b3;
  background-repeat: no-repeat;
  background-position: left;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 2.5em;
 }

 #menu {
  position: static;
  top: 0;
  width: 10em;
  grid-column: 1 / 2;
 }

 #main {
  grid-column: 2 / 3;
 }

 .section {
  clear: left;
  overflow: hidden;
 }

 .section-right {
  display: inline-block;
  margin-left: 1em;
  width: 200px;
  float: right;
  clear: right;
 }

 div.w25 {width: 25%;}
 div.w75 {width: 75%;}

 div.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 }
}

.article-brief-gallery-link {
  display: block;
  float: right;
  padding-left: 1em;
  padding-bottom: 1em;
}
.article-brief-gallery-link img {
  width: auto;
  height: auto;
  max-width: 200px;
  border: 1px solid #663300;
}

@media only screen and (min-width: 640px) {
  .article-detail-gallery {
    display: block;
    float: right;
    padding-left: 1em;
    padding-bottom: 1em;
  }
}
.article-detail-gallery-image {
  text-align: center
}
.article-detail-gallery img {
  border: 1px solid #663300;
}

div.photo {
 text-align: center;
 margin-bottom: 1em;
}
div.photo-description {
 font-weight: bold;
}
div.photo img {
 border: 1px solid #663300;
}

div.section {
 margin-top: 1em;
 margin-bottom: 1em;
}

div.section-header {
 display: flex;
 background-color: #e4dcc9;
 border-top: 1px solid #663300;
 border-bottom: 1px solid #663300;
 padding: 0.25em;
 margin-bottom: 0.25em;
}

div.section-header span {
 flex: 1;
 font-weight: bold;
}

div.section-header a,
div.section-header a:visited {
 text-decoration: none;
}
div.section-header a:hover {
 text-decoration: underline;
}

a.section-header {
 display: block;
 background-color: #e4dcc9;
 border-top: 1px solid #663300;
 border-bottom: 1px solid #663300;
 padding: 0.25em;
 margin-bottom: 0.25em;
 text-decoration: none;
 font-weight: bold;
}

div.section-footer {
 display: flex;
 padding: 0.25em;
 clear: both;
}

div.section-footer span {
 flex: 1;
}

.smaller {
 font-size: smaller;
}

.right {
 text-align: right;
}

div.section-nav {
 margin: 0.5em auto;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 grid-gap: 5px;
}

div.section-nav a, a.button {
 padding: 0.25em;
 font-weight: bold;
 background: #e4dcc9;
 text-align: center;
 text-decoration: none;
 border: 1px solid #663300;
}
	
div.section-nav a:hover, a.button:hover {
 background: #faf4e5;
}

table.section-table {
 border-collapse: collapse;
 width: 100%;
}
table.section-table thead tr {
 background-color: #e4dcc9;
 border-top: 1px solid #663300;
 border-bottom: 1px solid #663300;
}
table.section-table thead th {
 padding: 0.25em;
}
table.section-table tbody tr {
 border-bottom: 1px solid #e4dcc9;
}
table.section-table tbody tr:hover {
 background: #e4dcc9;
}
table.section-table th {
 vertical-align: top;
 font-weight: bold;
}
table.section-table td {
 vertical-align: top;
 padding: 0.5em 0.2em 0.2em 0.2em;
}
table.section-table a {
 text-decoration: none;
 display: inline-block;
}
table.section-table a:hover {
 text-decoration: underline;
}

table.article-table {
 border-collapse: collapse;
}
table.article-table caption {
 background-color: #e4dcc9;
 font-weight: bold;
 padding: 0.25em;
}
table.article-table td {
 border: 1px solid #e4dcc9;
 text-align: left;
 vertical-align: top;
 padding: 0.25em;
}

a.subsection {
 background-color: #e4dcc9;
 border: 1px solid #e4dcc9;
 padding: 0.25em;
 margin-bottom: 0.25em;
 text-decoration: none;
 display: block;
}
a.subsection:hover {
 border: 1px solid #663300;
}

/**********************  MENU *******************************************/

#leftmenu-divider {
	display: block;
	line-height: 0px;
	height: 1px;
	margin: 6px auto;   /* align for good browsers */
	background-color: #663300;
}

a.menu,
a.menu:link,
a.menu:visited {
 display: block;
 margin: 0.2em;
 padding: 0.2em;
 text-decoration: none;
 font-weight : bold;
 color: #663300;
 border: 1px solid #C4BCA9;
}
a.menu:hover {
 background: #faf4e5;
 border-color: #663300;
}

#menu input[type="text"],
#menu input[type="password"] {
 width: 100%;
 box-sizing: border-box;
}

.inline-button {
  font-size: 1em;
  display: inline-block;
  font-weight: bold;
  background: #e4dcc9;
  padding: 0.25em;
  /*vertical-align:middle;*/
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #663300;
  color: #663300;
}

.inline-button:hover {
  background: #faf4e5;
}

.post {margin-bottom: 1em;}
.post-header {background-color: #e4dcc9; padding: 0.25em;}
.post-header a {text-decoration: none;}
.post-header a:hover {text-decoration: underline;}
.post-nav {float:right;}
.post-nav a {display:block;}
.post-title {font-weight: bold;}
.post-author {font-weight: bold;}
.post-date {font-size: small;}
.post-parent-title {font-size: small;}

.enq {
  display: block;
  height: 1em;
  border: 1px solid #663300;
  background: #E4DCC9;
}

/* vt/jquery.dataTable.fix.css */
.dataTables_wrapper {
  clear: none;
  display:-moz-inline-stack;
  display:inline-block;
  /* display:inline; */
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  float: none;
  display:-moz-inline-stack;
  display:inline-block;
  /* display:inline; */
}

.text-normal-alarm {
  font-weight: bold;
  color: red;
}

.betawarning {
  color: red;
  font-weight: bold;
  padding-right: 0.5em;
  width: fit-content;
}

 /* Tooltip container */
 .tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 120px;
  color: #faf4e5;
  background-color: #663300;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}