@import "lb-vars";

/* El menú principal y demás elementos que están con él*/
div.mm {
   position: relative;
   height: 43px;
   background: transparent url("../res/lbr_libre.png") repeat-x bottom;

   form#lb_form_buscar {
      position: absolute;
      top: 2px;
      left: 0;
      width: 232px;
      height: 43px;
   }

   div.fecha {
      position: absolute;
      top: 10px;
      right: 0;

      span {
         color: #9d723d;
         font-size: 12px;
         padding: 3px 8px 3px 8px;
         cursor: default;
         background-color: rgba(0, 0, 0, 0.5);
         border-radius: 8px;
      }
   }

   ul {
      position: absolute;
      top: 0;
      left: 232px;
      height: 43px;

      li {
         float: left;

         &.oculto {
            display: none;
         }

         a {
            display: block;
            width: 97px;
            height: 43px;
            background-image: url("../res/labarata_web_menu_sprites.png");
            background-repeat: no-repeat;
            transition: all 0.0s ease-in-out;
         }

         &.tien {
            a {
               background-position: 0 -43px;

               &:hover {
                  background-position: 0 -86px;
               }

               &.selected {
                  background-position: 0 0;
               }
            }
         }

         &.rece {
            a {
               background-position: -97px -43px;

               &:hover {
                  background-position: -97px -86px;
               }

               &.selected {
                  background-position: -97px 0;
               }
            }
         }

         &.info {
            a {
               background-position: -388px -43px;

               &:hover {
                  background-position: -388px -86px;
               }

               &.selected {
                  background-position: -388px 0;
               }
            }
         }

         &.pers {
            a {
               background-position: -194px -43px;

               &:hover {
                  background-position: -194px -86px;
               }

               &.selected {
                  background-position: -194px 0;
               }
            }
         }

         &.pedi {
            a {
               background-position: -485px -43px;

               &:hover {
                  background-position: -485px -86px;
               }

               &.selected {
                  background-position: -485px 0;
               }
            }
         }
      }
   }
}









/* El div que muestra el mensaje de cerrado por vacaciones */
div.istorecerradomsg {
   padding: 10px 4px 10px 4px;
   margin: 8px auto 0 auto;
   width: 500px;
   text-align: center;
   font-size: 18px;
   color: #ffffff;
   background: #2f602d;
   border: 1px solid black;
   border-radius: 5px;
}

div#iStoreCerradoOverlay {
   position: absolute;
   top: 80px;
   left: 0;
   width: 100%;
   height: 426px;
   pointer-events: none;

   div.iStoreCerradoOverlayGFX{
      width: 528px;
      height: 426px;
      margin: 0 auto;
      background: url("../res/img-cerrado-por-vacaciones-brown.png");
      cursor: pointer;
      pointer-events: all;
   }
}





/* La cesta que mola */
div.cesta {
   position: relative;
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: 0 0;
   width: 154px;
   height: 172px;
   margin: 0 0 0 16px;

   > a {
      display: block;
      overflow: auto;
      width: 154px;
      height: 172px;
   }

   img {
      position: absolute;

      &.cesta-over {
         top: 0;
         left: 0;
         z-index: 99;
      }

      &.item {
         box-shadow: 0 0 5px #000;
         left: 26px;
         top: 77px;
         z-index: 90;
         transform: rotate(-15deg);
      }

      &.item0 {
         left: 40px;
         top: 74px;
         z-index: 89;
         transform: rotate(15deg);
      }

      &.item1 {
         z-index: 88;
         left: 68px;
         top: 74px;
         transform: rotate(-15deg);
      }

      &.item2 {
         z-index: 87;
         left: 17px;
         top: 63px;
         transform: rotate(-15deg);
      }

      &.item3 {
         z-index: 86;
         left: 72px;
         top: 56px;
         transform: rotate(-70deg);
      }

      &.item4 {
         z-index: 85;
         left: 51px;
         top: 48px;
         transform: rotate(-23deg);
      }

      &.item5 {
         z-index: 84;
         left: 17px;
         top: 41px;
         transform: rotate(43deg);
      }

      &.item6 {
         z-index: 83;
         left: 50px;
         top: 32px;
         transform: rotate(-12deg);
      }

      &.item7 {
         z-index: 82;
         left: 74px;
         top: 31px;
         transform: rotate(109deg);
      }

      &.item8 {
         z-index: 81;
         left: 27px;
         top: 24px;
         transform: rotate(64deg);
      }
   }
}





/* La firma de abajo */
div.signature {
   position: relative;
   font-size: 0.6rem;
   font-style: normal;
   font-family: @font-docs;
   text-align: center;
   color: @color-main-70;
   background-color: @color-main;
   padding: 8px 0 8px;

   > div {
      &.firstline {
         cursor: default;
         strong {
            font-weight: bold;
         }

         a {
            color: @color-main-70;
            &:hover {
               color: @color-main-80;
            }
         }
      }

      &.secondline {
         margin: 3px 0 0 0;
         font-family: @font-mono;
         color: @color-main-55;
         cursor: default;

         &:hover {
            color: @color-main-80;

            span {
               color: @color-main-70;
            }
         }
      }
   }
}




/* Side seals (en el panel lateral)*/

div.sideseals {
   position: relative;
   width: 200px;
   height: 64px;
   margin: 0 0 16px 0;

   div {
      &.seal {
         position: absolute;
         top: 0;
         width: 64px;
         height: 64px;
         background-repeat: no-repeat;
         background-size: contain;
         transition: all 0.3s ease-in-out;
         cursor: pointer;
         z-index: 200;
      }

      &.seal-a {
         left: 2px;
         background-image: url("../res/seals/seal-pegatina-cabrales-la-barata.png");
      }

      &.seal-b {
         left: 68px;
         background-image: url("../res/seals/seal-pegatina-gamoneu-la-barata.png");
      }

      &.seal-c {
         left: 136px;
         background-image: url("../res/seals/seal-pegatina-beyos-la-barata.png");
      }
   }

   div.seal:hover, div.sealActive {
      width: 200px;
      height: 200px;
   }
}






/*
La notificación de Cookies
*/

div#cookieNotification {
   position: fixed;
   top: -128px;
   left: 0;
   width: 100%;
   height: 64px;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1002;
   cursor: pointer;
   transition: all 0.9s ease-in-out;
   font-size: 1rem;

   div.contents {
      position: relative;
      margin: 10px 8px 8px 120px;
      color: @color-neutral-90;
      font-size: 1em;

      a {
         color: @color-main-80;
         text-decoration: underline;
         &:hover {
            color: @color-main-70;
         }
      }

      div.imgIcon {
         position: absolute;
         top: -10px;
         left: -120px;
         width: 99px;
         height: 64px;
         background-repeat: no-repeat;
         background-image: url("../res/cookies_plate-64px.png");
         background-size: contain;

         a {
            display: block;
            width: 100%;
            height: 100%;
         }
      }
   }
}
div.cookieNotificationshown {
   top: 0 !important;
}



span.cookieNotificationReset {
   display: block;
   width: 100%;
   border-top: 1px solid @color-neutral-70;
   cursor: pointer;
   font-family: @font-mono;
   color: @color-main-70;
   font-weight: normal;
   font-size: 0.9em;

   &:hover {
      color: @color-alert-accent;
   }
}



/**
Ajustes en el video de inicio
 */
div#welcomeVideo {
   div.close {
      background-color: @color-main;

      span {
         color: @color-main-100;
      }

      &:hover {
         background-color: @color-main;
         opacity: 0.7;
      }
   }
}

div.welcomeVideoLauncher {
   border-radius: 3px;
   padding: 4px;

   span {
      background-color: transparent;
      background-image: url("../res/v2/icons/camara-de-video-con-boton-de-reproduccion-64px-white.png");
      &:hover {
         background-color: transparent;
         opacity: 0.8;
      }
   }

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