Blogroll #2 for Tumblr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})(); </script>

<!---- Blogroll #2 by Sofi (castiiel.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->

<style type="text/css">

::-webkit-scrollbar {width: 4px; height: 4px; background: transparent; }
::-webkit-scrollbar-thumb { background-color: #6F9296; -webkit-border-radius: 0ex; } /*Here change the scrollbar color*/

.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
display:none;
}

body{
font-family:Arial;
background: #fff; /*Here change background color*/
color:#fff; /*Here change text color*/
overflow-x:hidden;
    overflow-y:scroll;
}

a{
text-decoration:none;
color:#fff; /*Here change links color*/
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

a:hover{
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

#content {
margin:auto;
margin-top:100px;
height:90%;
width:95%;
text-align:center;
margin-bottom:50px;
}

#topbar {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background:#6F9296; /*Here change top bar background color*/
}

.plinks a {
overflow:hidden;
display:block;
text-align:center;
padding: 9.5px 12px;
font-size:9px;
text-transform:uppercase;
white-space: nowrap;
font-family: 'Montserrat', trebuchet ms, consolas, 'lato', sans-serif;
font-weight:700;
letter-spacing:1px;
border-top:1px solid #fff; /*Here change links border color*/
}

.plinks a:first-child {
    border-top:0px;
}

#pt {
position:absolute;
left:10px;
top:9px;
text-align:center;
padding: 7px 9px 8px 9px;
font-size:12px;
text-transform:uppercase;
font-family: 'Montserrat', trebuchet ms, consolas, 'lato', sans-serif;
font-weight:700;
letter-spacing:1px;
background:#fff; /*Here change top bar title background color*/
color:#6F9296; /*Here change top bar title color*/
overflow:hidden;
    z-index:9;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#controls {
    position:absolute;
    top:9px;
    right:10px;
}

#controls a {
    display:inline-block;
    margin-left:10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 7px 9px 8px 9px;
    font-size:10px;
    text-transform:uppercase;
    font-family: 'Montserrat', trebuchet ms, consolas, 'lato', sans-serif;
    font-weight:700;
    letter-spacing:1px;
    background:#fff; /*Here change the top bar controls background color*/
    color:#6F9296; /*Here change the top bar controls color*/
}

#pannel {
width:128px;
height:155px;
background:#6F9296; /*Here change the pannels background color*/
position: relative;
margin:10px;
display:inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
overflow:hidden;
}

#pannel img{
width:128px;
height:128px;
}

#purl {
    width:112px;
    overflow:hidden;
    text-align:center;
    padding: 8px 10px;
    font-size:9px;
    text-transform:uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Montserrat', trebuchet ms, consolas, 'lato', sans-serif;
    font-weight:700;
    letter-spacing:1px;
    border-bottom:1px solid #fff; /*Here change the url border color*/
}

#ptitle {
    border-top:1px solid #fff; /*Here change the blogs title border color*/
    text-align:center;
    padding: 8px 10px;
    font-size:9px;
    font-family: 'Montserrat', trebuchet ms, consolas, 'lato', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    background:#6F9296; /*Here change blogs title background color*/
    position:absolute;
    bottom:-60px;
    width:108px;
    transition: all 0.6s linear;
    -webkit-transition: opacity 0.6s linear;
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
}

#pannel:hover #ptitle {
    bottom:0px;
    transition: all 0.6s linear;
    -webkit-transition: opacity 0.6s linear;
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
}

</style>
</head>
<body>

<div id="topbar">
<div id="pt">great blogs to follow</div>
<div id="controls">
<a href="http://tumblr.com">dashborad</i></a>
<a href="http://www.tumblr.com/follow/{Name}">+follow</i></a>
</div>
</div>

<div id="content">

{block:Following}
<div id="pannel" style="height:155px;" class="plinks">
<a href="/">index</a>
<a href="/ask">mail</a>
<a href="/about">about</a>
<a href="/tags">tags</a>
<!--No. Go away. Do not touch the credit. Don't be misserable. If you don't want a credit, biuld your own damn code.-->
<a href="http://castiiel.tumblr.com">credit</a>
</div>
{block:Followed}
<div id="pannel">
<a href="{FollowedURL}">
<div id="purl">{FollowedName}</div>
<img src="{FollowedPortraitURL-128}">
<div id="ptitle">{FollowedTitle}</div>
</div>
</a>
{/block:Followed}
{/block:Following}

</div>
</body>
</html>
<!--