P3.1 -- valley

<!DOCTYPE html>
<head>

<!-- PAGE 3 BY CRIMICAL; VALLEY

    DO NOT CLAIM AS YOUR OWN, DO NOT REMOVE CREDIT
    thank you for using my theme :)

-->

<title>characters &mdash; {Title}</title>

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

<script src="//use.edgefonts.net/yeseva-one;vidaloka;averia-serif-libre:n4,i4,n7.js"></script>

<style type="text/css">

/* basic */

::-webkit-scrollbar-thumb{
    background-color:#333;
    border:7px solid #fff;
    height:auto;
}

::-webkit-scrollbar{
    height:auto;
    width:15px;
    background-color:#333;
    border:8px solid #fff;
}

body{
    margin:0px;
    padding:0px;
    background-color:white;
    color:#222;
    font-family:arial;
    font-size:10px;
    line-height:160%;
    text-align:center;
}

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

/* main */

#m{
    width:85%;
    margin:120px auto 100px;
}

.s{
    text-transform:uppercase;
    font-size:7px;
    letter-spacing:1px;
    margin-top:-20px;
    margin-bottom:80px;
}

h1{
    font-family:'vidaloka';
    font-weight:normal;
    font-size:35px;
    margin-bottom:60px;
}

h1 span{ border-bottom:1px solid; }

.i{
    width:230px;
    height:140px;
    overflow:hidden;
    padding:15px;
    margin:20px;
    border:1px solid #f9f9f9;
    display:inline-block;
}

.i img{
    width:230px;
    height:140px;
}

.i .d{
    position:absolute;
    width:230px;
    height:140px;
    overflow:hidden;
    background:#222;
    color:white;
    opacity:0;
    -webkit-transition:0.9s ease-in-out;
    z-index:99;
}

.i:hover .d{ opacity:1; }

.i .d h2{ /* characters */
    font-family:'vidaloka';
    font-weight:normal;
    font-size:20px;
    margin-top:45px;
}

.i .d h4{ /* relationships */
    font-family:'vidaloka';
    font-weight:normal;
    font-size:10px;
    letter-spacing:1px;
    margin-top:53px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.i .d h2 span{ border-bottom:1px solid; padding:0 2px 6px; }
.i .d h3 span{ border-top:1px solid; padding:10px 0 0; }

.i .d h4 span{ border-bottom:1px solid; padding:0 2px 6px; }
.i .d h5 span{ border-top:1px solid; padding:9px 0 0; }

.i .d h3, .i .d h5{
    font-weight:normal;
    font-size:7px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.credit{
    position:fixed;
    bottom:20px;
    right:10px;
}

.credit a{
    border:1px solid #f4f4f4;
    padding:5px;
    height:10px;
    width:10px;
    text-transform:uppercase;
    font-size:8px;
    font-family:arial;
    color:gray;
}

</style>
</head>

<body>

<div class="credit">
    <a href="http://crimicalthemes.tumblr.com/">cr</a>
</div>

<div style="margin:6px 0 0 10px; text-align:left; text-transform:uppercase; letter-spacing:1px; font-size:7px">
    <a href="/" style="color:#333; opacity:0.5">back</a>
</div>


<div id="m">

    <h1><span>characters</span></h1>

<!-- character item -->
<div class="i"> <a href="/tagged/TAG">
        <div class="d">
            <h2><span> name </span></h2>
            <h3> tag </h3>
        </div>
    <img src="http://i.imgur.com/sZ4AeYI.gif" />
</a> </div>
<!-- character item END -->

<!-- character item (with two lines for a tag) -->
<div class="i"> <a href="/tagged/TAG">
        <div class="d">
            <h2 style="margin-top:40px"><span> name </span></h2>
            <h3>tag line 1<br>
            tag line 2</h3>
        </div>
    <img src="http://i.imgur.com/ZDjjILo.gif" />
</a> </div>
<!-- character item (2) END -->

</div>


<!-- delete this part if you don't want to include relationships on this page -->
<div id="m">

    <h1><span>relationships</span></h1>

<!-- relationship item -->
<div class="i"> <a href="/tagged/TAG">
        <div class="d">
            <h4><span> pairing </span></h4>
            <h5> tag </h5>
        </div>
    <img src="http://i.imgur.com/NeW75bn.gif" />
</a> </div>
<!-- relationship item END -->

<!-- relationship item (with two lines for a tag) -->
<div class="i"> <a href="/tagged/TAG">
        <div class="d">
            <h4 style="margin-top:45px"><span> pairing </span></h4>
            <h5>tag line 1<br>
            tag line 2</h5>
        </div>
    <img src="http://i.imgur.com/S9FtOCZ.gif" />
</a> </div>
<!-- relationship item (2) END -->

</div>
<!-- until here -->

</body></html>