More user navbar styling! Also need to investigate browser reflow

app/styles/common/top_nav.sass

@@ -1,5 +1,39 @@
 @import "../bootstrap/variables"
 
+// This is still very blocky. Browser reflows? Investigate why.
+//.open > .dropdown-menu
+  animation-name: fadeAnimation
+  animation-duration: .7s
+  animation-iteration-count: 1
+  animation-timing-function: ease
+  animation-fill-mode: forwards
+  -webkit-animation-name: fadeAnimation
+  -webkit-animation-duration: 2s
+  -webkit-animation-iteration-count: 1
+  -webkit-animation-timing-function: ease
+  -webkit-animation-fill-mode: backwards
+  -moz-animation-name: fadeAnimation
+  -moz-animation-duration: .7s
+  -moz-animation-iteration-count: 1
+  -moz-animation-timing-function: ease
+  -moz-animation-fill-mode: forwards
+
+@keyframes fadeAnimation
+  from
+    opacity: 0
+    top: 120%
+  to
+    opacity: 1
+    top: 100%
+
+@-webkit-keyframes fadeAnimation
+  from
+    opacity: 0
+    top: 120%
+  to
+    opacity: 1
+    top: 100%
+
 #top-nav
   a.navbar-brand
     padding: 4px 20px 0px 20px
@@ -32,24 +66,28 @@
       left: auto
       width: 280px
       padding: 0px
+      border-radius: 0px
+      font-family: Bangers
 
       li.user-dropdown-header
         background: #E4CF8C
-        height: 175px
+        height: 160px
         padding: 10px
         text-align: center
         color: black
-        border: #32281E 1px solid
+        border-bottom: #32281E 1px solid
-
         img
           border: #e3be7a 8px solid
-        p
+          height: 98px // Includes the border
+        h3
           margin-top: 10px
           text-shadow: 2px 2px 3px white
+          color: #31281E
 
       li.user-dropdown-body
         color: black
         padding: 15px
+        font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
 
         &:after
           display: table
@@ -59,6 +97,7 @@
       li.user-dropdown-footer
         padding: 10px
         margin-left: 0px
+        font-size: 14px
 
         &:after
           display: table

app/templates/base.jade

@@ -58,7 +58,7 @@ body
               ul.dropdown-menu(role="menu")
                 li.user-dropdown-header
                   img.img-circle(src="#{me.getPhotoURL()}" alt="")
-                  p=me.get('name') || 'Anoner'
+                  h3=me.get('name') || 'Anoner'
                 li.user-dropdown-body
                   .col-xs-4.text-center
                     a(href="#") Profile