[Docs] Refactored stylesheets, improved sidebar navigation styles

doc-src/content/stylesheets/_examples.sass

@@ -21,8 +21,6 @@
       position: relative
       +columns(6,12)
       +slideshow
-      &#markup
-        +alpha(12)
       &#styles
         +omega(12)
     .code

doc-src/content/stylesheets/_shared.sass

@@ -0,0 +1,3 @@
+=gradient-bg(!color, !up=5, !down=!up)
+  background-color: #{!color}
+  +linear-gradient(color_stops(lighten(!color, !up), darken(!color,!down)))

doc-src/content/stylesheets/_sidebar.sass

@@ -0,0 +1,77 @@
+aside[role="sidebar"]
+  padding-bottom: 1em
+  +columns(3)
+  +alpha
+  +adjust-font-size-to(14px)
+  color: #999999
+  section, p
+    +leader(1,14px)
+    +trailer(1,14px)
+
+#local-nav ul
+  margin-top: 0em
+  border: 0
+  padding: 0
+  margin: 0
+  list-style: none
+  li
+    a
+      display: block
+  h2
+    margin: 0
+    text-align: left
+    a
+      +border-top-radius(3px)
+      +text-shadow(#fff)
+      padding: 5px 0
+      font-size: 1.3em
+      display: inline-block
+      border-bottom: 0
+      text-decoration: underline
+      &.selected
+        color: #222
+  ul
+    list-style: none
+    margin: 0 0 1em 0
+    padding: 0
+    li
+      list-style-image: none
+      list-style-type: none
+      margin-left: 0px
+      $c: #eaeaea
+      //mix(#e6e6e6, #005498, 50%)
+      &:last-child a
+        +border-bottom-radius(3px)
+      &:first-child a
+        +border-top-radius(3px)
+        border-top-color: #eaeaea
+        &:hover, &:focus, &.selected
+          border-top-color: #{$c} !important
+      a
+        //color: #444
+        border: 1px solid
+        border-color: #fff transparent #e7e7e7
+        padding: 3px 8px
+        background: #f5f5f5
+        &.selected
+          font-weight: bold
+        &:hover, &:focus, &.selected
+          +border-radius
+          +text-shadow(#{lighten($c, 15)}, 0, 1px)
+          background: #{$c}
+          +linear-gradient(color_stops(lighten($c, 1), $c))
+          position: relative
+          z-index: 2
+          padding: 3px 12px 3px 10px
+          margin: 0 -4px 0 -2px
+          color: #{desaturate(darken(#005498, 14), 20)}
+          border-color: #{lighten($c, 5)} #{$c} #{darken($c, 7)} #{$c}
+          &:after
+            color: #{darken($c, 22)} !important
+            //+text-shadow(darken($c, 22), 0, -1px)
+        &:after
+          content: "\25B8"
+          font-style: normal
+          float: right
+          color: #ddd
+          font-weight: normal