Chandelier Theme - by Chloe

<!DOCTYPE html>
<head>
<!--
 _                  _     _
| |__  _   _    ___| |__ | | ___   ___
| '_ \| | | |  / __| '_ \| |/ _ \ / _ \
| |_) | |_| | | (__| | | | | (_) |  __/
|_.__/ \__, |  \___|_| |_|_|\___/ \___|
       |___/

Chandelier 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.

For html help go to @htmlqueens

-->
<meta name="color:Background" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Links" content="#666" />
<meta name="color:Title" content="#666" />
<meta name="color:Sidebar" content="#222" />
<meta name="color:Sidebar Text" content="#666" />
<meta name="color:Sidebar Lines" content="#333" />
<meta name="color:Sidebar Link Hover Background" content="#1c1c1c" />
<meta name="color:Content" content="#ccc" />
<meta name="color:Posts" content="#fff" />
<meta name="color:Accent" content="#ccc" />

<meta name="if:Pagination" content="0" />
<meta name="if:Captions" content="1" />
<meta name="if:Tags On Index Page" content="1" />
<meta name="if:Black Permalinks" content="0" />

<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>
<title>{text:Tab Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Italiana' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
    color: {color:Text};
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
}
::-webkit-scrollbar {
    background-color: {color:Content};
    height: 5px;
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: {color:Links};
}
::-webkit-scrollbar-corner {
    background-color: {color:Content};
}
iframe, img, embed, object, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
    vertical-align:middle;
}
blockquote {
    border-left:1px solid {color:Accent};
    margin:0 0 0 15px;
    padding:0 0 0 5px;
}
a {
    color:{color:Links};
    text-decoration:none;
    cursor:pointer;
}
a:hover {
    cursor:pointer;
}
a:focus {
    outline:none;
}
b, strong {
    font-weight:600;
}
hr {
    height:1px;
    border:0;
    background:{color:Accent};
}
h1 {
    font-weight:400;
}
cite {
    margin-top:3px;
    display:block;
    text-align:right;
}
.credit {
    width:14px;
    height:13px;
    color: {color:Links};
    position:fixed;
    bottom: 15px;
    right: 15px;
    line-height: 14px;
    font-size:12px;
    text-transform: uppercase;
    padding:3px 4px;
    overflow: hidden;
        z-index:999999999999999999;
    text-align:left;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
  }
  .fa-diamond {
      position:absolute;
      right:3px;
  }
    .credit:hover {
    width:126px;
    background:#222;
    color:#fff;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
  }
  .credit a {
    color:#fff;
    text-decoration: none;
  }
  .credit .mine {
    opacity:0;
    visibility:hidden;
  }
  .credit:hover .mine {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease-in-out 0.5s;
       -moz-transition: all 0.5s ease-in-out 0.5s;
         -o-transition: all 0.5s ease-in-out 0.5s;
            transition: all 0.5s ease-in-out 0.5s;
}
.header {
    padding:15px;
    z-index:9;
    text-align:center;
    font-family: 'Italiana', serif;
}
.header h1 {
    margin:0;
    text-align:center;
    font-size:50px;
}
.header h1 a {
    color:{color:Title};
}

.content {
    margin-left:auto;
    margin-right:auto;
    width: 915px;
    background:{color:Content};
    border-left:10px solid {color:Content};
    border-top:20px solid {color:Content};
    border-bottom:20px solid {color:Content};
    height:calc(100vh - 182px);
    overflow:scroll;
}
section {
    {block:IndexPage}
    margin-top:-10px;
    {/block:IndexPage}
    {block:PermalinkPage}
    margin:0 auto;
    width:530px;
    {/block:PermalinkPage}
}
article {
    {block:IndexPage}
    margin:10px;
    width: 250px;
    {/block:IndexPage}
    padding:15px;
    position:relative;
    {block:permalinkpage}
    width:500px;
    {/block:permalinkpage}
    background:{color:Posts};
}
article h1 {
    margin:0;
}
article p {
    margin:10px 0;
}
article ul {
    padding:0;
    margin-left:30px;
}
.photoset {
    margin-bottom:-1px;
}
.short h1 {
    font-size:2em;
}
.medium h1 {
    font-size:1.5em;
}
.long h1 {
    font-size:1em;
}
ul.chat-list {
    list-style-type:none;
    padding:0;
    margin:0;
}
ul.chat-list li {
    margin:3px 0;
    padding:3px 0;
}
span.label {
    font-weight:bold;
}
.tumblr_audio_player {
    height: 30px;
    {block:IndexPage}
    width: 250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
}
.question2 p {
    display:inline;
    margin:0;
}
ul.permalinks2 {
    color:gray;
    list-style-type:none;
    padding:0;
    margin:10px 0 0 0;
    font-size:21px;
    font-family:verdana;
    padding:0 5px;
    text-align:right;
    overflow:hidden;
    line-height:24px;
    height:24px;
}
ul.permalinks2 li {
    border-bottom:0;
    margin:0;
    padding:0;
    display:inline-block;
}
ul.permalinks2 li a {
    {block:IfNotBlackPermalinks}
    color:#ccc;
    {/block:IfNotBlackPermalinks}
    {block:IfBlackPermalinks}
    color:#000;
    {/block:IfBlackPermalinks}
}
ul.permalinks2 li:last-child {
    position:relative;
    top:-2px;
}
ol.notes {
    list-style-type: none;
    margin:0 5px 0 0;
    padding:0;
}

ol.notes li.note {
    padding:0;
    text-align:left;
    line-height:16px;
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    padding-bottom:3px;
    padding-top:3px;
}
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;
}
.taggy {
    font-size:10px;
}
#infscr-loading {
    position:absolute;
    bottom:-10px;
    left:10px;
    text-align:left;
    color:{color:Links};
}
#infscr-loading img{
    display:none;
}
/*----------*/
.wrapper {
  width: 100%;
  box-sizing: border-box;

}
.trigger {
    font-size:40px;
    margin:10px;
    position:fixed;
    z-index:80000;
}
a.trigger {
    color:{color:Title};
}
.sidebar {
    background:{color:Sidebar};
    font-size:16px;
}
img.avatar {
    border-radius:50%;
    margin:20px auto;
    width:96px;
    border:3px solid {color:Sidebar Text};
    display:block;
}
.desc {
    border-top:1px solid {color:Sidebar Lines};
    margin:0;
    text-align:justify;
    padding:10px 20px;
    color:{color:Sidebar Text};
}
.sidebar ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
.sidebar ul li {
    padding:10px 20px;
    border-top:1px solid {color:Sidebar Lines};
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
.sidebar ul li:hover {
    background:{color:Sidebar Link Hover Background};
    padding-left:40px;
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
.sidebar ul li.last {
    border-bottom:1px solid {color:Sidebar Lines};
}
.copyright {
    display:block;
    color:{color:Sidebar Text};
    position:absolute;
    bottom:20px;
    width:100%;
    text-align:center;
}
/*---------------*/
    html, body {
  height: 100%;
  overflow-x: hidden; }

.jsc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;}

.jsc-sidebar-content {
  position: relative;
  top: 0;
  left: 0;
  min-height: 100%;
  z-index: 10;
  background-color: {color:Background};

}

.jsc-sidebar-pulled {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000; }

.jsc-sidebar-pushed {
  -webkit-transform: translate3d(220px, 0, 0);
  -moz-transform: translate3d(220px, 0, 0);
  -ms-transform: translate3d(220px, 0, 0);
  -o-transform: translate3d(220px, 0, 0);
  transform: translate3d(220px, 0, 0); }

.jsc-sidebar-scroll-disabled {
  position: fixed;
  overflow: hidden; }
.pagination {
    width:100%;
    text-align:center;
    margin-top:20px;
}
.pagination a {
    padding:8px;
    background:{color:Posts};
    margin:5px;
    text-transform:uppercase;
}
</style>
</head>
<body>
<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled"><!--start wrapper-->
	<nav>
		<a href="#" class="trigger jsc-sidebar-trigger"><i class="fa fa-bars fa-fw"></i></a>
	</nav>
<div class="header">
    <h1><a href="/">{Title}</a></h1>
</div>
<div class="content">
<section>
{block:Posts}
<article>
    {block:Text}
    <div class="text">
        {block:Title}<h1>{Title}</h1>{block:Title}
        <p>{Body}</p>
    </div>
    {/block:Text}

    {block:Photo}
    <div class="photo">
        <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></center>
    {block:indexpage}
    {block:IfCaptions}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:IfCaptions}
    {/block:indexpage}
    {block:permalinkpage}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:permalinkpage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div class="photoset">
    {block:indexpage}
    {Photoset-250}
    {block:IfCaptions}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:IfCaptions}
    {/block:indexpage}
    {block:permalinkpage}
    {Photoset-500}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:permalinkpage}
    </div>
    {/block:Photoset}

    {block:Quote}
    <div class="quote {Length}">
        <h1>&ldquo;{Quote}&rdquo;</h1>
        {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}
    <div class="link">
        <h1>&#8627;<a href="{URL}" {Target}>{Name}</a></h1>
        {block:Description}<p>{Description}</p>{/block:Description}
    </div>
    {/block:Link}

    {block:Chat}
    <div class="chat">
        {block:Title}<h1>{Title}</h1>{/block:Title}
        <ul class="chat-list">
        {block:Lines}
            <li class="{Alt}">
            {block:Label}<span class="label">{Label}</span>{/block:Label}
            {Line}</li>
         {/block:Lines}
         </ul>
    </div>
    {/block:Chat}

    {block:Audio}
<div class="audio">
    {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
            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:Audio}

    {block:Video}
    <div class="video">
    {block:indexpage}
    {Video-250}
    {block:IfCaptions}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:IfCaptions}
    {/block:indexpage}
    {block:permalinkpage}
    {Video-500}
    {block:Caption}<p>{Caption}</p>{/block:Caption}
    {/block:permalinkpage}
    </div>
    {block:Video}

    {block:Answer}
    <div class="answer">
    <div>{lang:Asker asked 2}: {Question}</div>
    {block:Answerer}
    <div class="question2">{Answerer} replied: {Answer}</div>
    {/block:Answerer}
    <p>{Replies}</p>
    </div>
    {/block:Answer}
    {block:indexpage}
<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->
{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
{/block:IndexPage}
{block:IndexPage}
{block:IfTagsOnIndexPage}
{block:HasTags}<hr style="visibility:hidden;"><div class="taggy">{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}</div>{/block:HasTags}
{/block:IfTagsOnIndexPage}
{/block:IndexPage}
{block:PermalinkPage}
{block:HasTags}<div class="taggy">{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}</div>{/block:HasTags}
{/block:PermalinkPage}
{block:IndexPage}
    <ul class="permalinks2">
        <li>{block:IfNotBlackPermalinks}{LikeButton}{/block:IfNotBlackPermalinks}{block:IfBlackPermalinks}{LikeButton color="black"}{/block:IfBlackPermalinks}</li>
        <li>{block:IfNotBlackPermalinks}{ReblogButton}{/block:IfNotBlackPermalinks}{block:IfBlackPermalinks}{ReblogButton color="black"}{/block:IfBlackPermalinks}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
{block:PermalinkPage}
{block:PostNotes}
<hr>
<div id="notes" class="postnotes">
    {PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</article>
{/block:Posts}
{block:Pagination}
    <div class="pagination" {block:IfNotPagination}style="visibility:hidden;height:0;overflow-hidden;"{/block:IfNotPagination}>
    {block:PreviousPage}<a class="prev" href="{PreviousPage}">prev.</a>{/block:PreviousPage}
    {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}
    </div>
{/block:Pagination}
</section>
</div>
<div class="credit">
  <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
</div>
</div><!--end wrapper-->
		<nav class="sidebar jsc-sidebar" id="jsi-nav" data-sidebar-options="">
		<img class="avatar" src="{PortraitURL-96}">
		{block:Description}<p class="desc">{Description}</p>{/block:Description}
	<ul class="sidebar-list">
		<a href="/"><li>home</li></a>
        {block:AskEnabled}
        <a href="/ask"><li>ask</li></a>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <a href="/submit"><li>submit</li></a>
        {/block:SubmissionsEnabled}
        {block:HasPages}
        {block:Pages}
        <a href="{URL}"><li>{Label}</li></a>
        {/block:Pages}
        {/block:HasPages}
        {block:IfLink1}
        <a href="{text:URL 1}"><li>{text:Link 1}</li></a>
        {/block:IfLink1}
        {block:IfLink2}
        <a href="{text:URL 2}"><li>{text:Link 2}</li></a>
        {/block:IfLink2}
        {block:IfLink3}
        <a href="{text:URL 3}" ><li>{text:Link 3}</li></a>
        {/block:IfLink3}
        <a href="/archive"><li>archive</li></a>
        <a href="http://dontbrag.tumblr.com" target="_blank"><li class="last">theme</li></a>
	</ul>
	<div class="copyright">&copy; {CopyrightYears}</div>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script src="http://static.tumblr.com/yxfeliq/ERqnt1adt/sidebar.js"></script>


		<script>
			$('#jsi-nav').sidebar({
				trigger: '.jsc-sidebar-trigger',
				pullCb: function () { console.log('pull'); },
				pushCb: function () { console.log('push'); }
			});
		</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 = $('section');
    {block:IfNotPagination}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "article",
        bufferPx     : 50,
        done : "",
        loading: {
            finishedMsg: "<p>You've reached the end of the Earth.</p>",
            img : "",
            msg: null,
            msgText: "<p><i class='fa fa-spinner fa-pulse fa-3x'></i></p>"
        },
        behavior: 'local',
        binder: $('.content'),
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    {/block:IfNotPagination}
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
</body>
</html>