PAGEPACK #4 (BLOGROLL)

<html>
<head>

<!--


PAGE PACK - #4 BLOGROLL PAGE BY KIMTYS.TUMBLR.COM

edit as much as you want but please don't hide or remove credits!


-->

    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <meta name="description" content="{MetaDescription}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
    <link rel="altertnate" type="application/rss+xml" href="{RSS}">
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script>
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:0,
attribute:"title"
});
});
</script>

<style type="text/css">


::-webkit-scrollbar-thumb:vertical {
    background: #ffc3d4; /* SCROLL COLOR */
    height: 5px;
    width:9px;
    border-radius: 0px; -moz-border-radius: 8px -webkit-border-radius: 8px o-border-radius: 8px; -ms-border-radius: 8px;
}


::-webkit-scrollbar {
    height: 0px;
    width: 3px;
    background: transparent;
    border: 1px solid transparent transparent transparent transparent;
}


::-moz-selection {
    background:#ffc3d4; /* SELECT BACKGROUND COLOR */
    color:#fff; /* SELECT TEXT COLOR */
}
::selection {
    background:#ffc3d4; /* SELECT BACKGROUND COLOR */
    color:#fff; /* SELECT TEXT COLOR */
}

body {
    background-color:#f5f5f5; /* BACKGROUND COLOR */
    height:100%;
    font-size:11px;
    font-family:arial;
}


a:link, a:active, a:visited {
    text-decoration:none;
    color:#bbb;
}

a:hover {
    text-decoration:underline;
    cursor:help;
}

#sidebar {
    position: fixed;
    border-right:2px solid #f5f5f5; /* SIDEBAR BORDER 1 COLOR */
    outline:2px solid #fff; /* SIDEBAR BORDER 2 COLOR */
    width: 265px;
    height:100%;
    background:#fff; /* SIDEBAR BACKGROUND COLOR */
    text-align: center;
    top: 0px;
    left:0px;
    z-index:99;
    padding-right:0px;
    }

.sidebar {
    margin:auto;
    margin-top:100px; /* TITLE TOP POSITION */
    background:transparent;
}


#title{
    font-family: 'Oswald', sans-serif;
    line-height:90%;
    font-size:40px;
    font-weight:300;
    text-transform:uppercase;
    word-spacing:3px;
    color: #ccc; /* TITLE COLOR */
    padding: 5px;
    text-align:center;
    margin-top:0px;
    margin-bottom:-15px;
}

#title span {
    font-weight:300;
    color:#ffc3d4; /* TITLE SECOND COLOR */
}

#link {
        display:inline-block;
        font:9px tunga;
        text-transform:uppercase;
        font-weight:bold;
        letter-spacing:1px;
        margin-top:15px;
    }

    #link a {
        color:#bbb; /* LINKS COLOR */
        padding: 1px 4px 0px 4px;
    }

    #link a:hover {
        background:#f5f5f5; /* LINKS BACKGROUND COLOR */
        color:#bbb; /* LINKS HOVER COLOR */
        text-decoration:none;
    }


#box1 {
    position:absolute;
    width:900px;
    top:40px;
    margin:auto;
    left:290px;
    right:0;
}

#box2 {
    width:900px; margin-top:20px;
    margin-bottom:30px;
}


#following {
    width:900px;
    padding:10px;
    margin-top:10px;
    background:transparent;
}

#blogs {
    display:inline-block;
    overflow:hidden;
    border:2px solid #f5f5f5; /* BLOGS BORDER 1 COLOR */
    outline:2px solid #fff; /* BLOGS BORDER 2 COLOR */
    background:transparent;
    margin-right:15px;
    margin-bottom:15px;
    -webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

#blogs img {
    padding:8px;
    background:#fff; /* BLOGS BACKGROUND COLOR */
    width:64px;
    margin-top:0px;
    -webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}


#blogs:hover .info {
    opacity:1;
    word-wrap: break-word;
    -webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

.info {
position:absolute;
width:70px;
height:70px;
padding:5px;
font-size:10px;
background:#fff; /* BLOGS BACKGROUND HOVER COLOR */
font-family:'Oswald', sans-serif;
text-transform:uppercase;
color:#ffc3d4; /* BLOGS TITLE COLOR */
word-wrap: break-word;
opacity:0;
text-align:center;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}

.name {
position: relative;
top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#s-m-t-tooltip {
    z-index: 9999;
    background: #fff; /* TOOLTIP BACKGROUND COLOR */
    line-height:150%;
    font-family:tunga;
    font-size:9px;
    font-weight:bold;
    color:#ccc; /* TOOLTIP TEXT COLOR */
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid #f5f5f5; /* TOOLTIP BORDER 1 COLOR */
    outline:2px solid #fff; /* TOOLTIP BORDER 2 COLOR */
    max-width: 500px;
    text-align: justify;
    padding: 3px 6px 2px 6px;
    display: block;
    margin: 24px 14px 7px 12px;
}

#cr {
    bottom:10px;
    left:10px;
    font-weight:bold;
    color:#ffc3d4; /* CR LINK COLOR */
    font-size:12px;
    position:fixed;
    background:#f5f5f5; /* CR BACKGROUND COLOR */
    padding:4px 7px;
    border: 2px solid #fff; /* CR BORDER 1 COLOR */
    outline:2px solid #f5f5f5; /* CR BORDER 2 COLOR */
}


</style>

<body>


<div id="sidebar">

<!-- CREDIT -->

<a href="https://kimtys.tumblr.com" title="theme by kimtys"><div id="cr">k.</div></a>

<div class="sidebar">
<div id="title"><span>YOUR</span> TITLE</div>
</div>
<div id="link"><a href="/">back</a> <a href="/ask">ask</a></div>
</div>

<div id="box1">

<div id="box2">


{block:Following}<div id="following">
{block:Followed}<div id="blogs"><center>
<a href="{FollowedURL}" title="{FollowedTitle}"><div class="info"><section class="name">{FollowedName}</section></div><img src="{FollowedPortraitURL-64}" /></a></center></div>{/block:Followed}
</div>{/block:Following}

</div>

</div>

</body>
</html>

<!--