/*===( STRUCTURE AND POSITION )===*/

/* common styles */
.calMonthHeading { text-align: center; padding: 3px 4px; }
.calMonth
{
	/* overflow: auto; */
	zoom: 1;
}
.calMonth table
{
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0px;
}
.calMonth td, .calMonth th
{
	padding: 1px;
	margin: 1px;
}
td.calDay {  width: 14%; height: 4em; vertical-align: top; }

.calLinks { position: relative; margin: 3px 0px 3px 0px; padding: 0px; text-align: left; }
.calLinks .next { position: absolute; right: 0px; }
.calMonth IMG { border: none; }
.eventLink { display: block; text-decoration: none; }

/* weekday hiding for small calendars */
.leftColumn .calDayHeading .medium, .rightColumn .calDayHeading .medium { display: none; }
.leftColumn .calDayHeading .long, .rightColumn .calDayHeading .long { display: none; }
.calDayHeading .long { display: none; }

/* height for small calendars */
.leftColumn TD.calDay, .leftColumn TD.calendar_small_event_title,
.rightColumn TD.calDay, .rightColumn TD.calendar_small_event_title
{ height: 18pt; }


/*=== tooltip-like event info display... ===*/
.eventTip
{
    position: absolute;
    bottom: 100%;
    right: -10%;
    display: none;
    border-style: solid;
    border-width: 1px;
	text-decoration: none;
    padding: 5px;
    z-index: 5;
    width: 220px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.oldie .leftColumn .eventTip { left: -50%; } 
.oldie .rightColumn .eventTip { right: 50%; }


/* for the capable browsers, let's position these better */
table.calendarTable tr td.calDay:nth-child(1) .eventTip { left: 0;}
table.calendarTable tr td.calDay:nth-child(2) .eventTip { left: -33%;}
table.calendarTable tr td.calDay:nth-child(3) .eventTip { left: -66%;}
table.calendarTable tr td.calDay:nth-child(4) .eventTip { left: -100px;}
table.calendarTable tr td.calDay:nth-child(5) .eventTip { right: -66%;}
table.calendarTable tr td.calDay:nth-child(6) .eventTip { right: -33%;}
table.calendarTable tr td.calDay:nth-child(7) .eventTip { right: 0;}

.mouseDetect { position: relative; display: block; }
.mouseDetect:hover .eventTip { display: block; }
.tipTitle { font-weight: bold; }
a .eventTitle { text-decoration: underline; }

/* tip widths */
/* table.calendarTable tr td.calDay * { max-width: 700% !important; } */

/*===( STYLE AND COLOR )===*/
.calMonth {	clear: both; }
.calMonth table { background-color: #888; }
.calMonth td, .calMonth th
{
	border: 1px solid #888;
}
.calMonthName, .calYear
{
    font-size: 130%;
    color: white;
    font-weight: bold;
}
.calDayHeading th
{
    background-color: #777;
    color: white;
    letter-spacing: 0px;
    text-align: center;
	font-weight: normal;
}
.calDayHeading span { font-size: 110%; }

.calDay
{
    font-size: 80%;
    color: black;
    vertical-align: top;
    background-color: white;
}
.calDayNum { display: block; }
.calGrayDay
{
    background-color: #CCC;
    color: #333;
}
.calToday { background-color: #FFD; }
.calToday .eventTitle, .calToday .calDayNum { font-weight: bold; }
.eventTip
{
    border-color: #999;
	border-color: rgba(0,0,0,0.4);
    background-color: #FF8;

}

/* font size for next and prev months - stop making them so small */
.calMonth .small.calLinks { font-size: 100%; margin-bottom: 10px; }
.calMonth .small.prev, .calMonth .small.next { font-size: 100%; }



/* new circle calendars */
._calwithevents { vertical-align: top; }
._calendarbox, ._eventsbox {
	/* display: inline-block;
	width: 48%; */
	vertical-align: top; 
}
._eventsbox { padding-top: 15px; }
._eventsbox h2 { font-size: 14pt; }
.calMonth .chevron { display: none; font-size: 130%; padding: 1px 5px 1px 10px; }
.calMonth .chevron.previous { float: left; }
.calMonth .chevron.next     { float: right; }

.circleDate { 
    background: #686868;
    color: white;
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    height: 80px;
    width: 80px;
    line-height: 1;
    vertical-align: middle;
    float: left;
    margin: 0 10px 10px 0;
}
.circleDate .day { font-size: 24pt; }


/* modern calendar */
._moderncalendar .calMonth table {
    background: #333;
    color: #fff;
    border: none;
    border-spacing: 0;
    border-collapse: separate;
    font-size: 90%;
    position: relative;
}
._moderncalendar .calMonth .calMonthName, .calMonth .calYear { color: #333; }
._moderncalendar .calMonthHeading {
    background: #fff;
    color: #333;
    border: none;
    font-size: 90%;
}
._moderncalendar .calDayHeading th {
    background: #343434;
    color: #fff;
    padding: 8px 0;
    font-weight: 600;
}
._moderncalendar .calendarTable .calDayHeading th span.medium { display: none; }
._moderncalendar .calendarTable .calDayHeading th span.long { display: none; }
._moderncalendar .calDay.calGrayDay {
    background: #fff;
    color: #767676;
}
._moderncalendar td.calDay {
    background: #fff;
    color: #333;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
}

._moderncalendar table.calendarTable .calDay a hr { display: none; }
/* ._moderncalendar table.calendarTable .calDay a.eventLink { display: none; margin: 1px; } */
._moderncalendar .calDay .calDayNum { 
    display: inline-block; 
    border-radius: 50%;
    padding: 5px;
    text-align: center;
    line-height: 1.7;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin: 0;
}
._moderncalendar .calDay .eventLink { display: none; }
._moderncalendar .calDay.calEvent .calDayNum { background: #686868; color: #fff; }
._moderncalendar .calMonth td, .calMonth th { border: none; }
._moderncalendar td.calDay.calToday { border: 1px solid #686868; }
._moderncalendar .calToday .calDayNum { 
    /* background: #333;
    color: #fff; */
}
._moderncalendar .calMonth .chevron { display: inline-block; }
._moderncalendar div.small.calLinks { display: none; }
._moderncalendar .eventTip {
    color: black;
    border-color: #777777;
    background-color: #f0f0f0;
    border-radius: 3px;
}
._moderncalendar .calToday .calDayNum { background: inherit; color: inherit; }
._moderncalendar .dayeventscontainer { position: relative; top: 0; left: 0; height: 0; }
._moderncalendar .dayevents {
    display: none;
    background: white;
    background: rgba(255,255,255,0.9);
    color: #333;
    position: absolute; top: 5px;
    border: 1px solid #555;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    text-align: left;
    padding: 5px 10px;
    position: absolute;
}
._moderncalendar .dayevents a.eventLink {
    display: block;
    text-align: left;
    text-decoration: underline;
    font-size: 125%;
}
._moderncalendar .dayevents .eventDates { font-size: 90%; }
._moderncalendar .calDay:hover .dayevents { display: inline-block; }

._moderncalendar table.calendarTable tr td.calDay:nth-child(1) .dayevents { left: 0;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(2) .dayevents { left: -33%;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(3) .dayevents { left: -66%;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(4) .dayevents { left: -100px;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(5) .dayevents { right: -66%;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(6) .dayevents { right: -33%;}
._moderncalendar table.calendarTable tr td.calDay:nth-child(7) .dayevents { right: 0;}

@media (min-width:900px) {
    ._moderncalendar td.calDay { padding: 3px; }

    /* .mainContent.hasLeft.hasRight ._moderncalendar td.calDay { padding: 5px 1px; }
    .mainContent.hasLeft.hasRight ._moderncalendar .calDay .calDayNum { width: 25px; height: 25px; padding: 3px; } */

    .mainContent ._calendarbox.ModernPlusRight, 
    .mainContent ._eventsbox.ModernPlusRight,
    .mainContent ._calendarbox.HA_Cal_ModernPlusRight, 
    .mainContent ._eventsbox.HA_Cal_ModernPlusRight {
        display: inline-block;
        width: 48%;
        padding: 15px;
    }

    /* override if they have left and right columns */
    .mainContent.hasLeft.hasRight ._calendarbox.ModernPlusRight, 
    .mainContent.hasLeft.hasRight ._eventsbox.ModernPlusRight,
    .mainContent.hasLeft.hasRight ._calendarbox.HA_Cal_ModernPlusRight, 
    .mainContent.hasLeft.hasRight ._eventsbox.HA_Cal_ModernPlusRight {
        display: block;
        width: 100%;
    }

}

@media (min-width:1400px) {
    .mainContent.hasLeft.hasRight ._calendarbox.ModernPlusRight, 
    .mainContent.hasLeft.hasRight ._eventsbox.ModernPlusRight,
    .mainContent.hasLeft.hasRight ._calendarbox.HA_Cal_ModernPlusRight, 
    .mainContent.hasLeft.hasRight ._eventsbox.HA_Cal_ModernPlusRight {
        display: inline-block;
        width: 48%;
        padding: 15px;
    }
}

@media (min-width:1600px) {
    ._moderncalendar td.calDay { padding: 10px; }
}