Blogroll Theme

<html>
<head>

<!-- blogroll theme #1 by danceforyous -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blogroll</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<style type="text/css">

@font-face {font-family:Bebas Neue;src:url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);}

::-webkit-scrollbar { width: 6px; height: 3px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {height: 2px;display: block;background-color:#dedada;}
::-webkit-scrollbar-track-piece {background-color:#ffffff;}
::-webkit-scrollbar-thumb:vertical {height: 9px;background-color:#dedada;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;}
::-moz-selection {background-color:#dedada;color:#ffffff;}
::selection {background-color:#dedada;color:#ffffff;}

body {
color:#eee;
background-color:#fff;
font-size:10px;
font-family:calibri;
line-height:100%;
text-align:center;}

#box {
background-color:transparent;
text-align:center;
margin-top:3%;
width:100%;
height:auto;
}

#title {
margin-top:-10px;
font-family:Bebas Neue;
font-size:35px;
text-align:center;
line-height:100%;
color:#eee;
background-color:#fff;}

#links {
display:inline-block;
margin-top:0px;
background-color:transparent;
}

#links a {
display:inline-block;
text-align:center;
font-family:Bebas Neue;
font-size:12px;
letter-spacing:1px;
color:#e8e8e8;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;}

#links a:hover {
color:#474646;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;}

#icon {
margin-top:15px;
width:500px;
height:500px;
overflow-x:hidden;
overflow-y:scroll;
padding:5px;
background-color:transparent;
}

#icon img {
width:40px;
height:40px;
margin-right:6px;
margin-bottom:6px;
padding:5px;
opacity:0.3;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;}

#icon img:hover {
opacity:0.8;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;}

a:link, a:active, a:visited {color:#eee;
text-decoration:none;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;}

a:hover {color:#e8e8e8;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;}

#s-m-t-tooltip{
margin-top:20px;
margin-left: 10px;
z-index:9999;
display:inline-block;
position:absolute;
background-color:#d6d5d5;
padding:5px;
text-transform:uppercase;
font-size:8px;
letter-spacing:1px;
color:#ffffff;
}

</style>
</head>

<body>

<div id="box">

<div id="title">
<a href="/">blogroll</a></div>

<div id="links">
<a href="/">Back</a> -
<a href="/ask">Ask</a> -
<a href="http://ofirises.tumblr.com">Credit</a>

<div id="icon">
{block:Following}{block:Followed}
<a target="_blank" href="{FollowedURL}"><img border: "10" src="{FollowedPortraitURL-64}" title="{FollowedName}"/>
{/block:Followed}{/block:Following}</a>

</div></div>
</div></div>

</div>
</body>
</html>