Added more style for main navigation

--HG--
branch : templates-ky-new-nav

navigation.html

@@ -7,7 +7,6 @@
     </hgroup>
 
     <nav class="${active_page}">
-
       <ul class="coursenav">
         <li class="courseware"><a href="/courseware">Courseware</a></li>
         <li class="info"><a href="/info">Course Info</a></li>

sass/layout/_header.scss

@@ -1,6 +1,6 @@
 div.header-wrapper {
   // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
-  @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
+ @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
   background: $mit-red;
   border-bottom: 1px solid #fff;
 
@@ -13,26 +13,38 @@ div.header-wrapper {
     hgroup {
       @extend .clearfix;
       float: left;
+      padding-top: 13px;
+      min-width: flex-grid(3);
 
       h1 {
-        border-right: 1px solid darken($mit-red, 5%);
-        color: darken($mit-red, 25%);
-        font-size: 20px;
-        font-weight: 800;
-        margin: 0 lh() 0 0;
-        padding: 17px lh() 14px 0;
-        text-shadow: 0 1px 0 lighten($mit-red, 10%);
-        line-height: lh();
         @include inline-block();
+        color: darken($mit-red, 25%);
+        font-size: 18px;
+        font-weight: 800;
+        line-height: lh();
+        margin: 0;
+        padding: 0 lh(.5) 0 0;
+        text-shadow: 0 1px 0 lighten($mit-red, 10%);
+
+        &:after {
+          color: darken($mit-red, 10%);
+          content: "•";
+          display: inline-block;
+          font-size: 10px;
+          letter-spacing: -2px;
+          padding-left: lh(.5);
+          text-shadow: 0;
+        }
       }
 
       h2 {
         @include inline-block();
         margin: 0;
-        padding: 19px lh() 9px 0;
-        line-height: lh();
+        font-size: 16px;
+        padding: 0 lh() 0px 0;
         text-transform: none;
         letter-spacing: 0;
+        text-shadow: 0 -1px 0 darken($mit-red, 10%);
         -webkit-font-smoothing: antialiased;
 
         a {
@@ -72,15 +84,15 @@ div.header-wrapper {
       margin: 0;
       padding: 0;
       text-shadow: 0 -1px 0 darken($mit-red, 10%);
-      max-height: 52px; //fix for firefox
       -webkit-font-smoothing: antialiased;
       background: #501016;
-      margin-top: 10px;
+      margin-top: 5px;
+          border-bottom: 1px solid darken(#501016, 10%);
       @include border-radius(3px 3px 0 0);
+      @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
 
       ul {
         @extend .clearfix;
-        display: inline-block;
         margin: 0;
 
         li {
@@ -91,7 +103,7 @@ div.header-wrapper {
           a {
             color: #fff;
             text-decoration: none;
-            padding: 12px lh() 6px;
+            padding: 10px lh() 8px;
             display: block;
             font-weight: bold;
 
@@ -103,6 +115,52 @@ div.header-wrapper {
           }
         }
       }
+
+      .active {
+        background: #F4F4F4;
+        color: #333;
+        text-shadow: 0 1px 0 #fff;
+        border: 1px solid darken(#501016, 10%);
+        border-bottom: 0;
+        @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
+        @include border-radius(3px 3px 0 0);
+      }
+
+      &.courseware {
+        li.courseware a {
+          @extend .active;
+        }
+      }
+
+      &.book {
+        li.book a {
+          @extend .active;
+        }
+      }
+
+      &.info {
+        li.info a {
+          @extend .active;
+        }
+      }
+
+      &.discussion {
+        li.discussion a {
+          @extend .active;
+        }
+      }
+
+      &.wiki {
+        li.wiki a {
+          @extend .active;
+        }
+      }
+
+      &.profile {
+        li.profile a {
+          @extend .active;
+        }
+      }
     }
   }
 }

sass/layout/_layout.scss

@@ -12,15 +12,15 @@ html {
       @extend .clearfix;
       @extend .wrapper;
       @include box-sizing(border-box);
-      @include border-radius(4px);
       overflow: hidden;
       background: #fff;
       border-bottom: 1px solid #bbb;
-
-      @media screen and (min-width: 1400px) {
-        // @include border-radius(3px);
+      margin-top: 3px;
         @include box-shadow(0 0 4px #dfdfdf);
         border: 1px solid #bbb;
+
+      @media screen and (min-width: 1400px) {
+        @include border-radius(4px);
         margin-top: lh(.5);
       }
     }