Acedia

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--


    ▪ ▪ ▪ ▪ ▪ ▪ { Pʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛs!

      ___  ___   ___   ___  ___    ___ __   __
     / __|/ _ \ |   \ | __|/ __|  | _ )\ \ / /
    | (__| (_) || |) || _| \__ \  | _ \ \ V /
     \___|\___/ |___/ |___||___/  |___/  |_|
     ___   ___   _  _  ___   ___   ___   ___
    | _ \ / _ \ | || || _ \ / _ \ | _ \ / _ \
    |  _/| (_) || __ ||   /| (_) ||   /| (_) |
    |_|   \___/ |_||_||_|_\ \___/ |_|_\ \___/


    ★ http://pohroro.tumblr.com } ▪ ▪ ▪ ▪ ▪ ▪


-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

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

<style type="text/css">

body {
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: #5e5e5e;
    font-family: Arial;
    background: #f9f9f9 url();
}

a {
    color: #5e5e5e;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover {
    color: #e1e1e1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#container {
    width: 500px;
    margin: 0 auto;
    margin-top: 60px;
}

#title {
    color: #5e5e5e;
    font-size: 100px;
    line-height: 100px;
    letter-spacing: -10px;
    font-family: Arial Black;
    font-weight: bold;
}

table {
    margin: 0 auto;
    width: 500px;
    padding: 10px 0px;
    height: auto;
    border-top: 1px solid #5e5e5e;
    border-bottom: 1px solid #5e5e5e;
}

#gradient {
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background: #5e5e5e;
    float: left;
}

#banner {
    width: 500px;
    height: 250px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    posiion: absolute;

}

#description {
    text-align: justify;
    font-size: 11px;
    padding-top: 10px;
}

#navigation {
    text-align: right;
    margin-top: 10px;
    margin-right: -10px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: Arial Black;
    letter-spacing: -1px;
}

#navigation a {
    padding: 0px 5px;
}

/* Credits to http://pohroro.tumblr.com */

#c
{
    width: 55px;
    height: 18px;
    font-family: Arial;
    font-size: 7px;
    text-transform: uppercase;
    text-align: center;
    bottom: 10px;
    right: 10px;
    letter-spacing: 1px;
    line-height: 4px;
    padding: 10px 3px;
    display: block;
    color: #ffffff;
    background: #000000;
    position: fixed;
}

#c a
{
    font-weight: bold;
    line-height: 17px;
    font-size: 15px;
    font-family: Libre Baskerville;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -1px;
    color: #606060;
}

</style>
</head>
<body>

<div id="container">

<div id="title">About.</div>

<table>
<tr>
<td>
<div id="gradient" style="opacity: 0.1;"></div>
<div id="gradient" style="opacity: 0.2;"></div>
<div id="gradient" style="opacity: 0.3;"></div>
<div id="gradient" style="opacity: 0.4;"></div>
<div id="gradient" style="opacity: 0.5;"></div>
<div id="gradient" style="opacity: 0.6;"></div>
<div id="gradient" style="opacity: 0.7;"></div>
<div id="gradient" style="opacity: 0.8;"></div>
<div id="gradient" style="opacity: 0.9;"></div>
<div id="gradient"></div>

<div style="float: left; line-height: 20px; font-size: 20px; text-transform: uppercase; padding-left: 10px; font-weight: bold;">Lorem ipsum.</div></td>
</tr>
<tr><td><img src="http://i.imgur.com/wAb8w9y.png" id="banner" /></td></tr>
<tr>
<td id="description">
<b>Bold</b>. <i>Italic.</i> <u>Underline.</u> <a href="/">Link.</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at ligula vitae erat eleifend lobortis. Nam justo nibh, tempus eget sem eu, cursus porta tellus. Sed sed lectus at turpis venenatis sollicitudin. Curabitur fringilla nibh nec metus accumsan accumsan. Suspendisse laoreet sem quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed accumsan nisi sit amet condimentum congue. Phasellus lectus dui, bibendum commodo magna quis, egestas blandit ipsum. Cras laoreet sed tellus et consectetur.

</td>
</tr>
<tr>
</table>

<div id="navigation">
<a href="/">Index</a>  ▪
<a href="/ask">Message</a>  ▪
<a href="/archive">Archive</a>
</div>

</div>

<div id="c">codes by<br /><a href="http://pohroro.tumblr.com">pohroro</a></div>

</body>
</html>