Alternate approach to Steps graphic

[mroswell]

I couldn't help but notice these super-clean "step" graphics while purchasing tickets, tonight:
https://gs1.wac.edgecastcdn.net/806751/MissionTix/images/custom_assets/backgrounds.jpg

At first I thought that a separate CSS file might be generated for each page, to access the differing background-position and -image properties for each sprite.

But then I figured out that the CSS stays static, and all that changes is the class of the surrounding div. Cool.

(Tried and true, I know, but just not something I'd have thought to do, until helping out at the hackathon, today.)

Here's some sample markup and CSS:

Checkout: security check, create account, confirm, payment, finish!

....

And here's the css for the last step, for instance, of the ticket order process:

body#shopping.checkout div.receipt #checkout_progress {
background-image: url("https://gs1.wac.edgecastcdn.net/806751/MissionTix/images/custom_assets/backgrounds.jpg");
background-position: 0 -1450px;
background-repeat: no-repeat;
}
body#shopping.checkout #checkout_progress {
display: block;
height: 31px;
margin-bottom: 1.5em;
overflow: hidden;
text-indent: -99999px;
}

body#shopping.checkout #checkout_progress, body#shopping.checkout #header, body#shopping.checkout #main, body#shopping.checkout #footer, body#shopping.checkout #timer {
width: 718px;