html {
    font-family: "微软雅黑";
}
div,p,textarea,header,a,article,section,footer,span,ul,li,a,form{
    padding: 0px;
    margin: 0px;
}
.clearfix {
    clear: both;
}
.delete-circle-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../img/delect-tiezi1.png) no-repeat center center;
    background-size: 25px 25px;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}
.delete-circle-icon:hover {
    background: url(../img/delect-tiezi.png) no-repeat center center;
    background-size: 25px 25px;
}
.delete-ping {
    width: 16px;
    height: 16px;
    background: #000;
    position: relative;
    left: 10px;
    display: none;
    z-index: 100;
    background: url(../img/delete.png) no-repeat center center;
    background-size: 16px 16px;
    cursor: pointer;
}
.mymenu {
    position: absolute;
    left: 760px !important;
    top: 35px;
    text-align: center;
    min-width: 80px;
}
.delect-tiezi {
    cursor: pointer;
}
.delect-tiezi:hover {
    color: rgb(255,0,0);
}
.pretext {
    text-align: center;
    background: #f4f4f4;
    padding-top: 15%;
    width: 100%;
}
.edit-group-name {
    border: 1px solid #29c69c;
    height: 30px;
    outline: none;
    line-height: 30px;
    border-radius: 3px;
}
.up-for-page {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 100px;
    right: 40px;
    background: url(../../up1.png)  no-repeat; 
    background-size: 50px 50px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}
.up-for-page:hover {
    width: 60px;
    height: 60px;
    bottom: 95px;
    right: 35px;
    background: url(../../up.png)  no-repeat; 
    background-size: 60px 60px;
}
#load-news {
    margin-top: 5px; 
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #fff;
    color: #29c69c;
}
.loding-img {
    display: inline-block;
    position: relative;
    top: 8px;
    width: 30px;
    height: 30px;
    background: url(../../loading.gif) no-repeat;
    background-size: 30px 30px;
}
.have-no {
    width: 100%;
    height: 100px;
    background: url(../img/have-none.svg) no-repeat center 100%;
}
.have-no p {
    color: #a9b7b7;
    font-family: "Microsoft Yahei","SimHei";
}
.unhave-news {
    width: 250px;
    height: 250px;
    background: url(../img/baobao.jpg) no-repeat;
    background-size: 250px 260px;
    opacity: 0.8;
    position: relative;
}
.unhave-news p{
    font-size: 20px;
    color:#434243;
    text-align: center;
    position: absolute;
    bottom: -35px;
    user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
#page-wrapper {
    background: #f4f4f4;
}
.notice-badge{
    display: inline-block;
    display: none;
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 18px;
    position: relative;
    top: -25px;
    right: -38px;
    font-size: 10px;
    border-radius: 50%;
    color: #fff;
    background: rgb(255,0,0);
}
/*发帖的样式开始*/
.circle-index {
    width: 1182px;
    margin: 20px auto;
}
.circle-index-left {
    width: 866px;
    margin-right:8px; 
    float: left;
}
.post {
    background: #fff;
    width: 100%;
    padding-bottom: 26px;
    margin-bottom: 8px;
}
.post-header {
    width: 100%;
    height: 36px;
    line-height: 36px;
    color: #fff;
    background: #29c69c;
}
.post-header-brand {
    display: inline-block;
    float: left;
    width:20px;
    height: 100%;
    margin-left: 20px;
    background: url(../img/post.png) left center no-repeat;
}
.post-header-text {
    display: inline-block;
    font-size: 16px;
    padding-left: 20px;
}
.post-content {
    width: 825px;
    height: 155px;
    padding: 20px;
    margin: 15px 20px;  
    color: #666;
    background: #f7f7f7;
    border: 1px solid #29c69c;
    outline: none;
    resize:none;
}
.post-content:focus {
    box-shadow: 0px 0px 3px #29c69c;
}
.poster-footer {
    height: 32px;
    line-height: 32px;
    text-align: right;
    position: relative;
}
#form-for-upload {
    display: inline-block;
    height: 30px;
    width: 30px;
    overflow: hidden;
}
#form-for-upload>span {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url(../img/up-img-btn.png) no-repeat center center;
    background-size: 30px 30px;
    cursor: pointer;
}
.up-img-btn>input[type="file"] {
    cursor: pointer ;
    width: 104px;
    height: 53px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.poster-footer>span {
    display: inline-block;
    float: right;
}
.pub-btn {
    width: 100px;
    margin: 0px 20px;
    height: 32px;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 0.3em;
    background: #29c69c;
    opacity: 0.8;
    -webkit-opacity: 0.8;
    -ms-opacity: 0.8;
    -o-opacity: 0.8;
}
.pub-btn:hover {
    opacity: 1;
    -webkit-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
}
.upload-for-look {
    width: 400px;
    padding: 10px;
    position: absolute;
    right: 30px;
    top: 50px;
    background: #fff;
    box-shadow: 0px 1px 2px 2px #ccc;
    display: none;
    z-index: 20;
}
.upload-for-header {
    display: inline-block;
    float: left;
}
.close-upload-btn {
    display: inline-block;
    float: right;
    color: #27be96;
    cursor: pointer;
}
.close-upload-btn:hover {
    color: #ff0302;       
}
.reall-img:hover {
    box-shadow: 0px 0px 2px 2px #ccc;
}
.up-img-btn,.reall-img {
    float: left;
    width: 104px;      
    height: 73px;
    position: relative;
    display: inline-block;
    padding: 3px;
    margin: 10px 10px 0px;
}
.up-img-btn {
    cursor: pointer;
    background: url(../img/up_img_btn.png)  center center no-repeat;
}
.reall-img>img {
    width: 100%;
    height: 100%;
}
.delect-img {
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 6px;
    text-align: center;
    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 50%;
    background: rgb(0,0,0);
    color: white;
    cursor: pointer;
}
.delect-img:hover {
    background: #ff0302;
}
/*发帖的样式结束*/

/*发帖内容的样式开始*/
.posted-contents {
    width: 100%;
}
.article {
    padding: 20px; 
    width: 100%;
    background: #fff;
    position: relative;
    margin-bottom: 8px;
}
.articler-photo {
    display: block;
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
    border-radius: 50%;
}
.articler-photo:hover {

}
.article-content {
    width: 736px;
    float: left;
}
.article-time,.article-content>section,.article-content>footer{
    padding-top: 15px;
}
.article-content>footer {
    width: 100%;
}
.operation {
    height: 30px;
    line-height: 30px;
}
.operation>span {
    display: inline-block;
    float: left;
}
.comment {
    width: 676px;
}
.comment>li {
    width: 100%;
    margin-top: 15px;
}
.enter-comment {
    overflow: hidden;
    display: none;
}
.enter-comment>textarea {
    border: 1px solid #d6d6d6;
    color: #838484;
    width: 668px;
    height: 86px;
    outline: none;
    padding: 10px;
    resize: none;
}
.enter-comment>textarea:focus {
    box-shadow: 0px 0px 3px #CCC;
}
.enter-comment>p {
    width: 668px;
}
.cancel,.certian,.notice-certian,.notice-cancel {
    display: inline-block;
    float: right;
    text-align: center;
    width: 60px;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    margin-left: 20px; 
    color: #fff;
    border: 1px solid #d6d6d6;
}
.cancel,.notice-cancel {
    background: #9c9c9c;
}
.certian,.notice-certian {
    background: #29c69c;
}
.comment-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    top: 5px;
    background:  url(../img/pinglun.png) no-repeat center center;
    cursor: pointer;
}
a.from,a.to {
    color: #2983c4;
    text-decoration: none;
}
.message,.praise{
    display: inline-block;
    float: left;
    width: 25px;
    height: 25px;
}
.praise {
    background: url(../img/zan.png) no-repeat center center;
}
.message {
    background:  url(../img/pinglun.png) no-repeat center center;
    margin-left: 20px;
}
.praise,.message {
    cursor: pointer;
}
.praise:hover {
    background: url(../img/zan1.png) no-repeat center center;
}
.under-praise {
    background: url(../img/zan1.png) no-repeat center center;
}
.section-content {
    word-wrap: break-word;
    padding-right: 70px;
}
.comment-content{
    white-space: pre-wrap;
    word-wrap: break-word;
}
 .comment-transition {
    white-space: nowrap;
 }
.section-photo {
    margin-top: 15px;
}
.section-photo img {
    display: inline-block;
    margin-right:10px; 
    margin-bottom: 10px;
    width: 212px;
    height: 146px;
    cursor: zoom-in;
}
.circle-first {
    display: block;
}
.word-tip{
    color: rgba(0,0,0,0.5);
    font-size: 13px; 
}
/*发帖内容的样式结束*/

/*好友的信息列表开始*/
.friends-detail {
    width: 100%;
}
.friends-detail-header {
    height: 60px;
    line-height: 60px;
    width: 100%;
    background: #fff;
    font-size: 20px;
    border-bottom: 1px solid #c6c6c6;
}
.friends-search-header {
    height: 72px;
    line-height: 72px;
    width: 100%;
    background: #fff;
    font-size: 20px;
    border-bottom: 1px solid #c6c6c6;
}
.search-friends {
    height: 40px;
    line-height: 40px;
    width: 272px;
    text-align: center;
    float: left;
    outline: none;
    border-radius: 3px 0 0 3px;
    border: 1px solid #29c69c;
}
.search-friend-btn {
    display: inline-block;
    float: left;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #29c69c;
    position: relative;
    vertical-align: center;
    border-radius: 0px 0.3em 0.3em 0px;
    cursor: pointer;
}
.friends-search-bar {
    display: inline-block;
    float: left;
    padding-left: 20px; 
}
.input-group {
    display: inline-block;
    margin-left:135px; 
    vertical-align: middle;
}
.detail-icon {
    display: inline-block;
    float: left;
    height: 20px;
    width: 20px;
    margin:20px 20px;
    cursor: pointer; 
    background: url(../img/edit.png) no-repeat center center;
}
.group-num,.group-name {
    color: #232323;
}
.group-delect {
    display: inline-block;
    float: right;
    color: #2fc39f;
    padding: 0 20px;
    cursor: pointer;
}
.detail-person {
    width: 100%;
    background: #fff;
}
.circle-index-left .detail-person:first-child .detail-right{
    border-top: none;
}
.photo-name {
    width: 241px;
    text-align: center;
    padding-top: 59px;
    float: left;
}
.photo-name-stranger {
    width: 241px;
    text-align: center;
    padding-top: 36px;
    float: left;
}
.detail-person-photo {
    display: inline-block;
    width: 85px;
    height: 85px;
    border-radius: 50%;
}
.detail-person-name {
    padding-top: 22px;
}
.detail-right {
    float: left;
    width: 625px;
    border-top: 1px solid #c6c6c6;
    position: relative;
    top: -1px;
}
.edit-name {
    display: inline-block;
    position: relative;
    top: 5px;
    min-width: 100px;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 20px;
    line-height: 20px;
}
.edit-name-icon {
    display: inline-block;
    background: url(../img/edit1.png) no-repeat 100% 100%;
    width: 20px;
    height: 20px;
    margin: -3px 10px;
    cursor: pointer;
}
.change-name-icon {
    background: url(../img/yes.png) no-repeat 100% 100%;
}
.detail-right ul {
    padding: 36px 0px;
}
.detail-right ul li {
    margin-bottom: 16px;
}
.detail-right ul li:last-child {
    margin-bottom: 0px;
}
.my-select {
    position: absolute;
    right: 82px;
    top: 58px;
    z-index: 10;
    background: #fff;
    height: 100px;
    display: none;
    overflow-y: auto;
}
.my-select  li{
    white-space: nowrap;
    text-overflow: ellipsis;
}
.type-person {
    position: absolute;
    right: 82px;
    top: 26px;
    z-index: 10;
    cursor: pointer;
    display: inline-block;
}
.type-person-cont{
    display: inline-block;
    max-width: 114px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    float: left;
}
.select-icon{
    display: inline-block;
    float: right;
    width: 20px;
    height: 30px;
    background: #fff url(../img/select.png) no-repeat center center;
}
.my-btn {
    position: absolute;
    right: 82px;
    top: 70px;
}
.my-select,.my-btn,.type-person {
    width: 160px;
    outline: none;
}

.my-select>li,.type-person {
    height: 32px;
    line-height: 32px;
    border: 1px solid #949494;
    padding: 0px 10px;
    border-radius: 2px;
}
.my-select>li {
    border-bottom: none;
    position: relative;
    top: -1px;
}
.my-select>li:last-child {
    border-bottom: 1px solid #949494;
}
.my-btn {
    background: #ff4242;
    border:none;
    height: 32px;
    border-radius: 0.2em;
    color: #fff;
}
.add-group {
    display: inline-block;
    width: 150px;
    height:  35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #ccc;
    transition: 1s all;
    border: none;
    box-shadow: 0px 0px 2px 1px #CCC inset;
    cursor: pointer;
}
.add-group:hover {
    background: #29c69c;
    color :#fff;
    box-shadow: 0px 0px 2px #29c69c inset;
}
.person-friends p:last-child{
    text-align: center;
    padding-bottom: 20px;
}
#slimscroller {
    height: auto !important;
}
.slimScrollDiv {
    height: auto !important;
}
/*好友的信息列表结束*/

/*左侧个人信息样式开始*/
.circle-index-right {
    float: right;
    width: 306px;
}
.person-information {
    width: 100%;
    text-align: center;
}
.user-for-circle {
    padding: 17px 0px;
    background: #fff;
}
.user-photo {
    display: inline-block;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-bottom: 28px;
    background: #f6f6f6;
    padding: 5px;
}
.user-name {
    font-size: 20px;
}
.user-select {
    background: #636363;
    height: 44px;
    line-height: 44px;
    color: #fff;
}
a.user-select-one,a.user-select-two {
    display: inline-block;
    width: 153px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}
.user-select-one {
    border-right:1px solid #fff;
}
.all {
    height: 40px;
    line-height: 40px; 
    font-size: 18px;
    text-align: center;
    background: #fff;
    cursor: pointer;
}
.circle-active {
    background: #29c69c;
    color: #fff;
}
.all-messages-icon,.all-messages-text {
    display: inline-block;
    padding: 0px 10px;
    height: 100%;
}
.person-firends-text,.all-messages-text {
    vertical-align: top;
}
a.all-mess {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
}
.person-firends-text {
    display: inline-block;
    float: left;
}
.all-messages-icon {
    width: 30px;
    height: 100%;
}
.onactive {
    background: url(../img/mess1.png) no-repeat right 12px;
}
.outactive{
    background: url(../img/mess.png) no-repeat right 12px;
}
/*左侧个人信息样式结束*/

/*左侧朋友列表样式开始*/
.person-friends,.personal-info,.personarea-info {
    background: #fff;
    width: 306px;
    word-wrap: break-word;
    margin-top: 8px;
}
.personal-info {
    display: none;
}
.personarea-info>p,.personal-info>p{
    padding: 8px 20px;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
}
.personarea-info ul,.personal-info ul {
    padding: 0px 20px;
}
.personarea-info ul li,.personal-info ul li {
    padding: 4px 0px;
}
.personarea-info ul li:first-child,.personal-info ul li:first-child{
    padding-top: 8px;
}
.personarea-info  ul li label,.personal-info ul li label {
    font-weight: normal;
}
.person-firends-header {
    width: 100%;
    height: 38px;
    line-height: 38px;
    padding: 0px 26px;
    font-size: 18px;
    border-bottom: 1px solid #e7e7e7;
}
a.add-friend-btn {
    display: inline-block;
    float: right;
    color: #29c69c;
    text-decoration: none;
}
.person-firends-icon {
    display: inline-block;
    float: left;
    width: 16px;
    height: 100%;
    margin-right: 16px;
    background:  url(../img/firends.png) no-repeat center center;
}
ul.person-firends-list {
    padding: 26px;
    max-height: 300px;
    height: auto;
    overflow-y: auto;
}
.person-firends-list>li:before {
    content: "●";
    margin-right: 20px;
    color: #ff8a8a;
}
.my-first-list {
    margin-top:26px;
}
.my-second-list>a,.my-first-list>a {
    cursor: pointer;
    text-decoration: none;
}
li.my-first-list:nth-child(1) {
    margin-top: 0px;
}
.friend-menus {
    display: none;
    padding-left: 37px;
}
.my-second-list {
    margin-top: 18px;
}
.circle-second {

}
.add-friend-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 68px;
    top: 62px;
    cursor: pointer;
    opacity: 0.6;
    background: url(../img/add-friends.png) 100% 100% no-repeat;
}
.add-friend-icon:hover {
    opacity: 1;
}
/*左侧朋友样式列表j结束*/





/*消息展示界面的样式开始*/
.notice-menus>span,.header-text,.header-text,.header-time,.notice-content>a{
    display: inline-block;
}
a.header-text,a.request-user-name {
    text-decoration: none;
}
.notice{
    width: 100%;
    background: #f4f4f4;
}
.notice-menus {
    width: 18%;
    float: left;
    margin-top: 40px; 
    margin-bottom: 20px;
}
.notice-menus>span,.notice-menus div {
    width: 200px;
    font-size: 22px;
    text-align: center;
    padding: 10px 20px;
    background: #fff;
    color: #232323;
    border-bottom: 1px solid #f4f4f4;
    font-size: 17px;
    transition: background 500ms;
}
.notice-menus div {
    height: 56px;
    line-height: 56px;
    text-align: left;
    font-size: 20px;
}
.notice-menus>span {
    cursor: pointer;
    margin-bottom: -6px;
}
.notice-menus>span span{
    display: inline-block;
    float: left;
    padding-top: 4px;
}
.notice-menus>span.active {
    color: #fff;
    background: #29c69c;
}
.notice-menus>span:hover {
    color: #fff;
    background: #29c69c; 
}
.notices {
    width: 80%;
    float: left;
    margin: 40px 0px 20px; 
    background: #fff;
}
.notices .notice-row:last-child {
    border-bottom: none;
}
.notice-row {
    width: 100%;
    position: relative;
    float: left;
}
.notice-row .notice-tip {
    position: absolute;
    right: 90px; 
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    color: #ccc;
    font-size: 20px;
}
.notice-row-header {
    line-height: 100%;
    padding-bottom: 30px;
}
.notice-row {
    padding: 40px 20px;
    border-bottom: 1px solid #cbcbcb;
}
a.header-text {
    font-weight: bold;
    color: #232323;
    float: left;
}
.header-time {
    font-size: 18px;
    color: #232323;
    float: right;
}
.request-user-img {
    width: 82px;
    height: 82px;
    float: left;
    border-radius: 50%;
    background: #CCC;
}
.notice-content>a {
    float: left;
}
a.request-user-name {
    color: #1c89fd;
}
.notice-content>p.request-text{
    height: 82px;
    line-height: 82px;
    margin-left: 30px; 
    float: left;
}
.request-do {
    height: 82px;
    line-height: 82px;
    float: right;
}
.request-do button {
    height: 30px;
    line-height: 30px;
    padding:0px 30px;
}
.agree {
    background: #29c69c;
    border: 1px solid #29c69c;
    margin-right: 15px;
    transition: 500ms box-shadow;
}
.reject {
    background: #ff1717;
    border: 1px solid #ff1717;
    transition: 500ms box-shadow;
}
.reject:hover,.agree:hover {
    box-shadow: 0px 0px 1px 2px #ccc;
}
.agree,.reject {
    color: #fff;
    outline: none;
}
.person-from {
    float: left;
    width: 85px;
}
.content-of-from {
    float: left;
    width: 800px;
    padding-left: 30px;
}
.person-from-content label{
    float: left;
}
.person-from-content .text-from {
    float: left;
    width: 870px;
}
.notice-ping {
    position: relative;
}
.notice-ping span {
    display: inline-block;
    position: absolute;
}
.notice-ping span:first-child { 
    left: 0px;
}
.notice-ping span:last-child {
    right: 0px;
    width: 80px;
    text-align: center;
    top: -3px;
    cursor: pointer;
    border: 1px solid #ccc;
}
.notice-ping span:last-child:hover {
    box-shadow: 0px 0px 0px 1px #ccc inset;
}
.content-of-from>p,.person-from-content {
    padding-bottom: 6px;
}
.notice-textarea hr{
    border-color: #29c69c;
    margin-top: 20px;
}
.notice-textarea textarea {
    width: 100%;
    outline: none;
    height: 100px;
    resize: none;
    border-color: #29c69c;
    border:1px solid #29c69c;
    overflow-y: visible;
}
.notice-textarea textarea:focus {
    box-shadow:0px 0px 2px #29c69c;
}
.notice-menus span {
    position: relative;
}
.notice-menus span:last-child{
    border-bottom: none;
}
.notice-menus i[class^='notice-'] {
    display: inline-block;
    float: left;
    width: 30px;
    height: 30px;
}
.notice-icon1 {
    background: transparent url(../img/messages1.png) center center no-repeat;
    background-size: 20px 20px;
} 
.notice-icon1-down {
    background: transparent url(../img/messages.png) center center no-repeat;
    background-size: 20px 20px;
}
.notice-icon2 {
    background: transparent url(../img/tip.png) center center no-repeat;
    background-size: 20px 20px;
} 
.notice-icon2-on {
    background: transparent url(../img/tip1.png) center center no-repeat;
    background-size: 20px 20px;
} 
.notice-icon3 {
    background: transparent url(../img/notice-friend.png) center center no-repeat;
    background-size: 20px 20px;
} 
.notice-icon3-on {
    background: transparent url(../img/notice-friend1.png) center center no-repeat;
    background-size: 20px 20px;
} 
.notice-menus i.num{
    display: none;
    width: 30px;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    background: rgb(255,0,0);
    position: absolute;
    right: 10px;
    color: #fff;
    font-size: 12px;
    top: 12px; 
}

/*弹出框的样式*/
.alert-panel {
    width:25%;
    padding: 30px 20px 26px;
    position:fixed;
    top:35%;
    left:37.5%;
    background:#fff;
    border-radius:5px;
    border: 5px solid rgba(0,0,0,0.8);
    box-shadow:0px 0px 2px #CCC;
    z-index:2000
}
.alert-header {
    background:#29c69c;
    text-align:center;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    margin-bottom:30px;
}
.alert-group {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 25%;
    background: #fff;
    box-shadow: 0px 0px 2px #ccc;
}

/*输入弹出框*/
.modal-footer {
    text-align: center;
}
.mybtn {
    width: 100px;
    color: #fff;
}
.btn-default:focus,.btn-default:hover{
    background: #2fc39f;
    color: #fff;
}
.all-friends,.all-other,.all-part {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    margin-top: 5px;
}
.all-other,.all-part {
    cursor: pointer;
}
.not-friends {
    text-align: center;
}









.imgs{
    display: inline-block;
    width: 130px;
    height: 100px;
    cursor: url(../img/big-img.png) auto;
}
.box {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 2000;
}
.prev-big {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
}
.prev-big img {
    width: 100%;
    height: 100%;
}
.img-text {
    position: absolute;
    bottom: 0px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: 100%;
    color: #fff;
    background: rgba(0,0,0,0.9);
}
.img-text .header-text {
    text-align: left;
    padding-left: 30px;
    cursor: pointer;
}
.img-text .img-num {
    text-align: right;
    padding-right: 30px;
}
.left-img,.right-img {
    display: none;
    position: absolute;
    width: 10%;
    height: 20%;
    line-height: 20%;
    top: 45%;
    line-height: 10%;
    min-width: 50px;
    min-height: 50px; 
    vertical-align: center;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    cursor: pointer;
}
.left-img {
    left: 0px;
    background: url(../img/img-left.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
.left-img:hover{
    background: url(../img/img-left1.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
.right-img {
    right: 0px;
    background: url(../img/img-right.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
.right-img:hover {
    background: url(../img/img-right1.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
.img-close {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff url(../img/delect-tiezi1.png) no-repeat center center;
    background-size: 25px 25px;
    box-shadow: 0px 0px 2px 1px #CCC; 
    top:-12px;
    right: -8px;
}
.img-close:hover {
    background: #fff url(../img/delect-tiezi.png) no-repeat center center;
    background-size: 25px 25px;
}





/*另外的界面*/
.personarea-wrap {
    margin-top: 40px; 
    background: #484848;
    height: 700px;
}
.personarea-left {
    width: 306px;
    height: 300px;
    float: left;
}
.personarea-right {
    float: left;
    width: 868px;
    margin-left: 8px;
    height: 300px;
    background: #CCC;
}
.person-information .personal-info,.person-information .personarea-info {
    display: block;
    text-align: left;
}
.personarea-left-add {
    margin: 5px 0px; 
    display: inline-block;
    padding: 5px 20px;
    border-radius: 13px;
    background: #29c69c;
    color: #fff;
    transition: 300ms opacity;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.personarea-left-add:hover{
    box-shadow: 0px 2px 2px rgba(0,0,0,0.3) inset;
}