Metal Machine Music Theme

<!--

Aww yeah it's theme

 -->


<!DOCTYPE html>
<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="color:background" content="#FFF">
<meta name="color:text" content="#000">
<meta name="color:link" content="#000">
<meta name="color:link hover" content="#555">
<meta name="color:post bg" content="#FFF">
<meta name="color:caption bg" content="#EEE">
<meta name="color:borders" content="#EEE">
<meta name="color:permalink bg" content="#EEE">
<meta name="color:sidebar" content="#DDD">
<meta name="color:titles" content="#000">
<meta name="color:icons" content="#BBB">
<meta name="color:custom links" content="#EEE">

<meta name="image:background" content=""/>
<meta name="image:sidebar img" content=""/>
<meta name="image:popup bg" centent=""/>

<meta name="if:grayscale" content="0"/>

<meta name="text:main font" content="Open Sans"/>
<meta name="text:title font" content="evolvesans"/>
<meta name="text:font size" content="12"/>
<meta name="text:title" content="title"/>
<meta name="text:description" content="What is real? How do you define 'real'? If you're talking about what you can feel, what you can smell, what you can taste and see, then 'real' is simply electrical signals interpreted by your brain."/>

<meta name="text:link one" content="" />
<meta name="text:link one url" content="" />
<meta name="text:link two" content="" />
<meta name="text:link two url" content="" />
<meta name="text:link three" content="" />
<meta name="text:link three url" content="" />
<meta name="text:link four" content="" />
<meta name="text:link four url" content="" />
<meta name="text:link five" content="" />
<meta name="text:link five url" content="" />
<meta name="text:link six" content="" />
<meta name="text:link six url" content="" />

<!-- stole this idea from egg so giving her credit here -->
<link href="https://fonts.googleapis.com/css?family={text:main font}:700,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family={text:title font}:700,400" rel="stylesheet">

<link rel="stylesheet" href="https://unpkg.com/@icon/dripicons/dripicons.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
$(document).ready(function(){
    $('.click,.fade').click(function() {
    $('#pop').fadeToggle();
    });
});
</script>

<!-- tutorial from octomoosey -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

<style type="text/css">

    /* here's the tooltip */

    #s-m-t-tooltip {
        z-index: 9999;
        background: {color:post bg};
        font-size: 10px;
        line-height: 12px;
        font-family: {text:main font}, sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: {color:text};
        max-width: 150px;
        word-wrap: break-word;
        padding: 5px;
        display: block;
        margin: 20px;
    }

    /* a title option im hosting */

    @font-face { font-family: 'evolvesans'; src: url('https://dl.dropbox.com/s/nha2px82n82bx3n/MADE%20Evolve%20Sans%20Bold%20EVO%20%28PERSONAL%20USE%29.otf') format('opentype');}


    /* Basic shit */

    ::-webkit-scrollbar {
        width:15px;
        height:3px;
        background:transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color:{color:borders};
        border:6px solid {color:background};
    }

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

    ::selection {
        color:#fff;
        background:#777;
    }

    ::-webkit-selection {
        color:#fff;
        background:#777;
    }

	::-moz-selection {
	    color:#fff;
	    background:#777;
	}

    body {
        background: {color:background} url({image:background}) fixed;
        font-size:{text:font size}px;
        font-family:{text:main font},arial, sans-serif;
        line-height:150%;
        margin:0;
    }

    blockquote {
        padding:5px;
        margin:0px;
        border:1px solid {color:borders};
    }

    img {
        width:100%;
        border:none;
        text-decoration:none;
    }

    big, small {
        text-decoration:none;
    }

    sub, sup {
        font-size:11px;
    }

    h1 {
        font-size:28px;
        font-family:{text:title font};
        line-height:26px;
        color:{color:titles};
    }

    h2 {
        line-height:20px;
        font-size:16px;
        font-weight:bold;
    }

    hr {
        opacity:.6
    }

    a {
        color:{color:link};
        text-decoration:none;
        -moz-transition-duration:.3s;
        -webkit-transition-duration:.3s;
        -o-transition-duration:.3s;
    }

    a:hover {
        color:{color:link hover};
        -moz-transition-duration:.3s;
        -webkit-transition-duration:.3s;
        -o-transition-duration:.3s;}

    /* Sidebar shit */

    .sidebar {
        top:0px;
        left:0px;
        position:fixed;
        width:400px;
        height:100%;
        background-color:{color:sidebar};
        border-right:100px solid {color:sidebar};
        background-image:url({image:sidebar img});
        text-align:center;
    }

    .title {
        font-size:100px;
        text-transform:uppercase;
        font-family:{text:title font}, sans-serif;
        color:transparent;
        -webkit-text-stroke:1.5px {color:titles};
        line-height:100px;
        width:800px;
        height:100px;
        transform:rotate(-90deg);
        bottom:400px;
        left:50px;
        position:fixed;
        z-index:700;
    }

    .icons {
        background:{color:sidebar};
        position:fixed;
        left:435px;
        top:38%;
        width:16px;
        z-index:799;
    }

    .icons a {
        display:block;
        margin:0px;
        width:16px;
        line-height:16px;
        background:{color:sidebar};
        padding:15px 5px;
        font-size:16px;
        color:{color:icons};
    }

    .description {
        padding:10px;
        text-align:justify;
        width:300px;
        height:150px;
        overflow:hidden;
        border:1px solid {color:borders};
        background-color:{color:post bg};
        cursor:default;
    }

    .links {
        margin:10px 0;
        width:350px;
    }

    .links a {
        padding:5px;
        font-weight:bold;
        width:91px;
        font-size:10px;
        line-height:10px;
        text-transform:uppercase;
        letter-spacing:1px;
        margin-right:3px;
		margin-bottom:3px;
        display:inline-block;
        background:{color:custom links};
        color:{color:links};
        border:1px solid {color:borders};
    }

    .pagination {
        width:480px;
        margin:20px auto;
        padding:5px;
        text-align:center;
        text-transform:uppercase;
        letter-spacing:1px;
    }

    /* posts */

    .bigbox {
        top:20px;
        left:550px;
        position:absolute;
    }

    .smallerbox {
        width:550px;
        margin:0;
    }

    .post {
        width:500px;
        height:auto;
        background:{color:post bg};
        border:1px solid {color:borders};
        margin-bottom:50px;
        padding:10px;
        min-height:100px;
    }

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

    /* photos & photosets */

    .photo {
        width:500px;
        height:auto;
        {block:ifgrayscale}
        filter:grayscale(100%);
        {/block:ifgrayscale}
        -moz-transition-duration:.3s;
        -webkit-transition-duration:.3s;
        -o-transition-duration:.3s;
    }

    .photo:hover {
        filter:none;
    }

    .photoset {
        width:500px;
        {block:ifgrayscale}
        filter:grayscale(100%);
        {/block:ifgrayscale}
        -moz-transition-duration:.3s;
        -webkit-transition-duration:.3s;
        -o-transition-duration:.3s;
    }

    .photoset:hover {
        filter:none;
    }

    /* caption styling */

    .caption {
        padding:10px;
        padding-top:3px;
        margin:0px 0px;
        background:{color:caption bg};
    }

    /* who even posts quotes? it's covered anyway */

    .quote {
        font-size:14px;
        letter-spacing:1px;
    }

    /* external links */

    .link a {
        font-size:20px;
    }

    .link a:before {
        content:'>';
    }

    /* chat */

    .chat ul {
        list-style-type:none;
        padding:0;
        margin:0;
    }

    .chat li {
        padding:10px;
        border-bottom:1px solid {color:borders};
    }

    .chat li:last-child {
        border:0px solid;
    }

    /* audio */

    .audio {
        max-width:500px;
    }

    .tracks {
        font-size:10px;
        text-transform:uppercase;
        letter-spacing:1px;
    }

   /* video */

    .video {
        max-width:500px;
    }

    /* asks */

    .asker {
        font-weight:bold;
        text-transform:uppercase;
    }

    .question {
        padding:3px 5px;
        background:{color:caption bg};
		line-height:26px
    }

    .response {
        padding:0px;
        line-height:20px;
    }

    /* permalink info */

    .info {
        position:absolute;
        margin-top:10px;
        margin-left:530px;
        width:16px;
    }

    .info a {
        border:1px solid {color:borders};
        background:{color:permalink bg};
        padding:5px;
        display:block;
        margin-top:2px;
        font-size:16px;
        color:{color:icons};
        line-height:16px;
        width:16px;
    }

    .tags {
        word-spacing:.9px;
        margin-top:10px;
    }

    /* these are on the permalink page */

    .notes {
        padding:0px;
        margin:25px 0px;
        list-style-type:none;
        font-weight:normal;
        text-align:left;
    }

    .notes a {
        font-weight:bold;
    }

    .notes li {
        padding:7.5px;
    }

    .notes li:nth-child(odd) {
        background:#f9f9f9;
    }

    .notes blockquote {
        border-color:#eee;
        margin:10px 0px 0px 5px;
    }

    .notes img {
        vertical-align:-4px;
        margin-right:10px;
        width:16px;
        height:16px;
    }

    /* urls on blockquotes */

    a.tumblr_blog {
        font-weight:bold;
    }

    /* popup tutorial by odeysseus */

.click { cursor:help } /* for question mark cursor on hover */

#pop {
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    z-index:999;
    background:rgba({RGBcolor:background}, 0.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.)  */
    display:none;
}

.fade {
    top:0;
    left:0;
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
}

.popup {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    background:{color:background} url({image:popup bg}); /* background of popup box */
    padding:10px; /* padding of popup box */
    z-index:10000;
    width:320px;
    padding:50px;
    height:300px;/* width of popup */
    border:1px solid {color:borders}; /* popup border */
}

{CustomCSS}

</style>
</head>
<body>
<div id="pop"> <div class="fade"></div>
    <div class="popup">
    <div class="links">

    <a href="{text:link one url}">{text:link one}</a>
    <a href="{text:link two url}">{text:link two}</a>
    <a href="{text:link three url}">{text:link three}</a>
    <a href="{text:link four url}">{text:link four}</a>
    <a href="{text:link five url}">{text:link five}</a>
    <a href="{text:link six url}">{text:link six}</a>

    </div>

    <div class="description">{text:description}</div>

    </div>
</div>

<div class="sidebar"></div>

<div class="title">{text:title}</div>

<div class="icons">

    <a href="/" title="refresh"><i class="dripicons dripicons-home"></i></a>
    <a href="/ask" title="messsage"><i class="dripicons dripicons-mail"></i></a>
    <a href="/archive" title="archive"><i class="dripicons dripicons-calendar"></i></a>
    <a href="#!" class="click" title="more?"><i class="dripicons dripicons-menu"></i></a>
    <a href="https://forsetis.tumblr.com" title="theme"><i class="dripicons dripicons-code"></i></a>

</div>

</div>

<div class="bigbox">

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

<div class="info">
<a href="{permalink}" title="{timeago}"><i class="dripicons dripicons-clock"></i></a>
<a href="{permalink}" title="{notecountwithlabel}"><i class="dripicons dripicons-heart"></i></a>
<a href="{reblogurl}" title="reblog?"><i class="dripicons dripicons-clockwise"></i></a>
</div>

<div class="post">

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

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

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

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

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

{block:Chat}
<div class="chat">
{block:Title}{Title}{/block:Title}
<ul>{block:Lines}<li class="{Alt}">
{block:Label}<b>{Label}</b>{/block:Label} {Line}
{/block:Lines}</ul>
</div>
{/block:Chat}

{block:Audio}
<div class="audio">
{AudioEmbed-500}
</div>
{/block:Audio}

{block:Video}
<div class="video">
{Video-500}
</div>
{/block:Video}

{block:Answer}
<span class="asker">
<img class="asker-avatar" src="{AskerPortraitURL-96}" style="width:16px;height:16px;vertical-align:-4px;margin-right:10px;" alt="">{Asker} said:
</span>
<span class="question">{Question}</span>
<div class="response">{Answer}</div>
{/block:Answer}

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

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

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

</div>

{/block:Posts}

{block:Pagination}
<div class="pagination">
{block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}
page {CurrentPage} out of {TotalPages}
{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
</div>
{/block:Pagination}
</div>
</div>

</body>
</html>