/*!
 Theme Name: ClubMate
 Theme URI: http://clubmate.fi/
 Description: Built by Hiljá Studio.
 Author: Cor Ethan
 Author URI: http://hilja.net/
 Version: 1.2
 This theme uses the great html5 boilerplate and normalize, you should too.
 And remember kids, Satan is the only lord you shall obey!
*/

/* common-*****************************************************************************************************************************/

html {
    font-size: 100%;
    font-family: Georgia, Times, 'Times New Roman', serif;
}

html, button, input, select, textarea {
    color: #444;
}

body {
    font-size: 14px;
    line-height: 1.2;
}

@media (min-width: 48em) {
    body:after {
        content: 'small';
    }
}

@media (min-width: 50em) {
    body:after {
        content: 'medium';
    }
}

@media (min-width: 64em) {
    body:after {
        content: 'large';
    }
}

@media (min-width: 90em) {
    body:after {
        content: 'extralarge';
    }
}

body:after {
    content: 'small';
    display: none;
}

@font-face {
    font-family: 'Anchor';
    font-style: normal;
    font-weight: normal;
    src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
}

*, *:before, *:after {
    box-sizing: border-box;
}

*:focus {
    /*-webkit-filter: drop-shadow(0 0 4px #2693ff);*/
    /*filter: drop-shadow(0 0 4px #2693ff);*/
    outline: 0;
}

p:empty {
    display: none;
}

blockquote, dd, div, fieldset, figure, h1, h2, h3, h4, h5, h6, hgroup, ol, table, p {
    padding: 0 0 10px;
}

ul {
    padding: 0 0 0 10px;
}

ul > li > p {
    padding: 0;
}

h1, h2, h3, h4 {
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
}

h1 {
    font-weight: bold;
}

h2 {
    font-size: 20px;
}

h2 span {
    font-size: 65%;
}

h1 a, h2 a, h3 a, h4 a, h5 a, .footer-list a, .arch-title a {
    color: #444;
}

.tag a {
    line-height: 1.5;
}

a {
    color: #888;
    text-decoration: none;
}

a:hover {
    color: #2693ff;
}

p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
    margin-top: 0;
}

i, q, em {
    font-style: italic;
}

blockquote {
    border-left: 2px solid white;
    margin: 0 0 10px -5px;
    padding: 2px 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom-right-radius: 1px;
}

blockquote ul, blockquote p {
    padding-bottom: 0;
}

/* tooltip-*************************************************************************************************************************** */

/* 自定义小屏响应式布局 */
@media (min-width: 60em) {
    .tooltip[data-tooltip-text] {
        display: inline-block;
        position: relative;
    }

    .tooltip[data-tooltip-text]::before, .tooltip[data-tooltip-text]::after {
        opacity: 0;
        padding: 10px 20px;
    }

    .tooltip[data-tooltip-text]:hover::before, .tooltip[data-tooltip-text]:hover::after {
        opacity: 1;
        visibility: visible;
    }

    .tooltip[data-tooltip-text]::after {
        background: #444;
        color: #fff;
        content: attr(data-tooltip-text);
        padding: 14px 13px;
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        z-index: 20;
    }

    .tooltip[data-tooltip-position="right"]::after, .tooltip[data-tooltip-position="left"]::after {
        top: 0;
    }

    .tooltip[data-tooltip-position="right"]::after {
        left: 100%;
    }

    .tooltip[data-tooltip-position="left"]::after {
        right: 100%;
    }
}

/* menu-list-*************************************************************************************************************************** */
.menu-list {
    border-top: 1px white solid;
    padding: 0px 10px 0px 0px;
    font-size: 1.5em;
    /*display: inline-block;*/
    /*position: absolute;*/
    text-align: right;
    width: 100%;
    line-height: normal;
}

.menu-list > span.menu-item > a.menu-link {
    /*border-left: 1px gray solid;*/
    /*border-right: 1px gray solid;*/
    padding: 0 1px;
    margin-left: 0px;
    margin-right: 0px;
}

.menu-list > span.menu-item {
    padding: 0 5px;
    border-bottom: 1px gray dashed;
}

.menu-list > span.menu-item-on {
    border-bottom: 1px white dashed;
}

/* 自定义小屏响应式布局 */
@media (max-width: 60em) {
    .menu-list {
        font-size: 1.2em;
    }
}

/* header-bar-*************************************************************************************************************************** */

.top-header-bar {
    background: Pink;
    border-color: #fff;
    border-style: solid;
    border-width: 0 20px;
    box-sizing: border-box;
    color: DarkRed;
    margin: 0;
    padding: 7px 10px;
    width: 100%;
}

/* process-bar-*************************************************************************************************************************** */

/* 顶部加载进度条 */
.top-process-bar {
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #F50057 61.8%, transparent 38.2%);
    background-repeat: repeat-x;
    background-size: 30px 1px;
    background-position: 0px 0px;
    padding: 1px 0 0 0;
    animation: border-dance 5s infinite linear;
}

@keyframes border-dance {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 300px;
    }
}

/* search-*****************************************************************************************************************************/

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.search-label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .search-label class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.search-label.focusable:active, .search-label.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.search {
    font-size: 20px;
    background: #fff;
    border: 0;
    padding: 10px;
    position: absolute;
    width: 100%;
}

.search:hover {
    background: rgba(255, 255, 255, 0.9);
}

.search:focus {
    background: rgba(255, 255, 255, 0.8);
}

/* 搜索关键字 */
span.search-text {
    color: red;
    font-weight: bold;
}

/* search-box */
.search-box {
    bottom: 0;
    height: 43px;
    padding: 0;
    position: absolute;
    width: 100%;
}

.search-box .prev-page, .search-box .next-page, .search-box .up-link {
    background: #eee;
    display: block;
    float: right;
    height: 43px;
    padding: 6px;
    position: relative;
}

.search-box .prev-page path, .search-box .next-page path, .search-box .up-link path {
    fill: #aaa;
}

.search-box .prev-page:hover path, .search-box .next-page:hover path, .search-box .up-link:hover path {
    fill: #444;
}

.search-box .up-link {
    display: none;
}

.sticky.search-box {
    width: calc(100% - 10px);
}

@media (min-width: 50em) {
    .sticky.search-box {
        width: calc(70% - 10px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20000;
    }
}

@media (min-width: 64em) {
    .sticky.search-box {
        width: calc(38% - 10px);
    }
}

@media (min-width: 90em) {
    .sticky.search-box {
        width: calc(33.33%);
    }
}

@media (min-width: 105em) {
    .sticky.search-box {
        width: 550px;
    }
}

.sticky.search-box .up-link {
    display: block;
}

.container .sticky.search-box {
    width: 100%;
}

@media (min-width: 50em) {
    .container .sticky.search-box {
        width: 66.66%;
    }
}

@media (min-width: 90em) {
    .container .sticky.search-box {
        width: 60%;
    }
}

/* form-*****************************************************************************************************************************/

.form-textarea {
    width: 100%;
}

.form-input {
    max-width: 500px;
}

.form-textarea, .form-input {
    position: relative;
    z-index: 1;
    /*display: inline-block;*/
    /*margin: 1em;*/
    /*max-width: 350px;*/
    /*width: calc(100% - 2em);*/
    vertical-align: top;
    /*font-size: 150%;*/
}

.form-field {
    position: relative;
    display: block;
    float: right;
    padding: 0.5em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-weight: 400;
    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none; /* for box shadows to show on iOS */
}

.form-field:focus {
    outline: none;
}

.form-label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #696969;
    font-weight: bold;
    font-size: 70.25%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
}

/* Chisato */

.form-theme-chisato {
    padding-top: 1em;
}

.form-field-theme-chisato {
    width: 100%;
    padding: 0.5em 0.3em;
    background: transparent;
    border: 1px dashed;
    color: #F50057;
    font-weight: bold;
    -webkit-transition: border-color 0.25s;
    transition: border-color 0.25s;
}

.form-label-theme-chisato {
    width: 100%;
    position: absolute;
    top: 0;
    text-align: left;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0, 2em, 0);
    transform: translate3d(0, 2em, 0);
}

.form-label-content-theme-chisato {
    padding: 0 1em;
    font-weight: 400;
    color: #b5b5b5;
}

.form-label-content-theme-chisato::after {
    content: attr(data-content);
    position: absolute;
    top: -200%;
    left: 0;
    color: #E91E63;
    font-weight: 800;
}

.form-field-theme-chisato:focus,
.form-field-filled .form-field-theme-chisato {
    border-color: #E91E63;
}

.form-field-theme-chisato:focus + .form-label-theme-chisato,
.form-field-filled .form-label-theme-chisato {
    -webkit-animation: anim-chisato-1 0.25s forwards;
    animation: anim-chisato-1 0.25s forwards;
}

.form-field-theme-chisato:focus + .form-label-theme-chisato .form-label-content-theme-chisato,
.form-field-filled .form-label-content-theme-chisato {
    -webkit-animation: anim-chisato-2 0.25s forwards ease-in;
    animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
    0%, 70% {
        -webkit-transform: translate3d(0, 3em, 0);
        transform: translate3d(0, 3em, 0);
    }
    71%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes anim-chisato-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    70%, 71% {
        -webkit-transform: translate3d(0, 125%, 0);
        transform: translate3d(0, 125%, 0);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        color: transparent;
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
    }
}

@keyframes anim-chisato-1 {
    0%, 70% {
        -webkit-transform: translate3d(0, 3em, 0);
        transform: translate3d(0, 3em, 0);
    }
    71%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-chisato-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    70%, 71% {
        -webkit-transform: translate3d(0, 125%, 0);
        transform: translate3d(0, 125%, 0);
        opacity: 0;
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        color: transparent;
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
    }
}

/* overlay-*****************************************************************************************************************************/

.overlay {
    background: rgba(238, 238, 238, 0.95);
    left: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    transition: margin 300ms;
    width: 100%;
    z-index: 40;
}

/* nav-*****************************************************************************************************************************/

section.column-left .overlay-menu-navs {
    margin-left: -100%;
}

section.column-left .overlay-menu-navs.active {
    margin-left: 0;
}

@media (min-width: 48em) {
    section.column-left .overlay-menu-navs {
        margin-top: -100%;
        margin-left: 0;
    }

    section.column-left .overlay-menu-navs.active {
        margin-top: 0
    }
}

/* settings-*****************************************************************************************************************************/

.overlay-settings input[type=radio], .overlay-settings input[type=checkbox] {
    display: none;
}

.overlay-settings {
    margin-left: -100%;
}

.overlay-settings.active {
    margin-left: 0;
}

@media (min-width: 48em) {
    .overlay-settings {
        margin-top: -100%;
        margin-left: 0;
    }

    .overlay-settings.active {
        margin-top: 0;
    }
}

.overlay-settings .settings {
    padding: 0;
    width: 100%;
}

.overlay-settings .settings tr {
    border-color: #fff;
    border-style: solid;
    border-width: 1px 0;
}

.overlay-settings .settings td {
    border-width: 0 1px 1px 0;
    padding: 20px;
}

.overlay-settings .settings td:last-child {
    border-width: 0 0 1px;
}

.overlay-settings .settings {
    margin-bottom: 20px;
}

.overlay-settings .settings:last-child {
    margin-bottom: 0;
}

.theme-switcher {
    margin-bottom: 0;
    padding-bottom: 10px;
}

.theme-switcher:last-child {
    padding-bottom: 0;
}

/*设置图标*/
aside.column-center button.overlay-settings-icon {
    height: 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: all 0.2s ease-in-out;
    width: 20px;
    z-index: 50;
}

aside.column-center button.overlay-settings-icon.animate-on-click {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

/* 分类导航 */
.og-close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.og-close::before, .og-close::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    height: 1px;
    background: #888;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.og-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.setting-form-label {
    cursor: pointer;
    display: inline-block;
    padding-left: 25px;
    position: relative;
}

.setting-form-label:before {
    background-color: #fff;
    border: 1px solid #888;
    bottom: -1px;
    content: '';
    display: inline-block;
    height: 20px;
    left: 0;
    margin-right: 10px;
    position: absolute;
    width: 20px;
}

.setting-form-radio-label:before {
    border-radius: 10px;
}

input[type=radio]:checked + label:before, input[type=checkbox]:checked + label:before {
    color: #888;
    text-align: center;
}

input[type=checkbox]:checked + label:before {
    content: '\2714';
    font-size: 15px;
    line-height: 20px;
}

input[type=radio]:checked + label:before {
    content: '\2022';
    font-size: 30px;
    line-height: 20px;
}

/* pages-*****************************************************************************************************************************/

.navigation-bottom {
    margin: 0 0 10px;
    padding: 0 0 0 10px;
}

.navigation-bottom a {
    margin: 0 7px 0 0;
    color: #444;
}

/* relates-*****************************************************************************************************************************/
.related_posts_wrapper {
    border-color: #fff;
    border-style: solid;
    border-width: 3px 0;
    padding: 10px;
}

.related_posts_ls {
    padding-bottom: 0;
}

.related_posts_ls > li ol li:before {
    font-size: 18px;
    color: #444;
    content: counter(li);
    counter-increment: li;
    font-family: sans-serif;
    font-weight: bold;
    left: -20px;
    position: absolute;
    top: -3px;
}

.related_posts_ls > li {
    margin: 0 0 5px;
    position: relative;
}

.related_posts_ls > li:last-child {
    margin-bottom: 0;
}

.related_posts_ls > li ul {
    font-family: sans-serif;
    margin-bottom: 0;
    /*margin-left: 20px;*/
    margin-top: 4px;
    padding-bottom: 0;
    position: relative;
}

.related_posts_ls > li ul li {
    position: relative;
}

.related_posts_ls > li ol {
    margin-bottom: 0;
    padding-bottom: 0;
}

.related_posts_ls > li ol li:before {
    font-size: 15px;
    top: 1px;
}

.related_posts_ls a {
    cursor: pointer;
    color: #ff2e88;
    text-decoration: none;
    border-bottom: 1px solid #ff2e88;
}

.related_posts_ls a:hover {
    background-color: #ff2e88;
    color: #fff;
}

/* comments-*****************************************************************************************************************************/

.column-left .comments-wrapper {
    padding: 10px;
}

.column-left .comments-wrapper pre {
    margin: 0;
}

.column-left .comments-wrapper pre code {
    font-size: 82%;
    margin: 13.33px;
}

.column-left .comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.column-left .comments h1 {
    border-bottom: 2px solid #444;
    font-weight: normal;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.column-left .comment-body h1, .column-left .comment-body h2, .column-left .comment-body h3 {
    border: 0;
    padding-bottom: 0;
}

.column-left .comment-body h1, .column-left .comment-body h2 {
    font-weight: bold;
}

.column-left .comment-body > p.comment-content {
    padding-bottom: 10px;
    text-indent: 2em;
    word-wrap: break-word;
}

.column-left .comment-body ol > li:before {
    font-size: 18px;
    line-height: 1.7;
}

.column-left .comment-body ul > li ol li:before {
    font-size: 18px;
    color: #444;
    content: counter(li);
    counter-increment: li;
    font-family: sans-serif;
    font-weight: bold;
    left: -20px;
    position: absolute;
    top: -3px;
}

.column-left .comment-body ul > li {
    margin: 0 0 5px;
    position: relative;
}

.column-left .comment-body ul > li:last-child {
    margin-bottom: 0;
}

.column-left .comment-body ul > li ul {
    font-family: sans-serif;
    margin-bottom: 0;
    /*margin-left: 20px;*/
    margin-top: 4px;
    padding-bottom: 0;
    position: relative;
}

.column-left .comment-body ul > li ul li {
    position: relative;
}

.column-left .comment-body ul > li ol {
    margin-bottom: 0;
    padding-bottom: 0;
}

.column-left .comment-body ul > li ol li:before {
    font-size: 15px;
    top: 1px;
}

.column-left .comment-respond {
    border: 1px white dashed;
    padding: 10px;
}

.column-left .comment-respond-label {
    /*display: inline-block;*/
    /*width: 80px;*/
    /*text-align: right;*/
    /*height: auto;*/
}

.column-left .comment-respond-wrap {
    margin: 0 0 1px;
    overflow: hidden;
}

/*.column-left .comment-respond input, .column-left .comment-respond textarea {
    background: #9ff;
    border: 2px solid #3fc;
    border-radius: 0;
    !*display: block;*!
    !*float: left;*!
    padding: 16px;
    !*width: 100%;*!
}

@media (min-width: 50em) {
    .column-left .comment-respond input {
        width: 60%;
    }
}

@media (min-width: 64em) {
    .column-left .comment-respond input {
        width: 40%;
    }
}

.column-left .comment-respond input:hover, .column-left .comment-respond textarea:hover, .column-left .comment-respond input:focus, .column-left .comment-respond textarea:focus {
    border: 2px solid #444;
}*/

input, textarea, select {
    margin: 0;
    outline: 0;
}

input[type="text"], input[type="email"], input[type="url"], input[type="phone"], textarea {
    -webkit-appearance: none;
    -webkit-focus-ring-color: none;
}

input[type="button"], input[type="radio"], input[type="checkbox"], label, button, select:hover {
    cursor: pointer;
}

input.placeholder, textarea.placeholder {
    color: #aaa;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #aaa;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: #aaa;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
}

.button, input[type="submit"], button[type="submit"] {
    background-color: #fff;
    border: 1px solid #d50000;
    cursor: pointer;
    padding: 8px 10px;
    text-shadow: #fff 1px 1px;
}

/*.button-large {
    padding: 10px 20px !important;
}*/

.button:hover {
    background-color: #eee;
    border: 1px solid #555;
}

/* 右侧设置按钮样式 */
button, input[type="button"], input[type="submit"], input[type="reset"] {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0;
    width: auto;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
    padding: 0;
    border: 0
}

/* articles-*****************************************************************************************************************************/

.archives-list {
    /*margin-bottom: 20px;*/
}

.archives-list tr {
    display: block;
    line-height: 1.5;
    margin: 0 0 5px;
    vertical-align: top;
}

.archives-list tr .time {
    padding: 0 10px 0 0;
}

.container article p {
    /*max-width: 650px;*/
}

.column-left article ol, .column-left article ul {
    font-size: 15px;
    /*max-width: 620px;*/
}

article ul > li ol li:before {
    font-size: 18px;
    color: #444;
    content: counter(li);
    counter-increment: li;
    font-family: sans-serif;
    font-weight: bold;
    left: -20px;
    position: absolute;
    top: -3px;
}

article ul > li {
    margin: 0 0 5px;
    position: relative;
}

article ul > li:last-child {
    margin-bottom: 0;
}

article ul > li ul {
    font-family: sans-serif;
    margin-bottom: 0;
    /*margin-left: 20px;*/
    margin-top: 4px;
    padding-bottom: 0;
    position: relative;
}

article ul > li ul li {
    position: relative;
}

article ul > li ol {
    margin-bottom: 0;
    padding-bottom: 0;
}

article ul > li ol li:before {
    font-size: 15px;
    top: 1px;
}

article ul {
    /*margin-bottom: 15px;*/
}

.main {
    padding-bottom: 0;
}

@media (min-width: 105em) {
    .main {
        width: 1680px;
    }
}

/* toc-*****************************************************************************************************************************/

.toc-nav {
    margin-bottom: 20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px;
    transition: background-color 600ms linear
}

.toc-nav ul {
    padding-bottom: 0;
}

/*sticky-*/
.sticky.toc-nav {
    background: #2fc7c7;
    display: none;
    position: fixed;
    top: 0;
    z-index: 30;
}

@media (min-width: 50em) {
    .sticky.toc-nav {
        width: 33.33%;
        display: block;
    }
}

@media (min-width: 90em) {
    .sticky.toc-nav {
        width: calc(30% - 40px);
    }
}

/* Subscribe 全屏展示 */
@media (max-width: 60em) {
    /* 隐藏 toc */
    .toc-wrapper {
        display: none;
    }
}

/*toc*/
.h-anchor {
    font-size: 18px;
    font-family: Anchor, serif;
    line-height: 1;
    margin-left: 5px;
}

.h-anchor:hover {
    color: #f00;
}

.h-anchor:after {
    content: '\e002';
    display: none;
}

h2:hover .h-anchor:after, h3:hover .h-anchor:after {
    display: inline;
}

/* 其它页面组件设计-*****************************************************************************************************************************/

.reading-list-more {
    margin-left: 20px;
}

.reading-list li p {
    display: inline;
    margin: 0;
}

.footer-list {
    /*margin: 0 20px;*/
    padding: 20px;
}

/*警告注释*/
.note {
    background: LightYellow;
    border: 1px solid #e5e600;
    border-radius: 1px;
    font-family: sans-serif;
    margin: 0 0 10px;
    /*max-width: 650px;*/
    padding: 10px;
}

/*页底栏*/
.mate-note {
    background-color: #444;
    padding: 10px;
}

.mate-note p {
    color: #fff;
    padding: 0;
}

.mate-note a {
    color: #fff;
}

.mate-note svg {
    float: left;
    height: 70px;
    margin-right: 20px;
    position: relative;
    width: 70px;
}

.ls-none {
    list-style: none;
}

/*Tables*****************************************************************************************************************************/
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

/*column-header-**************************************************************************************************************/
.column-header {
    height: 160px;
    margin: 0 0 20px;
    /*padding-top: 20px;*/
    position: relative;
}

.column-header h1 {
    line-height: 1;
    padding-bottom: 0;
}

.column-header-h1, .navigation {
    margin-top: -10px;
    margin-bottom: 8px;
    padding-left: 20px;
    /*padding-top: 20px;*/
    display: inline-block;
}

/* 自定义小屏响应式布局 */
@media (max-width: 60em) {
    .column-header {
        height: 180px;
    }

    .column-header-h1, .navigation {
        margin-top: 20px;
    }
}

/* 自定义大屏响应式布局 */
/*@media (min-width: 90em) {
    .column-header {
        height: 160px;
    }

    .column-header-h1, .navigation {
        margin-top: -10px;
    }
}*/

.content > article {
    padding: 0 10px;
}

.content > article h1 {
    font-size: 20px;
    /*padding: 0;*/
}

article.content-about ol, article.content-about ul,
article.content-index ol, article.content-index ul,
article.content-note ol, article.content-note ul,
article.content-post ol, article.content-post ul {
    /*margin-top: 10px;*/
    margin-bottom: 10px;
    padding-left: 0;
}

article.content-about ol,
article.content-index ol,
article.content-note ol,
article.content-post ol {
    counter-reset: a;
}

article.content-about li,
article.content-index li,
article.content-note li,
article.content-post li {
    position: relative;
    display: block;
    padding-left: 10px;
}

article.content-about ul > li:after,
article.content-index ul > li:after,
article.content-note ul > li:after,
article.content-post ul > li:after {
    font-family: sans-serif;
    position: absolute;
    top: -1px;
    left: -3px;
    content: "-";
    color: white;
    font-weight: bold;
}

article.content-about ol > li:before,
article.content-index ol > li:before,
article.content-note ol > li:before,
article.content-post ol > li:before {
    content: counter(a) ".";
    counter-increment: a;
}

article.content-about ol li:nth-child(n+10):after,
article.content-index ol li:nth-child(n+10):after,
article.content-note ol li:nth-child(n+10):after,
article.content-post ol li:nth-child(n+10):after {
    left: -7px;
}

article.content-about a,
article.content-index a,
article.content-notes a,
article.content-note a,
article.content-posts a,
article.content-post a {
    cursor: pointer;
    color: #ff2e88;
    text-decoration: none;
    border-bottom: 1px solid #ff2e88;
}

article.content-about a:hover,
article.content-index a:hover,
article.content-notes a:hover,
article.content-note a:hover,
article.content-posts a:hover,
article.content-post a:hover {
    background-color: #ff2e88;
    color: #fff;
}

article.content-posts > h2,
article.content-notes > h2 {
    margin-bottom: 5px;
}

article.content-posts > p.posts-summary,
article.content-notes > p.notes-summary {
    word-wrap: break-word;
    font-size: 0.6em;
    padding-bottom: 2px;
    text-indent: 2em;
}

article.content-posts > p.posts-details,
article.content-notes > p.notes-details {
    padding-bottom: 0;
}

article.content-posts > p.posts-details i,
article.content-notes > p.notes-details i {
    color: gray;
    font-size: 0.8em;
}

article.content-posts > p.posts-details a.more,
article.content-notes > p.notes-details a.more {
    float: right;
    margin-top: 8px;
    display: inline;
    font-size: 0.6em;
    line-height: 1.2em;
}

article.content-posts,
article.content-notes,
article.content-archives {
    border-top: 1px white dashed;
    border-bottom: 1px white dashed;
    margin-top: -1px;
    padding: 10px;
}

article.content-posts,
article.content-notes {
    padding-bottom: 2px;
}

article.content-about table,
article.content-index table,
article.content-note table,
article.content-post table {
    margin-bottom: 10px;
}

article.content-about table td, article.content-about table th, article.content-about table tr,
article.content-index table td, article.content-index table th, article.content-index table tr,
article.content-note table td, article.content-note table th, article.content-note table tr,
article.content-post table td, article.content-post table th, article.content-post table tr {
    border-color: #fff;
    border-style: solid;
    border-width: 1px;
    padding: 8px;
}

article.content-about table th,
article.content-index table th,
article.content-note table th,
article.content-post table th {
    background: rgba(255, 255, 255, 0.4);
}

article.content-about > p,
article.content-index > p {
    text-indent: 2em;
}

article.content-post > hr,
article.content-note > hr {
    border: none;
    height: 1px;
    background-color: white;
}

/*column-left-**************************************************************************************************************/
.column-left .content article h2, .column-left .content article h3, .column-left .content article h4 {
    border-bottom: 0;
    border-color: #444;
    border-style: solid;
    margin-bottom: 10px;
    margin-left: -10px;
    padding-bottom: 0;
}

.column-left .content article h2 {
    font-weight: bold;
    border-width: 0 0 0 4px;
    padding-left: 10px;
}

.column-left .content article h3 {
    font-size: 19px;
    border-width: 0 0 0 3px;
    padding-left: 10px;
}

.column-left .content article h4 {
    font-size: 19px;
    border-width: 0 0 0 2px;
    padding-left: 10px;
}

@media (min-width: 50em) {
    .column-left {
        border-width: 0 10px 0 0;
        width: 70%;
    }
}

@media (min-width: 64em) {
    .column-left {
        width: 38%;
    }
}

@media (min-width: 90em) {
    .column-left {
        width: 33.33%;
    }
}

.container .column-left {
    width: 100%;
}

@media (min-width: 48em) {
    .container .column-left {
        border-width: 0;
    }
}

@media (min-width: 50em) {
    .container .column-left {
        border-width: 0;
        width: 66.66%;
    }
}

@media (min-width: 90em) {
    .container .column-left {
        width: 60%;
    }
}

/*column-center-**************************************************************************************************************/
.column-center {
    padding-left: 20px;
    padding-right: 20px;
}

.column-center {
    margin-top: 20px;
    padding-top: 20px;
    word-wrap: break-word;
}

.column-center {
    position: relative;
}

@media (min-width: 50em) {
    .column-center {
        margin-top: 0;
        border-width: 0 10px;
        width: 30%;
    }
}

@media (min-width: 64em) {
    .column-center {
        width: 38%;
    }
}

@media (min-width: 90em) {
    .column-center {
        width: 33.33%;
    }
}

/* Subscribe 全屏展示 */
@media (max-width: 60em) {
    .column-center {
        width: 100%;
    }
}

@media (min-width: 50em) {
    .container .column-center {
        border-width: 0 0 0 20px;
        width: 33.33%;
    }
}

@media (min-width: 90em) {
    .container .column-center {
        border-width: 0 20px;
        width: 30%;
    }
}

/*column-right-**************************************************************************************************************/
.column-right {
    padding-left: 20px;
    padding-right: 20px;
}

.container .column-right h2 {
    border-width: 5px;
    display: none;
}

.column-right {
    display: none;
    padding-top: 20px;
}

@media (min-width: 64em) {
    .column-right {
        border-width: 0 0 0 10px;
        display: block;
        width: 24%;
    }
}

@media (min-width: 90em) {
    .column-right {
        width: 33.33%;
    }
}

.container .column-right {
    display: none;
    width: 10%;
}

@media (min-width: 90em) {
    .container .column-right {
        border-width: 0;
        display: block;
    }
}

/*theme-ul-**************************************************************************************************************/
.theme-ul > li ol li:before, ol > li:before {
    font-size: 15px;
    color: #444;
    content: counter(li);
    counter-increment: li;
    font-family: sans-serif;
    font-weight: bold;
    left: -5px;
    position: absolute;
    /*top: -3px;*/
}

ul.theme-ul > li:before, ul.theme-ul > li ul li:before {
    font-family: sans-serif;
    position: absolute;
    top: -1px;
    left: -3px;
    content: "-";
    color: white;
    font-weight: bold;
}

.theme-ul > li, ul.theme-ul > li ul li {
    position: relative;
    display: block;
    padding-left: 10px;
}

/*ul.theme-ul > li {
    position: relative;
    display: block;
    padding-left: 20px;
}

.theme-ul > li {
    margin: 0 0 5px;
    position: relative;
}

.theme-ul > li:last-child {
    margin-bottom: 0;
}

.theme-ul > li ul {
    font-family: sans-serif;
    margin-bottom: 0;
    !*margin-left: 20px;*!
    margin-top: 4px;
    padding-bottom: 0;
    position: relative;
}
.theme-ul > li ul li {
    position: relative;
}

.theme-ul > li ol {
    margin-bottom: 0;
    padding-bottom: 0;
}

.theme-ul > li ol li:before {
    font-size: 15px;
    top: 1px;
}*/

/*-**************************************************************************************************************/

time {
    font-size: 12px;
    color: #888;
    font-family: Monaco, 'Andale Mono', 'Courier New', 'Courier', monospace;
    line-height: 1;
}

/* 通用元素 */
ol, ul {
    line-height: 1.6;
    list-style: none;
    margin: 0;
}

ol img, ul img {
    margin: 15px 0 10px;
}

ol {
    counter-reset: li;
}

ol > li {
    margin-bottom: 3px;
    position: relative;
}

ol > li:last-child {
    margin-bottom: 0;
}

ol > li ul, ol > li ol {
    font-size: 13px;
    font-family: sans-serif;
    margin-bottom: 0;
    margin-top: 4px;
    padding-bottom: 0;
}

img {
    margin-bottom: 20px;
    max-width: 100%;
}

p img {
    margin-bottom: 0;
}

a img {
    border: 0;
}

a img.attachment-thumbnail {
    float: left;
}

a img.attachment-thumbnail:hover {
    opacity: 0.4;
}

figure {
    margin: 0;
}

/*代码样式-**********************************************************************************************************************************************/

pre {
    background-color: #e4ffff;
    direction: ltr;
    line-height: 1.6;
    margin: 0 -10px 10px;
    max-height: 600px;
    overflow: auto;
    padding-bottom: 0;
    position: relative;
    transition: background-color 300ms;
    white-space: pre;
}

pre::-webkit-scrollbar {
    background: #fff;
    width: 4px;
}

pre::-webkit-scrollbar:horizontal {
    height: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: #444;
}

pre:hover {
    background-color: #fff;
    transition: background-color 300ms;
}

pre:after {
    font-size: 11px;
    content: attr(data-language);
    position: absolute;
    right: 10px;
    top: 5px;
}

/* 代码块注释 */
p.pc-header {
    padding: 4px 8px;
    background-color: #E91E63;
    opacity: 0.8;
    color: white;
    font-weight: bold;
    font-size: 1em;
    border-bottom: 1px white dashed;
    margin: 0 -10px;
}

/*靠左对齐*/
p.pc-header.pc-left {
    text-align: left;
}

/*靠右对齐*/
p.pc-header.pc-right {
    text-align: right;
}

p.pc-header a {
    color: white;
}

p.pc-header a:hover {
    background-color: transparent;
}

pre > code {
    background: transparent;
    display: block;
    margin: 10px;
    white-space: pre;
}

code {
    background: rgba(255, 255, 255, 0.5);
    font-family: Monaco, 'Andale Mono', 'Courier New', 'Courier', monospace;
    font-size: 90%;
    padding: 0 2px;
}

/* theme-******************************************************************************************************************* */

/* theme-common */
.column {
    border-color: #fff;
    border-style: solid;
}

.column {
    float: left;
}

/* theme-0 */
.theme-0 .column {
    background: #3fc;
}

.theme-0 .toc-nav {
    background: #9ff;
}

/* theme-1 */
.theme-1 .column {
    background: #3fc;
}

.theme-1 .toc-nav {
    background: #9ff
}

.theme-1 pre {
    background: #e4ffff
}

.theme-1 pre:hover {
    background: #fff
}

.theme-1 .column-left .comment-respond textarea, .theme-1 .column-left .comment-respond input {
    /*background: #9ff;*/
    /*border-color: #e4ffff*/
}

/* theme-2 */
.theme-2 .column {
    background: #ddd
}

.theme-2 .toc-nav {
    background: #cbcbcb
}

.theme-2 pre {
    background: #eee
}

.theme-2 pre:hover {
    background: #fff
}

.theme-2 .column-left .comment-respond textarea, .theme-2 .column-left .comment-respond input {
    /*background: #aaa;*/
    /*border-color: #aaa*/
}

/* theme-3 */
.theme-3 .column {
    background: #ffd2d6
}

.theme-3 .toc-nav {
    background: #ffb8bf
}

.theme-3 pre {
    background: #fff6f7
}

.theme-3 pre:hover {
    background: #fff
}

.theme-3 .column-left .comment-respond textarea, .theme-3 .column-left .comment-respond input {
    /*background: #ffb8bf;*/
    /*border-color: #ffd2d6*/
}

/* ended-******************************************************************************************************************* */