/* =========================================================
   TANZSCHULE DOBNER
   NIMBUSCLOUD – GRUNDKURSE
   =========================================================

   Hauptfarbe:
   Orange        #F08000

   Standorte:
   Bad Vöslau        #F08000
   Biedermannsdorf   #9c097d
   Dobner on Tour    #045184

   Tabellen:
   Weiß              #FFFFFF
   Hellgrau          #F7F7F7

   ========================================================= */


/* =========================================================
   PFLICHTFELDER
   ========================================================= */

.required-item:after {
    content: ' *';
    color: #F08000;
}


/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

html,
body {
    background: none !important;
    font-size: 14px;
    font-family: "Open Sans", Arial, sans-serif;
    color: #333333;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: #333333;
    text-decoration: none;
}

a:focus,
a:hover {
    color: #F08000;
    text-decoration: none;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    padding: 8px;
}


/* Hauptfarbe – Dobner Orange */
.btn-primary {
    background-color: #F08000 !important;
    border-color: #F08000 !important;
    color: #FFFFFF !important;
}


/* Button Hover / Focus / Aktiv */
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open .dropdown-toggle.btn-primary {
    background-color: #D96F00 !important;
    border-color: #D96F00 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   INFO- / HINWEISBOXEN
   ========================================================= */

.alert-info {
    background-color: #FFF4E8;
    border-color: #F08000;
    color: #333333;
}


/* =========================================================
   KURSÜBERSCHRIFTEN
   ========================================================= */

.type-header-name h2 {
    font-weight: bold;
    color: #333333;
    vertical-align: middle !important;
}


.group-level-item-name {
    font-size: 1.4em;
    font-weight: bold;
    color: #333333;
}


/* =========================================================
   STANDORTE
   ========================================================= */


/* -----------------------------------------
   Überschrift "Standorte"
   ----------------------------------------- */

.location-filter-name {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 0 12px 0 !important;
    display: block;
}


/* -----------------------------------------
   Standort-Auswahl
   ----------------------------------------- */

.location-filter {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}


/* Einzelne Standort-Links */

.location-filter a {
    display: inline-block;
    margin-right: 18px;
    margin-bottom: 5px;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}


/* -----------------------------------------
   BAD VÖSLAU
   Orange
   ----------------------------------------- */

.location-filter [data-location="1"],
.location-filter a[data-location="1"],
.location-filter a[href*="location=1"] {
    color: #F08000 !important;
}


/* -----------------------------------------
   BIEDERMANNSDORF
   Violett
   ----------------------------------------- */

.location-filter [data-location="2"],
.location-filter a[data-location="2"],
.location-filter a[href*="location=2"] {
    color: #9c097d !important;
}


/* -----------------------------------------
   DOBNER ON TOUR
   Blau
   ----------------------------------------- */

.location-filter [data-location="4"],
.location-filter a[data-location="4"],
.location-filter a[href*="location=4"] {
    color: #045184 !important;
}


/* -----------------------------------------
   ALLE ANDEREN STANDORTE
   ----------------------------------------- */

.location-filter a:not([data-location="1"]):not([data-location="2"]):not([data-location="4"]) {
    color: #333333 !important;
}


/* Standort Hover */

.location-filter a:hover {
    opacity: 0.50;
    text-decoration: none !important;
}


/* =========================================================
   KURSTABELLE
   ========================================================= */

#courses-table {
    margin-top: 1em;
}


/* Kurslevel ausblenden */

#courses-table .course-level {
    display: none;
}


/* =========================================================
   TABELLENKOPF
   ========================================================= */

.table > thead > tr > th {
    border-bottom: 2px solid #045184;
    color: #333333;
    font-weight: 700;
}


/* =========================================================
   TERMININFORMATIONEN
   ========================================================= */


/* Klickbarer Terminbereich */

.events-info {
    cursor: pointer;
}


/* Terminübersicht zunächst verstecken */

.course-events {
    display: none;
}


/* Terminübersicht – innere Tabelle */

.course-events table {
    width: 100%;
}


/* Abstand der Terminübersicht */

.course-events > td {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}


/* Überschrift der geöffneten Terminübersicht */

.course-events > td:before {
    content: 'Terminübersicht:';
    font-weight: bold;
    display: block;
    margin-bottom: .5em;
}


/* Einzelne Termine */

.course-events > td td {
    padding: 2px 0;
}


/* Terminnummer ausblenden */

.course-events .event-number {
    display: none;
}


/* =========================================================
   NICHT BENÖTIGTE INFORMATIONEN AUSBLENDEN
   ========================================================= */


/* Button-Text anzeigen */

.btn-text {
    display: inline !important;
}


/* Kurstyp ausblenden */

.course-type {
    display: none !important;
}


/* Lehrer ausblenden */

td.col-teacher,
th.col-teacher {
    display: none !important;
}


/* Kurskennung ausblenden */

.course-key {
    display: none !important;
}


/* Raum ausblenden */

.room-name {
    display: none !important;
}


/* Verfügbarkeit ausblenden */

.col-showAvailability {
    display: none !important;
}


/* Anmerkungen ausblenden */

.col-remarks,
.courses-container .table .col-remarks,
td.col-remarks,
th.col-remarks {
    display: none !important;
}


/* =========================================================
   SPALTENBREITEN
   ========================================================= */


/* Preis */

.col-price {
    width: 120px;
}


/* Termine / Einstieg */

td.col-events {
    width: 60px !important;
    max-width: 60px !important;
}


/* Überschrift Termine */

th.col-events {
    width: 60px !important;
    max-width: 60px !important;
}


/* =========================================================
   ZEBRA-EFFEKT
   ========================================================= */

tr.odd td {
    background-color: #F7F7F7 !important;
}


tr.even td {
    background-color: #FFFFFF !important;
}


/* =========================================================
   KURSE – ABSTÄNDE UND AUSRICHTUNG
   ========================================================= */

#courses-table tr.course-item td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #EEEEEE !important;

    /* Text vertikal mittig */
    vertical-align: middle !important;

    /* sanfter Hover */
    transition: background-color 0.15s ease;
}


/* =========================================================
   STANDORTABHÄNGIGER HOVER-EFFEKT
   ========================================================= */


/* Bad Vöslau – Orange */

#courses-table tr.course-item.location-1:hover td {
    background-color: #FFF4E8 !important;
}


/* Biedermannsdorf – Violett */

#courses-table tr.course-item.location-2:hover td {
    background-color: #F9EAF6 !important;
}


/* Dobner on Tour – Blau */

#courses-table tr.course-item.location-4:hover td {
    background-color: #EAF4FA !important;
}


/* =========================================================
   STANDORT-RÄNDER
   ========================================================= */


/* Bad Vöslau */

.course-item.location-1 {
    border-left: 6px solid #F08000;
    border-right: 6px solid #F08000;
}


/* Biedermannsdorf */

.course-item.location-2 {
    border-left: 6px solid #9c097d;
    border-right: 6px solid #9c097d;
}


/* Dobner on Tour */

.course-item.location-4 {
    border-left: 6px solid #045184;
    border-right: 6px solid #045184;
}


/* =========================================================
   MOBILE
   max. 600px
   ========================================================= */

@media screen and (max-width: 600px) {


    /* -----------------------------------------
       STANDORTE
       ----------------------------------------- */

    .location-filter-name {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }


    .location-filter {
        font-size: 14px !important;
        line-height: 1.4;
    }


    .location-filter a {
        font-size: 16px !important;
        margin-right: 12px;
        margin-bottom: 5px;
    }


    /* -----------------------------------------
       TABELLEN-DARSTELLUNG
       ----------------------------------------- */

    table td[class*="col-"],
    table th[class*="col-"] {
        display: block;
    }


    #courses-table {
        font-size: .9em;
        border: 1px solid #DDDDDD;
    }


    #courses-table table,
    #courses-table tr,
    #courses-table tbody,
    #courses-table td,
    #courses-table th {
        display: block;
    }


    /* -----------------------------------------
       KURSE
       ----------------------------------------- */

    #courses-table tr.course-item td {
        display: block !important;
        vertical-align: middle !important;
    }


    /* Lehrer ausblenden */

    #courses-table tr.course-item td.col-teacher,
    #courses-table tr.course-item th.col-teacher {
        display: none !important;
    }


    /* Tabellenkopf ausblenden */

    #courses-table thead {
        display: none !important;
    }


    /* -----------------------------------------
       MOBILE KURSZELLEN
       ----------------------------------------- */

    #courses-table > tbody > tr > td {
        padding-left: 100px !important;
        position: relative;
        width: auto !important;
        border: 0;
    }


    /* -----------------------------------------
       TRENNLINIE ZWISCHEN KURSEN
       ----------------------------------------- */

    #courses-table tr.course-item {
        border-top: 1px solid #E6E7E8;
    }


    /* -----------------------------------------
       TERMINÜBERSICHT VERSTECKEN
       ----------------------------------------- */

    #courses-table tr.course-events {
        display: none;
    }


    #courses-table tr.course-events td {
        padding-left: 1em !important;
    }


    /* =================================================
       MOBILE BESCHRIFTUNGEN
       ================================================= */


    /*
       WICHTIG:
       Keine pauschale "Termine:"-Beschriftung mehr.
       Dadurch entstehen keine leeren Termine-Zeilen.
    */

    #courses-table .course-item td:before {
        content: "";
        display: none;
    }


    /* Gemeinsame Formatierung */

    #courses-table .course-item td:first-child:before,
    #courses-table .course-item td.events-info:before,
    #courses-table .course-item td.col-events:before,
    #courses-table .course-item td.col-price:before,
    #courses-table .course-item td.col-location:before {

        font-weight: bold;
        padding-right: 1em;
        display: inline-block;
        width: 90px;
        margin-left: -90px;
    }


    /* -----------------------------------------
       KURS
       ----------------------------------------- */

    #courses-table .course-item td:first-child:before {
        content: "Kurs: ";
    }


    /* -----------------------------------------
       TERMINE
       ----------------------------------------- */

    #courses-table .course-item td.events-info:before {
        content: "Termine: ";
    }


    /* -----------------------------------------
       EINSTIEG
       ----------------------------------------- */

    #courses-table .course-item td.col-events:before {
        content: "Einstieg: ";
    }


    /* -----------------------------------------
       PREIS
       ----------------------------------------- */

    #courses-table .course-item td.col-price:before {
        content: "Preis: ";
    }


    /* -----------------------------------------
       STANDORT
       ----------------------------------------- */

    #courses-table .course-item td.col-location:before {
        content: "Standort: ";
    }


    /* =================================================
       ANMELDEBUTTON
       ================================================= */

    #courses-table .course-item td:last-child .btn {
        display: block;
        margin-left: 10px;
        text-align: center;
    }


    /* Button-Text mobil */

    #courses-table .btn-text {
        display: inline !important;
        font-size: 14px;
    }


    /* Letzte Spalte */

    #courses-table .course-item td:last-child {
        padding-left: 0 !important;
    }


    #courses-table .course-item td:last-child:before {
        content: "";
        display: none;
    }


    /* =================================================
       TERMINE / EINSTIEG MOBIL
       ================================================= */

    td.col-events,
    th.col-events {
        width: 75px !important;
        max-width: 75px !important;
    }


    /* =================================================
       ZEBRA-EFFEKT MOBIL
       ================================================= */

    tr.odd td {
        background-color: #F7F7F7 !important;
    }


    tr.even td {
        background-color: #FFFFFF !important;
    }


    /* =================================================
       HOVER AUF TOUCH-GERÄTEN
       ================================================= */

    #courses-table tr.course-item:hover td {
        background-color: inherit !important;
    }

}

/* =================================================
   LEERE KURSZEILEN AUF MOBIL AUSBLENDEN
   ================================================= */

#courses-table tr.course-item td:empty {
    display: none !important;
	
}


@media screen and (max-width: 600px) {

    #courses-table tr.course-item td.col-showAvailability,
    #courses-table tr.course-item td.col-remarks,
    #courses-table tr.course-item td.col-teacher,
    #courses-table tr.course-item td.course-key {
        display: none !important;
    }

    /* tatsächlich leere Zellen entfernen */
    #courses-table tr.course-item td:empty {
        display: none !important;
    }

}


/* =========================================================
   SEHR KLEINE HANDYS
   max. 400px
   ================================================= */

@media screen and (max-width: 400px) {


    /* Standortüberschrift */

    .location-filter-name {
        font-size: 20px !important;
    }


    /* Standorte */

    .location-filter,
    .location-filter a {
        font-size: 15px !important;
    }


    /* Tabelle */

    #courses-table {
        font-size: 13px;
    }


    /* Mobile Kurszellen */

    #courses-table > tbody > tr > td {
        padding-left: 90px !important;
    }


    /* Beschriftungen */

    #courses-table .course-item td:first-child:before,
    #courses-table .course-item td.events-info:before,
    #courses-table .course-item td.col-events:before,
    #courses-table .course-item td.col-price:before,
    #courses-table .course-item td.col-location:before {

        width: 80px;
        margin-left: -80px;
        padding-right: .5em;
    }


    /* Button */

    #courses-table .course-item td:last-child .btn {
        margin-left: 5px;
    }

}