/* SOCIAL ICONS - GENERAL */

.social { list-style:none; margin:1px auto; width:150px; }

.social li { 
display:inline; 
float:left; 
background-repeat:no-repeat; }


.social li a { display:block;
 width:32px; 
height:32px; 
padding-right:5px; 
position:relative; 
text-decoration:none; }


.social li a strong { 
font-weight:normal; 
position:absolute; 
left:10px; 
top:-1px; 
color:#fff; 
padding:3px; 
z-index:9999;
 
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); 
background-color:rgba(0, 0, 0, 0.7);

 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
-webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}


li.facebook { background-image:url("img/facebook.png"); }

li.twitter { background-image:url("img/twitter.png"); }

li.email { background-image:url("img/email.png"); }




/* SOCIAL ICONS - CSS3 */

#css3:hover li { opacity:0.2; }


#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }

#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }


#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }