THEME 12

<!DOCTYPE html>
<head>

<!-----------base code by clumhood
  ADAPTED BY @ joesmazzellos
------------>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}


<!--------DEFAULT VARIABLES-------->

<meta name="color:background" content="#ffffff"/>
<meta name="color:text" content="#333333"/>
<meta name="color:links" content="#5b5b5b"/>
<meta name="color:links hover" content="#c9c9c9"/>
<meta name="color:scrollbar bg" content="#ffffff"/>
<meta name="color:scrollbar" content="#eeeeee">
<meta name="color:accent" content="#000000"/>
<meta name="color:bold" content="#333333"/>


<meta name="image:sidebar image" content=""/>
<meta name="image:background image" content=""/>

<meta name="text:link 1 title" content="link 1">
<meta name="text:link 1 url" content=" ">
<meta name="text:link 2 title" content="link 2">
<meta name="text:link 2 url" content=" ">
<meta name="text:link 3 title" content="link 3">
<meta name="text:link 3 url" content=" ">

<meta name="if:show link 1" content="1" />
<meta name="if:show link 2" content="1" />
<meta name="if:show link 3" content="1" />
<meta name="if:show sidebar image" content="1" />
<meta name="if:show side title" content="1" />


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300
});
});
})(jQuery);
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
  /* questions? ask oddhour.tumblr.com */
     var updatePhotosetCss = "<style id='updatePhotosetStyle'>  .photoset .photoset_row img { display: block; } .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row .photoset_photo { margin-left: 4px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset { width: 540px; }</style>";
   function updatePhotoset() {

        $(".photoset:not(.540-resized)").each( function (i, e) {
            if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
                $(this.contentDocument).find("head").append(updatePhotosetCss);
        	var photoset = $(this.contentDocument).find(".photoset");
        	var photosetRows = photoset.find(".photoset_row");
            photoset.find(".photoset_photo")
                .each(function () {
                    var hiResSrc = $(this).attr("href");
                    var img = $(this).find('img');
                    img.attr("src", hiResSrc );
                    img.attr("style", "");
                });
    	    photosetRows.attr("style", "");
    	    photoset.attr("style","");
    	    photoset.addClass("540-resized");
    	    $(this).height($(this.contentDocument.body).height());
        });
    }

    updatePhotoset();

    var photosetTimer = setInterval(updatePhotoset, 1500);
    $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
</script>
<!-------------------------------------------------------------------->


<!------------------------UNNEST SCRIPT--------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</script><script src="http://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
<script>
$(function(){  $('.posts').unnest({
    yourCaption: ".caption",
    wrapName: ".cap",
    newCaptionUsername: true,
    originalPostCaptionUsername: false,
    tumblrAvatars: true,
    tumblrAvatarClass: ".icon",
    usernameColon: false
}); }); </script>
<!------------------------TOOLTIPS SCRIPT--------------------->

 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<style type="text/css">


/*----------tooltips---------*/

#s-m-t-tooltip {
max-width:300px;
margin:15px;
padding:5px;
border:1px solid #eeeeee;
border-radius:0px;
background:#ffffff;
color:{color:text};
z-index:999999;
font-size:9px;
font-style:bold;
font-weight:lighter;
letter-spacing:2px;
font-family:'arial', montserrat;
text-transform:uppercase;
box-shadow:1px 1px 3px rgba(0,0,0,.0);
}

/*----------SCROLLBAR---------*/

::-webkit-scrollbar {
background-color: {color:scrollbar bg};
height:8px;
width:5px;
}

::-webkit-scrollbar-thumb:vertical {
background-color:{color:scrollbar};
height:50px;
}

::-webkit-scrollbar-thumb:horizontal {
background-color:{color:scrollbar bg};
height:8px;
}

 /*----------unnest---------*/

     .tumblr_blog {
    display:block;
    vertical-align:middle; /* this is to center the url to the height of the icon */
    line-height:20px; /* change this to the height of the icon */
    margin-bottom:5px;
    font-family:'montserrat';
    font-size:11px;
    text-transform:uppercase;
    font-weight:bold!important;
    color:{color:links};
    }

    .tumblr_blog a:hover {
    text-decoration:underline;
    color:{color:links hover};
    }

    .icon {
    width:20px; /* size of the icon */
    height:20px; /* size of the icon */
    margin-right:10px; /* space between icon and url */
    display:inline-block;
    float:left;
    border-radius:2px; /* change to 100% for circular icon */
    }

    .cap {
    margin-left:0px;
    width:500px;
    }

    .cap blockquote {
    width:500px;
    margin-left:0px;
    }

/*----------BASICS---------*/

body {
background:{color:background} url({image:background image}) repeat right top fixed;
color:{color:text};
font-family:'lato';
line-height:15px;
font-size:11px;
margin:0;
text-align:left;
}

blockquote {
padding-left:10px;
border-left:1px solid;
border-color:#eeeeee;
margin:10px;
}

a {
color:{color:links};
text-decoration:none;
}

a:hover {
text-decoration:none;
color: {color:links hover};
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}

img {
opacity:1;
text-decoration:none;
}

small {
font-size:9px;
font-weight:none;
}

h1 {
font-size:15px;
font-weight:bold;
}


/*----------SIDEBAR---------*/

.sidebar {
    position:fixed;
    top:200px;
    width:245px;
    margin-left:215px;
}

.sidebarimage {
    width:245px;
}

.title {
    font-size:15px;
    text-align:center;
    text-transform:uppercase;
    font-family:'montserrat';
    font-weight:bold;
    color:{color:links};
    margin-top:10px;
    width:250px;
}

.description {
    width:240px;
    text-align:center;
    font-family:'lato';
    margin-top:10px;
}

.links {
        width:245px;
        height:5px;
        padding:9px;
        font-size:12px;
        font-family:'montserrat';
        font-weight:bold;
        text-align:center;
        margin-top:115px;
        margin-left:190px;
        text-align:left;
        text-transform:uppercase;
        word-spacing:-2px;
        position:fixed;
        padding-bottom:7px;
        color:{color:links};
}

.links a {
    display:inline-block;
    padding:8px;
    color:{color:links};
    letter-spacing:0px;
    border-bottom:0px solid #eee;
}

/*----------PAGINATION---------*/

.pagination {
    padding:10px;
    margin-top:10px;
    text-align:center;
    letter-spacing:1px;
}

/*----------POSTS---------*/

.entries {
    margin-left:580px;
    margin-top:50px;
    width:540px;
}

.posts {
    width:540px;
    margin-bottom:70px;
}

.oddhour-high-res { width: 540px; text-align: center; }
.oddhour-high-res img { max-width: 100%; }

/*----------quotes---------*/

.quote {
text-transform:uppercase;
font-size:14px;
font-weight:bold;
text-align:center;
}

.quotesource {
text-align:center;
margin-top:10px;
}

/*----------CHAT---------*/

.chat {
    line-height:150%;
    list-style:none;
}

.line.odd {
    padding:10px;
    background:#f8f8f8;
}

.line.even {
    padding:10px;
}

.label {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:1px;
    font-weight:bold;
}

/*----------AUDIO---------*/

.cover {
    position:relative;
    z-index:1;
    max-width:100px;
    padding:10px;
    float:left;
}

.playerbutton {
position:relative;
width:30px;
height:35px;
overflow:hidden;
}

.playerbuttonhug {
position: absolute;
top:-7px;
left:2px;
}

.tumblr_audio_player {
height:50px;
width:500px;
}

.playerbuttonbg {
position:absolute;
width:35px;
height:35px;
background-color:#e4e4e4;
padding:10px;
}

.trackdetails {
width:auto;
display:inline-block;
margin-left:70px;
font-size:10px;
letter-spacing:1px;
text-transform:lowercase;
padding:5px;
line-height:15px;
}

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

.spotify_audio_player {

     height: 80px !important;

}

/*----------questions---------*/

.question {
background:transparent;
padding:10px;
}

.asker {width:540px; margin-bottom:5px; padding-left:7px; text-align:left; font-family:'lato'; color:{color:accent}; text-overflow:ellipsis}


.answer {
padding:10px;
margin-top:-15px;
}


/*----------INFO---------*/

.info {
    padding:10px;
    font-family:'lato';
    font-size:10px;
    font-weight:bold;
    color:{color:accent};
    text-transform:uppercase;
    border-top:1px solid #eee;
    margin-top:25px;
}


.tags {
    margin-left:10px;
    margin-top:-5px;
    font-size:11px;
    font-family:'arial';
    letter-spacing:0px;
    font-style:italic;
    text-transform:lowercase;
}

.tags a {
    margin-right:10px;
    letter-spacing:0px;
}

/*----------POST NOTES---------*/

ol.notes {
padding:0px;
margin:25px 0px 0px -10px;
list-style-type:none;
}

ol.notes li.note {
padding:10px;
}

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

ol.notes li.note span.action {
font-weight:none;
}

ol.notes li.note .answer_content {
font-weight:normal;
}

ol.notes li.note blockquote {
padding:4px 10px;
margin:10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
text-decoration:none;
}


/*----------credit---------*/

.credit {
font-size:20px;
position:fixed;
font-weight:bold;
bottom:7px;
right:15px;
z-index:10;
text-align:right;
letter-spacing:1px;
padding:2px;
}

.credit a {
color:{color:links};
text-decoration:none;
}

.credit a:hover {
color:{color:links hover};
text-decoration:none;
}

/*----------tumblr controls---------*/
iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;}

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

</style>
</head>
<body>

<div class="credit">
<a title="theme by joesmazzellos" href="http://joesmazzellos.tumblr.com/">✪<a></div>


    <div class="links">
        <a href="/"title="home"><i class="fa fa-power-off" aria-hidden="true"></i></a>
        <a href="/ask"title="askbox"><i class="fa fa-comment-o" aria-hidden="true"></i></a>
       {block:IfShowLink1}
       <a href="{text:link 1 url}" title="{text:link 1 title}"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
       {/block:IfShowLink1}
       {block:IfShowLink2}
        <a href="{text:link 2 url}" title="{text:link 2 title}"><i class="fa fa-folder-open-o" aria-hidden="true"></i></a>
        {/block:IfShowLink2}
        {block:IfShowLink3}
        <a href="{text:link 3 url}" title="{text:link 3 title}"><i class="fa fa-code" aria-hidden="true"></i></a>
        {/block:IfShowLink3}
    </div>


<div class="sidebar">
{block:IfShowSidebarImage}
<div class="sidebarimage">
<img src="{image:sidebar image}"></div>
{/block:IfShowSidebarImage}
{block:IfShowSideTitle}
<div class="title">{Title}</div>
{/block:IfShowSideTitle}


    <div class="description">{Description}</div>

    <div class="pagination">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>{/block:PreviousPage}&nbsp; &nbsp;&nbsp;

{block:NextPage}
<a href="{NextPage}"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
{/block:NextPage}
{/block:Pagination}
</div>
</div>

<div class="entries">
{block:Posts}
<div class="posts">

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


{block:Photo}
{LinkOpenTag}<div class="oddhour-high-res">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
</div>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}


{block:Photoset}
<div class="media">{photoset}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}


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


{block:Link}
<h1><a href="{URL}" {Target}>{Name}</a></h1>
{block:Description}{Description}{/block:Description}
{/block:Link}


{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
{/block:Chat}


{block:Audio}
{block:AudioPlayer}
<div class="audiowrapper">
<div class="playerbuttonbg">
<div class="playerbutton">
<div class="playerbuttonhug">
{AudioPlayerGrey}
</div></div></div>

<div class="trackdetails">
{block:TrackName}<b>TRACK:</b> {TrackName}{/block:TrackName}<br>

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

<b>PLAYS:</b> {FormattedPlayCount}</div></div>
{/block:AudioPlayer}

{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Audio}


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


{block:Answer}
<img align="left" src="{AskerPortraitURL-30}"style="border-radius:80px;"> <div id="question" style="width:450px;font-style:bold;"> {Asker} said: {Question}</div> <br>
<div class="caption">
{Answer}
</div>
{/block:Answer}


<div class="info">
{block:Date}<a href="{Permalink}" title="{TimeAgo}"><font style="color:{color:bold}">{Month} {DayOfMonth}</font></a>

&nbsp;&nbsp;
<a href="{Permalink}">{NoteCount} <font style="color:{color:accent}">♡</font></a>
&nbsp;&nbsp;

<a href="{ReblogURL}" target="_blank" class="details"><i class="fa fa-refresh" aria-hidden="true"></i></a>

<font style="float:right">
{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="{ReblogParentName}"><b>via</b> </a>
{block:ContentSource}
<a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRootName}">/ <b>source</b></a>
{/block:ContentSource}
{/block:RebloggedFrom}

</font style>


</div>


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

</div> {/block:Date}


{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{/block:Posts}

{block:ContentSource}
<!---{SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --->
 {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}

</body>