P4 -- index

<!DOCTYPE html>
<head>

<!-- PAGE 4 BY CRIMICAL; INDEX

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

-->

<title>{Title} &mdash; tv index</title>

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

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

<style type="text/css">

/* basic */

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

a{
    text-decoration:none;
    color:#222;
    -webkit-transition:0.7s ease-in-out;
}

a:hover{ color:#333; }

u{ border-bottom:1px solid; text-decoration:none; }

#side{
    position:fixed;
    width:220px;
    margin:150px 0 0 150px;
}

h1{
	text-align:center;
	text-transform:uppercase;
	border-bottom:1px solid #333;
	padding-bottom:10px;
}

.progress{ margin:45px auto 0; width:200px; text-transform:uppercase; }

.progress u{ font-size:9px; }

.progress table{ height:10px; margin-bottom:10px; }

.progress table td:nth-of-type(1){
    background:#367987;
}

.progress table td:nth-of-type(2){
    background:#f2f2f2;
}

#index{
	width:450px;
	margin:80px 0 100px 550px;
}

h2{
	font-weight:normal;
	margin-bottom:20px;
	margin-top:80px;
	text-transform:uppercase;
	text-align:center;
}

h2:nth-of-type(1){ margin-top:50px; }

table.month{ width:450px; }

table.month tr{
	margin-bottom:2px;
	border-bottom:1px solid #f2f2f2;
}

table.month tr:nth-of-type(1){
    font-weight:bold;
    text-transform:uppercase;
}

table.month td:nth-of-type(1){
	width:100px;
	text-align:right;
	background:#f7f7f7;
	padding:3px 10px 3px 0;
}

table.month td:nth-of-type(2){
	width:125px;
	text-align:left;
	padding:3px 0 3px 10px;
}

table.month td:nth-of-type(3){
    width:225px;
    text-align:left;
}

table.month img{
    display:inline-block;
    margin-top:-1px;
    margin-left:5px;
}

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

.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>

    <p style="text-align:left; margin:0"><a style="font-size:9px; padding:3px 0 0 5px; opacity:.6; text-transform:uppercase;" href="/">home</a></p>


<div id="side">         <!-- sidebar -->
    <h1>tv index</h1>

<div class="progress">


    <p><u> currently watching </u></p>

    show
                        <!-- progress table -->
    <table>
        <tr title="1 episode of 12">
            <td width="16px"> </td>
            <td width="184px"> </td>
        </tr>
    </table>


    <p><u> airing </u></p>

    show (day of week and/or station)<br>
    show (day of week and/or station)


    <p style="margin-top:10px"><u> on hiatus </u></p>

    RETURN DATE &ndash; show<br>
    RETURN DATE &ndash; show

</div>
</div>

<div id="index">

<!-- beginning first month -->

<h2> january </h2>

    <table class="month">
        <tr> <!-- header line, do not delete -->
            <td> day </td>
            <td> series </td>
            <td> </td>
        </tr>

        <tr>
            <td> 01 </td> <!-- day -->
            <td> Example </td> <!-- show -->
            <td> 1.01 Pilot </td> <!-- episode title -->
        </tr>
        <tr>
            <td> 02 </td> <!-- day -->
            <td> Example </td> <!-- show -->
            <td> 1.01 Pilot </td> <!-- episode title -->
        </tr>
        <tr>
            <td> 03 </td>
            <td> Example <br>
                 Example </td>
            <td> 1.01 Pilot <br>
                 1.02 Second </td>
        </tr>
    </table>

<!-- end first month -->

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