jquery accordion and dialog css conflict

jquery accordion and dialog css conflict


I am working on a site that is using a dialog to do a little pop up box to show some text. That link is on every page and works great. On one of my pages, I'm using an accordion for some navigation. The css for the accordion and the dialog widgets are conflicting with one another.

Right now you can see how it works - the accordion works fine but the dialog box is not styled correctly: http://newtestsite.jalexanders.com/locations.php

If I add the jquery css to make the dialog box work then the accordion style breaks - no matter where I put the call to the jquery stylesheet.

I've tried going to the jquery stylesheet and moving the styles for each into my local copy and working with them that way but there are so many! I thought I'd post here to see if I'm perhaps making a rookie mistake that could be easily fixed.

Here is the code (working in noconflict mode), I'd appreciate any tips you can give me!

                // general disclaimer pop up
                var dialog = jQuery("<div style='font-size:10pt;'></div>")
                    .html(" -- legal disclaimer code goes here --")
                        autoOpen: false,
                        title: "General Disclaimer",
                        buttons: {
                            "close window": function() {
                jQuery('#disclaimer').click(function(event) {
                 // accordion (nav on left) functions
                 jQuery("#accordion").accordion({ collapsible: true, active: false, autoHeight: false, navigation: true });
                    function() {
                        // first turn off any selected cities
                         jQuery( ".locationsListCities" ).each(
                            function( ){
                                jQuery( this ).removeClass('locationsListCitiesActive');
                        // then turn on just the one that was clicked on
                        return false;