hexo-theme-jsimple/source/css/reading.css

@charset "UTF-8";
.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    margin-bottom: 10px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px
}

.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: auto !important;
    min-width: 100px;
    max-width: inherit
}

.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none
}

.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}

.container .meta-top, .post .meta-bottom .like, .post .comment-list .comment-text, .user .btn-group > .dropdown-menu, .user .user-stats, .user .user-stats span, .user .recent-post ul.nav-tabs li.pull-right a, .timeline-content .meta, .timeline-content .article p, .messages.old .write .header .latter-address, .messages.old .message-show .header .latter-address, .book .aside .meta, .book .aside .dropdown-menu, .relationships li p, .wrap-btn, .subscribe-guide .recommended-list .collections-meta p, .collections-tag .collections-list .collections-meta p, .subscribe-guide .recommended-list .collections-meta .btn, .collections-tag .collections-list .collections-meta .btn, .reader-night-mode .activity, .reader-day-mode .activity {
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
}

.post .navbar-user {
    display: none
}

.post .related-avatar-group {
    display: none
}

.post .container {
    width: 700px
}

.container .author-info {
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    font-size: 12px;
    color: #999999
}

.container .author-info .follow, .container .author-info .following {
    float: right;
    margin-top: 10px
}

.container .author-info .follow > span, .container .author-info .following > span {
    display: inline-block;
    line-height: 13px
}

.container .author-info .avatar {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px
}

.container .author-info .label {
    background: none;
    border: 1px solid #e78170;
    color: #e78170;
    text-shadow: none;
    font-size: 11px;
    font-weight: normal;
    line-height: 1
}

.container .author-info .author-name {
    margin: 0 5px
}

.container .author-info > div {
    margin-top: 3px
}

.container .article {
    padding: 80px 40px 10px
}

.container .meta-top {
    margin: 20px 0
}

.container .meta-top img {
    border: none
}

.container .meta-top a span {
    color: inherit
}

.container .meta-top span {
    position: relative;
    top: 1px;
    margin-right: 10px;
    font-size: 12px;
    color: #999999
}

.container .meta-top .avatar {
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 10px;
    line-height: 1%
}

.container .article-share {
    display: none;
    padding: 20px;
    margin: 0 -10px 45px;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    text-align: center
}

.container .article-share:empty {
    display: none
}

.container .article-share .btn {
    padding: 0;
    border: none;
    background: none
}

.container .article-share a {
    font-size: 16px;
    color: #3f3f3f
}

.container .article-share i {
    margin-right: 6px
}

.container .article-share .add-collection, .container .article-share .bookmark, .container .article-share .bookmarked {
    margin-right: 15%
}

.container .article-share .bookmarked i {
    color: #e78170
}

.container .article-share .open {
    position: relative
}

.container .article-share .open ul {
    min-width: initial;
    width: 50px;
    top: 32px
}

.container .article-share .open ul::before, .container .article-share .open ul::after {
    left: 16px
}

.container .article-share .open li {
    text-align: center
}

.container .article-share .open a {
    padding: 4px 0
}

.container .article-share .open img {
    width: 20px;
    border: none
}

.post .support-author, .post .meta-bottom, .post .comment-list, .post .include-collection .content {
    width: 620px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto
}

.post .meta-bottom {
    margin-bottom: 40px
}

.post .meta-bottom .like {
    float: left;
    width: 163px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    border: 1px solid #e78170;
    border-radius: 40px;
    font-size: 18px;
    text-align: center
}

.post .meta-bottom .like:hover {
    background: #f6cec7;
    border-color: #f6cec7
}

.post .meta-bottom .like:hover a, .post .meta-bottom .like:hover span {
    color: #e36e5a
}

.post .meta-bottom .like a, .post .meta-bottom .like span {
    color: #e78170
}

.post .meta-bottom .like .like-button {
    position: relative;
    width: 60px;
    height: 50px;
    padding-right: 10px;
    display: inline-block
}

.post .meta-bottom .like a.like-content {
    position: absolute;
    left: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.35, 0.32, 0.4, 1.18);
    -moz-transition: all 0.2s cubic-bezier(0.35, 0.32, 0.4, 1.18);
    -o-transition: all 0.2s cubic-bezier(0.35, 0.32, 0.4, 1.18);
    transition: all 0.2s cubic-bezier(0.35, 0.32, 0.4, 1.18)
}

.post .meta-bottom .like span {
    position: relative;
    top: -19px;
    height: 20px;
    padding-left: 15px;
    border-left: 1px solid;
    cursor: pointer
}

.post .meta-bottom .like.note-liked, .post .meta-bottom .like.note-liked:hover {
    border-color: #de533c;
    background-color: #de533c
}

.post .meta-bottom .like.note-liked a, .post .meta-bottom .like.note-liked span, .post .meta-bottom .like.note-liked:hover a, .post .meta-bottom .like.note-liked:hover span {
    color: white
}

.post .meta-bottom .like.load {
    background-color: #f9ddd9;
    border-color: #f9ddd9
}

.post .meta-bottom .like.load .like-content {
    left: -95px;
    opacity: 0.04;
    filter: alpha(opacity=4)
}

.post .meta-bottom .share-group {
    margin-top: 16px
}

.post .meta-bottom .share-group > a {
    margin-right: 8px;
    font-size: 18px
}

.post .meta-bottom .share-group > a .fa-weixin {
    font-size: 16px
}

.post .meta-bottom .share-group > a > span {
    margin-left: 5px;
    font-size: 14px
}

.post .meta-bottom .share-group .more {
    position: relative;
    display: inline-block
}

.post .meta-bottom .share-group .more .fa-caret-down {
    margin-left: 5px
}

.post .meta-bottom .share-group .more .dropdown-menu {
    left: -64px
}

.post .meta-bottom .share-group .more li {
    text-align: left
}

.post .meta-bottom .share-group .more .fa-arrow-circle-o-down {
    margin-right: 7px;
    margin-left: 2px
}

.post .meta-bottom .share-group .more img {
    width: 16px;
    margin-right: 10px
}

.post .meta-bottom .share-note-text {
    margin: 8px 0 0;
    list-style: none
}

.post .meta-bottom .share-note-text li {
    float: left;
    position: relative
}

.post .meta-bottom .share-note-text .share-weixin img {
    width: 20px;
    height: 20px
}

.post .meta-bottom .share-note-text a {
    margin: 0 5px
}

.post .meta-bottom .share-note-text a img {
    width: 16px;
    height: 16px;
    margin-top: -4px
}

.post .meta-bottom .share-note-text i {
    font-size: 18px;
    color: #999999;
    line-height: 23px
}

.post .meta-bottom .share-note-text i:hover {
    color: #3f3f3f
}

.post .meta-bottom .share-note-text .dropdown-menu i.fa-arrow-circle-o-down {
    position: relative;
    top: 1px;
    margin: 0 5px 0 1px
}

.post .meta-bottom .share-note-text .dropdown-menu li {
    float: none
}

.post .meta-bottom .share-note-text .dropdown-menu li a {
    margin: 0
}

.post .comment-list .loader-tiny {
    margin: 0 auto;
    display: inherit
}

.post .comment-list .comment-text {
    padding: 10px;
    margin-top: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 4px
}

.post .comment-list textarea {
    width: 100%;
    height: 78px;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    resize: none
}

.post .comment-list textarea:focus, .post .comment-list textarea:hover {
    background: transparent
}

.post .comment-list .hotkey, .post .comment-list .warning {
    position: relative;
    top: 2px;
    margin-left: 11px
}

.post .comment-list .hotkey i, .post .comment-list .warning i {
    margin-right: 5px
}

.post .comment-list .open-comment {
    position: relative;
    left: 50%;
    margin-left: -55px;
    background: none
}

.post .comment-list .emoji {
    position: relative;
    display: inline-block
}

.post .comment-list .emoji .fa-smile-o {
    position: relative;
    top: 2px;
    margin-left: 20px;
    font-size: 16px
}

.post .comment-list .share-group {
    position: relative;
    top: 7px;
    color: #999999
}

.post .comment-list .share-group img {
    opacity: 0.6;
    filter: alpha(opacity=60)
}

.post .comment-list .share-group a {
    margin: 0 4px
}

.post .comment-list .share-group .share-douban {
    position: relative;
    top: 3px;
    color: #999999;
    font-size: 18px;
    font-weight: bold
}

.post .atwho-view {
    z-index: 1010
}

.post .comment-list {
    margin-bottom: 35px
}

.post .comment-list .load-more {
    padding: 10px 0;
    margin-bottom: 0;
    font-size: 12px
}

.post .comment-list .highlight {
    background-color: #fffdec
}

.post .comment-list .highlight .content > p, .post .comment-list .highlight .content .meta-top, .post .comment-list .highlight .content .comment-footer {
    padding-right: 10px;
    padding-left: 10px
}

.post .comment-list .fa-heart {
    color: #de533a
}

.post .comment-list .signout-comment {
    text-align: center
}

.post .comment-list .comment-head {
    margin-bottom: 25px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    color: #999999;
    font-size: 12px;
    font-weight: normal;
    line-height: 52px
}

.post .comment-list .comment-head a {
    margin: 0 5px;
    color: #999999
}

.post .comment-list .comment-head a.active, .post .comment-list .comment-head a:hover {
    color: #555555
}

.post .comment-list .comment-head i {
    margin-right: 6px
}

.post .comment-list .note-comment {
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    font-size: 16px;
    line-height: 1.5
}

.post .comment-list .note-comment .meta-top {
    padding-top: 10px;
    margin: 0 0 10px
}

.post .comment-list .note-comment .meta-top > p {
    margin: 0;
    line-height: 1
}

.post .comment-list .note-comment .content .avatar {
    float: left
}

.post .comment-list .note-comment .content .author-name {
    font-size: 14px;
    color: #4094c7
}

.post .comment-list .note-comment .content .author-name:hover {
    color: #075b8d
}

.post .comment-list .note-comment .content .author-name.active, .post .comment-list .note-comment .content .author-name:active, .post .comment-list .note-comment .content .author-name:focus {
    color: #075b8d
}

.post .comment-list .note-comment .content .author-name.disabled, .post .comment-list .note-comment .content .author-name.disabled:hover, .post .comment-list .note-comment .content .author-name.disabled:focus, .post .comment-list .note-comment .content .author-name.disabled:active, .post .comment-list .note-comment .content .author-name.disabled.active, .post .comment-list .note-comment .content .author-name[disabled], .post .comment-list .note-comment .content .author-name[disabled]:hover, .post .comment-list .note-comment .content .author-name[disabled]:focus, .post .comment-list .note-comment .content .author-name[disabled]:active, .post .comment-list .note-comment .content .author-name[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.post .comment-list .note-comment .content .reply-time {
    margin-top: 3px;
    font-size: 12px;
    color: #999999
}

.post .comment-list .note-comment .content .reply-time a {
    color: #b1b1b1
}

.post .comment-list .note-comment .content p {
    word-break: break-all;
    word-wrap: break-word
}

.post .comment-list .note-comment .content p img {
    width: 20px;
    height: 20px
}

.post .comment-list .note-comment .content p a {
    color: #4094c7
}

.post .comment-list .note-comment .content p a:hover {
    color: #075b8d
}

.post .comment-list .note-comment .content p a.active, .post .comment-list .note-comment .content p a:active, .post .comment-list .note-comment .content p a:focus {
    color: #075b8d
}

.post .comment-list .note-comment .content p a.disabled, .post .comment-list .note-comment .content p a.disabled:hover, .post .comment-list .note-comment .content p a.disabled:focus, .post .comment-list .note-comment .content p a.disabled:active, .post .comment-list .note-comment .content p a.disabled.active, .post .comment-list .note-comment .content p a[disabled], .post .comment-list .note-comment .content p a[disabled]:hover, .post .comment-list .note-comment .content p a[disabled]:focus, .post .comment-list .note-comment .content p a[disabled]:active, .post .comment-list .note-comment .content p a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.post .comment-list .note-comment form {
    margin-top: 10px;
    margin-bottom: -1px
}

.post .comment-list .note-comment .comment-text {
    margin-top: -1px;
    background-color: whitesmoke;
    border-color: #eeeeee;
    border-radius: 0
}

.post .comment-list .note-comment .hotkey, .post .comment-list .note-comment .warning {
    top: 1px;
    font-size: 12px
}

.post .comment-list .comment-footer {
    margin-bottom: 10px
}

.post .comment-list .comment-footer .report, .post .comment-list .child-comment-footer .report {
    display: none
}

.post .comment-list .comment-footer .delete, .post .comment-list .comment-footer .dismiss, .post .comment-list .comment-footer .reply, .post .comment-list .child-comment-footer .delete, .post .comment-list .child-comment-footer .dismiss, .post .comment-list .child-comment-footer .reply {
    margin-left: 14px
}

.post .comment-list .comment-footer .like, .post .comment-list .child-comment-footer .like {
    margin-top: 5px
}

.post .comment-list .comment-footer > a, .post .comment-list .comment-footer .report_comment, .post .comment-list .child-comment-footer > a, .post .comment-list .child-comment-footer .report_comment {
    color: #999999;
    font-size: 13px
}

.post .comment-list .comment-footer > a:hover, .post .comment-list .comment-footer .report_comment:hover, .post .comment-list .child-comment-footer > a:hover, .post .comment-list .child-comment-footer .report_comment:hover {
    color: #555555
}

.post .comment-list .comment-footer .dropdown-menu, .post .comment-list .child-comment-footer .dropdown-menu {
    left: auto;
    right: -40px;
    min-width: initial;
    font-size: 12px;
    text-align: left
}

.post .comment-list .child-comment-list {
    padding-bottom: 30px;
    margin-top: 10px;
    border-top: 1px dashed #eeeeee
}

.post .comment-list .child-comment {
    padding: 15px 0 15px 10px;
    border-bottom: 1px dashed #d9d9d9;
    border-left: 3px solid #d9d9d9;
    font-size: 13px
}

.post .comment-list .child-comment p {
    margin-bottom: 0
}

.post .comment-list i {
    position: relative;
    bottom: 1px;
    margin-right: 5px
}

.post .comment-list .comment-toolbar {
    padding: 20px 0 15px 10px;
    border-left: 3px solid #d9d9d9;
    border-bottom: 1px dashed #eeeeee;
    font-size: 13px;
    color: #999999
}

.post .include-collection {
    background-color: whitesmoke
}

.post .include-collection .content {
    margin-top: 40px
}

.post .include-collection .content > h5 {
    margin: 0 0 15px;
    font-size: 13px;
    font-weight: normal;
    color: #999999
}

.post .include-collection .article-list li {
    padding-bottom: 15px;
    margin-bottom: 15px
}

.post .include-collection {
    position: relative;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid whitesmoke;
    z-index: 2
}

.visitor_edit {
    width: 620px;
    margin: 0 auto 50px;
    font-size: 12px;
    color: #d5d5d5
}

.visitor_edit .further-reading-line {
    width: 40px;
    padding-top: 5px;
    margin: 15px 0;
    border-top: 1px solid #d9d9d9
}

.visitor_edit a {
    color: #999999
}

.visitor_edit .article-origin a {
    color: #d5d5d5
}

.visitor_edit .reading-list > li {
    margin-bottom: 10px
}

.visitor_edit .reading-list li .pull-right {
    position: relative
}

.visitor_edit .btn-link, .visitor_edit .article-origin {
    font-size: 12px;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
}

.visitor_edit .reading-link-text:focus {
    border-bottom: 1px solid #d9d9d9
}

.visitor_edit .reading-info, .visitor_edit .reading-link-text {
    display: inline-block;
    outline: none
}

.visitor_edit .reading-info h6, .visitor_edit .reading-info span, .visitor_edit .reading-link-text h6, .visitor_edit .reading-link-text span {
    outline: none;
    display: inline-block
}

.visitor_edit .reading-info h6:focus, .visitor_edit .reading-info span:focus, .visitor_edit .reading-link-text h6:focus, .visitor_edit .reading-link-text span:focus {
    border-bottom: 1px solid #d9d9d9
}

.visitor_edit h6 {
    margin: 0;
    display: inline-block;
    font-size: 14px;
    color: #555555
}

.visitor_edit .reading-states {
    margin-left: 5px
}

.visitor_edit .edit {
    position: absolute;
    display: inline-block;
    margin-left: 5px;
    background-color: white;
    border: 1px solid transparent;
    text-align: center;
    z-index: 1
}

.visitor_edit .edit:hover {
    border: 1px solid #d9d9d9;
    z-index: 2
}

.visitor_edit .edit li {
    margin-bottom: 0;
    border-bottom: 1px solid #d9d9d9
}

.visitor_edit .edit li:last-child, .visitor_edit .edit li:first-child {
    border-bottom: none
}

.visitor_edit .edit li a {
    width: 100%;
    display: inline-block;
    padding: 0 4px;
    text-align: left;
    box-sizing: border-box
}

.visitor_edit .edit li:hover {
    background-color: #555555;
    color: white
}

.visitor_edit .edit i {
    position: relative;
    top: -1px
}

.report_article {
    margin-top: -20px
}

.report_article .fa {
    margin-right: 5px
}

.pull-right > .dropdown {
    right: 130px
}

.pull-right > .dropdown-menu {
    right: -50px
}

.author-copyright {
    margin: -20px 0 0 20px
}

.author-copyright .fa {
    margin-right: 5px
}

.support-author {
    padding: 25px;
    margin-bottom: 40px;
    background-color: whitesmoke;
    border-left: 4px solid #f57e42;
    box-sizing: border-box;
    box-shadow: 0 0 1px #d9d9d9
}

.support-author .btn-pay {
    margin: 10px 15px 10px 0
}

.support-author span {
    margin-right: 10px;
    vertical-align: middle
}

.support-author span a {
    margin: 0 5px;
    font-weight: bold;
    color: #f57e42
}

.support-author p {
    margin: 0 auto 10px;
    font-size: 17px;
    font-weight: bold
}

.support-author .avatar-list {
    display: inline-block
}

.support-author .avatar {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 3px;
    border: 1px solid #d9d9d9;
    vertical-align: middle;
    text-align: center
}

.support-author .avatar img {
    border: none
}

.support-author .avatar .fa {
    line-height: 30px
}

.support-author .payment-list {
    font-size: 14px
}

.footer-logo {
    display: none !important
}

.post.output.longweibo {
    padding: 0 !important;
    background: #fff;
    line-height: 1.5
}

.post.output.longweibo .post-bg {
    box-shadow: none
}

.post.output.longweibo .container {
    width: 640px;
    overflow: hidden
}

.post.output.longweibo blockquote p:last-child {
    margin: 0
}

.post.output.longweibo pre {
    word-wrap: normal;
    word-break: break-all;
    white-space: pre
}

.post.output.longweibo .meta-top {
    display: block
}

.post.output.longweibo .article {
    margin-top: 0
}

.post.output.longweibo .article {
    padding: 50px 35px 0 !important;
    font-size: 20px;
    word-break: break-all
}

.post.output.longweibo .article p {
    margin-bottom: 35px
}

.post.output.longweibo .article p, .post.output.longweibo .article ul, .post.output.longweibo .article ol {
    text-align: left;
    word-break: initial;
    word-break: break-word
}

.post.output.longweibo .article .avatar {
    width: 40px;
    height: 40px;
    line-height: 25px
}

.post.output.longweibo .article .author {
    color: #15a7f0;
    font-size: 30px;
    font-weight: normal;
    line-height: 45px
}

.post.output.longweibo .article h1 {
    margin-bottom: 30px;
    font-size: 42px;
    line-height: 1.5
}

.post.output.longweibo .article h2 {
    margin-bottom: 26px;
    font-size: 38px
}

.post.output.longweibo .article h3 {
    margin-bottom: 24px;
    font-size: 36px
}

.post.output.longweibo .article h4 {
    margin-bottom: 22px;
    font-size: 34px
}

.post.output.longweibo .article h5 {
    margin-bottom: 20px;
    font-size: 32px
}

.post.output.longweibo .article h6 {
    margin-bottom: 18px;
    font-size: 30px
}

.post.output.longweibo .article .show-content {
    font-size: 30px;
    font-weight: normal;
    line-height: 50px
}

.post.output.longweibo .article * {
    font-size: 30px;
    line-height: 1.5
}

.post.output.longweibo .article .image-caption {
    font-size: 25px
}

.post.output.longweibo .footer {
    width: 570px;
    height: 100px;
    padding: 0;
    margin: 0 auto;
    border-top: 1px solid #eeeeee;
    overflow: hidden;
}

.post.output.longweibo .video-package {
    margin: 0 auto 20px;
    text-align: center
}

.post.output.longweibo .video-package div.player {
    position: relative;
    display: inline-block;
    width: 480px;
    height: 400px;
    background-size: 480px 400px;
    cursor: pointer
}

.post.output.longweibo .video-package div.player:before {
    content: ' ';
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -45px;
    margin-top: -45px;
    display: block;
    width: 90px;
    height: 90px;
    background-image: url(/images/play-btn.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 90px 90px
}

.post.output.longweibo .video-package div.player:after {
    content: '点击加载视频';
    position: absolute;
    top: 250px;
    display: block;
    width: 100%;
    font-size: 20px;
    color: white;
    text-shadow: 0px 0px 5px black;
    text-align: center
}

.post.output.longweibo .video-package .video-description {
    min-width: 20%;
    min-height: 22px;
    display: inline-block;
    padding: 10px;
    margin: 0 auto;
    border-bottom: 1px solid #d9d9d9;
    font-size: 25px;
    color: #999999;
    font-style: italic;
    line-height: 1.7
}

.post.output.longweibo .video-package .video-description:empty {
    display: none
}

.post.output.longweibo .video-package .video-description a {
    font-size: 25px
}

.post .fix-ie8 .meta-top {
    display: block
}

.post .fix-ie8 .people {
    position: static;
    width: 600px;
    padding: 0 0 20px 20px;
    margin: 10px auto;
    border-left: 2px solid #3f3f3f;
    border-right: none;
    text-align: left;
    display: none
}

.post .fix-ie8 .people .avatar, .post .fix-ie8 .people .name {
    margin-left: 0
}

@media (max-width: 480px) {
    .post .wrap-btn .login {
        position: relative;
        top: 13px
    }

    .post .container .article .article-share .add-collection, .post .container .article .article-share .bookmark, .post .container .article .article-share .bookmarked {
        margin-right: 8%
    }

    .post .meta-bottom .like {
        width: 120px;
        height: 36px;
        line-height: 38px;
        font-size: 14px
    }

    .post .meta-bottom .like .like-button {
        width: 52px;
        height: 38px;
        padding-right: 0
    }

    .post .meta-bottom .like span {
        top: -14px;
        height: 20px;
        padding-left: 9px
    }

    .post .meta-bottom .share-group {
        margin-top: 12px
    }

    .post .meta-bottom .share-group > a span {
        display: none
    }

    .post .support-author p {
        width: auto
    }

    .post .comment-list .share-group {
        display: none
    }

    .post .comment-list .note-comment {
        padding: 0 10px 10px 0
    }
}

@media (max-width: 767px) {
    .post .post-bg .container {
        width: 100%
    }

    .post .visitor_edit, .post .meta-bottom, .post .support-author, .post .comment-list, .post .include-collection .content {
        width: auto
    }

    .post .container .article, .post .visitor_edit, .post .meta-bottom, .post .comment-list, .post .include-collection .content {
        padding-left: 10px;
        padding-right: 10px
    }

    .post .meta-bottom .share-group .more .dropdown-menu {
        right: -10px;
        left: auto;
        z-index: 2
    }

    .post .meta-bottom .share-group .more .dropdown-menu::before, .post .meta-bottom .share-group .more .dropdown-menu::after {
        left: auto;
        right: 43px
    }

    .post .post-bg .container .related-avatar-group {
        position: relative;
        top: 77px;
        padding-left: 10px;
        margin-bottom: 30px
    }

    .post .read-modal .change-font {
        display: none
    }
}

@media (max-width: 768px) {
    .share-group .dropdown-menu {
        z-index: initial
    }
}

@media (min-width: 1588px) {
    .post .article-related {
        padding-left: 195px
    }
}

.editor-oprater .select-field {
    min-width: 150px
}

.collections .span7 {
    min-height: 700px;
    max-width: 900px
}

.collections .avatar {
    float: left;
    width: 40px;
    height: 40px
}

.collections .avatar img {
    border: none
}

.collections .page-title .btn-success {
    margin: 10px 0 0 10px;
    border-radius: 30px;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.collections .page-title .search {
    margin-bottom: 10px
}

.collections .sort-nav {
    padding-left: 35px
}

.collections .collections-list {
    margin: 15px 0 10px 35px
}

.collections .sequence-nav {
    margin: 30px 0 0 35px;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.collections .sequence-nav a {
    color: #999999
}

.collections .sequence-nav .active {
    color: inherit
}

.collections .sequence-nav .loader-tiny {
    margin-left: 10px
}

.collections-list li {
    padding: 15px 0 10px;
    border-bottom: 1px dashed #d9d9d9
}

.collections-list li:last-child {
    border-bottom: none
}

.collections-list .avatar {
    float: left;
    width: 40px;
    height: 40px
}

.collections-list .avatar img {
    border: none
}

.collections-list .collections-info {
    position: relative;
    margin-left: 55px
}

.collections-list .collections-info h5 {
    margin: 0 0 3px
}

.collections-list p {
    margin-bottom: 0;
    color: #999999;
    font-size: 11px
}

.collections-list .description {
    padding-right: 120px;
    margin-bottom: 3px;
    font-size: 12px
}

.collections-list .tag {
    margin-left: 10px;
    display: inline-block;
    line-height: 20px
}

.collections-list .tag i {
    margin-right: 2px
}

.collections-list .tag a {
    color: #999999
}

.collections-list .btn {
    position: absolute;
    right: 0;
    top: 50%;
    padding: 2px 10px 0px;
    margin-top: -13px
}

.collection-article .sequence-nav {
    list-style: none;
    margin: 0;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.collection-article .sequence-nav li {
    display: inline-block
}

.collection-article .sequence-nav a {
    color: #999999
}

.collection-article .sequence-nav .active a {
    color: #555555
}

.collection-article .sequence-nav .loader-tiny {
    margin-left: 10px
}

.collection-article .tag, .collection-article .collection_state {
    padding: 0 16px;
    margin: 0 5px 10px 0;
    display: inline-block;
    background-color: #eeeeee;
    border-radius: 30px;
    line-height: 26px
}

.collection-article .tag i, .collection-article .collection_state i {
    margin-right: 4px
}

.collection-article .collection_state {
    background: none;
    border: 1px solid #eeeeee;
    color: #999999
}

.collection-article .collection-top {
    position: relative;
    padding: 30px 0 45px;
    margin-bottom: 30px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #eeeeee
}

.collection-article .collection-top [class*="span"]:first-child {
    margin: 0 auto
}

.collection-article .collection-top .span8 {
    position: relative
}

.collection-article .collection-top .header {
    margin: 30px 0
}

.collection-article .collection-top .header .avatar {
    float: left;
    width: 72px;
    height: 72px;
    margin-right: 20px
}

.collection-article .collection-top .header h3 {
    margin: 0 0 5px;
    font-size: 24px
}

.collection-article .collection-top .header .author i {
    margin: 0 10px 0 20px
}

.collection-article .collection-top .description {
    margin-bottom: 45px;
    font-size: 16px
}

.collection-article .collection-top .description a.blue-link {
    font-size: 14px
}

.collection-article .footer > span {
    position: relative
}

.collection-article .footer span > a {
    color: #999999
}

.collection-article .footer span > a i {
    margin-right: 5px
}

.collection-article .footer span > em {
    margin: 0 8px 0 10px
}

.collection-article .footer .dropdown-menu {
    right: -58px;
    left: auto
}

.collection-article .footer .dropdown-menu a {
    padding: 3px 15px;
    font-size: 12px
}

.collection-article .footer .dropdown-menu a:hover {
    color: white
}

.collection-article .footer .dropdown-menu img {
    width: 16px;
    height: 16px;
    margin-top: -4px;
    margin-right: 5px
}

.collection-article .follow-group {
    position: absolute;
    top: 70px;
    right: -250px;
    width: 220px
}

.collection-article .follow-group .btn {
    padding: 9px 14px;
    font-size: 14px
}

.collection-article .follow-group .btn i {
    padding: 0;
    margin-right: 3px;
    border: none
}

.collection-article .follow-group .btn span {
    padding: 0;
    display: inline-block;
    border: none
}

.collection-article .follow-group .btn > span {
    padding-left: 6px;
    margin-left: 3px;
    border-left: 1px solid white;
    line-height: 17px
}

.collection-article .follow-group .btn-success a {
    color: white
}

.collection-article .follow-group ul {
    margin-top: 25px
}

.collection-article .follow-group li {
    float: left
}

.collection-article .follow-group .avatar {
    width: 36px;
    height: 36px;
    display: inline-block;
    margin: 0 8px 8px 0
}

.collection-article .follow-group .btn.following > span {
    border-left: 1px solid #d9d9d9
}

.collection-article .follow-group {
    position: static \9;
    margin-top: 15px \9;
    width: auto \9
}

.collection-article .follow-group ul {
    margin-top: 15px \9
}

.collection-article .relationships .toolbar {
    padding-bottom: 5px;
    margin-bottom: 10px
}

.collection-article .relationships .toolbar h3 {
    margin: 0;
    color: #999999;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 36px
}

.collection-article .article-list {
    margin-top: 20px
}

.collection-article .article-list .article-content {
    padding-right: 40px;
    margin-bottom: 5px;
    display: none
}

.collection-article .article-list .list-footer > span {
    display: none
}

.collection-article .article-list .list-footer .btn {
    background-color: transparent;
    border-radius: 20px
}

.collection-article .article-list .list-footer .btn.accept {
    border: 1px solid #46a546;
    color: #46a546
}

.collection-article .article-list .list-footer .btn.reject {
    border: 1px solid #e78170;
    color: #e78170
}

.collection-article .span8 {
    float: none;
    margin: 0 auto;
    max-width: 740px
}

.collection-article .invite h5 {
    margin-right: 5px;
    font-size: 16px
}

.collection-article .invite h5 i {
    margin: 0 3px;
    color: #999999
}

.collection-article .invite > div {
    position: relative;
    padding: 15px 15px 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px
}

.collection-article .invite .change-author {
    margin-top: 10px
}

.collection-article .invite .author-list {
    margin: 5px 0 0
}

.collection-article .invite .author-list > li {
    position: relative;
    float: left;
    padding: 0 15px 0 45px;
    margin: 15px 0;
    font-size: 12px
}

.collection-article .invite .author-list .avatar {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    display: inline-block
}

.collection-article .invite .author-list p {
    height: 20px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.collection-article .invite .author-list p a {
    margin: 0 2px;
    color: #4094c7
}

.collection-article .invite .author-list p a:hover {
    color: #075b8d
}

.collection-article .invite .author-list p a.active, .collection-article .invite .author-list p a:active, .collection-article .invite .author-list p a:focus {
    color: #075b8d
}

.collection-article .invite .author-list p a.disabled, .collection-article .invite .author-list p a.disabled:hover, .collection-article .invite .author-list p a.disabled:focus, .collection-article .invite .author-list p a.disabled:active, .collection-article .invite .author-list p a.disabled.active, .collection-article .invite .author-list p a[disabled], .collection-article .invite .author-list p a[disabled]:hover, .collection-article .invite .author-list p a[disabled]:focus, .collection-article .invite .author-list p a[disabled]:active, .collection-article .invite .author-list p a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.collection-article .invite .author-list .user-name {
    font-size: 14px
}

.collection-article .invite .author-list ul {
    min-height: 115px;
    margin: 10px 0
}

.collection-article .invite .author-list li li {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d9d9d9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.collection-article .invite .author-list li i {
    margin-right: 5px;
    color: #999999
}

.collection-new {
    padding: 70px 100px;
    text-align: center
}

.collection-new .avatar {
    position: relative;
    width: 100px;
    height: 80px;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 10px
}

.collection-new .avatar i {
    font-size: 80px
}

.collection-new .avatar input {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 86px;
    height: 69px;
    display: inline-block;
    padding: 0;
    z-index: 1;
    opacity: 0;
    filter: alpha(opacity=0)
}

.collection-new .picture-preview img {
    width: 90px;
    height: 90px
}

.collection-new p {
    margin-bottom: 20px
}

.collection-new .set-collection {
    margin-bottom: 20px;
    border: 1px solid #d9d9d9;
    text-align: left
}

.collection-new .set-collection .dropdown {
    display: inline-block
}

.collection-new .set-collection .dropdown > a {
    display: inline-block;
    padding: 8px 10px 8px 20px;
    margin: 12px 0;
    border-right: 1px solid #d9d9d9
}

.collection-new .set-collection .dropdown > a i {
    margin-left: 10px
}

.collection-new .set-collection input {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
    line-height: 50px
}

.collection-new .set-collection input[type="text"], .collection-new .set-collection textarea {
    background: none;
    font-size: 16px;
    box-shadow: none
}

.collection-new .set-collection textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 0;
    border: none;
    resize: none;
    box-sizing: border-box
}

.collection-new .input-prepend {
    width: 100%;
    padding-left: 12px;
    border: 1px solid #d9d9d9;
    text-align: left;
    border-radius: 0;
    box-sizing: border-box
}

.collection-new .input-prepend input[type="text"], .collection-new .input-prepend .add-on {
    padding: 10px;
    border: none;
    background: none !important;
    text-shadow: none
}

.collection-new .input-prepend input[type="text"] i, .collection-new .input-prepend .add-on i {
    margin-right: 5px
}

.collection-new .input-prepend .bootstrap-tagsinput {
    margin-bottom: 0
}

.collection-new .bootstrap-tagsinput {
    width: 60%;
    width: -moz-calc(100% - 105px);
    width: -webkit-calc(100% - 105px);
    width: calc(100% - 105px);
    padding: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: none
}

.collection-new .bootstrap-tagsinput .tag {
    padding: 10px;
    margin: 3px 1px;
    font-weight: normal;
    word-break: break-all
}

.collection-new .help-block {
    display: block;
    margin: 0 auto 20px;
    font-size: 12px;
    text-align: left
}

.collection-new .typeahead {
    width: 240px;
    border-radius: 0 0 4px 4px
}

.collection-new .typeahead li a {
    padding-left: 10px
}

.collection-new .typeahead img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    border-radius: 4px
}

.collection-new .set-contribute {
    padding: 8px 0 8px 20px;
    margin-bottom: 45px;
    border: 1px solid #d9d9d9
}

.collection-new .set-contribute i {
    margin-right: 6px
}

.collection-new .set-contribute > div {
    display: inline-block
}

.collection-new .set-contribute .set-left {
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #eeeeee;
    line-height: 26px
}

.collection-new .set-contribute span {
    margin-right: 30px
}

.collection-new .set-contribute label, .collection-new .set-contribute .radio {
    padding: 0;
    margin: 0 15px 0 0;
    cursor: pointer
}

.collection-new .set-contribute .iradio_minimal {
    top: -2px;
    margin-right: 10px
}

.collection-new .set-contribute label, .collection-new .set-contribute .iradio_minimal {
    display: inline-block
}

.collection-new .set-contribute .tooltip .tooltip-inner {
    white-space: normal
}

.collection-new .set-contribute .disabled {
    color: #d5d5d5
}

.collection-new .set-contribute .disabled a {
    color: #d5d5d5
}

.collection-new .set-contribute .disabled div {
    cursor: not-allowed
}

.collection-new .btn {
    width: 350px
}

.collection-new .set-collection .toolbar {
    padding-left: 7px;
    margin: 0;
    background-color: #dedede
}

.collection-new .set-collection .toolbar li {
    float: left;
    cursor: pointer;
    text-align: center
}

.collection-new .set-collection .toolbar a {
    padding: 11px 14px;
    display: inline-block;
    line-height: 17px
}

.collection-new .set-collection .toolbar .active a, .collection-new .set-collection .toolbar a:hover, .collection-new .set-collection .toolbar a:active, .collection-new .set-collection .toolbar a:focus {
    background-color: #2f2f2f;
    color: white;
    text-decoration: inherit;
    background-color: #363636;
    background-image: -moz-linear-gradient(top, #3c3c3c, #2f2f2f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3c3c3c), to(#2f2f2f));
    background-image: -webkit-linear-gradient(top, #3c3c3c, #2f2f2f);
    background-image: -o-linear-gradient(top, #3c3c3c, #2f2f2f);
    background-image: linear-gradient(to bottom, #3c3c3c, #2f2f2f);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF3C3C3C', endColorstr='#FF2F2F2F', GradientType=0)
}

.collection-new .set-collection .toolbar .tooltip {
    white-space: nowrap;
    pointer-events: none
}

.collection-new .set-collection .toolbar .inline_menu {
    padding: 0;
    margin: 0
}

.collection-new .set-collection .toolbar .menu {
    position: relative;
    text-align: center
}

.collection-new .set-collection .toolbar .menu .submenu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    background: #2f2f2f;
    z-index: 1000;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 200ms ease-in-out, top 200ms ease;
    -moz-transition: opacity 200ms ease-in-out, top 200ms ease;
    -o-transition: opacity 200ms ease-in-out, top 200ms ease;
    transition: opacity 200ms ease-in-out, top 200ms ease
}

.collection-new .set-collection .toolbar .menu .submenu li {
    width: 100%
}

.collection-new .set-collection .toolbar .menu .submenu li a {
    display: block
}

.collection-new .set-collection .toolbar .menu .active a.submenu-cover, .collection-new .set-collection .toolbar .menu a.submenu-cover:hover, .collection-new .set-collection .toolbar .menu a.submenu-cover:active, .collection-new .set-collection .toolbar .menu a.submenu-cover:focus {
    background-color: transparent;
    background-image: none
}

.collection-new .set-collection .toolbar .menu:hover .submenu {
    opacity: 1;
    filter: alpha(opacity=100);
    pointer-events: auto
}

.collection-new .set-collection .toolbar .menu:after {
    position: absolute;
    top: 13px;
    right: 2px;
    content: '';
    display: block;
    border-top: 5px solid #999999;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.collection-new .set-collection .toolbar .pull-right a {
    font-size: 13px
}

@media (max-width: 480px) {
    .collections .page-title a.btn.btn-success {
        margin-top: 5px
    }

    .collection-article .follow-group ul {
        display: none
    }

    .container .collection-new {
        padding: 70px 10px
    }

    .collection-new .input-prepend {
        width: 100%
    }

    .collection-new .input-prepend span.add-on {
        width: 30%;
        height: 42px;
        box-sizing: border-box
    }

    .collection-new .input-prepend input.span2, .collection-new .input-prepend .bootstrap-tagsinput {
        width: 70%
    }

    .collection-new textarea {
        width: 100%;
        box-sizing: border-box
    }

    .collection-new .help-block {
        white-space: pre-line
    }

    .collection-new .btn, .collection-new .help-block {
        width: 100%;
        box-sizing: border-box
    }

    .collection-new .typeahead {
        left: 30%;
        width: 70%;
        display: block
    }
}

@media (max-width: 767px) {
    .collection-article .invite ul ul {
        min-height: initial
    }
}

@media (max-width: 768px) {
    .collections .page-title a.btn-success {
        padding: 4px 12px;
        margin-top: 11px
    }

    .collections .sort-nav {
        padding-left: 0
    }

    .collections .sequence-nav {
        margin-left: 0
    }

    .collections .collections-list {
        margin: 15px 0 0
    }

    .collections .collections-list .collections-info h5 {
        margin-bottom: 10px
    }

    .collections .collections-list .btn {
        margin: -3px 0 0
    }

    .collections .collections-list p {
        margin-bottom: 5px
    }

    .collection-article .span8 {
        width: auto;
        padding: 0 20px
    }

    .collection-article .collection-top {
        padding-bottom: 20px
    }

    .collection-article .collection-top .span8 {
        padding-top: 50px
    }

    .collection-new {
        padding: 70px 50px
    }
}

@media (max-width: 979px) {
    .collection-new .set-contribute .set-left {
        margin-bottom: 10px;
        border: none
    }
}

@media (max-width: 1305px) {
    .collection-article .follow-group {
        position: static;
        margin-top: 15px;
        width: auto
    }

    .collection-article .follow-group ul {
        margin-top: 15px
    }
}

.user .user-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 45px;
    padding: 80px 30px;
    overflow: auto;
    border-right: 1px solid #d9d9d9;
    box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.35)
}

.user .people {
    padding: 0 0 20px;
    text-align: center
}

.user .people .avatar {
    width: 90px;
    height: 90px;
    margin: 0 auto 10px
}

.user .basic-info .signed_author {
    display: block;
    width: 108px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    border: 1px solid #e78170;
    border-radius: 13px;
    font-size: 12px;
    line-height: 24px;
    color: #e78170;
    text-align: center
}

.user .basic-info .signed_author img {
    height: 14px
}

.user .basic-info .about {
    margin: 15px 0;
    text-align: center
}

.user .basic-info .about p.intro {
    margin-bottom: 0;
    line-height: 24px;
    word-wrap: break-word
}

.user .basic-info .about a {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px
}

.user .basic-info .about .cancel, .user .basic-info .about .cancel:hover {
    color: #555555
}

.user .basic-info p i {
    position: relative;
    top: -1px;
    margin-right: 5px
}

.user .btn-group > .dropdown-menu {
    right: 0;
    min-width: inherit;
    text-align: left;
    font-size: 12px
}

.user .btn-group > .dropdown-menu::before, .user .btn-group > .dropdown-menu::after {
    left: 88px
}

.user .btn-group > .dropdown-menu::before {
    top: -9px
}

.user .btn-group > .dropdown-menu::after {
    top: -8px
}

.user .btn-group > .dropdown-menu .divider {
    margin: 5px 0
}

.user .btn-group > .dropdown-menu i {
    width: 14px;
    display: inline-block
}

.user .btn-group > .dropdown-menu .dropdown-menu {
    min-width: inherit;
    width: 116px;
    border-top-right-radius: 0;
    -webkit-transform: translate(-116px, 32px);
    -ms-transform: translate(-116px, 32px);
    transform: translate(-116px, 32px)
}

.user .btn-group > .dropdown-menu .dropdown-menu a {
    padding: 3px 10px
}

.user .basic-info .about .intro-form {
    display: none
}

.user .basic-info .about .intro-form textarea, .user .basic-info .about .intro-form input[type="text"] {
    width: 100%;
    max-height: 300px;
    padding: 10px;
    resize: none;
    box-sizing: border-box
}

.user .basic-info .about .intro-form input[type="text"] {
    height: 38px
}

.user .basic-info .sns a {
    width: 20px;
    height: 20px;
    padding: 0 2px;
    display: inline-block
}

.user .basic-info .sns a i {
    border-radius: 3px;
    color: white
}

.user .basic-info .sns a .fa-weixin {
    padding: 3px 2px;
    background: #49be38;
    vertical-align: middle;
    font-size: 14px
}

.user .basic-info .sns a img {
    border-radius: 3px;
    opacity: 0.8;
    filter: alpha(opacity=80)
}

.user .basic-info .sns a img:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.user .user-stats {
    margin-top: 15px;
    font-size: 12px;
    color: #999999
}

.user .user-stats ul {
    margin: 0
}

.user .user-stats li {
    display: inline-block;
    margin-bottom: 10px;
    border-right: 1px solid #d9d9d9;
    text-align: left
}

.user .user-stats li:last-child {
    border: none
}

.user .user-stats a {
    padding: 0 10px
}

.user .user-stats li a, .user .user-stats li b {
    display: block;
    font-size: 16px;
    font-weight: normal
}

.user .user-stats li b {
    font-style: italic
}

.user .user-stats span {
    font-size: 12px
}

.user .my-books, .user .my-collections {
    margin-bottom: 30px
}

.user .recent-post {
    max-width: 800px;
    padding: 30px 80px;
    word-break: break-word
}

.user .recent-post ul.nav-tabs {
    margin-bottom: 0;
    border-width: 2px
}

.user .recent-post ul.nav-tabs li {
    margin-right: 20px
}

.user .recent-post ul.nav-tabs li i {
    display: none
}

.user .recent-post ul.nav-tabs li a, .user .recent-post ul.nav-tabs li a:hover {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: -1px;
    background: none;
    border: none;
    border-radius: 0
}

.user .recent-post ul.nav-tabs li.active a {
    border-bottom: 2px solid #555555
}

.user .recent-post ul.nav-tabs li.pull-right {
    margin-right: 0
}

.user .recent-post ul.nav-tabs li.pull-right a {
    font-size: 12px
}

.user .recent-post .article-list {
    margin-top: 20px
}

.user .recent-post .article-list .list-top .author-name, .user .recent-post .article-list .list-top em {
    display: none
}

.user .recent-post .subscribing li .avatar {
    background: #e78170;
    text-align: center;
    line-height: 40px
}

.user .recent-post .subscribing li .avatar i {
    color: white
}

.user .recent-post .subscribing a.follow {
    margin-top: 7px
}

@media (max-width: 768px) {
    .user .user-aside {
        position: static;
        float: none;
        width: 100%;
        padding: 70px 10px 10px;
        border-right: 0;
        box-shadow: none
    }

    .user .people {
        padding-top: 45px
    }

    .user .user-stats br {
        display: none
    }

    .user .recent-post {
        float: none;
        width: 100%;
        padding: 10px;
        margin-left: 0
    }
}

@media (min-width: 1588px) {
    .user .user-aside {
        left: 170px
    }
}

.timeline-content {
    margin: 0 0 20px 0;
    list-style-type: none
}

.timeline-content li {
    position: relative;
    padding: 30px 0 30px 30px;
    margin-left: 60px;
    border-left: 1px solid #d9d9d9
}

.timeline-content a {
    color: #4094c7
}

.timeline-content a:hover {
    color: #075b8d
}

.timeline-content a.active, .timeline-content a:active, .timeline-content a:focus {
    color: #075b8d
}

.timeline-content a.disabled, .timeline-content a.disabled:hover, .timeline-content a.disabled:focus, .timeline-content a.disabled:active, .timeline-content a.disabled.active, .timeline-content a[disabled], .timeline-content a[disabled]:hover, .timeline-content a[disabled]:focus, .timeline-content a[disabled]:active, .timeline-content a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.timeline-content .meta {
    margin-top: 7px;
    font-size: 12px;
    color: #999999
}

.timeline-content .meta a {
    margin-right: 5px
}

.timeline-content .timeline-list {
    max-width: 1000px
}

.timeline-content .avatar-container {
    position: absolute;
    top: 30px;
    left: -22px;
    bottom: 0
}

.timeline-content .avatar {
    width: 40px;
    height: 40px;
    display: inline-block;
    border: 2px solid white;
    text-align: center
}

.timeline-content .avatar i {
    display: inline-block;
    margin-top: 13px;
    color: white
}

.timeline-content .collection-update .avatar, .timeline-content .notebook-update .avatar {
    background-color: #e78170
}

.timeline-content .article .article-content {
    background-color: whitesmoke
}

.timeline-content .article .title {
    display: block;
    padding: 20px 20px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 27px
}

.timeline-content .article p {
    padding: 10px 20px 20px;
    font-size: 12px
}

.timeline-content .comment-content {
    display: inline-block;
    padding: 10px 15px;
    margin: 0;
    background-color: whitesmoke
}

.timeline-content .comment-content i {
    color: #b1b1b1;
    font-size: 10px
}

.timeline-content .comment-content .fa-quote-left {
    margin-right: 5px
}

.timeline-content .comment-content .fa-quote-right {
    margin-left: 5px
}

.timeline-content .comment-content img {
    width: 20px;
    height: 20px
}

.timeline-content .comments {
    padding: 10px;
    margin: 10px 0 0;
    background-color: whitesmoke
}

.timeline-content .comments img {
    display: block;
    margin: 0 auto
}

.timeline-list .article-list {
    margin-top: 20px;
    margin-left: 35px
}

@media (max-width: 767px) {
    .user .timeline-left-aside {
        left: 40px;
        border: 1px solid #d9d9d9
    }
}

@media (max-width: 768px) {
    .timeline-content li {
        margin-left: 40px
    }

    .timeline-list .article-list {
        margin-left: 0
    }
}

@media (max-width: 979px) {
    .user .timeline-left-aside .help-block {
        display: none
    }
}

.favorite {
    padding: 50px 30px 0
}

.favorite .article-list {
    margin-top: 30px
}

.tool-bar .new-message, .tool-bar .all-message {
    padding-right: 15px;
    margin-top: 5px;
    margin-right: 10px
}

.tool-bar .all-message {
    border-right: 1px solid #d9d9d9
}

.tool-bar > a {
    color: #999999
}

.tool-bar a.active {
    color: #555555
}

.notification {
    padding: 30px 100px 0
}

.notification ul.unstyled {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 2px solid #d9d9d9
}

.notification ul.unstyled a {
    color: #4094c7
}

.notification ul.unstyled a:hover {
    color: #075b8d
}

.notification ul.unstyled a.active, .notification ul.unstyled a:active, .notification ul.unstyled a:focus {
    color: #075b8d
}

.notification ul.unstyled a.disabled, .notification ul.unstyled a.disabled:hover, .notification ul.unstyled a.disabled:focus, .notification ul.unstyled a.disabled:active, .notification ul.unstyled a.disabled.active, .notification ul.unstyled a[disabled], .notification ul.unstyled a[disabled]:hover, .notification ul.unstyled a[disabled]:focus, .notification ul.unstyled a[disabled]:active, .notification ul.unstyled a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.notification ul.unstyled li {
    padding: 10px;
    margin-bottom: 1px;
    border-bottom: 1px solid #eeeeee;
    line-height: 1.5
}

.notification ul.unstyled p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #999999
}

.notification ul.unstyled li.new {
    background: whitesmoke
}

.notification ul.unstyled i {
    margin-right: 10px;
    color: #e78170
}

.notification ul.unstyled .time {
    float: right;
    padding-left: 20px;
    margin-top: 2px;
    font-size: 12px;
    color: #999999
}

@media (max-width: 480px) {
    .notification {
        padding: 40px 10px 0
    }

    .notification ul.unstyled li {
        padding: 10px;
        line-height: 30px
    }
}

@media (max-width: 979px) {
    .sparles {
        padding: 30px 50px 0
    }
}

footer {
    padding: 8px 0 10px 25%;
    border-top: 1px solid #d9d9d9;
    overflow: hidden;
    color: #999999;
    box-sizing: border-box;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px
}

footer a {
    color: #999999
}

.footer-l {
    float: left;
    margin-left: 25px
}

.footer-l p {
    margin: 5px 0 0
}

.footer-l img {
    width: 60px;
    margin-left: 5px
}

.footer-r div {
    margin-top: 12px;
    display: inline-block;
    vertical-align: middle
}

.footer-r p {
    margin-bottom: 5px
}

.footer-r p a {
    margin: 0
}

.footer-r a {
    margin: 0 3px
}

.footer-r a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70)
}

.footer-r a:active {
    opacity: 1;
    filter: alpha(opacity=100)
}

.footer-r i {
    font-size: 17px
}

.footer-r .fa-weixin {
    font-size: 15px
}

.app-download-btn {
    display: inline-block;
    margin-right: 3px
}

.app-download-btn a img {
    width: 90px
}

.no-fluid footer {
    background-color: white;
    z-index: 10
}

footer .modal-header .close {
    margin-top: -10px
}

footer .modal-body img {
    border: 1px dashed #d9d9d9
}

.upgrade-ie {
    display: none
}

.ie6 .upgrade-ie, .ie7 .upgrade-ie {
    display: inline
}

@media (max-width: 768px) {
    footer {
        display: none
    }
}

@media (max-width: 1200px) {
    footer {
        padding: 10px 0 15px 25%
    }

    .footer-r, .footer-l {
        float: none
    }

    .footer-r {
        margin-left: 23px
    }
}

@media (min-width: 1588px) {
    .footer-l {
        margin-left: 57px
    }
}

.messages {
    padding: 0 20px;
    margin: 0 auto;
    max-width: 750px
}

.messages .page-title {
    padding: 0
}

.messages .top {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eeeeee
}

.messages .top .pull-right {
    position: relative
}

.messages .followers-modal {
    position: absolute;
    top: 30px;
    right: 0;
    left: auto;
    width: 170px
}

.messages .followers-modal input {
    width: 150px;
    display: block;
    padding: 0 15px;
    margin: 10px auto 0;
    border-radius: 30px
}

.messages .followers-modal ul {
    max-height: 280px;
    margin: 10px 0;
    overflow-y: auto
}

.messages .followers-modal li a {
    padding: 4px 15px;
    display: block
}

.messages .followers-modal li a:hover {
    color: white;
    background-color: #2f2f2f
}

.messages .open {
    position: relative
}

.messages .messages-papers {
    margin-top: 50px
}

.messages ul.dropdown-menu {
    right: -7px;
    min-width: 120px;
    text-align: left;
    font-size: 12px
}

.messages ul.dropdown-menu li a {
    padding: 3px 10px
}

.messages ul.dropdown-menu .dropdown-submenu > a::after {
    margin-right: 0
}

.messages ul.dropdown-menu .dropdown-menu {
    top: 32px;
    left: 0;
    width: 120px;
    border-radius: 0 0 4px 4px
}

.messages .dropdown-menu input {
    border-radius: 30px
}

.messages .arrow-top::before, .messages .arrow-top::after {
    left: 75%
}

.messages .avatar {
    position: relative;
    float: left
}

.messages .avatar img {
    width: 50px;
    height: 50px;
    line-height: 1%
}

.messages .avatar span {
    position: absolute;
    top: 0;
    right: -10px;
    padding: 0 6.5px;
    background-color: #e78170;
    border-radius: 50%;
    font-size: 10px;
    color: white
}

.messages .message_r .avatar {
    float: right
}

.messages-list .avatar {
    margin-right: 15px
}

.messages-list > li {
    padding: 20px 10px 10px;
    border-bottom: 1px solid #eeeeee
}

.messages-list > li:hover {
    background-color: whitesmoke
}

.messages-list .list-heard {
    margin-bottom: 8px
}

.messages-list .time {
    font-size: 12px;
    color: #999999
}

.messages-list p {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.messages-list .envelope {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #999999
}

.messages-list .btn {
    margin-top: 15px
}

.message-show {
    padding: 0 20px;
    overflow: auto
}

.message-show .time {
    font-size: 12px;
    color: #999999
}

.message-show ul {
    margin-bottom: 0;
    padding-bottom: 90px
}

.message-show li {
    margin-bottom: 30px;
    overflow: hidden
}

.message-show li:last-child {
    margin-bottom: 0
}

.message-show li > div {
    position: relative;
    margin: 0 64px
}

.message-show li > div::before, .message-show li > div::after {
    position: absolute;
    top: 0;
    content: '';
    display: inline-block
}

.message-show li > div::after {
    top: 1px
}

.message-show a {
    color: #4094c7 !important
}

.message-show li > div span {
    position: relative;
    padding: 17px 15px;
    border-width: 1px;
    border-style: solid;
    word-break: break-word;
    line-height: 1.5;
    display: table-cell
}

.message-show .message_l > div::before, .message-show .message_l > div::after {
    left: -9px;
    border-left: 9px solid rgba(255, 255, 255, 0);
    border-top: 16px solid #BAD0E9
}

.message-show .message_l > div::after {
    left: -7px;
    border-top: 16px solid #E7F1FC
}

.message-show .message_l > div span {
    background-color: #E7F1FC;
    border-color: #BAD0E9;
    border-radius: 0 4px 4px 4px
}

.message-show .message_r > div::before, .message-show .message_r > div::after {
    right: -9px;
    border-right: 9px solid rgba(255, 255, 255, 0);
    border-top: 16px solid #d9d9d9
}

.message-show .message_r > div::after {
    right: -7px;
    border-top: 16px solid #eeeeee
}

.message-show .message_r > div span {
    float: right
}

.message-show .message_r > div span {
    background-color: #eeeeee;
    border-color: #d9d9d9;
    border-radius: 4px 0 4px 4px
}

.writer-message {
    bottom: 0;
    width: 100%;
    margin-top: 15px
}

.writer-message form {
    max-width: 750px;
    padding-top: 10px;
    margin-bottom: 0;
    background-color: white;
    border-top: 1px solid #eeeeee
}

.writer-message .input-text {
    margin-right: 110px
}

.writer-message input {
    height: 36px;
    margin-bottom: 30px
}

.writer-message .btn {
    width: 100px;
    padding: 7px 20px;
    font-size: 16px
}

@media (max-width: 767px) {
    .writer-message {
        left: 20px;
        right: 20px;
        width: initial
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .writer-message form {
        max-width: 680px
    }
}

.messages.old {
    padding: 30px 100px 30px
}

.messages.old .alert a {
    margin: 0 5px;
    text-decoration: underline
}

.messages.old .nav-stacked li {
    float: left
}

.messages.old .nav-stacked .write-latter {
    float: right
}

.messages.old .nav-stacked li a {
    margin: 0;
    border-radius: 0
}

.messages.old .messages-papers {
    margin-top: 50px
}

.messages.old h3 {
    margin: 0 0 20px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    line-height: 24px
}

.messages.old .pagination {
    clear: both
}

.messages.old .messages-list {
    margin-bottom: 20px;
    margin-left: -65px;
    overflow: hidden;
    list-style-type: none
}

.messages.old .messages-list .load-more {
    margin: 30px 0 100px 0;
    text-align: left;
    clear: both
}

.messages.old .messages-list li {
    position: relative;
    width: 204px;
    height: 173px;
    display: inline-block;
    margin-left: 64px;
    margin-bottom: 30px;
    border: none;
    padding-bottom: 0
}

.messages.old .messages-list a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #999999
}

.messages.old .messages-list a:hover {
    color: #555555
}

.messages.old .messages-list .avatar {
    width: 20px;
    height: 20px;
    line-height: 1%
}

.messages.old .messages-list .avatar img {
    width: 100%;
    height: 100%
}

.messages.old .messages-list .sealed {
    background-position: 0 -55px;
    background-repeat: no-repeat;
    background-size: 250px
}

.messages.old .messages-list .opened {
    background-position: 0 -230px;
    background-repeat: no-repeat;
    background-size: 250px
}

.messages.old .messages-list .opened .avatar {
    position: absolute;
    top: 30px;
    right: 25px
}

.messages.old .messages-list .opened .title {
    position: absolute;
    top: 33px;
    right: 50px;
    left: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.messages.old .write, .messages.old .message-show {
    margin: 30px 60px;
    background: url(letter-bg.png) repeat #fffffb;
    border: 1px solid #d9d9d9;
    box-shadow: 0 0 3px #d9d9d9
}

.messages.old .write .header, .messages.old .message-show .header {
    height: 30px;
    padding: 20px;
    border-bottom: 2px solid #f5e3de
}

.messages.old .write .header .latter-address, .messages.old .message-show .header .latter-address {
    float: right;
    width: 340px;
    height: 20px;
    overflow: hidden;
    margin-top: 5px;
    text-align: right;
    font-size: 12px
}

.messages.old .write .header .author-name, .messages.old .message-show .header .author-name {
    float: left;
    width: 210px;
    height: 32px;
    overflow: hidden
}

.messages.old .write .body, .messages.old .message-show .body {
    padding: 30px;
    max-height: none;
    background: url(horizontal.gif) repeat 0 -4px;
    font-size: 16px;
    line-height: 30px
}

.messages.old .write .avatar, .messages.old .message-show .avatar {
    float: none;
    width: 30px;
    height: 30px;
    display: inline-block
}

.messages.old .write .avatar img, .messages.old .message-show .avatar img {
    width: 100%;
    height: 100%
}

.messages.old .message-show .header {
    overflow: hidden
}

.messages.old .btn-group {
    margin-left: 60px
}

.messages.old .btn-group .btn {
    padding: 10px
}

.messages.old .message-show .body {
    overflow: auto;
    min-height: 580px
}

.messages.old .message-show .body a {
    text-decoration: underline;
    color: #5bc0de
}

.messages.old .write textarea {
    width: 100%;
    min-height: 550px;
    padding: 0;
    background: none !important;
    border: none;
    box-shadow: none;
    resize: none;
    line-height: 30px;
    font-size: 16px
}

.messages.old .write input {
    position: relative;
    margin: 0;
    background: none !important;
    border-color: #d9d9d9 !important;
    border-radius: 0 4px 4px 0;
    z-index: 2
}

.messages.old .write input:focus, .messages.old .write textarea:focus {
    outline: none;
    box-shadow: none
}

.messages.old .write .dropdown-toggle {
    float: left;
    width: 30px;
    height: 30px;
    display: block;
    margin-right: -2px;
    background: #d9d9d9;
    border-radius: 4px 0 0 4px
}

.messages.old .write .dropdown .caret {
    margin: 13px 0 0 11px
}

.messages.old .write .dropdown-menu.select-target {
    max-height: 260px;
    overflow-y: auto
}

.messages.old .write .nickname-autocomplete {
    top: 26px;
    left: 28px;
    width: 218px;
    display: block;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
    z-index: 1
}

@media (max-width: 480px) {
    .container .messages.old {
        padding: 40px 10px 0
    }

    .container .messages.old .message-show {
        margin: 30px 0
    }

    .container .messages.old .message-show .header .latter-address {
        float: inherit;
        width: auto;
        margin-left: 10px
    }

    .container .messages.old .message-show .body {
        width: 100%;
        min-height: 300px;
        box-sizing: border-box
    }

    .container .messages.old .btn-group {
        margin-left: 0
    }

    .container .messages.old .write textarea {
        min-height: 300px
    }
}

@media (max-width: 767px) {
    .dropdown .span3 {
        width: 200px
    }

    .messages.old .message-show .body {
        min-height: 500px
    }

    .messages.old .write .header .latter-address, .messages.old .message-show .header .latter-address {
        width: 200px
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .messages.old .body {
        width: 100%;
        box-sizing: border-box
    }

    .messages.old .write, .messages.old .message-show {
        margin: 30px 0
    }

    .messages.old .btn-group {
        margin-left: 0
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .messages.old .write, .messages.old .message-show {
        margin: 30px 0
    }

    .messages.old .btn-group {
        margin-left: 0
    }
}

@media (max-width: 979px) {
    .messages.old {
        padding: 30px 50px 0
    }
}

.row-fluid .recommended .span7 {
    max-width: 1000px
}

.row-fluid .recommended .page-title {
    position: fixed;
    width: 50%;
    background: white;
    border-width: 2px;
    box-sizing: border-box;
    z-index: 1
}

.row-fluid .recommended .page-title li a {
    transition: all 0.3s
}

.row-fluid .recommended .page-title li i {
    display: none
}

.row-fluid .recommended .page-title .switch-default-tab i {
    display: inline-block
}

.row-fluid .recommended .page-title .settings a {
    cursor: move
}

.row-fluid .recommended .page-title .settings li i {
    margin-left: -5px;
    margin-right: 5px;
    display: inline-block
}

.row-fluid .recommended .page-title .settings .disabled a {
    cursor: inherit
}

.row-fluid .recommended .page-title .settings .switch-default-tab a i {
    margin: 0
}

.row-fluid .recommended .page-title .settings i.fa-cog {
    opacity: 1;
    filter: alpha(opacity=100)
}

.row-fluid .recommended .page-title .settings i.fa-cog::before {
    content: "\f058"
}

.row-fluid .recommended .thumbnails {
    padding-left: 36px;
    margin: 35px 0 0
}

.row-fluid .recommended .sort-nav {
    padding-left: 32px;
    margin-top: 50px
}

.row-fluid .recommended .top-notes {
    padding-left: 35px;
    margin-top: 35px
}

.row-fluid .recommended .user-subscriptions {
    margin-top: 80px
}

@media (max-width: 768px) {
    .row-fluid .recommended .page-title {
        position: static
    }

    .row-fluid .recommended .sort-nav {
        padding-left: 10px;
        margin-top: 0
    }

    .row-fluid .recommended .top-notes {
        padding-left: 10px
    }

    .row-fluid .recommended .guide-title {
        margin-top: 10px
    }

    .row-fluid .recommended .subscribe-guide {
        margin: 75px 0 0
    }

    .row-fluid .recommended .user-subscriptions {
        margin-top: 15px
    }
}

.authors-recommended {
    padding-top: 50px
}

.authors-recommended .thumbnail .header {
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.authors-recommended .thumbnail .header .name {
    text-align: center
}

.authors-recommended .thumbnail .avatar {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 10px
}

.authors-recommended .thumbnail .intro {
    height: 56px;
    display: block;
    overflow: hidden
}

.authors-recommended .thumbnail .article {
    height: 132px;
    padding: 0;
    font-size: 14px
}

.authors-recommended .thumbnail .article h5 {
    font-size: 14px
}

.authors-recommended .thumbnail .article li {
    width: 100%;
    margin-top: 7px;
    border-bottom: 1px dotted #d9d9d9;
    line-height: 20px
}

.authors-recommended .thumbnail .article a {
    width: 100%;
    display: inline-block;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.authors-recommended .thumbnail .article .time {
    float: right
}

.authors-recommended .thumbnail .book {
    height: 62px
}

.authors-recommended .thumbnail .book div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.authors-recommended .thumbnail .book a {
    margin-right: 15px
}

@media (max-width: 767px) {
    .authors-recommended {
        padding: 45px 10px 10px
    }
}

.book .books-recommended .thumbnails li.span2 {
    max-width: 200px;
    height: auto;
    border: none
}

.book .books-recommended .thumbnails .thumbnail {
    height: 150px;
    background-color: #e78170;
    border: none;
    border-right: 1px solid #d9d9d9;
    border-radius: 3px 10px 10px 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
    color: white
}

.book .books-recommended .thumbnails .thumbnail:hover {
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.55)
}

.book .books-recommended .thumbnails .book-name {
    margin-top: 36px
}

@media (max-width: 480px) {
    .favorite .books-recommended {
        padding: 10px
    }

    .book .books-recommended .thumbnails .span2 {
        width: 180px
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .books-recommended .thumbnails .span2 {
        width: 180px
    }
}

.output .setting {
    padding: 30px 100px 30px
}

.output .setting h2 {
    margin-bottom: 25px
}

.output .setting .nav-tabs .disabled a {
    color: #d5d5d5
}

.output .setting .nav-tabs .disabled a:hover {
    border-color: white;
    border-bottom-color: transparent
}

.output .setting .tab-content {
    overflow: visible;
    padding: 30px 100px 0
}

.output .setting .tab-content .tab-pane {
    margin-bottom: 60px
}

.output .setting .tab-content .tab-pane .avatar {
    width: 90px;
    height: 90px;
    display: inline-block;
    margin: 0 0 20px 0
}

.output .setting .tab-content .tab-pane .change-avatar {
    margin-left: 10px
}

.output .setting .tab-content .tab-pane .change-avatar .dropdown-menu {
    padding: 10px
}

.output .setting .tab-content .tab-pane .change-avatar .arrow-top::before, .output .setting .tab-content .tab-pane .change-avatar .arrow-top::after {
    left: 30%
}

.output .setting .tab-content .tab-pane .change-avatar .upload-avatar {
    padding: 10px
}

.output .setting .tab-content .tab-pane .change-avatar #upload-loader {
    margin-left: 20px
}

.output .setting .tab-content .tab-pane .change-avatar .upload-button {
    position: relative;
    height: 40px
}

.output .setting .tab-content .tab-pane .change-avatar .upload-button input {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    background-color: white;
    z-index: 1
}

.output .setting .tab-content .tab-pane .change-avatar .hidden-field {
    width: 100px;
    opacity: 0;
    filter: alpha(opacity=0)
}

.output .setting .tab-content .tab-pane .change-avatar .available-avatar {
    float: left;
    margin: 0 10px 0 0
}

.output .setting .tab-content .tab-pane .change-avatar .available-avatar a {
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear
}

.output .setting .tab-content .tab-pane .change-avatar .available-avatar a:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.output .setting .tab-content .tab-pane h4 span {
    margin-left: 2px;
    font-weight: normal;
    color: #555555;
    font-size: 14px
}

.output .setting .tab-content .tab-pane .micro-code {
    display: inline-block;
    width: 90px
}

.output .setting .tab-content .tab-pane .micro-code img {
    width: 90px;
    height: 90px
}

.output .setting .tab-content .tab-pane .micro-code .fa-qrcode {
    font-size: 114px;
    vertical-align: middle;
    opacity: 0.5;
    filter: alpha(opacity=50)
}

.output .setting .tab-content .tab-pane .notice, .output .setting .tab-content .tab-pane .tips {
    font-size: 12px;
    color: #999999
}

.output .setting .tab-content .tab-pane .up-btn a {
    line-height: 36px
}

.output .setting .tab-content .tab-pane span.signup a {
    font-size: 17px;
    color: #4094c7
}

.output .setting .tab-content .tab-pane span.signup a:hover {
    color: #075b8d
}

.output .setting .tab-content .tab-pane span.signup a.active, .output .setting .tab-content .tab-pane span.signup a:active, .output .setting .tab-content .tab-pane span.signup a:focus {
    color: #075b8d
}

.output .setting .tab-content .tab-pane span.signup a.disabled, .output .setting .tab-content .tab-pane span.signup a.disabled:hover, .output .setting .tab-content .tab-pane span.signup a.disabled:focus, .output .setting .tab-content .tab-pane span.signup a.disabled:active, .output .setting .tab-content .tab-pane span.signup a.disabled.active, .output .setting .tab-content .tab-pane span.signup a[disabled], .output .setting .tab-content .tab-pane span.signup a[disabled]:hover, .output .setting .tab-content .tab-pane span.signup a[disabled]:focus, .output .setting .tab-content .tab-pane span.signup a[disabled]:active, .output .setting .tab-content .tab-pane span.signup a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.output .setting .tab-content .tab-pane span.signup a:hover {
    border-bottom: 1px solid;
    -webkit-transition: color 0.5s linear;
    -moz-transition: color 0.5s linear;
    -o-transition: color 0.5s linear;
    transition: color 0.5s linear
}

.output .setting .tab-content .tab-pane .verify-mobile {
    width: 285px;
    height: 44px;
    border-radius: 2px
}

.output .setting .tab-content .tab-pane .unbind-mobile {
    position: relative;
    top: -3px;
    right: 70px;
    color: #d96e5d;
    font-size: 14px;
    cursor: pointer
}

.output .setting .tab-content .control-group {
    margin-bottom: 40px
}

.output .setting .tab-content .control-label {
    margin-top: 10px
}

.output .setting .tab-content small {
    color: #999999
}

.output .setting .tab-content span i {
    margin-right: 5px
}

.output .setting .tab-content .input-xlarge {
    height: 34px;
    line-height: normal;
    border-radius: 2px;
    box-shadow: none
}

.output .setting .tab-content .input-xxlarge {
    resize: none;
    border-radius: 2px;
    box-shadow: none
}

.output .setting .tab-content .email-availability a {
    padding: 4px 0
}

.output .setting .tab-content th, .output .setting .tab-content td {
    text-align: center;
    vertical-align: middle
}

.output .setting .tab-content th img, .output .setting .tab-content td img {
    width: 24px
}

.output .setting .tab-content th a, .output .setting .tab-content td a {
    color: #4094c7
}

.output .setting .tab-content th a:hover, .output .setting .tab-content td a:hover {
    color: #075b8d
}

.output .setting .tab-content th a.active, .output .setting .tab-content th a:active, .output .setting .tab-content th a:focus, .output .setting .tab-content td a.active, .output .setting .tab-content td a:active, .output .setting .tab-content td a:focus {
    color: #075b8d
}

.output .setting .tab-content th a.disabled, .output .setting .tab-content th a.disabled:hover, .output .setting .tab-content th a.disabled:focus, .output .setting .tab-content th a.disabled:active, .output .setting .tab-content th a.disabled.active, .output .setting .tab-content th a[disabled], .output .setting .tab-content th a[disabled]:hover, .output .setting .tab-content th a[disabled]:focus, .output .setting .tab-content th a[disabled]:active, .output .setting .tab-content th a[disabled].active, .output .setting .tab-content td a.disabled, .output .setting .tab-content td a.disabled:hover, .output .setting .tab-content td a.disabled:focus, .output .setting .tab-content td a.disabled:active, .output .setting .tab-content td a.disabled.active, .output .setting .tab-content td a[disabled], .output .setting .tab-content td a[disabled]:hover, .output .setting .tab-content td a[disabled]:focus, .output .setting .tab-content td a[disabled]:active, .output .setting .tab-content td a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.output .setting .tab-content .info td {
    background: whitesmoke
}

.output .setting .tab-content .delete {
    margin-top: 20px
}

.output .setting .tab-content .notice.fa-exclamation-circle {
    margin-top: 20px;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px
}

.output .setting .tab-content .notice.fa-exclamation-circle::before {
    margin-right: 6px;
    color: #bd362f
}

.output .setting .index-tab {
    margin-left: 0
}

.output .setting .index-tab li {
    margin-bottom: 5px;
    cursor: move
}

.output .setting .index-tab i {
    margin-right: 7px
}

.output .setting .radio {
    padding-left: 0;
    display: inline;
    line-height: 30px
}

.output .setting .radio .iradio_minimal {
    top: -2px;
    margin-right: 5px;
    display: inline-block
}

.output .setting .checkbox, .output .setting .icheckbox_minimal {
    padding-left: 0;
    display: inline-block
}

.output .setting .checkbox img, .output .setting .icheckbox_minimal img {
    float: left;
    height: 24px;
    width: 24px;
    max-width: none
}

.output .setting .checkbox .icheckbox_minimal, .output .setting .icheckbox_minimal .icheckbox_minimal {
    float: left;
    margin: 3px 5px 0 0
}

.output .setting .blacklist tfoot td {
    padding: 15px;
    text-align: left
}

.output .setting .blacklist tfoot label {
    position: relative;
    margin: 0 14px 0 4px;
    display: inline-block
}

.output .setting .blacklist .icheckbox_minimal {
    top: -2px
}

.output .setting .user-authentication .error-tips p {
    padding-left: 24px;
    margin-top: 20px;
    color: #e78170
}

.output .setting .user-authentication ol {
    margin-bottom: 20px
}

.output .setting .user-authentication li {
    margin-bottom: 5px
}

.output .setting .user-authentication .error span {
    display: inline-block;
    color: #e78170
}

.output .setting .user-authentication .btn {
    margin-right: 5px
}

.output .social-network {
    margin-right: 30px
}

.output .sign_up, .output .new_user {
    width: 100%;
    float: left
}

.output .sign_up .page-title, .output .new_user .page-title {
    padding-left: 0px;
    margin-bottom: 30px
}

.output .sign_up .control-group.control-area, .output .new_user .control-group.control-area {
    text-align: center
}

.output .sign_up .control-group.control-area .controls, .output .new_user .control-group.control-area .controls {
    margin-left: 0px
}

.output .sign_up .control-label, .output .new_user .control-label {
    width: 180px;
    margin-right: 10px;
    font-size: 20px;
    line-height: 34px
}

.output .sign_up input, .output .new_user input {
    height: 32px;
    width: 260px;
    border-radius: 2px;
    box-shadow: none
}

.output .sign_up .controls, .output .new_user .controls {
    margin-left: 190px
}

.output .sign_up .controls input, .output .new_user .controls input {
    margin-top: -2px
}

.output .sign_up .warn, .output .new_user .warn {
    margin-left: 6px
}

.output .sign_up .icheckbox_minimal, .output .new_user .icheckbox_minimal {
    top: 4px;
    display: inline-block
}

.output .sign_up .checkbox, .output .new_user .checkbox {
    padding-left: 5px;
    display: inline-block
}

.output .sign_up .ladda-button, .output .new_user .ladda-button {
    padding: 12px 24px;
    margin-left: 0;
    font-size: 16px
}

.output .new_user {
    width: 600px
}

.output .new_user .control-label {
    float: none;
    display: inline-block
}

.output .new_user .captcha_fields {
    display: inline-block
}

.output .new_user .captcha_fields p {
    display: inline-block
}

.output .new_user .captcha img {
    width: 125px;
    height: 40px
}

.output .new_user .captcha p {
    margin: 5px 8px 0
}

.output .set-password.captcha_fields {
    display: inline-block
}

.output .set-password.captcha_fields p {
    display: inline-block
}

.output .set-password {
    margin-bottom: 10px
}

.output .set-password input {
    height: 33px;
    margin-bottom: 0
}

.output .set-password .refresh_captcha img {
    height: 40px
}

@media (max-width: 480px) {
    .no-fluid .container {
        margin-bottom: 30px
    }

    .output .container div.setting {
        padding: 30px 10px 10px
    }

    .output .setting h2 {
        padding: 0 10px
    }

    .output .container .setting .nav-tabs {
        padding: 0
    }

    .output .container .setting .nav-tabs li {
        float: inherit
    }

    .output .container .setting .nav-tabs li a {
        border-radius: 0
    }

    .output .container .setting .nav-tabs li.active a {
        border: none;
        background: #eeeeee
    }

    .output .sign_up, .output .new_user {
        float: inherit !important;
        width: 260px !important;
        padding-top: 30px;
        margin: 0 auto !important
    }

    .output .new_user .controls {
        margin-left: 0
    }

    .output .new_user .control-group input {
        width: 240px
    }
}

@media (max-width: 767px) {
    .output .container .setting {
        padding: 30px 50px 0
    }

    .output .container .setting .email-confirmation {
        padding: 6px 14px
    }

    .output .setting .nav-tabs {
        padding: 0 10px
    }

    .output .setting .tab-content {
        padding: 10px
    }

    .output .sign_up, .output .new_user {
        width: 100%
    }
}

@media (max-width: 979px) {
    .output .setting {
        padding: 30px 10px 0
    }
}

.book .span3 {
    padding: 50px 30px
}

.book .span9 {
    padding: 30px 100px 100px 50px
}

.book .aside {
    position: fixed;
    top: 0;
    bottom: 0;
    text-align: center;
    word-wrap: break-word;
    box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.35)
}

.book .aside .meta {
    margin-left: 0;
    font-size: 12px
}

.book .aside .meta li {
    display: inline-block
}

.book .aside .meta a:focus {
    text-decoration: none
}

.book .aside .btn-group .btn i {
    width: 10px
}

.book .aside .btn-group .notebook-share {
    border-radius: 0 4px 4px 0
}

.book .aside .dropdown-menu {
    right: 0;
    left: auto;
    overflow: inherit;
    text-align: left;
    font-size: 12px
}

.book .aside .dropdown-menu img {
    width: 16px;
    height: 16px;
    margin-top: -4px
}

.book .aside .btn-group > .dropdown-menu::before, .book .aside .btn-group > .dropdown-menu::after {
    left: auto;
    right: 8px
}

.book .aside .btn-group > .dropdown-menu::before {
    top: -9px
}

.book .aside .btn-group > .dropdown-menu::after {
    top: -8px
}

.book .aside .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%
}

.book .aside .author {
    position: absolute;
    right: 30px;
    bottom: 50px;
    left: 30px
}

.book .aside .author .avatar {
    width: 45px;
    height: 45px;
    margin: 0 auto 10px
}

.notebook-list .btn-group > .dropdown-menu {
    min-width: 56px
}

.book .notebook-list .toolbar {
    height: 36px;
    border-bottom: 1px solid #d9d9d9
}

.book .nav-tabs {
    float: left;
    margin-top: 7px;
    margin-bottom: 0;
    border-bottom: none
}

.book .nav-tabs li a {
    color: #999999;
    line-height: 1
}

.book .nav-tabs li a, .book .nav-tabs li a:hover, .book .nav-tabs li a:focus {
    padding: 0;
    margin-right: 15px;
    background: none;
    border: none;
    border-radius: 0
}

.book .nav-tabs li:first-child a {
    padding-right: 15px;
    border-right: 1px solid #999999
}

.book .nav-tabs .submissions a, .book .nav-tabs .submissions a:hover, .book .nav-tabs .submissions a:focus {
    padding-left: 15px;
    border-left: 1px solid #999999
}

.book .nav-tabs li.active a {
    color: #555555
}

.notebook-list .article-list {
    margin-top: 30px
}

.notebook-list .article-list .article-content {
    display: none
}

.notebook-list .article-list .list-top .author-name, .notebook-list .article-list .list-top .btn, .notebook-list .article-list .list-top em {
    display: none
}

@media (max-width: 768px) {
    .book .notebook-list .aside.span3 {
        position: static;
        width: 100%;
        padding-top: 70px;
        box-shadow: none
    }

    .book .notebook-list .aside.span3 .author {
        position: static;
        margin: 20px 0
    }

    .book .notebook-list .aside.span3 .author .avatar {
        display: none
    }

    .book .notebook-list .span9 {
        width: 100%;
        padding: 10px;
        margin-left: 0
    }
}

@media (min-width: 1588px) {
    .book .span9 {
        max-width: 1000px;
        padding-left: 80px
    }
}

.relationships .toolbar h3 {
    font-size: 20px
}

.relationships .subscribing, .relationships .users {
    margin: 20px 0 30px;
    list-style: none
}

.relationships .subscribing li, .relationships .users li {
    padding: 20px 0;
    border-bottom: 1px solid #eeeeee
}

.relationships .users li p {
    margin: 0;
    padding: 0 93px 0 50px;
    font-size: 12px;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
}

.relationships li .avatar {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 10px 0 0;
    display: inline-block
}

.relationships li .follow, .relationships li .following {
    float: right;
    margin-top: 5px
}

.relationships li h4 {
    margin: 0 0 3px;
    font-size: 16px
}

.relationships li p {
    margin: 0;
    padding: 0 93px 0 50px;
    font-size: 12px
}

.relationships .subscribing p {
    padding-left: 0
}

.relationships .users li {
    padding: 10px 0
}

.collection-article .relationships .users .avatar {
    float: none
}

.collection-article .relationships .users a {
    color: #4094c7
}

.collection-article .relationships .users a:hover {
    color: #075b8d
}

.collection-article .relationships .users a.active, .collection-article .relationships .users a:active, .collection-article .relationships .users a:focus {
    color: #075b8d
}

.collection-article .relationships .users a.disabled, .collection-article .relationships .users a.disabled:hover, .collection-article .relationships .users a.disabled:focus, .collection-article .relationships .users a.disabled:active, .collection-article .relationships .users a.disabled.active, .collection-article .relationships .users a[disabled], .collection-article .relationships .users a[disabled]:hover, .collection-article .relationships .users a[disabled]:focus, .collection-article .relationships .users a[disabled]:active, .collection-article .relationships .users a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.collection-article .relationships .users span {
    float: right;
    margin-top: 8px;
    font-size: 12px
}

.login-page, .login-modal, .reset-password-page {
    padding: 125px 0 50px;
    text-align: center
}

.login-page .logo img, .login-modal .logo img, .reset-password-page .logo img {
    width: 252px
}

.login-page .title, .login-modal .title, .reset-password-page .title {
    margin: 70px auto 50px;
    border-bottom: 1px solid #eeeeee;
    color: #b1b1b1
}

.login-page .title span, .login-modal .title span, .reset-password-page .title span {
    position: relative;
    top: 10px;
    padding: 0 30px;
    background: white
}

.login-page .title span a, .login-modal .title span a, .reset-password-page .title span a {
    color: #b1b1b1
}

.login-page .title span a:hover, .login-modal .title span a:hover, .reset-password-page .title span a:hover {
    color: #717171
}

.login-page .title span .active, .login-modal .title span .active, .reset-password-page .title span .active {
    color: #555555
}

.login-page .title span .active:hover, .login-modal .title span .active:hover, .reset-password-page .title span .active:hover {
    color: #3f3f3f
}

.login-page .title b, .login-modal .title b, .reset-password-page .title b {
    margin: 0 10px
}

.login-page form, .login-modal form, .reset-password-page form {
    width: 300px
}

.login-page .input-prepend, .login-modal .input-prepend, .reset-password-page .input-prepend {
    width: 100%;
    margin-bottom: 15px
}

.login-page .input-prepend .add-on, .login-modal .input-prepend .add-on, .reset-password-page .input-prepend .add-on {
    width: 34px;
    height: 34px;
    background: none;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 34px
}

.login-page .input-prepend input, .login-modal .input-prepend input, .reset-password-page .input-prepend input {
    width: 228px;
    width: calc(100% - 44px);
    height: 44px;
    padding: 4px 12px;
    box-sizing: border-box
}

.login-page .captcha, .login-modal .captcha, .reset-password-page .captcha {
    text-align: left;
    font-size: 0;
    white-space: nowrap
}

.login-page .captcha input, .login-modal .captcha input, .reset-password-page .captcha input {
    width: 165px;
    height: 44px;
    margin-right: 10px;
    padding: 4px 12px;
    box-sizing: border-box
}

.login-page .captcha img, .login-modal .captcha img, .reset-password-page .captcha img {
    height: 44px;
    width: 125px
}

.login-page .captcha p, .login-modal .captcha p, .reset-password-page .captcha p {
    margin: 5px 12px 0;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.login-page .geetest, .login-modal .geetest, .reset-password-page .geetest {
    width: 300px;
    margin-bottom: 15px
}

.login-page .geetest .gt_slider, .login-modal .geetest .gt_slider, .reset-password-page .geetest .gt_slider {
    margin-left: 2px
}

.login-page .submit-button, .login-modal .submit-button, .reset-password-page .submit-button {
    width: 100%
}

.login-page .submit-button[disabled] .ladda-label, .login-modal .submit-button[disabled] .ladda-label, .reset-password-page .submit-button[disabled] .ladda-label {
    opacity: 0;
    filter: alpha(opacity=0)
}

.login-page .submit-button[disabled]:before, .login-modal .submit-button[disabled]:before, .reset-password-page .submit-button[disabled]:before {
    content: "\f021";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    margin-top: -10px;
    margin-left: -10px;
    z-index: 1;
    -webkit-animation: fa-spin 0.8s infinite steps(70);
    animation: fa-spin 0.8s infinite steps(70);
    color: white;
    font: normal normal normal 24px/1 FontAwesome
}

.login-page .sign-in .controls, .login-page .sign-in .checkbox, .login-modal .sign-in .controls, .login-modal .sign-in .checkbox, .reset-password-page .sign-in .controls, .reset-password-page .sign-in .checkbox {
    display: inline-block
}

.login-page .sign-in .control-group, .login-modal .sign-in .control-group, .reset-password-page .sign-in .control-group {
    width: 100%;
    margin: 15px 0 0;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.login-page .sign-in .control-group a, .login-modal .sign-in .control-group a, .reset-password-page .sign-in .control-group a {
    float: right
}

.login-page .sign-in .icheckbox_minimal, .login-modal .sign-in .icheckbox_minimal, .reset-password-page .sign-in .icheckbox_minimal {
    top: -2px;
    display: inline-block
}

.login-page .login-sns, .login-modal .login-sns, .reset-password-page .login-sns {
    margin-left: 0
}

.login-page .login-sns p, .login-modal .login-sns p, .reset-password-page .login-sns p {
    margin-bottom: 15px;
    color: #999999
}

.login-page .login-sns li, .login-modal .login-sns li, .reset-password-page .login-sns li {
    display: inline-block
}

.login-page .login-sns li > a, .login-modal .login-sns li > a, .reset-password-page .login-sns li > a {
    width: 44px;
    height: 44px;
    display: inline-block;
    border-radius: 50%;
    line-height: 44px;
    font-size: 20px;
    background: #eeeeee
}

.login-page .login-sns li > a:hover, .login-modal .login-sns li > a:hover, .reset-password-page .login-sns li > a:hover {
    color: white
}

.login-page .login-sns .weibo a:hover, .login-modal .login-sns .weibo a:hover, .reset-password-page .login-sns .weibo a:hover {
    background-color: #f57e42
}

.login-page .login-sns .qq a:hover, .login-modal .login-sns .qq a:hover, .reset-password-page .login-sns .qq a:hover {
    background-color: #15a7f0
}

.login-page .login-sns .douban a:hover, .login-modal .login-sns .douban a:hover, .reset-password-page .login-sns .douban a:hover {
    background-color: #49be38
}

.login-page .login-sns .google a:hover, .login-modal .login-sns .google a:hover, .reset-password-page .login-sns .google a:hover {
    background-color: #e03d37
}

.login-page .login-sns .wechat a:hover, .login-modal .login-sns .wechat a:hover, .reset-password-page .login-sns .wechat a:hover {
    background-color: #49be38
}

.login-page .login-sns .disabled, .login-modal .login-sns .disabled, .reset-password-page .login-sns .disabled {
    position: relative;
    cursor: not-allowed
}

.login-page .login-sns .disabled .fa, .login-modal .login-sns .disabled .fa, .reset-password-page .login-sns .disabled .fa {
    opacity: 0;
    filter: alpha(opacity=0)
}

.login-page .login-sns .disabled:before, .login-modal .login-sns .disabled:before, .reset-password-page .login-sns .disabled:before {
    content: "\f021";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    margin-top: -7px;
    margin-left: -7px;
    z-index: 1;
    -webkit-animation: fa-spin 0.8s infinite steps(70);
    animation: fa-spin 0.8s infinite steps(70);
    font: normal normal normal 16px/1 FontAwesome
}

.login-page form, .login-modal form {
    padding-bottom: 15px;
    margin: 0 auto 25px;
    border-bottom: 1px solid #eeeeee
}

.login-page .sign_up_msg, .login-modal .sign_up_msg {
    margin: 10px 0px;
    padding: 0px;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    color: #9d9d9d
}

.login-page .sign_up_msg a, .login-modal .sign_up_msg a {
    font-weight: bold
}

.reset-password-page form {
    padding-bottom: 0px;
    margin: 0 auto 0;
    border: none
}

.reset-password-page .input-prepend input[type="email"], .reset-password-page .input-prepend input[type="password"] {
    width: 300px;
    border-radius: 4px
}

.mobile-verify {
    position: relative;
    margin-bottom: 15px
}

.mobile-verify .choose_phone {
    position: relative;
    padding: 0px;
    border: 1px solid #cccccc;
    border-radius: 4px
}

.mobile-verify .choose_phone .selector {
    width: 60px;
    height: 36px;
    line-height: 36px;
    padding-left: 0px;
    padding-right: 5px;
    border: none;
    border-right: 1px solid #cccccc;
    border-radius: 0px;
    background-color: transparent
}

.mobile-verify .choose_phone .selector .caret {
    margin-top: 17px;
    margin-left: 5px
}

.mobile-verify .choose_phone .dropdown-menu {
    top: 32px;
    left: -1px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 0px 0px 5px 5px;
    background-color: #fafafa
}

.mobile-verify .choose_phone .dropdown-menu li {
    background-color: #fafafa;
    text-align: left
}

.mobile-verify .choose_phone .dropdown-menu li.separate_line {
    display: block;
    height: 1px;
    margin: 5px 15px;
    background-color: #d5d5d5
}

.mobile-verify .choose_phone .dropdown-menu li .nation_code {
    display: inline-block;
    width: 65px
}

.mobile-verify .choose_phone input {
    width: 227px;
    border: none;
    background-color: transparent;
    box-shadow: none
}

.reader-night-mode .choose_phone {
    background-color: #555555;
    border-color: #2f2f2f
}

.reader-night-mode .choose_phone .selector {
    border-right-color: #2f2f2f
}

.reader-night-mode .choose_phone .selector .caret {
    border-top-color: #b1b1b1
}

.reader-night-mode .choose_phone .dropdown-menu {
    background-color: #555555
}

.reader-night-mode .choose_phone .dropdown-menu li {
    background-color: #555555
}

.input-prepend.mobile-verify-icon .add-on {
    width: 58px
}

.input-prepend.mobile-verify-icon input[type="password"] {
    width: 231px
}

.switch_sign_in_name, .switch_sign_in_name:focus {
    color: #15a7f0
}

.switch_sign_in_name:hover {
    color: #3dbcf5
}

.wrap-btn {
    position: fixed;
    right: 0;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 7px;
    box-shadow: 0 1px 3px whitesmoke;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    -webkit-transition: transform 0.5s cubic-bezier(0.56, -0.29, 0.57, 1), opacity 0.1s;
    -moz-transition: transform 0.5s cubic-bezier(0.56, -0.29, 0.57, 1), opacity 0.1s;
    -o-transition: transform 0.5s cubic-bezier(0.56, -0.29, 0.57, 1), opacity 0.1s;
    transition: transform 0.5s cubic-bezier(0.56, -0.29, 0.57, 1), opacity 0.1s;
    -webkit-backface-visibility: hidden
}

.wrap-btn .editor-article {
    top: 10px;
    float: right;
    margin-right: 6px
}

.wrap-btn .editor-article span {
    position: relative;
    display: inline-block
}

.wrap-btn .editor-article .editor-btn {
    padding: 0 10px;
    margin-right: 10px
}

.wrap-btn .editor-article > a, .wrap-btn .editor-article span > a {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle
}

.wrap-btn .editor-article > a span, .wrap-btn .editor-article span > a span {
    display: none
}

.wrap-btn .editor-article span > a, .wrap-btn .editor-article span > a:hover, .wrap-btn .editor-article span > a:focus {
    padding: 2px 5px;
    margin: 0 12px;
    background: none;
    border: none;
    outline: none;
    color: #555555
}

.wrap-btn .editor-article .dropdown-menu {
    top: 30px;
    right: -49px;
    left: auto
}

.wrap-btn .editor-article .dropdown-menu li {
    font-size: 12px
}

.wrap-btn .editor-article .dropdown-menu li i {
    width: 16px;
    margin-right: 3px;
    font-size: 16px
}

.wrap-btn .editor-article .dropdown-menu li img {
    position: relative;
    top: -2px;
    width: 16px;
    margin-right: 6px
}

.wrap-btn .editor-article i {
    display: inline-block;
    width: 14px;
    text-align: center
}

.wrap-btn .editor-article .bookmarked i.fa-bookmark {
    color: #e78170
}

.wrap-btn .editor-article .nighttime, .wrap-btn .editor-article .daytime {
    display: none
}

.hide-wrap-btn {
    -webkit-transform: translate(0, -90px);
    -ms-transform: translate(0, -90px);
    transform: translate(0, -90px);
    opacity: 0.5;
    filter: alpha(opacity=50)
}

.article-related {
    padding-left: 65px
}

.article-related > a, .related-avatar-group > a, .related-avatar-group > a.avatar {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #e78170;
    color: #e78170;
    text-align: center;
    line-height: 32px
}

.article-related > a img, .related-avatar-group > a img, .related-avatar-group > a.avatar img {
    border: none
}

.collection-menu.modal.fade, .notebooks-menu.modal.fade {
    top: 65px;
    left: 65px;
    width: 260px;
    margin-left: 0;
    border-radius: 4px
}

.collection-menu.modal.fade {
    left: 46px
}

.collection-menu::before, .collection-menu::after {
    left: 26px
}

.notebooks-menu::before, .notebooks-menu::after {
    left: 55px
}

.notebooks-menu .loader-tiny, .collection-menu .loader-tiny {
    display: block;
    margin: 25px auto
}

.notebooks-menu li, .collection-menu li {
    position: relative
}

.notebooks-menu .title, .collection-menu .title {
    font-size: 16px
}

.notebooks-menu .list-group .avatar, .collection-menu .list-group .avatar {
    position: relative;
    top: -3px;
    width: 45px;
    height: 45px;
    display: inline-block
}

.notebooks-menu .follow, .collection-menu .follow {
    float: right;
    padding: 0 4px;
    margin-top: 8px;
    background: #49be38;
    border: 1px solid #49be38;
    border-radius: 4px;
    color: white
}

.notebooks-menu .follow span, .collection-menu .follow span {
    display: none
}

.notebooks-menu .following, .collection-menu .following {
    background: #eeeeee;
    border-color: #d9d9d9;
    color: #555555
}

.notebooks-menu span, .collection-menu span {
    display: block;
    margin-top: 5px;
    color: #999999;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.notebooks-menu .list-info {
    margin: 0 0 10px
}

.collection-menu .list-info {
    margin: 12px 0 0 12px
}

.panel .panel-heading {
    padding: 15px 10px 10px;
    border-bottom: 1px solid #d9d9d9
}

.panel .panel-heading .avatar {
    width: 45px;
    height: 45px;
    display: inline-block
}

.panel .list-group {
    margin: 0;
    border-radius: 0 0 4px 4px;
    overflow-y: auto
}

.panel li {
    padding: 15px 10px 10px;
    border-bottom: 1px solid #eeeeee;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5
}

.panel li:hover, .panel li.active {
    background-color: #f6f6f6
}

@media (max-width: 767px) {
    .notebooks-menu.modal.fade {
        left: 54px
    }

    .collection-menu.modal.fade {
        left: 36px
    }
}

@media (max-width: 768px) {
    .post .post-bg .wrap-btn .article-related {
        padding-left: 55px;
        margin-top: 7px
    }

    .post .post-bg .wrap-btn .article-related > a {
        background: none;
        border: none;
        color: inherit
    }

    .post .post-bg .wrap-btn .editor-article span, .post .post-bg .wrap-btn .article-related .related-avatar-group {
        display: none
    }

    .notebooks-menu.modal.fade, .collection-menu.modal.fade {
        top: 55px
    }
}

@media (min-width: 1588px) {
    .notebooks-menu-btn, .notebooks-menu.modal.fade.in {
        left: 195px
    }

    .collection-menu.modal.fade.in {
        left: 175px
    }
}

body.reader-night-mode .row-fluid .app-download {
    color: #555555
}

body.reader-night-mode .row-fluid .app-download a {
    color: #555555
}

body.reader-night-mode .row-fluid .app-download .btn-info {
    color: white;
    border-color: #15a7f0;
    background: #15a7f0
}

body.reader-night-mode .row-fluid .app-download .btn-info:hover, body.reader-night-mode .row-fluid .app-download .btn-info:focus {
    color: white;
    border-color: #3dbcf5;
    background-color: #3dbcf5
}

body.reader-night-mode .row-fluid .app-download .btn-info.active, body.reader-night-mode .row-fluid .app-download .btn-info:active {
    outline: none;
    color: white;
    border-color: #075b8d;
    background: #075b8d;
    box-shadow: none
}

body.reader-night-mode .row-fluid .app-download .btn-info.disabled, body.reader-night-mode .row-fluid .app-download .btn-info.disabled:hover, body.reader-night-mode .row-fluid .app-download .btn-info.disabled:focus, body.reader-night-mode .row-fluid .app-download .btn-info.disabled:active, body.reader-night-mode .row-fluid .app-download .btn-info.disabled.active, body.reader-night-mode .row-fluid .app-download .btn-info[disabled], body.reader-night-mode .row-fluid .app-download .btn-info[disabled]:hover, body.reader-night-mode .row-fluid .app-download .btn-info[disabled]:focus, body.reader-night-mode .row-fluid .app-download .btn-info[disabled]:active, body.reader-night-mode .row-fluid .app-download .btn-info[disabled].active {
    cursor: not-allowed;
    background: #50c3f6;
    border-color: #50c3f6
}

body.reader-night-mode .row-fluid .app-download .btn-success {
    color: white;
    border-color: #49be38;
    background: #49be38
}

body.reader-night-mode .row-fluid .app-download .btn-success:hover, body.reader-night-mode .row-fluid .app-download .btn-success:focus {
    color: white;
    border-color: #6bd95b;
    background-color: #6bd95b
}

body.reader-night-mode .row-fluid .app-download .btn-success.active, body.reader-night-mode .row-fluid .app-download .btn-success:active {
    outline: none;
    color: white;
    border-color: #247e16;
    background: #247e16;
    box-shadow: none
}

body.reader-night-mode .row-fluid .app-download .btn-success.disabled, body.reader-night-mode .row-fluid .app-download .btn-success.disabled:hover, body.reader-night-mode .row-fluid .app-download .btn-success.disabled:focus, body.reader-night-mode .row-fluid .app-download .btn-success.disabled:active, body.reader-night-mode .row-fluid .app-download .btn-success.disabled.active, body.reader-night-mode .row-fluid .app-download .btn-success[disabled], body.reader-night-mode .row-fluid .app-download .btn-success[disabled]:hover, body.reader-night-mode .row-fluid .app-download .btn-success[disabled]:focus, body.reader-night-mode .row-fluid .app-download .btn-success[disabled]:active, body.reader-night-mode .row-fluid .app-download .btn-success[disabled].active {
    cursor: not-allowed;
    background: #7add6c;
    border-color: #7add6c
}

.app-download {
    background: white
}

.app-download .download-content {
    padding: 100px 0;
    background: #f8f8f8;
    text-align: center
}

.app-download .download-content .page-left {
    padding-top: 50px;
    margin-right: 80px;
    display: inline-block;
    vertical-align: top
}

.app-download .download-content .page-left .title {
    padding-bottom: 50px;
    margin-bottom: 60px;
    border-bottom: 1px solid #e6e6e6
}

.app-download .download-content .page-left .title img {
    width: 252px
}

.app-download .download-content .page-left .download {
    margin-bottom: 35px;
    overflow: hidden
}

.app-download .download-content .page-left .download .download-btn {
    float: left;
    margin-right: 30px
}

.app-download .download-content .page-left .download .download-btn li {
    margin-bottom: 20px
}

.app-download .download-content .page-left .download .download-btn .btn {
    position: relative;
    width: 180px;
    height: 58px;
    padding: 0;
    padding-left: 64px;
    text-align: left;
    font-size: 20px;
    line-height: 58px;
    box-sizing: border-box
}

.app-download .download-content .page-left .download .download-btn .btn i {
    position: absolute;
    top: 9px;
    left: 20px;
    font-size: 36px
}

.app-download .download-content .page-left .download .download-btn .btn i.fa-mobile {
    top: 5px;
    left: 23px;
    font-size: 47px
}

.app-download .download-content .page-left .qrcode-app {
    width: 135px;
    border: 1px solid #d9d9d9
}

.app-download .download-content .page-left .share {
    margin: 0;
    font-size: 16px
}

.app-download .download-content .page-left .share li {
    display: inline-block;
    vertical-align: middle
}

.app-download .download-content .page-left .share li:first-child {
    margin-right: 10px
}

.app-download .download-content .page-left .share li a {
    color: #555555
}

.app-download .download-content .page-left .share i {
    margin: 0 4px;
    font-size: 20px
}

.app-download .download-content .page-left .share .fa-weixin {
    font-size: 18px
}

.app-download .download-content .page-left .share .qrcode-wrap .qrcode {
    background: white;
    border-color: #d9d9d9
}

.app-download .download-content .page-left .share .qrcode-wrap .arrow-top::before {
    border-bottom-color: #d9d9d9
}

.app-download .download-content .page-left .share .qrcode-wrap .arrow-top::after {
    border-bottom-color: white
}

.app-download .download-content .page-left .share .qrcode-wrap .arrow-top::before, .app-download .download-content .page-left .share .qrcode-wrap .arrow-top::after {
    margin-left: -6px
}

.app-download .download-content .app-img {
    width: 470px;
    display: inline-block
}

.app-download .download-content .app-img img {
    width: 450px
}

.app-download .app-info {
    border-top: 1px solid #e6e6e6
}

.app-download .about-app {
    width: 720px;
    padding: 50px 30px 30px;
    margin: 75px auto 120px;
    border: 1px solid #e6e6e6;
    background: #f8f8f8;
    text-align: center;
    font-size: 18px
}

.app-download .about-app h1 {
    font-size: 28px
}

.app-download .about-app .line {
    width: 42px;
    display: inline-block;
    margin: 15px auto 25px;
    border-bottom: 2px solid #e78170
}

.app-download .about-app p {
    margin-bottom: 30px;
    line-height: 27px
}

.app-download .app-info ul {
    width: 782px;
    margin: 0 auto
}

.app-download .app-info ul li {
    width: 388px;
    display: inline-block;
    margin-bottom: 120px
}

.app-download .app-info ul img {
    width: 123px
}

.app-download .app-info ul .pull-left {
    margin-right: 25px
}

.app-download .app-info ul .pull-right {
    margin-left: 25px
}

.app-download .app-info ul div {
    display: inline-block;
    text-align: center
}

.app-download .app-info ul h3 {
    margin-top: 20px;
    font-size: 24px
}

.app-download .app-info ul p {
    font-size: 18px
}

.app-download .footer {
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e6e6e6;
    background: #f8f8f8;
    box-sizing: border-box;
    font-size: 16px
}

.app-download .footer ul {
    margin: 0
}

.app-download .footer div {
    width: 782px;
    margin: 0 auto;
    padding: 25px 0 31px
}

.app-download .footer li {
    display: inline-block
}

.app-download .footer b {
    position: relative;
    top: 6px;
    margin: 0 16px;
    height: 25px;
    display: inline-block;
    border-right: 1px solid #d9d9d9
}

.app-download .footer a, .app-download .footer span {
    color: #999999
}

.app-download .footer span {
    margin-top: 10px
}

.app-download .footer a:hover {
    color: inherit
}

.app-download .download-modal {
    width: 450px;
    margin-left: -225px;
    text-align: center
}

.app-download .download-modal .modal-header {
    border-bottom: none
}

.app-download .download-modal .modal-body {
    padding: 0 75px 45px
}

.app-download .download-modal img, .app-download .download-modal p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 30px
}

.app-download .download-modal .modal-footer {
    padding-bottom: 15px;
    font-size: 14px;
    color: #999999
}

.app-download .download-android-modal ul li {
    position: relative;
    padding: 23px 0 23px 40px;
    border-bottom: 1px solid #d9d9d9
}

.app-download .download-android-modal img {
    position: absolute;
    left: 50px;
    top: 11px
}

.app-download .download-android-modal .modal-footer span {
    color: #e78170
}

@media (max-width: 480px) {
    .row-fluid .app-download .download-content .page-left .title {
        padding-bottom: 32px;
        margin-bottom: 32px
    }

    .row-fluid .app-download div.app-info {
        padding: 0 18px
    }

    .row-fluid .app-download .download-content .page-left .download .download-btn {
        margin: 0
    }

    .row-fluid .app-download .download-content .page-left .qrcode-app {
        display: none
    }

    .row-fluid .app-download .download-content .page-left .title img {
        width: 144px
    }

    .row-fluid .app-download .app-info ul.unstyled li {
        width: auto
    }

    .row-fluid .app-download .app-info .about-app {
        padding: 20px 20px 10px;
        margin-bottom: 60px;
        font-size: 16px
    }

    .row-fluid .app-download .about-app h1 {
        font-size: 20px
    }

    .row-fluid .app-download .about-app .line {
        margin: 0 auto 15px
    }

    .row-fluid .app-download .app-info ul li {
        margin-bottom: 36px;
        text-align: center
    }

    .row-fluid .app-download .app-info ul li img {
        float: none;
        width: 106px;
        margin: 0
    }

    .row-fluid .app-download .app-info ul div {
        display: inherit
    }

    .row-fluid .app-download .app-info ul h3 {
        font-size: 20px
    }

    .row-fluid .app-download .app-info ul p {
        font-size: 16px
    }

    .app-download .download-modal {
        width: 300px;
        margin-left: -150px
    }

    .app-download .download-modal .modal-body {
        padding: 0 10px 15px
    }

    .app-download .download-modal img {
        width: 60px
    }

    .app-download .download-modal img, .app-download .download-modal p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 22px
    }

    .app-download .download-modal form {
        width: 100%
    }

    .app-download .download-modal .input-prepend input {
        width: 208px;
        width: calc(100% - 72px)
    }

    .app-download .download-modal.download-android-modal img {
        width: auto
    }
}

@media (max-width: 960px) {
    .app-download .download-content .page-left {
        margin-right: 0
    }

    .app-download .download-content .app-img {
        display: none
    }

    .app-download .app-info {
        padding: 0 70px
    }

    .app-download .about-app {
        margin-bottom: 100px;
        width: auto
    }

    .app-download .app-info ul {
        width: auto
    }

    .app-download .app-info ul li {
        display: block;
        margin: 0 auto 100px;
        overflow: hidden
    }
}

.subscribe-guide, .recommended .subscribe-guide {
    position: relative;
    max-width: 800px;
    padding: 30px 30px 0;
    margin-top: 85px;
    margin-left: 25px;
    background: #f8f8f8;
    border: 2px dashed #d9d9d9;
    box-sizing: border-box;
    border-radius: 16px
}

.subscribe-guide .guide-title, .recommended .subscribe-guide .guide-title {
    position: absolute;
    top: -70px;
    left: 0;
    color: #999999;
    font-size: 20px;
    font-weight: normal;
    line-height: 30px
}

.subscribe-guide .sort-nav, .recommended .subscribe-guide .sort-nav {
    padding: 0;
    margin-top: 0;
    margin-bottom: 30px;
    margin-right: -30px
}

.subscribe-guide .sort-nav li a, .recommended .subscribe-guide .sort-nav li a {
    border: none
}

.subscribe-guide .pager, .recommended .subscribe-guide .pager {
    margin-bottom: 30px
}

.subscribe-guide .previous, .subscribe-guide .next, .recommended .subscribe-guide .previous, .recommended .subscribe-guide .next {
    border: 2px solid #999999;
    border-radius: 50%
}

.subscribe-guide .previous a, .subscribe-guide .next a, .recommended .subscribe-guide .previous a, .recommended .subscribe-guide .next a {
    width: 25px;
    height: 25px;
    display: inline-block;
    line-height: 26px;
    text-align: center
}

.recommended .subscribe-guide {
    margin-top: 140px
}

.subscribe-guide .recommended-list, .collections-tag .collections-list {
    margin: 0
}

.subscribe-guide .recommended-list li, .collections-tag .collections-list li {
    position: relative;
    padding: 15px 0 10px 60px;
    border-bottom: 1px dashed #d9d9d9
}

.subscribe-guide .recommended-list li:last-child, .collections-tag .collections-list li:last-child {
    border-bottom: none
}

.subscribe-guide .recommended-list .avatar, .collections-tag .collections-list .avatar {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px
}

.subscribe-guide .recommended-list .avatar img, .collections-tag .collections-list .avatar img {
    border: none
}

.subscribe-guide .recommended-list .collections-meta, .collections-tag .collections-list .collections-meta {
    position: relative
}

.subscribe-guide .recommended-list .collections-meta p, .collections-tag .collections-list .collections-meta p {
    margin-bottom: 5px;
    font-size: 12px
}

.subscribe-guide .recommended-list .collections-meta .tltle, .collections-tag .collections-list .collections-meta .tltle {
    margin-bottom: 5px;
    font-size: 18px
}

.subscribe-guide .recommended-list .collections-meta .btn, .collections-tag .collections-list .collections-meta .btn {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    border-radius: 15px;
    font-size: 12px
}

.subscribe-guide .recommended-list .collections-meta .btn i, .collections-tag .collections-list .collections-meta .btn i {
    width: 10px;
    display: inline-block
}

.subscribe-guide .recommended-list {
    max-height: 1625px;
    overflow: hidden
}

.subscribe-guide .recommended-list .collections-meta p {
    padding-right: 150px
}

.subscription-notes {
    min-height: 600px;
    padding: 50px;
    color: #999999;
    text-align: center
}

.subscribe-guide .submit-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    height: 60px;
    margin-left: -32px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid #d9d9d9;
    line-height: 60px;
    text-align: center;
    z-index: 1090
}

.subscribe-guide .submit-btn a.btn {
    border-radius: 40px
}

@media (max-width: 768px) {
    .guide-title, .subscribe-guide {
        margin-left: 0
    }
}

.row-fluid .collections-tag.span7 {
    float: none;
    max-width: 1000px;
    padding-left: 0;
    margin: 0 auto
}

.row-fluid .collections-tag.span7 .collections-meta p, .row-fluid .collections-tag.span7 .collections-meta p a {
    color: #999999
}

.row-fluid .collections-tag.span7 .collections-meta p .fa-tags {
    margin-left: 10px
}

.row-fluid .collections-tag.span7 .collections-meta p a.active {
    color: #15a7f0
}

.tag-title {
    padding: 60px 0 40px;
    margin-bottom: 10px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 22px;
    text-align: center
}

.tag-title i.fa-tags {
    color: #999999
}

.tag-title span {
    margin-left: 10px
}

@media (max-width: 768px) {
    .row-fluid .collections-tag.span7 {
        width: 100%;
        padding: 70px 10px 0
    }
}

.row-fluid .search-page .span3 {
    max-width: 300px
}

.row-fluid .search-page .nav-list {
    padding: 0;
    margin-top: 50px;
    border-top: 1px solid #d9d9d9
}

.row-fluid .search-page .nav-list li a {
    padding: 14px 20px 14px 0;
    margin: 0;
    text-align: right;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    text-shadow: none
}

.row-fluid .search-page .nav-list li.active a {
    background-color: #eeeeee;
    border-left: 4px solid #15a7f0;
    color: #3f3f3f
}

.row-fluid .search-page .nav-list li a span {
    position: relative;
    top: -1px;
    min-width: 16px;
    padding: 0 5px;
    margin-left: 8px;
    background-color: white;
    border: 1px solid #d9d9d9;
    color: #555555;
    text-shadow: none;
    text-align: center;
    line-height: 18px
}

.row-fluid .search-page .span7 {
    position: relative;
    padding-left: 0;
    border-left: 1px solid #d9d9d9
}

.row-fluid .search-page .page-title .input-prepend {
    margin-top: 10px
}

.row-fluid .search-page .page-title form {
    margin: 0
}

.row-fluid .search-page .input-prepend .btn.dropdown-toggle {
    padding-left: 15px;
    border-color: #d9d9d9;
    background-color: white;
    color: #3f3f3f;
    font-size: 12px;
    border-radius: 15px 0 0 15px
}

.row-fluid .search-page .input-prepend .dropdown-menu li {
    float: none
}

.row-fluid .search-page .input-prepend input[type="search"] {
    font-size: 12px;
    border-radius: 0 15px 15px 0;
    -webkit-transition: all 0;
    -moz-transition: all 0;
    -o-transition: all 0;
    transition: all 0
}

.row-fluid .search-page .search-results-container {
    min-height: 700px
}

.row-fluid .search-page ul.list {
    padding: 10px 0 0 20px
}

.row-fluid .search-page ul.list li {
    padding: 20px 10px 11px;
    border-bottom: 1px dashed #d9d9d9
}

.row-fluid .search-page ul.list li h4 {
    margin: 0 0 10px
}

.row-fluid .search-page ul.list li p {
    margin-bottom: 5px
}

.row-fluid .search-page ul.list li h4 i {
    position: relative;
    top: -1px;
    margin-right: 5px;
    font-size: 14px;
    color: #999999
}

.row-fluid .search-page ul.list li .avatar {
    position: relative;
    top: -2px;
    display: inline-block;
    border: none
}

.row-fluid .search-page ul.list li .avatar img {
    width: 30px;
    height: 30px
}

.row-fluid .search-page ul.list li p {
    font-size: 12px
}

.row-fluid .search-page ul.list li p.footer, .row-fluid .search-page ul.list li p.footer a {
    color: #999999
}

.row-fluid .search-page ul.list li p.footer a:hover {
    color: #555555
}

.row-fluid .search-page ul.list li em.search-result-highlight {
    padding: 2px 1px;
    background-color: #ffeb3b;
    font-style: normal
}

.row-fluid .search-page .loading-content {
    position: absolute;
    top: 51px;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    z-index: 1100
}

.row-fluid .search-page .pagination {
    padding-left: 20px
}

.row-fluid .search-page .list-footer {
    padding: 1px 0;
    overflow: hidden;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px
}

.row-fluid .search-page .list-footer i {
    margin-right: 4px;
    color: #999999
}

.row-fluid .search-page .list-footer i.fa-ellipsis-h {
    position: relative;
    top: 1px;
    font-size: 14px
}

.row-fluid .search-page .list-footer .reward .fa-thumbs-up {
    color: #e67613
}

.row-fluid .search-page .list-footer i.fa-heart {
    color: #e78170
}

.row-fluid .search-page .list-footer a.bookmark span, .row-fluid .search-page .list-footer a.bookmarked span {
    display: none
}

.row-fluid .search-page .list-footer a, .row-fluid .search-page .list-footer span, .row-fluid .search-page .list-footer date {
    margin-right: 1px;
    color: #999999
}

.row-fluid .search-page .list-footer a:hover {
    color: #717171
}

.row-fluid .search-page .list-footer .bookmarked i.fa-bookmark {
    color: #e78170
}

.row-fluid .search-page .list-footer ul {
    margin: 0
}

.row-fluid .search-page .list-footer li {
    width: auto;
    padding: 0;
    margin: 0 0 0 8px;
    float: left;
    border: none;
    list-style: none
}

.row-fluid .search-page .list-footer li .tooltip {
    white-space: nowrap
}

.no-results {
    position: absolute;
    top: 30%;
    width: 100%;
    padding: 0 10px;
    color: #717171;
    box-sizing: border-box
}

.no-results i {
    color: #b1b1b1
}

.no-results .btn {
    margin-top: 10px
}

@media (max-width: 767px) {
    .row-fluid .search-page .span3 {
        width: 100%;
        max-width: none
    }

    .row-fluid .search-page .span3 .nav-list {
        margin-top: 70px;
        overflow: hidden;
        border-bottom: 1px solid #d9d9d9;
        border-top: none
    }

    .row-fluid .search-page .span3 .nav-list li {
        float: left
    }

    .row-fluid .search-page .span3 .nav-list li a {
        padding: 14px 20px;
        border: none
    }

    .row-fluid .search-page .span3 .nav-list li span {
        display: none
    }

    .row-fluid .search-page .span7 {
        border-left: none
    }

    .row-fluid .search-page .span7 .page-title {
        padding: 0
    }

    .row-fluid .search-page .span7 span.pull-left, .row-fluid .search-page .span7 .pull-right {
        float: none;
        width: 100%;
        display: block;
        margin: 10px auto;
        text-align: center
    }

    .row-fluid .search-page .span7 span.pull-left .dropdown-menu, .row-fluid .search-page .span7 .pull-right .dropdown-menu {
        text-align: left
    }

    .row-fluid .search-page .span7 .pull-right {
        margin-top: 15px
    }

    .row-fluid .search-page .span7 ul.list {
        padding: 10px
    }

    .row-fluid .search-page .span7 .loading-content {
        top: 86px
    }

    .row-fluid .search-page .span7 .pagination {
        padding-left: 10px
    }
}

.authentication {
    max-width: 700px;
    padding: 50px 0;
    margin: 50px auto 200px;
    border: 1px solid #d9d9d9;
    border-radius: 6px
}

.authentication .page-title {
    padding: 0 0 15px;
    margin: 0 50px 0;
    text-align: center;
    font-size: 30px
}

.authentication .section {
    padding: 20px 50px 10px;
    border-bottom: 1px solid #d9d9d9
}

.authentication .section h4 {
    margin-bottom: 10px
}

.authentication .section li {
    margin-bottom: 5px
}

.authentication .user-info {
    border-bottom: none
}

.authentication form {
    margin: 30px auto 30px
}

.authentication .control-group {
    margin-bottom: 35px
}

.authentication .controls span {
    font-size: 12px
}

.authentication .select {
    margin-bottom: 10px
}

.authentication .select .control-label {
    padding-top: 5px
}

.authentication select {
    width: 75px
}

.authentication .control-group input {
    width: 100%;
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none
}

.authentication .control-group.error input:focus {
    box-shadow: none
}

.authentication .submit-form {
    padding: 0 50px
}

.authentication .submit-form .btn {
    margin-right: 15px
}

.contact-page {
    margin-bottom: 60px
}

.contact-page [class*="span"]:first-child {
    margin: 0 auto
}

.contact-page .span10 {
    float: none
}

.contact-page h1 {
    margin: 60px auto 45px;
    font-size: 30px
}

.contact-page textarea {
    width: 100%;
    height: 320px;
    padding: 20px;
    margin-bottom: 20px;
    resize: none;
    background: none;
    border-color: #d9d9d9;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 14px
}

.contact-page textarea:focus {
    border-color: #d9d9d9
}

.contact-page .address {
    padding-left: 20px;
    margin-bottom: 10px;
    border: 1px solid #d9d9d9;
    line-height: 40px
}

.contact-page .address i {
    margin-right: 4px
}

.contact-page .address input {
    width: 70%;
    margin: -3px 0 0 10px;
    border: none;
    box-shadow: none
}

.contact-page .address input:hover, .contact-page .address input:focus {
    border-color: inherit
}

.contact-page p {
    margin-bottom: 20px;
    color: #999999
}

.contact-page p.text-left {
    margin-bottom: 35px
}

.contact-page .btn-large {
    width: 250px;
    margin-bottom: 45px
}

.contact-page .share li {
    position: relative;
    display: inline-block
}

.contact-page .share li > a {
    width: 44px;
    display: inline-block;
    margin: 0 5px;
    background: #eeeeee;
    border-radius: 50%;
    line-height: 45px;
    font-size: 22px
}

.contact-page .share li > a:hover {
    color: white
}

.contact-page .share .weibo a:hover {
    background-color: #f57e42
}

.contact-page .share .weixin a:hover {
    background-color: #49be38
}

.contact-page .share .twitter a:hover {
    background-color: #3dbcf5
}

.contact-page .share .envelope a:hover {
    background-color: #4094c7
}

.contact-page .share .share-wechat div {
    top: -200px;
    left: -65px;
    width: 128px;
    padding: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px
}

.contact-page .share .share-wechat div::before, .contact-page .share .share-wechat div::after {
    left: 50%;
    margin-left: -8px
}

.contact-page .share .share-wechat div::before, .contact-page .share .share-wechat div::after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    content: '';
    display: inline-block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #d9d9d9
}

.contact-page .share .share-wechat div::after {
    bottom: -9px;
    border-top: 9px solid white
}

.contact-page .share .share-wechat .loader-tiny {
    width: 17px;
    height: 11px
}

@media (max-width: 767px) {
    .contact-page {
        padding-left: 20px;
        padding-right: 20px
    }
}

.account-page {
    max-width: 740px;
    padding: 0 10px;
    margin: 0 auto
}

.account-page .page-title {
    margin: 50px auto;
    font-weight: normal;
    text-shadow: none
}

.account-page .account-info {
    padding: 15px 10px;
    margin-bottom: 50px;
    border: 1px solid #eeeeee;
    background-color: whitesmoke;
    border-radius: 4px
}

.account-page .account-info > a {
    display: inline-block
}

.account-page .account-info > a span {
    vertical-align: middle
}

.account-page .account-info .media {
    display: inline-block;
    vertical-align: middle;
    overflow: inherit
}

.account-page .account-info .media-body {
    width: 245px;
    overflow: inherit
}

.account-page .account-info .media-heading {
    margin: 0 0 12px
}

.account-page .account-info .avatar {
    width: 50px;
    height: 5 å0px
}

.account-page .account-info .bind {
    padding-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    color: #999999;
    font-size: 12px
}

.account-page .account-info .fa-mobile {
    font-size: 18px;
    width: 17px;
    position: relative;
    top: 1px
}

.account-page .account-info .fa-alipay {
    position: relative;
    top: 2px;
    height: 14px;
    margin-right: 3px;
}

.account-page .account-info .binding-mobile {
    color: #49be38
}

.account-page .account-info .binding-alipay {
    color: #f57e42
}

.account-page .account-info .binding-alipay .fa-alipay {
    background: url(/images/zhifubao.png) 0 0 no-repeat;
    background-size: 18px
}

.account-page .account-info .binding-wrap {
    position: relative
}

.account-page .account-info .binding-wrap .binddiv {
    position: absolute;
    top: 25px;
    left: 0;
    margin-left: -15px;
    padding: 10px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    overflow: inherit;
    display: none;
    font-size: 12px;
    color: initial;
    z-index: 1
}

.account-page .account-info .binding-wrap .binddiv span {
    white-space: nowrap
}

.account-page .account-info .binding-wrap .binddiv a {
    color: #4094c7
}

.account-page .account-info .binding-wrap .binddiv a:hover {
    color: #075b8d
}

.account-page .account-info .binding-wrap .binddiv a.active, .account-page .account-info .binding-wrap .binddiv a:active, .account-page .account-info .binding-wrap .binddiv a:focus {
    color: #075b8d
}

.account-page .account-info .binding-wrap .binddiv a.disabled, .account-page .account-info .binding-wrap .binddiv a.disabled:hover, .account-page .account-info .binding-wrap .binddiv a.disabled:focus, .account-page .account-info .binding-wrap .binddiv a.disabled:active, .account-page .account-info .binding-wrap .binddiv a.disabled.active, .account-page .account-info .binding-wrap .binddiv a[disabled], .account-page .account-info .binding-wrap .binddiv a[disabled]:hover, .account-page .account-info .binding-wrap .binddiv a[disabled]:focus, .account-page .account-info .binding-wrap .binddiv a[disabled]:active, .account-page .account-info .binding-wrap .binddiv a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.account-page .account-info .binding-wrap:hover .binddiv {
    display: block
}

.account-page .account-info .binding-wrap .arrow-top::before, .account-page .account-info .binding-wrap .arrow-top::after {
    top: -6px;
    margin-left: -4px
}

.account-page .account-info .balance {
    padding: 0 0 4px 20px;
    display: inline-block;
    border-left: 1px solid #d9d9d9;
    vertical-align: middle
}

.account-page .account-info .balance p:last-child {
    margin-bottom: 0;
    vertical-align: bottom
}

.account-page .account-info .balance span.title {
    display: inline-block;
    min-width: 70px;
    margin-right: 20px
}

.account-page .account-info .balance span.title span {
    font-size: 24px;
    vertical-align: middle
}

.account-page .account-info .balance em {
    font-size: 12px;
    color: #999999;
    font-style: normal;
    font-weight: normal
}

.account-page .account-info .balance .btn {
    margin-right: 10px
}

.account-page .withdrawal_info {
    margin-bottom: 50px
}

.account-page .withdrawal_info p {
    margin-bottom: 2px
}

.account-page .withdrawal_info a {
    color: #4094c7
}

.account-page .withdrawal_info a:hover {
    color: #075b8d
}

.account-page .withdrawal_info a.active, .account-page .withdrawal_info a:active, .account-page .withdrawal_info a:focus {
    color: #075b8d
}

.account-page .withdrawal_info a.disabled, .account-page .withdrawal_info a.disabled:hover, .account-page .withdrawal_info a.disabled:focus, .account-page .withdrawal_info a.disabled:active, .account-page .withdrawal_info a.disabled.active, .account-page .withdrawal_info a[disabled], .account-page .withdrawal_info a[disabled]:hover, .account-page .withdrawal_info a[disabled]:focus, .account-page .withdrawal_info a[disabled]:active, .account-page .withdrawal_info a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.account-page .list {
    border-top: 1px solid #d9d9d9
}

.account-page .list li {
    padding: 20px 0 20px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden
}

.account-page .list p {
    margin-bottom: 7px
}

.account-page .list p:last-child {
    margin-bottom: 0
}

.account-page .list .time, .account-page .list div, .account-page .list .je {
    float: left
}

.account-page .list .state {
    float: right
}

.account-page .list .time {
    margin-right: 60px;
    color: #999999
}

.account-page .list div {
    width: 100%;
    max-width: 325px;
    font-size: 12px;
    color: #999999
}

.account-page .list div .title, .account-page .list div i {
    font-size: 14px;
    color: #555555
}

.account-page .list div i {
    margin-right: 5px;
    color: #999999
}

.account-page .list div a {
    margin: 0 4px;
    color: #4094c7
}

.account-page .list div a:hover {
    color: #075b8d
}

.account-page .list div a.active, .account-page .list div a:active, .account-page .list div a:focus {
    color: #075b8d
}

.account-page .list div a.disabled, .account-page .list div a.disabled:hover, .account-page .list div a.disabled:focus, .account-page .list div a.disabled:active, .account-page .list div a.disabled.active, .account-page .list div a[disabled], .account-page .list div a[disabled]:hover, .account-page .list div a[disabled]:focus, .account-page .list div a[disabled]:active, .account-page .list div a[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.account-page .list .income {
    color: #49be38
}

.account-page .list .expend {
    color: #f57e42
}

.account-page .list .state.in-progress {
    color: #999999
}

.account-page .list .state.failed {
    color: #de533a
}

.account-page .list .state.settled {
    color: #49be38
}

.account-page .list .state-wrap {
    float: right;
    width: auto;
    padding: 0
}

.account-page .list .state-wrap .in-progress, .account-page .list .state-wrap .expend {
    position: static
}

.account-page .list .state-wrap a {
    display: block;
    margin: 0
}

@media (max-width: 480px) {
    .account-page .account-info .balance {
        padding: 20px 0 0 0;
        margin-top: 20px;
        display: block;
        border-left: none;
        border-top: 1px solid #d9d9d9
    }
}

@media (max-width: 767px) {
    .account-page {
        padding: 0 20px
    }

    .account-page .page-title {
        margin-top: 100px
    }

    .account-page .list li {
        position: relative
    }

    .account-page .list li .time, .account-page .list li div, .account-page .list li .amount {
        float: none
    }

    .account-page .list li .time {
        margin-bottom: 10px;
        display: block
    }

    .account-page .list li div {
        float: none;
        width: auto;
        max-width: none;
        padding-right: 80px
    }

    .account-page .list li .amount {
        position: absolute;
        top: 50px;
        right: 0
    }
}

.reader-night-mode .activity, .reader-day-mode .activity {
    position: relative;
    background: white;
    color: #555555;
    z-index: 1049;
    line-height: 1.5
}

.reader-night-mode .activity a, .reader-day-mode .activity a {
    color: #555555
}

.reader-night-mode .activity a:hover, .reader-day-mode .activity a:hover {
    color: #b1b1b1
}

.reader-night-mode .activity a:active, .reader-night-mode .activity a:focus, .reader-day-mode .activity a:active, .reader-day-mode .activity a:focus {
    outline: none
}

.reader-night-mode .activity p, .reader-day-mode .activity p {
    line-height: 1.5
}

.reader-night-mode .activity .banner, .reader-day-mode .activity .banner {
    width: 100%;
    margin-bottom: 24px;
    background-color: #bc2d13
}

.reader-night-mode .activity .content, .reader-day-mode .activity .content {
    max-width: 620px;
    margin: 0 auto
}

.reader-night-mode .activity .login, .reader-day-mode .activity .login {
    display: none;
    font-size: 28px
}

.reader-night-mode .activity .btn-success, .reader-day-mode .activity .btn-success {
    color: white;
    border-color: #49be38;
    background: #49be38
}

.reader-night-mode .activity .btn-success:hover, .reader-night-mode .activity .btn-success:focus, .reader-day-mode .activity .btn-success:hover, .reader-day-mode .activity .btn-success:focus {
    color: white;
    border-color: #6bd95b;
    background-color: #6bd95b
}

.reader-night-mode .activity .btn-success.active, .reader-night-mode .activity .btn-success:active, .reader-day-mode .activity .btn-success.active, .reader-day-mode .activity .btn-success:active {
    outline: none;
    color: white;
    border-color: #247e16;
    background: #247e16;
    box-shadow: none
}

.reader-night-mode .activity .btn-success.disabled, .reader-night-mode .activity .btn-success.disabled:hover, .reader-night-mode .activity .btn-success.disabled:focus, .reader-night-mode .activity .btn-success.disabled:active, .reader-night-mode .activity .btn-success.disabled.active, .reader-night-mode .activity .btn-success[disabled], .reader-night-mode .activity .btn-success[disabled]:hover, .reader-night-mode .activity .btn-success[disabled]:focus, .reader-night-mode .activity .btn-success[disabled]:active, .reader-night-mode .activity .btn-success[disabled].active, .reader-day-mode .activity .btn-success.disabled, .reader-day-mode .activity .btn-success.disabled:hover, .reader-day-mode .activity .btn-success.disabled:focus, .reader-day-mode .activity .btn-success.disabled:active, .reader-day-mode .activity .btn-success.disabled.active, .reader-day-mode .activity .btn-success[disabled], .reader-day-mode .activity .btn-success[disabled]:hover, .reader-day-mode .activity .btn-success[disabled]:focus, .reader-day-mode .activity .btn-success[disabled]:active, .reader-day-mode .activity .btn-success[disabled].active {
    cursor: not-allowed;
    background: #7add6c;
    border-color: #7add6c
}

.reader-night-mode .activity .btn, .reader-day-mode .activity .btn {
    width: 187px;
    display: block;
    margin: 30px auto 0;
    border-radius: 60px;
    font-size: 24px;
    line-height: 50px
}

.reader-night-mode .activity .info, .reader-day-mode .activity .info {
    font-size: 20px
}

.reader-night-mode .activity .blue-link, .reader-day-mode .activity .blue-link {
    color: #4094c7
}

.reader-night-mode .activity .blue-link:hover, .reader-day-mode .activity .blue-link:hover {
    color: #075b8d
}

.reader-night-mode .activity .blue-link.active, .reader-night-mode .activity .blue-link:active, .reader-night-mode .activity .blue-link:focus, .reader-day-mode .activity .blue-link.active, .reader-day-mode .activity .blue-link:active, .reader-day-mode .activity .blue-link:focus {
    color: #075b8d
}

.reader-night-mode .activity .blue-link.disabled, .reader-night-mode .activity .blue-link.disabled:hover, .reader-night-mode .activity .blue-link.disabled:focus, .reader-night-mode .activity .blue-link.disabled:active, .reader-night-mode .activity .blue-link.disabled.active, .reader-night-mode .activity .blue-link[disabled], .reader-night-mode .activity .blue-link[disabled]:hover, .reader-night-mode .activity .blue-link[disabled]:focus, .reader-night-mode .activity .blue-link[disabled]:active, .reader-night-mode .activity .blue-link[disabled].active, .reader-day-mode .activity .blue-link.disabled, .reader-day-mode .activity .blue-link.disabled:hover, .reader-day-mode .activity .blue-link.disabled:focus, .reader-day-mode .activity .blue-link.disabled:active, .reader-day-mode .activity .blue-link.disabled.active, .reader-day-mode .activity .blue-link[disabled], .reader-day-mode .activity .blue-link[disabled]:hover, .reader-day-mode .activity .blue-link[disabled]:focus, .reader-day-mode .activity .blue-link[disabled]:active, .reader-day-mode .activity .blue-link[disabled].active {
    cursor: not-allowed;
    color: #999999
}

.reader-night-mode .activity .section, .reader-day-mode .activity .section {
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 12px;
    background-color: #eeeeee;
    word-break: break-all;
    font-size: 17px
}

.reader-night-mode .activity .section > span, .reader-day-mode .activity .section > span {
    color: #49be38
}

.reader-night-mode .activity .section ol, .reader-day-mode .activity .section ol {
    margin-top: 10px;
    margin-bottom: 30px
}

.reader-night-mode .activity h3, .reader-day-mode .activity h3 {
    margin: 0 0 35px;
    line-height: 1;
    font-size: 24px;
    font-weight: normal;
    color: #df533b
}

.reader-night-mode .activity h4, .reader-day-mode .activity h4 {
    margin-bottom: 20px;
    color: #df533b;
    font-weight: normal
}

.reader-night-mode .activity h4 span, .reader-day-mode .activity h4 span {
    position: relative;
    top: 3px;
    margin: 0 10px;
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1
}

.reader-night-mode .activity .share-group, .reader-day-mode .activity .share-group {
    margin: 20px 0 0;
    text-align: center
}

.reader-night-mode .activity .share-group a, .reader-day-mode .activity .share-group a {
    margin: 0 8px;
    font-size: 24px;
    color: #2f2f2f
}

.reader-night-mode .activity li, .reader-day-mode .activity li {
    margin-bottom: 5px;
    line-height: 1.5
}

.reader-night-mode .activity ul.invite, .reader-day-mode .activity ul.invite {
    margin-left: -5px;
    margin-bottom: 0
}

.reader-night-mode .activity ul.invite li, .reader-day-mode .activity ul.invite li {
    float: left;
    margin: 0 8px 10px 8px
}

.reader-night-mode .activity ul.invite li a, .reader-day-mode .activity ul.invite li a {
    margin: 0
}

.reader-night-mode .activity ul.invite .more-user a, .reader-day-mode .activity ul.invite .more-user a {
    height: 40px;
    width: 40px;
    display: inline-block;
    background: #d9d9d9;
    border-radius: 50%;
    line-height: 40px;
    color: white;
    text-align: center
}

.reader-night-mode .activity .footer, .reader-day-mode .activity .footer {
    padding-bottom: 50px;
    margin-bottom: 0;
    text-align: center;
    font-size: 12px;
    color: #999999
}

.reader-night-mode .activity .hot-list li, .reader-day-mode .activity .hot-list li {
    margin-bottom: 24px
}

.reader-night-mode .activity .hot-list li:last-child, .reader-day-mode .activity .hot-list li:last-child {
    margin-bottom: 20px
}

.reader-night-mode .activity .hot-list .avatar, .reader-day-mode .activity .hot-list .avatar {
    color: #555555
}

.reader-night-mode .activity .hot-list .avatar:hover, .reader-day-mode .activity .hot-list .avatar:hover {
    color: #3f3f3f
}

.reader-night-mode .activity .hot-list .avatar span, .reader-day-mode .activity .hot-list .avatar span {
    position: relative;
    top: 1px;
    margin-left: 25px
}

.reader-night-mode .activity .hot-list span.pull-right, .reader-day-mode .activity .hot-list span.pull-right {
    position: static;
    margin-top: 6px;
    font-size: 20px;
    color: #df533b
}

.reader-night-mode .activity .hot-list ul, .reader-day-mode .activity .hot-list ul {
    margin-bottom: 40px
}

.reader-night-mode .activity .hot-list .ladda-button, .reader-night-mode .activity .hot-list .ladda-button:hover, .reader-day-mode .activity .hot-list .ladda-button, .reader-day-mode .activity .hot-list .ladda-button:hover {
    color: white
}

.reader-night-mode .activity .avatar, .reader-day-mode .activity .avatar {
    margin-right: 20px;
    border: none
}

.reader-night-mode .activity .avatar img, .reader-day-mode .activity .avatar img {
    width: 36px;
    height: 36px;
    border: none
}

.reader-night-mode .download-app, .reader-day-mode .download-app {
    max-width: 1000px;
    padding: 30px;
    margin: 0 auto;
    box-sizing: border-box;
    background: whitesmoke;
    color: #555555
}

.reader-night-mode .download-app .top, .reader-day-mode .download-app .top {
    margin-bottom: 58px
}

.reader-night-mode .download-app .logo, .reader-day-mode .download-app .logo {
    width: 240px
}

.reader-night-mode .download-app .app-img, .reader-day-mode .download-app .app-img {
    width: 345px
}

.reader-night-mode .download-app h2, .reader-day-mode .download-app h2 {
    margin: 0 auto 10px;
    font-size: 36px;
    color: #e78170;
    font-weight: normal
}

.reader-night-mode .download-app h3, .reader-day-mode .download-app h3 {
    font-size: 24px;
    color: #2f2f2f;
    font-weight: normal
}

.reader-night-mode .download-app .btn-success, .reader-day-mode .download-app .btn-success {
    color: white;
    border-color: #49be38;
    background: #49be38
}

.reader-night-mode .download-app .btn-success:hover, .reader-night-mode .download-app .btn-success:focus, .reader-day-mode .download-app .btn-success:hover, .reader-day-mode .download-app .btn-success:focus {
    color: white;
    border-color: #6bd95b;
    background-color: #6bd95b
}

.reader-night-mode .download-app .btn-success.active, .reader-night-mode .download-app .btn-success:active, .reader-day-mode .download-app .btn-success.active, .reader-day-mode .download-app .btn-success:active {
    outline: none;
    color: white;
    border-color: #247e16;
    background: #247e16;
    box-shadow: none
}

.reader-night-mode .download-app .btn-success.disabled, .reader-night-mode .download-app .btn-success.disabled:hover, .reader-night-mode .download-app .btn-success.disabled:focus, .reader-night-mode .download-app .btn-success.disabled:active, .reader-night-mode .download-app .btn-success.disabled.active, .reader-night-mode .download-app .btn-success[disabled], .reader-night-mode .download-app .btn-success[disabled]:hover, .reader-night-mode .download-app .btn-success[disabled]:focus, .reader-night-mode .download-app .btn-success[disabled]:active, .reader-night-mode .download-app .btn-success[disabled].active, .reader-day-mode .download-app .btn-success.disabled, .reader-day-mode .download-app .btn-success.disabled:hover, .reader-day-mode .download-app .btn-success.disabled:focus, .reader-day-mode .download-app .btn-success.disabled:active, .reader-day-mode .download-app .btn-success.disabled.active, .reader-day-mode .download-app .btn-success[disabled], .reader-day-mode .download-app .btn-success[disabled]:hover, .reader-day-mode .download-app .btn-success[disabled]:focus, .reader-day-mode .download-app .btn-success[disabled]:active, .reader-day-mode .download-app .btn-success[disabled].active {
    cursor: not-allowed;
    background: #7add6c;
    border-color: #7add6c
}

.reader-night-mode .download-app .btn-info, .reader-day-mode .download-app .btn-info {
    color: white;
    border-color: #15a7f0;
    background: #15a7f0
}

.reader-night-mode .download-app .btn-info:hover, .reader-night-mode .download-app .btn-info:focus, .reader-day-mode .download-app .btn-info:hover, .reader-day-mode .download-app .btn-info:focus {
    color: white;
    border-color: #3dbcf5;
    background-color: #3dbcf5
}

.reader-night-mode .download-app .btn-info.active, .reader-night-mode .download-app .btn-info:active, .reader-day-mode .download-app .btn-info.active, .reader-day-mode .download-app .btn-info:active {
    outline: none;
    color: white;
    border-color: #075b8d;
    background: #075b8d;
    box-shadow: none
}

.reader-night-mode .download-app .btn-info.disabled, .reader-night-mode .download-app .btn-info.disabled:hover, .reader-night-mode .download-app .btn-info.disabled:focus, .reader-night-mode .download-app .btn-info.disabled:active, .reader-night-mode .download-app .btn-info.disabled.active, .reader-night-mode .download-app .btn-info[disabled], .reader-night-mode .download-app .btn-info[disabled]:hover, .reader-night-mode .download-app .btn-info[disabled]:focus, .reader-night-mode .download-app .btn-info[disabled]:active, .reader-night-mode .download-app .btn-info[disabled].active, .reader-day-mode .download-app .btn-info.disabled, .reader-day-mode .download-app .btn-info.disabled:hover, .reader-day-mode .download-app .btn-info.disabled:focus, .reader-day-mode .download-app .btn-info.disabled:active, .reader-day-mode .download-app .btn-info.disabled.active, .reader-day-mode .download-app .btn-info[disabled], .reader-day-mode .download-app .btn-info[disabled]:hover, .reader-day-mode .download-app .btn-info[disabled]:focus, .reader-day-mode .download-app .btn-info[disabled]:active, .reader-day-mode .download-app .btn-info[disabled].active {
    cursor: not-allowed;
    background: #50c3f6;
    border-color: #50c3f6
}

.reader-night-mode .download-app .btn, .reader-day-mode .download-app .btn {
    min-width: 300px;
    margin: 50px auto 60px;
    line-height: 50px;
    font-size: 30px
}

.reader-night-mode .download-app p, .reader-day-mode .download-app p {
    font-size: 18px;
    color: #999999
}

.reader-night-mode .download-app .qrcode-app, .reader-day-mode .download-app .qrcode-app {
    width: 220px;
    height: 220px;
    margin: 30px auto
}

.reader-night-mode .download-app p a, .reader-day-mode .download-app p a {
    font-size: 20px;
    color: #e78170
}

@media (max-width: 320px) {
    .reader-night-mode .download-app a.btn, .reader-day-mode .download-app a.btn {
        margin: 6% auto 10%
    }
}

@media (max-width: 480px) {
    .reader-night-mode .download-app, .reader-day-mode .download-app {
        padding: 20px
    }

    .reader-night-mode .download-app .top, .reader-day-mode .download-app .top {
        margin-bottom: 14%
    }

    .reader-night-mode .download-app .logo, .reader-night-mode .download-app .app-img, .reader-day-mode .download-app .logo, .reader-day-mode .download-app .app-img {
        width: 70%
    }

    .reader-night-mode .download-app h2, .reader-day-mode .download-app h2 {
        margin-bottom: 2%;
        font-size: 24px
    }

    .reader-night-mode .download-app h3, .reader-day-mode .download-app h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1
    }

    .reader-night-mode .download-app .btn, .reader-day-mode .download-app .btn {
        min-width: inherit;
        margin: 12% auto 12%;
        font-size: 20px;
        line-height: 2
    }
}

@media (max-width: 768px) {
    .row-fluid .activity .avatar, .row-fluid .download-app .avatar {
        margin-right: 10px
    }

    .row-fluid .activity .avatar img, .row-fluid .download-app .avatar img {
        width: 40px;
        height: 40px
    }

    .row-fluid .activity .hot-list span.pull-right, .row-fluid .download-app .hot-list span.pull-right {
        margin-top: 8px;
        font-size: 18px
    }

    .row-fluid .download-app {
        position: absolute;
        width: 100%;
        height: 100%;
        margin-top: 0;
        z-index: 1500
    }

    .reader-night-mode .activity h3, .reader-day-mode .activity h3 {
        margin-bottom: 20px;
        font-size: 20px
    }

    .reader-night-mode .activity .btn, .reader-day-mode .activity .btn {
        width: 160px;
        margin-top: 20px;
        font-size: 20px;
        line-height: 40px
    }

    .reader-night-mode .activity .hot-list li, .reader-day-mode .activity .hot-list li {
        margin-bottom: 28px
    }

    .reader-night-mode .download-app p a, .reader-day-mode .download-app p a {
        font-size: 14px
    }
}

@media (max-width: 1100px) {
    .activity .banner {
        height: auto
    }

    .activity .content {
        padding: 0 20px
    }
}

.avoid-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.avoid-mouse {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none
}

.loading .background, .loading .swiper-container {
    opacity: 0;
    pointer-events: none
}

.loading .stash {
    display: block;
    opacity: 1
}

.stash {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    font-size: 24px;
    line-height: 100%;
    background-color: white;
    opacity: 0;
    text-align: center;
    color: #cdcdcd;
    text-shadow: 1px 1px 1px #2f2f2f;
    z-index: 1000;
    transition: opacity 200ms ease-in-out
}

.stash span {
    position: relative;
    display: inline-block;
    top: 50%;
    height: 24px;
    margin: 0px;
    margin-top: -12px;
    padding: 0px;
    overflow: hidden;
    line-height: 24px
}

.line {
    position: relative;
    display: inline-block;
    height: 2px;
    padding: 0px;
    overflow: hidden;
    background-color: #d5d5d5
}

.swiper-slide a {
    text-decoration: none
}

.swiper-slide > .pan {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.page1 > .pan {
    background-image: url(/images/january.jpg)
}

.page2 > .pan {
    background-image: url(/images/february.jpg)
}

.page3 > .pan {
    background-image: url(/images/march.jpg)
}

.page4 > .pan {
    background-image: url(/images/april.jpg)
}

.page5 > .pan {
    background-image: url(/images/may.jpg)
}

.page6 > .pan {
    background-image: url(/images/june.jpg)
}

.page7 > .pan {
    background-image: url(/images/july.jpg)
}

.page8 > .pan {
    background-image: url(/images/augest.jpg)
}

.page9 > .pan {
    background-image: url(/images/september.jpg)
}

.page10 > .pan {
    background-image: url(/images/october.jpg)
}

.page11 > .pan {
    background-image: url(/images/november.jpg)
}

.page12 > .pan {
    background-image: url(/images/december.jpg)
}

.swiper-slide > .pan .article {
    position: absolute;
    display: block;
    top: 50%;
    left: 0px;
    width: 100%;
    margin-top: -40px
}

.swiper-slide > .pan .article-title {
    display: block;
    width: 100%;
    height: 25px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    color: #2f2f2f
}

.swiper-slide > .pan .line {
    width: 38px;
    margin-bottom: 15px
}

.swiper-slide > .pan .content {
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 1.6;
    color: #2f2f2f
}

.swiper-slide > .pan .more {
    font-size: 11px;
    color: #b1b1b1
}

.swiper-slide > .pan .more:hover {
    color: #b1b1b1
}

.swiper-slide > .pan .author {
    position: absolute;
    display: block;
    bottom: 50px;
    left: 0px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    vertical-align: middle
}

.swiper-slide > .pan .author .icon {
    width: 35px;
    height: 35px;
    border-radius: 50%
}

.swiper-slide > .pan .author .name {
    margin-left: 15px;
    font-size: 15px;
    color: #717171
}

.swiper-slide > .pan .download {
    position: absolute;
    display: block;
    bottom: 15px;
    left: 0px;
    width: 100%;
    height: 17px;
    line-height: 17px;
    font-size: 14px
}

.swiper-slide > .pan .download a {
    color: #e78170
}

.swiper-slide > .pan .download a:hover {
    color: #e78170
}

.swiper-slide > .pan .download .icon {
    height: 17px;
    vertical-align: bottom
}

.zodiac {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 620px;
    padding-bottom: 30px;
    background-color: #f3f3f3;
    font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    color: #ce452f
}

.modal.share-weixin-modal.fade {
    top: -100%
}

.modal.share-weixin-modal.fade.in {
    top: 10%
}

.swiper-container {
    position: relative;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    text-align: center
}

.swiper-container .title-container {
    margin-bottom: 30px;
    font-size: 36px;
    line-height: 36px;
    color: #e9816d
}

.swiper-container .title-container .line {
    top: -12px;
    width: 50px;
    margin: 0px 20px 0px 20px
}

.swiper-container .title-container .year {
    position: relative;
    top: 1px
}

.swiper-container .title-container .title {
    color: #2f2f2f
}

.swiper-container .share-container {
    margin-bottom: 40px
}

.swiper-container .share-container .item {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer
}

.swiper-container .share-container .item, .swiper-container .share-container .item a, .swiper-container .share-container .item:hover, .swiper-container .share-container .item a:hover {
    color: #555555
}

.swiper-container .share-container .item .fa {
    position: relative;
    top: 1px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 20px;
    line-height: 20px
}

.swiper-container .share-container .item.more {
    position: relative
}

.swiper-container .share-container .item.more .fa-caret-down {
    opacity: 1;
    transition: opacity 200ms ease-out
}

.swiper-container .share-container .item.more.open .fa-caret-down {
    opacity: 0
}

.swiper-container .share-container .item.more .dropdown-menu {
    margin-top: 5px
}

.swiper-container .share-container .item.more .dropdown-menu::after, .swiper-container .share-container .item.more .dropdown-menu::before {
    left: 55px
}

.swiper-container .share-container .item.more .dropdown-menu li {
    font-size: 14px;
    text-align: left
}

.swiper-container .share-container .item.more .dropdown-menu li a, .swiper-container .share-container .item.more .dropdown-menu li a:hover {
    color: #b1b1b1
}

.swiper-container .share-container .item.more .dropdown-menu li img {
    width: 16px;
    height: 16px;
    margin-right: 10px
}

.swiper-slide {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 660px;
    max-height: 660px;
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: 30px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    transition: all 200ms ease
}

.swiper-slide > .pan {
    min-width: 300px;
    max-width: 342px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 5px 5px 10px #d5d5d5;
    cursor: pointer;
    transition: all 200ms ease
}

.swiper-slide > .pan .mask {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    cursor: pointer;
    transition: opacity 200ms ease-in
}

.swiper-slide > .pan:hover .mask {
    opacity: 1
}

.swiper-slide > .pan .mask .btn {
    position: absolute;
    display: block;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    width: 106px;
    height: 44px;
    margin-left: -53px;
    margin-top: -22px;
    padding: 0px;
    background-color: #e9816d;
    border-color: transparent;
    box-shadow: inset 0px 0px 1px #f8d9d4;
    font-size: 14px;
    line-height: 44px;
    color: white
}

@media (min-width: 620px) {
    .swiper-slide {
        width: 50%
    }
}

@media (min-width: 740px) {
    .swiper-container {
        width: 740px
    }
}

@media (min-width: 930px) {
    .swiper-container {
        width: 100%
    }

    .swiper-slide {
        width: 33.33%
    }
}

@media (min-width: 1110px) {
    .swiper-container {
        width: 1110px
    }
}