HSJ Tumblr Theme Code

<title>{Title}{block:TagPage} | #{Tag}{/block:TagPage}{block:DayPage} | {DayOfMonth} {Month} {Year}{/block:DayPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title> <link rel="shortcut icon" href="https://julietalayne.pink/wp-content/uploads/2020/09/f.png"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Life+Savers:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Courier+Prime&family=Quicksand:wght@500&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="if:Music" …">
<html><head><meta charset="UTF-8" />
<title>{Title}{block:TagPage} | #{Tag}{/block:TagPage}{block:DayPage} | {DayOfMonth} {Month} {Year}{/block:DayPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="https://julietalayne.pink/wp-content/uploads/2020/09/f.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}


 <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
 
 <link href="https://fonts.googleapis.com/css2?family=Life+Savers:wght@700&display=swap" rel="stylesheet">
 
 <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Courier+Prime&family=Quicksand:wght@500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">


<meta name="if:Music" content="0"/>
<meta name="text:link1 url" content="/" />
<meta name="text:link1 title" content="" />
<meta name="text:link2 url" content="/" />
<meta name="text:link2 title" content="" />
<meta name="text:link3 url" content="/" />
<meta name="text:link3 title" content="" />
<meta name="text:link4 url" content="/" />
<meta name="text:link4 title" content="" />
<meta name="text:link5 url" content="/" />
<meta name="text:link5 title" content="" />
<meta name="text:link6 url" content="/" />
<meta name="text:link6 title" content="" />

<meta name="select:font" content="life savers" title="life savers">
<meta name="select:font" content="courier prime" title="courier prime">
<meta name="select:font" content="quicksand" title="quicksand">
<meta name="select:font" content="architects daughter" title="verdana">
<meta name="select:font" content="century gothic" title="century gothic">
<meta name="select:font" content="helvetica" title="helvetica">
<meta name="select:font" content="trebuchet ms" title="trebuchet ms">
<meta name="if:links" content="0"/>
<meta name"if:music" content="0"/>





<!--
BLOBS IN A JAR
--> 

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#FF0000", "#FFF000", "#59FF00", "#048C19", "#FF8300", "#01D5EA", "#0132EA", "#7901EA", "#FFA3D2"); // what colour are the blobs
var speed=50; // speed of animation, lower is faster
var blobs=9; // how many blobs are in the jar
var size=80; // maximum blob size

/***************************\
*   Blobs in a Jar Effect   *
*(c)2012-20 mf2fm web-design*
*  https://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/

var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array(); 
var swide=800;
var sleft=0;
var shigh=600;
var sdown=0;
var x=400;
var y=300; 

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(fill_the_jar);

function fill_the_jar() {
	var i, dvs;
	div=document.createElement('div');
	dvs=div.style;
	dvs.position='fixed';
	dvs.left='0px';
	dvs.top='0px';
	dvs.width='1px';
	dvs.height='1px';
	document.body.appendChild(div);
	set_scroll();
	set_width();
	for (i=0; i<blobs; i++) {
	  add_blob(i);
	  jamjar(i);
	}
}

function add_blob(ref) {
	var dv, sy;
	dv=document.createElement('div');
	sy=dv.style;
	sy.width=size/2+"px";
	sy.height=size/2+"px";
	sy.borderRadius="50%";
	sy.position='absolute';
	sy.backgroundColor=colours[ref%colours.length];
	do {
		ypos[ref]=Math.floor(shigh*Math.random());
		xpos[ref]=Math.floor(swide*Math.random());
	}
	while (checkity(ref));
	zpos[ref]=Math.random()*size/4;
	dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
	dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
	dz[ref]=(0.5+Math.random())*(Math.random()>.5?.2:-.2);
	blob[ref]=dv;
	div.appendChild(blob[ref]);
	set_blob(ref);
}

function checkity(j) {
	var i, r=false;
	if (j) for (var i=0; i<j; i++) {
		if (Math.abs(xpos[i]-xpos[j])<size && Math.abs(ypos[i]-ypos[j])<size) r=true;
	}
	return (r);
}

function rejig(ref, xy) {
  if (xy=='y') {
	dx[ref]=(0.5+Math.random())*sign(dx[ref]);
    dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  }
  else {
    dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  	dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  }
}

function sign(a) {
  if (a<0) return (-2);
  else if (a>0) return (2);
  else return (0);
}

function set_blob(ref) {
	var sy;
	sy=blob[ref].style;
	sy.top=ypos[ref]-size/4+'px';
	sy.left=xpos[ref]-size/4+'px';
    sy.filter='blur('+zpos[ref]+'px)';
}

function jamjar(ref) {
	var i;
	if (ypos[ref]+dy[ref]<-size/2 || ypos[ref]+dy[ref]>shigh+size/2) rejig(ref, 'y');
	else if (xpos[ref]+dx[ref]<-size/2 || xpos[ref]+dx[ref]>swide+size/2) rejig(ref, 'x');
	else if (Math.abs(ypos[ref]+dy[ref]-y)<size/2 && Math.abs(xpos[ref]+dx[ref]-x)<size/2 && zpos[ref]<size/20) {
		if (Math.abs(ypos[ref]+dy[ref]-y)>Math.abs(xpos[ref]+dx[ref]-x)) dy[ref]=-dy[ref];
		else dx[ref]=-dx[ref];
	}
	else for (i=0; i<blobs; i++) {
		if (i==ref) continue;
		if (Math.abs(ypos[ref]+dy[ref]-ypos[i])<size/2 && Math.abs(xpos[ref]+dx[ref]-xpos[i])<size/2 && Math.abs(zpos[ref]-zpos[i])<size/20) {
			if (Math.abs(ypos[ref]+dy[ref]-ypos[i])>Math.abs(xpos[ref]+dx[ref]-xpos[i])) dy[ref]=-dy[ref];
			else dx[ref]=-dx[ref];
		}
	}
	ypos[ref]+=dy[ref];
	xpos[ref]+=dx[ref];
	if (zpos[ref]+dz[ref]<0) dz[ref]=Math.abs(dz[ref]);
	else if (zpos[ref]+dz[ref]>size/4) dz[ref]=-Math.abs(dz[ref]);
	zpos[ref]+=dz[ref];
	set_blob(ref);
	setTimeout("jamjar("+ref+")", speed);
}

document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}

document.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>

<!--
POP UP SCRIPT
-->


<script type="text/javascript"
src="https://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'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

<!--
CUSTOM FONTS
-->

 
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>


<style>


.popup_block{
    display:none;
    background:#fff;
    padding:20px;
    border:1px solid #eee;  /* if you want a solid white pop-up, delete this */
    float:left;
    position:fixed;
    top:50%;left:50%;
    z-index: 99999;
    -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
    -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
    box-shadow: 0px 0px 20px #000; /* delete for solid white */
}
 
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
#fade {
    display:none;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:9999;
    background:#000; /* change to #fff for solid white */
    opacity:0.5; /* change to opacity:1; */
}

/* TUMBLR CONTROLS */

iframe.tmblr-iframe {
    z-index:999;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        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%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -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:0.6!important;
    
}
    
    
    .tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}
 
.tmblr-lightbox img {opacity:0;}
 
.lightbox-caption {
    color:{color:title}!important;
    font-family:inherit!important;
    font-size:1em!important;
    font-weight:normal!important;
    text-shadow:none!important;
}
 
.lightbox-image {
    -moz-box-shadow:none!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    border-radius:0px!important;
    padding:0px!important;
    border:0!important;  
    opacity:1!important;
}
 
.vignette {opacity:0!Important;}
 

    /* SCROLLBAR */
    
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    }
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
    }
::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff; 
    border-radius: 50px;
    }
    
    /* SELECTION */
    
::selection {
    color: {color:Accent};
    background: {color:Background};
    }
::-moz-selection {
    color: {color:Accent};
    background: {color:Background};
    }
.tooltips {
    display: none !important;
}

/** basic **/

body {
    background:{color:background} url(https://julietalayne.pink/wp-content/uploads/2020/09/hsjbackgroundprimarybest.jpg) center center fixed;
     background-size:cover; 
    color:{color:text};
    font-family:{select:font};
    font-size:18px; 
    word-wrap:break-word;
    line-height:110%; 

}
    
}

a {
    text-decoration:none !important;
    color:#ff3cdb;
    -webkit-transition:.5s;
    transition:.5s; 

    
}
   
a:hover {
    color:#ff3037;
    -webkit-transition:.5s;
    transition:.5s; 
    
}

h1 { 
    display: inline
    text-align:center !important;
    margin: auto;
    font-size:16px;
    font-family: {select:font};
    letter-spacing:2px;
    line-height:100%; 
    padding-bottom: 10px;
    text-decoration: none;
      color:#ff3cdb;
}

h1:hover { 
    display: inline
    text-align:center !important;
    margin:auto;
    font-size:16px;
    font-family: {select:font};
    letter-spacing:2px;
    line-height:100%; 
    -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
    -webkit-filter: blur(3px);
    
     padding-bottom: 10px;
     text-decoration: none;
       color:#ff3cdb;
}


h2 { 
    text-align:center;
    font-size:20px;
    font-family: {select:font};
    letter-spacing:1px;
    line-height:100%;
    font-weight:normal; }

blockquote img, .post img, .question img, iframe {
    max-width:100%;
     border-radius:10px;  }
    
blockquote {
    margin:5px 0 5px 10px;
    padding-left:10px;
    border-left:1px solid {color:text}; } 
    
::-moz-selection { 
    background:#34732d;
    color:#ffffff; }
::selection { 
    background:#34732d;
    color:#ffffff; }
    
::-webkit-scrollbar { 
    height:12px; 
    width:12px; 
    background:#fb0000;
    border:5px solid {color:background}; } 
    
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
    background:#fb0000; 
    border:2.5px solid {color:background};
     border-radius:10px;  }
    

.sidepic { 
    position:absolute;
    height:auto;
    width:577px;
    max-width: 100%;
    bottom:6%; 
    left:6%;
    z-index:99999999999999999999999999999999999999999 !important;
     transform: rotate(-13deg);
     -webkit-transform:rotate(-13deg);
    -moz-transform:rotate(-13deg);
    -o-transform: rotate(-13deg);
}

.sidepicture { 
    position:absolute;
    height:auto;
    width:577px;
    max-width: 100%;
    left: 11%; 
    bottom:35%; 
    z-index:99999999999999999999999999999999999999999 !important;
     transform: rotate(10deg);
     -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    -o-transform: rotate(10deg);
}



.sidepic2 { 
     left:0;
     right:0;
    z-index: 99999;
    display: block;
    margin: auto;
    height: auto;
    position:absolute;
    width: 477px;
    max-width: 100%;
    top:440px;
     transform: rotate(-10deg);
     -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -o-transform: rotate(-10deg);
}

.sidepicture2 { 
    left:0;
     right:0;
   z-index: 99999;
    display: block;
    margin: auto;
    height: auto;
    position:absolute;
    width: 477px;
    max-width: 100%;
    top:200px;
     transform: rotate(6deg);
     -webkit-transform:rotate(6deg);
    -moz-transform:rotate(6deg);
    -o-transform: rotate(6deg);
}



/** sidebar  **/

#sidebar {
    position:fixed;
    left:0px;
    top:0px;
    height: 100vh;
    width:470px;
    background:pink;
    background-image:url('https://julietalayne.pink/wp-content/uploads/2020/09/hsjbackgroundprimarybestside.jpg');
    background-position: bottom left;
    background-size: 548px 1044px;
    background-repeat:no-repeat;
    background-attachment:fixed;
}


#sideimage img {
    max-width:250px;
    margin-left:10px;
}

    
#icon {
    {block:ifnotshowtitle} margin-top:20px; {/block:ifnotshowtitle}
    margin-bottom:15px;
    height:150px;
    border:5px solid {color:icon border}; 
     border-radius:10px;  }   
    
#search input {
    padding:5px;
    margin-top:10px; 
    background:{color:sidebar links bg};
    color:{color:sidebar links};
    font-family:{select:font};
    font-size:{text:font size}px;
    text-align:center;
    border:0;
     border-radius:10px;  }
#mg {width:{text:font size}px; vertical-align:top; background:{color:sidebar links bg};}

#nav {
    padding:2.5px;
    background:{color:sidebar links bg};
    color:{color:sidebar links};
    font-family:{select:font};
    font-size:{text:font size}px;
    border:0;
     border-radius:10px; 
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none; }
    
/** posts  **/    

#posts {
     position:absolute;
     margin:auto;
     left:0;
     right:0;
     top:50px;
     bottom:50px;
     {block:indexpage}
     width:520px; 
     {/block:indexpage}
     {block:permalinkpage} width:520px; {/block:permalinkpage} }

.post {
    padding:10px;
    {block:indexpage}
    width:500px; 
    {/block:indexpage}
    {block:permalinkpage} width:500px; {/block:permalinkpage}
    margin-bottom:50px;
     border-radius:10px; 
    background:#ddf2e8;
   
    box-shadow:7px 7px 0 0 #FF9BCA;
  
    -webkit-transition:.5s;
    transition:.5s; }
    
.post:hover, #notes:hover {
    
    box-shadow:7px 7px 0 0 #E20030;
 
    -webkit-transition:.5s;
    transition:.5s; 
    
}
    
/** caption options  **/    
    
.hcaption, .ncaption { display:none; }
{block:indexpage} .post:hover .hcaption{/block:indexpage}{block:permalinkpage}.hcaption, .ncaption{/block:permalinkpage} { display:inline; } 
   
/** chat post  **/

.chat {
    padding:5px;
    line-height:150%;
     border-radius:10px;  }
    
.chat:nth-of-type(odd) { 
    background:{color:text};
    color:{color:post};
    -webkit-transition:.5s;
    transition:.5s; }
    
.chat:nth-of-type(even) { 
    background:{color:post};
    color:{color:text};
    -webkit-transition:.5s;
    transition:.5s; }

/** audio post  **/

.audioplayer {
    z-index:2;
    padding:5px;
    height:26px;
    background:#000;
     border-radius:10px; 
    opacity:.75;
    -webkit-transition:.5s;
    transition:.5s; }
    
.audio {
    z-index:2;
    position:absolute;
    vertical-align:center;
    padding:10px;
    max-height:500px;
    {block:indexpage}
    width:480px; 
    {/block:indexpage}
    {block:permalinkpage} width:480px; {/block:permalinkpage}
    margin-top:100px;
    background:#ffe3e3;
    color:#ff4141;
    line-height:150%;
    text-align:center;
    font-size:20px;
     border-radius:10px; 
    {block:indexpage}
    opacity:0;
    -webkit-transition:.5s;
    transition:.5s; {/block:indexpage} }    
    
.post:hover .audioplayer, .post:hover .audio {
    opacity:1;
    -webkit-transition:.5s;
    transition:.5s; }
    
.albumart { 
    position:relative;
    {block:indexpage}
   width:500px; height:500px;
    {/block:indexpage}
    {block:permalinkpage} width:500px; height:500px; {/block:permalinkpage} }
    
.cover {
    position:absolute;
    width:100%;
    height:100%; }
    
/** ask post  **/    

.question {
    padding:10px;
    background:#5ac9e1;
    color:#000000;
     border-radius:10px;  }
    
.asker {
    padding:5px;
    {block:indexpage}
    max-width:480px;
    {/block:indexpage}
    {block:permalinkpage} max-width:480px; {/block:permalinkpage}
    margin-top:0; }
    
.askeru {
    margin-top:-20px;
    text-transform:lowercase;
    font-size:20px; }

/** post info  **/

*, a, .posts, a:hover,.iframe, body, .photoset:hover, .img:hover, .posts:hover, .photo:hover, .div:hover {
  
}

.info {
    padding:5px 10px 5px 10px;
    {block:indexpage}
   margin-top:-25px; opacity:0; 
    
    {/block:indexpage}
    {block:permalinkpage} margin-top:10px; {/block:permalinkpage}
     border-radius:10px; 
    background:#ffe3e3;
    -webkit-transition:.5s;
    transition:.5s; }
    
.info a, .tags a { color:#ff4141; }

 .post:hover .info {
    margin-top:10px;
    opacity:1;
    -webkit-transition:.5s;
    transition:.5s;
    
} 

.tags {
    padding:5px;
    {block:indexpage}
    margin-top:-25px; opacity:0; 
    {/block:indexpage}
    {block:permalinkpage} margin-top:5px; {/block:permalinkpage}
    background:#ffe3e3;
     border-radius:10px; 
    -webkit-transition:.5s;
    transition:.5s; }

.post:hover .tags {
    margin-top:5px;
    opacity:1;
    -webkit-transition:.5s;
    transition:.5s; 
    
}
    
/** notes  **/    

#notes {
    position:absolute;
    padding:10px;
    width:500px;
    margin-bottom:25px;
    background:{color:post};
   
    box-shadow:7px 7px 0 0 {color:post shadow};
  
     border-radius:10px; 
    -webkit-transition:.5s;
    transition:.5s; 
    
}

#notes img {
    padding:0 5px;
    width:15px;
     border-radius:10px;  }
    
#notes li {
    list-style-type:none;
    margin-left:-40px;
    margin-top:10px;
    padding-bottom:5px;
    border-bottom:1px solid {color:borders}; }

  
#position-menu-bar {
    position:fixed;
    right:20px;
    top:50px;
    z-index:99999999;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}


.menu-bar {
    display:block;
    width:60px;
    height:60px;
    background-color:#D1006B;
    padding-left:7px;
    padding-right:7px;
    color:#FFF;
  
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.menu-bar img {
    width:50px;
    height:50px;
    margin-top:6px;
    margin-left:5px;
    }
    


.mb {
    display:block;
    width:220px;
    height:20px;
    padding-top:10px;
    padding-bottom:10px;
    color:#FFF;
 
    background-color:#E20030;
    margin-bottom:5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.mb:hover {
    background-color:#D1006B;
    color:#FFF;    
    letter-spacing:5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  
}

#more-bar {
    display:block;
    opacity:0;
    position:absolute;
    padding:12px;
    margin-top:50px;
    margin-left:140px;
    width:220px;
    height:auto;
    text-align:center;
    background-color:#FF99CD;
    color:white;
    font-family:Courier new, monospace;
    font-size:15px;
    text-transform:uppercase;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

.mb:first-letter {
    color:#FF99CD;
    font-style:italic;
    font-family:Georgia;
    font-size:22px;
}


#position-menu-bar:hover #more-bar {
    margin-left:-140px;
    opacity:1;
    
}

#triangle {
    width:0;
    height:0;
    border-top:42px solid #FF99CD;
    border-right:42px solid transparent;
    position:absolute;
    margin-top:-28px;
    margin-left:145px;
    opacity:1;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform: rotate(45deg);
    } 
    
    .rainbow-text:hover {
            -moz-transition-duration:.6s;
    -webkit-transition-duration:.6s;
    -o-transition-duration:.6s;
    -webkit-filter: blur(3px);
    }
 
 .rainbow-text {
     width: 470px;
     top: 20%;
    position: absolute;
    text-align: center;
    z-index: 9999999999999999999;
  text-align: center !important;
  font-family: 'Pacifico', cursive;
  line-height: 36px;
  text-shadow: 2px 2px 4px #000000;
  font-size:40px;
   -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform: rotate(-5deg);
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 28s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 28s infinite;
  
  /* Standar Syntax */
  animation: rainbow 28s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

.rainbow-text3:hover {
      
    -webkit-filter: blur(3px);
}

 .rainbow-text3 {
    z-index: 9999999999999999999;
    display: inline;
    text-align:center !important;
    margin: auto;
    text-decoration: none !important;
    letter-spacing:2px;
    line-height:100%; 
    text-decoration: none;
    position:absolute;
    width: 100%;
    top:190px;
    font-family: 'Pacifico', cursive;
    line-height: 36px;
    text-shadow: 2px 2px 4px #000000;
    font-size:40px;
   -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform: rotate(-5deg);
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 28s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 28s infinite;
  
  /* Standar Syntax */
  animation: rainbow 28s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

.rainbow-text4:hover {
       
    -webkit-filter: blur(3px);
}

.rainbow-text4 {
    z-index: 9999999999999999999;
    display: inline;
    text-align:center !important;
    margin: auto;
    text-decoration: none !important;
    letter-spacing:2px;
    line-height:100%; 
    text-decoration: none;
    position:absolute;
    width: 100%;
    top:140px;
    font-family: 'Pacifico', cursive;
    line-height: 36px;
    text-shadow: 2px 2px 4px #000000;
    font-size:40px;
   -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform: rotate(-5deg);
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 28s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 28s infinite;
  
  /* Standar Syntax */
  animation: rainbow 28s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

  .rainbow-text2:hover {
          
    -webkit-filter: blur(3px);
  }
  
 .rainbow-text2 {
      width: 470px;
    top: 15%;
    position: absolute;
    text-align: center;
    z-index: 999999999999999999;
  text-align: center !important;
  font-family: 'Pacifico', cursive;
  line-height: 36px;
  text-shadow: 2px 2px 4px #000000;
  font-size:40px;
   -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform: rotate(-5deg);
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 28s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 28s infinite;
  
  /* Standar Syntax */
  animation: rainbow 28s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}
}
     
 }
 
 .rainbow-text2a:hover {
         
    -webkit-filter: blur(3px);
 }
 
 .rainbow-text2a {
    z-index: 9999999999999999999;
    display: inline;
    text-align:center !important;
    margin: auto;
    text-decoration: none !important;
    letter-spacing:2px;
    line-height:100%; 
    text-decoration: none;
    position:absolute;
    width: 100%;
    top:190px;
    font-family: 'Pacifico', cursive !important;
    line-height: 36px;
    text-shadow: 2px 2px 4px #000000;
    font-size:40px;
   -webkit-transform:rotate(-25deg);
    -moz-transform:rotate(-25deg);
    -o-transform: rotate(-25deg);
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 28s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 28s infinite;
  
  /* Standar Syntax */
  animation: rainbow 28s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}
}
     
 }
 
 
.tobikko {
    width:470px;
    text-align: center;
  top:250px;
  position: absolute;
  text-align: center !important;
  z-index: 999999999999999999;
  text-align: center;
}

.username {
     width:470px;
    text-align: center;
    z-index: 9999999999999;
}


.tobikko2 {
 position:relative;
     width: 100%;
     margin:auto;
     text-align: center;
     top:15px;
     z-index: 9999999999999;
}

.username2 {
  position:relative;
     width: 100%;
     margin:auto;
     text-align: center;
     top:15px;
     z-index: 9999999999999;
}

.userpic {
    display: block;
}

#userpic2 {
     position:relative;
     width: 100%;
     margin:auto;
     text-align: center;
     top:15px;
     z-index: 9999999999999;
}

@media screen and (max-width: 1300px) {
    body {
        overflow-x:hidden;
    }
   #sidebar  {
        display: none !important;
}
#posts {
    top: 740px;

}
}

@media screen and (min-width: 1300px) {
    body {
        overflow-x:hidden;
    }
  #header, #sidepic2, #sidepicture2, .sidepic2, .sidepicture2 {
        display: none !important;
    }
}



.header {
    width:400px;
    margin:0px auto 75px auto;
}

.header2 {
    width:400px;
    margin:auto;
}
 
 .like_and_reblog_buttons {
                border: 1px solid #e8e8e8;
                border-radius: 3px;
                list-style: none;
            }

            .like_and_reblog_buttons li {
                float: left;
                margin: 0;
                padding: 7px 15px;
                height: 20px;
            }

            .like_and_reblog_buttons li:first-child {
                border-right: 1px solid #e8e8e8;
            }
</style>

    
</head><body>
{block:IfMusic}
<!-- Wikplayer https://www.wikplayer.com -->
<script type="text/javascript" src="https://www.wikplayer.com/code.js" 
data-config="{'skin':'skins/wikfull/funkyLady/skin.css','volume':25,'autoplay':false,'shuffle':false,'repeat':1,'showcomment':false,'marqueetexton':true,'placement':'top','showplaylist':false,'playlist':[{'title':'Hey!%20Say!%20JUMP%3A%20Masquerade','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F2.-Masquerade.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Never%20Let%20You%20Go','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F07-Never-Let-You-Go-%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%EF%BC%8E%E3%82%AB%E3%83%A9%E3%82%AA%E3%82%B1.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Tada%20mae%20e%20(%E3%81%9F%E3%81%A0%E5%89%8D%E3%81%B8)','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FTada-mae-e-%E3%81%9F%E3%81%A0%E5%89%8D%E3%81%B8.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Stupid','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FStupid.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Star%20Time','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FStar-Time.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Precious%20Girl','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FPrecious-Girl.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Last%20Dance','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F03-Last-Dance.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Entertainment','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F03-Entertainment.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20From.','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F10-From..mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Just%20For%20You','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FJust-For-You.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20H.our%20Time','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F13-H.our-Time.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Hands%20Up','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F3-Hands-Up.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Sakura%2C%20Saita%20yo','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FSakura-Saita-yo.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20KISS%20Diary','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F15.-KISS-Diary.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Romeo%20%26%20Juliet','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2FRomeo-Juliet.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20School%20Girl','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F5-School-Girl-%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%EF%BC%8E%E3%82%AB%E3%83%A9%E3%82%AA%E3%82%B1.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Funky%20Time','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F5.-Funky-Time.mp3'},{'title':'Hey!%20Say!%20JUMP%3A%20Ride%20With%20Me','url':'https%3A%2F%2Fjulietalayne.pink%2Fwp-content%2Fuploads%2F2020%2F09%2F4-Ride-With-Me-%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%EF%BC%8E%E3%82%AB%E3%83%A9%E3%82%AA%E3%82%B1.mp3'}]}" ></script>
<!-- Wikplayer code end -->
{/block:IfMusic}



<div id="position-menu-bar">
    <div class="menu-bar">
    <img src="https://static.tumblr.com/5ojoydj/bunmo0ev7/fukuo-line-bar.png"/>
    </div>
        <div id="more-bar">
            <div id="triangle"></div>
          {block:AskEnabled}<a href="/ask" class="mb">Send Ask</a>{/block:AskEnabled}
        {block:SubmissionsEnabled}<a href="/submit" class="mb">Submissions</a>{/block:SubmissionsEnabled}
        {block:ifarchive}<a href="/archive" class="mb">{archivetitle}</a>{/block:ifarchive}
        {block:HasPages}{block:Pages}<a href="{url}" class="mb">{Label}</a>{/block:Pages}{/block:HasPages}
           {block:iflink1} <a href="{link1 url}" class="mb">{link1 title}</a> {/block:iflink1}
            {block:iflink2}<a href="{link2 url}" class="mb">{link2 title}</a> {/block:iflink2}
            {block:iflink3}<a href="{link3 url}" class="mb">{link3 title}</a> {/block:iflink3}
           {block:iflink4} <a href="{link4 url}" class="mb">{link4 title}</a> {/block:iflink4}
           {block:iflink5} <a href="{link5 url}" class="mb">{link5 title}</a> {/block:iflink5}
           {block:iflink6} <a href="{link6 url}" class="mb">{link6 title}</a> {/block:iflink6}
        
        </div>
 </div>


<div id="sidebar">
<div id="userpic"><a href="/" title="{title}" style="background:transparent;"><img src="{PortraitURL-128}" style="margin-top:23px; margin-left:22%; border-radius: 25px;  -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */-moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */ box-shadow: 0px 0px 20px #000; /* delete for solid white */
}"></a></div>
<div id="tobikko"><font class="rainbow-text2" style="text-align: center;"><center>A Tobikko Named</center></font></div>
<div id="username"><a href="/"><font class="rainbow-text">{title}</font></a></div>
<img src="https://julietalayne.pink/wp-content/uploads/2020/09/jump-3.gif" class="sidepic">

<img src="https://julietalayne.pink/wp-content/uploads/2020/09/4g90xl.gif" class="sidepicture"> 
 
</div>

<div id="header">
<div id="userpic2"><a href="/" title="{title}" style="background:transparent;"><img src="{PortraitURL-128}" style="border-radius: 25px;  -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */-moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */ box-shadow: 0px 0px 20px #000; /* delete for solid white */
}"></a></div>
<div id="username2"><a href="/"><font class="rainbow-text4">A Tobikko Named</font></a>
</div>   
<div id="username2"><a href="/"><font class="rainbow-text3">{title}</font></a>
</div>    
</div></div>

<div id="header2">

<div id="sidepic2"><img src="https://julietalayne.pink/wp-content/uploads/2020/09/jump-3.gif" class="sidepic2"></div>

<div id="sidepicture2"><img src="https://julietalayne.pink/wp-content/uploads/2020/09/4g90xl.gif" class="sidepicture2"></div>
 
</div>
 

  <div class=“autopagerize_page_element”>

<div id="posts">{block:Posts}<div class="post">
   
{block:Text}{block:Title}<span class="title"><a href="{Permalink}" style="background:transparent; padding:0;">{title}</a></span>{/block:Title}{Body}{/block:Text}
   
{block:Photo}{LinkOpenTag}<center>{block:indexpage}<img src="{PhotoURL-500}">{/block:indexpage}{block:permalinkpage}<img src="{PhotoURL-500}">{/block:permalinkpage}</center>{LinkCloseTag}{block:Caption}<div class="{select:caption}">{Caption}</div>{/block:Caption}{/block:Photo}
 
{block:Panorama}{LinkOpenTag}<center>{block:indexpage}<img src="{PhotoURL-500}">{/block:indexpage}{block:permalinkpage}<img src="{PhotoURL-500}">{/block:permalinkpage}</center>{LinkCloseTag}{block:Caption}<div class="{select:caption}">{Caption}</div>{/block:Caption}{/block:Panorama}
     
{block:Photoset}{Photoset}{block:Caption}<div class="{select:caption}">{Caption}</div>{/block:Caption}{/block:Photoset}
   
{block:Quote}<h1><i>"{Quote}"</i></h1><p align="right">{block:Source}- {Source}{/block:Source}{/block:Quote}
   
{block:Link}<h1><a href="{URL}" target="{Target}" style="color:{color:link};">{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
   
{block:Chat}{block:Title}<a href="{Permalink}" style="background:transparent; padding:0;"><h1>{title}</h1></a>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}{/block:Chat}
 
{block:Audio}
{block:AudioEmbed}{block:indexpage}{AudioEmbed-500}{/block:indexpage}{block:permalinkpage}{AudioEmbed-500}{/block:permalinkpage}{/block:AudioEmbed}
{block:AudioPlayer}
<div class="audio">{block:TrackName}<h1>{TrackName}</h1>{/block:TrackName}{block:Artist}by <i>{Artist}</i>{/block:Artist}{block:Album}<br/>from {Album}{/block:Album}<br/>{lang:played playcount times}</div>
<div class="albumart"><img src="https://static.tumblr.com/cyvqtbn/kIKn9m12h/0.png" class="cover">{block:AlbumArt}<img src="{AlbumArtURL}" class="cover">{/block:AlbumArt}</div>
<div class="audioplayer">{AudioPlayerBlack}</div>
{/block:AudioPlayer}
{block:Caption}<div class="{select:caption}">{Caption}</div>{/block:Caption}{/block:Caption}
{/block:Audio}
 
{block:Video}{block:indexpage}{VideoEmbed-500}{/block:indexpage}{block:permalinkpage}{VideoEmbed-500}{/block:permalinkpage}{block:Caption}<div class="{select:caption}">{Caption}</div>{/block:Caption}{/block:Video}
   
{block:Answer}<div class="question">{Question}</div><div class="asker" style="margin-left:10px;"><img src="{AskerPortraitURL-24}" width="20"><div class="askeru" style="margin-left:25px;">{Asker}</div></div>{block:Answerer}<br/><div class="question" style="text-align:right;">{Answer}</div><div class="asker" style="text-align:right; margin-right:10px;"><img src="{AnswererPortraitURL-24}" width="20"><div class="askeru" style="margin-right:25px;">{Answerer}</div></div>{/block:Answerer}{Answer}{/block:Answer}

{block:Date}<div class="info"><a href="{Permalink}" title="{lang:Permalink}">Created: {DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount}<a href="{Permalink}"  title="{lang:Permalink}" style="float:right;">{NoteCount}</a>{/block:NoteCount}
{block:RebloggedFrom} <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> <a href="{ReblogRootURL}" title="{ReblogRootName}">(source)</a>{/block:RebloggedFrom}</div> 
{block:HasTags}<div class="tags">{block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
   
</div>
{block:PostNotes}<div id="notes">{PostNotes-16}</div>{/block:PostNotes}
{/block:Posts}
</div>

<div class="yuck">{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}{block:ContentSource}<a href="{SourceURL}" target="_blank">source</a>{/block:ContentSource}</div>   


<script src="https://cdn.rawgit.com/humphreybc/tumblr-infinite-scroll/master/infinite-scroll.js"></script>   
</div>
</body>
    
   
    
</html>