From 070fb5fb7438e6bb3acadecc60b63591745473a0 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 12 Apr 2012 16:23:16 -0400
Subject: [PATCH] Added new styles for tutorials

---
 static/css/application.css                 | 27 +++++++++++++++++----
 templates/sass/base/_base.scss             |  2 +-
 templates/sass/courseware/_courseware.scss | 28 ++++++++++++++++++++--
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/static/css/application.css b/static/css/application.css
index 43c352acf4..4a7c50adc3 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -466,8 +466,7 @@ a:visited {
 a:link, a:visited {
   text-decoration: none; }
 p a, li > a, span > a, a .inline {
-  border-bottom: 1px solid #bbb;
-  font-style: italic; }
+  border-bottom: 1px solid #bbb; }
 a:hover, a:focus {
   color: #000; }
 
@@ -2780,9 +2779,29 @@ div.course-wrapper section.course-content ol.vert-mod > li:last-child {
 div.course-wrapper section.course-content ol.vert-mod > li ul {
   list-style: disc outside none;
   padding-left: 1em; }
+div.course-wrapper section.course-content section.tutorials h2 {
+  padding-bottom: 5.663px;
+  margin-bottom: 22.652px;
+  border-bottom: 1px solid #e3e3e3; }
 div.course-wrapper section.course-content section.tutorials ul {
-  list-style: disc outside none;
-  margin-left: 22.652px; }
+  margin: 0;
+  zoom: 1; }
+div.course-wrapper section.course-content section.tutorials ul:before, div.course-wrapper section.course-content section.tutorials ul:after {
+  content: "";
+  display: table; }
+div.course-wrapper section.course-content section.tutorials ul:after {
+  clear: both; }
+div.course-wrapper section.course-content section.tutorials ul li {
+  width: 31.522%;
+  float: left;
+  margin-right: 2.717%;
+  margin-bottom: 22.652px; }
+div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n) {
+  margin-right: 0; }
+div.course-wrapper section.course-content section.tutorials ul li:nth-child(3n+1) {
+  clear: both; }
+div.course-wrapper section.course-content section.tutorials ul li a {
+  font-weight: bold; }
 div.course-wrapper section.course-content div.staff_info {
   zoom: 1;
   white-space: pre-wrap;
diff --git a/templates/sass/base/_base.scss b/templates/sass/base/_base.scss
index 3f985ea666..3832133f7e 100644
--- a/templates/sass/base/_base.scss
+++ b/templates/sass/base/_base.scss
@@ -63,7 +63,7 @@ a {
 
   p &, li > &, span > &, .inline {
     border-bottom: 1px solid #bbb;
-    font-style: italic;
+    // font-style: italic;
   }
 
   &:hover, &:focus {
diff --git a/templates/sass/courseware/_courseware.scss b/templates/sass/courseware/_courseware.scss
index 87ac0a6ea7..14a3c8bfba 100644
--- a/templates/sass/courseware/_courseware.scss
+++ b/templates/sass/courseware/_courseware.scss
@@ -183,9 +183,33 @@ div.course-wrapper {
     }
 
     section.tutorials {
+      h2 {
+        padding-bottom: lh(.25);
+        margin-bottom: lh();
+        border-bottom: 1px solid #e3e3e3;
+      }
       ul {
-        list-style: disc outside none;
-        margin-left: lh();
+        margin: 0;
+        @include clearfix();
+
+        li {
+          width: flex-grid(3, 9);
+          float: left;
+          margin-right: flex-gutter(9);
+          margin-bottom: lh();
+
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+
+          &:nth-child(3n+1) {
+            clear: both;
+          }
+
+          a {
+            font-weight: bold;
+          }
+        }
       }
     }