iron

<!--

                     THEME 02
                       iron

                     by @02px

                    enjoy :-)


           * edit links on line 484 *

-->

<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:icon" content="" />

         <meta name="color:background" content="#f8f8f8" />
         <meta name="color:content background" content="#fff" />
         <meta name="color:title" content="#00000" />
         <meta name="color:text" content="#131313" />
         <meta name="color:links" content="#00000" />
         <meta name="color:links hover" content="#00000" />
         <meta name="color:scrollbar" content="#00000" />

         <meta name="text:font size" content="10px" />
         <meta name="text:ask text" content="any FAQs? put 'er there" />
         <meta name="text:about text" content="about text here! as long as you want. :-)" />
         <meta name="text:tab four name" content="about" />
         <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="" />
         <meta name="text:link 7 url" content="" />
         <meta name="text:link 7" content="" />
         <meta name="text:link 8 url" content="" />
         <meta name="text:link 8" content="" />
    </head>

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

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

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

<script>
$(document).ready(function(){
        $("one").addClass("ones");
        $("one").addClass("tabone");
        $(".tabtwo").addClass("no");
        $(".tabthree").addClass("no");
        $(".tabfour").addClass("no");
    $("one").click(function(){
        $("one").addClass("ones");
        $("one").addClass("tabone");
        $("two").removeClass("ones");
        $("three").removeClass("ones");
        $("four").removeClass("ones");
        $(".tabone").removeClass("no");
        $(".tabtwo").addClass("no");
        $(".tabthree").addClass("no");
        $(".tabfour").addClass("no");
    });
    $("two").click(function(){
        $("two").addClass("ones");
        $("one").removeClass("ones");
        $("three").removeClass("ones");
        $("four").removeClass("ones");
        $("one").removeClass("tabone");
        $(".tabtwo").removeClass("no");
        $(".tabone").addClass("no");
        $(".tabthree").addClass("no");
        $(".tabfour").addClass("no");
    });
    $("three").click(function(){
        $("three").addClass("ones");
        $("two").removeClass("ones");
        $("one").removeClass("ones");
        $("four").removeClass("ones");
        $("one").removeClass("tabone");
        $(".tabthree").removeClass("no");
        $(".tabone").addClass("no");
        $(".tabtwo").addClass("no");
        $(".tabfour").addClass("no");
    });
    $("four").click(function(){
        $("four").addClass("ones");
        $("two").removeClass("ones");
        $("three").removeClass("ones");
        $("one").removeClass("ones");
        $("one").removeClass("tabone");
        $(".tabfour").removeClass("no");
        $(".tabone").addClass("no");
        $(".tabtwo").addClass("no");
        $(".tabthree").addClass("no");
    });
});
</script>

<style type="text/css">

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

::-webkit-scrollbar{
    width:7.5px;
    height:8px;
}

::-webkit-scrollbar{
    background-color:transparent;
}

::-webkit-scrollbar-track{
    border:4px solid {color:background};
}

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

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

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

::selection{
       background:#eee;
}

.tmblr-iframe{
    -webkit-filter:invert(100%);
    opacity:0.8;
    z-index:9999999999!important;
}

body {
    background-color:{color:background};
    font-size:{text:font size};
    color:{color:text};
    line-height:18px;
    font-family: 'PT Sans', sans-serif;
}

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

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

a.tumblr_blog {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
    border:none;
}

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

img {
    max-width:100%;
}

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

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

/*----HEADER----*/

#header {
    width:380px;
    height:auto;
    margin:100px auto;
    display:block;
}

img.icon {
    height:60px;
    width:60px;
    object-fit:cover;
    overflow:hidden;
    margin-right:20px;
    display:inline-block;
    position:absolute;
    transition:.3s ease;
}

img.icon:hover {
    opacity:.7;
}

.tab {
    width:260px;
    background:{color:content background};
    height:auto;
    padding:15px;
    float:right;
    display:inline-block;
    vertical-align:top;
    margin-bottom:100px;
}

#links {
    height:20px;
    vertical-align:center;
    text-transform:uppercase;
    text-align:center;
    font-size:9px;
    color:{color:title};
    display:inline-block;
    vertical-align:top;
    margin-left:90px;
    background:{color:background};
    margin-top:3px;
    letter-spacing:1px;
}

one, two, three, four {
    padding:7px 10px 10px 13px;
    cursor:pointer;
}

.title {
    color:{color:title};
    letter-spacing:1px;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    padding-bottom:8px;
}

.ones {
    padding:7px 10px 10px 13px;
    background-color:white;
}

.tabone, .tabtwo, .tabthree, .tabfour {
}

.tabtwo {
    width:260px;
    white-space:wrap;
}

.no {
    display:none;
}

f a {
    margin-right:20px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:9px;
    width:260px;
}

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

.container {
    width:450px;
    margin:auto;
    margin-bottom:100px;
}

.posts {
    padding:10px;
    margin:auto;
    margin-top:70px;
    transition: .5s ease;
}

.caption {
    background:{color:content background};
    margin-top:0px;
    padding:1px 15px;
}

.text {
    background:{color:content background};
    margin-top:10px;
    padding:1px 15px;
}

.textc {
    background:{color:content background};
    margin-top:10px;
    padding:10px 15px;
}

h1 {
    text-transform:uppercase;
    font-weight:700;
    color:{color:title};
    font-size:9px;
    letter-spacing:1px;
    padding-top:10px;
}

.permalinks {
    background:{color:content background};
    padding:8px 10px;
    margin-top:-1px;
    border-top:1px solid #eee;
    font-size:calc({text:font size} - 1px);
    line-height:15px;
}

.permalinks a {
    border:none;
}

date a {
    text-transform:uppercase;
    color:{color:title};
    font-size:8px;
    letter-spacing:1px;
    padding-top:10px;
    font-weight:700;
    padding-right:2px;
}

.buttons {
    float:right;
    display:inline-block;
    font-size:13px;
}

.buttons a {
    color:{color:text};
}

.custom-like-button *{cursor:pointer!important;}
.custom-like-button {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:17px;
    font-size:12px;
    height:15px;
    margin:-1px 0 0 0;
    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%;
}

.tags {
    float:right;
    display:inline-block;
    height:20px;
    width:230px;
    overflow:scroll;
    text-align:right;
    margin-right:-4px;
}

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

.notes {
    background:{color:content background};
    padding:10px;
    margin-top:10px;
}

.notes a {
    border:none;
}

li {
    list-style:none;
}

l1 {
    font-weight:700;
    padding-right:5px;
}

.pagination {
    padding:10px;
    margin:30px auto;
    text-align:center;
}

.pagination a {
    padding:5px;
    border:none;
}

.n {bottom:20px;right:20px;position:fixed;font-size:10px;}.n a{border:none;}

</style>

<body>

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

<div id="header">
    <a href="/"><img class="icon" src="{image:icon}"></a>
    <div id="links">
    <one>home</one>
    <two>navigate</two>
    <three>ask</three>
    <four>{text:tab four name}</four>
    </div>
    <div class="tab">
        <div class="tabone">
        <div class="title">{Title}</div>
            {block:Description}{Description}{/block:Description}
        </div>
        <div class="tabtwo">
            <f>
            <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>
            <a href="{text:link 4 url}">{text:link 4}</a>
            <a href="{text:link 5 url}">{text:link 5}</a>
            <a href="{text:link 6 url}">{text:link 6}</a>
            <a href="{text:link 7 url}">{text:link 7}</a>
            <a href="{text:link 8 url}">{text:link 8}</a>
            </f>
        </div>
        <div class="tabthree">
        {text:ask text}</p>
            <iframe frameborder="0" scrolling="no" width="100%" height="250px" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></p>
        </div>
        <div class="tabfour">
            {text:about text}
        </div>
    </div>
</div>

<div class="container">

{block:Posts}

<div class="posts">

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

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

{block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{/block:Panorama}

{block:Photoset}{Photoset}{/block:Photoset}

{block:Quote}<div class="text"><h1>"{Quote}"</h1>{block:Source}{Source}{/block:Source}</div>{/block:Quote}

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

{block:Chat}<div class="textc">{block:Title}<h1>{Title}</h1></a>{/block:Title}
{block:Lines}<li>{block:Label}<l1>{Label}</l1>{/block:Label}{Line}</li>{/block:Lines}</div>{/block:Chat}

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

{block:Audio}{AudioEmbed}{/block:Audio}

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

{block:Date}
<div class="permalinks">
<date>
    <a href="{PermaLink}">{TimeAgo},</a>
    <a href="{PermaLink}">{NoteCount}</a></date>
    {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}
    <br>
    {block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a>, <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}

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

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

{/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:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->

</div>

{/block:Posts}

</div>

{block:Pagination}
<div class="pagination">
      {block:PreviousPage}
            <a href="{PreviousPage}">backward</a>
      {/block:PreviousPage}

      {block:JumpPagination length="5"}
            {block:CurrentPage}
                   <span class="current_page">{PageNumber}</span>
            {/block:CurrentPage}

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

      {block:NextPage}
             <a href="{NextPage}">forward</a>
      {/block:NextPage}
</div>
{/block:Pagination}

</body>
</html>