Adjusting the Accordion Menu colors etc.

I've been trying to adjust the look of the accordion menu and have not been very successful.

Two things perplex me greatly.
First. Why do the various css rules that control this menu have to be in so many disparate locations?
I thought that by using mystyles.css - which I hadn't done before, choosing instead to modify the existing css files - it might make the process easier. Boy was I wrong.
Personal opinion here - mystyles.css is a bad idea. Does any style placed there supersede the entire rule in other css files or just append the existing rules in those other files? In either case it does lead to greater confusion.
I understand the need and wisdom for using different css files in certain conditions. It seems logical to include a separate file for Spry rules. Unless I'm seriously confused there are five css files controlling that menu if you include mystyles.css.
Second. Because of the problems I decided to give Theme-It a try. Seemed a logical choice at the time.
Boy was I wrong. I can see that Theme-It might prove itself valuable under other circumstances, here it is next to worthless.
Using Theme-It, there is no way I can actually see a display of the menu and the effects had by Theme-It. The dropdown selectors in Theme-It don't help at all in describing in a cogent manner the areas they will effect. And what good is it to know that a color is used by 50 different selectors when i may want to change the value of only one?

To sum I would say that the problem of too many files controlling the same thing is most prevalent in the case I've described here but is not limited to that alone.

Any thoughts or advice on how to move forward with styling that accordion would be appreciated.

Mick