Blogroll 02

<!DOCTYPE html>
<html>
<head>

            <!-------------------------------------------
                   Blogroll 2 by Clara Schueller
                  http://mandrakescry.tumblr.com/
                     DON'T REMOVE THE CREDITS
            -------------------------------------------->

<title>{title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<style type="text/css">

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color:#c7c7c7;
}

::-webkit-scrollbar-thumb {
    background:#2a2a2a;
}

iframe#tumblr_controls {
    right:3px !important; position:fixed !important;
}


body {
    background-color: #ffffff;
    background-image: url(http://static.tumblr.com/d7pwg4v/6N1mg3f82/dark_wall.png);
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
    text-decoration: none;
}
a {
    text-decoration:none;
}

a:link, a:active, a:visited{
color: #fff;

}

#main {
    margin-top: 40px;
    width: 850px;
    height: 430px;
    padding: 10px;
}
#side {
    margin-left: -680px;
    margin-top:70px;
    width: 200px;
}
#title{
    position:fixed;
    margin-left:250px;
    margin-top:-100px;
    width:490px;
    height:30px;
    text-align:center;
    text-transform:uppercase;
    font-family: "eurof35";
    font-size:50px;
    border-bottom:2px solid #000000;
    padding:30px;

    color:#cecec1;

    text-shadow:2px 0 0 rgba(255,255,255,0.3), -2px 0 0 rgba(227,214,76,0.3);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

#title:hover{
    text-shadow:none;
}

.image {
    width: 200px;
    height: 300px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 5px solid #fff;
}
.navigation {
    width: 204px;
    background-color: #fff;
    height: 25px;
    margin-top: -10px;
    padding: 3px;
    border-bottom-left-radius: 50px 100px;
    border-bottom-right-radius: 50px 100px;
}
.nav {
    width: 20px;
    margin-left: 10px;
    opacity: 0.6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.nav:hover {
    opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#blogroll{
    position:fixed;
    margin-left:240px;
    margin-top:-310px;
    padding-left:10px;
    height:300px;
    width:490px;
    overflow:auto;
}

.blogs{
    width:48px;
    height:48px;
    border:7px solid transparent;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

.blogs:hover{
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
}

#light {
    opacity: 1;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

#light:hover a {
    opacity: .4;
}

#light a {
    opacity: .8;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

#light a:hover {
    opacity: 1;
}


@font-face {
font-family: 'ballpark';
src: url('http://static.tumblr.com/c5gdi2k/2fhn63ifn/ballw___.ttf');
}

.credit {position:fixed; bottom:5px; right:5px; font: 20px Ballpark; background: transparent; color: #fff; text-transform:uppercase; letter-spacing: 0px; padding: 5px; }
.credit a{ #fff; opacity:0.8;}
.credit a:hover{color:#fff; opacity:1.0;}

{CustomCSS}

</style>
</head>
<body>

<center><div id="main">
<div id="side">
    <div id="title">Blogroll</div>

<img class="image" src="http://static.tumblr.com/c5gdi2k/bLLmos77o/killua-and-gon.jpg">

<div class="navigation">
<a href="/" title="home"><img class="nav" src="http://i1246.photobucket.com/albums/gg607/mogimochi/pixels/home2_zpsf13644d0.png">
<a href="/ask" title="message"><img class="nav" src="http://i1246.photobucket.com/albums/gg607/mogimochi/pixels/mail2_zps2f479e9f.png">
<a href="/archive" title="past"><img class="nav" src="http://i1246.photobucket.com/albums/gg607/mogimochi/pixels/calendar2_zpsb87b4994.png">
<a href="http://tumblr.com" title="dashboard"><img class="nav" src="http://i1246.photobucket.com/albums/gg607/mogimochi/pixels/reload2.png">
</div>
</div>

{block:Following}
<div id="blogroll">
<div id="light">
{block:Followed}
<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}" class="blogs"></a>
{/block:Followed}
</div>
</div>
{/block:Following}


</div>
</div></center>

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

</body>
</html>