Dusk Blue Theme - by Chloe

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

Dusk Blue Theme (Temptation Revamp) 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 tags-->
<meta name="image:Sidebar" content="" />

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

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

<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='https://fonts.googleapis.com/css?family=Quicksand|Roboto+Condensed|PT+Sans:400,700' 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:Accent};
    border:2px solid #fff;
}
body{
    background:{color:background};
    color:{color:text};
    font-size:13px;
    font-family: 'PT Sans', 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-bar {
    position:fixed;
    border-bottom:2px solid {color:accent};
    top:0;
    padding-top:30px;
    width:calc(100% - 280px);
    left:30px;
    padding-left:250px;
    background:{color:background};
    z-index:99;
}
#top-bar h1 {
    margin-left:30px;
    font-family:'Quicksand', sans-serif;
}
#sidebar {
    width:240px;
    border-right:2px solid {color:Accent};
    position:fixed;
    left:0;
    top:0;
    height:100%;
    margin-top:30px;
    padding-left:30px;
    padding-top:100px;
    z-index:999;
}
#sidebar-pic {
    width:160px;
    height:160px;
    margin:0 auto 30px auto;
    border-radius:50%;
    border:2px solid {color:accent};
    padding:5px;
    position:relative;
}
#sidebar p {
    text-align:justify;
    padding:0 20px;
}
#sidebar-pic img {
    width:160px;
    height:160px;
    border-radius:50%;
}
ul#navlinks {
    text-align:right;
    list-style-type:none;
    font-size:12px;
    margin:0;
    margin-top:10px;
    padding:0;
    z-index:99;
    display:inline-block;
    width: calc(100% - 20px);
    height:50px;
    text-shadow: 1px 1px rgba(255,255,255, 0.6);
    font-family:'Roboto Condensed', sans-serif;
}
ul#navlinks li {
    line-height:20px;
    display:block;
    margin:0px;
    text-transform:uppercase;
    padding:0;
    font-weight:bold;
}
ul#navlinks li a {
    -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 li a:hover {
    margin-right:10px;
    -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-top:135px;
    margin-left:310px;
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage}
    {block:IndexPage}
    width:830px;
    {/block:IndexPage}
}
.credit {
    width:16px;
    height:14px;
    color: {color:Text};
    position:fixed;
    bottom: 15px;
    right: 15px;
    line-height: 14px;
    font-size:12px;
    padding:3px 4px;
    overflow: hidden;
        z-index:999999999999999999;
    text-align:left;
    font-family:'PT Sans', sans-serif;
    border-bottom:1px solid {color:accent};
    -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 a {
    border-bottom:none;
}
.credit .fa-diamond {
    position:absolute;
    right:5px;
    -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 a .wordy {
    color:{color:text};
    text-decoration: none;
    font-size:14px;
  }
.credit a:hover {
    cursor:help;
}
.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;
}
article {
    margin-bottom:40px;
    position:relative;
    {block:IndexPage}
    width:250px;
    {/block:IndexPage}
    {block:PermalinkPage}
    width:500px;
    background:rgba(255,255,255,0.5);
    {/block:PermalinkPage}
}
article a {
    color:{color:Accent};
}
article h2 {
    margin:0;
    font-size:1.4em;
    font-family:'Quicksand', sans-serif;
}
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;
}
{block:PermalinkPage}
.text-post, link-post, .chat-post, .quote-post, .audio-post {
    padding:2px;
}
{/block:PermalinkPage}
.photo-mask {
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
    visibility:hidden;
    background:rgba(255,255,255,0.9);
    -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;
}
article:hover .photo-mask {
    opacity:1;
    visibility:visible;
    -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 {
    top:50%;
    left:50%;
    padding: 20px;
    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:#000;
}
.photo-info a {
    background:{color:Accent};
    color:#fff;
    padding:2px 5px;
    margin:3px ;
    line-height:200%;
    font-family: 'Roboto Condensed', sans-serif;
    -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;
}
.photo-info a:hover {
    color:{color:Accent};
    background:#fff;
    -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;
}
.other_perma {
    text-align:center;
    background:{color:Accent};
    color:#fff;
    padding:3px 10px;
}
.other_perma a {
    color:#fff;
}

.extra-info {
    padding: 0px 10px;
    line-height: 20px;
    text-align: left;
    left:100%;
    position:absolute;
    top:0px;
    width:150px;
}
.extra-info a {
    color:{color:text};
}
.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;
}
</style>
</head>
<body>
<div id="top-bar">
    <h1>{Title}</h1>
</div>
<div id="sidebar">
<div id="sidebar-pic">
    <img src="{image:Sidebar}">
</div>
{block:Description}<p>{Description}</p>{/block:Description}
    <ul id="navlinks">
        <li><a href="/">home</a></li>
        {block:AskEnabled}
        <li><a href="/ask">message</a></li>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <li><a href="/submit">submit</a></li>
        {/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}
        <li><a href="/archive">archive</a></li>
        <li><a href="http://dontbrag.tumblr.com" target="_blank">theme</a></li>
    </ul>
</div>
<div id="wrapper">
<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}">
        {/block:IndexPage}
        {block:PermalinkPage}
        <img src="{PhotoURL-500}">
        {block:Caption}{Caption}{/block:Caption}
        {/block:PermalinkPage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <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>
        {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: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}
    </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:Video}

    {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:PostNotes}
    <div id="notes">
        {PostNotes-16}
    </div>
    {/block:PostNotes}
    {/block:PermalinkPage}

</article>
{/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"><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>
<link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.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 = "5114068";
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>