#monthname{margin:0 auto 0 auto; text-align: center;}
#calWrap { margin: 0 auto 0 auto; text-align: center; }
#calendar{ font-family:Tahoma; margin: 0 auto; text-align: center; }
    #calendar a {
        color: #666;
        text-decoration: none;
    }
#calendar li{
    display:block;
    float: left;
    width: 14.3%;

    border: 1px solid #ccc;
    margin-right: -1px;
    margin-bottom: -1px;
}

#calendar ul.weekdays  {list-style:none; margin: 0 auto 0 auto; text-align:center; clear:both;}
 #calendar ul.weekdays li{
     background-color:#333;
    text-align: center;
    text-transform: uppercase;
    line-height: 20px;
 
   
    color: #fff;
    font-size: 13px;
    width: 14.3%;
}

 
#calendar ul.days{
    height: 40px;
     
}

.days li{
    height:120px;
    text-align:center;

    width:76.65%;
}
.days li:hover{background: #eee;}
.date {
    text-align: center;
    margin-bottom: 4px;
    padding: 4px;
    background: #333;
    color: #fff;
    width: 25px;
    float: right;
}

.event{
    clear: both;
    display: block;
    font-size: 12px;
    border-radius: 4px;
    padding: 4px;
    margin-top: 20px;
    margin-bottom: 1px;
    color:#666;
    line-height: 12px;
    background: #e4f2f2;
    border: 1px solid #b5dbdc;
    color: #009aaf;
    text-decoration: none;
    width: 100%;
    height: 74%;
    text-align:left;
}

.desc{
    color: #666;
    margin: 3px 0 7px 0;
    text-decoration: none;
}

.other{
    background: #f5f5f5;
    color: #666;
}

.empty{
    clear: both;
    display: block;
    font-size: 12px;
    border-radius: 4px;
    padding: 4px;
    margin-top: 0px;
    margin-bottom: 1px;
    color:#666;
    line-height: 12px;
    background: #fff;
    border: none;
    color: #009aaf;
    text-decoration: none;
    width: 100%;
    height: 74%;
    text-align:left;
}

.otherempty{
    clear: both;
    display: block;
    font-size: 12px;
    border-radius: 4px;
    padding: 4px;
    margin-top: 0px;
    margin-bottom: 1px;
    color:#666;
    line-height: 12px;
    background: #f5f5f5;
    border: none;
    color: #009aaf;
    text-decoration: none;
    width: 100%;
    height: 74%;
    text-align:left;
}

@media(max-width:768px){
    #calendar .weekdays, #calendar  .other{
        display: none;
    }
    #calendar li{
        height: auto !important;
        border: 1px solid #ededed;
        width: 100%;
        padding: 8px;
        margin-bottom: -1px;
    }

   #calendar .date {float: none;}
   #calendar {padding: 1px;}
   .empty {height: 56px;}
   .event {height: 56px;}
}