theme #63 - LOVESICK

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!---

LOVESICK theme by
F L O R E L S  (✿◠‿◠)   ////
started january 29, 2017
finished january 31, 2017
published january 31, 2017

Look for extra text like this for instructions on how to customize the blogroll page.

--->


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


<title>Blogroll</title> <!-- tab title -->
<link rel="shortcut icon" href="{Favicon}"> <!-- favicon code, replace {Favicon} with image url for custom favicon -->


<script type='text/javascript' src='http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.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:0,
               tip_fade_speed:0
           }
               );
       });
   })(jQuery);
</script>

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono" rel="stylesheet">


<style type="text/css">

iframe#tumblr_controls {
top: 0% !important;
right:0% !important;
position: fixed !important;}

body{
    font-family:'Open Sans'; /* font */}

a{
    text-decoration:none; /* removes underline from links */
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-ms-transition-duration:.4s;}

::-webkit-scrollbar-thumb{
    background-color:#000; /* scrollbar colour */
    border:6px solid #fff; /* scrollbar background */
    height:6px;}

::-webkit-scrollbar {
    height:13px;
    width:13px;
    background-color:#fff;} /* scrollbar background */

#s-m-t-tooltip{
    font-size:9px; /* tooltip font size */
    color:#888; /* tooltip font colour */
    background-color:#fff; /* tooltip background colour */
    text-align:center;
    letter-spacing:1px;
    min-width:50px;
    max-width:120px;
    overflow:auto;
    font-style:italic; /* italic tooltip */
    display:none;
    position:absolute;
    z-index:999999999999;
    padding:5px;
    margin:30px 0 15px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}

#content { /* styling for blogroll container */
    position:absolute;
    top:150px;
    margin:0 auto;
    background-color:#fff;
    left:50%;
    margin:0 0 50px -434px;
    border:1px solid #fff; /* border size, style and colour */
    width:868px;}

/* NOTE if you want to get rid of the blogroll container (#content)'s border but you still want the outside of the idividual boxes to line up, change #nav's width to 800px and the margin-left to -fjldkspx */

#content img{
    width:30px;
    padding:15px;}

#nav { /* styling for the nav bar that includes title and nav links */
    position:absolute;
    width:828px;
    left:50%;
    top:80px; /* distance from top of the page */
    margin-left:-419px;
    border-bottom:1px solid #ccc; /* border size, style and colour */
    padding:5px;}

#title { /* styling for title in nav bar */
    text-transform:uppercase; /* uppercase title */
    font-style:italic; /* italic title */
    color:#ffac84; /* title colour */
    font-size:17px;} /* colour font size */

.ll {
    margin-left:15px;
    list-style:none;}

.ll a { /* styling for nav links */
    font-size:11px; /* nav link font size */
    color:#666; /* colour of nav links */
    margin:0 15px;} /* 15px is the distance either side of each link */

.ll a:hover { /* styling for nav links when you hover over them */
    color:#ffac84;}

.ll li {
    display:inline-block;}

 #pleasedontremove{ /* green flower credit styling */
     position:fixed;
     right:5px;
     z-index:6;
     top:35px;}

.linky{ /* don't touch this */
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;}

.linky a:hover {
    color:#ffac84;}

.pp{ /* styling for each of the blogs on your blogroll */
    display:inline-block;
    position:relative;
    box-shadow: 1px 1px 2px #ccc; /* shadow size and colour of each box */
    background:#fff; /* background colour of each box */
    margin:15px; /* distance between each box */
    padding-right:15px;
    height:60px; /* height of each box */
    border:1px solid #a6a6a6; /* border size, style and colour */
    width:170px;}

 .nn { /* styling for the info container in each box */
     position:absolute;
     line-height:11px;
     margin:17px 0 0 0;}

.uu { /* styling for the blogs' URLs */
    font-size:9px; /* blogs' URL font size */
    color:#888; /* blogs' URL colour */
    text-transform:uppercase;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;}

.tt { /* styling for the blogs' titles */
    font-style:italic; /* italic blog titles */
    color:#888; /* blogs' title colour */
    font-size:8px; /* blogs' title font size */
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-ms-transition-duration:.4s;}

.pp:hover .uu {
    color:#ffac84;} /* blogs' URLs hover colour */

.pp:hover .tt {
    color:#ffac84;} /* blogs' titles hover colour */

</style>
</head>
<body>

<div id="pleasedontremove"><a href="http://florels.tumblr.com/" target="_blank" title="LOVESICK theme by florels"><img src="http://static.tumblr.com/bcpenwm/j7zmzdu17/florels.png"></a></div>

<div id="nav">
    <span id="title">blogroll</span>
    <span class="ll">
        <li><a href="/">back to blog</a>
        <li><a href="/ask">message</a>

<!-- to add more links to the top nav bar use this template:
        <li><a href="LINK URL">LINK TITLE</a>

        Replace 'LINK URL' with the url that you want the link to go to. Make sure that if the link is going to another blog/website, that you put http:// in front of the link. If the link is going to a page on your blog, just use /PAGETITLE. E.g. to go to your 'links' page that is at the url yourtumblrurl.tumblr.com/links, just put the link as /links.

        If you are adding in a script, for example an online counter from freehosted scripts, paste it as normal but make sure that you put <li> before the script.

        IMPORTANT !! Make sure that you add your links BEFORE the <!-- at the beginning of this section of text, otherwise the link will not show up -->

        <li><a href="http://florels.tumblr.com" title="LOVESICK theme by florels">blogroll credit</a>
    </span>
</div>


<div id="content">


{block:Following}
    {block:Followed}
        <div class="pp"><a class="linky" href="{FollowedURL}" target="blank"></a>
        <img src="{FollowedPortraitURL-30}"/>
        <span class="nn"><span class="uu">{FollowedName}</span></br>
        <span class="tt">{FollowedTitle}</span>

        </span>

        </div>
    {/block:Followed}
{/block:Following}

</div>


</body>
</html>