html, body, form
{
    height: 100%;
    margin: 0px;
}

.page
{
    /*height: calc(100% - 30px); footer height*/
    height: 100%;
}

#maindiv
{
    height: 100%;
}

#CalendarPanelContainer
{
    height: calc(100% - 43px); /*ColumnTitleContainer height*/
}

.mainContentWrapper {
    display: table-row;
    height: 100%;
}

#MainContent_UpdatePanelCalendar
{
    display: block;
    height: 100%;
}
#UpdatePanelCalendarWrapper
{
    display: table;
    width: 100%;
    height: calc(100% - 43px);
}
#MainContent_FilterPanel {
    display: table-row;
    width: 100%;
}
#UpdatePanelCalendarContainer
{
    display: table-row;
    width: 100%;
    height: 100%;
}
.filterPanelFilterControls
{
    margin-bottom: 2px;
}
.calendarFilterOptions
{
    width: 32%;
}
.calendarDateButton
{
    width: 32%;
}

#MainContent_FilterPanel input[type="submit"], select
{
    margin: 0px;
}

.wrapper
{
    display: table;
    height: 100%;
    width: 100%;
}
.header
{
    display: table-row;
}
.content
{
    display: table-row;
    height: 100%;
}
.innerContent
{
    display: table-cell;
    height: 100%;
    width: 100%;
}
.text-bottom
{
    margin-top: 4px;
}

/* REGISTER BOX
----------------------------------------------------------*/

/* register close button */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    width: 60px;
    height: 60px;
}
.ui-dialog .ui-dialog-titlebar-close
{
    margin: -30px 0px 0px 0px;
}

/* register title bar height */
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix
{
    height: 50px;
}
.ui-dialog-title
{
    line-height: 40px;
    font-size: 30px;
}

/* EVENT CONTROL - FULLY CLICKABLE
----------------------------------------------------------*/
.openEventOverlayButton
{
    z-index: 10;
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    text-decoration: none;
}

/* MOBILE
----------------------------------------------------------*/
@media only screen and (min-width: 900px)
{
    .dayColumnEventTitleLinkFont
    {
        font-size: 32px;
    }
    .calendarDateButton
    {
        font-size: 32px;
        min-height: 80px;
    }
    .calendarFilterOptions
    {
        font-size: 32px;
        min-height: 80px;
    }
    .siteMasterLinks
    {
        font-size: 32px;
    }
    .calendarDateHeader
    {
        font-size: 32px;
    }
    .dayColumnEventClockFont
    {
        font-size: 28px;
    }
}

@media only screen and (max-width: 900px)
{
    .dayColumnEventTitleLinkFont
    {
        font-size: 28px;
    }
    .calendarDateButton
    {
        font-size: 28px;
        min-height: 65px;
    }
    .calendarFilterOptions
    {
        font-size: 28px;
        min-height: 65px;
    }
    .siteMasterLinks
    {
        font-size: 28px;
    }
    .calendarDateHeader
    {
        font-size: 28px;
    }
    .dayColumnEventClockFont
    {
        font-size: 24px;
    }
}

@media only screen and (max-width: 700px)
{
    .dayColumnEventTitleLinkFont
    {
        font-size: 26px;
    }
    .calendarDateButton
    {
        font-size: 26px;
        min-height: 60px;
    }
    .calendarFilterOptions
    {
        font-size: 26px;
        min-height: 60px;
    }
    .siteMasterLinks
    {
        font-size: 26px;
    }
    .calendarDateHeader
    {
        font-size: 26px;
    }
    .dayColumnEventClockFont
    {
        font-size: 22px;
    }
}

@media only screen and (max-width: 500px)
{
    .dayColumnEventTitleLinkFont
    {
        font-size: 24px;
    }
    .calendarDateButton
    {
        font-size: 24px;
        min-height: 50px;
    }
    .calendarFilterOptions
    {
        font-size: 24px;
        min-height: 50px;
    }
    .siteMasterLinks
    {
        font-size: 24px;
    }
    .calendarDateHeader
    {
        font-size: 24px;
    }
    .dayColumnEventClockFont
    {
        font-size: 20px;
    }
}

@media only screen and (max-height: 500px)
{
    .filterPanelFilterControls
    {
        display: none;
    }
}