Made links in sidebar all in p>

static/css/marketing-ie.css

-/* line 1, sass/marketing-ie.scss */
 body {
   margin: 0;
   padding: 0; }
 
-/* line 6, sass/marketing-ie.scss */
 .wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
   margin: 0;
   overflow: hidden; }
 
-/* line 12, sass/marketing-ie.scss */
 div#enroll form {
   display: none; }

static/css/marketing.css

@@ -5,18 +5,7 @@ Last Updated: 2010-09-17
 Author: Richard Clark - http://richclarkdesign.com 
 Twitter: @rich_clark
 */
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code,
-del, dfn, em, img, ins, kbd, q, samp,
-small, strong, var,
-b, i,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -28,8 +17,7 @@ time, mark, audio, video {
 body {
   line-height: 1; }
 
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block; }
 
 nav ul {
@@ -38,8 +26,7 @@ nav ul {
 blockquote, q {
   quotes: none; }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none; }
 
@@ -140,26 +127,26 @@ input, select {
 
 .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
   padding-left: 34.171%; }
-  @media screen and (max-width: 940px) {
+@media screen and (max-width: 940px) {
   .subpage > div, section.copyright > div, section.tos > div, section.privacy-policy > div, section.honor-code > div {
     padding-left: 0; } }
-  .subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
+.subpage > div p, section.copyright > div p, section.tos > div p, section.privacy-policy > div p, section.honor-code > div p {
   margin-bottom: 25.888px;
   line-height: 25.888px; }
-  .subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
+.subpage > div h1, section.copyright > div h1, section.tos > div h1, section.privacy-policy > div h1, section.honor-code > div h1 {
   margin-bottom: 12.944px; }
-  .subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
+.subpage > div h2, section.copyright > div h2, section.tos > div h2, section.privacy-policy > div h2, section.honor-code > div h2 {
   font: 18px "Open Sans", Helvetica, Arial, sans-serif;
   color: #000;
   margin-bottom: 12.944px; }
-  .subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
+.subpage > div ul, section.copyright > div ul, section.tos > div ul, section.privacy-policy > div ul, section.honor-code > div ul {
   list-style: disc outside none; }
-    .subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
+.subpage > div ul li, section.copyright > div ul li, section.tos > div ul li, section.privacy-policy > div ul li, section.honor-code > div ul li {
   list-style: disc outside none;
   line-height: 25.888px; }
-  .subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
+.subpage > div dl, section.copyright > div dl, section.tos > div dl, section.privacy-policy > div dl, section.honor-code > div dl {
   margin-bottom: 25.888px; }
-    .subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
+.subpage > div dl dd, section.copyright > div dl dd, section.tos > div dl dd, section.privacy-policy > div dl dd, section.honor-code > div dl dd {
   margin-bottom: 12.944px; }
 
 .clearfix:after, .subpage:after, section.copyright:after, section.tos:after, section.privacy-policy:after, section.honor-code:after, header.announcement div section:after, footer:after, section.index-content:after, section.index-content section:after, section.index-content section.about section:after, div.leanModal_box#enroll ol:after {
@@ -213,10 +200,10 @@ input, select {
   -moz-box-shadow: inset 0 1px 0 #b83d3d;
   box-shadow: inset 0 1px 0 #b83d3d;
   -webkit-font-smoothing: antialiased; }
-  .button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
+.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
   background-color: #732626;
   border-color: #4d1919; }
-  .button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
+.button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
   font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
   font-style: italic; }
 
@@ -231,21 +218,21 @@ body {
   background-color: #fff;
   color: #444;
   font: 16px Georgia, serif; }
-  body :focus {
+body :focus {
   outline-color: #ccc; }
-  body h1 {
+body h1 {
   font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-  body li {
+body li {
   margin-bottom: 25.888px; }
-  body em {
+body em {
   font-style: italic; }
-  body a {
+body a {
   color: #993333;
   font-style: italic;
   text-decoration: none; }
-    body a:hover, body a:focus {
+body a:hover, body a:focus {
   color: #732626; }
-  body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
+body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
   -webkit-box-shadow: 0 -1px 0 white;
   -moz-box-shadow: 0 -1px 0 white;
   box-shadow: 0 -1px 0 white;
@@ -260,7 +247,7 @@ body {
   font: 16px Georgia, serif;
   padding: 4px;
   width: 100%; }
-    body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
+body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
   border-color: #993333; }
 
 header.announcement {
@@ -273,36 +260,36 @@ header.announcement {
   border-bottom: 1px solid #000;
   color: #fff;
   -webkit-font-smoothing: antialiased; }
-  header.announcement.home {
+header.announcement.home {
   background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); }
-    @media screen and (min-width: 1200px) {
+@media screen and (min-width: 1200px) {
   header.announcement.home {
     background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); } }
-    header.announcement.home div {
+header.announcement.home div {
   padding: 258.88px 25.888px 77.664px; }
-      @media screen and (max-width:780px) {
+@media screen and (max-width:780px) {
   header.announcement.home div {
     padding: 64.72px 25.888px 51.776px; } }
-      header.announcement.home div nav h1 {
+header.announcement.home div nav h1 {
   margin-right: 0; }
-      header.announcement.home div nav a.login {
+header.announcement.home div nav a.login {
   display: none; }
-  header.announcement.course {
+header.announcement.course {
   background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); }
-    @media screen and (min-width: 1200px) {
+@media screen and (min-width: 1200px) {
   header.announcement.course {
     background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); } }
-    @media screen and (max-width: 1199px) and (min-width: 700px) {
+@media screen and (max-width: 1199px) and (min-width: 700px) {
   header.announcement.course {
     background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); } }
-    header.announcement.course div {
+header.announcement.course div {
   padding: 103.552px 25.888px 51.776px; }
-      @media screen and (max-width:780px) {
+@media screen and (max-width:780px) {
   header.announcement.course div {
     padding: 64.72px 25.888px 51.776px; } }
-  header.announcement div {
+header.announcement div {
   position: relative; }
-    header.announcement div nav {
+header.announcement div nav {
   position: absolute;
   top: 0;
   right: 25.888px;
@@ -314,7 +301,7 @@ header.announcement {
   background: #333;
   background: rgba(0, 0, 0, 0.7);
   padding: 12.944px 25.888px; }
-      header.announcement div nav h1 {
+header.announcement div nav h1 {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -323,21 +310,21 @@ header.announcement {
   *display: inline;
   *vertical-align: auto;
   margin-right: 12.944px; }
-        header.announcement div nav h1 a {
+header.announcement div nav h1 a {
   font: italic 800 18px "Open Sans", Helvetica, Arial, sans-serif;
   color: #fff;
   text-decoration: none; }
-          header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
+header.announcement div nav h1 a:hover, header.announcement div nav h1 a:focus {
   color: #999; }
-      header.announcement div nav a.login {
+header.announcement div nav a.login {
   text-decoration: none;
   color: #fff;
   font-size: 12px;
   font-style: normal;
   font-family: "Open Sans", Helvetica, Arial, sans-serif; }
-        header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
+header.announcement div nav a.login:hover, header.announcement div nav a.login:focus {
   color: #999; }
-    header.announcement div section {
+header.announcement div section {
   background: #993333;
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -348,10 +335,10 @@ header.announcement {
   *vertical-align: auto;
   margin-left: 34.171%;
   padding: 25.888px 38.832px; }
-      @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   header.announcement div section {
     margin-left: 0; } }
-      header.announcement div section h1 {
+header.announcement div section h1 {
   font-family: "Open Sans";
   font-size: 30px;
   font-weight: 800;
@@ -364,7 +351,7 @@ header.announcement {
   *vertical-align: auto;
   line-height: 1.2em;
   margin: 0 25.888px 0 0; }
-      header.announcement div section h2 {
+header.announcement div section h2 {
   font-family: "Open Sans";
   font-size: 24px;
   font-weight: 400;
@@ -376,18 +363,18 @@ header.announcement {
   *display: inline;
   *vertical-align: auto;
   line-height: 1.2em; }
-      header.announcement div section.course section {
+header.announcement div section.course section {
   float: left;
   margin-left: 0;
   margin-right: 3.817%;
   padding: 0;
   width: 48.092%; }
-        @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   header.announcement div section.course section {
     float: none;
     width: 100%;
     margin-right: 0; } }
-        header.announcement div section.course section a {
+header.announcement div section.course section a {
   background-color: #4d1919;
   border-color: #260d0d;
   -webkit-box-shadow: inset 0 1px 0 #732626, 0 1px 0 #ac3939;
@@ -396,29 +383,29 @@ header.announcement {
   display: block;
   padding: 12.944px 25.888px;
   text-align: center; }
-          header.announcement div section.course section a:hover {
+header.announcement div section.course section a:hover {
   background-color: #732626;
   border-color: #4d1919; }
-      header.announcement div section.course p {
+header.announcement div section.course p {
   width: 48.092%;
   line-height: 25.888px;
   float: left; }
-        @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   header.announcement div section.course p {
     float: none;
     width: 100%; } }
 
 footer {
   padding-top: 0; }
-  footer div.footer-wrapper {
+footer div.footer-wrapper {
   border-top: 1px solid #e5e5e5;
   padding: 25.888px 0;
   background: url("/static/images/marketing/mit-logo.png") right center no-repeat; }
-    @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   footer div.footer-wrapper {
     background-position: left bottom;
     padding-bottom: 77.664px; } }
-    footer div.footer-wrapper a {
+footer div.footer-wrapper a {
   color: #888;
   text-decoration: none;
   -webkit-transition-property: all;
@@ -441,9 +428,9 @@ footer {
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0; }
-      footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
+footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
   color: #666; }
-    footer div.footer-wrapper p {
+footer div.footer-wrapper p {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -452,7 +439,7 @@ footer {
   *display: inline;
   *vertical-align: auto;
   margin-right: 25.888px; }
-    footer div.footer-wrapper ul {
+footer div.footer-wrapper ul {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -460,10 +447,10 @@ footer {
   zoom: 1;
   *display: inline;
   *vertical-align: auto; }
-      @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   footer div.footer-wrapper ul {
     margin-top: 25.888px; } }
-      footer div.footer-wrapper ul li {
+footer div.footer-wrapper ul li {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -472,56 +459,56 @@ footer {
   *display: inline;
   *vertical-align: auto;
   margin-bottom: 0; }
-        footer div.footer-wrapper ul li:after {
+footer div.footer-wrapper ul li:after {
   content: ' |';
   display: inline;
   color: #ccc; }
-        footer div.footer-wrapper ul li:last-child:after {
+footer div.footer-wrapper ul li:last-child:after {
   content: none; }
-      footer div.footer-wrapper ul.social {
+footer div.footer-wrapper ul.social {
   float: right;
   margin-right: 60px;
   position: relative;
   top: -5px; }
-        @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   footer div.footer-wrapper ul.social {
     float: none; } }
-        footer div.footer-wrapper ul.social li {
+footer div.footer-wrapper ul.social li {
   float: left;
   margin-right: 12.944px; }
-          footer div.footer-wrapper ul.social li:after {
+footer div.footer-wrapper ul.social li:after {
   content: none;
   display: none; }
-          footer div.footer-wrapper ul.social li a {
+footer div.footer-wrapper ul.social li a {
   display: block;
   height: 29px;
   width: 28px;
   text-indent: -9999px; }
-            footer div.footer-wrapper ul.social li a:hover {
+footer div.footer-wrapper ul.social li a:hover {
   opacity: .8; }
-          footer div.footer-wrapper ul.social li.twitter a {
+footer div.footer-wrapper ul.social li.twitter a {
   background: url("/static/images/marketing/twitter.png") 0 0 no-repeat; }
-          footer div.footer-wrapper ul.social li.facebook a {
+footer div.footer-wrapper ul.social li.facebook a {
   background: url("/static/images/marketing/facebook.png") 0 0 no-repeat; }
-          footer div.footer-wrapper ul.social li.linkedin a {
+footer div.footer-wrapper ul.social li.linkedin a {
   background: url("/static/images/marketing/linkedin.png") 0 0 no-repeat; }
 
 section.index-content section {
   float: left; }
-  @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section {
     float: none;
     width: auto;
     margin-right: 0; } }
-  section.index-content section h1 {
+section.index-content section h1 {
   font-size: 800 24px "Open Sans";
   margin-bottom: 25.888px; }
-  section.index-content section p {
+section.index-content section p {
   line-height: 25.888px;
   margin-bottom: 25.888px; }
-  section.index-content section ul {
+section.index-content section ul {
   margin: 0; }
-  section.index-content section.about {
+section.index-content section.about {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -529,71 +516,71 @@ section.index-content section {
   margin-right: 2.513%;
   padding-right: 1.256%;
   width: 65.829%; }
-    @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about {
     width: 100%;
     border-right: 0;
     margin-right: 0;
     padding-right: 0; } }
-    section.index-content section.about section {
+section.index-content section.about section {
   margin-bottom: 25.888px; }
-      section.index-content section.about section p {
+section.index-content section.about section p {
   width: 48.092%;
   float: left; }
-        @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section p {
     float: none;
     width: auto; } }
-        section.index-content section.about section p:nth-child(odd) {
+section.index-content section.about section p:nth-child(odd) {
   margin-right: 3.817%; }
-          @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section p:nth-child(odd) {
     margin-right: 0; } }
-      section.index-content section.about section.intro section {
+section.index-content section.about section.intro section {
   margin-bottom: 0; }
-        section.index-content section.about section.intro section.intro-text {
+section.index-content section.about section.intro section.intro-text {
   margin-right: 3.817%;
   width: 48.092%; }
-          @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section.intro section.intro-text {
     margin-right: 0;
     width: auto; } }
-          section.index-content section.about section.intro section.intro-text p {
+section.index-content section.about section.intro section.intro-text p {
   margin-right: 0;
   width: auto;
   float: none; }
-        section.index-content section.about section.intro section.intro-video {
+section.index-content section.about section.intro section.intro-video {
   width: 48.092%; }
-          @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section.intro section.intro-video {
     width: auto; } }
-          section.index-content section.about section.intro section.intro-video a {
+section.index-content section.about section.intro section.intro-video a {
   display: block;
   width: 100%; }
-            section.index-content section.about section.intro section.intro-video a img {
+section.index-content section.about section.intro section.intro-video a img {
   width: 100%; }
-            section.index-content section.about section.intro section.intro-video a span {
+section.index-content section.about section.intro section.intro-video a span {
   display: none; }
-      section.index-content section.about section.features {
+section.index-content section.about section.features {
   border-top: 1px solid #E5E5E5;
   padding-top: 25.888px;
   margin-bottom: 0; }
-        section.index-content section.about section.features h2 {
+section.index-content section.about section.features h2 {
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #888;
   margin-bottom: 25.888px;
   font-weight: normal;
   font-size: 14px; }
-          section.index-content section.about section.features h2 span {
+section.index-content section.about section.features h2 span {
   text-transform: none; }
-        section.index-content section.about section.features p {
+section.index-content section.about section.features p {
   width: auto;
   clear: both; }
-          section.index-content section.about section.features p strong {
+section.index-content section.about section.features p strong {
   font-family: "Open sans";
   font-weight: 800; }
-          section.index-content section.about section.features p a {
+section.index-content section.about section.features p a {
   color: #993333;
   text-decoration: none;
   -webkit-transition-property: all;
@@ -616,41 +603,41 @@ section.index-content section {
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0; }
-            section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
+section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
   color: #602020; }
-        section.index-content section.about section.features ul {
+section.index-content section.about section.features ul {
   margin-bottom: 0; }
-          section.index-content section.about section.features ul li {
+section.index-content section.about section.features ul li {
   line-height: 25.888px;
   width: 48.092%;
   float: left;
   margin-bottom: 12.944px; }
-            @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section.features ul li {
     width: auto;
     float: none; } }
-            section.index-content section.about section.features ul li:nth-child(odd) {
+section.index-content section.about section.features ul li:nth-child(odd) {
   margin-right: 3.817%; }
-              @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about section.features ul li:nth-child(odd) {
     margin-right: 0; } }
-  section.index-content section.course, section.index-content section.staff {
+section.index-content section.course, section.index-content section.staff {
   width: 31.658%; }
-    @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.course, section.index-content section.staff {
     width: auto; } }
-    section.index-content section.course h1, section.index-content section.staff h1 {
+section.index-content section.course h1, section.index-content section.staff h1 {
   color: #888;
   font: normal 16px Georgia, serif;
   font-size: 14px;
   letter-spacing: 1px;
   margin-bottom: 25.888px;
   text-transform: uppercase; }
-    section.index-content section.course h2, section.index-content section.staff h2 {
+section.index-content section.course h2, section.index-content section.staff h2 {
   font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
-    section.index-content section.course h3, section.index-content section.staff h3 {
+section.index-content section.course h3, section.index-content section.staff h3 {
   font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
-    section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
+section.index-content section.course a span.arrow, section.index-content section.staff a span.arrow {
   color: rgba(255, 255, 255, 0.6);
   font-style: normal;
   display: -moz-inline-box;
@@ -661,12 +648,12 @@ section.index-content section {
   *display: inline;
   *vertical-align: auto;
   padding-left: 10px; }
-    section.index-content section.course ul, section.index-content section.staff ul {
+section.index-content section.course ul, section.index-content section.staff ul {
   list-style: none; }
-      section.index-content section.course ul li img, section.index-content section.staff ul li img {
+section.index-content section.course ul li img, section.index-content section.staff ul li img {
   float: left;
   margin-right: 12.944px; }
-  section.index-content section.course h2 {
+section.index-content section.course h2 {
   padding-top: 129.44px;
   background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat;
   -webkit-background-size: contain;
@@ -674,22 +661,22 @@ section.index-content section {
   -ms-background-size: contain;
   -o-background-size: contain;
   background-size: contain; }
-    @media screen and (max-width: 998px) and (min-width: 781px) {
+@media screen and (max-width: 998px) and (min-width: 781px) {
   section.index-content section.course h2 {
     background: url("/static/images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
-    @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.course h2 {
     padding-top: 129.44px;
     background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat; } }
-    @media screen and (min-width: 500px) and (max-width: 781px) {
+@media screen and (min-width: 500px) and (max-width: 781px) {
   section.index-content section.course h2 {
     padding-top: 207.104px; } }
-  section.index-content section.course div.announcement p.announcement-button a {
+section.index-content section.course div.announcement p.announcement-button a {
   margin-top: 0; }
-  section.index-content section.course div.announcement img {
+section.index-content section.course div.announcement img {
   max-width: 100%;
   margin-bottom: 25.888px; }
-  section.index-content section.about-course {
+section.index-content section.about-course {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -697,43 +684,43 @@ section.index-content section {
   margin-right: 2.513%;
   padding-right: 1.256%;
   width: 65.829%; }
-    @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about-course {
     width: auto;
     border-right: 0;
     margin-right: 0;
     padding-right: 0; } }
-    section.index-content section.about-course section {
+section.index-content section.about-course section {
   width: 48.092%; }
-      @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about-course section {
     width: auto; } }
-      section.index-content section.about-course section.about-info {
+section.index-content section.about-course section.about-info {
   margin-right: 3.817%; }
-        @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about-course section.about-info {
     margin-right: 0; } }
-      section.index-content section.about-course section.requirements {
+section.index-content section.about-course section.requirements {
   clear: both;
   width: 100%;
   border-top: 1px solid #E5E5E5;
   padding-top: 25.888px;
   margin-bottom: 0; }
-        section.index-content section.about-course section.requirements p {
+section.index-content section.about-course section.requirements p {
   float: left;
   width: 48.092%;
   margin-right: 3.817%; }
-          @media screen and (max-width: 780px) {
+@media screen and (max-width: 780px) {
   section.index-content section.about-course section.requirements p {
     margin-right: 0;
     float: none;
     width: auto; } }
-          section.index-content section.about-course section.requirements p:nth-child(odd) {
+section.index-content section.about-course section.requirements p:nth-child(odd) {
   margin-right: 0; }
-      section.index-content section.about-course section.cta {
+section.index-content section.about-course section.cta {
   width: 100%;
   text-align: center; }
-        section.index-content section.about-course section.cta a.enroll {
+section.index-content section.about-course section.cta a.enroll {
   padding: 12.944px 51.776px;
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -744,7 +731,7 @@ section.index-content section {
   *vertical-align: auto;
   text-align: center;
   font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
-  section.index-content section.staff h1 {
+section.index-content section.staff h1 {
   margin-top: 25.888px; }
 
 #lean_overlay {
@@ -774,7 +761,7 @@ div.leanModal_box {
   display: none;
   padding: 51.776px;
   text-align: left; }
-  div.leanModal_box a.modal_close {
+div.leanModal_box a.modal_close {
   color: #aaa;
   display: block;
   font-style: normal;
@@ -784,26 +771,26 @@ div.leanModal_box {
   top: 12px;
   width: 14px;
   z-index: 2; }
-    div.leanModal_box a.modal_close:hover {
+div.leanModal_box a.modal_close:hover {
   text-decoration: none;
   color: #993333; }
-  div.leanModal_box h1 {
+div.leanModal_box h1 {
   border-bottom: 1px solid #eee;
   font-size: 24px;
   margin-bottom: 25.888px;
   margin-top: 0;
   padding-bottom: 25.888px;
   text-align: left; }
-  div.leanModal_box#enroll {
+div.leanModal_box#enroll {
   max-width: 600px; }
-    div.leanModal_box#enroll ol {
+div.leanModal_box#enroll ol {
   padding-top: 25.888px; }
-      div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
+div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
   width: auto;
   float: none; }
-      div.leanModal_box#enroll ol li div.tip {
+div.leanModal_box#enroll ol li div.tip {
   display: none; }
-      div.leanModal_box#enroll ol li:hover div.tip {
+div.leanModal_box#enroll ol li:hover div.tip {
   background: #333;
   color: #fff;
   display: block;
@@ -814,9 +801,9 @@ div.leanModal_box {
   position: absolute;
   -webkit-font-smoothing: antialiased;
   width: 500px; }
-  div.leanModal_box form {
+div.leanModal_box form {
   text-align: left; }
-    div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
+div.leanModal_box form div#enroll_error, div.leanModal_box form div#login_error, div.leanModal_box form div#pwd_error {
   background-color: #333333;
   border: black;
   color: #fff;
@@ -827,42 +814,42 @@ div.leanModal_box {
   padding: 12.944px;
   text-shadow: 0 1px 0 #1a1a1a;
   -webkit-font-smoothing: antialiased; }
-      div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
+div.leanModal_box form div#enroll_error:empty, div.leanModal_box form div#login_error:empty, div.leanModal_box form div#pwd_error:empty {
   padding: 0; }
-    div.leanModal_box form ol {
+div.leanModal_box form ol {
   list-style: none;
   margin-bottom: 25.888px; }
-      div.leanModal_box form ol li {
+div.leanModal_box form ol li {
   margin-bottom: 12.944px; }
-        div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
+div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
   border-top: 1px solid #eee;
   clear: both;
   float: none;
   padding-top: 25.888px;
   width: auto; }
-        div.leanModal_box form ol li.honor-code {
+div.leanModal_box form ol li.honor-code {
   width: auto;
   float: none; }
-        div.leanModal_box form ol li label {
+div.leanModal_box form ol li label {
   display: block;
   font-weight: bold; }
-        div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
+div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-        div.leanModal_box form ol li input[type="checkbox"] {
+div.leanModal_box form ol li input[type="checkbox"] {
   margin-right: 10px; }
-        div.leanModal_box form ol li ul {
+div.leanModal_box form ol li ul {
   list-style: disc outside none;
   margin: 12.944px 0 25.888px 25.888px; }
-          div.leanModal_box form ol li ul li {
+div.leanModal_box form ol li ul li {
   color: #666;
   float: none;
   font-size: 14px;
   list-style: disc outside none;
   margin-bottom: 12.944px; }
-    div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
+div.leanModal_box form input[type="button"], div.leanModal_box form input[type="submit"] {
   border: 1px solid #691b1b;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -888,7 +875,7 @@ div.leanModal_box {
   -webkit-background-clip: padding-box;
   font-size: 18px;
   padding: 12.944px; }
-      div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
+div.leanModal_box form input[type="button"]:hover, div.leanModal_box form input[type="submit"]:hover {
   -webkit-box-shadow: inset 0 1px 0 0 #a44141;
   -moz-box-shadow: inset 0 1px 0 0 #a44141;
   box-shadow: inset 0 1px 0 0 #a44141;
@@ -900,7 +887,7 @@ div.leanModal_box {
   background-image: -ms-linear-gradient(top, #823030, #691c1c);
   background-image: -o-linear-gradient(top, #823030, #691c1c);
   background-image: linear-gradient(top, #823030, #691c1c); }
-      div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
+div.leanModal_box form input[type="button"]:active, div.leanModal_box form input[type="submit"]:active {
   border: 1px solid #691b1b;
   -webkit-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
   -moz-box-shadow: inset 0 0 8px 4px #5c1919, inset 0 0 8px 4px #5c1919, 0 1px 1px 0 #eeeeee;
@@ -908,24 +895,24 @@ div.leanModal_box {
 
 div#login {
   min-width: 400px; }
-  div#login header {
+div#login header {
   border-bottom: 1px solid #ddd;
   margin-bottom: 25.888px;
   padding-bottom: 25.888px; }
-    div#login header h1 {
+div#login header h1 {
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 6.472px; }
-  div#login ol li {
+div#login ol li {
   width: auto;
   float: none; }
 
 div.lost-password {
   text-align: left;
   margin-top: 25.888px; }
-  div.lost-password a {
+div.lost-password a {
   color: #999; }
-    div.lost-password a:hover {
+div.lost-password a:hover {
   color: #444; }
 
 div#pwd_reset p {
@@ -933,85 +920,25 @@ div#pwd_reset p {
 div#pwd_reset input[type="email"] {
   margin-bottom: 25.888px; }
 
-div#apply_name_change,
-div#change_email,
-div#unenroll,
-div#deactivate-account {
+div#apply_name_change, div#change_email, div#unenroll, div#deactivate-account {
   max-width: 700px; }
-  div#apply_name_change ul,
-  div#change_email ul,
-  div#unenroll ul,
-  div#deactivate-account ul {
+div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-account ul {
   list-style: none; }
-    div#apply_name_change ul li,
-    div#change_email ul li,
-    div#unenroll ul li,
-    div#deactivate-account ul li {
+div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
   margin-bottom: 12.944px; }
-      div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"],
-      div#change_email ul li textarea,
-      div#change_email ul li input[type="email"],
-      div#change_email ul li input[type="number"],
-      div#change_email ul li input[type="password"],
-      div#change_email ul li input[type="search"],
-      div#change_email ul li input[type="tel"],
-      div#change_email ul li input[type="text"],
-      div#change_email ul li input[type="url"],
-      div#change_email ul li input[type="color"],
-      div#change_email ul li input[type="date"],
-      div#change_email ul li input[type="datetime"],
-      div#change_email ul li input[type="datetime-local"],
-      div#change_email ul li input[type="month"],
-      div#change_email ul li input[type="time"],
-      div#change_email ul li input[type="week"],
-      div#unenroll ul li textarea,
-      div#unenroll ul li input[type="email"],
-      div#unenroll ul li input[type="number"],
-      div#unenroll ul li input[type="password"],
-      div#unenroll ul li input[type="search"],
-      div#unenroll ul li input[type="tel"],
-      div#unenroll ul li input[type="text"],
-      div#unenroll ul li input[type="url"],
-      div#unenroll ul li input[type="color"],
-      div#unenroll ul li input[type="date"],
-      div#unenroll ul li input[type="datetime"],
-      div#unenroll ul li input[type="datetime-local"],
-      div#unenroll ul li input[type="month"],
-      div#unenroll ul li input[type="time"],
-      div#unenroll ul li input[type="week"],
-      div#deactivate-account ul li textarea,
-      div#deactivate-account ul li input[type="email"],
-      div#deactivate-account ul li input[type="number"],
-      div#deactivate-account ul li input[type="password"],
-      div#deactivate-account ul li input[type="search"],
-      div#deactivate-account ul li input[type="tel"],
-      div#deactivate-account ul li input[type="text"],
-      div#deactivate-account ul li input[type="url"],
-      div#deactivate-account ul li input[type="color"],
-      div#deactivate-account ul li input[type="date"],
-      div#deactivate-account ul li input[type="datetime"],
-      div#deactivate-account ul li input[type="datetime-local"],
-      div#deactivate-account ul li input[type="month"],
-      div#deactivate-account ul li input[type="time"],
-      div#deactivate-account ul li input[type="week"] {
+div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
   display: block;
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
-      div#apply_name_change ul li textarea,
-      div#change_email ul li textarea,
-      div#unenroll ul li textarea,
-      div#deactivate-account ul li textarea {
+div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
   height: 60px; }
-      div#apply_name_change ul li input[type="submit"],
-      div#change_email ul li input[type="submit"],
-      div#unenroll ul li input[type="submit"],
-      div#deactivate-account ul li input[type="submit"] {
+div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {
   white-space: normal; }
 
 div#feedback_div form ol li {
   float: none;
   width: 100%; }
-  div#feedback_div form ol li textarea#feedback_message {
+div#feedback_div form ol li textarea#feedback_message {
   height: 100px; }

templates/accordion.html

@@ -9,11 +9,12 @@
       % for section in chapter['sections']:
         <li${' class="active"' if 'active' in section and section['active'] else ''}>
           <a href="${reverse('courseware_section', args=format_url_params([course_name, chapter['name'], section['name']]))}">
-            <p>${section['name']}</p>
-
-            <p class="subtitle">
+            <p>${section['name']}
+            <span class="subtitle">
               ${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
+            </span>
             </p>
+
           </a>
         % endfor
       </ul>

templates/sass/courseware/_sidebar.scss

@@ -47,7 +47,7 @@ section.course-index {
         &.active {
           font-weight: bold;
 
-          p.subtitle {
+          span.subtitle {
             font-weight: normal;
           }
 
@@ -80,8 +80,9 @@ section.course-index {
           p {
             margin-bottom: 0;
 
-            &.subtitle {
+            span.subtitle {
               color: #666;
+              display: block;
             }
           }
         }