Blogroll Layout Gray

<html><head>

<!---------------------------------------

Blogroll - Gray Layout by James, 2012.
http://themesbyjames.tumblr.com

-there are many notes in this layout
 read though this code and find note
 just like this if you want to edit
 this layout
---------------------------------------->


<meta charset="utf-8" />

<title>{title}</title>

<link rel="shortcut icon" href="{favicon}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800' rel='stylesheet' type='text/css'>

<style type="text/css">

body {
background-image: url("http://static.tumblr.com/8jq17g7/Adzlz9et1/bg_body.gif");

<!----------------------------------------------------
YOU CAN CHANGE THE BACKGROUND IMAGE BY
UPLOADING A NEW IMAGE @
http://www.tumblr.com/themes/upload_static_file
THEN COPY THE URL AND PASTE IT WHERE THE
CURRENT URL IS
http://static.tumblr.com/8jq17g7/Adzlz9et1/bg_body.gif
PLEASE NOTE THAT IMAGES WILL BE REPEATED
----------------------------------------------------->
background-color:#fff;
border: 0 none;
font-family: 'Open Sans',sans-serif;
font-size: 11px;
margin: 0;
padding: 0;}
a { text-decoration:none;
color:;}

a:hover {
color:;}
a:active{outline: none;}
a:focus{-moz-outline-style: none;}
:-moz-any-link:focus{outline: none;}
img{border:none;}

a:link, a:active, a:visited{
color: #000;
text-decoration: none;
-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
}

.clear {clear:both;}
.wrap{
height: 594px;
margin: 20px auto;
width: 803px;
position:relative;}

.wrap h1{
font-family: 'BebasRegular';
font-size: 30px;
font-weight: normal;
margin: 0 30px 5px;
padding: 0;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);}

.wrap h1 a{
color:#222;}

.blogroll_wrap{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 5px rgba(100, 100, 100, 0.1), 0 0 30px rgba(100, 100, 100, 0.1) inset;
height: auto;
padding: 30px;
width: 743px;}

.blogroll{
list-style: none outside none;
margin: 0;
padding: 0;
width: 756px;}

.blogroll li{
float: left;
height: 30px;
margin: 0 6px 6px 0;
padding: 0;
position: relative;
width: 30px;}

.blogroll li .hover{
background:rgba(255, 255, 255, 0.9);
height: 30px;
opacity: 0;
position: absolute;
text-align: center;
width: 102px;
z-index: 500;
-webkit-transition: all 0.2s linear;
-moz-transition:  all 0.2s linear;
-o-transition: all 0.2s linear;
transition:  all 0.2s linear;}

.blogroll li:hover .hover{
opacity:1;
-webkit-transition: all 0.2s linear;
-moz-transition:  all 0.2s linear;
-o-transition: all 0.2s linear;
transition:  all 0.2s linear;}

.blogroll li img{
height: 30px;
margin: 0;
padding: 0;
width: 30px;}

.blogroll li .hover .letter{
color: #222222;
font-family: 'Oswald',sans-serif;
font-size: 20px;
margin: 0 auto;}


.blogroll li.last{
color: #000000;
font-size: 9px;
font-weight: bold;
margin-left: 10px;
padding: 9px 0;
text-transform: uppercase;
width: 200px;}

.footer{
margin: 17px 0;
text-align: center;}
.footer a{
color: #000000;
font-size: 9px;
font-weight: bold;
opacity: 0.3;
text-transform: uppercase;}
.follow_these{
background: url("http://static.tumblr.com/8jq17g7/Nkelzicfu/follow_them_blogroll.png") repeat scroll 0 0 transparent;
height: 532px;
margin-left: -271px;
margin-top: 81px;
position: absolute;
width: 257px;}

@font-face {
font-family: 'BebasRegular';
src: url('http://static.tumblr.com/rhoet4k/JEtlxr3nb/bebas___-webfont.eot');
src: url('http://static.tumblr.com/rhoet4k/JEtlxr3nb/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('http://static.tumblr.com/rhoet4k/8dnlxr3ot/bebas___-webfont.woff') format('woff'),
url('http://static.tumblr.com/rhoet4k/WV4lxr3nw/bebas___-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/rhoet4k/Yxolxr3ni/bebas___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;
}


</style>

<body>

<script src="http://static.tumblr.com/ek9ly4s/gKbm25g5d/infinitescroll.txt" type="text/javascript"></script>

<div class="wrap">

<!--------------------------------------
TO CHANGE THE TITLE AT THE TOP OF THE
PAGE CHANGE "BLOGROLL" BETWEEN THE 2
<H1> TAGS.
--------------------------------------->

<h1>Blogroll</h1>

<div class="blogroll_wrap">
<ul class="blogroll">

<p>

{block:Following}{block:Followed}

<!--------------------------------------
{FollowedPortraitURL-48} (48px X 48px)

The size of the of the follower portrait
you can change the number 48 to either

16
24
30
40
64
96
128
--------------------------------------->

<a target="_blank" href="{FollowedURL}"><img border: "0" src="{FollowedPortraitURL-48}" title=”{FollowedTitle}"/>

{/block:Followed}{/block:Following}</a>

</p>
<div class="clear"></div>
</ul>
<div class="clear"></div>
<div class="footer">
<a href="/">Return Back to Blog</a>
</div></div></div></body></html>