Staircase Theme - by Chloe

<!DOCTYPE html>
<html>
<head>
<!--
 _                  _     _
| |__  _   _    ___| |__ | | ___   ___
| '_ \| | | |  / __| '_ \| |/ _ \ / _ \
| |_) | |_| | | (__| | | | | (_) |  __/
|_.__/ \__, |  \___|_| |_|_|\___/ \___|
       |___/
Staircase Theme by Chloe | @dontbrag | @bychloethemes
Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
-->
<meta name="select:Header Position" content="botl" title="Bottom Left">
<meta name="select:Header Position" content="topl" title="Top Left">
<meta name="select:Header Position" content="botr" title="Bottom Right">

<meta name="if:Other Header" content="0" />
<meta name="if:Archive link" content="1" />
<meta name="if:Pagination" content="1" />
<meta name="if:Captions" content="0" />

<meta name="text:IMPORTANT" content="If you have infinite scroll enabled you must se your posts per page to an even number!" />
<meta name="text:Link 1" content="" />
<meta name="text:URL 1" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:URL 2" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:URL 3" content="" />
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <meta charset="utf-8">
<style type="text/css">
/*Basic styles*/
body {
  background:#fff url('http://static.tumblr.com/c9b44bb34278049f70ef9ecf87df0191/4ff2ano/zAenlg3di/tumblr_static_d8zbrfbohn48o8c4c8cc8sg44.png') repeat;
  background-attachment: fixed;
  font-family: 'times';
}
#mask {
    width:100%;
    height:100%;
    top:0;
    left:0;
    bottom:0;
    right:0;
    position:fixed;
    background: url('') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
z-index:-1;
opacity:0.3;
}
 iframe, img, embed, object, video {
    max-width: 100%;
  }
img {
    height: auto;
    width: auto;
    vertical-align:middle;
}
blockquote {
    border-left: 1px solid #989898;
    margin:0 0 0 10px;
    padding: 0 0px 0 5px;
}
cite {
    padding: 20px;
}
a {
    color:#000;
    text-decoration:none;
    font-style:italic;
}
a:hover {
    text-decoration:underline;
}
a:focus {
    outline:none;
}
#content {
    {block:IndexPage}
   width:800px;
   {/block:IndexPage}
   {block:PermalinkPage}
   width:520px;
   {/block:PermalinkPage}
    margin-left: auto;
    margin-right:auto;
    {block:IfPagination}
    margin-bottom:40px;
    {/block:IfPagination}
}
.header {
    text-align:center;
    width:500px;
    padding-left:50%;
    margin-left:-250px;
    z-index:9999999;
}
.header ul.navlinks {
    padding:0;
    list-style-type:none;
}
.header ul.navlinks li {
    display:inline-block;
    margin:0 2px;
}
.movehead {
    position:fixed;
    font-size:23px;
    text-transform:uppercase;
    z-index:99999999;
    text-shadow:1px 1px #fff;
}
.botl {
    bottom:10px;
    left:15px;
}
.topl {
    top:10px;
    left:15px;
}
.botr {
    bottom:10px;
    right:15px;
}
.movehead ul.navlinks {
    padding:0;
    list-style-type:none;
    display:inline-block;
    margin:0;
}
.movehead ul.navlinks li {
    display:inline-block;
    margin:0 5px;
}
.movehead ul.navlinks li:first-child {
    margin-left:-5px;
}
article {
   background: #f6f6f6;
    margin-top:20px;
    {block:IndexPage}
    margin-right:35px;
    {/block:IndexPage}
    margin-bottom:20px;
    {block:IndexPage}
    width: 400px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width: 500px;
    {/block:PermalinkPage}
    padding: 10px;
    outline-offset:-10px;
    border-radius:0px;
    font-size:14px;
    box-shadow:2px 2px 3px rgba(0,0,0,0.2);
}
.left {
    margin-left:40px;
}
.right {
    margin-left:340px;
}
article h1 {
    font-weight:bold;
    letter-spacing:2.5px;
    color: #fff;
    text-shadow: 1px 1px 0px #ccc;
    margin: 0px;

}
article .asker {
    border-radius:0px;
    float:left;
}
article .whoasked {
    margin:0px 5px 0px 0px;
    float:left;
    background:#ccc;
    color:#000;
    height:30px;
    line-height:30px;
    border-radius:0px;
    padding:0px 6px;
    text-transform:lowercase;
}
article .whoasked a {
    color:#000;
}
article .whoasked a:hover {
    font-style:italic;
}
article hr {
    border:0px solid;
    height:1px;
    background:#989898;
}
article .question {
    line-height:16px;
    min-height:30px;
}
.chat ul {
    list-style-type:none;
    padding:0;
}
.tumblr_audio_player {
    height: 30px;
    width: 500px;
    opacity:0.7;
}
.albumart {
    position:absolute;
    width:110px;
    height:110px;
}

.albumart img {
    float:left;
    margin-left:5px;
    width:110px;
    height:110px;
}

.playbox {
    opacity:0.6;
    width:30px;
    height:30px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    overflow:hidden;
    position:absolute;
    z-index:2;
    margin-left:46px;
    margin-top:41px;
}

.audioinfo {
    margin-top:2px;
    line-height:22px;
    padding-left:15px;
    min-height:110px;
    border-left:1px solid #989898;
{block:IndexPage}
    margin-left:130px;
{block:IndexPage}
}
.metadata {
    padding-top:10px;
    font-size:15px;
}
.permas {
    position: relative;
    display: inline-block;
    margin: 2px 2px 0px 2px;
    cursor: pointer;
    opacity: .2;
    filter: alpha(opacity=20);
}
.permas:hover, .permas.active {
    opacity: 1; filter: alpha(opacity=100);
}

::-moz-selection {
    background: #989898;
    color: #fff;
    opacity: 0.65;
}

::selection {
    background: #989898;
    color: #fff;
    opacity: 0.65;
}
ul#tags {
    list-style-type:none;
    padding:0;
    margin:10px 0;
}
ul#tags li {
    display:inline-block;
    margin:5px;
}
  ol.notes {
    padding: 0px;
    list-style-type: none;
}

ol.notes li.note {
    padding:0;
    text-align:left;
    line-height:16px;
    width:100%;
      border:0;
      border-radius:0;
      background:transparent;
    padding-top:5px;

}

ol.notes li.note img.avatar {
    display:none;
}

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

ol.notes li.note .answer_content {
    font-weight: normal;
}
#infscr-loading {
    position:fixed!important;
    bottom:0;
    width:20px;
    left:150px;
    z-index:999999999999999;
    color:#f00;
}
#infscr-loading img{
    display:none;
}
.pagination {
    position:fixed;
    bottom:10px;
    right:15px;
    font-size:28px;
    word-spacing:5px;
    text-shadow:1px 1px #fff;
}
.current_page {
    text-decoration:underline;
}
/*Custom CSS*/
{CustomCSS}
</style>
</head>
<body>
<div id="mask"></div>
{block:IfNotOtherHeader}<div class="movehead {select:Header Position}">
<a href="/">{Title}</a>&nbsp;&nbsp;/
<ul class="navlinks">
            {block:AskEnabled}
            <li>/&nbsp;&nbsp;<a href="/ask">ask</a></li>
            {/block:AskEnabled}
            {block:SubmissionsEnabled}
            <li>/&nbsp;&nbsp;<a href="/submit">submit</a></li>
            {/block:SubmissionsEnabled}
            {block:HasPages}
            {block:Pages}
            <li>/&nbsp;&nbsp;<a href="{URL}">{Label}</a></li>
            {/block:Pages}
            {/block:HasPages}
            {block:IfLink1}
            <li>/&nbsp;&nbsp;<a href="{text:URL 1}">{text:Link 1}</a></li>
            {/block:IfLink1}
            {block:IfLink2}
            <li>/&nbsp;&nbsp;<a href="{text:URL 2}">{text:Link 2}</a></li>
            {/block:IfLink2}
            {block:IfLink3}
            <li>/&nbsp;&nbsp;<a href="{text:URL 3}">{text:Link 3}</a></li>
            {/block:IfLink3}
            {block:IfArchiveLink}
            <li>/&nbsp;&nbsp;<a href="/archive">past</a></li>
            {/block:IfArchiveLink}
            <li>/&nbsp;&nbsp;<a href="http://dontbrag.tumblr.com">&copy;</a></li>
        </ul></div>
{/block:IfNotOtherHeader}
<div id="content">
{block:IfOtherHeader}<div class="header">
  <h1><a href="/">{Title}</a></h1>
  <p>{Description}</p>
      <ul class="navlinks">
            {block:AskEnabled}
            <li><a href="/ask">ask</a>&nbsp;&nbsp;.</li>
            {/block:AskEnabled}
            {block:SubmissionsEnabled}
            <li><a href="/submit">submit</a>&nbsp;&nbsp;.</li>
            {/block:SubmissionsEnabled}
            {block:HasPages}
            {block:Pages}
            <li><a href="{URL}">{Label}</a>&nbsp;&nbsp;.</li>
            {/block:Pages}
            {/block:HasPages}
            {block:IfLink1}
            <li><a href="{text:URL 1}">{text:Link 1}</a>&nbsp;&nbsp;.</li>
            {/block:IfLink1}
            {block:IfLink2}
            <li><a href="{text:URL 2}">{text:Link 2}</a>&nbsp;&nbsp;.</li>
            {/block:IfLink2}
            {block:IfLink3}
            <li><a href="{text:URL 3}">{text:Link 3}</a>&nbsp;&nbsp;.</li>
            {/block:IfLink3}
            {block:IfArchiveLink}
            <li><a href="/archive">past</a>&nbsp;&nbsp;.</li>
            {/block:IfArchiveLink}
            <li><a href="http://dontbrag.tumblr.com">theme</a></li>
        </ul>
  </div>
  {/block:IfOtherHeader}
{block:Posts}
<article {block:IndexPage}class="{block:Even}right{/block:Even}{block:Odd}left{/block:Odd}"{/block:IndexPage}>
<!--Unique code for each post type-->
{block:Text}
<div class="text">
    {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
    {Body}
{/block:Text}

        {block:Photo}
        <div class="photo">
        {block:IndexPage} <a href="{Permalink}">
        <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" onMouseOver="changeBgImage('{PhotoURL-HighRes}','mask')" /></a>
        {block:IfCaptions}
        {block:Caption}{Caption}{/block:Caption}
        {/block:IfCaptions}
        {/block:IndexPage}
        {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" onMouseOver="changeBgImage('{PhotoURL-HighRes}','mask')" />
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
        {/block:Photo}


        {block:Photoset}
        <div class="photoset">
        <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}" onMouseOver="changeBgImage('{PhotoURL-HighRes}','mask')"></a></div>{/block:Photos}</div>
        {block:IndexPage}
        {block:IfCaptions}
        {block:Caption}{Caption}{/block:Caption}
        {/block:IfCaptions}
        {/block:IndexPage}
        {block:PermalinkPage}
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
        {/block:Photoset}

{block:Quote}
<div class="quote">
    <p>&ldquo;{Quote}&rdquo;</p>
    {block:Source}<p><cite> &mdash;{Source}</cite></p>{/block:Source}
{/block:Quote}

{block:Link}
<div class="link">
    <h1><a href="{URL}">{Name}</a></h1>
    {block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
<div class="chat inner">
    <ul>
        {block:Lines}<li class="{Alt}"><p>{block:Label}
        <u>{Label}</u>{/block:Label} {Line} </p>
        </li>{/block:Lines}
    </ul>
{/block:Chat}

{block:Audio}
<div class="audio">
    {block:IndexPage}
{block:AlbumArt}
        <div class="albumart">
            <a href="{Permalink}"><img src="{AlbumArtURL}" onMouseOver="changeBgImage('{AlbumArtURL}','mask')"></a>
        </div>
    {/block:AlbumArt}
    {block:AudioPlayer}
        <div class="playbox">
            {AudioPlayerWhite}
        </div>
    {/block:AudioPlayer}
        <div class="audioinfo">
            Artist: <span{block:Artist} style="display:none;"
            {/block:Artist}>Unknown</span>
            {block:Artist}{Artist}{/block:Artist}</br>
            Title: <span{block:TrackName} style="display:none;"
            {/block:TrackName}>Unknown</span>
            {block:TrackName}{TrackName}{/block:TrackName}</br>
            Album: <span{block:Album} style="display:none;"
            {/block:Album}>Unknown</span>
            {block:Album}{Album}{/block:Album}{block:PlayCount}</br>
            Plays: {FormattedPlayCount}{/block:PlayCount}
        </div>
    {/block:IndexPage}
    {block:PermalinkPage}
    {block:AlbumArt}<img src="{AlbumArtURL}" width="500"
    height="500" onMouseOver="changeBgImage('{AlbumArtURL}','mask')" />{/block:AlbumArt}<br>
    {AudioPlayerWhite}
            Artist: <span{block:Artist} style="display:none;"
            {/block:Artist}>Unknown</span>
            {block:Artist}{Artist}{/block:Artist} &mdash;
            Title: <span{block:TrackName} style="display:none;"
            {/block:TrackName}>Unknown</span>
            {block:TrackName}{TrackName}{/block:TrackName} &mdash;
            Album: <span{block:Album} style="display:none;"
            {/block:Album}>Unknown</span>
            {block:Album}{Album}{/block:Album}{block:PlayCount} &mdash;
            Plays: {FormattedPlayCount}{/block:PlayCount}
    {block:Caption}{Caption}{/block:Caption}
    {/block:PermalinkPage}
{/block:Audio}

{block:Video}
<div class="video">
{block:IndexPage}
    <div class="video-player">{Video-400}</div>
    {/block:IndexPage}
    {block:PermalinkPage}
    <div class="video-player">{Video-500}</div>
    {block:Caption}{Caption}{/block:Caption}
    {/block:permalinkPage}
{/block:Video}

{block:Answer}
        <div class="answer">
            <div class="question">
            <img class="asker" src="{AskerPortraitURL-30}">
            <span class="whoasked">{Asker}</span>{Question}</div>
            <hr>
            <div class="reply">
            {block:Answerer}{Answerer} replied: {Answer}{/block:Answerer}
            {Replies}
            <hr>
            </div>
        {/block:Answer}
{block:PermalinkPage}
<hr>
<footer class="details">
{block:HasTags}
    <ul id="tags">
    <li>filed under:</li>
        {block:Tags}<li> <a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
    </ul>
    <hr>
{/block:HasTags}
{block:PostNotes}
<div id="notes">
    {PostNotes}
</div>
{/block:PostNotes}
</footer>
<hr>
{/block:PermalinkPage}
<footer class="metadata">
            <a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} @ {12Hour}:{Minutes}{AmPm}</a>
            <span style="float:right"><span class="permas reblog">{ReblogButton color="black" size="17"}</span> <span class="permas like">{LikeButton color="black" size="17"}</span></span>
<!--Post footer (tags and notes) on displayed on permalink pages-->
 </article>
{/block:Posts}
<!--Close of article-->
</div>
<!--Pagination: previous/next page links-->
{block:Pagination}
<div class="pagination" {block:IfNotPagination}style="visibility:hidden;"{/block:IfNotPagination}>
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:IfNotPagination}
{block:NextPage}
<a href="{NextPage}">Next</a>
{/block:NextPage}
{/block:IfNotPagination}
</div>
{/block:Pagination}
<!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
<link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script>
$(document).ready(function(){
    $('.photo-slideshow').pxuPhotoset({
        lightbox: true,
        rounded: false,
        gutter: '10px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    });
});
</script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
<!--Code for infinite scroll and grid layout-->
<script>
(function() {
    var $tumblelog = $('#content');
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
    {block:IfNotPagination}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "article",
        bufferPx     : 50,
        done : "",
        loading: {
            finishedMsg: "<p> </p>",
            img : "",
            msg: null,
            msgText: "<p> </p>"
        },
    },
      function( newElements ) {
            var $newElems = $( newElements );
            $newElems.find('.photo-slideshow').pxuPhotoset({
                lightbox: true,
                rounded: false,
                gutter: '10px',
                photoset: '.photo-slideshow',
                photoWrap: '.photo-data',
                photo: '.pxu-photo'
            },
            function(){
                $tumblelog.masonry();
            });
            var $newElems = $(newElements).css({
                opacity: 0
            });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1, zIndex: 1 });
                $tumblelog.masonry( 'appended', $newElems );
            });
        });
        {/block:IfNotPagination}
})();

</script>
<script type="text/javascript">
function changeBgImage (image , id) {
  document.getElementById(id).style.backgroundImage = 'url('+image+')';
}
</script>
</body>
</html>