Blogroll #04

<html>
<head>

<!--
Theme desenvolvido por Gabriele.
Encontre mais aqui: http://clamam.tumblr.com/
Preserve a ética da internet, não remova os créditos!
-->

<title>{title} - Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">

<link href="https://fonts.googleapis.com/css?family=Baumans|Droid+Serif:400i|Lato|PT+Sans|Roboto" rel="stylesheet">

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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>

<style type="text/css">

/** CORPO **/
body{
font-family:'Lato', sans-serif; /** fonte do theme **/
color:#000;}


/** TOOLTIPS **/
#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:5px 5px;
background:#fff; /** cor do fundo do tooltip **/
color:#e89e8c; /** cor do tooltip **/
z-index:999999;
font-size:11px; /** tamanho da fonte do tooltip **/
text-transform:uppercase;}


/** LINKS **/
a{
color:#888888; /** cor dos links **/
text-decoration:none;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;}

a:hover{
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;}


/** CONTAINER **/
#content {
padding-top:23px;
border-top:1px solid #fafafa;
margin:0 auto;
width:860px;
height:520px;
overflow:scroll;}


/** ICONS **/
#content img{
border:1px solid #fafafa;
padding:5px;
margin-top:-5px;
width:60px;
height:60px;}

#eles{
background:#fcfcfc;
padding:5px;
width:100px;
height:50px;
float:left;
margin:0 20px 30px 10px;
box-shadow:0px 0px 0px 5px #fff,
0px 0px 0px 6px #fafafa;}

#follower a{
color:#555; /*following font color*/
text-decoration:none;
letter-spacing:2px;
text-align:left;
display:block;
height:auto;
float:left;
line-height:15px;
text-transform:uppercase;
font-family:lato;
font-size:7px;
font-weight:900;}

.title{
text-transform:lowercase;
font-style:italic;
font-family:'Droid Serif', serif;
margin-top:0px;
line-height:9px;
font-size:8px;
font-weight:100;
letter-spacing:1px;}

img{
opacity:.8;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}
img:hover{
opacity:1;
transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;}


/** SIDEBAR **/
#sidebar {
margin:0 auto;
margin-top:20px;
width:860px;
height:75px;
margin-bottom:-3px;}

/** TITULO **/
#title{
font-family:'Segoe script';
top:74px;
width:auto;
z-index:9999;
position:absolute;
font-size:14px;
color:#666;
text-transform:lowercase;
text-align:left;}

#links{margin-top:53px; position:absolute; margin-left:95px;}
#links a{color:#555; font-family:roboto; margin:5px; font-size:8.4px; letter-spacing:1.3px; text-transform:uppercase;}


/** ADCIONAL **/
#tumblr_controls,
.tmblr-iframe--desktop-loggedin-controls {
position:fixed!important;
-webkit-filter:invert(100%);
opacity:0.5;
top:3px;
text-transform:none;}

::selection{
background:#000; /** background da aréa selecionada **/
color:#eee; /** cor de fonte da área selecionada **/}
::-moz-selection{
background:#000;
color:#eee;}

@-webkit-keyframes Fade {
0% {opacity:0;} 100% {opacity:1;}}


/** SCROLLBAR **/
::-webkit-scrollbar {
background-color:transparent;
height:3px;
width:3px}

::-webkit-scrollbar-thumb:vertical{
border-top:15px solid #fff;
background-color:#f0bfb6;
height:3px;}

</style>
</head>
<body>

<div id="sidebar">
<div id="title">Following</div>
<font style="margin-top:58px; margin-left:80px; position:absolute; font-size:12px; font-family:roboto; color:#f0bfb6; font-weight:bold;">//</font>
<div id="links">
<a href="/">home page</a>
<a href="/ask">message me</a>
<a href="/archive">archive</a>
<a href="http://clamam.tumblr.com" title="theme by clamam">credits</a>
</div>
</div>

<div id="content" align="center" style="margin-top:15px;">
{block:Following}
{block:Followed}
<div id="follower">
<a href="{FollowedURL}">
<img src="{FollowedPortraitURL-128}">
<div id="eles">
{FollowedName}<br>
<div class="title">{FollowedTitle}</div></a>
</div>
{/block:Followed}
{/block:Following}
</div>
</div>
</body>
</html>