zoeyrph Blogroll Theme #1 Version 1.0: Starry Nights

<!DOCTYPE html>
<html>
<head>

<!--

Blogroll Theme #1 Starry Nights by zoeysthemes.tumblr.com (zoeyrph|tumblr).
Please don't steal this, or edit and repost. I'll get butthurt.
Yes, you may edit this, but do not distribute. Don't be an a$$hole.
Enjoy!

-->


<title>tab title</title> <!-- Edit the title of your tab here -->

<link rel="shortcut icon" href="{Favicon}"/>

<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>


<style type="text/css">

img{-webkit-filter: Grayscale(100%);}

img{-webkit-filter: Grayscale(100%); -webkit-transition-duration: 0.8s; -moz-transition-duration:0.8s; transition-duration:0.8s; -o-transition-duration:0.8s;}

img:hover{-webkit-filter: Grayscale(0%); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

.header {border-bottom-color:#ffffff; width:100%;}
.topbar {border-bottom:#ffffff solid 5px;}
.bottombar {border-top:#ffffff solid 5px;}

body {
	background-color:#f6f6f6;
	background-image:url('http://static.tumblr.com/699db295a58c8e679028e49a668d6586/emdqelm/BKymy9pns/tumblr_static_tumblr_m54az8mpmt1qcvjcxo1_500.gif'); /* Replace image url with the one for your own background image */
	margin:0;
	font-family: 'Signika Negative', sans-serif;
	}

.image {
        margin-left:160px;
        margin-top:40px;
        border: 1px solid #ffffff;
        width:300px;
        height:500px;
        background-image:url('https://31.media.tumblr.com/1d59d437ba0cb9855e9c22a7826d5c01/tumblr_inline_mytj5y1tXf1rgofdh.gif'); /* Replace image url with the one for your own picture or GIF */
        }

.contain {
		width:640px;
		margin:0 auto;
		margin-left:600px;
		overflow-y:scroll;
		overflow-x:hidden;
		height:420px;
		padding:5px 0;
		}

.topbar {
	margin:60px auto 0 auto;
	margin-left:605px;
	width:620px;
	height:25px;
	background-color:transparent;
	}

.bottombar {
	margin:0 auto 0 auto;
	margin-left:605px;
	width:620px;
	height:25px;
	background-color:transparent;
	}

a { text-decoration: none;
	text-align:center;
	text-transform:uppercase;
	font-size:10px;
	color:#777777;
	}
@-moz-document url-prefix() {
    .contain {
        width:650px!important;
    }
.topbar,.bottombar {
        width:620px!important;
    }

	}

.header {
	width: 500px;
	height:50px;
	background-color:transparent;
	margin-left:0%;
	margin-top: 5%;
	padding: 5px 0 0 0;
	color:#ffffff;
	font-size:36px;
	text-align:center;
	font-family: 'Arvo', serif;
	border-bottom-width:5px;
	border-bottom-style:solid;
	}

.subhead {
	padding:5px 0;
	width: 300px;
	margin-left: 800px;
	margin-top: -580px;
	text-align:center;
	font-size:8px;
	color:#eeeeee;
	letter-spacing:+2px;
	}

.subhead a {font-size:9px;
	letter-spacing:+4px;
	color:#fff;}


.url {opacity:0;
	margin-top:-29px;
	position:relative;
	min-width:48px;
	background-color:#222222;
	text-align:center;
	padding:3px;
	}

.url a {font-size:7px;
	text-transform:uppercase;
	letter-spacing:+1px;
	color:#ffffff;
	background-color:#222222;
	padding:3px 0;
	}

.icon {
	float:left;
	width:48px;
	height:48px;
	background:#ffffff;
	padding:6px;
	margin:5px;
	}

.icon:hover .url {
	opacity:1;
	transition: all 0.3s ease-out;
	-o-transition-transition:  all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	}


.credit {
		padding:10px;
		font-size:20px;
		color:#ffffff;
		position:fixed;
		bottom:10px;
		right:10px;
		}

::selection {
		background-color:#ffffff;
		opacity: 0.6;
		color:#000000;
		}

::-moz-selection {
		background-color:#ffffff;
		color:#000000;
		}

::-webkit-scrollbar {
		width:5px;
		height:auto;
		background:#bcbcbc;
		}

::-webkit-scrollbar-corner {
		background:#eeeeee;;
		}

::-webkit-scrollbar-thumb:vertical {
		background:#ffffff;
		}

::-webkit-scrollbar-thumb:horizontal {
		background:#ffffff;
		}

</style>
</head>


<body>


<div class="header">♔ MY BLOGROLL</div> <!-- Edit the title here -->

<div class="image"></div>

<div class="subhead">
<a href="/">back</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/ask">message</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://tumblr.com/dashboard">dash</a> <!-- Edit the link names and their URLs here -->
</div>
<div class="topbar"></div>
<div class="contain">
{block:Following}
{block:Followed}

<div class="icon">
<a href="{FollowedURL}" target="_blank">
<img src="{FollowedPortraitURL-48}"></a>
<div class="url"><a href="{FollowedURL}">{FollowedName}</a></div></div>

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

</div>
<div class="bottombar"></div>


<div class="credit">
<a href="http://zoeysthemes.tumblr.com">♔</a>
</div>


</body>
</html>