Blogroll: Bed

<!--

    BLOGROLL: BED
    by acuite

- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>Blogroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>

<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<link rel="shortcut icon" href="{Favicon}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>

<style type="text/css">

/* Scroll */

::-webkit-scrollbar {width:11px;height:11px;background:#eee;}
::-webkit-scrollbar-thumb {background:#ccc;}
::-webkit-scrollbar,::-webkit-scrollbar-thumb {border:5px solid #fff;}

/* Controls */

#tumblr_controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}

/* General */

body {
    margin:0;
    color:#555;
    font-size:9px;
    background:#f8f8f8;
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
}

a:hover {color:#555;}
a {color:#999;text-decoration:none;}
a,.box,.box img {
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

/* Containers */

.c {
    position:fixed;
    bottom:30px;
    right:30px;
    letter-spacing:1px;
    text-transform:uppercase;
}

#center {
    position:relative;
    margin:130px auto 0;
    width:calc(47px * 8 + 11px);
    font-size:0;
    padding:25px;
    background:#fff;
    border:1px solid #eee;
}

#content {height:calc(47px * 8);overflow:auto;}

/* Portraits */

.box img{
    width:100%;
    display:block;
    -webkit-filter: saturate(40%);
    -moz-filter: saturate(40%);
    -ms-filter: saturate(40%);
    -o-filter: saturate(40%);
    filter: saturate(40%);
}

.box:hover img {
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -ms-filter: saturate(100%);
    -o-filter: saturate(100%);
    filter: saturate(100%);
}

.box {
    display:inline-block;
    margin:5px;
    width:35px;
    height:35px;
    border:1px solid #eee;
}

/* Header */

header {
    font-size:0;
    padding:15px;
    margin:-25px -25px 25px;
    border-bottom:1px solid #eee;
}

header a:after {content:'·';color:#555;margin:0 5px;}
header a:last-of-type:after {display:none;}
header a, header b{display:inline-block;font-size:9px;}
header b {
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-right:8px;
}

/* Misc */

#s-m-t-tooltip{
    max-width:300px;
    margin:10px;
    z-index:9999;
    border-radius:3px;
    background:#f8f8f8;
    border:1px solid #eee;
    padding:6px;
    font-size:9px;
    line-height:100%;
}

</style>
</head>
<body>
<div id="center">
<header>
    <b>blogroll:</b>
    <a href="/">home</a>
    <a href="http://www.tumblr.com/dashboard">dash</a>
    <a href="http://acuite.tumblr.com">credit</a>
</header>

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

</div>

<a class="c" href="http://acuite.tumblr.com">acuite</a>

</body>
</html>