THEME 3: BITCHCRAFT (header)

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

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

    Theme 3: Bitchcraft
    created by merc / drcomalfoy

    >> inspired by my bitchcraft skin
    >> jcink version: http://skinnedbymerc01.jcink.net

---------->

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

        <meta name="image:Header" conteont="http://ultraimg.com/images/thead.png"

        <meta name="color:Background" content="#fbfbfb" />
        <meta name="color:Topbar" content="#ffffff" />
        <meta name="color:Topbar Text" content="#000000" />
        <meta name="color:Topbar Scrolled" content="#000000" />
        <meta name="color:Topbar Scrolled Text" content="#ffffff" />

        <meta name="color:Title Color" content="#000000" />
        <meta name="color:Description Color" content="#696969" />
        <meta name="text:Subtitle" content="WELCOME TO THE PACKS" />
        <meta name="text:Box Outline Offset" content: "2px" />

        <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:Link 5 Text" content: "Link" />
        <meta name="text:Link 5 Url" content: "/" />
        <meta name="text:Link 6 Text" content: "Archive" />
        <meta name="text:Link 6 Url" content: "/archive" />

        <style>

::-webkit-scrollbar-thumb:vertical {
    background-color: #191919;
    height: 10px;
    border: 3px solid #fbfbfb;
    width: 5px;
}
::-webkit-scrollbar {
    width: 9px;
    border: 4px solid #fbfbfb;
    background-color: #191919;
}


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

}
a {
    text-decoration: none;
    color: #191919;
}
#wrapper .right a.tumblr_blog {
    padding: 2px;
    font-family: montserrat;
    font-size: 7px;
    text-transform: uppercase;
}

#merc_topbar {
    font-family: montserrat;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    top: 0px;
    width: calc(100% - 80px);
    padding: 40px;
    background-color: {color:Topbar};
    left: 0px;
    right: 0px;
    text-align: center;
    color: {color:Topbar Text};
    position: fixed;
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    z-index: 3;
}
#merc_topbar.topedit {
    color: {color:Topbar Scrolled Text};
    background-color: {color:Topbar Scrolled};
}
#merc_topbar .linkbar_left {
    width: 250px;
    border-bottom: 1px solid #fff;
    font-size: 8px;
    letter-spacing: 1px;
    font-family: montserrat;
    float: left;
    padding: 2px;
    left: 0px;
    text-align: center;
    word-spacing: 50px;
}
#merc_topbar .linkbar_right {
    width: 250px;
    border-bottom: 1px solid #fff;
    font-size: 8px;
    letter-spacing: 1px;
    font-family: montserrat;
    float: right;
    padding: 2px;
    left: 0px;
    text-align: center;
    word-spacing: 50px;
}
#merc_topbar a {
    color: #000;
    text-decoration: none;
}
#merc_topbar.topedit a { color: #fff; }

#header {
    width: 100%;
    height: 350px;
    background: url({image:Header});
    margin-top: 100px;
}

#wrapper {
    margin: 25px auto;
    width: 1100px;
    padding: 50px;
    margin-top: 100px;
}
#wrapper .left {
    width: 200px;
    float: left;
    padding: 10px;
}
#wrapper .right {
    width: 650px;
    margin-left: 30%;
    padding: 10px;
}
#wrapper .right .posts {
    margin-top: 25px;
    width: 500px;
}
#wrapper .left .box {
    padding: 20px;
    background-color: #fff;
    outline: 1px solid #f7f7f7;
    outline-offset: {text:Box Outline Offset};
    margin-top: 25px;
}
#wrapper .left .box h1 {
    color: {color:Title Color};
    font-family: montserrat;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 1px;
}
#wrapper .left .box .desc {
    line-height: 115%;
    font-size: 10px;
    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 .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 {
    max-width: 100%;
    height: 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;
    z-index: 1;
}
#wrapper .pagination {
    font-family: montserrat;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 20px;
    font-weight: bold;
}
#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: 8px;
    -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; }

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

        <script>
$(document).ready (function () {
    $(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 250) {
                $('#merc_topbar').addClass('topedit')
            }else {
                $('#merc_topbar').removeClass('topedit')
            }
    })
})
        </script>


<script>
$(function(){ // document ready

 if (!!$('.pagination').offset()) { // make sure ".sticky" element exists

   var stickyTop = $('.pagination').offset().top; // returns number

   $(window).scroll(function(){ // scroll event

     var windowTop = $(window).scrollTop(); // returns number

     if (stickyTop < windowTop){
       $('.pagination').css({ position: 'fixed', top: 100 });
     }
     else {
       $('.pagination').css('position','static');
     }

   });

 }

});
</script>

    </head>
    <body>


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


<div id="merc_topbar">
    <div class="linkbar_right">
        <a href="{text:Link 4 Url}">{text:Link 4 Text}</a>
        <a href="{text:Link 5 Url}">{text:Link 5 Text}</a>
        <a href="{text:Link 6 Url}">{text:Link 6 Text}</a>
    </div>
    <div class="linkbar_left">
        <a href="{text:Link 1 Url}">{text:Link 1 Text}</a>
        <a href="{text:Link 2 Url}">{text:Link 2 Text}</a>
        <a href="{text:Link 3 Url}">{text:Link 3 Text}</a>
    </div>
    {Title}
</div>

<div id="header"></div>

<div id="wrapper">
    <div class="left">
        <div class="box">
            <h1>{text:Subtitle}</h1>
            <div class="desc">{description}</div>
        </div>
        <div class="box">
            <h1>AFFILIATES</h1>

            <!--- COPY AND PASTE THIS FOR A NEW AFFILIATE --->
            <div class="affbox">
                <img src="http://placehold.it/30x30/191919/ffffff" />
                <div class="affname"><a href="/">Affiliate One</a></div>
            </div>
            <!--- END COPY PASTE --->

            <div class="affbox">
                <img src="http://placehold.it/30x30/191919/ffffff" />
                <div class="affname"><a href="/">Affiliate Two</a></div>
            </div>

            <div class="affbox">
                <img src="http://placehold.it/30x30/191919/ffffff" />
                <div class="affname"><a href="/">Affiliate Three</a></div>
            </div>

        </div>

        <div class="box">
            <h1>ABOUT THE BLOG</h1>
            <div class="desc2">
                <b>Established:</b> ##, Month 2016<br />
                <b>Online:</b> 163 Viewing<br />
                <b>Visits:</b> 1234 Visits
            </div>
        </div>

        <div class="box">
            <h1>DISCLAIMER</h1>
            <div class="desc2">
                This is where you write your disclaimer.
            </div>
        </div>

            <!--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>
    <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}<img src="{PhotoURL-500}" alt="{PhotoAlt}">{LinkCloseTag}

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

    {block:Photoset}
    {Photoset-500}
    {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}
    {Video-500}
    {block:Caption}<div class="ptext">{Caption}</div>{/block:Caption}
    {/block:Video}
            </div>

        {/block:Posts}
         {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>