basebook theme v2

<!--
basebook theme by charlie @samuelortez
dont remove this part pls
!-->

<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<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:icon" content=""/>
        <meta name="image:ad 1" content=""/>
        <meta name="image:ad 2" content=""/>

        <meta name="text:link" content="Link"/>
        <meta name="text:link url" content="/"/>
        <meta name="text:name" content="Name Here"/>
        <meta name="text:caption 1" content="caption 1"/>
        <meta name="text:caption 2" content="caption 2"/>

        <meta name="color:theme" content="#660611"/>
        <meta name="color:links" content="#660611"/>
        <meta name="color:tags" content=""/>

        <meta name="if:desc" content=""/>

        <style>
            body{
                font-family: 'Roboto', sans-serif;
                margin:0px;
                padding:0;
                color:black;

            }


            h1{
                margin: 0;padding: 0;
            }

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

            a:hover{
                color:{color:theme};
                text-decoration:underline;
            }

            #top{
                width:100%;
                height:9%;
                background-color:{color:theme};
                position:fixed;
                top:0px;
            }

            .topnav{
                font-family:Titillium Web;
                color:white;
                font-weight:bold;
                font-size:40px;
                margin-left:10px;
                position:fixed;
                margin-top:-53px;
                margin-left:200px;
            }

            .toptitle{
                font-family:Titillium Web;
                color:white;
                font-weight:bold;
                font-size:40px;
                margin-left:10px;
                width:400px;
            }

            .topnav input[type=text] {
                float: right;
                padding: 6px;
                border: none;
                margin-top: 8px;
                margin-right: 16px;
                font-size: 17px;

            }

            #side1{
                height:625px;
                margin-top:300px;
                width:350px;
                background-color:white;
                position:fixed;
                z-index:-1;
                border-right: 2px solid lightgray;
                margin:0;
                padding:0;
            }

            #icon{
                width:150px;
                height:150px;
                background-color:none;
                margin-top:70px;
                margin-left:50px;
                position:fixed;
                border-radius:5px;
                -webkit-box-shadow: 10px 10px 11px -5px rgba(0,0,0,0.48);
                -moz-box-shadow: 10px 10px 11px -5px rgba(0,0,0,0.48);
                box-shadow: 10px 10px 11px -5px rgba(0,0,0,0.48);
            }

            #icon img{
                width:150px;
                height:150px;
                border-radius:5px;
            }

            #sidetext{
                height:100px;
                width:140px;
                margin-top:90px;
                margin-left:210px;
                text-align:left;
                font-size:20px;
                color:{color:theme};
                position:fixed;
            }

            #sidetext a{
                color:{color:theme};
            }
             #sidetext a:hover{
                color:{color:theme};
                text-decoration:underline;
            }

            #bottomtext{
                height:100px;
                width:150px;
                margin-top:240px;
                margin-left:50px;
                text-align:left;
                font-size:20px;
                color:{color:theme};
                background-color:;
                position:fixed;
            }

            #container{
                margin-left:351px;
                height:580px;
                margin-top:50px;
                width:560px;
                background-color:white;
                overflow-y:scroll;
                overflow-x:hidden;
                position:fixed;
                z-index:-2;
                padding-left:50px;
                padding-bottom:5px;

            }

            .post{
                width:500px;
                text-align:center;
                margin-top:20px;
            }

            .post img{
                max-width:500px;
                border-color:{color:theme};
                border-style:solid;
                border-width:2px;
                border-radius:3px;
            }

            .footer{
                padding:5px;
                background-color:{color:theme};
                color:{color:tags};
                border-radius:10px;
            }

            .footer a{
                color:{color:tags};
            }

            .footer a:hover{
                text-decoration:underline;
            }

             ::-webkit-scrollbar {
    width:3px;
    height:11px;}

    ::-webkit-scrollbar-track {
    border:4px solid white;
    background:{color:theme};}

    ::-webkit-scrollbar-thumb:vertical{
    width:2px;
    background:{color:theme};
    }

    #side2{
                height:625px;
                margin-top:300px;
                width:350px;
                background-color:white;
                position:fixed;
                z-index:-1;
                border-left: 2px solid lightgray;
                margin:0;
                margin-left:961px;
            }

            #side2 img{
                margin-top:80px;
                margin-left:30px;
                max-height:200px;
                max-width:300px;
            }

        </style>


    </head>
    <body>
    <div id="top">
        <div class="toptitle">
            Basebook
        </div>
        <div class="topnav">
        <input type="text" placeholder="Search.." style="width:400px;border-radius:5px">
</form>
</div>
    </div>
    <div id="side1">
        <div id="icon">
            <img src="{image:icon}">
        </div>
        <div id="sidetext">
         <a href="/">{text:name}</a><br>
           Logout
        </div>
    </div>
<div id="bottomtext">
    <a href="/ask">Message</a><br>
    <a href="/submit">Submit</a><br>
    <a href="{text:link url}">{text:link}</a><br>
{block:NextPage}
<a href="{NextPage}">→</a>
{/block:NextPage}
</div>
<div id="side2">
    <center>
    <img src="{image:ad 1}"><br>
    {text:caption 1}<br>
    <img src="{image:ad 2}"><br>
    {text:caption 2}

    </center>
</div>
<div id="container">
{block:Posts}

<div class="post">


{block:Text}
{block:Title}<h3>{Title}</h3>{/block:Title}
{Body}
{/block:Text}


{block:Photo}
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}">
{LinkCloseTag}
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photo}


{block:Photoset}
{Photoset-500}
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Photoset}


{block:Quote}
<h4>"{Quote}"</h4>
{block:Source}<p>{Source}</p>{/block:Source}
{/block:Quote}


{block:Link}
<h3><a href="{URL}" target="_blank">{Name}</a></h3>
{block:Description}<p>{Description}</p>{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h3>{Title}</h3>{/block:Title}
{block:Lines}
{block:Label}{Label}{/block:Label} {Line}</br>
{/block:Lines}
{/block:Chat}


{block:Audio}
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}


{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}


{block:Answer}
{Asker} said: "{Question}"
{Answer}
{/block:Answer}


<div class="footer">
<a href="{Permalink}">perma</a> /

{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>


{block:PermalinkPage}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{/block:PermalinkPage}


{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

</div>

{/block:Posts}

</div>
        </div>
    </body>
</html>