nice blogroll

<!DOCTYPE html>
<html>
<head>
<!--


                        nice blogroll @ shythemes


-->
<title>{Title} &ndash; blogroll</title>
<link rel="alternate" type="application/rss+xml" href="{RSS}"/>
<link rel="shortcut icon" href="{Favicon}"/>
<style type="text/css">

/* if you need to hide blogs from your blogroll, replace url1, url2, etc with the url(s) you wish to hide. add as few or as many as you need, preceded by periods and separated with commas */
.user_url1,
.user_url2,
.user_url3,
.user_url4,
.user_url5 {
    display:none !important;
}

::-webkit-scrollbar {
    width:3px;
    height:3px;
    background-color:inherit;
}
::-webkit-scrollbar-track {
    background-color:inherit;
}
::-webkit-scrollbar-thumb {
    background-color:#bdbdbd;
}
body {
    margin:0px;
    font-family:calibri, 'trebuchet ms', 'helvetica neue', sans-serif;
    font-size:9px;
    text-transform:lowercase;
    letter-spacing:1px;
    line-height:1.4em;
    word-wrap:break-word;
    color:#b8b8b8;
    background-color:#f9f9f9;
    background-size:cover;
    background-attachment:fixed;
}
a {
    text-decoration:none;
    color:inherit;
}
#main {
    position:absolute;
}
header {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:200;
    width:30%;
    text-align:center;
    font-size:8px;
    line-height:initial;
    font-family:calibri, 'trebuchet ms', sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    background-color:#fff;
}
header .nest {
    display:table;
    position:relative;
    width:100px;
    height:100%;
    margin:auto;
}
header .content {
    display:table-cell;
    vertical-align:middle;
    width:100px;
}
header .avatar {
    display:block;
    width:70px;
    height:auto;
    margin:3px auto;
    padding:15px;
    background-color:#fafafa;
}
nav {
    padding:9px;
    background-color:#fafafa;
}
nav ol {
    list-style-type:none;
    padding-left:0;
    margin:0;
}
nav ol li {
    display:inline-block;
    margin:0 3px;
}
nav ol li:last-child {
    margin-bottom:0;
}
nav a {
    border:0;
    display:inline-block;
}
#content {
    margin-left:30%;
    padding:50px;
    width:70%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    line-height:0;
    text-align:center;
}
.blog {
    margin:0 2px 2px 0;
    background-color:#fff;
    display:inline-block;
    position:relative;
}
.blog a {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    overflow:hidden;
}
.blog .bg {
    background-color:#f9f9f9;
    opacity:0;
    transition:opacity .2s ease-out;
}
.blog:hover .bg {
    opacity:1;
}
.blog .bg,
.blog .nest {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
}
.blog .content {
    display:table;
    position:relative;
    width:100%;
    height:100%;
}
.blog .name {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    opacity:0;
    color:inherit;
    font-size:8px;
    text-transform:uppercase;
    transition:opacity .2s ease-out;
}
.blog .name i {
    display:inline-block;
    max-width:68px;
    padding:6px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-style:inherit;
    line-height:1.4em;
}
.blog:hover .name {
    opacity:1;
    transition:opacity .2s ease-in;
}
.blog img {
    position:relative;
    display:block;
    width:48px;
    height:48px;
    padding:16px;
    transition:border-color .2s ease-out;
}
#top, #bottom {
    position:fixed;
    left:0;
    right:0;
    height:50px;
    background-color:inherit;
}
#top {
    top:0;
}
#bottom {
    bottom:0;
}
</style>
</head>
<body>
<div id="main">
<header><div class="nest"><div class="content">
    <a style="display:block" href="/"><img src="{Favicon}" class="avatar"/></a>
    <nav>
        <ol>
            <li><a href="/">return</a></li>
            <li><a href="http://shythemes.tumblr.com">credit</a></li>
        </ol>
    </nav>
</div></div></header>
<div id="content">
{block:Following}{block:Followed}<div class="blog user_{FollowedName}">
        <img src="{FollowedPortraitURL-128}"/>
        <div class="bg"></div>
        <div class="nest"><div class="content">
            <div class="name"><i>{FollowedName}</i></div>
        </div></div>
        <a href="{FollowedURL}"></a>
    </div>{/block:Followed}{/block:Following}
</div></div>
<div id="top"></div><div id="bottom"></div>
</body>
</html>