﻿/*#region Variables*/
/*#endregion*/
/*#region Avatar selector in category page*/
/*.sharing-buttons {
    float: right;
    margin: 0;
}

.product-details-page .vm-upload-tools-pp .sharing-buttons {
    float: left !important;
}

.sharing-buttons span {
    float: left;
    margin: 3px 5px 0 0;
}*/

/*.wishlist-page .sharing-clear {
    float: right;
    margin: 3px 0 0 10px;
    color: #ff7800;
    text-decoration: underline;
    cursor: pointer;
}

.sharing-buttons .facebook-sharing-button {
    background: url("images/sharingbuttons.png");
    display: block;
    float: left;
    height: 24px;
    width: 24px;
    margin: 0 2px;
    cursor: pointer;
    border: 2px solid #fff;
}

    .sharing-buttons .facebook-sharing-button > span {
        height: 22px;
        width: 22px;
        margin: 0;
    }

.sharing-buttons .selected {
    border: 2px solid #ff7800 !important;
}

#vm-downloadload-image {
    margin-left: -7px !important;
}

.sharing-buttons .twiter-sharing-button {
    background: url("images/sharingbuttons.png");
    display: block;
    float: left;
    height: 24px;
    width: 24px;
    margin: 0 2px;
    background-position: -22px 0;
    cursor: pointer;
    border: 2px solid #fff;
}*/

#avatar-carousel-container,
#customer-carousel-container {
    margin-top: 6px;
}

/*.sharing-buttons .weibo-sharing-button {
    background: url("images/sharingbuttons.png");
    display: block;
    float: left;
    height: 24px;
    width: 24px;
    margin: 0 2px;
    background-position: -44px 0;
    cursor: pointer;
    border: 2px solid #fff;
}*/

#tabs a, .product-collateral-tab .swap-tab a {
    color: #346177;
    outline: medium none;
    background: #dddddd;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
    height: 32px;
    margin-left: -2px;
    line-height: 13px;
}

#tabs .active a, .product-collateral-tab .active a {
    color: #f2961d;
    background: white;
}

#tabs .active .product-tab-icon {
    background: url("images/glyphicons-halflings-orgran.png") repeat scroll -240px 0 rgba(0, 0, 0, 0);
    float: left;
    width: 16px;
    height: 16px;
}

#tabs .product-tab-icon {
    background: url("images/glyphicons-halflings-blue.png") repeat scroll -240px 0 rgba(0, 0, 0, 0);
    float: left;
    width: 16px;
    height: 16px;
}

#tabs .active .try-on-tab-icon {
    background: url("images/glyphicons-halflings-orgran.png") repeat scroll -120px -47px rgba(0, 0, 0, 0);
    float: left;
    width: 16px;
    height: 16px;
}

#tabs .try-on-tab-icon {
    background: url("images/glyphicons-halflings-blue.png") repeat scroll -120px -47px rgba(0, 0, 0, 0);
    float: left;
    width: 16px;
    height: 16px;
}

.category-page .avatar-selector,
.home-page .avatar-selector,
.recently-added-products-page .avatar-selector {
    height: auto;
    width: 100%;
}

    .category-page .avatar-selector .nav-tabs .active a,
    .home-page .avatar-selector .nav-tabs .active a,
    .recently-added-products-page .avatar-selector .nav-tabs .active a {
        background-color: #ffffff;
    }

    .category-page .avatar-selector .tab-content,
    .home-page .avatar-selector .tab-content,
    .recently-added-products-page .avatar-selector .tab-content {
        margin-top: 20px;
    }

        .category-page .avatar-selector .tab-content #try-on-view,
        .home-page .avatar-selector .tab-content #try-on-view,
        .recently-added-products-page .avatar-selector .tab-content #try-on-view {
            padding: 25px 6%;
            border: 10px solid #eee;
        }

            .category-page .avatar-selector .tab-content #try-on-view .tryon-border,
            .home-page .avatar-selector .tab-content #try-on-view .tryon-border,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view .tryon-border {
                height: 180px;
                /*padding-left: 345px;*/
                position: relative;
            }

            .category-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp,
            .home-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp {
                height: 73%;
                width: 305px;
                position: absolute;
                left: 0;
            }

                .category-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .vm-tools-header,
                .home-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .vm-tools-header,
                .recently-added-products-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .vm-tools-header {
                    margin-top: 20px;
                }

                .category-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .image,
                .home-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .image,
                .recently-added-products-page .avatar-selector .tab-content #try-on-view .vm-upload-tools-pp .image {
                    background: url("images/upload_face_img.png");
                    width: 95px;
                    height: 102px;
                    float: left;
                    background-size: 100% 100%;
                }

            .category-page .avatar-selector .tab-content #try-on-view .vm-tools-header,
            .home-page .avatar-selector .tab-content #try-on-view .vm-tools-header,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view .vm-tools-header {
                color: #346177;
                font: bold 16px "Heiti TC", "LiHei Pro", "微軟正黑體", "Microsoft Jhenghei", "Arial", "Tahoma";
                margin-bottom: 10px;
            }

            .category-page .avatar-selector .tab-content #try-on-view .vm-tools-divider,
            .home-page .avatar-selector .tab-content #try-on-view .vm-tools-divider,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view .vm-tools-divider {
                height: 73%;
                background: url("images/vm_carousel_sprite.png") no-repeat scroll -62px -81px rgba(0, 0, 0, 0);
                width: 19px;
                position: absolute;
                left: 310px;
            }

            .category-page .avatar-selector .tab-content #try-on-view .pd-change,
            .home-page .avatar-selector .tab-content #try-on-view .pd-change,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view .pd-change {
                border-top: 1px solid #DDD;
                clear: both;
                padding-top: 10px;
            }

                .category-page .avatar-selector .tab-content #try-on-view .pd-change .login-to-upload,
                .home-page .avatar-selector .tab-content #try-on-view .pd-change .login-to-upload,
                .recently-added-products-page .avatar-selector .tab-content #try-on-view .pd-change .login-to-upload {
                    float: left;
                    text-align: left;
                    width: 50%;
                    margin-top: 15px;
                }

                .category-page .avatar-selector .tab-content #try-on-view .pd-change .pd-box,
                .home-page .avatar-selector .tab-content #try-on-view .pd-change .pd-box,
                .recently-added-products-page .avatar-selector .tab-content #try-on-view .pd-change .pd-box {
                    float: left;
                    text-align: right;
                    width: 50%;
                }

            .category-page .avatar-selector .tab-content #try-on-view #vm-change-pd-preview,
            .home-page .avatar-selector .tab-content #try-on-view #vm-change-pd-preview,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view #vm-change-pd-preview {
                margin: 10px auto;
            }

            .category-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-value,
            .home-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-value,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-value {
                text-align: center;
                width: 70px;
                height: 24px;
            }

            .category-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-btn,
            .home-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-btn,
            .recently-added-products-page .avatar-selector .tab-content #try-on-view #vm-pd-preview-btn {
                height: 24px;
                padding: 0 10px;
                color: #FFF;
                font: 14px "Heiti TC", "LiHei Pro", "微軟正黑體", "Microsoft Jhenghei", "Arial", "Tahoma";
            }

        .category-page .avatar-selector .tab-content .how-to-share,
        .home-page .avatar-selector .tab-content .how-to-share,
        .recently-added-products-page .avatar-selector .tab-content .how-to-share {
            float: left;
            margin-top: 15px;
            text-decoration: underline;
            color: #f2961d;
        }

    .category-page .avatar-selector .breadcrumbs-full-divider,
    .home-page .avatar-selector .breadcrumbs-full-divider,
    .recently-added-products-page .avatar-selector .breadcrumbs-full-divider {
        background: url("images/dot-line.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        width: 100%;
        height: 3px;
        margin: 10px 0;
    }

/*.home-page .sharing-buttons,
.category-page .sharing-buttons {
    display: none;
}*/

.home-page .how-to-share,
.category-page .how-to-share {
    display: none;
}

/*.wishlist-page .sharing-buttons {
    display: block;
}*/
/*#endregion*/
/*#region Avatar selector in product detail page*/
/*#endregion*/
/* Added By Sang Dao - 15/08/2014 */
.zoombox-hidden {
    display: none;
}

.zoom-in-picture {
    background: url("images/zoom_ctrl.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 18px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 18px;
    z-index: 999;
}

.frameImg {
    position: relative;
}

.tryonview-large {
    position: relative;
}

.tryonview-userface {
    position: relative;
    top: 0;
    left: 0;
}

.tryonview-glasses {
    position: absolute;
    top: 0;
    left: 0;
}

.product-grid .product-item .picture .frameUserFace {
    height: auto;
    max-height: 100%;
    position: relative;
    z-index: 50;
    border: 1px solid #e8e8e8;
}

.product-grid .product-item .picture img.frameImg {
    position: absolute;
    z-index: 51;
    top: 0;
    left: 0;
    height: auto;
    max-height: 100%;
}

.product-grid .product-item .picture {
    position: relative;
}

.product-grid .product-item .pdImg a {
    display: block;
    height: 180px;
}

    .product-grid .product-item .pdImg a img {
        max-height: 100%;
    }

/* End By Sang Dao - 15/08/2014 */
.category-page .avatar-selector #vm-upload-image,
.home-page .avatar-selector #vm-upload-image {
    background-color: #4d7e96;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: block;
    margin: auto;
    width: 91px;
    text-align: center;
    font: bold 16px "Heiti TC", "LiHei Pro", "微軟正黑體", "Microsoft Jhenghei", "Arial", "Tahoma";
    padding: 5px;
    text-decoration: none;
}

    .category-page .avatar-selector #vm-upload-image:hover,
    .home-page .avatar-selector #vm-upload-image:hover {
        background-position: 0 -33px;
    }

.vm-carousel-container-pp {
    height: 73%;
    width: 100%;
    padding-left: 335px;
}

.product-details-page .vm-carousel-container-pp {
    padding-left: 0px !important;
}

.vm-carousel-container-pp .bx-wrapper {
    width: 100%;
    padding: 0 30px;
}

    .vm-carousel-container-pp .bx-wrapper .vm-bx-prev,
    .vm-carousel-container-pp .bx-wrapper .vm-bx-next {
        background: url("images/vm_carousel_sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 80px;
        display: block;
        text-indent: -999999px;
        width: 30px;
        float: left;
        cursor: pointer;
    }

    .vm-carousel-container-pp .bx-wrapper .vm-bx-prev {
        margin-left: -30px;
        background-position: 0 -81px;
    }

        .vm-carousel-container-pp .bx-wrapper .vm-bx-prev:hover {
            background-position: 0 -162px;
        }

    .vm-carousel-container-pp .bx-wrapper .bx-window {
        float: left;
        height: 80px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .vm-carousel-container-pp .bx-wrapper .vm-bx-next {
        margin-right: -30px;
        background-position: -32px -81px;
    }

        .vm-carousel-container-pp .bx-wrapper .vm-bx-next:hover {
            background-position: -32px -162px;
        }

.vm-carousel-container {
    clear: both;
    height: 81px;
    margin: auto;
    width: 79%;
}

.delete_face_back {
    /*background-color: rgba(0, 0, 0, 0.5);*/
    display: none;
    margin: 0 36px;
    position: absolute;
    width: 14px !important;
}

.delete_face {
    background: url("../img/delete_face.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 14px;
    opacity: 0.7;
    width: 14px;
}

.manage-images-enable,
.manage-images-disable {
    cursor: pointer;
    text-decoration: underline;
    margin-top: 3px;
    color: #f2961d;
    font-size: 12px;
}

.face-image-carousel {
    width: 100%;
}

.pager.global-carousel-item.pager-selected,
.pager.global-carousel-item:hover {
    border: 3px solid #0069AA;
}

.pager.global-carousel-item {
    border: 3px solid #FFFFFF;
    /*float: left;*/
    height: 61px;
    margin: 7px 5px;
    /*width: 50px;*/
    cursor: pointer;
}

.gallery .vm-carousel-container-pp {
    float: none;
}

.gallery .picture-tryonview {
    height: 307px;
    position: relative;
    margin-bottom: 10px;
    padding: 0 !important;
}

.gallery .picture-frame {
    height: 306px;
    width: 100%;
}

.gallery .vm-upload-tools-pp {
    float: none;
    margin: 10px 0;
}

#try-on-view .uploadbuttons {
    float: left;
    width: 68%;
}

    #try-on-view .uploadbuttons .vm-tools-header {
        text-align: center;
    }
/*#region Change Pd to preview*/
.gallery #vm-change-pd-preview div {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-size: 12px;
    padding-left: 3px;
}

.gallery #vm-pd-preview-value {
    width: 53px;
    text-align: center;
}

.gallery #vm-pd-preview-btn {
    background-color: #47a7bf;
    border: medium none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    height: 22px;
    padding: 0 10px;
}

.product-details-page #vm-upload-image {
    text-decoration: underline;
    margin-top: 3px;
}

.product-details-page .vm-carousel-container {
    margin: auto;
    width: 79%;
}

/*.product-details-page .vm-login-txt.vm-login-txt-pp > a {
    background: url("images/sharingbuttons.png") repeat scroll -66px 0 rgba(0, 0, 0, 0);
    display: block;
    height: 22px;
    width: 22px;
}*/

#vm-save-access-img .vm-login-txt a {
    margin-left: -7px;
    color: #f2961d;
}

#vm-save-access-img .vm-login-txt-pp > a {
    margin-left: 10px;
    color: #f2961d;
}
/*#endregion*/
