// UBERMENU SKINLESS
// This file contains the LESS template, while other files in this directory contain
// the variables for specific skins.  This file is imported into other skin files 


/* Menu Bar */
#megaMenu{
  border:@menubarBorder;
  border-bottom:@menubarBottomBorder;
  .gradient(@menubarColorStart, @menubarColorEnd);
  .border-radius(@menubarRadius);
  .inner-glow(0px,1px,0px,0px,@topLevelGlowOpacity);
}

/* Top Level Items */
#megaMenu ul.megaMenu > li > a,
#megaMenu ul.megaMenu > li > span.um-anchoremulator, 
.megaMenuToggle{
  font-size:@topLevelFontSize;
  color: @topLevelColor;
  padding:@topLevelPaddingY @topLevelPaddingX;
  font-weight:@topLevelTextWeight;
}
/* Horizontal Menu Items */
#megaMenu.megaMenuHorizontal ul.megaMenu > li > a,
#megaMenu.megaMenuHorizontal ul.megaMenu > li > span.um-anchoremulator{
  border-left:1px solid @topLevelDividerColor;
  .inner-glow(1px,0px,0px,0px,@topLevelGlowOpacity);
}
/* Vertical Menu Items */
#megaMenu.megaMenuVertical ul.megaMenu > li > a,
#megaMenu.megaMenuVertical ul.megaMenu > li > span.um-anchoremulator{
  border-top:1px solid @topLevelDividerColor;
  .inner-glow(0px,1px,0px,0px,@topLevelGlowOpacity);
}
/* Menu Items with Dropdowns */
#megaMenu ul li.ss-nav-menu-reg li.megaReg-with-sub > a, 
#megaMenu ul li.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator, 
#megaMenu ul li.mega-with-sub > a, #megaMenu ul li.mega-with-sub > span.um-anchoremulator, 
#megaMenu ul li.ss-nav-menu-mega > a, #megaMenu ul li.ss-nav-menu-mega > span.um-anchoremulator{
  padding-right:@topLevelPaddingX + 5;
}
/* Top Level Menu Item Titles */
#megaMenu ul.megaMenu > li > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li > span.um-anchoremulator span.wpmega-link-title{
  text-transform: @topLevelTextTransform;
  .text-shadow(@topLevelTextShadow);
}


/* Top Level Items - Hover */
#megaMenu ul.megaMenu > li:hover > a, 
#megaMenu ul.megaMenu > li > a:hover, 
#megaMenu ul.megaMenu > li.megaHover > a,
#megaMenu ul.megaMenu > li:hover > span.um-anchoremulator, 
#megaMenu ul.megaMenu > li > span.um-anchoremulator:hover, 
#megaMenu ul.megaMenu > li.megaHover > span.um-anchoremulator{
  color: @topLevelColorHover !important;
  border-bottom-color:transparent !important;
  .gradient(@topLevelBackgroundHoverStart, @topLevelBackgroundHoverEnd);
  .inner-glow(1px,1px,0px,0px,@topLevelGlowOpacityHover);
}
/* Top Level Items Title - Hover */
#megaMenu ul.megaMenu > li:hover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li:hover > span.um-anchoremulator span.wpmega-link-title, 
#megaMenu ul.megaMenu > li > a:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li > span.um-anchoremulator:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > span.um-anchoremulator span.wpmega-link-title{
  .text-shadow(@topLevelTextShadowHover);
}


/* Top Level Items - Current Item */
#megaMenu ul.megaMenu > li.current-menu-item > a,
#megaMenu ul.megaMenu > li.current-menu-parent > a,
#megaMenu ul.megaMenu > li.current-menu-ancestor > a{
  color:@currentColor;
}

/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1, 
#megaMenu ul.megaMenu li.ss-nav-menu-reg ul.sub-menu{
  border-color: @subMenuBorderColor;
  
  color:@subMenuColor;
  .text-shadow(@subMenuTextShadow); 
  .box-shadow(@subMenuBoxShadow);
  .gradient(@submenuColorStart, @submenuColorEnd);
}
#megaMenu ul.megaMenu ul.sub-menu .wpmega-postlist a{
  color:@subMenuColor;
}
/* Horizontal Sub Menus */
#megaMenu.megaMenuHorizontal ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1, 
#megaMenu.megaMenuHorizontal ul.megaMenu li.ss-nav-menu-reg > ul.sub-menu{
  border-top:@menubarBottomBorder;
  //margin-top:@subMenuMarginTop;
}

/* Sub Menu Columns */
#megaMenu ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1 > li{
  min-width: @subMenuMinColWidth;
}

/* Sub Menu Headers */ 
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > a, 
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li:hover > a, 
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a,
#megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > span.um-anchoremulator, 
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > span.um-anchoremulator,
.wpmega-widgetarea h2.widgettitle{
  color:@subHeaderColor;
  font-size:@subHeaderSize;
  font-weight:@subHeaderWeight;
  .text-shadow(@subMenuTextShadow); 
  
  padding-bottom:.4em;
  border-bottom: @subHeaderBorderBottom; 
  margin-bottom: @subHeaderMarginBottom;
}

/* Sub Menu Links & Fake Links */
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li > a,
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li > span.um-anchoremulator, 
#megaMenu ul ul.sub-menu li > a,
#megaMenu ul ul.sub-menu li > span.um-anchoremulator{
  color: @subLinkColor;
  font-size: @subLinkSize;
  .text-shadow(@subMenuTextShadow);
  background-color:@subLinkBackground;
}

/* Sub Menu Link Hover */
#megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li a:hover,
#megaMenu ul ul.sub-menu > li:hover > a{
  color:@subLinkColorHover;
  background-color:@subLinkBackgroundHover;
}

/* Top Level Search Bar */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform{
  padding-top: @topLevelPaddingY - 10;
}

/* Highlight color */
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator{
  color:@highlightColor !important;
}

/* Image Spacing */
#megaMenu .ss-nav-menu-with-img > a > .wpmega-link-title, 
#megaMenu .ss-nav-menu-with-img > a > .wpmega-link-description, 
#megaMenu .ss-nav-menu-with-img > a > .wpmega-item-description, 
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-title, 
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-link-description, 
#megaMenu .ss-nav-menu-with-img > span.um-anchoremulator > .wpmega-item-description{
  padding-left: @imageWidth + 5;
}
.ss-nav-menu-with-img{
  min-height:@imageHeight;
}

/* Item Description */
#megaMenu ul.megaMenu li a span.wpmega-item-description, 
#megaMenu ul.megaMenu li span.um-anchoremulator span.wpmega-item-description{
  font-size: @descriptionSize;
  color: @descriptionColor;
  text-transform: @descriptionTransform;
}

/* Arrow Colors */
#megaMenu ul li.mega-with-sub > a:after,
#megaMenu ul li.ss-nav-menu-mega > a:after,
#megaMenu ul li.mega-with-sub > span.um-anchoremulator:after,
#megaMenu ul li.ss-nav-menu-mega > span.um-anchoremulator:after{
  border-top-color: @topLevelArrowColor;
}
#megaMenu ul li.ss-nav-menu-reg li.megaReg-with-sub > a:after,
#megaMenu ul li.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator:after{
  border-left-color: @flyoutArrowColor;
}

/* HR */
#megaMenu .wpmega-divider{
  border-top:1px solid @subMenuBorderColor;
  border-bottom:1px solid rgba( 255 , 255 , 255 , .05 );
}



/* Vertical */
#megaMenu.megaMenuVertical > ul > li > a,
#megaMenu.megaMenuVertical > ul > li > span.um-anchoremulator{
  .gradient(@menubarColorStart, @menubarColorEnd);
}
#megaMenu.megaMenuVertical ul li.ss-nav-menu-reg li.megaReg-with-sub > a:after,
#megaMenu.megaMenuVertical ul li.mega-with-sub > a:after,
#megaMenu.megaMenuVertical ul li.ss-nav-menu-mega > a:after,
#megaMenu.megaMenuVertical ul li.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu.megaMenuVertical ul li.mega-with-sub > span.um-anchoremulator:after,
#megaMenu.megaMenuVertical ul li.ss-nav-menu-mega > span.um-anchoremulator:after{
  border-left-color: @topLevelArrowColor;
}
#megaMenu.megaMenuVertical ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1, 
#megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-reg > ul.sub-menu{
  border-left:@menubarBottomBorder;
  //margin-top:@subMenuMarginTop;
}


/* IE7 Hacks */
#megaMenu.megaMenuHorizontal ul.megaMenu{
  *border-bottom:none;
}
#megaMenu.megaMenuVertical ul.megaMenu{
  *border-right:none;
}




//mixins from CSS-Tricks http://css-tricks.com/snippets/css/useful-css3-less-mixins/
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  text-shadow: @string;
}
.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow:    @string;
  box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:  @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:   @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-glow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(255, 255, 255, @alpha);
  -moz-box-shadow:    inset @x @y @blur @spread rgba(255, 255, 255, @alpha);
  box-shadow:         inset @x @y @blur @spread rgba(255, 255, 255, @alpha);
}

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius:    @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius:  @bottomleft;
  -webkit-border-top-left-radius:     @topleft;

  -moz-border-radius-topright:        @topright;
  -moz-border-radius-bottomright:     @bottomright;
  -moz-border-radius-bottomleft:      @bottomleft;
  -moz-border-radius-topleft:         @topleft;

  border-top-right-radius:            @topright;
  border-bottom-right-radius:         @bottomright;
  border-bottom-left-radius:          @bottomleft;
  border-top-left-radius:             @topleft;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

.opacity (@opacity: 0.5) {
  -webkit-opacity:  @opacity;
  -moz-opacity:     @opacity;
  opacity:    @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}