Blogroll

<!--
Blogroll by kalopsiathemes
Please do not
          -remove the credit
          -steal parts of code
          -use as a base

   Feel free to
         -edit parts of the page
         -ask me any questions
         -->
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>
 <title>{Title}</title>
 <link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<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(){

$("a[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: 2px;
width: 4px;
-webkit-border-radius: 1px;
background-color:#ffffff;}
::-webkit-scrollbar-thumb {height:auto;
background-color:#ffffff;
border:1px solid #6f6f6f;
}
::-webkit-scrollbar-track {
background:#ffffff;}

#s-m-t-tooltip {max-width:400px;
padding:2px;
margin:10px 0px 0px 10px;
padding:1px 4px;
background-color:#ffffff;
text-transform:uppercase;
font-size:7px;
font-family: Times,sans-serif;
letter-spacing:2px;
color:#6f6f6f;
z-index:999;

}

body {
   background-image: url("http://static.tumblr.com/wi2dwmg/pJqnes74o/photo-1415226355641-7f90f89def6a.png");
/*this is where you put the background picture. Here is a place you can upload it and get a url: https://www.tumblr.com/themes/upload_static_file.*/
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  font-family:Palatino, serif;
  color:#6f6f6f; <!--change text color here-->
}

		#following {
		    width:500px;
		    height:470px;
		    padding:5px;
		 margin:auto;
		 margin-top:50px;
		  top: 0px; left: 0; bottom: 0; right: 0;
		}

		#following img {
		    padding:5px;
		    margin:5px;
		}

		#following img:hover {
		   background-color:#6f6f6f;
		}

		#top {
		    width:500px;
		    height:80px;
		    margin-bottom:20px;
		  background-color:#ffffff;
		}

		#content {
		    width:500px;
		    height:370px;
		  overflow:scroll;
		 background-color:#ffffff;
		}

		ul {
			list-style: none;
		}
		li {

			float: left;
		}

	#title {
	    font-size:18px;
	    text-transform:uppercase;
	   text-align:center;
	    letter-spacing:4px;
	    padding:5px;
	    margin-bottom:5px;
	     padding-top:15px;
	     font-weight:700;
	 font-family: 'Ubuntu', sans-serif;
	}

#nav {
   width:300px;
   margin:auto;
   text-align:center;
}

#link {
    display:inline-block;
      width:10px;
      height:10px;
      overflow:hidden;
      font-size:10px;
      padding:2px;
    border:1px solid #6f6f6f;
    word-spacing:5px;
-moz-transition-duration:all .7s ease-in-out;
    -webkit-transition-duration:all .7s ease-in-out;
    -o-transition-duration:all .7s ease-in-out;
}

#link:hover {
    width:40px;
text-align:right;
             -moz-transition-duration:.7s;
   -webkit-transition-duration: .7s;
   -o-transition-duration:.7s;
}

.link {
    opacity:0;
-moz-transition-duration:all .7s ease-in-out;
    -webkit-transition-duration:all .7s ease-in-out;
    -o-transition-duration:all .7s ease-in-out;
}

#link:hover .link {
    opacity:1;
             -moz-transition-duration:.7s;
   -webkit-transition-duration: .7s;
   -o-transition-duration:.7s;
}

	a:link, a:visited {
	    text-decoration:none;
	    color:#6f6f6f;
	}

	a:hover {
	    text-decoration:none;
	    color:#6f6f6f;
	}
 #credit {
position:fixed;
color:#ffffff;
bottom:5px;
right:10px;
padding:4px;
font-size:12px;
}

#credit a {
color:#ffffff;
    text-decoration:none;
}
		</style>
	</head>
<body>

<div id="following">
<div id="top">
<div id="title">Blogroll</div>
<div id="nav">
<div id="link"><div class="link"><a href="/">home</a></div></div>
<div id="link"><div class="link"><a href="/ask">ask</a></div></div>
<div id="link"><div class="link"><a href="">link</a></div></div>
 </div>
</div>
<div id="content">
		{block:Following}
		<ul>
			{block:Followed}
			<li>
		<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"></a>
			</li>
			{/block:Followed}
		</ul>
		{/block:Following}
	</div></div>
 <div id="credit">
    <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
       </body>
</body>
 </html>