New SpryWidget .CSS for a New Page

Question

I have the whole spry arsenal of files on a website in a separate folder. I am already using several widgets and functions from that and among others also a "spry collapsible panel" widget on one of the pages.
Now, I would like to use it once again on a new page (on the same site), but when I insert the widget it gives me the same SpryCollapsiblePanel.css as the one already used for the previous widget. But I want to give the panel a different look and feel as it has some other purpose on the new page.
What is the correct procedure to get a fresh untampered "SpryCollapsiblePanel.css" for the new widget on a new page?
Thank you!

Answer 1

I notice (finally got the page!) that the lowest element in the 'drop up' menu overlays the main menu title...a byproduct of needing perhaps one more item's height in margin-top negative pixels!
I suppose it is a small consolation, but IE 8 seems to be rendering the menus accurately, with the sub-submenus flying out relative to their own submenus.
The only workaround that comes to mind (for all the other browsers out there) is to set up new classes to apply to subsubmenus:
ul.MenuBarHorizontal ul    /*this is the usual markup; you can leave this in */
    margin-top:-177px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 160px;
    position: absolute;
    left: -1000em;
/*add the following, to offset the top margin by multiples of the height of a single item */
ul.MenuBarHorizontal ul ul.three  {margin-top: 90px;}
ul.MenuBarHorizontal ul ul.two {margin-top: 60px;}
ul.MenuBarHorizontal ul ul.one {margin-top: 30px;}
For instance, the Ladakh Treks subitems want to offset from the top 30px to align with their parent, Ladakh Treks, so I use the <ul class="one"> to drop that sublist 30px down from the top of the container.
<li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/treks.html" target="_blank" class="MenuBarItemSubmenu">Ladakh Treks</a>
      <ul class="one">
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/stok_kangri_exp.html" target="_blank">Stok Kangri Expedition</a></li>
             <li><a tabindex="-1" href="http://www.artcraftemporium.com/preview_wildvent/markha1.html" target="_blank">Markha Valley</a></li>
        </ul>
</li>
This solution does not work in IE8, which had already worked the way you intended without monkeying around with the top margin. I don't know how it works in IE7.
I have not used conditional markup (I know there are people out there who have, and you could research it!), but one could attempt to put a conditional markup around those class definitions in the stylesheet that would not call on them when your site encounters IE8.
Beth