cooktwice list view

list_view

<section>
	<nav>
		<ul>
			<li><%= link_to "Index", '#' %></li>
			<li class = "active_item"><%= "Recipes" %></li>
			<li><%= link_to "Menu", '#' %></li>
		</ul>
	</nav>	

	<div id="view_list">
		<li class = "recipe">
			<a href="#" class="star"></a>
			<h2><%= "Chile-Braised Pork Shoulder Tacos" %></h2>
			<p class="details"><%= "Added by you, shared with 3 others, edited by 2 others, 5 comments" %></p>
			<p class="source"><%= "Bon Apetit" %></p>
			<div class="actions">
				<a href="#" class="share">Share</a>
			</div>
		</li>



----------
CSS





.container {
	position: relative;
	width: 1000px;
}

body {
	background: #f2f2f2;
}

header {
	padding-bottom: 70px;
	background: #fff;
	border-bottom: solid #999 1px;
}

header img {
	position: absolute;
	left: 20px;
	top: 10px;
}

section {
	border-top: solid #999 1px;
	font-size: 120%;
	padding: 20px;
	background: #fff;
}

#view_index {}

#view_list {
	position: absolute;
	display: block;
	left: 30px;
	right: 250px;
	top: 130px;
}

#view_list li {
	list-style-type: none;
	display: block;
}

#view_list li.recipe {
	position: relative;
	margin-bottom: 10px;
	padding: 10px 10px;
	padding-left: 50px;
	background: #eae8e8;
}

#view_list li a.star {
	display: block;
	position: absolute;
	left: 10px;
	width: 26px;
	height: 25px;
	background-image: url('/images/star.png');
}

#view_list li a.unstar {
	display: block;
	position: absolute;
	left: 10px;
	width: 26px;
	height: 25px;
	background-image: url('/images/unstar.png');
}

h2 {
	position: relative;
	font-size: 150%;
	margin-bottom: 0px;
}

p {
	margin-top: 0px;
	margin-bottom: 0px;
}

p.details {
	position: relative;
	color: #999;
}

p.source {
	position: relative;
	color: #000;
}

.actions {
	position: absolute;
	right: 20px;
	top: 10px;
	padding: 0 0.7em;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: solid #999 1px;
	color: #999;
}