Theme 7.2

<!--
    TWEWY theme 7.2 made by Lilcherrybearr: lilcherrybearr.tumblr.com
    Right sidebar
-->


<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:background" content="http://images.khinsider.com/The%20World%20Ends%20With%20You/Artwork/Environments/Scramble%20Crossing%2002.jpg" />
            <meta name="font:font" content="" />
            <meta name="color:background color" content="" />

<script type="text/javascript"
    src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
  google.load("jquery", "1.3");
  google.setOnLoadCallback(function() {
    jQuery(function($) {
      // do some stuff here, eg load your tweets, ...
      $('#playerpin').click(function(){
          $("html, body").animate({ scrollTop: "0px" });
      });
      $('#playerpin').dblclick(function(){
        $('html, body').animate({scrollTop:$(document).height()}, 'fast');
        return false;
    });

    });
  });
</script>

    </head>
    <style>

    /*Post Content*/
    body {
        background:url({image:background});
        background-color:{color:background color};
        background-attachment:fixed;
        font-family:{font:font};
        font-size:14px;
    }

    a {
        text-decoration:none;
        color:white;
    }

    ::-webkit-scrollbar {
        width:7px;
        height:7px;
        background-color:black;
    }
    ::-webkit-scrollbar-thumb {
        background-color:yellow;
        border-radius:20px;
        box-shadow:1px 2px 3px black;
    }

    #content {
    }

    #title {
        color:white;
        width:450px;
        text-align:center;
        font-size:20px;
        text-shadow:2px 2px 0 black;
        margin:0 auto;
        background:-webkit-radial-gradient(circle,rgba(50,50,200,1),rgba(0,0,0,0));
        background:-moz-radial-gradient(circle,rgba(50,50,200,1),rgba(0,0,0,0));
    }
    #title2 {
        padding:3px 20px 3px 20px;
    }

    #posts2 {
        list-style-type:none;
        margin-left:250px;
        margin-top:20px;
        width:530px;
        background-color:rgba(180,100,190,.9);
        border:2px solid black;
        box-shadow:5px 5px 0px black;
        padding:5px;
        margin-bottom:10px;
    }
    .posts {
        margin:0 auto;
        width:500px;
        overflow-x:auto;
    }

    blockquote {
        border-left:2px solid black;
        padding-left:5px;
        margin-left:10px;
    }

    .asker-question {
        background-color:white;
        padding:10px;
        border-radius:20px;
        box-shadow:3px 3px 0 black;
        width:375px;
    }
    .asker-question-triangle-l {
        background-color:white;
        height:15px;
        width:20px;
        position:relative;
        left:50px;
        margin-right:50px;
        border-bottom-right-radius:50px;
        border-top-left-radius:10px;
        box-shadow:3px 3px 0 black;
    }
    .asker-avatar {
        float:left;
        position:relative;
        top:10px;
        border-radius:20px;
    }
    .asker1 {
        margin-left:-30px;
    }
    .asker1 li {
        display:inline-block;
    }
    .replies1 {
        background-color:white;
        margin:10px;
        padding:0 10px 0 10px;
        border-radius:20px;
        box-shadow:3px 3px 0 black;
        width:375px;
        float:right;
    }
    .replies1 a{
        color:gray;
    }
    .asker-question-triangle-r {
        background-color:white;
        height:15px;
        width:20px;
        margin-right:30px;
        margin-top:0px;
        border-bottom-left-radius:50px;
        border-top-right-radius:10px;
        box-shadow:3px 3px 0 black;
        float:right;
        clear:both;
    }
    .aswerer-answer {
        margin-top:10px;
    }
    .answer {
        background-color:white;
        margin-top:10px;
        margin-right:10px;
        padding:0 10px 0 10px;
        border-radius:20px;
        box-shadow:3px 3px 0 black;
        width:375px;
        float:right;
    }

    .answerer1 {
        float:right;
        clear:both;
        margin-top:10px;
    }
    .answerer1 li {
        display:inline-block;
    }
    .answerer-avatar {
        border-radius:20px;
    }

     #phone {
        float:right;
    }
    #time {
        float:right;
        color:white;
        position:relative;
        top:-10px;
        text-transform:uppercase;
    }
    #date {
        margin-left:455px;
        margin-top:10px;
        position:absolute;
        color:white;
    }
    #oink {
        float:right;
        position:relative;
        top:-10px;
    }
    #notenum {
        color:white;
        position:absolute;
        margin-top:-35px;
        margin-left:40px;
    }

    #tags a{
        color:black;
        margin:3px;
        padding:2px 5px 2px 5px;
        background-color:white;
        box-shadow:3px 3px 0 black;
        border-radius:10px;
        line-height:180%;
    }

    /*Sidebar*/
    #sidebar {
        width:400px;
        height:auto;
        background-color:rgba(150,50,150,.9);
        margin-left:900px;
        margin-top:30px;
        position:absolute;
        position:fixed;
        overflow:hidden;
        border:2px solid black;
        box-shadow:5px 5px 0px black;
    }

    #twewy {
        margin-left:20px;
    }

    #pins {
        width:400px;
        height:150px;
        margin-top:-30px;
        margin-left:-20px;
    }
    .top {
        padding:10px;
        margin-top:20px;
        display:inline-block;
        border-radius:70px;
    }
    .bottom {
        padding:15px;
        margin-top:20px;
        display:inline-block;
    }
    .namebottom {
        display:block;
        background-color:yellow;
        color:black;
        text-align:center;
        border:2px solid black;
        padding:0 5px 0 5px;
        margin-top:-10px;
        -webkit-transition:all .5s ease-in-out;
         -moz-transition:all .5s ease-in-out;
    }
    .namebottom:hover {
        display:block;
        background-color:gray;
        color:white;
        text-align:center;
        border:2px solid black;
        padding:0 5px 0 5px;
        margin-top:-10px;
    }
    .pinimage {
        border-radius:50px;
        -webkit-transition:all .5s ease-in-out;
         -moz-transition:all .5s ease-in-out;
    }
    .pinimage:hover {
        box-shadow:0 0 50px yellow;
        border-radius:50px;
    }

    #customlinks {
        position:relative;
        top:-50px;
        margin:0 auto;
        text-align:center;
        width:400px;
    }
    #links {
        display:inline;
        padding:5px;
        margin:0px 6px 0 6px;
        box-shadow:2px 2px 2px black;
        line-height:200%;
    }
    #links a {
        color:yellow;
        text-shadow:2px 2px 0 black;
        font-size:15px;
    }

    #titlepig {
        margin-top:-60px;
    }
    #pig {
        position:relative;
        top:35px;
        left:55px;
        float:right;
        -webkit-animation: walking 6s infinite;
        -moz-animation: walking 6s infinite;
    }
    @-webkit-keyframes walking {
        0% {
            left:55px;
        }
        100% {
            left:-400px;
        }
    }
     @-moz-keyframes walking {
        0% {
            left:55px;
        }
        100% {
            left:-400px;
        }
    }
        #blogtitle {
        margin:5px;
        font-size:25px;
        text-shadow:2px 2px 0 black;
        color:white;
    }

    #description {
        text-align:center;
        width:350px;
        margin:0 auto;
        padding:5px;
    }

    #searchbar {
        margin-left:100px;
        border:2px solid black;
        width:186px;
        box-shadow:2px 2px 0 black;
    }
    #search {
        width:125px;
        color:purple;
    }
    #button{
       margin-left:0px;
       background-color:yellow;
       position:absolute;
    }

    /* Pagination & extras */
    #footer {
        position:absolute;
        color:red;
        margin-left:650px;
        margin-bottom:30px;
        background-color:gray;
        padding:5px;
    }
    .current_page {
        background-color:yellow;
        padding:5px;
        box-shadow:2px 2px 2px black;
        border-top-right-radius:10px;
    }
    .jump_page {
        padding:5px;
        background-color:gray;
        box-shadow:2px 2px 2px black;
        border-top-right-radius:10px;
    }

    #playerpin {
        position:absolute;
        position:fixed;
        margin-top:550px;
        margin-left:150px;
    }
    #playerpin:hover {
        box-shadow:0 0 50px white;
        border-radius:40px;
        cursor:pointer;
    }

    #credit {
        position:absolute;
        position:fixed;
        margin-left:30px;
        margin-top:600px;
        text-decoration:underline;
        text-shadow:2px 2px 0 black;
    }

    </style>

    <body>

    <a id="credit" href="http://themebylilcherrybearr.tumblr.com/"> Theme </a>

    <img title="Click to scroll to top and double click to scroll to bottom"  id="playerpin" src="https://40.media.tumblr.com/6e40cb87f56c73fcd26be07f2e68eed1/tumblr_inline_norc29gdlo1qfjhw8_540.png" />

    <div id="sidebar">

    <img id="twewy" src="https://40.media.tumblr.com/848c863c00a43ee1be4a2938a323035b/tumblr_inline_nns4d5vBjE1qfjhw8_540.png" />

        <ul id="pins">
    <li class="top"> <a href="{BlogURL}"> <img class="pinimage" src="https://41.media.tumblr.com/13831ee69908ab468adcd7acb30bee43/tumblr_inline_nn7oyu34B61qfjhw8_540.png" /> <span class="namebottom">Home </span> </a> </li>

    <li class="bottom"> <a href="/archive"> <img class="pinimage" src="https://41.media.tumblr.com/dc1d1065f7cbf6b50862ee284da71b17/tumblr_inline_nn7oyibNk01qfjhw8_540.png" /> <span class="namebottom">Archive</span> </a> </li>

    <li class="top"> {block:AskEnabled} <a href="/ask"> <img class="pinimage" src="https://40.media.tumblr.com/ea31a3f05d08aca18cc64bc4ed877958/tumblr_inline_nn7oz63VRD1qfjhw8_540.png" /> <span class="namebottom" style="cursor:help"> {AskLabel} </span> </a> {/block:AskEnabled} </li>

    <li class="bottom"> {block:SubmissionsEnabled} <a href="/submit"> <img class="pinimage" src="https://40.media.tumblr.com/b022b90539638dfba44ce34c51e5e46b/tumblr_inline_nn7ozf502E1qfjhw8_540.png" /> <span class="namebottom"> {SubmitLabel} </span> </a> {/block:SubmissionsEnabled} </li>
        </ul>

        <div id="customlinks">{block:HasPages}{block:Pages}<li id="links"><a href="{url}">{Label}</a></li>{/block:Pages}{/block:HasPages}</div>

    <div id="titlepig">
    <img id="pig" src="https://31.media.tumblr.com/2c21188b0ee310a2edabccc6a2cff75a/tumblr_inline_nnvrp9ucWy1qfjhw8_500.gif" />
    <marquee id="blogtitle">{BlogTitle}</marquee>
    </div>

        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}

<p>
        <form id="searchbar" action="/search" method="get">
            <input id="search" type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
            <input id="button" type="submit" value="Search">
        </form>
<br>
    </div> <!--sidebar-->

         <ol id="content">
            {block:Posts}
        <div id="posts2">
        <img id="phone" src="https://41.media.tumblr.com/72cf215061485453bae3bba44941467e/tumblr_inline_no64aifU6u1qfjhw8_540.png" />
            <p><a href="{Permalink}">
            {block:Date}<big id="time">{12HourWithZero}:{Minutes} {AmPm}</big>{/block:Date}</p>
            {block:Date} <small id="date"> {MonthNumber}/{DayOfMonth}/{ShortYear} </small> {/block:Date}
            <img id="oink" src="https://41.media.tumblr.com/070805a26dc642952a8a1ad77ec61a14/tumblr_inline_no65gqYxbL1qfjhw8_540.png" />
            <img src="https://40.media.tumblr.com/0741350b1ca8a23b1ef26d3b9cc91ba6/tumblr_inline_no662oiCuJ1qfjhw8_540.png" />
            <p id="notenum"><big>{block:NoteCount}{NoteCount}{/block:NoteCount}</big></p>
            </a>

            {block:Text}
                    <li class="posts">
                        {block:Title}
                            <h3 id="title"><a id="title2" href="{Permalink}">{Title}</a></h3>
                        {/block:Title}{Body}
                    </li>
            {/block:Text}

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

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

            {block:Panorama}
                    <li class="posts">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
            {/block:Panorama}

            {block:Photoset}
                    <li class="posts">
                        {Photoset-500}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
            {/block:Photoset}

            {block:Quote}
                    <li class="posts">
                        "{Quote}"

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

            {block:Link}
                    <li class="posts">
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
            {/block:Link}

            {block:Chat}
                    <li class="posts">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}{Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
            {/block:Chat}

            {block:Video}
                    <li class="posts">
                        {Video-500}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
            {/block:Video}

            {block:Audio}
                    <li class="posts">
                        {AudioEmbed}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
            {/block:Audio}

        {block:Answer}
            <li class="posts">
    <div class="question">
    <div class="asker-question">{Question}
    </div>
    <div class="asker-question-triangle-l"></div>
        <ul class="asker1">
    <li> <img class="asker-avatar" src="{AskerPortraitURL-40}" alt=""> </li>
    <li> <span id="asker_name"> {Asker}</span> </li>
        </ul>
    </div>
    {block:Answerer}
        <div class="answer">
        <div class="answerer-answer">{Answer}</div>
        </div>
        <div class="asker-question-triangle-r"></div>
        <ul class="answerer1">
            <li> <div class="answerer">{Answerer}</div> </li>
            <li> <img class="answerer-avatar" src="{AnswererPortraitURL-40}" alt=""/> </li>
        </ul>
    {/block:Answerer}
    <div class="replies1">
        {Replies}
    </div>
            </li>
        {/block:Answer}

        {block:HasTags}<br><div id="tags">
        {block:Tags}<a href="{TagURL}">{Tag}</a>
{/block:Tags}
        </div> <!--tags-->
        <br>{/block:HasTags}

        {block:PostNotes}
        <div id="notecontainer">{PostNotes}</div>
        {/block:PostNotes}


        </div> <!--posts2-->
            {/block:Posts}

        {block:IndexPage}
         <p id="footer">
            {block:Pagination}{block:PreviousPage}
                <a href="{PreviousPage}">Previous</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}">Next</a>
            {/block:NextPage}{/block:Pagination}
          {/block:IndexPage}
        </p>
    </ol>
    </body>
</html>