/*
    Die Datei enthält die Stylesheets, die für das ResponsiveRadioButtons-Control benötigt wird.
    
    Mittels @media-Definition werden die Styles für Tablets (0 - 600px Breite) und PCs (mehr als 600px Breite) festgelegt.


   Layout für Radiobuttonstabelle:

               *-------------------------------------*-----* ------------------------------------|
 Zeile tr1:    |  Wert1                              | ... | WertN                               |
               *-------------------------------------*-----* ------------------------------------|
 Zeile tr2:    | <span>rad1</span><span>Wert1</span> | ... | <span>radN</span><span>WertN</span> |
               *-------------------------------------*-----* ------------------------------------|
*/
.radiotable 
{
    border-collapse: collapse;
}

    .radiotable td {
        text-align: center;
        border: 1px dotted black;
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 2px;
        padding-bottom: 2px;

        padding: 1px;
    }


    /* Label hinter dem Radio-Button (schmale Konfiguration) */
    .radiotable tr.tr2 td span:nth-child(n+2) {
        display: none;
    }

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

    Definitionen für Tablets (schmale Darstellung)

    0px - 600px Breite

***********************************************************/
@media (max-width: 360px) {

    .spnlinks { display: none;}
    .spnrechts {display: none;}

    /* 1. Zeile: Kopfzeile ausblenden */
    .radiotable tr.tr1 {
        display: none;
    }

    .radiotable tr.tr1b {
        display: none;
    }

    /* 2. Zeile: Wertezeile definieren */
    .radiotable tr.tr2 td {
        display: table-row;
        text-align: left;
    }

        /* Anzeigebereiche als Tabellenspalten definieren */
        .radiotable tr.tr2 td span {
            display: table-cell;
            padding-top: 0px;
            vertical-align:middle;
        }

            /* 1. SPAN: Bereich für Radio-Button */
            .radiotable tr.tr2 td span:first-child {
                padding-top: 3px;
                padding-right: 5px;

                vertical-align:middle;
            }

            /* 2. SPAN: Label für Radiobutton */
            .radiotable tr.tr2 td span:nth-child(2) {
                display: table-cell;
                font-weight: normal;

                vertical-align:middle;
                padding-right: 10px;
            }

            td.ka {
                margin-top:20px;
            }
}


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

    Definitionen für Bildschirme (große Darstellung)

    601px und größer Breite

***********************************************************/
@media (min-width: 361px) {
    /* 1. Zeile:  hervorheben */
    .radiotable tr.tr1 {
        /*font-weight: bold;*/
        color: #007eb9;
    }
    .spnlinks {
        display: inline-block;
        float:left;
    }

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

    .radiotable tr.tr1 td {
        max-width: 30px;
        word-wrap:break-word;
        height:30px;
    }

    #AllgGes_SQ001.radiotable tr.tr1 td{
        max-width: 72px;
        width: 72px;
    }

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

    td.ka.lbl {
        
    }

    td.infolinks {
        font-size: 75%;
        color:gray;
        border-top:0;
        border-left:0;
        border-bottom:0;
        text-align:right;
        min-width:60px;
        max-width:none !important;
        padding-right: 3px;

    }

    td.inforechts {
        font-size: 75%;
        color: gray;
        border-top: 0;
        border-right: 0;
        border-bottom:0;
        text-align:left;
        padding-right:20px;
        min-width:60px;
        max-width:none !important;
        padding-left: 3px;
    }

   td.leerlinks,td.leerrechts {
       border:0;
   }

}

table.radiotable input[type=radio] {
    /*width:25px;
    height: 25px;*/
}