/*##########################################################################*/ /* Top Menu */ /*##########################################################################*/

//////////////////

/*########## STRUCTURE ##########*/

top-menu {

width: 100%;
@include vertical-gradient(#fbfbfb, #d5d5d5);
@include box-shadow(0px 1px 6px $gray);
border-bottom: solid 1px #999;
z-index: 2;
position: relative;
@include clearfix();

.btn {

  // custom attributes:
  @include border-radius(6px);
  background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;

  // IE fix: reset Microsoft filter attribute:
  filter: none;

  color: #666;
  text-shadow: 0 1px #eee;
  margin: 0px 2px;
  padding: 4px 7px;
  font-size: 11px;
  border: solid 1px #999;
  float: left;

  &:hover {
    background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;
    text-shadow: 0 1px #eee;
    background-position: 100% -31px;
    border: solid 1px #2f84da;

    .badge {
      //background-color: $concerto-blue-1;
      color: $white;

      &.action {
        background-color: $red;
      }
    }
  }

  &:active {
    background: transparent image-url('layout/top-menu/button_top-menu_states.png') top left repeat-x;
    background-position: 100% -62px;
    border: solid 1px #333;
  }

  &:visited {
    color:#666;
  }

  &.selected {
    @include box-shadow(inset 0 0 10px #000);
    text-decoration: none;
    text-shadow: 0 -1px #333333;
    color: #FFF;
    background-position: 100% 100%;
    border: solid 1px #333;

    &:active {
      color: $white !important;
    }

    &:hover {
      color: $white !important;
    }

  }

}

.badge {
  background-color: #666;
  color: $grayLighter;
  text-shadow: 0 0 0;

  &.action {
    background-color: darken($red, 10%);
  }
}

#top-menu-logobutton {
  @include vertical-gradient($concerto-blue-0, $concerto-blue-2);
  float: left;
  color: $white;
  padding: 4px 12px;
  font-weight: bold;
  vertical-align: middle;

  i.concertocon-logobutton {
    opacity: 0.6;
  }

  &.full {
    padding: 0px 12px;
    height: 55px;
  }

  &.selected {
    background: $concerto-blue-0;
    color: $white;
    position: relative;

    i.concertocon-logobutton {
      opacity: 1.0;
    }

    &:after {
      content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      top: 100%;
      left: 50%;
      margin-left: -10px;

      border: 10px solid transparent;
      border-top-color: $concerto-blue-0;
    }
  }

  // apply new background position on hover to show "lit up" version of logo bg:
  &:hover i.concertocon-logobutton {
    opacity: 1.0;
    text-decoration: none;
  }
  &:hover {
    text-decoration: none;
  }
}

#top-menu-logintext {
  float: left;
  padding: 4px 12px;
  margin: 0px;
  color: $gray;
  font-size: 0.85em;
}

#top-menu-user {

  i {
    display: block;
    margin: 2px 0px;
  }

  h2 {
    text-transform: uppercase;
    font-size: 17px;

    a {
      color: $gray;
      text-shadow: 0px 1px 0px $white;
      letter-spacing: 0.15em;
      font-size: 17px;
    }
  }

  .pull-left {
    padding-top: 2px;
    margin-right: 12px;
  }

  .pull-right {
    padding-top: 7px;
    margin-right: 8px;

    p {
      font-size: 0.8em;
    }
  }
}

// each part of the menu is a "section"
section { 
  border-right:solid 1px #ccc; 
  float: left;
  margin: 0px;
  padding-top: 4px;

  &.right {
    float: right;
  }

  .top-menu-sectop {
    height: 34px;
    padding: 0px 2px;
  }

  .top-menu-secbot {
    background: #f9f9f9;

    h1 {
      color: #666;
      font-size: 0.75em;
      font-weight: 400;
      text-shadow: 0 0.05em #FFF;
      padding: 3px 0px;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      text-align: center;
    }

  }

}

}