Butter Cream Theme - by Chloe

<!DOCTYPE html>
<html>
<head>
<!------------------------------------------

(◍•ᴗ•◍)♡ ✧*。

Butter Cream Theme by Chloe | @dontbrag | @bychloethemes

> Do not delete/alter any credit.
> Do not claim as your own.
> Do not copy any code.
> Do not redistribute.

------------------------------------------->

<meta name="image:Background" content="" title="Background Image"/>

<meta name="color:Background" content="#fff"/>

<meta name="color:Text" content="#666"/>
<meta name="color:Accent" content="#efe0cd" />

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

<meta name="if:Tiled Background" content="1"/>

<meta name="text:Link 1" content="link 1" />
<meta name="text:URL 1" content="http://" />
<meta name="text:Link 2" content="link 2" />
<meta name="text:URL 2" content="http://" />
<meta name="text:Link 3" content="link 3" />
<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" />
<link href='//fonts.googleapis.com/css?family=Dancing+Script|Roboto+Condensed' rel='stylesheet' type='text/css'>
<script src="//use.edgefonts.net/shadows-into-light-two.js"></script>
<style type="text/css">
#tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
    top:10px!important;
    right:10px!important;
    -webkit-filter: invert(100%);
    position:fixed!important;
}
::-webkit-scrollbar {
    background-color:#fff;
    height: 7px;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    background-color:{color:Accent};
    border:2px solid #fff;
}
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:14px;
    letter-spacing:0.5px;
    font-family: shadows-into-light-two, sans-serif;
    font-weight:300;
}
a {
    text-decoration:none;
    color:{color:Text};
}
iframe, img, embed, object, video {
    max-width: 100%;
}
img {
    height: auto;
    width: auto;
    vertical-align:middle;
}
#infscr-loading {
    position:absolute;
    bottom:30px;
    width:200px;
    margin-left:50%;
    left:-100px;
    text-align:center;
}
#infscr-loading img{
}
#top, #left, #bottom, #right {
    background:{color:Accent};
    position:fixed;
    z-index:999;
}
#top, #bottom {
    height:10px;
    width:100%;
    left:0;
}
#left, #right {
    width:10px;
    height:100%;
    top:0;
}
#top { top:0px; }
#left { left:0px; }
#bottom { bottom:0; }
#right { right:0; }
#sidebar {
    width:100%;
    text-align:center;
    padding:10px 0;
    margin:20px auto;
}
#sidebar h1 {
    font-weight:normal;
    font-size:2.8em;
    margin:0;
    font-family: shadows-into-light-two, sans-serif;
}
ul#navlinks {
    list-style-type:none;
    font-size:12px;
    margin:0 0 10px 0;
    padding:0;
    z-index:99;
}
ul#navlinks li {
    line-height:20px;
    display:inline-block;
    text-transform:uppercase;
    text-align:center;
    padding:0px 10px;
    margin:0;
    background:{color:accent};
    border-bottom:2px solid {color:accent};
    border-top:2px solid {color:accent};
    font-family: 'Roboto Condensed', sans-serif;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
ul#navlinks:before {
    content:'';
    height:20px;
    background:{color:accent};
    border-bottom:2px solid {color:accent};
    border-top:2px solid {color:accent};
    display:inline-block;
    width:10px;
    margin-bottom:-8px;
}
ul#navlinks:after {
    content:'';
    height:20px;
    background:{color:accent};
    border-bottom:2px solid {color:accent};
    border-top:2px solid {color:accent};
    display:inline-block;
    width:10px;
    margin-bottom:-8px;
}
ul#navlinks a {
    color:{color:text};
}
ul#navlinks a:hover li {
    border-bottom:2px solid {color:text};
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
ul#navlinks a:hover {
    color:{color:text};
}
#sidebar p {
    margin:0 auto;
    width:300px;
}
#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:30px;
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
}
{block:IndexPage}
.column-2 {
    width:540px;
}
.column-3 {
    width:830px;
}
.column-4 {
    width:1120px;
}
{/block:IndexPage}
.credit {
    width:14px;
    height:14px;
    color: {color:Text};
    position:fixed;
    bottom: 15px;
    left: 15px;
    line-height: 14px;
    font-size:12px;
    text-transform: uppercase;
    padding:3px 4px;
    overflow: hidden;
        z-index:999999999999999999;
    text-align:left;
    font-family:'roboto condensed', sans-serif;
    -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 {
    margin-right:5px;
  }
.credit:hover {
    width:126px;
    background:#444;
    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;
}
article {
    margin-bottom:40px;
    position:relative;
    {block:IndexPage}
    width:250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
}
.photos {
    outline:5px solid {color:Accent};
    outline-offset:0px;
}
article a {
    color:{color:Accent};
}
article h2 {
    margin:0;
    font-size:1.3em;
}
article p {
    margin:10px 0;
}
article blockquote {
    margin: 5px 0 5px 10px;
    border-left:2px solid {color:Accent};
    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:Accent};
    font-weight:bold;
}
.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;
}
.photo-mask {
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 0.4s ease-in;
       -moz-transition: all 0.4s ease-in;
         -o-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;
    outline:2px solid #fff;
    outline-offset:-17px;
    background:rgba({RGBcolor:text}, 0.6);
}
article:hover .photo-mask {
    opacity:1;
    visibility:visible;
    outline-offset:-12px;
    -webkit-transition: all 0.4s ease-in;
       -moz-transition: all 0.4s ease-in;
         -o-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;
}
.photo-info {
    top:50%;
    left:50%;
    padding: 7px;
    position:relative;
    text-align:center;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color:{color:Accent};
    width:60%;
}
.photo-info a {
    background:transparent;
    color:#fff;
    padding:2px 5px;
    margin:3px ;
    line-height:200%;
    font-family: 'Roboto Condensed', sans-serif;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
.photo-info a:hover {
    color:{color:text};
    background:#fff;
    -webkit-transition: all 0.4s ease-in-out;
       -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
}
.other_perma {
    text-align:right;
    color:{color:Accent};
    padding:3px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.extra-info {
    position: fixed;
    padding: 0 20px;
    line-height: 20px;
    width: 120px;
    text-align: left;
    top: 170px;
    left: 100%;
}
.extra-info .fa {
    color:{color:Accent};
}
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;
}
#image {
</style>
</head>
<body>
<div id="top">
</div>
<div id="left"></div><div id="right"></div>
<div id="bottom"></div>

<div id="wrapper" class="column-{select:columns}">
<div id="sidebar">
    <h1>{Title}</h1>
    <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}<!--
        --><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>theme</li></a><!--
    --></ul>
    {block:Description}<p>{Description}</p>{/block:Description}
</div>
<div id="posts">
{block:Posts}
<article>
    {block:Text}
    <div class="text-post">
        {block:Title}<h2>{Title}</h2>{/block:Title}
        {Body}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/block:Text}

    {block:Photo}
    <div class="photo-post">
        {block:IndexPage}
        <div class="photo-mask">
            <div class="photo-info"><a href="{Permalink}" target="_blank">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a> <a href="{ReblogURL}" target="_blank">REBLOG</a> <br><a href="{Permalink}" target="_blank">{NoteCount}+</a></div>
        </div>
        <img src="{PhotoURL-250}" class="photos">
        {/block:IndexPage}
        {block:PermalinkPage}
        <img src="{PhotoURL-500}" class="photos">
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div class="photoset-post">
        {block:IndexPage}
        {Photoset-250}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
        {/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:Accent};">❝</span> {Quote} <span style="color:{color:Accent};">❞</span></h2>
        {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
    </div>
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/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:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/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:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {/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:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}
    {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}
    {block:IndexPage}
    <div class="other_perma">
        <a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a> &nbsp;/&nbsp; <a href="{Permalink}" target="_blank">{NoteCount}+</a>
    </div>
    {/block:IndexPage}</div>
    {/block:Video}

    {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>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</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:250,
        gutterWidth:40,
    });
});
$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 = "5093860";
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>