blackberry

<!--

                     THEME 08
                    blackberry

                     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" content="" />
         <meta name="color:background" content="#ededed" />
         <meta name="color:header bg" content="#fffff" />
         <meta name="color:description bg" content="#fffff" />
         <meta name="color:accent" content="#8fc9c7" />
         <meta name="color:title" content="#00000" />
         <meta name="color:text" content="##7e7e7e" />
         <meta name="color:header links" content="#8fc9c7" />
         <meta name="color:links" content="#c9c9c9" />
         <meta name="color:links hover" content="#c3dddf" />
         <meta name="color:scrollbar" content="#c9c9c9" />
         <meta name="if:show tags" content="" />
         <meta name="if:wide sidebar" content="" />
         <meta name="select:font size" content="10px" title="10px" />
         <meta name="select:font size" content="11px" title="11px" />
         <meta name="select:font size" content="12px" title="12px" />
         <meta name="select:font size" content="13px" title="13px" />
         <meta name="text:link 1 url" content="" />
         <meta name="text:link 1" content="" />
         <meta name="text:link 2 url" content="" />
         <meta name="text:link 2" content="" />
         <meta name="text:link 3 url" content="" />
         <meta name="text:link 3" content="" />
         <meta name="text:link 4 url" content="" />
         <meta name="text:link 4" content="" />
         <meta name="text:link 5 url" content="" />
         <meta name="text:link 5" content="" />
         <meta name="text:link 6 url" content="" />
         <meta name="text:link 6" content="" />
    </head>

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

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

<link href="http://static.tumblr.com/xd6ujov/vHioulge7/icons.css" rel="stylesheet">

<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;
    margin-top:30px;
}

body {
    background-color:{color:background};
    font-size:{select:font size};
    color:{color:text};
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing:.2px;
}

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

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

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

img {
    max-width:100%;
}

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

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

/*----TOOLTIPS-----*/

.hover {
    margin-top:30px;
    visibility:hidden;
    position:absolute;
    font-size:9px;
    text-transform:uppercase;
    padding:4px 7px;
    background:{color:accent};
    transition-delay:.3s;
    z-index:99999999999999999;
}

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

.container {
    {block:IndexPage}
    width:650px;
    {block:IndexPage}
    {block:PermaLinkPage}
    width:400px;
    {/block:PermaLinkPage}
    margin:100px auto;
}

.posts {
    background:white;
    width:400px;
    float:right;
    margin-bottom:100px;
    transition: .5s ease;
}

.texts { margin-top:-15px;}.texts img {max-width:300px;height:auto;}.photoset {display:block;}

#tumblr_lightbox,.tmblr-lightbox {
    background:rgba({RGBcolor:Background},0.99)!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;
}

.caption {
    background:white;
    padding:5px 15px;
}

.permalinks {
    text-align:center;
    margin:0 0 15px 0;
    padding-left:15px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.permalinks i {
    padding-left:5px;
    padding-right:6px;
    font-style:normal;
    color:{color:accent};
}

.permalinks a {display:inline-block;padding-right:5px;}

.quote {
    width:370px;
}

.quoted {
    line-height:20px;
    font-size:14px;
    font-weight:bold;
    margin-bottom:10px;
    text-align:center;
    color:{color:accent};
}

.qinfo {
    font-size:9px;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:1px;
}

.qinfo a {font-size:9px;font-weight:normal;color:{color:accent};}

.q {
    font-size:12px;
    font-weight:700;
    color:{color:accent};
}

.title {
    margin-top:-15px;
    font-size:12px;
    padding:15px;
    background:white;
    font-weight:700;
    color:{color:accent};
}

.tumblr_parent {
  border-left:none;
  padding:none;
}

.tumblr_blog {
    padding:none;
    font-size:10px;
    font-weight:bold;
}

.buttons {
    display:inline-block;
    font-size:9px;
}

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

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

i.oi-tags {
    color:{color:accent};
}

.tags {
    text-align:center;
    padding-top:10px;
    margin-top:10px;
    text-transform:lowercase;
    font-size:10px;
    background:{color:background};
}

.ask {padding:20px 20px 10px 20px;}.asker {font-weight:normal;display:block;text-transform:uppercase;letter-spacing:1px;font-size:9px;padding-bottom:10px;}.question {font-weight:normal;display:block;}.answer {margin-top:10px;width:350px;display:block;}.answerer a {font-size:9px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;}

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

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

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

.chat {padding: 10px 20px 5px 20px;list-style:none;line-height:16px;}.chatitle {font-size:13px;color:{color:title};margin-bottom:10px;}.chat label {font-style:italic;letter-spacing:1px;color:{color:accent};}

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

/*-HEADER-*/

#header {
    width:100%;
    left:-10px;
    z-index:9999999999;
    background:{color:header bg};
    padding:10px 10px 12px 10px;
    position:fixed;
    top:0;
}

#square {
    background:{color:header bg};
    width:30px;
    height:30px;
    transform:rotate(45deg);
    display:block;
    {block:ifWideSidebar}
    margin-left:190px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    margin-left:160px;
    {/block:ifNotWideSidebar}
    position:fixed;
    top:17px;
    z-index:999;
}

#headtitle {
    width:150px;
    {block:ifWideSidebar}
    margin-left:130px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    margin-left:102px;
    {/block:ifNotWideSidebar}
    z-index:999999999;
    color:{color:accent};
    font-weight:bold;
    font-size:13px;
    text-align:center;
    position:relative;
    font-family: 'Noto Sans', sans-serif;
    display:inline-block;
}

#headtitle a {color:{color:accent};}#headtitle a:hover {letter-spacing:2px;}

#headerlinks {
    margin-right:20px;
    display:inline-block;
    text-align:right;
    float:right;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
}

#headerlinks a {
    color:{color:header links};
    margin-right:20px;
}

#headerlinks a:hover {
    letter-spacing:3px;
}

@media only screen and (max-width: 900px) {
    #headerlinks a {
        margin-right:0px;
    }
}

#headerlinks i {
    color:#ababab;
    margin-top:2px;
    font-size:14px;
    margin-left:10px;
    margin-right:10px;
}

#headerlinks .pagi a:hover {
    letter-spacing:1px;
}

#headerlinks .pagi a:hover .hover {
    visibility:visible;
    margin-left:-60px;
}

/*-SIDEBAR-*/

#sidebar {
    position:fixed;
    margin-left:75px;
}

img.sidebar {
    {block:ifWideSidebar}
    width:250px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    width:200px;
    {/block:ifNotWideSidebar}
    height:auto;
    object-fit:cover;
}

#desc {
    {block:ifWideSidebar}
    width:210px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    width:160px;
    {/block:ifNotWideSidebar}
    background:{color:description bg};
    padding:20px;
    margin-top:20px;
    text-align:center;
}

@media only screen and (min-width: 860px) {
    #sidebar {
        margin-left:120px;
    }

    #square {
        {block:ifWideSidebar}
    margin-left:235px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    margin-left:210px;
    {/block:ifNotWideSidebar}
    }

    #headtitle {
        {block:ifWideSidebar}
    margin-left:175px;
    {/block:ifWideSidebar}
    {block:ifNotWideSidebar}
    margin-left:150px;
    {/block:ifNotWideSidebar}
    }
}

.icons {margin-top:15px;}.icons i {background:#eee;font-size:14px;padding:2px 4px;margin:5px;border-radius:2px;transition:.4s ease;}.icons i:hover {opacity:.6;font-size:12px;color:{color:links};}.icons a:hover .hover {visibility:visible;}

</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: false, //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="header">
<div id="square"></div>
    <div id="headtitle"><a href="/">{Title}</a></div>
    <div id="headerlinks">
    <!--

    if you want new icons for you links, change the word after "oi-" to any different icon name. Find them at cyantists.tumblr.com/outicons


    -->
        <i class="oi-user"></i>
        <a href="{text:link 1 url}">{text:link 1}</a>
        <i class="oi-cloud"></i>
        <a href="{text:link 2 url}">{text:link 2}</a>
        {block:ifLink3}
        <i class="oi-list"></i>
        <a href="{text:link 3 url}">{text:link 3}</a>{/block:ifLink3}
        {block:ifLink4}
        <i class="oi-discuss"></i>
        <a href="{text:link 4 url}">{text:link 4}</a>{/block:ifLink4}
        {block:ifLink5}
        <i class="oi-drop"></i>
        <a href="{text:link 5 url}">{text:link 5}</a>{/block:ifLink5}
        {block:ifLink6}
        <i class="oi-bolt"></i>
        <a href="{text:link 6 url}">{text:link 6}</a>{/block:ifLink6}

{block:Pagination}<span class="pagi">
{block:PreviousPage}<a href="{PreviousPage}"><i class="oi-chevron-left"></i><span class="hover" style="font-size: 10px; color: white; letter-spacing: 1px;">last page</span></a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}"><i class="oi-chevron-right"></i><span class="hover" style="font-size: 10px; color: white; letter-spacing: 1px;">next page</span></a>{/block:NextPage}</span>
{/block:Pagination}
    </div>
</div>

<div id="sidebar">
<img class="sidebar" src="{image:sidebar}">
<div id="desc">{block:Description}{Description}{/block:Description}
<div class="icons">
    <a href="/"><i class="oi-home"></i><span class="hover" style="font-size: 10px; color: white; letter-spacing: 1px;">home</span></a>
    <a href="/ask"><i class="oi-envelope"></i><span class="hover" style="font-size: 10px; color: white; letter-spacing: 1px;">ask</span></a>
    <a href="/archive"><i class="oi-bookmark"></i><span class="hover" style="font-size: 10px; color: white; letter-spacing: 1px;">archive</span></a>
</div>
</div>
</div>

<div class="container">

{block:Posts}

<div class="posts">

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

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

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

{block:Quote}<div class="caption"><div class="quote"><div class="quoted">"{Quote}"</div>{block:Source}<div class="qinfo">{Source}</div>{/block:Source}</div></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-400}{/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></div><div class="caption">{Replies}</div>{/block:Answer}

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

{block:Date}<div class="permalinks">
{block:Date}<a href="{PermaLink}">{TimeAgo}</a>{/block:Date}{block:Date} <i>& </i>
{block:NoteCount}<a href="{PermaLink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:IndexPage}
<div class="buttons">
    <i class="oi-heart"></i><div class="custom-like-button">{LikeButton}
    <span class="our_button">like</span>
    </div>
    <i class="oi-repeat"></i><a href="{ReblogURL}">reblog</a>
    </div>
    {/block:IndexPage}
    {block:PermalinkPage}{block:RebloggedFrom}
<a href="{ReblogParentURL}">via</a>{block:ContentSource} & <a href="{ReblogRootURL}"> source</a>
{/block:ContentSource}
{/block:RebloggedFrom}
{/block:PermalinkPage}
</div>
{/block:Date}

{block:ifShowTags}{block:HasTags}<div class="tags"><i class="oi oi-tags"></i> {block:Tags}<a href="{TagUrl}"> {Tag} </a>{/block:Tags}</div>{/block:HasTags}{/block:ifShowTags}

{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}{PostNotes}{/block:PostNotes}
{/block:PermalinkPage}
</div>

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

</body>
</html>