body {
    margin: 0;
}

@media screen and (max-width: 479px) {
    #searchBoxWrapper .dates-table td {
        vertical-align: middle;
    }

    #slider .home-reservation-box {
        height: 100px;
        position: relative;
    }

    #searchBoxWrapper {
        border: medium none;
        height: auto !important;
        width: 100% !important;
        padding-bottom: 10px;
    }

    #searchBox {
        width: 230px !important;
        margin: 0 auto;
        height: auto;
    }

    #searchBoxWrapper .dates-table.dates {
        width: 100%;
    }

    #searchBoxWrapper .calendarBox input {
        width: 100%;
        padding: 0;
    }

    #searchBoxWrapper .pax {
        width: 100%;
    }

    .pax table td {
        text-align: left;
        width: 300px;
    }

    tr.paxRow select {
        width: 100%;
    }

    #searchBoxWrapper .dates-table {
        width: 100%;
        height: auto;
    }

    #searchBoxWrapper .submit {
        width: 100%;
    }

        #searchBoxWrapper .submit span.button {
            margin: 0 auto;
        }

    #searchBoxWrapper .calendarBoxWrapper {
        padding-bottom: 0;
    }

    #searchBoxWrapper .dates-table-wrapper .table-cell {
        display: block;
        overflow: hidden;
    }

    #searchBoxWrapper #SelectedHotelID {
        width: 100%;
    }

    #searchBoxWrapper .calendarBox {
        width: 100%;
    }

    .Zebra_DatePicker_Icon_Wrapper {
        width: 100%;
    }

    #searchBoxWrapper .button {
        height: 32px;
    }
}

@media screen and (min-width: 480px) and (max-width: 745px) {

    #searchBoxWrapper {
        border: medium none;
        height: auto !important;
        width: 100% !important;
    }

    #searchBox {
        width: 405px !important;
        margin: 0 auto;
    }

    #searchBoxWrapper .calendarBoxWrapper,
    #searchBoxWrapper .calendarBox.hotelSelect {
        padding-left: 0px;
    }

    #searchBoxWrapper .calendarBox {
        width: 49%;
    }

        #searchBoxWrapper .calendarBox .Zebra_DatePicker_Icon_Wrapper {
            width: 100%;
        }

    #searchBoxWrapper .dates-table-wrapper .table-cell {
        display: block;
        overflow: hidden;
    }

    #searchBoxWrapper .dates-table.dates {
        width: 100%;
    }

    #searchBoxWrapper .calendarBox input {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    #searchBoxWrapper .pax {
        width: 415px;
    }

    .pax table td {
        text-align: left;
        width: 300px;
    }

    tr.paxRow select {
        height: auto;
        width: 100%;
        border: 1px solid #9a9a9a;
    }

    #searchBoxWrapper .dates-table {
        width: 100%;
    }

        #searchBoxWrapper .dates-table td {
            vertical-align: top;
        }

    #searchBoxWrapper .submit {
        width: 100%;
    }

        #searchBoxWrapper .submit span.button {
            margin: 0 auto;
        }

    #searchBoxWrapper .calendarBoxWrapper {
        padding-bottom: 0;
    }

    #searchBoxWrapper .dates-table {
        height: auto;
        min-height: 40px;
    }

    #searchBoxWrapper #promo-line {
        width: auto;
    }

    #searchBoxWrapper .calendarBox.hotelSelect {
        width: 100%;
    }

    #searchBoxWrapper #SelectedHotelID {
        width: 100%;
    }
    /* zebra calendar*/
    .Zebra_DatePicker .dp_daypicker td,
    .Zebra_DatePicker .dp_daypicker th,
    .Zebra_DatePicker .dp_monthpicker td,
    .Zebra_DatePicker .dp_yearpicker td {
        width: 20px !important;
        height: 10px;
        line-height: 10px;
        font-size: 11px;
    }

    .dp_caption,
    .dp_previous,
    .dp_next {
        font-size: 10px;
        padding: 0 !important;
    }

    .Zebra_DatePicker td, .Zebra_DatePicker th {
        padding: 3px 0 !important;
    }

    #searchBoxWrapper .button {
        height: 32px;
    }

    .Zebra_DatePicker {
        top: 100px !important;
    }
}


@media screen and (min-width: 746px) and (max-width: 900px) {
    #searchBoxWrapper {
        width: 100% !important;
    }

    #searchBox {
        margin: 0 auto;
        width: 746px !important;
    }

    .calendarBox .label {
        width: 135px;
    }

    #searchBoxWrapper #SelectedHotelID {
        width: 215px;
    }

    #searchBoxWrapper .calendarBoxWrapper {
        padding: 0;
        min-width: 275px;
    }

    /* zebra calendar*/
    .Zebra_DatePicker .dp_daypicker td,
    .Zebra_DatePicker .dp_daypicker th,
    .Zebra_DatePicker .dp_monthpicker td,
    .Zebra_DatePicker .dp_yearpicker td {
        width: 20px !important;
        height: 10px;
        line-height: 10px;
        font-size: 11px;
    }

    .dp_caption,
    .dp_previous,
    .dp_next {
        font-size: 10px;
        padding: 0 !important;
    }

    .Zebra_DatePicker td, .Zebra_DatePicker th {
        padding: 3px 0 !important;
    }
}

@media screen and (min-width: 901px) {
    #searchBoxWrapper {
        display: block;
        width: 100% !important;
    }

        #searchBoxWrapper .calendarBox span.label {
            width: 150px;
        }

        #searchBoxWrapper .calendarBox.hotelSelect span.label ,
        #searchBoxWrapper .calendarBox.regionSelect span.label {
            width: 45px;
        }

        #searchBoxWrapper .calendarBox input {
            width: 125px;
        }

        #searchBoxWrapper .calendarBoxWrapper {
            padding: 0;
            min-width: 305px;
        }

    /* zebra calendar*/
    .Zebra_DatePicker .dp_daypicker td,
    .Zebra_DatePicker .dp_daypicker th,
    .Zebra_DatePicker .dp_monthpicker td,
    .Zebra_DatePicker .dp_yearpicker td {
        width: 20px !important;
        height: 10px;
        line-height: 10px;
        font-size: 11px;
    }

    .dp_caption,
    .dp_previous,
    .dp_next {
        font-size: 10px;
        padding: 0 !important;
    }

    .Zebra_DatePicker td, .Zebra_DatePicker th {
        padding: 3px 0 !important;
    }
}