ControlC ControlC · Pastebin
Login Register

Theme #33

Pasted: Oct 30, 2019, 10:48:29 pm · Views: 521
<!DOCTYPE html>

<!----

©hunterthemes.tumblr.com | Theme #33 (Thriller Themes & Creepy Codes Challenge)

* Do not redistribute this theme and claim it as your own.
* Do not remove the credit or move it to another page.
* Minor changes to this theme are allowed.

---->

<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<title>{Title}
{block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}
{block:TagPage} - {Tag} {/block:TagPage}
{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />
{/block:Description}

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Lato|Oswald|Quando|Teko" rel="stylesheet">

<!-- DEFAULT VARIABLES -->

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

<meta name="color:Background" content="#ffffff" />
<meta name="color:Panel text" content="#111111" />
<meta name="color:Panel background" content="#ffffff" />
<meta name="color:Menu icon" content="#ffffff" />
<meta name="color:Sidebar background" content="#ffffff" />
<meta name="color:Description" content="#111111" />
<meta name="color:Blog title" content="#000000" />
<meta name="color:Sidebar link" content="#000000" />
<meta name="color:Post background" content="#ffffff" />
<meta name="color:Borders" content="#DDDDDD" />
<meta name="color:Accent" content="#FF6F61" />
<meta name="color:Title" content="#111111" />
<meta name="color:Text" content="#111111" />
<meta name="color:Link" content="#729F51" />
<meta name="color:Icon" content="#729F51" />
<meta name="color:Hover" content="#445533" />
<meta name="color:Chat 1" content="#333333" />
<meta name="color:Chat 2" content="#111111" />
<meta name="color:Bold" content="#FF6F61"/>
<meta name="color:Italic" content="#729F51"/>
<meta name="color:Post buttons" content="#333333" />
<meta name="color:Pagination" content="#ffffff" />
<meta name="color:Scrollbar" content="#FF6F61" />
<meta name="color:Scrollbar background" content="#ffffff" />

<meta name="select:Title font" content="Abril Fatface" title="Abril Fatface">
<meta name="select:Title font" content="Lato" title="Lato">
<meta name="select:Title font" content="Oswald" title="Oswald">
<meta name="select:Title font" content="Quando" title="Quando">
<meta name="select:Title font" content="Teko" title="Teko">

<meta name="select:Title font size" content="25px" title="25px">
<meta name="select:Title font size" content="30px" title="30px">
<meta name="select:Title font size" content="35px" title="35px">
<meta name="select:Title font size" content="40px" title="40px">
<meta name="select:Title font size" content="45px" title="45px">

<meta name="select:Blog title font size" content="22px" title="22px">
<meta name="select:Blog title font size" content="24px" title="24px">
<meta name="select:Blog title font size" content="26px" title="26px">
<meta name="select:Blog title font size" content="28px" title="28px">
<meta name="select:Blog title font size" content="30px" title="30px">

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

<meta name="select:Post width" content="600" title="600px">
<meta name="select:Post width" content="540" title="540px">
<meta name="select:Post width" content="500" title="500px">
<meta name="select:Post width" content="400" title="400px">
<meta name="select:Post width" content="300" title="300px">

<meta name="if:Spooky" content="1" />
<meta name="if:Inverted Controls" content="0" />
<meta name="if:Infinite Scroll" content="0" />
<meta name="if:Load More" content="0" />
<meta name="if:Display Search Box" content="1" />
<meta name="if:Display Avatar" content="1" />
<meta name="if:Circular Avatar" content="1" />
<meta name="if:Display Navigation" content="1" />
<meta name="if:Ask Enabled" content="1" />
<meta name="if:Submissions Enabled" content="1" />
<meta name="if:Hover For Info" content="0" />
<meta name="if:Display Captions" content="1" />
<meta name="if:Display Tags" content="1" />

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

<meta name="text:Link One Title" content="LINK ONE" />
<meta name="text:Link One Url" content="http://"/>
<meta name="text:Link Two Title" content="LINK TWO"/>
<meta name="text:Link Two Url" content="http://"/>
<meta name="text:Link Three Title" content="LINK THREE" />
<meta name="text:Link Three Url" content="http://" />
<meta name="text:Link Four Title" content="LINK FOUR" />
<meta name="text:Link Four Url" content="http://" />
<meta name="text:Link Five Title" content="LINK FIVE" />
<meta name="text:Link Five Url" content="http://" />
<meta name="text:Link Six Title" content="LINK SIX" />
<meta name="text:Link Six Url" content="http://" />

<meta name="text:Border radius" content="10px"/>
<meta name="text:Subtitle" content="Subtitle" />

<!-- END DEFAULT VARIABLES -->

<style type="text/css">

/* CSS */

/*-- GENERAL --*/

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

/* Headings */

h1 {
margin:0;
padding:0;
padding-bottom:5px;
color:{color:Title};
font-family:{select:Title font};
font-size:{select:Title font size};
line-height:calc({select:Title font size} + 7px);
}

h2 {
font-family:{font:Body font};
font-size:150%;
font-weight:normal;
}

/* Paragraph */

p {
padding:0 10px;
}

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

/* Links */

a {
color:{color:Link};
text-decoration:none;
transition:all .3s linear;
-webkit-transition:all .5s linear;
-o-transition:all .5s linear;
-moz-transition:all .5s linear;
}

a:hover {
color:{color:Link Hover};
}

/* Bold and italic */

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

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

/* Blockquote */

blockquote {
padding:0 0 2px 5px;
margin:0 0 2px 10px;
border-left: 1px dotted #555555;
}

/* Tumblr controls */

iframe.tmblr-iframe {
top:4px!important;
right:40px!important;
opacity:0.8;
transform:scale(0.6);
transform-origin:100% 0;
-webkit-transform:scale(0.8);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.8);
-o-transform-origin:100% 0;
-moz-transform:scale(0.8);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.8);
-ms-transform-origin:100% 0;
z-index:100000!important;
{block:ifInvertedControls}
filter:invert(100%) hue-rotate(180deg);
-webkit-filter:invert(100%) hue-rotate(180deg);
-moz-filter:invert(100%) hue-rotate(180deg);
-o-filter:invert(100%) hue-rotate(180deg);
-ms-filter:invert(100%) hue-rotate(180deg);
{/block:ifInvertedControls}
}

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

.tmblr-iframe--app-cta-button {
display: none!important;
}

/* Webkit scrollbar */

::-webkit-scrollbar {
width: 9px;
height:0;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height:0;
display: block;
background-color: {color:Scrollbar background};
}

::-webkit-scrollbar-track-piece {
background-color: {color:Scrollbar background};
}

::-webkit-scrollbar-thumb:vertical {
height:0;
background-color: {color:Scrollbar};
border:4px solid {color:Scrollbar background};
}

/* Tooltips */

#s-m-t-tooltip {
max-width:300px;
margin-left:10px;
margin-top:10px;
padding:2px 4px;
font-size:12px;
line-height:15px;
color:{color:Sidebar icon};
background:{color:Sidebar background};
border:1px solid {color:Borders};
border-radius:{text:Border radius};
z-index:10000;
}

/* Fix */

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

.video * {
display:block;
min-width:100%;
}

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

/*--- MENU ---*/

#menu {
position:fixed;
top:0;
left:0;
width:60px;
height:100%;
background:{color:Accent};
border-bottom:1px solid {color:Borders};
z-index:1000;
}

/* Main links */

#main-links {
position:fixed;
margin-top:10px;
margin-left:10px;
width:50px;
line-height:30px;
list-style:none;
}

#main-links a {
display:block;
margin-top:15px;
width:37px;
height:30px;
padding:5px 0 5px 13px;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
-webkit-transition:all .5s linear;
-o-transition:all .5s linear;
-moz-transition:all .5s linear;
}

#main-links span {
font-size:15px;
color:{color:Menu icon};
cursor:pointer;
transition:all .3s linear;
-webkit-transition:all .5s linear;
-o-transition:all .5s linear;
-moz-transition:all .5s linear;
}

#main-links a:hover,
#main-links a.selected,
#open-sidebar.selected,
#open-search.selected {
color:{color:Accent}!important;
background:{color:Panel background}!important;
}

#main-links a:hover span,
#main-links a.selected span,
#open-sidebar.selected,
#open-search.selected {
color:{color:Accent}!important;
}

#main-links li.selected a { cursor:default }

a#open-sidebar {
display:none!important;
}

/* Search box */

#search-panel {
position:fixed;
top:0;
left:60px;
width:calc(100vw - 150px);
height:calc(100vh - 100px);
padding:50px;
font-size:13px;
line-height:16px;
color:{color:Panel text};
background:{color:Panel background};
display:none;
z-index:100000;
}

#search {
position:fixed;
top:50%;
left:150px;
width:calc(100vw - 150px);
height:auto;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

#search h2 {
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
border-bottom:none;
color:{color:Title};
text-align:center;
font-size:30px;
}

#search h2::after {
content: '';
display:block;
margin-top:15px;
margin-left:auto;
margin-right:auto;
width:40px;
height:2px;
background:{color:Accent};
}

.requiro {
margin:0 auto;
width:50%;
height:50px;
line-height:50px;
cursor:pointer;
color:{color:Panel text};
border-bottom:1px solid {color:Accent};
padding:5px 10px;
z-index:100;
}

.requiro span {
position:absolute;
margin-left:-10px;
color:{color:Panel text};
}

input:focus::-webkit-input-placeholder {
color:transparent;
}

input:focus:-moz-placeholder {
color:transparent;
}

input:focus::-moz-placeholder {
color:transparent;
}

input:focus:-ms-input-placeholder {
color:transparent;
}

.requiro input{
outline:none;
border:0;
width:100%;
margin:0;
padding:0;
background:transparent;
font-size:16px;
}

.requiro input[type=text]{
color:{color:Panel text};}
input::-webkit-input-placeholder{
color:{color:Panel text};}
input::-moz-placeholder{
color:{color:Panel text};}
input:-moz-placeholder{
color:{color:Panel text};}
input:-ms-input-placeholder{
color:{color:Panel text};}

/* Close button */

#close-sidebar,
#close-search {
position:absolute;
top:0;
right:9px;
width:70px;
height:70px;
line-height:70px;
text-align:center;
background:{color:Accent};
border-bottom-left-radius:35px;
z-index:100;
cursor:pointer;
}

#close-sidebar span, #close-search span {
color:{color:Menu icon};
font-size:20px;
}

/*-- SIDEBAR --*/

#sidebar {
position:fixed;
top:0;
right:0;
width:30vw;
height:100vh;
font-size:{select:Body font size};
line-height: calc({select:Body font size} + 7px);
background:{color:Sidebar background};
background-image:url({image:Sidebar background});
z-index:10000;
overflow:hidden;
}

/*-- Sidebar image --*/

#sidebar-image {
margin-top:0;
margin-left:0;
width:100%;
height:auto;
{block:ifSpooky}
min-height:190px;
{block:ifSpooky}
max-height:30vh;
overflow:hidden;
}

#frame {
position:fixed;
top:0;
width:100%
z-index:10;
}

/* Blog title */

.blog-title {
margin-top:20px;
margin-left:20px;
width:calc(100% - 40px);
height:60px;
line-height:30px;
letter-spacing:2px;
font-family:{select:Title font};
font-size:{select:Blog title font size};
color:{color:Blog title};
}

.blog-title:hover {
color:{color:Hover};
}

.blog-title span {
font-family:{font:Body font};
font-size:{select:Body font size};
letter-spacing:0;
}

/* Avatar */

.avatar {
margin-right:20px;
float:left;
width:60px;
height:60px;
border-radius:{text:Border radius};
border:1px solid {color:Accent};
{block:ifCircularAvatar}
border-radius:100px;
{/block:ifCircularAvatar}
-webkit-transition:all .5s linear;
-o-transition:all .5s linear;
-moz-transition:all .5s linear;
}

.avatar:hover {
border:1px solid {color:Hover};
}

.avatar img {
width:100%;
height:100%;
border-radius:{text:Border radius};
{block:ifCircularAvatar}
border-radius:100px;
{/block:ifCircularAvatar}
}

/* Description */

.description {
margin-top:20px;
margin-left:20px ;
width:calc(100% - 50px);
max-height:25vh;
padding-right:10px;
color:{color:Description};
text-align:justify;
overflow-y:auto;
font-family:{font:Body font};
font-size:{select:Body font size};
line-height: calc({select:Body font size} + 7px);
}

.divider {
margin-top:20px;
margin-left:20px ;
width:calc(100% - 40px);
{block:ifnotSpooky}
border-bottom:1px solid {color:Accent};
{/block:ifnotSpooky}
}

/* Links */

.links {
margin-top:20px;
margin-left:20px;
width:calc(100% - 40px);
height:auto;
max-height:30vh;
line-height:24px;
}

.links a {
display:inline-block;
margin-top:10px;
min-width:calc(50% - 30px);
text-transform:uppercase;
text-align:right;
color:{color:Sidebar link};
}

.links a:nth-child(odd) {
margin-right:55px;
}

.links a:hover {
color:{color:Hover};
}

.links span {
float:left;
color:{color:Accent};
font-size:12px;
margin-right:5px;
padding:0 5px;
text-align:center;
color:{color:Menu icon};
background:{color:Accent};
border-radius:calc({text:Border radius} - 2px);
}

/*---------------------------- MAIN CONTAINER ----------------------------*/

#container {
margin-top:0;
margin-left:60px;
width:calc(70vw - 70px);
min-height:600px;
z-index:10;
}

/*------ POSTS AND ENTRIES -----*/

#posts {
display:block;
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
width:calc({select:Post width}px + 72px);
max-width:calc(70vw - 25px);
{block:PermalinkPage}
width:562px!important;
{/block:PermalinkPage}
}

.entry {
float:left;
display:block;
margin:20px;
width:{select:Post width}px;
padding:15px;
padding-bottom:10px;
background:{color:Post background};
border:1px solid {color:Borders};
border-radius:{text:Border radius};
overflow:hidden;
}

.entry img { max-width:100%; }

/* -------- RESPONSIVE DESIGN VALUES, editing is not recommended -------- */

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

a#open-sidebar {
display:block!important;
}

#sidebar {
position:fixed;
top:0;
right:0;
width:calc(100vw - 70px)!important;
height:100vh;
font-size:{select:Body font size};
line-height: calc({select:Body font size} + 7px);
background:{color:Sidebar background};
background-image:{image:Sidebar background};
z-index:10000;
display:none;
}

#container {
width:calc(100vw - 70px)!important;
}

#posts {
margin:20px 0;
width:calc(100vw - 60px)!important;
max-width:calc(100vw - 60px)!important;
{block:PermalinkPage}
width:calc(100vw - 60px)!important;
max-width:calc(100vw - 60px)!important;
{/block:PermalinkPage}
}

.entry {
float:left;
display:block;
margin:25px!important;
width:calc(100vw - 152px)!important;
min-width:300px;
z-index:100;
{block:PermalinkPage}
width:calc(100vw - 152px)!important;
{/block:PermalinkPage}
}

.blog-title {
font-size:calc({select:Blog title font size} - 5px)!important;
}

#pager {
margin-left:0;
width:100vw!important;
{block:PermalinkPage}
width:100vw!important;
{/block:PermalinkPage}
min-width:300px;
}

#sidebar-image {
{block:ifSpooky}
max-height:120px!important;
{block:ifSpooky}
}

}

/* End responsive values */


/* -- POST STYLES -- */

/* Quote posts */

.quote {
margin:5px;
padding:10px;
font-family:{select:Title font};
font-size:200%;
line-height:130%;
color:{color:Italic};
height:auto;
text-align:center;
letter-spacing:1px;
}

.source {
margin-top:5px;
margin-bottom:10px;
font-family:{font:Body font};
font-size:15px;
height:25px;
line-height:25px;
text-align:left;
overflow:hidden;
}

.source span {
float:left;
margin-right:10px;
color:{color:Link};
padding:5px;
padding-right:10px;
font-size:15px;
border-right:1px solid {color:Borders};
}

/* Link posts */

.linktitle {
width:calc(100% - 10px);
color:{color:Title};
font-family:{select:Title font};
font-size:200%;
line-height:150%;
background:{color:Borders};
border-radius:{text:Border radius};
padding:5px;
{block:ifEntryBorderTransparent}
background:transparent;
border:1px solid transparent;
{/block:ifEntryBorderTransparent}
}

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

.linktitle span {
color:{color:Icon};
}

.linktitle:hover {
color:{color:Hover};
}

/* Audio posts */

.album img {
float:left;
margin-top:0;
width:70px;
height:70px;
margin-left:5px;
margin-right:10px;
float:left;
z-index:10;
border:1px solid {color:Borders};
border-radius:100%;
}

.play {
position:absolute;
margin:22px 25px;
width:31px;
height:29px;
padding-top:2px;
line-height:31px;
overflow:hidden;
background:#fff;
border-radius:100%;
}

.audio {
width:160px;
min-height:80px;
margin-top:10px;
z-index:10;
font-size:12px;
line-height:25px;
overflow:hidden;
}

.audio h1{
font-size:20px;
border-bottom:1px solid transparent;
}

/* Ask posts */

.question {
width:100%;
height:auto;
line-height:20px;
color:{color:Answer};
}

.questionin {
margin-left:45px;
width:calc(100% - 65px);
min-height:24px;
line-height:24px;
padding:5px;
padding-left:10px;
padding-right:10px;
border:1px solid {color:Borders};
border-top-right-radius:{text:Border radius};
border-bottom-right-radius:{text:Border radius};
}

.question img {
width:28px;
padding:3px;
border:1px solid {color:Borders};
margin-right:4px;
border-top-left-radius:{text:Border radius};
border-bottom-left-radius:{text:Border radius};
}

.answer {
margin-top:5px;
width:calc(100% - 10px);
padding:5px;
}

/* Chat posts */

.chat ul {
display:block;
list-style:none;
margin-left:-40px;
}

/* Chat lines style */
.chat li {
padding:3px;
display:block;
}

/* Odd lines style */
.chat .odd {
color:{color:Chat 1};
}

/* Even lines style */
.chat .even {
color:{color:Chat 2};
}

/* -- POST INFO -- */

.info {
height:auto;
margin-top:15px;
margin-left:0;
margin-bottom:-5px;
width:100%;
line-height:20px;
font-size:12px;
color:{color:Text};
border-bottom-left-radius:{text:Border radius};
border-bottom-right-radius:{text:Border radius};
{block:IndexPage}
{block:ifHoverForInfo}
opacity:0;
position:absolute;
bottom:0;
background:{color:Post background};
{/block:ifHoverForInfo}
{/block:IndexPage}
{block:PermalinkPage}
border-radius:0;
{/block:PermalinkPage}
}

.entry:hover .info {
{block:ifHoverForInfo}
opacity:1;
{/block:ifHoverForInfo}
}

.info a {
font-size:12px;
}

.info a:hover {
color:{color:Hover};
}

.info big a {
color:{color:Bold};
font-size:14px;
}

/* Tags */

.tags {
margin-top:5px;
margin-left:0;
line-height:20px;
}

.tags a {
margin-right:5px;
margin-bottom:5px;
background:{color:Post background};
}

.tags span {
margin-top:5px;
margin-right:10px;
font-size:14px;
color:{color:Text};
vertical-align:middle;
}

/*-- PERMALINK, LIKE AND REBLOG BUTTONS --*/

.post_buttons {
width:45px;
height:19px;
margin-left:calc(100% - 70px);
margin-top:-20px;
padding-top:2px;
text-align:center;
z-index:100;
list-style:none;
{block:PermalinkPage}
padding-right:15px;
{/block:PermalinkPage}
}

.post_buttons span {
font-size:12px;
color:{color:Post buttons};
}

.perma {
position:absolute;
width:20px;
margin-left:-30px;
margin-top:-20px;
}

.rblg {
position:absolute;
margin-top:0;
margin-left:-5px;
}

.like {
position:relative;
}

.like .like_button {
position:absolute;
margin-top:-21px;
margin-left:15px;
opacity:0;
}

.like .like_button.liked {
opacity:1;
}

/*-- PERMALINK PAGE --*/

.postnotes {
margin:10px 0;
width:100%;
font-size:12px;
color:{color:Text};
line-height:20px;
text-align:left;
overflow:hidden;
}

ol.notes {
display:block;
padding:0;
margin:10px 0;
width:100%;
list-style-type:none;
}

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

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

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

/*-- PAGINATION --*/

#pager {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:calc({select:Post width}px + 72px);
height:70px;
{block:PermalinkPage}
width:562px!important;
{/block:PermalinkPage}
}

#pagination {
margin:auto;
width:500px;
height:30px;
text-align:center;
{block:ifInfiniteScroll}
display:none;
{/block:ifInfiniteScroll}
}

.pagicon, .next, .load-more {
display:inline;
vertical-align:middle;
}

.pagicon a, .next, .load-more {
font-size:12px;
padding:8px 10px;
margin:10px;
color:{color:Pagination};
background:{color:Accent};
border:1px solid {color:Borders};
border-radius:{text:Border radius};
}

.pagicon a:hover, .next:hover, .load-more:hover {
color:{color:Hover};
}

.pagicon span, .next span, .load-more span {
color:{color:Pagination};
font-size:11px;
margin:5px;
text-decoration:none;
vertical-align:middle;
}

.pagicon:hover span, .next:hover span, .load-more:hover span {
color:{color:Hover};
}

/* -- INFINITE SCROLL -- */

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

#iscroll {
margin:auto;
width:500px;
height:30px;
text-align:center;
}

{block:ifLoadMore}
.load-more {
height:40px;
}
{/block:ifLoadMore}

/*-- THEME CREDIT --*/

#credit {
position:fixed;
right:10px;
top:10px;
width:30px;
z-index:10000;
}

/* END CSS */

{CustomCSS}

</style>

</head>

<!-- HTML -->

<body>

{block:IfDisplaySearchBox}

<div id="search-panel">

<div id="close-search"><span class="sf sf-cross-o"></span></div>

<div class="panel-image"></div>

<div id="search">

<h2> Search the blog </h2>

<form class="requiro" action="/search" method="get"><input type="text" name="q" placeholder="Enter your search query" value=""/><span class="sf sf-search-o"></span></form>

</div>
<!-- End search -->

</div>
<!-- End search-panel -->
{/block:IfDisplaySearchBox}


<div id="menu">

<div id="main-links">

<a id="open-sidebar"><span class="sf sf-list-o"></span></a>

{block:ifSpooky}
<a href="/" title="HOME"><span class="sf sf-bat-o"></span></a>
{/block:ifSpooky}
{block:ifnotSpooky}
<a href="/" title="HOME"><span class="sf sf-home-o"></span></a>
{/block:ifnotSpooky}

{block:ifAskEnabled}
{block:ifSpooky}
<a href="/ask" title="ASK"><span class="sf sf-brain-o"></span></a>
{/block:ifSpooky}
{block:ifnotSpooky}
<a href="/ask" title="ASK"><span class="sf sf-envelope-2-o"></span></a>
{/block:ifnotSpooky}
{/block:ifAskEnabled}

{block:ifSubmissionsEnabled}
{block:ifSpooky}
<a href="/submit" title="SUBMIT"><span class="sf sf-skull-1-o"></span><br></a>
{/block:ifSpooky}

{block:ifnotSpooky}
<a href="/submit" title="SUBMIT"><span class="sf sf-pencil-o"></span></a>
{/block:ifnotSpooky}
{/block:ifSubmissionsEnabled}

{block:ifSpooky}
<a href="/archive" title="ARCHIVE"><span class="sf sf-spider-o"></span></a>
{/block:ifSpooky}

{block:ifnotSpooky}
<a href="/archive" title="ARCHIVE"><span class="sf sf-clock-3-o"></span></a>
{/block:ifnotSpooky}

{block:IfDisplaySearchBox}
<a id="open-search"><span class="sf sf-search-o"></span></a>
{/block:IfDisplaySearchBox}

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

</div>
<!-- End menu -->

<div id="sidebar">

<div id="sidebar-image">
<img src="{image:Sidebar image}">

{block:ifSpooky}
<div id="frame"><img src="https://i.imgur.com/HyDgWPN.png"></div>
{/block:ifSpooky}

</div>
<!-- End Sidebar image -->

<div class="blog-title">

<div class="avatar"><img src="{image:Avatar}"></div>

{Title}<br>
<span> {text:Subtitle} </span>

</div>
<!-- End blog-title -->

<div class="description-box">
<div class="description">
{Description}
</div>
<!--End description-->
</div>
<!--End description-box -->

<div class="divider">
{block:ifSpooky}
<img src="https://i.imgur.com/17snlAh.png">
{/block:ifSpooky}
</div>
<!--End divider -->

<div class="links">
{block:IfDisplayLinkOne}
<a href="{text:Link One Url}"><span>01</span> {text:Link One Title} </a>
{/block:IfDisplayLinkOne}
{block:IfDisplayLinkTwo}
<a href="{text:Link Two Url}"><span>02</span> {text:Link Two Title} </a>
{/block:IfDisplayLinkTwo}
{block:IfDisplayLinkThree}
<a href="{text:Link Three Url}"><span>03</span> {text:Link Three Title} </a>
{/block:IfDisplayLinkThree}
{block:IfDisplayLinkFour}
<a href="{text:Link Four Url}"><span>04</span> {text:Link Four Title} </a>
{/block:IfDisplayLinkFour}
{block:IfDisplayLinkFive}
<a href="{text:Link Five Url}"><span>05</span> {text:Link Five Title} </a>
{/block:IfDisplayLinkFive}
{block:IfDisplayLinkSix}
<a href="{text:Link Six Url}"><span>06</span> {text:Link Six Title} </a>
{/block:IfDisplayLinkSix}
</div>
<!--End links-->

</div>
<!--End sidebar -->


<div id="container">

<!-- POSTS -->

<div id="posts">

{block:Posts}

<div class="entry">

<div class="content">

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

<!-- Photo -->
{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="680px"/>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="680px"/>
{LinkCloseTag}
{/block:PermalinkPage}
{/block:Photo}

<!-- Photoset -->
{block:Photoset}
<div class="photo-slideDisplay" 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}

<!-- Quote -->
{block:Quote}
<div class="source">
<span class="sf sf-quotation-mark"></span>
{block:Source}
{Source}
{/block:Source}
</div>
<!--End source-->
<div class="quote">
{Quote}
</div>
<!--End quote-->
{/block:Quote}

<!-- Link -->
{block:Link}
<div id="linktitle">
<a href="{URL}"
class="linkpost"
target="_blank">
{Name} &raquo; </a>
</div>
{block:Description}
{Description}
{/block:Description}
{/block:Link}

<!-- Chat -->
{block:Chat}
<div class="chat">
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}<b>{Label}</b>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}

<!-- Audio -->
{block:Audio}
<div class="album">
{block:AlbumArt}
<img src="{AlbumArtURL}">
{block:AlbumArt}
</div>
<!--End album-->
<div class="play">
{block:AudioPlayer}
{AudioPlayer}
{/block:AudioPlayer}
</div>
<div class="audio">
{block:TrackName}<h1>{TrackName}</h1>{/block:TrackName}
{block:Artist}{Artist}{/block:Artist}<br>
<!--End play-->
{block:PlayCount}
{FormattedPlayCount}
{/block:PlayCount}
</div>
<!--End audio-->
{/block:Audio}

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

<!-- Ask -->
{block:Answer}
<div class="question">
<img src="{AskerPortraitURL-48}"
align="left"></div>
<div class="questionin">
{Asker}: {Question}</div>
<div class="answer">
{Answer}</div>
{/block:Answer}

<!-- Caption -->
{block:IndexPage}
{block:IfDisplayCaptions}
{block:Caption}
{Caption}
{/block:Caption}
{/block:IfDisplayCaptions}
{/block:IndexPage}
{block:PermalinkPage}
{block:Caption}
{Caption}
{/block:Caption}
{/block:PermalinkPage}

</div>
<!--End content-->

<!-- Date -->
{block:Date}

<div class="info">

<big><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}"> {shortmonth} {dayofmonth} {year}</a>

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

</big><br>

<!-- Reblogged from -->
{block:RebloggedFrom}
via <a href="{ReblogParentURL}">
{ReblogParentName}</a>
{/block:RebloggedFrom}

{block:ContentSource}
&bull; source
<a href="{SourceURL}"
target=blank> {SourceTitle} </a>
{/block:ContentSource}

<!-- Tags -->
{block:IndexPage}
{block:IfDisplayTags}
{block:HasTags}
<div class="tags">
<span class="sf sf-tags-o"></span>
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
<!-- End tags -->
{/block:HasTags}
{/block:IfDisplayTags}
{/block:IndexPage}
{block:PermalinkPage}
{block:HasTags}
<div class="tags">
<span class="sf sf-tags-o"></span>
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
<!-- End tags -->
{/block:HasTags}
{/block:PermalinkPage}

<!-- Permalink, reblog and like buttons -->
<ul class="post_buttons">

<li class="rblg"><a href="{ReblogUrl}"><span class="sf sf-refresh-o"></span></a></li>

<li class="like">
<span class="sf sf-heart-o"></span>
{LikeButton size="15"}
</li>

{block:IndexPage}
<div class="perma"><a href="{Permalink}"><span class="sf sf-aero-cursor-o"></span></a></div>
{/block:IndexPage}

</ul>
<!-- End post_buttons -->

</div>
<!--End info-->
{/block:Date}

<!-- Permalink page -->
{block:PermalinkPage}
<!-- Post notes-->
{block:PostNotes}
<div class="postnotes">
<h2>Post notes:</h2>
{PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}

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

</div>
<!--End entry-->

{/block:Posts}

</div>
<!-- End posts -->

{block:Pagination}

<div id="pager">

<div id="pagination">
{block:PreviousPage}
<div class="pagicon">
<a href="{PreviousPage}"><span class="sf sf-arrow-left"></span> NEWER </a>
</div>
{/block:PreviousPage}

<div class="pagicon">
<a href="#"><span class="sf sf-arrow-up"></span> TOP </a>
</div>

{block:NextPage}
<a class="next" href="{NextPage}"> OLDER <span class="sf sf-arrow-right"></span></a>
{/block:NextPage}
</div>
<!--End pagination-->

<div id="iscroll">
{block:ifLoadMore}
<span class="pagicon">
<a href="#"><span class="sf sf-arrow-up"></span> TOP </a>
</span>

<a href="#" class="load-more"> MORE <span class="sf sf-plus-o"></span></a>
{/block:ifLoadMore}
</div>

</div>
<!--End pager-->

{/block:Pagination}

</div>
<!--End container-->

<!-- CREDIT (DO NOT REMOVE) -->
<div id="credit"><a href="https://www.hunterthemes.tumblr.com">
<img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="theme by hunter themes"></a></div>

</body>

<!------------------------------ SCRIPTS ------------------------------>

<!-- Saturn icons font -->

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<!--Jquery-->

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

<!-- Style my tooltips -->

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

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time: 90,
tip_fade_speed: 600,
attribute:"title"
});
});
})(jQuery);
</script>

<script>
$(function(){
$("#main-links a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("selected");
}
});
});
</script>

<script>
$(document).ready(function(){

$("#open-sidebar").click(function(){
$("#sidebar").fadeToggle(100);
$("#open-sidebar").toggleClass('selected')
});

$("#close-sidebar").click(function(){
$("#sidebar").fadeToggle(100);
$("#open-sidebar").removeClass('selected')
});

$("#open-search").click(function(){
$("#search-panel").fadeToggle(100);
$("#open-search").toggleClass('selected')
});

$("#close-search").click(function(){
$("#search-panel").fadeToggle(100);
$("#open-search").removeClass('selected')
});

});
</script>

<!-- Minimal soundcloud player by @shythemes -->

<script>
$(document).ready(function(){
var color = '#acd7bb'; // color of play button (hex)
$('.soundcloud_audio_player').each(function(){
$(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
});
});
</script>

<!-- Resize videos by @shythemes -->

</script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

<!-- PXU photoset & responsive photosets -->

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

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

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

{/block:IndexPage}

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

{block:ifLoadMore}
$(window).unbind('.infscr');
$('.load-more').click(function() {
$container.infinitescroll('retrieve');
return false
});
{/block:ifLoadMore}

{/block:ifInfiniteScroll}
{/block:IndexPage}
});
</script>

</html>

<!-- END HTML -->
Create new version