styled course list page

cms/static/sass/_dashboard.scss

@@ -0,0 +1,44 @@
+.class-list {
+	margin-top: 20px;
+	border-radius: 3px;
+	border: 1px solid $darkGrey;	
+	background: #fff;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+
+	li {
+		border-bottom: 1px solid $mediumGrey;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	a {
+		padding: 20px 25px;
+		line-height: 1.3;
+		
+		&:hover {
+			background: $paleYellow;
+		}
+	}
+
+	.class-name {
+		display: block;
+		font-size: 22px;
+		font-weight: 300;
+	}
+
+	.detail {
+		font-size: 14px;
+		font-weight: 400;
+		margin-right: 20px;
+		color: #3c3c3c;
+	}
+}
+
+.new-course-button {
+	@include grey-button;
+	display: block;
+	padding: 20px;
+	text-align: center;
+}

cms/static/sass/base-style.scss

@@ -9,6 +9,7 @@
 @import "cms_mixins";
 @import "base";
 @import "header";
+@import "dashboard";
 @import "courseware";
 @import "subsection";
 @import "unit";

cms/templates/index.html

@@ -3,18 +3,28 @@
 <%block name="title">Courses</%block>
 
 <%block name="content">
-<h1>edX Course Management</h1>
 
-<section class="main-container">
-  <header>
-    <h1>Courses</h1>
-    <a href="#" class="wip">+</a>
-  </header>
+	<div class="main-wrapper">
+		<div class="inner-wrapper">
+			<h1>My Courses</h1>				
+			<article class="my-classes">
+				<a href="#" class="new-course-button wip-box"><span class="plus-icon"></span> New Course</a>
+				<ul class="class-list">
+					%for course, url in courses:
+			    <li>
+						<a href="${url}" class="class-name">
+							<span class="class-name">${course}</span>
+							<!--
+							<span class="detail">Started: 9/21/2012</span>
+							<span class="detail">Ends: 10/21/2012</span>
+							-->
+						</a>
+					</li>
+			    %endfor
+				</ul>
+			</article>
+		</div>
+	</div>
 
-  <ol>
-    %for course, url in courses:
-    <li><a href="${url}">${course}</a></li>
-    %endfor
-  </ol>
 </section>
 </%block>