Blogroll Page 01: Sunlight

<html>

<!---

Blogroll Page 01: Sunlight by lunecerise aka blackthestrals
-don't steal any code
-don't remove/move credit
-don't use as a base code

--->

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>


<style type="text/css">

::-webkit-scrollbar{height: 9px; width: 8px; -webkit-border-radius: 0px; background-color:#fff;}
::-webkit-scrollbar-thumb{background-color:#2dd8d0;}
::-webkit-scrollbar-track{background-color:#fff;}

*, body, a, a:hover {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}

body {
    background-color:#fff;
    font-family:calibri;
    font-weight:normal;
}

a {
    text-decoration:none;
}

#bg, #bg img {
   margin-left:-10px;
   display:inline-block;
   width:400px;
   height:105%;
   opacity:0.8;
   z-index:-1;
   float:left;
   position:fixed;
   margin-top:-15px;
}

#bg2, #bg2 img {
    display:inline-block;
    float:right;
    margin-left:520px;
    position:fixed;
    width:400px;
    height:105%;
    opacity:0.8;
    z-index:-1;
    margin-top:-15px;
}

.fire {
    width:600px;
    height:500px;
    overflow:scroll;
    margin-left:410px;
    margin-top:100px;
    position:absolute;
    background-color:#fff;
    border:solid 1px #f2f2f2;
    box-shadow: 3px 3px #aaa;
}

.fire img {
    opacity:0.7;
    width:64px;
    height:64px;
    display:inline-block;
    padding:5px;
    margin:10px;
    float:left;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
}

.fire img:hover {
    opacity:1;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
}

#links {
    width:100%;
}

#links a {
    display:inline-block;
    padding:10px;
    background-color:#fff;
    border-radius:100%;
    border:1px solid #2dd8d0;
    box-shadow:2px 2px #aaa;
    margin-top:5px;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
}

#links a:hover {
    background-color:#2dd8d0;
    border-color:#fff;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
}

#title {
    width:585px;
    text-align:center;
    padding:5px;
    font-size:30px;
    color:#2dd8d0;
    text-transform:uppercase;
    position:absolute;
    margin-top:45px;
    margin-left:410px;
    border-bottom:1px solid #f2f2f2;
}

.retroshadow {
    color: #2c2c2c;
    letter-spacing: .05em;
    text-shadow:
    3px 3px 0px #d5d5d5,
    4px 4px 0px rgba(0, 0, 0, 0.2);
}

#s-m-t-tooltip {
max-width:300px;
padding:1px 4px;
margin:20px 0px 0px 20px;
height:auto;
background-color:#2dd8d0;
font-family:calibri;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
color:#fff;
z-index:999999999999999999999999999999999999;
}

#credit, #credit a {
    position:fixed;
    bottom:2px;
    right:4px;
    padding:2px 3px;
    font-family: 'Alegreya Sans SC', helvetica;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    width:15px;
    height:15px;
    background-color:#000;
    -moz-transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
}

#credit:hover, #credit a:hover {
    font-family: 'Alegreya Sans SC', helvetica;
    color:#000;
    background-color:#fff;
    text-shadow:#aaa 2px 2px;
    -moz-transition-duration:0.4s;
    -webkit-transition-duration:0.4s;
    -o-transition-duration:0.4s;
    -ms-transition-duration:0.4s;
}

</style>
</head>
<body>


<div id="bg"><img src="http://25.media.tumblr.com/52ae53be6572cca0d1a00acad9d86704/tumblr_n2gcl3hOPj1rf1vfdo2_250.jpg"></div> <div id="bg2"><img src="http://24.media.tumblr.com/4fb19a8dace5b51884104db2a0631c8c/tumblr_n2gcl3hOPj1rf1vfdo4_250.jpg"></div>
<div id="title" class="retroshadow">
<div id="links">
<a href="/" title="home"></a>
Blogroll
<a href="/ask" title="ask"></a>
</div></div>
<div class="fire">

{block:Following}
{block:Followed}

 <a href="{FollowedURL}" target="_blank" title="{FollowedName}"><img src="{FollowedPortraitURL-64}"> </a>

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

</div>

<div id="credit"><a href="http://lunecerise.tumblr.com" title="lunecerise">LC</a></div>

</body>
</html>