jQuery UI Calendar displays too large, would like the demo size?

Question

So I downloaded a custom themed UI for jQuery and added the calendar control to my site (Example: link text). In the example it shows/displays the size I would like but on my webpage it's about twice the size. why???

I do have a ton of other CSS but I don't have control over the look and feel of the page (Can't touch current CSS, MEH!!). Is there a way to get the demo look on my site?

I think this is the code that jQuery UI has that might be complicating things

/* Component containers ----------------------------------*/ .ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; } .ui-widget-content a { color: #616161; } .ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; } .ui-widget-header a { color: #fff; } 

It's part of the Custom UI CSS

Answer 1

I figured it out. It was the font size that was throwing the whole thing off. I added this tag to correctly display the size I wanted:

#ui-datepicker-div { font-size: 12px; }  

Works great if anyone else needs something like this