II: Fanfic Rec Page #3 v.2

<!DOCTYPE html>

<!---------------


        II: FANFICTION RECS #3 v.2 by DOMINICWRITES
        Rules and Regulations:
        #1: Please DO NOT commit thievery and steal this theme/page. I've  worked hard on in so I'd appreciate if you didn't.

        #2: DO NOT redistribute this theme/page,

        #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.


        ---------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>

    <meta charset="utf-8">

    <meta name="description" content="{MetaDescription}" />

    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}"/>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>


</head>
<style type="text/css">
body {
    margin: 0px;
    list-style: none;
    background-color: #000000;
    font-family: 'Roboto', sans-serif;
    background-image:url('http://static.tumblr.com/kamm2qy/d6An25har/stressed_linen.png');
    background-image:;
    font-weight: 300;
    font-size: 10px;
    color: #877b76;
}

a {
    text-decoration: none;
    color: #df0145;
}

b,i,strong,em {
    color: #df0145;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #df0145;
    height: 10px;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color: #df0145;
    height: 7px!important;
    }
::-webkit-scrollbar {
    background-color: #FFF;
    height: 10px;
    width: 12px;
    }

content {
    width: 100%;
    height: 100%;
    position: absolute;
}

#content {
    margin: auto;
    width: 1000px;
    height: auto;
    padding: 20px;
    background-color: #ddd;
    background-image:url('http://static.tumblr.com/kamm2qy/vWan25h41/graphy.png');
}

#header {
    width: auto;
    margin: auto;
    height: auto;
    padding: 10px 20px;
    background-color: #202020;
}

.title {
    font-family: 'Arial';
    font-size: 36px;
    font-style: italic;
    color: #ffffff;
    text-align: left;
    display: inline-block;
    font-weight: 700;
}

.title:first-letter {
    color: #df0145;
}

#header a {
    width: 10px;
    height: 10px;
    text-align: right;
    background-color: #0195ab;
    border-radius: 25px;
    color: #ffffff;
    padding: 10px;
    float: right;
    display: inline-block;
    margin-right: 10px;
    margin-top: 7px;
}

#header .four {
    background-color: #df0145;
}

#header .three {
    background-color: #877b76;
}

#header .two {
    background-color: #877b76;
}

#header .one {
    background-color: #877b76;
}


#library {
    width: auto;
    height: auto;
    margin-bottom: 100px;
    background-color: #dddddd;
    margin-top: 20px;
}

.box {
    width: 290px;
    height: 250px;
    background-color: #df0145;
    display: table;
    display: inline-block;
    margin: 20px;
    font-family: 'arial';
    font-size: 36px;
    color: #202020;
    text-align: center;
    vertical-align: middle;


}

.ftitle {
    width: 290px;
    height: 220px;
    background-color: #202020;
    color: #ddd;
    padding: 15px;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    display: table-cell;
    vertical-align: middle;
    background-image:url('http://static.tumblr.com/kamm2qy/d6An25har/stressed_linen.png');
}

.ftitle:first-letter {
    color: #df0145;
}

.info {
    position: absolute;
    width: 260px;
    height: 220px;
    background-color: #dddddd;
    opacity: 0;
    padding: 15px;
    display: table;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.info:hover {
    opacity: 1;
}

.subinfo {
    font-family: 'arial';
    font-size: 12px;
    font-weight: 700;
    color: #202020;
    vertical-align: middle;
    font-style: italic;
}

.rating {
    color: #df0145;
}

.description {
    display: table-cell;
    vertical-align: middle;
    font-size: 10px;
    font-family: 'arial';
    color: #202020;
    font-style: italic;
}

.subtitle {
    font-weight: 700;
    font-style: italic;
    color: #ddd;
    font-size: 14px;
}

.flink {
    display: block;
    margin-top: 7px;
}

.flink a {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 2px;
    padding: 3px 7px;
    background-color: #df0145;
    color: #ddd;
}

.sfm input {
    background-color: #f5f5f5;
    font-size: 8px;
    border: 0px;
    text-transform: uppercase;
    margin-top: 0px;
    color: #999;
    letter-spacing: 1px;
    padding: 4px 8px;
    font-family: calibri, helvetica, arial;
}

</style>
<body>

<content>
<div id="content">

    <div id="header">
    <div class="title">fanfiction library.</div>
    <a href="http://dominicwrites.tumblr.com" class="four"></a>
    <a href="#link3" class="three"></a>
    <a href="#link2" class="two"></a>
    <a href="#link1" class="one"></a>
    </div>

    <div id="library">

    <!-- this is where you insert your fanfic information -->

    <!-- START BOX CODE -->
    <div class="box">
    <div class="info">

        <div class="description">
        <div class="subinfo"><span class="rating">&#9733;&#9733;&#9733;&#9733;</span>&#9733; / 279,543 words / PG-13 / teen wolf / humor & romance</div>
        this is where you add in the summary, synopsis, or description of the fanfic into this section. you can add in whatever you want in here just as long as you don't go under the div for closing the description box. if you do that, then everything will look messed up and you'd have a hard time trying to figure out how to fix it. so please try not to do anything you don't know how to do. changing the colors should be easy for everyone. the description can be as long as you want but make sure it doesn't overflow the box because the box doesn't have an overflow code applied to it.
        <div class="flink"><a href="#">written by: author here</a></div>
        </div>

    </div>
    <div class="ftitle">baking my way into your heart.<br />
    <div class="subtitle">stiles stilinski // derek hale</div></div>
    </div>
    <!-- END BOX CODE -->

    <!-- START BOX CODE -->
    <div class="box">
    <div class="info">

        <div class="description">
        <div class="subinfo"><span class="rating">&#9733;&#9733;&#9733;&#9733;</span>&#9733; / 279,543 words / PG-13 / teen wolf / romance</div>
        this is where you add in the summary, synopsis, or description of the fanfic into this section. you can add in whatever you want in here just as long as you don't go under the div for closing the description box. if you do that, then everything will look messed up and you'd have a hard time trying to figure out how to fix it. so please try not to do anything you don't know how to do. changing the colors should be easy for everyone. the description can be as long as you want but make sure it doesn't overflow the box because the box doesn't have an overflow code applied to it.
        <div class="flink"><a href="#">written by: author here</a></div>
        </div>

    </div>
    <div class="ftitle">falsetto.<br />
    <div class="subtitle">scott mccall // allison argent</div></div>
    </div>
    <!-- END BOX CODE -->

    <!-- START BOX CODE -->
    <div class="box">
    <div class="info">

        <div class="description">
        <div class="subinfo"><span class="rating">&#9733;&#9733;&#9733;&#9733;</span>&#9733; / 279,543 words / PG-13 / teen wolf / suspense & drama</div>
        this is where you add in the summary, synopsis, or description of the fanfic into this section. you can add in whatever you want in here just as long as you don't go under the div for closing the description box. if you do that, then everything will look messed up and you'd have a hard time trying to figure out how to fix it. so please try not to do anything you don't know how to do. changing the colors should be easy for everyone. the description can be as long as you want but make sure it doesn't overflow the box because the box doesn't have an overflow code applied to it.
        <div class="flink"><a href="#">written by: author here</a></div>
        </div>

    </div>
    <div class="ftitle">crossfire.<br />
    <div class="subtitle">katniss everdeen // gale hawthorne</div></div>
    </div>
    <!-- END BOX CODE -->

    <!-- START BOX CODE -->
    <div class="box">
    <div class="info">

        <div class="description">
        <div class="subinfo"><span class="rating">&#9733;&#9733;&#9733;&#9733;</span>&#9733; / # or words / story rating / fandom / genre</div>
        this is where you add in the summary, synopsis, or description of the fanfic into this section. you can add in whatever you want in here just as long as you don't go under the div for closing the description box. if you do that, then everything will look messed up and you'd have a hard time trying to figure out how to fix it. so please try not to do anything you don't know how to do. changing the colors should be easy for everyone. the description can be as long as you want but make sure it doesn't overflow the box because the box doesn't have an overflow code applied to it.
        <div class="flink"><a href="#">written by: author here</a></div>
        </div>

    </div>
    <div class="ftitle">title.<br />
    <div class="subtitle">pairing</div></div>
    </div>
    <!-- END BOX CODE -->


    </div>

</div>
</content>


</div>

</body>
</html>