header { text-align: center; }
#calendar { width: 100%; }
#calendar a { color: #213176; text-decoration: none; font-weight: bold }
#calendar ul { list-style: none; padding: 0; margin: 0; width: 100%; }
#calendar li { display: block; float: left; width: 14.33%; padding: 5px; box-sizing: border-box; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; }
#calendar ul.weekdays { height: 50px; background: #213176; }
#calendar ul.weekdays li { text-align: center; text-transform: uppercase; line-height: 40px; border: none !important; padding: 10px 6px; color: #fff; font-size: 1em; font-weight: bold }
#calendar .days li { height: 180px; }
#calendar .days li:hover { background: #fafafa; }
#calendar .date { text-align: center; margin-bottom: 5px; padding: 4px; background: #333; color: #fff; width: 20px; border-radius: 50%; float: right; }
#calendar .event { clear: both; display: block; font-size: 13px; border-radius: 4px; padding: 5px; margin-top: 40px; margin-bottom: 5px; line-height: 14px; background: #e4f2f2; border: 1px solid #b5dbdc; color: #009aaf; text-decoration: none; }
#calendar .event-desc { color: #666; margin: 3px 0 7px 0; text-decoration: none; }
#calendar .other-month { background: #f5f5f5; color: #666; }
#calendar .selmonth { font-weight: bold; text-align: center; font-size: 1.5em }
#calendar .selmonth span { font-size: 1.5em !important; letter-spacing: -1px }
#calendar .subject { color: #fff !important; text-decoration: none; background: #213176; font-weight: bold; text-align: center; margin:0 0 1px 0; padding:1em 0;  }

#calendar2 { width: 100%; }
#calendar2 a { color: #333; text-decoration: none; font-weight: normal; text-align:center; font-size:12px; }
#calendar2 ul { list-style: none; padding: 0; margin: 0; width: 100%; }
#calendar2 li { display: block; float: left; width: 14.33%; padding: 2px; box-sizing: border-box; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; }
#calendar2 ul.weekdays { height: 50px; background: #213176; }
#calendar2 ul.weekdays li { text-align: center; text-transform: uppercase; line-height: 40px; border: none !important; padding: 10px 6px; color: #fff; font-size: 1em; font-weight: bold }
#calendar2 .days li { min-height:460px;  }
#calendar2 .days li:hover { background: #fafafa; }
#calendar2 .date { text-align: center; margin-bottom: 5px; padding: 4px; background: #333; color: #fff; width: 20px; border-radius: 50%; float: right; }
#calendar2 .event { clear: both; display: block; font-size: 13px; border-radius: 4px; padding: 5px; margin-top: 40px; margin-bottom: 5px; line-height: 14px; background: #e4f2f2; border: 1px solid #b5dbdc; color: #009aaf; text-decoration: none; }
#calendar2 .event-desc { color: #666; margin: 3px 0 7px 0; text-decoration: none; }
#calendar2 .other-month { background: #f5f5f5; color: #666; }
#calendar2 .selmonth { font-weight: bold; text-align: center; font-size: 1.5em }
#calendar2 .selmonth span { font-size: 1.5em !important; letter-spacing: -1px }
#calendar2 .subject { color: #333 !important; text-decoration: none; /*background: #213176;*/ font-weight: bold; text-align: center; margin:0 0 1px 0; padding:1em 0;  }
#calendar2 dl.b_line { height:140px; border-bottom:1px solid #dfdfdf ; }
#calendar2 dl dt { font-weight:bold !important; font-size:14px !important; }
#calendar2 dl dd { font-weight:normal !important; font-size:12px !important; color:#666; }
/* ============================
				Mobile Responsiveness
   ============================*/
@media (max-width: 768px) {
#calendar .weekdays, #calendar .other-month { display: none; }
#calendar li { height: auto !important; border: 1px solid #ededed; width: 100%; padding: 10px; margin-bottom: -1px; }
#calendar .date { float: none; }

#calendar2 .weekdays, #calendar .other-month { display: none; }
#calendar2 li { height: auto !important; border: 1px solid #ededed; width: 100%; padding: 10px; margin-bottom: -1px; }
#calendar2 .date { float: none; }

}