Blogroll #1 (Light)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}; Following</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<style type="text/css">

iframe#tumblr_controls{
    right:0px !important;
    position:fixed !important;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    z-index:9999;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { border-radius: 10px; }
::-webkit-scrollbar-thumb { border-radius: 10px; background:#ccc; }

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

body {
    text-transform:normal;
    background:#fff url('{image:BG}') fixed repeat center;
    color:#888;
}

a {
    text-decoration:none;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    cursor:help;
    color:#444;
}

    a:active {
        color:#000;
        -webkit-transition:all 0.05s linear;
        -moz-transition:all 0.05s linear;
        -o-transition:all 0.05s linear;
        transition:all 0.05s linear;
    }

#main {
    margin:auto;
    width:590px;
    height:500px;
    overflow:hidden;
}

#title {
    margin-top:15%;
    font-size:24px;
    letter-spacing:5px;
    font-style:italic;
    font-family:georgia;
    padding:2px 45px 2px 45px;
}

#lien {
    margin-left:125px;
    font:8px consolas;
    letter-spacing:1px;
    text-transform:uppercase;
}

#body {
    position:fixed;
    text-align:center;
    margin:10px;
    width:570px;
    max-height:325px;
    overflow:auto;
}

.all {
    float:left;
    margin:5px;
}

.por {
    border:3px solid #ccc;
}

.name {
    font:10px consolas;
    text-transform:uppercase;
    letter-spacing:1px;
    position:absolute;
    background:#fff;
    color:#000;
    line-height:10px;
    width:64px;
    margin-left:3px;
    margin-top:-67px;
    padding-top:28px;
    height:36px;
    opacity:0;
    text-align:center;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}

    .name:hover {
        opacity:.9;
    }


</style>
{block:ifinfinitescroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescroll}
</head>
<body>


<div id="main">


    <div id="title">Following;</div>
    <div id="lien">
        <a href="/">Back to blog</a> // <a href="http://subplanets.tumblr.com">©</a>
    </div>


    <div id="body">
    {block:Following}
        {block:Followed}
        <div class="all">
        <img class="por" src="{FollowedPortraitURL-64}">
        <a href="{FollowedURL}" title="{FollowedTitle}" target="blank"><div class="name">{FollowedName}</div></a>
        </div>
        {/block:Followed}
    {/block:Following}
    </div>


</div><!-- main -->

</body>
</html>