/*****************************************************************************

    ResponsiveRadioMatrix.css

    Die RadioMatrix stellt verschiedene Fragen mit dem jeweils
    selben Antwortwertebereich in einer Tabellenform zur Ansicht.
    
    Wenn der Bildschirm zu schmal ist, wird die Tabellenform aufgelöst und
    die einzelnen Zeilen zu untereinanderliegenden Frageblöcken aufgelöst.

    Das Umschalten der Darstellungsarten wird über CSS gesteuert. 

    Aufbau im CSS:

    <div class="radiomatrix">

        <!-- Kopfzeile -->
        <div class="zeile1">

            <div></div> 
            <div>Wert1</div>
            <div>...</div>
            <div>WertN</div>

        <div>

        <!-- Fragen/Antwortenbereich -->

        <!-- 1. Fragezeile -->
        <div>
            <!-- Frage -->
            <div>Frage</div>

            <!-- Radiobuttonzeilen -->
            <!-- 1. Wertzeile -->
            <div>
                <div>
                    <div class="radcombi">
                        <div><asp:RadioButton...</div>
                        <div class="wertlabel">Wert1</div>
                    </div>
                </div>
            </div>

            <!-- 2. Wertzeile -->
            <div>
                <div>
                    <div class="radcombi">
                        <div><asp:RadioButton...</div>
                        <div class="wertlabel">Wert2</div>
                    </div>
                </div>
            </div>



        </div>


        <!-- 2. Fragezeile -->
        <div>
            <!-- Frage -->
            <div>Frage</div>

            <!-- Radiobuttonzeilen -->
            <!-- 1. Wertzeile -->
            <div>
                <div>
                    <div class="radcombi">
                        <div><asp:RadioButton...</div>

        ...

    </div>
    
    Dabei sind radX und WertX der Fragezeilen jeweils in einen Span eingepackt.

******************************************************************************/




/************************************************************************************ 
    Einstellungen für schmalen Bildschirm 
    0..600px 
**************************************************************************************/
@media (max-width:360px) {


    /* 
        Die erste Zeile (Kopfzeile) der Radiomatrix enthält die Werte. 
        Sie wird ausgeblendet in der Darstellung mit dem schmalen
        Bildschirm, da hier die Werte direkt hinter den Radiobuttons
        angezeigt werden sollen
    */
    div.radiomatrix div.zeile1 {
        display: none; /* Ausblenden der 1. Zeile */
    }


    /* Die Kombination Radiobutton-Label in einer Zeile anzeigen */
    div.radiomatrix div.radcombi {
        display: table-row;
    }


        /* Hover-Effekt setzen für Radiozeilen*/
        div.radiomatrix div.radcombi:hover {
            background-color: antiquewhite; /* milde Hintergrundfarbe wählen */
        }
        /* Radiobutton und Label jeweils als Zelle darstellen */
        div.radiomatrix div.radcombi div {
            display: table-cell;
            border-bottom: 1px dotted #007eb9;
        }

    /* Zwischen den Fragen soll es immer einen Abstand geben und die Darstellung 
        soll hervorgehoben sein.
    */
    div.radiomatrix div.frage {
        margin-top: 30px;
        margin-bottom: 10px;
        color: #007eb9; /* Schriftfarbe blau */
        font-size: 100%; /* Schrift vergrößern              */
        font-weight: bold; /* und hervorheben                 */
        text-align: left;
    }

    /* Nur für die Erste Frage soll kein besonderer Abstand kommen */
    div.radiomatrix div.f1 {
        margin-top: 0px;
    }


    /* Wertelabel gesondert formatieren */
    div.radiomatrix div.wertlabel {
        padding-left: 10px;
        min-width: 200px;
    }

    span.lbl.info_links {
        font-size: 75%;
        color: gray;
    }

    span.lbl.info_rechts {
        font-size: 75%;
        color: gray;
    }
}

/***************************************************************************************************** 
    Einstellungen für großen Bildschirm 
    Größe ab 601px
*******************************************************************************************************/
@media (min-width:361px) {

    /* Umschliessendes DIV als Tabelle deklarieren */
    div.radiomatrix {
        display: table;
        border-collapse: collapse;
    }

        /* Direkt enthaltende DIVs als Tabellenzeilen deklarieren*/
        div.radiomatrix > div {
            display: table-row;
        }

    /* Zeile, über die man sich bewegt hervorheben */
    table.radiomatrix > div:hover {
        background-color: antiquewhite;
    }

    /* Für erste Zeile kein toggleeffekt setzen */
    div.radiomatrix > div.zeile1:hover {
        background-color: none;
    }

    /* DIVs in den Tabellenzeilen als Tabellenzellen definieren */
    div.radiomatrix > div > div {
        display: table-cell;
        border: 1px dotted black;
        padding: 5px;
        text-align: center;
        vertical-align: middle;
    }

        div.radiomatrix > div > div:nth-child(n+2) {
            width: 30px;
        }

    /* Sonderbreiten */
    #matArbeitsumfeld > div > div:nth-child(n+2) {
        width: 90px !important;
        max-width: 90px !important;
        word-wrap: break-word !important;
    }

    #matArbeitsumfeld > div > div:last-child {
        width: 40px !important;
    }

    #matArbeitsumfeld > div > div.ka.leer,
    #matArbeitsumfeld > div > div.info_rechts,
    #matArbeitsumfeld > div > div.info_rechts_leer {
        max-width: 10px !important;
        width: 10px !important;
        padding:0;
        margin:0;
    }


    /* Wertelabel hinter den Radiobuttons ausblenden */
    div .radiomatrix div.wertlabel {
        display: none;
    }

    /* Werte in Kopfzeile werden hervorgehoben  */
    div.radiomatrix div.zeile1 {
        font-weight: normal; /* Fettschrift einstellen */
        color: rgb(0,126,185);
    }


    /* Fragen (1. Spalte) hervorheben */
    div.radiomatrix div.frage {
        font-weight: normal; /* Fettschrift */
        color: #007eb9;
        text-align: left;
        /*width: 150px;*/
    }

        div.radiomatrix div.frage.invalid::after {
            content: " *";
            color: red;
        }

    .spnlinks {
        display: inline-block;
        float: left;
    }

    .spnrechts {
        display: inline-block;
        float: right;
    }

    .radiotable tr.tr1 td {
        width: 50px;
    }

    .ka {
        /*font-size: 75%;*/
    }

    div.info_links {
        font-size: 75%;
        color: gray;
        text-align: right !important;
        border: 0;
    }

    div.info_rechts {
        font-size: 75%;
        color: gray;
        text-align: left !important;
        border: 0 !important;
        padding-right: 20px !important;
        width: auto !important;
    }

    div.info_rechts_leer {
        font-size: 75%;
        color: gray;
        border: 0 !important;
        padding: 0px !important;
        width: 10px !important;
    }

    div.ka.leer {
        border: 0;
    }

    span.lbl.info_links {
        display: none;
    }

    span.lbl.info_rechts {
        display: none;
    }
}

div.radcombi input[type=radio] {
    width: 20px;
    height: 20px;
}