Blogroll #4

<!DOCTYPE html>
<!-------------------------------------------------
BLOGROLL #04 BY: http://phoenixthemes.tumblr.com (INSTRUCTIONS IN CODE)
...................................................
...................................................
MATCHES THEME #5 AND TAGS PAGE #6


TERMS OF USE:
-Don’t remove or move the credit
-Don’t redistribute
-Don’t use as a base or take bits of code
-You can edit it as much as you like as long as the credit remains untouched.
--------------------------------------------->
<head>


<title>Blogroll</title><!--Browser title-->

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

<!----TOOLTIP------------------>

<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(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:400,
attribute:"title"
});
});
})(jQuery);
</script>


<style type="text/css">


/*--------------------------------RESET----------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
  display:block;
  }

/*-------------------------------SCROLL----------------------------------*/

::-webkit-scrollbar-thumb:vertical {
    border-left: 1px solid #999;/*scrollbar color*/
    background:transparent;
    height:5px;
}

::-webkit-scrollbar-thumb:horizontal {
    border-top: 1px solid #999;/*scrollbar color*/
    background:transparent;
    height:3px;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar {
  background-color: transparent;
  height:2px;
  width:5px;
}

* {
     box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

/*---------------------------BODY-------------------------------------*/
#s-m-t-tooltip{
    font-family: calibri;
    letter-spacing:1px;
    max-width:150px;
    font-size: 8px;
    margin:0px 10px;
    padding:3px 5px;
    background:#c4a2b0;/*tooltip background color*/
    color: #fff;/*tooltip color*/
    opacity: .8;
    z-index:999;
    text-transform:uppercase;
    border:1px solid #fff;/*tooltip border color*/
}

html {
  height: 100%;
}


body {
        background: #eee; /*background color*/
        color: #666;/*text color*/
        background-attachment: fixed;
        background-position:bottom;
        background-size:150%;
        height:100%;
        background-attachment:fixed;
        background-repeat:no-repeat;
        margin: 0;
        padding: 0px;
        font-family: Consolas,'Trebuchet MS', sans-serif;
        font-size: 10px;
        word-wrap: break-word;
        letter-spacing: 1px;
}

a, a:active, a:visited, a:hover {
  color: #666;/*links color*/
  text-decoration:none;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

a:hover {
    color: #888888;/*links hover color*/
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

small{font-size:8px;}

big {font-size:12px;}


/*--------------------------------------*/

#centerdiv {
    width:100%;
    height:80%;
    position:relative;
    top:50%;
    transform:translatey(-50%);
    -webkit-transform:translatey(-50%);
    -moz-transform:translatey(-50%);
}

.phoenixt {
    position:absolute;
    bottom:20px;
    right:20px;
    text-align:center;
}


#todo {
    width: 500px;
    height:500px;
    margin: 0px auto;
    background: #fff;/*main container background color*/
    padding:25px;
}

header {
    background-color: #c4a2b0;/*header background color*/
    width: 450px;
    height: 50px;
    z-index:99;

}


#titulo {
    font-family: calibri, sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.2em;
    position:absolute;
    color:#fff;/*title color*/
    margin:12px;
    width:250px;
    letter-spacing: 0.2em;
    font-size:20px;
    font-weight:bold;
}

nav {
    float:right;
    text-align:right;
    margin-right:20px;
}

nav a {
    text-transform:uppercase;
    color:#fff;/*main links color*/
    font-weight:bold;
    font-size:9px;
    letter-spacing:0.2em;
    display:inline-block;
    padding:5px;
    margin-top:15px;
}

nav a:hover {
    opacity:0.6;
    color:#fff;/*main links color*/
}

#main {
    background:#eee;/*container background color*/
    width:450px;
    height:390px;
    overflow:auto;
    margin-top:10px;
    padding:10px;
}


.blog {
    float:left;
    width:45px;
    height:45px;
    margin:20px;
}


.blog img {
    width:100%;
}
</style>


</head>

<body>

<div id="centerdiv">
<div id="todo">

<header id="header">
<div id="titulo">blogroll</div><!--Title-->
<nav>
<a href="/">home</a> <!--Link-->
<a href="http://tumblr.com/dashboard">dash</a> <!--Link-->
<a href="/">Link 1</a> <!--Link-->
<a href="/">Link 2</a> <!--Link-->

</nav>
</header>


<div id="main">

     {block:Following}{block:Followed}
    <div class="blog">
    <a target="_blank" href="{FollowedURL}"> <img border: "0" src="{FollowedPortraitURL-48}" title="{FollowedName}"/>
       </a>
    </div>
    {/block:Followed}{/block:Following}

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


</div></div><!---todo--->


<div class="phoenixt"><a href="http://phoenixthemes.tumblr.com">P.</a></div>
</body>
</html>