Theme #11 - Three Columns

<!--

Theme Created by @themesbybrenda
Thank you for using and please
do not remove credit! - Brenda

Credits to
NPF Image Fix: @mhango | @themesbyeva
Logo: @xlfdesigns
Photosets: @annasthms
Tumblr Controls: @cyantists
Tooltip: manos.malihu.gr
Infinite Scroll: https://infinite-scroll.com/
Link Icons: https://fontawesome.com/
Fonts: https://fonts.google.com/
Background: https://www.rawpixel.com/

-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('fast');
});
});
</script>

<!--Default Variables-->
<meta name="color:Background" content=""/>
<meta name="color:Link" content=""/>
<meta name="color:Link Hover" content=""/>
<meta name="color:Scrollbar" content=""/>
<meta name="color:Text" content=""/>
<meta name="color:Title" content=""/>
<meta name="color:Permalink" content=""/>
<meta name="color:Borders" content=""/>
<meta name="color:Sidebar Title" content=""/>
<meta name="color:Title Background" content=""/>
<meta name="color:Hover" content=""/>
<meta name="color:Post BG" content=""/>
<meta name="color:Tooltip Text" content="" />
<meta name="color:Tooltip Background" content="" />
<meta name="color:Tooltip Borders" content="" />
<meta name="image:background" content""/>
<meta name="image:sidebar" content=""/>
<meta name="image:postbg" content=""/>
<meta name="text:sidebar title" content=""/>
<meta name="text:Link One Title" content="" />
<meta name="text:Link One" content="" />
<meta name="text:Link Two Title" content=""/>
<meta name="text:Link Two" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Four Title" content="" />
<meta name="text:Link Four" content="" />

<script type="text/javascript" language="javascript" src="https://assets.tumblr.com/javascript/tumblelog.js?7"></script>

<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
var color = "ff0000";
var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
replaceIfFlash(9, "audio_player_{PostID}", player);
</script>

<script language="JavaScript" src="https://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>

<style type="text/css">


#s-m-t-tooltip {
font-family: 'Monda', sans-serif;
font-size:9px;
color: {color:Tooltip Text};
background-color:{color:Tooltip Background};
text-align: center;
max-width:150px;
border: 1px solid {color:Tooltip Border};
overflow:auto;
text-transform:none;
position: absolute;
z-index: 999999999999;
padding: 5px;
margin:20px 0 15px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.wrapper{
margin:auto;
width: 717px;
}

::-webkit-scrollbar {width: 5px; height: 5px; border:0px solid {color:Borders}; background:#fff; }
::-webkit-scrollbar-thumb {background-color: {color:Scrollbar};border:0px solid {color:Borders};}

body{
background: url({image:Background}) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: {color:Background};
background-size: cover;
text-align:left;
font-family: 'Monda', sans-serif;
font-size: 10px;
color:{color:Text};
}

a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}

#posts {
position:relative;
margin-top: 10px;
background-color: transparent;
{block:IndexPage}
margin-left:0px;
width:900px;
{/block:IndexPage}
{block:PermalinkPage}
width: 560px;
margin-left:10px;
margin-top:10px;
{/block:PermalinkPage}
}

.info {
margin-left:100px;
margin-top:4px;
line-height:14px;
}

.entry .permalink{
position:absolute;
width: 230px;
margin-top: 0px;
margin-left: 0px;
padding: 10px;
height: auto;
background-color:{color:Title Background};
border:0px solid {color:Borders};
overflow:visible;
text-transform:uppercase;
font-family: 'Monda', sans-serif;
font-size: 10px;
line-height:13px;
text-align:center;
opacity:0.0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

.entry:hover .permalink{
overflow:visible;
opacity: 1;
z-index: 99999999999;
margin-bottom: 0px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

.permalinktext {
display:block;
padding: 2px;
margin: 5px 5px 0px 5px;
text-transform:uppercase;
font-family: 'Monda', sans-serif;
font-size: 8px;
color: #000;
line-height: 15px;
letter-spacing:1px;
text-align: center;
text-decoration: none;
border-top:1px solid {color:Borders};
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.permalinktext:hover{
webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.entry {
opacity: 1;
margin:10px;
float:left;
background-color: transparent;
font-family: 'Monda', sans-serif;
font-size:10px;
line-height:14px;
{block:IndexPage}
width:250px;
{/block:IndexPage}
{block:PermalinkPage}
width:500px;
{/block:PermalinkPage}
}

.entry img{
max-width:250px;
height:auto;
opacity: 1;
{/block:IndexPage}
{block:PermalinkPage}
max-width:500px;
{/block:PermalinkPage}
}

.entry img:hover{
{block:IndexPage}
opacity: 1;
transition: all 0.5s ease-out;
-o-transition-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.9s ease-in-out;
-webkit-filter:grayscale(100%);
{/block:IndexPage}
}

[photoset-layout] {
grid-gap: 3px;
}

{block:PermalinkPage}

.text figure + p {
    margin-top:1em;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(:is(.tmblr-full img,.post_media_photo_anchor img)):has(.tumblr_blog) p:first-child {
    color:{color:background};
    font-size:0;
	display:none;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(:is(.tmblr-full img,.post_media_photo_anchor img)):has(.tumblr_blog) p {
    color:{color:text};
    font-size:12px;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(:is(.tmblr-full img,.post_media_photo_anchor img)) p {
    margin:10px 20px;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(:is(.tmblr-full img,.post_media_photo_anchor img)) {
    background:{color:Notebox Background};
}

{/block:PermalinkPage}

{block:indexpage}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(:is(.tmblr-full img,.post_media_photo_anchor img)):has(.tumblr_blog) {
    color:{color:background};
    font-size:0;
}
{/block:indexpage}

.text:has(.tmblr-full img) .op-blockquote,
.text:has(.tmblr-full img) .npf-post-source,
.text:has(.tmblr-full img) .tumblr_blog,
.text:has(.post_media_photo_anchor img) .op-blockquote,
.text:has(.post_media_photo_anchor img) .npf-post-source,
.text:has(.post_media_photo_anchor img) .tumblr_blog
{
    display:none;
}

.text {
    padding:0px;
}

.text img {
    max-width: 100%;
    height: auto;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(.tmblr-full img),
.text:not(:has(.title)):not(:has(p + .npf_row)):has(.post_media_photo_anchor img) {
    padding:0;
}

.post_media_photo_anchor img, .post_media_photo img {
    height:100%;
    width:100%;
}

{block:indexpage}


.text:not(:has(.title)):not(:has(p + .npf_row)):has(.tmblr-full img) :is(p,ul,ol,h1,h2,h3,h4,h5),
.text:not(:has(.title)):not(:has(p + .npf_row)):has(.post_media_photo_anchor img) :is(p,ul,ol,h1,h2,h3,h4,h5)
{
    display:none;
}

.text:not(:has(.title)):not(:has(p + .npf_row)):has(.tmblr-full img),
.text:not(:has(.title)):not(:has(p + .npf_row)):has(.post_media_photo_anchor img)
{
    background-color: {color:Post BG};
    border-color:{color:Post BG};
}

{/block:indexpage}

.title{
font-family: 'Homemade Apple', cursive;
text-transform: normal;
letter-spacing:1px;
font-size: 15px;
line-height: 25px;
color: {color:Title};
padding: 0px 0px 0px 0px;
}

div#postbg{
opacity: 1;
width:830px;
position:fixed !important;
text-align:center;
top:0px;
height:100%;
margin-left:-10px;
background-color:{color:Post BG};
background-image:url({image:postbg});
background-repeat: repeat;
background-position: center;
border-right: solid 1px {color:Borders};
border-left: solid 1px {color:Borders};
{block:PermalinkPage}
width: 560px;
{/block:PermalinkPage}
}

div#sidebar {
opacity: 1;
position:fixed !important;
background-color: transparent;
width: 135px;
height: 100%;
color:#fff;
border-right:1px solid {color:Borders};
font-family: 'Monda', sans-serif;
font-size: 10px;
font-style: none;
text-align: right;
line-height:10px;
margin-left:-170px;
margin-top:130px;
padding:20px;
padding-right:5px;
padding-top:155px;
}

#sidebar img {
display:block;
width: 40px;
height: 40px;
margin-top:0px;
margin-left:8px;
padding:3px;
z-index:99999999;
background-color: {color:Title Background};
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}

div#blogtitle{
display:block;
opacity:1;
margin-top:-35px;
margin-left:12px;
text-align: center;
width: 88px;
font-family: 'Homemade Apple', cursive;
font-size: 13px;
line-height:10px;
letter-spacing:0px;
text-transform: normal;
padding-top: 5px;
padding-bottom: 5px;
padding-left:40px;
padding-right:0px;
background-color: {color:Title Background};
color:{color:Sidebar Title};
}

.links a{
display:block;
width:127px;
margin-left:10px;
background-color: transparent;
border-bottom:1px solid #e9ccbf;
padding-top:3px;
padding-bottom:3px;
padding-right:3px;
color:#fff;
font-style:italic;
font-family: calibri;
text-align:right;
letter-spacing:1px;
text-transform:lowercase;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

.links a:hover{
background-color:transparent;
border-bottom:1px solid {color:Borders};
color:{color:Link Hover};
width:120px;
padding-right:10px;
}

.info{
margin-top:5px;
margin-left:10px;
font-style:italic;
}

askk {
font-family: 'Homemade Apple', cursive;
color: {color:Title};
text-transform: normal;
font-size:14px;
border-bottom:1px solid {color:Borders};
z-index:1;
}

#postnotes{
text-align: justify;
}

#postnotes blockquote{
border: 0px;}

blockquote{
padding:0px;
min-width:250px;
max-width:250px;
overflow: hidden;
height:auto;
margin:0px;
border-left: 0px solid {color:Border};
{block:PermalinkPage}
min-width:500px;
max-width:500px;
height:auto;
{/block:PermalinkPage}
}

#c{
position:fixed;
font-family: 'Monda', sans-serif;
font-size:10px;
bottom:0;
right:0;
padding:8px;
}

blockquote p, ul{
margin:0px;
padding:0px;
}

.p { padding-top: 5px; }
.ol, ul { margin-left: 10px; padding: 5px; }
.ul { list-style-type: square; }

a img{border: 0px;}

.chat .line{
margin-top:-2px;
padding: 4px;
}
.chat .line.odd{
margin-top:-2px;
}

.label {font-weight:bold;}
.cover {position: absolute; z-index: 1;margin-left:10px;}
.audioplayer {position:absolute; overflow:hidden; background:#E4E4E4; width:70px; height:70px; top:0px; margin-left:130px; padding:10px;}
.button { position:absolute; overflow:hidden; width:30px; height:30px; margin-top:23px; margin-left:23px;}
.notes img{width:10px; position:left; top:3px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; border-radius: 10px;}

iframe.tmblr-iframe {
z-index:99999999999999!important;
top:0px!important;
right:5px!important;
opacity:1;
transform:scale(0.65);
transform-origin:100% 0;
filter:invert(1) contrast(150%);
-webkit-filter:invert(1) contrast(150%);
-o-filter:invert(1) contrast(150%);
-moz-filter:invert(1) contrast(150%);
-ms-filter:invert(1) contrast(150%);
-webkit-transform:scale(0.65);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.65);
-o-transform-origin:100% 0;
-moz-transform:scale(0.65);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.65);
-ms-transform-origin:100% 0;}

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

{CustomCSS}
</style>

<link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Monda" rel="stylesheet">
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#posts').show(500);
});
</script>

<!-- tooltip script -->

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:100,

tip_fade_speed:250,

attribute:"title"

});

});

})(jQuery);

</script>

<script type="text/javascript">
$(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
animate : true
});
});

$wall.infinitescroll({
navSelector : '#pagination',
nextSelector : '#pagination a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('#posts').show(500);
});
</script>


<title>{title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<div class="wrapper">
<div id="c"></div>

<div id="postbg">
<img src="{image:postbg}"></a>
</div>

<div id="sidebar">
{Description}
<img src="{image:sidebar}"></a>
<div id="blogtitle">{text:sidebar title}</div>

<br>
<div class="links">
<a href="{text:Link One}">{text:Link One Title}</a>
<a href="{text:Link Two}">{text:Link Two Title}</a>
<a href="{text:Link Three}">{text:Link Three Title}</a>
<a href="{text:Link Four}">{text:Link Four Title}</a>
</div></div>

<div id="posts">

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

{block:Text}
{block:IndexPage}
<div class="text">
<div class="permalink"><body link="{color:Permalink}">
<a href="{reblogurl}"><FONT COLOR="{color:Permalink}"> <li class="fa fa-repeat"></li> </FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}">{notecountwithlabel}</FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}"><li class="fa fa-heart"></li></FONT></a>
</span></div>
{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="body">{Body}</span></div>
{/block:IndexPage}

{block:PermalinkPage}
<div class="text">
{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="body">{Body}</span></div>
{/block:PermalinkPage}
{/block:Text}

{block:Link}<br><a href="{URL}" class="title">{Name}</a>{block:Description}<div class="body">{Description}</div>{/block:Description} <div class="permalinktext"> <a href="{ReblogURL}">>Reblog</a> | <a href="{permalink}">{NoteCount}</a></div>{block:Link}

{block:Photo}
{block:IndexPage}
<div class="permalink"><body link="{color:Permalink}">
<a href="{reblogurl}"><FONT COLOR="{color:Permalink}"> <li class="fa fa-repeat"></li> </FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}">{notecountwithlabel}</FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}"><li class="fa fa-heart"></li></FONT></a>
</span></div>
{/block:IndexPage}
{block:IndexPage}{LinkOpenTag}
<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="250"/></a></div>{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}<center>{LinkOpenTag}
<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>
{LinkCloseTag}
{/block:PermalinkPage}</center>
{/block:Photo}

{block:Photoset}
{block:IndexPage}
<div class="permalink"><body link="{color:Permalink}">
<a href="{reblogurl}"><FONT COLOR="{color:Permalink}"> <li class="fa fa-repeat"></li> </FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}">{notecountwithlabel}</FONT></a>
<FONT COLOR="{color:Borders}"> | </FONT>
<a href="{permalink}"><FONT COLOR="{color:Permalink}"><li class="fa fa-heart"></li></FONT></a>
</span></div>
{/block:IndexPage}
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
{/block:Photoset}

{block:Quote}<span class="title">"{Quote}"</span><br> {block:Source}<div style="text-align:right; font-weight:bold;"> — {Source}</div>{/block:Source}<div class="permalinktext"> <a href="{ReblogURL}">Reblog</a> with <a href="{permalink}">{NoteCountwithlabel}</a></div>{/block:Quote}

{block:Chat}
{block:Title}<span class="title">{Title}</span>{/block:Title}
<div class="chat">
<ul>
{block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
</ul>
</div>
<div class="permalinktext"> <a href="{ReblogURL}">Reblog</a> with <a href="{permalink}">{NoteCountwithlabel}</a></div>
{/block:Chat}

{block:Audio}

{block:AudioPlayer}
<div class="audioplayer">
<div class="button">
{AudioPlayerGrey}
</div>
</div>
{/block:AudioPlayer}

{block:Albumart}
<div class="albumart">
<img src="{albumarturl}" width="90">
</div>
{/block:Albumart}
{block:ifCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:ifCaptions}
{block:ifNotCaptions}
{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:ifNotCaptions}
{/block:Audio}

{block:Answer}
<div style="border: 0px solid {color:Borders}; min-height:20px; padding-top: 25px; padding-right:10px; padding-left:10px; background:{color:Postbg};">
<img src="{AskerPortraitURL-30}" width="35" align="left" style="margin-right:5px; background-color: {color:Link};padding:5px; border-radius: 100px;"/>
<askk>{Asker}</askk>:  {Question}</div>
<div style="font-family: 'Monda', sans-serif; font-style: italic; font-size:10px;">
{Answer}
</div>
{/block:Answer}

{block:Video}
{block:IndexPage}
<center>
{Video-250}</center>
<div class="permalinktext"> <a href="{ReblogURL}">Reblog</a> with <a href="{permalink}">{NoteCountwithlabel}</a></div>
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}</center>
{/block:PermalinkPage}
{block:Video}

{block:PermalinkPage}
<center>
{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
{block:RebloggedFrom}
Posted on {Month} {DayOfMonth}, {Year}<br>
Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
{block:ContentSource}
<a href="{SourceURL}">
<FONT COLOR="{color:Text}">Source:</FONT>
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}"
height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceLink}
{/block:NoSourceLogo}
</a>
{/block:ContentSource}</center>
{block:NoteCount} <div style="text-align: center; margin: 10px;"></div>{/block:NoteCount}
</center>
{/block:PermalinkPage}

{block:PostNotes}<div align="middle"></div>
<center></center></span><br>
<div id="postnotes">{PostNotes}</div><br>
<center>
{/block:PostNotes}
</div>
{/block:Posts}
</div></div>
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
<a href="{PreviousPage}"></a>
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}

<div style="position:fixed; bottom:5px; right:5px;">
<a href="https://themesbybrenda.tumblr.com/"><a href="https://themesbybrenda.tumblr.com/"><img src="https://66.media.tumblr.com/9373059878fa663dd601f670536843ca/tumblr_inline_plcbcktWcX1qbugcf_500.png" width="45"></a> </div>