Companions v.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
THIS THEME WAS CREATED BY: NATALIE (FALLENVVINGSTHEMES)
You can edit this theme as much as you want.
Please DO NOT remove the credit.
Please like or reblog the post if you use this theme.
THANKS! Enjoy!
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:1px solid #DDD;
border-radius:4px;
background:#FFF;
color:#AAA;
z-index:999999;
font-size:8px;
font-style:italic;
text-transform:lowercase;
}

::-webkit-scrollbar {width: 7px;height: 5px;}
/*change both "white" to the color of the #contain background color*/
/*change #523843 to the background color of #top*/
::-webkit-scrollbar-track-piece {background-color: white; color:#523843;}
::-webkit-scrollbar-thumb:vertical {height: 3px; background-color: #523843; border:2px solid white;}


    /*page background color \/*/
body {background-color:#EBDEE1;}

#contain {
background-color:white; /*background color behind images*/
width:505px;
padding:0px 5px 10px 0px;
height:440px;
position:fixed;
overflow:auto;
left:530px;
top:120px;
}

#side {
width:200px;
height:450px;
position:fixed;
left:329px;
top:120px;
background-image:url('http://s9.favim.com/orig/131116/amazing-background-colorful-cute-Favim.com-1065697.png'); /*paste a URL of an image between ''*/
/*it looks best if it's a pattern*/
}

#top {
background-color:#523843; /*the color of the top bar*/
width:700px;
position:fixed;
top:70px;
left:330px;
height:40px;
padding:5px;
}

.ti {
color:#e8b6d4; /*the color of the title*/
font-family:corbel; /*the font of the title*/
font-size:25px;
margin-top:4px;
margin-left:5px;
}

.link {
color:#faf0f6; /*the color of the // between links*/
padding:3px;
text-align:right;
font-family:corbel;
margin-top:-35px;
width:485px;
height:30px;
margin-left:206px;
}

a .links {
display:inline-block;
color:#e8b6d4; /*color of links*/
padding:5px;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a .links:hover {
color:#faf0f6; /*color of links when you hover over them*/
z-index:0;
font-style:italic;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.pers img {
width:83px;
height:83px;
z-index:0;
}

.pers {
display:inline-block;
margin-left:10px;
z-index:0;
margin-top:10px;
}

.int {
font-family:calibri;
text-align:center;
background-color:rgba(255,255,255,0.8);
height:83px;
font-size:20px;
margin-top:-87px;
opacity:0;
position: relative;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.pers:hover .int {
opacity:1;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
    /*color of initals*/
.int a {color:#523843; text-decoration:none;}

</style></head><body><div id="side"></div>
                <!--title in top bar \/-->
<div id="top"><div class="ti">Companions</div><div class="link">
<!--put entire link between ""
for example: "http://tumblr.com"-->
<a href="/"><div class="links">link</div></a> //
                <!--put the name of the link where it says link-->
<a href="/"><div class="links">link</div></a> //
<a href="/"><div class="links">link</div></a> //
<a href="/"><div class="links">link</div></a>
</div></div>

<div id="contain">
<!--PERSON ONE-->
<div class="pers"><img src="https://31.media.tumblr.com/avatar_102877b83a4f_128.png"><!--add an image URL between ""--><div class="int"></br>
<!--change "link name" to the persons' URL-->
                       <!--change URL to the persons URL-->
                                    <!--change NRC to the person's initials-->
<a title="link name" href="http://URL.tumblr.com">NRC</a></div></div>
<!--END OF PERSON ONE (to add more, copy from PERSON ONE to END PERSON ONE-->

<div class="pers"><img src="https://31.media.tumblr.com/avatar_77cd68fd9160_128.png"><div class="int"></br>
<a title="link name" href="http://URL.tumblr.com">NRC</a></div></div>

<div class="pers"><img src="https://38.media.tumblr.com/avatar_a65f2676586f_128.png"><div class="int"></br>
<a title="link name" href="http://URL.tumblr.com">NRC</a></div></div>

<div class="pers"><img src="https://38.media.tumblr.com/avatar_5a5863174432_128.png"><div class="int"></br>
<a title="link name" href="http://URL.tumblr.com">NRC</a></div></div>

<div class="pers"><img src="https://31.media.tumblr.com/avatar_f86bdc34a71f_128.png"><div class="int"></br>
<a title="link name" href="http://URL.tumblr.com">NRC</a></div></div>

</div>
 <!--THAT'S IT!!! Please do not remove credit.-->
<div style="position:fixed;bottom:2px; right:3px;"><a title="fvvthemes" href="http://fallenvvingsthemes.tumblr.com"><img width="60px;" src="http://static.tumblr.com/nuxi7mr/94Rnqk1a2/tumblr_mh9l7xhvq11s0c2c9o1_500.png"></a></div>

</body></html>