Social Links Rollover top on Home Page

Hi guys, i have a site with the menu on top/left side and the social links on the top/right side. The social links are black & white, i would like to change the color (rollover on mouse over) with the original color.
Black and white / Color.
The site is http://www.mastert.net
I leave you the .css main style and header:

CSS MAIN
#social_links {
	float: right;
}

.social {
	display: block;
	width: 32px;
	height: 32px;
	text-decoration: none;
	text-indent: -9999px;
	font-size: 0.1px;
	margin-left: 5px;
	float: left;
}

.rssfeed { background-image: url('../images/social_rss_bn.png'); }
.facebook { background-image: url('../images/social_facebook_bn.png'); }
.twitter { background-image: url('../images/social_twitter_bn.png'); }
.youtube { background-image: url('../images/social_youtube_bn.png'); }
.soundcloud { background-image: url('../images/social_soundcloud_bn.png'); }
.mail { background-image: url('../images/social_mail_bn.png'); }

HEADER
<div id="social_links">

<a href="http://www.facebook.com/mastertofficial" class="social facebook" target="tab" target="_blank">Facebook</a>
<a href="http://www.twitter.com/mastertofficial" class="social twitter" target="tab" target="_blank">Twitter</a>
<a href="http://www.youtube.com/mastertofficialtv" class="social youtube" target="tab" target="_blank">Youtube</a>
<a href="http://www.soundcloud.com/mastertofficial" class="social soundcloud" target="tab" target="_blank">Soundcloud</a>

    	</div>

I hope someone help me, thanks!