/*常用元素*/
body {
    background: url(../static/background.jpg) no-repeat fixed 50% 50%;
    /*background: url(background.jpg)  fixed 50% 50%;*/
    /*background-color: #dddddd;*/
    background-size: cover;
    width: 100%;
    height: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

p {
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 20px;
}

/*---------
|   头部   |
 ----------*/
.blog-head {
    position: fixed;
    top: 0px;
    z-index: 999;
}

/*---------
|   主体   |
 ----------*/
.blog-main {
    padding-top: 80px;
    padding-left: 6%;
    padding-right: 7%;
    padding-bottom: 2%;
}

/*---------
|   脚部   |
 ----------*/
.blog-footer {
    background-color: #141414;
    color: #757575;
    text-align: center;
    /*position: fixed;*/
    bottom: 0px;
    z-index: 200;
    width: 100%;
}

/*左右两边的盒子容器*/
.blog-cell-main-container {
    opacity: 0.8;
    padding: 0px 25px 10px;
}

/*左边部分*/
.blog-left-side-portion {
    position: sticky;
    top: 80px;
    padding-left: 2%;
    /*padding-right: 2%;*/
    z-index: 100;
}

/*中间部分*/
.blog-body {
    padding-top: 10px;
    /*padding-left: 3%;*/
    /*padding-right: 3%;*/
}

/*右边部分*/
.blog-right-side-portion {
    position: sticky;
    top: -19%;
    padding-top: 10px;
    /*padding-left: 2%;*/
    /*padding-right: 2%;*/
    z-index: 100;
}

div .blog-right-side-meta div {
    padding-left: 6%;
    padding-right: 6%;
    margin-bottom: 3%;
}

/*---------------------
|   核心盒子构成start   |
------- ---------------*/
.blog-left-side-scroll-portion, .blog-right-side-container {
    border-radius: 15px;
    background-color: white;

    line-height: 1.4;
    white-space: nowrap; /*规定段落中的文本不进行换行：*/
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    max-height: 200px;
    /*margin-top: 10px;*/
    /*min-height: 200px;*/

    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

.blog-right-side-container {
    padding-top: 10px;
    padding-bottom: 20px;
    overflow: hidden;
}

.blog-right-side-scroll-portion {
    padding-top: 10px;
    max-height: 150px;

    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #999;
}

/*预留滚动条的宽度*/
.blog-left-side-scroll-portion, .blog-right-side-scroll-portion {
    padding-right: 5px;
}

/*预留滚动条的宽度*/
.blog-left-side-scroll-portion:hover, .blog-right-side-scroll-portion:hover {
    padding-right: 0px;
}

.blog-left-side-scroll-portion:hover::-webkit-scrollbar {
    display: block;
}

.blog-right-side-scroll-portion:hover::-webkit-scrollbar {
    display: block;
}

.blog-left-side-scroll-portion::-webkit-scrollbar, .blog-right-side-scroll-portion::-webkit-scrollbar {
    width: 5px;
    display: none;
}

.blog-left-side-scroll-portion::-webkit-scrollbar-thumb, .blog-right-side-scroll-portion::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px;
}

/*margin滚动条上偏移*/
.blog-left-side-scroll-portion::-webkit-scrollbar-track,.layui-layer-content::-webkit-scrollbar-track{
    margin-top: 20px;
    margin-bottom: 20px;
}

/*layui弹出层不要滚动条*/
.layui-layer-content::-webkit-scrollbar {
    width: 7px;
    height: 20%;
    display: none;
}

.layui-layer-content::-webkit-scrollbar-thumb {
    background-color: rgba(76, 77, 79, 0.3);
    border-radius: 2px;
}

.layui-layer-content:hover::-webkit-scrollbar {
    display: block;
}

/*---------------------
|   核心盒子构成end     |
------- ---------------*/

/*遗留无用部分,用来显示过长的部分*/
something:hover::after {
    /*content: attr(data-customer);*/
    /*content: "kiki超超超超超超超超超超超超长的 陈奕迅 baby song 歌词 ";*/
    content: "";
    background: #F2F2F2;
    /*border: 1px solid #E5E5E5;*/
    box-shadow: 0 2px 4px 0 rgba(56, 62, 71, 0.10);
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 13px;
    color: #202332;

    word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
    word-wrap: break-word;

    max-width: 90%; /*如果一个单词太长，则截断 CSS 属性 word-break 指定了怎样在单词内断行。 white-space: normal;*/
    max-height: 10%;

    /*position: relative;*/
    z-index: 500;
    top: 13%;
    left: 15%;
}

/*切出按钮*/
.blog-comment-left-guide {
    position: fixed;
    top: 45%;
    left: -12px;
    padding-left: 15px;
    padding-top: 15px;

    background-color: white;
    width: 20px;
    height: 30px;

    display: block;
    border-radius: 20%;
    opacity: 0.3;
    z-index: 200;
}

.blog-comment-right-guide {
    position: fixed;
    top: 45%;
    right: -12px;
    padding-left: 2px;

    padding-right: 13px;
    padding-top: 15px;

    background-color: white;
    width: 20px;
    height: 30px;
    display: block;
    border-radius: 20%;
    opacity: 0.3;
    z-index: 200;
}

/*头像部分*/
.blog-avatar {
    border-radius: 15px;
    background-color: white;
}

.blog-avatar img {
    width: 60px;
    height: auto;
    border-radius: 50%;
    display: block;
    margin: 10px auto 10px;
    padding-top: 10px;
}

.blog-user-message {
    text-align: center;
    font-size: 15px;
    color: #555;
    padding-top: 10px;
    padding-bottom: 10px;
}

.blog-user-message span {
    display: block;
    padding-bottom: 5px;
}

/*日志部分*/
.blog-log-list {
    line-height: 1.6;
    padding-left: 3%;
    padding-right: 3%;

    flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.blog-log-item {
    border-left: 2px solid rgba(222, 229, 231, .45);
    width: 23%;
    margin-bottom: 10px;
}

.blog-log-item:first-child {
    border-left: none;
}

.blog-log-item a span:first-child {
    color: #999;
}

.blog-log-item a span:last-child {
    font-weight: 600;
    font-size: 15px;
}

.blog-log-item span {
    display: block;
}

/*归档部分*/

.blog-pigeonhole {
    font-size: 15px;
}

.blog-pigeonhole-p {
    width: 20%;
    text-align: center;
    line-height: 20px;
    border-radius: 6px 6px 6px 6px;
    /*background-color: #edf0f3;*/
    margin-left: 3%;
    margin-bottom: 3%;
    opacity: 0.7;
}

.blog-pigeonhole-list {
    line-height: 1.6;
    padding-left: 3%;
    padding-right: 3%;
    /*display: flex; !*弹性盒子*!*/
    /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/

    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
    align-content: flex-start;
    -webkit-align-content: flex-start;

}

.blog-pigeonhole-item {
    min-width: 22%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 5%;
}

.blog-pigeonhole-item a span:first-child {
    height: 22px;
    background-color: #edf0f3;
    border-radius: 6px 6px 0 0;
    opacity: .8;
    color: #999aaa;
    line-height: 22px;
    margin-bottom: 1px;
    text-align: center;
}

.blog-pigeonhole-item a span:last-child {
    height: 22px;
    background-color: #f6f8fa;
    border-radius: 0 0 6px 6px;
    color: #555666;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
}

.blog-pigeonhole-item span {
    display: block;
}

/*文章部分*/
.blog-article {
    margin-bottom: 20px;
    border-radius: 15px;
    border: none;
    /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
}

.article-meta {
    padding: 30px 30px 10px;
    background-color: white;
    border-radius: 15px;
}

.article-title {
    color: #555;
    font-size: 25px;
    padding-bottom: 15px;
    margin-top: 0 !important;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.article-split-line {
    width: 100%;
    height: 2px;
    overflow: hidden;
    font-size: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    border-color: rgba(237, 241, 242, .6);

    border-bottom: 1px solid rgba(222, 229, 231, .45);
    display: block
}

.article-message-info {
    text-align: center;
}

.article-message-info li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

.article-message-info li span {
    padding-left: 0px;
}

.article-summary {
    max-height: 200px;
    overflow: hidden;
}

.article-summary p {
    text-align: center;
}

.article-read-btn {
    text-align: center;
    display: block;
}

.btn {
    display: inline-block;
    padding: 0 20px;
    color: #555;
    background: #fff;
    border: 2px solid #555;
    text-decoration: none;
    border-radius: 2px;

    line-height: 2;
    font-size: 14px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    cursor: pointer;

    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.btn:hover {
    background: #262a30;
    color: #fff;
}

/*文章图片部分*/
.item-thumb {
    min-height: 250px;
    position: relative;
    display: block;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 15px;
}

.item-thumb {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb:hover {
    transform: scale(1.05);
}

.item-thumb-small {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb-small:hover {
    transform: scale(1.05);
}

.blog-right-side-portion-title {
    display: block;
    font-size: 15px;
    padding-bottom: 8px;

}

span.title-remark::after {
    content: "(按字母索引)";
    color: #999;
    font-size: 10px;
}

.blog-right-side-exchange {
    padding-top: 5px;
}

/*右边的部分*/
.blog-right-side-meta span {
    /*word-break: keep-all;*/
    /*word-wrap: break-word;*/
    color: #999;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;

    white-space: nowrap; /* normal文本换行*/

    word-break: keep-all;
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

div .blog-right-side-meta a span:hover {
    background: #5FB878;
    color: #fff;
    white-space: normal;
    word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
    height: 20%;
    z-index: 600;
}