socialnets css

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
body { }
/* -- CONTAINER-- */
div.socialnets { float:left; margin:20px; padding:20px; text-align: center; border:2px solid black; border-radius:16px; }
/* -- ICON-- */
i { margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px; float:inherit; }
i:hover {color:blue;}
.fa {font-family:'FontAwesome'; font-size:48px; color:black; }
/* -- VARS -- */
.socialnet-o { background:transparent; color:darkred;   }
.socialnet-bg { background-color:yellow border:solid 10px yellow;  }
.socialnet-bb { background-color:orange; border:solid 1px red; padding:8px; }
.socialnet-inv { background:inherit; border:solid 0px red; padding:4px; color:green; }
.socialnet-rad { background-color:yellow; border:solid 1px red; padding:8px; border-radius:48px; width:48px; line-height:48px;}
.socialnet-rad:hover { background-color:red; color:green; } 
.allfort { font-size:16px; margin-left: 20px; margin-right: 4px; margin-top: 8px; }
.fontawesome-icon-list {text-align:left; font-family:'Droid Sans'; font-size:9px; }
/* -- SOCIALNETS CSS-- */

<link rel="stylesheet" href="/font-awesome.min.css" />
<link rel="stylesheet" href="/socialnets.css" />

<!-- BGNBDR -->
<div class="socialnets">
<i class="fa fa-facebook socialnet-bg"></i>
<i class="fa fa-reddit-alien socialnet-bg"></i>
<i class="fa fa-youtube socialnet-bg"></i>
</div>


<!-- BGNBDR -->
<div class="socialnets">
<i class="fa fa-facebook socialnet-bb"></i>
<i class="fa fa-reddit-alien socialnet-bb"></i>
<i class="fa fa-youtube socialnet-bb"></i>
</div>


<!-- INVERSE  -->
<div class="socialnets">
<i class="fa fa-facebook-square socialnet-inv"></i>
<i class="fa fa-reddit-square socialnet-inv"></i>
<i class="fa fa-youtube-square socialnet-inv"></i>
</div>


<!-- ROADIUS  -->
<div class="socialnets">
<i class="fa fa-facebook socialnet-rad"></i>
<i class="fa fa-reddit-alien socialnet-rad"></i>
<i class="fa fa-youtube socialnet-rad"></i>
</div>


<!-- ALL -->
<div class="socialnets">
<i class="fa fa-facebook socialnet"></i>
<i class="fa fa-twitter socialnet"></i>
<i class="fa fa-google-plus socialnet"></i>
<i class="fa fa-linkedin socialnet"></i>
<i class="fa fa-pinterest-p socialnet"></i>
<i class="fa fa-instagram socialnet"></i>
<i class="fa fa-reddit-alien socialnet"></i>
<i class="fa fa-youtube socialnet"></i>
<i class="fa fa-yahoo socialnet"></i>
<i class="fa fa-yelp socialnet"></i>
</div>
<div style="clear: left;"></div>



<!-- MORE FONT BASED BRAND GLYPHS-->
<div class="socialnets">
<i class="fa fa-anfroid socialnet"></i>
<i class="fa fa-cc-amex socialnet"></i>
<i class="fa fa-cc-mastercard socialnet"></i>
<i class="fa fa-cc-paypal socialnet"></i>
<i class="fa fa-cc-visa socialnet"></i>
<i class="fa fa-css3 socialnet"></i>
<i class="fa fa-gg socialnet"></i>
<i class="fa fa-git socialnet"></i>
<i class="fa fa-google socialnet"></i>
<i class="fa fa-joomla socialnet"></i>
<i class="fa fa-yelp socialnet"></i>
<i class="fa fa-htmls socialnet"></i>
<i class="fa fa-linux socialnet"></i>
<i class="fa fa-safari socialnet"></i>
<i class="fa fa-chrome socialnet"></i>
<i class="fa fa-firefox socialnet"></i>
<i class="fa fa-skype socialnet"></i>
<i class="fa fa-twitch socialnet"></i>
<i class="fa fa-steam socialnet"></i>
</div>
<div style="clear: left;"></div>