Using and artisteer skin

we would like to add a different image to optional <unordered lists>

many unsuccessful tests here http://158.255.45.230/postbullets.aspx

<h3>
 This is supposed to be ul - class="orangeball"</h3>
<ul class="orangeball">
 <li>
  <a href=http://my link>New header footer</a></li>
 <li>
  <a href=http://my link>Test Page for Template</a></li>
 </ul>
 

This seems to not be working and is only calling the defaulted image, which we have changed from the default arrow to a blue ball.

Sometimes it will show 2 images

/* begin PostBullets-orangeball */
.orangeball ol, .orangeball ul
{
margin: 1em 0 1em 2em;
padding: 0;
}

.orangeball li
{
font-size: 13px;
color: #4B3F34;
margin: 5px 0 5px -15px;
padding: 0 0 0 26px;
}

.orangeball li ol, .orangeball li ul
{
margin: 0.5em 0 0.5em 2em;
padding: 0;
}

.orangeball ol>li
{
background: none;
padding-left: 0;
/* overrides overflow for "ul li" and sets the default value */
overflow: visible;
}

.orangeball ul>li
{
background-image: url('images/orangeball.gif');
background-repeat: no-repeat;
background-position: top left;
padding-left: 26px;
/* makes "ul li" not to align behind the image if they are in the same line */
overflow-x: visible;
overflow-y: hidden;
}

/* end PostBullets-orangeball */