From c82e388ff2ef16b118e594ae0e05d09d7a47b8c9 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Fri, 26 Apr 2013 15:37:14 -0400
Subject: [PATCH] adding more variations and docs for menu, adding badge type

---
 docs/form.html               |   4 +-
 docs/menu.html               | 101 ++++-
 docs/stub.html               |   2 +-
 docs/stylesheets/example.css |   1 +
 src/ui/classic/menu.css      | 792 +++++++++++++++++++++++++++++++++++
 src/ui/flat/menu.css         | 193 ++++++---
 src/ui/shaded/menu.css       | 660 +++++++++++++++++++++++++----
 7 files changed, 1585 insertions(+), 168 deletions(-)
 create mode 100755 src/ui/classic/menu.css

diff --git a/docs/form.html b/docs/form.html
index 66010ce31..ce8a08ce8 100755
--- a/docs/form.html
+++ b/docs/form.html
@@ -105,8 +105,8 @@
         <div class="menu">
           <a href="button.html" class="item">1. Button</a>
           <a class="active item">2. Form</a>
-          <a class="item">3. Tables</a>
-          <a href="table.html" class="item">4. Columns</a>
+          <a href="table.html" class="item">3. Tables</a>
+          <a class="item">4. Columns</a>
           <a class="item">5. Elements</a>
           <a class="item">6. Tags</a>
           <a class="item">7. Items</a>
diff --git a/docs/menu.html b/docs/menu.html
index 1ec010153..f6a167fb4 100755
--- a/docs/menu.html
+++ b/docs/menu.html
@@ -13,8 +13,8 @@
   <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
   
-  <link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
   
   <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
@@ -107,10 +107,10 @@
         Semantic UI: Menu 
       </div>
       <div class="icon previous link item">
-        <a href="button.html"><i class="icon left-open"></i></a>
+        <a href="table.html"><i class="icon left-open"></i></a>
       </div>
       <div class="section dropdown item">
-        3 of 14
+        4 of 14
         <div class="menu">
           <a href="button.html" class="item">1. Button</a>
           <a href="form.html" class="item">2. Form</a>
@@ -119,7 +119,6 @@
           <a class="item">5. Elements</a>
           <a class="item">6. Tags</a>
           <a class="item">7. Items</a>
-          <a class="item">8. Panels</a>
         </div>
       </div>
       <div class="icon next link item">
@@ -149,17 +148,17 @@
 <div class="segment">
   <div class="container">
     <h1>Menu</h1>
-    <p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, or other item types.</p>
+    <p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.</p>
     <p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
   </div>
 </div>
 <div class="main container">
   
   <div class="peek">
-    <div class="ui large vertical pointing bottom attached panel">
-      <li class="active">Collection</li>
-      <li>Elements</li>
-      <li>Variations</li>
+    <div class="ui small vertical pointing menu">
+      <div class="active item">Collection</div>
+      <div class="item">Elements</div>
+      <div class="item">Variations</div>
     </div>
   </div>
   
@@ -179,7 +178,10 @@
         <a>Section 1</a>
       </div>
       <div class="item">
-        <a><i class="icon heart"></i></a>
+        <a>
+          <div class="badge">2</div>
+          <i class="icon mail"></i>
+        </a>
       </div>
       <div class="right menu">
         <div class="fitted borderless item">
@@ -200,19 +202,20 @@
   <div class="example">
     <h4>Vertical Menu</h4>
     <p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
+    <div class="ui warning block">A vertical menus width must typically be defined. An alternative is to use the fluid variation  in conjunction with ui grid.</div>
     <div class="ui vertical menu">
       <div class="item">
-        Site Title
+        <b>Site Title</b>
       </div>
-      <div class="active item">
-        <a>Current section</a>
+      <div class="item">
+        <p>This is a paragraph of expository text</p>
       </div>
       <div class="item">
         <a>Grouped Section</a>
         <div class="menu">
-          <a class="item">Subsection 1</a>
-          <a class="item">Subsection 1</a>
-          <a class="item">Subsection 1</a>
+          <a class="item">Current Section</a>
+          <a class="item">Subsection 2</a>
+          <a class="item">Subsection 3</a>
         </div>
       </div>
       <div class="dropdown item">
@@ -230,7 +233,7 @@
 
   <div class="example">
     <h4>Text Item</h4>
-    <p>Your menu may have a simple text item</p>
+    <p>A menu may have a simple text item</p>
     <div class="ui vertical menu">
       <div class="item">
         Text Item
@@ -239,7 +242,7 @@
   </div>
   <div class="example">
     <h4>Link Item</h4>
-    <p>Your menu may have either a real page link or an item that behaves as a link.</p>
+    <p>A menu may have either a real page link or an item that behaves as a link.</p>
     <div class="ui vertical menu">
       <a href="http://www.google.com" class="item">
         Visit Google
@@ -253,6 +256,10 @@
   <div class="example">
     <h4>Dropdown Item</h4>
     <p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
+    <div class="ui warning block">
+      <p>A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
+      <p>If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.</p>
+    </div>
     <div class="ui vertical menu">
       <div class="dropdown item">
         Dropdown <i class="icon right-dir"></i>
@@ -294,9 +301,33 @@
   
   
   <h2>States</h2>
+  
+  <div class="example">
+    <h4>Hover</h4>
+    <p>A menu may have other colors defined</p>
+    <div class="ui black menu">
+      <div class="item">
+        Site Title
+      </div>
+      <div class="active item">
+        <a>Current section</a>
+      </div>
+      <div class="right menu">
+        <div class="dropdown item">
+          Dropdown <i class="icon down-dir"></i>
+          <div class="menu">
+            <div class="item">Choice 1</div>
+            <div class="item">Choice 2</div>
+            <div class="item">Choice 3</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <h2>Variations</h2>
 
+  <h3>Menu</h3>
   <div class="example">
     <h4>Colors</h4>
     <p>A menu may have other colors defined</p>
@@ -350,14 +381,14 @@
       <div class="item">
         Site Title
       </div>
-      <div class="active item">
+      <div class="item">
         <a>Current section</a>
       </div>
       <div class="item">
         <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
-          <a class="item">Subsection 1</a>
+          <a class="active item">Subsection 1</a>
           <a class="item">Subsection 1</a>
         </div>
       </div>
@@ -484,6 +515,36 @@
     </div>
   </div>
   
+  <h3>Items</h3>
+  
+  <div class="example">
+    <h4>Fitted</h4>
+    <p>A menu item or menu might be fitted to remove element padding</p>
+    <div class="ui menu">
+      <div class="fitted item">
+        No vertical padding
+      </div>
+      <div class="tight item">
+        No padding at all
+      </div>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4>Borderless</h4>
+    <p>A menu item or menu might might have no dividers</p>
+    <div class="ui borderless menu">
+      <div class="item">
+        A
+      </div>
+      <div class="item">
+        B
+      </div>
+    </div>
+  </div>
+  
+  
+  
 </div>
 </body>
 
diff --git a/docs/stub.html b/docs/stub.html
index 5b04bdf5e..2c60422a3 100755
--- a/docs/stub.html
+++ b/docs/stub.html
@@ -13,8 +13,8 @@
   <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
+  <link rel="stylesheet" class="ui" href="../src/ui/flat/ZZZZZZZZZZZZZ.css" type="text/css" media="screen" />
   
-  <link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
   
   <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css
index 83822aad8..cfb625bf4 100755
--- a/docs/stylesheets/example.css
+++ b/docs/stylesheets/example.css
@@ -158,6 +158,7 @@ a:hover {
 }
 
 #example .sidr {
+  width: 275px;
   font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif;
   -webkit-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2);
diff --git a/src/ui/classic/menu.css b/src/ui/classic/menu.css
new file mode 100755
index 000000000..36f963fc8
--- /dev/null
+++ b/src/ui/classic/menu.css
@@ -0,0 +1,792 @@
+/*
+ * # Semantic Menu - Flat
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+/*--------------
+      Menu 
+---------------*/
+
+.ui.menu {
+  background-color: #FFFFFF;
+  font-size: 0px;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+}
+.ui.menu .item,
+.ui.menu .item > a {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  vertical-align: middle;
+  min-height: 1.25em;
+
+  -webkit-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+}
+
+/*--------------
+      Colors 
+---------------*/
+
+/* Text Color */
+.ui.menu .item,
+.ui.menu .item > a {
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.menu .item > a:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: rgba(0, 0, 0, 0.95);
+}
+.ui.menu .item .item,
+.ui.menu .item .item > a {
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.menu .item .item > a:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/*--------------
+      Items 
+---------------*/
+
+.ui.menu .item {
+  position: relative;
+  display: inline-block;
+
+  padding: 0.75em 0.95em;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  user-select: none;
+}
+
+.ui.menu .item > a {
+  display: block;
+  margin: -0.75em -0.95em;
+  padding: 0.75em 0.95em;
+}
+
+.ui.menu .menu.left,
+.ui.menu .item.left {
+  float: left;
+}
+.ui.menu .menu.right,
+.ui.menu .item.right {
+  float: right;
+}
+
+
+/*--------------
+    Borders 
+---------------*/
+
+.ui.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  right: 0px;
+  width: 1px;
+  height: 100%;
+  background-image: -webkit-linear-gradient(top, 
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+}
+.ui.menu .menu.right .item:before,
+.ui.menu .item.right:before {
+  right: auto;
+  left: 0px;
+}
+
+
+/*--------------
+      Icons 
+---------------*/
+
+.ui.menu .item > i:only-child,
+.ui.menu .item > a > i:only-child {
+  margin: 0em;
+}
+
+/*--------------
+    Dropdowns 
+---------------*/
+
+.ui.menu .dropdown.item {
+  box-shadow: none !important;
+  z-index: 10;
+}
+.ui.menu .dropdown.item .menu {
+  overflow: hidden;
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  background-color: #FFFFFF;
+  opacity: 0;
+
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+
+  -webkit-transition: opacity 0.2s ease-out;
+  -moz-transition: opacity 0.2s ease-out;
+  -o-transition: opacity 0.2s ease-out;
+  -ms-transition: opacity 0.2s ease-out;
+  transition: opacity 0.2s ease-out;
+  z-index: 11;
+}
+.ui.menu .dropdown.item .menu .item {
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 0.9em;
+  display: block;
+  color: rgba(0, 0, 0, 0.75);
+  
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ui.menu .dropdown.item .menu .item:first-child {
+  border-top: none;
+}
+.ui.menu .dropdown.item:last-child .menu {
+  left: auto;
+  right: 0px;
+}
+
+/*--------------
+  Notification 
+---------------*/
+.ui.menu .item .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+
+
+
+
+/*******************************
+             States
+*******************************/
+
+/*--------------
+      Hover 
+---------------*/
+
+/* Pseudo states cautiously used for convenience */
+.ui.menu .item.hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .dropdown.item .menu .item.hover,
+.ui.menu .dropdown.item .menu .item:hover {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Dropdown Display */
+.ui.menu .dropdown.item:hover .menu {
+  display: block;
+  overflow: visible;
+  min-width: 150px;
+  width: 100%;
+  height: auto;
+
+  opacity: 1;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: none;
+
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/*--------------
+      Down 
+---------------*/
+
+.ui.menu .item.down,
+.ui.menu .link.item:active,
+.ui.menu a.item:active,
+.ui.menu .item > a:active,
+.ui.menu .dropdown.item .menu .item:active {
+  background-color: rgba(0, 0, 0, 0.05);
+
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+/*--------------
+     Active 
+---------------*/
+
+.ui.menu .item.active {
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
+  background-color: rgba(0, 0, 0, 0.05);
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+.ui.vertical.menu .item.active {
+  border-top: none;
+  border-left: 0.2em solid #999999;
+  padding-top: 0.75em;
+  padding-left: 0.75em;
+}
+.ui.vertical.menu .item .menu .item.active {
+  padding-left: 1.35em;
+  padding-top: 0.5em;
+}
+
+/*--------------
+     Disabled 
+---------------*/
+
+.ui.menu .item.disabled,
+.ui.menu .item.disabled:hover,
+.ui.menu .item.disabled.hover {
+  cursor: default;
+  opacity: 0.3;
+  background-color: transparent;
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*--------------
+     Colors 
+---------------*/
+
+.ui.black.menu {
+  background-color: #333333;
+}
+.ui.black.menu .item,
+.ui.black.menu .item > a {
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item .item,
+.ui.black.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.black.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/*--- Border ---*/
+.ui.black.menu .item:before {
+  background-image: -webkit-linear-gradient(top, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+.ui.vertical.black.menu .item:before {
+  background-image: -webkit-linear-gradient(left, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+
+/*--- Hover ---*/
+
+.ui.black.menu .link.item.hover,
+.ui.black.menu .link.item:hover,
+.ui.black.menu .dropdown.item:hover,
+.ui.black.menu a.item:hover {
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, .15);
+}
+
+/*--- Down ---*/
+
+.ui.black.menu .item.down,
+.ui.black.menu .dropdown.item:active,
+.ui.black.menu .link.item:active,
+.ui.black.menu a.item:active {
+  background-color: rgba(255, 255, 255, .1);
+
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+}
+
+/*--- Active ---*/
+
+.ui.black.menu .item.active {
+  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.05);
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+
+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
+
+
+/*--------------
+  Transparent 
+---------------*/
+
+.ui.transparent.menu {
+  opacity: 0.95;
+}
+
+/*--------------
+    Vertical 
+---------------*/
+
+.ui.vertical.menu {
+  width: 200px;
+}
+.ui.vertical.menu .item {
+  display: block;
+  border-left: none;
+  border-right: none;
+}
+
+/*--- Border ---*/
+
+.ui.vertical.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0px;
+  width: 100%;
+  height: 1px;
+  background-image: -webkit-linear-gradient(left, 
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+}
+
+.ui.vertical.menu .item:first-child:before {
+  background-image: none;
+}
+
+/*--- Dropdown ---*/
+
+.ui.vertical.menu .dropdown.item > i {
+  float: right;
+}
+.ui.vertical.menu .dropdown.item .menu {
+  top: 0%;
+  left: 100%;
+  margin: 0px;
+  border-left: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu .item {
+  font-size: 1em;
+}
+
+
+/*--- Sub Menu ---*/
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1em -0.75em;
+}
+.ui.vertical.menu .item > .menu > .item {
+  padding: 0.5em 1.5em;
+  font-size: 0.85em;
+}
+.ui.vertical.menu .item > .menu > .item:before {
+  display: none;
+}
+.ui.vertical.menu .item > .menu > .item > a {
+  margin: -0.5em -1.5em;
+  padding: 0.5em 1.5em;
+}
+
+/*--------------
+     Fitted 
+---------------*/
+
+.ui.fitted.menu .item,
+.ui.fitted.menu .item > a,
+.ui.fitted.menu .item .menu .item, 
+.ui.fitted.menu .item .menu .item > a,
+.ui.menu .fitted.item,
+.ui.menu .fitted.item > a {
+  padding-top: 0em;
+  padding-bottom: 0em;
+}
+
+/*--------------
+   Borderless 
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item > a:before,
+.ui.borderless.menu .item .menu .item:before, 
+.ui.borderless.menu .item .menu .item > a:before,
+.ui.menu .borderless.item:before,
+.ui.menu .borderless.item > a:before {
+  background-image: none;
+}
+
+
+/*--------------
+     Tight 
+---------------*/
+
+.ui.tight.menu .item,
+.ui.tight.menu .item > a,
+.ui.tight.menu .item .menu .item, 
+.ui.tight.menu .item .menu .item > a,
+.ui.menu .tight.item,
+.ui.menu .tight.item > a {
+  padding: 0em;
+}
+
+
+/*--------------
+     Fixed 
+---------------*/
+
+.ui.menu.fixed {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  border: none;
+}
+.ui.menu.fixed.top {
+  top: 0px;
+  left: 0px;
+  right: auto;
+  bottom: auto;
+}
+.ui.menu.fixed.right {
+  top: 0px;
+  right: 0px;
+  left: auto;
+  bottom: auto;
+  width: auto;
+  height: 100%;
+}
+.ui.menu.fixed.bottom {
+  bottom: 0px;
+  left: 0px;
+  top: auto;
+  right: auto;
+}
+.ui.menu.fixed.left {
+  top: 0px;
+  left: 0px;
+  right: auto;
+  bottom: auto;
+  width: auto;
+  height: 100%;
+}
+
+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.menu .item.active:after {
+  position: absolute;
+  bottom: -0.3em;
+  left: 50%;
+  content: "";
+
+  margin-left: -0.3em;
+  width: 0.6em;
+  height: 0.6em;
+
+  -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+  background-image: none;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 2;
+
+  -webkit-transition:
+    background 0.1s linear
+  ;
+  -moz-transition:
+    background 0.1s linear
+  ;
+  -o-transition:
+    background 0.1s linear
+  ;
+  -ms-transition:
+    background 0.1s linear
+  ;
+  transition:
+    background 0.1s linear
+  ;
+}
+
+.ui.vertical.pointing.menu .item.active:after {
+  position: absolute;
+  top: 50%;
+  right: -0.22em;
+  bottom: auto;
+  left: auto;
+
+  -webkit-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+
+  margin-top: -0.3em;
+}
+
+/* Colors */
+.ui.pointing.menu .item.active:after {
+  background-color: #F3F3F3;
+}
+.ui.pointing.menu .item.active:hover:after {
+  background-color: #EAEAEA;
+}
+
+/*--------------
+    Attached 
+---------------*/
+
+
+.ui.menu.attached {
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  /* avoid rgba multiplying */
+  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  box-shadow: 0px 0px 0px 1px #DDDDDD;
+}
+.ui.top.attached.menu {
+  -moz-border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+}
+.ui.menu.bottom.attached {
+  -moz-border-radius: 0px 0px 5px 5px;
+  -webkit-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+}
+
+/*--------------
+     Sizes 
+---------------*/
+
+.ui.small.menu .item {
+  font-size: 14px;
+}
+.ui.menu .item {
+  font-size: 16px;
+}
+.ui.large.menu .item {
+  font-size: 18px;
+}
\ No newline at end of file
diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css
index 90ac17691..a759f6433 100755
--- a/src/ui/flat/menu.css
+++ b/src/ui/flat/menu.css
@@ -41,6 +41,9 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  vertical-align: middle;
+  min-height: 1.25em;
+
   -webkit-transition:
     opacity 0.1s linear,
     background 0.1s linear,
@@ -227,44 +230,34 @@
 }
 
 /*--------------
-  Notification 
+     Badges 
 ---------------*/
-.ui.menu .item .alert {
-  position: absolute;
-  top: -8px;
-  left: 75%;
-
-  background-color: #EEEEEE;
-  padding: 3px 5px;
 
-  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
-
-  border: 1px solid #E5E5E5;
-
-  border-radius: 5px;
+.ui.menu .item .badge {    
+  position: absolute;
+  z-index: 100;
+  top: -1em;
+  left: 100%;
+  margin-left: -1.5em;
 
-  -webkit-box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
-  -moz-box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
-  box-shadow:
-    0px 1px 0px rgba(0, 0, 0, 0.3),
-    0px 1px 0px rgba(255, 255, 255, 0.6) inset
-  ;
+  min-width: 1em;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #AAAAAA;
+  padding: 0.3em 0.5em;
 
-  font-size: 11px;
+  font-size: 0.9em;
+  font-weight: bold;
   line-height: 1;
-  text-transform: uppercase;
-  color: #555555;
-  z-index: 100;
+  text-align: center;
+  color: #FFFFFF;
+
+  -moz-border-radius: 5px 5px 5px 5px;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  
+  -moz-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
 }
 
 
@@ -282,7 +275,9 @@
 .ui.menu .item.hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
 .ui.menu .dropdown.item:hover,
+.ui.menu .dropdown.item .menu .item.hover,
 .ui.menu .dropdown.item .menu .item:hover {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.05);
@@ -326,6 +321,10 @@
 ---------------*/
 
 .ui.menu .item.active {
+  
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
   background-color: rgba(0, 0, 0, 0.05);
   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
 
@@ -342,6 +341,16 @@
     0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
   ;
 }
+.ui.vertical.menu .item.active {
+  border-top: none;
+  border-left: 0.2em solid #999999;
+  padding-top: 0.75em;
+  padding-left: 0.75em;
+}
+.ui.vertical.menu .item .menu .item.active {
+  padding-left: 1.35em;
+  padding-top: 0.5em;
+}
 
 /*--------------
      Disabled 
@@ -444,9 +453,9 @@
 
 /*--- Hover ---*/
 
-.ui.black.menu .item.hover,
+.ui.black.menu .link.item.hover,
 .ui.black.menu .link.item:hover,
-.ui.menu .dropdown.item:hover,
+.ui.black.menu .dropdown.item:hover,
 .ui.black.menu a.item:hover {
   cursor: pointer;
   background-color: rgba(255, 255, 255, .15);
@@ -455,7 +464,7 @@
 /*--- Down ---*/
 
 .ui.black.menu .item.down,
-.ui.menu .dropdown.item:active,
+.ui.black.menu .dropdown.item:active,
 .ui.black.menu .link.item:active,
 .ui.black.menu a.item:active {
   background-color: rgba(255, 255, 255, .1);
@@ -468,6 +477,7 @@
 /*--- Active ---*/
 
 .ui.black.menu .item.active {
+  border-color: transparent;
   background-color: rgba(255, 255, 255, 0.05);
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
 
@@ -482,6 +492,15 @@
   ;
 }
 
+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
+
 
 /*--------------
   Transparent 
@@ -496,7 +515,7 @@
 ---------------*/
 
 .ui.vertical.menu {
-  width: 280px;
+  width: 200px;
 }
 .ui.vertical.menu .item {
   display: block;
@@ -565,10 +584,9 @@
 /*--- Sub Menu ---*/
 
 .ui.vertical.menu .item > .menu {
-  margin: 0.5em -1em -0.75em;
+  margin: 0.5em -1em 0em;
 }
 .ui.vertical.menu .item > .menu > .item {
-  border: none;
   padding: 0.5em 1.5em;
   font-size: 0.85em;
 }
@@ -594,6 +612,20 @@
   padding-bottom: 0em;
 }
 
+/*--------------
+     Tight 
+---------------*/
+
+.ui.tight.menu .item,
+.ui.tight.menu .item > a,
+.ui.tight.menu .item .menu .item, 
+.ui.tight.menu .item .menu .item > a,
+.ui.menu .tight.item,
+.ui.menu .tight.item > a {
+  padding: 0em;
+}
+
+
 /*--------------
    Borderless 
 ---------------*/
@@ -608,19 +640,60 @@
 }
 
 
-/*--------------
-     Tight 
----------------*/
 
-.ui.tight.menu .item,
-.ui.tight.menu .item > a,
-.ui.tight.menu .item .menu .item, 
-.ui.tight.menu .item .menu .item > a,
-.ui.menu .tight.item,
-.ui.menu .tight.item > a {
-  padding: 0em;
-}
+/*-------------------
+        Fluid
+--------------------*/
 
+.ui.menu.fluid {
+  width: 100%;
+  height: 43px;
+}
+.ui.menu.fluid,
+.ui.menu.fluid .item {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: center;
+}
+.ui.menu.fluid .item {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.ui.menu.two.fluid .item {
+  width: 50%;
+}
+.ui.menu.three.fluid .item {
+  width: 33.333%;
+}
+.ui.menu.four.fluid .item {
+  width: 25%;
+}
+.ui.menu.five.fluid .item {
+  width: 20%;
+}
+.ui.menu.six.fluid .item {
+  width: 16.666%;
+}
+.ui.menu.seven.fluid .item {
+  width: 14.285%;
+}
+.ui.menu.eight.fluid .item {
+  width: 12.500%;
+}
+.ui.menu.nine.fluid .item {
+  width: 11.11%;
+}
+.ui.menu.ten.fluid .item {
+  width: 10.0%;
+}
+.ui.menu.eleven.fluid .item {
+  width: 9.09%;
+}
+.ui.menu.twelve.fluid .item {
+  width: 8.333%;
+}
 
 /*--------------
      Fixed 
@@ -667,13 +740,13 @@
 
 .ui.pointing.menu .item.active:after {
   position: absolute;
-  bottom: -6px;
+  bottom: -0.3em;
   left: 50%;
   content: "";
 
-  margin-left: -5px;
-  width: 12px;
-  height: 12px;
+  margin-left: -0.3em;
+  width: 0.6em;
+  height: 0.6em;
 
   -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
@@ -706,7 +779,7 @@
 .ui.vertical.pointing.menu .item.active:after {
   position: absolute;
   top: 50%;
-  right: -6px;
+  right: -0.22em;
   bottom: auto;
   left: auto;
 
@@ -714,9 +787,7 @@
   -moz-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
   box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
 
-  margin-top: -7px;
-  width: 12px;
-  height: 12px;
+  margin-top: -0.3em;
 }
 
 /* Colors */
@@ -726,12 +797,6 @@
 .ui.pointing.menu .item.active:hover:after {
   background-color: #EAEAEA;
 }
-.ui.black.pointing.menu .item.active:after {
-  background-color: #3E3E3E;
-}
-.ui.black.pointing.menu .item.active:hover:after {
-  background-color: #3B3B3B;
-}
 
 /*--------------
     Attached 
diff --git a/src/ui/shaded/menu.css b/src/ui/shaded/menu.css
index 090594d96..5f2d4d928 100755
--- a/src/ui/shaded/menu.css
+++ b/src/ui/shaded/menu.css
@@ -1,5 +1,5 @@
 /*
- * # Semantic Menu - Flat
+ * # Semantic Menu - Shaded
  * http://github.com/quirkyinc/semantic
  *
  *
@@ -15,25 +15,113 @@
             Standard
 *******************************/
 
+/*--------------
+      Menu 
+---------------*/
+
 .ui.menu {
-  background-color: #EEEEEE;
+  background-color: #FFFFFF;
   font-size: 0px;
+
+  background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: -ms-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.06) 100%);
+
+  -webkit-box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+  -moz-box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba( 0, 0, 0, 0.15)
+  ;
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+}
+.ui.menu .item,
+.ui.menu .item > a {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  -webkit-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -moz-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -o-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  -ms-transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+  transition:
+    opacity 0.1s linear,
+    background 0.1s linear,
+    box-shadow 0.1s linear
+  ;
+}
+
+/*--------------
+      Colors 
+---------------*/
+
+/* Text Color */
+.ui.menu .item,
+.ui.menu .item > a {
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.menu .item > a:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: rgba(0, 0, 0, 0.95);
 }
-.ui.menu a {
-  color: #333333;
+.ui.menu .item .item,
+.ui.menu .item .item > a {
+  color: rgba(0, 0, 0, 0.6);
 }
+.ui.menu .item .item > a:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/*--------------
+      Items 
+---------------*/
 
-/* Items */
 .ui.menu .item {
+  position: relative;
   display: inline-block;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+  padding: 0.75em 0.95em;
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
+  user-select: none;
 }
-.ui.menu .item:first-child {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
+
+.ui.menu .item > a {
+  display: block;
+  margin: -0.75em -0.95em;
+  padding: 0.75em 0.95em;
 }
 
 .ui.menu .menu.left,
@@ -43,13 +131,69 @@
 .ui.menu .menu.right,
 .ui.menu .item.right {
   float: right;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 
-/* Dropdown Menu */
+/*--------------
+    Borders 
+---------------*/
+
+.ui.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  right: 0px;
+  width: 1px;
+  height: 100%;
+  background-image: -webkit-linear-gradient(top, 
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(0, 0, 0, 0.05) 0%,
+    rgba(0, 0, 0, 0.1) 50%,
+    rgba(0, 0, 0, 0.05) 100%)
+  ;
+}
+.ui.menu .menu.right .item:before,
+.ui.menu .item.right:before {
+  right: auto;
+  left: 0px;
+}
+
+
+/*--------------
+      Icons 
+---------------*/
+
+.ui.menu .item > i:only-child,
+.ui.menu .item > a > i:only-child {
+  margin: 0em;
+}
+
+/*--------------
+    Dropdowns 
+---------------*/
+
 .ui.menu .dropdown.item {
-  position: relative;
+  box-shadow: none !important;
+  z-index: 10;
 }
 .ui.menu .dropdown.item .menu {
   overflow: hidden;
@@ -61,39 +205,23 @@
   background-color: #FFFFFF;
   opacity: 0;
 
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+
   -webkit-transition: opacity 0.2s ease-out;
   -moz-transition: opacity 0.2s ease-out;
   -o-transition: opacity 0.2s ease-out;
   -ms-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
-}
-.ui.menu .dropdown.item:last-child .menu {
-  left: auto;
-  right: 0px;
-}
-
-/* Hover */
-.ui.menu .dropdown.item:hover .menu {
-  display: block;
-  overflow: visible;
-  min-width: 150px;
-  width: 100%;
-  height: auto;
-
-  opacity: 1;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-top: none;
-
-  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  z-index: 11;
 }
 .ui.menu .dropdown.item .menu .item {
   border: none;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 0.9em;
   display: block;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.75);
   
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -105,6 +233,52 @@
 .ui.menu .dropdown.item .menu .item:first-child {
   border-top: none;
 }
+.ui.menu .dropdown.item:last-child .menu {
+  left: auto;
+  right: 0px;
+}
+
+/*--------------
+  Notification 
+---------------*/
+.ui.menu .item .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+
 
 
 
@@ -126,23 +300,67 @@
   background-color: rgba(0, 0, 0, 0.05);
 }
 
+/* Dropdown Display */
+.ui.menu .dropdown.item:hover .menu {
+  display: block;
+  overflow: visible;
+  min-width: 150px;
+  width: 100%;
+  height: auto;
+
+  opacity: 1;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: none;
+
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
 /*--------------
-     Active 
+      Down 
 ---------------*/
 
 .ui.menu .item.down,
 .ui.menu .link.item:active,
 .ui.menu a.item:active,
+.ui.menu .item > a:active,
 .ui.menu .dropdown.item .menu .item:active {
   background-color: rgba(0, 0, 0, 0.05);
 
-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
 }
 
+/*--------------
+     Active 
+---------------*/
+
 .ui.menu .item.active {
-  font-weight: bold;
+  
+  border-top: 0.2em solid #999999;
+  padding-top: 0.55em;
+
+  background-color: rgba(0, 0, 0, 0.05);
+  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+.ui.vertical.menu .item.active {
+  border-left: 0.2em solid #999999;
+  padding-left: 0.75em;
 }
 
 /*--------------
@@ -157,52 +375,141 @@
   background-color: transparent;
 }
 
+
+
 /*******************************
             Variations
 *******************************/
 
+
 /*--------------
      Colors 
 ---------------*/
 
 .ui.black.menu {
   background-color: #333333;
-  color: #FFFFFF;
-}
-.ui.black.menu a {
-  color: #FFFFFF;
-}
-.ui.black.menu .item {
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ui.black.menu .item:first-child {
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
-}
-.ui.black.menu .menu.right,
-.ui.black.menu .item.right {
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
 }
+.ui.black.menu .item,
+.ui.black.menu .item > a {
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.95);
+}
+.ui.black.menu .item .item,
+.ui.black.menu .item .item > a {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.black.menu .item .item > a:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/*--- Border ---*/
+.ui.black.menu .item:before {
+  background-image: -webkit-linear-gradient(top, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(top,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+.ui.vertical.black.menu .item:before {
+  background-image: -webkit-linear-gradient(left, 
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(255, 255, 255, 0.03) 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%)
+  ;
+}
+
+/*--- Hover ---*/
 
-
-/* hover */
 .ui.black.menu .item.hover,
 .ui.black.menu .link.item:hover,
+.ui.menu .dropdown.item:hover,
 .ui.black.menu a.item:hover {
   cursor: pointer;
   background-color: rgba(255, 255, 255, .15);
 }
-/* active */
+
+/*--- Down ---*/
+
 .ui.black.menu .item.down,
+.ui.menu .dropdown.item:active,
 .ui.black.menu .link.item:active,
-.ui.menu .dropdown.item:hover,
 .ui.black.menu a.item:active {
-  background-color: rgba(255, 255, 255, .05);
+  background-color: rgba(255, 255, 255, .1);
 
-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
 }
 
+/*--- Active ---*/
+
+.ui.black.menu .item.active {
+  background-color: rgba(255, 255, 255, 0.05);
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  -moz-box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+  box-shadow:
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
+  ;
+}
+
+/*--- Pointers ---*/
+
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
 
 
 /*--------------
@@ -214,28 +521,135 @@
 }
 
 /*--------------
-     Vertical 
+    Vertical 
 ---------------*/
 
 .ui.vertical.menu {
-  width: 100%;
+  width: 280px;
 }
 .ui.vertical.menu .item {
+  display: block;
   border-left: none;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: none;
+}
+
+/*--- Border ---*/
+
+.ui.vertical.menu .item:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0px;
+  width: 100%;
+  height: 1px;
+  background-image: -webkit-linear-gradient(left, 
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -moz-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -o-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: -ms-linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+  background-image: linear-gradient(left,
+    rgba(0, 0, 0, 0.03) 0%,
+    rgba(0, 0, 0, 0.1) 1.5em,
+    rgba(0, 0, 0, 0.03) 100%)
+  ;
+}
+
+.ui.vertical.menu .item:first-child:before {
+  background-image: none;
+}
+
+/*--- Dropdown ---*/
+
+.ui.vertical.menu .dropdown.item > i {
+  float: right;
+}
+.ui.vertical.menu .dropdown.item .menu {
+  top: 0%;
+  left: 100%;
+  margin: 0px;
+  border-left: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu .item {
+  font-size: 1em;
+}
+
+
+/*--- Sub Menu ---*/
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1em -0.75em;
+}
+.ui.vertical.menu .item > .menu > .item {
+  padding: 0.5em 1.5em;
+  font-size: 0.85em;
+}
+.ui.vertical.menu .item > .menu > .item:before {
+  display: none;
+}
+.ui.vertical.menu .item > .menu > .item > a {
+  margin: -0.5em -1.5em;
+  padding: 0.5em 1.5em;
 }
 
 /*--------------
-     Icons 
+     Fitted 
 ---------------*/
 
-.ui.menu .icon.menu .item i {
-  margin: 0px;
+.ui.fitted.menu .item,
+.ui.fitted.menu .item > a,
+.ui.fitted.menu .item .menu .item, 
+.ui.fitted.menu .item .menu .item > a,
+.ui.menu .fitted.item,
+.ui.menu .fitted.item > a {
+  padding-top: 0em;
+  padding-bottom: 0em;
 }
-.ui.menu .icon.item i {
-  padding: 0px;
+
+/*--------------
+   Borderless 
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item > a:before,
+.ui.borderless.menu .item .menu .item:before, 
+.ui.borderless.menu .item .menu .item > a:before,
+.ui.menu .borderless.item:before,
+.ui.menu .borderless.item > a:before {
+  background-image: none;
 }
 
+
+/*--------------
+     Tight 
+---------------*/
+
+.ui.tight.menu .item,
+.ui.tight.menu .item > a,
+.ui.tight.menu .item .menu .item, 
+.ui.tight.menu .item .menu .item > a,
+.ui.menu .tight.item,
+.ui.menu .tight.item > a {
+  padding: 0em;
+}
+
+
 /*--------------
      Fixed 
 ---------------*/
@@ -244,6 +658,7 @@
   position: fixed;
   z-index: 10;
   width: 100%;
+  border: none;
 }
 .ui.menu.fixed.top {
   top: 0px;
@@ -274,24 +689,107 @@
   height: 100%;
 }
 
+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.menu .item.active:after {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  content: "";
+
+  margin-left: -5px;
+  width: 12px;
+  height: 12px;
+
+  -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+  background-image: none;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 2;
+
+  -webkit-transition:
+    background 0.1s linear
+  ;
+  -moz-transition:
+    background 0.1s linear
+  ;
+  -o-transition:
+    background 0.1s linear
+  ;
+  -ms-transition:
+    background 0.1s linear
+  ;
+  transition:
+    background 0.1s linear
+  ;
+}
+
+.ui.vertical.pointing.menu .item.active:after {
+  position: absolute;
+  top: 50%;
+  right: -6px;
+  bottom: auto;
+  left: auto;
+
+  -webkit-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: 1px -1px 0px 1px rgba(0, 0, 0, 0.15);
+
+  margin-top: -7px;
+  width: 12px;
+  height: 12px;
+}
+
+/* Colors */
+.ui.pointing.menu .item.active:after {
+  background-color: #F3F3F3;
+}
+.ui.pointing.menu .item.active:hover:after {
+  background-color: #EAEAEA;
+}
+
+/*--------------
+    Attached 
+---------------*/
+
+
+.ui.menu.attached {
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  /* avoid rgba multiplying */
+  -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
+  box-shadow: 0px 0px 0px 1px #DDDDDD;
+}
+.ui.top.attached.menu {
+  -moz-border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 5px 5px 0px 0px;
+  border-radius: 5px 5px 0px 0px;
+}
+.ui.menu.bottom.attached {
+  -moz-border-radius: 0px 0px 5px 5px;
+  -webkit-border-radius: 0px 0px 5px 5px;
+  border-radius: 0px 0px 5px 5px;
+}
+
 /*--------------
      Sizes 
 ---------------*/
-.ui.menu .item {
-  padding: 5px 10px;
+
+.ui.small.menu .item {
   font-size: 14px;
 }
-.ui.menu .item > a {
-  display: block;
-  margin: -5px -10px;
-  padding: 5px 10px;
-}
-.ui.large.menu .item {
-  padding: 12px 10px;
+.ui.menu .item {
   font-size: 16px;
 }
-.ui.menu .item > a {
-  display: block;
-  margin: -12px -10px;
-  padding: 12px 10px;
+.ui.large.menu .item {
+  font-size: 18px;
 }
\ No newline at end of file