.ui-datepicker-calendar tr td a
{
 /*  
    color: #000000;
    padding: 5px;
    width: 40px;
    height: 40px; 
    font-size: 20px !important;
*/
    
    color: #000000;
padding: 5px;
width: 40px;
height: 40px;
/*margin-top: 10px;*/
font-size: 16px !important;
    
}

.ui-datepicker-calendar tr td a:hover
{
   color: #000000; 
}

.ui-datepicker-calendar tr td
{
    width: 14.2%;
    /*height: 50px;*/
    padding: 5px;
    text-align: center;
    vertical-align: top;
    height:150px;
}


.ui-datepicker th
{
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #000000;
}

.ui-datepicker td span, .ui-datepicker td a
{
    display: inline-block;
    font-weight: normal;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}


.ui-state-default
{
    color: black;
    font-size: 16px;
    border-radius: 3px;
    border: grey;
}

/*the below code controls the dates section of the main calendar with colours/fonts based on availability */


.tbHtmlDateDetails tr
{
    border-bottom: 7px solid #fff;
}
.tdAvailable .ui-state-default
{
    background: #5cb85c;
    height: 50px !important;
    width: 90%;
    font-size: 20px !important;
    padding-top: 10px;
    color: #000000;
    font-weight: bold;
}


.tdAvailable:hover .ui-state-default
{
    color: #ffffff;
    background-color: #449d44;
}

.tdLimited .ui-state-default
{
    background: #f0ad4e;
    height: 50px !important;
    width: 90%;
    font-size: 20px !important;
    padding-top: 10px;
    color: #fff;
    font-weight: normal;
}



.tdLimited:hover .ui-state-default
{
    color: #ffffff;
    background-color: #ec971f;
}
.tdSold .ui-state-default
{
    background: #d9534f;
    height: 50px !important;
    width: 90%;
    font-size: 20px !important;
    padding-top: 10px;
    color: #fff;
    font-weight: normal;
}


.tdSold:hover .ui-state-default
{
    color: #ffffff;
}
/*the below code controls the popup section with colours/fonts etc*/


#cboxLoadedContent .tdAvailable
{
    cursor: pointer;
    background: #5cb85c;
    width: 200px;
    text-align: center;
    padding: 22px;
    color: #fff;
    font-size: 20px;
}


#cboxLoadedContent .tdAvailable:hover
{
    color: #ffffff;
    background-color: #449d44;
}




#cboxLoadedContent .tdSold
{
    cursor: pointer;
    background: #d9534f;
    width: 200px;
    text-align: center;
    padding: 22px;
    color: #fff;
    font-size: 20px;
}


#cboxLoadedContent .tdSold:hover
{
    color: #ffffff;
   
}


#cboxLoadedContent .tdLimited
{
    cursor: pointer;
    background: #f0ad4e; 
    width: 200px;
    text-align: center;
    padding: 22px;
    color: #fff;
    font-size: 20px;
}

#cboxLoadedContent .tdLimited:hover
{
    color: #ffffff;
   background-color: #ec971f;
}





 @media (max-width: 767px)
 
 {
   .ui-datepicker-calendar tr td a
{
    font-size:12px !important;
    width: auto;
    height: auto;
    } 
    
    .ui-datepicker-calendar tr td {height:auto !important;}  
    
    
     }