﻿#prices-content .header {
    text-transform: uppercase;
    padding: 0 20px 20px 0;
    width: 100%;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.calendar, .prices {
    border-collapse: separate;
    display: table;
    margin: 10px 0;
    position: relative;
    width: 100%;
    font-size: 12px;
}
    .calendar ul, .prices ul {
        display: table-row;
        height: 20px;
    }

.prices {
    border-spacing: 3px;
}

#prices-form p {
    font-size: 12px;
}

.calendar {
    border-spacing: 2px;
}
    .calendar li {
        display: table-cell;
        padding: 3px;
    }
    .calendar li.date, .calendar li.head, .calendar li.monthhead {
        width: 30px; /* calc(100% / 21); */
        text-align: center;
    }
    .calendar li.date {
        background-color: #ffffff;
    }
    .prices .header {
        font-size: .8em;
    }
    .prices li:not(.avail) {
        display: table-cell;
        padding: 2px;
        white-space: nowrap;
    }
    .prices ul:not(.header):not(.footer):not(.discount):not(.filler) li:not(.avail), .prices .total.price, .prices .discount .price {
        border: 1px solid #efefef;
    }
    .prices .dateCol {
        /*width: 13%;*/
        width: 125px; /* fix this so the date picker icon doesn't disappear at smaller widths'*/
    }
    .prices .nightsCol {
    }
    .prices .roomCol {
        width: 25%;
    }
    .prices .bedsCol {
        /*width: 45%;*/ /* allow this to flex with the size of the window*/
    }
    .prices .priceCol {
        width: 12%;
        text-align: right;
    }
    .prices .availCol {
    }
    .prices .price {
        text-align: right;
    }
    .prices .total-desc {
        text-align: right;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }
    .prices .sel {
        background-color: #ececec;
    }
    .prices .hidden {
        visibility: hidden;
    }

.prices li.avail {
    display: table-cell;
    color: black;
    font-size: 0.8em;
    text-align: right;
}
    .prices li.avail span {
        text-align: center;
        width: 30px;
        display: inline-block;
        margin-left: 3px;
    }
.prices li.avail.Marginal span, .prices li.avail.Available span, .calendar .date.Available, .calendar .date.Marginal {
    background-color: #5fc181;
}
.prices li.avail.NotSet span {
    background-color: grey;
}
.prices li.avail.Unavailable span, .calendar .date.Unavailable {
    background-color: #c15f5f;
}

.calendar .date {
    color: black;
    font-size: .8em;
    /*border: 1px solid black;*/
}
    .calendar .date.unknown, .date.NotSet {
        background-color: grey !important;
    }
    .calendar .date:not(.range), .calendar .head:not(.range) {
        opacity: 0.60;
        -moz-opacity: 0.60;
    }
.calender li.room-name {
        
}
.calendar .month-name {
    position: absolute;
    white-space: nowrap;
    padding: 5px;
    margin-top: -20px;
    margin-left: -15px;
}
.calendar .room-name {
    width: 20vw;
    text-transform: capitalize;
    white-space: nowrap;
}


#PriceStartDate {
    /*font-family: BaskervilleOldFaceW01;*/
    font-size: inherit;
    width: 100%;
    /*letter-spacing: 0.5px;*/
    border: 0 none;
    background: #ececec url(http://images.africatravelresource.com/cdn/images/cal_icon.gif) no-repeat scroll 104px 4px;
    cursor: pointer;
    
}
.RoomType, .BedType, .RoomDateType {
    background-color: #ececec;
    border: 0 none;
    /*font-family: BaskervilleOldFaceW01;*/
    font-size: inherit;
    left: -2px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
#Nights, #SelectedCurrency {
    background-color: #ececec;
    border: 1px solid #cccccc;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    width: auto;
}

.avail-buttons a {
    width: 16px;
    height: 32px;
    display: inline-block;
    /*opacity: 0.4;
    -moz-opacity: 0.4;*/
}
.avail-next-week {
    background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -157px;
    -ms-transform: rotate(180deg) scale(0.9);
    -webkit-transform: rotate(180deg) scale(0.9);
    transform: rotate(180deg) scale(0.9);
    height: 32px;
    width: 16px;
}
    .avail-next-week:hover {
        -ms-transform: rotate(180deg) scale(0.9);
        -webkit-transform: rotate(180deg) scale(0.9);
        transform: rotate(180deg) scale(0.9);
        background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -189px;
    }

.avail-prev-week {
    background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -157px;
    /*transform: none;*/
    height: 32px;
    width: 16px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
}
    .avail-prev-week:hover {
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        transform: scale(0.9);
        background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -189px;
    }

#discount-content p.header {
    height: 24px;
    width: calc(100% - 16px);
    border-bottom: 1px solid #d0d0d0;
    padding: 8px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: black;
    letter-spacing: 1px;
    font-size: 12px;

}
#discount-content .discount {
    margin-bottom: 20px;
    border: 1px solid #d0d0d0;
}
.discount p {
    /*padding: 1px 5px 1px 5px;*/
    padding: 8px;
    font-size: 12px;
}
.discount p.header span:nth-child(1) {
    float: left;
    margin-left: 5px;
}
.discount p.header span:nth-child(2) {
    float: right;
    margin-right: 5px;
}

#discount-content .staydates {
    padding-bottom: 0;
}
#discount-content .quotedates {
    padding-top: 0;
}

#discount-content .quotedates span, #discount-content .staydates span {
    text-transform: uppercase;
}



#prices-content.admin .prices,
#prices-content.admin .calendar {
    font-size: 14px;
}

    #prices-content.admin .calendar .room-name {
        width: 10vw;
        text-transform: capitalize;
        white-space: nowrap;
    }