Minimize the output css by concatenating all the styles under same sprite

At the moment each class specifies again and again the sprite file.
i.e.
.openidIcon_livejournal {
background-image: url('img/Secure_OpenIDLogin.png');
-background-image: url('img/Secure_OpenIDLogin-ie6.png');
background-position: left -424px;
}
.openidIcon_wordpress {
background-image: url('img/Secure_OpenIDLogin.png');
-background-image: url('img/Secure_OpenIDLogin-ie6.png');
background-position: left -440px;
}
.openidIcon_blogger {
background-image: url('img/Secure_OpenIDLogin.png');
-background-image: url('img/Secure_OpenIDLogin-ie6.png');
background-position: left -456px;
}

Add an option to define it just once.
i.e
.openidIcon_livejournal, .openidIcon_wordpress, .openidIcon_blogger {
background-image: url('img/Secure_OpenIDLogin.png');
-background-image: url('img/Secure_OpenIDLogin-ie6.png');
}
.openidIcon_livejournal {
background-position: left -424px;
}
.openidIcon_wordpress {
background-position: left -440px;
}
.openidIcon_blogger {
background-position: left -456px;
}

Or even better:
.openidIcon {
background-image: url('img/Secure_OpenIDLogin.png');
-background-image: url('img/Secure_OpenIDLogin-ie6.png');
}
#livejournal.openidIcon {
background-position: left -424px;
}
#wordpress.openidIcon {
background-position: left -440px;
}
#blogger.openidIcon {
background-position: left -456px;
}