﻿header {
    width: 960px;
    margin: 0 auto;
}

#innerHeader {
    position: relative;
    width: 960px;
    margin: 5px auto 24px auto;
    background-image: url("../Images/stainless steel header background.png");
    background-repeat: no-repeat;
}

    #innerHeader hr {
        vertical-align: baseline;
    }

    #innerHeader img {
        width: 183px;
        height: 126px;
        margin: 0 auto;
    }

#home-whale-logo {
    margin: 0 auto;
    width: 183px;
    height: 126px;
}

#widgetheadercontainer {
    width: 960px;
    margin: auto auto;
}

/* specials and events and reserve css */

#SpecialsWrapper, #CalendarWrapper, #revealDownReservations, #specialsEventsTitle,
#reservationsContainerTitle, .halfsizeBoxes, .fullsizeBoxes,
.promobox img {
    border-radius: 12px;
}

#specialsEventsTitle, #reservationsContainerTitle {
    position: relative;
    margin: 5px auto;
    width: 173px;
    height: 20px;
    border-radius: 0 !important;
    cursor: pointer;
}

#specialsEventsTitle {
    background: url(/Content/Images/Buttons/Package&Events-edit02092015.png) no-repeat;
}

#reservationsContainerTitle {
    background: url(/Content/Images/Buttons/Reserve.png) no-repeat;
}

    #specialsEventsTitle p, #reservationsContainerTitle p {
        color: #fff;
        font-size: 10pt;
        text-align: center;
        line-height: 13pt;
    }

.specials-events-title-wrapper, .reservation-title-wrapper {
    width: 100%;
    height: 65px;
    overflow: hidden;
    position: absolute;
    z-index: 10;
}

#SpecialsWrapper, #CalendarWrapper {
    overflow: hidden;
    width: 300px;
    position: relative;
    padding-top: 70px;
    border: 2px solid black;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#404040);
    background-image: linear-gradient(#000000, #404040);
    background-color: #404040;
}

#specialsPortals {
    margin: 16px 5px 5px;
    overflow: hidden;
}

.promobox {
    position: relative;
    width: 306px;
    height: 80px;
    z-index: 10;
}

.halfsizeBoxes {
    height: 87px;
    width: 133px;
    border: 2px solid #545454;
    color: #fff;
    background-color: #000;
}

    .halfsizeBoxes p {
        font-size: .85em;
        color: #fff;
        margin: 4px;
    }

    .halfsizeBoxes img {
        border: none;
        width: 100%;
        height: 100%;
        box-shadow: inset #ff6a00 6px -6px 4px 0;
    }

    .halfsizeBoxes:hover {
        width: 144px;
        height: 98px;
    }

.fullsizeBoxes {
    margin: 5px;
    clear: both;
}

    .fullsizeBoxes img {
        width: 285px;
        height: 96px;
        border: 2px solid #545454;
    }

/************************************************************************************************/
/*******                 Reservation controls CSS                                    ************/
/************************************************************************************************/
.reservation-title-wrapper {
    width: 249px;
}

#reservationsContainer {
    position: relative;
    margin-right: -33px;
    width: 300px;
    height: 100px;
}

#expectedArrivalDate {
    font-size: 12px;
    color: #fff;
    background-color: transparent;
    background-image: url('/media/header/arrival-bg.png');
    background-repeat: repeat-x;
    border: 1px groove #333;
}

/* UI Datepicker */

#reservationsdatepicker {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#545454);
    background-image: linear-gradient(#000, #545454);
    border-radius: 8px;
    height: 225px;
    width: 245px;
    left: 6px;
    right: 6px;
    margin: 20px auto 20px auto;
}

.ui-widget-content {
    border: none;
}

.reservationControls {
    position: relative;
    width: 179px;
    z-index: 20;
    margin: 0 auto;
    overflow: hidden;
}

.reservationsControl {
    float: left;
}

    .reservationsControl p {
        margin: 0;
        font-size: 9pt;
    }

.reservationField {
    margin: 0;
    border: none;
    font-size: 8pt;
    text-align: center;
    color: #FFF;
    background-color: #404040;
}

#dateField {
    display: block;
    width: 75px;
    height: 11.5pt;
    border: 1px solid #545454;
    border-radius: 2px 2px;
}

    #dateField.header-wrapper-expaneded {
        border: 1px solid #FFF;
        border-radius: 2px 2px;
    }

.select-dropdown {
    background-color: black;
}

span.select-dropdown {
    font-size: 11px;
    background-color: #f5f0de;
    color: #7c7c7c;
    padding: 5px 7px;
    border: 1px solid #e7dab0;
    border-radius: 2px 2px;
    line-height: 11px;
}

    span.select-dropdown.changed {
        background-color: #f0dea4;
    }

.select-dropdown-innerbox {
}

#reservationHeader {
    position: absolute;
}

#CalendarWrapper {
    top: 140px;
    height: 200px;
}

.specials-spacer {
    height: 40px;
}

.reservation-calendar {
    margin: 10px auto 0 auto;
    width: 190px;
}

#CalendarWrapper span {
    display: inline;
}

.ui-datepicker-calendar tr {
    height: 20px;
}

input:focus {
    outline-width: 0px;
}

.custom-combobox {
    position: relative;
    display: inline-block;
}

.ui-state-default .ui-icon {
    background-image: url('../Images/jquery-ui/ui-icons_cd0a0a_256x240.png');
}

.custom-combobox-input {
    width: 16px;
    height: 16px;
    margin: 0px;
    background-color: #404040;
    background-image: none;
    border-top: 1px solid #545454;
    border-left: 1px solid #545454;
    border-bottom: 1px solid #545454;
    border-right: 0px;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    height: 16px;
    width: 16px;
    margin: 0px;
    color: #761418;
    background-color: #404040;
    background-image: none;
    border-top: 1px solid #545454;
    border-right: 1px solid #545454;
    border-bottom: 1px solid #545454;
    border-left: 0px;
}

    .custom-combobox-toggle.ui-state-hover {
        color: #761418;
    }

ul.ui-autocomplete {
    overflow: visible;
    max-height: none;
    background-image: none;
    background-color: #404040;
    border: 1px solid #545454;
}
