Blogroll [02] Ayanami

<!DOCTYPE html>
<html>
<head>

<!--

Blogroll 02 Ayanami
by yukoki/s-ekki

1. Light/Heavy CSS editting is allowed.
2. Do not use as base code.
3. Do not remove credit.
4. Do not claim theme as your own.

----------------------------------------------------------------------
              Please look out for notes throughout the code
                 to help you in customizing the page!!
-----------------------------------------------------------------------

-->

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

<style type="text/css">

@font-face { font-family: "talldark"; src: url('https://dl.dropboxusercontent.com/s/i8kug7l4k6qlzz7/talldark.ttf'); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track-piece { background-color: transparent; }
::-webkit-scrollbar-thumb:vertical {
    width: 4px;
    background-color: #ff6a9f; /** scroll bar **/
}


#s-m-t-tooltip {
    max-width: 150px;
    padding: 5px 10px 5px 10px;
    margin: 20px 14px 7px 10px;
    background-color: #d0a9c2; /* change the background color */
    font-family: Calibri; /* change the font */
    font-style: normal;
    font-size: 8px; /* change the font size */
    letter-spacing: 1px; /* change the letter spacing */
    text-transform: uppercase; /* can be uppercase, lowercase, none*/
    color: #ffffff; /* change the text color */
    z-index: 999;
}

body {
    background-color: #ffffff; /** background colour **/
    background-image: url(https://31.media.tumblr.com/8939bf293e12aa837a2b92645724f327/tumblr_inline_n4utftnbdP1rshr70.png);
    /** background image between the brackets! **/
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
}
a { text-decoration:none; }

#main {
    width: 590px;
    height: 410px;
    margin-top: 80px;
    background-color: #f7f7f7; /** main background colour **/
    padding: 20px;
}

.left {
    width: 170px;
    float: left;
}

.pgt {
    background-color: #000000; /** 'BLOGROLL' background **/
    color: #ffffff; /** 'BLOGROLL' text **/
    padding: 24px 10px;
    font-size: 26px;
    letter-spacing: 3px;
    font-family: talldark;
}

.pgtri {
    color: #000000; /** 'BLOGROLL' background **/
    position: absolute;
    font-size: 40px;
    margin: -20px 130px;
}

.sidep {
    width: 170px;
    height: 320px;
    display: block;
}

.navbar {
    background-color: #ff6a9f; /** navigation bar background **/
    padding: 1px 5px;
}

.navicon { margin: 0 8px; }

.right {
    overflow: auto;
    height: 320px;
    height: 408px;
    padding: 0 10px 0 10px;
}

.fpic {
    padding: 9px;
    margin: 1px 3px;
    width: 48px;
    height: 48px;
    background-color: #ffffff; /** followed portraits background **/
    border: 1px solid #eeeeee; /** followed portraits border **/
    border-radius: 1000px;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
}


{CustomCSS}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:0,
attribute:"title"
});
});
})(jQuery);
</script>
</head>
<body>

<center>

<div id="main">

<div class="left">
<div class="navbar">
<a href="/" title="refresh"><img class="navicon" src="https://31.media.tumblr.com/9138f5e18960f325add31ae07b47b316/tumblr_inline_myoazhaFwP1rshr70.gif"></a>
<a href="/ask" title="message"><img class="navicon" src="https://31.media.tumblr.com/c85a379db57fcb12e0c55f23945b4dd5/tumblr_inline_myoazu4YM71rshr70.gif"></a>
<a href="/archive" title="archive"><img class="navicon" src="https://31.media.tumblr.com/b5ebe3188aa81afb50ead59eb8eb65ff/tumblr_inline_myoazqcA6k1rshr70.gif"></a>
<a href="http://yukoki.tumblr.com" title="credit"><img class="navicon" src="https://31.media.tumblr.com/17ab14e632f4727c62a8e8eebe095362/tumblr_inline_myoazzJCOa1rshr70.gif"></a>
</div><!--navbar-->
<div class="pgt">blogroll</div><div class="pgtri">◤</div>


<img class="sidep" src="https://31.media.tumblr.com/19b5992ed21ba959abbb2627eac1eff6/tumblr_inline_n4uunoss291rshr70.jpg">
<!-- above image link is your side image! It should measure 170px by 320px, or in a similar ratio. Replace the link with your own :> -------------->


</div><!--left-->

<div class="right">

{block:following}
{block:followed}
<a href="{FollowedURL}" title="{FollowedName}"><img class="fpic" src="{FollowedPortraitURL-64}"></a>
{/block:followed}
{/block:following}


</div><!--right-->

</div><!--main-->

</center>

</body>
</html>