LULLABY // 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</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="##949494" />
<meta name="color:Link" content="#cccccc" />
<meta name="color:Accent" content="#fafafa" />
<meta name="color:Bold" content="#d7d7d7" />
<meta name="color:Italic" content="#c1ced7" />
<meta name="color:Underline" content="#c1ced7" />
<meta name="color:First Letter Quote" 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" />

<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=Open+Sans|Dawning+of+a+New+Day+|Arvo" 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}

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>

<style>

body {background-color: {color:Background};
font-family:Open Sans;
color: {color:Text};
text-align: left;
font-size: 10px;
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:1040px;
margin-left: 150px;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
margin-left: 460px;
{/block:PermalinkPage}
margin-top: 150px;}

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

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 0px 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:0px 0px 5px 0px;
Text-align:left;
font-family:Dawning of a New Day;
font-size:20px;
line-height:100%;
color:{color:Text};
text-transform:none;
font-weight:300;}

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

li {margin-left:-10px;}

#s-m-t-tooltip {max-width:300px;
padding:4px 5px 5px 5px;
margin:15px 10px 10px 15px;
font-size:10px;
z-index:999999999999999999999999999999999999;
background:#fff;
font-family:Arvo;
border:1px solid{color:Accent};
color:{color:Text};
Text-transform:lowercase;}

.quote {Text-align:justify;
line-height: 21px;
color:{color:Text Quote};
background:{color:Quote Background};
padding:10px; }
.quote:first-letter {text-transform:uppercase;
font-size: 14px;
font-family:Arvo;
color:{color:First Letter Quote}}
.quotesource {
height:auto;
margin-top:5px;
font-weight:none;
padding:10px;
Text-align:left;
display:block; }
.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;}

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

#photosinfo {
{block:IndexPage}
width: 55px;
opacity:0;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
opacity:0;
{/block:PermalinkPage}
position:absolute;
padding:10px;
background-color: #fff;
z-index:9999999999999999999999999999999999999;
margin-left:0px;
font-size:8px;
transition:all 1s ease;
margin-top:0px;
opacity:0;}

.entry:hover #photosinfo {
{block:IndexPage}
opacity:1;
{/block:IndexPage}
{block:PermalinkPage}
width:400px;
opacity:0;
{/block:PermalinkPage}
transition:all 1s ease;}

#photosinfo a {
color:{color:Link};
font-size:9px;
display:inline;
font-family:Arvo;
margin:3px;
width:13px;
height:15px;
padding:0px 0px 2px 0px;
border-bottom:1px solid{color:Accent};
text-transform:lowercase;}

#photoo {
transition:all 1s ease;
opacity:0.9;}

#photoo:hover {
opacity:1;}

#caixa {margin-left:0px;
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 {
{block:IndexPage}
width:98%;
margin-left:-10px;
{/block:IndexPage}
{block:PermalinkPage}
width:59%;
margin-left:200px;
{/block:PermalinkPage}
z-index:3;
text-align:right;
height:auto;
background:#fff;
padding:10px;
margin-top:-150px;
position:fixed;}

#image img {width:40px;
border-radius:5px;
right:140px;
background:#eee;
position:relative;
margin-top:50px;}

#linkzao {width:17px;
height:11px;
padding:16px;
text-align:center;
line-height:0px;
color:{color:Icon Links};
border-radius:100%;
margin-top:50px;
font-size:20px;
right:200px;
display:block;
z-index:9999999999999999999999999999999;
position:absolute;
transition:all 1s ease;}

#linkzao a {color:{color:Link};}
#linkzao a:hover {color:{color:Italic}}

.links {margin-top:40px;
position:absolute;
background:{color:Accent};
margin-left:-45px;
border-radius:5px;
display:block;
line-height:17px;
padding:10px;
font-family:Arial;
transition:all 1s ease;
text-align:center;}

.links a {margin:1px;
color:{color:Text};
font-weight:none;
display:inline-block;
text-shadow: 1px 1px 0px #fff;
text-decoration:none;
font-style:none;
width:80px;
padding:10px;
font-style:italic;
transition:all 1s ease;
text-transform:Capitalize;
font-size:10px;}

.links a:hover {color:{color:Link Hover};
transition:all 1s ease;}

.links:before {
content: "";
position:absolute;
display:block;
vertical-align: middle;
margin-left: 40px;
margin-top:-20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid{color:Accent};}

.cthrough {
color:{color:Link};
width:15px;
font-weight:bold;
padding:10px;
display:inline-block;
text-align:left;
letter-spacing:1px;
border:none;
z-index:99999999999999999999999999999999999;
position:absolute;
margin-left:-10px;
margin-top:-10px;
cursor:help;
text-transform:uppercase;
font-family:Arvo;
font-size:12px}

#title {
{block:IndexPage}
right:260px;
{/block:IndexPage}
{block:PermalinkPage}
left:470px;
{/block:PermalinkPage}
font-family:'Arvo';
margin-top:58px;
font-size:20px;
position:fixed;
color:{color:Text};
text-shadow: 1px 1px 0px #fff;
text-align:left;}

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

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

#controls {right:30px;
top:10px;
color:{color:Text};
z-index:99999999999999999999999999999999999999999999999999999999;
width:10px;
position:fixed;
text-align:right;}

#controls a {font-size:12px;
text-shadow: 1px 1px 0px #fff;
text-transform:uppercase;
margin:15px;
display:block;
color:{color:Text};}

</style>

</head>
<body>

<div id="controls">
<a href="http://tumblr.com" title="dashboard"> <i class="fa fa-home" aria-hidden="true"></i> </a>
<a href="https://www.tumblr.com/dashboard?conversation={Name}" title="chat"><i class="fa fa-comments" aria-hidden="true"></i>   </a>
<a href="http://tumblr.com/follow/{Name}" title="follow"><i class="fa fa-plus" aria-hidden="true"></i> </a>
<a href="https://www.tumblr.com/customize/{Name}" title="customize"><i class="fa fa-cog" aria-hidden="true"></i></a>
</div>

<div id="sidebar">
<div id="title"><a href="/">{Title}</a></div>
<div id="linkzao">
<a href="#" class="cthrough"><div class="fa fa-angle-down" aria-hidden="true"></div></a>
<div class="sub">
<div class="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>
</div>
<div id="image">
<img src="{image:Sidebar}">
</div>
</div>

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


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

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

{block:Text}
{block:Title}
<div id="h1">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
{block:IndexPage}
<div id="photoo">
<img src="{PhotoURL-250}">
</div>
{/block:IndexPage}
{block:PermalinkPage}
<img src="{PhotoURL-400}">
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
<div id="photoo">
<center>{Photoset}</center>
</div>
{block:PermalinkPage}
{Caption}
{/block:PermalinkPage}
{/block:Photoset}


{block:Quote}
<div class="quote">{Quote}</div>
<div class="quotesource"><i class="fa fa-heart-o" aria-hidden="true" style="color:{color:Bold};"></i> &nbsp;  {Source} </div>
{/block:Quote}

{block:Link}
<a href="{URL}" {Target}>
<div id="h1">{Name}</div></a>
{block:Description}
{Description}
{/block:Description}
{/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: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}
{/block:Audio}

{block:Video}
{block:IndexPage}
{Video-250}
{/block:IndexPage}
{block:PermalinkPage}
{Video-400}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/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: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} / <a href="{ReblogURL}" target="_blank">reblog</a>
</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>