Keith Haring Theme - by Chloe

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

Keith Haring 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.

If I find any of this anywhere me & my squad (aka @fruitelf and @costalies) will personally drag ur name thru the dirt do not test us.

For html help go to @htmlqueens

------------------------------------------->
<meta name="image:Background" content="" />

<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#888"/>
<meta name="color:Borders" content="#bbe4d0" />
<meta name="color:Links" content="#000" />
<meta name="color:Link Hover" content="#56bc8a" />

<meta name="select:Columns" content="col2" title="2" />
<meta name="select:Columns" content="col3" title="3" />
<meta name="select:Columns" content="col4" title="4" />

<meta name="if:Tiled Background" content="0" />
<meta name="if:Show Tags" content="0" />

<meta name="text:Link 1" content="" />
<meta name="text:URL 1" content="http://" />
<meta name="text:Link 2" content="" />
<meta name="text:URL 2" content="http://" />
<meta name="text:Link 3" content="" />
<meta name="text:URL 3" content="http://" />

<meta charset="UTF-8" />
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#tumblr_controls {
    top:0px!important;
    right:0px!important;
    -webkit-filter: invert(100%);
    position:fixed!important;
}
::-webkit-scrollbar {
    background-color:#fff;
    height: 7px;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    background-color:{color:Borders};
    border:2px solid #fff;
}
::selection {
    background:transparent;
    color:{color:Borders};
}
::-moz-selection {
    background:transparent;
    color:{color:Borders};
}
body{
    background:{color:background} url({image:Background})
    {block:IfTiledBackground}
    repeat fixed;
    {/block:IfTiledBackground}
    {block:IfNotTiledbackground}
    no-repeat center center fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    {/block:IfNotTiledbackground}
    color:{color:text};
    font-size:12px;
    font-family: 'Consolas', monospace;
    font-weight:400;
}
a {
    text-decoration:none;
    color:{color:Links};
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover {
    color:{color:link hover};
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
iframe, img, embed, object, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
    vertical-align:middle;
}
#infscr-loading {
    position:absolute;
    bottom:25px;
    width:200px;
    margin-left:50%;
    left:-100px;
    text-align:center;
}
#header {
    text-align:left;
    margin:0;
    margin-bottom:30px;
    z-index:999;
}
#header h1 {
    margin:0;
    color:{color:links};
}
#header p {
    font-size:11px;
}
ul#navlinks {
    list-style-type:none;
    font-size:12px;
    margin: 15px 0px 5px 0px;
    padding:10px 0 0 0;
    z-index:99;
    text-align:left;
    border-top:1px solid {color:borders};
}
ul#navlinks li {
    line-height:20px;
    display:inline-block;
    text-transform:capitalize;
    text-align:left;
    margin:0 5px;
    position:relative;
}
ul#navlinks a {
    color:{color:links};
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
ul#navlinks a:hover {
    color:{color:link hover};
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
#wrapper {
    margin-left:50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    margin-top:50px;
    {block:PermalinkPage}
    width:522px;
    {/block:PermalinkPage}
}
{block:IndexPage}
.col2 {
    width:594px;
}
.col3 {
    width:916px;
}
.col4 {
    width:1238px;
}
{/block:IndexPage}
{block:PermalinkPage}
#posts {
    position:relative;
}
{/block:PermalinkPage}
.credit {
    width:16px;
    height:14px;
    color: {color:links};
    position:fixed;
    bottom: 25px;
    right: 25px;
    line-height: 14px;
    font-size:12px;
    padding:3px 4px;
    overflow: hidden;
        z-index:999999999999999999;
    text-align:left;
    border-bottom:1px solid {color:borders};
    -webkit-transition: all 0.5s ease-in-out 0.2s;
       -moz-transition: all 0.5s ease-in-out 0.2s;
         -o-transition: all 0.5s ease-in-out 0.2s;
            transition: all 0.5s ease-in-out 0.2s;
  }
.credit .fa-diamond {
    position:absolute;
    right:5px;
    color:{color:links};
    -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:hover .fa-diamond {
  transform: rotateY(180deg);
    -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:hover {
    width:130px;
    color:{color:text};
    -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 .wordy {
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
  }
.credit:hover .wordy {
    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;
}
.credit a .wordy {
    color:{color:links};
    text-decoration: none;
    font-size:12px;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
  }
.credit a:hover .wordy {
    cursor:help;
    color:{color:link hover};
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
article {
    margin-bottom:60px;
    position:relative;
    padding:10px;
    border:1px solid {color:borders};
    {block:IndexPage}
    width:250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
    background:#fff;
}
article h2 {
    margin:0;
    font-size:1.3em;
    font-weight:bold;
}
article p {
    margin:10px 0;
}
article blockquote {
    margin: 5px 0 5px 10px;
    border-left:2px solid {color:borders};
    padding-left:10px;
}
article ul, article ol {
    padding-left:25px;
}
.quote-post cite {
    text-align:right;
    display:block;
    margin:5px 5px 10px 5px;
}
ul.chat-list {
    padding:0;
    list-style-type:none;
}
ul.chat-list li {
    line-height:17px;
}
ul.chat-list .label {
    color:{color:borders};
}
.album-art img {
    {block:IndexPage}
    width:80px;
    height:80px;
    {/block:IndexPage}
    float:left;
    margin-right:10px;
    {block:PermalinkPage}
    width:120px;
    height:120px;
    {/block:PermalinkPage}
}
.audio-info {
    {block:IndexPage}
    min-height:80px;
    {/block:IndexPage}
    {block:PermalinkPage}
    min-height:120px;
    line-height:140%;
    {/block:PermalinkPage}
    margin-bottom:10px;
}
.tumblr_audio_player {
    position: absolute;
    {block:IndexPage}
    top: 25px;
    left: 25px;
    {/block:IndexPage}
    {block:PermalinkPage}
    top: 45px;
    left: 45px;
    {/block:PermalinkPage}
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0.8;
}
.permalinks {
    margin-top:10px;
    text-transform:capitalize;
    padding:0 2px;
}
{block:IfShowTags}
.taggy {
    text-align:center;
    background:#f6f6f6;
    margin-top:10px;
    padding:4px 2px;
    line-height:14px;
}
{/block:IfShowTags}
.permalinks a:last-child {
    float:right;
}
.extra-info {
    position: absolute;
    padding: 0 20px;
    line-height: 20px;
    width: 120px;
    text-align: left;
    top: 0px;
    left: 100%;
    word-break:break-all;
}
.extra-info .fa {
    color:{color:link hover};
}
ol.notes {
    padding: 0px;
    margin: 20px 0;
    list-style-type: none;
}
ol.notes a {
    border-bottom:0;
}
ol.notes li.note {
    padding: 3px;
    margin-bottom:3px;
}
ol.notes li.note img.avatar {
    float:right;
    border-radius:50%;
}
ol.notes li.note blockquote {
    border-color: {color:text};
    padding-left: 6px;
    margin: 6px;
}
ol.notes li.note blockquote a {
    text-decoration: none;
}
a:focus {
    outline:none;
}
</style>
</head>
<body>
<div id="wrapper" class="{select:Columns}">
<div id="header">
    <h1>{Title}</h1>
    {block:Description}
    <p>{Description}</p>
    {/block:Description}
    <ul id="navlinks">
        <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: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}
        <a href="/archive"><li>archive</li></a>
        <a href="http://dontbrag.tumblr.com" target="_blank"><li>theme</li></a>
    </ul>
</div>
<div id="posts">
{block:Posts}
<article>
    {block:Text}
    <div class="text-post">
        {block:Title}<h2>{Title}</h2>{/block:Title}
        {Body}
    </div>
    {/block:Text}

    {block:Photo}
    <div class="photo-post">
        {block:IndexPage}
        <div class="photo-wrap"><img src="{PhotoURL-250}" class="photos"></div>
        {/block:IndexPage}
        {block:PermalinkPage}
        <div class="photo-wrap"><img src="{PhotoURL-500}" class="photos"></div>
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div class="photoset-post">
        {block:IndexPage}
        {Photoset-250}
        {/block:IndexPage}
        {block:PermalinkPage}
        {Photoset-500}
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photoset}

    {block:Quote}
    <div class="quote-post">
        <h2><span style="color:{color:borders};">❝</span> {Quote} <span style="color:{color:borders};">❞</span></h2>
        {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}
    <div class="link-post">
        <h2><a href="{URL}" {Target}>{Name} &nbsp;<i class="fa fa-angle-right"></i></a></h2>
        {block:Description}{Description}{/block:Description}
    </div>
    {/block:Link}

    {block:Chat}
    <div class="chat-post">
        {block:Title}<h2>{Title}</h2>{/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:AlbumArt}
        <div class="album-art">
            <img src="{AlbumArtURL}">
        </div>
        {/block:AlbumArt}
        <div class="audio-info">
        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}<br>
        Plays: {FormattedPlayCount}</div>
        {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
    </div>
    {block:PermalinkPage}
    {block:Caption}{Caption}{/block:Caption}
    {/block:PermalinkPage}
    {/block:Audio}

    {block:Video}
    <div class="video-post">
        {block:IndexPage}
        {Video-250}
        {/block:IndexPage}
        {block:PermalinkPage}
        {Video-500}
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Video}


    {block:IndexPage}
    {block:IfShowTags}{block:HasTags}
    <div class="taggy">
    {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}
    </div>{/block:HasTags}{/block:IfShowTags}
    <div class="permalinks"{block:IfShowTags}{block:HasTags} style="margin-top:8px;"{/block:HasTags}{/block:IfShowTags}>
        <a href="{ReblogURL}" target="_blank">reblog</a>
        <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}

    {block:PermalinkPage}

    {block:PostNotes}
    <div id="notes">
        {PostNotes-16}
    </div>
    {/block:PostNotes}
    {/block:PermalinkPage}

</article>
{block:PermalinkPage}

    <div class="extra-info">
        {block:Date}<i class="fa fa-clock-o"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
        {block:NoteCount}<br><i class="fa fa-files-o"></i> {NoteCount}{/block:NoteCount}
        {block:RebloggedFrom}<br><i class="fa fa-retweet"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
        {block:ContentSource}<br><i class="fa fa-copyright"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
        {block:HasTags}<br><i class="fa fa-tag"></i> {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}{/block:HasTags}
    </div>
{/block:PermalinkPage}
{/block:Posts}
</div><!--end posts-->
</div><!--end wrapper-->

{block:Pagination}
<div class="pagination" style="visibility:hidden;">
{block:PreviousPage}
<a href="{PreviousPage}">previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" id="next">next</a>
{/block:NextPage}
</div>
{/block:Pagination}
<div class="credit">
  <i class="fa fa-diamond"></i><a class="mine" target="_blank" href="http://dontbrag.tumblr.com"><span class="wordy">By Chloe Themes</span></a>
</div>
{block:IndexPage}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
<script>
(function () {
 var $tumblelog = $('#posts');
 $tumblelog.imagesLoaded(function () {
    $tumblelog.masonry({
        itemSelector: 'article',
        isAnimated:true,
        columnWidth:272,
        gutterWidth:50,
    });
});
$tumblelog.infinitescroll({
    navSelector : "div.pagination",
    nextSelector : ".pagination a#next",
    itemSelector : "article",
    loading: {
        finishedMsg: "<p>You've reached the end of the Earth.</p>",
        img : "http://static.tumblr.com/yxfeliq/ZQFnvhfad/dontbrag-loading.gif",
        msg: null,
        msgText: ""
    },
},

function( newElements ) {
        var $newElems = $(newElements)
        $newElems.hide();
        $newElems.imagesLoaded(function(){
            $tumblelog.masonry( 'appended', $newElems, {
                isAnimated: true,
                animationOptions: {
                    duration: 250,
                    easing: 'linear',
                    queue: false
                }
            },
            function(){
                    $newElems.fadeIn('slow');
            });
        });
    });
})();
</script>
{/block:IndexPage}
<div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5122647";
var ref = (''+document.referrer+'');var pn =  window.location;var w_h = window.screen.width + " x " + window.screen.height;
fhs.src = "http://freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
</script></div>
<!--/////////End Masonry//////////-->

</body>
</html>