help page ported to bootstrap

app/assets/stylesheets/help.css.scss

@@ -1,3 +1,9 @@
+h2.help_header {
+  border-bottom: 1px solid black;
+  padding-bottom: 5px;
+  margin-bottom: 15px;
+}
+
 ul#help_nav {
   display: inline;
   padding: 0;
@@ -23,13 +29,18 @@ ul#help_nav {
     font-weight: 700;
   }
   ul {
+    list-style: none;
     padding: 0;
+    margin: 0;
     li {
       font-weight: 700;
       margin-bottom: 10px;
       a {
         font-weight: normal;
       }
+      .section-selected {
+        font-weight: bold;
+      }
     }
   }
 }
@@ -55,7 +66,10 @@ ul#help_nav {
     background-color: rgb(242, 242, 242);
     margin-bottom: 10px;
     @include border-radius(4px);
-    a.toggle { text-decoration: none; }
+    a.toggle {
+      text-decoration: none; 
+      color: black;
+    }
     h4 { 
       text-align: left;
       font-weight: 700;
@@ -74,7 +88,7 @@ ul#help_nav {
       }
     }
     .answer {
-      @include border-bottom-radius(4px);
+      @include border-radius(0px, 0px, 4px, 4px);
       background-color: white;
       padding: 10px 20px;
     }

app/assets/stylesheets/new-templates.css.scss

@@ -42,3 +42,6 @@
 
 /* notifications */
 @import 'notifications';
+
+/* help */
+@import 'help';

app/assets/stylesheets/new_styles/_base.scss

@@ -146,6 +146,11 @@ $bring-dark-accent-forward-color: #DDD;
   }
 }
 
+/* padder helper to push content below the header, to be removed when porting to bootstrap is complete */
+.bootstrap_header_padding {
+  padding-top: 40px;
+}
+
 /* responsive */
 @media (max-width: 767px) {
   body {

app/assets/templates/help_tpl.jst.hbs

@@ -1,8 +1,14 @@
 
-<div id="section_header">
+<div class="bootstrap_header_padding"></div>
+
+<div class="container">
+
+  <div id="section_header">
     <h2 class="help_header">Help</h2>
-</div>
-<div class="span-5">
+  </div>
+
+  <div class="row-fluid">
+    <div class="span3">
       <div id='faq_nav'>
         <ul>
           <li>
@@ -63,7 +69,9 @@
           </li>
         </ul>
       </div>
-</div>
+    </div>
 
-<div class="span-19 last" id=faq>
+    <div class="span9 last" id=faq>
+    </div>
+  </div>
 </div>

app/controllers/help_controller.rb

@@ -1,2 +1,4 @@
 class HelpController < ApplicationController
+	before_filter -> { @css_framework = :bootstrap }
+	layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }
 end