Social Icons – changing icon, background and hover colour

Hi guys,

I am trying to change the top header social icon colours to something that looks like this http://imgur.com/KC0D1R6

I’ve copied/edited the below code to 1) colour the background of each icon 2) colour the icon shape itself white 3) make the hover transparent (I actually don’t want any hover ability available at all but didn’t want to mess any further with the functions.php sheet).

Hoping someone could help with fixing this code…the icons haven’t changed at all :(

Here’s a link to my page and I’ll PM you the passwords

http://www.openroadtravelperu.com/home2

Many thanks,
Sarah

top .social_bookmarks_vimeo:hover a {
color: transparent;
background-color: #dd4390;
}
top .social_bookmarks_vimeo a {
color: #ffffff;
background-color: #419cca;
}
#top .social_bookmarks_twitter:hover a {
color: transparent;
background-color: #63b1ed;
}
#top .social_bookmarks_twitter a {
color: white;
background-color: #63b1ed;
}
#top .social_bookmarks_google:hover a {
color: transparent;
background-color: #dd3333;
}
#top .social_bookmarks_google a {
color: white;
background-color: #dd3333;
}
#top .social_bookmarks_facebook:hover a {
color: transparent;
background-color: #403de5;
}
#top .social_bookmarks_facebook a {
color: white;
background-color: #403de5;
}
#top .social_bookmarks_instagram:hover a {
color: transparent;
background-color: #3a84bc;
}
#top .social_bookmarks_instagram a {
color: white;
background-color: #3a84bc;
}
#top .social_bookmarks_skype:hover a {
color: transparent;
background-color: #34afed;
}
#top .social_bookmarks_skype a {
color: white;
background-color: #34afed;
}