/* Für Kalender, falls jemand die CSS-Datei ändert, werden hier die disableden Bereiche wieder eingegraut */
.dxeCalendarOutOfRange, .dxeCalendarDayDisabled { color: #d0d0d0; }

/* -------- AB HIER EINSTELLUNGEN FUER VERSCHIEDENE BILDSCHIRMGROESSEN ------------ */
    td.dxeCalendarDay{ font-size:20px; }
 
@media all and (max-width:768px) {
 

    body        { border:0; margin:0;  }
    .page       { padding: 2%; width:96%; max-width:96%; }
    .main       { border:0; margin:0; padding:0; }
    .header     { }
    .headerSub2 { }
    #header2    { }
    .headerSub2 .imgFlag { height: 1rem; }

    /* allgemein für alle Tabellen - Schrift vergößern */
    table { font-size: 110%; width: 100%; }

        
    .BookingSteps                   { background: url() no-repeat 100% 0; margin: 0;padding: 0;border:0;}
    .BookingSteps li                { background: url() no-repeat 100% 0; list-style: none; padding:1% 2%; margin:0 2px 2px 0; float: left; width:auto;  }
    .BookingSteps li a              { background: url() no-repeat 100% 0; text-decoration: none; padding:0px; margin:0px; float: left;}
    .BookingSteps li a:hover        { background: url() no-repeat 100% 0; text-decoration: none; padding:0px; margin:0px; float: left;}
    .BookingSteps li.active a       { background: url() no-repeat 100% 0; width:auto; text-decoration: none; color: black;float: left;}
    .BookingSteps li.active a:hover { background: url() no-repeat 100% 0; width:auto; text-decoration: none; }
    .BookingSteps li.active         { background: url() no-repeat 100% 0; width:auto; text-decoration: none; float: left;}
    .BookingSteps span              { padding-left: 0px; }

    .BookingSteps li.step1          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step2          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step3          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step4          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step5          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step6          { background: url() no-repeat 100% 0; }
    .BookingSteps li.step1.active   { background: url() no-repeat 100% 0; }
    .BookingSteps li.step2.active   { background: url() no-repeat 100% 0; }
    .BookingSteps li.step3.active   { background: url() no-repeat 100% 0; }
    .BookingSteps li.step4.active   { background: url() no-repeat 100% 0; }
    .BookingSteps li.step5.active   { background: url() no-repeat 100% 0; }
    .BookingSteps li.step6.active   { background: url() no-repeat 100% 0; }

    /* Tabelle SuchErgebnis   
    ----------------------------------------------------------*/
    #divTableSuchErgebnis       { background:transparent;}
    #divTableSuchErgebnis       { clear:both; width:100%; /* float:left; */ padding:0; margin:0; }

    /* Tabelle SuchErgebnis neu   
    ----------------------------------------------------------*/
    #tblSuchErgebnis    { width:100%;}
    .divWrapper         {clear:both; padding:1rem;margin-bottom:1rem;}
    .divKategorie       {clear:both; padding:0.5rem 0rem;font-weight:bolder;font-size:120%;text-transform:uppercase; }
    .divBild            {float:left;width:100%;padding:0.5rem 0rem;}
    .imgBild            {width:15rem;}
    .divMemo            {float:right;width:100%;padding:0rem 0rem;}
    .divSpacerWrapper   {height:1rem;}
    .divSpacerPreis     {clear:both; height:1rem;}
    .divBottom          {clear:both; display:block;width:100%;}
    .divAusstattung     {clear:both;float:left;padding:0.5rem 0rem; }
    .divPreis           {float:right;  }
    .divPreis a         {color:#173A59; display:block; padding:0.5rem 0.5rem; width:5rem; text-decoration:none;text-align:right;}

    /* div SuchmaskeAuswahl  
    ----------------------------------------------------------*/
    #divTableSuchmaskeAuswahl       { width:100%; height:auto; padding:0; margin:6px 0;  }
    #divTableSuchmaskeAuswahl table { }
    #divTableSuchmaskeAuswahl .spanLabelInput
                                    { display:block; width:150px; float:left; }
    #divTableSuchmaskeAuswahl img   { float:right; padding: 0 20px 20px 20px;  }
    #divTableSuchmaskeAuswahl h3    { padding: 0 4px; font-weight:bold;  }

    .divSpacer { display: none; }
    .divLabelInputlitAuswahl    { clear: inherit; background:transparent; border:0; font-size: 160%;}
    .litAuswahlLbl              { float: left; width:45%; background:transparent; padding:4px; }
    .litAuswahl                 { background:transparent; }
    .litAuswahlPreisteil        { width: 300px; border:0; padding:4px; margin:0; }
    .litAuswahlPreisteilLbl     { border:0; padding:0; margin:0; border:0; }    
    .ASPxImageBILD_URL_class { border: 0; width:45%;  }

    #MainContent_ASPxGridViewOptionen { width:100%;}
    
    /*  Booking Steps ----------------------------------------------------------*/
    #MainContent_NavigationMenuBooking { padding:0; margin:0; border:0; clear:both;}


    /* checkboxen */
    .dxICheckBox  { background-image: url('../img/spriteIOS2.png'); background-repeat: no-repeat; background-color: transparent; width: 27px; height: 28px; 
                                background-position: -31px -271px; }
    .dxWeb_edtCheckBoxUnchecked, .dxWeb_edtCheckBoxGrayed, .dxWeb_edtCheckBoxCheckedDisabled, .dxWeb_edtCheckBoxUncheckedDisabled, .dxWeb_edtCheckBoxGrayedDisabled 
                              { background-image: url('../img/spriteIOS2.png'); background-repeat: no-repeat; background-color: transparent; width: 27px; height: 28px; 
                                background-position: -31px -271px; }
    .dxWeb_edtCheckBoxChecked { background-image: url('../img/spriteIOS2.png'); background-repeat: no-repeat; background-color: transparent; width: 27px; height: 28px; 
                                background-position: -2px -271px; }

    
    /* calender */
    .dxeCalendar {width:20rem;}
    
    /*.dxeCalendarDay, .dxeCalendarDayHeader, .dxeCalendarWeekNumber, .dxeCalendarHeader{ font-size:30px; }*/

    .dxEditors_edtCalendarNextMonth {
            /*http://sgaul.de/2012/01/09/moderne-pfeile-mit-css/*/
            /* Pfeil nach rechts per CSS */
            background-image:url('');
            border: 10px solid #666;
	        font-size:0;line-height:0;height:0;padding:0;margin:0;
            border-top-color:    transparent;
	        border-right-color:  transparent;
	        border-bottom-color: transparent;
            /* Ende Pfeil nach links per CSS */
        }
    .dxEditors_edtCalendarNextYear {
            display:none;
        }
    .dxEditors_edtCalendarPrevMonth {
            /* Pfeil nach links per CSS */
            background-image:url('');
            border: 10px solid #666;
	        font-size:0;line-height:0;height:0;padding:0;margin:0;
	        border-top-color:    transparent;
	        border-bottom-color: transparent;
	        border-left-color:   transparent;
            /* Ende Pfeil nach links per CSS */

        }
    .dxEditors_edtCalendarPrevYear {
            display:none;
        }

    /* textbox  rahmen innen -> bestimmt auch die Größe der Textbox     */

    .dxeTextBox,
    .dxeTextBoxSys,
    .dxeEditAreaSys,
    .dxeButtonEdit   { width: 100%; height: auto; font-size:1.5rem; padding: 4px; color:#333; }
    .dxb                        { width: auto; height: auto; font-size:18px; padding: 4px; }
    .dxeListBoxItem             { font-size:1.4rem; }
    .dxeErrorFrame,
    .dxeControlsCell, .dxeInvalid, .dxh0
      { width: 100%; }

    
    .dxeButtonEditButton, .dxeSpinIncButton, .dxeSpinDecButton, .dxeSpinLargeIncButton, .dxeSpinLargeDecButton      
                            { padding: 30px; }

    #MainContent_ASPxTextBoxAdrVorName  { width: 100%; }

    .dxeButtonEditButton {padding:6px; }
       


    fieldset.login { min-height: inherit; float: left; width: 96%; margin: 0; padding:2%; }


    /*  Leistungen ----------------------------------------------------------*/

    #divLiteralUserDaten        { width:96%; float:left; background:#DDD; padding:2%;  }
    #divLiteralRechnung         { width:100%; float:left; margin-left:0px; }
    #divLiteralAnzahlung        { width:100%; float:left; margin-left:10px; background:#EEE; }


    #divTableSuchmaske          { width: auto; background: transparent; padding: 0; margin: 0; }
    .TableSuchmaske             { width: 100%; }

    #divliteralSuchAenderung    { width: auto; padding: 10px 10px 10px 0; color: Red; }
    #divTableSuchErgebnis       { width: 100%; background: transparent; float: left; padding: 0; margin: 0; }

    .TableSuchErgebnis          { width: auto; }

    .tabRechnung                {  border-collapse: collapse; padding:0; width:100%; }
    .tabRechnung  tr            {  width:100%; padding:4px 4px 4px 0; }
    .tabRechnung  td            {  width:50%; padding:4px 4px 4px 0; }
    .tabAnzahlung               {  border-collapse: collapse; width:100%; }
    .tabAnzahlung td            {  width:50%; padding:4px 4px 4px 0; }
    .hrSpecial                  {  clear:both; border:0; border-bottom:1px solid #AAAAAA; }
    .spanPreis                  {  color: #990000; }

    #MainContent_ASPxMemoWuensche { float:left; width:100%; height:100px; }

    /* TODO */
    .divFloatLeft4      { float: left; width:40%; height: 100px; padding:2% 2% 2% 0; border:1px solid grey; }
    .divBuAdrLabel      { width:100%; height: auto;}
    .divBuAdrControl    { width:100%; height: auto;}


    /*  diverses ----------------------------------------------------------*/
    .divFloatLeft   { float: left; width: 100px; margin: 4px; }
    .divFloatLeft2  { float: left; width: 96%; height: auto; padding: 2% 2% 2% 0;  }
    .divFloatLeft3  { float: left; width: 96%; height: auto; padding: 2% 2% 2% 0;  }
    .divMargin      { float:left; margin:10px; width:100%; }
    .lblSuche       { width: auto; font-size: 18px; }
    .cmbSuche       { width: 100%; }

    /* Lastminute */
    #divTableSuchmaskeAuswahlLastMinute { float:none; width: 96%; padding: 10px; margin:0; }
    #divTableSuchmaskeAuswahlLastMinute .spanLabelInput
                                    { width:120px; }
    
#divAngebotStart1 {width: 96%; padding:10px; float:left;}
#divAngebotStart2 {width: 96%; padding:10px; float:left;}
#divAnfrageStart1 {width: 96%; padding:10px; float:left;}
#divAnfrageStart2 {width: 96%; padding:10px; float:left;}

.AufklappDivNEU .divFloatLeft2 {width:96%;}
.AufklappDivNEU .dxeButtonEdit {width:100%;}

.divAuswahlMehrfach { width: 100%; };

}

@media all and (max-width:400px) {

    .header     { min-height: 40px; height:auto; }
    .headerSub2 { width: 96%; margin: 8px; clear:both; }
    #header2    { display: none; }
    .headerSub2 .imgFlag { height: 1rem; }
    .imgBild            {width:100%;}
    /*.imgBild:hover      {transform: scale(1); -moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);-webkit-transform: scale(1);}*/
}