:root {
  --button-foreground-dark: #2779AA;
  --foreground-light: #fff;
  --background-light: #E3F1FA;
  --button-border-light: #aed0ea;
}
#menu
{
  list-style-type:none;
  margin:0;
  padding:0;
  position:fixed;
}
#menu a:link, #menu a:visited
{
  display:block;
  font-weight:bold;
  color: var(--button-foreground-dark);
  background-color:#E3F1FA;
  width:260px;
  text-align:left;
  padding:4px;
  text-decoration:none;

  border-style: solid;
  border-color: white;
  border-width: 1px;
}

#footer
{
  border-top: 2px dotted grey;
  text-align: center;
  padding-top: 10px;
}

/*	white font	*/
#menu a:hover,#menu a:active, .button:hover, .button:active
{
  color: var(--foreground-light);
}

/* taken from jQueryUI */
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: var(--button-foreground-dark);
  text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
#menu li a.ui-state-active,
input.button:checked + label {
  border: 1px solid #2694e8;
  background: #3baae3;
  font-weight: bold;
  color: #ffffff;
}
button,
.button,
input.button + label {
  border: 1px solid var(--button-border-light);
  background: var(--background-light);
  font-weight: bold;
  color: var(--button-foreground-dark);
  border-radius: 6px;
  display: inline-block;
  position: relative;
  padding: .4em 1em;
  margin-right: .1em;
  cursor: pointer;
  text-align: center;
  overflow: visible;
  line-height: 1.4;
  text-decoration: none;
}
button:hover,
#menu a:hover,
#menu a:active,
.button:hover,
.button:active,
button:active,
input.button:not(:checked) + label:hover {
  border: 1px solid #74b2e2;
  background: #e4f1fb;
  font-weight: bold;
  color: #0070a3;
}

/* adjust height for reset button to fit with LCD height */
#reset
{
  height: 32px;
  padding: 0em 1em;
}

/* hide radio input symbols */
input.button:empty {
  display: none;
}

/* explicitly set font for everything, because otherwise they might differ */
body, input, button, select, option, textarea, a {
  font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
  font-size: 1em;
}

/* adjust input field width to be able to show 25 dice elements */
#newpassword input, #dice-thrown
{
  width: 350px;
}

/*	all corners round	*/
#menu a, .button, .dialog, #header
{
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.LCD
{
  width: 1.5em;
  height: 1.5em;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}
#header
{
  border: 1px solid #aed0ea;
  background: var(--background-light);
  text-align: center;
}
#header a:link, #header a:hover, #header a:visited
{
  display: block;
  width: 100%;
  height: 100%;
}
#progress
{
  margin-right: 10px;
  margin-left: 10px;
  height: 1.5em;
  width: 300px;
}
.finished
{
  color: green;
}
#body
{
  border-style: none none none solid;
  border-color: grey;
  border-width: 2px;
  margin-left: 270px;
  padding: 10px 50px 10px 10px;
}

.dialog
{
  display: inline-block;
  border: 1px solid #C0C0C0;
  padding: 5px;
  margin: 10px;
}

/* Modal dialog background */
#modal-background {
  display: none;
  position: fixed;
  z-index: 1; /* sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* black with opacity */
}
/* Modal content box */
.modal-content {
  background-color: #fefefe;
  position: fixed;
  top: 0;
  left: 25%;
  margin: 15% auto; /* 15% from top and centered */
  padding: 20px;
  border: 2px solid #d82727;
  width: 50%;
  z-index: 2; /* sit on top of the modal dialog background */
  display: none;
}
/* The modal dialogs close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.information
{
  background-color: gold;
  border: 1px solid #C0C0C0;
}

/* mainly for password.html */
#security-form input, #security-form label, #security-form .ui-icon
{
  /* float: left; */
}
#security-form .ui-icon
{
  margin-left: 1em;
  cursor: help;
}
#security-info {
  color: var(--foreground-light);
  background-color: var(--button-foreground-dark);
  width:16px;
  height:16px;
  display:inline-block;
  border-radius:100%;
  font-size:14px;
  font-weight: bold;
  text-align:center;
  text-decoration:none;
}
.input-error .error
{
  background-color: #F6E69F;
}
#dice-thrown
{
  background-color: lightYellow;
}
#newpassword
{
  margin: 10px 0px;
}

/*mainly for security.html */
.three-dice>td:nth-child(4)
{
  background-color:#E8FFD2;
}
.four-dice>td:nth-child(4)
{
  background-color:#D2FFA5;
}
.five-dice>td:nth-child(4)
{
  background-color:#A5FF4B;
}
.question {
  background-color: rgb(234, 244, 252);
  font-style: italic;
}

/* language specific stuff */
:lang(de)
{
  quotes:"\201E" "\201C" "\201A" "\2018";
}
:lang(en)
{
  quotes:"\201C" "\201D" "\2018" "\2019";
}

/* animations */
@keyframes highlight-frames {
  from {background-color: yellow;}
  to {background-color: none;}
}

.highlight {
  animation-name: highlight-frames;
  animation-duration: 4s;
}