/* Sold out and limited availability styles */
.soldOut {
    color: Red;
}

.limited {
    color: darkgreen;
}

/* Outer calendar styling including the next/previous first/last month navigation and month name title */
.calendarTable {
    padding: 0;
    width: 100%;
    border-collapse: collapse;
}

.calendarTitle {
    font-size: 25px;
    font-weight: bold;
    color: Navy;
    text-align: center;
    padding: 10px;
    background-color: white;
}

.calendarPreviousMonth {
    font-size: 25px;
    font-weight: bold;
    color: Navy;
    text-align: left;
    padding: 10px;
    background-color: white;
    width: 25%;
}

.calendarNextMonth {
    font-size: 25px;
    font-weight: bold;
    color: Navy;
    text-align: right;
    padding: 10px;
    background-color: white;
    width: 25%;
}
/* end outer calendar styling */

/* Main Calendar control Styling */
.calendar {
    width: 100%;
    height: auto;
    border-color: navy;
    border-style: outset;
    border-width: 1px;
}

.calendarDayHeaderStyle {
    border-color: navy;
    border-style: outset;
    border-width: 1px;
    background-color: transparent;
    font-weight: bold;
    font-size: 10pt;
    color: navy;
    height: 10px;
    text-align: center;
    vertical-align: middle;
}

.calendarDayStyle {
    height: 150px;
    color: navy;
    background-color: transparent;
    border-color: Navy;
    border-style: Solid;
    border-width: 1px;
    vertical-align: top;
    text-align: Left;
}

.calendarTodayStyle {
    color: navy;
    background-color: transparent;
    font-weight: bold;
    vertical-align: top;
    text-align: Left;
    border-color: Navy;
    border-style: Solid;
    border-width: 1px;
}

.calendarSelectedDayStyle {
    background-color: transparent;
    color: navy;
    vertical-align: top;
    text-align: Left;
}

.calendarOtherMonthDayStyle {
    height: 150px;
    color: navy;
    background-color: lightgray;
    border-color: Navy;
    border-style: Solid;
    border-width: 1px;
    vertical-align: top;
    text-align: Left;
}

.calendarWeekendDayStyle {
    height: 150px;
    color: navy;
    background-color: transparent;
    border-color: Navy;
    border-style: Solid;
    border-width: 1px;
    vertical-align: top;
    text-align: Left;
}
/* End main calendar control styling */

/* Calendar show name link in popup dialog styling */
.calendarShowLink {
    cursor: pointer;
    color: Navy;
    text-decoration: none;
}

/* Calendar show name link in main calendar styling */
.calendarDayShowLink {
    cursor: pointer;
    color: Navy;
    text-decoration: underline;
}

/* Calendar show time link in main calendar and popup dialogs styling */
.calendarShowTimeLink {
    cursor: pointer;
    color: Navy;
    text-decoration: underline;
}

/* Calendar click for more link in main calendar styling */
.calendarClickForMoreLink {
    cursor: pointer;
    color: Navy;
    text-decoration: underline;
}


/* Popup styling for clicking on a show name or 'Click for more' link */
.calenderDayPopUp {
    background-color: LightGoldenrodYellow;
    color: Black;
    border: 1 solid black;
    border-collapse: collapse;
    border-style: solid;
    padding: 3px 10px 5px 10px;
    position: absolute;
    margin: -50px 0 0 0;
    min-width: 250px;
    max-height: 250px;
    overflow: auto;
}

/* Show/hide the venue name in the popup in name mode when clicking "Show More" link */
.calenderDayPopUpVenueName {
    display: inline;
    color: navy;
}

/* Style the pop up date title */
.calenderDayPopUpTitle {
    color: Navy;
    margin: 0;
    padding: 0;
}

/* slider that is used in name mode in the popup to show the times for a show */
.calenderDayPopUpSlider {
    background-color: white;
    padding: 5px 10px 10px 10px;
}

/* Show/hide the venue name in the popup in name mode when clicking show name on main calendar */
.calendarTimeDisplayShowVenue {
    display: inline;
    margin-bottom: 5px;
}

/* Sets the style on the venue name shown on the main calendar and popups when in time mode */
.calendarTimeModeVenue {
    color: Navy;
}

/* this is here to allow times to display inline and not start a new line */
.inlineDiv {
    display: inline;
}

/* Change the margin top to increase/decrease the spacing between items on the day/popups */
#spacer {
    display: block;
    margin-top: 15px;
}