theme 16: melodia

<!--


theme #16: melodia
by leopardraws

thanks for using my themes!
feel free to change fonts and colors.
enjoy!! <3


-->

<html>
<head>

<title>{Title}{block:searchpage}, search results: {searchquery}{/block:searchpage}{block:postsummary} - {postsummary}{/block:postsummary}
</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="{MetaDescription}" />

<meta name="color:Links" content="#666666"/>
<meta name="color:Accent" content="#3c8c2"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Fonts" content="#999999"/>
<meta name="color:Post title" content="#666666"/>
<meta name="color:Borders" content="#eeeeee"/>

<meta name="if:Show captions" content="1"/>
<meta name="if:Show sidebar title" content="1"/>
<meta name="if:Fade images" content="1"/>
<meta name="if:Sidebar on the right" content="0"/>

<meta name="image:Sidebar" content="https://goo.gl/W8TAzU"/>

<meta name="text:Sidebar title" content="theme 16"/>
<meta name="text:Link 1 URL" content="url 01"/>
<meta name="text:Link 1 title" content="title 01"/>
<meta name="text:Link 2 URL" content="url 02"/>
<meta name="text:Link 2 title" content="title 02"/>
<meta name="text:Link 3 URL" content="url 03"/>
<meta name="text:Link 3 title" content="title 03"/>

<meta name="select:Posts width" content="250px"/>
<meta name="select:Posts width" content="280px"/>
<meta name="select:Posts width" content="300px"/>
<meta name="select:Posts width" content="350px"/>
<meta name="select:Posts width" content="400px"/>
<meta name="select:Posts width" content="450px"/>
<meta name="select:Posts width" content="500px"/>
<meta name="select:Posts width" content="540px"/>



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


<link href="//fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<link href="//static.tumblr.com/ev0x8sk/KSeos9wcl/st2.css" rel="stylesheet" />




<style type="text/css">

/* defaults */
::selection { background:{color:accent}; color:white; }

::-webkit-scrollbar {
    width:15px;
    height:15px;
    border:7px solid {color:background};
    background-attachment:fixed;
    background:{color:borders}; }

::-webkit-scrollbar-thumb {
    border:7px solid {color:background};
    background:{color:accent}; }

a {
    text-decoration:none;
    transition:.2s;
    color:{color:links};
    border-bottom:1px solid {color:accent}; }

a:hover { cursor:help; color:{color:accent}; }

p { margin:5px 0; }

i { font-style:italic; }

pre { white-space:pre-wrap; }



iframe#ask_form { margin-top:10px; }

blockquote, .unnest blockquote {
    padding-left:14px;
    margin:5px 0 0;
    border-left:1px solid {color:borders}; }

body { font:10px 'muli', sans-serif;
    font-weight:400;
    letter-spacing:.25px;
    margin:0;
    padding:0;
    min-height:100%;
    text-align:left;
    line-height:18px;
    color:{color:fonts};
    background:{color:background}; }

body small,
body big,
body pre,
body sub,
body sup { font:10px 'muli', sans-serif;
    line-height:18px; }

b,
b small, small b,
b big, big b,
b pre, pre b,
b sup, sup b,
b sub, sub b {
    font-weight:700;
    font-size:9.5px!important;}


#s-m-t-tooltip {
    max-width:240px;
    padding:3px 8px;
    margin-left:20px;
    margin-right:15px;
    margin-top:-7px;
    border-radius:3px;
    z-index:99990;
    transition:.2s;
    color:{color:fonts};
    background-color:{color:entry}; }


/* tumblr lightbox */
.tumblr-box { border-color:transparent!important; }
.tmblr-lightbox { background-color:rgba({RGBcolor:background},.9)!important; }
.tmblr-lightbox .vignette { background:transparent!important }
.tmblr-lightbox .lightbox-image { box-shadow:0 0 0 transparent!important; }
.tmblr-lightbox .lightbox-caption {
    font:13.5px 'muli', sans-serif!important;
    color:{color:links}!important;
    text-shadow:0 0 0 transparent!important; }





/* lists */
ul { margin-left:-40px; }

ol li { list-style-type:decimal-leading-zero; }
ul li { list-style-type:none; }

ul li:before {
    content:"——";
    letter-spacing:-1px;
    color:{color:borders};
    margin-right:10px; }






/* alignment */
#content {
    left:50%;
    margin-left:calc({select:posts width} / -2);
    margin-top:120px;
    margin-bottom:150px;
    position:relative;
    width:0;
    z-index:10;
    {block:PermalinkPage}
    margin-left:-270px!important;
    {/block:PermalinkPage} }

.entry {
    margin-bottom:120px;
    width:{select:posts width};
    {block:PermalinkPage}
    width:540px;
    margin-left:0;
    float:none;
    {/block:PermalinkPage} }

.entry:last-child { margin-bottom:0; }





/* titles */
.titles, .tracktitle, h1, h2, h3, h4 {
    margin:0;
    font:400 13.5px 'muli', sans-serif;
    color:{color:post title}; }

.tracktitle { margin-right:10px; }


a.titles {
    border-bottom:none;
    display:inline-block; }





/* captions */
.captions {
    margin-top:12px; }

.captions.unnest { margin-bottom:-4px!important; }

.unnest blockquote.tumblr_parent {
    margin:0 0 10px;
    border:none;
    padding:0; }

.unnest blockquote.tumblr_parent:last-of-type {
    margin:0; }

.unnest a.tumblr_blog {
    font-style: normal;
    font-weight: 500;
    letter-spacing: .25px;
    border-bottom:none;
    border-left-color:transparent;
    border-radius:3px;
    display:inline-block; }

.unnest a.tumblr_blog:after {
    content:'\a';
    white-space:pre;
    clear:both; }

.captions a.tumblr_blog:hover {
    color:{color:accent}; }


.caption-ava {
    width: 13px;
    margin-right:8px;
    margin-bottom:-4px;
    border-radius:3px;
    display: inline-block;
    position: relative; }

a.tumblr_blog[href="/"] img.caption-ava {
    margin-bottom: -4px;
    margin-right: 3px; }

.captions img { max-width:100%; height:auto; }

.tumblr_parent p:first-of-type { margin-top:2px; }
.tumblr_parent p:last-of-type { margin-bottom:0; }




/* photos and photosets */
#photopost, .photo-slideshow {
    overflow:hidden;
    border-radius:3px;
    background:{color:entry};
    {block:iffadeimages}
    opacity:.9;
    transition:.2s;
    {/block:iffadeimages} }

    {block:iffadeimages}
#photopost:hover, .photo-slideshow:hover { opacity:1; }
    {/block:iffadeimages}

#photopost {
    width:100%;
    position:relative;
    z-index:0;
    margin-bottom:-7px;}





/* chat posts */
.chatblock { padding:15px 0px 0; }
.chatblock b { color:{color:links}; }
.chatarrange .chatblock:first-child { padding-top:0px;}
.chatarrange .chatblock:nth-last-child(2) { padding-bottom:0px;}
.chatarrange { margin-bottom:7px; }





/* audio posts */
#alb_art {
    position:relative;
    display:table-cell;
    border-radius:3px;
    width:120px;
    height:120px;
    background:{color:accent}; }

.audio { margin-bottom:8px; }

.audioplayer-inner {
    width:29px;
    height:30px;
    margin-left:-2px;
    overflow: hidden; }

.audioplayer-outer {
    padding:5px;
    border-radius:3px;
    width:27px;
    height:28px;
    position:absolute;
    display:inline-block;
    overflow:hidden;
    background:{color:background};
    margin:10px 10px;
    z-index:8; }

.audio-info {
    text-align: left;
    padding-left: 25px;
    vertical-align:middle;
    display: table-cell; }

.audio-info .tracktitle {
    padding:0 0 2px 0;
    color:{color:post title}; }

.audio-info#audioem {
    position:relative;
    padding:0 6px 0 20px;
    margin:14px 0 0 18px!important;}

#audioem br { display:none; }
.a-emb { margin:10px 10px 4px; }

.captions.answer { margin-bottom:10px; }

.captions.answer img {
    margin-top: 2px;
    border-radius: 2px; }



/* quote posts */
p.source { margin:8px 0 7px; }
p.source:before {
    content:"——";
    letter-spacing:-1px;
    color:{color:borders};
    margin-right:10px; }





/* ask posts */
.question {
    text-transform:none;
    display:block;
    border-radius:3px;}

#askerportrait {
    width: 31px;
    float: left;
    margin-top: 2px;
    border-radius:3px;
    margin-right: 10px; }



/* post notes */
.post-notes {
    margin-top:-71px;
    height:auto;}

.post-notes img.avatar {
    width: 13px;
    height:13px;
    margin-top: 12px;
    margin-right: 10px;
    margin-bottom: -3px;
    border-radius: 2px; }

.post-notes ol {
    padding-top:8px;
    margin: 0 0 0 -40px;}

.post-notes li { list-style-type: none!important; }

.post-notes li.more_notes_link_container {
    text-align: left;
    display: inline-block;
    padding:6px 0 7px; }

.post-notes li.note.more_notes_link_container a {
    border-bottom:none;
    color:{color:links}!important; }


a.avatar_frame { border-bottom:none; }

/* pagination */
.pagination {
    width:{select:posts width};
    position:relative;}

.pagination .paglink {
    color:{color:links};
    font-weight: 500;
    background: ;
    display: inline-block;
    margin-right: 20px;
    text-align: center; }

.pagination .paglink.current { font-weight:700; font-size:9px;}

.pagination a { border-bottom:none; }




/* perma */
.perma {
    margin-top:0;
    text-align:left;
    font-weight:500; }

.perma.has-content { margin-top:8px; }

.perma a { border-bottom:none; }

.tags { margin-top:0px;
    word-wrap:break-word;
    overflow-wrap:break-word;}

.tags a { margin-right:4px; display:inline!important;}

.tags a:before { content:'#';
    font-style:normal;}

.perma .info {
    display:inline-block; }





/* sidebar */
#sidebar {
    position:fixed;
    width:150px;
    margin-left:-250px;
    {block:ifsidebarontheright}
    margin-left:calc({select:posts width} + 100px);
    {block:PermalinkPage}
    margin-left:640px;
    {/block:PermalinkPage}
    {/block:ifsidebarontheright}
    text-align:left; }

#sidebar .s-img {
    border-radius:3px;
    background:{color:entry};
    width:45px;
    margin-bottom:-7px; }

#sidebar .titles { margin-bottom:7px;
    {block:ifnotshowsidebartitle}
    display:none;
    {/block:ifnotshowsidebartitle}}

#sidebar .s-desc {
    margin-top:15px; }

#sidebar .s-links a {
    display:block;
    margin-bottom:0px;
    border-bottom:none;
    transition:.2s;}

.s-links { margin-top:10px;  }
.s-links .lin:before { content:'›';
    margin-right:4px;
    transition:.2s;
    display:inline-block; }

.s-links a:hover .lin:before { margin-right:7px; }





{CustomCSS}
</style>
</head>

<body>

<div id="content">


<div id="sidebar">
    <img src="{image:sidebar}" class="s-img">
    <div class="s-desc">
        <div class="titles">{text:sidebar title}</div>
        {Description}
    </div>
    <div class="s-links">
<a href="/"><span class="lin">index</span></a>
<a href="/ask"><span class="lin">message</span></a>
<a href="/archive"><span class="lin">past</span></a>
<a href="{text:link 1 url}"><span class="lin">{text:link 1 title}</span></a>
<a href="{text:link 2 url}"><span class="lin">{text:link 2 title}</span></a>
<a href="{text:link 3 url}"><span class="lin">{text:link 3 title}</span></a>
    </div>
</div>







{block:Posts}
<article class="entry">

        {block:Answer}
        <div class="question">
            <img src="{AskerPortraitURL-128}" id="askerportrait">
            {Asker} said:<br>
            {Question}
        </div>
        <div class="captions answer {block:RebloggedFrom}unnest{/block:RebloggedFrom}">{Answer}</div>
        {/block:Answer}


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


        {block:Quote}
        <div class="captions">
        <div class="titles quotet">{Quote}</div>
        <p class="source">{Source}</p>
        </div>
        {/block:Quote}


        {block:Photo}
        <img src="{PhotoURL-HighRes}" id="photopost">
        {block:IfShowCaptions}
        {block:IndexPage}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:IndexPage}
        {/block:IfShowCaptions}
        {block:PermalinkPage}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:PermalinkPage}
        {/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:IfShowCaptions}
        {block:IndexPage}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:IndexPage}
        {/block:IfShowCaptions}
        {block:PermalinkPage}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:PermalinkPage}
        {/block:Photoset}


        {block:Video}
        <div class="video">{Video-500}</div>
        {block:IndexPage}
        {block:IfShowCaptions}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:IfShowCaptions}
        {/block:IndexPage}
        {block:PermalinkPage}
        {block:Caption}<div class="captions unnest">{Caption}</div>{/block:Caption}
        {/block:PermalinkPage}
        {/block:Video}


        {block:Link}
        <div class="captions">
        <a href="{URL}" class="titles">{Name}</a>
        {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
        </div>
        {/block:Link}



        {block:Audio}
        {block:AudioEmbed}
        <div class="a-emb">{AudioEmbed}</div>
        {/block:AudioEmbed}

        <div class="captions audio">
        {block:AudioPlayer}
        <div class="audioplayer-outer">
        <div class="audioplayer-inner">
        {AudioPlayerWhite}
        </div>
        </div>
        {/block:AudioPlayer}
        <!-- album art -->
        <div id="alb_art"
        style="background:url('{block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}');
               background-size:150px 150px;">
        </div>
        <!-- /album art -->
        <div class="audio-info" {block:AudioEmbed}id="audioem"{/block:AudioEmbed}>
        {block:TrackName}
        <div class="tracktitle">{TrackName}</div>
        {/block:TrackName}
        {block:Artist}by {Artist}{/block:Artist}
        </div>

        </div> <!-- /audio-content -->
        {/block:Audio}


        {block:Chat}
        <div class="captions">
        {block:Title}
        <div class="titles">{Title}</div>
        {/block:Title}
        <div class="chatarrange">
            {block:Lines}
            <div class="chatblock">
            {block:Label}<b>{Label}</b>{/block:Label}<br>
            {Line}
            </div>
            {/block:Lines}
        </div>
        </div>
        {/block:Chat}



        {block:Date}
        <div class="perma {block:Photo}has-content{/block:Photo} {block:Photoset}has-content{/block:Photoset} {block:Video}has-content{/block:Video}">
        <div class="info">
            <a href="{Permalink}">{TimeAgo}</a> ›
            <a href="{Permalink}">{NoteCountWithLabel}</a> ›
            <a href="{ReblogURL}">reblog</a>
        </div>
        {block:HasTags}
        <div class="tags">
            {block:Tags}
            <a href="{TagURL}" class="ptag">{Tag}</a>
            {/block:Tags}
        </div>
        {/block:HasTags}
        </div> <!-- /perma -->
        {/block:Date}


        {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}


        </article> <!-- /entry -->

        {block:PermalinkPage}
            {block:PostNotes}
            <div class="entry post-notes">{PostNotes}</div>
            {/block:PostNotes}
        {/block:PermalinkPage}

{/block:Posts}



{block:Pagination}
    <div class="pagination">

        {block:PreviousPage}
        <a href="{PreviousPage}"><div class="paglink">back</div></a>
        {/block:PreviousPage}

    {block:JumpPagination length="5"}
        {block:CurrentPage}
        <div class="paglink current">{PageNumber}</div>
        {/block:CurrentPage}

        {block:JumpPage}
        <a href="{URL}"><div class="paglink">{PageNumber}</div></a>
        {/block:JumpPage}
    {/block:JumpPagination}

        {block:NextPage}
        <a href="{NextPage}"><div class="paglink">forth</div></a>
        {/block:NextPage}

    </div>
{/block:Pagination}




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

<style>
a#quote {  position:fixed; z-index:1000000000000; bottom:20px; right:15px; transition:.2s; font:40px muli; line-height:1px; padding:4px; text-align:center; border-bottom:none; }

.i-top { position:fixed; font-size:16px; bottom:55px; border:none; display:none; font-weight:300; right:19px; }
</style>

<a href="#" title="scroll to top" class="i-top"></a>
<a href="//leopardraws.tumblr.com" title="theme" id="quote">”</a>







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

<script src="//static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
<script>
$(document).ready(function() {
    $('article').unnest({
        yourCaption: ".unnest",
        tumblrAvatars: true,
        newCaptionUsername: false,
        originalPostCaptionUsername: true,
        tumblrAvatarClass: ".caption-ava",
        usernameColon: false
    });
});
</script>


<script src="//static.tumblr.com/ev0x8sk/bCJos9wzh/scroll-to-top.js"></script>
<script src="//static.tumblr.com/ev0x8sk/Ajuos9x0s/hideempty-a.js"></script>

<!-- pxu -->
<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>
<script src="//static.tumblr.com/ev0x8sk/rwuos9x29/pxuconfig.js"></script>
<!-- /pxu -->


<script>
// minimal soundcloud player © shythemes.tumblr
$(document).ready(function() {
    var color = '{color:accent}';
    $('.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: 20,
            width: '100%'
        });
    });
});
</script>

<script src="http://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:20,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>


</html>