/* ----------------------------- allgemeine Styles ------------------------ */

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; 
  font-size: 82%;
  line-height: 1.5;
  color: black;
  background-color: white;
  margin: 40px;
  margin-bottom: 5.7em;
}

html.selectmode body {
  margin: 0;
}

@media (max-width: 799px) {
  body {
    margin: 0;
  }
  html:not(.selectmode) body {
    margin-bottom: 5.7em;
  }
}

#nojs body,
html.initerror body { /* Benutzername oder Passwort nicht angegeben */
  display: none;
}


@media print {
  html {
    overflow-y: visible;
  }
  body {
    color: black;
    margin: 0;
    font-size: 82%;
  }
}


a { background: transparent; } /* Remove the gray background color from active links in MSIE 10 */
a:active { outline: 0; }
b, strong { font-weight: bold; } /* style set to "bolder" in Firefox 4+, Safari, and Chrome */

button,
select {
  font: inherit;
  margin: 0; /* Firefox 4+, Safari, and Chrome */
}

button {
  overflow: visible; /* "overflow" set to "hidden" in MSIE 8-11 */
}

button::-moz-focus-inner, /* Remove inner padding and border in Firefox 4+ */
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

@media print {
  noscript {
    display: none;
  }
}


#sound {
  margin: 0;
  padding: 0;
  position: absolute;
  left: -100px;
}

html.hidden main,
html.hidden footer {
  visibility: hidden;
}


/* ----------------------------- Tabelle #kalender ------------------------ */

#kalender {
  width: 100%; /* muss für ellipsis - siehe unten */
  border-collapse: collapse;
  border: 1px solid #eee;
}
@media (max-width: 799px) {
  #kalender {
    border: none;
  }
}
@media (max-width: 479px) {
  #kalender {
    width: 150%;
  }
}
@media (max-width: 360px) {
  #kalender {
    width: 170%;
  }
}
@media (max-width: 320px) {
  #kalender {
    width: 180%;
  }
}


#kalender tr.alarm {
  background-color: orange;
}


#kalender th,
#kalender td {
  vertical-align: top;
  padding: 5px 15px;
}


#kalender th {
  color: white;
  background-color: #aaa;
  text-align: left;
}
@media (max-width: 799px) {
  #kalender th {
    font-weight: normal;
    padding: 7px 5px;
  }
  #kalender tr th:first-child span {
    display: none;
  }
}
@media print {
  #kalender th {
    color: black;
    background-color: transparent;
    font-weight: bold;
  }
}


#kalender td {
  border-bottom: 1px solid #f0f0f0;
}

@media (max-width: 799px) {
  #kalender td {
    padding: 5px 5px;
  }
}

#kalender td:empty {
  height: 1.5em;
}

#kalender tr.wichtig {
  color: #e00;
}

#kalender tr.editable {
  background-color: #dfd;
}

#kalender tbody tr:not(.editable) {
  cursor: pointer;
}

#kalender tr.hide { /* wird von der Alarm-Funktion gesetzt */
  display: none;
}

/* ----------------------------- Editier-Elemente ------------------------ */

#kalender tr td:nth-child(3),
#kalender tr td:nth-child(4) {
  white-space: nowrap;
}

#kalender td:nth-child(4) {
  text-align: right;
}

#kalender tr.editable td:nth-child(1),
#kalender tr.editable td:nth-child(3),
#kalender tr.editable td:nth-child(4),
#kalender tr.editable td:nth-child(5) {
  outline: 1px dotted silver;
  cursor: pointer;
}


/* --------------- Ellipse in der letzten Spalte --------------- */

#kalender tr:not(.editable) td:nth-child(1),
#kalender tr:not(.editable) td:nth-child(2),
#kalender tr:not(.editable) td:nth-child(3),
#kalender tr:not(.editable) td:nth-child(4) {
  width: 1%;
}

#kalender tr:not(.editable) td:nth-child(5) {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kalender tr:not(.editable) td:nth-child(5) br {
  display: none;
}

/* ----------------------------- Footer ---------------------------- */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  border-top: 1px solid #e7e7e7;
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
}
@media (max-width: 799px) {
  footer {
    padding: 0;
  }
}
@media print {
  footer {
    display: none;
  }
}

footer table {
  border-collapse: collapse;
  width: 100%;
}

footer td {
  padding: 0;
  vertical-align: middle;
}

footer td:nth-child(1),
footer td:nth-child(2) {
  width: 14%;
}

footer td:nth-child(3),
footer td:nth-child(5),
footer td:nth-child(6) {
  width: 19%;
}

footer td:nth-child(4) {
  width: 15%;
}


/* ----------------------------- Footer: Buttons ---------------------------- */

footer button {
  display: inline-block;
  color: inherit;
  background-color: transparent;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  min-height: 45px;
  box-sizing: border-box;
  padding: 5px;
  border: none;
  border-radius: 0;
  margin: 0;
  cursor: pointer;
}

footer button:hover,
footer button:focus {
  background-color: #d7d7d7;
}

footer button:active {
  color: white;
  background-color: #444;
}

footer #new-button,
footer #remove-button {
  font-weight: bold;
  font-size: 2em;
  line-height: 1;
  padding: 0.23em 0 0.37em 0;
}
footer #new-button {
  color: #4a4;
}
footer #remove-button {
  color: #a44;
}

.selectmode footer {
  display: none;
}