theme 12: inverno

<!--


theme #12: inverno
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="description" content="{metadescription}" />
<meta name="color:Links" content="#888888"/>
<meta name="color:Accent" content="#9fc9dc"/>
<meta name="color:Background" content="#f8f8f8"/>
<meta name="color:Fonts" content="#aaaaaa"/>
<meta name="color:Post title" content="#888888"/>
<meta name="color:Entry" content="#ffffff"/>
<meta name="color:Sidebar" content="#ffffff"/>
<meta name="color:Borders" content="#eeeeee"/>
<meta name="color:Chats background" content="#fafafa"/>

<meta name="image:Sidebar" content="http://goo.gl/ZYX50I"/>

<meta name="if:Show captions" content="1"/>
<meta name="if:Promote the theme" content="0"/>

<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"/>

<meta name="text:Link 1 URL" content="#url"/>
<meta name="text:Link 1 title" content="link#1"/>
<meta name="text:Link 2 URL" content="#url"/>
<meta name="text:Link 2 title" content="link#2"/>
<meta name="text:Link 3 URL" content="#url"/>
<meta name="text:Link 3 title" content="link#3"/>

<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Cabin:400,600,700,400italic,600italic,700italic|Lora:300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet">

<link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/> <!-- //pxu ph -->


<style>
/* defaults */
a {
    transition:.5s;
    text-decoration:none;
    color:{color:links};
    border-bottom:1px solid {color:accent}; }

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

body { font:10px 'lora', sans-serif;
    color:{color:fonts};
    margin:0;
    padding:0;
    min-height:100%;
    line-height:180%;
    background:{color:background}; }

small, big, pre, sub, sup {
    font-size:10px!important; }

p { margin:5px 0; }
b, strong { font-style:normal; font-weight:700; }
i { font-style:italic; }

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

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

blockquote {
    border-left:1px solid {color:borders};
    padding-left:10px;
    margin:3px 0 0 10px; }

.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:italic 15px 'Lora', serif!important;
    color:{color:font}!important;
    text-shadow: 0 0 0 transparent!important; }

.tumblr-box { border-color:transparent!important; }

#s-m-t-tooltip {
    max-width:240px;
    padding:5px 7px;
    margin-left:25px;
    margin-right:22px;
    font:italic 10px 'lora', serif;
    text-transform:lowercase;
    margin-top:18px;
    border-radius:1px;
    letter-spacing:.5px;
    z-index:99990;
    transition:.3s;
    border:1px solid {color:borders};
    color:{color:links};
    background-color:{color:entry}; }

a#credits { position:fixed;
    z-index:999999;
    bottom:25px;
    right:20px;
    width:13px;
    height:13px;
    border-radius:1px;
    border-bottom:none;
    transform:rotate(45deg);
    background:{color:accent}; }

.bodies { padding:18px; }
.bodies img { max-width:100%; height:auto; }


/* alignment */
#content {
    left:50%;
    width:0;
    margin-left:-120px;
    text-align:left;
    position: relative;
    margin-top: 110px;
    margin-bottom:0px;
    min-height: calc(100vh - 268px);}

.entry {
    border-radius:2px;
    border:1px solid {color:borders};
    margin-bottom:110px;
    background:{color:entry};
    width:{select:posts width};
    {block:PermalinkPage}
    width:500px;
    {/block:PermalinkPage} }

.entry .titles {
    font:italic 16px 'Lora', serif;
    /*letter-spacing:.5px;*/
    color:{color:post title}; }



/* photo posts */
#photopost { width:100%;
    margin-bottom:-6px;}
.captions {
    padding:10px 15px;
    border-top:1px solid {color:borders}; }
.captions a.tumblr_blog {
    font-weight: normal;
    font-style: normal;
    line-height: 13px;
    display: inline-block;}
.caption-ava {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-bottom: -7px;
    margin-right: 10px;
    border-radius: 20px; }

.captions blockquote {
    border:none;
    padding:0;
    margin:7px 0 0 0; }


/* chat posts */
.chatodd, .chateven { padding:10px 18px; font-style:italic; }
.chatodd b, .chateven b { color:{color:links}; }
.chateven { background:{color:chats background}; }


/* link posts */
a.titles { border-bottom:none; }



/* audio posts */
.audio-box {
    margin-bottom:10px;
    margin-top:10px; }

.audioplayer-inner {
    width:26px;
    height:27px;
    overflow: hidden; }

.audioplayer-outer {
    padding:6px;
    width: 26px;
    height: 27px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background:white;
    margin: 7px 10px 0 15px;
    z-index: 10; }

.audio-info { text-align: left;
    position: absolute;
    font-style:italic;
    margin-top: 17px;
    margin-left: 4px;
    width:calc({select:posts width} - 100px);
    display: inline-block;}

.audio-info#audio-em { position:relative;
    padding:0 6px 0 20px;
    margin:10px 0 0 15px!important;}

#audio-em br { display:none; }
.audio-info b:after { content:' –'; opacity:.5; }
.a-emb { margin:10px 10px 4px; }


/* quote posts */
p.source { margin:5px 0 -3px; }


/* ask posts */
.answer-question {
    font:italic 10px 'lora', serif;
    letter-spacing:.5px;
    text-transform:none;
    display:table-cell;
    line-height:17px;
    width:calc({select:posts width} - 55px);
    vertical-align:middle; }

.asker-question { margin-top:0px;
    line-height:17px;
    letter-spacing:0; }

.my-answer {
    padding: 0px 10px;
    margin: 0 15px 15px;
    border-left:1px solid {color:borders}; }

#askerportrait { width:30px;
    display:table-cell;
    vertical-align:middle;
    padding-right:14px; }

#askerportrait img { width:30px;
    border-radius:3px;}

.bodies.answers { padding:20px;
    margin-bottom: 14px;
    border-bottom: 1px solid {color:borders}; }


/* post notes */
.post-notes {
    padding:20px 0;
    max-height:300px;
    overflow-y:auto; }

.post-notes img.avatar {
    width: 10px;
    height:10px;
    border-radius: 100%;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: -2px; }

.post-notes ol { list-style-type:none; }
.post-notes li { display:block; }
.post-notes li.like { display:block; }

.post-notes li.note.more_notes_link_container {
    text-align:left!important; }

a.avatar_frame { border-bottom:none; }

#fix-scrollbar ::-webkit-scrollbar { background:{color:entry}!important; }
#fix-scrollbar ::-webkit-scrollbar-thumb { border-color:{color:entry}!important; }



/* permalink */
.perma {
    display:block;
    font:italic 10px 'Lora', serif;
    padding:8px 10px;
    color:{color:links};
    text-transform:lowercase;
    /*letter-spacing:.5px;*/
    text-align:left;
    line-height:140%;
    border-top:1px solid {color:borders};}

.perma a { border-bottom:none;
    margin-right:3px; }

.perma a.tag:after { content:';'; }

.perma .in-perma {
    padding:5px 3px;
    margin-bottom:0px; }


.perma-reblog {
    font-size:11px;
    display:block;
    float:right;
    width:33px;
    color:{color:links}; }

.perma-reblog > a, i {
    display:inline-block;
    margin-left:3px;}

.perma-reblog a, .perma-reblog a:hover { border-bottom:none; }


/* like button */
.like {
    display:inline-block;
    position: relative; }

.like:hover i { color:{color:accent}; }

.like iframe { width: 13px!important;
    height: 15px!important; }

.like i {
    transition: .5s;
    color {color:links}; }

.like .like_button {
    position: absolute;
    top: 0;
    opacity: 0; }

.like .liked ~ .icon-heart { color:{color:accent}; }

#like.liked svg { opacity:0!important; }



/* sidebar */
#sidebar {
    position:fixed;
    margin-left:-265px;
    width:150px;
    bottom:110px;
    border:1px solid {color:borders};
    background:{color:sidebar};
    transition:.5s;
}

#sidebar .desc  {
    padding:12px;
    border-top:1px solid {color:borders};
    border-bottom:1px solid {color:borders}; }

#sideimg {
    width:100%;
    display:block; }

.sidelinks {
    display:block;
    padding:10px 12px;
    font:italic 10px 'Lora', serif;
    /*letter-spacing:.5px; */
}


.inner-links {
    display:block;
    position:relative;
    margin:0;
    text-align:left;
    padding:0;
    line-height:14px; }

.inner-links ol {
    width: 60px;
    display: inline-block;
    margin: 2px 0 0 -39px; }

.inner-links ol li {
    list-style-type:none;
    line-height:190%; }

span.more { font-style:normal;
    letter-spacing:.5px; }

/* pagination */
.pagination { margin-bottom:110px;
    width:{select:posts width};}
.pagination-box {
    padding:4px;
    text-align:center;
    width:19px;
    display:inline-block;
    margin-right:0px;
    border-radius:2px;
    border:1px solid {color:borders};
    background:{color:entry}; }

.pagination-box.current-page { background:{color:accent};
    color:{color:entry}; }

/* footer */
#footer { width:100%;
    background:{color:accent};
    color:{color:links};
    padding:15px 0;
    position:relative;
    text-align:center;
    {block:ifnotpromotethetheme}
    display:none;
    {/block:ifnotpromotethetheme}
    font-size:9px;
    font-family:'Cabin', sans-serif;
    text-transform:uppercase;
    letter-spacing:.5px; }

#footer a:hover { color:{color:entry}; }

{CustomCSS}

</style>
</head>
<body>

<div id="content">

<div id="sidebar">

    <img src="{image:sidebar}" id="sideimg">
    <div class="desc">{Description}</div>

    <div class="sidelinks">
        <span class="more">NAVIGATION</span>
        <div class="inner-links">
        <ol>
        <li><a href="/">index</a></li>
        <li><a href="/ask">inbox</a></li>
        <li><a href="/archive">grid</a></li>
        </ol>
        <ol style="text-align:right;">
        <li><a href="{text:link 1 url}">{text:link 1 title}</a></li>
        <li><a href="{text:link 2 url}">{text:link 2 title}</a></li>
        <li><a href="{text:link 3 url}">{text:link 3 title}</a></li>
        </ol>
        </div>
    </div>

</div>



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

        {block:Answer}
        <div class="bodies answers">
        <div id="askerportrait">
        <img src="{AskerPortraitURL-128}">
        </div>
        <div class="answer-question">
        {Asker} asked:
        <div class="asker-question">{Question}</div>
        </div>
        </div>
        <div class="my-answer">{Answer}</div>
        {/block:Answer}


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


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


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


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


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



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

        <div id="audio-content">
            {block:AudioPlayer}
            <div class="audioplayer-outer">
                <div class="audioplayer-inner">
                    {AudioPlayerWhite}
                </div>
            </div>
            {/block:AudioPlayer}

            <div class="audio-info"
          {block:AudioEmbed}id="audio-em"{/block:AudioEmbed}>
                {block:Artist}<b>{Artist}</b>{/block:Artist}
                {block:TrackName}{TrackName}{/block:TrackName}
            </div>

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


        {block:Chat}
        {block:Title}
        <div class="bodies" style="padding-bottom:0;">
        <div class="titles">{Title}</div>
        </div>{/block:Title}
        {block:Lines}<div class="chat{Alt}">
        {block:Label}<b>{Label}</b>{/block:Label}<br>
        {Line}
        </div>{/block:Lines}
        {/block:Chat}


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

        {block:Date}
        <div class="perma">
        <div class="in-perma">

        <a href="{Permalink}">{NoteCountWithLabel}</a>
        <a href="{ReblogURL}">reblog</a>
        {block:RebloggedFrom}
        <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
        <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
        {/block:RebloggedFrom}

        <!--<div class="perma-reblog">-->
        <!--<div class="like">-->
        <!--{LikeButton size="14"}-->
        <!--<i class="icon-heart"></i>-->
        <!--</div>-->
        <!--<a href="{ReblogURL}" class="icon-repeat controls"></a>-->
        <!--</div>-->

        {block:HasTags}<br>
        tagged as:
        {block:Tags}
           <a href="{TagURL}" class="tag">{Tag}</a>
        {/block:Tags}
        {/block:HasTags}

        </div>
        </div>
        {/block:Date}

        </div> <!-- /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}" class="pagination-box">
            &lsaquo;
        </a>
        {/block:PreviousPage}
        {block:JumpPagination length="3"}
        {block:CurrentPage}
        <span class="pagination-box current-page">{PageNumber}</span>
        {/block:CurrentPage}
        {block:JumpPage}
        <a href="{URL}" class="pagination-box">{PageNumber}</a>
        {/block:JumpPage}
        {/block:JumpPagination}
        {block:NextPage}
        <a href="{NextPage}" class="pagination-box">
            &rsaquo;
        </a>
        {/block:NextPage}
        </div>
{/block:Pagination}

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

<a href="//leopardraws.tumblr.com" id="credits" title="theme"></a>

<div id="footer">
theme by <a href="//leopardraws.tumblr.com/">leopardraws</a> &
powered by <a href="//tumblr.com/">tumblr</a>.
</div>
</body>

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


<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title],a[title],img[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:35,
    tip_fade_speed:100,
    attribute:"title"
});
});
})(jQuery);
</script>

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


{block:ifpromotethetheme}
<script>
function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
   $('#sidebar').css('bottom', '110');
 } else {
   $('#sidebar').css('bottom', (110+(a-b))+'px');
 }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
</script>
{/block:ifpromotethetheme}


<!-- pxu ph -->
<script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js">
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('.photo-slideshow').pxuPhotoset({
    'ligthbox'  : false,
    'highRes'   : true,
    'rounded'   : false,
    'exif'      : false,
    'captions'  : false,
    'gutter'    : '1px',
    'photoset'  : '.photo-slideshow',
    'photoWrap' : '.photo-data',
    'photo'     : '.pxu-photo'
    }, function() {
        // callback
    });
});
</script>

<!--<script type="text/javascript">-->
<!--$(document).ready(function(){-->
<!--$(".hide").hide();-->
<!--$(".more").click(function(){-->
<!--$(this).next(".hide").slideToggle('slow');-->
<!--}); });-->
<!--</script>-->


</html>