<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- DO NOT REMOVE
 
FOLLOW FOREVER BLOG ROLL v4 MADE BY: http://lostmemento.tumblr.com (lmthemes)
 
-->

<!-- BASIC CSS CUSTOMIZE INSTRUCTIONS
 
If you understand CSS and HTML quite a deal I've putt comments next to each line explaining what it changes
If you don't you'll want to refer to the more detailed guide http://lmthemeslpffv4.tumblr.com/guide
 
-->

<link href='http://fonts.googleapis.com/css?family=Tinos|PT+Serif|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>	

<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Meddon' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
		
	<title>« A HANDFUL OF HEARTBEATS - THESE DARK SPACES »</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">

			<link rel="shortcut icon" href="{Favicon}" />
			<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
			<link rel="alternate" type="application/rss+xml" href="{RSS}" />
	
<style type="text/css">
body {background-color: #f9f9f9; /* EDIT TO CHANGE BACKGROUND COLOR */
	  font-family: 'Tinos', Calibri, Helvetica;  /* EDIT TO CHANGE FONT FACE */
	  margin: 0px;}
	
a {text-decoration: none;}

#top {width: 100%; 
	background-color: #fff; /* EDIT TO CHANGE BACKGROUND COLOR OF TOP */
	font-size: 7px; /* EDIT TO CHANGE FONT SIZE OF TOP */
	letter-spacing: 1px; /* EDIT TO CHANGE THE LETTER SPACING OF TOP */
	position: fixed;}

	
.icon {width: 400%; 
	margin: auto;
	background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND OF ICON PANELS - SHOULD BE THE SAME AS #TOP */
	height: 100px; 
	color: #7a7a7a;
left: -500px;} /* EDIT TO CHANGE THE FONT COLOR OF TEXT UNDER THE TOP ICONS */

.icon a:active, .icon a:visited, .icon a:link {color: #7a7a7a;} /* EDIT TO CHANGE THE FONT COLOR OF THE LINKS UNDER THE TOP ICONS */

.mainblogbox {width: 400px; 
	margin: auto; 
	text-align: center; 
	margin-top: 30px;}

#mtitle {font-size:40px;
 font-style: normal; 
text-align:center; 
font-family: 'Loved by the King', cursive; 
color: #5c2f3e;
 letter-spacing:1px;
margin-top: 5px;
-webkit-transform: rotate(-2deg); 
-moz-transform: rotate(-2deg); 
}

.subtitle {
font-size: 8px; 
text-transform: uppercase; 
font-family: raleway;
letter-spacing:5px;
-webkit-transform: rotate(-2deg); 
-moz-transform: rotate(-2deg); 
margin-top: -10px;
color: #252525; 
display:block;}

.info {
font-size: 10px; 
font-family: raleway;
letter-spacing:5px;
margin-top: -10px;
color: #252525; 
display:block;
text-align: justify;}


.ichover {height: 100px; 
	width: 300px;}

.ichover:hover  .lefticon {       
    transition-duration: 2s;
    -moz-transition-duration: 2s;  
    -webkit-transition-duration: 2s;  
    -o-transition-duration: 2s;  
    background-color: #fff;  /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE LEFT ICON PANEL - SHOULD BE THE SAME AS #TOP */
    color: black;  
    width: 100px;  
    height: 100px;
    margin-left: -250px;
    opacity: 1.0}  

.ichover:hover .righticon {   
	transition-duration: 2s;
    -moz-transition-duration: 2s;  
    -webkit-transition-duration: 2s;  
    -o-transition-duration: 2s; 
    color: black;  
    width: 300px;  
    height: 100px;
    margin-left: 160px;
    opacity: 1.0}
	  
.lefticon {position: absolute; 
    transition-duration: 2s;
    -moz-transition-duration: 2s;  
    -webkit-transition-duration: 2s;  
    -o-transition-duration: 2s;  
    background-color: transparent; 
    color: white;  
    width: 400px;  
    height: 100px; 
	z-index: 0; 
	opacity: 0.0;}

.righticon {position: absolute; 
	transition-duration: 2s;
    -moz-transition-duration: 2s;  
    -webkit-transition-duration: 2s;  
    -o-transition-duration: 2s;  
    background-color: transparent; 
    color: white;  
    width: 400px;  
    height: 100px; 
	z-index: 0; 
	opacity: 0.0;}

.mainicon {margin-top: 25px; 
	z-index: 1; 
	position: relative;}
	
.mainhide {opacity: 1.0;  
	transition-duration: 0.6s; 
	-moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;}
	
.ichover:hover .mainhide {opacity: 0.0;  
	transition-duration: 0.6s; 
	-moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;}
	
.credit {position: absolute; 
	opacity: 0.0; 
	text-align: center; 
	width: 100px;  
	z-index: 1; 
	padding-top: 30px;  }

.ichover:hover .credit {opacity: 1.0;  
	transition-duration: 0.6s; 
	-moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;
	background-color: #fff} /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE CENTER ICON PANEL - SHOULD BE THE SAME AS #TOP */
	
.fyi {color: #fafafa;  /* EDIT TO CHANGE THE FONT COLOR OF WHERE IT SAYS HOVER */
	position: absolute; 
	font-size: 36px; /* EDIT TO CHANGE THE FONT SIZE OF WHERE IT SAYS HOVER */
	z-index: 0; 
	margin-left: -15px;} /* EDIT TO CHANGE THE CENTERING OF WHERE IT SAYS HOVER */

#container {height: 100%; 
	margin: auto; 
	padding: 10px; 
	text-align: center; 
	overflow-y: auto; 
	padding-top: 130px}

.iconsbox {width: 900px; /* EDIT TO CHANGE THE NUMBER OF ICONS PER ROW */
	margin:auto;}
	
.iconsbox img {border: 3px solid #fff; /* EDIT TO CHANGE THE BORDER COLOR THE ICONS */
	margin: 2px;} /* EDIT TO CHANGE THE SPACE BETWEEN ICONS */

.iconsdesch {display: inline-block;}

.iconsdesch:hover .iconsdesc img {height: 296px; /* EDIT TO CHANGE HOVERED ICON SIZE */
	border: 5px solid #fff} /* EDIT TO CHANGE THE BORDER OF THE HOVERED ICON */

.iconsdesch:hover .iconsdesc {opacity: 1.0; /* EDIT TO CHANGE THE OPACITY OF THE HOVERED ICON */
	height: 30px; width: 30px;
	background-color: transparent; 
	transition-duration: 0.6s; 
	-moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s; 
	font-size: 30px;  /* EDIT TO CHANGE THE FONT SIZE OF THE HOVERED ICON */
	font-family: raleway;  /* EDIT TO CHANGE THE FONT FACE OF THE HOVERED ICON */
	letter-spacing: 1px;} /* EDIT TO CHANGE THE LETTER SPACING OF THE HOVERED ICON */

.iconsdesc {opacity: 0.0;
	position: absolute; 
	height: 30px; 
	width:400px; 
	background-color: #fff; 
	font-size: 0px; 
	margin-left: -50px; /* EDIT TO CHANGE THE CENTERING THE HOVERED ICON */
	margin-top: -50px} /* EDIT TO CHANGE THE CENTERING THE HOVERED ICON */

.iconsdesc img {height: 0px; 
	border: 0px solid #000;}

.iconsdesch:hover .icslnk {width: 400px; /* EDIT TO CHANGE THE WIDTH OF THE HOVERED ICON TEXT */
	padding: 5px;  /* EDIT TO CHANGE THE PADDING OF THE HOVERED ICON TEXT */
	background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE HOVERED ICON TEXT */
	margin-left: 2px;}
	
.icslnk a:link, .icslnk a:visited, .icslnk a:active {background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE HOVERED ICON URL */
	width: 30px; 
	max-width: 30px; 
text-transform: lowercase;
	word-wrap: break-word; 
	color: #151515} /* EDIT TO CHANGE THE FONT COLOR OF THE HOVERED ICON TEXT */

.smaller {
	font-size: 12px;  /* EDIT TO CHANGE THE FONT SIZE OF THE HOVERED ICON */
	font-family: raleway;  /* EDIT TO CHANGE THE FONT FACE OF THE HOVERED ICON */
	letter-spacing: 1px;
text-align: justify;} 

.soon {
	font-size: 30px;  /* EDIT TO CHANGE THE FONT SIZE OF THE HOVERED ICON */
	font-family: raleway;  /* EDIT TO CHANGE THE FONT FACE OF THE HOVERED ICON */
	letter-spacing: 1px;} /* EDIT TO CHANGE THE LETTER SPACING OF THE HOVERED ICON */


	.navlist a:link, .navlist a:visited, .navlist a:active {width: 330px; display: block; padding-top: 16px; padding-bottom: 16px; transition: all 0.4s ease-out; -o-transition-transition:  all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; background-color: #000000; opacity: 0.3; filter: alpha(opacity = 30); color: #31AFC0; font-family:Oswald; font-size:10pt; margin-bottom: 2px;}
.navlist a:hover {background-color: #31AFC0; color: #E5E5E5; letter-spacing: 4px;}

.blinks {
height: 20px;
padding-bottom: 0px;
text-transform: uppercase;
letter-spacing: 3px;
background-color: #000;
color:#fff;
font-size: 7px;
line-height: 20px;
font-family: raleway;
opacity:0.4;}






</style>
</head>

<body>

<div id="top">
<center><div class="ichover">
<div class="icon"><div class="lefticon"><div class="mainblogbox"><div class="info">info coming soon.</div></div></div>


<div class="mainhide"><br><div id="mtitle">the beyond</div>
<div class="subtitle">original supernatural</div> 



</div></div></center>

</div>	<section class="pe-container">				<ul id="pe-thumbs" class="pe-thumbs"><div id="container"> <div class="iconsbox">





<center><div class="soon">coming soon</div></center>







</body></html>