/*##########################################################################*/
/*  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 #444);
    	text-decoration: none;
//    	text-shadow: 0 -1px #333;
    	color: #888;
    	background-position: 100% 100%;
    	border: solid 1px #333;
	
			&:active {
				color: $white !important;
      }

      &:hover {
        color: black !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;
			}
			
		}
		
	}
	
}


@media (max-width: 662px) {
	#top-menu-user {
		text-align: center;
		margin-left: .5em;
	}
	
	.floatleft {
		float: left !important;
	}

	.clearleft {
		clear: left;
	}

	.pull-right {
		padding-top: 9px !important;
	}

	.ilb {
		display: inline-block;
	}
	
	.wpadding1em {
		padding-left: 1em;
	}

	.wpaddinghalfem {
		padding-left: .5em;
	}
}

