body {
    margin: 0;
    font-family: Arial, Verdana, sans-serif;
    font-size: 1.00em;
    line-height: 1.4;
    color: #333333;
    background-color: #ededed; /* hellgrau*/
    min-height: 100%;
    min-width: 500px;
    overflow-x: hidden;
}

div.Kopfzeile {
    padding-top: 50px;
    background-color: #FFFFFF;
    width: 86%;
    height: 56px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
    margin-bottom: 20px;
    padding-left: 2%;
    padding-right: 2%;
}


div.Logo {
    float: right;
}

img.LogoSpoho {
    margin-bottom: 20px;
}

div.Standort {
    font-weight: 600;
    font-size: 16px;
    color: #7d8890; /*grau*/
    margin-top: 10px;
    width: 50%;
    float: left;
}


div.Content {
    background-color: #FFFFFF;
    width: 86%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 20px;
}


div.Content2 { /*oben mit Abstand*/
    background-color: #FFFFFF;
    width: 86%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.blau { /*für span*/
    color: #007eb9;
    font-weight: 600;
}


.buttonFragebogen {
    margin-left: 10px;
    padding: 4px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.6em;
    font-weight: 400;
    background-color: yellowgreen;
    border: 1px solid #7d8890;
}

.buttonAnmeldung {
    margin-top: 20px;
    margin-left: 0px;
    padding: 4px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.6em;
    font-weight: 400;
    background-color: yellowgreen;
    border: 1px solid #7d8890;
}


.buttonWeiter { /*Weiter*/
    padding: 4px;
    font-size: 1.6em;
    font-weight: 400;
    background-color: yellowgreen;
    border: 1px solid #7d8890;
    float: right;
}

.buttonZurueck { /*Zurück*/
    padding: 4px;
    font-size: 1.6em;
    font-weight: 400;
    background-color: yellowgreen;
    border: 1px solid #7d8890;
    float: left;
}

.buttonVersand { /*Versandbutton*/
    padding: 4px;
    font-size: 1.6em;
    font-weight: 400;
    background-color: yellowgreen;
    border: 1px solid #7d8890;
    float: left;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 10px;
}

.Weiterbutton { /*Container Weiterbutton*/
    width: 100%;
    height: 50px;
    margin-top: 30px;
}

.Fortschritt {
    border: 1px solid #007eb9;
    padding: 4px;
    font-size: 1em;
    float: left;
    margin-right: 2px;
}

.Auswahl {
    clear: both;
    float: left;
}





h1 {
    font-size: 2.5em;
    color: #007eb9; /*blau*/
    margin: 0;
}

h2 {
    font-size: 1.5em;
}

    h2.bereich { /* 5 Oberpunkte*/
        font-size: 1.1em;
        margin-top: 20px;
        width: 100%;
        background-color: #007eb9;
        color: #FFFFFF;
        padding: 4px;
    }

h3 {
    font-size: 1.17em;
}

p.frage {
    font-weight: 600;
    border-bottom: 1px solid #007eb9;
    margin-top: 24px;
}

p.hilfe {
    font-size: 0.9em;
}

.klammer { /*span*/
    color: #007eb9;
    font-size: 0.8em;
}


table.tblMatrix td {
    text-align: center;
    border: 1px solid black;
    word-wrap: break-word;
    width: 5em;
}

    table.tblMatrix td:first-child {
        width: auto;
        text-align: left;
    }


/******************************************************************************************
    Darstellung der asp:RadioButtonList anpassen

    Hinweis: Bei den RadioButtonList-Controls muss die Css-Klasse "radiobuttonlist"
    gesetzt werden.

    Bsp.: <asp:RadioButtonList runat="server" id="Bew1"  CssClass="radiobuttonlist"....

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


/* 
    Die einzelnen Radiobuttons werden von ASP.NET in td-Tags eingepackt, etwa wie folgt:

    <td><input type="radio"><label>Hier kommt die Beschriftung</label></td>

    Umdefinieren des td als neue Zeile
*/
table.radiobuttonlist td {
    display: table-row;
}

/*
    Umdefinieren des INPUT-Elements als neue TD-Zelle
*/
table.radiobuttonlist input {
    display: table-cell; /* ist jetzt td */
    vertical-align: middle;
    position: relative;
}


/*
    Umdefinieren des Label-Elements als neue TD-Zelle
*/
table.radiobuttonlist label {
    padding-bottom: 3px;
    display: table-cell; /* ist jetzt td-Element                         */
    padding-top: 3px;
    padding-left: 5px; /* Ein bisschen Platz zum Radio-Button lassen   */
    cursor: pointer;
    vertical-align: middle;
}


@media (max-width: 360px) {

    table.radiobuttonlist input {
    }

    table.radiobuttonlist input {
    }
}

input[type=radio] {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/**************************************************************
    Definition für Plausibilitätskontrollen
***************************************************************/
.validator {
    /*font-size: 9pt; */
    color: red;
}

.summary {
}

/*.radiobuttonlist label {
    position:relative;
    top: 0px;
}*/

.eingabe {
    width: 2.2em;
    font-size: 0.9em;
}



/*****************************************************************
    Definition für Login-Maske
********************************************************************/
#MainContent_Kenntnis {
    position: relative;
    top: 1px;
    /*width: 20px;
    height: 20px;*/
}

.logindiv {
    background-color: #ededed; /* hellgrau*/
    padding: 1em;
}

.ctl {
    width: 160px;
    padding-right: 0px;
    padding-left: 0px;
}

.tblanmeldung {
    width: 600px;
    /*font-size: 120% !important;*/
}

.ctl {
    /*font-size: 120%;*/
}

.hinweis {
    font-size: 1em !important;
}