select {
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    line-height: normal;
    color: #000 !important;
    border: solid 1px #aaa;
    padding: 6px 6px;
    margin: 4px 0;
    background-color: #fff;
    resize: none;
    font-size:14px;
    vertical-align: middle;
    width: 19%;
    float: left;
    margin-right: 5px;
}


h1  {
    color:#000;
    font-size: 12pt;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

#div_fahrzeugtyp {

    background-color: #fff;
    width: 20%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 1;
    border-radius: 0;
    height: 35px;
    border: 1px solid #888;
    color: #000;
}

#div_fahrzeugtyp select {

    background-color: #fff;
    width: 20%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 1;
    border-radius: 0;
    height: 35px;
    border: 1px solid #888;
    color: #000;
}



#div_tankart select {
    background: transparent;
    background-color: #aaa;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 35px;
    border: 1px solid #aaa;
}


#div_hersteller select {
    background: transparent;
    background-color: #aaa;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 35px;
    border: 1px solid #aaa;
}



#div_modell select {
    background: transparent;
    background-color: #aaa;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 35px;
    border: 1px solid #aaa;
}


#div_baujahr select {
    background: transparent;
    background-color: #aaa;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 35px;
    border: 1px solid #aaa;
}

#div_motor select {
    background: transparent;
    background-color: #aaa;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 35px;
    border: 1px solid #aaa;
}


.abgerundete_ecken {
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
}


/* = ausgabe formatieren
---------------------------------------------------*/
div.pfeilLeiDreh {
    vertical-align: middle;
    min-height: 10em;
    display: table-cell;
    text-align:center;
    height: auto;
    min-width:50px;
    padding-top:20px;
}

td.ausGabe, td.ausGabePreis {
    width: 20%;
    color: #fff;
    font-size:0.8em;
    text-align: center;
}

td.ausGabePreis {
    padding-left: 20px;
}

div.infoBox1, div.infoBox2, div.infoBox3, div.preisBox {
    color: #000 !important;
    background-color: #eee;
    font-size: 1.5em;
    vertical-align: middle;
    min-height: 5em;
    display: table-cell;
    text-align:center;
    height: 50px;
    min-width:50px;
    width: 17%;
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
}




div.infoBox11, div.infoBox12, div.infoBox13, div.preisBox14 {
    color: #000 !important;
    background-color: #eee;
    font-size: 1.5em;
    vertical-align: middle;
    min-height: 5em;
    display: table-cell;
    text-align:center;
    height: 50px;
    min-width:50px;
    width: 17%;
    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
}
div.infoBox11 {
    border: 2px solid #14903B;
}
div.infoBox12 {
    border: 2px solid #1DE75B;
}
div.infoBox13 {
    border: 1px solid #888;
    background-color: #18AA41;
    color: #fff !important;
}
div.preisBox14 {
    background-color: #ccc;
    font-weight:bold;
    middle; min-height: 10em;
    min-width:80px;
    width: 17%;
    height:100px;
    border: 1px solid #888;
}


div.infoBox1 {
    border: 2px solid #2f7ed8;
}


div.infoBox2 {
    border: 2px solid #DE1138;
}

div.infoBox3 {
    border: 1px solid #888;
    background-color: #999;
    color: #fff !important;
}

div.preisBox {
    background-color: #ccc;
    font-weight:bold;
    middle; min-height: 10em;
    min-width:80px;
    width: 17%;
    height:100px;
    border: 1px solid #888;
}




div#ps_s1, div#nm_s1 {
    padding:0px;
    color: #ff9900;
    font-weight:bold;
    font-size: 32px;
    height: 150px;
    width: 200px;
    background-color:#fff;
}



div#ps_s2, div#nm_s2 {
    padding:0px;
    color: #ff9900;
    font-weight:bold;
    font-size: 32px;
    height: 150px;
    width: 200px;
}


div#ps_s3, div#nm_s3 {
    padding:0px;
    color: #ff9900;
    font-weight:bold;
    font-size: 32px;
    height: 150px;
    width: 200px;
}

div#ps_s4, div#nm_s4 {
    padding:0px;
    color: #ff9900;
    font-weight:bold;
    font-size: 32px;
    height: 150px;
    width: 200px;
}


div#ps_se, div#nm_se {
    padding:0px;
    color: #ff9900;
    font-weight:bold;
    font-size: 32px;
    height: 150px;
    width: 200px;
}

div#d {
    background-color: #fff;
    position: absolute;
    left: 10px;
    top: 138px;
    width: 190px;
    height: 10px;
}


/*  querformat
------------------------------*/
@media (min-width: 600px) and (max-width: 740px) {
    td.ausGabePreis { padding-left: 5px; }
    div#ps_s1_1 { width: 160px; }
    div#ps_s1, div#nm_s1  { width: 160px; }
    div#ps_s2, div#nm_s2  { width: 160px; }
    div#ps_s3, div#nm_s3  { width: 160px; }
    div#ps_s4, div#nm_s4  { width: 160px; }
    div#ps_se, div#nm_se  { width: 160px; }
    div#d { width: 150px; }
}

div#fdb {
    width: 100%;
}

#auswahl{
    width: 100%;

}
#auswahl_cars_hersteller_modell_baujahr_motor {
    height: 70px;
}

#beschreibung_ {
    font-weight: bold; font-size: 22px; float: left; color:#000; padding-top: 50px;
}

#show_details3 {
    height: 100px; width:100%;
    text-align: left;
}

#pic_ {
    float: left;
    width: 160px;
}


#show_stages{
    height: 50px; width:100%;
    text-align: left;
    font-size: 22px;
    margin-top: 10px;
}

#stg1, #stg2, #stg3, #stg4 {
    width: auto;
    color: #2E9CFF;
    float: left;
    height:25px;
    border-bottom: 2px solid #fff;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 20px;
    font-weight: bold;
    box-sizing: content-box;
    padding-bottom: 2px;
}

#stgo{
    width: auto;
    color: #179439;
    float: left;
    border-bottom: 2px solid #fff;
    cursor: pointer;
    height:25px;
    margin-top: 10px;
    font-weight: bold;
    box-sizing: content-box;
    padding-bottom: 2px;
}

#stage1, #stage2, #stage3, #stage4, #stageo
{
    background-color: #fff;
    width:98%;

    height: 260px;
    position: relative;
    color:#000;
    font-size:14px;
    padding: 1%;

}


/*   #l1, #l2, #l3, #l4 , #l5 {
       float: left;
       margin-right: 20px;


   }

   #l1, #l2 {
       width: 16%;
   }

   #l3 {
       width: 10%;
   }

   #l4 {
       width: 22%;
   }

   #l5 {
       width: auto;
   }*/

#div_orgiginal{
    font-size:15px;
    color:#a8a8a8;

    padding-top: 10px;
    height: 20px;
    width: 100%;
    border-bottom: 1px solid #a8a8a8;
    text-align: center;
    font-weight: bold;
    box-sizing: content-box;
}

#div_danach{
    font-size:15px;
    color:#a8a8a8;
    padding-top: 10px;
    height: 20px;
    border-bottom: 1px solid #a8a8a8;
    width: 100%;
    text-align: center;
    font-weight: bold;
    box-sizing: content-box;
}


#div_leistung {
    font-size: 18px;
    font-weight: bold;
    color:#000;
    padding-top: 70px;
}

#div_drehmoment {
    font-size: 18px;
    font-weight: bold;
    color:#000;
    padding-top: 30px;
}

#div_daten_leistung{
    font-size: 24px;
    font-weight: bold;
    color:#989898;
    padding-top: 34px;
    text-align: center;
}

#div_daten_drehmoment{
    font-size: 24px;
    font-weight: bold;
    color:#989898;
    padding-top: 23px;
    text-align: center;
}

.id_ps {
    font-size: 20px;
}


#div_steigerung_leistung{
    width:100%;
    background-color: #2E9CFF;
    color:#fff;
    font-size: 36px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    margin-top: 15px;
    padding-top: 11px;
    vertical-align: center;

}

#div_steigerung_leistung_e{
    width:100%;
    background-color: #14903B;
    color:#fff;
    font-size: 36px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    margin-top: 15px;
    padding-top: 11px;

}

#div_steigerung_drehmoment{
    width:100%;
    background-color: #2E9CFF;
    color:#fff;
    font-size: 36px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    margin-top: 5px;
    padding-top: 11px;

}


#div_steigerung_drehmoment_e{
    width:100%;
    background-color: #14903B;
    color:#fff;
    font-size: 36px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    margin-top: 5px;
    padding-top: 11px;

}

.steigerung1 {
    font-weight:bold;
    margin-right:30px;
    margin-top: 10px;
    padding-top: 3px;
    float: right;
    width: 20%;
    background-color: #fff;
    font-size: 20px;
    color: #ff4433;
    height: 32px
}



.steigerungp {
    font-weight:bold;
    margin-right:30px;
    margin-top: 10px;
    padding-top: 3px;
    float: right;
    width: 20%;
    background-color: #2E9CFF;
    font-size: 20px;
    color: #ff4433;
    height: 32px
}





.steigerunge {
    font-weight:bold;
    margin-right:30px;
    margin-top: 10px;
    padding-top: 3px;
    float: right;
    width: 20%;
    background-color: #fff;
    font-size: 20px;
    color: #1DE75B;
    height: 32px
}



div#ani_leistung {
    position: relative;
    width: 200px;
    height: 125px;
    margin-top: 23px;
}

div#ani_drehmoment {
    position: relative;
    width: 200px;
    height: 120px;
    margin-top: -10px;
}


#div_pfeil_leistung
{
    margin-top: 46px;
    font-size: 50px;
    color: #b9b9b9;
    text-align:center;
}


#div_pfeil_drehmoment  {
    margin-top: 5px;
    font-size: 50px;
    color: #b9b9b9;
    text-align:center;
}

#div_pfeil_leistung:before,
#div_pfeil_drehmoment:before {
    content: "\21E8";
}

#stage1 {
    display: block;
}
#stage2, #stage3, #stage4, #stageo {
    display: none;
}

#ani_drehmoment, #ani_leistung {display: block; background-color:#fff}


.black {
    color: #000;
    /*    float: left;*/
}


/* = NEU hinzugef�gt (Wolf)
------------------------------------------------------------*/
.material-icons { font-size: 80px; }
.steigerung1 { font-size: 21px; }




@media (min-width: 425px) and (max-width: 768px) {

    .id_ps {
        font-size: 11px;
    }

    #div_leistung,  #div_drehmoment { font-size: 16px; }
    #div_steigerung_leistung, #div_steigerung_drehmoment {height: 60px; padding-top: 30px;  font-size: 20px; }

    #div_steigerung_leistung_e, #div_steigerung_drehmoment_e { height: 60px; padding-top: 30px; font-size: 20px; }

    #div_daten_leistung, #div_daten_drehmoment {font-size:20px;}


    div#ani_leistung { width: 160px; margin-top: 2px auto !important;  }
    div#ani_drehmoment { width: 160px; margin-top: 2px auto !important;  }
    div#d { width: 160px; }

    div#ps_s1 , div#nm_s1, div#ps_s2 , div#nm_s2, div#ps_s3 , div#nm_s3, div#ps_s4 , div#nm_s4 ,div#ps_se , div#nm_se, #d { width: 100%;}


    .material-icons { font-size: 40px; }
    .steigerung1 { font-size: 16px; }
    .steigerunge { font-size: 16px; }
    div.drehMom { margin-top: 20px; }
    #ani_drehmoment, #ani_leistung {display: block; }

    .steigerung1 { margin-top: 5px; width: 50px; height: 20px;}

    #stage1, #stage2, #stage3, #stage4, #stageo {
        height: 550px
    }
}





@media (max-width: 420px) {
    #div_orgiginal, #div_danach { display: none;}



    #div_leistung, #div_drehmoment, #div_pfeil_leistung, #div_pfeil_drehmoment  { text-align: center; padding-top: 20px; margin-top: 10px; }
    div#ani_leistung, div#ani_drehmoment, div#ps_s1 , div#nm_s1, div#ps_s2 , div#nm_s2, div#ps_s3 , div#nm_s3, div#ps_s4 , div#nm_s4 ,div#ps_se , div#nm_se { width: 100%;}
    #div_pfeil_leistung:before, #div_pfeil_drehmoment:before { content: "\21E9"; }
    #div_steigerung_drehmoment, #div_steigerung_drehmoment_e { font-size: 36px; margin-top: 10px; }

    div.drehMom { margin-top: 20px; }
    #show_details3 { text-align: center; }
    #stage1, #stage2, #stage3, #stage4, #stageo { height: 800px; }
    div#d { width: 95%; }
    #show_stages { height: auto; }
    #stg1, #stg2, #stg3, #stg4, #stgo { float: none; }

    #ani_drehmoment, #ani_leistung {display: none; }

    #div_leistung,  #div_drehmoment { font-size: 20px; }


}


/* = ENDE hinzugef�gt (Wolf)
------------------------------------------------------------*/


@media (min-width: 50px) and (max-width: 425px) {

    select {width: 100%;}
    #auswahl_cars_hersteller_modell_baujahr_motor {
        height: 200px;
    }
    #beschreibung_ {
        text-align: center;
        font-weight: bold; font-size: 18px; float: left; color:#000; padding-top: 5px;
    }

    #show_details3 {
        height: 200px; width:100%;
        text-align: center;
    }



    #pic_ {
        float: auto;
        width: 100%;
        text-align: center;
    }


}


#auswahl_cars_hersteller_modell_baujahr_motor{
    width:100%;
}





/* Icons anzeigen */

div.icons { width: 100%; }

div.icons .xxx {position: relative; font-weight: bold; float: left;  width: 170px; text-align: center; }
div.icons .xxx  img { float: center; width: 70px;}
div.icons .xxx p { margin-top: 30px; }

div.icons .xxx #innerxxx {
    margin-top: 0px;

}
div.icons .xxx #innerpic {
    margin-top: 3px;
}


.infoicons {
    font-size:20px;
    font-weight: bold;
    padding-left: 10px;
}

@media (max-width 420px;) {
    div.icons .xxx { float: none; }
}




/* sauber mit grids */
div.tuningIcon { clear: both; margin: 40px 0; border: 1px solid red;}
div.tuningIcon .grid_2 { width: 160px !important; }
div.tuningIcon .grid_2 img { float: left;}
div.tuningIcon .grid_2 p { margin-top: 30px; }