Theme 12 Dropdown

<!--

Dropdown theme 12 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 ^^

Theme info:
You cannot preview the header image in the editor. To preview your header image you have to open another tab with your blog and click the menu arrow at the top. Every time you make changes, just reload the page. Wallpaper-sized images or large width headers look the best.

I do not own the default pictures used.

-->

<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://images5.alphacoders.com/495/495521.jpg" />
            <meta name="color:background color" content="#FFFFFF" />
            <meta name="font:font" content="" />
            <meta name="color:post color" content="#ffffff" />
            <meta name="color:link color" content="#ff8282" />
            <meta name="color:primary color" content="#74b0ff" />
            <meta name="color:secondary color" content="#8c8c8c" />
            <meta name="image:header" content="https://wallpaperlayer.com/img/2015/3/anime-sky-scenery-wallpaper-7984-8301-hd-wallpapers.jpg" />


<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, ...

        //dropdown menus' function
        function dropdown($list_title,$list){
             $($list_title).hover(function() {
        clearTimeout($(this).data('timeout'));
            $($list).slideDown(200);
            }, function() {
        var t = setTimeout(function() {
            $($list).slideUp(200).fadeOut(200);
        }, 300);
        $(this).data('timeout', t);
    });
        }
        dropdown('#navigation','#navigationitems');
        dropdown('#links','#linksitems');

        //arrows with label names
        function appear ($arrow,$name){
             $($arrow).hover(function() {
        clearTimeout($(this).data('timeout'));
        $($name).fadeIn(300);
            }, function() {
        var t = setTimeout(function() {
            $($name).fadeOut(300);
        }, 300);
        $(this).data('timeout', t);
    });
        }
        appear('.downarrow','.topbarnames');
        appear('#leftarrow','#left');
        appear('#rightarrow','#right');


        $('.menu').toggle(function(){
            $('#topbar').css("height", "100%");
            $('#header').slideDown(200);
            $('#menuin').removeClass('downarrow');
            $('#menuin').addClass('uparrow');
        },
        function(){
            $('#topbar').css("height", "3%");
            $('#header').slideUp(200);
            $('#menuin').removeClass('uparrow');
            $('#menuin').addClass('downarrow');
        });
    });
  });
</script>

    </head>
    <style>

    /*General stuff*/
    @charset "UTF-8";
    :before, :after {
        content: '';
        display: block;
        position: absolute;
    }

    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:secondary color};
        border-radius:20px;
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        opacity:.5;
    }

    /*Post Content CSS*/

    #content {
        margin-left:150px;
        margin-top:50px;
    }

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

    blockquote {
        border-left:2px solid {color:secondary color};
        margin-left:10px;
        padding-left:5px;
    }
    .asker {
        margin-top:-20px;
        margin-left:45px;
    }
    .asker a{
        margin-left:5px;
    }
    .asker-question {
        margin-top:10px;
    }
    .asker-avatar {
        border-radius:100px;
    }
    .answerer {
        margin-top:-20px;
        margin-left:25px;
    }
    .aswerer-answer {
        margin-top:10px;
    }
    .answerer-avatar {
        border-radius:100px;
    }
    .question {
        border:2px dotted {color:primary color};
        padding:5px;
        border-radius:10px;
        margin:5px;
    }
    .answer {
        border:2px dotted {color:primary color};
        padding:5px;
        border-radius:10px;
        margin:5px;
    }

    .chat li {
        list-style-type:none;
        margin-left:-40px;
        padding:5px;
        border-bottom:1px solid rgba(100,100,100,.5);
    }
    .chat li:last-child {
        border-bottom:none;
    }

    /*Bottom of Post*/
    #bottom_post {
        background-color:{color:post color};
        padding:5px;
    }
    #date {
        border-top:2px dotted {color:primary color};
        background-color:{color:post color};
    }
    #noteperma {
        float:right;
    }

    #tags {
        background-color:{color:post color};
    }
    #comma:last-child {
        display:none;
    }

    #notecontainer {
        margin-top:10px;
    }
    /* credit */

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

    /*Topbar*/
    #topbar {
        list-style-type:none;
        position:fixed;
        width:100%;
        background-color:rgba(0,0,0,.7);
        border-bottom:2px dotted {color:primary color};
        padding:10px;
        height:3%;
        top:0%;
        left:0%;
        margin-top:0px;
        z-index:10;
        -webkit-transition:all 1s ease-in-out;
    }
    #topbar li {
        display:inline-block;
    }
        /*Navigation & links CSS*/
    .sectionhead {
        margin-left:35px;
        z-index:10;
    }
    .sectiontitle {
        color:{color:primary color};
        padding:10px;
        font-size:15px;
        margin-left:35px;
    }
    .sectiontitle:hover {
        cursor:default;
    }
    .sectiontitle:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8.7px 5px 0 5px;
        border-color: {color:secondary color} transparent transparent transparent;
        margin-left:30px;
        margin-top:-10px;
    }
    .list {
        display:none;
        z-index:10;
    }
    .section {
        list-style-type:none;
        max-width:120px;
        position:absolute;
        margin-top:5px;
    }
    .section li {
        font-size:13px;
        padding:7px;
        background-color:rgba(0,0,0,.5);
        display:block !important;
    }
    .section li:hover {
        background-color:{color:secondary color};
    }
    .topbarnames {
        position:absolute;
        left:40px;
        top:5px;
        color:{color:primary color};
        display:none;
    }
    .topbarnames2 {
        width:100px;
        color:{color:primary color};
        position:relative;
        left:100px;
        display:none;
    }
    #pagemenu {
        margin:0 auto;
        height:30px;
        width:400px;
    }
        /*Menu & Pagination CSS*/
    .pagination {
        margin-top:-20px;
        left:;
    }
    .pagination li {
        list-style-type:none;
    }
    #leftside {
        float:left;
        top:5px;
        left:10px;
        position:relative;
        height:20px;
        width:70px;
    }
    #leftarrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 17.3px 10px 0;
        border-color: transparent {color:primary color} transparent transparent;
    }
    #left {
        margin-left:-70px;
        top:-5px;
    }
    .menu {
        width:25px;
        height:20px;
        background-color:{color:primary color};
        position:relative;
        padding:3px;
        margin:0 auto;
    }
    .menu:hover {
        cursor:pointer;
    }
    .downarrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 21.7px 12.5px 0 12.5px;
        border-color: {color:secondary color} transparent transparent transparent;
    }
    .uparrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12.5px 21.7px 12.5px;
        border-color: transparent transparent #7a7a7a transparent;
    }
    #rightside {
        float:right;
        position:relative;
        top:-20px;
        height:20px;
        width:70px;
    }
    #rightarrow {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 17.3px;
        border-color: transparent transparent transparent {color:primary color};
    }
    #right {
        top:-5px;
        left:10px;
    }

    /*Menu/profile*/
    #header {
        background-image:url('{image:header}');
        background-repeat:no-repeat;
        background-position: center top;
        width:100%;
        height:95%;
        display:none;
        margin-top:10px;
        position:relative;

    }
    #profile {
        width:500px;
        margin:0 auto;
        text-align:center;
        position:relative;
        top:50px;
    }
    #icon {
        border-radius:100px;
        position:relative;
        margin:0 auto;
        {block:IndexPage}left:10%;{/block:IndexPage}
    }
    #iconcontainer {
        width:500px;
        height:135px;
    }
    #blogtitle {
        color:white;
        background-color:rgba(0,0,0,.5);
        padding:5px;
        width:490px;
        overflow-y:hidden;
    }
    #description {
        padding:10px;
        background-color:white;
        margin-top:-10px;
        height:50px;
        overflow-y:scroll;
    }

    #searchbar {
        z-index:10;
        float:right;
        position:absolute;
        left:80%;
        width:230px;
        height:50px;
    }
    #search {
        width:150px;
    }
    #button {
        background-color:rgba(0,0,0,.5);
        color:white;
        cursor:pointer;
        border:none;
    }

    #bottomheader {
        background-color:blu;
        width:50%;
        height:230px;
        margin:0 auto;
        margin-top:80px;
        overflow:hidden;
        padding:5px;
    }
    .bottomheader_title {
        background-color:rgba(0,0,0,.5);
        width:150px;
        font-size:15px;
        color:white;
        padding:5px;
        text-align:center;
        margin:0 auto;
    }
    #following {
        width:330px;
        overflow-y:scroll;
        overflow-x:hidden;
        position:relative;
        top:-10px;
    }
    #followinglist {
        width:330px;
        height:200px;
        padding:5px;
        position:relative;
    }
    #followinglist li {
        list-style-type:none;
        display:inline-block;
        margin:2px;
    }
    #followinglist li:hover {
        opacity:.5;
    }

    #likes_container {
        float:right;
        width:330px;
        height:225px;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    #likes_container li {
        border-bottom:2px solid {color:primary color};
        padding:5px;
        position:relative;
        left:-30px;
        background-color:rgba(255,255,255,.7);
        margin:5px;
    }
    #more {
        text-align:center;
        position:relative;
        left:100px;
    }
    </style>

    <body>


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

    <ul id="topbar">
        <li class="sectionhead" id="navigation">
        <center><span class="sectiontitle">Navigation</span></center>
        <ul class="section list" id="navigationitems">
            <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>
        </li>

        <li class="sectionhead" id="links">
        <center><span class="sectiontitle">Links</span></center>
        <ul class="section list" id="linksitems">
            {block:HasPages}{block:Pages}
            <a href="{url}"> <li>{Label}</li> </a>
            {/block:Pages}{/block:HasPages}
        </ul>
        </li>

        <div id="pagemenu">
        <ul class="pagination">
        {block:PreviousPage}<li id="leftside"><a id="previous" href="{PreviousPage}"><div id="leftarrow" class="arrow"><span class="topbarnames2 name" id="left">Previous</span></div></a></li>{/block:PreviousPage}
        <div class="menu">
            <div id="menuin" class="downarrow arrow"></div>
            <span class="topbarnames name">Menu</span>
        </div>
        {block:NextPage}<li id="rightside"><a id="next" href="{NextPage}"><div id="rightarrow" class="arrow"><span class="topbarnames2 name" id="right">Next</span></div></a></li>{/block:NextPage}
        </ul>
        </div>

        <div id="header">
        <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>
            <div id="profile">
            <div id="iconcontainer"><img id="icon" src="{PortraitURL-128}" /></div>
            <h2 id="blogtitle">{Title}</h2>
            <p id="description">{Description}</p>
            </div> <!--profile-->

            <div id="bottomheader">

                {block:Likes}
            <div id="likes_container">
                <h2 class="bottomheader_title">Likes</h2>

                {Likes limit="5" summarize="250" width="250"}

                <a id="more" href="https://www.tumblr.com/liked/by/{Name}"> See more stuff I like </a>
            </div>
        {/block:Likes}

                {block:Following}
            <div id="following">
            <h2 id="following_title" class="bottomheader_title">Following</h2>
    <ul id="followinglist">
            {block:Followed}
            <li>
                <a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}"

title="{FollowedTitle}" /></a>
            </li>{/block:Followed}
    </ul>
    </div> <!--following-->
            {/block:Following}

            </div><!--bottomheader-->

        </div> <!--header-->

    </ul> <!--topbar-->

         <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>
    {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:NoteCount} <div id="noteperma"> {NoteCountWithLabel} | <a href="{Permalink}"> Permalink </a> {/block:NoteCount} </div>
        {block:Date}
        <div id="date">{TimeAgo}</div>
        {/block:Date}

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

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

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

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

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