/*****************************/
/* element */
/*****************************/
body {
    line-height: 1.7;
    font-size: 16px;
    color: #404040;
    overflow-x: hidden;
    font-family: -apple-system,  "PingFang SC","Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

a,
a:hover,
a:focus,
a:active {
    color: #ff7e79;
}
a, a:hover{
    text-decoration: none;
}

/* responsive image */
.img-responsive-center {
    max-width: 100%;
    height: auto;
    margin: auto;
}

blockquote {
    color: #808080;
    font-size: 0.95em;
    margin: 20px 0 20px;
    border-color: #ff7e79;
}

blockquote p {
    margin: 0;
}

@media screen and (max-width: 768px) {
    select {
        -webkit-appearance: none;
        margin-top: 15px;
        color: #337ab7;
        border-color: #337ab7;
        padding: 0 0.4em;
        background: white;
    }
}

hr.small {
    max-width: 100px;
    margin: 15px auto;
    border:4px white;
}

pre,
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

pre code {
    display: block;
    width: auto;
    white-space: pre;
    word-wrap: normal;
}

hr{
    margin:0;
}

td {
  border: 1px solid #eee;
}
th {
  font-weight: bolder;
  font-size: 1.2em;
  border: 1px solid #eee;
}

::-moz-selection {
    color: white;
    text-shadow: none;
    background: #ff7e79;
}

::selection {
    color: white;
    text-shadow: none;
    background: #ff7e79;
}

img::selection {
    color: white;
    background: transparent;
}

img::-moz-selection {
    color: white;
    background: transparent;
}

fieldset {
  border: 1px solid black;
  padding: 0 10px 10px 20px;
}
legend {
  width: auto;
  border: none;
}

/*****************************/
/* navigation */
/*****************************/
@media only screen and (max-width: 767px) {
    .navbar-default .navbar-collapse {
        border: none;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px;
        border-radius: 2px;
        width: 170px;
        float: right;
        margin: 0;
    }

    #website_navbar a {
        font-size: 13px;
        line-height: 28px;
        color: black;
    }

    #website_navbar .navbar-collapse {
        height: 0;
        transform: scaleY(0);
        transform-origin: top right;
        transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #website_navbar li {
        opacity: 1;
        transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
    }

    #website_navbar.in {
        transform: scaleX(1);
        opacity: 1;
    }

    #website_navbar.in .navbar-collapse {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }

    #website_navbar.in li {
        opacity: 1;
    }
}

.header-navbar{
  background-color: transparent;
  box-shadow: 0 0 10px rgba(14, 14, 14, .26);
  height: 55px;
  border: none;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  transition: background 1s;
  line-height: 1.7;
}

.header-navbar .brand-logo {
    font-family: cursive, -apple-system,  "PingFang SC","Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    display: fixed;
    color: red;
    margin-top: 5px;
    padding-left: 5px;
    font-size: 55px;
}

.header-navbar .nav li a {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgba(0,0,0,.1);
}

.header-navbar .navbar-right a {
    color: black;
}

.header-navbar .navbar-toggle span {
    background: black;
}

.header-navbar .nav li a:hover {
  background-color: transparent;
}

@media only screen and (min-width: 768px) {
    .header-navbar {
        background: transparent;
        border-bottom: 1px solid transparent;
    }
    .header-navbar body {
        font-size: 20px;
    }
    .header-navbar .navbar-brand {
        padding: 20px;
        line-height: 17px;
    }

    .header-navbar .nav li
    .header-navbar .nav li a {
        color: black;
        padding: 20px;
    }

    .header-navbar .nav li a:hover,
    .header-navbar .nav li a:focus {
        color: red;
        background-color: white;
    }
}

@media only screen and (min-width: 1170px) {
    .navbar-custom {
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
    }
    .header-navbar .nav li a,
    .header-navbar .navbar-brand {
        color: #404040;
    }

    .header-navbar .nav li a:hover,
    .header-navbar .nav li a:focus,
    .header-navbar .navbar-brand:hover,
    .header-navbar .navbar-brand:focus {
        color: #ff7e79;
    }
}

/*****************************/
/* header */
/*****************************/
.intro-header {
    background-position: center;
    background-repeat: no-repeat;
    background-color: #808080;
    background-attachment: scroll;
    background-size: cover;
    height: 300px;
    display: table;
    width: 100%;
    margin-bottom: 20px;
}

.intro-header>.container{
    display: table-cell;
    vertical-align: middle;
    padding: 55px 15px 15px;
}


.intro-header .site-heading{
    color: #fff;
}

.intro-header .site-heading h1 {
    text-shadow: 0 0 40px black;
}

.intro-header .site-heading .subheading{
    font-size: 18px;
    line-height: 1.1;
    display: block;
    font-weight: 300;
    margin: 10px 0 0;
}

.intro-header .display-mid{
    display: table-cell;
    vertical-align: middle;
}

.intro-header .post-heading h1 {
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 24px;
    text-align: center;
}


.intro-header .post-heading .subheading {
    font-size: 30px;
    line-height: 1.4;
    margin-bottom: 0;
    text-shadow: 0 0 40px black;
}

.intro-header .post-heading .meta {
    font-weight: 300;
    font-size: 14px;
    color: #eee;
}

.meta-item {
  margin: 20px;
}

@media only screen and (min-width: 768px) {
    .intro-header .post-heading h1,
    .intro-header .post-heading .subheading{
        font-weight: 300;
    }
    .intro-header .post-heading h1 {
        margin-top: 0;
        font-size: 36px;
    }

    .intro-header .post-heading .subheading {
        font-size: 26px;
        margin:0;
    }

    .intro-header .post-heading .meta {
        font-size: 16px;
    }

    .intro-header {
        height: 370px;
    }
}

/*****************************/
/* subtitle */
/*****************************/
.index-subtitle{
    color: white;
    margin: 10px 0;
}

.post-subtitle {
    text-align: center;
    font-size: 14px;
    padding: 10px;
    font-style: italic;
    margin: 0;
    display: block;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}


footer {
    font-size: 20px;
    padding: 50px 0 65px;
}

footer .copyright {
    font-size: 14px;
    margin-top: 12px;
}

/*****************************/
/* pager */
/*****************************/
.pager {
    margin: 20px 0 0;
    padding: 0;
}

.pager li > a,
.pager li > span {
    font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 10px;
    background-color: white;
    border-radius: 0;
}

@media only screen and (min-width: 768px) {
    .pager li > a,
    .pager li > span {
        font-size: 14px;
        padding: 15px 25px;
    }
}

.pager li > a {
    color: #404040;
}

.pager li > a:hover,
.pager li > a:focus {
    color: white;
    background-color: #ff7e79;
    border: 1px solid #ff7e79;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
    color: #808080;
    background-color: #404040;
    cursor: not-allowed;
}

#ds-smilies-tooltip ul.ds-smilies-tabs li a {
    background: white !important;
}
/*****************************/
/* tags */
/*****************************/
.tags {
    text-align: center;
    margin-top: 20px;
}

.tags a,
.tags .tag {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 0 10px;
    color: #ffffff;
    line-height: 24px;
    font-size: 12px;
    margin: 0 1px;
    margin-bottom: 6px;
}

.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
    color: white;
    border-color: white;
    background-color: rgba(255, 255, 255, 0.4);
}

@media only screen and (min-width: 768px) {
    .tags a,
    .tags .tag {
        margin-right: 5px;
    }
}

/*****************************/
/* tag cloud */
/*****************************/
#tag_cloud {
    margin: 20px 0 15px 0;
}

#tag_cloud a,
#tag_cloud .tag {
    font-size: 14px;
    color: #ffffff;
    background: #D6D6D6;
    display: inline-block;
    border: none;
    border-radius: 4px;
    line-height: 28px;
    padding: 0 10px;
    margin: 0 2px;
    margin-bottom: 8px;
}

#tag_cloud a:hover,
#tag_cloud .tag:hover,
#tag_cloud a:active,
#tag_cloud .tag:active {
    color: white;
    background-color: #ff7e79 !important;
}

@media only screen and (min-width: 768px) {
    #tag_cloud {
        margin-bottom: 25px;
    }
}

/* tag post listing */
.tag-icon {
    color: #ff7e79;
    font-size: 21px;
}

.tag-icon::before {
    margin-right: 5px;
}

@media only screen and (min-width: 768px) {
    .tag-icon {
        font-size: 20px !important;
        line-height: 2 !important;
    }
}

.one-tag-list {
  padding-top: 10px;
}
.one-tag-list .tag-text {
    font-size: 18px;
    font-weight: 500;
    font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.6;
}

.one-tag-list .post-preview {
    padding: 5px 0;
    font-size: 14px;
}

.one-tag-list .post-preview > a .tag-post-title {
    font-size: 16px;
    margin: 5px 0;
    line-height: 1.3;
}

.one-tag-list .post-preview > a .tag-post-subtitle {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    padding: 5px 0 0 5;
}

@media only screen and (min-width: 768px) {
    .tag-icon {
        font-size: 20px !important;
        line-height: 2 !important;
    }
}

@media only screen and (min-width: 768px) {
    .one-tag-list .post-preview {
        margin-left: 20px;
    }

    .one-tag-list .post-preview > a > .post-title {
        font-size: 18px;
        line-height: 1.3;
    }

    .one-tag-list .post-preview > a > .post-subtitle {
        font-size: 15px;
    }

	.one-archive-list .post-preview {
		margin-left: 40px;
	}

	.archive-month {
		margin-left: 20px;
	}
}


/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: inherit;
}

.navbar-default .navbar-toggle:active {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Hux customize Style for navBar button */
.navbar-default .navbar-toggle {
    border-color: transparent;
    padding: 19px 16px;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 50%;
}

.navbar-default .navbar-toggle .icon-bar {
    width: 18px;
    background-color: black;
}

.navbar-default .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 3px;
}

.page-fullscreen .intro-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.page-fullscreen #tag-heading {
    position: fixed;
    left: 0;
    top: 0;
    padding-bottom: 150px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page-fullscreen footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-bottom: 20px;
    opacity: 0.6;
    color: #fff;
}

.page-fullscreen footer .copyright {
    color: #fff;
}

.page-fullscreen footer .copyright a {
    color: #fff;
}

.page-fullscreen footer .copyright a:hover {
    color: #ddd;
}

.intro-header .site-heading .subheading {
    margin-top: 15px;
}

.sidebar-container .short-about {
    text-align: center;
}

@media (min-width: 1200px) {
    .sidebar-container {
        padding-right: 5%;
    }
}

@media screen and (max-width: 768px) {
    .intro-header .post-heading .subheading {
        font-size: 19px;
    }

    .intro-header .post-heading .meta {
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) {
    .navbar .container-fluid {
        padding: 0 5%;
    }

}

.container .toc-col {
    padding: 0;
}

.container .toc-wrap {
    margin-top: 30px;
    list-style: none;
    color: darkgrey;
    border-left: #eee 3px solid;
    padding-left: 12px;
}

.container .toc-wrap > ol {
    list-style: none;
    padding-left: 20px;
}

.container .toc-wrap li > ol {
    padding-left: 8px;
    list-style: none;
}

.container .toc-wrap .toc-level-2 > a {
    color: #ff7e79;
    font-size: .9em;
}

.container .toc-wrap li ol a {
    color: #555;
    font-size: .85em;
    padding-left: 5px;
}

.container .toc-wrap.toc-fixed {
    position: fixed;
    top: 85px;
    margin-top: 0;
    max-height: 81%;
    overflow: auto;
    z-index:1;
    background-color: #fff;
}

.post-preview > a > .post-title{
    margin-bottom: 0;
    font-weight: 200;
    text-shadow: 0 0 1px rgba(0,0,0,.15);
}
@media screen and (max-width: 500px) {
    .post-title-fixed span{
        display: none;
        top:57px;
    }
    .post-preview > a > .post-title{
        font-weight: normal;
    }
}
.site-heading .about-me img{
    width: 120px;height: 120px;
    border-radius: 50%;
    opacity: .9;
}
.site-heading h5 a{
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 400;
}
.site-heading p {
    margin: 0;
    color: #eee;
    font-size: 15px;
}

/*****************************/
/*Home*/
/*****************************/
@media (min-width: 992px) {
    .homepage {
        padding-top: 90px;
    }
}
.homepage .post-preview:nth-of-type(1),
.homepage .post-preview-poetry:nth-of-type(1) {
    text-align: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-size: cover;
    padding: 0;
    height: 300px;
    display: table;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.16);
}

.homepage .post-preview-poetry:nth-of-type(1) {
    background-image: none !important;
    background-color: rgba(255, 248, 220, 0.5);
}

.homepage .post-preview:nth-child(1) h2,
.homepage .post-preview:nth-child(1) .post-meta,
.homepage .post-preview:nth-child(1) .post-subtitle {
    text-shadow: 0 0 40px rgba(0, 0, 0, 1);
    letter-spacing: 1px;
    color: #fff;
    margin-top: 0;
    padding-left: 60px;
    padding-right: 60px;
}

.homepage .post-preview:nth-child(1) .post-meta {
    font-size: .9em;
    font-weight: 300;
    margin-top: 0;
}

.homepage .post-preview-poetry:nth-child(1) .post-subtitle {
    letter-spacing: 6px;
    font-size: 18px;
    font-family: unset;
    font-weight: 400;
    color: rgba(0, 0, 0, .75)
}

/* not show excerpts*/
.homepage .post-preview:nth-child(1) .post-content-preview {
    display: none
}

/* show the first image as background*/
.homepage .post-preview:not(:nth-child(1)) {
    background-image: none !important;
}

.homepage hr:nth-of-type(1) {
    display: none;
}

.homepage .post-preview:nth-of-type(1) > a {
    display: table-cell;
    vertical-align: middle;
}

/* poetry title */
.homepage .post-preview-poetry:nth-child(1) h2 {
    font-size: 35px;
    font-family: STKaiti;
    color: rgba(0, 0, 0, .8);
}

.homepage .post-preview-poetry:nth-of-type(1) .post-meta {
    color: #0e2231;
}

@media (max-width: 768px) {
    .homepage .post-preview:nth-child(1) {
        height: 240px;
    }

    .homepage .post-preview-poetry:nth-child(1) h2 {
        font-size: 28px !important;
        margin-top: 0;
    }

    .homepage .post-preview:nth-child(1) .post-subtitle {
        font-size: 18px;
        font-weight: 400;
        padding-left: 0;
        padding-right: 0;
    }

    .homepage .post-preview:nth-of-type(1) > a {
        padding: 20px
    }
}

@media (max-width: 400px) {
    .homepage .post-preview:nth-child(1) {
        height: 195px;
    }

    .homepage .post-preview-poetry:nth-child(1) h2 {
        font-size: 20px !important;
    }

    .homepage .post-preview:nth-child(1) .post-subtitle {
        font-size: 16px;
    }

    .homepage .post-preview:nth-child(1) a {
        padding: 30px 20px;
    }
}

.archive {
  font-family: "Open Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;
}

.archive-year {
    margin: 20px 10px;
    font-size: 24px;
}
.archive-month {
  margin-left: 80px;
  font-size: 20px;
  color: #aaa;
}
.archive-post-time {
    margin-left: 120px;
    color: #aaa;
    font-size: 14px;
    line-height: 25px;
    float: left;
    display: block;
}
.archive-post-title {
    font-size: 16px;
    margin-left: 60px;
    line-height: 1.6;
    font-weight: normal;
    color: grey;
}
.achive-post-subtitle {
  display: block;
  font-size: 14px;
  margin-left: 223px;
  color: grey;
}

.poetry-comments {
  width: 800px;
}

/*****************************/
/*post-container */
/*****************************/

.sidebar-container {
    color: #bfbfbf;
    font-size: 14px;
    margin-top: 35px;
}

.sidebar-container h5 {
    color: #808080;
}

.sidebar-container h5 a {
    color: #808080 !important;
}

.sidebar-container a {
    color: #bfbfbf !important;
}

.sidebar-container a:hover,
.sidebar-container a:active {
    color: #ff7e79 !important;
}

.sidebar-container .tags a {
    border-color: #bfbfbf;
}

.sidebar-container .tags a:hover,
.sidebar-container .tags a:active {
    border-color: #ff7e79;
}

.sidebar-container .short-about .avatar {
    width: 100%;
    display: block;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 2px black;
}

.sidebar-container .short-about .img {
    margin-bottom: 20px;
    cursor: default;
}

.sidebar-container .short-about p {
    margin-top: 0;
    margin-bottom: 20px;
}

.sidebar-container .short-about .list-inline > li {
    padding-left: 0;
}

article .post-container {
    padding: 40px;
}
article .post-container h1,
article .post-container h2,
article .post-container h3,
article .post-container h4,
article .post-container h5,
article .post-container h6 {
    margin-top:-90px;
    padding: 100px 0 0;
}

article blockquote footer{
    padding: 5px 0px 0;
	font-size: 100%;
}

article blockquote footer:before{
	content: "";
}

article blockquote cite:before{
	content: '\2014 \00A0';
	padding: 0px 0.3em;
}

/* responsible images in the post */
.post-container img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto 1.6em auto;
}

.post-container h5 + p {
    margin-top: 5px;
}

.post-container h6 + p {
    margin-top: 5px;
}

.post-container ul,
.post-container ol {
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .post-container ul,
    .post-container ol {
        padding-left: 30px;
    }
}

@media screen and (max-width: 500px) {
    .post-container ul,
    .post-container ol {
        padding-left: 20px;
    }
}

.post-container ol ol,
.post-container ol ul,
.post-container ul ol,
.post-container ul ul {
    margin-bottom: 5px;
}

.post-container li p {
    margin: 0;
    margin-bottom: 5px;
}

.post-container li h1,
.post-container li h2,
.post-container li h3,
.post-container li h4,
.post-container li h5,
.post-container li h6 {
    line-height: 2;
    margin-top: 20px;
}

.post-preview > a {
    color: #404040;
    display: block;
    height: 100%;
}
.post-preview > a:hover,
.post-preview > a:focus {
    text-decoration: none;
    outline: none;
}

.post-preview > a > h2{transition: color .3s;}
.post-preview:not(:first-of-type) > a:hover > h2{
    color: #FC7097;
}

.post-preview > a > .post-title {
    font-size: 21px;
    line-height: 1.3;
    margin-top: 30px;
     margin-bottom:0;
}

.post-preview > a > .post-subtitle {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    margin-bottom: 10px;
    color: #555;
    font-weight: 400;
}
.post-preview .post-meta {
    color: #808080;
    font-size: 12px;
    margin:0;
    padding-left: 2px;
    margin-bottom: 15px;
}

.post-preview > .post-meta > a {
    text-decoration: none;
    color: #404040;
}

.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
    color: #ff7e79;
    text-decoration: underline;
}

@media only screen and (min-width: 768px) {
    .post-preview > a > .post-title {
        font-size: 26px;
        line-height: 1.3;
    }
    .post-preview .post-meta {
        font-size: 16px;
    }
}

.post-content-preview p {
    color: #555;
}

/*****************************/
/* comment */
/*****************************/
.comment {
    margin-top: 20px;
}

.poetry-comments {
  width: 800px;
}