Blogroll 01

<!DOCTYPE html>

<head>
<title>BLOGROLL</title> <!-- This is the text on your browser tab-->
<link rel="shortcut icon" href="{Favicon}">

<!----

blogroll 01 by franz @ lestranqe.tumblr.com/
DO NOT REMOVE THE CREDIT OR YOU'LL SUFFER A FATE WORSE THAN EPONINE'S
instructions included :)

--->

<script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>

<style>
    div#qTip {
    padding:5px;
    display:none;
    text-align:center;
    position:absolute;
    font-size:8px;
    line-height:10px;
    font-family:baskerville;
    z-index:1000;
    border:0px solid;
    background-color:#000;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:2px;
    opacity:1;
    }
    </style>


<style type="text/css">

/*Scrollbar*/

::-webkit-scrollbar {
    width:5px;
    height:auto;
    background:#f2f2f2;} /*Change scrollbar background colour here*/
::-webkit-scrollbar-corner {background:#f2f2f2;} /*Change scrollbar background colour here*/
::-webkit-scrollbar-thumb:vertical {background:#fff;} /*Change scrollbar colour here*/
::-webkit-scrollbar-thumb:horizontal {background:#fff;} /*Change scrollbar colour here*/

/*Main Structure*/

body {
    background:#fff; /*Change background colour here*/
    color:#000; /*Change font colour here*/
    font-family:times; /*Change font here*/
    font-size:11px; /*Change font size here*/
    line-height:180%;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

a:hover {
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

/*Header*/

#header {
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    background:transparent;
    width:660px;
    border-bottom:1px solid #e6e6e6;
}

#title {
    text-align:center;
    font-family:times;
    font-size:25px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:8px;
}

#description {
    margin:15px;
    text-align:center;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:3px;
}

/*Content*/

#content {
    margin:0 auto;
    width:660px;
    height:310px;
    text-align:center;
    border-bottom:1px solid #e6e6e6;
    border-left:1px solid #e6e6e6;
    border-right:1px solid #e6e6e6;
    overflow:auto;
}

#wrapper {
    width:128px;
    height:148px;
    margin:12px;
    border:1px solid #e6e6e6;
    overflow:hidden;
    display:inline-block;
}

#content img {
    padding:10px;
    border:1px solid #ffffff;
    background-color: #ffffff;
}

#blog {
    margin-top:-6px;
    font-size:9px;
    font-style:italic;
    text-align:center;
    text-transform:lowercase;
    letter-spacing:1px;
}

#blog a {
    color:#2a2a2a; /*Change blog links colour here*/
}

#blog a:hover {
    color:#e6e6e6; /*Change hovered blog links colour here*/
}

/*Links*/

#navigation {
    text-align:center;
    margin:15px 0;
}

#navigation a {
    color:#000;
    padding:20px;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:3px;
}

#navigation a:hover {
    color:#e6e6e6;
}

/*Credit - DON'T TOUCH THIS PART*/

#credit {
    position:fixed;
    float:right;
    bottom:5px;
    right:5px;
    background:transparent;
    font-size:20px;
    text-align:right;
}

#credit a {
    color:#000;
}

#logo {
    font-size:10px;
    font-family:baskerville;
    font-style:italic;
    opacity:0;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

#credit:hover #logo {
    opacity:1;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

</style>
</head>

<body>

<div id="header">
<div id="title">Blogroll</div> <!-- Page Title-->
<div id="description">These people fill my dash will magic</div> <!-- Description-->
</div>

<div id="content">
{block:Following}
{block:Followed}
<div id="wrapper">
<a href='{FollowedURL}' title='{FollowedTitle}' target='_blank' >
<img src='{FollowedPortraitURL-96}'>
<div id="blog"><a href='{FollowedURL}' target='_blank'>{FollowedName}</a></div>
</div>
{/block:Followed}
{/block:Following}
</div>

<div id="navigation"> <!-- The links at the bottom, duplicate to add more links-->
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>
<a href="/">Link 4</a>
</div>

<div id="credit"> <!-- DON'T TOUCH-->
<div id="logo">franztheme</div>
<a href="http://lestranqe.tumblr.com">☺</a>
</div>

</body>
</html>