Newb vs datepicker

Newb vs datepicker

Hi I just started playing around with jQuery yesterday.  I'm impressed with most everything I've seen so far.  I think, especially, that the documentation is really good.

I'm having a bit of a problem with datepicker--when I use beforeShowDay to turn off certain dates and set the color of other dates, I can close dates just fine but the coloring of the dates fails.  Looking at the behind-the-scenes code in Firebug I see:
<td class=" CA" onclick="...yada...yada..." title="Oh happy day">
   <a class="ui-state-default" href="#">5</a>
</td>

The CSS for CA is defined, plus I use it in the legend where the datepicker is displayed so I know it works:
            .CA {
                color: #deb305;
            }

To me, it looks like the problem is "ui-state-default" is overriding my CA color.  ( I checked the CSS and ui-state-default has a color that I selected when I ran themeroller.)

Versions:
jquery-ui-1.8.custom.min.js
jquery-1.4.2.min.js
jquery-ui-1.8.custom.css

Note: After running themeroller I created a sort of minimum installation where I left everything checked except that in the widgets the only thing I checked was datepicker.

Here's my code:

CSS
  1.         <style type="text/css">
                .MS {
                    color: #00a0d4;
                }
                .CA {
                    color: #deb305;
                }           
                .C {
                    color: #fb3904;
                }           
               
            </style>










The datepicker javascript
  1.             $(function(){

                    // Datepicker
                    $('#datepicker').datepicker({
                        inline: true,
                        beforeShowDay: setAvailabilityDays
                    });
                   
                    //hover states on the static widgets
                    $('#dialog_link, ul#icons li').hover(
                        function() { $(this).addClass('ui-state-hover'); },
                        function() { $(this).removeClass('ui-state-hover'); }
                    );
                   
                });
               
                function setAvailabilityDays(date) {
                    var minStayObj = [[4, 5, 2010, 'MS'], [4, 6, 2010, 'MS'], [4, 7, 2010, 'MS']];
                    var closedToArrObj = [[4, 4, 2010, 'CA'], [4, 5, 2010, 'CA'], [4, 6, 2010, 'CA']];
                    var closedObj = [[4, 2, 2010, 'C'], [4, 3, 2010, 'C'], [4, 4, 2010, 'C']];
                    var isOpen = 1;
                    var dayColor = "";
                    // Check for minimum stay
                    for (i = 0; i < minStayObj.length; i++) {
                        if (date.getMonth() == minStayObj[i][0] - 1 && date.getDate() == minStayObj[i][1] && date.getFullYear() == minStayObj[i][2]) {
                            isOpen = 1;
                            dayColor = minStayObj[i][3];
                        }
                    }
                    // Check for closed to arrival
                    for (i = 0; i < closedToArrObj.length; i++) {
                        if (date.getMonth() == closedToArrObj[i][0] - 1 && date.getDate() == closedToArrObj[i][1] && date.getFullYear() == closedToArrObj[i][2]) {
                            isOpen = 1;
                            dayColor = closedToArrObj[i][3];
                        }
                    }               
                    // Check for no availability
                    if (closedObj != null) {
                        for (i = 0; i < closedObj.length; i++) {
                            if (date.getMonth() == closedObj[i][0] - 1 && date.getDate() == closedObj[i][1] && date.getFullYear() == closedObj[i][2]) {
                                isOpen = 0;
                                dayColor = closedObj[i][3];
                            }
                        }
                    }  
                    return [isOpen, dayColor, 'Oh happy day'];                 
                }
















































Datepicker HTML:
  1.         <!-- Datepicker -->
            <h2 class="demoHeaders">Datepicker</h2>
            <div id="datepicker"></div>
            <span class="
            C">No availability</span><br />
            <span class="
            CA">Closed to arrival</span><br />
            <span class="
            MS">Minimum Stay Restriction</span><br />










Thanks for any help!

Marlin