// DROPDOWN MENUS
 // --------------
 
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropup,
 .dropdown {
   position: relative;
 }

 button.dropdown-toggle:active,

 .btn-group.open button.btn.dropdown-toggle {

     outline: 0;
     background-color: #383838;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

     border-bottom-color: #383838;

 }
 
 // Dropdown arrow/caret
 // --------------------
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   vertical-align: top;

   border-top:   4pt solid @zenburnFgLight;

   border-right: 4pt solid transparent;
   border-left:  4pt solid transparent;
   content: "";
 }

 .btn-group:hover .caret {border-top:   4pt solid @zenburnFgDark;}

 
 // Place the caret
 .dropdown .caret {
   margin-top: 8pt;
   margin-left: 2pt;
 }
 
 // The dropdown menu (ul)
 // ----------------------

 .btn-group > .btn.dropdown-toggle {

     transition: color 0.1s;

     border: 1pt solid @green;
 }
 

 .btn-group > button.btn.dropdown-toggle {

     z-index: @zindexDropdown + 10;
 }

 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: @zindexDropdown;

   transition: transform 0.15s, width 0.15s;

   transform: scaleY(0);
   transform-origin: top;

 
   margin: 0; // override default ul

   margin-top: -1pt;
 

   float: left;

   width: 100%;

   padding: 4pt 0;
   list-style: none;
   background-color: @dropdownBackground;

   border: 1pt solid @green;

   background-clip: padding-box;

 
   // Aligns the dropdown menu to right
   &.pull-right {
     right: 0;
     left: auto;
   }
 
   // Dividers (basically an hr) within the dropdown
   .divider {
     .nav-divider();
   }
 
   // Links within the dropdown menu
   a {
     display: block;
     padding: 3pt 15pt;
     clear: both;
     font-weight: normal;
     line-height: @baseLineHeight;
     color: @dropdownLinkColor;
     white-space: nowrap;
   }
 
   .dropdown-header {
       display: block;
       padding: 3pt 15pt;
       font-size: 11pt;
       font-weight: bold;
       line-height: @baseLineHeight;

       color: @zenburnFgLight;

       text-transform: uppercase;
     }

   .search {
       background-color: rgba(63,63,63, 0.8);
       margin: 3%;
       max-width: 94%;
   }

 }
 
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
   color: @dropdownLinkColorHover;
   text-decoration: none;
   background-color: @dropdownLinkBackgroundHover;
 }
 
 // Open state for the dropdown
 // ---------------------------
 .open {

     .dropdown-menu {
         transform: scaleY(1);
         backface-visibility: hidden;
         width: calc(100% + 52pt);
     }

 }
 
 // Right aligned dropdowns
 // ---------------------------
 .pull-right .dropdown-menu {
   right: 0;
   left: auto;
 }