Blogroll #01

<html>
<head>

<!--
Blogroll #01 by ownmylight.tumblr.com
-->

<title>{title}'s blogroll</title> <!-- Change browser title -->
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" href="{RSS}"/>
{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}

<style type="text/css">

body {
    color: #999; /* Change the blogs description color */
    font-family: calibri;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-align: justify;
    background-color: #f5f5f5; /* Change the background color */
}

.container {
    margin: 115px auto;
    width: 723px;
}

/* ---------------- NAVIGATION/HEADER ---------------- */
.navigation {
    margin: 0px 0px 21px -53px;
}

.navigation img {
    float: left;
    border: 5px solid #fff;
    border-radius: 100px;
    margin-right: -2px;
}

.navigation ul {
    list-style-type: none;
}

.navigation ul li {
    display: inline;
}

.navigation ul li a {
    color: #989898; /* Change the links font color */
    font-size: 8px;
    font-family: cambria;
    font-style: italic;
    text-decoration: none;
    text-align: center;
    text-transform: lowercase;
    background-color: #ffffff; /* Change the links background color */
    padding: 4px 8px 4px 9px;
}

.navigation ul li a:hover {
    color: #46BAE2; /* Change the links hover font color */
}
/* ---------------- NAVIGATION/HEADER END ---------------- */

/* ---------------- BLOGROLL ---------------- */
.blogrollcontainer {
    overflow: hidden;
    text-align: center;
    border-radius: 10px;
    background-color: #fff; /* Change the content (blogroll) background color */
    margin-left: 0px;
    padding: 9px 3px 9px 0;
    height: 314px;
    width: 724px;
}

.blogroll {
    float: left;
    margin-bottom: 11px;
    margin-left: 11px;
    height: 55px;
    width: 167px;
}

.blogroll img {
    float: left;
    border: 5px solid #f1f1f1; /* Change if blog icon has border */
    border-radius: 100px; /* Change border radius (rounded corners) */
    height: 40px;
    width: 40px;
}

.blogroll a, a:active, a:visited {
    color: #A6CBE5; /* Change the blogs title font color (blogurl) */
    font-family: calibri; /* Change the font family */
    font-weight: bold; /* Change if bold/strong or not */
    font-style: normal; /* Change if italic or not */
    text-decoration: none;
    text-transform: uppercase;
    padding: 1px 3px;
}

.blogroll a:hover {
    color: #46BAE2; /* Change the blogs title hover font color */
    text-decoration: none;
}

.blogdetails {
    float: right;
    overflow: hidden;
    font-family: cambria; /* Change blogs info font family */
    font-style: italic;
    text-align: left;
    text-transform: none;
    border-radius: 5px; /* Change border radius (rounded corners) */
    background-color: #f6f6f6; /* Change blogs info background color */
    padding: 5px;
    height: auto;
    width: 100px;
}
/* ---------------- BLOGROLL END ---------------- */

/* ---------------- TOOLTIP ---------------- */
#tt {
    position: absolute;
    display: block;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #46BAE2;
    padding: 2px 8px;
    z-index: 2;
}
 /* ---------------- TOOLTIP END ---------------- */
</style>
<!-- Tooltip -->
<script type="text/javascript" src="http://static.tumblr.com/7a6twe2/JMOmqlsdc/tooltip.js"></script>

<!-- Scrollbar -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<script type="text/javascript">
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 0.5.0
 *
 */
(function(d){jQuery.fn.extend({slimScroll:function(o){var a=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,scroll:0},o);this.each(function(){function h(a,d,e){var f=a;d&&(f=parseInt(c.css("top"))+a*B/100*c.outerHeight(),d=b.outerHeight()-c.outerHeight(),
f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));k=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());f=k*(b[0].scrollHeight-b.outerHeight());e&&(f=a,a=f/b[0].scrollHeight*b.outerHeight(),c.css({top:a+"px"}));b.scrollTop(f);p();i()}function w(){q=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),o);c.css({height:q+"px"})}function p(){w();clearTimeout(x);l=C&&k==~~k;q>=b.outerHeight()?l=!0:(c.stop(!0,!0).fadeIn("fast"),y&&g.stop(!0,!0).fadeIn("fast"))}function i(){m||(x=setTimeout(function(){!r&&
!s&&(c.fadeOut("slow"),g.fadeOut("slow"))},1E3))}var t,r,s,x,q,k,o=30,l=!1,B=parseInt(a.wheelStep),j=a.width,z=a.height,e=a.size,D=a.color,E=a.position,A=a.distance,u=a.start,F=a.opacity,m=a.alwaysVisible,y=a.railVisible,G=a.railColor,H=a.railOpacity,C=a.allowPageScroll,n=a.scroll,b=d(this);if(b.parent().hasClass("slimScrollDiv"))n&&(c=b.parent().find(".slimScrollBar"),g=b.parent().find(".slimScrollRail"),h(b.scrollTop()+parseInt(n),!1,!0));else{n=d("<div></div>").addClass(a.wrapperClass).css({position:"relative",
overflow:"hidden",width:j,height:z});b.css({overflow:"hidden",width:j,height:z});var g=d("<div></div>").addClass(a.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:m&&y?"block":"none","border-radius":e,background:G,opacity:H,zIndex:90}),c=d("<div></div>").addClass(a.barClass).css({background:D,width:e,position:"absolute",top:0,opacity:F,display:m?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),j="right"==E?{right:A}:{left:A};
g.css(j);c.css(j);b.wrap(n);b.parent().append(c);b.parent().append(g);c.draggable({axis:"y",containment:"parent",start:function(){s=!0},stop:function(){s=!1;i()},drag:function(){h(0,d(this).position().top,!1)}});g.hover(function(){p()},function(){i()});c.hover(function(){r=!0},function(){r=!1});b.hover(function(){t=!0;p();i()},function(){t=!1;i()});var v=function(a){if(t){var a=a||window.event,b=0;a.wheelDelta&&(b=-a.wheelDelta/120);a.detail&&(b=a.detail/3);h(b,!0);a.preventDefault&&!l&&a.preventDefault();
l||(a.returnValue=!1)}};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)})();w();"bottom"==u?(c.css({top:b.outerHeight()-c.outerHeight()}),h(0,!0)):"object"==typeof u&&(h(d(u).position().top,null,!0),m||c.hide())}});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);
</script>

<script type="text/javascript">
$(function(){
	$('#slimtest1').slimScroll({
		height: '100%',
		color: '#A6CBE5',
		size: '5px',
		alwaysVisible: true
	});
});
</script>
<!-- Scrollbar end -->
</head>


<body>
<div class="container">

    <div class="navigation">
        <a href="/" onmouseover="tooltip.show('back to blog');" onmouseout="tooltip.hide();"><img src="{PortraitURL-40}" border="0" alt=""></a><br>

        <ul>
            <li><a href="/ask">message</a></li>
            <li><a href="http://tumblr.com/dashboard">dashboard</a></li>
            <li><a href="http://ownmylight.tumblr.com">credit</a></li>
        </ul>
    </div>

    <div class="blogrollcontainer"><div id="slimtest1">
     {block:Following}{block:Followed}
        <div class="blogroll">
        <img src="{FollowedPortraitURL-40}"/>
            <div class="blogdetails">
            <a href="{FollowedURL}" target="_blank" onmouseover="tooltip.show('visit {FollowedName}');" onmouseout="tooltip.hide();">{FollowedName}</a><br>{FollowedTitle}
            </div>
        </div>
    {/block:Followed}{/block:Following}
    </div></div>

</div>
</body>
</html>