Blogroll [03] Ojou-sama

<!DOCTYPE html>
<html>

<!--

BLOGROLL [03] Ojou-sama
by yukoki/houtarubi

1. Do not claim theme as your own
2. Do not remove credit
3. Feel free to edit

-->

<head>

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

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>

<style type="text/css">


body {
    background-color: #fff;/**your background colour**/
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
}
a { text-decoration:none; }

#top {
    width: 100%;
    height: 130px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;/**your background colour**/
}
#main {
    height: 74px;
    margin-top: 30px;
}
.tri {
    position: absolute;
    position: absolute;
    margin-top: 10px;
    font-size: 30px;
    margin-left: -15px;
    color: #efefef;/**'people i follow' bg colour**/
}

.head {
    font-family: yanone kaffeesatz;
    font-size: 30px;
    letter-spacing: 5px;
    background-color: #efefef;/**'people i follow' bg colour**/
    color: #000; /**'people i follow' text colour**/
    padding: 15px 10px;
    margin-top: 0;
    position: absolute;
}

#navigation {
    width: 10px;
    height: 94px;
    margin-top: -75px;
    margin-left: -345px;
}
.por {margin-right: 20px;margin-left: -220px;}
.nav { opacity: 0.6; }
.nav:hover { opacity: 1; }

#content {
    margin-top: 130px;
    max-width: 640px;
    margin-bottom: 50px;
}
#following {
    width:64px;
    height:64px;
    overflow: hidden;
    float: left;
}
.pic {
    width:64px;
    height:64px;
    display:block;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.name {
    font-family: anaheim;
    font-size: 10px;
    text-transform: uppercase;
    background-color: #efefef;/**blogroll icon bg colour**/
    color: #888;/**blogroll icon text colour**/
    padding-top: 22px;
    width: 64px;
    height: 42px;
    text-align: center;
}
#following:hover .pic {margin-top: -64px;}

{CustomCSS}

</style>
</head>
<body>

<img style="position:fixed;bottom:0;left:0;width:300px;" src="YOURIMAGEURL"><!--replace 'YOURIMAGEURL' with the link to your corner image-->

<div id="top">
<center><div id="main">

<img class="por"src="{portraiturl-64}">
<span class="tri">◀</span>
<span class="head">PEOPLE I FOLLOW</span>

<center><div id="navigation">
<a href="/"><img class="nav" src="http://media.tumblr.com/tumblr_meeg7zwtf41r7v6wt.gif"></a>
<a href="/ask"><img class="nav" src="http://media.tumblr.com/tumblr_meeftwevuo1r7v6wt.gif"></a>
<a href="/archive"><img class="nav" src="http://media.tumblr.com/tumblr_meeg6m45Tc1r7v6wt.gif"></a>
<a href="http://yukoki.tumblr.com"><img class="nav" src="http://media.tumblr.com/tumblr_meeq9hznHe1r7v6wt.gif"></a>
</div><!--navigation--></center>

</div><!--main--></center>
</div><!--top-->

<center><div id="content">

{block:Following}{block:Followed}
<a href="{FollowedURL}"><div id="following">
<img class="pic" src="{FollowedPortraitURL-64}">
<div class="name">{FollowedName}</div>
</div><!--following--></a>
{/block:Followed}{/block:Following}

</div><!--content--></center>

</body>
</html>