Template:CPU CHINA/VueNavCss

/* Vue style navbar */

.vnb {

   background: #56CCF2 !important;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2) !important;  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #2F80ED, #56CCF2) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   font-family: 'Raleway', sans-serif !Impact;
   padding-top: 30px;
   padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height: auto;

} .vnb * {

   box-sizing: border-box;

} .vnb a {

   text-decoration: none;

} .tippy-tooltip {

   padding: 0;

}

.vnb-image {

   width: 200px;
   height: auto;

}

/*# sourceMappingURL=vue-navigation-bar.vue.map */.vnb__brand-image-wrapper {

                                                     padding-left: 30px;
                                                 }

.vnb__brand-image-wrapper__link__image {

   max-height: 70px;

} .vnb-image {

   max-width: 100%;
   height: auto;

}

/*# sourceMappingURL=BrandImage.vue.map */.vnb__menu-options {

                                             display: flex;
                                             flex-direction: row;
                                             align-items: center;
                                         }

.vnb__menu-options--left {

   margin-right: auto;
   justify-content: flex-start;
   padding-left: 30px;

} .vnb__menu-options--right {

   margin-left: auto;
   justify-content: flex-end;
   padding-right: 20px;

} .vnb__menu-options__option:not(:last-child) {

   margin-right: 20px;

}

/*# sourceMappingURL=MenuOptions.vue.map */.vnb__collapse-button {

                                              cursor: pointer;
                                              border: 0;
                                              background: transparent;
                                              margin-right: 10px;
                                          }

.vnb__collapse-button:hover {

   opacity: 0.75;

} .vnb__collapse-button__image {

   max-height: 30px;

}

/*# sourceMappingURL=CollapseButton.vue.map */.vnb__popup {

                                                 background: #fff;
                                                 position: absolute;
                                                 left: 10px;
                                                 top: 10px;
                                                 right: 10px;
                                                 display: flex;
                                                 flex-direction: column;
                                                 perspective: 2000px;
                                                 box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
                                                 margin-bottom: 20px;
                                                 z-index: 100000;
                                             }

.vnb__popup__top {

   padding: 15px 24px 0;
   border-top: 1px solid #e0e0e0;
   border-left: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;

} .vnb__popup__top__image {

   max-width: 27px;
   margin-bottom: 5px;

} .vnb__popup__top__close-button {

   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   border: 0;
   background: transparent;

} .vnb__popup__top__close-button:hover {

   opacity: 0.75;

} .vnb__popup__top__close-button__image {

   max-height: 15px;

} .vnb__popup__bottom {

   background: #fff;
   padding: 10px 0 10px;
   border-left: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;

} .vnb__popup__bottom__menu-options {

   list-style-type: none;
   padding-left: 0;
   display: flex;
   flex-direction: column;

} .vnb__popup__bottom__menu-options__option:not(:last-child) {

   margin-bottom: 10px;

} .vnb__popup__bottom__menu-options__option__link {

   padding: 30px 50px 20px 40px;
   color: white;
   font-weight: 500;
   display: inline-block;
   transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in;
   border-left: 2px solid #fff;
   width: 100%;

} .vnb__popup__bottom__menu-options__option__link:hover {

   color: white;
   text-decoration: none;
   background: #f3f3f3;
   border-left: 2px solid #007AFF;

} .vnb__popup__bottom__menu-options__option__link--no-highlight {

   padding: 12px 24px 6px;
   font-weight: 400;
   font-size: 0.8rem;
   color: white;

} .vnb__popup__bottom__menu-options__option__link--no-highlight:hover {

   color: white;
   background: #fff;
   border-left: 2px solid #fff;

} .vnb__popup__bottom__sub-menu-options {

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   font-size: 0.9rem;

} .vnb__popup__bottom__sub-menu-options__option {

   width: 100%;

} .vnb__popup__bottom__sub-menu-options__option__link {

   padding: 6px 24px;
   width: 100%;
   display: block;
   color: #666666;
   font-weight: 500;
   transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in;
   border-left: 2px solid #fff;

} .vnb__popup__bottom__sub-menu-options__option__link:hover {

   color: #333;
   text-decoration: none;
   background: #eee;
   border-left: 2px solid #333;

} .vnb__popup__bottom__sub-menu-options__option__link__sub-text {

   margin-top: 5px;
   display: block;
   font-size: 0.75rem;

} .vnb-image {

   width:200px;
   height: auto;

}

/*# sourceMappingURL=Popup.vue.map */.vnb__menu-options__option__link {

                                        cursor: pointer;
                                        font-weight: 500;
                                        color: ivory;
                                        transition: color 0.2s ease-in;
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center;
                                        justify-content: center;
                                    }

.vnb__menu-options__option__link:hover {

   color: white;
   text-decoration: none;

} .vnb__menu-options__option__arrow {

   margin-left: 8px;
   max-height: 5px;
   transition: transform 0.2s ease-in-out;

} .vnb__menu-options__option__arrow--hover {

   transform: rotate(180deg);

} .vnb__sub-menu-options {

   background: #fff;
   max-width: 500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 4px;
   padding: 10px 0;

} .vnb__sub-menu-options__option {

   min-width: 250px;
   max-width: 300px;

} .vnb__sub-menu-options__option__link {

   padding: 12px 12px;
   width: 100%;
   display: block;
   text-align: left;
   color: #666666;
   transition: color 0.2s ease-in, background 0.2s ease-in, border 0.2s ease-in;
   border-left: 2px solid #fff;

} .vnb__sub-menu-options__option__link:hover {

   color: #333;
   text-decoration: none;
   background: #f3f3f3;
   border-left: 2px solid #007AFF;

} .vnb__sub-menu-options__option__link__sub-text {

   margin-top: 5px;
   display: block;
   font-size: 0.75rem;

} .vnb__sub-menu-options__option__hr {

   margin-top: 10px;
   margin-bottom: 10px;
   border-color: rgba(0, 0, 0, 0.1);

}

/*# sourceMappingURL=DesktopMenuItemLink.vue.map */.vnb__menu-options__option__button {

                                                      display: inline-block;
                                                      font-weight: 400;
                                                      color: #fff;
                                                      text-align: center;
                                                      vertical-align: middle;
                                                      user-select: none;
                                                      font-size: 0.9rem;
                                                      line-height: 1.0;
                                                      border-radius: .25rem;
                                                      text-transform: uppercase;
                                                      letter-spacing: 1px;
                                                      padding: 0.5rem 1rem;
                                                      transition: background 0.2s ease-in;
                                                  }

.vnb-button {

   background: #007AFF;

} .vnb-button:hover {

   color: #fff;
   background: #0062cc;
   text-decoration: none;

}

/*# sourceMappingURL=DesktopMenuItemButton.vue.map */.vnb__menu-options__option__spacer {

                                                        width: 30px;
                                                    }

/*# sourceMappingURL=DesktopMenuItemSpacer.vue.map */.tippy-tooltip.light-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-tooltip.light-theme[x-placement^=top] .tippy-arrow{border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=left] .tippy-arrow{border-left:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}.tippy-tooltip.light-theme[x-placement^=right] .tippy-arrow{border-right:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}