From cd8051fb1436f98a719df12a28cde08c24e62b84 Mon Sep 17 00:00:00 2001
From: Galen Frechette <galen@thoughtbot.com>
Date: Thu, 21 Jun 2012 17:51:37 -0400
Subject: [PATCH] cleans up signed in users navigation

---
 lms/static/sass/_shared_header.scss | 275 ++++++++++-----------
 lms/static/sass/application.css     | 365 ++++++++++++++--------------
 lms/templates/navigation.html       |   8 +-
 3 files changed, 319 insertions(+), 329 deletions(-)

diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss
index 35a7881c37..1d1dde37d5 100644
--- a/lms/static/sass/_shared_header.scss
+++ b/lms/static/sass/_shared_header.scss
@@ -19,6 +19,26 @@ header.app {
     float: left;
     height: 100%;
     margin: 16px 15px 0px 0px;
+    position: relative;
+
+    img {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:hover {
+      &::before {
+        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
+        content: "";
+        display: block;
+        height: 90px;
+        left: -20px;
+        position: absolute;
+        top: -32px;
+        width: 90px;
+        z-index: 1;
+      }
+    }
   }
 
   .divider {
@@ -79,6 +99,8 @@ header.app {
       }
 
       li.primary {
+        position: relative;
+
         a {
           border: 1px solid transparent;
           @include border-radius(3px);
@@ -86,16 +108,16 @@ header.app {
           color: $base-font-color;
           display: block;
           font: normal 1.2rem/1.4rem $sans-serif;
-          height: 30px;
+          height: 38px;
           @include inline-block;
-          margin: 5px;
-          padding: 6px 8px;
+          margin: 1px 5px;
+          padding: 10px 8px;
           text-decoration: none;
           text-transform: uppercase;
           text-shadow: 0 1px rgba(255,255,255, 0.6);
           vertical-align: middle;
 
-          &:hover {
+          &:hover, &.active {
             @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
             border-color: rgb(200,200,200);
             @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
@@ -103,163 +125,126 @@ header.app {
         }
       }
     }
-  }
 
-  nav.user {
-    float: right;
+    &.user {
+      float: right;
 
-    ol {
-      font-size: 0em;
-
-      li {
-        border-right: 1px solid rgb(200,200,200);
-        @include inline-block;
-        margin-top: 10px;
-        padding: 0px 5px;
+      a.user-link {
+        padding: 9px 8px 11px 40px;
         position: relative;
-        vertical-align: bottom;
+        text-transform: none;
 
-        a {
-          @include border-radius(3px);
-          color: $lighter-base-font-color;
-          display: block;
-          font: normal italic 1.2rem/1.2rem $serif;
-          height: 15px;
-          padding: 10px;
-          text-decoration: none;
-          text-transform: lowercase;
-          text-shadow: 0 1px rgba(255,255,255, 0.4);
-
-          &:hover {
-            background: rgb(220,220,220);
-            color: $base-font-color;
-          }
-
-          &.active {
-            background: rgb(220,220,220);
-            color: $base-font-color;
-          }
-
-          &.options {
-            font: normal 1.2rem/1.2rem $sans-serif;
-            padding-right: 10px;
-            text-transform: none;
-          }
-
-          &.user-link {
-            font: normal 1.2rem/1.2rem $sans-serif;
-            padding: 10px 10px 10px 45px;
-            text-transform: none;
-
-            @media screen and (max-width: 768px) {
-              font-size: 0em;
-              padding: 10px 0px;
-              width: 38px;
-            }
-
-            .avatar {
-              background: rgb(220,220,220);
-              @include border-radius(3px);
-              border: 1px solid rgb(180,180,180);
-              @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-              height: 22px;
-              @include inline-block;
-              left: 15px;
-              overflow: hidden;
-              position: absolute;
-              top: 5px;
-              width: 22px;
-
-              &::after {
-                @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
-                content: "";
-                display: block;
-                height: 100%;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%;
-              }
-
-              img {
-                @include border-radius(4px);
-                display: block;
-                min-height: 100%;
-                min-width: 100%;
-                height: 100%;
-              }
-            }
-          }
+        @media screen and (max-width: 768px) {
+          font-size: 0em;
+          padding: 10px 0px;
+          width: 38px;
         }
 
-        ol.user-options {
-          @include border-radius(4px);
-          @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
-          border: 1px solid rgb(200,200,200);
+        .avatar {
           background: rgb(220,220,220);
-          display: none;
-          right: 4px;
-          padding: 5px 10px;
+          @include border-radius(3px);
+          border: 1px solid rgb(180,180,180);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          height: 22px;
+          @include inline-block;
+          left: 8px;
+          overflow: hidden;
           position: absolute;
-          top: 50px;
-          width: 170px;
-          z-index: 3;
+          top: 6px;
+          width: 22px;
 
-          &.expanded {
-            display: block;
-          }
-
-          &::before {
-            background: transparent;
-            border: {
-              top: 8px solid rgb(220,220,220);
-              right: 8px solid rgb(220,220,220);
-              bottom: 8px solid transparent;
-              left: 8px solid transparent;
-            }
-            @include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200));
+          &::after {
+            @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
             content: "";
             display: block;
-            height: 0px;
+            height: 100%;
             position: absolute;
-            @include transform(rotate(-45deg));
-            right: 10px;
-            top: -7px;
-            width: 0px;
+            right: 0px;
+            top: 0px;
+            width: 100%;
           }
 
-          li {
-            border: {
-              top: 1px solid rgb(200,200,200);
-              right: none;
-              bottom: none;
-              left: none;
-            }
-            margin: 0px;
-            padding: 0px;
+          img {
+            @include border-radius(4px);
+            display: block;
+            min-height: 100%;
+            min-width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      ol.user-options {
+        @include border-radius(4px);
+        @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
+        border: 1px solid rgb(0,0,0);
+        @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
+                                                          rgba(0,0,0, 0.7) 100%));
+        display: none;
+        right: 0px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 52px;
+        width: 150px;
+        z-index: 3;
+
+        &.expanded {
+          display: block;
+        }
+
+        &::before {
+          background: transparent;
+          border: {
+            top: 6px solid rgba(0,0,0, 1);
+            right: 6px solid rgba(0,0,0, 1);
+            bottom: 6px solid transparent;
+            left: 6px solid transparent;
+          }
+          @include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          @include transform(rotate(-45deg));
+          right: 12px;
+          top: -6px;
+          width: 0px;
+        }
+
+        li {
+          display: block;
+          border-top: 1px solid rgba(0,0,0, 0.4);
+          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
+
+          &:first-child {
+            border: none;
+            @include box-shadow(none);
+          }
+
+          > a {
+            @include box-sizing(border-box);
+            color: rgba(255,255,255, 0.9);
+            display: block;
+            font: normal italic 1.2rem/1.4rem $serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 3px 5px 4px;
+            text-shadow: none;
+            text-overflow: ellipsis;
+            text-transform: none;
+            @include transition(padding, 0.1s, linear);
+            white-space: nowrap;
             width: 100%;
 
-            &:first-child {
-              border: none;
-            }
-
-            a {
-              @include box-sizing(border-box);
-              display: block;
-              font: normal 1rem/1.2rem $sans-serif;
-              height: auto;
-              margin: 5px 0px;
-              overflow: hidden;
-              padding: 5px;
-              text-overflow: ellipsis;
-              @include transition(padding, 0.1s, linear);
-              white-space: nowrap;
-              width: 100%;
-
-              &:hover {
-                background: rgb(255,255,255);
-                padding: 5px 8px;
-              }
+            &:hover {
+              background: $blue;
+              @include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%,
+                                                                rgba($blue, 1) 100%));
+              border-color: rgba(0,0,0, 1);
+              @include box-shadow(none);
+              padding-left: 8px;
+              text-shadow: 0 -1px rgba(0,0,0, 0.2);
             }
           }
         }
diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css
index 8ad5d8f412..a2a9f379b1 100755
--- a/lms/static/sass/application.css
+++ b/lms/static/sass/application.css
@@ -1030,7 +1030,25 @@ header.app {
     display: block;
     float: left;
     height: 100%;
-    margin: 16px 15px 0px 0px; }
+    margin: 16px 15px 0px 0px;
+    position: relative; }
+    header.app a.logo img {
+      position: relative;
+      z-index: 2; }
+    header.app a.logo:hover::before {
+      background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      content: "";
+      display: block;
+      height: 90px;
+      left: -20px;
+      position: absolute;
+      top: -32px;
+      width: 90px;
+      z-index: 1; }
   header.app .divider {
     display: inline-block;
     vertical-align: baseline;
@@ -1044,7 +1062,7 @@ header.app {
     margin-top: 8px; }
     header.app nav.find-courses {
       float: left; }
-    header.app nav.guest, header.app nav.user {
+    header.app nav.guest {
       float: right; }
     header.app nav ol {
       font-size: 0em; }
@@ -1084,196 +1102,181 @@ header.app {
             margin-right: 0px; }
           header.app nav ol li.secondary a:hover {
             color: #3c3c3c; }
-      header.app nav ol li.primary a {
-        border: 1px solid transparent;
-        -webkit-border-radius: 3px;
-        -moz-border-radius: 3px;
-        border-radius: 3px;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        color: #3c3c3c;
-        display: block;
-        font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
-        height: 30px;
-        display: inline-block;
-        vertical-align: baseline;
-        zoom: 1;
-        *display: inline;
-        *vertical-align: auto;
-        margin: 5px;
-        padding: 6px 8px;
-        text-decoration: none;
-        text-transform: uppercase;
-        text-shadow: 0 1px rgba(255, 255, 255, 0.6);
-        vertical-align: middle; }
-        header.app nav ol li.primary a:hover {
-          background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-          background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-          background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-          background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-          background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-          border-color: #c8c8c8;
-          -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-          -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-          box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
-  header.app nav.user {
-    float: right; }
-    header.app nav.user ol {
-      font-size: 0em; }
-      header.app nav.user ol li {
-        border-right: 1px solid #c8c8c8;
-        display: inline-block;
-        vertical-align: baseline;
-        zoom: 1;
-        *display: inline;
-        *vertical-align: auto;
-        margin-top: 10px;
-        padding: 0px 5px;
-        position: relative;
-        vertical-align: bottom; }
-        header.app nav.user ol li a {
+      header.app nav ol li.primary {
+        position: relative; }
+        header.app nav ol li.primary a {
+          border: 1px solid transparent;
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
           border-radius: 3px;
-          color: #a0a0a0;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          color: #3c3c3c;
           display: block;
-          font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
-          height: 15px;
-          padding: 10px;
+          font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
+          height: 38px;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          margin: 1px 5px;
+          padding: 10px 8px;
           text-decoration: none;
-          text-transform: lowercase;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
-          header.app nav.user ol li a:hover {
-            background: #dcdcdc;
-            color: #3c3c3c; }
-          header.app nav.user ol li a.active {
-            background: #dcdcdc;
-            color: #3c3c3c; }
-          header.app nav.user ol li a.options {
-            font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-            padding-right: 10px;
-            text-transform: none; }
-          header.app nav.user ol li a.user-link {
-            font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-            padding: 10px 10px 10px 45px;
-            text-transform: none; }
-            @media screen and (max-width: 768px) {
-              header.app nav.user ol li a.user-link {
-                font-size: 0em;
-                padding: 10px 0px;
-                width: 38px; } }
-            header.app nav.user ol li a.user-link .avatar {
-              background: #dcdcdc;
-              -webkit-border-radius: 3px;
-              -moz-border-radius: 3px;
-              border-radius: 3px;
-              border: 1px solid #b4b4b4;
-              -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              height: 22px;
-              display: inline-block;
-              vertical-align: baseline;
-              zoom: 1;
-              *display: inline;
-              *vertical-align: auto;
-              left: 15px;
-              overflow: hidden;
-              position: absolute;
-              top: 5px;
-              width: 22px; }
-              header.app nav.user ol li a.user-link .avatar::after {
-                background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                content: "";
-                display: block;
-                height: 100%;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%; }
-              header.app nav.user ol li a.user-link .avatar img {
-                -webkit-border-radius: 4px;
-                -moz-border-radius: 4px;
-                border-radius: 4px;
-                display: block;
-                min-height: 100%;
-                min-width: 100%;
-                height: 100%; }
-        header.app nav.user ol li ol.user-options {
-          -webkit-border-radius: 4px;
-          -moz-border-radius: 4px;
-          border-radius: 4px;
-          -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          border: 1px solid #c8c8c8;
+          text-transform: uppercase;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+          vertical-align: middle; }
+          header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active {
+            background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+            background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+            background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+            background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+            background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
+            border-color: #c8c8c8;
+            -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+            -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+            box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
+    header.app nav.user {
+      float: right; }
+      header.app nav.user a.user-link {
+        padding: 9px 8px 11px 40px;
+        position: relative;
+        text-transform: none; }
+        @media screen and (max-width: 768px) {
+          header.app nav.user a.user-link {
+            font-size: 0em;
+            padding: 10px 0px;
+            width: 38px; } }
+        header.app nav.user a.user-link .avatar {
           background: #dcdcdc;
-          display: none;
-          right: 4px;
-          padding: 5px 10px;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          border: 1px solid #b4b4b4;
+          -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          height: 22px;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          left: 8px;
+          overflow: hidden;
           position: absolute;
-          top: 50px;
-          width: 170px;
-          z-index: 3; }
-          header.app nav.user ol li ol.user-options.expanded {
-            display: block; }
-          header.app nav.user ol li ol.user-options::before {
-            background: transparent;
-            border-top: 8px solid #dcdcdc;
-            border-right: 8px solid #dcdcdc;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid transparent;
-            -webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
-            -moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
-            box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
+          top: 6px;
+          width: 22px; }
+          header.app nav.user a.user-link .avatar::after {
+            background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
             content: "";
             display: block;
-            height: 0px;
+            height: 100%;
             position: absolute;
-            -webkit-transform: rotate(-45deg);
-            -moz-transform: rotate(-45deg);
-            -ms-transform: rotate(-45deg);
-            -o-transform: rotate(-45deg);
-            transform: rotate(-45deg);
-            right: 10px;
-            top: -7px;
-            width: 0px; }
-          header.app nav.user ol li ol.user-options li {
-            border-top: 1px solid #c8c8c8;
-            border-right: none;
-            border-bottom: none;
-            border-left: none;
-            margin: 0px;
-            padding: 0px;
+            right: 0px;
+            top: 0px;
             width: 100%; }
-            header.app nav.user ol li ol.user-options li:first-child {
-              border: none; }
-            header.app nav.user ol li ol.user-options li a {
-              -webkit-box-sizing: border-box;
-              -moz-box-sizing: border-box;
-              box-sizing: border-box;
-              display: block;
-              font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-              height: auto;
-              margin: 5px 0px;
-              overflow: hidden;
-              padding: 5px;
-              text-overflow: ellipsis;
-              -webkit-transition: padding, 0.1s, linear;
-              -moz-transition: padding, 0.1s, linear;
-              -ms-transition: padding, 0.1s, linear;
-              -o-transition: padding, 0.1s, linear;
-              transition: padding, 0.1s, linear;
-              white-space: nowrap;
-              width: 100%; }
-              header.app nav.user ol li ol.user-options li a:hover {
-                background: white;
-                padding: 5px 8px; }
+          header.app nav.user a.user-link .avatar img {
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            display: block;
+            min-height: 100%;
+            min-width: 100%;
+            height: 100%; }
+      header.app nav.user ol.user-options {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        border: 1px solid black;
+        background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        display: none;
+        right: 0px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 52px;
+        width: 150px;
+        z-index: 3; }
+        header.app nav.user ol.user-options.expanded {
+          display: block; }
+        header.app nav.user ol.user-options::before {
+          background: transparent;
+          border-top: 6px solid black;
+          border-right: 6px solid black;
+          border-bottom: 6px solid transparent;
+          border-left: 6px solid transparent;
+          -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          -moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          -o-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          right: 12px;
+          top: -6px;
+          width: 0px; }
+        header.app nav.user ol.user-options li {
+          display: block;
+          border-top: 1px solid rgba(0, 0, 0, 0.4);
+          -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+          -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+          box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
+          header.app nav.user ol.user-options li:first-child {
+            border: none;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            box-shadow: none; }
+          header.app nav.user ol.user-options li > a {
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            color: rgba(255, 255, 255, 0.9);
+            display: block;
+            font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 3px 5px 4px;
+            text-shadow: none;
+            text-overflow: ellipsis;
+            text-transform: none;
+            -webkit-transition: padding, 0.1s, linear;
+            -moz-transition: padding, 0.1s, linear;
+            -ms-transition: padding, 0.1s, linear;
+            -o-transition: padding, 0.1s, linear;
+            transition: padding, 0.1s, linear;
+            white-space: nowrap;
+            width: 100%; }
+            header.app nav.user ol.user-options li > a:hover {
+              background: #1d9dd9;
+              background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              border-color: black;
+              -webkit-box-shadow: none;
+              -moz-box-shadow: none;
+              box-shadow: none;
+              padding-left: 8px;
+              text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
 
 .courses {
   -webkit-box-sizing: border-box;
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index ff771edc3c..fc8ecc52c5 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -25,15 +25,17 @@
     %if user.is_authenticated():
     <nav class="user">
       <ol>
-        <li>
+        <li class="primary">
+          <div class="divider"></div>
           <a href="/dashboard" class="user-link">
             <span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
             Neil deGrasse Tyson
           </a>
-        </li>
-        <li>
+          <div class="divider"></div>
           <a href="#" class="options">&#9662</a>
+          <div class="divider"></div>
           <ol class="user-options">
+            <li><a href="#">Account Settings</a></li>
             <li><a href="#">Help</a></li>
             <li><a href="/logout">Log Out</a></li>
           </ol>