@import "base/variables";

/* Tools */
@import "tools/mixin";
// @import "tools/fonts";
@import "tools/media";

/* Base */
@import "base/normalize";
@import "base/base";

/* Layout */
@import "layout/topbar";
@import "layout/header";
@import "layout/footer";

/* Modules */
// @import "modules/form";
// @import "modules/list";
// @import "modules/piclist";
// @import "modules/table";
@import "modules/button";
// @import "modules/single";
// @import "modules/toggle";

/* Components */
// @import "components/dropmenu";
// @import "components/panel";
@import "components/scrolltop";
// @import "components/slider";
// @import "components/tab";
@import "components/pop";

/* Common */

/* S iconfont */
@font-face {
    @include font-face-custom(iconfont);
}

.iconfont-custom {
    @include font-custom(iconfont);
}

/* S Main */
html, body{
    width: 100%;
    background-color: #f5f5f5;
}
.wrapper{
    padding-top: 53px;
    width: 100%;
    background-color: #f5f5f5;
}
/* E Main */

.m-personal{
    position: relative;
    img{
        display: block;
        width: 100%;
        overflow: hidden;
    }
}

.m-personal__hd{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75%;
}

.m-personal__bd{
    @include webkitbox(1);
    height: 23%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0, 0.6);
}

.m-personal__inner{
    // position: relative;
    // overflow: hidden;
    // width: 100%;
}

.m-personal__msg{
    position: absolute;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 22px;
    left: 10%;
    top: 26%;
    background: rgba(255,255,255, 0.4);
    span{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
    }
}

.m-personal__friends{
    position: absolute;
    width: 36px;
    height: 36px;
    padding: 4px;
    border-radius: 22px;
    right: 10%;
    top: 26%;
    background: rgba(255,255,255, 0.4);
    span{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
    }

}
.m-personal__main{
    position: absolute;
    width: 84px;
    margin-left: -42px;
    left: 50%;
    top: 15%;
    h3{
        text-align: center;
        color: #fff;
        text-shadow: 1px 1.732px 4px rgba(0, 0, 0, 0.176);
        margin: 5px 0;
    }
}

.m-personal__level{
    background: rgba(0,0,0, 0.4);
    border-radius: 9px;
    width: 52px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
    color: #ffe400;
    font-size: 14px;
}

.m-personal__pic{
    width: 76px;
    height: 76px;
    padding: 4px;
    border-radius: 38px;
    background: rgba(255,255,255, 0.4);
    span{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: block;
            overflow: hidden;
        }
    }
}

.m-personal__enter{
    background-color: #f5f5f5;
    overflow: hidden;
    a{
        display: block;
        overflow: hidden;
        height: 60px;
        line-height: 60px;
        color: #333333;
        border-bottom: 1px solid #e4e4e4;
        &:hover,&:active{
            background-color: #ebebeb;
            color: #333333;
        }
    }
    em{
        color: #003333;
        font-size: 19px;
    }
    .iconfont-custom{
        color: #b4b0b0;
        position: relative;
        top: -1px;
    }
    .ico-personal{
        vertical-align: text-bottom;
    }
    .fl{
        float: left;
        margin-left: 15px;
    }
    .fr{
        float: right;
        margin-right: 15px;
    }
}

.m-personal__item{
    @include flex(1);
    text-align: center;
    border-right: 1px solid rgba(#d1d1d1, 0.2);
    margin: 8px 0;
    &:last-child{
        border-right: none;
    }
    em{
        color: #e50050;
        display: block;
        width: 100%;
    }
    span{
        color: #fff;
        font-size: 14px;
    }
}

.ico-personal{
    background: url(../img/ico-personal.png) no-repeat;
    background-size: 24px;
    display: inline-block;
    &.ico-msg{
        width: 36px;
        height: 36px;
        background-position: 6px -20px;
    }
    &.ico-friends{
        width: 36px;
        height: 36px;
        background-position: 7px 8px;
    }
    &.ico-theme{
        width: 24px;
        height: 24px;
        background-position: 0 -52px;
    }
    &.ico-collect{
        width: 24px;
        height: 24px;
        background-position: 0 -77px;
    }
    &.ico-msg2{
        width: 24px;
        height: 24px;
        background-position: 0 -102px;
    }
    &.ico-friends2{
        width: 24px;
        height: 24px;
        background-position: 0 -124px;
    }
}

.m-loggout__btn{
    padding: 20px;
    a{
        width: 100%;
        padding: 0;
        background-color: #e50050;
        color: #fff;
        border-radius: 8px;
        border: none;
        &:active{
            background-color: #cb1655;
            border: none;
        }
    }
}



