Blogroll #001 by striveattemptfail

<!--
CUSTOM PAGE 003:  BLOGROLL #001
THEME BY:  Jercy @ striveattemptfail.tumblr.com

pl0x don't steal this code thx
-->

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

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

<head>
<style type="text/css">

body { font-family: Arial; font-size: 14px; margin: 0; padding: 0;
    background-color: #E1F5C4; /* changes page background */
}

.title { font-family: 'Sue Ellen Francisco', cursive; font-size: 75px; font-style: italic; text-align: right; margin-top: 25px; margin-bottom: -35px; margin-left: auto; margin-right: auto; width: 696px;
    color: #FF4E50; /* changes title colour */
}

#main { padding: 25px 15px 15px 15px; margin-left: auto; margin-right: auto; width: 696px;
    background-color: #F9D423; /* changes container background colour */
    border: 10px dashed #f97007; /* changes container border colour */
}

/* USERS *//* CODE BY STRIVEATTEMPTFAIL */
#avi { width: 96px; display: inline-block; margin-top: 5px; }

#avi img { width: 96px; border-top-left-radius: 50px; -webkit-border-top-left-radius: 50px; -moz-border-radius-topleft: 50px; border-top-right-radius: 50px; -webkit-border-top-right-radius: 50px; -moz-border-radius-topright: 50px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }

#avi:hover .caption { opacity: 1; }

.caption { opacity: 0; margin-top: -3px; margin-bottom: 5px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;
    background-color: #FF4E50; /* changes username background colour */
}

.caption a { text-decoration: none; text-align: center; letter-spacing: 2px; padding: 3px; width: 90px; height: 17px; overflow: hidden; display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;
    color: #E1F5C4; /* changes username text colour */
}

.caption a:hover { letter-spacing: 0px; }

/* LINKS */
#links { width: 175px; margin-top: 7px; margin-left: auto; margin-right: auto; margin-bottom: 15px; }

#links a { text-align: center; text-decoration: none; padding: 5px 0px; margin: 0px 3px; width: 175px; display: inline-block; letter-spacing: 2px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;
    background-color: #FF4E50; /* changes bottom link background colour */
    color: #E1F5C4; /* changes bottom link text colour */
}

#links a:hover { letter-spacing: 0px; }

/* SCROLLBAR */
body::-webkit-scrollbar { width: 0.5em; height: 0.5em; }

body::-webkit-scrollbar-track {
    background-color: #E1F5C4; /* changes scrollbar track colour */
}

body::-webkit-scrollbar-thumb {
    background-color: #FF4E50; /* changes main scrollbar colour */
}

body::-webkit-scrollbar-corner {
    background-color: #E1F5C4; /* changes scrollbar corner colour */
}

/* CREDIT *//* CODE BY STRIVEATTEMPTFAIL */
#cred { position: fixed; bottom: 10px; right: 5px; transition: all 0.75s ease-in-out; -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; }

#cred:hover { transform: translate(0,-10px); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); }

#cred a {text-decoration: none; padding: 3px;
    background: #f97007; /* changes credit background colour */
    color: #E1F5C4; /* changes credit text colour */
}

</style>

</head>

<body>

<!------------CODE BY STRIVEATTEMPTFAIL, please don't steal------------>

<div class="title">
blogroll
</div>

{block:Following}
<div id="main">

{block:Followed}<div id="avi"><a href="{FollowedURL}" target="_blank" /><img src="{FollowedPortraitURL-96}">
<div class="caption">{FollowedName}</a></div></div>
{/block:Followed}

</div>
{/block:Following}

<div id="links">
<a href="/">back to blog</a>
</div>

<!----------------------------THEME CREDIT---------------------------->
<div id="cred"><a href="http://striveattemptfail.tumblr.com" title="theme credit" />&#9903;</a></div>

</body>
</html>