Diane Young Theme - by Chloe

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

Diane Young 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="image:Background" content="" />

<meta name="color:Background" content="#fff" />
<meta name="color:Title" content="#666" />
<meta name="color:Link Bar" content="#000" />
<meta name="color:Navlinks" content="#fff" />
<meta name="color:Text" content="#000" />
<meta name="color:Links" content="#666" />
<meta name="color:Posts" content="#fff" />
<meta name="color:Accent" content="#ccc" />

<meta name="if:Tiled Background" content="0"/>
<meta name="if:Pagination" content="0" />
<meta name="if:Fixed Header" content="1" />
<meta name="if:Captions" content="1" />
<meta name="if:Tags On Index Page" content="1" />

<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="" />
<meta name="text:Link 4" content="" />
<meta name="text:URL 4" content="" />
<meta name="text:Link 5" content="" />
<meta name="text:URL 5" content="" />
<meta name="text:Link 6" content="" />
<meta name="text:URL 6" 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;
}
body, .header {
    background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}
    no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    {/block:IfNotTiledBackground}
    {block:IfTiledBackground}
    repeat fixed;
    {/block:IfTiledBackground}
}
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:Link Bar};
    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:{color:Link Bar};
    color:{color:Navlinks};
    -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:{color:Navlinks};
    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:5px 0 0 0;
    z-index:9;
    text-align:left;
    width:100%;
    z-index:99999999999;
    /**/
    {block:IfFixedHeader}
    position:fixed;
    top:0;
    {/block:IfFixedHeader}
}
.header br {
    display:none;
}
.header h1 {
    margin:0 0 5px 15px;
    text-align:left;
    font-size:50px;
    display:inline-block;
    font-family: 'Italiana', serif;
}
.header h1 a {
    color:{color:Title};
}
.header p {
    display:inline-block;
    margin-left:20px;
    color:{color:Title};
}
ul.navlinks {
    list-style-type:none;
    width:calc(100% - 50px);
    background:{color:Link Bar};
    height:30px;
    line-height:30px;
    padding:5px 10px 5px 40px;
    color:#fff;
    font-size:14px;
    margin:0;

}
ul.navlinks li {
    display:inline-block;
    margin-right:10px;
}
ul.navlinks li:after {
    content:'|';
    margin-left:15px;
    color:{color:Navlinks};
}
ul.navlinks li:last-child:after {
    content:'';
}
ul.navlinks li a {
    color:{color:Navlinks};
}
.content {
    margin-left:auto;
    margin-right:auto;
    {block:IndexPage}
    margin-top:10px;
    width: 1200px;
    {/block:IndexPage}
    {block:PermalinkPage}
    margin-top:30px;
    width:1104px;
    margin-bottom:30px;
    {/block:PermalinkPage}
    /**/
    {block:IfFixedHeader}
    margin-top:120px;
    {/block:IfFixedHeader}
}
article {
    {block:IndexPage}
    margin:10px;
    width: 250px;
    {/block:IndexPage}
    padding:15px;
    position:relative;
    {block:permalinkpage}
    width:500px;
    margin:10px;
    display:inline-block;
    vertical-align:top;
    {/block:permalinkpage}
    background:{color:Posts};
}
.postnotes {
    width:500px;
    margin:10px;
    background:{color:Posts};
    padding:0 15px;
    position:relative;
    display:inline-block;
    border-bottom:15px solid {color:Posts};
    border-top:15px solid {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.permalinks {
    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.permalinks li {
    border-bottom:0;
    margin:0;
    padding:0;
    display:inline-block;
}
ul.permalinks li a {
    {block:IfNotBlackPermalinks}
    color:#ccc;
    {/block:IfNotBlackPermalinks}
    {block:IfBlackPermalinks}
    color:#000;
    {/block:IfBlackPermalinks}
}
ul.permalinks li:last-child {
    position:relative;
    top:-2px;
}
.post-image {
    overflow:hidden;
}
.post-image ul.permalinks2 {
    color:gray;
    list-style-type:none;
    padding:5px;
    margin:14px 14px 0 0;
    font-size:21px;
    font-family:verdana;
    padding:15px;
    text-align:right;
    overflow:hidden;
    line-height:24px;
    height:24px;
    position:absolute;
    top:-12px;
    right:-25px;
    width:80px;
    z-index:9999;
    background:rgba(255,255,255,0.7);
    opacity:0;
    visibility:hidden;
    -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;
}
.post-image:hover ul.permalinks2 {
    opacity:1;
    visibility:visible;
    top:0;
    right:0;
    -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;
}
ul.permalinks2 li {
    border-bottom:0;
    margin:0;
    padding:0;
    display:inline-block;
}
ul.permalinks2 li a {
    color:#000;
}
ul.permalinks2 li:last-child {
    position:relative;
    top:-2px;
}
.postnotes {
    overflow-y:auto;
}
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:Link Bar};
}
#infscr-loading img{
    display:none;
}
.pagination {
    width:100%;
    text-align:center;
    margin-top:20px;
}
.pagination a {
    padding:8px;
    background:{color:Posts};
    margin:7px;
    text-transform:uppercase;
}
</style>
</head>
<body>
<div class="header">
    <h1><a href="/">{Title}</a></h1>
    {block:Description}<p>{Description}</p>{/block:Description}
   <ul class="navlinks">
        <li><a href="/">home</a></li>
        {block:AskEnabled}
        <li><a href="/ask">ask</a></li>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <li><a href="/submit">submit</a></li>
        {/block:SubmissionsEnabled}
        {block:HasPages}
        {block:Pages}
        <li><a href="{URL}">{Label}</a></li>
        {/block:Pages}
        <br>
        {/block:HasPages}
        {block:IfLink1}
        <li><a href="{text:URL 1}">{text:Link 1}</a></li>
        {/block:IfLink1}
        {block:IfLink2}
        <li><a href="{text:URL 2}">{text:Link 2}</a></li>
        {/block:IfLink2}
        {block:IfLink3}
        <li><a href="{text:URL 3}" >{text:Link 3}</a></li>
        {/block:IfLink3}
        {block:IfLink4}
        <li><a href="{text:URL 4}">{text:Link 4}</a></li>
        {/block:IfLink4}
        {block:IfLink5}
        <li><a href="{text:URL 5}">{text:Link 5}</a></li>
        {/block:IfLink5}
        {block:IfLink6}
        <li><a href="{text:URL 6}" >{text:Link 6}</a></li>
        {/block:IfLink6}
        <li><a href="/archive">archive</a></li>
        <li><a href="http://dontbrag.tumblr.com" target="_blank">theme</a></li>
    </ul>
</div>
<div class="content">
{block:Posts}
<article>
    {block:Text}
    <div class="text">
        {block:Title}<h1>{Title}</h1>{block:Title}
        <p>{Body}</p>
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </div>
    {/block:Text}

    {block:Photo}
    <div class="photo">
    <div class="post-image">
        <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></center>
{block:IndexPage}
    <ul class="permalinks2">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </div>
    {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}
    <div class="post-image">
    {Photoset-250}
    <ul class="permalinks2">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    </div>
    {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}
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </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:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    {/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>
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </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}
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
</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}
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </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>
{block:IndexPage}
    <ul class="permalinks">
        <li>{LikeButton color="black"}</li>
        <li>{ReblogButton color="black"}</li>
        <li class="linky"><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
    </ul>
    {/block:IndexPage}
    </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}
</article>
{block:PermalinkPage}
{block:PostNotes}
<div id="notes" class="postnotes">
    {PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
{/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}
</div>
<div class="credit">
  <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/i5s2zks/LsEnr6g57/jquery.matchheight-min.js"></script>
<script>
$(function() {
    $('.postnotes').matchHeight({
        target: $('article')
    });
});
</script>
{block:IndexPage}
<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');
    {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>"
        },
    },
      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>
{/block:IndexPage}
</body>
</html>