@import "lb-vars";

/* El  menu de sectores por botones, horizontal*/
div.sectoresmenu {
   overflow: hidden;
   width: auto;
   margin: 0 auto 0 auto;
   text-align: center;

   ul {
      margin: 0;
      padding: 0;
      list-style: none outside;
      text-align: center;

      li {
         overflow: hidden;
         vertical-align: top;
         display: inline-block;
         zoom: 1;
         margin: 0 0 4px 0;
         padding: 0;
         width: 111px;
         height: 35px;

         a {
            display: block;
            width: 111px;
            height: 35px;
            margin: 0;
            padding: 3px 0 0 0;
            font-size: 13px;
            line-height: 13px;
            font-variant: small-caps;
            text-align: center;
            color: #e4b165;
            background-image: url("../res/barra_sup_block.png");
            background-repeat: no-repeat;
            background-position: 0 0;
            transition: all 0.0s ease-in-out;

            &:hover {
               padding:5px 0 0 2px;
               background-position: 0 -35px;
            }
         }

         &.selected {
            a {
               color: #F7D653;
               font-size: 14px;
               line-height: 14px;
               letter-spacing: -1px;
               padding: 3px 0 0 0; /* Como el a en el li normal */
               background-position: 0 -70px;
            }
         }

         &.allSectors {
            a {
               color: #76cb78;
               font-weight: bold;
            }
         }
      }
   }
}





/* El  menu de sectores por botones, horizontal*/
div.sectoresmenulateral {
   overflow: hidden;
   width: auto;
   margin: 0 auto 0 auto;
   text-align: center;

   ul {
      margin: 0;
      padding: 0;
      width: 100%;
      list-style: none;
      text-align: left;
      box-sizing: border-box;

      li {
         overflow: hidden;
         display: inline-block;
         margin: 0 0 0 0;
         padding: 0;
         width: 100%;
         height: 2rem;
         background-color: @color-menu-bg;
         border-bottom: 1px solid @color-item-list-top-modeselector-bg;

         a {
            display: flex;
            justify-content: left;
            align-items: center;

            width: calc(100% - 5px);
            height: 100%;
            margin: 0;
            padding-left: 5px;
            font-size: 0.8rem;
            line-height: 0.8rem;
            text-align: left;
            //font-variant: small-caps;
            text-transform: uppercase;
            vertical-align: middle;
            color: @color-menu;
            transition: all 0.1s ease-in-out;

            &:hover {
               background-color: @color-menu-hover-bg;
               color: @color-main;
            }
         }

         &:nth-child(1) {
            border-top: 1px solid @color-item-list-top-modeselector-bg;
         }
         &.selected {
            a {
               color: @color-menu-selected;
               background-color: @color-menu-selected-bg;
            }
         }

         &.allSectors {
            a {
               opacity: 0.8;
               font-weight: bold;
            }
         }
      }
   }
}