page pack - blogroll

<head>
<title>blogroll</title>
<!--- change the title of the page here --->

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

ʙʟᴏɢʀᴏʟʟ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
    please don't take off the credit it's really small!!!!


                    ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
                    ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
                    ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
                    ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
                    ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
                    ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
                    ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
                    ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
                    ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
                    ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
                    ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
                    ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯


               hardziam.tumblr.com // themesbyzsu.tumblr.com


--->


<style type="text/css">

/* ----- HERE YOU EDIT ALL THE COLORS AND PUT IN AN IMAGE ------ */

.left {
/* ------------   SIDE IMAGE HERE  ----------- */
    background-image:url(http://24.media.tumblr.com/682a72e5060c74ce8603087767479508/tumblr_mxgi61mPM01raoel6o1_500.jpg);
/* ------------   SIDE IMAGE HERE  -----------*/
}

/* ------- HERE YOU CHANGE THE COLORS ----- */

.links a{
    border-right:10px solid #fff;
    color:#ccc;}

.links a:hover{
    color:#fff;
    border-right:20px solid #fff;}

#title{
    color:black;}

#follower a{
    color:#000;}

#follower em{
    color:#eee;}

#follower img{
    border:3px solid #eee;}

#follower:hover img{
    border:3px solid gray;}


::-webkit-scrollbar {background-color:#eeddcc; border:2px solid #eeddcc;height:5px; width:5px;}
::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #000; height:40px;}
::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #000; height:8px!important}

/* ------ END OF CUSTOMISATION ----- */


body {
        background: #fff;  /*here you can put in a background */
        margin-left:0px;
        padding: 0;
        position:fixed;
        }

a {
    text-decoration:none;
    outline:none;
    color:gray; /*change link colors here */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

a:hover {
    color:#eee; /*change link hover color */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#mainContainer {
    margin-top:-10px;
    width:900px;
    height:100%;
}

.left {
    height:110%;
    width:400px;
    z-index:99;
    background-size:cover;
    background-position: center;
    position:fixed;
    float:left;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}


.links {
    margin-top:10px;
    text-align:right;
}

.links a{
    font-family:century gothic;
    font-size:10px;
    text-transform:uppercase;
    padding-right:5px;
    display:block;
    margin-bottom:5px;
}

.links a:hover{
    padding-right:15px;
}

.container {
    width:500px;
    margin-left:400px;
    z-index:20000;
    position:absolute;
    background:white;
}

#title {
    font-family:century gothic;
    text-align:left;
    background:white;
    text-transform:uppercase;
    color:#000;
    position:fixed;
    margin-top:10px;
    padding-left:20px;
    width:540px;
    font-size:40px;
    letter-spacing:10px;
}


#followarea {
position: absolute;
margin-left:10px;
margin-top:70px;
width:620px;
height:550px;
overflow:auto;
text-align: center;
}

 #follower a{
    text-decoration: none;
    font-size:10px;
    font-family:georgia;
    display:block;
    letter-spacing:1px;
    text-transform:lowercase;
    font-style:italic;
    text-align:center;
    width:175px;
    padding:6px;
    margin-left:10px;
    float:left;
    margin-bottom:3px;
    -webkit-transition:opacity 0.8s linear;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
            }

#follower:hover img{
    -webkit-transition:opacity 0.8s linear;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

#follower em{
    font-size:8px;
    font-family:calibri;
    text-transform:uppercase;
}

#follower img{
    border-radius:50%;
    -webkit-transition:opacity 0.8s linear;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

#follower{
    height:70px;
    width:190px;
    float:left;
    overflow:hidden;
}


#credit {
position:fixed;
right:0px;
bottom:0px;
padding:4px;
width:15px;
text-transform:none;
font-family: helvetica;
font-weight:none;
letter-spacing:1px;
margin-bottom:3px;
font-size:9px;
margin-right:3px;
border:1px solid;
opacity:0.7;
border-color:#bbb;
background: #fff;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#credit:hover {
opacity:1;
width:15px;
background:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

</style>


</head>

<body>

<div id="mainContainer">
<div class="left">
    <div class="links">
        <a href="/broll">refresh</a>
        <a href="/">home</a>
        <a href="/ask">message</a>
        <a href="/">link</a>
        <a href="/">link</a>


        </div>
</div>
<div class="container">
<div id="title">blogroll.</div>

<div id="followarea">
           {block:Following}
            {block:Followed}
            <div id="follower">
<a href="{FollowedURL}">
                    <img src="{FollowedPortraitURL-48}" align="left"><br>{FollowedName}<br><em>{FollowedTitle}</em>
                </a>
            </div>
{/block:Followed}
{/block:Following}
</div></div>


</div>
</div>

<div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>

</body>


</html>