Hi there

I am trying to create a basic css sprite with spriteme.com and then add it to my wordpress theme.

I have managed to get as far as creating the sprite but then when I export the css I am hit with a ton of confusing code after the following advice:

Here are the CSS changes you need to integrate back into your web site.

Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed! Replace these URLs with the URLs where you host the images.
http://www.jaredhirsch.com/coolrunni.../spriteme1.png

Code:
http://www.lukecorden.com/wp-includes/css/admin-bar.min.css?ver=3.7.1
Merge these changes into the CSS rules in http://www.lukecorden.com/wp-includes/css/admin-bar.min.css?ver=3.7.1:
This is one of multiple rules that use this background image:
#wpadminbar .menupop .menupop > .ab-item {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar #adminbarsearch .adminbar-input {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-updates > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wp-admin-bar-comments > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
This is one of multiple rules that use this background image:
#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon {
  background-image: url("../images/admin-bar-sprite.png?d=20120830");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: -10px -86px;
}
http://www.lukecorden.com/wp-content/plugins/metro-style-social-widget/CSS/metro.css?ver=3.7.1
Merge these changes into the CSS rules in http://www.lukecorden.com/wp-content/plugins/metro-style-social-widget/CSS/metro.css?ver=3.7.1:
This is one of multiple rules that use this background image:
.metro-social .metro-googleplus {
  background-image: url("../images/google.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 32.5px -240px;
}
This is one of multiple rules that use this background image:
.metro-social .googleplus-one {
  background-image: url("../images/google.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 32.5px -240px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-twitter {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-one {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-one-extend {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .twitter-extend-one {
  background-image: url("../images/twitter.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 27.5px -314.5px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-rss {
  background-image: url("../images/feed.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37px -389px;
}
This is one of multiple rules that use this background image:
.metro-social .rss-feed {
  background-image: url("../images/feed.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37px -389px;
}
This is one of multiple rules that use this background image:
.metro-social .metro-youtube {
  background-image: url("../images/youtube.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37.5px -458px;
}
This is one of multiple rules that use this background image:
.metro-social .youtube-one {
  background-image: url("../images/youtube.png");
  background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/b11fa6e333/spriteme1.png");
  background-position: 37.5px -458px;
}
I guess what I need to know is three fold.

1) how or where do I need to edit this code?

2) where do I place it in my wordpress site? (my theme [iconic one] has a custom.css file)

3) once this code is placed correctly do I need to delete previous images that made up the sprite, if so where are they?

Thanks so much for any help offered.