html13

<head>

<title>Blogroll</title>

<!--------------------------------------------------------------------------
------------------------ Adrienne Law's navi page ------------------------------------------------Give credit where credit is due-------------------------------------------------------------------------------------------------->

<script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
<style>
    div#qTip {
    padding: 3px;
    display: none;
    text-align: center;
    position: absolute;
    font-size:7px;
    line-height:9px;
    font-family:'raleway';
    z-index: 10000000000000000000000000000000000000000000000000000000000000;
    border: 1px solid #7E7F80;
    background-color:#ffffff;
    color: #A7A7A8;
    text-transform:uppercase;
    letter-spacing: 1px;
    border-radius:4px;
}
    </style>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>


<style type="text/css">

::-webkit-scrollbar-thumb:vertical {
    background-color: #ccc; /*Change color of scroll bar*/
    height:5px;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-webkit-scrollbar-thumb:horizontal {
	background-color: #ccc; /*Change color of scroll bar*/
	height:5px!important;
}

::-webkit-scrollbar {
	height:7px;
	width:5px;
}


iframe#tumblr_controls{
    position:fixed !important;
    right:0px !important;
    z-index:999;
}

html, body {
    background-color:white;
    width:100%;
    overflow:hidden;
}


#container {
    width:600px;
    height:auto;
    margin-top:120px;
    margin-left:auto;
    margin-right:auto;
}


#title {
    display:inline-block;
    width:360px;
    border:3px double #efefef;
    text-align:center;
    font-family:'raleway';
    color:#a7a7a8;
    margin-top:8px;
    margin-left:200px;
    padding:10px;
    position:absolute;
    font-weight:400;
}

#links{
    display:inline-block;
    width:366px;
    font-family:'raleway';
    color:#a7a7a8;
    margin-top:54px;
    margin-left:200px;
    padding:10px;
    position:absolute;
    font-size:12px;
    text-align:center;
    font-weight:100;
}
    #links a{
        width:80px;
        text-decoration:none;
        display:inline-block;
        color:#a7a7a8;
    }
    #links a:hover{
        color:#efefef;
        text-decoration:underline;
    }
#picture {
    display:inline-block;
    height:400px;
    border:1px solid #efefef;
    margin:8px;
    text-align:center;
    position:absolute;
    width:178px;
}
    #picture img {
        height:394px;
        width:172px;
        padding:3px;
    }

#content {
    display:inline-block;
    width:374px;
    height:308px;
    border:1px solid #efefef;
    font-family:'raleway';
    color:#a7a7a8;
    margin-top:90px;
    margin-left:200px;
    padding:5px;
    position:absolute;
    font-size:12px;
    overflow:scroll;
}

#blogroll {
    margin-right:auto;
    margin-left:auto;
    height:400px;
    letter-spacing:2px;
    width:364px;
}

.icon{
    display:inline-block;
    opacity:.6;
    filter: {FollowedPortraitURL};
    filter: gray;
    -webkit-filter: grayscale(100%);
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.icon:hover {
    border-radius:25%;
    opacity:1;
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


#credit a {
        display:inline-block;
        width:40px;
        background-color:#fff;
        color:gray;
        text-decoration:none;
        border-right:1px solid;
        border-left: 1px solid;
        border-color:#878787;
        padding: 2px 0px 2px 0px;
        -o-transition: all 1s ease-out;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
    }

    #credit a:hover {
        background-color:#667371;
        color:#fff;
        border-color:#fff;
        -o-transition: all 1s ease-out;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
    }

#credit {
    display:inline-block;
    font-size:10px;
    font-family: calibri;
    text-align:center;
    letter-spacing:1px;
    width:40px;
    height:15px;
    position: fixed;
    padding-top:1px;
    right:25px;
    bottom:10px;

}

iframe#tumblr_controls {
    top: 0% !important;
    right:0% !important;
    opacity:0.3;
    position: fixed !important;
    filter:alpha(opacity=100);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}
iframe#tumblr_controls:hover{
    top: 0% !important;
    right:0% !important;
    opacity:0.8;
    position: fixed !important;
    filter:alpha(opacity=100);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

</style>

<body>


<div id="container">
    <div id="picture"><img src="http://media.tumblr.com/048ce07b37cf81eb568773dbfa5ecf4d/tumblr_inline_naftebhxO91sx4y6i.png"></div>
    <div id="title">Blogroll</div>

<!--- CHANGE MAIN LINKS HERE --->

    <div id="links">
        <a href="/">Home</a>
        <a href="/me">About</a>
        <a href="/navigation">Navigation</a>
        <a href="/inquire">Inquire</a>
    </div><!-- end of div "links" -->


    <div id="content">

    <div id="blogroll">
{block:Following}{block:Followed}<a target='blank' href='{followedURL}' title='{FollowedName}'><img border='0' src='{FollowedPortraitURL-48}' alt="{FollowedTitle}" style="padding:2px; border:1px solid gray; margin:4px;" class="icon"/></a>
{/block:Followed}{/block:Following}
</div>


    </div><!-- end of div "content" -->


</div><!-- end of div "container" -->


<!-------------------------------------------------------------------------------- I don't care if you edit, but please for the love of god do not -----
-------------------- remove the credit on my stuff -------------------------
--------------------------------------------------------------------------->

<div id="credit">
    <div style="font-size:12; font-style:italic; text-align:center; padding-left:2px; padding-right:2px;"><a href="http://theleakycauldron.tumblr.com"> ---a---</a></div>
</div>

</body>