Blogroll 01

<!--
     Theme | Blogroll by Clara
      MANDRAKESCRY.tumblr.com
      DON'T REMOVE THE CREDIT
-->

<!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>Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">


body {
font-family: helvetica;
background-color:#464646;
background-image: url('http://i45.tinypic.com/28j8jkl.png');
background-repeat: repeat;
background-attachment: fixed;


scrollbar-face-color: #fff;
scrollbar-highlight-color: #fff;
scrollbar-shadow-color: #fff;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #fff;
scrollbar-track-color: #fff;
scrollbar-darkshadow-color: #fff;}


::-webkit-scrollbar {width: 6px; height: 6px;}
::-webkit-scrollbar-track-piece {background-color: #ffffff; repeat scroll 0 0 transparent;}
::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: #e7e7e7; }


#title {
width: 290px;
height: 60px;
background-color: #7e8486;
color: #000000;
line-height: 65px;
margin-left: 520px;
marging-top:20px;
font-family: courier new;
text-align: center;
font-size: 46px;
text-transform: uppercase;
border-radius: 25px;
position:fixed;
}


#nav {
position:fixed;
top:75px;
font-size:9px;
border-bottom:#cecece 1px solid;
left: 506px;
z-index:6;}


#nav a {
display:inline-block;
font-family:helvetica;
width:100px;
text-align: center;
padding: 4px;
letter-spacing: 2px;
color:#353535;
background: #e7e7e7;
text-decoration:none;
text-transform:uppercase;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;}

#nav a:hover {
color: #7e8486;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;}


#content {
position:fixed;
background-color:transparent;
width: 430px;
padding: 6px;
top: 100px;
padding-top:0px;
margin-left:426px;
padding-left:30px;
height:700px;
overflow:auto;
z-index:1;}


#back {
position:fixed;
top:100px;
left:426px;
width: 480px;
height:700px;
background: #fff;
z-index: -1;
opacity:0.6;}


.conimg {
z-index:1;
float: left;
margin:4px;
width:50px;}

.contport {
float: left;
width: 50px;
opacity: 1;
border: 2px transparent solid;
background-color: #ffffff;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}

.contport:hover {
border: 2px solid #464646;
background-color: #000;
transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
opacity: 0.4;
filter:alpha(opacity=30);
-moz-transform: scale(-1);
-webkit-transform: scale(-1);
-o-transform: scale(-1);}


.name, .name a {
float: left;
opacity: 0;
margin-left:-20px;
margin-top:-15px;
color: #000;
width: 120px;
height: 10px;
font-size:0px;
text-transform: uppercase;
text-decoration:none;
z-index: 4;}

.conimg:hover .name {
opacity:1;
font-size:8px;
width:124px;
z-index: 4;
text-align:center;
margin-top:-35px;
margin-left:-35px;
line-height:80px;-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}

a:hover { position: relative; text-decoration:none; }


</style>
</head>
<body>

<div id=title>Blogroll</div>

<div id="nav">

<a href="/">back</a>
<a href="/ask">ask</a>

<a href="http://mandrakescry.tumblr.com/">credit</a>
</center></div>
<div id="back"></div>


<div id="content"><center>{block:Following}{block:Followed}<a target="blank" href="{FollowedURL}"><div class="conimg">
<img class="contport" src="{FollowedPortraitURL-128}" /><div class="name">{FollowedName}</div></div></a> {/block:Followed}{/block:Following}</center></div>


</body></html>