friendthing.

<style type="text/css">
@font-face {
  font-family: 'slkscr';
  font-style: normal;
  src: local('slkscr'), url('http://static.tumblr.com/qbwrk8v/zmWlpdkl0/slkscr.ttf');}

::-webkit-scrollbar {
width: 0px;
height: 0px;
padding-top: 0px; }

::-webkit-scrollbar-track {
background-color: transparent; }

::-webkit-scrollbar-thumb {
height: 0px;
width: 0px;
background-color: transparent; }

::-webkit-scrollbar-track-piece {
height: 0px;
width: 0px; }

::-moz-selection, ::selection
{background: #470000; color: #ffffff; }

::selection
{background: #470000; color: #ffffff; }


a{
color: white;
text-decoration: none;
-webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;}

a:hover{
color: gray;
-webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;}

b {
font-family: times;
font-size: 13px;
font-weight: normal;
color: #a6a9b2;
line-height: 11px;
word-spacing: 1px;
letter-spacing: 1;
font-style: lighter;
font-variant: small-caps;
text-align: justify;}

u {
font-family: times;
font-weight: normal;
text-decoration: none;
color: #b5b5b5;
font-size: 10.5px;
letter-spacing: 0px;
word-spacing: 1px;}

i {
font-family: times;
font-weight: normal;
text-decoration: none;
color: #b5b5b5;
font-size: 10.5px;
letter-spacing: 0px;
word-spacing: 1px;}


h1 {
color: teal;
text-shadow: 2px 2px 1px black;
font-family: arial;
font-size: 11px;
text-transform: uppercase;
font-weight: lighter;
line-height: 30px;
letter-spacing: 3px;
word-spacing: 7px;
text-align: right;
border-bottom: 1px inset #fff;}

h2 {
color: teal;
text-shadow: 1px 1px black;
font-family: georgia;
font-size: 15px;
text-transform:none;
font-style: italic;
font-weight: lighter;
line-height: 10px;
margin-left: 20px;
letter-spacing: 1px;
text-align: left;}


/* -------------------- */
@font-face {
  font-family: 'slkscr';
  font-style: normal;
  src: local('slkscr'), url('http://static.tumblr.com/qbwrk8v/zmWlpdkl0/slkscr.ttf');}

/* bubbles that appear when you hover over the blogroll images */
.bubble {
    color: red; /* text color */
    background: black; }

.bubble:after {border-color: black transparent; /* ONLY change the red here; change both reds to the same color */}
#hover_me {border-color: transparent #f54f27; /* color of the little triangle on the left; see .bubble:after */}

.fav {
	float: left;
	width: 100px;
	height: 140px;
	text-align: center;}

.fav img {
padding: 5px;
width: 80px;
height: 80px;
background-color: #2b2b2b;
background-image:url('http://i44.tinypic.com/aujrbk.jpg');
border: 1px solid black;

    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;}

.fav:hover img {border: 1px solid black; -webkit-border-radius: 40px; border-radius: 40px;}
.fav:hover .bubble {margin-top: 10px;  opacity: 1;}

.bubble {
    opacity: 0;
    margin-left: 5px;
    position: relative;
    width:90px;
    height: auto;
    padding: 3px 0px 2px 0px;
    font-family: "slkscr";
	font-size: 8px;

	-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;}

.text {width: 90px; height:28px; overflow: auto;}

.bubble:after {
    content: "";
    position: absolute;
    top: -7px;
    left: 40px;
    border-style: solid;
    border-width: 0 7px 7px;
    display: block;
    width: 0;
    z-index: 1;}

#sidebar {
position:fixed;
width:900;
height:100%;
top:0px;
left:20%;
overflow: auto;
margin-left:0px;
background-color:transparent;
opacity: 0.9;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;}
</style>



    <div class="fav">
		<a href="" target="_blank">
		<img src="http://imagizer.imageshack.us/a/img600/9449/kpxk.png"><div class="bubble"></a>
		<div class="text"><b>Ariena</b> A <i>girl</i> that always finds <a href="">herself</a> there for him when he's in a <u>bind</u>.</div></div></div>



    <div class="fav">
		<a href="" target="_blank"">
		<img src="http://i351.photobucket.com/albums/q461/Remedy_S_Bleed/4fc71060-da70-467c-aa7f-ba1330696c78_zps751d0992.jpg"><div class="bubble"></a>
		<div class="text"><b>Name</b> A very special person. Anyone who dares come at her sideways, consider yourself royally fucked.</div></div></div>