theme 5: oh, glory

<!DOCTYPE html>
<html>
    <head>
        <title>{Title}</title>

<!----------

    Theme 5: Oh, Glory
    created by merc / drcomalfoy

    >> inspired by paramore tbh.

---------->

<script type='text/javascript' src='http://files.b1.jcink.com/html/jquery-1.7.2.min.js'></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<!----------

    IF YOU ARE USING THESE ON A DIFFERENT THEME
    PLEASE REHOST THEM ELSEWHERE FIRST!!!

---------->

    <link rel="stylesheet" href="http://wildest.b1.jcink.com/uploads/wildest/2c9becc7-simple_line_icons.css">


        <meta name="color:Background" content="#fbfbfb" />

        <meta name="color:Title Color" content="#000000" />
        <meta name="color:Description Color" content="#696969" />
        <meta name="color:Subtitle Color" content="#797979" />
        <meta name="color:Link Color" content="#797979" />
        <meta name="color:Tooltip Background" content="#000" />
        <meta name="color:Tooltip Font Color" content="#fff" />

        <meta name="color:Heart Color" content="#e3e3e3" />

        <meta name="color:Scrollbar Background" content="#f5f5f5" />
        <meta name="color:Scrollbar Thumb" content="#191919" />

        <meta name="text:Subtitle" content="This is the way the world ends" />

        <meta name="text:Link 1 Text" content: "Index" />
        <meta name="text:Link 1 Url" content: "/" />
        <meta name="text:Link 2 Text" content: "Message" />
        <meta name="text:Link 2 Url" content: "/ask" />
        <meta name="text:Link 3 Text" content: "Link" />
        <meta name="text:Link 3 Url" content: "/" />
        <meta name="text:Link 4 Text" content: "Link" />
        <meta name="text:Link 4 Url" content: "/" />

        <meta name="text:Heart Link Title" content: "Title" />
        <meta name="text:Heart Link URL" content: "/" />

         <meta name="if:400px" content="1"/>
 <meta name="if:500px" content="0"/>



        <style>

::-webkit-scrollbar-thumb:vertical {
    background-color: {color:Scrollbar Thumb};
    height: 10px;
    border: 3px solid {color:Scrollbar Background};
    width: 5px;
}
::-webkit-scrollbar {
    width: 9px;
    border: 4px solid {color:Scrollbar Background};
    background-color: {color:Scrollbar Thumb};
}


body {
    margin: 0px;
    background-color: {color:Background};
    cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;

}
a {
    text-decoration: none;
    color: {color:Link Color};
}
#hidden {
    width: 10px;
    height: 10px;
    border: 1px solid {color:Heart Color};
    padding: 10px;
    color: #fff;
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 10px;
    float: left;
}
#hidden a {
    color: {color:Heart Color} !important;
}
#wrapper .right a.tumblr_blog {
    padding: 2px;
    font-family: montserrat;
    font-size: 7px;
    text-transform: uppercase;
}

#wrapper {
    margin: 25px auto;
    width: 1100px;
    padding: 50px;
    margin-top: 100px;
}
#wrapper .left {
    width: 200px;
    float: left;
    padding: 10px;
    position: fixed;
}
#wrapper .right {
    width: 650px;
    margin-left: 30%;
    padding: 10px;
}
#wrapper .right .posts {
    margin-top: 25px;
    {block:if400px}
            width: 400px;
        {/block:if400px}
        {block:if500px}
            width: 500px;
        {/block:if500px}
}
#wrapper .left .title {
    font-family: playfair display;
    font-style: italic;
    font-weight: bold;
    font-size: 50px;
    text-align: right;
    width: 200px;
    line-height: 45px;
    color: {color:Title Color};
    text-shadow: #fff 0px 0px 1px;
    -webkit-font-smoothing: antialiased;

}
#wrapper .left .title a {
    color: {color:Title Color};
}
#wrapper .left .subtitle {
    font-family: montserrat;
    font-size: 7px;
    letter-spacing: 1px;
    text-align:right;
    line-height: 100%;
    margin: 10px;
    text-transform: uppercase;
    color: {color:Subtitle Color};
}
#wrapper .left .box {
    padding: 20px;
    margin-top: 15px;
    border-top: 1px solid #f1f1f1;
}
#wrapper .left .box .desc {
    line-height: 115%;
    font-size: 9px;
    font-family: trebuchet ms, calibri, arial;
    text-align: justify;
    color: {color:Description Color};
    padding-left: 3px;
    padding-right: 3px;
}
#wrapper .left .box .desc2 {
    line-height: 155%;
    font-size: 7px;
    text-transform: Uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: trebuchet ms, calibri, arial;
    text-align: justify;
    color: {color:Description Color};
    padding-left: 3px;
    padding-right: 3px;
}
#wrapper .left .box .desc2 b {
    border-bottom: 1px solid #efefef;
}
#wrapper .left .box .affbox {
    width: 174px;
    line-height: 150%;
    height: 40px;
}
#wrapper .left .llinks {
    padding: 10px;
    text-align: center;
    word-spacing: 10px;
    margin: auto;
    font-family: trebuchet ms;
    height: 10px;
    font-size: 9px;
    border-top: 1px solid #f5f5f5;
}
#wrapper .left .box .affbox img {
    float: left;
    width: 30px;
    height: 30px;
    background-image:url(http://placehold.it/30x30/191919/ffffff);
    outline: 1px solid #efefef;
    outline-offset: 2px;
    text-align: center;
    margin-right: 10px;
}
#wrapper .left .box .affbox .affname {
    font-family: trebuchet ms, calibri, arial;
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    padding-top: 3px;
    text-transform: uppercase;

}
#wrapper .left .box .affbox .affname a {
    color: #000;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    font-style: normal;
}
#wrapper .left .box .affbox .affname a:hover {
    font-style: italic;
    padding-left: 20px;
}

/*** POST STUFFS ***/
#wrapper .right .posts li {
    list-style: disc;
}

#wrapper .right .posts blockquote {
    border-left: 1px solid {color:text};
    padding-left: 10px;
    margin: 10px;
}
#wrapper .right .postnotes {
    line-height: 200%;
    text-align: center;
    margin-top: 20px;
    list-style: none;
    margin-left: -25px
}

#wrapper .right .postnotes ol.notes {
    list-style-type: none;
}

#wrapper .right .postnotes li {
    list-style-type: none;
}

#wrapper .right .postnotes img.avatar {
    width: 0px;
    height: 0px;
}

#wrapper .right h1 {

    font-size: 15px;
    font-family: montserrat;
    line-height: 125%;
    text-align: left;
}


/*EDIT QUOTE POSTS*/

#wrapper .right h2 {
    text-align: center;
    font-size: 15px;
    font-style: italic;
    font-family: montserrat;
    line-height: 125%;
}
#wrapper .right h2::after {
    content: '"';
    color: #f7f7f7;
    font-family: passion one;
    font-weight: bold;
    font-size: 40px;
}
#wrapper .right .ask {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    outline: 1px solid #f7f7f7;
    outline-offset: 2px;
}
#wrapper .right .ask .asker {
    font-family: trebuchet ms;
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: right;
    color: #cccccc;
    text-transform: Uppercase;
}
#wrapper .right .ask .asker a {
    color: #696969;
    font-family: montserrat;
    text-decoration: none;
    padding-right: 20px;
    font-style: italic;
}
#wrapper .right .ask .question {
    text-align: justify;
    font-family: trebuchet ms;
    font-size: 9px;
    line-height: 125%;
    color: #696969;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f7f7f7;
}
#wrapper .right .answer {
    font-family: trebuchet ms, calirbi, arial;
    font-size: 10px;
    text-align: justify;
    padding-right: 20px;
    padding-left: 20px;
    color: #696969;
}
#wrapper .right .conv {
    background-color: #fff;
    padding: 20px;
    outline: 1px solid #f7f7f7;
    outline-offset: 2px;
    font-family: trebuchet ms;
    font-size: 9px;
    line-height: 135%;
    color: #696969;
}
#wrapper .right .conv .line {
    border-bottom: 1px solid #efefef;
    padding: 2px;
}
#wrapper .right .conv span {
    font-weight: bold;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #191919;
}
#wrapper .right .ptext {
    background-color: #fff;
    padding: 20px;
    font-family: trebuchet ms, calibri, arial;
    font-size: 10px;
    line-height: 125%;
    outline: 1px solid #f7f7f7;
    outline-offset: 2px;
    margin-top: 2px;
}
#wrapper .right .ptext img {
    width:80%;
    margin: auto;
}
#wrapper .right .ptext .source {
    font-family: trebuchet ms;
    font-size: 7px;
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 50px;
}
#wrapper .right .ptext .source::before {
    content: "";
    width: 25px;
    height: 1px;
    background-color: #efefef;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}
#wrapper .right .postinfo {
    position: absolute;
    margin-left: 520px;
    float: right;
    font-family: trebuchet ms;
    font-size: 7px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #696969;
    width: 150px;
    padding: 10px;
    opacity: .6;
}
#wrapper .pagination {
    font-family: montserrat;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px;
    color: {color:Link color};
}
#credit {
    float: right;
    position: fixed;
    bottom: 40px;
    right: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    background-color: #fff;
    font-family: montserrat;
    text-transform: uppercase;
    font-size: 7px;
    -webkit-transition-duration:.8s;
    -moz-transition-duration:.8s;
    -o-transition-duration:.8s;
    -ms-transition-duration:.8s;
}

#credit a {
    color: #191919;
    padding: 10px;
    background-color: #fff;
}

#credit a:hover {   background-color:#fff; color: #191919; }
/***************
    TOOLTIPS
***************/
.tooltip{
    display: inline;
    position: relative;
}
#s-m-t-tooltip {
    max-width:300px;
    border-radius: 0px;
    padding:3px 4px 3px 4px;
    margin:20px 7px -2px 20px;
    background-color: {color:Tooltip Background};
    font-family: montserrat;
    font-size: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: {color:Tooltip Font Color};
    z-index:999999999999999999999999999999999999;
}

ol.notes {
    margin-top: 20px;list-style-type: none;
}
.notes {
    font-family: montserrat;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #797979;
}
.notes img.avatar {
      display: none;
}

            /* Custom CSS */
            {CustomCSS}
        </style>

        <!--- TOOLTIPS --->
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:130,

tip_fade_speed:130,

attribute:"title"

});

});

})(jQuery);

</script>



    </head>
    <body>


    <div id="hidden">
        <a href="{text:Heart Link URL}" title="{text:Heart Link Title}"><span aria-hidden="true" data-icon="&#xe08a;"></span></a>
    </div>


<div id="credit"><a href="http://dransy.co.vu/">merc</a></div>

<div id="wrapper">
    <div class="left">

                <!--PAGINATION-->
{block:Pagination}
    <div class="pagination">
        {block:PreviousPage}
        <a href="{PreviousPage}">
            <div class="pagibutton">Previous</div></a>
        {/block:PreviousPage}
        {block:NextPage}
        <a href="{NextPage}">
            <div class="pagibutton">Next</div></a>
        {/block:NextPage}
    </div>
{/block:Pagination}


        <div class="title"><a href="/">{title}</a></div>
        <div class="subtitle">{text:Subtitle}</div>
        <div class="box">
            <div class="desc">{description}</div>
        </div>
        <div class="llinks">
            <a href="{text:Link 1 Url}" title="{text:Link 1 Text}"><span aria-hidden="true" data-icon="&#xe069;"></span></a>
            <a href="{text:Link 2 Url}" title="{text:Link 2 Text}"><span class="icon-envelope"></span></a>
            <a href="{text:Link 3 Url}" title="{text:Link 3 Text}"><span class="icon-tag"></span></a>
            <a href="{text:Link 4 Url}" title="{text:Link 4 Text}"><span class="icon-fire"></span></a>
            <a href="http://dransy.co.vu" title="theme by merc"><span class="icon-heart"></span></a>
        </div>




    </div>
    <div class="right">
        {block:Posts}

        <div class="postinfo">
        <a href="{Permalink}">{NoteCountWithLabel}</a><br />
        {block:Date}
            {MonthNumberWithZero}
            {DayOfMonthWithZero}
            {Year}<br />
        {/block:Date}
            {block:HasTags}
                {block:Tags}
                    #<a href="/tagged/{TAG}">{TAG}</a>
                {/block:Tags}
            {/block:HasTags}


     {block:PermalinkPage}
        {block:RebloggedFrom}<a href="{ReblogParentURL}">VIA {ReblogParentName} </a><br /><a href="{ReblogRootURL}">SOURCE {ReblogRootName}</a>{/block:RebloggedFrom}
     {/block:PermalinkPage}
        </div>


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


    {block:Answer}
    <div class="ask">
        <div class="question">{Question}</div>
        <div class="asker">sent in by {Asker}</div>
        <div class="answer">{Answer}</div>
    </div>
    {/block:Answer}

    {block:Quote}
    <div class="ptext">
    <h2>{Quote}</h2>
    {block:Source}<div class="source">{Source}</div>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}
    <div class="ptext">
    <h1><a href="{URL}">{Name}</a></h1>
    {block:Description}{Description}{/block:Description}
    </div>
    {/block:Link}

    {block:Chat}
    {block:Title}<h1>{Title}</h1>{/block:Title}
    <div class="conv">
        {block:Lines}<div class="line">
            {block:Label}<span class="label">{Label}</span>{/block:Label}
        {Line}</div>{/block:Lines}
    </div>
    {/block:Chat}

    {block:Photo}
    {LinkOpenTag}

    {block:if400px}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{/block:if400px}

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

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

    {block:Photoset}
    {block:if400px}{Photoset-400}{/block:if400px}{block:if500px}{Photoset-500}{/block:if500px}
    {block:Caption}<div class="ptext">{Caption}</div>{/block:Caption}
    {/block:Photoset}

    {block:Audio}
    <div class="ptext">
    <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
    {block:Caption}{Caption}{/block:Caption}
    </div>
    {/block:Audio}

    {block:Video}
    {block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}
    {block:Caption}<div class="ptext">{Caption}</div>{/block:Caption}
    {/block:Video}
            </div>

        {/block:Posts}
        {block:PermalinkPage}
        <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
     {/block:PermalinkPage}
         {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom}
{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}


    </div>
</div>

    </body>
</html>