[Xel]

Ok, so I've been customizing my menu (left column) of my site and everything is fine except one oddity:

The dingbat for my Help section is the same as my authentication / affiliate section (I.e green), when the actual image it should pull is orange.

Steps I have taken and relevant info:
-The actual image file (dingbats_Help.gif) is correct; i.e. orange.

skin1/customer/help/menu.tpl looks like this:

{*
$Id: menu.tpl,v 1.4 2008/11/14 12:32:21 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{capture name=menu}
{strip}
  <ul>
    <li><a href="help.php?section=contactus&mode=update">{$lng.lbl_contact_us}</a></li>
    {foreach from=$pages_menu item=p}
      {if $p.show_in_menu eq 'Y'}
        <li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp}</a></li>
      {/if}
    {/foreach}
  </ul>
{/strip}
{/capture}
{include file="customer/menu_dialog.tpl" title=$lng.lbl_help content=$smarty.capture.menu link_href="help.php" additional_class="menu-help"}

skin1/customer/menu_dialog.tpl looks like this:

{*
$Id: menu_dialog.tpl,v 1.4 2008/11/24 09:23:19 max Exp $
vim: set ts=2 sw=2 sts=2 et:
*}
{*** Added If menu-auth and if login to space auth box ***}
<div class="menu-dialog{if $additional_class} {$additional_class}{/if}">
	<div class="title-bar valign-middle">
    {strip}
    <img class="icon" src="{$ImagesDir}/spacer.gif" alt="{$title|escape}" />
    {$title}
    {if $link_href}
      <a href="{$link_href}"><img src="{$ImagesDir}/spacer.gif" alt=""  /></a>
    {/if}
    {/strip}
	</div>
{if $additional_class eq "menu-auth"}
{if $login eq ""}
<div><br /></div>
{/if}
<div class="content2">
    {$content}
  </div>
{else}
  <div class="content">
    {$content}
  </div>
</div>
{/if}

skin1/main.css snippet:

/*
help menu
*/
.menu-help .title-bar img.icon { background: url(images/dingbats_help.gif) no-repeat; }
/*

/*	 menu Box title	*/
.menu-dialog { padding: 0; margin: 0; }
.menu-dialog .title-bar { width: 100%; white-space: nowrap; border-bottom: 1px solid #fff; color: #fff; background: #2F3440; font-weight: bold; padding: 2px 5px 2px 0; overflow: hidden; position: relative; }
.menu-dialog .title-bar img.icon { margin: 2px 7px 2px 7px; width: 21px; vertical-align: middle; height: 20px; }
.menu-dialog .title-bar a:link,
.menu-dialog .title-bar a:visited,
.menu-dialog .title-bar a:hover,
.menu-dialog .title-bar a:active { display: block; text-decoration: none; position: absolute; top: 7px; right: 7px; }
.rtl .menu-dialog .title-bar a:link,
.rtl .menu-dialog .title-bar a:visited,
.rtl .menu-dialog .title-bar a:hover,
.rtl .menu-dialog .title-bar a:active { right: auto; left: 7px; }
.menu-dialog .title-bar a:link img,
.menu-dialog .title-bar a:visited img,
.menu-dialog .title-bar a:hover img,
.menu-dialog .title-bar a:active img { width: 7px; background: transparent url(images/menu_arrow.gif) no-repeat left top; height: 11px; }
.rtl .menu-dialog .title-bar a:link img,
.rtl .menu-dialog .title-bar a:visited img,
.rtl .menu-dialog .title-bar a:hover img,
.rtl .menu-dialog .title-bar a:active img { background: transparent url(images/menu_arrow_invert.gif) no-repeat left top; }

Any ideas?