Theme 10 Totoro

<!--

Totoro theme 10 by LilCherryBearr: themebylilcherrybearr.tumblr.com
If you find a bug, need help, want to suggest improvements, or are interested in commissions, please contact me. More info on my blog ^^


-->

<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="https://img.wallpapersafari.com/desktop/1920/1080/35/56/7oYZEn.jpg" />
            <meta name="color:background color" content="#FFFFFF" />
            <meta name="font:font" content="" />
            <meta name="color:border color" content="#555b65" />
            <meta name="color:post color" content="#f0efbf" />
            <meta name="color:link color" content="#948c87" />
            <meta name="image:sidebar image" content="https://66.media.tumblr.com/287e764351e84e7a8459f3ff08ba77ff/e5b0eea45d885e66-1d/s400x600/c634a399fca03f38a14fd68b4e813c03b00a2a52.jpg" />

<script>
    var time = 500;
</script>

<script type="text/javascript"
    src="https://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, ...

            $('#totoro_desc').hover(function() {
        clearTimeout($(this).data('timeout'));
        $('#description').slideDown('slow');
    }, function() {
        var t = setTimeout(function() {
            $('#description').fadeOut('fast');
        }, 1000);
        $(this).data('timeout', t);
    });


        function chutotoro_pagination ($page,$chutotoro){
             $($page).hover(function() {
        clearTimeout($(this).data('timeout'));
        $($chutotoro).fadeIn(time,"linear");
            }, function() {
        var t = setTimeout(function() {
            $($chutotoro).fadeOut(time,"linear");
        }, 500);
        $(this).data('timeout', t);
    });
        }
        chutotoro_pagination('#next','#right_chutotoro');
        chutotoro_pagination('#previous','#left_chutotoro');
        //Chutotoro appears and disappears when hovering over page arrows
    });
  });
</script>

    </head>
    <style>

    body {
        background:url({image:background});
        background-color:{color:background color};
        background-attachment:fixed;
        background-position:center;
        font-family:{font:font};
        font-size:12px;
        overflow-x:hidden;
    }

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

    ::-webkit-scrollbar {
        width:7px;
        height:7px;
        background-color:{color:post color};
    }
    ::-webkit-scrollbar-thumb {
        background-color:{color:link color};
        border-radius:20px;
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        opacity:.5;
    }

    /*Post Content*/

    #content {
        margin-left:150px;
    }

    #posts2 {
        width:520px;
        list-style-type:none;
        margin:30px;
        left:220px;
        position:relative;
    }
    .posts {
        background-color:{color:post color};
        width:500px;
        margin:0 auto;
        overflow-x:auto;
        padding:10px;
        border:3px solid {color:border color};
        border-radius:20px 20px 0 0;
    }

    blockquote {
        border-left:3px solid rgba(100,100,100,.3);
        margin-left:10px;
        padding-left:5px;
    }
    .asker {
        margin-top:-20px;
        margin-left:45px;
    }
    .asker a{
        margin-left:5px;
    }
    .asker-question {
        margin-top:10px;
    }
    .answerer {
        margin-top:-20px;
        margin-left:25px;
    }
    .aswerer-answer {
        margin-top:10px;
    }
    .question {
        background-color:rgba(100,100,100,.3);
        padding:5px;
        border-radius:10px;
        margin:5px;
    }
    .answer {
        background-color:rgba(100,100,100,.3);
        padding:5px;
        border-radius:10px;
        margin:5px;
    }

    .chat li {
        list-style-type:none;
        margin-left:-40px;
        padding:5px;
        background-color:rgba(100,100,100,.3);
    }
    .chat li:nth-child(even) {
        background-color:rgba(100,100,100,.5);
    }

    #bottom_post {
        padding:5px 0 5px 0;
        width:526px;
        margin-left:0px;
        background-color:{color:border color};
        text-align:center;
    }

    #tags{
        color:{color:link color};
    }

    #comma:last-child {
        display:none;
    }

    /* Sidebar */
    #sidebar {
        width:300px;
        height:600px;
        position:absolute;
        position:fixed;
        z-index:;
        margin-left:50px;
        background-color:;
        padding:3px;
        margin-top:50px;
    }
    #totoro {
        width:230px;
        height:370px;
        background-image:url('{image:sidebar image}');
        background-position:60% 50%;
        background-repeat:no-repeat;
    }
    #description {
        width:224px;
        height:75px;
        margin-top:289px;
        position:absolute;
        background-color:rgba(255,255,255,.8);
        padding:3px;
        overflow-y:auto;
        display:none;
        line-height:130%;
        text-align:center;
    }
    #totoro_desc {
        width:230px;
        margin-left:40px;
    }

    /* Main Links */

    #links {
        list-style-type:none;
        width:230px;
        text-align:center;
    }
    #links li{
        display:inline-block;
        padding:3px;
        margin:1px 6px 1px 6px;
        border-top:2px solid {color:border color};
        -webkit-transition:all .5s linear;
        -moz-transition:all .5s linear;
    }
    #links li:hover {
        border-top:5px solid {color:border color};
        background-color:{color:post color};
    }

    /* Custom Links */

    #customlinks {
        margin-left:30px;
    }
    #customlinks li {
        width:;
        margin:3px;
        padding:3px;
        background-color:;
        -webkit-transition:all .5s linear;
        -moz-transition:all .5s linear;
    }
    #customlinks li:hover {
        margin:3px;
        list-style-image:url("https://68.media.tumblr.com/b7dd30c4bd7a0c4cf6a3c650999d6579/tumblr_inline_nr2wbuK5Hg1qfjhw8_540.png");
        background-color:{color:post color};
    }

    /* Pagination */

    #pagination {
        margin-left:150px;
        position:fixed;
        z-index:1;
    }
    .arrow {
        width:50px;
        height:50px;
         -webkit-transition:all .5s linear;
         -moz-transition:all .5s linear;
        position:absolute;
        opacity:.7;
    }
    .arrow:hover {
        width:50px;
        height:50px;
        opacity:1;
    }

    #previousarrow {
        -webkit-transform:scaleX(-1);
        -moz-transform:scaleX(-1);
    }
    #nextarrow {
        margin-left:80px;
    }
    #previousarrow {
    }

     .chutotoro {
        height:50px;
        width:60px;
        display:none;
    }
    #left_chutotoro {
        -webkit-transform:scaleX(-1);
        -moz-transform:scaleX(-1);
        margin-left:-50px;
        position:absolute;
    }
    #right_chutotoro {
        margin-left:130px;
    }

    /* Extra */

     #credit {
        position:fixed;
        left:95%;
        top:87%;
        background-color:{color:post color};
        border:3px solid {color:border color};
        padding:5px;
        overflow:hidden;
        opacity:.5;
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
    }
         #credit:hover {
        opacity:1;
    }
    #iconcredit {
        height:30px;
        width:30px;
    }

    </style>

    <body>

    <a id="credit" title="Theme by Lilcherrybearr" href="https://themebylilcherrybearr.tumblr.com/"> <img id="iconcredit" src="https://31.media.tumblr.com/avatar_aa05499ce1b8_128.png" /> </a>

    {block:Pagination}
    <div id="pagination">
            {block:PreviousPage}
                <img class="chutotoro" id="left_chutotoro" src="https://66.media.tumblr.com/97439d19abdd0cd73b5666bedd5fe5a1/e5b0eea45d885e66-a1/s500x750/5c7afe5f2952b97233d0d42e26b8ece011ee18ae.gifv" />
                <a id="previous" title="Previous page" href="{PreviousPage}"> <img class="arrow" id="previousarrow" src="https://www.elmsdalevisioncentre.com/wp-content/uploads/2016/09/icon-22-512.png" /> </a>
            {/block:PreviousPage}
            {block:NextPage}
                <a id="next" title="Next page" href="{NextPage}"> <img class="arrow" id="nextarrow" src="https://www.elmsdalevisioncentre.com/wp-content/uploads/2016/09/icon-22-512.png" /> </a>
                <img class="chutotoro" id="right_chutotoro" src="https://66.media.tumblr.com/97439d19abdd0cd73b5666bedd5fe5a1/e5b0eea45d885e66-a1/s500x750/5c7afe5f2952b97233d0d42e26b8ece011ee18ae.gifv" />
            {/block:NextPage}
    </div> <!--pagination-->
    {/block:Pagination}

    <div id="sidebar">

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

    <div id="totoro"> </div>
    </div> <!--totoro_desc-->

    <ul id="links">
        <li><a href="{BlogURL}">Home</a></li>
        <li><a href="/ask">Ask</a></li>
        <li><a href="/submit">Submit</a></li>
        <li><a href="/archive">Archive</a></li>
    </ul>

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

    </div> <!--sidebar-->

         <ol id="content">
            {block:Posts}
        <div id="posts2">

            {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">
                        <big>"{Quote}"</big>

                        {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"><b>{Label}</b></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"><img class="asker-avatar" src="{AskerPortraitURL-40}" alt=""><div class="asker">{Asker} asked:</div>
    <div class="asker-question">{Question}</div></div>
            <p>
    {block:Answerer}
        <div class="answer"><img class="answerer-avatar" src="{AnswererPortraitURL-40}" alt=""><div class="answerer">{Answerer}:</div><p><div class="answerer-answer">{Answer}</div></div>
    {/block:Answerer}
    <div class="replies">
        {Replies}
    </div>
            </li>
            {/block:Answer}

        <div id="bottom_post">
        {block:Date}
        {Month} {DayOfMonthWithZero} | <a href="{Permalink}"> Permalink </a>
        {/block:Date}
        {block:NoteCount} | {NoteCountWithLabel} {/block:NoteCount}

        {block:HasTags}
        <div id="tags"> <span style="text-decoration:underline;">Tags:</span>
        {block:Tags}<a href="{TagURL}">

{Tag}</a><span id="comma">,</span>
{/block:Tags}
        </div> <!--tags-->
        <br>{/block:HasTags}

        </div> <!--bottom_post-->

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

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

        </p>
    </ol>
    </body>
</html>