/* Alex Meijer - @AMeijerNL
 * 2012
 *
 * Social Media Icons (retina ready!)
 *
 * Just a few ready-to-use social media icons.
 */

/* ==========================================================================
   Base styles
   ========================================================================== */
.clearfix {
    *zoom: 1;
}   


ul.socials, ul.socials_16 {
margin: 0;
padding: 0;
display:inline-block; 
vertical-align:middle;
}

ul.socials li, ul.socials_16 li {
list-style: none;
float: left;
margin: 2px;

}

.socials a,
.socials button,
.socials span {
    display: block;
    position: relative;
    width: 32px;
    height: 32px;
    text-indent: -99999px;
    border-radius: 50%;
    background-color: #ccc;
    background-repeat: repeat-x;
    border: 0px;
}

.socials_16 a,
.socials_16 button,
.socials_16 span {
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    text-indent: -99999px;
    border-radius: 50%;
    background-color: #ccc;
    background-repeat: repeat-x;
    border: 0px;
}

.socials a:after,
.socials button:after,
.socials span:after,
.socials_16 a:after,
.socials_16 button:after,
.socials_16 span:after {
    display: block;
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/social-icons.png') top left no-repeat;
}
/*
media1	Facebook
media2	Twitter
media3	Google+
media4	Qzone
media5	Sine Weibo
media6	LinkedIn
media7	Viadeo
media8	Flickr
media9	Fourthsquare
madia10	WAYN
media11	Zoo.gr
media12	Travekkerspoint
media13	Pinterest
media14	stumbleupon
media15	myspace
media16	digg
media17	reddit
media18	youtube
media19	Instagram
media20	vimeo
media21	RSS feed
media22	Skype
media23	Dribble
media24	TripAdvisor
media25	tumbl.
media26	vk
media27	Travel Massive
media28	Blog
*/

/*32x32 px SET*/

.socials .media1:after { background-position: 0px 0px; }
.socials .media2:after { background-position: 0px -32px; }
.socials .media6:after { background-position: 0px -64px; }
.socials .media3:after { background-position: 0px -96px; }
.socials .media22:after { background-position: 0px -128px; }
.socials .media18:after { background-position: 0px -160px; }
.socials .media23:after { background-position: 0px -192px; }
.socials .media13:after { background-position: 0px -224px; }
.socials .media8:after { background-position: 0px -256px; }
.socials .media4:after { background-position: 0px -288px; }
.socials .media5:after { background-position: 0px -320px; }
.socials .media7:after { background-position: 0px -352px; }
.socials .media9:after { background-position: 0px -384px; }
.socials .media10:after { background-position: 0px -416px; }
.socials .media11:after { background-position: 0px -448px; }
.socials .media12:after { background-position: 0px -480px; }
.socials .media14:after { background-position: 0px -512px; }
.socials .media15:after { background-position: 0px -544px; }
.socials .media16:after { background-position: 0px -576px; }
.socials .media17:after { background-position: 0px -608px; }
.socials .media19:after { background-position: 0px -640px; }
.socials .media20:after { background-position: 0px -672px; }
.socials .media21:after { background-position: 0px -704px; }
.socials .media24:after { background-position: 0px -736px; }
.socials .media25:after { background-position: 0px -768px; }
.socials .media26:after { background-position: 0px -800px; }
.socials .media27:after { background-position: 0px -832px; }
.socials .media28:after { background-position: 0px -864px; }

/* BG colors matching each platform */
.socials .media1:hover, .socials_16 .media1 {background-color: #3b5998; background-image: none;}
.socials .media2:hover, .socials_16 .media2 {background-color: #00a0d1; background-image: none;}
.socials .media6:hover, .socials_16 .media6 {background-color: #0e76a8; background-image: none;}
.socials .media3:hover, .socials_16 .media3 {background-color: #db4a39; background-image: none;}
.socials .media22:hover, .socials_16 .media22 {background-color: #00aff0; background-image: none;}
.socials .media18:hover, .socials_16 .media18 {background-color: #c4302b; background-image: none;}
.socials .media23:hover, .socials_16 .media23 {background-color: #ea4c89; background-image: none;}
.socials .media13:hover, .socials_16 .media13 {background-color: #910101; background-image: none;}
.socials .media8:hover, .socials_16 .media8 {background-color: #0063dc; background-image: none;}
.socials .media4:hover, .socials_16 .media4 {background-color: #f5c13f; background-image: none;}
.socials .media5:hover, .socials_16 .media5 {background-color: #e62226; background-image: none;}
.socials .media7:hover, .socials_16 .media7 {background-color: #f4982c; background-image: none;}
.socials .media9:hover, .socials_16 .media9 {background-color: #1b6cb5; background-image: none;}
.socials .media10:hover, .socials_16 .media10 {background-color: #d75f9b; background-image: none;}
.socials .media11:hover, .socials_16 .media11 {background-color: #4dbfdb; background-image: none;}
.socials .media12:hover, .socials_16 .media12 {background-color: #00428c; background-image: none;}
.socials .media14:hover, .socials_16 .media14 {background-color: #eb4823; background-image: none;}
.socials .media15:hover, .socials_16 .media15 {background-color: #00359b; background-image: none;}
.socials .media16:hover, .socials_16 .media16 {background-color: #1b5891; background-image: none;}
.socials .media17:hover, .socials_16 .media17 {background-color: #fc4600; background-image: none;}
.socials .media19:hover, .socials_16 .media19 {background-color: #6b3d2f; background-image: none;}
.socials .media20:hover, .socials_16 .media20 {background-color: #1bb2e9; background-image: none;}
.socials .media21:hover, .socials_16 .media21 {background-color: #fd751f; background-image: none;}
.socials .media24:hover, .socials_16 .media24 {background-color: #3a8e1b; background-image: none;}
.socials .media25:hover, .socials_16 .media25 {background-color: #304f6c; background-image: none;}
.socials .media26:hover, .socials_16 .media26 {background-color: #4d75a3; background-image: none;}
.socials .media27:hover, .socials_16 .media27 {background-color: #000000; background-image: none;}
.socials .media28:hover, .socials_16 .media28 {background-color: #ff9900; background-image: none;}

/*16x16px set*/
.socials_16 .media1:after { background-position: -39px -7px; }
.socials_16 .media2:after { background-position: -39px -39px; }
.socials_16 .media6:after { background-position: -39px -71px; }
.socials_16 .media3:after { background-position: -39px -103px; }
.socials_16 .media22:after { background-position: -39px -135px; }
.socials_16 .media18:after { background-position: -39px -167px; }
.socials_16 .media23:after { background-position: -39px -199px; }
.socials_16 .media13:after { background-position: -39px -231px; }
.socials_16 .media8:after { background-position: -39px -263px; }
.socials_16 .media4:after { background-position: -39px -295px; }
.socials_16 .media5:after { background-position: -39px -327px; }
.socials_16 .media7:after { background-position: -39px -359px; }
.socials_16 .media9:after { background-position: -39px -391px; }
.socials_16 .media10:after { background-position: -39px -423px; }
.socials_16 .media11:after { background-position: -39px -455px; }
.socials_16 .media12:after { background-position: -39px -487px; }
.socials_16 .media14:after { background-position: -39px -519px; }
.socials_16 .media15:after { background-position: -39px -551px; }
.socials_16 .media16:after { background-position: -39px -583px; }
.socials_16 .media17:after { background-position: -39px -615px; }
.socials_16 .media19:after { background-position: -39px -647px; }
.socials_16 .media20:after { background-position: -39px -679px; }
.socials_16 .media21:after { background-position: -39px -711px; }
.socials_16 .media24:after { background-position: -39px -743px; }
.socials_16 .media25:after { background-position: -39px -775px; }
.socials_16 .media26:after { background-position: -39px -807px; }
.socials_16 .media27:after { background-position: -39px -839px; }
.socials_16 .media28:after { background-position: -39px -871px; }