Page 08. Fic Rec {Write Out}

<!-- Page 08. Fic Rec.

{. Write Out .}

Page #08. (Fic Rec)
http://noiretblanc-themes.tumblr.com/

Please don't use this theme as a base or claim it as your own.
You are free to edit this page as much as you want, please just don't erase the credits.

CREDITS TO:
    Background Image: http://subtlepatterns.com/

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="{Favicon}">
<link href="https://fonts.googleapis.com/css?family=Concert+One|Rajdhani" rel="stylesheet">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<title>{Title}</title>

<style>

    body::-webkit-scrollbar-track
    {
        background-color: #cccccc;
    }

    body::-webkit-scrollbar
    {
        width: 10px;
        background-color: #cccccc;
    }

    body::-webkit-scrollbar-thumb
    {
        background-color: #292929; /* Main scrollbar color */
    }

    ::-webkit-scrollbar-track
    {
        background-color: #ebebeb;
    }

    ::-webkit-scrollbar
    {
        width: 3px;
        background-color: #ebebeb;
    }

    ::-webkit-scrollbar-thumb
    {
        background-color: #292929; /* Small scrollbar color */
    }

    body{
        background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/lined_paper.png"); /* Main bg image */
        margin:0;
        padding:0;
        color: #07000f; /* Main color of the fonts */
        font-family: 'Rajdhani', sans-serif;
    }

    a{
        -moz-transition:all .4s ease-in-out;
        -webkit-transition:all .4s ease-in-out;
        -o-transition:all .4s ease-in-out;
         transition:all .4s ease-in-out;
    }

    #full{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100px;
        right: 100px;
        min-width: 900px;
    }

    /* SIDE BAR */

    #leftb{
        position: fixed;
        height: 350px;
        width: 200px;
        top:50%;
        margin-top: -175px;
    }

    .left-title{
        position: relative;
        height: 70px;
        width: 100%;
        background: #292929; /* Title bg color */
        color: #FBFDFC; /* Title font color */
        font-family: 'Concert One', cursive;
    }

    .left-title span{
        position: absolute;
        bottom: 0;
        margin-left: 10px;
        margin-bottom: 8px;
        font-size: 20px;
    }

    .left-box{
        position: relative;
        max-height: 140px;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
        background: rgba(229, 232, 230, 0.49); /* Side bar bg color */
    }

    .left-links{
        position: relative;
        height: 140px;
        overflow-y: auto;
        padding-top: 8px;
        box-sizing: border-box;
    }

    .left-links a{
        display: inline-block;
        text-decoration: none;
        color:#FBFDFC; /* Links font color */
        background: #292929; /* Links bg color */
        width: 90px;
        margin: 0 0 5px 3px;
        padding: 3px 5px;
        box-sizing: border-box;
    }

    .left-links a:hover{
        background-color: #dedfe2; /* Hover links bg color */
        color: #292929; /* Hover links font color */
    }

    /*MAIN CONTENT*/

    #rightb{
        position: absolute;
        left: 200px;
        right: 0;
        height: 100%;
        padding: 50px;
        box-sizing: border-box;
    }

    #ficbox{
        vertical-align: top;
        display: inline-block;
        position: relative;
        width: 300px;
        background: rgba(229, 232, 230, 0.49); /* Fics bg color */
        margin-right: 10px;
        margin-bottom: 50px;
    }

    .fic-top{
        position: relative;
        max-height: 100px;
        width: 100%;
        color: #FBFDFC; /* Fic's title font color */
        text-align: center;
        background: #292929; /* Fic's title bg color */
    }

    .fic-top span.title{
        display: block;
        padding: 5px;
        font-size: 18px;
        font-family: 'Concert One', cursive;
        text-transform: capitalize;
    }

    .subtitle{
        position: relative;
        bottom: 0px;
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }

    .fic-top span.sub{
        display: inline-block;
        font-size: 14px;
        margin: 0 10px;
    }

    .fic-cont{
        position: relative;
        box-sizing: border-box;
    }

    .fic-links{
        text-align: center;
        padding: 5px 0;
    }

    .fic-links a{
        text-decoration: none;
        color:black; /* Fic links font color */
    }

    .fic-links a:hover{
        letter-spacing: 3px;
    }

    .fic-links a:before{
        content: "[";
        margin-right: 5px;
    }

    .fic-links a:after{
        content: "]";
        margin-left: 5px;
    }

    .summary{
        font-size: 14px;
        overflow-y: auto;
        max-height: 155px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .summary:first-letter{
        font-size: 20px;
    }

    .tags{
        position: relative;
        padding: 10px;
        max-height: 30px;
        overflow-y: auto;
    }

    .tags li{
        display: inline-block;
        font-size: 13px;
        color: #808080; /* Tags font color */
    }

    .tags li:before{
        content: "#";
        margin-right: 2px;
        color: #080808; /* # font color */
    }

    /* YOU MAY EDIT THE COLORS TO MATCH YOUR THEME. BUT PLEASE DO NOT REMOVE THE CREDITS */
    #credit{
        position: fixed;
        bottom: 0;
        right: 0;
    }

    #credit a{
        text-decoration: none;
        display: block;
        background: #292929;
        text-align: center;
        color: white;
        padding: 5px 15px 3px 20px;
    }

    #credit a:hover{
        letter-spacing: 3px;
    }

</style>
</head>

<body>
    <div id="full">
        <div id="leftb">
            <div class="left-title"><span>Title</span></div> <!-- CHANGE THE TITLE HERE -->

            <div class="left-box">
                You can put info about yourself here.
            </div>

            <div class="left-links"> <!-- ADD AS MANY LINKS AS YOU WANT -->
                <a href="/">Back</a>
                <a href="/">Link</a>
            </div>
        </div>

        <div id="rightb">

            <!-- COPY FROM HERE TO CREATE A NEW FIC -->
            <div id="ficbox">
                <div class="fic-top">
                    <span class="title">Fic Name</span>

                    <div class="subtitle">
                    <span class="sub">Words: 0</span>
                    <span class="sub">Rate: G</span>
                    <span class="sub">Complete</span>
                    <span class="sub">By: Who</span>
                    </div>

                </div>

                <div class="fic-cont">

                    <!-- Add/Remove links to the fic -->
                    <div class="fic-links">
                        <a href="url to the fic">AO3</a>
                        <a href="url to the fic">Tumblr</a>
                        <a href="url to the fic">FanFiction</a>
                        <a href="url to the fic">Wattpad</a>
                    </div>
                    <!-- End of links -->

                    <!-- Add/Remove summary here -->
                    <div class="summary">
                        Summary.<br><br>
                        Yup.
                    </div>
                    <!-- End of Summary -->

                    <!-- Add/Remove the tags here -->
                        <div class="tags">
                            <li>A tag</li>
                            <li>A tag</li>
                            <li>A tag</li>
                        </div>
                    <!-- End of Tags -->
                    </div>

                </div>
            <!-- END OF NEW FIC -->


        </div>
    </div>

<div id="credit"><a href="http://noiretblanc-themes.tumblr.com/">Theme</a></div>

    <script>
    $( '.tags' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

    $( '.summary' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

    $( '.left-box' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});


    </script>
</body>
</html>