Need Help With Custom Breadcrumbs

[kingcruisers]

I am seeking help with the html code within the header template to customize the breadcrumbs. I have already inserted the following into additional.css:

#breadcrumbs { display:block; background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-grad.gif"]http://kingcruisers.com/images/css/b...crumb-grad.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-grad.gif"]) repeat-x 0 0; height:23px; overflow:hidden; float:left; }
#breadcrumbs a { font-size:12px; color:#105598; height:23px; line-height:23px; vertical-align:middle; padding:0 20px 0 10px; display:block; float:left; background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-mid.gif"]http://kingcruisers.com/images/css/b...dcrumb-mid.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-mid.gif"]) no-repeat right 0; }
#breadcrumbs a:hover { text-decoration:underline; }
#breadcrumbs a.first-child { background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-home.gif"]http://kingcruisers.com/images/css/b...crumb-home.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-home.gif"]) no-repeat 0 0; width:32px; padding:0; text-indent:-9999px; overflow:hidden; }
#breadcrumbs a.last-child { background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-end.gif"]http://kingcruisers.com/images/css/b...dcrumb-end.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-end.gif"]) no-repeat right 0; }

This is the html that needs to be edited in the header template. I just need to know what needs to be changed to get the desired results.

<vb:if condition="$page['crumbs']">
<ul id="breadcrumbs" class="clearfix">
<li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vbhrase home}</a></li>
<vb:each from="page.crumbs" value="crumb">
<vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
{vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
<vb:else />
<vb:comment><!-- Since we don't want phrase placeholders to be escaped, we escape user titles here. --></vb:comment>
{vb:set crumbTitle, {vb:raw crumb.title}}
</vb:if>
<li class="vb-icon separator"></li>
<li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
</vb:each>
</ul>
<vb:else />
<vb:comment>
We still need the #breadcrumbs element (even though empty) to avoid having multiple CSS rules to deal with different scenarios
where adjacent elements - breadcrumbs, channel-subtabbar, notices, announcements are available, visible, hidden or empty.
Used div instead of ul to prevent having an empty ul which is invalid in XHTML 1.0 Strict (though valid in HTML5).
Though we are currently using HTML5 doctype, using an emtpy div will ensure that this will validate even if we change the doctype in the future.
</vb:comment>
<div id="breadcrumbs"></div>
</vb:if>

Below is an image of the desired results achieved from the additional.css


I am running into trouble getting the last-child to end with /breadcrumb-end.gif rather than /breadcrumb-mid.gif. You can see how it's currently working at [URL="http://www.kingcruisers.com/roll-calls"]http://www.kingcruisers.com/roll-calls[/URL="http://www.kingcruisers.com/roll-calls"]

Any help would be greatly appreciated.