Blogroll 01

<!DOCTYPE html>
<html>

    <head>


<!-------------------------------------------------
BLOGROLL #01 || MADE BY: http://snootydormouse.tumblr.com (KITSTHEMES)
---------------------------------------------------

TERMS OF USAGE:
- DO NOT REMOVE THE CREDIT
- DO NOT REDISTRIBUTE
- DO NOT CLAIM AS YOUR OWN
- DO NOT USE AS A BASE

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

<title>BLOGROLL</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link href="http://static.tumblr.com/la4ujvn/zhjmw840z/style-my-tooltips.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/la4ujvn/xedmw81vj/jquery.style-my-tooltips.js"></script>

<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:100});
        });
    })(jQuery);
</script>


<style type="text/css">

body {
background:#fcfcfc;
color: #333;
font-family: trebuchet ms, Arial, sans-serif;
font-size: 13px;
}

a {
color: #aaa;
text-decoration: none;
}

@font-face {font-family: infy; src:url("http://digilander.libero.it/kitamikeita/Fonts/Infinity.ttf")}

.container {width: 610px;
margin: 60px auto}

.header {
position: relative;
width: 610px;
height: 45px;
margin: 10px auto 0 auto;
font-family: infy, arial, trebuchet ms;
font-size: 45px;
color: #969696;
text-transform: uppercase;
letter-spacing: 10px;
text-align: center;
padding: 8px 0;
background-color: #e3e3e3;
}

.square {
position: relative;
width: 610px;
height: 605px;
margin: 0 auto;
overflow-y: scroll;
overflow-X: hidden;
border-bottom: 3px double #f0f0f0;
}

.link01 a, .link02 a {
float: left;
position: relative;
width: 40px;
height: 10px;
margin-right: 2px;
line-height: 9px;
font-size: 13px;
color: #969696;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding: 4px 0;
background-color: #f0f0f0;
transition: all .4s;
-o-transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
}

.link01 a {
background: #f0f0f0 url(http://i.imgur.com/fAwgbG5.png) no-repeat center 2%;}
.link02 a {
background: #f0f0f0 url(http://i.imgur.com/jStTz68.png) no-repeat center 2%;}

.link01 a:hover, .link02 a:hover {background-position: center 100%;
background-color: #f2f2f2;
transition: all .4s;
-o-transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
}

.blogavatar {z-index: 1;
width: 64px;
height: 64px;
margin: 5px;
float: left;
border: 6px solid #fff;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 0px #e6e6e6;
-moz-box-shadow: 1px 1px 0px #e6e6e6;
box-shadow: 1px 1px 0px #e6e6e6;
cursor: default;
background: #fff
}

.blogavatar, .blogavatar:hover {
transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;}

.blogavatar:hover {
border-color: #f2f7f7;  /* CUSTOM COLOR #01 */
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg)
}

.blogavatar:nth-child(even):hover {
border-color: #f7f5f2; /* CUSTOM COLOR #02 */
transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg)
}

.blogavatar img {opacity: .7;
transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;}

.blogavatar:hover img {opacity: 1;
transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;}

.credits a {text-decoration: none;
color: #aaa;
font-family: arial;
font-size: 13px;
position:fixed;
bottom: 12px;
right: 17px;
}

::selection {
background-color:#ccc;
color:#fff;
}

::-moz-selection {
background-color:#ccc;
color:#fff;
}

::-webkit-scrollbar {
width:5px;
height:auto;
background:#ffffff;
}

::-webkit-scrollbar-corner {
background:#ffffff;
}

::-webkit-scrollbar-thumb:vertical {
background:#d4d4d4;
}

::-webkit-scrollbar-thumb:horizontal {
background:#d4d4d4;
}

</style>


    </head>

    <body>
    <div class="container">

    <div class="header"><b>b</b>l<b>o</b>g<b>r</b>o<b>l</b>l</div>
    <div class="square">

{block:Following}
{block:Followed}

<div class="blogavatar">
<a href="{FollowedURL}" title="{FollowedName}" target="_blank"><img src="{FollowedPortraitURL-64}"></a>

</div>

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

</div>

    <div class="link01"><a href="/" title="back"></a></div><div class="link02"><a href="http://tumblr.com/dashboard" title="dashboard"></a></div>


    </div>


        <div class="credits"><a href="http://snootydormouse.tumblr.com">©</a></div>

    </body>

</html>