.user-me-page {
    font-size: 12px;
    line-height: 150%;

    form {
        display: inline;
    }

    strong {
        font-weight: bold;
    }

    .clear {
        zoom: 1;
    }

    .clear:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }

    .userinfo-edit {
        form {
            display: none;
        }

        h2.title {
            background-image: resolve(home/edit/title-informations.png);
        }
    }

    .account,
    .email,
    .gift,
    .mobile,
    .userpwd {
        font-size: 12px;
        line-height: 150%;

        .title {
            position: relative;
        }

        .title h2 {
            height: 16px;
            font-size: 14px;
            font-weight: bold;
            line-height: 16px;
            position: absolute;
            top: 50%;
            margin-top: -8px;
        }

        .title h2 span {
            font-size: 10px;
            -webkit-transform: scale(0.85);
            display: inline-block;
            line-height: 15px;
            font-weight: normal;
            padding-left: 0;
        }
    }

    .address {
        font-family: arial, "Microsoft YaHei";

        a {
            color: #468fa2;
            text-decoration: none;
        }

        .a-underline {
            text-decoration: underline;
        }

        &.block {
            border: none;
        }

        input[type="button"] {
            margin-top: 0;
        }

        input#address {
            width: 340px;
        }

        .title {
            position: relative;
        }

        .title h2 {
            width: 66px;
            height: 16px;
            background: resolve(home/edit/title-address.png) no-repeat;
            text-indent: -999em;
            position: absolute;
            top: 50%;
            margin-top: -8px;
        }

        .main {
            width: 798px;
            padding: 10px 1px 1px;
            float: left;
            border: 1px solid #dedede;
            border-radius: 2px;
        }

        .address-tip {
            margin: 0 10px 6px;

            > p {
                padding: 4px 10px;
                line-height: 1.5;
                color: #999;
                background-color: #f0f0f0;
            }
        }

        .address-list {
            width: 776px;
            margin: 0 10px;
            border: 1px #e6e6e6 solid;
            border-bottom: 0;
            float: left;
        }

        .address-content {
            width: 756px;
            padding: 10px;
            border-bottom: 1px #e6e6e6 solid;
            float: left;

            &.preferred {
                background: #fdfcdd;
                color: #333;
            }
        }

        .address-detail {
            width: 596px;
            float: left;
        }

        .address-edit {
            width: 150px;
            padding: 10px 0 10px 10px;
            text-align: center;
            float: left;
        }
    }

    .btn-c3 {
        height: 22px;
        background: resolve(home/edit/btn_hs.png) no-repeat left -66px;
        padding-left: 8px;
        display: inline-block;

        span {
            height: 22px;
            line-height: 21px;
            background: resolve(home/edit/btn_hs.png) no-repeat right -66px;
            padding-right: 10px;
            display: inline-block;
            cursor: pointer;
            color: #fff;
        }
    }

    .btn-c2 {
        height: 22px;
        background: resolve(home/edit/btn_hs.png) no-repeat left -44px;
        padding-left: 8px;
        display: inline-block;
    }

    .btn-c2 span {
        height: 22px;
        line-height: 21px;
        background: resolve(home/edit/btn_hs.png) no-repeat right -44px;
        padding-right: 10px;
        display: inline-block;
        cursor: pointer;
        color: #b3b3b3;
    }

    .main-info {
        border-top: 1px solid #ddd;
        padding: 20px 10px 10px;

        .p1 {
            padding-bottom: 10px;
            font-weight: bold;
        }

        .blue2 {
            color: #468fa2;
        }
    }

    .block {
        min-height: 375px;
        height: auto;

        form.first {
            display: block;
        }

        form.gift-cardform {
            display: block;
        }

        form.pwdform {
            display: block;
        }
    }

    .edit-box {
        padding: 10px 11px 11px;
    }

    .form-group {
        height: 30px;
        border: 1px #fff solid;
        margin-bottom: 2px;
        line-height: 22px;
        font-size: 12px;
        font-family: Arial, helvetica, sans-serif;

        label {
            width: 80px;
            text-align: right;
            color: #333;
            float: left;
        }
    }

    .plain {
        color: #666;
        font-weight: bold;
    }

    .width-300 {
        width: 300px;
    }

    .width-150 {
        width: 150px;
    }

    .input-1 {
        height: 20px;
        line-height: 20px;
        color: #333;
        border: 1px #c9c9c9 solid;
        background: resolve(home/edit/input_1.png) repeat-x #fff;
        vertical-align: top;
    }

    .btn-b1 {
        width: 118px;
        height: 34px;
        border: 0;
        background: resolve(home/edit/btn_b1.png) no-repeat;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        padding-right: 10px;
        cursor: pointer;
        display: inline-block;
        margin-top: 12px;
        margin-left: 80px;
    }

    #btn-reset {
        margin-left: 0;
    }

    .tips-p {
        margin-left: 10px;
        color: #999;
        display: inline-block;
    }

    .box {
        width: 778px;
        clear: both;
        padding-top: 10px;
        margin-bottom: 10px;
        float: left;
    }

    .sub-title {
        clear: both;
        height: 21px;
        line-height: 21px;
        padding-left: 23px;
        background: resolve(home/edit/ico_arrow2.png) no-repeat 5px 5px #efefef;
        border: 1px #e6e6e6 solid;
        font-size: 12px;
        color: #333;
        font-weight: normal;
        cursor: pointer;
        margin-bottom: 2px;

        .more {
            padding: 2px 10px 0 0;
            float: right;
        }

        .btn-edit {
            width: 37px;
            height: 17px;
            background: resolve(home/edit/btn_edit.png) no-repeat;
            display: inline-block;
            overflow: hidden;
            border: 0;
        }
    }

    .user-personal-info {
        .user-info {
            width: 570px;
            float: left;
        }

        .sub-tips {
            color: #e52828;
        }

        .tips-url {
            color: #e52828;
            text-decoration: underline;
        }

        .user-profile {
            width: 148px;
            padding: 18px;
            text-align: center;
            float: right;
            border-left: 1px solid #e0e0e0;

            img {
                width: 100px;
                height: 100px;
                margin-bottom: 10px;
            }
        }
    }

    .user-favorite-info {
        ul {
            clear: both;
            width: 750px;
            padding: 0 20px 0 0;
            float: left;

            li {
                height: 22px;
                padding-left: 20px;
                float: left;
                font-size: 12px;
            }
        }

        .brand-box {
            width: 725px;
            margin: 0 0 10px 20px;
            padding: 5px 10px 5px 0;
            border: 1px #ccc solid;
            background: #f8f8f8;
            color: #000;

            li {
                height: 22px;
                line-height: 22px;
                padding: 0 0 0 10px;
                float: left;
                display: inline-block;
                white-space: nowrap;
            }
        }

        .btn-del {
            height: 20px;
            line-height: 20px;
            border: 0;
            padding-left: 18px;
            background: resolve(home/edit/ico_del.png) no-repeat 0 2px;
            color: #468fa2;
            display: inline-block;
            overflow: hidden;
            text-decoration: none;
            vertical-align: middle;
        }

        .btn-submit-sm {
            width: 56px;
            height: 20px;
            border: 0;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            padding: 0;
            margin: 0;
            background: resolve(home/edit/btn_s1_z2.png) repeat-x;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        span {
            color: #999;
            line-height: 25px;
            display: inline-block;
        }

        .form-group {
            clear: both;
            width: 730px;
            padding: 0 20px 5px;
            float: left;
        }
    }

    .account-row {
        padding: 30px 0;
        border-bottom: 1px solid #ddd;

        .content {
            height: 32px;
            line-height: 32px;
            position: relative;

            div {
                float: left;
                display: inline-block;
            }

            .left-content {
                width: 200px;
            }

            .middle-content {
                width: 500px;

                .tip {
                    color: #666;
                }

                .tip.red {
                    color: #e01;
                }
            }

            .right-content {
                width: 75px;
                height: 20px;
                line-height: 20px;
                position: absolute;
                top: 50%;
                margin-top: -10px;
                text-align: center;
            }
        }

        .center {
            text-align: center;
        }

        a {
            text-decoration: none;
            color: #666;
            outline: none;
        }

        [class^="icon-"],
        [class*=" icon-"] {
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
            display: inline-block;
            padding-left: 42px;
            margin-left: 20px;
        }

        .icon-ok {
            background: resolve(home/edit/icon-32.png) no-repeat 0 0;
        }

        .icon-warning {
            background: resolve(home/edit/icon-32.png) no-repeat 0 -32px;
        }

        .account-type {
            font-size: 18px;
            line-height: 32px;
            display: inline-block;
            padding-left: 20px;
        }
    }

    .button-icon20 {
        padding-left: 5px;
        background: resolve(home/edit/btn_bg_20.png) no-repeat left 0;
        display: inline-block;
        cursor: pointer;
    }

    .button-icon20 i {
        font-style: normal;
        background: resolve(home/edit/btn_bg_20.png) repeat-x left -20px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    .button-sliver20 i {
        background-position: left -80px;
        width: 52px;
    }

    .button-icon20 span {
        background: resolve(home/edit/btn_bg_20.png) no-repeat right -40px;
        display: inline-block;
        padding-right: 5px;
    }

    .button-sliver20 span {
        background-position: right -100px;
    }

    .button-sliver20 {
        background-position: left -60px;
    }

    .gift-box {
        padding: 10px 11px 11px;

        h2 {
            height: 16px;
            font-size: 14px;
            font-weight: bold;
            line-height: 16px;
        }

        li {
            font-size: 12px;
            font-family: arial, "Microsoft YaHei";
            margin-bottom: 25px;
        }

        .gift-input {
            width: 60px;
            height: 20px;
            line-height: 20px;
            color: #333;
            border: 1px #c9c9c9 solid;
            background: resolve(home/edit/input_1.png) repeat-x #fff;
        }

        .gift-error {
            color: red;
            margin-left: 10px;
        }

        #imgcode {
            border: 0;
            vertical-align: middle;
            outline: none;
            cursor: pointer;
        }

        .captcha-img {
            display: inline-block;
            position: relative;

            .img-check-tip {
                top: 120px;
            }
        }

        .check-img {
            color: #468fa2;
            text-decoration: underline;
        }

        .btn-b1 {
            margin: 0;
        }
    }

    .form-error {
        background: resolve(home/onError.png) no-repeat 5px 9px #fff2e8;
        padding-left: 25px;
        padding-right: 5px;
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        display: inline-block;
        color: #e8044f;
        margin-left: 5px;
    }

    .form-success {
        background: resolve(home/onCorrect.png) no-repeat 5px 9px #e9ffeb;
        padding-left: 25px;
        padding-right: 5px;
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        display: inline-block;
        color: #008000;
        margin-left: 5px;
    }

    .form-prompt,
    .form-focus {
        background: resolve(home/onShow.png) no-repeat 5px 9px;
        padding-left: 25px;
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        display: inline-block;
        color: #999;
    }

    .form-focus {
        background: resolve(home/onShow.png) no-repeat 5px 9px #e9f0ff;
        color: #666;
    }

    .add-address {
        width: 778px;
        padding: 10px 0;
        float: left;

        h2 {
            clear: both;
            height: 21px;
            line-height: 21px;
            padding-left: 23px;
            margin-left: 10px;
            background: resolve(home/edit/ico_arrow2.png) no-repeat 5px 5px #efefef;
            border: 1px #e6e6e6 solid;
            font-size: 12px;
            color: #333;
            font-weight: normal;
        }

        .form-group {
            width: 100%;
        }

        .form-group {
            height: auto;
            padding: 4px 0;
        }

        .add-address-detail {
            padding: 10px 0;

            .form-info {
                vertical-align: middle;
                line-height: 22px;
                height: 22px;
                background-position: 5px 5px;
            }
        }

        .btn-reset {
            margin-left: 0;
        }
    }

    .gift-ok,
    .gift-fail {
        padding: 50px 260px;
        height: 310px;
        display: block;

        h3 {
            font-size: 18px;
            height: 22px;
            line-height: 25px;
            padding-left: 25px;
            color: #000;
            background: resolve(home/edit/ico_i_sf.png) no-repeat;
        }

        .fail {
            background-position: 0 -22px;
        }

        .input-again {
            text-decoration: underline;
            color: #c4153a;

            &:active {
                color: #c4153a;
            }

            &:hover {
                color: #c4153a;
            }
        }

        .success {
            background-position: 0 0;
        }

        .currency-info {
            margin-top: 20px;
            padding-left: 25px;
        }

        .gift-red {
            color: #bc0029;
            font-size: 16px;
            font-weight: bold;
            margin-left: 5px;
        }

        .yoho-currency {
            font-size: 16px;
            font-weight: bold;
            color: #3e3e3e;
        }
    }

    .check-safe {
        padding: 10px 11px 11px;
        overflow: visible;
        min-height: 250px;

        .form-success {
            background: resolve(home/onCorrect.png) no-repeat 5px 9px;
        }

        .progress-bar {
            width: 780px;
            height: 24px;

            li {
                float: left;
                width: 260px;
                color: #666;
                text-align: center;
                height: 24px;
                line-height: 24px;
            }

            li.cur {
                color: #fff;
            }
        }

        .progress1 {
            background: resolve(home/edit/icon-bar.png) no-repeat;
        }

        .progress2 {
            background: resolve(home/edit/icon-bar.png) no-repeat 0 -24px;
        }

        .progress3 {
            background: resolve(home/edit/icon-bar.png) no-repeat 0 -48px;
        }

        input[type=text],
        input[type=password] {
            height: 28px;
            border: 1px solid #bebebe;
            line-height: 28px;
            padding: 0 5px;
        }

        .form-nav {
            padding: 30px 0;
            min-height: 250px;

            ul.user-form-ul {
                width: 690px;
                margin: 0 auto;
            }

            li.user-form-li {
                padding: 10px 0;
                float: left;
            }

            li.captcha-li {
                width: 100%;
            }

            .safe-form-l {
                float: left;
                width: 110px;
                margin-left: 110px;
                line-height: 30px;
                padding: 0 5px;
                text-align: right;
            }

            .safe-form-r {
                width: 422px;
                line-height: 30px;
                float: left;
            }

            .captcha-safe-form-r {
                display: inline-block;

                .img-check {
                    position: relative;
                    margin-top: 0;
                    margin-bottom: 0;
                }

                .img-check-tip {
                    position: static;
                }
            }

            .input-text {
                width: 208px;
            }

            .input-code {
                width: 54px;
                margin-right: 5px;
            }

            #the-code-img {
                border: 0;
                vertical-align: middle;
                outline: none;
                height: 30px;
                cursor: pointer;
            }

            .change-code {
                height: 30px;
                padding: 0 0 0 5px;
                line-height: 15px;
                display: inline-block;
                vertical-align: middle;
                color: #666;
            }

            .the-code {
                color: #468fa2;
            }

            .btn-b1 {
                margin: 0;
            }

            .check-info {
                display: inline-block;
                vertical-align: top;
            }

            .input-error {
                border: 2px solid #e8044f;
                height: 26px;
                padding: 0 4px;
            }
        }
    }

    .feedback {
        dt {
            height: 20px;
            line-height: 20px;
            background: resolve(home/suggest-icon.png) no-repeat 2px 3px;
            padding: 0 0 0 20px;
            float: left;
            font-family: arial "Microsoft YaHei";
            font-size: 12px;

            a {
                color: #468fa2;
            }
        }

        dd {
            float: right;
        }
    }

    .button-top {
        width: 66px;
        height: 22px;
        padding-left: 10px;
        line-height: 21px;
        border: 0;
        text-align: center;
        background: resolve(home/btn_top.png) no-repeat;
        color: #666;
        font-size: 12px;
        cursor: pointer;
        display: inline-block;
    }

    .rgb6 {
        color: #666;
    }

    .font14 {
        font-size: 14px;
    }

    .button-icon {
        padding-left: 5px;
        background: resolve(home/button-icon.png) no-repeat left 0;
        display: inline-block;
        cursor: pointer;

        i {
            font-style: normal;
            background: resolve(home/button-icon.png) repeat-x left -33px;
            display: inline-block;
            height: 33px;
            line-height: 33px;
            text-align: center;
        }

        span {
            background: resolve(home/button-icon.png) no-repeat right -66px;
            display: inline-block;
            padding-right: 5px;
        }
    }

    .button-red {
        background-position: left -99px;
        color: #fff;

        i {
            background-position: left -134px;
            width: 120px;

            .btn-jt {
                background: resolve(home/btn-jt.png) no-repeat;
                width: 5px;
                height: 8px;
                display: inline-block;
                margin-left: 10px;
            }
        }

        span {
            background-position: right -169px;
        }
    }

    .button-sliver {
        i {
            width: 100px;
            color: #666;
        }
    }

    .result-info,
    .result-email {
        padding: 30px 0;
        min-height: 360px;
        width: 616px;
        margin: 0 auto;
        text-align: center;

        p {
            line-height: 24px;
        }

        .info-detail {
            margin-top: 20px;
            text-align: left;
        }

        .button-icon {
            margin-top: 20px;
        }
    }

    .result-email {
        text-align: left;
        width: 400px;
    }

    .res-info {
        height: 24px;
        padding-left: 28px;
        font-size: 20px;
        color: #000;
        line-height: 24px;
        display: inline-block;
    }

    .res-success {
        background: resolve(home/icon-24.png) no-repeat;
    }

    .res-error {
        background: resolve(home/icon-24.png) no-repeat 0 -24px;
        color: red;
    }
}

.account-list {
    margin: 20px;
    display: none;

    .account-item {
        border: 1px solid #bdbdbd;
        margin-bottom: 10px;

        .account-item-title {
            padding-left: 10px;
            padding-right: 10px;
            height: 34px;
            line-height: 34px;
            border-bottom: 1px dashed #eaeaea;

            &:after {
                content: "";
                display: block;
                clear: both;
            }

            p {
                float: left;
                font-size: 14px;
                color: #000;

                b {
                    color: #7bbd55;
                    margin-left: 10px;
                    font-weight: normal;
                }

                b.no-binding {
                    color: #ea4072;
                }
            }

            a {
                float: right;
                color: #468fa2;
                font-size: 14px;

                &.del-binding {
                    color: #bdbdbd;
                }
            }
        }

        .account-item-body {
            display: none;
            padding: 25px 35px 30px;

            &:after {
                content: "";
                display: block;
                clear: both;
            }
        }

        .account-body-left {
            float: left;

            p {
                color: #000;
                font-size: 14px;
            }

            button {
                margin-top: 22px;
                background-color: #2e849c;
                font-size: 12px;
                color: #fff;
                border: none;
                width: 70px;
                height: 22px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -ms-border-radius: 3px;
                cursor: pointer;

                &.disabled {
                    background: #ccc;
                    color: #eee;
                }
            }
        }

        .account-body-right {
            position: relative;
            float: right;
            width: 290px;
            height: 55px;

            .logo-yh {
                position: absolute;
                top: 19px;
                left: 0;
                width: 115px;
                height: 27px;
                background: resolve(home/edit/yoho.png) no-repeat;
                background-size: cover;
            }

            .logo-contact {
                position: absolute;
                top: 0;
                left: initial;
                right: 0;
                width: 105px;
                height: 55px;

                &.qq {
                    background: resolve(home/edit/tengxun.png) no-repeat;
                    background-size: cover;
                }

                &.weixin {
                    background: resolve(home/edit/weixin.png) no-repeat;
                    background-size: cover;
                }

                &.renren {
                    background: resolve(home/edit/renren.png) no-repeat;
                    background-size: cover;
                }

                &.alipay {
                    background: resolve(home/edit/pay.png) no-repeat;
                    background-size: cover;
                }

                &.weibo {
                    background: resolve(home/edit/xinlang.png) no-repeat;
                    background-size: cover;
                }

                &.douban {
                    background: resolve(home/edit/douban.png) no-repeat;
                    background-size: cover;
                }
            }

            .img-contact {
                position: absolute;
                top: 18px;
                left: 130px;
                display: inline-block;
                width: 37px;
                height: 20px;
                background: resolve(home/edit/img-contact.png) no-repeat;
                background-size: cover;
            }
        }
    }
}

.m-dialog {
    border: 1px solid #333;
    padding: 0;

    .dialog-title {
        text-align: left;
        padding: 0 10px;
        line-height: 34px;
        background: #333;
        color: #fff;
    }

    .dialog-close {
        cursor: pointer;
        width: 30px;
        text-align: center;
        position: absolute;
        right: 0;
    }

    .dialog-content {
        padding: 40px 40px 20px;

        .tip-icon {
            font-size: 26px;
            position: relative;
            top: 3px;
            color: #c1c1c1;
            margin-right: 10px;
        }
    }

    .btns {
        margin-bottom: 30px;

        .btn {
            background: #ddd;
        }

        .btn-cancel {
            background: #fff;
            border-color: #999;
            color: #333;
        }
    }
}