THEME "AESTHETIC 2020"

<!--







               ------------------------------
                  @BARBIE THEMES | TUMBLR
               ------------------------------

THEME: AESTHETIC
THEME 2020: @BARBIE-THEMES TUMBLR
+Do not steal the code or take parts of the codes and put them in your own theme.
+do not remove the credit please
creating themes since 2014







-->




<title>{Title}</title>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}



<meta name="image:Background" content="1"/>
<meta name="image:Avatar" content="1"/>

<meta name="color:Background" content="#f6f6f6"/>
<meta name="color:Sidebar background" content="#fff"/>
<meta name="color:Sidebar border" content="#fff"/>
<meta name="color:Blog title" content="#dcecf5"/>
<meta name="color:Sidebar link" content="#cccccc"/>
<meta name="color:Entry background" content="#ffffff"/>
<meta name="color:Buttons" content="#cccccc"/>
<meta name="color:Ask bubble" content="#eee"/>
<meta name="color:Title" content="#333333"/>
<meta name="color:Text" content="#777777"/>
<meta name="color:Link" content="#888888"/>
<meta name="color:Hover" content="#000"/>
<meta name="color:Bold" content="#dcecf5"/>
<meta name="color:Italic" content="#444444"/>
<meta name="color:Borders" content="#ffffff"/>
<meta name="color:Pagination" content="#cccccc"/>

<meta name="font:Title font" content="Gibson"/>
<meta name="select:Title font size" content="18px" title="18px">
<meta name="select:Title font size" content="20px" title="20px">
<meta name="select:Title font size" content="22px" title="22px">
<meta name="select:Title font size" content="25px" title="25px">
<meta name="select:Title font size" content="27px" title="27px">

<meta name="font:Body font" content="Helvetica"/>
<meta name="select:Body font size" content="12px" title="12px">
<meta name="select:Body font size" content="13px" title="13px">
<meta name="select:Body font size" content="14px" title="14px">
<meta name="select:Body font size" content="15px" title="15px">
<meta name="select:Body font size" content="16px" title="16px">

<meta name="if:Sidebar right" content="1" />
<meta name="if:400px Posts" content="1" />
<meta name="if:Infinite Scroll" content="0"/>
<meta name="if:Show Captions" content="1" />
<meta name="if:Show Tags" content="1" />

<meta name="if:Show Link One" content="1" />
<meta name="if:Show Link Two" content="1" />
<meta name="if:Show Link Three" content="1" />
<meta name="if:Show Link Four" content="1" />

<meta name="text:Home" content="Home"/>
<meta name="text:Ask" content="Ask"/>
<meta name="text:Link Three" content="Link three title"/>
<meta name="text:Link Three url" content="Link Three url"/>
<meta name="text:Link Four" content="Link four title"/>
<meta name="text:Link Four url" content="Link Four url"/>

<meta name="color:scrollbar" content="#dcecf5" />
<meta name="color:scrollbarbg"content="#ffffff">


</style><style type="text/css">


::-webkit-scrollbar {background-color:{color:scrollbarbg}; height:8px;             width:15px}
::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}


body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: {color:Text};
font-family: {font:Body font};
font-size: {select:Body font size};
line-height: -moz-calc({select:Body font size} + 5px);
line-height: -webkit-calc({select:Body font size} + 5px);
line-height: -o-calc({select:Body font size} + 5px);
line-height: calc({select:Body font size} + 5px);
background-color: {color:Background};
background-image: url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
}


iframe, img, embed, object, video {
margin:auto;
max-width: 100%;
border: none;
}

select, textarea, input, a {
outline: none;
}


p {
margin-top: 5px;
margin-bottom: 5px;}

small{
font-size: 90%;
}

big{
font-size: 110%;
}


h1{
margin: 0;
margin-top: 10px;
margin-bottom: 10px;
color: {color:Title};
font-weight:normal;
font-family: {font:Title font};
font-size: {select:Title font size};
line-height: -moz-calc({select:Title font size} + 5px);
line-height: -webkit-calc({select:Title font size} + 5px);
line-height: -o-calc({select:Title font size} + 5px);
line-height: calc({select:Title font size} + 5px);
}

h2 {
left: 0px;
font-size: 15px;
line-height: 20px;
font-weight: normal;
font-family: {font:Body font}
}


a {
color: {color:Link};
text-decoration:none;
}

a:hover {
color: {color:Hover};
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}

ul, ol, li {
margin: 5px 10px;
padding: 0px;
}


b, strong {
color: {color:Bold};
}

i, em {
color: {color:Italic};
}

blockquote{
margin: 10px;
padding-left: 10px;
border-left: 1px solid {color:Borders};
}


iframe.tmblr-iframe {
top:0px!important;
right:0px!important;
opacity:0.8;
transform:scale(0.6);
transform-origin:100% 0;
-webkit-transform:scale(0.8);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.8);
-o-transform-origin:100% 0;
-moz-transform:scale(0.8);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.8);
-ms-transform-origin:100% 0;
z-index:100000!important;
}

iframe.tmblr-iframe:hover {
opacity:1!important;}

#s-m-t-tooltip {
margin: 15px;
max-width: 250px;
padding: 5px;
color: {color:Text};
background: {color:Post background};
border: 1px solid {color:Borders};
font-size: 12px;
line-height: 15px;
z-index: 10000;
}


#container {
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:800px;
z-index:100!important;
}


#sidebar{
position:fixed;
margin:0px;
width:200px;
background:{color:Sidebar background};
border:1px solid {color:Sidebar border};
{block:ifSidebarRight}
margin-left:598px;
{/block:ifSidebarRight}
z-index:10;

top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

overflow:hidden;
}



#avatar {
margin:20px;
margin-bottom:10px;
width:160px;
height:160px;
}

#avatar img {
width:100%;
height:100%;
}

/* Blog title */

#blogtitle{
margin-top:0px;
margin-left:20px;
width:160px;
line-height:30px;
font-size:20px;
color:{color:Blog title};
font-family:{font:Title Font};
}

/* Description */

#description{
margin:5px 20px;
width: 160px;
max-height:160px;
padding-bottom:0px;
color:{color:Description};
font-size:10px;
line-height:10px;
text-align:justify;
border-bottom:1px solid {color:Borders};
overflow:auto;
}

/* Sidebar links */

#links{
margin-top: 5px;
margin-left: 20px;
width: 160px;
padding-bottom: 15px;
}

#links a{
height:25px;
padding:5px 0px;
font-size:12px;
line-height:25px;
color:{color:Sidebar link};
}

/* Links style on hover */

#links a:hover{
color:{color:Hover};
-webkit-transition: all 7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/* Bolded list numerals */

#links b{
margin-left:0px;
margin-right:10px;
}


#posts {
margin-top:20px;
margin-left:258px;
width:542px;
{block:if400pxPosts}
width: 442px;
{/block:if400pxPosts}
{block:ifSidebarRight}
margin-left:0px!important;
{/block:ifSidebarRight}
/* don't remove */
overflow:hidden;
z-index:1000;
}

/* Single post/entry */

.entry {
display: inline-block;
float: left;
margin: 20px;
width: 500px;
{block:if400pxPosts}
width: 400px;
{/block:if400pxPosts}
padding:0px 10px;
height:auto;
background:{color:Entry background};
border: 1px solid {color:Borders};
border-radius:{text:Border radius};
overflow: hidden;
}


.entry img {
margin:0px;
padding:0px;
}


.lines {
margin:0px;
padding:5px;
line-height: 20px;
}



.quote {
margin: 10px;
padding: 5px;
font-family: {font:Title font};
font-size: {select:Title font size};
line-height: -moz-calc({select:Title font size} + 3px);
line-height: -webkit-calc({select:Title font size} + 3px);
line-height: -o-calc({select:Title font size} + 3px);
line-height: calc({select:Title font size} + 3px);
color: {color:Italic};
text-align: left;
letter-spacing: 2px;
}

.source {
text-align:right;
font-size: 12px;
line-height: 20px;
}

/*-- Ask Posts --*/

.asker {
margin: 5px;
margin-top: 10px;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: auto;
}

.bubble {
margin-left:50px;
width: -moz-calc(100% - 70px);
width: -webkit-calc(100% - 70px);
width: -o-calc(100% - 70px);
width: calc(100% - 70px);
height: auto;
min-height: 35px;
padding: 10px;
line-height: 20px;
background: {color:Ask bubble};
z-index:10;
}

.triangle {
position: absolute;
margin-left: -20px;
width: 0;
z-index:0;
border-right: 10px solid {color:Ask bubble};
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}

.asker img {
float: left;
margin-right: 0px;
max-width: 30px;
border: 1.5px solid {color:Ask bubble};
border-radius: 2px;
z-index:1000;
opacity:1;
}

.answer {
margin: 10px;
margin-bottom: 0;
}


.linktitle{
margin: 0;
margin-top: 10px;
margin-bottom: 10px;
color: {color:Title};
font-weight: normal;
font-family: {font:Title font};
font-size: {select:Title font size};
line-height: -moz-calc({select:Title font size} + 5px);
line-height: -webkit-calc({select:Title font size} + 5px);
line-height: -o-calc({select:Title font size} + 5px);
line-height: calc({select:Title font size} + 5px);
}


.topinfo{
margin-top:0px;
margin-left:-10px;
margin-bottom:10px;
padding: 10px;
width: 100%;
height: 20px;
line-height: 25px;
border-bottom:1px solid {color:Borders};
background:rgba({select:Post info transparency color}, {select:Transparency});
}


.topinfo a{
margin-left: 5px;
}


.bottominfo {
margin-top: 10px;
margin-left:-10px;
width: 100%;
height:auto;
min-height: 20px;
padding: 10px 15px;
font-size: 12px;
line-height: 22px;
color: {color:Text};
border-top:1px solid {color:Borders};
background:{color:Post background};
overflow:hidden;
}


.bottominfo a {
color: {color:Link};
}


.tags {
{block:IndexPage}
{block:ifNotShowTags}
display: none;
{/block:ifNotShowTags}
{/block:IndexPage}
}


.note c{
float: left;
}


.buttons {
float: right;
margin-top: 0px;
width: 55px;
height: 26px;
line-height:26px;
z-index: 100;
list-style: none;
}


.buttons li {
display:inline-block;
margin:0;
margin-right:3px;
width:20px;
height:26px;
padding:0px;
text-align:center;
}


.reblog i {
font-size:17px;
color:{color:Buttons};
}


.like .like_button iframe {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
z-index:10;
opacity:0.0000001;
}


.likeb i{
position:absolute;
margin-left:0px;
margin-top:-7px;
font-size:14px;
color:{color:Buttons};
}

.like i {
font-size:15px;
color:{color:Buttons};
}

.like .liked + i {
font-size:14px;
color:#D95E40;
}

/*-- Post notes --*/

#notes{
margin: 0px;
width: 500px;
{block:if400pxPosts}
width: 400px;
{/block:if400pxPosts}
font-size: 12px;
color: {color:Text};
}

ol.notes {
padding: 0px;
margin: 0px;
list-style-type: none;
}

/* Notes column style */

ol.notes li.note {
margin:0px;
padding: 10px 0px;
border-bottom:1px solid {color:Borders};
}

/* Post notes avatar style */

ol.notes li.note img.avatar {
float:left;
vertical-align:-5px;
margin-left:0px;
margin-right:10px;
width: 20px;
height: 20px;
}

/* Show more notes style */

li.more_notes_link_container {
font-size: 12px;
}

/*---- P A G I N A T I O N ----*/

#pagination{
margin-top:20px;
margin-bottom:20px;
margin-left:258px;
height: 38px;
text-align: center;
width: 540px;
{block:if400pxPosts}
width: 440px;
{/block:if400pxPosts}
{block:ifSidebarRight}
margin-left:0px;
{/block:ifSidebarRight}
{block:ifInfiniteScroll}
display: none;
{/block:ifInfiniteScroll}
z-index:100;
}

/* Previous page and next page arrows style */

.previous, .next{
display:inline;
font-size:12px;
padding:10px;
margin:10px;
color:{color:Pagination};
background:{color:Search box background};
}

/* Previous page and next page arrows style on hover */

.previous:hover, .next:hover{
color:{color:Hover};
}

/* Previous page and next page arrows icon style */

.previous i, .next i{
color:{color:Hover};
font-size:15px;
margin:10px;
text-decoration:none;
}

/* Previous page and next page arrows icon style on hover */

.previous:hover i, .next:hover i{
color:{color:Hover};
}

/*----- I N F I N I T E  S C R O L L -----*/

#infscr-loading {
display:none!important;
}

.credit, .credit a {
width:10px;
height:10px;
bottom:10px;
right:20px;
padding:4px;
font-size:8px;
letter-spacing:0px;
color:#000;
line-height:8px;
position:fixed;
text-align:center;
color:{color:Tags Text Colour};
font-family:arial;
text-transform:uppercase;
background-color:{color:000;};
border:1; solid {color:Border};
-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:hover {
-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;

}


{CustomCSS}

</style>


<link href="https://fonts.googleapis.com/css?family=Cinzel|Exo|Poiret+One|Sansita|Voltaire" rel="stylesheet">


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<script src="https://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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

{block:IndexPage}

<script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

{block:ifInfiniteScroll}
<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
{/block:ifInfiniteScroll}

{/block:IndexPage}

<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
{block:IndexPage}
var $container = $('#posts');
$container.masonry({ itemSelector: '.entry' });
$container.imagesdded(function(){
$container.masonry();
$container.find('.entry').animate({ opacity: 1, zIndex: 1 });
});
{block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: '.entry',
navSelector: '.pagination',
nextSelector: '.next',
loadingImg: '',
loadingText: '<em></em>',
bufferPx: 2000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
},
function(){
$container.masonry();
});
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
$newElems.animate({ opacity: 1, zIndex: 1 });
});
});
{/block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: ".entry",
navSelector: "#pagination",
nextSelector: ".next",
loadingImg: "",
loadingText: "<em></em>",
bufferPx: 10000,
SidebarScrollPx: 12000,
errorCallback: function() {
$('.load-more').fadeOut();
}
}, function(newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function() {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems,
true);
});
});
{/block:IndexPage}
});
</script>

<!-- PXU photosets -->

<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>

<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

{/block:IndexPage}

</head>

<body>


<div id="container">

<!-- S I D E B A R -->

<div id="sidebar">

<!-- Avatar -->

<div id="avatar"><a href="/"><img src="{image:Avatar}"></a></div>

<!-- Blog title -->

<div id="blogtitle">{Title}</div>

<!-- Description -->

<div id="description">{Description}</div>

<!-- Sidebar links -->

<div id="links">

{block:IfShowLinkOne}
<a href="/"><b>01.</b> {text:Home}</a><br>
{/block:IfShowLinkOne}
{block:IfShowLinkTwo}
<a href="/ask"><b>02.</b> {text:ask}</a><br>
{/block:IfShowLinkTwo}
{block:IfShowLinkThree}
<a href="{text:Link Three url}"><b>03.</b> {text:Link Three}</a><br>
{/block:IfShowLinkThree}
{block:IfShowLinkFour}
<a href="{text:Link Four url}"><b>04.</b> {text:Link Four}</a><br>
{/block:IfShowLinkFour}

</div>
<!-- End links -->

</div>

<div id="posts">

{block:Posts}

<!-- Entries -->

<div class="entry">

{block:Date}

<!-- Top info -->

<div class="topinfo">
<a href="/day/{Year}/{MonthNumber}/{DayOfMonth}"> {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} </a>
</div>

<!-- End topinfo -->

{/block:Date}

<!-- Text post -->

{block:Text}
{block:Title}
<a href="{Permalink}">
<h1>{Title}</h1></a>
{/block:Title}
{Body}
{/block:Text}

<!-- Photo post -->

{block:Photo}
{block:ifNot400pxPosts}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px"/></a>
{/block:ifNot400pxPosts}
{block:if400pxPosts}
<img src="{PhotoURL-400}" alt="{PhotoAlt}" width="400px"/></a>
{/block:if400pxPosts}
{/block:Photo}

<!-- Photoset post -->

{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{/block:Photoset}

<!-- Chat post -->

{block:Chat}
<div class="chat">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{block:Lines}
<div class="lines">
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}
</div>
<!--End lines-->
{/block:Lines}
</div>
<!--End chat-->
{/block:Chat}

<!-- Quote post -->

{block:Quote}
<div class="quote">
"{Quote}"
</div>
<!-- End quote -->
<div class="source">
— {Source}
</div>
<!-- End source -->
{/block:Quote}

<!-- Link post -->

{block:Link}
<div class="linktitle">
<a href="{URL}"><h1>{Name}</h1></a>
</div>
<!-- End linktitle -->
{block:Description}
<p>{Description}</p>
{/block:Description}
{/block:Link}

<!-- Video post -->

{block:Video}
{block:ifNot400pxPosts}
{Video-500}
{/block:ifNot400pxPosts}
{block:if400pxPosts}
{Video-400}
{/block:if400pxPosts}
{/block:Video}

<!-- Audio post -->

{block:Audio}
{block:AudioEmbed}
<div style="height:85px">{AudioEmbed-500}</div>
{/block:AudioEmbed}
{/block:Audio}

<!-- Ask post -->

{block:Answer}
<div class="asker">
<img src="{AskerPortraitURL-48}">
<div class="bubble" style="border-color: {color:Ask bubble}; background: {color:Ask bubble};"> <div class="triangle"></div>
{Asker}asked:
<br>{Question}
</div>
<!-- End bubble -->
</div>
<!-- End asker -->
<div class="answer">
{Answer}
</div>
<!-- End answer -->
{/block:Answer}

{block:Caption}
{Caption}
{/block:Caption}

{block:Date}


<div class="bottominfo">


<div class="buttons">

<li class="reblog"><a href="{ReblogURL}"><i class="fa fa-retweet" aria-hidden="true"></i></a></li>

<li class="like">{LikeButton}<i class="fa fa-heart" aria-hidden="true"></i></a>

</div>

{block:RebloggedFrom}
{block:ContentSource}
Source: <a href="{ReblogRootURL}" target="_blank"> {ReblogRootName}</a><br>
{/block:ContentSource}
{/block:RebloggedFrom}


<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}


{block:NoteCount}
<a href="{Permalink}"> {NoteCountWithLabel}</a>
{/block:NoteCount}


{block:HasTags}
<div class="tags">
{block:Tags}
<a href="{TagURL}">
#{Tag}</a> &nbsp;
{/block:Tags}<br>
</div>
{/block:HasTags}

</div>

{/block:Date}


{block:PermalinkPage}


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

{/block:PostNotes}

{/block:PermalinkPage}

</div>


{/block:Posts}
</div>


{block:Pagination}

<div id="pagination">
{block:PreviousPage}
<a class="previous" href="{PreviousPage}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> NEWER </a>
{/block:PreviousPage}

{block:NextPage}
<a class="next" href="{NextPage}"> OLDER <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
{/block:NextPage}
</div>

{/block:Pagination}

</div>
</div>
<span class="credit">
<a href="http://barbie-themes.tumblr.com/" target="_blank" title="Theme By; BARBIE THEMES 2020"> CREDIT BTHEMES </a>
</span>
</body>
</html>