@charset "windows-1252";

@import url('testzugang.css');
@import url('bunte_ecke.css');
@import url('matrix.css');

/* generell: kein float, sonst können diese Elemente aus dem umschließenden Block fallen */

/* TODO DWI-2009-07-23: Sortierung, Reihenfolge und Kommentare noch richtig?*/

/* TODO DWI-2010-07-14: Validate / Check CSS-Code e.g. http://www.htmlhelp.com/cgi-bin/csscheck.cgi */

@media screen, print {
    .checkboxSelectLayer {
        position:absolute;
        top:18px;
        left:10px;
        overflow:visible
    }

    .whiteBackground {
        background-color: #FFFFFF !important;
    }

    div.languageIcons {
        position:absolute;
        top:0px;
        right:1em;
    }

    /* Editable select */
    input.editable {
        font-size: 10px;
        font-weight:normal;
        width: 170px;
        height: 16px;
        margin: 0px;
        padding: 0px;
        margin-left: 10px;
        font-family: Verdana,Geneva,Arial,Sans-Serif;
        /*border-color:#CCCCCC rgb(102, 102, 102) rgb(102, 102, 102) rgb(204, 204, 204);*/
        border-color:#666666 rgb(204, 204, 204) rgb(204, 204, 204) rgb(102, 102, 102);
        border-style: solid;
        border-width: 1px;
        color: #333333;
        background-color:white;
    }

    /* 1.1 allgemeine Einstellungen, bei Bedarf überschreiben */
    a, body, div, form, img, input.text, label, p, pre, select, table, tbody, td, th, thead, textarea, tr, ul {
        background-color: white;
        border: none;
        color: #666666;
        font-family: Verdana, Geneva, Arial, Sans-Serif;
        font-size: 10px;
        font-weight: normal;
    }

    #backgroundImage * {
        background-color: transparent !important;
    }

    a, body, div, form, img, input.text, label, p, pre, select, table, tbody, td, th, thead, textarea, tr {
        margin: 0px;
        padding: 0px;
    }

    ins {
        text-decoration: none;
        /*color: red;*/
    }

    /*del {
        text-decoration: none;
        font-style: italic;
    }*/

    /* 1.2 allgemeine Einstellungen für Verweise */
    a {
        font-weight: bold;
        text-decoration: none;
    }

    /* 1.3 allgemeine Einstellungen für Verweise unter dem Mauszeiger */
    a:hover {
        text-decoration: underline;
    }

    /* 1.4 allgemeine Einstellungen für den Dokumentenrahmen (NICHT für Popup-Fenster) */
    body.hauptfenster {
        /* NEU 10.11.2004 */
        min-width: 962px;
        padding: 10px 9px 40px 9px; /* oben rechts unten links */
        margin: 0px;
    }

    body.popup {
        padding: 10px;
        margin: 0px;
    }

    /* Besser wäre Attribut-Selektor input[type="text"], funktioniert aber im IE nicht. */
    /* 1.5 Eingabefelder und Auswahllisten */
    input.text, select, input.file {
        height: 16px;
    }

    select.multiple {
        height: auto;
    }

    input.file {
        font-size: 10px;
    }

    /* 1.6 Eingabefelder und Texteingabefelder */
    input.text, textarea {
        border-bottom: 1px solid #cccccc;
        border-left: 1px solid #666666;
        border-right: 1px solid #cccccc;
        border-top: 1px solid #666666;
    }

    /* 1.7 Eingabefelder, Auswahllisten und Texteingabefelder */
    input.text, select, textarea, input.file {
        color: #333333;
        /*float: right; /* rechtsbündig */
    }

    input.rechts, textarea.rechts, select.rechts {
        float: right;
    }

    .disabled {
        background-color: rgb(250,250,250) !important;
        color: rgb(160,160,160) !important;
       /* border: 1px solid #e9e9e9 !important; */
    }

    /* 1.8 allgemeine Einstellungen für Absätze */
    p {
        clear: both;
        line-height: 12px;
        margin-bottom: 1em;
    }

    /* 1.9 allgemeine Einstellungen für Auswahllisten */
    select {
        border-bottom: 1px solid #666666;
        border-left: 1px solid #cccccc;
        border-right: 1px solid #666666;
        border-top: 1px solid #cccccc;
    }

    /* 1.10 allgemeine Einstellungen für Tabellen */
    table {
        border-collapse: collapse;
    }

    /* 1.11 allgemeine Einstellungen für Überschriften im Tabellenkopf */
    table thead th {
        border-bottom: 1px solid #cccccc;
    }

    table tfoot td {
        border-top: 1px solid #cccccc;
    }

    /* 1.12 Zellen in Tabellen */
    td,
    th,
    table.formulartabelle tbody td,
    table.formulartabelle thead td /*,
    table.layout td table td */ /* möglichst spezifisch! */
    {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 2px;
        text-align: left;
    }

    td.nopadding
    {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Eine Tabelle welche zwei Bereiche durch einen vertikalen Balken trennt */
    table.vertikalgetrennt td {
        vertical-align: top;
        padding-right: 20px;

    }

    /* Definiert den Trennbalken in der vertikal getrennten Tablle*/
    .vertikalertrennbalken {
        padding-left: 20px;
        border-left: 1px solid #cccccc;
    }

    caption, .caption {
        font-weight: bold;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 1em;
    }

    /* 1.13 allgemeine Einstellungen für Datenzellen */
    td {
        padding-bottom: 2px;
    }

    /* 1.14 allgemeine Einstellungen für Texteingabefelder */
    textarea {
        display: block;
        overflow: auto;
        /* BPR - 2005-07-12 raus wegen Kalkulator im Firefox
        width: 99%; /* NEU Händlerseiten 15.11.04 */
    }

    /* 1.15 allgemeine Einstellungen für Überschriften */
    th {
        font-weight: bold;
        padding-bottom: 4px;
    }

    /* Einstellungen für das Fenster was eingeblendet wird, wenn ein zu
     *  erwartender langer submit ausgeführt wird.
     */
    #submitWindow {
        display: none;
        position: absolute;
        height:60px;
        width:250px;
        /* margin:-30px 0px 0px -125px; */
        /* top: 50%; */
        /* left: 50%; */

        top: 100px;
        left: 200px;
        text-align: center;
        padding: 10px;
        background-color: #f4f4f4;
        border: 1px solid #000000;
        overflow: hidden;
        z-index: 1;
    }

    #submitWindow p {
        background-color: #f4f4f4;
        font-weight: bold;
        padding-bottom: 1px;
    }

    #submitWindow table {
        position: absolute;
        top: 45px;
        left: 100px;
        border: 1px solid #000000;
    }

    #submitWindow table td {
        padding: 0px;
        background-color: #f4f4f4;
    }

    #calendarDiv {
        position: absolute;
        visibility: hidden;
        padding: 5px;
    }


    /******************************************************************************/
    /***************************** Allgemeine Klassen *****************************/
    /******************************************************************************/

    /* 2.1 Abstand zum vorhergehenden Eingabefeld
     * Besser wäre Nachbar-Selekter input + input, input + select, select + input
    * und select + select, funktioniert aber im IE nicht.
     */
    input.text, select, input.file, span.input {
        margin-left: 10px;
    }


    /* 2.2 Klasse für eine Zeile Abstand nach oben */
    p.abstandOben, ul.abstandOben, div.abstandOben, table.abstandOben {
        margin-top: 1.5em;
    }

    /* 2.3 Klasse für Tastaturkürzel in Verweisen und Beschriftungen */
    a span.accesskey, label span.accesskey {
        text-decoration: underline;
    }

    /* 2.4 Klasse für Fahrzeugbilder */
    img.autoMittel {
        /*float: right;*/
        /* Schwacke
        height: 152px;
        width: 220px; */

        /* JATO-Werte */
        height: 125px;
        width: 200px;
    }

    img.auto {
        /*float: right;*/
        /* Schwacke
        height: 152px;
        width: 220px; */

        /* JATO-Werte */
        height: 187px;
        width: 300px;
    }

    img.autoKlein {
        float: right;

        /*
        height: 76px;
        width: 110px;  */

        /* TODO: folgende JATO-Werte benutzen  */
        height: 62px;
        width: 100px;
    }

    img.autoGross {

        /* JATO-Werte  */
        height: 250px;
        width: 400px;
    }

    /* für Übersicht Referenzfahrzeuge */
    img.autoKleinLinks {
        float: left;

        /*
        height: 76px;
        width: 110px;  */

        /* TODO: folgende JATO-Werte benutzen  */
        height: 62px;
        width: 100px;
    }

    input.sehrBreit {
        width: 410px;
    }

    /* 2.5 für breite Eingabefelder */
    input.breit {
        width: 248px;
    }

    /* 2.6 für breite Auswahllisten */
    select.breit {
        width: 250px;
    }

    select.breitPadded {
        width: 270px;
    }

    select.sehrBreit {
        width: 350px;
    }

    /* 2.7 für breite Texteingabefelder */
    textarea.breit {
        width: 498px;
        margin-top: 5px;
        vertical-align: top;
        height: 12em;
    }

    /* 2.8 für Häckchen
     * Besser wäre Attribut-Selektor input[type="checkbox"], funktioniert aber im
     * IE nicht.
     */
    input.checkbox {
        vertical-align: middle;
    }

    /* notwendig, damit die Tabellen rahmen und kasten auch nebeneinander im
       Firefox angezeigt werden */
    label {
        white-space: normal;
    }

    /* 2.9 für Beschriftungen von Häckchen
     * Besser wäre Selektor für benachbarte Elemente input + label, funktioniert
     * aber im IE nicht.
     */
    label.checkbox {
        margin-left: 5px;
        margin-right: 0px;
    }

    /* 2.10 für Fehlermeldungen und ganz besonders wichtige Hinweise */
    label.fehler, p.fehler, table.fehler, caption.fehler {
        /* color: #b00000; */
        color: #fa7701;
        line-height: 15px;
        background: url('../bilder/error.gif') 5px center no-repeat;
        /* background-color: #ffe0e0; */
        background-color: #fef1e5;
	    /* border-bottom: 1px solid Green; */
	    padding: 2px 5px 2px 29px;
        /* font-weight: bold; */
        border: 1px solid #fdd2ab !important;
    }

    caption.fehler {
        margin-bottom: 9px;
    }

    span.fehler {
        color: #fa7701;
        padding: 2px 5px 2px 29px;
    }

    /* Für englische Ausstattungstexte */
    span.meaning_en {
        color: blue;
        padding-left: 10px;
    }

    table.fehler td.fehler {
        color: #fa7701;
        padding-left: 29px;
        background: url('../bilder/error.gif') 5px center no-repeat;
    }

    input.fehler, textarea.fehler, select.fehler {
        background-color: #fef1e5 !important;
    }

    /* 2.11 */
    /* damit das icon und _.gif auch im Popup Serienausstattung ohne #inhalt die Größe 14x14 hat */
    img.icon {
        margin-left: 5px;
        height: 14px;
        width: 14px;
        vertical-align: middle;
    }


    /* 2.12 */
    img.iconfix {
        margin-right: 10px;

        vertical-align: middle;
    }

    /* 2.13 für einfache Nachrichten */
    p.nachricht {
        /* color: Green; */
        color: #2b2771;
        line-height: 15px;
        background: url('../bilder/message.gif') 5px center no-repeat;
        /* background-color: #f0fff0; */
        background-color: #e9e9f1;
	    /* border-bottom: 1px solid Green; */
	    padding: 2px 5px 2px 29px;
        /* font-weight: bold; */
        border: 1px solid #b9b8d0;

    }


  /*  für Warnmeldungen */
    p.warnung {
        /* color: Yellow; */
        color: #c88c00;
        line-height: 15px;
        background: url('../bilder/warning.gif') 5px center no-repeat;
        /* background-color: #f0fff0; */
        background-color: #f7f7b5;
	    /* border-bottom: 1px solid Green; */
	    padding: 2px 5px 2px 29px;
        /* font-weight: bold; */
        border: 1px solid #e0c25a;

    }


    /* 2.14 für Pflichteingabefelder und -listen */
    input.mandatory, select.mandatory {
        background-color: #ffffff;
    }

    /* 2.15 für Auswahllisten mit mehreren Zeilen */
    select.mehrereZeilen {
        height: auto; /* damit size-Angabe berücksichtigt wird */
    }

    /* 2.16 für mittelbreite Eingabefelder und Auswahllisten
     * (siehe auch 2.5 und 2.17)
     */
    input.mittel {
        width: 118px;
    }

    input.kalkulatorblp {
        width: 106px;
    }

    input.date {
        width: 98px;
    }

    select.mittel {
        width: 120px;
    }

    select.voll {
        width: auto;
    }

    /* 2.17 für schmale Eingabefelder (siehe auch unter 2.5 und 2.16) */
    input.schmal {
        width: 53px;
    }

    input.winzig {
        width: 30px;
    }

    td.winzig, th.winzig {
        width: 30px;
    }

    td.mittel, th.mittel {
        width: 100px;
    }

    td.breit, th.breit {
        width: 500px;
    }

    p.ueberschrift {
        /* margin-top: 1.5em; */
        margin-bottom: 1.5em;
        font-weight: bold;
    }

    span.ueberschrift {
        font-weight: bold;
    }

    /* 2.18 Tabellenzellen in denen Zahlen stehen rechts ausrichten. */
    .zahl {
        padding-right: 1px !important; /* Nötig damit im IE der Cursor nicht verschwindet */
        text-align: right !important;
    }

    td.zahl {
        text-align: right;
    }

    .formulartabelle th.rechts {
        padding-right: 15px;
        padding-bottom: 1em;
        text-align: right !important;
    }

    td.zentriert, th.zentriert, th.center {
        text-align: center !important;
    }

    /* 2.19 Tabellenzellen in denen Zahlen stehen rechts ausrichten. */
    td.fett, th.fett, label.fett, span.fett {
        font-weight: bold; /* fett in Tabellenzeilen */
    }

    /* Action Icons werden rechts ausrichten. */
    td.action {
        text-align: right;
    }

    td.actions a, tr.actions td a {
        background: none !important;
        white-space: nowrap;
    }

    td.maxUeberschritten {
        color: Red;
    }

    /* allgemeine Einstellungen für die Seitenbereiche */
    #kopf, #pfad, #inhalt, #fuss {
        /* min-width: 962px; von body minus padding von 9px links und rechts */
        min-width: 944px;
    }

    /******************************************************************************/
    /******************************** Kopf  Anfang ********************************/
    /******************************************************************************/

    /* 3.1 Der Kopf ist der erste div-Block auf einer Seite. Es folgt der Pfad
     * (siehe 4.1 #pfad) */
    #kopf {
        border: solid 1px #cccccc;
        /* border-bottom: none;  Nötig sonst bei übergroßem Kundenlogo an falscher position sichtbar */
        /* THA: auskommentiert, da Kundnelogo sonst überlappt. */
        height: 85px;  /* verhindert verschieben der Navigationsleiste
                       *  und eine weiße Linie zwischen Bild und Navigation.
                       */
    }

    /* 3.2 das linksstehende Streifenbild */
    #kopfBildStreifen {
        float: left; /* Streifen-Bild nach links */
        /* "Width" nicht angeben, da für Servicedesk und Händlerkontaktperson unterschiedlich breit. */
        height: 65px;
    }

    /* 3.2.1 Environment Info (HEIDI ACC, Peter ACC, etc. Siehe autopnet.properties */
    #kopfEnvironmentInfo {
        margin-top: 11px;
        font-size: 28px;
    }

    table.clientLogo {
        padding: 0px;
        margin: 0px;
    }

    table.clientLogo td {
        text-align: center;
    }

    /* 3.3 das rechtsstehende Athlon-Logo */
    #kopfBildAthlonLogo, .kopfBildAthlonLogo {
        float: right;
        margin-top: 15px;
        margin-right: 11px;
    }

    .kopfBildClientLogo {
        float: right;
        margin-top: 5px;
        margin-right: 5px;
        max-height: 60px;
        max-width: 400px;
    }

    .kopfBildClientLogoAusKundensuche {
        float: left;
        margin-top: 1px;
        margin-left: 1px;
        margin-bottom: 1px;
        max-height: 60px;
        max-width: 300px;
    }

    /*.kopfBildPoweredLogo {
    }*/

    /* 3.4 grau hinterlegte Navigationszeile */
    #kopfNavigation {
        clear: both; /* Navigation in eigener Zeile */
        height: 20px;
        line-height: 20px;
    }

    /* 3.5 */
    #kopfNavigation, #kopfNavigation a, #kopfNavigation img, #kopfNavigation p.info {
        background-color: #e9e9e9;
    }

    /* 3.6 die Verweise in der Navigationsleiste */
    #kopfNavigation a {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 3.7 Verweise in der Navigationsleiste die unter dem Mauszeiger liegen. */
    #kopfNavigation a:hover {
        background-color: #666666;
    }

    /* 3.8 */
    #kopfNavigation a:hover, #kopfNavigation a.aktiv {
        color: white;
    }

    /* 3.9 Ein Verweis ist aktiv, wenn man sich im diesem Navigationsbereich
     * befindet. */
    #kopfNavigation a.aktiv {
        background-color: #999999;
    }

    #kopfNavigation a.blockiert,
            #kopfNavigation a:visited.blockiert,
            #kopfNavigation a:active.blockiert,
            #kopfNavigation a:link.blockiert{
        background-color: #666666;
        color: #ffffff;
    }

    #kopfNavigation a.logOut {
        color: rgb(239, 166, 69);
    }

    #kopfNavigation a.logOut:hover {
        background-color: rgb(239, 166, 69);
        color: rgb(255, 255, 255);
        text-decoration: none;
    }

    /* 3.10 zusätzliche Infozeile in der Navigation */
    #kopfNavigation p.info {
        float: right;
        clear: none; /* für Firefox damit der Info-Absatz in einer Zeile mit den Links steht */
        line-height: 20px; /* line-height anpassen! siehe unter p */
        padding: 0px;
        margin-bottom: 0px;
    }

    /* 3.11 Verweise in der Infozeile */
    #kopfNavigation .info a, #kopfNavigation .info a:hover {
        padding: 0px;
        background-color: #e9e9e9;
        margin-left: 10px;
    }

    #kopfNavigation p.info span {
        float: left;
    }

    /* 3.12 Das rechtsstehende Hilfebild in der Navigationsleiste. */
    #kopfNavigation img.hilfe {
        height: 20px;
        vertical-align: top; /* top statt middle für Firefox... */
        width: 20px;
    }

    /*
       11.01.05 BPR
       Klasse "untermenue" neu für Untermenues in der Kopfnavigation
     */

    /* Subnavi */
    div.untermenue{
        position: absolute;
        top: 96px;
        background-color: #E9E9E9;
        border: none;

        display: none;
        left: 0px;
    }

    div.untermenue a {
        text-decoration: none;
        font-weight: bold;
        padding: 0px 10px;
        line-height: 19px;
        height: 20px;
        width: 150px;
        display: block;
        clear: both;
    }

    div.untermenue a:hover{
        background-color: #666666;
        color: #ffffff;
    }

    /******************************************************************************/
    /******************************** Pfad  Anfang ********************************/
    /******************************************************************************/

    /*
     * 4.1 Der Pfad ist der zweite div-Bereich nach dem Kopf (siehe 3.1). Er ergänzt
     * die Navigationsleiste um einen detaillierten Pfad. Es folgt der
     * Inhaltsbereich.
     */
    #pfad {
        margin-top: 5px;    /* Abstand zum Kopf */
        margin-bottom: 5px; /* Abstand zum Inhalt */
    }

    /* 4.2 die Verweise im Pfad */
    #pfad a {
        font-weight: normal;
    }

    /* 4.3 Verweise im Pfad, die unter dem Mauszeiger liegen. */
    #pfad a:hover {
        color: #333333;
    }

    /* 4.4 Ein aktiver Verweis ist gleich die aktuelle Seite. */
    #pfad a.aktiv {
        font-weight: bold;
    }

    /******************************************************************************/
    /******************************* Inhalt  Anfang *******************************/
    /******************************************************************************/

    /* 5.1 Der Inhalt ist der dritte div-Bereich nach dem Pfad (siehe 4.1). Es folgt
     * der Fußbereich (siehe 6.1). */
    #inhalt, #inhaltPopup {
        border: solid 1px #cccccc;
        padding-bottom: 1.5em;
        padding-top: 1.5em;
        padding-left: 10px;
        padding-right: 10px;
    }

    #inhaltPopup {
        height: 100%;
    }

    /* Mindesthöhe nur für Inhalt nicht für Popup-Fenster */
    #inhalt {
        min-height: 400px;
    }

    /******************************************************************************/
    /********************************* Fuß Anfang *********************************/
    /******************************************************************************/

    /* 6.1 Der Fuß ist der vierte und letzte div-Bereich nach dem Inhalt */
    #fuss {
        border-top: 1px solid #cccccc;
        color: #b2b2b2;
        height: 30px;
        margin-top: 10px;
    }

    #fuss, #fuss a {
        line-height: 19px;
    }

    /* 6.2 Bereich für die Verweise im Fuß*/
    #fussVerweise {
        float: left; /* links ausrichten */
    }

    /* 6.3 Bereich für den Urheberrechtshinweis im Fuß */
    #fussUrheberrecht {
        float: right; /* rechts ausrichten */
    }

    /* 6.4 Verweise im Fuß */
    #fuss a {
        color: #666666;
        clear: left;
        font-weight: normal;
        height: 20px;
        padding-left: 2px;
        padding-right: 2px;
    }

    /* 6.5 Verweise im Fuß unter dem Mauszeiger */
    #fuss a:hover {
        color: #333333;
    }

    /*************************************************************************
     * Layout-Tabelle
     * mit 100% Breite, ohne Innenrahmen und vertikaler Ausrichtung nach oben
     *************************************************************************/
    table.layout {
        width: 100%;
    }

    table.layout td.layout {
        padding: 0px;
        vertical-align: top;
    }

    /*************************************************************************
     * radio-Tabelle
     * Tabelle, wo die erste Spalte einen Radio-Button enthält.
     *************************************************************************/
    table.radio {
        padding-top: 10px;
    }

    table.radio td.radio {
        vertical-align: top;
        width: 30px;
    }

    /******************************************************************************/
    /*************************** Formular  Tabelle Anfang *************************/
    /******************************************************************************/

    /* 7.1 Datenzellen in der Formulartabelle
     *     (siehe auch unter 7.3 table.formulartabelle thead td) */
    table.formulartabelle tbody td {
        padding-top: 4px; /* etwas Abstand zwischen den Zeilen */
        vertical-align: middle;
        white-space: nowrap;
    }

    /* 7.2 */
    table.formulartabelle tbody td,
    table.formulartabelle thead th {
        padding-bottom: 4px;
    }

    /* 7.3 Überschriften in der Formulartabelle */
    table.formulartabelle tbody th {
        text-align: left;
    }

    /* 7.4 Datenzellen im Kopf der Formulartabelle */
    table.formulartabelle thead td {
        background-color: #ebebeb;
        padding-bottom: 2px;
    }

    /* 7.5 */
    table.formulartabelle thead td,
    table.formulartabelle thead th {
        padding-top: 2px;
    }

    /* 7.6 Überschriften im Kopf der Formulartabelle */
    table.formulartabelle thead th {
        border-bottom: 1px solid #cccccc;
    }

    /* 7.7 Abstand zur linken Spalte halten (auf Suchseiten) */
    table.formulartabelle td.abstand,
    table.formulartabelle th.abstand{
        padding-left: 40px;
    }

    /* 7.8 Abstand zur vorherigen Zeile */
    /*table.formulartabelle tbody td.abstandOben,
    table.formulartabelle tbody th.abstandOben,*/
    td.abstandOben,
    th.abstandOben {
        padding-top: 1.5em;
    }

    /* 7.9 Hinweise */
    table.formulartabelle tbody td.hinweis {
        white-space: normal;
    }

    /* 7.10 Zellen mit Ausrichtung nach unten */
    table.formulartabelle tbody td.unten {
        vertical-align: bottom;
    }

    /* 7.11 Zellen mit Ausrichtung nach oben */
    table.formulartabelle tbody td.oben {
        vertical-align: top;
    }

    /* Für den Fall das neben einer "formulartabelle" eine "infobox" auftaucht */
    table.umlaufLinks {
        float: left;
        clear: left;
    }

    /* THA: Tabellen mit flowLayout werden nebeneinander angeordent */
    table.flowLayout {
        float: left !important;
        clear: none !important;
        margin-right: 10px;
    }

    table.infobox {
        margin-top: 10px;
        width: 500px !important;
        float: left !important;
    }

    table.infobox tbody td{
        white-space: normal;
    }

    /* 7.12 Formulartabelle mit Rahmen */
    table.rahmen {
        float: left;
        clear: left;
        margin-right: 5px;
    }

    /* 7.13 */
    table.rahmen, table.kasten {
        border: 1px solid #cccccc;
        width: 49%;
    }

    p.kasten, #inhaltPopup p.kasten {
        background-color: #f4f4f4;
        border: 1px solid #cccccc;
        margin-left: 10px;
        padding: 8px;
        width: 49%;
    }

    /* 7.13 Formulartabelle als grau hinterlegter Kasten */
    table.kasten, #inhaltPopup table.kasten {
        float: right;
        clear: right;
        margin-left: 5px;
    }

    /* 7.14 Zellen, Verweise und Beschriftungen im Kasten auch grau hinterlegen */
    table.kasten, table.kasten td, table.kasten th,
    table.kasten a, table.kasten label {
        background-color: #f4f4f4;
    }

    /***************************** never used *************************************/
    /* auch weiße Kästen ermöglichen, wenn rechts Eingabefelder sind */
    /* table.kasten.weiss, table.kasten.weiss td,
    table.kasten.weiss th,
    table.kasten.weiss a,
    table.kasten.weiss label {
        background-color: #ffffff;
    } */

    /* 7.15 */
    table.kasten label {
        margin-right: 10px;
    }

    /* 7.16 */
    a.zurueck, .verweise a.zurueck, .seitenleiste a.zurueck {
        background: url('../bilder/pfeil_blau_links.gif') no-repeat left;
        padding-left: 8px;
    }

    .verweiseImKasten a.zurueck {
        margin-left: 4px;
    }

    table.kasten a, .verweise a {
        background: url('../bilder/pfeil_blau_rechts.gif') no-repeat right;
        padding-right: 8px;
    }

    table.ohneLink a {
        background: none;
    }

    .calculationSum {
        border-top: 1px dashed  #666666;
        border-bottom: 1px solid #666666;
    }

    a.disabled {
        padding-left: 5px;
        padding-right: 8px;
        text-align: left;
        background: url('../bilder/pfeil_grau_rechts.gif') no-repeat right !important;
        font-weight: bold;
    }

    /* Verweise in einem grau hinterlegtem Kasten */
    td.verweiseImKasten a {
        background: url('../bilder/pfeil_blau_rechts.gif') no-repeat right;
        line-height: 1.5em;
        padding-left: 4px;
        padding-right: 8px;
    }

    td.highlight {
        background: url('../bilder/pfeil_blau_rechts.gif') no-repeat right;
        padding-right: 8px;
        font-weight: bold;
    }


    /******************************************************************************/
    /***************************** Verweisliste  Anfang ***************************/
    /******************************************************************************/

    /*
        Umwandlung von <ul class="verweise"><li></li></ul> in eine Tabelle!

        Grund: Herausnahme von float: left aus allen divs, da Elemente mit float
        aus den umschließenden Block fallen können (wird so in CSS-Spezifikation
        verlangt).

        Da dies auch bei ul.verweise nötig ist und dadurch eine Blockanzeige der
        einzelnen Listenelement erzeugt wird und das Design der Verweisbox nicht
        mehr nachzubilden ist (inline wären alle Listeneinträge nebeneinander,
        erfolgt die Umwandlung in eine Tabelle.

        Ein Versuch mit display:table in ul.verweise war im Firefox erfolgreich,
        aber der IE unterstützt das natürlich wieder nicht.
    */

    table.verweise {
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        border-top: 1px solid #e9e9e9;
        clear: both;
    }

    table.verweise td {
        border-bottom: 1px solid #e9e9e9;
        line-height: 19px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        white-space: nowrap;
    }

    table.verweise a, td a{
        color: #2b2771;
    }

    .verweise, p.hinweis {
        margin-top: 1em;
    }

    table.verweiseOhneRand {
        margin-top: 1em;
    }
    table.verweiseOhneRand td {
        line-height: 19px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        white-space: nowrap;
    }


    /* 8.4 Verweislisten innerhalb eines Formulars (TODO: wirklich nötig?) */
    /*
    form .verweise {
        clear: both;
    }
    */

    /* 8.5 Verweislisten innerhalb einer Tabellenzelle */
    td.verweise {
        margin-top: 0em; /* Abstand wieder aufheben, sonst verschieben sich ganze Tabellenzeilen */
        margin-bottom: 0px; /* Abstand wieder aufheben, damit Verweise unten bündig sind */
    }

    /* Eine Verweistabelle die Recht-Oben ausgerichtet wird. */
    table.obenRechts {
        float: right;
        margin-top: 0px;
        margin-bottom: 1em;
    }


    /******************************************************************************/
    /***************************** Listentabelle Anfang ***************************/
    /******************************************************************************/

    /* 9.1 Listentabelle */
    table.liste {
        border: 1px solid #cccccc;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
        /*width: 98%; geändert auf 100% BPR 2005-07-12 hat keine negativen Auswirkungen? */
        width: 100%;
        clear: both;
    }

    table.listeNoMargin {
        border: 1px solid #cccccc;
        width: 100%;
        clear: both;
    }

    table.liste tfoot td {
        font-weight: bold;
    }

    /* 9.2 Datenzellen in Listentabellen */
    table.liste td, table.liste tbody td {
        vertical-align: top;
    }

    /* Spaltenweise Markierung fuer Tabellen */
    table tbody td.spalte1, table tbody th.spalte1 {
        background-color: #f4f4f4;
    }

    tr.odd td,
    tr.odd td a,
    tr.odd td img,
    tr.odd td p,
    tr.odd td label,
    tr.odd td form,
     tr.odd td div,
     tr.odd td li,
     tr.odd td ul,
     tr.odd td *
{
        background-color: #ebebeb;
    }


    tr.even td,
    tr.even td a,
    tr.even td img,
    tr.even td p,
    tr.even td label,
    tr.even td form,
    tr.even td div,
    tr.even td li,
    tr.even td ul,
     tr.even td *
{
        background-color: #ffffff;
    }

    tr.evenAlt td,
    tr.evenAlt td a,
    tr.evenAlt td img,
    tr.evenAlt td p,
    tr.evenAlt td label,
    tr.evenAlt td form,
    tr.evenAlt td div{
        background-color: #f4f4f4;;
    }



    /* 9.3 Hintergrundfarbe für Verweise, Bilder und Absätze in Datenzellen mit
          Hintergrundfarbe 1 anpassen */
    table tbody td.td1,
    table tbody td.td1 a,
    table tbody td.td1 img,
    table tbody td.td1 p,
    table tbody td.td1 label,
    table tbody td.td1 form,
    table tbody th.td1,
    table tbody div.td1 {
        background-color: #ebebeb;
    }

    table tbody td.td1light,
    table tbody td.td1light a,
    table tbody td.td1light img,
    table tbody td.td1light p,
    table tbody td.td1light label,
    table tbody td.td1light form,
    table tbody th.td1light,
    table tbody div.td1light {
        background-color: #f5f5f5;
    }

    /* 9.18 Besondere spaltenweise farbliche Markierung fuer Tabellen */
    table tbody td.td1sp, table tbody th.td1sp,
    table tbody td.td1sp a,
    table tbody td.td1sp img,
    table tbody td.td1sp p,
    table tbody td.td1sp label {
        background-color: #d8dae5;
    }

    /* 9.19 Besondere spaltenweise farbliche Markierung fuer Tabellen */
    table tbody td.td2sp, table tbody th.td2sp,
    table tbody td.td2sp a,
    table tbody td.td2sp img,
    table tbody td.td2sp p,
    table tbody td.td2sp label {
        background-color: #e6e8f2;
    }

    /* Warum das?
    table.liste td.td1, table.liste td.td2 {
        vertical-align: middle;
    }
    */

    /* 9.4 Sortieren-Verweise in Überschriften im Kopf der Listentabelle */
    table.liste thead th a.sortieren {
        /* nach Absprache PL-Meeting 1.7.2005 ganz herausgenommen,
            sicherheitshalber aber weiterhin "sortieren" verwenden,
            um hier wieder etwas einbauen zu können!
        background: url('../bilder/sortieren.gif') no-repeat right;
        padding-right: 11px;
        */
    }

    /* 9.5 Sortieren-Verweise unter dem Mauszeige in Überschriften im Kopf der
           Listentabelle */
    table.liste thead th a.sortieren:hover {
        color: #333333;
    }

    /* 7.7 Abstand zur linken Spalte halten (in Listentabellen) */
    table.liste td.abstand,
    table.liste th.abstand{
        padding-left: 30px;
    }

    /* Autocomplete */
    .autocomplete {
      position: absolute;
      color: #333;
      background-color: #fff !important;
      border: 1px solid #666;
      font-family: Arial;
    }

    .autocomplete ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .autocomplete li {
      display: block;
      background-color: #fff !important;
      white-space: nowrap;
      cursor: pointer;
      margin: 0px;
      padding-left: 5px;
      padding-right: 5px;
      border: 1px solid #fff;
    }

    .autocomplete li.selected {
      background-color: #cef !important;
      border-top: 1px solid #9bc;
      border-bottom: 1px solid #9bc;
    }


    /******************************************************************************/
    /********************** Extra-Spalten-Listentabelle Anfang ********************/
    /******************************************************************************/

    /* 10.1 Tabellen mit extra Spalte sind Listentabellen mit einer rechten Spalte
            für Verweise ohne Rahmen, wobei die restlichen Spalten aber einen Rahmen
            haben. */
    table.extraSpalte {
        border: none;
    }

    /* 10.2 Jede einzelne Zelle der ersten Saplte muss einen linken Rahmen haben. */
    table.extraSpalte td.rahmenLinks, table.extraSpalte th.rahmenLinks {
        border-left: 1px solid #cccccc;
    }

    /* 10.3 Jede einzelne Zelle der ersten Zeile außer der extra Spalte (siehe 10.1)
            muss einen oberen Rahmen haben. */
    table.extraSpalte td.rahmenOben, table.extraSpalte th.rahmenOben {
        border-top: 1px solid #cccccc;
    }

    /* 10.4 Jede einzelne Zelle der vorletzen Spalte (vor der extra Spalte) muss
            einen rechten Rahmen haben. */
    table.extraSpalte td.rahmenRechts {
        text-align: right; /* Bilder für Verweise an den rechten Rand */
    }

    /* 10.5 */
    table.extraSpalte td.rahmenRechts, table.extraSpalte th.rahmenRechts {
        border-right: 1px solid #cccccc;
        white-space: nowrap;
    }

    /* 10.6 Jede einzelne Zelle der letzten Zeile außer der extra Spalte
            (siehe 10.1) muss einen unteren Rahmen haben. */
    table.extraSpalte td.rahmenUnten, table.extraSpalte th.rahmenUnten {
        border-bottom: 1px solid #cccccc;
    }

    /* 10.7 Leere schmale Tabellenzeile mit einer Spalte und oberen und unteren
            Rahmen als optischen Trenner z. B. bei Kunden und dessen FPL. */
    td.trenner {
        border-bottom: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        height: 4px; /* so wird der Abstand zwischen den Rahmen gewährleistet */
    }

    /* 10.8 */
    td.trenner, table.extraSpalte td.leer {
        font-size: 1px;
        line-height: 1px;
    }

    /* 10.9 Leere etwas breitere Tabellenzeile mit einer Spalte und keinem Rahmen
            als optischer Trenner z. B. zwischen Kunden. */
    table.extraSpalte td.leer {
        height: 19px;
    }

    table.texttabelle {
        width: 100%;
    }

    table.kalkFinDaten tr th, table.kalkFinDaten tr td {
        height: 16px;
    }

    /******************************************************************************/
    /***************************** Karteireiter  Anfang ***************************/
    /******************************************************************************/

    .karteireiter .reiter {
        font-weight: normal;
        padding: 0px;
        margin: 0px;
        border-bottom: 0px;
        border-left: solid 1px #cccccc;

        /* durchgehende Linie über der aktiven Karteikarte */
        background: url('../bilder/karteilinie_bg.gif') repeat-x left bottom;
    }

    /* 11.2 Verweise in den Reitern */
    .karteireiter a.reiter {
        border-right: solid 1px #cccccc;
        border-top: solid 1px #cccccc;
        border-bottom: 0px;
        float: left;
        height: 18px;
        line-height: 19px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 11.3 Verweise in den Reitern unter dem Mauszeiger */
    .karteireiter a.reiter:hover {
        color: #333333;
    }

    /* 11.4 Aktive (ausgewählte Karteikarte) Verweise in den Reitern */
    .karteireiter a.aktiv {
        font-weight: bold;
        background-color: #ebebeb;
    }

    /* 11.5 Inaktive (nicht ausgewählte Karteikarte) Verweise in den Reitern */
    .karteireiter a.inaktiv {
        font-weight: normal;
        /*border-bottom: solid 1px #cccccc;*/
    }

    .karteireiter a.customDisabled {
        color: rgb(160,160,160);
    }

    td.karteikarte_aktiv {
        display: table-cell;
    }


    /* 11.6 Inaktive Verweise in den Reitern unter dem Mauszeiger */
    .karteireiter a.inaktiv:hover {
        background-color: #f6f6f6;
    }

    .karteireiter .karteikarte {
        background-color: #ebebeb;

        border-bottom: solid 1px #cccccc;
        border-left: solid 1px #cccccc;
        border-right: solid 1px #cccccc;

        width: 100%;
        padding: 10px;
    }

    .karteikarte_aktiv {
        border: none ;
        padding: 0px;
        display: table-row;
    }

    .karteireiter .karteikarte_inaktiv {
        /* inaktive Karteikarten nicht anzeigen */
        display: none;
    }

    /* 11.10 Der Inhalt der Karteikarte */
    .karteireiter .karteiinhalt {
        border: 1px solid #cccccc;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 1em;
        padding-bottom: 1em;
        /* Nachfolgende Angabe ermöglicht ein Scrollen innerhalb des
           Karteireiters wenn die angegebene Größe überschritten wird.
        */
        /* height: 400px;
        overflow: auto; */
    }

    tbody td.linie {
        border-right: 1px solid #cccccc;
        padding-right: 2ex;
    }

    tbody td.linieAbstand {
        padding-left: 2ex;
    }

    .headerAlt {
        background-color: #999999  !important;
        color: white;
        border-bottom:0px;
        border-right:2px solid white;
    }

    .headerAltEmpty {
        color: white;
        border-bottom:0px;
    }

    .todo, .todo * {
        background-color: yellow !important;
    }

    /* TABLE ROW hightlight */

    tr.mouseover, tr.mouseover *, tr.mouseover td a {
        background-color: #B6C7D9 !important;
        cursor: pointer;
    }

    tr.selected, tr.selected *, tr.selected td a  {
        background-color: #B6C7D9 !important;
    }

    /* tabelle regelwerke */
    .selectedRule, .selectedRule * {
        background-color: #bbbbff !important;
        font-weight: bold;
    }

    .nextTrueSelected a {
        background-color: #bbffbb !important;
    }

    .nextFalseSelected a {
        background-color: #ffbbbb !important;
    }

    .prevSelected a {
        background-color: #ffffbb !important;
    }

    .nextTrue, .nextTrue * {
        background-color: #bbffbb !important;
    }

    .nextFalse, .nextFalse * {
        background-color: #ffbbbb !important;
    }

    .prev, .prev * {
        background-color: #ffffbb !important;
    }

    /* Unterschiede zwischen zwei Werten. Z.B. Vorderreifen und Hinterreifen */
    .diff {
        color: #CC3300 !important;
    }

    table.ueberschrift {
        width: 100%;
        border: 1px solid #cccccc;
        margin-bottom: 1.5em;
    }

    table.ueberschrift tbody td {
        background-color: #ebebeb;
    }

    .dunklerHintergrund {
        background-color: #ebebeb;
    }

    table.abstaende tbody tr td {
        padding-top: 1.5em;
    }

    table tbody tr td.summierung {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        font-weight: bold;
    }

    table.liste tbody td.summierung {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    /* Spezielle Formatierungen einer Tabellenzelle */
    td.ueberschrift {
        font-weight: bold;
    }

    /* Allgemeine Zellenformatierungen z.B. für den Parkplatzreport */
    td.ueberschrift {
        font-weight: bold;
    }

    .abstandLinks {
        padding-left: 20px !important;
    }

    .abstandRechts{
        padding-right: 20px;
    }

    /* z. B. für rechtliche Hinweise unter dem eigentlichen Seiteninhalt (Details Bestellung) */
    p.hinweis {
        float: right;
    }

    .beschreibung, .beschreibungToolTip, .beschreibungTable {
        padding: 5px;
        border: solid 1px #cccccc; /*  #cdcdcd; */
        background-color: #f5f5f5; /* #f4f4f4;*/
        position: absolute;
        z-index: 9;
        width: 380px;
        visibility: hidden;
        /* NEU: 6.12.2004, damit Umbruch auch innerhalb Formaulartabelle erfolgt */
        overflow: hidden;
        /* NEU: 6.12.2004, damit Umbruch auch innerhalb Formaulartabelle erfolgt */
        white-space: normal;
        top: 0px;
        left: -300px; /* für internet explorer notwendig, da er ansonsten tabellen in den beschreibungsschwebern nicht vollständig ausblendet */
        font-weight: normal;
        text-align: left;
    }
    .beschreibungToolTip, .beschreibungTable{
        width: auto;
    }

    .beschreibungTable {
        padding: 0px;
    }

    .beschreibungMandatory {
        z-index: 200;
    }

    div.beschreibung table.layout td {
        background-color: #f5f5f5;
    }

    table.liste td.rahmenOben, th.rahmenOben {
        border-top: 1px solid #cccccc;
    }

    table.liste th.rahmenUnten {
        border-bottom: 1px solid #cccccc;
    }

    td.verweisbilder {
        text-align: right;
    }

    .center {
        text-align: center;
    }

    td.keinUmbruch, th.keinUmbruch, label.keinUmbruch {
        white-space: nowrap;
    }

    table.keinUmbruch td {
        white-space: nowrap;
    }

    caption.keinUmbruch {
        white-space: nowrap;
    }

    input.keinAbstandLinks {
        margin-left: 0px;
    }

    input.weisserHintergrund {
        background-color: #ffffff !important;
    }

    select.keinAbstandLinks {
        margin-left: 0px;
    }

    select.weisserHintergrund {
        background-color: #ffffff !important;
    }

    input.zahl {
        padding-right: 1px; /* Nötig damit im IE der Cursor nicht verschwindet */
        text-align: right;
    }

    /*************************************************************************
     * Doppelte Überschriftenzeile
     * ohne Abstände zum Rahmen, erste Zeile weiß, zweite Grau, jeweils mit
     * unterem grauen Rahmen
     *************************************************************************/
    thead.ueberschrift th, thead.ueberschrift td {
        padding-left: 10px;
        padding-right: 10px;
    }

    thead.ueberschrift td {
        background-color: #ebebeb;
        border-bottom: 1px solid #cccccc;
    }

    /*************************************************************************
     * Seitenleiste im Kalkulator
     *************************************************************************/
    td.seitenleiste {
        width: 200px;  /* wegen Jato-Bildern, vorher 220px; */
        padding: 0px;
    }

    td.seitenleiste, td.seitenleiste * {
        background-color: rgb(243, 243, 243);
    }

    /*
     * Seitentrenner im Kalkulator zwischen Seitenleiste und Seiteninhalt
     */
    td.seitentrenner {
        width: 10px;
    }

    td.seitenleiste, td.seiteninhalt {
        border: 1px solid rgb(204, 204, 204);
    }

    /* Im eigentlichen Inhalt Innenränder einrichten */
    td.inhalt {
        padding-left: 10px;
        padding-right: 10px;
    }

    td.trennerRechts {
        padding-right: 20px;
        border-right: 1px solid rgb(204, 204, 204);
    }

    td.trennerLinks {
        padding-left: 20px;
        border-left: 1px solid rgb(204, 204, 204);
    }

    th.trennerLinks {
        padding-left: 20px;
    }

    .italic {
        font-weight: normal;
        font-style: italic;
    }

    .underline {
        font-weight: normal;
        text-decoration: underline;
    }


    /* 13.8 Link mit Vergrößerungs-Symbol */
    .seitenleiste a.linkVergroessern {
        background: url('../bilder/anschauen.gif') right no-repeat;
        padding-top: 3px;
        padding-right: 18px;
        padding-bottom: 11px;
        float: right;
    }

    span.infoSchweber {
        background: url('../bilder/info_schweber.gif') right no-repeat;
        float: right;
        padding-right: 18px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    td.zeilentrenner {
        border-top: 1px solid #ebebeb;
        padding-top: 1em !important;
    }

    td.seitenleiste table.layout td.zeilentrenner {
        border-top: 1px solid #cccccc;
        padding-top: 1em !important;
    }

    td.seitenleiste table.datentrenner td {
        border-bottom: 1px solid #ffffff;
    }

    /* Typsuche: Pflichtfelder die keinen Eintrag haben */
    span.keinEintrag {
        color: red;
    }

    /* Typsuche: Hervorhebung unseres selbst gepflegten Auslaufdatums */
    span.hervorhebung {
        color: blue;
    }


    /*****************************************************************************/
    /***** Einblendfenster für Großansicht des Fahrzeugs aus der Seitenleiste ****/
    /*****************************************************************************/

    /* 14.1 Rahmen für Großansicht des Fahrzeugs */
    #grosseFahrzeugbilder {
        background-color: #f3f3f3;
        border: 1px solid #cccccc;
        width: 400px;
    }

    /* 14.2A Navigationsbereich für Fahrzeugansicht (Kalkulator) */
    div.abbildungNavigation {
        border-top: none;
        padding-top: 0em;
        padding-left: 5px;
        padding-bottom: 0.5em;
        padding-right: 5px;
        margin-top: 0em;
    }

    /* 14.2B Navigationsbereich für Fahrzeugansicht (Großansicht) */
    #grosseFahrzeugbilder div.abbildungNavigation {
        padding-top: 1em;
    }



    /* 14.3 Link mit Fenster-schließen-Symbol */
    #grosseFahrzeugbilder a.linkSchliessen {
        background: url('../bilder/i_close.gif') right no-repeat;
        float: right;
        padding-right: 12px;
    }


/*****************************************************************************/
/****************************** auswahl reiter *******************************/
/*****************************************************************************/

    /* hilfskonstruktion für den iex */
    div.auswahlreiter {
        float: left;
    }

    /* die auswahlreiter werden als listenelemente formatiert */
    ul.auswahlreiter {
        border-top: 1px solid #cccccc;
        left: 0px;
        margin: 0px;
        padding: 0px;
        position: relative;
        top: 0px;
        z-index: 1;
    }

    /* */
    ul.auswahlreiter li {
        border-bottom: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        list-style: none;
    }

    /* Verweise innhalb der auswahlreiter */
    ul.auswahlreiter a {
        color: #666666;
        display: block;
        line-height: 12px;
        padding: 3px 5px 4px 5px;
    }

    /* MouseOver-Zustand für Verweise */
    ul.auswahlreiter a:hover {
        color: #333333;
    }

    /* Aktive Auswahlreiter */
    ul.auswahlreiter a.aktiv {
        background-color: #ebebeb;
        border-right: 1px solid #ebebeb;
    }

    /* Inaktive Auswahlreiter */
    ul.auswahlreiter a.inaktiv {
        border-right: 1px solid #cccccc;
        font-weight: normal;
    }

    /* MouseOver-Zustand für inaktive Verweise */
    ul.auswahlreiter a.inaktiv:hover {
        background-color: #f6f6f6;
    }

    /* Auswahlkarte mit dem Inhalt zum entsprechenden Auswahlreiter */
    div.auswahlkarte_aktiv {
        background-color: #ebebeb;
        border: 1px solid #cccccc;
        float: left;
        margin-left: -1px;
        min-height: 18em; /* notwendig bei Auswahlkarten mit wenig Inhalt, da sonst die unteren Auswahlreiter in der Luft hängen. Die Höhe richtet sich nach der Anzahl der Auswahlreiter: (AnzahlAuswahlreiter * 2). Lässt sich das mittels JSP dynamisch generieren? Entweder hier in der css-Datei oder besser inline im <head> der jeweiligen Seite */
        padding: 10px;
    }

    /* ausgeblendete Auswahlkarte */
    div.auswahlkarte_inaktiv {
        display: none;
    }

    /* xx.10 Der Inhalt der Auswahlkarte */
    div.auswahlinhalt {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        min-height: 17em; /* notwendig bei Auswahlkarten mit wenig Inhalt, da sonst die unteren Auswahlreiter in der Luft hängen. Die Höhe richtet sich nach der Anzahl der Auswahlreiter: ((AnzahlAuswahlreiter * 2) - 1). Lässt sich das mittels JSP dynamisch generieren? Entweder hier in der css-Datei oder besser inline im <head> der jeweiligen Seite */
        padding: 5px;
    }


    /* THA: Nötig für Reiter die Untereinander dargestellt werden,
     * '*html div.auswahlinhalt' im ie nicht richtig dargestellt wird
     */
    div.auswahlinhalt2 {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        min-height: 17em;
        height: 100%;
        padding: 5px;
    }

    /* ATOMIC TEST AREA */

    .karteireiter a.reiterRechts, a.reiterRechts {
        float: right;
        /*background: #2b2771 url('../bilder/kalkulieren.gif') left no-repeat;*/
        background: #2b2771 url('../bilder/pfeil_weiss_rechts.gif') right no-repeat;
    	color: #ffffff;
        border-bottom: solid 1px #cccccc;
        border-left: solid 1px #cccccc;
        white-space: nowrap;
    }

    .karteireiter a.reiterRechts:hover, a.reiterRechts:hover {
        color: #ffffff;
    }

    .karteireiter a.reiterRechts img {
        background-color: #2b2771;
    }

    .verweise td.auswaehlen {
        background: url('../bilder/annehmen.gif') no-repeat 2px;
        padding-left: 20px;
    }

    .verweise td.abwaehlen {
        background: url('../bilder/unmarkiert.gif') no-repeat 2px;
        padding-left: 20px;
    }

    .verweise td.loeschen {
        background: url('../bilder/loeschen.gif') no-repeat 2px;
        padding-left: 20px;
    }

    .verweise td.report {
        background: url('../bilder/report.gif') no-repeat 2px;
        padding-left: 20px;
    }

    .linieUnten {
        border-bottom: solid 1px #cccccc;
    }

    .linieOben {
        border-top: solid 1px #cccccc;
    }

    .punkteUnten {
        border-bottom: dotted 1px #cccccc;
    }


    #weitereDaten {
        overflow: visible;
    }

    #weitereDaten td {
        white-space: nowrap;
    }

    #logEntry td {
        font-size: 12px;
        padding-bottom: 10px;
        color: #000000;
    }
  /*
    #logEntry td.DEBUG {
        color: #646464;
        background-color: #ebebeb;
    } */

    #logEntry td.INFO {
        background-color: #d0ffd0;
    }

    #logEntry td.WARN {
        background-color: #ffb030;
    }

    #logEntry td.ERROR {
        background-color: #f07070;
    }

    #logEntry td.FATAL {
        background-color: #f070f0
    }

/*************************************************************/
/***************** STARTSEITE BLOCKELEMENTE ******************/
/***************** Testzugang               ******************/
/*************************************************************/

td#mainleft {
    width: 32%;
	background-color: #a7b8d1;
	padding: 8px;
	border: 1px solid #cccccc;
	min-height: 100px;
}

td#mainleft table.verweise td {
	background-color: #a7b8d1;
}

td#maincenter {
	background-color: #cad5e5;
	padding: 8px;
	border: 1px solid #cccccc;
	min-height: 100px;
}

td#maincenter table.verweise td {
	background-color: #cad5e5;
}

td#mainright {
	width: 32%;
	background-color: #b9c7dc;
	padding: 8px;
	border: 1px solid #cccccc;
	min-height: 100px;
}

td#mainright table.verweise td {
	background-color: #b9c7dc;
}

td#mainbottom {
	background-color: #b8cae5;
	padding: 8px;
	border: 1px solid #cccccc;
	min-height: 75px;
    margin: 0.5% 0 0 0;
}

td#mainbottom table.verweise td {
	background-color: #b8cae5;
}

/* 2.27 Zeilenumbruch mit der Höhe eines halben Absatzes  */
hr.absatz {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #cccccc;
	border-left: none;
	height: 0px;
	margin: 1.5em 0em 1.5em 0em;
}

table.gitter td, table.gitter th, td.rahmen {
    border:1px solid #cccccc;
}

.validator {
    border: 1px solid #efa645;
    padding: 10px;
}


/*****************************************************************************/
/***** EON Abrechnungsreport                                              ****/
/*****************************************************************************/

    table.eon {
	width: 640px;
	table-layout:fixed;
    }

    table.eon td, table.eon caption {
        color: #000066;
        font-size: 9pt;
    }

    table.eon th {
        color: #000066;
        font-size: 9pt;
    }

    table.eon .abstandOben {
         padding-top:5px;
    }

    table.eon .abstandUnten {
         padding-bottom:5px;
    }

    table.eon td.abrechnungHeader{
        font-size: 16pt;
	font-weight:bold;
        width: 60%;
    }

    table.eon td.abrechnungHeaderInfos{
        text-align:right;
	font-weight:bold;
    }

    table.eon th {
	font-weight:bold;
    }

    table.eon .abrechnungCol1{
	font-weight:bold;
	width:30%;
    }

    table.eon .abrechnungCol2{
	width:31%;
        overflow:hidden;
    }

    table.eon .abrechnungCol3{
	font-weight:bold;
	width:24%;
    }

    table.eon .abrechnungCol4{
	width:15%;
    }

    table.eon .abrechnungLogo{
	padding-top:30px;
    }

    table.eon tr.gesamtZeile td{
       color:#DC0000;
       border-bottom: 1px solid #000066;
    }

    table.eon tr.verrechnetZeile td {
       color:#008000;
       border-bottom: 2px solid #000066;
       padding-top:5px;
    }

    table.eon tr.saldoZeile td {
       border-bottom: 1px solid #000066;
       padding-top:5px;
    }

    table.eon tr.aufstellung th {
       padding-top:5px;
       border-bottom: 2px solid #000066;
    }

    table.eon tr.aufstellung td {
       padding-top:5px;
       border-bottom: 1px solid #000066;
    }

    table.eon tr.aufstellung .col1 {
	width:10%;
    }

    table.eon tr.aufstellung .col2 {
	width:13%;
	text-align:right;
	padding-right: 10px;
    }

    table.eon tr.aufstellung .col3 {
	width:30%;
    }

    table.eon tr.aufstellung .col4 {
	width:47%;
    }

    /******************************************************************************/
    /***************************** Aufklapptabelle Anfang ***************************/
    /******************************************************************************/

    table.klapp {
        margin-bottom: 1.5em;
        margin-top: 1.5em;
        width: 100%;
        clear: both;
    }

    table.klapp td, table.klapp tbody td {
        vertical-align: top;
    }

    table.klapp td.bottom {
        border-bottom:1px solid #cccccc;
    }

    .yellowBackground {
        background-color: #f7f7b5 !important;
    }

    table.klapp thead th {
        border: 0px;
    }

    table.klapp tr.odd td,
    table.klapp tr.odd td a,
    table.klapp tr.odd td img,
    table.klapp tr.odd td p,
    table.klapp tr.odd td label,
    table.klapp tr.odd td form,
    table.klapp tr.odd td div,
    table.klapp tr.odd td li,
    table.klapp tr.odd td ul,
    table.klapp tr.odd td * {
        background-color: #ffffff;
    }


    table.klapp span.fettLink {
        font-weight: bold;
        cursor: pointer;
        color: #2B2771;
    }

    table.klapp span.normalLink {
        font-weight: normal;
        cursor: pointer;
        color: #2B2771;
    }


    table.liste tr.odd td,
    table.liste tr.odd td a,
    table.liste tr.odd td img,
    table.liste tr.odd td p,
    table.liste tr.odd td label,
    table.liste tr.odd td form,
    table.liste tr.odd td div,
    table.liste tr.odd td li,
    table.liste tr.odd td ul,
    table.liste tr.odd td * {
        background-color: #ebebeb;
    }

    /******************************************************************************/
    /***************************** Aufklapptabelle Ende ***************************/
    /******************************************************************************/

    /************************** Styles fuer Sammelpruefung ************************/

    input.ajaxableLink {
        padding: 0px;
        font-family: Verdana,Geneva,Arial,Sans-Serif;
        border:medium none;
        color:#2B2771 !important;
        cursor:pointer;
        font-size:10px;
    }

    input.ajaxableOdd {
        padding: 0px;
        font-family: Verdana,Geneva,Arial,Sans-Serif;
        border:medium none;
        color:#666666;
        background-color:#EBEBEB !important;
        font-size:10px;
    }

    input.ajaxableEven {
        padding: 0px;
        font-family: Verdana,Geneva,Arial,Sans-Serif;
        border:medium none;
        color:#666666;
        background-color:white !important;
        font-size:10px;
    }


    /************************** Styles fuer Sammelpruefung ENDE ************************/

    .green {
        color: #008000;
    }

    .red {
        color: red;
    }

} /* @media screen, print */

@media print {
    a, body, div, form, img, input.text, label, p, pre, select, table, tbody, td, th, thead, textarea, tr, ul {
        font-size: 9pt;
    }

    div#kopf, div#pfad, div#fuss, #inhalt .karteireiter .reiter, .verweise, .verweise a {
        display: none;
    }

    #inhalt table.ueberschrift {
        /*border-top: 1px solid #cccccc;*/
        border: 0px;
    }

    #inhalt .karteireiter {
        padding: inherit;
        margin: inherit;
    }

    #inhalt .karteireiter .karteikarte_aktiv, #inhalt .karteireiter .karteikarte_inaktiv {
        border: 0px;
        padding: inherit;
        margin: inherit;
        clear: both;
    }

    #inhalt .karteireiter .karteikarte_inaktiv {
        /* BPR: block statt table-cell für IE */
        display: block;
    }

    #inhalt .karteireiter .karteikarte_aktiv .karteiinhalt,
    #inhalt .karteireiter .karteikarte_inaktiv .karteiinhalt {
        border: 0px;
        padding: inherit;
        margin: inherit;
    }

    table.auto {
        /* Fahrzeugbild und Marke, Modell, Typ nicht ausdrucken */
        display: none;
    }

    table.rahmen, table.kasten {
        border: 1px solid #cccccc;
        width: 0%;
        /* width: 49%; Breite bei Ausdruck nicht begrenzen */
    }

    /* Funktioniert nicht richtig !!
    .landscape {
        filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=1)
    }
    */

    table.ieHackPrintWidth, div.ieHackPrintWidth {
        width: 600px !important;
    }

} /* @media print */