custom-sample-skin.css

/* 
 * Custom Skin Sample
 *
 * These styles apply when the skin is set to "None".  To apply to do different skin, replace the .ubermenu-skin-none prefix with the appropriate skin.
 * To apply to all menus, replace .ubermenu-skin-none with just .ubermenu
 */
/* UberMenu - Copyright 2011-2014, SevenSpark */


/* General settings for the skin */
.ubermenu-skin-none {
  font-size: 12px;
  color: #888888;
}

/* Menu Item Links in general */
.ubermenu-skin-none .ubermenu-target {
  color: #555555;
}

/* Menu Item Descriptions */
.ubermenu-skin-none .ubermenu-target-description {
  color: #aaaaaa;
}

/* Responsive Toggle */
.ubermenu-skin-none.ubermenu-responsive-toggle {
  background: #222222;
  color: #eeeeee;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}
/* Responsive Toggle - Hover */
.ubermenu-skin-none.ubermenu-responsive-toggle:hover {
  background: #111111;
  color: #ffffff;
}

/* Menu Bar */
.ubermenu-skin-none {
  border: none;
  background: #222222;
}

/* Current Top Level Menu Item */
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target {
  color: #ffffff;
  background: #000000;
}

/* Top Level Highlight */
.ubermenu-skin-none .ubermenu-item.ubermenu-item-level-0 > .ubermenu-highlight {
  color: #4d90fe;
  background: transparent;
}

/* Vertical Orientation Menu Item Backrounds */
.ubermenu-skin-none.ubermenu-vertical .ubermenu-item-level-0 > .ubermenu-target {
  background: #222222;
}

/* Top Level Items */
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-target {
  font-weight: bold;
  color: #d9d9d9;
  text-transform: uppercase;
  border-left: none;
}

/* The first top level item */
.ubermenu-skin-none .ubermenu-item-level-0:first-child > .ubermenu-target {
  box-shadow: none;
}

/* Top Level Items - Hover */
.ubermenu-skin-none .ubermenu-item-level-0:hover > .ubermenu-target,
.ubermenu-skin-none .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
  background: #000000;
  color: #ffffff;
}

/* Top Level Submenu Stack Links */
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target {
  color: #d9d9d9;
}
.ubermenu-skin-none .ubermenu-item-level-0 > .ubermenu-submenu-type-stack > .ubermenu-item > .ubermenu-target:hover {
  color: #ffffff;
}

/* Submenus */
.ubermenu-skin-none .ubermenu-submenu.ubermenu-submenu-drop {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
}
.ubermenu-skin-none.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {
  border-top: none;
}

/* Tab Content Panel */
.ubermenu-skin-none .ubermenu-tab-content-panel {
  background: #f9f9f9;
}

/* Submenu general text color */
.ubermenu-skin-none .ubermenu-submenu,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target {
  color: #555555;
}

/* Submenu highlight color */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-highlight {
  color: #4d90fe;
}

/* Submenu Links */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target:hover,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-active > .ubermenu-target {
  color: #111111;
}
/* Submenu Descriptions */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-target > .ubermenu-target-description {
  color: #aaaaaa;
}
.ubermenu-skin-none .ubermenu-submenu .ubermenu-active > .ubermenu-target > .ubermenu-target-description {
  color: #666666;
}

/* Submenu Headers */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header > .ubermenu-target {
  font-weight: bold;
  color: #555555;
}
/* Submenu items in a stack */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target {
  border-bottom: 1px solid #e9e9e9;
}
/* Submenu Headers - Hover */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover {
  color: #222222;
}
/* Current Submenu Item */
.ubermenu-skin-none .ubermenu-submenu .ubermenu-current-menu-item > .ubermenu-target {
  color: #222222;
  background: transparent;
}
/* Tab Toggle active/hover */
.ubermenu-nojs.ubermenu-skin-none .ubermenu-submenu .ubermenu-tabs .ubermenu-tab:hover > .ubermenu-target,
.ubermenu-skin-none .ubermenu-submenu .ubermenu-tab.ubermenu-active > .ubermenu-target {
  background: #eeeeee;
  color: #111111;
}
/* Tabs Borders */
.ubermenu-skin-none .ubermenu-tabs-group,
.ubermenu-skin-none .ubermenu-tab > .ubermenu-target,
.ubermenu-skin-none .ubermenu-tab-content-panel {
  border-color: #eeeeee;
}
/* Submenu Border */
.ubermenu-skin-none .ubermenu-submenu-drop {
  border-bottom-width: 3px;
}