@charset "utf-8";

/* CSS Document */
.toolbar-item, .toolbar-layer {
    background: url(../Images/toolbar.png) no-repeat;
}

.toolbar {
    position: fixed;
    right: 0px;
    bottom: 50px;
}
/*假设网页宽度为1200px，导航条在右侧悬浮*/
.toolbar-item {
    display: block;
    width: 52px;
    height: 52px;
    margin-top: 1px;
    position: relative;
    -moz-transition: background-position 1s;
    -ms-transition: background-position 1s;
    -o-moz-transition: background-position 1s;
    -webkit-moz-transition: background-position 1s;
    transition: background-position 1s;
}

    .toolbar-item:hover .toolbar-layer {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

.toolbar-item-weixin {
    background-position: 0 -798px;
}

    .toolbar-item-weixin:hover {
        background-position: 0 -860px;
    }

    .toolbar-item-weixin .toolbar-layer {
        height: 200px;
        background-position: 0 -928px;
    }

.toolbar-item-dashang {
    background-position: 0 -426px;
}

    .toolbar-item-dashang:hover {
        background-position: 0 -488px;
    }

    .toolbar-item-dashang .toolbar-layer {
        height: 194px;
        background-position: 0 -222px;
    }

.toolbar-item-app {
    background-position: 0 -550px;
}

    .toolbar-item-app:hover {
        background-position: 0 -612px;
    }

    .toolbar-item-app .toolbar-layer {
        height: 212px;
        background-position: 0 0;
    }

.toolbar-item-top {
    background-position: 0 -674px;
}

    .toolbar-item-top:hover {
        background-position: 0 -736px;
    }

.toolbar-layer {
    position: absolute;
    right: 46px;
    bottom: -10px;
    width: 172px;
    opacity: 0;
    filter: alpha(opacity=0);
    transform-origin: 95% 95%;
    -moz-transform-origin: 95% 95%;
    -ms-transform-origin: 95% 95%;
    -o-transform-origin: 95% 95%;
    -webkit-transform-origin: 95% 95%;
    transform: scale(0.01);
    -moz-transform: scale(0.01);
    -ms-transform: scale(0.01);
    -o-transform: scale(0.01);
    -webkit-transform: scale(0.01);
    transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
}

.choose {
    background-position: 0 -860px;
}

    .choose .toolbar-layer {
        height: 200px;
        background-position: 0 -928px;
    }

    .choose .toolbar-layer {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }