/* Navegacion */
.navbar{
   min-height: 30px;
   .navbar-toggle {
      background: lighten(@color02,90%);
      padding: 10px 15px;
      color: @bg_type;
      text-transform: uppercase;
      &:hover{
         color:@color01_h_type;
         background-color: @color02;
         text-decoration: none;
         cursor: pointer;
      }
   }
   .navbar-brand{
      padding: 11px;
      color: @color01_type;
      font-size: 17px;
      text-transform: uppercase;
      font-weight: bold;
      line-height: 37px;
      text-decoration: none;
      cursor: default;
      display: none;
   }
   .first-level{
      color: @color02_type;
      background: @color02;
      width: 100%;
      display:block;
      z-index: 999;
      >li{                
         line-height: 30px;
         text-transform: uppercase;    
         font-weight:bold;
         margin-right:4px;
         >a{
            text-decoration: none;
            color: @color02_type;
            line-height: 30px;
            padding: 0px 5px;
            position: relative;
            &:after{
               content: "";
               width: 1px;
               height: 40%;
               position: absolute;
               top: 30%;
               right: 0;
               background: @bg;
               //border-left: 1px solid @color02_type;
            }            

         }
         >a:hover, &:hover >a{
            color: @color01_type;
            background-color:@color01;
            text-transform:uppercase;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:before{
               border-radius: 50%;
               bottom: -30px;
               box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65);
               content: "";
               height: 30px;
               left: 0;
               position: absolute;
               width: 100%;
            }   
         }
         .second-level{
            &.dsk.current{
               display: block;
            }
         }
         >.subnav{
            position: absolute;
            left: 0;
            width: 100%;   
         }
         &.active{
            background-color:@color01;
            &.spacing{
               margin-bottom: 30px;
            }
            &:after{
               width: 0px;
               background: none;
            }    
            >a, >a:hover, >a:focus{
               color: @color01_type;
               background-color:@color01;
               text-transform:uppercase;
               position: relative;
               overflow: hidden;
               &:before{
                  border-radius: 50%;
                  bottom: -30px;
                  box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65);
                  content: "";
                  height: 30px;
                  left: 0;
                  position: absolute;
                  width: 100%;
               }                    
            }
            >a:hover{
               cursor: pointer;
            }
            .second-level{
               //display: block;
            }
            >.subnav{
               //display: block;
            }
         }
      }       
   }
   .second-level{
      color: @color01_type;
      background: @color01;
      width: 100%;
      &.hide-show{
         position: absolute;
         top: -9999px;
         left: -9999px;
      } 
      &.dsk{
         display: none;
         &.current{
            display: block;
         }
      }
      >li{                
         position: static;               
         font-weight:bold;
         height: 30px;
         line-height: 30px;  
         padding: 0 10px; 
         &:hover{
            color: @color01_type;
            background: @color01;
            >a{
               color: @color01_type;
               background-color:@color01;
            }
         }      
         >a{
            text-decoration: none;
            color: @color01_type;
            line-height: 26px;
            padding: 0;
            &:after{
               content: "";
               width: 1px;
               height: 60%;
               position: absolute;
               top: 20%;
               right: -10px;
               border-right: 1px solid;
            }
            &:hover, &:focus{
               color: @color01_type;
               background-color:@color01;
               border-bottom: 4px solid;   
               cursor: pointer;                 
            }
         }
         &.active{
            >a, >a:hover, >a:focus{
               color: @color01_type;
               background-color:@color01;
               border-bottom: 4px solid;
               &:after{
                  //border-right: 0px solid;
               }                     
            }
            >.subnav{
               // display: block;
            }
         }
      }
      .subnav{
         float: left;
         width: 100%;
         li{
            display: inline;
            float: left;
         }
         &:after{
            .G_divider_horizontal;
         }           

      }       
   }
   .subnav{
      color: @bg_type;
      margin-top: 5px;
      float: left;
      width: 100%; 
      &.hide-show{
         position: absolute;
         top: -9999px;
         left: -9999px;
      } 
      &.dsk{
         display: none;
         position: relative;
         &.current{
            display: block;
         }
      }   
      #gradient .vertical-three-colors( @bg, @bg, 20%,darken(@bg,10%));
      >li{     
         text-transform: uppercase;
         font-size: 10px;
         float: left;           
         line-height: 12px;
         font-weight:bold;
         height: 30px;
         line-height: 30px;   
         position: relative;
         &:hover{
            color:@color02_type;
            background:@color02;
            a{
               color:@color02_type;
               background:@color02;
               &:after{
                  border: none;
               }                 
            }
         } 
         a{
            text-decoration: none;
            cursor: pointer;
            color:@bg_type;
            line-height: 30px;
            padding: 0;
            padding: 0 10px;
            display:block;
            height:100%;
            &:after{
               content: "";
               width: 1px;
               height: 60%;
               position: absolute;
               top: 20%;
               border-right: 1px solid;
               padding-right:10px;
            }
            &:hover{
               cursor:pointer;
               color:@color02_type;
               background:@color02;
            }
         }
         &:last-child{
            a:after{
               border: none;                    
            }
         }
         &.active{
            color:@color02_type;
            background:@color02;
            a, a:hover, a:focus{
               background:@color02;
               color:@color02_type;
            }
            a:after{
               border: none;
            }
         }
      }  
      &:after{
         .G_divider_horizontal;
      }
      @media (max-width: @xs) {
         li{float: none;}
      }    
   }
   .dropdown-submenu{
      position:relative;
      > .dropdown-menu{
         top:0;
         left:100%;
         margin-top:-6px;
         margin-left:-1px;
         -webkit-border-radius:0 6px 6px 6px;
         -moz-border-radius:0 6px 6px 6px;
         border-radius:0 6px 6px 6px;
      }
      > a:after{
         content:" ";
         width:0 !important;
         border-left: 4px solid transparent;
         border-right: 4px solid transparent !important;
         border-top: 8px solid @bg;
         margin-top:5px;
         display: block;
         margin-right: 16px;
         position: absolute;
         height: 0 !important;
      }
      &.open {
         > .dropdown-menu{
            display:block;
         }
         > a:after{
            border-left: 4px solid transparent;
            border-right: 4px solid transparent !important;
            border-bottom: 8px solid @bg;
            border-top: 0;
         }
      }
      .pull-left{
         float:none;
      }
      &.pull-left > .dropdown-menu{
         left:-100%;
         margin-left:10px;
         -webkit-border-radius:6px 0 6px 6px;
         -moz-border-radius:6px 0 6px 6px;
         border-radius:6px 0 6px 6px;
      }
   }
   &.ie8{
       &.mobile{
         .navbar-collapse{
            &.in{
               display: block;
            }
         }
      }
   }
}
.navbar-right{
   float:right;
   margin-top: 5px;
   margin-bottom: 2px;
}
.navbar-top {
   font-family: @baseFontFamily;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: bold;
   padding-left: 0px;
   line-height: 30px;
   text-indent: 0px;
   margin-bottom: 0;
   border-radius: 0;
   min-height: 30px;
   .dropdown-menu{
      li{
         a{
            color:@color01_type;
         }
      }
   }
   #gradient .vertical-three-colors( @bg, @bg, 20%,darken(@bg,10%));
   li{
      line-height: 12px;
      margin: 0px;
      border-right: 0px;
      height: 30px;
   }
   .menu li{
      border-right: 1px solid lighten(@bg_type,85%);
   }
   li > a{
      color: @bg_type;
      padding: 0px 5px;
      line-height: 30px;
      &:hover,&:focus{
         color: @color01_h_type;
         background: @color01_h;
         position: relative;
         overflow: hidden;
         &:after{
            border-radius: 50%;
            bottom: -30px;
            box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65);
            content: "";
            height: 30px;
            left: 0;
            position: absolute;
            width: 100%;
         }
      }
   }
   .active{
      a,:hover,:focus {
         color: @color01_h_type;
         background: @color01_h;
         text-transform:uppercase;
         background-repeat:no-repeat;
         background-position:center bottom;
         position: relative;
         overflow: hidden;
         &:after{
            border-radius: 50%;
            bottom: -30px;
            box-shadow: 0 0 10px 8px rgba(255, 255, 255, 0.65);
            content: "";
            height: 30px;
            left: 0;
            position: absolute;
            width: 100%;
         }
      } 
   }
}
.btn{
   border-radius:0px;
   border-color:@color01;
   background-image:none;
   background-color:  @color01;
   height: 38px;
   line-height: 38px;
   color: @color01_type;
   font-family: @baseFontFamily;
   text-shadow:none;
   padding:0px;
   width: 100%;
   &:focus, &:hover{
      background-color: lighten(@color01, 5%);
   }
   @media (max-width: @xs) {
      .mas{
         font-size: 24px;
      }
   }
}
.dis .btn{
   background-color: desaturate(@color01, 50%);
   .opacity(50);
   cursor: default;
}
.collapse.in {
   height: auto;
}

.menu-coord{
   .subnav{
      position: relative;
      width: 100%;
      &:after{
         .G_divider_horizontal;
      }   
   }
}


@media only screen and (max-width: 350px){

   .ie8 #mainHeader .navbar.torneos .navbar .nav  .dropdown-menu {

      right:120px;
   }

   #mainHeader{
      .navbar{
      }
   } 
   .navbar-right a span{
      display:none;
   }
   .dropdown.tournaments{
      > a{
         padding: 8px 15px 0;
         &:hover{
            padding: 8px 15px 0;
            background:@color02;
         }
      }
      &.open{
         > a, > a:hover, > a:focus{
            background-color: @color02;
         }
         .dropdown-toggle{
            background-color: @color02;
         }
         &.active{
            .dropdown-toggle{
               background-color:@color02;
            }
         }
      }
   }
   .content-style ul {
      width: 78% !important;
   }
}
@media (max-width: @xs) {
   .navbar.mobile{
      border-bottom:1px solid @bg;
      /* Navbar Header*/
      .navbar-header{
         background: @color02;
      }
      /* Navbar Brand*/
      .navbar-brand{
         display: inline-block;
         padding: 0 0 0 20px;
         color: @color02_type;
      }
      /* Navbar Toogle*/
      .navbar-toggle {
         background-color: @color02;
         .icon-bar{
            border: 1px solid @bg;
         }
         &:focus{
            outline: none;
         }
      }
      /* Navbar Collapse*/
      .navbar-collapse.in{
         overflow:visible;
         display: inline;
      }
      /* Navbar First level*/
      .first-level{
         >li{
            /*position:relative; */
            &:first-child{
               a{
                  border-top: 1px solid lighten(@color02,75%);
               }
            }
            &.active{
               &.spacing{
                  margin-bottom: 0
               }                 
            }
            >a{
               background: @color02;
               padding:5px 15px 5px 25px;
               line-height: 20px !important;
               border-bottom: 1px solid lighten(@color02,75%);
               font-size: 14px;
               color: @color02_type;
               .caret{
                  margin-left: 2px;
                  margin-top: 7px;
                  border-width: 8px 4px 0;
                  border-bottom-color: @bg;
                  border-top-color: @bg;
                  border-right-color: transparent;
                  border-left-color: transparent;
                  vertical-align: top;
                  float: right;
               }
               &:after{
                  background:none;
               }
            }
            &:hover > a{
               &:before{
                  box-shadow: none;
               }
               .caret{
                  border-bottom-color: @bg;
                  border-top-color: @bg; 
               }
            }
            &.active >a{
               background: @color01;
               color: @color01_h_type;
               outline: 0;
               &:before{
                  box-shadow: none;
               }
               .caret{
                  border-bottom-color: @bg;
                  border-top-color: @bg;
                  border-width: 0 4px 8px;
                  border-bottom-color: @bg;
                  border-top-color: @bg;
                  border-right-color: transparent;
                  border-left-color: transparent;
               }
            }
            .subnav{
               position: relative;
            }
         }

         a.no-sub{
            &:focus{
               border-bottom:none;
            }
         }
         > li.dropdown.active{
            > a{
               background: @color02;
               color: @color02_type;
            }
         }
      }
      /* Navbar Second level*/
      .second-level{
         position:relative;
         top:0;
         font-size: 14px;
         float:none;
         left: 0;
         &.hide-show{
            position: relative;
            top: 0;
            left: 0;
         }
         &.dsk.current{
            display: none;
         }
         >li{
            height:auto; 
            padding: 0;
            &:hover:before, &:focus:before{
               border-bottom-color: @color01_h;
               border-top-color: @color01_h;
            }
            >a{
               padding:5px 15px 5px 35px;
               border-bottom:1px solid lighten(@color02,75%);
               line-height: 20px;
               background: no-repeat  right center  lighten(@color02, 30%);
               color:@color02_type;
               font-weight: bold;
               &:after{
                  border-right: 0px;
                  width:0; 
                  right: 0;
               }
            }
            &.active{
               >a, >a:hover, >a:focus{
                  border-bottom: 1px solid lighten(@color02,75%);
                  outline: 0;
                  background: @color01;
                  color: @color01_h_type;
               }
            }
         }
         > li.dropdown-submenu.active{
            > a{
               background: lighten(@color02, 30%);
               color:@color02_type;
            }
         }
         &.mobile{
            display: block !important;
         }

      }
      /* Navbar Subnav level*/
      .subnav{
         position: relative;
         float:none;
         margin-top: 0px;  
         background: lighten(@color02,50%);
         &.dsk.current{
            display: none;
         }
         &.hide-show{
            position: relative;
            top: 0;
            left: 0;
         }
         li{
            float:none;
            display:block;
            background:transparent;
            &:first-child{
               a{
                  border-top: 0;
               }
            }
            a{
               padding:5px 15px 5px 45px;
               display: block;
               color:@color02_type;
               line-height: 20px;
               font-size: 14px;
               background: lighten(@color02,50%);
               background-image: none;
               border-top: 1px solid #bfbfbf;
               font-weight: bold;
               &:after{
                  background-image: none;
                  position:relative;
                  border: none;
               } 
            }
            &:focus a, &.active a{
               background: @color01;
               color: @color01_h_type;
               outline: 0;
            }
         }
         &:after{
            background-image: none;
            position:relative;
            border: none;
         } 
         &.mobile{
            // display: block;
         }
      }
      /* Navbar Suvnav Numbers*/
      .subnav.numbers{
         min-height:31px;
         overflow:auto;
         li{
            float:left;
            min-width: 36px;
            text-align: center;
            &:hover a{
            }
            &.active{
               a{
               }
            }
            a{
               padding: 5px 0;
               border-top: 0;
               &:after{
                  width:auto;
                  height:auto;
                  position:relative;
                  padding-right: 0 !important;
                  border-right: none;

               }
            }
         }
      }

      .dropdown-submenu{
         > .dropdown-menu{
            margin-left: 0 !important;
         }
         > a:after{
            height: auto;
         }
      }
   }
}
/* Fin navegacion */