Calendar CSS

by Adam Mendoza

HTML

<div class=calendarWrapper>
    <table id="Calendar1" class="myCalendar" cellspacing="0" cellpadding="0" title="Calendar" style="border-width: 1px; border-style: solid; font-family: Tahoma; font-size: 11px; border-collapse: collapse;">
        <tr>
            <td colspan="7" style="background-color: Silver;">
                <table class="myCalendarTitle" cellspacing="0" style="font-family: Tahoma; font-size: 11px; width: 100%; border-collapse: collapse;">
                    <tr>
                        <td class="myCalendarNextPrev" style="width: 50%;"><a href="javascript:__doPostBack('Calendar1','V5193')" style="color: Black" title="Go to the previous month">.</a></td>
                        <td align="center" style="width: 70%;">1393</td>
                        <td class="myCalendarNextPrev" align="right" style="width: 15%;"><a href="javascript:__doPostBack('Calendar1','V5255')" style="color: Black" title="Go to the next month">.</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <th class="myCalendarDayHeader" align="center" abbr="" scope="col" style="color: #2D3338;">ش</th>
            <th class="myCalendarDayHeader" align="center" abbr="" scope="col" style="color: #2D3338;">ی</th>
            <th class="myCalendarDayHeader" align="center" abbr="دو" scope="col" style="color: #2D3338;">د</th>
            <th class="myCalendarDayHeader" align="center" abbr="ﺳﻪ" scope="col" style="color: #2D3338;">ﺳ</th>
            <th class="myCalendarDayHeader" align="center" abbr="چهار" scope="col" style="color: #2D3338;">چ</th>
            <th class="myCalendarDayHeader" align="center" abbr="پنج" scope="col" style="color: #2D3338;">پ</th>
            <th class="myCalendarDayHeader" align="center" abbr="جمعه" scope="col" style="color: #2D3338;">ج</th>
        </tr>
        <tr>
            <td title="aaaaa" class="myCalendarDay" align="center" style="color: #B0B0B0; width: 14%;"><a...

CSS

.calendarWrapper{
    background-color:#4CCAEF;
    padding:10px;
    display:inline-block;
}

.myCalendar {  
    background-color: #f2f2f2;  
    width: 560px;  
    border:none !important;
}  
    .myCalendar a {  
    text-decoration: none;  }  
.myCalendar .myCalendarTitle {  
    font-weight: bold;  
    height:40px;line-height:40px;
    background-color:#4CCAEF;
    color:#ffffff;
    border:none !important;
}  
.myCalendar th.myCalendarDayHeader  
{
    height:25px;

}
.myCalendar tr{  
    border-bottom: solid 1px #ddd;
} 

.myCalendar table tr {
    border-bottom: none !important;    
}
.myCalendar tr:last-child td{  
    border-bottom: none;
}
.myCalendar tr td.myCalendarDay, .myCalendar tr th.myCalendarDayHeader{  
    border-right: solid 1px #ddd;
}
.myCalendar tr td:last-child.myCalendarDay, .myCalendar tr th:last-child.myCalendarDayHeader {  
    border-right: none;
}

  .myCalendar td.myCalendarDay:nth-child(7) a{color:#c52e2e !important;}
.myCalendar .myCalendarNextPrev {  
    text-align: center;  
}  

.myCalendar .myCalendarNextPrev a  {font-size:1px;}
.myCalendar .myCalendarNextPrev:nth-child(1) a{color:#4CCAEF!important;background:url("prevMonth.png") no-repeat center center;}
.myCalendar .myCalendarNextPrev:nth-child(1) a:hover,.myCalendar .myCalendarNextPrev:nth-child(3) a:hover{background-color:transparent;}
.myCalendar .myCalendarNextPrev:nth-child(3) a{color:#4CCAEF!important;background:url("nextMonth.png") no-repeat center center;}
.myCalendar td.myCalendarSelector a {  
    background-color: #25bae5;  
}  

.myCalendar .myCalendarDayHeader a,
.myCalendar .myCalendarDay a,   
.myCalendar .myCalendarSelector a,  
.myCalendar .myCalendarNextPrev a {  
    display: block;  
    line-height: 20px;  
}  
.myCalendar .myCalendarToday {  
    background-color: #f2f2f2; 
   -webkit-box-shadow: 1px 1px 8px 1px #8f8f8f;
        box-shadow: 1px 1px 8px 1px #8f8f8f;
        display:inline-block;
    width:22px !important;
    height:19px...