Added more styles for cloes and open sidebar

--HG--
branch : close_sidebar

courseware.html

@@ -27,13 +27,16 @@
 
 <section class="main-content">
   <div class="course-wrapper">
-    <div id="accordion">
+    <section class="course-index">
       <div id="open_close_accordion">
         <h2>Courseware Index</h2>
         <a href="#">close</a>
       </div>
+
+      <div id="accordion">
         ${accordion}
       </div>
+    </section>
 
     <section class="course-content">
       ${content}

sass/_courseware.scss

@@ -5,26 +5,35 @@ div.course-wrapper {
     list-style: none;
   }
 
-  div#accordion {
+  .tran {
+    @include transition( all, .2s, $ease-in-out-quad);
+  }
+
+  section.course-index {
     @extend .sidebar;
-    @include transition( all, .5s, $ease-in-out-quad);
+    position: relative;
+    @extend .tran;
 
     div#open_close_accordion {
       h2 {
-        display: inline-block;
+        padding: 0 lh();
       }
 
       a {
         text-indent: -9999px;
-        display: inline-block;
         background: red;
         width: 16px;
         height: 16px;
+        position: absolute;
+        padding: 8px;
+        top: 12px;
+        right: 0;
       }
     }
 
+    div#accordion {
+
       h3 {
-      @include transition( all, .5s, $ease-in-out-quad);
         overflow: hidden;
         margin: 0;
 
@@ -87,10 +96,11 @@ div.course-wrapper {
         }
       }
     }
+  }
+  
 
   section.course-content {
     @extend .content;
-    @include transition( all, .5s, $ease-in-out-quad);
 
     p {
       margin-bottom: lh();
@@ -219,34 +229,26 @@ div.course-wrapper {
   }
 
   &.closed {
-
-    div#accordion {
+    section.course-index {
       width: flex-grid(.5);
-
     div#open_close_accordion {
+
       h2 {
-          position: relative;
-          left: -100%;
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
       }
     }
 
-      h3, ul, li {
-        position: relative;
-        left: -100%;
+      div#accordion {
+        visibility: hidden;
+        width: 10px;
+        padding: 0;
       }
     }
 
     section.course-content {
       width: flex-grid(11.5) + flex-gutter();
     }
-
-    // div#accordion {
-    //   left: -(flex-grid(2.7));
-    // }
-
-    // section.course-content {
-    //   left: -(flex-grid(2.7));
-    //   position: relative;
-    // }
   }
 }