Blogroll Page Theme

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<!-- --------------------------------------------------------------------

     Blogroll Page Theme
     Made by Unzo
     http://unzo.tumblr.com/

-------------------------------------------------------------------- -->

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="http://static.tumblr.com/kjtbii3/y9Wmz7ys3/basics.js">
</script>


<style type="text/css">


#tumblr_controls{
    display:none !important;
}


::-webkit-scrollbar-thumb:vertical{
    width:10px;
    background:#8394a5;
    border-radius:5px;
    border:2px solid white;
}

::-webkit-scrollbar{
    width:11px;
    height:11px;
    background:white;
}


body{
    background:#fdfdfd;
    color:#9c9c9c;

    font-family:'Georgia', sans-serif;
    font-size:11px;
    line-height:150%;

    cursor:default;
}

a{
    color:#8394a5;

    text-decoration:none;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover{
    color:#eee;

    font-style:none;
    text-decoration:none;
}


#container{
    position:relative;

    top:49px;
    left:50%;

    width:500px;
    min-height:100%;

    margin:0 0 50px -271px;
    padding:20px 20px 30px;

    background:white;

    border:1px solid #eee;
}


.title{
    padding:10px;

    color:#8394a5;

    font-size:23px;
    letter-spacing:1px;
    text-align:center;
}


.nav{
    margin:0 0 15px 0;
    padding:5px 0 6px;

    text-align:center;

    border-bottom:1px solid #eee;;
}

.nav a{
    margin:0 8px;

    font-family:'Calibri', sans-serif;
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:1px;
}


#content{
    position:relative;

    height:100%;
}


.blog{
    display:inline-block;

    width:60px;
    height:60px;

    margin:1%;

    background:white;

    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.blog img{
    width:60px;

    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;

    -webkit-filter:grayscale(30%);
    -moz-filter:grayscale(30%);
    filter:grayscale(30%);
}

.blog:hover img{
    opacity:0;
}


.name{
    overflow:hidden;
    position:absolute;
    opacity:0;

    width:60px;
    height:60px;

    color:#8394a5;

    font-family:'Calibri', sans-serif;
    font-size:9px;
    line-height:62px;
    text-transform:uppercase;
    letter-spacing:1px;

    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.blog:hover .name{
    opacity:1;
}


.spacer{
    position:relative;

    height:50px;
}


{CustomCss}

</style>
</head>

<body>

<div id="container">

<div class="title">
Blogroll
</div>

<div class="nav">
<em>
<a href="/">← Return</a>
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>
<a href="/">Link 4</a>
<a href="/">Link 5</a>
</em>
</div>

<div id="content" align="center">

{block:Following}
{block:Followed}

<div class="blog">

<div class="name">{FollowedName}</div>

<a target="_blank" href="{FollowedUrl}">
<img src="{FollowedPortraitURL-128}">
</a>

</div>

{/block:Followed}
{/block:Following}

</div>

</div>

<div class="spacer">
</div>

</body>
</html>