/*------------------------------------------------------------
   Calendar - Grid and List for Desktop
------------------------------------------------------------*/
/* Styles for Grid and List */
.calendar
{
   border-collapse: collapse;
   border: 0px;
   border-left: solid 1px #ccc;
   border-right: solid 1px #ccc;
   margin-left: 0px;
   padding: 0px;
   width: 100%;
}

.calendar tr { vertical-align: top; }


/* Header Area: [-] Jan, 2014 [+] ... Month, Week, Day */
.calendar th
{
   border: solid 1px #666;
   background-color: #002d73;
   font-size: 1.4rem;
   font-weight: bold;
   line-height: 1.0;
   text-align: left;
   color: #fff;
   padding: 1em;
}

.calendar th .viewDate { float: left; margin: 0; }
.calendar th .viewType { float: right; white-space: nowrap; }

.calendar th a, .calendar th a:link, .calendar th a:visited { color: #fff; text-decoration: none; }

.calendar th a:hover, .calendar th a:active { color: #ffc400; text-decoration: underline; }

.calendar th a.viewSel { color: #ffc400; }


/* Header Area: Day | Time | Event ...or... Mon | Tue | Wed | Thu | Fri | Sat | Sun */
.calendar th.colName
{
   border: solid 1px #ccc;
   background-color: #eee;
   font-size: 1.4rem;
   font-weight: bold;
   text-align: left;
   color: #666;
   padding: 7px;
}


/* Event Area: Data for each day */
.calendar td
{ 
   border-right: solid 1px #ccc;
   border-bottom: solid 1px #ccc;
   font-size: 1.2rem;
   line-height: 1.2;
   font-weight: normal;
   color: #666;
   vertical-align: top;
   padding: 0;
   width: 100%;
   height: auto;
}

/* Current Day background color */
.calendar td.highlight { background-color: #eee; } 

.calendar td p
{
   font-size: inherit;
   line-height: 1.3;
}

.calendar td a 
{
  /* color: #ffc400; */
  text-decoration: none;
  line-height: 1.3;
}


/* Style for Grid - month is only layout displayed as classic calendar grid */
/* Header Area: Mon, Tue, Wed, Thu, Fri, Sat, Sun */
.calendarGrid th.colName { text-align: center; }

/* Event Area: Data for each day */
.calendarGrid td,
.calendarGrid td.dayEmpty
{ 
   display: table-cell;
   padding: 8px;
   width: 14%;
   height: 80px;
   float: none;
}

/* 8, 9, 10, etc. The day of the month on Grid format */
.calendarGrid td .dayShort
{
   display: block;
   /* background-color: #aaa; */
   font-size: 1.2rem;
   font-weight: bold;
   text-align: right;
   margin-bottom: 6px;
}

/* Nov 11, Nov 12, etc. The day of the month when Grid is shrunk to mobile format */
.calendarGrid td .dayLong { display: none; }

.calendarGrid td .time { font-weight: bold; color: #666; }

/* Display full Grid even if empty on desktop, message shown instead on mobile */
.calendarGrid tr.monthEmpty { display: none; }

/* Legend of icons below calendar */
.calendarGrid .legend { display: table-row; }


/* Styles for List format: Day, Time and Event columns */
/* Event Area: Data for each day */
.calendarList td { padding: 6px; }
.calendarList td.date { color: #000; width: 13%; }
.calendarList td.time { color: #000; width: 13%; }
.calendarList td.info { width: auto; }

.calendarWeekList td.time { width: 13%; }
.calendarWeekList td.info { width: auto; }


/*------------------------------------------------------------
   Calendar - Grid and List for Mobile
------------------------------------------------------------*/
@media only screen and (max-width: 600px) {

   .calendar th .viewDate { float: none; margin: 0 0 10px 0; }
   .calendar th .viewType { float: none; }

   /* Grid Event Area: Data for each day */
   /* Collapse 7 column calendar grid down to a single column */
   .calendarGrid td
   {
      display: block;
      padding: 0;
      width: 100%;
      height: auto;
      float: left;
   }

   /* Don't show empty days on collapsed single column layout */
   .calendarGrid td.dayEmpty { display: none; }

   /* Don't show day of month: 8, 9, 10, etc. */
   .calendarGrid td .dayShort { display: none; }

   /* Show day of month as: Nov 11, Nov 12, etc. on mobile format*/
   .calendarGrid td .dayLong
   {
      display: block;
      background-color: #ddd;
      border-bottom: solid 1px #ccc;
      color: #666;
      font-size: 1.4rem;
      line-height: 1.0;
      text-align: left;
      padding: 7px 0px 5px 15px;
      margin-bottom: 10px;
   }

   .calendarGrid td p { padding-left: 15px; }

   /* Display "Empty" when month is empty on mobile, don't display full Grid */
   .calendarGrid tr.monthEmpty { display: inline; }
   .calendarGrid tr.monthEmpty td { width: auto; padding: 8px; }

   /* Legend of icons below calendar */
   .calendarGrid .legend { display: none; }
}