blogroll theme 3

<!-----
blogroll theme 3 by acousticized
------>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>

<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>

<script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
<style>
div#qTip {
    padding: 2px;
    height:9px;
    font-family:calibri;
    font-size:8px;
    display: none;
    text-align: center;
    position: absolute;
    line-height:8px;
    z-index: 999999999999;
    background: {color:title};
    color: #fff;
    text-transform:uppercase;
    border:1px solid #fff;
    letter-spacing: 1px;
}
</style>
<style type="text/css">

::-webkit-scrollbar {width: 5px; height: 4px; background: #fff; border-radius:3px;}

::-webkit-scrollbar-thumb { background-color:#BDCEFF;}

a:link, a:active, a:visited{
color:#999999;
text-decoration: none;
-webkit-transition: color 0.4s ease-out;
-moz-transition: color 0.4s ease-out;
}

body {
background-color: #f9f9f9; /*BACKGROUND COLOR*/
background-position:fixed;
font-family:calibri;
font-size:30px;
color:#000;}


div#center{
position:fixed !important;
width:645px;
height:49%;
border-radius:7px;
border-top-right-radius:0px;
border-top-left-radius:0px;
border: 1px solid #ddd; /*CONTENT BORDER*/
padding:20px;
margin-left:310px;
margin-top:140px;
font-size: 9px;
line-height:11px;
background-color:#fff;/*BACKGROUND COLOR*/
font-family:calibri;
overflow:auto;
text-align:left;
}
.side{
    height:65%;
    display:inline-block;
    width:200px;
    position:fixed;
    background: #ddd;
}
.pic img{
    opacity:0.9;
}
.pic {
    width:68px;
    margin:1px;
    height:68px;
    display:inline-block;
    text-align:center;
    transition: all 0.4s ease-out;
-o-transition-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}
.pic:hover img{
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
    transition: all 0.3s ease-out;
-o-transition-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
}

.pic:hover{

    }
.blog{
    height:70px;
    opacity:0;
    width:70px;
    line-height:70px;
    position:fixed;
    text-transform:uppercase;
    font-size:9px;
     text-align:center;
    transition: all 0.3s ease-out;
-o-transition-transition: all 0.3s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.3s ease-out;
}
.blog a{
    background:#ddd;
    color:#000;
}
.pic:hover .blog{
    height:70px
    width:70px;
    opacity:1;

    line-height:70px;
    text-align:center;
    text-transform:uppercase;
    font-size:9px;
    transition: all 0.2s ease-out;
-o-transition-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;}
@font-face {
font-family: "g";
src: url('http://static.tumblr.com/a90iyxz/7y4mmuafe/iknowaghost.ttf');
}

.title{
font-family:titulo;
font-size:65px;
letter-spacing:3px;
color:#fff;
height:49px;
letter-spacing:6px;
margin-top:-75px;
text-align:center;
}


@font-face {
font-family: "titulo";
src: url('http://static.tumblr.com/exioynw/NBFm4wy7z/bebasneue.otf');
}
.sidee{
    margin-top: 30px;
    margin-left: 310px;
position:fixed;
z-index:99999999;
padding:20px;
border-top-left-radius:7px;
border-top-right-radius:7px;
width:645px;
border:1px solid #ddd;
height:70px;
background:#D2E4F7;}
.links{
text-transform: uppercase;
width: 230px;
overflow:hidden;
background:;
font-family:consolas;
font-size:9px;
letter-spacing:1px;
line-height:auto;
color:#999999;
z-index:9999;
text-align:justify;
margin-left:7px;
}

.links a{
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
    width:80px;
    background:white;
    margin:3px;
    display:inline-block;
    }

</style>

<title>{title}</title>
<div class="sidee">
<div class="links">
<a href="/">main page</a><br><a href="http://tumblr.com/dashboard/">back to dash</a></div>
<div class="title">my blogroll
</div><div class="links" style="margin-left:530px;margin-top:-50px;">
<a href="/ask">message me</a><br><a href="http://acousticized.tumblr.com"> theme credit</a>
</div>


</div>
<div id="center">

{block:Following}
{block:Followed}<div class="pic">
<a target="_blank" href="{FollowedUrl}"><img width="70px;"border: "3" src="{FollowedPortraitURL-96}"title="{FollowedName}"/></div>{/block:Followed}{/block:Following}
</div>


</div>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>