LITTLE DARLING // habitarts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<!----


by habitarts
enjoy <3
and please, don't copy
permalink notes by fragilehelp
infinite scroll by passohtml


---->

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script>
$(document).ready(function() {

$('a.poplight[href^=#]').click(function() {

    var popID = $(this).attr('rel');

    var popURL = $(this).attr('href');
    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1];
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    $('#' + popID).css({

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft
});

    $('body').append('<div id="fade"></div>');
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();return false;});

$('a.close, #fade').live('click', function() {
    $('#fade , .popup_block').fadeOut(function() {

        $('#fade, a.close').remove();
    });
    return false;
});

});
</script>

<title>{Title}</title>
<Link rel="shortcut icon" href="{Favicon}" />
<Link rel="alternate" type="application/rss+xml" href="{RSS}" />

<meta name="text:Link 1" content="/" />
<meta name="text:Link 1 title" content="" />
<meta name="text:Link 2" content="/" />
<meta name="text:Link 2 title" content="" />
<meta name="text:Link 3" content="/" />
<meta name="text:Link 3 title" content="" />
<meta name="text:Link 4" content="/" />
<meta name="text:Link 4 title" content="" />
<meta name="text:Link 5" content="/" />
<meta name="text:Link 5 title" content="" />

<meta name="image:Sidebar" content="" />
<meta name="image:Background" content="" />
<meta name="if:Do Not Repeat Background" content="1"/>

<meta name="color:Background" content="#ffffff" />
<meta name="color:Text" content="#d1d1d1" />
<meta name="color:Link Hover" content="#ffffff" />
<meta name="color:Link" content="#cccccc" />
<meta name="color:Accent" content="#fafafa" />
<meta name="color:Bold" content="#c1ced7" />
<meta name="color:Italic" content="#c1ced7" />
<meta name="color:Underline" content="#c1ced7" />
<meta name="color:Scrollbar Main Border" content="#eeeeee" />
<meta name="color:Scrollbar Sub Border" content="#fafafa" />
<meta name="color:Scrollbar Background" content="#ffffff" />
<meta name="color:Background Selection" content="#eeeeee" />
<meta name="color:Text Selection" content="#c6c6c6" />
<meta name="color:Quote Text" content="#d1d1d1" />
<meta name="color:Quote Background" content="#fafafa" />
<meta name="color:Sidebar Links" content="#cccccc" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><div class="fa fa-angle-up" aria-hidden="true"></div></a>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Open+Sans|Dawning+of+a+New+Day|Arvo|Cedarville+Cursive" rel="stylesheet">

{block:IndexPage}
<script type="text/javascript" src="http://static.tumblr.com/kecu8nj/auyouzq5m/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/kecu8nj/uGBow50r6/info.js"></script>
{/block:IndexPage}

<style>

body {background-color: {color:Background};
font-family:Times;
color: {color:Text};
letter-spacing:.3px;
text-align: left;
font-size: 12px;
line-height:20px;
background-image:url('{image:Background}');
background-attachment: fixed;
{block:IfDoNotRepeatBackground}
background-repeat: no-repeat;
{/block:IfDoNotRepeatBackground}}

#entries {float:center;
{block:IndexPage}
width:700px;
margin-left: 390px;
margin-top: 50px;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
margin-left: 460px;
margin-top: 150px;
{/block:PermalinkPage}}

.entry { text-align:justify;
{block:IndexPage}
width: 250px;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
{/block:PermalinkPage}
padding: 5px;
border-radius:5px;
margin:0px;
float: left;}

#photoextra img {border-radius:5px;}

a {text-decoration:none;
transition:all 1s ease;
color:{color:Link}; }
a:hover {transition:all 1s ease;
color:{color:Link Hover};}
b {color:{color:Bold}; }
i {color:{color:Italic};}
u {text-decoration:none;
border-bottom: 1px dashed {color:Accent};
color:{color:Underline};}

blockquote {margin:0px;
padding:0px 10px 0px 10px;
border-left:1px solid{color:Accent};
font-size:10px;}

html {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}
a, a:hover {cursor: url(http://static.tumblr.com/8l2gpxb/m1pmlzw1h/5.png), auto;}


::-webkit-scrollbar {width:17px;
height:17px;}
::-webkit-scrollbar {background-color:{color:Scrollbar Background};}
::-webkit-scrollbar-track {border:8px solid{color:Scrollbar Background};    background-color:{color:Scrollbar Sub Border};}
::-webkit-scrollbar-thumb {border:8px solid{color:Scrollbar Background};
background-color:{color:Scrollbar Main Border};
min-height:24px;
min-width:24px;}

#infscr-loading {position:absolute!important;
width:16px!important;
height:11px!important;
margin-bottom:-16px!important;
top:auto!important;
bottom:0;
left:50%!important;}
#pagination {display:none;}

::-moz-selection {Background-color:{color:Background Selection};}
::selection {Background-color:{color:Background Selection};
color:{color:Text Selection};}

#h1 {padding:20px;
Text-align:center;
color:{color:Sidebar Links};
font-size:17px;
font-style:italic;
line-height:100%;
color:{color:Text};
background:{color:Quote Background};
text-transform:none;
font-weight:300;}

#h1 a {text-transform:uppercase;
font-weight:300;
font-size:10px;}

li {margin-left:-10px;}

.quote {Text-align:center;
line-height: 24px;
border-radius:5px;
font-size:13px;
color:{color:Text Quote};
background:{color:Quote Background};
padding:20px;}
.quotesource {height:auto;
margin-left:0px;
margin-top:-25px;
font-weight:none;
font-size:13px;
padding:20px;
font-style:italic;
background:{color:Quote Background};
Text-align:center;}
.quotesource a {color:{color:Text};}

.chat {background:{color:Background} ;
font-size: 9px;
margin-top:10px;}
.chat .lines {padding: 2px 2px 2px 10px;
margin-bottom: 4px;
border-left:1px solid{color:Accent};}
.chat .lines span {font-weight:none;}

#postinfo {color:{color:Text};
position:absolute;
background:{color:Quote Background};
padding:20px;
transition:all 1s ease;
margin-top:-60px;
{block:IndexPage}
width: 210px;
opacity:0;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
opacity:1;
{/block:PermalinkPage}
Text-transform:lowercase;
text-align:center;
font-size: 12px;}

.entry:hover #postinfo {opacity:1;
transition:all 1s ease; }

#photoextra img {border-radius:5px;}

#postinfo a {
Text-transform:capitalize;
font-size: 12px;
color:{color:Link};
padding:0px 0px 1px 0px;
margin-left:2px;}

#info {z-index:999999999999999999999999999999999999999;}
#info a {margin-right:5px;}

#photosinfo {width:220px;
position:absolute;
padding:20px;
margin-left:-5px;
transition:all 1s ease;
margin-top:-10px;
opacity:0;}

.entry:hover #photosinfo {opacity:1;
transition:all 1s ease;}

#photosinfo a {
color:#fff;
font-size:12px;
display:block;
margin-top:2px;
width:13px;
height:15px;
border-radius:3px;
padding:2px;
letter-spacing:1px;
text-transform:uppercase;}

#caixa {margin-left:20px;
width:405px;}
#lpermalink {font-size:10px;
padding:15px;
border-bottom:1px solid {color:Accent};}
#lpermalink img {float:left;
padding:5px;
width:10px;
height:10px;
opacity:1!important;}
.lnotes {display:block;
width:420px;
margin-top:15px;}
.lnotes .avatar {border:none;
margin:1px;
border-radius:5px;
width:25px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
padding:0;}
.lnotes ol {margin:0;
padding:0;}
.lnotes li {list-style:none;
border:none;
float:left;
margin:0;
padding:0;
margin-right:4px;
margin-bottom:-2px;}
.lnotes .note .action {display:none;
visibility:hidden;
margin:0;
padding:0;}
.more_box {display:block;
width:400px;
height:35px;
margin:0;
padding:0;}
.more_notes_link_container {font-size:10px;
display:block;
text-align:center;
width:400px;
margin-top:20px;
text-transform:uppercase;
letter-spacing:1px;}
.lnotes blockquote {display:none;}

#credits {
position:fixed;
right:10px;
bottom:10px;}
#credits a {
Text-transform:uppercase;
font-size: 10px;
color:{color:Link};}

#asker {color:{color:Text};
Text-transform:uppercase;
font-size:8px;
position:absolute;
letter-spacing:1px;
margin-left:30px;
margin-top:-27px;
padding:0px 0px 1px 0px;}

#asker a {color:{color:Text};
Text-transform:uppercase;
letter-spacing:1px;
font-size:8px;}

.ask {Text-align: justify;
background:{color:Background};
border:1px solid#eee;
color:{color:Text};
padding:10px;
Text-transform:uppercase;
font-size:9px;
margin-top:1px;
line-height:17px;
vertical-align: -5px;}
.ask a {color: color:{color:Text};}

.question {Text-align: justify;
color:{color:Text};
padding:20px;
background:{color:Background};
border:1px solid#eee;
Text-transform:lowercase;
font-size:9px;
margin-top:0px;
line-height:17px;
vertical-align: -5px;}
.question a {color: color:{color:Text};}

.answer {margin-top:-5px;
color:{color:Text};
Text-align:left;
line-height:20px;
Text-align: justify;
Text-transform:none;
font-size:9px;
padding:10px;}

.bar {margin-top:0px;
padding:16px;
height:6px;
margin-left:0px;
color:{color:Text};
Text-align:left;
Background:{color:Background};
z-index:999999999999999999999999;
letter-spacing:1px;
Text-transform:uppercase;
font-size: 9px; }

.audioinfo {margin-top:-2px;
padding:10px;
margin-left:0px;
color:#c6c6c6;
Text-align:left;
Background:{color:Background};
z-index:999999999999999999999999;
Text-transform:uppercase;
font-size: 9px;
letter-spacing:1px;}

#albumart {margin-left:0px;
float:left;
margin-top:-17px;}

#albumart img {margin-left:-15px;
transition:all 1s ease;
padding:15px;
width:50px;
border-radius:100%}

#audioplayer {width:30px;
height:30px;
z-index:1;
overflow:hidden;
position:absolute;
margin-left:10px;
margin-top:10px;
transition:all 1s ease;}

#audioplayer:hover {opacity:1;
transition:all 1s ease;}

#audi {position:absolute;
width:40px;
margin-left:5px;
margin-top:3px;
background:#f2f2f2;
display:block;
border-radius:100%;
height:40px;}

#sidebar {margin-left:200px;
width:130px;
top:180px;
position:fixed;
padding:20px;}

#sidebar img {width:50px;
margin-left:37px;
border-radius:100px;}


#links {margin-left:150px;
width:200px;
margin-bottom:0px;
display:block;
color:{color:Text};
text-align:center;}
#links a {color:{color:Sidebar Links};
font-size:12px;
padding:0px 5px 0px 5px;
text-align:center;
display:inline;
margin-bottom:8px;
line-height:150%;
letter-spacing:2px;
font-family:Cedarville Cursive;
transition:all 1s ease;}
#links a:hover {transition:all 1s ease;
color:{color:Link Hover};}

#title {font-size:20px;
letter-spacing:1px;
color:{color:Sidebar Links};
text-align:center;
font-family:Cedarville Cursive;
margin-top:10px;
margin-left:5px;}

#title a {color:{color:Text}}

#scrollToTop:link,#scrollToTop:visited { color:{color:Text};
background-color: transparent;
display: none;
position: fixed;
bottom: 30px;
font-size:15px;
right: 10px;}

iframe.tmblr-iframe {
    opacity:0;
    display:none!important;}

#controls {right:5px;
top:15px;
color:#c6c6c6;
width:500px;
position:fixed;
text-align:right;}

#controls a {
font-size:13px;
letter-spacing:2px;
font-family:Cedarville Cursive;
text-shadow: 1px 1px 0px #fff;
text-transform:lowercase;
margin-right:20px;
display:inline;
color:#c6c6c6;}

#desc {margin-top:0px;
margin-left:0px;
padding:10px;
font-size:13px;
line-height:20px;
text-transform:none;
text-align:center;
color:{color:Text};}

#fade {display: none;
background:#fff;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;}

.popup_block {display: none;
background:#fff;
padding:7px;
border:0px solid #999;
float: center;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 52%;
z-index:9999999999999999999999999999999999999999999999999999999;}

*html #fade {position: absolute;}
*html .popup_block {position: absolute;}

</style>

</head>
<body>

<div id="controls">
<a href="http://tumblr.com/follow/{Name}">follow </a>
<a href="http://tumblr.com">dash </a>
<a href="https://www.tumblr.com/dashboard?conversation={Name}"> Message </a>
</div>

<div id="sidebar">
<img src="{image:Sidebar}">
<div id="title" title="Navigation"><a href="#?w=500" rel="linkss" class="poplight">{Title}</a></div>
<div id="desc">{Description}</div>
</div>

<div id="credits">
<a href="http://www.habitarts.tumblr.com/">H</a>
</div>


<div id="entries">
 {block:Posts}
<div class="entry">

{block:Text}
{block:Title}
<div id="h1">{Title}</div>
{/block:Title}
{Body}
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Text}

{block:Photo}
<div id="photosinfo">
{block:NoteCount}
<a href="{PermaLink}" title="{NoteCountWithLabel}"> <div class="fa fa-heart" aria-hidden="true"></div></a>
{/block:NoteCount}
<a href="{ReblogURL}" target="_blank"> <div class="fa fa-refresh" aria-hidden="true"></div> </a>
</div>
{block:IndexPage}
<div id="photoextra">
<img src="{PhotoURL-250}">
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div id="photoextra">
<img src="{PhotoURL-400}">
</div>
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<div id="photosinfo">
{block:NoteCount}
<a href="{PermaLink}" title="{NoteCountWithLabel}"> <div class="fa fa-heart" aria-hidden="true"></div></a>
{/block:NoteCount}
<a href="{ReblogURL}" target="_blank"> <div class="fa fa-refresh" aria-hidden="true"></div> </a>
</div>

<div style="border-radius:5px 5px 5px 5px; overflow:hidden;">
<center>{Photoset}</center>
<div style="margin-top:-30px; z-index:9; background:transparente;height:5px;">
</div></div>
{block:PermalinkPage}
{Caption}
{/block:PermalinkPage}
{/block:Photoset}


{block:Quote}
<div class="quote">{Quote}</div>
<div class="quotesource">{Source} </div>
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Quote}

{block:Link}
<a href="{URL}" {Target}>
<div id="h1">{Name}</div></a>
{block:Description}
{Description}
{/block:Description}
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Link}

{block:Chat}
{block:Title}
<div id="h1">{Title}</div>
{/block:Title}
{block:Lines}
<div class="chat">
<div class="lines">{block:Label}
<span>{Label}</span>
{/block:Label}
{Line}</div></div>
{/block:Lines}
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Chat}

{block:Audio}
<div id="audi"></div>
<div id="audioplayer">
{AudioPlayerWhite}
</div>
<div id="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}" width="100">
{/block:AlbumArt}
</div>
<div class="audioinfo">
{block:TrackName}
{TrackName}<br>
{/block:TrackName}
{block:Artist}
{Artist}<br>
{/block:Artist}
{/block:ExternalAudio}
</div>
{block:PermalinkPage}
{block:Caption}
{Caption}
{/block:Caption}
{/block:PermalinkPage}<br>
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Audio}

{block:Video}
{block:IndexPage}
{Video-250}
{/block:IndexPage}
{block:PermalinkPage}
{Video-400}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Video}


{block:Answer}
<div class="question">
<img src="{AskerPortraitURL-48}" style="width:20px; margin: -10px 10px 0px 0px;padding:10px 0px 4px 0px;border-radius:100%;">
<div id="asker">{Asker} said:
</div>
<br>{Question}
</div>
<div class="answer">
{Answer}
</div>
{block:IndexPage}
<div id="postinfo">
<a href="{PermaLink}">
{month}
{dayofmonth}{dayofmonthsuffix}</a>
<a href="{ReblogURL}" target="_blank">
<i class="fa fa-retweet" aria-hidden="true"></i></a>
{block:NoteCount}
<a href="{PermaLink}">{NoteCount}</a>
{/block:NoteCount}
</div>
{/block:IndexPage}
{/block:Answer}

<div style="display:none">
{block:RebloggedFrom}
<a href="{ReblogParentURL}" target="_blank"></a>
{/block:RebloggedFrom}
{block:ContentSource}
<a href="{SourceURL}" target="_blank">
source</a>
{/block:ContentSource}
</div>
</div>
<div id="caixa">
{block:PermalinkPage}
{block:HasTags}
<div id="lpermalink">
<div class="fa fa-tags" aria-hidden="true"></div> &nbsp;
{block:Tags}
<a href="{TagURL}">{Tag},</a>
{/block:Tags}
</div>
{/block:HasTags}
{block:Date}
<div id="lpermalink"> <div class="fa fa-calendar-check-o" aria-hidden="true"></div>  &nbsp;{TimeAgo}, {month}, {dayofmonth}{dayofmonthsuffix}
</div>
{/block:Date}
{block:NoteCount}
<div id="lpermalink">
<div class="fa fa-heart" aria-hidden="true"></div>  &nbsp;
{NoteCountWithLabel}
</div>
{/block:NoteCount}
{block:RebloggedFrom}
<div id="lpermalink">
<div class="fa fa-users" aria-hidden="true"></div>  &nbsp;
from <a href="{ReblogParentURL}">{ReblogParentName}</a>,
by <a href="{ReblogRootURL}">{ReblogRootName}</a>.
</div>
{block:RebloggedFrom}
{block:PostNotes}
<div class="lnotes">
{PostNotes-64}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</div>
{/block:Posts}

<div class="loading"></div>

</div>

{block:Pagination}
<div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
</div>
{/block:Pagination}

{block:IndexPage}
<script type="text/javascript">
$(window).load(function () {
$('#entries').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',
nextSelector   : '#nextPage',
itemSelector : ".entry, .loading",
bufferPx : 20,
},
function() { $('#entries').masonry({ appendedContent: $(this) }); });
});
</script>
{/block:IndexPage}



</body>
</html>

<div id="linkss" class="popup_block">

<div id="links">
<a href="{text:Link 1}">{text:Link 1 title}</a>
<a href="{text:Link 2}">{text:Link 2 title}</a>
<a href="{text:Link 3}">{text:Link 3 title}</a>
<a href="{text:Link 4}">{text:Link 4 title}</a>
<a href="{text:Link 5}">{text:Link 5 title}</a>
</div>
</div>