Piano Keys Tumblr Theme, Piano Keys Theme for Tumblr.com

You're currently viewing the Piano Keys tumblr theme code and instruction page.

How to install this theme.

Step 1. Select and copy the code for the theme style you like below from the code boxes.

Step 2. Now go to the "Customize your blog" in tumblr.

Step 3. Click the "Edit HTML" button or "Use Custom HTML button to the left.

Step 4. Select all the HTML that's in there already and delete it if there's any.

Step 5. Now paste in the code you copied from Step 1 in here and click "Update Preview"

Step 6. Click "Save" then "Close" in the top left corner and now your new theme is installed!

Piano Keys Wonderwall Theme

 
<head>

<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://static.tumblr.com/j1tjexd/A33m6pdi7/like_script.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="toggle.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript">
$(document).ready(function(){
$(".description").hide();
$(".about").click(function(){
$('.description').slideToggle("fast");
return true;
});
});
</script>

<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Hover" content="#ffffff" />
<meta name="color:Audio" content="#eeecec" />
<meta name="color:Text Shadow" content="#000000"/>
<meta name="color:Scroll" content="#000000"/>


<meta name="if:Reblog Link On Hover" content="0"/>
<meta name="if:Ask Link" content="1"/>
<meta name="if:Top Button" content="1"/>
<meta name="if:Uppercase Title" content="1"/>




<meta name="text:Ask Link Text" content="message"/>
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<meta name="text:Custom Link Five" content="" />
<meta name="text:Custom Link Five Title" content="" />
<meta name="text:Custom Link Six" content="" />
<meta name="text:Custom Link Six Title" content="" />
<meta name="text:Custom Link Seven" content="" />
<meta name="text:Custom Link Seven Title" content="" />
<meta name="text:Custom Link Eight" content="" />
<meta name="text:Custom Link Eight Title" content="" />
<meta name="text:Custom Link Nine" content="" />
<meta name="text:Custom Link Nine Title" content="" />
<meta name="text:Custom Link Ten" content="" />
<meta name="text:Custom Link Ten Title" content="" />


<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
<title>Untitled Document</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}

<style type="text/css">

p{
margin:0px;
padding:0px;
}


#tumblr_controls{
top: 1px !important; 
margin: 0 0 0 0; 
right: 0px !important; 
position: fixed !important;}
body{
color:{color:Text};
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;

font-size:11px;
text-align:justify;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
line-height:15px;
}

::-webkit-scrollbar{width:10px;
height:8px;}
::-webkit-scrollbar-button:start:decrement
::-webkit-scrollbar-button:end:increment{display:block;
height:0;
background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:{color:background};
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;}
::-webkit-scrollbar-thumb:vertical{height:50px;
background-color:{color:Scroll};}
::-webkit-scrollbar-thumb:horizontal{width:50px;
background-color:{color:Scroll};}


.posts{
width:1330px;
margin-left:10px;
margin-top: 0px;
{block:PermalinkPage}
margin-left:300px;
width: 400px;
{/block:PermalinkPage}
}

.entry{
margin: 4px;
padding: 4px;
text-align:justify;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
margin-left:300px;
width: 400px;
{/block:PermalinkPage}
}

.entry img{
{block:IndexPage}
max-width:250px;
{/block:IndexPage}
}

.left{
float: left;
margin-right: 20px;
width: 802px;
}

.top{
width:1200px;
position:center;
text-align:left ;
margin: 20px auto ;
z-index:5000;
margin-bottom:20px;
}

.title{
font-family: 'EB Garamond', serif;
font-weight:bold;
position:left;
{block:ifUppercaseTitle}
text-transform:uppercase;
{/block:ifUppercaseTitle}
{block:ifnotUppercaseTitle}
text-transform:none;
{/block:ifnotUppercaseTitle}
font-size: 30px; 
color:{color:Text};
padding-bottom:1px;
}

a:link, a:active, a:visited{ 

color:{color:Text}; 
text-decoration: none; 
-o-transition-duration: 3s;
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
} 

a:hover {

color:{color:Hover};
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
text-decoration:underline;
text-shadow:0px 0px 10px {color:Text Shadow};

}



{block:ifReblogLinkOnHover}
.photopermaholder{
position:absolute;
height:14px;
margin:8px 0px 0px 190px;
opacity:0;
filter: alpha(opacity = 0);
-moz-transition: all 0.5;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5;
}

.photoperma{
display:inline-block;
margin-right:0px;
padding:3px;
height:14px;
}

.photoperma a{color:#000;}

.entry:hover .photopermaholder{
opacity:1.9;
filter: alpha(opacity = 70);
-moz-transition: all 0.5;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5;
}
{/block:ifReblogLinkOnHover}

.post_title{
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
display:block;
font-size:14px;
line-height:20px;
text-transform:none;
}

.link_title{
font-size:13px;
line-height:20px;
text-transform:none;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
margin-bottom:5px;
}

.nav{
position:center;
font-size:10px;
text-align:left;
margin-top:2px;
margin-bottom:2px;
}

.permalink{
text-transform:none;
text-align:center;
color:gray;
position: relative;
margin-top: -10px;
font-size: 8px;
opacity: 0;
filter: alpha(opacity = 0);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4;
}
 
div#entry:hover .permalink{
margin-top: -5px;
opacity: 1;
filter: alpha(opacity = 100);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4;
}

.quote{
font-size:12px;
line-height:20px;
padding:3px;
text-transform:none;
margin-bottom:3px;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.photoset{
margin-bottom:3px;
}

.audio{
{block:IndexPage}
width:238px;
{/block:IndexPage}
{block:PermalinkPage}
width:488px;
{/block:PermalinkPage}
background-color:#fff;
padding:5px;
margin-bottom:0px;
border-left:1px solid;
border-right:1px solid;
border-color:{color:Audio};
}

.audiocap, .videocap{
background-color:{color:Audio};
display:block;
padding:10px;
}

.albumart, .albumart img{
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

div.video embed,
div.post div.video object {
{block:IndexPage}
width:250px !important;
height:150px !important;
{/block:IndexPage}
{block:PermalinkPage}
width:500px !important;
height:400px !important;
{/block:PermalinkPage}
}

.question{
font-weight:normal;
margin-bottom:5px;
font-size:9px;
line-height:15px;
display:block;
text-transform:lowercase;
}

.caption{
margin-top:5px;
margin-bottom:5px;
}

.h1 {color: {color:Text}; font-size: 32px; line-height: 25px; text-align: left; margin-bottom: -0px; cursor: arrow; font-family: 'EB Garamond', serif;
 }

</style>

{block:ifTopButton}
<script>

var scrolltotop={

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://static.tumblr.com/i8axhtw/hBmma2nol/topbuttom.png" style="filter:alpha(opacity=70); -moz-opacity:0.7;"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:35, offsety:60}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
 
},
 
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
 
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
 
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll To Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
 
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
 
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
 
return false
})
 
$(window).bind('scroll resize', function(e){
 
mainobj.togglecontrol()
 
})
 
})
 
}
 
}
 
scrolltotop.init()
</script>
{/block:ifTopButton}

<script type="text/javascript" src="https://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
<script type="text/javascript" src="https://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js">
</script> 
<script src="https://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<script src="https://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">

$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
    
</head>

<body>

<div class="top">
<div class="nav">

<span class="title"><a href="/">{Title}</a></span>             
<a href="/">home</a>   
{block:ifAskLink}<a href="/ask">{text:Ask Link Text}</a>    {/block:ifAskLink}
{block:ifCustomLinkOneTitle}<a href="{text:Custom Link One}">{text:Custom Link One Title}</a>   {/block:ifCustomLinkOneTitle}
{block:ifCustomLinkTwoTitle}<a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>   {/block:ifCustomLinkTwoTitle}
{block:ifCustomLinkThreeTitle}<a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>   {/block:ifCustomLinkThreeTitle}
{block:ifCustomLinkFourTitle}<a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a>   {/block:ifCustomLinkFourTitle}
{block:ifCustomLinkFiveTitle}<a href="{text:Custom Link Five}">{text:Custom Link Five Title}</a>   {/block:ifCustomLinkFiveTitle}
{block:ifCustomLinkSixTitle}<a href="{text:Custom Link Six}">{text:Custom Link Six Title}</a>   {/block:ifCustomLinkSixTitle}
{block:ifCustomLinkSevenTitle}<a href="{text:Custom Link Seven}">{text:Custom Link Seven Title}</a>   {/block:ifCustomLinkSevenTitle}
{block:ifCustomLinkEightTitle}<a href="{text:Custom Link Eight}">{text:Custom Link Eight Title}</a>   {/block:ifCustomLinkEightTitle}
{block:ifCustomLinkNineTitle}<a href="{text:Custom Link Nine}">{text:Custom Link Nine Title}</a>   {/block:ifCustomLinkNineTitle}
{block:ifCustomLinkTenTitle}<a href="{text:Custom Link Ten}">{text:Custom Link Ten Title}</a>   {/block:ifCustomLinkTenTitle}
<a href="https://www.snazzyspace.com/"title="tumblr themes">theme</a>

<br><br>

{block:Description}{Description}{/block:Description}

    
</div>

</div>

</div>


<div class="left">


<div class="posts">

{block:Posts}

<div class="entry">

{block:Text}
<div id="entry">
{block:Title}<span class="post_title">{Title}</span>{/block:Title}
{Body}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div>
{/block:Text}

{block:Photo}
{block:IndexPage}{block:ifReblogLinkOnHover}<div class="photopermaholder"><div class="photoperma"><a href="{ReblogURL}" target="_blank"><img src="https://static.tumblr.com/i8axhtw/U0dm907hx/reblogicon2.png" title="reblog"></a>
<img height="15" style="height:15px;cursor:pointer;" src="https://static.tumblr.com/i8axhtw/YOqm907cz/likeicon.png" id="like_image_{PostID}" onclick="LikePost('{PostID}','{ReblogURL}',this)" border="0" alt="like" title="like"/></div></div>{/block:IndexPage}
{/block:ifReblogLinkOnHover}{block:IndexPage}
{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoUrl-500}" width="250"></a>{LinkCloseTag}{/block:IndexPage}
{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<div id="entry">
<div class="photoset">
{block:IndexPage}{Photoset-250}{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div></div>
{/block:Photoset}

{block:Quote}
<div id="entry">
<div class="quote">" {Quote} " </div> 

{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div>
{/block:Quote}

{block:Link}
<div id="entry">
<a href="{URL}"{Target}><span class="link_title">→ {Name}</span></a>
{block:Description}<small>{Description}</small>{/block:Description}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div>
{/block:Link}

{block:Video}
<div class="video">
{block:IndexPage}{Video-250}{/block:IndexPage}
{block:PermalinkPage}{Video-500}{/block:PermalinkPage}
</div>
{block:IndexPage}{block:Caption}<div class="videocap"><a href="{Permalink}">{Caption}</a></div>{/block:Caption}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="videocap">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:Chat}
<div id="entry">
{block:Title}
<div class="ptitle">{Title}</div>
{/block:Title}{block:Lines}{block:Label}<b>{Label}</b> {/block:Label}{Line}<br>{/block:Lines}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div>
{/block:Chat}

{block:Audio}
{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></a></div>{/block:AlbumArt}
<div class="audio">{AudioPlayerWhite}</div>
{block:IndexPage}{block:Caption}<div class="audiocap"><a href="{Permalink}">{Caption}</a></div>{/block:Caption}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="audiocap">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}

{block:Answer}
<div id="entry">
<div class="question">{Asker}: {Question}</div>
{Answer}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{block:Date}{NoteCount}   <a href="{ReblogURL}" target="_blank">reblog</a>{/block:Date}</a></div>{/block:IndexPage}
</div>
{/block:Answer}

{block:PostNotes}{PostNotes}{/block:PostNotes}

</div>

{/block:Posts}
</div>
</div>

{block:IndexPage}
<div class="column navigation" id="navigation">
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage} 
{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
</div>
{/block:IndexPage}

<iframe id="likes_frame" style="height:1px;width:1px;position:absolute;left:-500px;"></iframe>

<div style="font-family:arial ; text-transform:none; position:fixed; font-size: 11px; bottom:3px; right:0px; padding:2px; "><a href="www.snazzyspace.com"title="themes">©</a></div>
</body>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Fullscreen Theme

 
<head>

<link rel="shortcut icon" href="{PortraitURL-24}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />

<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Lobster+Two|Handlee|Satisfy' rel='stylesheet' type='text/css'></script>

{block:IndexPage}
 
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
 
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'https://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
{/block:IndexPage}

<meta name="color:background" content="#000000" />
<meta name="color:header" content="#ffffff" />
<meta name="color:text" content="#ffffff" />
<meta name="color:title" content="#ffffff" />
<meta name="color:link" content="#828282" />
<meta name="color:link hover" content="#ebebeb" />
<meta name="color:scrollbar" content="#a3a3a3" />

<meta name="if:title font one" content="0">
<meta name="if:title font two" content="0">
<meta name="if:title font three" content="0">
<meta name="if:header shadow" content="0">
<meta name="if:banner" content="0">

<meta name="text:home link" content="refresh">
<meta name="text:message link" content="mailbox">
<meta name="text:reblog" content="reblog">
<meta name="text:archive link" content="index">


<meta name="image:banner" content="">

<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

<style type="text/css">

::-webkit-scrollbar {width: 7px; height: 0px; background:{color:background};}
::-webkit-scrollbar-thumb {background: {color:scrollbar}; border-radius:10px;}

iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px; margin: 0 0 0 0; right:4px;}

body {
background-color: {color:background};

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;



font-size:12px;
font-family:lato;
line-height:14px;
text-transform:none;
color: {color:text};
}

#header {
background:{color:header};  
padding-top:10px;
padding-bottom:30px;
text-align: center;
font-size: 11px;
position:fixed;
width:100%;
top:0px;
left:0px;
z-index:999;
}

.plus {
position:fixed;    
height:47px;
width:47px;
opacity:.9;
top:30px;
left:30px;
background-color:rgba(0,0,0,.6);
border-radius:100%;
z-index:999999999;
cursor:pointer;
}
.plus img{
margin-top:-7px;
margin-left:-7px;
}

#blogtitle a{ 
font-family:pt sans;    
font-size:35px;
line-height:38px;
text-align:center;
color:{color:title};
{block:iftitlefontone}
font-family: Lobster Two;
font-size:36px;
{/block:iftitlefontone}
{block:iftitlefonttwo}
font-family: satisfy;
font-size:36px;
{/block:iftitlefonttwo}
{block:iftitlefontthree}
font-family: handlee;
font-size:36px;
{/block:iftitlefontthree}
}

#description{
width:600px;
text-align:center;
height:auto;
font-size:12px;
line-height:14px;
color:{color:text};
overflow:hidden;
}

#description a{
color:{top links};
}
#nav{
word-spacing:20px;
}
#nav a{
font-family:pt sans;    
font-size:13px;
line-height:30px;
letter-spacing:1px;
word-spacing:20px;
text-align:center;
font-weight:100;
text-transform:uppercase;
color:{color:top links};
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav a:hover{
color:{color:link hover};
border-bottom:2px solid {color:title};
}

.answer{
}
.answer img {
width:250px;
height:auto;
{block:permalinkpage}
width:auto;
height:auto;
{/block:permalinkpage}
}

a{
text-decoration:none;
color:{color:link};
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

a:link, a:active, a:visited{
color:{color:link};
}

a:hover{
color:{color:link hover};
}

div#content {
width: 101%;
left:0px;
margin-top:-8px;
float:center;
position: absolute;
}

.entry{
padding:-1px;
margin:-1px;
float:left;
height:auto;
background-color: #trans;
{block:IndexPage}
width:20%;
{/block:IndexPage}
{block:PermalinkPage}
margin-top:250px;
margin-left:-450px;
left:50%;
position:absolute;
width:450px;
height:auto;
{/block:PermalinkPage}
}
.entry img{
margin-bottom:-3px;
}

.title{
font-size:20px;
line-height:21px;
text-transform:none;
color: {color:text};
}

blockquote{
padding:0px 0px 0px 3px;
margin:0px 0px 0px 2px;
border-left: 2px solid #ddd;
}

.permanote{
position:absolute;
top:12px;
right:15px;
font-weight:600;
font-size:12px;
opacity:0;
}
.permanote a{
color:white;
}
.entry:hover .permanote{
opacity:1;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.entry .gradient{
position: absolute;
left:0px;
top:0px;
width:100%;
height:40px;
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
opacity:0;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.entry:hover .gradient{
opacity:1;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.like_and_reblog_buttons {
position:absolute;
top:0px;
left:-20px;
list-style: none;
opacity:0;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.entry:hover .like_and_reblog_buttons{
opacity:1;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
 
.like_and_reblog_buttons li {
float: left;
height:20px;
width:20px;
}
 
.like_and_reblog_buttons li:first-child {
margin-right:12px;
}

.permalink{
text-align:right;
opacity:0;
-webkit-transition: all 0.4s linear; 
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.entry:hover .permalink{
opacity:1;
-webkit-transition: all 0.4s linear; 
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.speclink{
word-spacing:1px;
}

.notess{
position:absolute;
left:480px;
top:0px;
height:400px;
width:500px;
overflow:scroll;
}
.notess li{
list-style:none;
margin-left:-40px;
line-height:30px;
}

.chat li{
list-style:none;
margin-left:-40px;
border-bottom:1px solid rgba(0,0,0,.4);
line-height:20px;
}    
.label{
font-weight:700;
}

.answer{
width:90%;
padding:5%;
background-color:rgba(0,0,0,.1);
box-shadow:0 0px 1px gray;
}

.play{
position:absolute;
left:50%;
margin-left:-24px;
top:50%;
margin-top:-42px;
border:10px solid white;   
height:27px;
width:27px;
border-radius:100%;
overflow:hidden;
}

{CustomCSS}
</style>

<title>{title}</title>

<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />

</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
    $("#header").hide(0);
  $(".plus").click(function(){
    $("#header").slideToggle(300);
  });
});
</script>

<div id="header">
{block:ifbanner}<img src="{image:banner}" height="90px"><br>{/block:ifbanner}{block:ifnotbanner}<div id="blogtitle"><a href="/">{title}</div>{/block:ifnotbanner}
<div id="nav">
<a href="/ask">{text:message link}</a>
<a href="/archive">{text:archive link}</a>
{block:HasPages}{block:Pages}<span class="speclink"><a href="{URL}">{Label}</a></span> {/block:Pages}{/block:HasPages}
<a href="https://atlasdesigns.tumblr.com/">theme</a>
</div>
<span id="description"><br>{Description}</span>
</div>

<div class="plus"><center><img src="https://www.iconsdb.com/icons/preview/white/plus-5-xxl.png" width=60px></center></div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="content">
{block:Posts}
<div class="entry">

{block:Text}
<div class="answer">{block:Title}<center><span class="title">{Title}</span></center>{/block:Title}{Body}
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>    
</div>
{/block:Text}

{block:Link}
<div class="answer"><center><a href="{URL}"><span class="title">{Name}</span></a></center>{block:Description}{Description}{/block:Description}
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
</div>
{block:Link}

{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=100%/></a></div>{LinkCloseTag}
<div class="gradient"></div> 
<div class="permanote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
<ul class="like_and_reblog_buttons">
<li>{ReblogButton color="white"}</li>
<li>{LikeButton color="white"}</li>
</ul>
{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=450px/>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<center>
{block:IndexPage}{Photoset-250}{/block:IndexPage}
{block:PermalinkPage}{Photoset-250}{/block:PermalinkPage}
</center>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:IndexPage}
{/block:Photoset}

{block:Quote}
<div class="answer">{Quote}<br><i>{Source}</i>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
</div>
{/block:Quote}

{block:Chat}
<div class="answer">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
</div>
{/block:Chat}

{block:Audio}
{block:AlbumArt}
<center><a href="{Permalink}"><img src="{AlbumArtURL}" width="100%"></a></center>
{/block:AlbumArt}
<div class="play">{AudioPlayerWhite}</div>
<div class="answer">
{block:Caption}{Caption}{/block:Caption}
</div>
{block:IndexPage}
{/block:IndexPage}
{/block:Audio}

{block:Answer}
<div class="answer">
{Asker} asked: <br><i>{Question}</i><br><br>{Answer}</div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Answer}

{block:Video}
{block:IndexPage}
<center>
{Video-250}</center>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-250}</center>
{/block:PermalinkPage}
{block:Video}

{block:PermalinkPage}
{block:Caption}{Caption}<div style="height:1px;background-color:black;opacity:0.1;width:100%;margin-top:5px;margin-bottom:5px;"></div>{/block:Caption}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} · {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}
{/block:PermalinkPage}


{block:PostNotes}
<div class="notess">{PostNotes}</div>
{/block:PostNotes}
</div>

{/block:Posts}

{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.eu01.nr-data.net","licenseKey":"NRJS-704528c2df41dffb53f","applicationID":"65079336","transactionName":"MhBSZQoZVkVUB01QXQtaZUMRV15ZWQhWTlcXWERDGRtTU0dLXVxUBABcRRsXXFMbFFFJ","queueTime":0,"applicationTime":2,"atts":"HldRE0IDRUs=","errorBeacon":"bam.eu01.nr-data.net","agent":""}</script></body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Block Theme

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<meta name="color:Background" content="#ffffff" />
<meta name="color:Box" content="#ffffff" />
<meta name="color:Text" content="#727171" />
<meta name="color:Links" content="#5a5a5a" />
<meta name="color:Links Hover" content="#575656" />
<meta name="color:Title Color" content="#585858" />
<meta name="color:Title Hover Color" content="#575656" />
<meta name="color:Chat" content="#ffffff" />
<meta name="color:Asker Background" content="#ffffff" />
<meta name="image:DisplayImage" content=""/>
<meta name="font:Body" content="Helvetica" />
<meta name="font:Links" content="Helvetica" />
<meta name="font:Title" content="Helvetica" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:To top button" content="1" />
<meta name="if:Show Shadow" content="1" />
<meta name="if:Show Blog Title" content="1" />
<meta name="if:Show Caption" content="0" />
<meta name="if:Show Post Links" content="1" />
<meta name="if:Show Ask Link" content="1" />
<meta name="if:Show Archive Link" content="0" />

<meta name="text:Custom Link 1" content="" />
<meta name="text:Custom Link 1 Title" content="Link 1" />
<meta name="text:Custom Link 2" content="" />
<meta name="text:Custom Link 2 Title" content="Link 2" />
<meta name="text:Custom Link 3" content="" />
<meta name="text:Custom Link 3 Title" content="Link 3" />

<head>
<script type="text/javascript" src="https://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="https://static.tumblr.com/uiqhh9x/61sm66w66/jquery.min.js" type="text/javascript"></script>
<script src="https://static.tumblr.com/uiqhh9x/3Jpm92lk1/totop.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="https://static.tumblr.com/cpaytv3/nKOlyumhg/reset.css">




<style type="text/css">
body { 
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;


    color: {color:Text};
    font-family: {font:Body};
    font-size: 12px;
    padding-top:5px;
    background-position:top left;
    text-align:justify;
    text-justify:inter-word;
    text-transform:{text:Body Text transform};
    -webkit-font-smoothing: antialiased;
}

a, a:link, a:visited { 
    color: {color:Links};
    font-family: {font:Links};
    text-transform: {text:Body Text transform};
    text-decoration: none; 
    font-size: 11px;
}
    
a:hover {
    color: {color:Links Hover};
    font-family: {font:Links};
    text-decoration: none;
    font-size: 11px;  }

p {
    margin: 5px 0 0 0;
    line-height:12px;
    padding: 0; }
    ul, ol {
    margin: 5px 0 0 25px; padding: 0; }
    blockquote {
    margin: 2px 2px 1px 2px;
    padding: 1px 2px 1px 4px;
    border: 0px solid {color:Text}; }
    blockquote p {
    margin: 0;
    padding: 0;
    line-height: 12px; }
    
#content {
    {block:IndexPage}
    width: 1200px;
    {/block:IndexPage}
     {block:PermalinkPage}
    width: 900px;
    {/block:PermalinkPage}
    top: 45px;
    {block:IndexPage}
    left: 60px;
    {/block:IndexPage}
    {block:PermalinkPage}
    left: 60px;
    {/block:PermalinkPage}
    float: right; position: absolute;
}

#container {
    width: 800px;
    margin: 0px auto;
}

.entry {
    float: left;
     -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    {block:indexpage}
    width: 260px;
    {/block:indexpage}
    margin: 5px;
    {block:permalinkpage}
    width: 400px;
    {/block:permalinkpage}
    padding: 10px;
    background: {color:box};
    display: block;
    position: relative; 
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
 
.entry img {
    display: block;
    max-width: 100%;
}
 
.entry:hover img {
    max-width: 100%;
}

.sb {
    float: left;
     -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 260px;
    margin: 5px;
    padding: 10px;
    background: {color:box};
    display: block;
    position: relative; 
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
 
.sb img {
    display: block;
    max-width: 100%;
}
 
.sb:hover img {
    max-width: 100%;
}

#sidebar {
    background: {color:box};
    width: 250px;
    height: 100%;
    overflow:hidden; 
    padding: 15px;
    position:fixed;
    text-align:justify;
    top: 0px; left: 0px;
    font-family:{font:Body};
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    
}

#left {
    line-height: 12px; position: absolute; top: 40px;
    height:auto; color: {color:Text};
    padding: 15px; left: 0px;
    font-size: 11px; letter-spacing: 0px;
    Display:block;
}
 
.entry:hover .nts, .entry:hover .rblg, .entry:hover .dte {
    width: auto; height: auto;
    opacity: .9;  font-family: 'Open Sans', sans-serif;
    filter: alpha(opacity = 90);
     -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
} 
 

.entry:hover .p1, .entry:hover .p2, .entry:hover .p3  {
   opacity: .7; 
    filter: alpha(opacity = 70);
    

}

.p1 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    top: 15px; left: 15px;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    size: 11px;
}
.p2 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    top: 15px; left: 55px; width: auto;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    size: 12px;
}

.p3 {  
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    top: 100px; 
    left: 10px; 
    width: 100%;
    opacity: 0.0; 
    filter: alpha(opacity = 0);
    z-index:9999999; 
    display: inline-block;
    position: absolute; 
    text-transform: uppercase;
}

.perma1, .perma1 a {
    margin-top: 5px; 
    font-family: 'Oswald', sans-serif;
    font-size:10px; color: {color:Links};
        }

.rblg {
    height: auto; width: auto;
    background-color: #000;
    overflow: hidden;
    z-index: 9999999;
    color: #fff;
    padding-left: 4px;
    padding-right: 4px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Open Sans', sans-serif;
     }
 
.rblg a {
    color: #ffffff!important; text-transform: uppercase;
    font-family: 'Open Sans', sans-serif; font-size: 42px;
}
 
.rblg:hover, .rblg a:hover {
    color: #000; text-transform: uppercase;
   font-family: 'Open Sans', sans-serif;
}

.nts {
    height: auto; width: auto;
    background-color: #000;
    padding: 3px;
    overflow: hidden;
    z-index: 9999999;
    color: #fff;
    padding-left: 4px;
    padding-right: 4px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Open Sans', sans-serif;
     }
 
.nts a {
    color: #ffffff!important; text-transform: uppercase;
    font-family: 'Oswald', sans-serif; font-size: 14px;
    font-weight: bold;
}
 
.nts:hover, .nts a:hover {
    color: #000; text-transform: uppercase;
   font-family: 'Oswald', sans-serif;
}

.nts:hover , .rblg:hover , .dte:hover {
     color: #ffffff!important;
}


.title, .title a {
    font-family: 'Oswald', sans-serif;
    font-size: 26px; 
    color: {color:title color};
    line-height: 25px;
    letter-spacing:2px;
    text-transform: none;
}

.title:hover, .title a:hover {
    color:{color:title hover color};
}

.btitle, .btitle a {
    font-family: 'Oswald', sans-serif;
    font-size: 24px; text-align: center;
    color: {color:title color};
    line-height: 20px; margin: 5px;
    letter-spacing:0px;
    text-transform: uppercase;
}

.btitle:hover, .btitle a:hover {
    color:{color:title hover color};
}



.pos { 
    background-color: {color:Chat};  
}
.audioplayer { 
    padding-left: 12px;
    background-color:#e3e3e3; 
}
.playcount {
    float: right; 
    clear: both;
    padding-top: 10px;
    padding-right: 20px;
    color:{color:link};
    text-shadow: none;
    font-size:10px;
    text-transform:{text:Title text transform};
}

#sidebar img {
    max-width:100%;
}
    
#sidebar img { 
    border: 0px;  
    display: block;
}
    
.ques {
    background-color:{color:Asker Background}; 
    padding:5px;  
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 16px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
}
.ques a {
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 16px; 
    text-transform: uppercase; 
    letter-spacing:-1px;color:{color:Links};
}
.ques a:hover {
    color: {color:Links Hover};}
.said a {
    font-family: {font:Title};
    font-size: 12px; 
    line-hepxht: 14px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
    margin-top:6px;
}
.said a:hover {
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 14px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
    margin-top:6px;
}

.nav a {
    font-size: 13px;
   font-family: 'Oswald', sans-serif;
}
.nav  {
    font-size: 13px; 
    font-family: 'Oswald', sans-serif;
}

.pagination {
    float:center; 
    margin-top:-10px; 
    width: auto; 
    height:auto; 
    margin-left: 3px; 
    text-align: center; 
    line-height:35px; 
    font-family: 'Oswald', sans-serif;
    font-size:18px; color:
}

.pagination a, .pagination a:active, .pagination a:visited {
    float:center; 
    margin-top:0px; 
    width: 519px; 
    height:auto; 
    margin-left: 3px; 
    text-align: center; 
    line-height:35px;
    font-family: 'Oswald', sans-serif;
    font-size:18px;
}

.pag
{   background-color:{color:box};
    font-family: 'Oswald', sans-serif;
    margin: 0 0 0px 0; 
    padding: 3px; 
    color: {color:Text}
    text-align: center; 
    font-size:15px;
    overflow:hidden;
    }


.pag a:visited, .pag a:link
    {background-color:{color:box};
    font-family: 'Oswald', sans-serif;
    margin: 0 0 0px 0; 
    padding: 3px;
    text-align: center; 
    font-size:15px;
    overflow:hidden; 
    text-align: center;
    }
.pag a:active { 
    font-family: 'Oswald', sans-serif;v
    margin: 0 0 0px 0; 
    padding: 3px;
    text-align: center; 
    font-size:15px;
    }

.pag a:hover {
    font-family: 'Oswald', sans-serif;
    color: {color:Links}; 
}

#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:2px;
    right:2px;
    overflow:hidden;
    width:51px;
    height:51px;
    border:none;
    text-indent:100%;
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    opacity: .5;
    filter: alpha(opacity = 50);
}
 
#toTopHover {
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    width:51px;
    height:51px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
        filter:alpha(opacity=0);
}
 
#toTop:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}
 
#toTop:active, #toTop:focus {
        outline:none;
}

{block:IfInfiniteScroll}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {
    display:none;
}
.navigation {
    display:none!important;
} 
#pagination {
    display:none;
    {/block:IfInfiniteScroll}
}

#infscr-loading {
    position: absolute!important;
    width: 16px!important;
    height: 11px!important;
    bottom: 0px!important;
    left: 50%!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
}

#over{
    height:50000px!important;
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;}

.hrline { margin-left: -5px; margin-right: -5px; padding:-1000px width: 410px;}

.t1, .t1 a {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    color: {color:Links};
    line-height: 20px;
    letter-spacing:3px; margin-top: 10px; margin-right: -4px;
    text-transform: uppercase; text-align:right;
}



.perma2, .perma2 a {
    margin-top: 0px; 
    font-family: 'Open Sans', sans-serif;
    font-size:15px; color: {color:Links};
        }

        

.prmlnk { 
    background:{color:box};
    font-size:15px; 
    margin-bottom: 10px; 
    margin-left:150px;
    margin-top:5px;
    width: 400px;
    padding: 10px;
    display: block; overflow:hidden; 
    position: relative;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

.wrap {position: fixed; bottom:10px; left:0px;}
 
.wrap:hover .cred a {width: 130px; height: 20px; text-align: right;}
 
.cred a {
    height: 100%; width: 80px; height: 20px; margin-left:-65px;
    background-color: #000; font-size: 16px; text-align: right;
    overflow: hidden;
    z-index: 9999999; padding-top: 3px;
    top: -2px;
    color: #fff; padding-right: 5px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Oswald', sans-serif;
    line-spacing: 1px;
     }

ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
}

ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

ol.notes li.note span.action {
    font-weight: bold;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}


</style>

</head>


<style type="text/css">{CustomCSS}</style>

<body>


<div id="container">
<div id="content">
<div class="sb">
{block:IfShowBlogTitle}<div class="btitle">{Title}</div>{/block:IfShowBlogTitle}
<a href="/"><img src="{image:DisplayImage}"></a>
<br>
{Description}
<div class="t1">
<a href="/">Home</a> <br>
{block:IfShowAskLink}
<a href="/ask">Ask</a> <br>
{/block:IfShowAskLink}
{block:IfShowArchiveLink}
<a href="/archive">Archive</a> <br>
{/block:IfShowArchiveLink}
{block:ifCustomLink1Title}
<a href="{text:Custom Link 1}">{text:Custom Link 1 Title}</a>   {/block:ifCustomLink1Title} <br>
{block:ifCustomLink1Title}
<a href="{text:Custom Link 2}">{text:Custom Link 2 Title}</a> {/block:ifCustomLink2Title} <br>
<a href="{text:Custom Link 3}">{text:Custom Link 3 Title}</a>   {/block:ifCustomLink3Title}<br>
<a href="https://www.snazzyspace.com">THEME</a> <br>
</div>
</div>
{block:Posts}
<div class="entry">

{block:Text}
    {block:Title}
        <div class="title"><a href="{Permalink}">{Title}</a></div>
    {/block:Title} {block:indexpage}
        {Body}  
        {block:IfShowPostLinks}
        <div class="hrline"><hr color=#bdbbbb size=1></div>
        <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  
        {/block:IfShowPostLinks}
        {/block:indexpage}
    {block:PermalinkPage}
         {Body} 
        {/block:PermalinkPage}
{/block:Text}

{block:Photo}
 {block:IndexPage}
    <div class="p1">
        <div class="rblg">
        <a href="{reblogurl}"><img src="https://static.tumblr.com/psjhflr/VbCmasj7l/reblog.png"></a>
        </div></div>
        <div class="p2">
        <div class="nts">
        <a href="{permalink}">{Notecount}</a>
        </div>
        </div>
       
{LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}
{block:ifShowCaption}
{block:Caption}{Caption}{/block:Caption}
{/block:ifShowCaption}
{/block:IndexPage}
{block:PermalinkPage}<div align="center">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
 {block:IndexPage}
    <center>{Photoset-250}</center>
    {block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{block:IfShowPostLinks}
        <div class="hrline"><hr color=#bdbbbb size=1></div>
        <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  {/block:IfShowPostLinks}
{/block:IndexPage}
{block:permalinkpage}
<div align="center">{Photoset-400}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Photoset}

{block:Video}
{block:IndexPage}<div align="center">{Video-250}</div> <p>
{block:IfShowPostLinks}
        <div class="hrline"><hr color=#bdbbbb size=1></div>
        <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  {/block:IfShowPostLinks}
{block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{/block:IndexPage}        
{block:permalinkpage}
<div align="center">{Video-400}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Video}

{block:Audio}
<div class="audioplayer">{AudioPlayerGrey}</div>{block:Caption}{Caption}{/block:Caption}<p>{block:IndexPage}
{block:IfShowPostLinks}
        <div class="hrline"><hr color=#bdbbbb size=1></div>
        <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  {/block:IfShowPostLinks}
{/block:IndexPage}
{block:permalinkpage}
    <div class="perma1"><a id="notes{PostID}" href="{Permalink}">{PlayCount} Plays</a></div>
{/block:permalinkpage}
{/block:Audio}

{block:Quote}
<div class="title"><a href="{Permalink}">{Quote}</a></div><p> {block:Source}— {Source}{/block:Source}<p>{block:IndexPage}
          {block:IfShowPostLinks}
       <div class="hrline"><hr color=#bdbbbb size=1></div>
       <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  
        {/block:IfShowPostLinks}
        {/block:IndexPage}
{/block:Quote}

{block:Link}
<div class="title"><a href="{URL}" class="post_title" target="_blank"> {Name}</a></div> {block:Description}{Description}{/block:Description}<p>{block:IndexPage}
             {block:IfShowPostLinks}
        <div class="hrline"><hr color=#bdbbbb size=1></div>
         <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  
        {/block:IfShowPostLinks}{/block:IndexPage}
{/block:Link}

{block:Chat}
{block:Title}<div class="title"><a href="{Permalink}">{Title}<p></a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}<p>{block:IndexPage} {block:IfShowPostLinks}
         <div class="hrline"><hr color=#bdbbbb size=1></div>
         <div class="perma1">
        <a href="{Permalink}">∩ PERMALINK</a>
         </div>  
        {/block:IfShowPostLinks}{/block:IndexPage}
{/block:Chat}
{block:Answer} <div class="ques"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}

</div>

{block:permalinkpage}{block:NoteCount}
<div class="prmlnk"><div class="perma2">
Date Posted: <a href="{Permalink}">{DayOfMonth} {month}, {Year}</a> 
with <a href="{Permalink}">{NoteCount} Notes</a>
 {/block:NoteCount}
{block:PostNotes}
    {PostNotes}
{/block:PostNotes}
</div>

</div>
{/block:permalinkpage}
{/block:Posts}



<div class="clear"></div>
{block:IfNotInfiniteScroll}
{block:IndexPage}
<div class="entry">
<div class="pag">
<div class="pagination">
  {block:Pagination}
  <div class="navigation">
          {block:PreviousPage}
              <a href="{PreviousPage}" class="previous">PREVIOUS PAGE</a>
          {/block:PreviousPage}
      
          {block:NextPage}
              <a href="{NextPage}" class="next">NEXT PAGE</a>
          {/block:NextPage}
          <div class="clear"></div>
  </div>
  {/block:Pagination}
          </div>
</div></div>{/block:IndexPage}{/block:IfNotInfiniteScroll}

</div>
</div>

<div class="wrap"><div class="cred"><a href="https://www.snazzyspace.com/">THEME ©</a></div></div>

{block:Pagination}
                <ul id="pagination">
                        {block:PreviousPage}
                                <li><a href="{PreviousPage}"></a></li>
                        {/block:PreviousPage}
                        {block:NextPage}
                                <li><a id="nextPage" href="{NextPage}"></a></li>
                        {/block:NextPage}
                </ul>
{/block:Pagination}
<script src="https://static.tumblr.com/psjhflr/bxnmcwj9t/masonry.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

</div>


{block:iftotopbutton}
<script type="text/javascript">
        $(document).ready(function() {
                /*
                        var defaults = {
                                containerID: 'toTop', // fading element id
                                containerHoverID: 'toTopHover', // fading element hover id
                                scrollSpeed: 1200,
                                easingType: 'linear'
                        };
                        */
                       
                        $().UItoTop({ easingType: 'easeOutQuart' });
                       
                });
</script>
<a href="#" id="toTop" style="display: none; "><span id="toTopHover"></span>To Top</a>{block:iftotopbutton}



</div>
</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Blackened

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
 
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
 
<meta name="color:Background" content="#292929" />
<meta name="color:Text" content="#b8b8b8" />
<meta name="color:Links" content="#f5f3f3"/>
<meta name="color:Links Hover" content="#d5d3d3" />
<meta name="color:Title Color" content="#b4b3b3" />
<meta name="color:Title Hover Color" content="#b4b3b3" />
<meta name="color:Navlinks Text Color" content="#a8a8a8" />
<meta name="color:Navlinks Text Hover Color" content="#f1f1f1" />
<meta name="image:DisplayImage" content="" />
 
<meta name="font:Body" content="Helvetica" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:To top button" content="1" />
<meta name="if:Show Caption" content="0" />
<meta name="if:Show Post Links" content="1" />
<meta name="if:Show Tags" content="0" />
<meta name="if:Fixed Sidebar" content="1" />
<meta name="if:3columns" content="1" />
<meta name="if:ShowShadow" content="1" />
 
<meta name="text:Custom Link 1" content="" />
<meta name="text:Custom Link 1 Title" content="Link 1" />
<meta name="text:Custom Link 2" content="" />
<meta name="text:Custom Link 2 Title" content="Link 2" />
<meta name="text:Custom Link 3" content="" />
<meta name="text:Custom Link 3 Title" content="Link 3" />
<meta name="text:Custom Link 4" content="" />
<meta name="text:Custom Link 4 Title" content="Link 4" />
<meta name="text:Custom Link 5" content="" />
<meta name="text:Custom Link 5 Title" content="Link 5" />
<meta name="text:Custom Link 6" content="" />
<meta name="text:Custom Link 6 Title" content="Link 6" />
 
 
<head>
 
<script src="https://static.tumblr.com/psjhflr/lpGmmq0oc/like.js"></script>
<script src="https://static.tumblr.com/uiqhh9x/61sm66w66/jquery.min.js" type="text/javascript"></script>
<script src="https://static.tumblr.com/uiqhh9x/3Jpm92lk1/totop.js" type="text/javascript"></script>
 
<link rel="stylesheet" type="text/css" href="https://static.tumblr.com/cpaytv3/nKOlyumhg/reset.css">
 
 
<style type="text/css">
body {
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;


    color: {color:Text};
    font-family: {font:Body};
    font-size: 11px; line-height:15px;
    text-align:left; letter-spacing: 1px;
    text-transform:{text:Body Text transform};
    -webkit-font-smoothing: antialiased;
}
 
a, a:link, a:visited {
    color: {color:Links};
    font-family: {font:Links};
    text-transform: {text:Body Text transform};
    text-decoration: none;
    font-size: 11px;
}
   
a:hover {
    color: {color:Links Hover};
    font-family: {font:Links};
    text-decoration: none;
    font-size: 11px;  }
 
p {
    margin: 5px 0 0 0;
    line-height:15px;
    padding: 0; }
    ul, ol {
    margin: 5px 0 0 25px; padding: 0; }
    blockquote {
    margin: 2px 2px 1px 2px;
    padding: 1px 2px 1px 4px;
    border: 0px solid {color:Text}; }
    blockquote p {
    margin: 0;
    padding: 0;
    line-height: 12px; }
 
 
#content {
    top: 15px;
    {block:IndexPage}
    left: 315px;
    width:925px; padding: 20px;
    {/block:IndexPage}
    {block:PermalinkPage}
    left: 450px;
     width:600px; padding: 20px;
    {/block:PermalinkPage}
    float: right; position: absolute;
       -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
#container {
    width: 1000px;
    margin: 0px auto;
}
 
.entry {
    background: #000;
    float: left;
    {block:If3columns}
    width: 250px;
    {/block:If3columns}
    {block:Ifnot3columns}
    width: 400px;
    {/block:Ifnot3columns}
    margin: 10px; margin-bottom: 10px;
    {block:PermalinkPage}
    width: 500px;
    {/block:PermalinkPage}
    padding: 10px;
    display: block;
    position: relative;
    {block:IfShowShadow}
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    {/block:IfShowShadow}
 
}
 
.entry img {
    display: block;
    max-width: 100%;
    {block:PermalinkPage}
    {block:IfCaption}
    margin-bottom: 10px;
    {/block:IfCaption}
    {/block:PermalinkPage}
   
}
 
.entry:hover img {
    max-width: 100%;
}

.sb_bg {
    background: #000;
    margin: 7px; float: left; padding: -2px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }
    
.entry_bg {
    background: #000;
    margin: 7px; float: left; padding: -2px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }
 
#sb {
    background: #000;
    float: left;
    left: 30px;
    top: 36px;
    width: 290px;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    display: block; margin: 5px;
    {block:IfFixedSidebar}
    position: fixed;
    {/block:IfFixedSidebar}
    {block:IfNotFixedSidebar}
    position: absolute;
    {/block:IfNotFixedSidebar}
    {block:IfShowShadow}
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    {/block:IfShowShadow}
}
 
.sb1 {
    background: #000;
    width: 250px; margin:3px; 
    margin-bottom: 3px;
    padding: 10px;
    display: block;
    position: relative;
 
}
 
 
   
#sb img {
    display: block;
    max-width: 100%;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
 
.sbcont {
    margin-top: auto;
    }
 
#sb:hover img {
    max-width: 100%;
}
 
.dp {
    background: url("{PortraitURL-128}");
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 150px; height: 150px; border-radius: 75px; margin-top: -60px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
 
#dp_bg {
    background: {color:Box}; z-index: -999999;
    width: 150px; height: 150px; border-radius: 75px;
    top: 310px; left: 140px;
    padding: 5px;
    display: block;
    position: absolute;
 
}
 
.navlinks a  {
    background: #000;
no-repeat center center fixed;
margin-right: 8px; margin-bottom: 6px; margin-left: -3px;
letter-spacing: 1px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase; font-size: 10px;
color: {color:Navlinks Text Color};
text-align: center;
display:block;
padding: 8px 0px 8px;
width:119px;height:18px;line-height:20px;
border: 1px dotted #303030;
}
 
.navlinks a:hover  {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
display:block; text-align: center;
color: {color:Navlinks Text Hover Color};
background-color: {color:NavLinks Background Hover} ;
}
 
#left {
    line-height: 12px; position: absolute; top: 40px;
    height:auto; color: {color:Text};
    padding: 15px; left: 0px; text-align: right;
    font-size: 11px; letter-spacing: 0px;
    Display:block;
}
 

.entry:hover .rblg, .entry:hover .dte {
    {block:IfNot3columns}
    width: 390px;
    {/block:IfNot3columns}
    {block:If3columns}
    width: 240px;
    {/block:If3columns}
    height: 25px;
    opacity: 1;  top: 0px;
    filter: alpha(opacity = 100);
     -webkit-transition: all .60s ease;
    -moz-transition: all .60s ease;
}
 
.entry:hover .p1, .entry:hover .p2, .entry:hover .p3  {
   opacity: 1;
    filter: alpha(opacity = 100);
}
 
.p1 {  
    top: 5px; left: 0px;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    size: 11px;
     -webkit-transition: all .60s ease;
    -moz-transition: all .60s ease;
}
 
.rblg {
        background: #000;
    {block:If3columns}
    width: 240px;
    {/block:If3columns}
    {block:IfNot3columns}
    width: 390px;
    {/block:IfNot3columns}
    font-size: 10px; top: 5px;
    height: 0px; padding: 5px;
    top: 0px; left: 10px;
    overflow: hidden;
    z-index: 9999999;
    color: #000000;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    line-height: 20px;
     -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
     }
 
.rblg a {
    color: {color: Links}; text-transform: uppercase; line-height: 10px;
    font-size: 12px;  font-family: 'Special Elite', cursive;
    text-align: right; letter-spacing: 0px;
}
 
.rblg a:hover {
    color: {color: Links Hover}; text-transform: uppercase;
}
 
 
 
.perma1 {
    background: #000;
    margin-top: 15px;
    font-family: 'Oswald', sans-serif; padding: 5px;
    font-size:9px; color: {color:Links};
    text-transform: uppercase; letter-spacing: 1px;
    border: 1px dotted #303030; line-height: 20px; margin-bottom: 0px;
}
 
.perma1 a {
   font-family: 'Oswald', sans-serif;
    font-size:9px; color: {color:Links};
    text-transform: uppercase; letter-spacing: 0px;
}
 
.perma1 a:hover {
   color: {color:Links Hover};
        }
       
.tags {
    margin-top: 0px;
    font-family: 'Open Sans', sans-serif; padding: 5px;
    font-size:9px; color: {color:Links};
    text-transform: capitalize; letter-spacing: 0px;
    line-height: 15px; margin-top: 5px;
}
 
.tags a {
    margin-top: 0px;
   font-family: 'Open Sans', sans-serif;
    font-size:9px; color: {color:Links};
    text-transform: capitalize; letter-spacing: 0px;
}
 
.tags a:hover {
   color: {color:Links Hover};
        }
       
 
.n1, .n1 a {  
    text-transform: capitalize;
   font-family: 'Open Sans', sans-serif;
    font-size: 45px;
    text-align: center;
    color: #fff;
}
 
.n1:hover, .n1 a:hover {  
    color: #fff;
}
 
.n2, .n2 a {  
    text-transform: uppercase; text-align: center; margin-top: 7px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 20px; letter-spacing: -1px;
    color: {color:Title color};
   
}
 
.n2:hover, .n2 a:hover {  
    text-transform: uppercase; text-align: center; margin-top: 7px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 20px;
    color: {color:Title color};
}
 
.n3, .n3 a {  
    text-transform: capitalize; text-align: center; letter-spacing: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px; margin-right: -5px;
    color: #fff;
   
}
 
.n3:hover, .n3 a:hover {  
   color: #fff; font-family: 'Open Sans', sans-serif; font-size: 17px;
   margin-top: 5px;
   text-transform: capitalize;
}
 
.n4, .n4 a {  
    background: #000;
    text-transform: capitalize; text-align: center; letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px; margin-right: -0px;
    border: 1px dotted  #303030; margin-bottom: 10px;
    line-height: 30px; margin-top: 10px;
    color: {color: Text};
   
}
 
.n5, .n5 a {  
    text-transform: uppercase; text-align: left; letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    margin-bottom: 10px; line-height: 27px;
    color: {color:title color};
}
 
 
.nts:hover , .rblg:hover , .dte:hover {
     color: #ffffff!important;
}
 
.title, .title a {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: {color:title color};
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 5px;
    letter-spacing:2px;
    text-transform: none;
}
 
.title:hover, .title a:hover {
    color:{color:title hover color};
}
 
.btitle a {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: {color:Title color}; line-height: 50px;
    letter-spacing:1px; margin: 10px; 
    text-transform: none; left: 0px;
}
 
.btitle:hover, .btitle a:hover {
    color: {color:Title color};
}
 

 
 
 
.pos {
    background-color: {color:Chat};  
}
.audioplayer {
    padding-left: 12px;
    background-color:{color:Chat};
}
.playcount {
    float: right;
    clear: both;
    padding-top: 10px;
    padding-right: 20px;
    color:{color:link};
    text-shadow: none;
    font-size:10px;
    text-transform:{text:Title text transform};
}
 
#sidebar img {
    max-width:100%;
}
   
#sidebar img {
    border: 0px;  
    display: block;
}
   
.ques {
    background: #000;
    padding:5px;  
    font-family: {font:Title};
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing:-1px;
}
.ques a {
    font-family: {font:Title};
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing:-1px;color:{color:Links};
}
.ques a:hover {
    color: {color:Links Hover};}
.said a {
    font-family: {font:Title};
    font-size: 12px;
    line-hepxht: 14px;
    text-transform: uppercase;
    letter-spacing:-1px;
    margin-top:6px;
}
.said a:hover {
    font-family: {font:Title};
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:-1px;
    margin-top:6px;
}
 
.nav a {
    font-size: 13px;
   font-family: 'Open Sans', sans-serif;
}
.nav  {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
}
 
 
.pagination {
    float:center; color: {color: Navlinks Text Color};
    margin-top:0px;
    width: auto;
    height:20px;
    margin-left: 3px;
    text-align: right;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Sans', sans-serif;
    font-size:13px;
}
 
 
.pagination a, .pagination, .pagination a:active, .pagination a:visited {
    float:center; color: {color: Navlinks Text Color};
    margin-top:0px;
    width: auto;
    height:20px;
    font-weight: bold;
    margin-left: 3px;
    text-align: right;
    text-transform: uppercase;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Sans', sans-serif;
    font-size:13px;
}
 
.pagination a:hover, .pagination :hover {
    float:center;
    margin-top:0px;
    width: auto;
    height:20px;
    font-weight: bold;
    margin-left: 3px;
    text-align: right;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Sans', sans-serif;
    font-size:13px; color: {color: Links Hover};
}
 
#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:2px;
    right:2px;
    overflow:hidden;
    width:51px;
    height:51px;
    border:none;
    text-indent:100%;
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    opacity: .5;
    filter: alpha(opacity = 50);
}
 
#toTopHover {
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    width:51px;
    height:51px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
        filter:alpha(opacity=0);
}
 
#toTop:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}
 
#toTop:active, #toTop:focus {
        outline:none;
}
 
{block:IfInfiniteScroll}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {
    display:none;
}
.navigation {
    display:none!important;
}
#pagination {
    display:none;
    {/block:IfInfiniteScroll}
}
 
#infscr-loading {
    position: absolute!important;
    width: 16px!important;
    height: 11px!important;
    bottom: 0px!important;
    left: 50%!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
}
 
#over{
    height:50000px!important;
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;}
 
.hrline { margin-left: -5px; margin-right: -5px; padding:-1000px width: 410px;}
 
.t1, .t1 a {
   font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: {color:Links};
    line-height: 20px;
    letter-spacing:3px; margin-top: 10px; margin-right: -4px;
    text-transform: uppercase; text-align:right;
}
 
 
 
.perma2, .perma2 a {
    font-family: 'Open Sans', sans-serif;
    font-size:12px; color: {color:Links};
        }
 
       
 
.prmlnk {
  background: url('https://static.tumblr.com/psjhflr/yjumq0xor/2.png') top left scroll repeat;
    font-family: 'Oswald', sans-serif;
    font-size:12px;
    margin: 10px;
    width: 500px;
    padding: 10px;
    display: block; overflow:hidden;
    position: relative;
 
}
 
.wrap {position: fixed; bottom:10px; left:0px;}
 
.wrap:hover .cred a {width: 140px; height: 20px; text-align: right;}
 
.cred a {
    height: 100%; width: 80px; height: 20px; margin-left:-65px;
    background-color: #000; font-size: 14px; text-align: right;
    overflow: hidden; line-height: 15px;
    z-index: 9999999; padding-top: 3px;
    color: #fff; padding-right: 5px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Open Sans', sans-serif;
    line-spacing: 1px;
     }
 
.desc {
    height: 50px; position: relative;
    }
 
ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: dotted 1px #303030;
}
 
ol.notes li.note {
    border-top: dotted 1px #303030;
    padding: 10px;
}
 
ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}
 
ol.notes li.note span.action {
    font-weight: bold;
}
 
ol.notes li.note .answer_content {
    font-weight: normal;
}
 
ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}
 
ol.notes li.note blockquote a {
    text-decoration: none;
}
 
#menubar {
    margin-left: 125px; margin-bottom: 0px;
    text-align: center;
    }
 
.my-like {
    font-family: 'Oswald', sans-serif;
    cursor:pointer;
    display:inline-block;
    vertical-align:top;
    font-size: 11px;
    color: {color:title};
    letter-spacing: 1px; line-height: 27px;
}
.my-liked, .my-like:hover {
    color: red;
    font-family: 'Oswald', sans-serif;
    cursor:pointer;
    display:inline-block;
    vertical-align:top;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 27px;
}
 
</style>
 
<script>
window.onload = function () {
document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
document.addEventListener( 'click', function ( event ) {
    var myLike = event.target;
    if( myLike.className.indexOf( 'my-like' ) > -1 ) {
        var frame = document.getElementById( 'my-like-frame' ),
            liked = ( myLike.className == 'my-liked' ),
            command = liked ? 'unlike' : 'like',
            reblog = myLike.getAttribute( 'data-reblog' ),
            id = myLike.getAttribute( 'data-id' ),
            oauth = reblog.slice( -8 );
        frame.src = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
        liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
    };
}, false );
};
</script>
 
 <script type="text/javascript" src="https://static.tumblr.com/psjhflr/nvqmmq0r3/liked.js"></script>
</head>
 
 
<style type="text/css">{CustomCSS}</style>
 
<body>

 
<div id="sb">
<div class="sb_bg">
<div class="sb1">
<div class="btitle"><center><a href="/">{Title}</a></center></div>
<div align="justify">
<a href="/"><img src="{image:DisplayImage}"></a><br>
<div class="n5">
<center>
<a href="/">HOME</a> / <a href="/archive">ARCHIVE</a> / <a href="/ask">MESSAGE</a>
</center>
</div>
<div class="n4">ABOUT</div>
{Description}</div>
 
<div class="n4">LINKS</div>
    <table cellpadding="0" cellspacing="3" width="230px">
<div align="center">
<tr>
<td>{block:ifCustomLink1Title}<div class="navlinks"><a href="{text:Custom Link 1}">{text:Custom Link 1 Title}</a></div>{/block:ifCustomLink1Title}</td>
<td>{block:ifCustomLink2Title}<div class="navlinks"><a href="{text:Custom Link 2}">{text:Custom Link 2 Title}</a></div>{/block:ifCustomLink2Title}</td>
</tr>
<tr>
<td>
{block:ifCustomLink3Title}<div class="navlinks"><a href="{text:Custom Link 3}">{text:Custom Link 3 Title}</a></div>{/block:ifCustomLink3Title}</td>
<td>{block:ifCustomLink4Title}<div class="navlinks"><a href="{text:Custom Link 4}">{text:Custom Link 4 Title}</a></div>{/block:ifCustomLink4Title}
</td>
</tr>
<tr>
<td>
{block:ifCustomLink5Title}<div class="navlinks"><a href="{text:Custom Link 5}">{text:Custom Link 5 Title}</a></div>{/block:ifCustomLink5Title}</td>
<td>{block:ifCustomLink6Title}<div class="navlinks"><a href="{text:Custom Link 6}">{text:Custom Link 6 Title}</a></div>{/block:ifCustomLink6Title}
</td>
</tr>
</table>
</div>    
</div></div>
 
 
 
   
</div>
 
<div id="container">
<div id="content">
{block:Posts}
 <div class="entry_bg">
<div class="entry">
 
{block:Text}
    {block:Title}
        <div class="title"><a href="{Permalink}">{Title}</a></div>
    {/block:Title} {block:indexpage}
        {Body}
        {block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:indexpage}
    {block:PermalinkPage}
         {Body}
        {/block:PermalinkPage}
{/block:Text}
 
{block:Photo}
 {block:IndexPage}
<div class="p1">
        <div class="rblg"><div class="n5">
        <div align="center">
         <div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"> LIKE</div>
         <a href="{Permalink}"> ×  </a>
        <a href="{reblogurl}">Reblog </a>
        <a href="{permalink}"> With {NotecountWithLabel}</a>
 
        </div></div></div></div>
       
{LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}
{block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{/block:IndexPage}
{block:PermalinkPage}<div align="center">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}
 
{block:Photoset}
 {block:IndexPage}
    <center>
    
    {block:If3columns}
    {Photoset-250}
    {block:If3columns}
    {block:Ifnot3columns}
    {Photoset-400}
    {block:Ifnot3columns}
    
    </center>
    {block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}  
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{block:permalinkpage}
<div align="center">{Photoset-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Photoset}
 
{block:Video}
{block:IndexPage
<div align="center">
    
    {block:If3columns}
    {Video-250}
    {block:If3columns}
    {block:Ifnot3columns}
    {Video-400}
    {block:Ifnot3columns}
    
</div> <p>
{block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}        
{block:permalinkpage}
<div align="center">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Video}
 
{block:Audio}
<div class="audioplayer">{AudioPlayerGrey}</div>{block:Caption}{Caption}{/block:Caption}<p>{block:IndexPage}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{block:permalinkpage}
    <div class="perma1"><a id="notes{PostID}" href="{Permalink}">{PlayCount} Plays</a></div>
{/block:permalinkpage}
{/block:Audio}
 
{block:Quote}
<div class="title"><a href="{Permalink}">{Quote}</a></div><p> {block:Source}— {Source}{/block:Source}<p>{block:IndexPage}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:IndexPage}
{/block:Quote}
 
{block:Link}
<div class="title"><a href="{URL}" class="post_title" target="_blank"> {Name}</a></div> {block:Description}{Description}{/block:Description}<p>{block:IndexPage}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:IndexPage}
{/block:Link}
 
{block:Chat}
{block:Title}<div class="title"><a href="{Permalink}">{Title}<p></a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}<p>{block:IndexPage}
{block:IfShowPostLinks}
        <div class="perma1">
        {DayOfWeek}, {Month} {DayOfMonth}, {Year} with <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>
         {/block:IfShowPostLinks}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{/block:Chat}
{block:Answer} <div class="ques"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}
 
</div></div>
 
{block:permalinkpage}{block:NoteCount}
<div class="entry_bg">
<div class="prmlnk"><div class="perma2">
Posted on: <a href="{Permalink}">{DayOfMonth} {month}, {Year}</a>
with <a href="{Permalink}">{NoteCount} Notes</a><p>
<i>via</i> {block:RebloggedFrom}
{ReblogParentName} <i> source: </i> {ReblogRootName}
{/block:RebloggedFrom}
 {/block:NoteCount}
{block:PostNotes}
    {PostNotes}
{/block:PostNotes}
</div>
 
</div></div>
{/block:permalinkpage}
{/block:Posts}
 
 
 
<div class="clear"></div>
{block:IfNotInfiniteScroll}
{block:IndexPage}
<div class="entry_bg">
<div class="entry">
<div class="pagination">
  {block:Pagination}
  <div class="navigation">
          {block:PreviousPage}
              <a href="{PreviousPage}">Previous</a>
          {/block:PreviousPage}
     
          {block:NextPage}
              <a href="{NextPage}" >Next</a>
          {/block:NextPage}
          <div class="clear"></div>
  </div></div>
  {/block:Pagination}
  {/block:IndexPage}
          </div>
</div>{/block:IfNotInfiniteScroll}
 
</div>
</div>
 
<div class="wrap"><div class="cred"><a href="https://www.snazzyspace.com/">THEME ©</a></div></div>
 
{block:Pagination}
                <ul id="pagination">
                        {block:PreviousPage}
                                <li><a href="{PreviousPage}"></a></li>
                        {/block:PreviousPage}
                        {block:NextPage}
                                <li><a id="nextPage" href="{NextPage}"></a></li>
                        {/block:NextPage}
                </ul>
{/block:Pagination}
<script src="https://static.tumblr.com/psjhflr/bxnmcwj9t/masonry.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry_bg, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>
 
</div>
 
 
 
 
{block:iftotopbutton}
<script type="text/javascript">
        $(document).ready(function() {
                /*
                        var defaults = {
                                containerID: 'toTop', // fading element id
                                containerHoverID: 'toTopHover', // fading element hover id
                                scrollSpeed: 1200,
                                easingType: 'linear'
                        };
                        */
                       
                        $().UItoTop({ easingType: 'easeOutQuart' });
                       
                });
</script>
<a href="#" id="toTop" style="display: none; "><span id="toTopHover"></span>To Top</a>{block:iftotopbutton}
 
 
 
</div>
</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Magazine Theme

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:700,700italic' rel='stylesheet' type='text/css'>
 
<meta name="color:Background" content="#f0f0f0" />
<meta name="color:Box" content="#fafafa" />
<meta name="color:Text" content="#5e5d5d" />
<meta name="color:Links" content="#777676" />
<meta name="color:Links Hover" content="#5f5f5f" />
<meta name="color:Title Color" content="#474747" />
<meta name="color:Title Hover Color" content="#363636" />
<meta name="color:NavLinks Background Hover" content="#c4c2c2" />
<meta name="color:Navlinks Text Color" content="#474747" />
<meta name="color:Navlinks Text Hover Color" content="#363636" />
<meta name="color:Menu Background Color" content="#ebe9e9" />
<meta name="color:Chat" content="#f1f1f1" />
<meta name="color:Asker Background" content="#f1f1f1" />

<meta name="font:Body" content="Helvetica" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:To top button" content="1" />
<meta name="if:Show Caption" content="0" />
<meta name="if:Show Post Links" content="1" />
<meta name="if:Show Tags" content="0" />
 
<meta name="text:Custom Link 1" content="" />
<meta name="text:Custom Link 1 Title" content="Link 1" />
<meta name="text:Custom Link 2" content="" />
<meta name="text:Custom Link 2 Title" content="Link 2" />
<meta name="text:Custom Link 3" content="" />
<meta name="text:Custom Link 3 Title" content="Link 3" />
<meta name="text:Custom Link 4" content="" />
<meta name="text:Custom Link 4 Title" content="Link 4" />
<meta name="text:Custom Link 5" content="" />
<meta name="text:Custom Link 5 Title" content="Link 5" />
<meta name="text:Custom Link 6" content="" />
<meta name="text:Custom Link 6 Title" content="Link 6" />
<meta name="text:Custom Link 7" content="" />
<meta name="text:Custom Link 7 Title" content="Link 7" />
<meta name="text:Custom Link 8" content="" />
<meta name="text:Custom Link 8 Title" content="Link 8" />
<meta name="text:Custom Link 9" content="" />
<meta name="text:Custom Link 9 Title" content="Link 9" />
<meta name="text:Custom Link 10" content="" />
<meta name="text:Custom Link 10 Title" content="Link 10" />
 
<head>

<script src="https://static.tumblr.com/psjhflr/lpGmmq0oc/like.js"></script>
<script src="https://static.tumblr.com/uiqhh9x/61sm66w66/jquery.min.js" type="text/javascript"></script>
<script src="https://static.tumblr.com/uiqhh9x/3Jpm92lk1/totop.js" type="text/javascript"></script>
 
<link rel="stylesheet" type="text/css" href="https://static.tumblr.com/cpaytv3/nKOlyumhg/reset.css">


<style type="text/css">
body {
	
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;


	
    color: {color:Text};
    font-family: {font:Body};
    font-size: 11px;
    text-align:left; letter-spacing: 1px;
    text-transform:{text:Body Text transform};
    -webkit-font-smoothing: antialiased;
}
 
a, a:link, a:visited {
    color: {color:Links};
    font-family: {font:Links};
    text-transform: {text:Body Text transform};
    text-decoration: none;
    font-size: 11px;
}
   
a:hover {
    color: {color:Links Hover};
    font-family: {font:Links};
    text-decoration: none;
    font-size: 11px;  }
 
p {
    margin: 5px 0 0 0;
    line-height:12px;
    padding: 0; }
    ul, ol {
    margin: 5px 0 0 25px; padding: 0; }
    blockquote {
    margin: 2px 2px 1px 2px;
    padding: 1px 2px 1px 4px;
    border: 0px solid {color:Text}; }
    blockquote p {
    margin: 0;
    padding: 0;
    line-height: 12px; }
 
 
.header {
    background: {color:Box};
    top: 30px; left: 124px;
    width: 979px; padding: 20px;
    text-align: left; height: 230px;
    display: block; position: absolute;

}
 
.menu, .menu a {
    margin-right: 0px; width: 250px; margin-right: 30px;
    text-align: left; font-size: 11px;
    color: {color:Blog Title Color};
    text-transform: capitalize; font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}
 
#content {
    top: 290px;
    left: 412px;
    {block:IndexPage}
    width: 900px; padding: 20px;
    {/block:IndexPage}
    {block:PermalinkPage}
     width:600px; padding: 20px;
    {/block:PermalinkPage}
    float: right; position: absolute;
       -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
 
#container {
    width: 1000px;
    margin: 0px auto;
}
 
.entry {
   background: {color:Box};
    float: left;
    width: 300px;
    margin: 10px; margin-bottom: 7px;
    {block:PermalinkPage}
    width: 500px;
    {/block:PermalinkPage}
    padding: 20px;
    display: block;
    position: relative;

}
 
.entry img {
    display: block;
    max-width: 100%;
        {block:PermalinkPage}
    margin-bottom: 10px;
    {/block:PermalinkPage}
   
}
 
.entry:hover img {
    max-width: 100%;
}
 
#sb {
    float: left;
    left: 120px;
    top: 340px;
    width: 245px;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    display: block; margin: 5px;
    position: absolute;
}
 
.sb1 {
    background: {color:Box};
    width: 260px;
    margin-bottom: 18px;
    padding: 20px;
    display: block;
    position: relative;

}
 
 
   
#sb img {
    display: block; 
    max-width: 100%;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
 
.sbcont {
    margin-top: auto;
    }
 
#sb:hover img {
    max-width: 100%;
}

.dp {
    background: url("{PortraitURL-128}");
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 150px; height: 150px; border-radius: 75px; margin-top: -60px;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}

#dp_bg {
    background: {color:Box}; z-index: -999999;
    width: 150px; height: 150px; border-radius: 75px; 
    top: 310px; left: 140px;
    padding: 5px;
    display: block;
    position: absolute;

}

.menulinks a  {
no-repeat center center fixed; 
margin-top: -2px; margin-left: -3px; margin-top: -4px;
text-transform: capitalize; 
color: {color:Navlinks Text Color};
border-right: 2px dotted #ccc;
font-family: 'Open Sans', sans-serif;
text-transform: capitalize; font-size: 12px;
text-align: center; font-weight: bold;
letter-spacing:0px; display:block; line-height: 23px;
width: 100px; height: 26px;
padding: 13px 15px 13px;
}
 
.menulinks a:hover  {
display:block;
color: {color:Navlinks Text Hover Color};
background-color: {color:NavLinks Background Hover} ;
}

#menubar {     -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    background-color: {color:Menu Background Color} ;
    position: absolute; top: 200px; left: 0px;
    height: 50px; width: 1020px; color: {color:Navlinks Text Color};
    }
 
 
.navlinks a  {
background-color: {color:Menu Background Color} ;
no-repeat center center fixed;
margin-right: 5px; margin-bottom: 5px;
text-transform: capitalize;
font-family: 'Open Sans', sans-serif;
text-transform: capitalize; font-size: 11px;
color: {color:Navlinks Text Color};
text-align: center; font-weight: bold;
letter-spacing:0px; display:block;
padding: 9px 0px 9px;
width:125px;height:20px;line-height:20px; border-radius: 75px;
}
 
.navlinks a:hover  {
display:block;
color: {color:Links Hover};
background-color: {color:NavLinks Background Hover} ;
}
 
#left {
    line-height: 12px; position: absolute; top: 40px;
    height:auto; color: {color:Text};
    padding: 15px; left: 0px; text-align: right;
    font-size: 11px; letter-spacing: 0px;
    Display:block;
}
 

.entry:hover .nts {
    width: 21px; height: 20px; top: 10px; left: 0px;
    opacity: .9;  font-family: 'Maven Pro', sans-serif;
    filter: alpha(opacity = 90);
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
}

.entry:hover .rblg, .entry:hover .dte {
    width: 210px; height: 20px; top: 10px; left: 10px;
    opacity: .9;  font-family: 'Maven Pro', sans-serif;
    filter: alpha(opacity = 90);
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
}
 
 
.entry:hover .p1, .entry:hover .p2, .entry:hover .p3  {
   opacity: 1;
    filter: alpha(opacity = 100);
   
 
}
 
.p1 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    top: 15px; left: 15px;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: 'Maven Pro', sans-serif;
    size: 11px;
}
.p2 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    top: 15px; left: 55px;
    opacity: 0;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: 'Maven Pro', sans-serif;
    size: 12px;width: 21px;
height: 20px;
}
 

.rblg {
    width: 210px;
    height: 20px; 
    top: 0px; left: 10px;
    overflow: hidden;
    z-index: 9999999;
    color: #fff;
    -moz-border-radius: 2px;
    border-radius:  2px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .9;
    filter: alpha(opacity = 90);
    
     }
 
.rblg a {
    color: #ffffff!important; text-transform: uppercase;
    font-size: 42px;
}
 
.rblg:hover, .rblg a:hover {
    color: #000; text-transform: uppercase;
   font-family: 'Maven Pro', sans-serif;
}
 
.nts {
    width: 21px;
    height: 20px; 
    top: 0px;
    background: url('https://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png');
    overflow: hidden;
    z-index: 9999999;
    color: #fff;
    -moz-border-radius: 2px;
    border-radius:  2px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-align: left;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .9;
    filter: alpha(opacity = 90);
    
     }
 
.nts a {
    color: #ffffff!important; text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
}

.nts img {
    width: 21px;
height: 20px;
}
 
.nts:hover, .nts a:hover {
    color: #000; text-transform: uppercase;
   font-family: 'Maven Pro', sans-serif;
}
 

 
.perma1 {
    margin-top: 0px; 
   font-family: 'Open Sans', sans-serif; padding: 5px;
    font-size:11px; color: {color:Links};
    text-transform: capitalize; letter-spacing: 0px;
    border-bottom: 1px dotted #ccc; line-height: 20px; margin-bottom: 10px;
}
 
.perma1 a {
   font-family: 'Open Sans', sans-serif;
    font-size:11px; color: {color:Links}; 
    text-transform: capitalize; letter-spacing: 0px;
}
 
.perma1 a:hover {
   color: {color:Links Hover};
        }
        
.tags {
    margin-top: 5px; 
   font-family: 'Open Sans', sans-serif; padding: 5px;
    font-size:11px; color: {color:Links}; 
    text-transform: capitalize; letter-spacing: 0px;
    border: 1px dotted #ccc; line-height: 15px; margin-top: 10px;
}
 
.tags a {
    margin-top: 5px;
   font-family: 'Open Sans', sans-serif;
    font-size:11px; color: {color:Links};
    text-transform: capitalize; letter-spacing: 0px;
}
 
.tags a:hover {
   color: {color:Links Hover};
        }
       
 
.n1, .n1 a {  
    text-transform: capitalize;
   font-family: 'Open Sans', sans-serif;
    font-size: 45px;
    text-align: center;
    color: #fff;
}
 
.n1:hover, .n1 a:hover {  
    color: #fff;
}
 
.n2, .n2 a {  
    text-transform: capitalize; text-align: center; margin-top: 0px;
    font-family: 'Open Sans', sans-serif; font-size: 15px; letter-spacing: 1px;
   color: #fff;
   
}
 
.n2:hover, .n2 a:hover {  
    text-transform: capitalize; text-align: center; margin-top: 0px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}
 
.n3, .n3 a {  
    text-transform: capitalize; text-align: center; letter-spacing: 3px;
    font-family: 'Open Sans', sans-serif; font-size: 17px; margin-right: -5px;
    color: #fff;
   
}
 
.n3:hover, .n3 a:hover {  
   color: #fff; font-family: 'Open Sans', sans-serif; font-size: 17px;
   margin-top: 5px;
   text-transform: capitalize;
}
 
.n4, .n4 a {  
    text-transform: capitalize; text-align: left; letter-spacing: 0px;
    font-family: 'Droid Serif', serif; font-style: italic;
    font-size: 13px; margin-right: -5px;
    border-bottom: 1px dotted  #ccc; margin-bottom: 10px; line-height: 30px;
    color: {color: Text};
   
}

.n5, .n5 a {  
    text-transform: capitalize; text-align: left;
    letter-spacing: 3px; font-family: 'Open Sans', sans-serif;
    font-size: 9px; margin-right: -5px;
    margin-bottom: 0px; line-height: 0px; color: {color: box};
   
}
 
 
.nts:hover , .rblg:hover , .dte:hover {
     color: #ffffff!important;
}
 
.title, .title a {
    font-family: 'Droid Serif', serif; font-style: italic;
    font-size: 20px;
    color: {color:title color};
    line-height: 25px; margin-bottom: 10px;
    letter-spacing:2px;
    text-transform: none;
}
 
.title:hover, .title a:hover {
    color:{color:title hover color};
}
 
.btitle a {
    font-family: 'Droid Serif', serif; font-style: italic;
    font-size: 90px; height: 20px;
    color: {color:Title color}; width:800px;
    letter-spacing:-4px; line-height: 110px;
    text-transform: none; left: 0px; 
}
 
.btitle:hover, .btitle a:hover {
    color: {color:Title color};
}
 
 
 
.pos {
    background-color: {color:Chat};  
}
.audioplayer {
    padding-left: 12px;
    background-color:{color:Chat};
}
.playcount {
    float: right;
    clear: both;
    padding-top: 10px;
    padding-right: 20px;
    color:{color:link};
    text-shadow: none;
    font-size:10px;
    text-transform:{text:Title text transform};
}
 
#sidebar img {
    max-width:100%;
}
   
#sidebar img {
    border: 0px;  
    display: block;
}
   
.ques {
    background-color:{color:Asker Background};
    padding:5px;  
    font-family: {font:Title};
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing:-1px;
}
.ques a {
    font-family: {font:Title};
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing:-1px;color:{color:Links};
}
.ques a:hover {
    color: {color:Links Hover};}
.said a {
    font-family: {font:Title};
    font-size: 12px;
    line-hepxht: 14px;
    text-transform: uppercase;
    letter-spacing:-1px;
    margin-top:6px;
}
.said a:hover {
    font-family: {font:Title};
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing:-1px;
    margin-top:6px;
}
 
.nav a {
    font-size: 13px;
   font-family: 'Open Sans', sans-serif;
}
.nav  {
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
}


.pagination {
    float:center; color: {color: Navlinks Text Color};
    margin-top:0px;
    width: auto;
    height:20px;
    margin-left: 3px;
    text-align: right;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Serif', serif;
    font-size:13px; 
}
 
 
.pagination a, .pagination, .pagination a:active, .pagination a:visited {
    float:center; color: {color: Navlinks Text Color};
    margin-top:0px;
    width: auto;
    height:20px;
    margin-left: 3px;
    text-align: right;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Serif', serif;
    font-size:13px; 
}
 
.pagination a:hover, .pagination :hover {
    float:center;
    margin-top:0px;
    width: auto;
    height:20px;
    margin-left: 3px;
    text-align: right;
    line-height:20px; letter-spacing: 1px;
    font-family: 'Droid Serif', serif;
    font-size:13px; color: {color: Links Hover};
}
 
#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:2px;
    right:2px;
    overflow:hidden;
    width:51px;
    height:51px;
    border:none;
    text-indent:100%;
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    opacity: .5;
    filter: alpha(opacity = 50);
}
 
#toTopHover {
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    width:51px;
    height:51px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
        filter:alpha(opacity=0);
}
 
#toTop:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}
 
#toTop:active, #toTop:focus {
        outline:none;
}
 
{block:IfInfiniteScroll}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {
    display:none;
}
.navigation {
    display:none!important;
}
#pagination {
    display:none;
    {/block:IfInfiniteScroll}
}
 
#infscr-loading {
    position: absolute!important;
    width: 16px!important;
    height: 11px!important;
    bottom: 0px!important;
    left: 50%!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
}
 
#over{
    height:50000px!important;
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;}
 
.hrline { margin-left: -5px; margin-right: -5px; padding:-1000px width: 410px;}
 
.t1, .t1 a {
   font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: {color:Links};
    line-height: 20px;
    letter-spacing:3px; margin-top: 10px; margin-right: -4px;
    text-transform: uppercase; text-align:right;
}
 
 
 
.perma2, .perma2 a {
    font-family: 'Open Sans', sans-serif;
    font-size:14px; color: {color:Links};
        }
 
       
 
.prmlnk {
  background: {color:Box};
    font-size:15px;
    margin: 10px;
    width: 500px;
    padding: 20px;
    display: block; overflow:hidden;
    position: relative;
 
}
 
.wrap {position: fixed; bottom:10px; left:0px;}
 
.wrap:hover .cred a {width: 140px; height: 20px; text-align: right;}
 
.cred a {
    height: 100%; width: 80px; height: 20px; margin-left:-65px;
    background-color: #000; font-size: 14px; text-align: right;
    overflow: hidden; line-height: 15px;
    z-index: 9999999; padding-top: 3px;
    color: #fff; padding-right: 5px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Open Sans', sans-serif;
    line-spacing: 1px;
     }
 
.desc {
    height: 50px; position: relative;
    }
 
ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
}
 
ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
}
 
ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}
 
ol.notes li.note span.action {
    font-weight: bold;
}
 
ol.notes li.note .answer_content {
    font-weight: normal;
}
 
ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}
 
ol.notes li.note blockquote a {
    text-decoration: none;
}

</style>
 <script type="text/javascript" src="https://static.tumblr.com/psjhflr/nvqmmq0r3/liked.js"></script>
</head>
 
 
<style type="text/css">{CustomCSS}</style>
 
<body>
 
 
 
 <div class="header"><br><br>
<div class="btitle"><a href="/"><center>{Title}</center></a></div>
<br>
<div id="menubar">
<table cellpadding="0" cellspacing="3" width="230px">
<div align="center">
<tr>
<td><div class="menulinks"><a href="/">Index</a></div></td>
<td><div class="menulinks"><a href="/archive">Archive</a></div></td>

<td><div class="menulinks"><a href="/ask">Message</a></div></td>
<td>{block:ifCustomLink1Title}<div class="menulinks"><a href="{text:Custom Link 1}">{text:Custom Link 1 Title}</a></div>{/block:ifCustomLink1Title}</td>
<td>
{block:ifCustomLink2Title}<div class="menulinks"><a href="{text:Custom Link 2}">{text:Custom Link 2 Title}</a></div>{/block:ifCustomLink2Title}</td>
<td>{block:ifCustomLink3Title}<div class="menulinks"><a href="{text:Custom Link 3}">{text:Custom Link 3 Title}</a></div>{/block:ifCustomLink3Title}
</td>
<td>
{block:ifCustomLink4Title}<div class="menulinks"><a href="{text:Custom Link 4}">{text:Custom Link 4 Title}</a></div>{/block:ifCustomLink4Title}</td>
</tr>
</table>
</div></div>
 
  <div id="dp_bg"></div>
 
<div id="sb">
<div class="sb1"><br>
<div align="left"><div class="dp"></div>
</div>
<div align="justify">
<a href="/"><img src="{image:DisplayImage}"></a><p>
<div class="n4">About</div>
{Description}</div>
</div>
<div class="sb1">
<div class="n4">Links</div>
    <table cellpadding="0" cellspacing="3" width="230px">
<div align="center">
<tr>
<td>{block:ifCustomLink5Title}<div class="navlinks"><a href="{text:Custom Link 5}">{text:Custom Link 5 Title}</a></div>{/block:ifCustomLink5Title}</td>
<td>{block:ifCustomLink6Title}<div class="navlinks"><a href="{text:Custom Link 6}">{text:Custom Link 6 Title}</a></div>{/block:ifCustomLink6Title}</td>
</tr>
<tr>
<td>
{block:ifCustomLink7Title}<div class="navlinks"><a href="{text:Custom Link 7}">{text:Custom Link 7 Title}</a></div>{/block:ifCustomLink7Title}</td>
<td>{block:ifCustomLink8Title}<div class="navlinks"><a href="{text:Custom Link 8}">{text:Custom Link 8 Title}</a></div>{/block:ifCustomLink8Title}
</td>
</tr>
<tr>
<td>
{block:ifCustomLink9Title}<div class="navlinks"><a href="{text:Custom Link 9}">{text:Custom Link 9 Title}</a></div>{/block:ifCustomLink9Title}</td>
<td>{block:ifCustomLink10Title}<div class="navlinks"><a href="{text:Custom Link10}">{text:Custom Link 10 Title}</a></div>{/block:ifCustomLink10Title}
</td>
</tr>
</table>
</div>


    <div class="sb1"><div align="center">
    <div class="n4">Theme:</div><p> <a href="https://www.snazzyspace.com"><i>Theme</i> </a> by <a href="https://www.snazzyspace.com"><b>SnazzySpace</b></a>
        </div>
    </div>
   
</div>
 
<div id="container">
<div id="content">
 
 
{block:Posts}
<div class="entry">
 
{block:Text}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
    {block:Title}
        <div class="title"><a href="{Permalink}">{Title}</a></div>
    {/block:Title} {block:indexpage}
        {Body}  
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:indexpage}
    {block:PermalinkPage}
         {Body}
        {/block:PermalinkPage}
{/block:Text}
 
{block:Photo}
 {block:IndexPage}
<div class="p1">
        <div class="rblg">
        <a href="{reblogurl}"><img src="https://static.tumblr.com/psjhflr/lx6mmq21l/reblog.png"></a>
        </div></div>
        <div class="p2">
        <div class="nts">
        <a id="like{PostID}" href="javascript:likelink('{PostID}','{Permalink}','');"><img src="https://static.tumblr.com/psjhflr/DJNmmpxrc/spacer.gif" width="21" height="20" alt="Like this post" id="likeimage{PostID}"/></a>
        </div>
        </div>
       
{LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}
 {block:ifShowCaption}
 
 {block:Caption}{caption}{/block:Caption}
 
 {/block:ifShowCaption}
 
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
 
{/block:IndexPage}
{block:PermalinkPage}<div align="center">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}
 
{block:Photoset}
 {block:IndexPage}
 {block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
    <center>{Photoset-250}</center>
    {block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{block:permalinkpage}
<div align="center">{Photoset-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Photoset}
 
{block:Video}
{block:IndexPage}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
<div align="center">{Video-250}</div> <p>
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{/block:IndexPage}        
{block:permalinkpage}
<div align="center">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Video}
 
{block:Audio}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
<div class="audioplayer">{AudioPlayerGrey}</div>{block:Caption}{Caption}{/block:Caption}<p>{block:IndexPage}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{block:permalinkpage}
    <div class="perma1"><a id="notes{PostID}" href="{Permalink}">{PlayCount} Plays</a></div>
{/block:permalinkpage}
{/block:Audio}
 
{block:Quote}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
<div class="title"><a href="{Permalink}">{Quote}</a></div><p> {block:Source}— {Source}{/block:Source}<p>{block:IndexPage}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:IndexPage}
{/block:Quote}
 
{block:Link}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
<div class="title"><a href="{URL}" class="post_title" target="_blank"> {Name}</a></div> {block:Description}{Description}{/block:Description}<p>{block:IndexPage}
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
        {/block:IndexPage}
{/block:Link}
 
{block:Chat}
{block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} / <a href="{Permalink}">{NoteCountWithLabel}</a>
         </div>  
        {/block:IfShowPostLinks}
{block:Title}<div class="title"><a href="{Permalink}">{Title}<p></a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}<p>{block:IndexPage}        
        {block:IfShowTags}
        {block:HasTags}
        <div class="tags">
                 {block:Tags}
        <i>#{Tag}</i>
        {/block:Tags}</div>
        {/block:HasTags}
        {/block:IfShowTags}
{/block:IndexPage}
{/block:Chat}
{block:Answer} <div class="ques"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}
 
</div>
 
{block:permalinkpage}{block:NoteCount}
<div class="prmlnk"><div class="perma2">
Posted on: <a href="{Permalink}">{DayOfMonth} {month}, {Year}</a>
with <a href="{Permalink}">{NoteCount} Notes</a><p>
<i>via</i> {block:RebloggedFrom}
{ReblogParentName} <i> source: </i> {ReblogRootName}
{/block:RebloggedFrom}
 {/block:NoteCount}
{block:PostNotes}
    {PostNotes}
{/block:PostNotes}
</div>
 
</div>
{/block:permalinkpage}
{/block:Posts}
 
 
 
<div class="clear"></div>
{block:IfNotInfiniteScroll}
{block:IndexPage}
<div class="entry">
<div class="pagination">
  {block:Pagination}
  <div class="navigation">
          {block:PreviousPage}
              <a href="{PreviousPage}">Previous</a>
          {/block:PreviousPage}
     
          {block:NextPage}
              <a href="{NextPage}" >Next</a>
          {/block:NextPage}
          <div class="clear"></div>
  </div>
  {/block:Pagination}
  {/block:IndexPage}
          </div>
</div>{/block:IfNotInfiniteScroll}
 
</div>
</div>
 
<div class="wrap"><div class="cred"><a href="https://www.snazzyspace.com/">Themes</a></div></div>
 
{block:Pagination}
                <ul id="pagination">
                        {block:PreviousPage}
                                <li><a href="{PreviousPage}"></a></li>
                        {/block:PreviousPage}
                        {block:NextPage}
                                <li><a id="nextPage" href="{NextPage}"></a></li>
                        {/block:NextPage}
                </ul>
{/block:Pagination}
<script src="https://static.tumblr.com/psjhflr/bxnmcwj9t/masonry.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>
 
</div>
 
 
 
 
{block:iftotopbutton}
<script type="text/javascript">
        $(document).ready(function() {
                /*
                        var defaults = {
                                containerID: 'toTop', // fading element id
                                containerHoverID: 'toTopHover', // fading element hover id
                                scrollSpeed: 1200,
                                easingType: 'linear'
                        };
                        */
                       
                        $().UItoTop({ easingType: 'easeOutQuart' });
                       
                });
</script>
<a href="#" id="toTop" style="display: none; "><span id="toTopHover"></span>To Top</a>{block:iftotopbutton}

 
 
</div>
</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Infinity Theme

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<title>{Title}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

<meta name="color:Background" content="#dfdfdf" />
<meta name="color:Box" content="#dfdfdf" />
<meta name="color:Text" content="#1b1b1b" />
<meta name="color:Links" content="#1b1b1b" />
<meta name="color:Links Hover" content="#1b1b1b" />
<meta name="color:Navlinks Text" content="#1b1b1b" />
<meta name="color:Navlinks Text Hover" content="#1b1b1b" />
<meta name="color:Navlinks Background" content="#c7c7c7" />
<meta name="color:Navlinks Background Hover" content="#afafaf" />
<meta name="color:Blog Title Color" content="#ffffff" />
<meta name="color:Title Color" content="#1b1b1b" />
<meta name="color:Title Hover Color" content="#666565" />
<meta name="color:Chat" content="#bebdbd" />
<meta name="color:Asker Background" content="#bebdbd" />

<meta name="image:DisplayImage" content="https://placehold.it/500x250" />
<meta name="image:DisplayImage" content="" />
<meta name="font:Body" content="Helvetica" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:To top button" content="1" />
<meta name="if:Show Blog Title" content="1" />
<meta name="if:Show Caption" content="0" />
<meta name="if:Show Post Links" content="1" />

<meta name="text:Custom Link 1" content="" />
<meta name="text:Custom Link 1 Title" content="Link 1" />
<meta name="text:Custom Link 2" content="" />
<meta name="text:Custom Link 2 Title" content="Link 2" />
<meta name="text:Custom Link 3" content="" />
<meta name="text:Custom Link 3 Title" content="Link 3" />
<meta name="text:Custom Link 4" content="" />
<meta name="text:Custom Link 4 Title" content="Link 4" />
<meta name="text:Custom Link 5" content="" />
<meta name="text:Custom Link 5 Title" content="Link 5" />
<meta name="text:Custom Link 6" content="" />
<meta name="text:Custom Link 6 Title" content="Link 6" />

<head>
<script type="text/javascript" src="https://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="https://static.tumblr.com/uiqhh9x/61sm66w66/jquery.min.js" type="text/javascript"></script>
<script src="https://static.tumblr.com/uiqhh9x/3Jpm92lk1/totop.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="https://static.tumblr.com/cpaytv3/nKOlyumhg/reset.css">


<style type="text/css">
body { 


background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;



    color: {color:Text};
    font-family: {font:Body};
    font-size: 11px;
    background-position:top left;
    text-align:justify;
    text-justify:inter-word;
    text-transform:{text:Body Text transform};
    -webkit-font-smoothing: antialiased;
}

a, a:link, a:visited { 
    color: {color:Links};
    font-family: {font:Links};
    text-transform: {text:Body Text transform};
    text-decoration: none; 
    font-size: 11px;
}
    
a:hover {
    color: {color:Links Hover};
    font-family: {font:Links};
    text-decoration: none;
    font-size: 11px;  }

p {
    margin: 5px 0 0 0;
    line-height:12px;
    padding: 0; }
    ul, ol {
    margin: 5px 0 0 25px; padding: 0; }
    blockquote {
    margin: 2px 2px 1px 2px;
    padding: 1px 2px 1px 4px;
    border: 0px solid {color:Text}; }
    blockquote p {
    margin: 0;
    padding: 0;
    line-height: 12px; }


.header {
    background: transparent; 
    width: 900px; padding: 15px; 
    text-align: center; height: auto;
    margin-left: 150px;  top: 30px;
    display: block; position: absolute;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.menu, .menu a {
    margin-right: 0px; width: auto; margin-left: 15px;
     text-align: center; left: 200px;
    font-size: 13px; margin-bottom: 5px;
    color: {color:Blog Title Color};
    text-transform: capitalize;
   font-family: 'Droid Sans', sans-serif;
}

#content {
    {block:IndexPage}
    width: 900px;
    top: 300px;
    left: 70px;
    {/block:IndexPage}
    {block:PermalinkPage}
    left: 360px;
     width:800px;
    top: 200px;
    {/block:PermalinkPage}
    float: right; position: absolute;
}

#container {
    width: 800px;
    margin: 0px auto;
}

.entry {
   background: {color:Box};
    float: left;
    width: 260px;
    {block:IndexPage}
    margin: 5px;
    {/block:IndexPage}
    {block:PermalinkPage}
    margin: 20px;
    width: 500px; 
    {/block:PermalinkPage}
    padding: 10px;
    display: block;
    position: relative;
}
 
.entry img {
    display: block;
    max-width: 100%;
     {block:IfShowShadow}
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    {/block:IfShowShadow}
}
 
.entry:hover img {
    max-width: 100%;
}



#sb {
    background: {color:Box};
    float: left;
    left: 940px;
    top: 300px;
    width: 220px;
    height: auto;
    padding: 15px;
    margin-top: 0px;
    display: block; margin: 5px;
    position: absolute;
}
 
#sb img {
    display: block;
    max-width: 100%;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}
 
.sbcont {
    margin-top: auto;
    }
 
#sb:hover img {
    max-width: 100%;
}

.navlinks a  {
height: 10px;
font-family: 'Droid Sans', sans-serif; text-transform: none;
font-size: 11px; text-align: center;
letter-spacing:0px ;display:block;padding:10px;
color: {color:NavLinks Text};
background: {color:Navlinks Background};
}
 
 
.navlinks a:hover  {
display:block;
color: {color:NavLinks Text Hover};
background-color: {color:Navlinks Background Hover};
}

#left {
    line-height: 12px; position: absolute; top: 40px;
    height:auto; color: {color:Text};
    padding: 15px; left: 0px; text-align: right;
    font-size: 11px; letter-spacing: 0px;
    Display:block;
}
 
.entry:hover .nts, .entry:hover .rblg, .entry:hover .dte {
    width: 200px; height: 10px; text-align: right;
    font-family: 'Droid Sans', sans-serif;
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
      -khtml-border-radius: 5px;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
 
 
.entry:hover .p1, .entry:hover .p2, .entry:hover .p3, .entry:hover .p4  {
   opacity: 1;  left: 0px; text-align: right; bottom: 40px;
   filter: alpha(opacity = 100); 
 
}

.entry:hover .p2, .entry:hover .p3, .entry:hover .p4  {
   opacity: 1;  right: 0px; text-align: right; bottom: 50px;
    filter: alpha(opacity = 100);
}
 
.p1 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    bottom: 40px; left: 0px; height: 0px;
    opacity: 0; text-align: right;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: 'Droid Sans', sans-serif;
      -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  
}

.p2 {  
     -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    bottom: 50px; right: 0px; height: 30px;
    opacity: 0; text-align: right;
    filter: alpha(opacity = 0);
    z-index:9999999;
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
   font-family: 'Droid Sans', sans-serif;
      -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
   
}


.perma1, .perma1 a {
    margin-top: 5px; 
   font-family: 'Droid Sans', sans-serif;
    font-size:10px; color: {color:Links};
    text-transform: uppercase; letter-spacing: 0px;
        }
.perma1 a:hover {
   color: {color:Links Hover};
        }
        

.rblg {
    height: 10px; width: 250px;
    overflow: hidden;
    z-index: 9999999;
    color: #fff;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    padding: 10px;
   background: {color:Box};
     }
 
.rblg a {
    color: {color:Text}; text-transform: uppercase;
    font-family: 'Open Sans', sans-serif; font-size: 16px;
}
 
.rblg:hover, .rblg a:hover {
    color: {color:Links}; text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
}

.n1, .n1 a {  
    text-transform: uppercase;
   font-family: 'Droid Sans', sans-serif;
    font-size: 40px;
    text-align: center;
    color: {color:Links};
}
 
.n1:hover, .n1 a:hover {  
    text-transform: uppercase;
    color: {color:Links Hover};
}
 
.n2, .n2 a {  
    text-transform: uppercase; text-align: center; margin-top: -5px;
    font-family: 'Droid Sans', sans-serif; font-size: 11px; letter-spacing: 1px;
    color: {color:Links};
   
}
 
.n2:hover, .n2 a:hover {  
    text-transform: uppercase; text-align: center; margin-top: -5px;
    font-family: 'Droid Sans', sans-serif; font-size: 11px;
    color: {color:Links};
}

.n3, .n3 a {  
    text-transform: uppercase; text-align: center; letter-spacing: 3px;
    font-family: 'Droid Sans', sans-serif; font-size: 15px;
    color: {color:Links};
   
}
 
.n3:hover, .n3 a:hover {  
    text-transform: uppercase;
    font-family: 'Droid Sans', sans-serif; font-size: 15px;
    color: {color:Links Hover};
}


.nts:hover , .rblg:hover , .dte:hover {
     color: #ffffff!important;
}

.title, .title a {
    font-family: 'Droid Sans', sans-serif;
    font-size: 26px; 
    color: {color:title color};
    line-height: 25px;
    letter-spacing:2px;
    text-transform: none;
}

.title:hover, .title a:hover {
    color:{color:title hover color};
}

#btitlebg { 
    background: {color:Box};
     height: auto; margin-left: 20px;
     padding-bottom: 5px; top: -20px; width: 520px;
    }
.btitle, .btitle a {
    
    font-family: 'Droid Sans', sans-serif;
    font-size: 65px; text-align: center;
    color: {color:Blog Title color}; width:auto;
    line-height: 60px;
    letter-spacing:4px; padding: 10px; 
    text-transform: none;
}

.btitle:hover, .btitle a:hover {
    color: {color:Blog Title color};
}



.pos { 
    background-color: {color:Chat};  
}
.audioplayer { 
    padding-left: 12px;
    background-color:{color:Chat}; 
}
.playcount {
    float: right; 
    clear: both;
    padding-top: 10px;
    padding-right: 20px;
    color:{color:link};
    text-shadow: none;
    font-size:10px;
    text-transform:{text:Title text transform};
}

#sidebar img {
    max-width:100%;
}
    
#sidebar img { 
    border: 0px;  
    display: block;
}
    
.ques {
    background-color:{color:Asker Background}; 
    padding:5px;  
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 16px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
}
.ques a {
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 16px; 
    text-transform: uppercase; 
    letter-spacing:-1px;color:{color:Links};
}
.ques a:hover {
    color: {color:Links Hover};}
.said a {
    font-family: {font:Title};
    font-size: 12px; 
    line-hepxht: 14px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
    margin-top:6px;
}
.said a:hover {
    font-family: {font:Title}; 
    font-size: 12px; 
    line-height: 14px; 
    text-transform: uppercase; 
    letter-spacing:-1px;
    margin-top:6px;
}

.nav a {
    font-size: 13px;
   font-family: 'Droid Sans', sans-serif;
}
.nav  {
    font-size: 13px; 
    font-family: 'Droid Sans', sans-serif;
}

.pagination {
    float:center;
    margin-top:-10px;
    width: auto;
    height:auto;
    margin-left: 3px;
    text-align: center;
    line-height:35px;
   font-family: 'Droid Sans', sans-serif;
    font-size:18px; color:
}
 
.pagination a, .pagination a:active, .pagination a:visited {
    float:center;
    margin-top:0px;
    width: 250px;
    height:auto;
    margin-left: 3px;
    text-align: center;
    line-height:25px;
   font-family: 'Droid Sans', sans-serif;
    font-size:18px;
}
 
.pag {  
    font-family: 'Droid Sans', sans-serif;
    margin: 0 0 0px 0;
    padding: 3px; margin-top: 10px;
    color: {color:Text}
    text-align: center;
    font-size:15px;
    overflow:hidden;
   background: {color:Box};
    }
 
 
.pag a:visited, .pag a:link
     background: {color:Box};
   font-family: 'Droid Sans', sans-serif;
    margin: 0 0 0px 0;
    padding: 3px;
    text-align: center;
    font-size:15px;
    overflow:hidden;
    text-align: center;
    }
.pag a:active {
    font-family: 'Droid Sans', sans-serif;
    margin: 0 0 0px 0;
    padding: 3px;
    text-align: center;
    font-size:15px;
    }
 
.pag a:hover {
   font-family: 'Droid Sans', sans-serif;
    color: {color:Links};
}



#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:2px;
    right:2px;
    overflow:hidden;
    width:51px;
    height:51px;
    border:none;
    text-indent:100%;
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    opacity: .5;
    filter: alpha(opacity = 50);
}
 
#toTopHover {
    background:url(https://static.tumblr.com/8jq17g7/Ecym0czgw/ui.totop.png) no-repeat left top;
    width:51px;
    height:51px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
        filter:alpha(opacity=0);
}
 
#toTop:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}
 
#toTop:active, #toTop:focus {
        outline:none;
}

{block:IfInfiniteScroll}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {
    display:none;
}
.navigation {
    display:none!important;
} 
#pagination {
    display:none;
    {/block:IfInfiniteScroll}
}

#infscr-loading {
    position: absolute!important;
    width: 16px!important;
    height: 11px!important;
    bottom: 0px!important;
    left: 50%!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
}

#over{
    height:50000px!important;
    position:absolute;
    top:0px;
    left:0px;
    width: 100%;}

.hrline { margin-left: -5px; margin-right: -5px; padding:-1000px width: 410px;}

.t1, .t1 a {
   font-family: 'Droid Sans', sans-serif;
    font-size: 11px;
    color: {color:Links};
    line-height: 20px;
    letter-spacing:3px; margin-top: 10px; margin-right: -4px;
    text-transform: uppercase; text-align:right;
}



.perma2, .perma2 a {
    font-family: 'Droid Sans', sans-serif;
    font-size:14px; color: {color:Links};
        }

        

.prmlnk { 
  background: {color:Box};
    font-size:15px; 
    margin-left: 20px; 
    width: 500px;
    padding: 10px;
    display: block; overflow:hidden; 
    position: relative;

}

.wrap {position: fixed; bottom:10px; left:-2px;}
 
.wrap:hover .cred a {width: 130px; height: 20px; text-align: right;}
 
.cred a {
    height: 100%; width: 80px; height: 20px; margin-left:-65px;
    background-color: #000; font-size: 15px; text-align: right;
    overflow: hidden;
    z-index: 9999999; padding-top: 3px;
    color: #fff; padding-right: 5px;
    -moz-border-radius: 2px;
    border-radius:  2px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
     opacity: .7;
    filter: alpha(opacity = 70);
    font-family: 'Droid Sans', sans-serif;
    line-spacing: 1px;
     }

.desc {
    padding: 2px; 
    }

ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: solid 1px #ccc;
}

ol.notes li.note {
    border-top: solid 1px #ccc;
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

ol.notes li.note span.action {
    font-weight: bold;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

hr { width: 300px; margin-bottom: 0px; margin-top: 0px;}
</style>

</head>


<style type="text/css">{CustomCSS}</style>

<body>

<div class="header">
<div class="btitle">
<hr><hr>
<a href="/"><center>{Title}</center></a><hr><hr>

</div>
<br>
<div class="menu">
    <a href="/">Index</a>
    {block:IfShowArchiveLink}
    <a href="/archive">Archive</a>
    {/block:IfShowArchiveLink}
    {block:IfShowAskLink}
    <a href="/ask">Message</a>
    {/block:IfShowAskLink}
    <a href="https://www.snazzyspace.com">Theme</a>
<a href="{text:Custom Link 1}">{text:Custom Link 1 Title}</a>   {/block:ifCustomLink1Title}
<a href="{text:Custom Link 2}">{text:Custom Link 2 Title}</a> {/block:ifCustomLink2Title}
<a href="{text:Custom Link 3}">{text:Custom Link 3 Title}</a>   {/block:ifCustomLink3Title}
<a href="{text:Custom Link 4}">{text:Custom Link 4 Title}</a>   {/block:ifCustomLink4Title}
<a href="{text:Custom Link 5}">{text:Custom Link 5 Title}</a>   {/block:ifCustomLink5Title}
<a href="{text:Custom Link 6}">{text:Custom Link 6 Title}</a>   {/block:ifCustomLink6Title}
<br><p><p>
</div>

</div>

<div id="sb">
<div class="sbcont">
<a href="/"><img src="{image:DisplayImage}"></a>
<br>
<div class="desc">
{Description}</div>
{block:IfNotInfiniteScroll}
{block:IndexPage}
<div class="pag">
<div class="pagination">
 
  {block:Pagination}
  <div class="navigation">
          {block:PreviousPage}
              <a href="{PreviousPage}" class="previous">«</a>
          {/block:PreviousPage}
     {CurrentPage}/{TotalPages}
          {block:NextPage}
              <a href="{NextPage}" class="next">»</a>
          {/block:NextPage}
          <div class="clear"></div>
  </div>
  {/block:Pagination}
 
         
</div></div>{/block:IndexPage}{/block:IfNotInfiniteScroll}
 
</div>
</div>

<div id="container">
<div id="content">
{block:Posts}
<div class="entry">

{block:Text}
    {block:Title}
        <div class="title"><a href="{Permalink}">{Title}</a></div>
    {/block:Title} {block:indexpage}
        {Body}  
        {block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}
        {/block:indexpage}
    {block:PermalinkPage}
         {Body} 
        {/block:PermalinkPage}
{/block:Text}

{block:Photo}
 {block:IndexPage}
    <div class="p1">
        <div class="rblg"><center>
        <table cellpadding="0" cellspacing="10" width="200px">
        <div class="n2">
        <tr><div align="center">
<td><div class="n2"><a href="{Permalink}">{MonthNumber}/{DayOfMonth}/{Year}</a></div></td>
<td><div class="n2">{NoteCount}</div></td>
<td><div class="n2"><a href="{reblogurl}">REBLOG</div></td></center>
</tr>
       
        </div>
        </table>
        </center>
        </div></div>
        

       
{LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}

{/block:IndexPage}
{block:PermalinkPage}<div align="center">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
 {block:IndexPage}
    <center>{Photoset-100}</center>
    <center><div class="n3"><a href="{Permalink}">View Photoset</a></div></center>
    {block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
                {block:IfShowPostLinks}
       <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}
{/block:IndexPage}
{block:permalinkpage}
<div align="center">{Photoset-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Photoset}

{block:Video}
{block:IndexPage}<div align="center">{Video-100}</div> <p>
    <center><div class="n3"><a href="{Permalink}">View Video</a></div></center>
        {block:IfShowPostLinks}
        <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}
{block:ifShowCaption}{block:Caption}{caption}{/block:Caption}{/block:ifShowCaption}
{/block:IndexPage}        
{block:permalinkpage}
<div align="center">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:permalinkpage}
{/block:Video}

{block:Audio}
<div class="audioplayer">{AudioPlayerGrey}</div>{block:Caption}{Caption}{/block:Caption}<p>{block:IndexPage}
                {block:IfShowPostLinks}
      <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}
{/block:IndexPage}
{block:permalinkpage}
    <div class="perma1"><a id="notes{PostID}" href="{Permalink}">{PlayCount} Plays</a></div>
{/block:permalinkpage}
{/block:Audio}

{block:Quote}
<div class="title"><a href="{Permalink}">{Quote}</a></div><p> {block:Source}— {Source}{/block:Source}<p>{block:IndexPage}
                {block:IfShowPostLinks}
       <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}
        {/block:IndexPage}
{/block:Quote}

{block:Link}
<div class="title"><a href="{URL}" class="post_title" target="_blank"> {Name}</a></div> {block:Description}{Description}{/block:Description}<p>{block:IndexPage}
        {block:IfShowPostLinks}
      <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}{/block:IndexPage}
{/block:Link}

{block:Chat}
{block:Title}<div class="title"><a href="{Permalink}">{Title}<p></a></div>{/block:Title} {block:Lines}<div class="{Alt}">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}<p>{block:IndexPage}         
        {block:IfShowPostLinks}
       <div class="perma1">
        {Month} {DayOfMonth}, {Year} With {NoteCountWithLabel} <a href="{Permalink}">× PERMALINK</a> 
         </div>  
        {/block:IfShowPostLinks}{/block:IndexPage}
{/block:Chat}
{block:Answer} <div class="ques"> {Asker} said: {Question}</div>
<i>{Answer}</i>{/block:Answer}

</div>

{block:permalinkpage}{block:NoteCount}
<div class="prmlnk"><div class="perma2">
Posted on: <a href="{Permalink}">{DayOfMonth} {month}, {Year}</a> 
with <a href="{Permalink}">{NoteCount} Notes</a><p>
<i>via</i> {block:RebloggedFrom}
{ReblogParentName} <i> source: </i> {ReblogRootName}
{/block:RebloggedFrom}
 {/block:NoteCount}
{block:PostNotes}
    {PostNotes}
{/block:PostNotes}
</div>

</div>
{/block:permalinkpage}
{/block:Posts}



<div class="clear"></div>
 
</div>
</div>
 
<div class="wrap"><div class="cred"><a href="https://www.snazzyspace.com/">THEME ©</a></div></div>
 
{block:Pagination}
                <ul id="pagination">
                        {block:PreviousPage}
                                <li><a href="{PreviousPage}"></a></li>
                        {/block:PreviousPage}
                        {block:NextPage}
                                <li><a id="nextPage" href="{NextPage}"></a></li>
                        {/block:NextPage}
                </ul>
{/block:Pagination}
<script src="https://static.tumblr.com/psjhflr/bxnmcwj9t/masonry.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script>{/block:IfInfiniteScroll}
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>
 
</div>
 
 

 
{block:iftotopbutton}
<script type="text/javascript">
        $(document).ready(function() {
                /*
                        var defaults = {
                                containerID: 'toTop', // fading element id
                                containerHoverID: 'toTopHover', // fading element hover id
                                scrollSpeed: 1200,
                                easingType: 'linear'
                        };
                        */
                       
                        $().UItoTop({ easingType: 'easeOutQuart' });
                       
                });
</script>
<a href="#" id="toTop" style="display: none; "><span id="toTopHover"></span>To Top</a>{block:iftotopbutton}
 
 
 
</div>
</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Boxxer Theme

 
<head>

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
     <script type="text/javascript" language="javascript">
         $(function () {
             $('#scrlBotm').click(function () {
                 $('html, body').animate({
                     scrollTop: $(document).height()
                 },
                 1500);
                 return false;
             });
 
             $('#scrlTop').click(function () {
                 $('html, body').animate({
                     scrollTop: '0px'
                 },
                 1500);
                 return false;
             });
         });
</script>

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

<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

{block:IndexPage}

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>

<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination', 
nextSelector : 'div#pagination a#nextPage', 
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'https://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
{/block:IndexPage}

<meta name="color:background" content="#ffffff" />
<meta name="color:text" content="#000000" />
<meta name="color:title" content="#ffffff" />
<meta name="color:link" content="#828282" />
<meta name="color:link hover" content="#ebebeb" />
<meta name="color:scrollbar" content="#a3a3a3" />
<meta name="color:header" content="#ebebeb">
<meta name="color:post background" content="#ffffff">
<meta name="color:perma background" content="#ebebeb">
<meta name="color:post border" content="#a3a3a3">


<meta name="if:long description" content="0">
<meta name="if:post border" content="0">

<meta name="text:reblog" content="reblog">
<meta name="text:home" content="refresh">
<meta name="text:message" content="message">
<meta name="text:archive" content="archive">


<style type="text/css">


::-webkit-scrollbar {width: 5px; height: 0px; background:transparent;}
::-webkit-scrollbar-thumb {background: {color:scrollbar}; border-radius:5px;}

iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px; margin: 0 0 0 0; right:4px; -webkit-filter: invert(100%);}

body {
background-color: {color:background};
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:0;

font-size:12px;
font-family:lato;
line-height:14px;
text-transform:none;
color: {color:text};
}

#header{
position:absolute;
top:50px;
padding-top:50px;
padding-bottom:60px;
{block:ifshowbanner}
padding-top:12px;
padding-bottom:80px;
{/block:ifshowbanner}
width:1200px;
height:100px;
{block:iflongdescription}
height:130px;
{/block:iflongdescription}
left:50%;
margin-left:-600px;
text-align:center;
background-color:rgba(255,255,255,0.6);
border-top-left-radius:5px;
border-top-right-radius:5px;
z-index:999;
}

.blogtitle{
font-family:quicksand;
font-weight:700;
font-size:45px;
letter-spacing:2px;
line-height:44px;
text-transform:uppercase;
color:{color:title};
text-shadow:0px 1px 1px black;
}

.description{
font-family:lato;
}

#nav{
word-spacing:10px;
}

#nav a{
font-size:10px;
line-height:24px;
text-transform:uppercase;
display:inline;
font-weight:700;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.speclink{
word-spacing:1px;
}

.answer{
}
.answer img {
width:250px;
height:auto;
{block:permalinkpage}
width:auto;
height:auto;
{/block:permalinkpage}
}

a {
text-decoration:none;
color:{color:link};
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

a:link, a:active, a:visited{
color: {color:link};
}

a:hover{
color: {color:link hover};
}

#center{
margin-top:242px;
{block:iflongdescription}
margin-top:272px;
{/block:iflongdescription}
margin-left: 0px;
width: 100%;
}
 
#content {
position: absolute;    
width:1080px;
left:50%;
margin-left:-600px;
border-top:15px solid {color:post background};
border-left:60px solid {color:post background};
border-right:60px solid {color:post background};
background-color:{color:post background};
float:center;
}

.entry{
margin:10px;
padding:0px;
{block:ifpostborder}
padding:3px;
margin:5px;
border:2px solid {color:post border};
{/block:ifpostborder}
float:left;
height:auto;
overflow:show;
background-color: #trans;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:450px;
height:auto;
{/block:PermalinkPage}
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.title{
font-family:quicksand;    
font-size:17px;
line-height:19px;
text-transform:uppercase;
color: {color:text};
}

blockquote{
padding:0px 0px 0px 3px;
margin:0px 0px 0px 2px;
border-left: 2px solid #ddd;
}

.perma{
position:absolute;
bottom:-20px;
width:100%;
height:25px;
font-size:10px;
text-transform:uppercase;
text-align:center;
line-height:25px;
overflow:hidden;
background:{color:perma background};
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
overflow:hidden;
opacity: 0;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
 
.entry:hover .perma{
bottom:-12px;
opacity:1;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.entry:hover .permalink{
line-height:10px;    
opacity:1;
-webkit-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
 
.permalink{ 
font-family:lato;    
font-size:10px;
line-height:0;
text-transform:uppercase;
text-align:right;
opacity:0;
-webkit-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.notess{
height:500px;
width:500px;
overflow:scroll;
}
.notess img{
display:none;
}
.permaside{
position:absolute;
width:500px;
left:500px;
top:20px;
}

{CustomCSS}
</style>

<title>{title}</title>

<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />

</head>
<body>

<header id="header">
<a href="/"><span class="blogtitle">{Title}</span></a>
<span id="nav">
<br><a href="/">{text:home}</a>
<a href="/ask">{text:message}</a>
<a href="/archive">{text:archive}</a>
{block:HasPages}{block:Pages}<a href="{URL}"><span class="speclink">{Label}</span></a> {/block:Pages}{/block:HasPages}
</span>
<span class="description"><br>{Description}</span class="description">
</header>
 
<div id="center">
<div id="content">
{block:Posts}
<div class="entry">

{block:Text}
{block:Title}<center><span class="title">{Title}</span></center>{/block:Title}<div class="answer">
<div style="margin-left:1px;">{Body}</div></div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Text}

{block:Link}
<center><a href="{URL}"><span class="title">{Name}</span></a></center>
<div style="margin-left:3px;">{block:Description}{Description}{/block:Description}</div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{block:Link}

{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="250px"/></a></div>{LinkCloseTag}
<div class="perma">
<a href="{Permalink}">{NoteCountwithLabel}</a>   |   <a href="{ReblogURL}" target="_blank">{text:reblog}</a><br>  
</div>
{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=450px/>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<center>
{block:IndexPage}{Photoset-250}{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
</center>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:IndexPage}
{/block:Photoset}

{block:Quote}
<div style="margin-left:3px;">
<span class="title">{Quote}</span><br>{Source}
</div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Quote}

{block:Chat}
<div style="margin-left:3px;">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Chat}

{block:Audio}<div style="height:0px;background-color:black;opacity:0.1;width:100%;margin-top:10px;margin-bottom:5px;"></div>
<center>{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}</center>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Audio}

{block:Answer}<img src="{AskerPortraitURL-24}" align="left" z-index: 1; style="padding:2px;"/> {Asker} asked: <br><i>{Question}</i><br><br><div class="answer">{Answer}</div>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:Answer}

{block:Video}
{block:IndexPage}
<center>
{Video-250}</center>
<div class="permalink"><a href="{permalink}">{NoteCountwithLabel}</a></div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}</center>
{/block:PermalinkPage}
{block:Video}

{block:PermalinkPage}
 
<div class="permaside">
{block:PostNotes}
{block:Caption}{Caption}{/block:caption}
<img src="https://static.tumblr.com/twte3d7/qg3lo2lcg/heart_fill_8x7.png"> {block:NoteCount}{NoteCountwithLabel}{/block:NoteCount}<br>
<img src="https://static.tumblr.com/twte3d7/xn4lo2lba/clock_8x8.png"> {Timeago}<br>
<div class="notess">{PostNotes}</div>{/block:PostNotes}
</div>
 
{/block:PermalinkPage}

</div>

{/block:Posts}

{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>

<a id="scrlTop" title="Top" href="#" style="position: fixed; bottom: 5px; right: 30px;"><img src="https://static.tumblr.com/j1tjexd/uSOm6ujd1/totop-grey.png" width="40px"></a>


</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Large Single Column Theme

 
 
 
<html lang="en">
<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# blog: https://ogp.me/ns/blog#">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>
<title>{Title}</title>

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

<meta name="color:text" content="#000000"/>
<meta name="color:link" content="#000000"/>
<meta name="color:hover" content="#ccc"/>
<meta name="color:links background" content="#ccc"/>

<meta name="font:posts" content="Helvetica"/>
<meta name="font:sidebar" content="Helvetica"/>

<meta name="if:animated post load" content="1"/>
<meta name="if:image fade" content="1"/>

<meta name="text:link one" content=""/>
<meta name="text:link one title" content=""/>
<meta name="text:link two" content=""/>
<meta name="text:link two title" content=""/>
<meta name="text:link three" content=""/>
<meta name="text:link three title" content=""/>
<meta name="text:link four" content=""/>
<meta name="text:link four title" content=""/>
<meta name="text:link five" content=""/>
<meta name="text:link five title" content=""/>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical{
background-color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#tumblr_controls{
position:fixed !important;
}
 
.wrapper{width:530px;margin:0px auto;}


#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}

body{
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:0;



font-size: 11px; 
font-family: {font:posts};
line-height:11px;
color: {color:text};
}

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

a:hover{
color: {color:hover};
-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
}

.entry {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
margin:6px 0;
padding: 15px 15px 15px 15px;
background:white;
float:left;
{block:indexpage}
width:500px;
{/block:indexpage}
{block:permalinkpage}
width:500px;
{/block:permalinkpage}
font-family:{font:posts};
font-size: 11px;
line-height:14px;
z-index:9;
{block:ifanimatedpostload}
-webkit-transition-duration:2s;
{/block:ifanimatedpostload} 
}


#sticky {

}
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

.sidebar{ 
font-family:{font:sidebar};
font-size: 10px; 
padding-top:0px;
display:block;
padding: 10px 5px;
width:520px;
}


.perma a {
        display:block;
        background:#f1f1f1;
        margin:0;
        color:#666;
        margin:2px 0;
        text-transform:uppercase;
        padding:2px 10px;
        font-size:9px;
}

.perma {
        background:#f1f1f1;
        padding:10px 0;
}

.links, .info {
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin: 0px auto;
    text-align:center;
    text-transform: uppercase;
    color:#000;
    background:white;
    padding:6px;
    box-shadow:0 0 7px rgba(0,0,0,0.2);
    border-width:10px;
    font-weight:400;
}

.links a {
    margin:2px 10px;
    padding:5px;
    font-size:10px;
    }

.links a:hover {
}

#posts {
display:block;
background: transparent;
}

#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

.img{{block:ifimagefade}opacity:.8;{/block:ifimagefade}{block:ifnotimagefade}opacity:1;{/block:ifnotimagefade}-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}.img:hover{opacity:1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}

.title{
font-family:{font:posts};
font-size: 14px;
text-transform:uppercase;
line-height:15px;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 1px dotted #555555;
}

ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, 
.user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
.notes img{width:10px; position:relative; top:3px;}

<--ses-->
small{font-size: 90%;}

.blogtitle{
    display: block;
    font-size: 35px;
    font-weight: bold;
    height: 52px;
    line-height: 29px;
    margin: 25px auto 0 auto;
    padding: 20px;
    text-align:center;
    background:#f1f1f1;
    text-transform: uppercase;
    border: 10px solid #ffffff;
    color:#ffffff;
    
    opacity:0.85;
    
    
    box-shadow:0 0 7px rgba(0,0,0,0.2), inset 0 0 7px rgba(0,0,0,0.2);
    text-shadow:0 0 7px rgba(0,0,0,0.25);
    border-width:10px;
    font-weight:400;
    height: 50px;
    line-height: 54px;
    
    
    }
}


 


</style>
{block:IndexPage}
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination', 
nextSelector : 'div#pagination a#nextPage', 
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'https://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
});
});
});



$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
    		$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});

</script>

{/block:IndexPage}

<meta name="viewport" content="width=800" />

</head>
<body> 
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>
<div class="wrapper">
<br /><br /><br /><br />
<br /><br /><br /><br />
<div id="sticky-anchor"></div>
<div id="sticky" class="sidebar">
<center>

<div class="blogtitle">{Title}</div>
<div class="info">{description}</div>
<div class="links"><a href="/">home</a>{block:AskEnabled}<a href="/ask">message</a>{/block:AskEnabled}{block:iflinkonetitle}<a href="{text:link one}">{text:link one title}</a>{/block:iflinkonetitle}{block:iflinktwotitle}<a href="{text:link two}">{text:link two title}</a>{/block:iflinktwotitle}{block:iflinkthreetitle}<a href="{text:link three}">{text:link three title}</a>{/block:iflinkthreetitle}{block:iflinkfourtitle}<a href="{text:link four}">{text:link four title}</a>{/block:iflinkfourtitle}{block:iflinkfivetitle}<a href="{text:link five}">{text:link five title}</a>{/block:iflinkfivetitle}</div>
</center>
</div>
<div class="header">

<div class="left">

<div id="posts">

{block:Posts}
<div class="entry">

{block:Text}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
{/block:Text}

{block:Link}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:Link}

{block:Photo}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:IndexPage}<div class="img">{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}</div>{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}


{block:Photoset}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
<a href="/">
{Photoset-500}
</a>
{block:IndexPage}
{/block:IndexPage}
</center>
<center>
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center>
{/block:Photoset}

{block:Quote}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{Quote}</span>
{/block:Quote}

{block:Chat}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{block:TrackName}{TrackName}{/block:TrackName}</a>
<a href="{permalink}">{block:Artist}by {Artist}{/block:Artist}</a>
</div>
{/block:IndexPage}
<div id="audio">{block:AlbumArt}<img src="{AlbumArtURL}" style="width:28px;height:28px;">{/block:AlbumArt}</div><div style="width:270px;float:right;background-color:#E3E3E3;height:29px;margin-top:-32px;">{AudioPlayerGrey}
{block:ExternalAudio}{/block:ExternalAudio}</div>
{/block:Audio}


{block:Video}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
{Video-250}
{/block:IndexPage}
</center>
<center>{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>
{block:Video}

{block:Answer} 
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
</div>
{/block:IndexPage}
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;border-radius:100px;"/>
<b>{Asker}</b>: <b>{Question}</b>{Answer}
{/block:Answer}


{block:PermalinkPage}
{block:Date}
<center>
{TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
<br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} ? {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
{/block:Date}

{/block:PermalinkPage}
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Posts}
</div>
</div> 
<div class="right">
</div> 
<div class="footer">
<br>
</div>
</div>
</body>
</html>
<div style="position:fixed;right:0px;bottom:-425px;">
<---DONT REMOVE---->
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}">??</a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}">??</a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}</div>
</div>		

</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys 3 Col Theme

 
 
<html lang="en">
<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# blog: https://ogp.me/ns/blog#">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>
<title>{Title}</title>

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

<meta name="color:text" content="#000000"/>
<meta name="color:link" content="#000000"/>
<meta name="color:hover" content="#ccc"/>
<meta name="color:links background" content="#ccc"/>

<meta name="font:posts" content="Helvetica"/>
<meta name="font:sidebar" content="Helvetica"/>

<meta name="if:animated post load" content="1"/>
<meta name="if:image fade" content="1"/>

<meta name="text:link one" content=""/>
<meta name="text:link one title" content=""/>
<meta name="text:link two" content=""/>
<meta name="text:link two title" content=""/>
<meta name="text:link three" content=""/>
<meta name="text:link three title" content=""/>
<meta name="text:link four" content=""/>
<meta name="text:link four title" content=""/>
<meta name="text:link five" content=""/>
<meta name="text:link five title" content=""/>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical{
background-color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#tumblr_controls{
position:fixed !important;
}
 
.wrapper{width:1028px;margin:0px auto;}


#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}

body{
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:0;


font-size: 11px; 
font-family: {font:posts};
line-height:11px;
color: {color:text};
}

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

a:hover{
color: {color:hover};
-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
}

.entry {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
margin:6px;
padding: 15px 15px 15px 15px;
background:white;
float:left;
{block:indexpage}
width:300px;
{/block:indexpage}
{block:permalinkpage}
width:500px;
{/block:permalinkpage}
font-family:{font:posts};
font-size: 11px;
line-height:14px;
z-index:9;
{block:ifanimatedpostload}
-webkit-transition-duration:2s;
{/block:ifanimatedpostload} 
}


#sticky {

}
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

.sidebar{ 
font-family:{font:sidebar};
font-size: 10px; 
padding-top:0px;
display:block;
padding: 10px 5px;
width:1018px;
}


.perma a {
        display:block;
        background:#f1f1f1;
        margin:0;
        color:#666;
        margin:2px 0;
        text-transform:uppercase;
        padding:2px 10px;
        font-size:9px;
}

.perma {
        background:#f1f1f1;
        padding:10px 0;
}

.links, .info {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    margin: 5px auto;
    text-align:center;
    text-transform: uppercase;
    color:#000;
    background:white;
    padding:6px;
    opacity:0.85;
    box-shadow:0 0 7px rgba(0,0,0,0.2);
    border-width:10px;
    font-weight:400;
}

.links a {
    margin:2px 10px;
    padding:5px;
    font-size:10px;
    }

.links a:hover {
}

#posts {
display:block;
background: transparent;
}

#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

.img{{block:ifimagefade}opacity:.8;{/block:ifimagefade}{block:ifnotimagefade}opacity:1;{/block:ifnotimagefade}-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}.img:hover{opacity:1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}

.title{
font-family:{font:posts};
font-size: 14px;
text-transform:uppercase;
line-height:15px;
font-weight: ;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 1px dotted #555555;
}

ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, 
.user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
.notes img{width:10px; position:relative; top:3px;}

<--ses-->
small{font-size: 90%;}

.blogtitle{
    display: inline-block;
    font-size: 70px;
    font-weight: bold;
    height: 52px;
    line-height: 49px;
    margin: 25px auto;
    padding: 40px;
    text-align:center;
    text-transform: uppercase;
    border: 10px solid #ffffff;
    color:#ffffff;
    
    opacity:0.85;
    
    
    box-shadow:0 0 7px rgba(0,0,0,0.2), inset 0 0 7px rgba(0,0,0,0.2);
    text-shadow:0 0 7px rgba(0,0,0,0.25);
    border-width:10px;
    font-weight:400;
    height: 50px;
    line-height: 54px;
    
    
    }
}


 


</style>
{block:IndexPage}
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination', 
nextSelector : 'div#pagination a#nextPage', 
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'https://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
});
});
});



$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});

</script>

{/block:IndexPage}

<meta name="viewport" content="width=800" />

</head>
<body> 
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>
<div class="wrapper">
<br /><br /><br /><br />
<br /><br /><br /><br />
<div id="sticky-anchor"></div>
<div id="sticky" class="sidebar">
<center>

<div class="blogtitle">{Title}</div><br />
<div class="info">{description}</div><br />
<div class="links"><a href="/">home</a>{block:AskEnabled}<a href="/ask">message</a>{/block:AskEnabled}{block:iflinkonetitle}<a href="{text:link one}">{text:link one title}</a>{/block:iflinkonetitle}{block:iflinktwotitle}<a href="{text:link two}">{text:link two title}</a>{/block:iflinktwotitle}{block:iflinkthreetitle}<a href="{text:link three}">{text:link three title}</a>{/block:iflinkthreetitle}{block:iflinkfourtitle}<a href="{text:link four}">{text:link four title}</a>{/block:iflinkfourtitle}{block:iflinkfivetitle}<a href="{text:link five}">{text:link five title}</a>{/block:iflinkfivetitle}</div><br />
</center>
</div>
<div class="header">

<div class="left">

<div id="posts">

{block:Posts}
<div class="entry">

{block:Text}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
{/block:Text}

{block:Link}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:Link}

{block:Photo}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:IndexPage}<div class="img">{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="300"/></a>{LinkCloseTag}</div>{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500px"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}


{block:Photoset}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
<a href="/">
{Photoset-250}
</a>
{block:IndexPage}
{/block:IndexPage}
</center>
<center>
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center>
{/block:Photoset}

{block:Quote}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{Quote}</span>
{/block:Quote}

{block:Chat}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{block:TrackName}{TrackName}{/block:TrackName}</a>
<a href="{permalink}">{block:Artist}by {Artist}{/block:Artist}</a>
</div>
{/block:IndexPage}
<div id="audio">{block:AlbumArt}<img src="{AlbumArtURL}" style="width:28px;height:28px;">{/block:AlbumArt}</div><div style="width:270px;float:right;background-color:#E3E3E3;height:29px;margin-top:-32px;">{AudioPlayerGrey}
{block:ExternalAudio}{/block:ExternalAudio}</div>
{/block:Audio}


{block:Video}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
{Video-250}
{/block:IndexPage}
</center>
<center>{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>
{block:Video}

{block:Answer} 
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
</div>
{/block:IndexPage}
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;border-radius:100px;"/>
<b>{Asker}</b>: <b>{Question}</b>{Answer}
{/block:Answer}


{block:PermalinkPage}
{block:Date}
<center>
{TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
<br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} � {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
{/block:Date}

{/block:PermalinkPage}
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Posts}
</div>
</div> 
<div class="right">
</div> 
<div class="footer">
<br>
</div>
</div>
</body>
</html>
<div style="position:fixed;right:0px;bottom:-425px;">
<---DONT REMOVE---->
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}">�?</a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}">?�</a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}</div>
</div>		

</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Two Box Theme

 
<html lang="en">
<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# blog: https://ogp.me/ns/blog#">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>
<title>{Title}</title>

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

<meta name="color:text" content="#000000"/>
<meta name="color:link" content="#000000"/>
<meta name="color:hover" content="#ccc"/>
<meta name="color:links background" content="#ccc"/>

<meta name="font:posts" content="Helvetica"/>
<meta name="font:sidebar" content="Helvetica"/>

<meta name="if:animated post load" content="1"/>
<meta name="if:image fade" content="1"/>

<meta name="text:link one" content=""/>
<meta name="text:link one title" content=""/>
<meta name="text:link two" content=""/>
<meta name="text:link two title" content=""/>
<meta name="text:link three" content=""/>
<meta name="text:link three title" content=""/>
<meta name="text:link four" content=""/>
<meta name="text:link four title" content=""/>
<meta name="text:link five" content=""/>
<meta name="text:link five title" content=""/>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical{
background-color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#tumblr_controls{
position:fixed !important;
}
 
.wrapper{width:1028px;margin:0px auto;}


#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}

body{
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:0;

font-size: 11px; 
font-family: {font:posts};
line-height:11px;
color: {color:text};
}

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

a:hover{
color: {color:hover};
-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
}

.entry {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
margin:30px;
padding: 12px;
background:white;
float:left;
{block:indexpage}
width:300px;
{/block:indexpage}
{block:permalinkpage}
width:500px;
{/block:permalinkpage}
font-family:{font:posts};
font-size: 11px;
line-height:14px;
z-index:9;
{block:ifanimatedpostload}
-webkit-transition-duration:2s;
{/block:ifanimatedpostload} 
}


#sticky {

}
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

.sidebar{ 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
background-color:#fff;
float:left;
font-family:{font:sidebar};
font-size: 10px; 
padding-top:0px;
width: 250px;
padding: 10px 5px;
}


.perma a {
        display:block;
        background:#f1f1f1;
        margin:0;
        color:#666;
        margin:2px 0;
        text-transform:uppercase;
        padding:2px 10px;
        font-size:9px;
}

.perma {
        margin-bottom:15px;
}

.links a {
    display:block;
    margin:2px 0;
    padding:5px;
    font-size:15px;
    }

.links a:hover {
        background:#f1f1f1;
}

#posts {
width: 768px;
background: transparent;
float:right;
}

#infscr-loading{
bottom: -70px;
position: absolute;
left: 50%;
margin-left:-8px;
width:16px;
height:11px;
overflow:hidden;
margin-bottom: 50px;
}

.img{{block:ifimagefade}opacity:.8;{/block:ifimagefade}{block:ifnotimagefade}opacity:1;{/block:ifnotimagefade}-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}.img:hover{opacity:1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}

.title{
font-family:{font:posts};
font-size: 14px;
text-transform:uppercase;
line-height:15px;
color: ; 
font-weight: ;
}

blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 10px;
border-left: 1px dotted #555555;
}

ul, ol, li{list-style:none; margin:0px; padding:0px;}
.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, 
.user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
.notes img{width:10px; position:relative; top:3px;}

<--ses-->
small{font-size: 90%;}

.blogtitle{
font-family: {font:posts};
font-size:40px;
font-weight:bold;
color: {color:link};
line-height: 40px;
text-shadow:0 0 black;
-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
}


 


</style>
{block:IndexPage}
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function () {
var $content = $('#posts');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination', 
nextSelector : 'div#pagination a#nextPage', 
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'https://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
});
});
});



$(function() {
    $(window).scroll(function() {
    	if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});

</script>

{/block:IndexPage}

<meta name="viewport" content="width=800" />

</head>
<body> 
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>
<div class="wrapper">
<br /><br /><br /><br />
<br /><br /><br /><br />
<div id="sticky-anchor"></div>
<div id="sticky" class="sidebar">
<center>

<div class="blogtitle"><a href="/">{Title}</a></div>
<div class="info">{description}</div>
<div class="links"><a href="/">home</a>{block:AskEnabled}<a href="/ask">message</a>{/block:AskEnabled}{block:iflinkonetitle}<a href="{text:link one}">{text:link one title}</a>{/block:iflinkonetitle}{block:iflinktwotitle}<a href="{text:link two}">{text:link two title}</a>{/block:iflinktwotitle}{block:iflinkthreetitle}<a href="{text:link three}">{text:link three title}</a>{/block:iflinkthreetitle}{block:iflinkfourtitle}<a href="{text:link four}">{text:link four title}</a>{/block:iflinkfourtitle}{block:iflinkfivetitle}<a href="{text:link five}">{text:link five title}</a>{/block:iflinkfivetitle}</div>
</center>
</div>
<div class="header">

<div class="left">

<div id="posts">

{block:Posts}
<div class="entry">

{block:Text}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
{/block:Text}

{block:Link}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
{block:Description}{Description}{/block:Description}
{block:Link}

{block:Photo}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:IndexPage}<div class="img">{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="300"/></a>{LinkCloseTag}</div>{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500px"/></a>{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}


{block:Photoset}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
<a href="/">
{Photoset-250}
</a>
{block:IndexPage}
{/block:IndexPage}
</center>
<center>
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}</center>
{/block:Photoset}

{block:Quote}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{Quote}</span>
{/block:Quote}

{block:Chat}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Audio}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{block:TrackName}{TrackName}{/block:TrackName}</a>
<a href="{permalink}">{block:Artist}by {Artist}{/block:Artist}</a>
</div>
{/block:IndexPage}
<div id="audio">{block:AlbumArt}<img src="{AlbumArtURL}" style="width:28px;height:28px;">{/block:AlbumArt}</div><div style="width:270px;float:right;background-color:#E3E3E3;height:29px;margin-top:-32px;">{AudioPlayerGrey}
{block:ExternalAudio}{/block:ExternalAudio}</div>
{/block:Audio}


{block:Video}
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
<a href="{reblogurl}" target="_blank">reblog</a>
</div>
{/block:IndexPage}
<center>
{block:IndexPage} 
{Video-250}
{/block:IndexPage}
</center>
<center>{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>
{block:Video}

{block:Answer} 
{block:IndexPage}
<div class="perma"><a href="{permalink}">{notecountwithlabel}</a>
</div>
{/block:IndexPage}
<img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;border-radius:100px;"/>
<b>{Asker}</b>: <b>{Question}</b>{Answer}
{/block:Answer}


{block:PermalinkPage}
{block:Date}
<center>
{TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
<br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} · {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
{/block:Date}

{/block:PermalinkPage}
{block:PostNotes}{PostNotes}{/block:PostNotes}
</div>
{/block:Posts}
</div>
</div> 
<div class="right">
</div> 
<div class="footer">
<br>
</div>
</div>
</body>
</html>
<div style="position:fixed;right:0px;bottom:-425px;">
<---DONT REMOVE---->
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"> →</a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}">← </a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}</div>
</div>		

</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Circles Theme

 
<html>
    <head>
        <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}

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />
<meta name="color:Title" content="#ffffff"/>
<meta name="color:Shadow" content="#000000">
<meta name="color:Description Text" content="#ffffff">
<meta name="color:Text" content="#000000"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Posts Background" content="#ffffff"/>

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>


    <style type="text/css">
    
#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}


        body {

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




    		text-align:center;

			font:11px 'tahoma';
            
			color:{color:Text};

		}

#container {
        margin:0 auto;
        width:1100px;
}


a, a:active, a:visited, a:link {
        color:{color:Link};
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:{color:Link};
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        padding:5px;
        width:250px;
        margin:5px 5px 5px 0;
        position:relative;

}

.postimg {
        text-align:left;
        width:250px;
        height:250px;
        border-radius:125px;
        margin:5px 5px 5px 0;
        position:relative;

}


.postimg img {
  
        width:250px;
        border-radius:125px;
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:{color:Posts Background};
        padding:5px;
        width:490px;
        margin:5px 0;
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        opacity:0.8;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
            }
            
            .post img {
}
{/block:PermalinkPage}





.postCount {
        background:{color:Posts Background};
        color:{color:Text};
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:{color:Link};
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        

.text, .quote, .link, .chats  {
        background:{color:Posts Background};
                -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        border-radius:125px;
        width:180px;
        height:100px;
        padding:35px 35px 110px 35px;
        } 



        

        
.post:hover #reblog, .postimg:hover #reblog{
    border-radius:125px;
    width:250px;
    height:250px;
margin:0 0 0 0;
overflow:hidden;
display:block;
opacity:1;-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;
}

.postimg:hover {
        border-radius:125px;
        -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;
        }


#reblog{
padding:20px 0 0 0;
margin:800px 0 0 0;
text-align:center;
position:absolute;
width:250px;
height:250px;
border-radius:125px;
top:0;
left:0;
opacity:0;-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;}

        
                
                #reblog a {
                        color:{color:Link};
                        border-radius:5px;
                        text-transform:lowercase;
                        font-family: 'Oswald', cursive;
                        font-size:15px;
                        display:block;
                        text-align:center;
                        padding:3px 20px;
                        background:url('https://www.snazzyspace.com/images/fadeWhite.png') repeat transparent;
                        font-weight:normal;
                        margin:5px 60px;
                        }
  
      
      

      

.post:hover #lighter{
        opacity:0.9;
        display:block;
-moz-box-shadow: inset 0 0 150px #000;
-webkit-box-shadow: inset 0 0 150px #000;
box-shadow: inset 0 0 150px #000;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;transition: all 1s ease-out;
        }
        


.quoteo {
        padding:5px 5px 5px 5px;
        margin:0;
}

.source {
            font-weight:bold;
            font-size:10px;
            padding:5px 5px 30px 5px;
            }
            
            .source:before {
                    content:'---';
                    padding:0 5px;
            }


#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #fff; 
  color: #000;
      font-family: 'Oswald', cursive;
  font-size:20px;
  text-transform:lowercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        width:1100px;
        margin:0 0 10px 0;
        padding:5px;
        text-align:center;
}

#holder {
        margin:0 auto;
        width:1100px;
}

h1 {
    display:block;
    padding:5px;
    margin:0;
    font-family: 'Lobster', cursive;
    font-size:120px;
    color:{color:Title};
            text-shadow:1px 1px 1px {color:Shadow};
        text-transform:lowercase;
}

#descr {
            padding:5px;
            font-weight:normal;
            font-size:13px;
            text-transform:lowercase;
            color:{color:Description Text};
            text-shadow:1px 1px 1px {color:Shadow};
}

#navy {
        padding:5px;
}
    #navy a, #navy a:active, #navy a:visited {
            padding:0 10px;
            font-weight:normal;
            color:{color:Link};
    }
    
    #navy a:after {
            content:'x';
            font-weight:bold;
            font-size:10px;
            margin:0 5px 0 20px;
            }
    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>


<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
<h1>{Title}</h1>
        {block:Description}
            <div id="descr">
                {Description}
            </div>
        {/block:Description}

   <div id="navy">
   <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
               
                        {block:Title}
                            <h3 class="source"><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box postimg photo" {block:IndexPage}style="background:url('{PhotoURL-250}') repeat transparent; background-position:center center;"{/block:IndexPage}>
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">view notes ({NoteCount})</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">reblog</a></div>
    
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                                    
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     <p class="quoteo">
                        "{Quote}"
                    </p>

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                    <p class="source">
                        <a href="{URL}" {Target}>{Name}</a>
                        </p>

                        {block:Description}
                            <div class="quoteo">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chats">
                     {block:IndexPage}
    
                     {/block:IndexPage}
                        {block:Title}
                            <h3 class="source"><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul>
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}

                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                                
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} <div align="center">{block:PostNotes}{PostNotes}{/block:PostNotes} </div>{/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>
















       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Side Grid Theme

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"><html>
<head>

<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}

<meta name="color:text" content="#000000"/>
<meta name="color:links" content="#000000"/>
<meta name="color:link hover" content="#dddddd"/>
<meta name="color:background" content="#ffffff"/>

<meta name="if:endless scroll" content="0" />
<meta name="if:bigger entry" content="0" />
<meta name="if:show captions" content="0"/>

<meta name="text:blogtitle size" content="18" />
<meta name="text:text size" content="12" />

<meta name="font:body" content="baskerville" />
<meta name="font:title" content="Baskerville" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
{block:ifendlessscroll}<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>{/block:ifendlessscroll}



<style type="text/css">

iframe#tumblr_controls {
top: 0% !important;
right:0% !important; 
position: absolute !important;}

body { 

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;



background-color: {color:background};font-family: {font:body};font-size: {text:text size}px;color: {color:Text};line-height:15px;text-align: justify;}

a:hover {color: {color:link hover};-webkit-transition-duration: .5s;}
a {color: {color:Links};text-decoration: none;}

.caption {margin-top:5px;}
.title {font-size:{text:blogtitle size}px; text-transform:uppercase;}
.content{ width:550px;{block:ifbiggerentry}width:850px;{/block:ifbiggerentry}margin-top:20px;margin-left:20px;{block:permalinkpage}width:550px;{/block:permalinkpage}}


.post{{block:indexpage}width:250px;{block:ifbiggerentry}width:400px;{/block:ifbiggerentry}{/block:indexpage}{block:permalinkpage}width:400px{/block:permalinkpage} margin:5px;font-size:{text:text size}px;position:absolute;}

::-webkit-scrollbar-thumb:vertical { background-color:{color:Text}; height:100px; }
::-webkit-scrollbar-thumb:horizontal { background-color:{color:background}; height:10px !important; }
::-webkit-scrollbar { height:10px; width:10px; background-color:{color:background}; }

.post img {{block:indexpage}width:250px; {block:ifbiggerentry}width:400px;{/block:ifbiggerentry}{/block:indexpage}}
.audio {background-color:#000000;width:250px;{block:ifbiggerentry} width:400px;{/block:ifbiggerentry}}


.permalink {text-align:right;opacity:1;} 

.notetitle {padding-left:14px;text-transform:none;padding-bottom:10px;}
.notes {margin-top:-4px; margin-bottom:25px; padding-left:15px;}
ol.notes li.note {padding:5px;}
ol.notes {max-height: 250px;width:470px; overflow: auto;}
img.avatar {display: none;}


.blogtitle {font-size:{text:blogtitle size}px; font-family:{font:title}; margin-bottom:10px; text-transform:uppercase;line-height:15px;text-align:left;width:100px;
}.header { background:white; padding:10px; left:600px;{block:ifbiggerentry}left:880px;{/block:ifbiggerentry}bottom:30px; position:fixed;width:250px;{block:permalinkpage}left:600px;{/block:permalinkpage}}.information {padding-bottom:10px;}

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {opacity:0;}

.white {
        background:white;
        padding:5px;
        }

.navigation{{block:ifendlessscroll}display:none;{/block:ifendlessscroll}{block:ifnotendlessscroll}text-align:left;{/block:ifnotendlessscroll}}
{CustomCSS}
</style>

<script>
$(function(){
var $container = $('.content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.post'
});
});
$container.infinitescroll({
navSelector : '.navigation', 
nextSelector : '.navigation a#next', 
itemSelector : '.post', 
animate:false,
donetext: "No more posts to load" ,},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems ); 
});
});
});
</script>
</head>
<body>

<div class="header"><div align="left">
<a href="/ask">message</a>  {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>  {/block:Pages}{/block:HasPages}<a href="https://www.snazzyspace.com">theme</a><div class="information">{description}</div>
<div class="blogtitle"><a href="/">{Title}</a></div><div class="navigation">{block:Pagination}{block:NextPage}<p id="page_nav"><a href="{NextPage}" id="next">older</a>{/block:NextPage}{block:PreviousPage}<a href="{PreviousPage}"> / newer</a></p>{/block:PreviousPage}{/block:Pagination}</div></div>


</div>

<div class="content">
{block:Posts}


{block:Text}
<div class="post white">
{block:Title}<div class="title">{Title}</div>{/block:Title}
{Body}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}

{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 

</div>
{/block:Text}


{block:Photo}
<div class="post">

{block:IndexPage}
<a href="{Permalink}">
<img src="{PhotoURL-250}" alt="{PhotoAlt}" />
{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}{/block:IndexPage}</a>

{block:PermalinkPage}
<img src="{PhotoURL-400}" alt="{PhotoAlt}" width="500"/><div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage}


</div>
{/block:Photo}


{block:Photoset}
<div class="post">
{block:ifnotbiggerentry}{Photoset-250}{/block:ifnotbiggerentry}
{block:ifbiggerentry}{Photoset-400}{/block:ifbiggerentry}
{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
{/block:IndexPage}

{block:IndexPage}<div class="permalink"><a href="{Permalink}"><br>{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}

{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>

{/block:Photoset}

{block:Quote}
<div class="post white">
{Quote}{block:Source}<br>written by <i>{Source}</i>{/block:Source}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes white">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Quote}

{block:Link}
<div class="post white">
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}
</div>
{/block:Link}

{block:Chat}
<div class="post white">
{block:Title}<b>{Title}</b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> "{Line}"<br>{/block:Label}{/block:Lines}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Chat}

{block:Video}
<div class="post">
{block:ifnotbiggerentry}{Video-250}{/block:ifnotbiggerentry}
{block:ifbiggerentry}{Video-400}{/block:ifbiggerentry}

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
</div>{/block:Video}

{block:Audio}
<div class="post">
<div class="audio">
{AudioPlayerBlack}</div>
{Caption}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a>
</div>{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag} </a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Audio}




{/block:Posts}

</div>


    
      
</body>
</html>       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Wide Two Column Theme

 
 
<html>
    <head>
        <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}

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>

    <style type="text/css">
    
#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}


        body {

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




    		text-align:center;
font-size:12px;
font-family: 'Open Sans', sans-serif;
            
			color:000;

		}

#container {
        margin:0 auto;
        width:1100px;
}


a, a:active, a:visited, a:link {
        color:#737373;
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
        position:relative;

}

.post img {
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:#fff;
        padding:5px;
        width:490px;
        margin:5px 0;
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        opacity:0.8;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
            }
            
            .post img {
}
{/block:PermalinkPage}





.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#707070;
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        

.text, .quote, .link, .chats  {
        background:#fff;
                -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        } 



        

        
.post:hover #reblog{
margin:0 0 0 0;
display:block;
opacity:1;-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;
}



#reblog{
padding:20px 0 0 0;
margin:0 0 0 0;
text-align:center;
position:absolute;
width:510px;
top:0;
left:0;
opacity:0;-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;}

        
                
                #reblog a {
    display:block;
    padding:5px;
    margin:0;
font-family: 'Open Sans', sans-serif;
    font-size:60px;
    color:#fff;
    font-weight:800;
        text-shadow: 1px 1px 1px #666;
        text-transform:lowercase;
        letter-spacing:-2px;
                        }
  
      
      

      
#lighter {
        width:510px;
        cursor:pointer;
        position:absolute;
        top:0;
        background:#fff;
        left:0;
        opacity:0;
        height:800px;
}

.post:hover #lighter {
        opacity:0.3;
        display:block;
-moz-box-shadow: inset 0 0 150px #000;
-webkit-box-shadow: inset 0 0 150px #000;
box-shadow: inset 0 0 150px #000;
        }




#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
  color: #fff;
font-family: 'Open Sans', sans-serif;
  font-size:20px;
  text-transform:lowercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        width:1100px;
        margin:0 0 10px 0;
        padding:5px;
        text-align:center;
}

#holder {
        margin:0 auto;
        width:1100px;
}

h1 {
    display:block;
    padding:5px;
    margin:0;
font-family: 'Open Sans', sans-serif;
    font-size:120px;
    color:#fff;
    font-weight:800;
        text-shadow: 1px 1px 1px #666;
        text-transform:lowercase;
        letter-spacing:-1px;
}

#descr {
            padding:5px;
            font-weight:normal;
            font-size:13px;
            text-transform:uppercase;
            color:#fff;
            text-shadow:1px 1px 1px #666;
}

#navy {
        padding:5px;
}
    #navy a, #navy a:active, #navy a:visited {
            padding:0 10px;
            font-weight:normal;
            color:#fff;
            text-shadow:1px 1px 1px #666;
    }
    #navy a:hover {
            text-decoration:underline;
    }
    #navy a:after {
            content:'x';
            font-size:10px;
            margin:0 5px 0 20px;
            text-shadow:1px 1px 1px #666;
            }
    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>


<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
<h1>{Title}</h1>
        {block:Description}
            <div id="descr">
                {Description}
            </div>
        {/block:Description}

   <div id="navy">
   <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
                     {/block:IndexPage}                
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box shake post photo">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
    
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>   
                     {/block:IndexPage}                                        
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
                     {/block:IndexPage}                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                     {block:IndexPage}

                     {/block:IndexPage}                                      
                        <a href="{URL}" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chats">
                     {block:IndexPage}
    
                     {/block:IndexPage}
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul>
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}

                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                                
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes} {/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>
















       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Standard Theme

 
 
 <html>
<head> <title>{block:PostTitle}{PostTitle} -{/block:PostTitle} {Title}</title>
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />
</head>

<link href='https://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>

<style type="text/css">
    body {
		color: #000000;
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;


		font:10px Helvetica, Arial, Tahoma, Verdana;
		margin: 0;
		text-align:center;    
	}


    #title {
        	width:678px;
			font-size:160%;
			text-align:left;
			margin:0 auto;
		}

	a, a:visited, a:active {
			color: #191919;
			text-decoration: none;
	}

	a:hover {
			color: #666;
			text-decoration: none;
	}
    
	a img {
			border: 0;
	}



	ul, ol, blockquote {
		padding-left: 0.50em;
		margin-left: 2.5em;
	}

blockquote {
display: block;
}

ul {
list-style: square;

}

ol {
list-style: none;

}
    
a img{
border: 0;

}   
ol.notes {
	 padding:1px;margin:1px 1px;list-style-type:none;border-bottom:solid 1px #ccc;text-align:left; font-size:10px;}



      ol.notes li.note {border-top:solid 0px #ccc;padding:5px; }



      ol.notes li.note img.avatar {vertical-align:-4px;margin-right:10px;width:16px;height:16px;}



      ol.notes li.note span.action {font-weight:normal;}



      ol.notes li.note .answer_content {font-weight:normal;}



      ol.notes li.note blockquote {border-left:2px solid #eee;padding:4px 10px;margin:10px 0px 0px 25px;}



      ol.notes li.note blockquote a {text-decoration: none;}

			


.speechbubble {
margin-right: .2em;
      
}
   
/* BASIC LAYOUT */
#contain{
	margin: 0 auto;
width: 678px;





      
}


.navlist ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.navlist ul li {
	padding:0;
	margin:0;
}

.navlist ul li a, .navlist ul li a:visited, .navlist ul li a:active {
	display:block;
	font-size:9px;
    text-transform:uppercase;
    width:128px;
	padding:5px;
	color:#000;
    margin:5px 0;
               background:white;
            border:5px solid white;
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
box-shadow: 0 1px 10px rgba(0,0,0,.3);
        
	}
	
	.navlist ul li a:hover {
		text-decoration:underline;}
	
#footer-container {
margin: 0 auto;
width: 678px;
}

/* SIDEBAR */
#leftsidebar {
float: left;
margin:0 50px 0 0;
width:148px;
text-align:center;
position:fixed;
color:#000;
   
}

#leftsidebar img {
        border:10px solid white;
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
box-shadow: 0 1px 10px rgba(0,0,0,.3);
        }


#leftsidebar p {
font-size: 9px;
line-height:13px;
display:block;
width:118px;
padding:5px;
color:black;
border:10px solid white;
background:white;
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
box-shadow: 0 1px 10px rgba(0,0,0,.3);
}



/* FOOTER */

#footer-container {
margin: 0;
font-size: .9em;
padding: 10px;
border-top: 0px solid #333;
width: 100%;

}



/* CONTENT */
    
#content {
padding:10px;
text-align:left;
margin-left:158px;
width: 500px;
float:left;
background:#fff;
    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
box-shadow: 0 1px 10px rgba(0,0,0,.3);
      
}

#content .date {
color: #191919;
display: block;
font-size: 11.3px;
margin-bottom: 3px;
margin-right: 15px;
padding-bottom:10px;
margin-top:-4px;    
}
#content .date a{
color: #191919;}

#content h2 a{
text-decoration: none;
    
}
    
.reblog {
display: block;
margin-bottom: 0px;
      
}

#toTop {
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}
    
.post-footer {
display: block;
color: #191919;
font-size: .8em;
text-align: right;
padding:1px 0 10px 0;
margin:5px 0;
border-bottom:1px dotted #666;      
}

.post-footer span {
    padding:5px;
    font-size:10px;
    color:#000;
    margin:5px 5px;
}


    

.regular, .quote, .link, .photo, .conversation, .video, .audio {
margin: 0 0 0px;

}



#content h5 {
color: #191919;
font-size: 25px;
font-weight: bold;
padding:5px;
margin:0;



}

.link .arrow{
margin-left: .2em;

}

.link h5 a {
text-decoration: none;

}

.link h5 a:hover {
        text-decoration:underline;
        }
    
.quote .words {
color: #191919;
font-size: 25px;
text-align: left;
display: block;
text-transform:lowercase;
font-weight:bold;
      
}

.quote .source {
display: block;
margin-top: 1em;
padding: 0;

}

.link .link-body, .quote .quote-body {
margin-top: 1em;
margin-bottom: 1em;

}
    
.quote .arrow, .reblog .arrow {
margin-right: .2em;

}

.conversation ul {
list-style: none;
padding: 0 1em 0 0;
margin-left: 0;
            
}
    
conversation ul li{
list-style: none;
padding: 0 1em;
            
}

.conversation ul li .person {
color: #191919;
font-weight: bold;
margin-right: 1em;

}

.video .embed {
width: 500px;

}
    

    
.caption {
margin: .5em 0 1em 0;
    
}

.clear {
padding:0px;

}
.desc {
	text-align:left;
	font-size:10px;
	color:#535353;
}
#description{
	
	text-align:left;
	font-size:7px;
	color:#535353;
}
.tittle {
	color:#191919;}
#clearfooter { 
clear:both; 
height:115px; 
}
#foot {
	width:300px;
	height:41px;
	float:right;
	margin-top:0px;
margin-right: 13px;
background-color:none;

padding-top:10px;

padding-bottom:0px;

}
#foot .cred{
	width:300px;
height:21px;
font-size:10px;
color:#686868;
padding-top:5px;
padding-left:17px;
padding-bottom:3px;

}


  #foot a{
	  color:#191919;
	  font-weight:700;
  }
  
  h1 {
      font-family: 'Days One', sans-serif;
			color:white;
			text-transform:uppercase;
            font-size:55px;
			font-weight:bold;
			text-shadow:black 1px 1px 1px;
            padding:10px 0;
            margin:5px 0;
			}
    
    .postphoto img {
            width:500px;
            }
</style>
{CustomCSS}

</style>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

</head>

<body>


<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>
		<div id="title">
				<h1>{Title}.</h1>
		</div>

<div id="contain">

<div id="leftsidebar">
<a href="/"><img src="{PortraitURL-128}" width="128" height="128" alt="{Title}" border="0" /> </a>

     
<div class="navlist">

        {block:Description}
            <p class="desc">{Description}</p>
        {/block:Description}
        

<ul>

<li class="first"><a href="/">Home</a></li>

{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}

         
<li><a href="/archive" id="archives">Archives</a></li>

<li><a href="/random">Random</a></li> 


{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}

        {block:HasPages}{block:Pages}<li><a href="{URL}">
        {Label}</a></li>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <li><a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a></li>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <li><a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a></li>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <li><a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a></li>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <li><a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a></li>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <li><a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a></li>
        {/block:ifLink5Title}

<li><a href="https://www.snazzyspace.com/" id="theme">Theme</a></li>


				{block:HasPages}
					{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages} 
				{/block:HasPages}
				

</ul>
        

		
</div> <!-- end navlist -->
      
</div> <!-- end leftsidebar div -->
    
<div id="content">
{block:Posts}

      
{block:Regular}
<div class="regular">
{block:Title}<h5>{Title}</h5>{/block:Title}
{Body}
{/block:Regular}
      
{block:Quote}
<div class="quote box">
<div class="quote-body">
<span class="words">{Quote}</span>

</div>
{/block:Quote}

{block:Link}
<div class="link box">
<h5><a href="{URL}" {Target}>{Name}</a></h5>
{/block:Link}
      
{block:Conversation}
<div class="conversation box">
{block:Title}<h5>{Title}</h5>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="person">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>
{/block:Lines}
</ul>
{/block:Conversation}

{block:Photo}
<div class="photo box">
<span class="postphoto">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</span>


{/block:Photo}

{block:Video}
<div class="video box">
<div class="embed">{Video-500}</div>
{/block:Video}
      
{block:Audio}
<div class="audio box">
{AudioPlayerGrey}
{/block:Audio}
      

      
<div class="post-footer">
        

<span>{TimeAgo}


                                {block:NoteCount} with <a title="{NoteCountWithLabel}" href="{Permalink}">{NoteCountWithLabel}</a></span>{/block:NoteCount}<span><a href="{ReblogURL}" title="Reblog">Reblog</a></span>

          


          
          
</div> <!-- end post footer -->
     
      
{block:Permalink}

<!-- Disqus Code Here -->
 {PostNotes}
      
{/block:Permalink}
   
</div> <!-- end single post -->    

     
{/block:Posts}
      
    
</div> <!-- end content div -->

 
<div id="foot"><div class="cred">More themes at <a href="https://www.snazzyspace.com">Tumblr Themes</a></div></div>
 <!-- end containing div --></div></div>

         {block:IndexPage}
         
<script type="text/javascript" src="https://codysherman.com/tools/infinite-scrolling/code"></script>
 {/block:IndexPage}

 

</body>

</html>







       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Three Column Grid Theme

 
 
<html>
    <head>
        <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}

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />

<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>

    <style type="text/css">
    
#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}


        body {
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




			text-align:center;

			font:11px 'tahoma';
            
			color:000;

		}

#container {
        margin:0 auto;
        width:795px;
}


a, a:active, a:visited, a:link {
        color:#737373;
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        padding:5px;
        width:250px;
        margin:5px 5px 5px 0;
        position:relative;
                -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.post img {
            -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:#fff;
        padding:5px;
        width:490px;
        margin:5px 0;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        opacity:0.8;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
                -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
            }
            
            .post img {
                        -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}
{/block:PermalinkPage}





.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#707070;
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        
#header {
        background:black;
}

#header p#description {
        padding:0;
        margin:0;
font-family: 'Bree Serif', serif;
font-size:20px;
        position:absolute;
        top:43px;
        left:74px;
        width:400px;
        height:40px;
        color:#111;
        text-align:left;
}

.text, .quote, .link, .chat {
        background:#fff;
                            -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);

        } 

#topNav {
    position:absolute;
    top:5px;
    right:5px;
    width:270px;
    height:64px;
}

#topNav a {
        display:block;
        font-family: 'Bree Serif', serif;
        color:#111;
        padding:2px 5px;
        font-weight:normal;
        font-size:13px;
        text-transform:uppercase;
        width:120px;
        margin:0 0 2px 5px;
        float:left;
        -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#topNav a:hover {
        color:#fff;
}

#logo img {
    position:absolute;
    top:5px;
    left:5px;
    width:64px;
    height:64px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
        }
        
        #header h1 {
                color:#111;
                position:absolute;
                top:-7px;
                left:74px;
                text-transform:uppercase;
font-family: 'Bree Serif', serif;
font-size:50px;
                font-weight:normal;
                margin:0;
                padding:0;
        }
        
.post:hover #reblog{











margin-top:8px;

opacity:1;-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;



}



#reblog{

width:125px;

text-align:right;

right:10px;

margin-top:5px;

position:absolute;opacity:0;-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

        
                
                
                      .hov{top:0; left:0;padding:35px 0 0 0;font-size:20px;display:block;position:absolute;width:260px;height:1200px;margin-top:0px;text-align: center;background-color:#ccc;opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}
      .post:hover .hov {display:block; opacity: 0.8;-moz-box-shadow: inset 0 0 75px rgba(0,0,0,0.5);-webkit-box-shadow: inset 0 0 75px rgba(0,0,0,0.5);box-shadow: inset 0 0 75px rgba(0,0,0,0.5);-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}.date2 a {color:;}.date2 a:hover {color:;}
      
      
.notesLink {
        text-align:center !important;
        color:#fff !important;
        font-size:13px arial !important;
        text-shadow: 1px 1px 1px #000 !important;
        background:url('https://www.snazzyspace.com/images/fadeBlack.png') repeat transparent; 
        padding:5px 25px 5px 25px;
          -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
          opacity:1;
          margin:5px 0;
position:absolute;
right:0px;
top:25px;
}




#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
font-family: 'Bree Serif', serif;
font-size:23px;
  color: #fff;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        width:785px;
        height:64px;
        margin:0 0 10px 0;
        padding:5px;
        position:relative;
        background:url('https://www.snazzyspace.com/images/fadeWhite.png') repeat transparent;
        overflow:hidden;
        -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

#holder {
        width:795px;
}

    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>


<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
    <div id="header">
        <div id="logo">
        <img src="{PortraitURL-64}" /> 
        </div>
        <h1>{Title}</h1>

                        {block:Description}
                         <p id="description">{Description}</p>
                        {/block:Description}
                        
 <div id="topNav">                       
   <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>
    </div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>
                     {/block:IndexPage}                
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box shake post photo">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>
    
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>   
                     {/block:IndexPage}                                        
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div> 
                     {/block:IndexPage}                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>   
                     {/block:IndexPage}                                      
                        <a href="{URL}" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chat">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>     
                     {/block:IndexPage}
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul>
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>
                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog"><img src="https://www.snazzyspace.com/images/fadeReblog.png" class="reblogLink" /></a></div>                                    
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes} {/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>





       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Dripping Grid Theme

 
 
 <html>
    <head>
        <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}

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />

<link href='https://fonts.googleapis.com/css?family=Creepster' rel='stylesheet' type='text/css'>


    <style type="text/css">
    
#toTop { 
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        z-index:1000;
}


        body {

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




    		text-align:center;

			font:11px 'tahoma';
            
			color:000;

		}

#container {
        margin:0 auto;
        width:1100px;
}


a, a:active, a:visited, a:link {
        color:#737373;
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        padding:5px;
        width:250px;
        margin:5px 5px 5px 0;
        position:relative;

}

.post img {
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:#fff;
        padding:5px;
        width:490px;
        margin:5px 0;
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        opacity:0.8;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
            }
            
            .post img {
}
{/block:PermalinkPage}





.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#707070;
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        

.text, .quote, .link, .chats  {
        background:#fff;
                -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        } 



        

        
.post:hover #reblog{
margin:0 0 0 0;
display:block;
opacity:1;-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;
}



#reblog{
padding:20px 0 0 0;
margin:800px 0 0 0;
text-align:center;
position:absolute;
width:260px;
top:0;
left:0;
opacity:0;-webkit-transition: all 0.8s ease-out;

-moz-transition: all 0.8s ease-out;transition: all 2s ease-out;}

        
                
                #reblog a {
                        color:white;
                        display:block;
                        text-transform:uppercase;
                        font-family: 'Creepster', cursive;
                        font-size:45px;
                        padding:5px;
                        letter-spacing:-3px;
                        font-weight:normal;
                        text-shadow: 0 0 1px 1px #000;
                        }
  
      
      

      
#lighter {
        width:260px;
        position:absolute;
        top:0;
        background:#333;
        left:0;
        opacity:0;
        height:800px;
       -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;transition: all 1s ease-out;
}

.post:hover #lighter {
        opacity:0.9;
        display:block;
-moz-box-shadow: inset 0 0 150px #000;
-webkit-box-shadow: inset 0 0 150px #000;
box-shadow: inset 0 0 150px #000;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;transition: all 1s ease-out;
        }




#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
  color: #fff;
      font-family: 'Creepster', cursive;
  font-size:20px;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        width:1100px;
        margin:0 0 10px 0;
        padding:5px;
        text-align:center;
}

#holder {
        margin:0 auto;
        width:1100px;
}

h1 {
    display:block;
    padding:5px;
    margin:0;
    font-family: 'Creepster', cursive;
    font-size:120px;
    color:#fff;
        text-shadow: 1px 1px 1px #666;
}

#descr {
            padding:5px;
            font-weight:normal;
            font-size:13px;
            text-transform:uppercase;
            color:#fff;
            text-shadow:1px 1px 1px #666;
}

#navy {
        padding:5px;
}
    #navy a, #navy a:active, #navy a:visited {
            padding:0 10px;
            font-weight:normal;
            color:#fff;
            text-shadow:1px 1px 1px #666;
    }
    
    #navy a:after {
            content:'▼';
            font-weight:bold;
            font-size:20px;
            margin:0 5px 0 20px;
            text-shadow:1px 1px 1px #666;
            }
    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>


<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
<h1>{Title}</h1>
        {block:Description}
            <div id="descr">
                {Description}
            </div>
        {/block:Description}

   <div id="navy">
   <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} <span>notes</span></a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
                     {/block:IndexPage}                
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box shake post photo">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} <span>notes</span></a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
    
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} <span>notes</span></a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>   
                     {/block:IndexPage}                                        
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     {block:IndexPage}
    <div id="lighter"></div>
<div id="reblog">{block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} <span>notes</span></a>{/block:NoteCount} <a href="{ReblogURL}" title="Reblog">REBLOG</a></div>
                     {/block:IndexPage}                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                     {block:IndexPage}

                     {/block:IndexPage}                                      
                        <a href="{URL}" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chats">
                     {block:IndexPage}
    
                     {/block:IndexPage}
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul>
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}

                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                                
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes} {/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>
















       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Two Column Theme

 
 
<html>
    <head>
        <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}
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />
<link href='https://fonts.googleapis.com/css?family=Chau+Philomene+One' rel='stylesheet' type='text/css'>
    <style type="text/css">
    
#toTop {
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}


        body {

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




			text-align:center;

			font:12px Arial;
            
			color:000;

		}

#container {
        margin:0 auto;
        width:668px;
}


a, a:active, a:visited, a:link {
        color:#737373;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        background:#fff;
        padding:5px;
        width:250px;
        margin:5px 5px 5px 0;
        position:relative;
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:#fff;
        padding:5px;
        width:550px;
        margin:5px 5px 5px 0;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        background:#fff;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;


            }
{/block:PermalinkPage}





.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#707070;
        text-decoration:none;
}

.post img {
        border-radius:6px;
        -moz-border-radius:6px;
}

.post a:hover {
        color:black;
}

ol { 
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        
#header {
        background:white;
        width:128px;
        position:fixed;
        border-radius:5px;
        -moz-border-radius:5px;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

#header p#description {
        padding:0;
        margin:0;
        font-size:9px;
        color:#666;
        letter-spacing:1px;
}

#topNav {
 margin:10px 0;
}

#topNav a {
        display:block;
        color:#000;
        padding:2px;
        margin:2px 0;
        font-size:9px;
        text-transform:uppercase;
        letter-spacing:1px;
        border-bottom:1px dotted #ccc;
}


#padster {
        padding:5px;
}

#logo img  {
            border-radius:5px;
            -moz-border-radius:15px;
        }
        
        #header h1 {

                text-transform:uppercase;
                font-size:20px;
                font-family:'Chau Philomene One', sans-serif;
                margin:5px 0;
                padding:0;
                font-weight:normal;
        }
        
                
                
                      .hov{
border-radius:6px;
-moz-border-radius:6px;
                          top:0; left:0;padding:15px 0 0 0;font-size:20px;display:block;position:absolute;width:240px;height:80px;margin:10px 10px;text-align: center;background-color:#666;opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}
      .post:hover .hov {display:block; opacity: 0.8;-moz-box-shadow: inset 0 0 75px rgba(0,0,0,0.5);-webkit-box-shadow: inset 0 0 75px rgba(0,0,0,0.5);box-shadow: inset 0 0 75px rgba(0,0,0,0.5);-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}.date2 a {color:;}.date2 a:hover {color:;}
      
      
.notesLink {
        text-align:center !important;
        color:#fff !important;
        padding:2px 10px !important;
        background:#000 !important;
        border-radius:5px;
        -moz-border-radius:5px;
        font:16px 'Chau Philomene One', sans-serif !important;
        text-transform:uppercase !important;
                margin:5px;
}

.reblogLink {
        text-align:center !important;
        color:#fff !important;
        padding:2px 10px !important;
        background:#000 !important;
        border-radius:5px;
        -moz-border-radius:5px;
        font:16px 'Chau Philomene One', sans-serif !important;
        text-transform:uppercase !important;
                margin:5px;
}

p.datePost {
        border-bottom:1px dashed #fff;
        font-style:italic;
        font:20px 'Chau Philomene One', sans-serif !important;
        color:#fff;
        text-shadow:1px 1px 1px #000;
        margin:10px 0;
        padding:0;
}


.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}


#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
          font:20px 'Chau Philomene One', sans-serif !important;
  color: #fff;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        float:right;
        width:128px;
        margin:0 0 0 5px;

}

#holder {
        float:left;
        width:530px;
        background:white;
        padding:0 0 0 5px;
        border-radius:5px;
        moz-border-radius:5px;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>

<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
    <div id="header">
        <div id="logo">
        <img src="{PortraitURL-128}" />
        </div>
        <div id="padster">
        <h1>{Title}</h1>

                        {block:Description}
                         <p id="description">{Description}</p>
                        {/block:Description}
                        
 <div id="topNav">                       
 <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>
    </div>
    </div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box shake post photo">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                        
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                      
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chat">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>                                          
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes} {/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>









       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Three Column Side Box Theme

 
 
<html>
    <head>
        <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}
<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />
<link href='https://fonts.googleapis.com/css?family=Dosis|Francois+One' rel='stylesheet' type='text/css'>


    <style type="text/css">
    
#toTop {
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}


        body {

background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;




			text-align:center;
font-size:11px;
            font-family:arial, tahoma, verdana;
			color:#000;

		}

#container {
        margin:0 auto;
        width:1003px;
}


a, a:active, a:visited, a:link {
        color:#737373;
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        {block:IndexPage}
.post {
        text-align:left;
        background:#fff;
        color:#000;
        padding:10px;
        width:250px;
        margin:10px 10px 0 0;
        position:relative;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

.post img {
}

.box {
    float:left;
    overflow:hidden;
    }
    
 {/block:IndexPage}
.notes {
        clear:both;
        text-align:left;
        background:#fff;
        padding:5px;
        width:550px;
        margin:5px 5px 5px 0;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
}

            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
{block:PermalinkPage}
.box {
        overflow:hidden;
        }
        
        .post {
         text-align:left;
        background:#fff;
        padding:5px;
        width:500px;
        margin:5px 5px 5px 0;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
            }
{/block:PermalinkPage}





.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#707070;
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
        
#header {
        background:#fff;
        width:128px;
        padding:10px;
        margin:5px 5px 5px 0;
        position:fixed;
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
}

#header p#description {
        padding:10px 5px;
        margin:0;
        color:#000;
font:12px 'Dosis', sans-serif;
text-transform:uppercase;
}

#topNav {

}

#topNav a {
        display:block;
        color:#000;
        background:#f1f1f1;
        padding:5px;
        margin:5px 5px;
        font-weight:normal;
        font-size:9px;
        text-transform:uppercase;
}

#topNav a:hover {
            background:#f1f1f1;
            color:#000;
            text-decoration:underline;
}

#logo {

        }
        
        #header h1 {

                text-transform:uppercase;
font-family: 'Francois One', sans-serif;
font-size:20px;
                letter-spacing:-1px;
                color:#000;
                font-weight:normal;
                margin:0;
                display:block;
                background:#e5e5e5;
                padding:0;
        }
        
                
                
                      .hov{top:0; left:0;padding:35px 0 0 0;font-size:20px;display:block;position:absolute;width:260px;height:1200px;margin-top:0px;text-align: center;opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}
                      
      .post:hover .hov {background:url('https://www.snazzyspace.com/images/fadeWhite.png') repeat transparent;cursor:pointer; display:block; opacity: 1;-moz-box-shadow: inset 0 0 75px rgba(0,0,0,0.5);-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;}.date2 a {color:;}.date2 a:hover {color:;}
      
      
.notesLink {
        text-align:center !important;
        color:#fff !important;
        padding:2px 10px !important;
        font-family: 'Francois One', sans-serif !important;
        font-size:85px !important;
        letter-spacing:-6px;
        text-transform:uppercase !important;
        font-weight:normal !important;
        text-shadow:1px 1px 1px #000;
        display:block;
}

.reblogLink {
        display:none;
        text-align:center !important;
        color:#000 !important;
        padding:2px 10px !important;
        font-family: 'Francois One', sans-serif !important;
        font-size:35px !important;
        letter-spacing:-2px;
        text-transform:uppercase !important;
        font-weight:normal !important;
}

p.datePost {
        display:none;
        width:50%;
        margin:5px auto;
        text-align:center !important;
        color:#fff !important;
        padding:2px 10px !important;
        background:black !important;
        font-family: 'Francois One', sans-serif !important;
        font-size:15px !important;
        letter-spacing:3px;
        text-transform:uppercase !important;
        border-radius:4px;
        -moz-border-radius:4px;
}


.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.masonry {
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;
}


#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
font-family: 'Francois One', sans-serif;
font-size:23px;
  color: #fff;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}

#mainRight {
        float:right;
        width:148px;
}

#holder {
        float:left;
        width:855px;
}

    </style>
    </head>
    <body>
     



<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>

<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div id="mainRight">
    <div id="header">
        <div id="logo">
        <img src="{PortraitURL-128}" />
        </div>
        <h1>{Title}</h1>

                        {block:Description}
                         <p id="description">{Description}</p>
                        {/block:Description}
                        
 <div id="topNav">                       
 <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}

        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>
    </div>

</div>
                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                    <div class="box shake post photo">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}       
                     
 {block:PermalinkPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
                        {/block:PermalinkPage}
     
      {block:IndexPage}                    
                        <a href="{LinkURL}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>
                        {/block:IndexPage}
 

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post photoset">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                        
                        {Photoset-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                      
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chat">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post video">
                     {block:IndexPage}
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>     
                     {/block:IndexPage}                                        
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                  <div class="hov">
                        {block:NoteCount}<a class="notesLink "href="{Permalink}">{NoteCount}</a>{/block:NoteCount} <a class="reblogLink" href="{ReblogURL}">Reblog</a>     
                        
                    <p class="datePost">    {block:Date}{TimeAgo} {/block:Date} </p>
                        
                    </div>                                          
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes} {/block:PermalinkPage}
            
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
         {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}

    </body>
</html>





       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Boxes Grid Theme

 
 
<html>
    <head>
        <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}

<link href='https://fonts.googleapis.com/css?family=Chau+Philomene+One|Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

    <style type="text/css">

#toTop {
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}

    
        body {
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;
            margin:25px 0;



			text-align:center;

                       font-family: 'Yanone Kaffeesatz', sans-serif;
                       font-size:16px;
            
			color:#666;

		}

#container {
        margin:0 auto;
        width:1100px;
}

#holder {
        margin:55px 0 0 0;
        }

a, a:active, a:visited, a:link {
        color:#666;
        font-weight:bold;
        text-decoration:none;

        }
        
        a:hover {
                color:#000;
                }

a img {
        border:0;
        }
        
.post, .descriptions, .notes {
        text-align:left;
        background:#fff;
        width:250px;
        margin:5px 5px 5px 0;
        padding:10px;
    -moz-box-shadow: 1px 1px 1px #888;
    -webkit-box-shadow: 1px 1px 1px #888;
    box-shadow: 1px 1px 1px #888;
    position:relative;
}

.post2 {
        text-align:left;
        width:250px;
    padding:0;
                margin:15px 15px 15px 10px;
    position:relative;
}



.box {
    float:left;
    overflow:hidden;
    }
    
    .notes {
            float:left;
            }


.postCount {
        background:#fff;
        color:#b8b8b8;
        padding:3px 0;
        text-align:right;
}

.post a, .post a:link, .post a:active, .post a:visited {
        color:#666;
        text-decoration:none;
}


.post a:hover {
        color:black;
}

ol {
        margin:0;
        padding:0;
        }
        
        ol li {
                padding:0;
                margin:0;
                list-style-type:none;
        }
#header {
        background:url('https://www.snazzyspace.com/images/fadeBlack.png') repeat transparent;
        width:1085px;
        height:48px;
        padding:5px;
        position:fixed;
        z-index:99;
        top:0;
}

#header p#description {
                color:#fff;
                padding:0;
        margin:0;
        right:120px;
        top:5px;
        position:absolute;
         font-family: 'Yanone Kaffeesatz', sans-serif;
         font-size:25px;
}

#topNav {
        position:absolute;
        right:20px;
        bottom:5px;
}

#topNav a {
        margin: 0 15px 0 0;
        color:#fff;
        font-weight:normal;
        text-transform:uppercase;
}

#topNav a:hover {
        font-style:italic;
        }

#logo {
        position:absolute;
        top:5px;
        left:5px;
        }
        
        #header h1 {
                position:absolute;
                top:5px;
                left:59px;
                text-transform:uppercase;
                font-family: 'Chau Philomene One', sans-serif;
                font-size:40px;
                font-weight:normal;
                letter-spacing:-2px;
                margin:0;
                color:#fff;
                padding:0;
                text-shadow:1px 1px #666;
        }
        
        .hov {
            opacity:0;
            position:absolute;
            background:url('https://www.snazzyspace.com/images/fadeBlack.png') repeat transparent;
            padding:10px;
            width:150px;
            overflow:hidden;
            height:80px;
            top:-80px;
            text-align:center;
                left:-260px;
          -webkit-transition: all 1s linear; -moz-transition: all 1s linear;-o-transition: all 1s linear;
          cursor:pointer;
        }
        
        .hov a, .hov a:link, .hov a:visited, .hov a:active {
                font-size:16px;
                text-transform:uppercase;
                padding:5px;
                font-weight:bold;
                color:white;
                display:block;
                background:url('https://www.snazzyspace.com/images/fadeBlack.png') repeat transparent;
                margin:5px 30px 5px 10px;

        }
        
        .hov a:hover {
                background:url('https://www.snazzyspace.com/images/fadeWhite.png') repeat transparent;
                color:#000;
                }
        
        .post:hover .hov, .post2:hover .hov {
                opacity:1;
                -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;left:0;top:0}
                
                



#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px;
  background: #000; 
font-size:23px;
  color: #fff;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}


    </style>
    </head>
    <body>
<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>

<div id="container" class="transitions-enabled infinite-scroll clearfix">

    <div id="header">
        <div id="logo">
        <img src="{PortraitURL-48}" />
        </div>
        <h1>{Title}</h1>

                        {block:Description}
                         <p id="description">{Description}</p>
                        {/block:Description}
                        
 <div id="topNav">                       
 <a href="/">Home</a>
{block:AskEnabled}
                    <a href="/ask"> {AskLabel}</a>
{/block:AskEnabled}                    
{block:SubmissionsEnabled} 
                    <a href="/submit"> {SubmitLabel}</a>
{/block:SubmissionsEnabled}
        {block:HasPages}{block:Pages}<a href="{URL}">
        {Label}</a>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a>
        {/block:ifLink5Title}
</div>
    </div>


                
                    <div id="holder">
            {block:Posts}
                {block:Text}
                    <div class="box shake post text">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                        
                        
                    </div>               
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </div>
              
                {/block:Text}

                {block:Photo}
                                    <div class="box shake post2 photoset">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                       
                        
                    </div>                                        
<a href="{LinkURL}"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></a>

                    </div>
                {/block:Photo}

                {block:Photoset}
                    <div class="box shake post2 photoset">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                       
                        
                    </div>                                        
                        {Photoset-250}

                    </div>
                {/block:Photoset}

                {block:Quote}
                    <div class="box shake post quote">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                       
                        
                    </div>                                       
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="box shake post link">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                         
                        
                    </div>                                     
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Chat}
                    <div class="box shake post chat">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                         
                        
                    </div>                                      
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Chat}

                {block:Video}
                    <div class="box shake post2 video">
                    <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                        
                        
                    </div>                                      
                        {Video-250}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}

                {block:Audio}
                    <div class="box shake post audio">
                   <div class="hov">
                        {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount} <a href="{ReblogURL}">Reblog</a>                         
                        
                    </div>                                        
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}
            {/block:Posts}
            
            {block:PostNotes}{PostNotes}{/block:PostNotes}
 
 
        </div>
        </div>
        
        <nav id="page-nav">
  <a href="/page/2"></a>
</nav>

        
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


{block:IndexPage} 
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
{/block:IndexPage}
<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});

{block:IndexPage} 
$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#holder');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
{/block:IndexPage}
    </body>
</html>



       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>

Piano Keys Skinny Theme

 
 
<html>
    <head>
        <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}

<meta name="text:Link 1" content="" />
<meta name="text:Link 1 Title" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 2 Title" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:Link 3 Title" content="" />
<meta name="text:Link 4" content="" />
<meta name="text:Link 4 Title" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:Link 5 Title" content="" />

<link href='https://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>


</head>


<style type="text/css">


body {
color: #191919;
background:url('https://www.snazzyspace.com/defaultimages/2a2a2a_piano-keys.gif') repeat #FFFFFF;
background-attachment:fixed;


font:12px arial;
margin: 0;
text-align:center;     
}

    #title {
            width:408px;
            margin:0 auto;
            position:relative;
            height:120px;
    }


        h1 {
            font-family: 'Six Caps', sans-serif;
    		display:block;
            font-weight:normal;
            font-size:90px;
            letter-spacing:-3px;
            font-style:italic;
			text-align:left;
			margin:0;
            padding:0;
            color:#fff;
            text-shadow:1px 1px #888;
            position:fixed;
            z-index:99;
		}


   
/* BASIC LAYOUT */
#contain {
	margin: 0 auto;
    width:408px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}


.navlist ul {
    margin:0;
	padding:0;
	list-style-type:none;
}

.navlist ul li {
	padding:0;
	margin:0;
}

.navlist ul li a, .navlist ul li a:visited, .navlist ul li a:active {
	display:block;
	font-size:9px;
    text-transform:uppercase;
	padding:8px 5px;
	margin:3px 0;
	color:#000;
    background:#f1f1f1;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    text-decoration:none;
	}
	
	.navlist ul li a:hover {
		text-decoration:underline;
		}
	

/* SIDEBAR */
    #leftsidebar {
        float: left;
        margin:0 5px 0 0;
        padding:5px;
        width:128px;
        text-align:left;
        position:fixed;
        background:#fff;
        -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -moz-border-radius: 5px;
        border-radius: 5px;
        color:#000;
        overflow:hidden;
    }

img.portrait {
        -moz-border-radius: 5px;
        border-radius: 5px;
}

#leftsidebar p {
display:block;
text-align:left;
padding:5px;
margin:5px 10px;
font-size: 10px;
}
















    

    

/* FOOTER */

#footer-container {
margin: 0;
font-size: .9em;
padding: 10px;
border-top: 0px solid #333;
width: 100%;

}


/* PREVIOUS-NEXT LINKS */  

#pagination {
padding-bottom:10px;



}

#pagination a, #pagination a:visited, #pagination a:active {
text-decoration: none;

}

#pagination #prev {
float:left;
font-size:14px;
font-weight:bold;

}

#pagination #next {
float:right;
margin-right:10px;
font-weight:bold;
font-size:14px;
margin-top:-20px;

}
#pagination .middle {
	display:block;
	padding-left:100px;
	
}


/* CONTENT */
    
#content {
padding:5px;
text-align:left;
margin-left:148px;
width: 250px;
-moz-border-radius: 5px;
border-radius: 5px;
float:left;
background:#fff;
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
        box-shadow: 0 1px 10px rgba(0,0,0,.3);

      
}

#content .date {
color: #191919;
display: block;
font-size: 11.3px;
margin-bottom: 3px;
margin-right: 15px;
padding-bottom:10px;
margin-top:-4px;
     
}
#content .date a{
color: #191919;}
#content h2 a{
text-decoration: none;
    
}
    
.reblog {
display: block;
margin-bottom: 0px;
      
}

#toTop {
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
}
    
.post-footer {
display: block;
color: #191919;
font-size: .8em;
text-align: right;
margin-top: 3px;
padding:5px 0;
      
}

.post-footer .permalink {
margin-left: 1em;
text-decoration: underline;

}

.post-footer .permalink:hover {
text-decoration: none;

}
    
.post-footer .tags {
display: block;
text-transform: uppercase;
float: left;

}
    

.regular, .quote, .link, .photo, .conversation, .video, .audio {
margin: 0 0 0px;

}

.regular img{
margin-left: 1em;

}

#content h5 {
color: #191919;
font-size: 17px;
font-weight: bold;
padding: 0;
}


  
  #infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  padding: 5px 30px 5px 20px;
  background: #000; 
font-family: 'Six Caps', sans-serif;
font-size:25px;
  color: #fff;
  font-style:italic;
  text-transform:uppercase;
}

#infscr-loading img  { 
    display:none;
}


</style>
{CustomCSS}

</style>

<!--[if lte IE 7]>

<style type="text/css">

#sidebar {
float: left;
margin: 0 0 1.5em;
width: 16em;
position: static;

}
    

		
#sidebar #other ul li { width: 98%; }
h4 { font-size: 1.1em; }



<![endif]-->

<!--End CSS-->




</head>

<body>

<div id="toTop"><img src="https://www.snazzyspace.com/images/back_to_top.png" /></div>
		<div id="title">
				<h1>{Title}.</h1>
		</div>

<div id="contain">

<div id="leftsidebar">

<a href="/"><img class="portrait" src="{PortraitURL-128}" width="128" height="128" alt="{Title}" border="0" /> </a>

     
             {block:Description}
            <p class="desc">{Description}</p>
        {/block:Description}
        
<div class="navlist">

<ul>

<li class="first"><a href="/">Home</a></li>

{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}

         
<li><a href="/archive" id="archives">Archives</a></li>

<li><a href="/random">Random</a></li> 


{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}


<li><a href="https://www.snazzyspace.com/" id="theme">Theme</a></li>


        {block:HasPages}{block:Pages}<li><a href="{URL}">
        {Label}</a></li>{/block:Pages}
        {/block:HasPages}
        {block:ifLink1Title} 
        <li><a href="{text:Link 1}" title="{text:Link 1 Title}">
        {text:Link 1 Title}</a></li>
        {/block:ifLink1Title}
        {block:ifLink2Title} 
        <li><a href="{text:Link 2}" title="{text:Link 2 Title}">
        {text:Link 2 Title}</a></li>
        {/block:ifLink2Title}
        {block:ifLink3Title} 
        <li><a href="{text:Link 3}" title="{text:Link 3 Title}">
        {text:Link 3 Title}</a></li>
        {/block:ifLink3Title}
        {block:ifLink4Title} 
        <li><a href="{text:Link 4}" title="{text:Link 4 Title}">
        {text:Link 4 Title}</a></li>
                {/block:ifLink4Title}
        {block:ifLink5Title} 
        <li><a href="{text:Link 5}" title="{text:Link 5 Title}">
        {text:Link 5 Title}</a></li>
        {/block:ifLink5Title}
				

</ul>
        

		
</div> <!-- end navlist -->
      
</div> <!-- end leftsidebar div -->
    
<div id="content">
{block:Posts}

      
{block:Regular}
<div class="regular">
{block:Title}<h5>{Title}</h5>{/block:Title}
{Body}
{/block:Regular}
      
{block:Quote}
<div class="quote box">
<div class="quote-body">
<span class="words">{Quote}</span>

</div>
{/block:Quote}

{block:Link}
<div class="link box">
<h5><a href="{URL}" {Target}>{Name}</a></h5>
{/block:Link}
      
{block:Conversation}
<div class="conversation box">
{block:Title}<h5>{Title}</h5>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="person">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>
{/block:Lines}
</ul>
{/block:Conversation}

{block:Photo}
<div class="photo box">
<span class="postphoto">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{LinkCloseTag}</span>


{/block:Photo}

{block:Video}
<div class="video box">
<div class="embed">{Video-250}</div>
{/block:Video}
      
{block:Audio}
<div class="audio box">
{AudioPlayerGrey}
{/block:Audio}
      

      
<div class="post-footer">
        

<span class="date">{TimeAgo}
{block:IfShowNotes}

                                {block:NoteCount} with <a title="{NoteCountWithLabel}" href="{Permalink}">{NoteCountWithLabel}</a></span>{/block:NoteCount}
{/block:IfShowNotes} 
          


          
          
</div> <!-- end post footer -->
     
      
{block:Permalink}

<!-- Disqus Code Here -->
 {PostNotes}
      
{/block:Permalink}
   
</div> <!-- end single post -->    

     
{/block:Posts}
      

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


 <!-- end containing div --></div></div>
 
         <nav id="page-nav">
  <a href="/page/2"></a>
</nav>


        {block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">

$(function() {
    $(window).scroll(function() {
    	if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});


$(window).load(function () {
                
       
    
    
    
    // endless scrolling
    var $container = $('#content');    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box'
      });
    });
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      bufferPx: 0,
      debug		 	: true,
      loading: {
          finishedMsg: 'No more posts to load.',
          img: '',
          msgText: 'Loading More Posts'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
    
    // End of endless scrolling
    
});

</script>
 {/block:IndexPage}


</body>

</html>





       <a style="position: fixed; z-index: 1999; top: 0px; left: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge.png" alt="A snazzyspace.com Theme" border="0"></a> <a style="position: fixed; z-index: 1999; bottom: 100px; right: 0px;" href="https://www.snazzyspace.com/" target="_blank" class="trans_col"><img src="https://www.snazzyspace.com/img/badge_2.png" alt="A snazzyspace.com Theme" border="0"></a><a style="position: absolute; z-index: 10; top: 86px; right: 3px;" href="https://www.snazzyspace.com/tumblr" target="_blank" class="install_but"><img src="https://www.snazzyspace.com/img/install_theme.png" border="0"></a>