/* Styles for validation helpers
-----------------------------------------------------------*/
body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea, em, i, span {
    margin: 0;
    padding: 0;
    outline: 0 none;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: middle;
}

ol, ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #666;
    display: inline-block;
}

    a:hover {
        color: #d36d00;
        text-decoration: underline;
    }

img {
    border: 0 none;
    font-size: 0;
    vertical-align: top;
}

input {
    border: none;
}

body, html {
    height: 100%;
    width: 100%;
    color: #666;
    font: 14px/1.5 Arial, 'microsoft yahei', 'SimSun';
}

.field-validation-valid,
.field-validation-error {
    color: #bf0000;
}

.clr {
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

.checkbox {
    width: 15px;
    height: 20px;
}
/*适应移动端*/
@media all and (max-width: 2000px) {
    .dis {
        display: block;
    }

    .undis {
        display: none;
    }

    .banner, .content, .top, .warp {
        width: 80%;
        margin: 0 auto;
    }

    .w990 {
        width: 990px;
        margin: 0 auto;
    }

    .nav-bar {
        width: 100%;
        margin: 0 auto;
    }

    .Calumny-title {
        padding: 10px;
        font-size: 1rem;
    }

        .Calumny-title span {
            float: right;
            display: block;
            color: grey;
            font-size: 0.8rem;
        }

    .subject {
        float: left;
        width: 21%;
        margin: 2%;
        height: 80px;
        position: relative;
        border-radius: 10px;
    }

    .subject-title {
        position: absolute;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        opacity: .5;
        top: 0;
        background-color: lightgrey;
        display: block;
        width: 100%;
        height: 40%;
        text-align: center;
        color: white;
        padding: 5px 0;
    }

    .world-title {
        position: absolute;
        border-radius: 10px;
        opacity: .5;
        top: 0;
        background-color: black;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        color: white;
    }

    .all-world {
        position: relative;
        margin-top: 10px;
    }

        .all-world img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

    .world-title span, .Snack-title span {
        font-size: 1.2rem;
    }

    .Snack-title {
        position: absolute;
        border-radius: 10px;
        opacity: .5;
        top: 0;
        background-color: black;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        color: white;
    }

    .big-place {
        position: relative;
        height: 120px;
        width: 96%;
        margin: auto;
        background-repeat: no-repeat;
        background-position: center;
    }

    .small-place {
        background-repeat: no-repeat;
        background-position: center;
        float: left;
        width: 46%;
        margin: 2%;
        position: relative;
        height: 120px;
    }

    .more {
        height: 30px;
        margin: 10px;
        text-align: center;
        color: grey;
        font-size: 1rem;
    }

    .Snack {
        position: relative;
        height: 150px;
        float: left;
        width: 46%;
        margin: 2%;
        background-repeat: no-repeat;
        background-position: center;
        color: white;
    }

    .english {
        padding: 0px 15px;
        border-radius: 10px;
        background-color: orange;
    }

    .brand {
        position: relative;
        background-position: left;
        background-repeat: no-repeat;
        font-size: .8rem;
        width: 48%;
        float: left;
        margin: 1%;
        height: 100px;
    }

    .Calumny {
        float: left;
        width: 46%;
        margin: 2%;
    }

    .Calumny-img {
        height: 60%;
        width: 100%;
    }

    .Calumny p {
        height: 30%;
        width: 100%;
    }

    .operate-focus {
        width: 30px;
        display: inline-block;
    }

    .message-head {
        position: relative;
        height: 70px;
        border-bottom: solid 1px silver;
        background-color: lightgrey;
    }

        .message-head div {
            padding-top: 40px;
            font-size: 1.2rem;
            text-align: center;
        }

    .message-Link {
        background-color: white;
    }

    .tab {
        width: 50%;
        text-align: center;
    }

    .active {
        border-bottom: solid 3px red;
    }

        .active > a {
            color: red;
        }

    a:hover {
        text-decoration: none;
    }
    /****************************************************************/

    .Mobile-header .Mobile-navbar {
        top: 10px;
        height: 30px;
        bottom: 10px;
        width: 50px;
        left: 15px;
        position: absolute;
        cursor: pointer;
        overflow: hidden;
    }

        .Mobile-header .Mobile-navbar .icon-bar {
            height: 2px;
            position: relative;
            margin-top: 8px;
            width: 30px;
            margin-left: auto;
            margin-right: auto;
            background-color: white;
            display: block;
        }

        .Mobile-header .Mobile-navbar img {
            padding: 10%;
            height: 80%;
            width: 80%;
        }

    .Mobile-header .NavOpen {
        position: fixed;
        top: 50px;
        left: 10px;
        opacity: .9;
        width: auto;
        background-color: wheat;
        font-size: 1rem;
        border-radius: 15px;
    }

    .Mobile-header li {
        line-height: 2rem;
        text-align: center;
    }

        .Mobile-header li a {
            display: block;
            color: black;
        }

            .Mobile-header li a:hover {
                /*background-color:gray;*/
                color: orange;
            }

    .product .link {
        cursor: pointer;
        font-size: 12px;
        display: block;
        text-align: left;
        color: grey;
        position: absolute;
        bottom: 0;
        height: 15px;
        cursor: pointer;
    }

    .tn-comment-full, .tn-author {
        font-size: 0.8rem;
    }
    /****************************************************************/
}
/****************************************************************/
.file-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    border: 1px solid silver;
    font-size: 40px;
    line-height: 50px;
    color: grey;
}

    .file-button:hover {
        text-decoration: none;
        color: black;
    }

    .file-button input[type="file"] {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 100px;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.Topic-Container {
    width: 100%;
    height: 100%;
}

.Topic {
    float: left;
    width: 48%;
    margin: 1%;
    background-color: whitesmoke;
}

.Topic-Container .Topic a {
    display: block;
    height: 80%;
    overflow: hidden;
}

.Topic-right span {
    height: 20px;
    line-height: 20px;
    display: inline-block;
    width: 20px;
}

.NoteImage {
    width: 100%;
    min-height: 300px;
}

.comment-foot {
    padding-top: 10px;
    position: fixed;
    bottom: 0;
    height: 40px;
    overflow: hidden;
    background-color: lightgray;
    width: 100%;
}

.Commend {
    width: 30px;
    height: 25px;
}

.NoteDetail-Recommend {
    background-color: wheat;
}

.nav-Commend, .nav-Comment {
    width: 30%;
    display: block;
    margin: 10px 0;
    float: left;
    cursor: pointer;
}

    .nav-Commend *, .nav-Comment *, .nav-Collect * {
        display: block;
        float: left;
        height: 20px;
        line-height: 20px;
        margin-left: 10px;
    }

.nav-Collect {
    width: 40%;
    display: block;
    padding: 10px 0;
    float: right;
    background-color: red;
    color: white;
}

.menu-Link {
    color: grey;
    height: 100%;
}

.tag-Container {
    float: left;
    width: 23%;
    margin: 1%;
}

.tag-img {
    width: 100%;
    height: 70px;
    border-radius: 5px;
}
/*登陆框容器*/
.login-box {
    width: 80%;
    margin: auto;
    position: relative;
}

.login-button {
    height: 100px;
    width: 80%;
    margin: auto;
}
/*登陆输入框容器*/
.login-input {
    border-bottom: solid 1px silver;
    padding: 10px;
    margin: 10px 0;
}
    /*登陆输入框样式*/
    .login-input input {
        font-size: 1.2rem;
        line-height: 30px;
        height: 30px;
    }
/*点赞，收藏，分享操作*/
.operate {
    width: 100%;
    padding: 10px 0;
}
/*首页标签*/
.tags {
    width: 100%;
    margin-left: -2%;
}
    /*首页标签-单个标签容器*/
    .tags div {
        float: left;
        display: block;
        width: 23%;
        text-align: center;
        background-color: grey;
        color: white;
        margin: 10px 0 10px 2%;
        font-size: 15px;
        cursor: pointer;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    /*首页标签-链接字体颜色*/
    .tags a {
        color: white;
    }
/*商标*/
.logo {
    position: absolute;
    top: 10px;
    left: 0;
    margin: auto;
    right: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    width: 60%;
}
/*搜索框*/
.Mobile-header .searchBar {
    float: left;
    height: 40px;
    width: 88%;
    margin: 5px 10px;
    position: relative;
    background-color: lightgrey;
    border-radius: 8px;
}
    /*搜索框输入框*/
    .Mobile-header .searchBar input {
        height: 100%;
        width: 80%;
        font-size: 1.2rem;
        background-color: lightgrey;
        border: none;
        color: white;
    }
/*用户信息容器*/
.user {
    height: 40px;
    padding: 10px 15px;
    background-color: white;
}

.user-small {
    height: 20px;
    background-color: white;
    position: relative;
}
/*用户名字*/
.user-name {
    font-size: .8rem;
    color: black;
}
/*用户简介*/
.user-info {
    font-size: .8rem;
    color: grey;
}
/*中间短线*/
.short-middle-line {
    width: 50px;
    display: inline-block;
    background-color: grey;
    height: 1px;
    margin: 0 5px;
}
/*我的菜单*/
.my-menu {
    text-align: center;
    background-color: white;
    margin-top: 10px;
}
/*菜单*/
.menu {
    float: left;
    width: 23%;
    margin: 20px 1%;
    margin-right: -1px;
    height: 70px;
}
/*我的页面 添加笔记*/
.no-note {
    width: 100%;
    text-align: center;
    position: relative;
    height: 200px;
}
/*我的页面 笔记列表*/
.note {
    width: 31.33333%;
    text-align: center;
    float: left;
    margin: 1%;
    height: 100px;
    background-color: white;
    position: relative;
    overflow: hidden;
}

    .note a, .note img {
        height: 100%;
        width: 100%;
        display: inline-block;
    }
/*我的页面  专辑列表*/
.Album {
    float: left;
    width: 25%;
    height: 100px;
}
/*专辑容器*/
.Album-Contanier {
    background-color: white;
    margin: 10px;
}
/*专辑标题*/
.Album-title {
    padding: 10px;
}
/*专辑笔记里的图片*/
.Album-notes-img {
    height: 80px;
    margin: 2%;
    width: 96%;
}
/*消息界面，专题*/
.message-special {
    margin-top: 20px;
    background-color: white;
}
/*专题标题*/
.special-title {
    line-height: 30px;
    height: 30px;
}
/*专题容器*/
.special {
    height: 200px;
    margin: 0 10px;
    position: relative;
    overflow: hidden;
}
    /*专题图片*/
    .special img {
        height: 100%;
        width: 100%;
    }
/*专题图片上链接*/
.special-Link {
    background-color: white;
    position: absolute;
    right: 0;
    bottom: 10px;
    height: 25px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 0 10px;
    line-height: 25px;
    color: grey;
}
/*专题图片上文字*/
.special-Text {
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 50px;
    top: 50px;
    height: 50px;
    margin: auto;
    line-height: 50px;
    color: grey;
}

/*个人资料链接标题*/
.link-title {
    display: inline-block;
    width: 20%;
    color: black;
}
/*个人资料链接文字*/
.link-text {
    display: inline-block;
    color: grey;
}
/*我的关注*/
.my-concern {
    text-align: center;
    padding: 10px 0;
    background-color: white;
}
/*关注*/
.concern {
    float: left;
    width: 23%;
    margin: 0 1%;
}
/*显示为块级元素*/
.UserSpace-block {
    display: inline-block;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
}
/*积分文字*/
.text-point {
    background-color: white;
    margin: 10px 0;
    padding: 5px;
}
/*个人资料*/
.userspace {
    padding: 5px;
    background-color: white;
}
/*我的信息*/
.my-info {
    text-align: center;
    padding: 20px 0 10px 0;
    background-color: white;
}
/*标签图片容器*/
.Topic-title-img {
    height: 100px;
}
    /*标签图片*/
    .Topic-title-img img {
        width: 100px;
        height: 80%;
        margin-top: 10%;
        margin: auto;
    }
/*标签笔记*/
.Topic-title-note {
    display: inline-block;
    width: 60px;
    padding: 10px;
}
/*标签粉丝*/
.Topic-title-fans {
    display: inline-block;
    width: 60px;
    padding: 10px;
}
/*标签描述*/
.Topic-title-describing {
    border-top: solid silver 1px;
    margin: 10px;
}
/*笔记内容*/
.content {
    width: 100%;
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
    position: relative;
    word-break: break-all;
    padding: 0 0 15px 0;
}
    /*笔记容器*/
    .content div {
        overflow: hidden;
    }
/*笔记文字容器*/
.note-text {
    background-color: white;
    padding: 15px;
}
/*通知容器*/
.notice-container {
    background-color: white;
    padding: 10px;
}
/*通知内容*/
.notice-Content {
    background-color: lightgrey;
    padding: 10px;
}
/*结束*/
.end {
    height: 30px;
    background-color: lightgray;
    text-align: center;
    line-height: 30px;
}
/*通知*/
.notice {
    width: 80%;
    color: black;
}
/*圆形*/
.Circle {
    border-radius: 100% 100%;
}
/*推荐笔记，图片容器*/
.commend-note-img-contanier {
    width: 100%;
    height: 160px;
    overflow: hidden;
}
/*推荐笔记，文字容器*/
.commend-note-text-contanier {
    padding: 0 15px;
    background-color: white;
    word-break: break-all;
    height: 40px;
    color: grey;
}
/*推荐笔记，文字样式*/
.note-content {
    font-size: .8rem;
    line-height: 20px;
}
/************************  三方登陆  ************************/
@media all {
    .third-login {
        position: absolute;
        bottom: 100px;
        left: 10%;
        width: 80%;
        text-align: center;
        font-size: 1.2rem;
    }
}
/************************    按钮    ************************/
@media all {
    .button-big {
        width: 100%;
        border: none;
        height: 40px;
        color: black;
        font-size: 1.5rem;
        border-radius: 5px;
    }
}
/************************    背景    ************************/
@media all {
    .background-white {
        background-color: white;
    }

    .background-red {
        background-color: red;
        color: white;
    }
}
/************************    边距    ************************/
@media all {
    .margin10 {
        margin: 10px;
    }

    .padding10 {
        padding: 10px;
    }

    /*内边距*/
    .Top20px {
        padding-top: 20px;
    }
}
/************************    头部    ************************/
@media all {
    /*头部*/
    .Mobile-header {
        height: 50px;
        background-color: orange;
        width: 100%;
        position: relative;
        text-align: center;
        color: white;
        font-size: 1.2rem;
    }

    /*头部返回*/
    .header-back {
        position: absolute;
        left: 10px;
        bottom: 10px;
        display: block;
        width: 40px;
        cursor: pointer;
    }
    /*头部标题*/
    .header-title {
        width: 40%;
        margin: auto;
        position: absolute;
        left: 0;
        bottom: 10px;
        right: 0;
    }
    /*头部下拉隐藏框*/
    .header-Info {
        position: fixed;
        top: 50px;
        left: 0;
        width: 98%;
        background-color: white;
        font-size: .8rem;
        padding: 0 1%;
    }
    /*头部按钮，靠左*/
    .header-left {
        position: absolute;
        left: 10px;
        bottom: 10px;
        display: block;
        width: 40px;
        cursor: pointer;
    }
    /*头部按钮,靠右*/
    .header-right {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
}
/************************  底部导航  ************************/
@media all {
    .nav-all {
        float: left;
        display: block;
        width: 19%;
        margin-left: 1%;
        height: 100%;
        text-align: center;
    }
    /*页脚*/
    .footer {
        width: 100%;
        height: 50px;
        background-color: white;
    }
}
/************************    大小    ************************/
@media all {
    .width50 {
        width: 50%;
    }

    .widthAuto {
        width: auto;
    }

    .width100 {
        width: 100%;
    }

    .width25 {
        width: 25%;
    }

    .width15 {
        width: 15%;
    }

    .width20 {
        width: 20%;
    }

    .width80 {
        width: 80%;
    }

    .height40 {
        height: 40px;
    }

    .height100 {
        height: 100%;
    }

    .height50 {
        height: 50%;
    }
}
/************************    Float    ************************/
@media all {
    .right {
        float: right;
    }

    .left {
        float: left;
    }
}
/************************    边框    ************************/
@media all {
    .border-top {
        border-top: solid 1px silver;
    }

    .border-bottom {
        border-bottom: 1px silver solid;
    }

    .border-right {
        width: 1px;
        height: 35px;
        float: right;
        margin-top: -30px;
        border-right: 1px silver solid;
    }

    .none-border {
        border: none;
    }
}
/************************    位置    ************************/
@media all {
    /*底部*/
    .fixed-bottom {
        position: fixed;
        bottom: 0;
    }
    /*顶部*/
    .fixed-top {
        position: fixed;
        top: 0;
        z-index: 1;
    }
    /*绝对定位，右下角*/
    .absolute-bottom-right {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    /*绝对定位，底部居中*/
    .absolute-bottom-middle {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
    /*绝对定位，居中*/
    .absolute-middle-middle {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        margin: auto;
    }
    /*绝对定位，右上角*/
    .absolute-top-right {
        position: absolute;
        top: 0;
        right: 0;
    }
    /*绝对定位，靠左居中*/
    .absolute-left-middle {
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        margin: auto;
    }

    .relative {
        position: relative;
    }
}
/************************    图标    ************************/
@media all {
    /*灰色图标*/
    .grey {
        background-image: url('images/25gray/hp299icon.png');
    }
    /*灰色图标*/
    .grey-index {
        background-image: url('images/25gray/hp299icon-index.png');
    }
    /*亮色图标*/
    .light {
        background-image: url('images/orange/hp299icon.png');
    }
    /*亮色图标*/
    .light-index {
        background-image: url('images/orange/hp299icon-index.png');
    }
    /*红色图标*/
    .red {
        background-image: url('images/red/tn-icon-small.png');
    }
    /*蓝绿色*/
    .cyan {
        background-image: url('images/25gray/hp299icon.png');
    }
    /*绿色图标*/
    .green {
        background-image: url('images/green/tn-icon-small.png');
    }
    /*白色图标*/
    .white {
        background-image: url('images/white/hp299icon.png');
    }
   /*大图标*/
    .bigIcon {
         background-image: url('images/hp299icon_big.png');
    }
    /*图标样式*/
    [class^="icon-"], [class*=" icon-"] {
        width: 20px;
        height: 20px;
        margin: auto 5px;
        display: inline-block;
        line-height: 20px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    /*图标样式*/
    [class^="iconbig-"], [class*=" iconbig-"] {
        width: 40px;
        height: 40px;
        margin: auto 5px;
        display: inline-block;
        line-height: 40px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
    /*图标样式*/
    [class^="iconindex-"], [class*=" iconindex-"] {
        width: 40px;
        height: 50px;
        margin: auto 5px;
        display: inline-block;
        line-height: 50px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: center;
    }
    /*分享图标*/
    .icon-share {
        background-position: -0px -0px;
    }
    /*点赞图标*/
    .icon-Commend {
        background-position: -0px -160px;
    }
    /*评论图标*/
    .icon-Comment {
        background-position: -0px -40px;
    }
    /*收藏图标*/
    .icon-Collect {
        background-position: -0px -180px;
    }

    /*添加朋友图标*/
    .icon-AddFriend {
        background-position: -0px -400px;
    }
    /*设置*/
    .icon-set {
        background-position: -0px -100px;
    }
    /*向下图标*/
    .icon-down {
        background-position: 0px -300px;
    }
    /*向上图标*/
    .icon-up {
        background-position: -0px -280px;
    }
    /*向右的箭头*/
    .icon-right-arrow {
        background-position: -0px -260px;
    }
    /*问题图标*/
    .icon-Question {
        background-position: -0px -420px;
    }
    /*男性图标*/
    .icon-male {
        background-position: -0px -440px;
    }
    /*女性图标*/
    .icon-female {
        background-position: -0px -460px;
    }
    /*积分图标*/
    .icon-Point {
        background-position: -0px -320px;
    }
    /*粉丝图标*/
    .icon-Fans {
        background-position: -0px -80px;
    }
    /*通知图标*/
    .icon-Notice {
        background-position: -0px -340px;
    }
    /*专题图标*/
    .icon-Special {
        background-position: -0px -360px;
    }
    /*返回图标*/
    .icon-back {
        background-position: -0px -480px;
    }
    /*搜索图标*/
    .icon-search {
        background-position: -0px -240px;
    }
    /*发布笔记图标*/
    .icon-create {
        background-position: -0px -120px;
    }
    /*首页导航图标*/
    .icon-menu {
        background-position: -0px -20px;
    }
  

    /*购物车图标*/
    .iconbig-shopping-cart {
        background-position: -0px -0px;
    }
    /*订单图标*/
    .iconbig-order {
        background-position: -0px -40px;
    }
      /*大搜索图标*/
    .iconbig-search {
        background-position: -0px -80px;
    }
    /*优惠卷图标*/
    .iconbig-coupon {
        background-position: -0px -120px;
    }
    /*心愿单图标*/
    .iconbig-wishlist {
        background-position: -0px -80px;
    }
    /*QQ登陆图标*/
    .iconbig-QQ {
        background-position: -0px -280px;
    }
    /*微信登陆图标*/
    .iconbig-WeChat {
        background-position: -0px -200px;
    }
    /*微博登陆图标*/
    .iconbig-SinaWeibo {
        background-position: -0px -240px;
    }
    /*添加笔记图标*/
    .iconbig-add-Note {
        background-position: -0px -160px;
    }
    /*数字图片*/
    .icon-num {
        background-color: orange;
        text-align: center;
        color: white;
    }

    /*等级图标*/
    .icon-Level {
        width: 30px;
        border-radius: 15px;
        border: silver solid 1px;
        padding: 0 5px;
        display: inline-block;
        line-height: 20px;
        height: 20px;
    }
    /*更多图标*/
    .icon-More {
        width: 20px;
        height: 20px;
        display: inline-block;
    }
    /*用户头像*/
    .icon-User {
      
    }
    /*用户头像*/
    .iconbig-User {
       
    }
    /*首页导航图标*/
    .iconindex-home {
        background-position: -0px 0px;
    }
    /*首页谗言图标*/
    .iconindex-calumny {
        background-position: -0px -64px;
    }
    /*首页福袋图标*/
    .iconindex-luckbag {
        background-position: -0px -128px;
    }
    /*首页消息图标*/
    .iconindex-message {
        background-position: -0px -192px;
    }
    /*首页我的图标*/
    .iconindex-my {
        background-position: -0px -256px;
    }
}