BUBBLEPOP

<!DOCTYPE html>
<head>

<!-----
BY @KIRK, DON'T (RE)MOVE THE CREDIT
----->

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

<script type="text/javascript"> $(document).ready(function(){ $(".links_body").hide(); $(".links_head").click(function(){ $(this).next(".links_body").slideToggle('fast'); }); }); </script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Fredoka+One|Righteous|Kelly+Slab|Libre+Baskerville|Karla" rel="stylesheet">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<meta name="image:Side" content="">
<meta name="image:Background" content="">

<meta name="color:Background" content="#fff">
<meta name="color:Text" content="#000">
<meta name="color:Link" content="#ddd">
<meta name="color:Link BG" content="#fff">
<meta name="color:Highlight" content="#eee">
<meta name="color:Accent" content="#eee" />
<meta name="color:Post Accent" content="#eee" />
<meta name="color:Borders" content="#000000">
<meta name="color:Img Borders" content="#000000">
<meta name="color:Scrollbar" content="#000000">
<meta name="color:Footer Text" content="#fff" />

<meta name="if:Small Img" content="0">
<meta name="if:Sidebar Left" content="0">
<meta name="if:Img" content="0">
<meta name="if:Border 1px" content="0">
<meta name="if:Border 8px" content="0">
<meta name="if:Border 14px" content="0">
<meta name="if:Accent Border" content="0">
<meta name="if:Bubble Border" content="0">
<meta name="if:Link BG" content="0">
<meta name="if:Descr" content="0">
<meta name="if:Permalink Captions" content="0">

<meta name="select:Body Font" content="Arial">
<meta name="select:Body Font" content="Consolas">
<meta name="select:Body Font" content="'Karla'" title="Karla">
<meta name="select:Body Font" content="'Libre Baskerville'" title="Libre Baskerville">


<meta name="select:Text" content="10px">
<meta name="select:Text" content="11px">
<meta name="select:Text" content="12px">
<meta name="select:Text" content="13px">
<meta name="select:Text" content="14px">
<meta name="select:Text" content="15px">

<meta name="select:Post" content="300px">
<meta name="select:Post" content="400px">
<meta name="select:Post" content="500px">

<meta name="select:Accent Radius" content="0%">
<meta name="select:Accent Radius" content="8px">

<meta name="select:Img Radius" content="0%">
<meta name="select:Img Radius" content="100%">
<meta name="select:Img Radius" content="7px">

<meta name="select:Bubble Radius" content="0%">
<meta name="select:Bubble Radius" content="100%">
<meta name="select:Bubble Radius" content="7px">

<meta name="select:Bubble Align" content="center">
<meta name="select:Bubble Align" content="left">
<meta name="select:Bubble Align" content="right">

<meta name="text:Link Underline" content="underline">
<meta name="text:Desc" content="desc goes here">

<meta name="text:Link One" content="link 1">
<meta name="text:Link One URL" content="/">
<meta name="text:Link Two" content="link 2">
<meta name="text:Link Two URL" content="/">
<meta name="text:Link Three" content="link 3">
<meta name="text:Link Three URL" content="/">

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

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

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

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

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



<style type="text/css">

::-webkit-scrollbar {
width: 8px;
background: {color:Background}; }

::-webkit-scrollbar-thumb {
background: {color:Scrollbar};
}

.tooltip{
display:inline;
position:relative;
}

#s-m-t-tooltip{
      background:{color:Accent};
  border:1px solid {color:Borders};
 padding:2px 6px 3px 6px;
z-index:99999999999999999999;
margin:20px 7px -2px 20px;
}

body {
margin:0px;
background:{color:Background};
background-image:url('{image:Background}');
background-attachment:fixed;
background-repeat:repeat;
 font-family:{select:Body Font};
line-height:140%;
font-size:{select:Text};
color: {color:Text};
}

p{
margin:0 0 10px 0;
padding:0;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

a{
    text-decoration:{text:Link Underline};
color:{color:Link};
 -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

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

{block:ifSmallCursor}
*, body {cursor: url(http://i.imgur.com/2qleX.jpg), auto;} a, a:link,a:active,a:visited, a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
{/block:ifSmallCursor}

li{
margin-left:-15px;
}

#wrapper{
     width:{select:Post};
margin:50px auto;
}

#sidebar{
    top:40px;
    border-radius:{select:Accent Radius};
    margin-top:70px;
    {block:ifSidebarLeft}
    margin-left:-330px;{/block:ifSidebarLeft}
    {block:ifnotSidebarLeft}
    margin-left:600px;{/block:ifnotSidebarLeft}
height:auto;
width:100px;
text-align:{select:Bubble Align};
position:fixed;
}

.bounce {
    {block:ifBubbleBorder}
    border:1px solid {color:Borders};{/block:ifBubbleBorder}
    border-radius:{select:Bubble Radius};
    width:100px;
    padding:15px;
    position:absolute;
  left:20px;
 top:0;
  {block:ifnotDescr}margin-top:30px;{/block:ifnotDescr}
 {block:ifDescr}
  margin-top:20px; {/block:ifDescr}
  margin-left:130px;
  background:{color:Accent};
 animation: float 6s ease-in-out infinite;
}

@-webkit-keyframes float {
	0% {
		transform: translatey(0px);
	}
	25% {
		transform: translatey(-10px);
	}
	50% {
		transform: translatey(0px);}
			75% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);}
}

    .arrow_box {
	position: relative;
	background: {color:Accent};
}
.arrow_box:after, .arrow_box:before {
	right: 115%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: {color:Accent};
	border-width: 10px;
	{block:ifnotDescr}
	margin-top:28px;
	margin-right:-1px;
	{/block:ifnotDescr}
	{block:ifDescr}
	margin-right:0px;
	margin-top: 43px; {/block:ifDescr}

}

{block:ifBubbleBorder}
.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: {color:Accent};
	border-width: 10px;
	{block:ifnotDescr}
	margin-top:28px;
	{/block:ifnotDescr}
	{block:ifDescr}
	margin-top: 43px; {/block:ifDescr}
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: {color:Borders};
	border-width: 11px;
	{block:ifnotDescr}
	margin-top:27px;
	{/block:ifnotDescr}
	{block:ifDescr}
	margin-top: 42px; {/block:ifDescr}
}
{/block:ifBubbleBorder}



#sidebarimg img{
       margin-left:25px;
       margin-top:30px;
    {block:ifBorder1px}
    margin-top:29px;
    margin-left:24px;
    border:1px solid {color:Img Borders};
    {/block:ifBorder1px}
      {block:ifBorder8px}
    margin-top:24px;
    margin-left:12px;
    border:8px solid {color:Img Borders};
    {/block:ifBorder8px}
      {block:ifBorder14px}
    margin-top:20px;
    margin-left:0px;
    border:14px solid {color:Img Borders};
    {/block:ifBorder14px}
    border-radius:{select:Img Radius};
    width:100px;
    {block:ifSmallImg}
    margin-top:57px;
    margin-left:60px;
    width:50px;
        {/block:ifSmallImg}
}

#links{
    line-height:25px;
    {block:ifnotDesc}
    margin-top:0px;{/block:ifnotDesc}
    font-size:{select:Text};
    text-align:{select:Bubble Align};
}

    #links a{
        {block:ifLinkBG}
        background:{color:Link BG};     {/block:ifLinkBG}
        color:{color:Link};
    }

    #links a:hover{
       color:{color:Link};
        background:transparent;
    }

#content{
width:600px;
margin-left:0px;
overflow:hidden;;
}

.post{
    {block:ifAccentBorder}
    border-radius:{select:Accent Radius};
    padding:20px;
    border:1px solid {color:Borders}; background:{color:Post Accent};
    {/block:ifAccentBorder}
width:{select:Post};
margin:0 0 50px 0;
overflow:hidden;
}

.post img{
width:100%;
}

#pagination{
    margin-bottom:40px;
    margin-top:40px;
    width:fixed;
    text-align:left;
           }

           #pagination a{
               border-radius:{select:Accent Radius};
               color:{color:Text};
               margin-right:10px;
               padding:5px;
               border:1px solid {color:Borders};
               background:{color:Accent};
           }


.media{
margin:0 0 10px 0;
}

.title{
font-weight:normal;
font-size:18px;
margin:0 0 10px 0;
}

.quote{
font-weight:normal;
font-size:16px;
font-style:italic;
margin:0 0 10px 0;
}

.question{
margin-bottom:10px;
}

blockquote{
margin:0 0 10px 10px;
padding:0 0 0 10px;
border-left:2px solid #000;
}

.line{
    height:1px;
    background:{color:Borders};
}

.post .footer{
    margin-top:15px;
text-align:left;
}

.post .footer a{
      color:{color:Footer Text};
}


::selection {
  background: {color:Highlight};
}
::-moz-selection {
  background: {color:Highlight};
}

ol.notes{
list-style-type:decimal;
margin:0;
padding-left:35px;
}

 ol.notes li.note img{
display:none;
}


ol.notes li.note{
margin-top:10px;
}

#donnie{
   position: fixed;
bottom: 4px;
right: 12px;
z-index: 99;
font-size: 10px;
}

#donnie a{
    color:{color:Borders};
}

.buttonback {
position: absolute;
left: 20px;
top: 20px;
width: 19px;
height: 19px;
background-color: {color:Accent};
padding: 10px;
opacity: .4;
transition: opacity .7s ease-in-out;
}

.buttonback:hover {
opacity: 1;
}

.actualbutton {
position: relative;
width: 20px;
height: 20px;
overflow: hidden;
}

.buttonwrapping {
position: absolute;
top: -4px;
left: -7px;
}

.tumblr_audio_player {
height: 100px;
width: 100px;
transform: scale(1, 1);
transform-origin: top left;
}

.audioimgwrapping {
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
width: 75px;
height: 75px;
}

.audioimgwrapping img {
width: 100%;
height: auto;
}

.trackdetails {
width: auto;
display:inline-block;
margin-left: 90px;
min-height: 90px;
}

.audiowrapper {
position: relative;
display:inline-block; }

.tumblr_video_container {
width:auto!important;
height:auto!important;
}


    .searching input{
    width:100%;
    background:#fff5f8;
    height:14px;
    border:0;
    margin:0;
    outline:none;
    font:inherit;
}


    .searching input[type=text] {color:#fff;}
input::-webkit-input-placeholder {color:#fff;}
input::-moz-placeholder {color:#fff;}
input:-moz-placeholder {color:#fff;}
input:-ms-input-placeholder {color:#fff;}
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}


#bx {height: 20px; overflow: hidden;
transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}

#bx:hover {height: 50px;
transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;}

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

{CustomCSS}
</style>

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

<script>
$(document).ready(function(){
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '2px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'
   });
});
</script>

</head>

<body>

<div id="wrapper">


<div id="sidebar">
<div class="bounce">
<div class="arrow_box"></div>
{block:ifDescr}
<p>{text:Desc}</p>{/block:ifDescr}
<div id="links">
<a href="{text:Link One URL}">{text:Link One}</a><br> <a href="{text:Link Two URL}">{text:Link Two}</a><br> <a href="{text:Link Three URL}">{text:Link Three}</a></div></div>
<div id="sidebarimg">{block:ifImg}<a href="/"><img src="{image:Side}"></a>{/block:ifImg} </div>{/block:ifImg}
</div>

{block:HasPages}
{block:Pages}
<a href="{URL}">{Label}</a><br>
{/block:Pages}
{/block:HasPages}



<div id="content">
{block:Posts}

<div class="post">

{block:Text}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}
{Body}
{/block:Text}

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" style="width:{select:Post}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>

{/block:Photo}

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

{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
&nbsp;{Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
<div class="video">{Video-500}</div>
{/block:Video}

{block:AudioPlayer}
<div class="audiowrapper">
{block:AlbumArt}
<div class="audioimgwrapping"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="buttonback">
<div class="actualbutton">
<div class="buttonwrapping">{AudioPlayerWhite}
</div>
</div>
</div>
<div class="trackdetails">
{block:TrackName}<b>{TrackName}</b>{/block:TrackName}<br/>
{block:Artist}Artist: {Artist}{/block:Artist}<br/>
{block:Album}Album: {Album}{/block:Album}<br/>
{PlayCountWithLabel}
</div>
</div>
{/block:AudioPlayer}

{block:Answer}
<div class="question">{Asker}: {Question}</div>
<div class="caption"><blockquote>{Answer}</blockquote></div>
{/block:Answer}

{block:Date}
<div class="footer">
{block:ifPermalinkCaptions}
  {block:PermalinkPage}
{block:Caption}<div class="caption" style="text-align:left">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:ifPermalinkCaptions}
{block:ifnotPermalinkCaptions}
{block:Caption}<div class="caption" style="text-align:left">{Caption}</div>{/block:Caption}{/block:ifnotPermalinkCaptions}
<i class="fas fa-clock"></i>
<a href="{Permalink}" style="margin-right:14px">{TimeAgo}</a>
<br>
 {block:HasTags}
 <i class="fas fa-tags"></i>
{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
    {/block:HasTags}

{block:RebloggedFrom}<a href="{ReblogParentURL}" title="via"></a>{/block:RebloggedFrom}
{block:ContentSource}<a href="{SourceURL}" title="source"></a>{/block:ContentSource}
<a href="{ReblogURL}" target="_blank" class="details" title="reblog"></a><br>
</div>
{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}

{/block:Date}

</div>
{/block:Posts}

{block:Pagination}
<div id="pagination">
{block:PreviousPage}<a href="{PreviousPage}">previous</a> {/block:PreviousPage}

{block:NextPage}<a href="{NextPage}">forward</a>{/block:NextPage}
</div>
{/block:Pagination}

</div>
<div id="donnie"><a href="https://kirk.tumblr.com/">CREDIT</a></div>

</div>
</div>
    </body>
</html>