/*
 *  Event-Kalender - kalenderstyle.css (utf-8)
 * - https://werner-zenk.de
 */

@charset "utf-8";

/* Hauptfarben */
:root {
  --color: #505050;
  --bgcolor-even: rgba(250,250,250,0.6);
  --bgcolor-odd: rgba(240,240,240,0.6);
  --highlight-color: #2284E6;
  --highlight-bgcolor: #DEEEFC;
  --highlight-outlinecolor: #B3DDFF;
 }

/* Kalender */
div#kalender {
 hyphens: Auto; /* FF */
 box-shadow: 1px 1px 10px #CFCFCF;
 background-image: url(hintergrundbild.jpg); /* ohne Bild 3 Zeilen auskommentieren*/
 background-repeat: No-Repeat;
 background-size: Cover;
}

/* Tabelle */
table#kalender {
 font-family: Verdana, Sans-Serif;
 background-color: #F5F5F5;
 border-collapse: Collapse;
 width: 100%;
 opacity: 0.85;  /*ohne bild auskommentieren*/
 cursor: Default;
}

/* Tabelle Beschriftung */
table#kalender caption {
 color: var(--highlight-color);
 font-size: 1.0rem;
 font-weight: Bold;
 letter-spacing: 2px;
 background: linear-gradient(#E0E0E0, #F5F5F5);
 padding: 5px 0 5px 0;
}

/* Tabelle Beschriftung (Bild) */
table#kalender caption img {
 max-width: 100%;
 height: Auto;
}

/* Tabelle TH */
table#kalender th {
 font-weight: Normal;
 text-align: Center !important;
 border: Solid 1px #FFFFFF;
}

/* Tabelle TD */
table#kalender td {
 vertical-align: Top;
 padding: 2px;
 border: Solid 1px #FFFFFF;
}

/* Tabelle Navigation */
table#kalender th#navigation {
 font-size: 1.0rem;
 font-weight: Bold;
 letter-spacing: 2px;
 text-align: Center !important;
 background-color: #F5F5F5;
}

table#kalender td#navigation span {
 white-space: Nowrap;
}

/* Auswahl (Monate, Jahre, Optionen) */
table#kalender td#auswahl {
 height: 30px;
 vertical-align: Middle;
 text-align: Center !important;
}

/* Anzeige (Events, Formular) */
table#kalender td#anzeige {
 font-family: Verdana, Sans-Serif;
 font-size: 1.0rem;
 background: linear-gradient(#EDEDED 1%, #FFFFFF 80%, #EDEDED);
}

/* Tabelle (child even/odd) */
table#kalender th:nth-child(even),
table#kalender td:nth-child(even) {
 background-color: var(--bgcolor-even);
}
table#kalender th:nth-child(odd),
table#kalender td:nth-child(odd) {
 background-color: var(--bgcolor-odd);
}

/* Heute */
table#kalender td.heute {
 background-color: rgba(218,218,218,0.6) !important;
}

/* Ein Tag! */
table#kalender td.eintag {
 height: 50px;
 cursor: Default;
 line-height: 14px;
 word-break: break-all;
 hyphens: Auto; /* FF */
 transition: background-color 0.5s;
}

table#kalender td.eintag:hover {
 background-color: rgba(227, 227, 227,0.6) !important;
}

/* Kein Tag! */
table#kalender td.keintag {
 height: 50px;
 color: #C5C5C5;
 padding-left: 8px;
 cursor: Pointer;
 transition: background-color 0.5s;
}

table#kalender td.keintag:hover {
 color: var(--highlight-color);
 background-color: rgba(227, 227, 227,0.6);
}

/* Wochentag (Mo. - Fr.) */
table#kalender th.wochentag {
 transition: background-color 0.5s;
}

/* Wochenende (Sa.+ So.) */
table#kalender th.wochenende {
 background-color: #DFDFDF;
 transition: background-color 0.5s;
}

table#kalender th.wochentag:hover,
table#kalender th.wochenende:hover {
 background-color: #E8E8E8;
}

/* Uhrzeit */
table#kalender span.uhrzeit {
 font-family: Arial, Tahoma, Sans-Serif;
 font-size: 0.8rem;
 color: var(--color);
}

/* Feiertag */
table#kalender span.feiertag {
 font-family: Arial, Tahoma, Sans-Serif;
 font-size: 0.8rem;
 color: #FA0000;
}

/* Aktiver Tag */
table#kalender .aktivtag {
 outline: Solid 1px var(--highlight-outlinecolor);
 box-shadow: Inset 0px 0px 100px 100px var(--highlight-bgcolor);
}

/* Navigation Link */
table#kalender span.navLink {
 font-family: Verdana, Sans-Serif;
 font-weight: Normal;
 color: var(--color);
 padding: 1px 4px 1px 4px;
 cursor: Pointer;
 outline: Solid 1px Transparent;
 transition: background-color 0.5s;
}

table#kalender span.navLink:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
}

table#kalender span.navBlock {
 min-width: 120px;
 display: Inline-Block;
}

table#kalender span.navBlock2 {
 min-width: 50px;
 display: Inline-Block;
}

/* Link */
table#kalender a:link,
table#kalender a:visited,
table#kalender a:active {
 color: var(--highlight-color);
}

table#kalender div.eventLink {
 font-family: Arial, Sans-Serif;
 font-size: 0.8rem;
 color: #FFFFFF;
 margin-top: 2px;
 padding: 2px 0 1px 2px;
 cursor: Pointer;
}

table#kalender span.optionLink {
 font-family: Arial, Sans-Serif;
 font-size: 0.85rem;
 color: var(--highlight-color);
 padding: 1px 5px 1px 5px;
 cursor: Pointer;
 outline: Solid 1px Transparent;
 transition: background-color 0.5s;
}

 table#kalender span.optionLink:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
}

table#kalender span.nowrap {
 white-space: Nowrap;
}

table#kalender span#eKmehrtage,
table#kalender span#eKdifferenz {
 color: var(--highlight-color);
}

/* Tabellennavigtion */
table#kalender table#tableNavigation {
 width: 100%;
 border-bottom: Solid 1px #FFFFFF;
 margin-bottom: 25px;
}

table#kalender table#tableNavigation td {
 border: 0;
 background: Transparent;
 white-space: Nowrap;
 vertical-align: Middle;
}

table#kalender table#tableNavigation th {
 border: 0;
 background: Transparent;
 vertical-align: Middle;
}

table#kalender table#tableNavigation td span.navLink  {
 font-size: 1.8rem;
}

/* user-select */
table#kalender caption,
 table#kalender td#navigation,
 table#kalender td.eintag,
 table#kalender td.keintag,
 table#kalender th.wochentag,
 table#kalender th.wochenende,
 table#kalender span.uhrzeit,
 table#kalender span.feiertag,
 table#kalender span.navLink,
 table#kalender span.eventLink,
 table#kalender span.optionLink {
 -ms-user-select: None;
 -moz-user-select: None;
 -webkit-user-select: None;
}

table#kalender span.selLink {
 -ms-user-select: Text;
 -moz-user-select: Text;
 -webkit-user-select: Text;
}

table#kalender mark.mark {
 font-size: 1.050rem;
 background-color: Transparent;
 color: var(--highlight-color);
}

/* Kalenderblatt */
table#kalender div#kalenderblatt {
 background: linear-gradient(#FFFFFF 50%, #EDEDED);
 line-height: 23px;
 color: var(--color);
 padding-bottom: 25px;
}

table#kalender div#kalenderblatt > table {
 border-bottom: Solid 1px #DEDEDE;
}

table#kalender div#blatt {
 font-family: Verdana, Sans-Serif;
 font-size: 5rem;
 text-shadow: 1px 1px 4px #9C9C9C;
 color: #156BC1;
 text-align: Center;
 vertical-align: Middle;
 hyphens: None;
 float: Left;
 line-height: 95px;
 width: 150px;
 height: 160px;
 padding-top: 10px;
 margin: 5px 15px 0 0;
 background: linear-gradient(#F3F9FE, #FFFFFF);
 border: Solid 1px #F3F9FE;
 border-radius: 10px;
 cursor: Pointer;
}

table#kalender div.blatttext {
 font-size: 1.2rem;
 letter-spacing: 2px;
 line-height: 15px;
}

/* Anzeige */
table#kalender form#eKform,
 table#kalender div#aktevents {
 color: var(--color);
 padding: 0 0 10px 25px;
}

table#kalender div#anzeigeOptionenBeenden {
 display: Inline-Block;
 text-align: Right;
}

/* Priorität */
table#kalender span.prioritaet {
 padding: 0px 5px 0px 5px;
 font-size: 12px;
 color: var(--color);
 cursor: Pointer;
}

table#kalender span.prioritaet:hover {
 color: #FFFFFF;
}

table#kalender div#inBlock {
 display: Inline-Block;
 width: 95%;
 line-height: 30px;
 hyphens: None; /* FF */
}

/* Überschrift -Wochentag, Monat  */
table#kalender div.abschnitt {
 font-size: 1.0rem;
 font-variant: Small-Caps;
 letter-spacing: 1px;
 color: var(--highlight-color);
 margin-top: 20px;
}

/* Event-Anzeige / Definitionsliste */
table#kalender dl.dl {
 background-color: Transparent;
}

table#kalender dl.dl > dd {
 margin-left: 25px;
 max-width: 90%;
}

table#kalender p.formLineHeight {
 line-height: 30px;
}

table#kalender span.eventText {
 font-weight: Bold;
 cursor: Pointer;
}

/* Formularfelder */
table#kalender input[type="text"],
table#kalender input[type="password"],
table#kalender input[type="search"],
table#kalender input[type="number"],
table#kalender input[type="date"],
table#kalender input[type="checkbox"],
table#kalender button[type="button"],
table#kalender textarea,
table#kalender select {
 border: Solid 1px #9A9A9A;
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 0.95rem;
 caret-color: #FF0000;
}

table#kalender input[type="text"]:focus,
table#kalender input[type="password"]:focus,
table#kalender input[type="search"]:focus,
table#kalender input[type="number"]:focus,
table#kalender input[type="date"]:focus,
table#kalender input[type="checkbox"]:focus,
table#kalender button[type="button"]:focus,
table#kalender textarea:focus,
table#kalender select:focus {
 border: Solid 1px var(--highlight-color);
}

table#kalender input[type="button"],
table#kalender input[type="submit"],
table#kalender input[type="reset"],
table#kalender button[type="button"],
table#kalender button[type="reset"] {
 border: Solid 1px #9A9A9A;
 background-color: #E1E1E1;
 font-size: 0.95rem;
}

table#kalender input[type="button"]:hover,
table#kalender input[type="submit"]:hover,
table#kalender input[type="reset"]:hover,
table#kalender button[type="button"]:hover,
table#kalender button[type="reset"]:hover {
 border: Solid 1px #0078D7;
 background-color: #E5F1FB;
}

table#kalender input[type="button"]:disabled,
table#kalender input[type="button"]:disabled:hover {
 background-color: #E1E1E1;
 border: Solid 1px #E1E1E1;
 cursor: Not-Allowed;
}

table#kalender input[type="number"]:out-of-range {
 border: Solid 1px #0078D7;
 background-color: #FFCACA;
}

table#kalender input[type="text"]#event {
 width: 238px;
}

table#kalender textarea#textarea {
 width: 400px;
 min-width: 400px;
 height: 150px;
 min-height: 150px;
 resize: Both;
}

/* Anmeldung */
table#kalender input[type="text"].login,
table#kalender input[type="password"].login {
 width: 150px;
}

table#kalender input[type="number"] {
 width: 70px;
}

table#kalender input[type="time"] {
 width: 75px;
 padding-left: 5px;
 vertical-align: Middle;
}

table#kalender label {
 white-space: Nowrap;
}

table#kalender label:hover {
 color: var(--highlight-color);
}

 /* Checkbox (checked) */
table#kalender input[type="checkbox"]:checked + label {
 color: var(--highlight-color);
}

table#kalender input[type="checkbox"]:checked + label#delete {
 color: #FF0000;
}

table#kalender option:nth-child(even) {
 background-color: #EFEFEF;
}

table#kalender option:nth-child(odd) {
 background-color: #FFFFFF;
}

table#kalender optgroup {
 background-color: #DEEEFC;
}

table#kalender details > summary {
 color: var(--highlight-color);
 cursor: Pointer;
 width: 200px;
}

table#kalender details > summary:focus { /* Chromium */
 border:0;
 outline:0;
}

/* An.- und Abmeldung (Schriftzug: "Event-Kalender") */
span.anmeldungOK {
 font-size: 1.25rem;
 letter-spacing: 2px;
 font-variant: Small-Caps;
 color: #529EEA;
}
span.anmeldungOK:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
}

span.anmeldungKO {
 font-size: 1.25rem;
 letter-spacing: 2px;
 font-variant: Small-Caps;
}
span.anmeldungKO:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
}

/* Statusmeldung */
div#kalender .statusBox {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 0.90rem;
 color: #FFFFFF;
 background-color: rgba(100, 100, 100,0.8);
 padding: 10px;
 border-radius: 20px;
 box-shadow: 0px 0px 5px 2px rgba(100, 100, 100,0.8);
 z-index: 1000;
 cursor: Default;
}


/* Anpassung an mobile Kleingeräte */
@media screen and (max-width: 35rem) {

 table#kalender .mobile {
  display: None !important;
 }

 /* Tabelle TH/TD */
 table#kalender th,
 table#kalender td {
  padding: 0px;
  border: 0px;
 }

 /* Feiertag */
 table#kalender span.feiertag {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.50rem;
 }

 /* Uhrzeit */
 table#kalender span.uhrzeit {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.60rem;
  /*display: None;*/
 }

 /* Event Link */
 table#kalender span.eventLink {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.60rem;
 }

 /* Ein Tag! */
 table#kalender td.eintag {
  line-height: 8px;
 }

 table#kalender td.eintag div {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.60rem;
 }

 table#kalender td.eintag span {
  display: Inline-Block;
  margin-top: 3px;
  margin-bottom: 3px;
 }

 /* Formularfelder */
 table#kalender textarea#textarea {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  height: 200px;
  min-height: 200px;
  max-height: 400px;
  resize: Vertical;
 }

 table#kalender input[type="text"]#event {
  width: 180px;
 }

 table#kalender input[type="text"]#name {
  width: 120px;
 }

 table#kalender input[type="password"]#passwort {
  width: 80px;
 }

}


/* Für den Ausdruck optimieren */
@media print {
 div#kalender {
  box-shadow: none;
 }

 table#kalender td {
  outline: Solid 1px #888888;
 }

 table#kalender .print {
  display: None;
 }

 table#kalender span.optionLink {
  display: None;
 }
}