Blogroll 1

<!DOCTYPE html>

<!--

BLOGROLL 1 BY CAYLO (princeoberynn)
Please don't steal, redistribute or remove credit!
Thank you ♥

-->


<html xml:lang="en" lang="en">
<head><title>Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<style type="text/css">

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

::-webkit-scrollbar {
        height: 5px;
        width: 5px;
        -webkit-border-radius: 0px;
        background-color:white;
}
::-webkit-scrollbar-thumb{background-color: gray;}
::-webkit-scrollbar-track{background-color: white;}


body {
    margin: 0px;
    color: #444;
    font-size: 11px;
}

a {
    text-decoration: none;
    outline :none;
    -moz-outline-style: none;
    color: #222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a:hover {
    opacity: 0.7;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a:hover .urlshow{
    opacity: 0.7;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

img {
    border: none;
}


#header{
    width: 320px;
    margin:auto;
    margin-top: 90px;
    text-align: center;
}

#title{
    font-size: 14px;
    font-family: 'raleway', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 25px;
    color: #444;
}


#image img{
    width: 120px;

    /* DELETE THE LINES BELOW IF YOU DONT WANT A CIRCLE PICTURE */
    width: 90px;
    height: 90px;
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
}


#links{
    font-family: 'helvetica', sans-serif;
    font-weight: bold;
    font-size: 9px;
    margin-top: 7px;
    padding: 5px;
    /* CHANGE THIS FOR THE LINK BACKGROUND COLOR */
    background-color: #444;
}

#links a{
    padding: 0 10px;
    /*CHANGE THIS FOR THE LINK TEXT COLOR*/
    color: white;
}

#links a:hover{
    opacity: 0.7;
}

#content{
    font-family: 'times', serif;
    line-height: 180%;
    color: #444;
    width: 600px;
    margin: 30px auto 50px auto;
    text-align: center;
    height: 400px;
    overflow:auto;
}

.blogimg{
    width: 106px;
    height: 106px;
    margin: 2px;
    display: inline-block;
    z-index: -50;
    position: relative;
}

.blogimg img {
    padding: 5px;
    border: 1px solid #eee;
    z-index: -50;
    width: 96px;
}

.urlshow{
    width: 96px;
    height: 56px;
    display: inline-block;
    background-color: white;
    margin-bottom: -90px;
    padding: 40px 5px 5px 5px;
    top: -50px;
    margin-left: -110px;
    z-index: 50;
    opacity: 0;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    font-family: 'Raleway', sans-serif;
    font-size: 9px;
}

{CustomCSS}</style></head>

<body>

<div id="header">

<!--Replace the link in the line below for picture-->
<div id="image"><img src="http://puu.sh/9gbv1/e0938b2975.png"></div>

<div id="title">BLOGROLL</div>
<div id="links">
    <a href="/">home</a>
    <a href="/ask">ask</a>
</div>
</div>

<!-- CONTENTS -->
<div id="content">

{block:Following}{block:Followed}
<a href="{FollowedURL}" target="blank">
<div class="blogimg"><img src="{FollowedPortraitURL-96}"></div>
<div class="urlshow">{FollowedName}</div>
</a>

{/block:Following}{/block:Followed}

</div>


<!-- CREDIT, PLEASE DON'T TOUCH -->

<div style="position:fixed; bottom:6px; right:12px; font-size:8px; letter-spacing:1px; font-family:gautami;"><a href="http://carolinesthemes.tumblr.com/">CAYLO</a></center></div>


</body></html>