/*——————————————- 2. Aussehen —————————————————*/
html, body, .ui-page-theme-a, input, select, body, .ui-mobile label, .ui-select,
.ui-btn, .ui-mini .ui-btn, .ui-mini .ui-input-text input, .ui-mini .ui-input-search input, .ui-input-text.ui-mini input,
.ui-input-search.ui-mini input, .ui-mini textarea.ui-input-text, textarea.ui-mini, pre {
font-size: 16px; /* Allgemeine Einstellung für Schriftgröße */
font-family: ‚theMix‘, sans-serif; /* Allgemeine Einstellung für Schriftart */
text-shadow: none; /* Allgemeine Einstellung für Schriftschatten */
}
.ui-page-theme-a, body, .ui-mobile label, pre, .ui-page.ui-page-theme-a a,
.ui-page.ui-page-theme-a a:hover, .ui-page.ui-page-theme-a a:visited, .ui-page.ui-page-theme-a a:active {
color: #000000; /* Allgemeine Einstellung für Schriftfarbe */
}
.angemeldet {
background-color: #667d00; /* Hintergrundfarbe für Kurse bei denen der Kunde angemeldet ist */
color: #FFFFFF; /* Schriftfarbe für Kurse bei denen der Kunde angemeldet ist */
}
.free {
background-color: #b3cdce; /* Hintergrundfarbe für buchbare Kurse */
color: #000000; /* Schriftfarbe für buchbare Kurse */
text-transform: uppercase;
letter-spacing: 1px;
}
.almostFull {
background-color: #b3cdce; /* Hintergrundfarbe für buchbare Kurse */
color: #000000; /* Schriftfarbe für buchbare Kurse */
text-transform: uppercase;
letter-spacing: 1px;
}
.wait {
background-color: #fff; /* Hintergrundfarbe für Kurse bei denen sich der Kunde im Wartepool befindet */
color: #000000; /* Schriftfarbe für Kurse bei denen sich der Kunde im Wartepool befindet */
text-transform: uppercase;
letter-spacing: 1px;
}
.full {
background-color: #5e5e5e; /* Hintergrundfarbe für ausgebuchte Kurse */
color: #FFFFFF; /* Schriftfarbe für ausgebuchte Kurse*/
}
.grey {
background-color: #fff; /* Hintergrundfarbe für Kurse die als nicht buchbar hinterlegt sind */
color: #000000; /* Schriftfarbe für Kurse die als nicht buchbar hinterlegt sind */
}
.group td {
font-weight: bold; /* Schriftstärke für Gruppierungsüberschrift */
padding: 2px .3em 1px .3em; /* Innenabstand für Gruppierungsüberschrift */
font-size: 100%; /* Schriftgröße für Gruppierungsüberschrift */
}
.group {
background-color: #000; /* Farbe für Gruppierungsüberschrift */
color: #fff; /* Schriftfarbe für Gruppierungsüberschrift */
cursor: default; /* Cursor für Gruppierungsüberschrift */
}
.even {
background-color: #e9f0f1 !important; /* Hintergrundfarbe für Zeilen in Kursliste (gerade) */
color: #000000; /* Schriftfarbe für Zeilen in Kursliste (gerade) */
}
.odd {
background-color: #f2f7f7 !important; /* Hintergrundfarbe für Zeile in Kursliste (ungerade) */
color: #000000; /* Schriftfarbe für Zeile in Kursliste (ungerade) */
}
.KursListe #grid th {
background-color: #fff; /* Hintergrundfarbe für Tabellenkopf in der Kursliste */
color: #509e9a; /* Schriftfarbe für Tabellenkopf in der Kursliste */
border-bottom: 0px solid #000; /* Farbe, Breite und Art des unteren Randes des Tabellenkopfes in der Kursliste */
border-top: 0px solid #dddddd; /* Farbe, Breite und Art des oberen Randes des Tabellenkopfes in der Kursliste */
text-transform: uppercase;
letter-spacing: 1px;
}
.KursListe #grid td.courseImage, .KursListe #grid th.courseImage, .KursListe #grid div.courseImage, #courseImageTester {
width: 0rem; /* Breite für Bilder in der Kursliste (Agenda- und Listenansicht) */
}
.KursListe #grid td.courseImage, .KursListe #grid div.courseImage, #courseImageTester {
height: 0rem; /* Höhe für Bilder in der Kursliste (Agenda- und Listenansicht) */
}
.KursListe #grid th[data-name=“Kursname“], .KursListe #grid td[data-name=“Kursname“] {
width: 130px; /* Breite des Kursnamen in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“WannUndZeitraum“], .KursListe #grid td[data-name=“WannUndZeitraum“] {
width: 130px; /* Breite der Zeitangabe in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“Ort“], .KursListe #grid td[data-name=“Ort“] {
width: 110px; /* Breite des Ortes in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“TeilnehmerAnzahl“], .KursListe #grid td[data-name=“TeilnehmerAnzahl“] {
width: 70px; /* Breite der Plätze in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“Status“], .KursListe #grid td[data-name=“Status“] {
width: 130px; /* Breite des Status in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
/* Wenn Summe aller obigen Breiten größer ist als die Gerätebreite, dann wird die Agenda- und Listen-Ansicht als Tabelle angezeig. Wenn nicht dann in Kompaktansicht. */
.KursListe #grid .group {
width: 570px; /* Breite der Gruppierungsüberschriften in der Kursliste (Nur Agenda- und Listen-Ansicht). Muss der Summe der obigen Breiten entsprechen. */
}
.Kalender #calendarContent td .kurstermin, .Kalender .leftHeader td {
height: 8rem; /* Höhe von Kursterminen in der Kalender Ansicht */
}
.Kalender .leftHeader tr td .rotate {
width: 8rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}
.Wochentage #calendarContent td .kurstermin, .Wochentage .leftHeader td {
height: 10rem; /* Höhe von Kursterminen in der Wochentage Ansicht */
}
.Wochentage .leftHeader tr td .rotate {
width: 10rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}
#calendarPre td {
width: 6rem; /* Mindest-Breite von Kursterminen in der Kalendar und Wochentage Ansicht */
}
#grid.liste td {
padding-top: 3px; /* Abstand einer Zeile nach oben in der Kursliste */
padding-bottom: 3px; /* Abstand einer Zeile nach unten in der Kursliste */
}
#grid.liste tr td:first-child {
padding-left: 5px; /* Mindestabstand zwischen der ersten Spalte in der Kursliste und dem linken Rand der Tabelle */
}
#grid.liste tr td:last-child {
padding-right: 5px; /* Mindestabstand zwischen der letzten Spalte in der Kursliste und dem rechten Rand der Tabelle */
}
.ui-page.ui-page-theme-a #filtern .ui-select .ui-btn, .ui-page.ui-page-theme-a #filtern .ui-checkbox .ui-btn, #filtern .filternContent .auswahlfeld {
background-color: rgb(255, 255, 255); /* Hintergrundfarbe für Filter im Filtern-Block */
border-color: #e8e8e8; /* Rahmenfarbe für Filter im Filtern-Block */
}
#filtern .filternContent .auswahlfeld.selected, #filtern .filternContent .auswahlfeld.selected:hover {
background: #509e9a; /* Hintergrundfarbe für aktive Buttons im Filtern-Block */
border-color: #fff; /* Rahmenfarbe für aktive Buttons im Filtern-Block */
}
.ui-page.ui-page-theme-a #filtern .ui-btn:hover, #filtern .filternContent .auswahlfeld:hover {
background-color: #fff; /* Hintergrundfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
color: #000000; /* Schriftfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
border-color: #000; /* Rahmenfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
}
.auswahlfeld, .ui-page.ui-page-theme-a .ui-select .ui-btn, .ui-page.ui-page-theme-a .ui-checkbox .ui-btn {
background-color: #e9f0f1; /* Hintergrundfarbe für Auswahlfelder */
color: #000000; /* Schriftfarbe für Auswahlfelder */
border-color: #fff; /* Rahmenfarbe für Auswahlfelder */
border-width: 1px; /* Breite des Rahmens für Auswahlfelder */
border-radius: 0.0rem; /* Rundungsradius des Rahmens für Auswahlfelder */
text-transform: uppercase;
letter-spacing: 1px;
}
.ui-page.ui-page-theme-a .ui-btn {
background-color: #e9f0f1; /* Hintergrundfarbe für Buttons */
color: #000000; /* Schriftfarbe für Buttons */
border-color: #e9f0f1; /* Rahmenfarbe für Buttons */
border-width: 1px; /* Breite des Rahmens für Buttons */
border-radius: 0rem; /* Rundungsradius des Rahmens für Buttons */
text-transform: uppercase;
letter-spacing: 1px;
}
.ui-page.ui-page-theme-a .ui-btn:hover, .auswahlfeld:hover {
background-color: #509e9a; /* Hintergrundfarbe für Buttons sobald sich die Maus darüber befindet */
color: #fff; /* Schriftfarbe für Buttons sobald sich die Maus darüber befindet */
border-color: #fff; /* Rahmenfarbe für Buttons sobald sich die Maus darüber befindet */
}
.auswahlfeld.selected {
background: #509e9a; /* Hintergrundfarbe für aktive Buttons */
border-color: #fff; /* Rahmenfarbe für aktive Buttons */
color: #fff;
}
.border, .ui-input-text, .ui-page.ui-page-theme-a .ui-body-inherit {
background-color: #e9f0f1; /* Hintergrundfarbe für Textfelder */
color: #000; /* Schriftfarbe für Textfelder */
border-color: #fff; /* Rahmenfarbe für Textfelder */
border-width: 1px; /* Breite des Rahmens für Textfelder */
}
.ui-input-text input::placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input::-webkit-input-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input:-moz-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input::-moz-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input:-ms-input-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-btn.ui-checkbox-off.ui-btn-a:after, .ui-btn.ui-checkbox-off:after {
background-color: #e9f0f1; /* Hintergrundfarbe für Formularfelder zum Ankreuzen (wenn nicht angekreuzt) */
}
.ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-btn.ui-checkbox-on:after {
background-color: #e9f0f1; /* Hintergrundfarbe für Formularfelder zum Ankreuzen (wenn angekreuzt) */
}
.leftHeader .wannheader td {
background: #fff; /* Hintergrundfarbe der Tageszeit-Zelle in der Kalender und Wochentage Ansicht */
}
.leftHeader {
background-color: #fff; /* Hintergrundfarbe der restlichen Tageszeit-Spalte in der Kalender und Wochentage Ansicht */
}
#calendarPre td, .leftHeader tr:first-child td {
height: 2.7rem; /* Höhe der Datums-Spalte in der Kalendar und Wochentage Ansicht*/
background-color: #fff; /* Hintergrundfarbe der Datumsspalte in der Kalender und Wochentage Ansicht */
border-bottom: 2px solid black; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den unteren Rand der Datumsspalte in der Kalender und Wochentage Ansicht */
}
#calendarContent {
background-color: #fff; /* Hintergrundfarbe der leeren Zellen in der Kalender und Wochentage Ansicht */
}
#calendarContent td.kurstermin {
font-size: 80%; /* Schriftgröße bei Kursterminen in der Kalender und Wochentage Ansicht */
}
#calendarContent td.kurstermin, #calendar .kursname:before, #calendar .kursort:before, #calendar .kursname:after, #calendar .kursort:after {
background-color: #f2f7f7; /* Hintergrundfarbe bei Kursterminen in der Kalender und Wochentage Ansicht */
color: #000000; /* Schriftfarbe bei Kursterminen in der Kalender und Wochentage Ansicht */
}
#calendarContent td.kurstermin:hover, #calendarContent td.kurstermin:hover .kursname:before, #calendarContent td.kurstermin:hover .kursort:before, #calendarContent td.kurstermin:hover .kursname:after, #calendarContent td.kurstermin:hover .kursort:after {
background-color: #509e9a; /* Hintergrundfarbe bei Kursterminen in der Kalender und Wochentage Ansicht sobald sich die Maus darüber befindet */
color: #fff;
}
#calendarContent td.kurstermin, .leftHeader td, tr.hideTimespan td {
box-shadow: inset 0 -2px 0 0 #000; /* Rahmenbreite und Rahmenfarbe für den unteren Rand bei Kursterminen in der Kalender und Wochentage Ansicht */
}
#calendarContent td, #calendarPre td {
border-right: 2px solid black!important; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den rechten Rand bei Spalten in der Kalender und Wochentage Ansicht */
}
.wannheader td {
border-top: 2px solid black; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den oberen Rand bei Zeilen mit Tageszeit in der Kalender und Wochentage Ansicht */
}
#calendarPre td.hideWeekday {
width: 0rem; /* Breite der Spalten für gefilterter Wochentage in der Kalender und Wochentage Ansicht */
}
.Kalender tr.hideTimespan td, .Wochentage tr.hideTimespan td {
height: 0rem; /* Höhe der Tageszeit-Zeile wenn es keine Termine für diese Tageszeit gibt (Werte kleiner 2rem blenden leere Tageszeit-Zeilen aus) */
}
.Kalender .leftHeader tr.hideTimespan td .rotate, .Wochentage .leftHeader tr.hideTimespan td .rotate {
width: 0rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}
#filtern .ui-collapsible-content {
padding: .6em .5em .3em .5em; /* Abstand nach oben, rechts, unten, links der Filter zum Filter-Container */
background: #ffffff; /* Hintergrundfarbe des Filter-Containers */
}
span.errorMessage {
background-color: #f2dede; /* Hintergrundfarbe für Fehlermeldungen */
color: #000; /* Schriftfarbe für Fehlermeldungen */
padding: .5rem; /* Abstand nach Oben/Rechts/Unten/Links vom Text zum Rand der Fehlermeldungsbox */
border-radius: .4em; /* Radius des Randes der Fehlermeldungsbox */
}
span.successMessage {
background-color: #dff0d8; /* Hintergrundfarbe für Erfolgsmeldungen */
color: #000; /* Schriftfarbe für Erfolgsmeldungen */
padding: .5rem; /* Abstand nach Oben/Rechts/Unten/Links vom Text zum Rand der Erfolgsmeldungsbox */
border-radius: .4em; /* Radius des Randes der Erfolgsmeldungsbox */
}
.isKursleiter {
color: red; /* Schriftfarbe für „Kursleiter“ Hinweis bei Kursen bei denen man Kursleiter ist in Kalender/Wochentage Ansicht */
}
/* Nächsten Kommentar entfernen um die maximale Höhe der „Registrieren/Profil“-Seite nicht zu begrenzen */
/*
.Profile .content {
max-height: 100%;
}
*/
/* Nächsten Kommentar entfernen um die maximale Höhe der „Kurs buchen“, „Kursinfo“, „Kursliste“-Seite nicht zu begrenzen (Agenda-Ansicht ausgenommen) */
/*
.setMaxHeight.Wochentage, .setMaxHeight.Liste, .setMaxHeight.Kalender, .KursBuchen .content, .Kurs .content, .Ort .content {
max-height: 100%;
}
*/
/* Nächsten Kommentar entfernen um Ort Filter auf der „Kursliste“-Seite immer anzuzeigen */
/*
#ort {
display: table-row !important;
}
#ort td:nth-child(3) {
display: none;
}
*/
/* Kommentar entfernen um auf der meine Kurse Seite Filtern/Suchen/Sortieren auszublenden
#meineKurse #control, #meineKurse #grid_filter {
display: none !important;
}
*/
/* Kommentar entfernen um auf der mein Wartepool Seite Filtern/Suchen/Sortieren auszublenden
#meinWartepool #control, #meinWartepool #grid_filter {
display: none !important;
}
*/
/* Kommentar entfernen um „Buchen“/“Stornieren“ Buttons auf der Kurs-Seite hinter statt vor der Terminliste anzuzeigen
.callToActionMitte {
display: none;
}
.callToActionUnten {
display: block;
}
*/
/* Kommentar entfernen um „Buchen“/“Stornieren“ Buttons auf der Kurs-Seite hinter und vor der Terminliste anzuzeigen
.callToActionUnten {
display: block;
}
*/
/* Datepicker Einstellungen */
.datepicker-container {
font-size: 14px;
color: #000;
background-color: #fff;
}
.datepicker-dropdown {
border: 0px solid #000;
-webkit-box-shadow: 1px 1px 6px #ccc;
box-shadow: 1px 1px 6px #ccc;
}
.datepicker-top-left,
.datepicker-top-right {
border-top-color: #fff;
}
.datepicker-top-left:before,
.datepicker-top-left:after,
.datepicker-top-right:before,
.datepicker-top-right:after {
border-top: 0;
}
.datepicker-top-left:before,
.datepicker-top-right:before {
border-bottom-color: #fff;
}
.datepicker-top-left:after,
.datepicker-top-right:after {
border-bottom-color: #fff;
}
.datepicker-bottom-left,
.datepicker-bottom-right {
border-bottom-color: #fff;
}
.datepicker-bottom-left:before,
.datepicker-bottom-left:after,
.datepicker-bottom-right:before,
.datepicker-bottom-right:after {
border-bottom: 0;
}
.datepicker-bottom-left:before,
.datepicker-bottom-right:before {
border-top-color: #fff;
}
.datepicker-bottom-left:after,
.datepicker-bottom-right:after {
border-top-color: #fff;
}
.datepicker-panel > ul > li {
background-color: #fff;
}
.datepicker-panel > ul > li:hover {
background-color: #509e9a;
color: #fff;
}
.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
color: #999;
}
.datepicker-panel > ul > li.highlighted {
color: #fff;
}
.datepicker-panel > ul > li.highlighted:hover {
color: #fff;
}
.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
background-color: #509e9a;
color: #fff;
}
.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
color: #ccc;
background-color: #fff;
}
.datepicker-panel > ul > li.disabled.highlighted,
.datepicker-panel > ul > li.disabled:hover.highlighted {
background-color: #e6f2ff;
}
.datepicker-panel > ul > li[data-view=’years prev‘],
.datepicker-panel > ul > li[data-view=’year prev‘],
.datepicker-panel > ul > li[data-view=’month prev‘],
.datepicker-panel > ul > li[data-view=’years next‘],
.datepicker-panel > ul > li[data-view=’year next‘],
.datepicker-panel > ul > li[data-view=’month next‘],
.datepicker-panel > ul > li[data-view=’next‘] {
font-size: 18px;
}
.datepicker-panel > ul[data-view=’week‘] > li,
.datepicker-panel > ul[data-view=’week‘] > li:hover {
background-color: #fff;
}
#search_wrapper, #search_wrapperCal {
border: 0px solid #fff!important;
background-color: #fff!important;
}
h3 {
display:none!important;
}
.calendarWrapper, .content {
/* Foreground, Background */
scrollbar-color: #000 #e9f0f1;
scrollbar-width: auto;
}
.calendarWrapper::-webkit-scrollbar, .content::-webkit-scrollbar {
width: 10px; /* Mostly for vertical scrollbars */
height: 10px; /* Mostly for horizontal scrollbars
*/
}
.calendarWrapper::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb { /* Foreground */
background: #000;
}
.calendarWrapper::-webkit-scrollbar-track, .content::-webkit-scrollbar-track { /* Background */
background: #e9f0f1;
}
.calendarWrapper::-webkit-scrollbar-thumb:hover, .content::-webkit-scrollbar-thumb:hover {
background: #509e9a;
}
.anmeldung.booking.callToActionMitte a {
display: none;
}
.rotate {
font-weight: 800;
}
#calendarContent td:last-child, #calendarPre td:last-child {
border-right: 2px solid #fff!important;
}
/*#calendarContent tr td:nth-child(6), #calendarContent tr td:nth-child(7) {
display: none!important;
}
#calendarPre td:nth-child(6), #calendarPre td:nth-child(7) {
width:0!important;
}
#calendarPre td:nth-child(6) div, #calendarPre td:nth-child(7) div {
display: none;
}*/
Unsere Kurse