mercury

<!--

                     THEME 12
                      mercury

                     by @02px

                     enjoy :-)

-->


<html>
    <head>
        <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}

         <meta name="image:sidebar 1" content="" />
         <meta name="image:sidebar 2" content="" />
         <meta name="image:background" content="" />
         <meta name="color:background" content="#fff" />
         <meta name="color:post background" content="#fff" />
         <meta name="color:accent" content="#000" />
         <meta name="color:title" content="#767676" />
         <meta name="color:text" content="#a8a8a8" />
         <meta name="color:image border" content="#fff" />
         <meta name="color:sidebar links" content="#aaaaa" />
         <meta name="color:links" content="#d4d4d4" />
         <meta name="color:permalinks" content="#aaaaa" />
         <meta name="color:links hover" content="##aec9dc" />
         <meta name="color:scrollbar" content="#dfdfdf" />
         <meta name="text:subtitle" content="subtitle" />
         <meta name="select:font" content="'Open Sans'"  title="open sans"/>
         <meta name="select:font" content="'Karla'"  title="karla"/>
         <meta name="select:font" content="'Source Sans Pro'"  title="source sans"/>
         <meta name="select:post width" content="300"  title="300px"/>
         <meta name="select:post width" content="350"  title="350px"/>
         <meta name="select:post width" content="400"  title="400px"/>
         <meta name="select:post width" content="450"  title="450px"/>
         <meta name="select:post width" content="500"  title="500px"/>
         <meta name="if:drop shadow" content="" />
         <meta name="if:border" content="" />
         <meta name="text:link 1" content="" />
         <meta name="text:link 1 url" content="" />
         <meta name="text:link 2" content="" />
         <meta name="text:link 2 url" content="" />
         <meta name="text:link 3" content="" />
         <meta name="text:link 3 url" content="" />
    </head>

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

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Karla:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">

<link href='http://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>

<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
  var p = document.getElementsByTagName('body');
  for(n=0; n<p.length; n++) {
    if(p[n].style.fontSize) {
       var size = parseInt(p[n].style.fontSize.replace("pt", ""));
    } else {
       var size = 9;
    }
    p[n].style.fontSize = size+inc + 'pt';
   }
}
</script>

<style type="text/css">

/* -------GENERAL------- */

::-webkit-scrollbar{
    width:6px;
    height:7px;
}

::-webkit-scrollbar{
    background-color:white;
    border-radius:10px;
}

::-webkit-scrollbar-track{
    border:2px solid white;
}

::-webkit-scrollbar-thumb{
    border:2px solid white;
    background-color:{color:Scrollbar};
}

::-webkit-scrollbar:horizontal{
    display:none;
}

::-moz-selection{
       background:#eee;
}

::selection{
       background:#eee;
}

.tmblr-iframe{
    -webkit-filter: invert(100%);
        filter: invert(100%);
    opacity:0.2;
    transform:scale(0.7,0.7);
    right:-30px;
    z-index:9999999999!important;
}

body {
    background-color:{color:background};
    font-size:9pt;
    color:{color:text};
    font-family: {select:font}, sans-serif;
    line-height:18px;
    background-image:url("{image:background}");
}

a {
    text-decoration:none;
    color:{color:links};
    transition:.4s ease;
}

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

b, strong {
    box-shadow:0px -4px {color:accent} inset;
}

/*------POST SETTINGS------*/

img {
    max-width:100%;
}

blockquote {
    margin-left:0px;
    padding-left:0px;
    border-left:none;
    margin-right:0px;
}

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

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

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

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

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

.controls {
    display:block;
    position:fixed;
    top:60px;
    right:30px;
    padding:10px;
    text-align:right;
    width:80px;
    border:1px solid #eee;
}

.controls h {
    color:{color:title};
    padding-bottom:5px;
    text-align:center;
    font-size:13px;
    display:block;
}

/*--SIDEBAR--*/

#side {
    position:fixed;
    display:block;
    margin-left:calc(50% - 450px - 100px);
}

#imgs {
    transition:.4s ease;
}

img.side1 {
    width:130px;
    height:auto;
    border:7px {color:image border} solid;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    display:block;
    object-fit:cover;
    transform:rotate(-10deg);
    transition:.5s ease;
}

img.side2 {
    width:130px;
    height:auto;
    border:7px {color:image border} solid;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    display:block;
    margin-top:-70px;
    margin-left:50px;
    object-fit:cover;
    transform:rotate(12deg);
    transition:.5s ease;
}

#imgs a:hover > img.side1 {
    cursor:pointer;
    transform:translateX(-40px)rotate(-10deg);
}

#imgs a:hover > img.side2 {
    cursor:pointer;
    transform:translateX(50px)rotate(12deg);
}

#sidebar {
    background:{color:post background};
    display:block;
    height:auto;
    margin-top:30px;
    padding:14px;
    width:165px;

}

.title, .title a {
    text-align:center;
    font-size:16px;
    color:{color:title};
}

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

.subtitle {
    text-align:center;
    font-size:11px;
    color:{color:text};
    opacity:.5;
    margin-bottom:10px;
}

#desc {
    text-align:center;
}

#desc a{
    box-shadow:0px -10px {color:accent} inset;
}

.links {
    padding-top:15px;
    text-align:center;
}

.links a {
    padding:3px;
    color:{color:sidebar links};
}

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

.pag, .pag a {
    color:{color:text};
    text-align:center;
    margin:10px;
}

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

.container {
    width:{select:post width}px;
    margin:80px auto;
}

.posts {
    width:{select:post width}px;
    padding:13px;
    margin-bottom:100px;
    transition: .5s ease;
    {block:ifDropShadow}
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    {/block:ifDropShadow}
    {block:ifBorder}
    border:1px solid #eee;
    {/block:ifBorder}
}

.text img {max-width:350px;height:auto;}.text {margin-top:0px;}.photo {margin-bottom:0px;}

#tumblr_lightbox,.tmblr-lightbox {
    background:rgba({RGBcolor:Background},0.5)!important;
}

#vignette,#tumblr_lightbox_caption,.vignette,.lightbox-caption{
    opacity:0!important;
}

#tumblr_lightbox_center_image, #tumblr_lightbox_left_image,
#tumblr_lightbox_right_image, .lightbox-image {
    box-shadow:none!important;
    border-radius:0px!important;
}

.h1 {
    font-size:12px;
    font-weight:700;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    color:{color:title};
}

/*-----POST TYPES-----*/

.quoted {
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:5px;
}

.asker {
    color:{color:accent};
    padding:10px 10px 0 10px;
    background:#fbfbfb;
}

.asker a {
    padding:0;
    display:inline-block;
}

.question {
    background:#fbfbfb;
    padding:5px 10px 10px 10px;
    font-weight:normal;
    display:block;
}

.answer {
    margin-top:10px;
    display:block;
}

.answer a {
    box-shadow:0px -3px {color:accent} inset;
}

.player {
    display:inline-block;
    width:50px;
    background:#f2f2f2;
    height:50px;
    overflow:hidden;
    margin-bottom:0px;
}

.audioinfo {
    display:inline-block;
    margin-top:0;
    padding:7px 10px 7px 10px;
    float:right;
    width:330px;
    text-align:right;
    background:#f2f2f2;
    letter-spacing:1px;
    font-size:9px;
}

.photoset {
    width:{select:post width}px;
}

.tumblr_audio_player {background:#f2f2f2!important; }
.tumblr_audio_player {width:40px;margin:10px 7px;height:40px;overflow:hidden;}

.chat {
    list-style:none;
    line-height:30px;
}

.chatitle {
    font-size:13px;
    color:{color:title};
    margin-bottom:10px;
}

.chat label {
}

/*---- CAPTIONS ----*/

.caption {
    background:{color:post background};
    padding:10px;
    margin-top:10px;
}

.tumblr_parent {
    border-left:0px;
    margin-top:0px;
    margin-bottom:0;
}

.tumblr_blog {
    box-shadow:0px -4px {color:accent} inset;
    font-weight:bold;
    margin-top:0px;
    margin-bottom:0;
}

.tumblr_blog:hover {
    box-shadow:0px -10px {color:accent} inset;
}

/*--PERMALINKS--*/

.permalinks {
    padding-top:9px;
    color:{color:permalinks};
}

.permalinks a {
    margin-left:7px;
    color:{color:permalinks};
}

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

.date, .date a {
    color:{color:title};
    display:inline-block;
    margin-right:2px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:11px;
}

.date a:hover {
    color:{color:title};
    box-shadow:0px -10px {color:accent} inset;
}

.notes, .notes2 {
    display:inline-block;
    margin-left:7px;
}

.tags {
    margin-top:20px;
    position:absolute;
    transition:.4s ease;
    font-size:11px;
}

.tags a {
    color:{color:text};
    opacity:.6;
    margin-right:8px;
}

.tags a:hover {
    box-shadow:0px -10px {color:accent} inset;
}

.postnotes {
    width:{select:post width}px;
    display:block;
    text-align:center;
}

/*---- LIKE REBLOG BUTTONS ----*/

.buttons {
    display:inline-block;
    float:right;
    margin-top:-16px;
}

.custom-like-button *{cursor:pointer!important;}
.custom-like-button {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:17px;
    font-size:13px;
    height:15px;
    margin:0px 4px;
    cursor:pointer;
    color:{color:text};
}

.like_button:hover + .our_button {color:red;}
.like_button.liked + .our_button {color:red;}
.like_button iframe {width:100%!important;height:100%!important;}
.like_button {z-index:10;opacity:0;}
.our_button {z-index:1;}
.our_button,.like_button {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#n {bottom:20px;right:20px;position:fixed;font-size:10px;}

</style>

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>

<script> $(function(){  $('.posts').unnest({
    yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
    wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
    newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
    originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
    tumblrAvatars: false, //”dashboard style” caption, have the avatar of the blog next to the username
    tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
    usernameColon: false //if turned to false, removes the colon at the end of usernames
  }); }); </script>

<body>

<div id="side">

<div id="imgs">
<a href="/">
<img class="side1" src="{image:sidebar 1}">
<img class="side2" src="{image:sidebar 2}"></a>
</div>

<div id="sidebar">

<div class="title"><a href="/">{Title}</a></div>
<div class="subtitle">{text:subtitle}</div>

<div id="desc">{block:Description}{Description}{/block:Description}</div>

<div class="links">
    <a href="/">home</a>
    <a href="/ask">message</a>
    <a href="/archive">archive</a>
    <br>
    <a href="{text:link 1 url}">{text:link 1}</a>
    <a href="{text:link 2 url}">{text:link 2}</a>
    <a href="{text:link 3 url}">{text:link 3}</a>
</div>
</div>

    {block:Pagination}
<div class="pag">
{block:PreviousPage}<a href="{PreviousPage}"><i class="oi-arrow-left"></i>
</a> {/block:PreviousPage}{block:NextPage}<a class="next" href="{NextPage}"><i class="oi-arrow-right"></i>
</a>{/block:NextPage}</div>

{/block:Pagination}

</div>

<div class="controls">
<h>font size</h>
<a href="javascript:changeFontSize(1)">larger</a>
<a href="javascript:changeFontSize(-1)">smaller</a>
</div>


<div class="container">

{block:Posts}


<div class="posts">

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

{block:Photo}
<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{/block:Photo}

{block:Photoset}<div class="photoset">{Photoset-500}</div>{/block:Photoset}

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

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

{block:Chat}<div class="chat">{block:Title}<div class="chatitle">{Title}</div></a>{/block:Title}
{block:Lines}<li>{block:Label}<label>{Label}</label> {/block:Label}{Line}</li>{/block:Lines}</div>{/block:Chat}

{block:Video}{Video-500}{/block:Video}

{block:Audio}
{block:AudioPlayer}
<div class="player"> {AudioPlayerWhite}</div>
<div class="audioinfo">
{block:TrackName}<i>{TrackName}</i><br>{/block:TrackName}
{block:Artist} {Artist} {/block:Artist}</div>
{/block:AudioPlayer}
{/block:Audio}

{block:Answer}
<div class="ask"><div class="asker">{Asker} says</div><div class="question"> {Question}</div><div class="answer">{block:Answerer}<div class="answerer">{Answerer}</div>{Answer}{/block:Answerer}</div>{Replies}</div>{/block:Answer}

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

{block:Date}
<div class="permalinks">
<i class="oi-attachment"></i>

    <div class="date"><a href="{PermaLink}">{DayOfMonth}{DayOfMonthSuffix} {Month}</a></div>{/block:Date}

    <div class="notes2">
    {block:NoteCount}{NoteCountWithlabel}{/block:NoteCount}</div>

{block:RebloggedFrom}
<a href="{ReblogParentURL}">via</a>

{block:ContentSource}
<a href="{ReblogRootURL}">source</a>
{/block:ContentSource}

{/block:RebloggedFrom}

</div>

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

{block:IndexPage}
 <div class="buttons">
    <div class="custom-like-button">{LikeButton}
    <span class="our_button"><i class="oi oi-heart"></i></span>
    </div>
    <a href="{ReblogURL}"><i class="oi oi-refresh"></i></a>
    </div>
    {/block:IndexPage}

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

<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->

</div>

{/block:Posts}

{block:PermalinkPage}
{block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
{/block:PermalinkPage}


<div id="n"><a href="https://02px.tumblr.com">02</a></div>
</div>

</body>
</html>