Blogroll by gyapo

<!-- blogroll made by gyapo.tumblr.com don't remove this comment

credits : - textures : crazykira @ deviantart / found at nunmurithemes @ tumblr
          - tutorials : -apple @ tumblr (blogroll) / ixora @ tumblr (customed scroll)
          - picture : Pixiv Id 1171353 -->

<!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">

::-webkit-scrollbar-thumb:vertical {background-color:#e5e5e5;height:40px;}
::-webkit-scrollbar {height:0px;width:10px;background-color:#eee;}

 body
{font-family:arial;
font-size:10px;
background-image:url('http://29.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo5_250.png');}

a
{text-decoration:none;}

#border
{border-bottom:10px solid #00f2ff;
border-top:10px solid #e8ff00;
position:fixed;
top:100px;
left:275px;
width:810px;
height:390px;
overflow:hidden;}

#contain
{width:700px;
height:350px;
overflow:auto;
border-left:50px solid;
border-right:10px solid;
border-bottom:10px solid;
border-top:10px solid;
padding:10px;
padding-right:40px;
background-color:#fff;
color:#fff;}


#side
{position:fixed;
top:0px;
left:0px;
width:260px;
height:1200px;
border-right:15px solid #151515;
background-image:url('http://static.tumblr.com/s2ymoja/s54lyyvgc/tumblr_lws4pjqqja1qi201y.png');
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;}

#back
{width:200px;
margin-top:110px;
margin-left:30px;
text-align:center;
font-family:consolas;
font-size:9px;
letter-spacing:2px;
padding-top:15px;
padding-bottom:35px;
background-color:#fff;}

#buttonback
{width:134px;
margin-left:25px;
margin-top:0px;
color:#ff144f;
padding:8px;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;}

#buttonback:hover
{background-color:#f4f4f4;}

#sidepic
{width:180px;}

#credits
{position:fixed;
bottom:15px;
color:#c1c1c1;
font-family:consolas;
width:260px;
font-size:9px;
letter-spacing:3px;
background-color:#fff;
text-align:center;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;}

#credits:hover
{color:#aaa;}


.button
{float:left;
width:48px;
height:48px;
margin-right:8px;
margin-bottom:10px;
overflow:hidden;
border:3px solid #f1f1f1;
background-color:#f1f1f1;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out}

.button:hover
{border:3px solid #000;
color:#000;
background-color:#000;}

.nav
{padding-top:20px;
height:30px;
text-align:center;
width:48px;
overflow:hidden;
text-transform:uppercase;
font-family:consolas;
font-size:8px;
letter-spacing:1px;
color:#757575;
background-color:#333;
margin-right:3px;}

.buttons
{height:48px;
width:48px;}

#line
{width:48px;
margin-left:-51px;
-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}

#line:hover
{margin-left:0px;}


</style>
</head>
<body>

<div id="side">

<!--don't remove this part -->
<a href="http://gyapo.tumblr.com"><div id="credits">credit</div></a>

<div id="back">
<a href="/"><div id="buttonback">back to blog</div></a>
<br/>
<img id="Sidepic" src="http://27.media.tumblr.com/tumblr_lz1dhxvnhb1qdm57ho1_250.png"/>

</div>
</div>

<div id="border"><div id="contain">
{block:Following}{block:Followed}
<a target='_blank' href='{FollowedURL}'>
<div class="button">
<table border="0" cellpadding="0" cellspacing="0" id="line"><tr>
<td><div class="nav">{FollowedName}</div></td>
<td><img class="buttons" src='{FollowedPortraitURL-48}'/></td>
</tr></table>
</div>
</a>


{/block:Followed}{/block:Following}
</div></div>

</body>
</html>