blogroll: one

<!--
blogroll #1 by wizardring
 › please don't remove the credits/steal/copy
 › message me for support
 › made on 15.12
-->

<!DOCTYPE html>
<html>
<head>
<title>Blogroll</title>
<link rel="shortcut icon" href="{Favicon}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Open+Sans:400,400italic,600,600italic' rel='stylesheet' type='text/css'>
<script src="https://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>

<style type="text/css">
/* text related */
body {font-family: 'Roboto', sans-serif; font-size:9px; background:#f8f8f8; line-height:150%;}

body, a, h1 {color:#555555;} /* color of the text */

b {font-weight:bold;}
i {font-style:italic;}
hr {width:80px; height:1px; background:#eee; margin:13px 0px 13px; border:0px; padding:0px;}

a {text-decoration:none;}
a:hover {color:#97b3ad;} /* color of the links on hover */

::selection {background:gray; color:#fff;}
::-moz-selection {background:gray; color:#fff;}
::-webkit-selection {background:gray; color:#fff;}

#s-m-t-tooltip {max-width:300px; margin:15px; padding:5px 10px; background:rgba(238,238,238, 0.5); border:1px solid #eee; color:#686868; z-index:999999; font-size:8px; text-transform:uppercase; letter-spacing:2px; font-family:calibri;}

/* scrollbar */
::-webkit-scrollbar {width:4.5px; height:4.5px; background:#eee;;}
::-webkit-scrollbar-thumb {background:#ddd;}

/* header */
.header {width:350px; text-align:center; padding:0px; height:auto; margin:0px auto 50px;}

h1 {text-decoration:none; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:normal; padding-bottom:3px; border-bottom:1px solid #eee; font-family: 'Open Sans', sans-serif; margin:0px; display:inline-block;}

.links {display:inline-block; text-decoration:none; margin-left:10px;}
.links a {margin-left:5px;}

/* structure */
.center {width:530px; margin:95px auto 0px;}
.box {display:inline-block; height:35px; position:relative; width:145px; margin:15px;}
.box img {width:30px; padding:4px; background:#ffffff; border:1px solid #eee; margin-top:-3px; position:absolute; border-radius:100%; z-index:99;}

.url {text-align:right; border-bottom:1px solid #eee; padding-bottom:3px;}
.url a {text-transform:uppercase; font-size:8px; text-align:right; font-family: 'Open Sans', sans-serif; letter-spacing:.5px;}
.url b {font-weight:600;}
</style>
</head>
<body><div class="center">
<!--You don't need to edit the following-->

<!--Header-->
<div class="header">
<h1>blogroll</h1>
<div class="links">
    <a href="/">index</a>
    <a href="/ask">message</a>
    <a href="http://wizardring.tumblr.com">credit</a>
</div>
</div>
<!--Header-->

<!--Blogroll-->
<div class="blogroll">
    {block:Following}{block:Followed}
    <div class="box"><a target="_blank" href="{FollowedURL}"><img src="{FollowedPortraitURL-40}"/></a>
    <div class="url"><a target="_blank" href="{FollowedURL}">{FollowedName}</a></div></div>
    {/block:Followed}{/block:Following}
</div>
<!--Blogroll-->

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