rec theme

<html>
<head>

<title>Fic Recs</title>
<meta charset="utf-8">

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>


<style type="text/css">

body {
	background-color: #ececec;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #5a5a5a;
	margin: 15px 0;
	}

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

#container {
	width: 800px;
	margin: 0 auto;
	background-color: #ffffff;
	padding-bottom: 5px;
	}

#header {
	width: 760px;
	font-size: 42px;
	text-align: center;
	padding: 10px 20px; 10px; 0;
	border-bottom: 0px dotted #ececec;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-family: 'Source Sans Pro', sans-serif;
	}

.navlinks {
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	text-transform: lowercase;
	}

.navlinks a {
	text-decoration: none;
	}

.navlinks a:hover {
	color: #888888;
	transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	}

#rec-list {
	width:750px;
	margin: auto;
	}

.search {
	border: solid 1px #5a5a5a;
	padding: 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: normal;
	}

.searchtip {
	font-size: 10px;
	padding-left: 5px;
	color: #929292;
	}

.btn {
	color: #5a5a5a;
	display: block;
	float: left;
	cursor: hand;
	background-color: #ececec;
	margin-right:5px;
	padding:5px 10px;
	border: solid 1px #5a5a5a;
	text-transform: uppercase;
	font-size: 10px;
	font-family: 'Montserrat', sans-serif;
	}

.btn:hover {
	background-color: #ffffff;
	transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	}

.feature {
	background-color: #ececec;
	padding: 5px;
	display: block;
	width: 740px;
	font-family: 'PT Sans Caption', sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	}

.feature a {
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	}

.feature a:hover {
	color: #888888;
	transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	}

.hiddentags {
	display:none;
	}

.list li {
	list-style:none;
	padding-bottom:5px;
	}

ul, li {
	margin-left: 0;
	padding-left: 0;
	}

p {
	padding-left: 5px;
	font-size: 12px;
	}

.filter {
	clear: both;
	}

.rating {
	display: none;
	}

</style>

</head>

<body>

<div id="container">

<div id="header">
	fic recs<br/>
	<span class="navlinks"><a href="/">home</a> &bull; <a href="http://hoechlbear.tumblr.com">&copy;</a></span>
</div>

<div id="rec-list">

    <input class="search" size="50" placeholder="Search keyword(s)"/><br />
    <span class="searchtip">(begin typing and results will automatically filter)</span><br/>

    <ul class="sort-by">
        <li class="sort btn" data-sort="wordcount">Sort by length</li>
        <li class="sort btn" data-sort="rating">Sort by rating</li>
        <li class="sort btn" data-sort="feature">Sort by name</li>
    </ul>

    <br /><br />

	<ul class="list">

		<li>

        	<span class="feature">
        	<a href="">Title</a> by author
        	</span>

           <span class="description">

			<p>
			<strong>Length:</strong> <span class="wordcount">123 words</span><br/>
        	<strong>Rating:</strong> PG-13<span class="rating">2</span><br/>
        	<strong>Tags:</strong> tags, go, here
        	</p>

			<p>Description</p>

			<div class="hiddentags">extra tags</div>

			</span>

       </li>


<!-- TEMPLATE: Copy the code below between the ***'s and paste below a </li>. Don't forget to change the number in <span class="rating"> to match your rating system. eg: 1 = G, 2 = PG-13, 3 = R, 4 = NC-17

***

		<li>

        	<span class="feature">
        	<a href="">Title</a> by author
        	</span>

           <span class="description">

			<p>
			<strong>Length:</strong> <span class="wordcount">123 words</span><br/>
        	<strong>Rating:</strong> PG-13<span class="rating">2</span><br/>
        	<strong>Tags:</strong> tags, go, here
        	</p>

			<p>Description</p>

			<div class="hiddentags">extra tags</div>

			</span>

       </li>

***

-->


    </ul>

</div>
</div>

 <script src="http://static.tumblr.com/7ughxi5/Yjrmqns1d/list.min.js"></script>

 <script type="text/javascript">


var options = {
    valueNames: [ 'feature', 'description', 'category', 'wordcount', 'rating' ]
};

var featureList = new List('rec-list', options);

    </script>

</body>
</html>