Create a new version of paste:

<!DOCTYPE html>
<html lang="en" class="no-js">

<!--THEME 11 Serenade by hermionegrangcr 
 
THEME BLOG: grangersdesigns 

Notes: Previously made for aryapendragxn and now released for public use under her permission c:
 
 
          ♛       ♛       ♛                                
        ♛♛♛    ♛♛♛   ♛♛♛                      
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛              
         ♛♛♛  ♥ G♚D ♥ ♛♛♛  
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛                            
          ♛ ♛ ♛ ♛ ♛ ♛ ♛      © hermionegrangcr     
 
                           
Important:
 
♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)

♚ This theme is optimised for Google Chrome and laptops of 13~15 in.

♚ Tweak this to your preference as long as the credits remain intact.

♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
 
-->
  <head>

  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 

  <title>{Title}</title>
  
  <meta name="image:sidebar" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
  
  <meta name="image:profile" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">


  <meta name="image:menu" content="https://static.tumblr.com/f75d88f0d4ca272362db789619827992/xbvpdcx/XEvo9rzwa/tumblr_static_4sw688c0e58g4k4c8kc84oc4k.jpg">
  
  <meta name="color:highlight" content="#dedcee">
  <meta name="color:accent" content="#efefff">
  <meta name="color:grad1"content="#D3CCE3">
  <meta name="color:grad2"content="#E9E4F0">
  
  <meta name="select:colour scheme"content="simple_sch"title="Simple">
  <meta name="select:colour scheme"content="colour_sch"title="Colour">
  <meta name="select:colour scheme"content="grad_sch"title="Gradient">
  <meta name="select:colour scheme"content="white_sch"title="White">

  <meta name="select:photoset gutter"content="5px"title="5px">
  <meta name="select:photoset gutter"content="10px"title="10px">  
  <meta name="select:photoset gutter"content="2px"title="2px">
  <meta name="select:photoset gutter"content="1px"title="1px">
  <meta name="select:photoset gutter"content="0px"title="0px">
  
    <meta name="select:post width"content="post500"title="500px"/>    
    <meta name="select:post width"content="post540"title="540px"/>
    <meta name="select:post width"content="post450"title="450px"/>
    <meta name="select:post width"content="post400"title="400px"/> 
  
    <meta name="select:post spacing" content="150px">
    <meta name="select:post spacing" content="60px">
    <meta name="select:post spacing" content="80px">
    <meta name="select:post spacing" content="100px">
    <meta name="select:post spacing" content="120px">  
      
    <meta name="select:font size" content="12px" title="12px"> 
    <meta name="select:font size" content="11px" title="11px"> 
    <meta name="select:font size" content="10px" title="10px">
    <meta name="select:font size" content="9px" title="9px">   
    
    <meta name="select:notes display" content="def_notes" title="default">
<meta name="select:notes display" content="grid_notes" title="grid">
  
  <meta name="if:unnested captions" content="">
  <meta name="if:infinite scroll" content="">
  <meta name="if:manual load" content="">
  
    <meta name="text:name" content="Name.">
    <meta name="text:info1" content="Write">
    <meta name="text:info2" content="Something">
    <meta name="text:info3" content="Cool">
    <meta name="text:info4" content="Over">
    <meta name="text:info5" content="Here">


<meta name="text:askpage" content="/ask">

<meta name="text:Link1" content="Link1">
<meta name="text:link1 URL" content="/">
<meta name="text:Link2" content="Link2">
<meta name="text:link2 URL" content="/">
<meta name="text:Link3" content="Link3">
<meta name="text:link3 URL" content="/">
<meta name="text:Link4" content="">
<meta name="text:link4 URL" content="/">
<meta name="text:Link5" content="">
<meta name="text:link5 URL" content="/"> 
  

  <link rel="shortcut icon" href="{Favicon}">
  
  
<link rel="stylesheet" href="https://static.tumblr.com/xbvpdcx/58Ro6ymkf/centurygothic.css">    

<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <!--
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/50606hpqv30pt7m/jquery.square_menu.js"></script>      
      -->
      
      <script type="text/javascript" src="https://static.tumblr.com/xbvpdcx/Z9mp1z4j7/square-menu.js"></script>
      

      <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>

  <script type="text/javascript">
    $(document).ready( function() {
      $(".sidemenu").square_menu({
        flyDirection: "bottom",
        animationStyle: "vertical",
        button: false,
      });
      
      $(".open-menu").click(function() {
        $(".sidemenu").openMenu();
      });
    });
    </script>

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<!-- animsition.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">

<!-- animsition.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>

<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

<script>
$(document).ready(function() {
  
  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.a-link',
    loading: true,
    loadingParentElement: 'body',
    loadingClass: 'animsition-loading',
    loadingInner: '', 
    timeout: true,
    timeoutCountdown: 200,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
  
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'
   });   
   
$(function() {
  $('.captions a').addClass('a-link');
});  


}); 

</script>           

<link href="https://static.tumblr.com/xbvpdcx/rk6o68ue4/squaremenu.css" rel="stylesheet" type="text/css"/>


<style type="text/css">

/*Tumblr Controls*/
.tmblr-iframe{
    -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
-webkit-transform:scale(0.8);
-webkit-transform-origin:right;
-moz-transform:scale(0.8);
-moz-transform-origin:right;
-o-transform:scale(0.8);
-o-transform-origin:right;
-ms-transform:scale(0.8);
-ms-transform-origin:right;
transform:scale(0.8);
transform-origin:right;    
    
}


.animsition-loading {display:none;}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

::selection {background:#fafafa; color:#000;}
::-moz-selection {background:#fafafa;color:#000;}
::-webkit-selection {background:#fafafa;color:#000;}

::-webkit-scrollbar {
    width:12px;
    background:inherit;
}

::-webkit-scrollbar:horizontal {display:none;}

::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:5px solid #fff; }

#s-m-t-tooltip{
    position:absolute;
    margin-top: 10px!important;
    z-index:9999999999;
    padding:2px 5px 2px 5px;
    color:#5f5f5f;
    font-weight:300;
    max-width:500px;
    font-size:80%;
    letter-spacing:1.5px;
    background: #fff;
    border-left:2px solid {color:highlight};
    font-size:12px;
    text-transform:uppercase;

}

body {

font-family:'century gothic';
font-size:{select:font size};
font-weight:300;
line-height:160%;
color:#5f5f5f;

}

a {
  text-decoration:none;
  cursor:help;
  color:#ababab;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out; 
}

a:hover
{
    color:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

#content a:focus, #content a:active {color:{color:highlight};}

b, strong {font-weight:bold;}
i, em {font-style:italic;}

pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
background:#fafafa;
padding:5px;
}


iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}


/*sidebar*/
#sidebar {
  width:400px;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:10;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center; 
    -webkit-box-pack: center;
    -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
      -ms-flex-direction:column;
          flex-direction:column;          
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;          

}

body.simple_sch #sidebar {background:#fafafa;}
body.colour_sch #sidebar {background:{color:accent};}
body.grad_sch #sidebar {
    background: -webkit-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(0deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */    
}
body.white_sch #sidebar {background:#fff;}

#sbinfo {
  font-size:120%;
  line-height:160%;
  color:#5f5f5f;
  text-transform:uppercase;
  letter-spacing:1.2px;
  text-align:center;
  font-weight:100;
  max-width:250px;
  margin-bottom:5px;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out; 
}


#sbimg {
  border-radius:5%;
  background:#fff;
  position:relative;
  width:120px;
  height:120px;
  padding:5px;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;  
  position:relative;
  line-height:0;
  font-size:0;

}

body.white_sch #sbimg {background:#fafafa;}

#sbimg img {
  width:100%;
  height:100%;
  position:relative;
  opacity:1;
  display:inline;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;    
}

#sbimg a {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

#sbimg:hover img {
  opacity:0.7;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;  
}


#sbnav {
  width:120px;
  margin:5px auto;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;    
}

#sbnav a {
  width:100%;
  display:block;
  margin-top:5px;
  text-align:center;
  padding:5px;
  line-height:160%;
  letter-spacing: 1.2px;
  font-size:100%;
  color:#7f7f7f;
  background:#fff;
  text-transform:uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

body.white_sch #sbnav a {background:#fafafa;}

#sbnav a:hover {
  color:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

/*Navi Menu customisation*/
.sm-menu .sm-nav:nth-child(2) .nav-inner > a:hover{
  color: {color:highlight};
}

/*Navi Menu Desc*/
img.menuprof {width:250px;}

/*content*/

section#content {
  position:relative;
  font-family: 'Lora', serif;
  line-height:calc({select:font size} * 2);
  font-weight:400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
  margin:30px auto;
  left:8%;
  -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

body.post500 section#content {width:500px;}
body.post540 section#content {width:540px;}
body.post450 section#content {width:450px;}
body.post400 section#content {width:400px;}

main#entries {
  width:100%;
  display:block;
  margin-bottom:calc({select:post spacing} / 2);
}

/*posts*/
article.posts {
    width:100%;
    margin:{select:post spacing} auto;
    position:relative;
    text-align:justify;
}

article.posts:first-of-type {
    margin-top:0px;
}


.posts h1 {font-size:calc({select:font size} * 2);}
.posts h1:not(.plink):first-letter{border-bottom:3px solid {color:highlight};}
.posts h2 {font-size:calc({select:font size} * 1.5);}

.posts ol, .posts ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
.posts ol {
  list-style: decimal inside;
}

.posts ul {
  list-style: circle inside;
}

.posts li {margin-bottom:calc({select:font size} / 2);}

.posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  margin:{select:font size} 0 {select:font size} 0;
}

article.posts .captions {word-wrap:break-word;}

.captions *:not(ul):not(li):not(ol):not(h2):not(figure) {font-size:inherit;}

.captions a, span.qsource a, .ask_cont span a {
    border-bottom:1px solid #eaeaea;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

.captions a:hover, span.qsource a:hover, .ask_cont span a:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

.posts img.photop {display:block;line-height:0;}

.unnested .posts img.photop {margin-bottom:{select:font size};}

.posts video, .posts .tumblr_video_container {
  width: 100%    !important;
  height: auto   !important;
}

{block:ifinfinitescroll}
.posts {
    -webkit-animation:fadeIn ease-in 1s;
    -o-animation:fadeIn ease-in 1s;
    -moz-animation:fadeIn ease-in 1s;
    animation:fadeIn ease-in 1s;     
}
{/block:ifinfinitescroll}

body.defcap .captions blockquote { 
 border-left: 1px #eaeaea solid; 
 padding-left: calc({select:font size} * 2);
 margin-left: 10px; 
 max-width: 100%;
 margin:0;
}


body.defcap .captions blockquote blockquote {
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 border-left:none;
    
}

.captions figure {
    margin:calc({select:font size} * 2) 0;
}

blockquote.tumblr_parent {
    max-width:100%;
    margin:0;
}

.tumblr_parent blockquote {
 padding: 0 0 0 calc({select:font size} * 2);
 margin: 0 0 0 0;    
 border-left:1px {color:accent} solid;
}

.tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}

.unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a):not(span) {vertical-align:middle;}

img.tumblr_avatar {border-radius:5%;margin-right:12px;margin-top:8px;margin-bottom:8px;width:36px;height:36px;}

img.tumblr_avatar + a.tumblr_blog {
    font-weight:bold;
    vertical-align:middle;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:inherit;
    border-bottom:1px solid #5f5f5f;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;     
}

h1.plink a {
    color:inherit;
    border-bottom:1px solid #5f5f5f;
}

img.tumblr_avatar + a:hover.tumblr_blog, h1.plink a:hover {
    color:{color:accent};
    border-bottom:1px solid {color:accent};
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;     
}

blockquote.tumblr_parent .captions.txtps p:first-child:not(:empty){margin-top:0;}

div.ask_cont {
    padding-bottom:calc({select:font size} * 2);
    border-bottom:1px solid {color:accent};
    margin-bottom:calc({select:font size} * 2);
}

div.ask_cont span {font-weight:bold;}


a.read_more {
    color:inherit;
    font-style:italic;
    font-weight:bold;  
    font-size:calc({select:font size} * 1.5) !important;
    border-bottom:1px solid #5f5f5f;
}

/*chats*/
ul.chatlines {list-style:none;}
li.clines {padding:8px;margin-top:0;margin-bottom:0;}
.chatlines li.odd {background:#fafafa;}

/*quotes*/

h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin-bottom:0;font-weight:400;}

h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}

h1.qshort {line-height:140%;font-size:calc({select:font size} * 2);}
h1.qmedium, h1.qlong {line-height:160%;}

h1.qmedium {font-size:calc({select:font size} * 1.5);}

h1.qlong {font-size:calc({select:font size} * 1.2);}

span.qsource {width:100%;display:block;text-align:right;margin-top:16px;}

/*lightbox*/
#tumblr_lightbox,.tmblr-lightbox {background:#fafafa!important;}
 
 
#tumblr_lightbox img,.tmblr-lightbox .vignette {
    opacity:0;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
}
 
#tumblr_lightbox_center_image {
    opacity: 1!important;
    background-color: #fff!important;
}
 
#tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}
 
#tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
    opacity:1!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
 
 
#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
    box-shadow: 0 0 0 transparent !important;
}
 
#tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
    border-radius:0!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -o-border-radius: 0!important;  
    background:#fff !important;
    padding:{select:photoset gutter} !important;
}
 
 
#tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }
 
/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
.photo-slideshow .count-1 {
    margin-bottom:{select:photoset gutter}!important;
}
 
 
.photo-slideshow .count-2 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc(50% - ({select:photoset gutter}/2))!important;
}
 
.photo-slideshow .count-2:first-child {
    margin-left:0!important;
}
 
.photo-slideshow .count-3 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
}
 
.photo-slideshow .count-3:first-child {
    margin-left:0!important;
}
.photo-slideshow {
    display:block!important;
    margin-bottom:calc(-({select:photoset gutter} - 3px));
    position:relative;
    width:100%;
}
 
.defcap .photo-slideshow.processed {margin-bottom:0!important;}
 
.defcap .row:last-of-type .count-1 {margin-bottom:0!important;}
 
.unnested .photo-slideshow.processed {margin-bottom:calc({select:font size} * (2/3)) !important;}
 
.unnested .photo-slideshow.processed .row:last-of-type .count-1 {margin-bottom:0!important;}
 
/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */

/*audio posts*/
.flitwick {
    font-size:90%;
    width:100%;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
     display: -webkit-box;
    -webkit-box-align: center;
    position:relative;
}

.unnested .flitwick {margin-bottom:calc({select:font size} * (2/3));}

.grammy {
    position:relative;
    margin-left:0;
    width:100px;
    height:100px;    
}


.mariah {
    position:absolute;
    background:#fff;
    z-index:10;
    opacity:0;
    text-align:center;
    width:80px;
    height:80px;  
    margin-top:10px;
    margin-left:10px;  
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}


.mariah:hover {
    opacity:0.8;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

.playbox {
    overflow:hidden;
    width:40px;
    height:40px;
    margin-top:25px;
    margin-left:20px;    
}


.taylor {
    padding:0;
    margin-left:0px;
    background:#fafafa;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    justify-content:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
     display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack:center;
    width:calc(100% - 100px);
    height:100px;    
}


.swift {
    font-weight:normal;
    text-overflow: ellipsis;    
    white-space: nowrap;
    overflow:hidden;
    max-width:calc(100% - 50px);  
    line-height:2;
}


.swift b {font-weight:bold;}

div.post_footer {
    margin-top:calc({select:font size} * 1.5);
    font-family:'century gothic',sans-serif;
    text-transform:uppercase;
    letter-spacing:1.2px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:justify;
      justify-content:space-between;        
}

div.datesourcetag {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;        
}

div.datesourcetag > span + span {
    margin-left:20px;
}

span.dtls:first-of-type {margin-left:0;}


.tags {
    {block:indexpage}
    display:none;
    {/block:indexpage}   
    width:100%;
    margin-top:calc({select:font size}/2);
    font-style:italic;
    word-wrap:break-word;
}
 
.tags a {
    display:inline;
    margin-left:8px;
}
 
.tags a:first-of-type {margin-left:0;}

div.socs {
        display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;   
    margin-left:auto;
}

div.soc_obj {
  margin-left:8px;
}

.custom-like-button {
  position: relative;
  display: block;
  width: {select:font size};
  height: {select:font size};
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  cursor:pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  margin-top:calc(-{select:font size}/2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.our_button span {color:#ababab;}

.like_button:hover + .our_button span, .like_button.liked + .our_button span {
  color:red;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

.posts .lnr {width:100%;height:100%;}

/*pagination*/
.pg {
    {block:ifinfinitescroll}
    display:none;
    {/block:ifinfinitescroll}

    margin:auto;
    margin-top:calc(-{select:post spacing} / 2);
    margin-bottom:calc({select:post spacing} / 2);
    width:100%;
    color:inherit;    
    text-transform:uppercase;
    letter-spacing:1.5px;
    background:transparent; 
    text-align:center;
    word-spacing:20px;
}

.pg a {
    display:inline-block;
    color:inherit;
    border-bottom:1px solid #eaeaea;
} 

.pg a:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
}

.pg a.arrs {border-bottom:none!important;}


.pg a:hover {
    color:{color:highlight};
}


.pg > * + * {margin:6px;}

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


.bottom {display:block;text-align:center;text-transform:uppercase;margin-bottom:calc({select:post spacing} / 2);}
a.append {
    padding-bottom:2px;
    cursor:help;
    letter-spacing:1.2px;
    color:inherit;
    border-bottom:1px solid #eaeaea;
    font-weight:bold;    
}

a.append:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};

}

/*Grid notes*/
.grid_notes .postnotes *{    margin:0;    padding:0; } 

.grid_notes .postnotes { text-align: center; } 

.grid_notes ol.notes {margin-top:calc({select:font size} * 2);}

.grid_notes .postnotes li{    list-style-type:none;    display:inline-block;    width:calc({select:font size} * 2);    height:calc({select:font size} * 2);    margin:5px;    overflow:hidden; } 

.grid_notes .postnotes img{    width:calc({select:font size} * 2);    height:calc({select:font size} * 2); border-radius:5%;} 

.grid_notes li.more_notes_link_container{
    width:100%!important;
} 

/*def notes*/

h1.notehead {font-size:140%;margin:calc({select:font size}) 0 calc({select:font size} * 2) 0;border-bottom:none!important;}

.def_notes h1.notehead {margin-left:calc({select:font size}/3);}

.def_notes .postnotes ol.notes {list-style:none;margin:0;padding-left:5px;}

.def_notes .postnotes ol.notes li.note {
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;    
    margin:{select:font size} 0 {select:font size} 0;
}

.def_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}

.def_notes .postnotes li.note:last-of-type {margin-bottom:8px;}

.def_notes .postnotes ol.notes li.note a.avatar_frame {height:48px;margin-right:{select:font size};}


.def_notes .postnotes ol.notes li.note img.avatar {
    border-radius:5%;
    width:48px;
    height:48px;
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;        
}

.def_notes .postnotes ol.notes li.note img.avatar:hover {
    opacity:0.7;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.def_notes .postnotes ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 70px);}

.def_notes .postnotes li.with_commentary blockquote {
    display:none;
} 


li.note span.action a {
    color:inherit;
    border-bottom:1px solid #eaeaea;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}


li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
.def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a {
    font-size:calc({select:font size} * 1.2);
    margin:auto;
    cursor:help;
    color:inherit; 
}

li.more_notes_link_container a:hover {color:{color:highlight};}

li.note span.action a:hover{
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

/*Media Queries*/

img.menuprof {
    -webkit-transition: all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;     
}

@media screen and (max-width: 1400px) {

  #sidebar {
    width:300px;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
 
}

@media screen and (max-width: 1200px) {

  #sbinfo {
    font-size:100%;   
    -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out; 
  } 
  #sidebar {
    width:250px;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
  #sbimg {
    width:100px;
    height:100px;
  -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
  #sbnav {  
    margin-top:0;
  width:100px;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;    
  }
  #sbnav a {
    font-size:80%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
  }
  
.sm-menu {
  width: 800px;
  height: 450px;
  margin-left: -400px;
  margin-top: -225px;
}  

 
}

@media screen and (max-width: 1000px) {

   section#content {
    left:14%;
    -webkit-transition: all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;  
  }  
}


@media screen and (max-width: 800px) {

   .sm-menu {
    width:80%;
    height:45%;
    margin-left:-40%;
    margin-top:-22.5%;
  }  
  
  img.menuprof {
      width:160px;
    -webkit-transition: all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;       
  }
}


body.colour_sch .sm-overlay {background:{color:accent};}
body.grad_sch .sm-overlay {
    background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */    
}

/*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
#leo {

    font-family: Arial, Sans-Serif;
    text-transform:uppercase;
    text-align:center;
    z-index:99;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    
}

#leo a {
    z-index:99;
    position:fixed;
    font-size:12px;
    line-height:16px;
    width:18px;
    height:18px;
    font-weight:300;
    bottom:10px;
    right:5px;
    color:#000;
    background:rgba(255,255,255,0.4);
    padding:5px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
}

#leo a:hover {
    background-color:rgba(0,0,0,1);
    color:#fff;
    border-radius:50%;
   -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
   -moz-animation: hermione 1s;
   -o-animation: hermione 1s;
    animation: hermione 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    
    -moz-transform: rotate(720deg); /* IE 9 */
    -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
    transform: rotate(720deg);
    
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    

}

@-webkit-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
@-moz-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
@-o-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}

@keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
/*END OF CREDIT*/ 

    
</style>  

<script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
 
<script>
 
$(function(){ $('.unnested .posts').unnest({
    yourCaption: ".captions", //your caption selector, the div wrapping
    wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
    newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
    originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
    tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
    tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
    usernameColon: false //if turned to false, removes the colon at the end of usernames
}); });
   
</script>

{block:indexpage}
{block:ifinfinitescroll}
<script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>

<script>

// Infinite Scroll
$(function() {
    
var $container = $('#entries');
    $container.infinitescroll({
        
      loading: {
        finishedMsg: "<em>No more posts</em>",
        img: null,
        msg: null,
        msgText: "<em>Loading posts...</em>",
        {block:ifmanualload}
        finished: function () {$('.append').text('Load More'); },
        {/block:ifmanualload}

      },
      
        navSelector  : '.pg',            
        nextSelector : '.pg a:last',
        itemSelector : '.posts',
        {block:ifmanualload}
    errorCallback: function () {$('.append').fadeOut();},
        {/block:ifmanualload}
        bufferPx     : 200,

    }, 
        
    function( newElements ) {
           $( newElements ).find('.photo-slideshow').pxuPhotoset({
               lightbox: true,
               rounded: true,
               gutter: '0px',
               borderRadius: '0px',
               photoset: '.photo-slideshow',
               photoWrap: '.photo-data',
               photo: '.pxu-photo'
            });


        var $newElems = $(newElements);
        var $newElemsIDs = $newElems.map(function(){ 
            return this.id; 
        }).get();
        console.log($newElems, $newElemsIDs);
        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);

{block:ifunnestedcaptions}
$newElems.unnest({
 
    yourCaption: ".captions",  
    wrapName: ".tumblr_parent",
    newCaptionUsername: false,
    originalPostCaptionUsername: false,
    tumblrAvatars: true,
    tumblrAvatarClass: ".tumblr_avatar",
    usernameColon: false
   
});  
 
{/block:ifunnestedcaptions}
 
$( newElements ).find('.togglet').click(function(){
 
    $(this).closest('.posts').find('div.tags').slideToggle();
    $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
});
            

    });

{block:ifmanualload}    
    $container.infinitescroll('unbind');
        $('.append').on('click', function(e) {
      e.preventDefault();
      $container.infinitescroll('retrieve');
    }); 
{/block:ifmanualload}    
});
</script>
{/block:ifinfinitescroll}
{/block:indexpage}

  </head>
  <body class="animsition {select:colour scheme} {select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:notes display}">
  
  <div id="sidebar">
    <div id="sbinfo">{text:name}. <span data-typer-targets='{text:info1}, {text:info2}, {text:info3}, {text:info4}, {text:info5}'></span></div>
    <div id="sbimg">

<img src="{image:profile}">  
    
    <a class="a-link" href="/" title="refresh"></a>
    </div>
    <div id="sbnav">
      <a href="{text:askpage}"class="a-link">Message</a>
      <a class="open-menu">Navigation</a>
      <a href="/archive"class="a-link">Archive</a>
    </div>
  </div>
  
<section id="content">
    <main id="entries">
        {block:NoPosts} {/block:NoPosts}
        {block:posts}
<article class="posts" id="{PostID}">

<!--Chat-->
{block:chat}
{block:title}<h1>{Title}</h1>{/block:title}
<ul class="chatlines">
{block:Lines}
<li class="clines {Alt}">
{block:Label}<b>{Label}</b>{/block:Label} 
{Line} 
</li>
{/block:Lines}    
</ul>
{/block:chat}
<!--/Chat-->

<!--Ask post-->
{block:Answer}
<div class="ask_cont">

       <span>{Asker}:</span> {Question}

</div>
    <div class="captions">
        {Answer}
    </div>
{/block:Answer}
<!--/Ask post--> 

<!--Text--> 
{block:text}
{block:title}<h1>{Title}</h1>{/block:title}
<div class="captions">{body}</div>
{/block:text}
<!--Text-->

<!--Link-->
{block:link}
<h1 class="plink"><a href="{URL}">{Name}</a></h1>
{block:Description}
<div class="captions">{Description}</div>
{/block:Description}
{/block:link}
<!--/Link-->

<!--Quote-->
{block:Quote}
<h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>

{block:Source}
<span class="qsource">— {Source}</span>{/block:Source}
{/block:Quote}
<!--/Quote-->

<!--Video-->
{block:Video}
{Video-500}
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Video}
<!--/Video-->


<!--Photo post-->   
   {block:photo}
    {LinkOpenTag}
<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
    <img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">
</a>
    {LinkCloseTag}

{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}   
   {/block:photo}
<!--/Photo post-->  

<!--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 class="pffft" 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:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Photoset}
<!--/Photoset post-->


<!--Audio post-->
{block:Audio}
<div class="flitwick">

<div class="mariah">
    <div class="playbox">{AudioPlayerWhite}</div>
</div>

<div class="grammy">
<img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
{block:AlbumArt}
<img src="{AlbumArtURL}" style="position:absolute;">
{/block:AlbumArt}    
</div>


<div class="taylor">
    <div class="swift">
{block:TrackName}
<b>Song:</b> {TrackName}
{/block:TrackName}<br>

{block:Artist}
<b>Artist:</b> {Artist}
{/block:Artist}<br>

{block:Album}
<b>Album:</b> {Album}
{/block:Album}

    </div>
</div>

</div>
{block:Caption}
<div class="captions">{Caption}</div>
{/block:Caption}
{/block:Audio}
<!--/ Audio Post-->

{block:date}

<div class="post_footer">
    <div class="datesourcetag">
    
<span class="dtls">
<a class="a-link" title="{TimeAgo}" href="{Permalink}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a>     </span>

<span class="dtls">
{block:RebloggedFrom}
<a class="a-link" href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
{block:ContentSource}
/ <a class="a-link" href="{SourceURL}"  title="{ReblogRootName}" target="_blank">src</a>
{/block:ContentSource}
{/block:RebloggedFrom}      
</span>

{block:indexpage}
{block:HasTags}
<span class="dtls"><a class="togglet {PostID}" href="javascript:;">tags</a></span>
{/block:HasTags}
{/block:indexpage}

    </div>
    <div class="socs">
        
<div class="soc_obj">
<a title="reblog"class="a-link"href="{ReblogURL}"><span class="lnr lnr-sync"></span></a>    
</div>        

<div class="custom-like-button soc_obj">
  {LikeButton size="12"}
  <span class="our_button">
<span class="lnr lnr-heart"></span>
  </span>
</div>
        
    </div>
</div>

{block:HasTags}
     <div class="tags {PostID}">
    {block:Tags}
    <a class="a-link" href="{TagURL}">#{Tag}</a>
    {/block:Tags}
    </div>
{/block:HasTags}


{/block:date}

    
</article>     

<!-- {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:permalinkpage}
{block:NoteCount} 
<article class="posts postnotes">
<h1 class="notehead">{NoteCountWithLabel}</h1>
{block:PostNotes}{PostNotes-64}{/block:PostNotes}    
</article>
{/block:NoteCount}
{/block:permalinkpage} 


        {/block:posts}
    </main>
    
{block:indexpage}
<!--pagination-->
{block:pagination}
<div class="pg">
{block:PreviousPage}<a class="a-link arrs" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<span class="current"><em>{PageNumber}</em></span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a class="a-link arrs" href="{NextPage}">&raquo;</a>{/block:NextPage}
</div>
{/block:pagination}
<!--/pagination-->  

 {block:ifmanualload}
{block:Pagination}

<div class="bottom"><a class="append">Load More</a></div>
{/block:Pagination}
{/block:ifmanualload}

{/block:indexpage}    


</section>
 

        <div class="sidemenu">
          <nav class="left">
            <img class="menuprof" src="{image:menu}">

          </nav>
          <nav class="right">
          <a class="a-link" href="{text:link1 URL}">{text:link1}</a>
          <a class="a-link" href="{text:link2 URL}">{text:link2}</a>
          <a class="a-link" href="{text:link3 URL}">{text:link3}</a>
          <a class="a-link" href="{text:link4 URL}">{text:link4}</a>
          <a class="a-link" href="{text:link5 URL}">{text:link5}</a>
          </nav>
        </div>


<!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
<div id="leo">
<a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
</div>
<!--END OF CREDIT-->       

   <script>
      $(function () {
        $('[data-typer-targets]').typer();
      });
    </script>
<script>// Typer.js is built by Layervault
// Link: https://github.com/layervault/jquery.typer.js

String.prototype.rightChars = function(n){
  if (n <= 0) {
    return "";
  }
  else if (n > this.length) {
    return this;
  }
  else {
    return this.substring(this.length, this.length - n);
  }
};

(function($) {
  var
    options = {
      highlightSpeed    : 30,
      typeSpeed         : 100,
      clearDelay        : 500,
      typeDelay         : 200,
      clearOnHighlight  : true,
      typerDataAttr     : 'data-typer-targets',
      typerInterval     : 2000
    },
    highlight,
    clearText,
    backspace,
    type,
    spanWithColor,
    clearDelay,
    typeDelay,
    clearData,
    isNumber,
    typeWithAttribute,
    getHighlightInterval,
    getTypeInterval,
    typerInterval;

  spanWithColor = function(color, backgroundColor) {
    if (color === 'rgba(0, 0, 0, 0)') {
      color = 'rgb(255, 255, 255)';
    }

    return $('<span></span>')
      .css('color', color)
      .css('background-color', backgroundColor);
  };

  isNumber = function (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  };

  clearData = function ($e) {
    $e.removeData([
      'typePosition',
      'highlightPosition',
      'leftStop',
      'rightStop',
      'primaryColor',
      'backgroundColor',
      'text',
      'typing'
    ]);
  };

  type = function ($e) {
    var
      // position = $e.data('typePosition'),
      text = $e.data('text'),
      oldLeft = $e.data('oldLeft'),
      oldRight = $e.data('oldRight');

    // if (!isNumber(position)) {
      // position = $e.data('leftStop');
    // }

    if (!text || text.length === 0) {
      clearData($e);
      return;
    }


    $e.text(
      oldLeft +
      text.charAt(0) +
      oldRight
    ).data({
      oldLeft: oldLeft + text.charAt(0),
      text: text.substring(1)
    });

    // $e.text($e.text() + text.substring(position, position + 1));

    // $e.data('typePosition', position + 1);

    setTimeout(function () {
      type($e);
    }, getTypeInterval());
  };

  clearText = function ($e) {
    $e.find('span').remove();

    setTimeout(function () {
      type($e);
    }, typeDelay());
  };

  highlight = function ($e) {
    var
      position = $e.data('highlightPosition'),
      leftText,
      highlightedText,
      rightText;

    if (!isNumber(position)) {
      position = $e.data('rightStop') + 1;
    }

    if (position <= $e.data('leftStop')) {
      setTimeout(function () {
        clearText($e);
      }, clearDelay());
      return;
    }

    leftText = $e.text().substring(0, position - 1);
    highlightedText = $e.text().substring(position - 1, $e.data('rightStop') + 1);
    rightText = $e.text().substring($e.data('rightStop') + 1);

    $e.html(leftText)
      .append(
        spanWithColor(
            $e.data('backgroundColor'),
            $e.data('primaryColor')
          )
          .append(highlightedText)
      )
      .append(rightText);

    $e.data('highlightPosition', position - 1);

    setTimeout(function () {
      return highlight($e);
    }, getHighlightInterval());
  };

  typeWithAttribute = function ($e) {
    var targets;

    if ($e.data('typing')) {
      return;
    }

    try {
      targets = JSON.parse($e.attr($.typer.options.typerDataAttr)).targets;
    } catch (e) {}

    if (typeof targets === "undefined") {
      targets = $.map($e.attr($.typer.options.typerDataAttr).split(','), function (e) {
        return $.trim(e);
      });
    }

    $e.typeTo(targets[Math.floor(Math.random()*targets.length)]);
  };

  // Expose our options to the world.
  $.typer = (function () {
    return { options: options };
  })();

  $.extend($.typer, {
    options: options
  });

  //-- Methods to attach to jQuery sets

  $.fn.typer = function() {
    var $elements = $(this);

    return $elements.each(function () {
      var $e = $(this);

      if (typeof $e.attr($.typer.options.typerDataAttr) === "undefined") {
        return;
      }

      typeWithAttribute($e);
      setInterval(function () {
        typeWithAttribute($e);
      }, typerInterval());
    });
  };

  $.fn.typeTo = function (newString) {
    var
      $e = $(this),
      currentText = $e.text(),
      i = 0,
      j = 0;

    if (currentText === newString) {
      console.log("Our strings our equal, nothing to type");
      return $e;
    }

    if (currentText !== $e.html()) {
      console.error("Typer does not work on elements with child elements.");
      return $e;
    }

    $e.data('typing', true);

    while (currentText.charAt(i) === newString.charAt(i)) {
      i++;
    }

    while (currentText.rightChars(j) === newString.rightChars(j)) {
      j++;
    }

    newString = newString.substring(i, newString.length - j + 1);

    $e.data({
      oldLeft: currentText.substring(0, i),
      oldRight: currentText.rightChars(j - 1),
      leftStop: i,
      rightStop: currentText.length - j,
      primaryColor: $e.css('color'),
      backgroundColor: $e.css('background-color'),
      text: newString
    });

    highlight($e);

    return $e;
  };

  //-- Helper methods. These can one day be customized further to include things like ranges of delays.

  getHighlightInterval = function () {
    return $.typer.options.highlightSpeed;
  };

  getTypeInterval = function () {
    return $.typer.options.typeSpeed;
  },

  clearDelay = function () {
    return $.typer.options.clearDelay;
  },

  typeDelay = function () {
    return $.typer.options.typeDelay;
  };

  typerInterval = function () {
    return $.typer.options.typerInterval;
  };
})(jQuery);

</script>

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

{block:indexpage}
{block:posts}
<script>
$(document).ready(function(){
     $('a.togglet.{PostID}').click(function(e){
    e.preventDefault();
    $('div.tags.{PostID}').slideToggle();
    $(this).text( $(this).text() == 'Hide' ? "Show" : "Hide");
});
 
});
</script>
{/block:posts}
{/block:indexpage}

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

<script>
jQuery.noConflict();
(function($){
 
$(document).ready(function(){
 
$("a[title],img[title],[title]").style_my_tooltips({
 
tip_follows_cursor:true,
 
tip_delay_time:30,
 
tip_fade_speed:300,
 
attribute:"title"
 
});
 
});
 
})(jQuery); 
</script>
    
    
  </body>
</html>