HTML/PHP/CSS Help Needed

Hi Warriors!

Ok, I've got a bit of a problem.

I have a sales page which lists several benefits in a numbered list format. Each benefit is numbered and has a graphic beneath it. The number itself is a graphic image, not just a typed number.

I'd like to easily be able to add or take away benefits when I'm editing.

Problem is, I can't easily re-number the benefits because of the way it's coded. In the HTML window of my WP admin area, it looks like this:

<img class="aligncenter" src="http://www.mywebsite.com/wp-content/themes/mywebsite-theme/images/h2-squiggle.png" />
<h2 class="phone">Monthly Core Curriculum<br />Training Call with Q&A</h2>
<img src="http://www.iahwp.org/wp-content/uploads/2010/06/cell-phone2.jpg" alt="Training Call" title="Training Call" width="128" height="128" class="aligncenter size-full wp-image-128" />

In the CSS file, ".../images/h2-squiggle.png" denotes the image, but the ..."phone" portion of <h2 class="phone"> correlates to the actual image which is named h2-squiggle-1.png, which is "Benefit 1" The other benefit images are h2-squiggle-2.png, h2-squiggle-3.png, etc. Each class has a different word.

No problem, I'll just change the words to the same numbers corresponding to the benefit number in the CSS file. In this case,

.entry h2.phone {
padding-top: 60px;
background: url(iahwp/h2-squiggle-1.png) no-repeat top center;
}

would become

.entry h2.1 {
padding-top: 60px;
background: url(iahwp/h2-squiggle-1.png) no-repeat top center;
}

in the CSS file.

And if I change "phone" to "1", then

<img class="aligncenter" src="http://www.mywebsite.com/wp-content/themes/mywebsite-theme/images/h2-squiggle.png" />
<h2 class="phone">Monthly Core Curriculum<br />Training Call with Q&A</h2>
<img src="http://www.iahwp.org/wp-content/uploads/2010/06/cell-phone2.jpg" alt="Training Call" title="Training Call" width="128" height="128" class="aligncenter size-full wp-image-128" />

becomes

<img class="aligncenter" src="http://www.mywebsite.com/wp-content/themes/mywebsite-theme/images/h2-squiggle.png" />
<h2 class="1">Monthly Core Curriculum<br />Training Call with Q&A</h2>
<img src="http://www.iahwp.org/wp-content/uploads/2010/06/cell-phone2.jpg" alt="Training Call" title="Training Call" width="128" height="128" class="aligncenter size-full wp-image-128" />

...in the HTML window of my WP admin area.

...and voila! The numbered benefit SHOULD be there just as it currently is. (Again, I'm trying to do this to be able to easily rearrange and renumber my benefits, instead of tediously cutting and pasting one section to the next while deleting the current numbered benefit graphic.)

But it isn't.

Instead, the entire graphic just disappears. So what am I doing wrong?

Obviously, it's tied to more than just the CSS file. Maybe one of the function.php files?

Can someone help me with this? (I hope this is clear. I've tried to be as clear as possible.)

Thanks,
Michelle