JQuery CSS Overridden?

JQuery CSS Overridden?

Hi folks,

I'm currently doing some playing around with this page for testing:   http://dev.altonacitytheatre.com.au/snaffleme.

The site already has a large CSS file, and after including the JQuery CSS file and calling the DatePicker inline on a Div I find that the styling is pretty badly messed up.

An example is this in the JQuery CSS:
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }

Being overridden by this:
th, thead th { font-weight: 700; color: #333; background: url(../../images/topnav.jpg) repeat-x top #CCC; }

Now, I'm no gun when it comes to CSS, so I was hoping one of you more benevolent knowledgeable types might be able to help me work out the easiest way to get my widget(s) to display with the proper theming without messing up the CSS elsewhere on the site.

Can anyone help me out?