/**

* default => index

*/

/**

* mixin

* @authors dkplus (dkplus@qq.com)

* @date    2017-07-22 21:30:36

* @version $1.0.0$

*/

/**

 * reset

 * @authors dkplus (dkplus@qq.com)

 * @date    2017-07-22 21:30:36

 * @version $1.0.0$

 */

article,

aside,

figure,

figcaption,

footer,

header,

main,

nav,

section,

summary {

  display: block;

}

body,

div,

dt,

dl,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

input,

form,

a,

p,

textarea {

  margin: 0;

  padding: 0;

  font-family: '\5FAE\8F6F\96C5\9ED1', consolas;

  word-wrap: break-word;

}

ol,

ul,

li {

  list-style: none;

}

a {

  text-decoration: none;

  display: block;

}

img {

  border: none;

  display: block;

}

/**

* animate

*/

#header {

  position: fixed;

  top: 0;

  zoom: 1;

  background-color: #34352C;

  border-bottom: 5px solid #5e5f4f;

  box-sizing: border-box;

  width: 100%;

  height: 60px;

  line-height: 60px;

  padding: 0 20px;

  z-index: 1;

}

#header:after {

  display: block;

  clear: both;

  content: "";

  visibility: hidden;

  height: 0;

}

@media screen and (max-width: 600px) {

  #header #navList {

    display: none;

  }

}

@media screen and (max-width: 330px) {

  #header .blogStats {

    display: none;

  }

}

#header #blogTitle {

  float: left;

}

#header #blogTitle #lnkBlogLogo {

  display: none;

}

#header #blogTitle #Header1_HeaderTitle {

  color: #fff;

}

#header #navigator {

  float: right;

}

#header #navigator > * {

  float: left;

}

#header #navigator #navList > li {

  float: left;

}

#header #navigator #navList > li > a {

  padding: 0 10px;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

  font-size: 17.6px;

}

#header #navigator #navList > li > a:link {

  color: #fff;

}

#header #navigator #navList > li > a:visited {

  color: #F5F6EB;

}

#header #navigator #navList > li > a:hover {

  background-color: #494a3e;

}

#header #navigator #navList > li > a:active {

  background-color: #C9CABB;

}

#header #navigator #blog_stats {

  float: left;

}

#header #navigator #blog_stats > * {

  color: #C9CABB;

  font-size: 11.2px;

}

#main {

  margin-top: 60px;

}

#main #mainContent #homepage_top_pager {

  display: none;

}

#main #mainContent .day {

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

  padding: 5%;

  text-align: center;

}

#main #mainContent .day:nth-of-type(even) {

  background-color: #9c9f84;

}

#main #mainContent .day:nth-of-type(odd) {

  background-color: #acaf91;

}

#main #mainContent .day:hover {

  background-color: #686a58;

}

#main #mainContent .day .dayTitle {

  display: none;

}

#main #mainContent .day .postTitle {

  font-size: 28.8px;

  margin-bottom: 24px;

}

#main #mainContent .day .postTitle > a {

  color: #34352C;

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

}

#main #mainContent .day .postTitle > a:hover {

  color: #fff;

  text-shadow: 0 0 3px #fff;

}

#main #mainContent .day .postCon {

  font-size: 17.6px;

  margin-bottom: 20.8px;

  color: #34352C;

}

#main #mainContent .day .postCon .c_b_p_desc_readmore {

  width: 200px;

  padding: 5px 10px;

  font-size: 20.8px;

  margin: 20.8px auto 0;

  border: 3px solid #34352C;

  color: #34352C;

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

}

#main #mainContent .day .postCon .c_b_p_desc_readmore:hover {

  background-color: #393a30;

  color: #fff;

  text-shadow: 0 0 3px #fff;

}

#main #mainContent .day .postDesc {

  color: #34352C;

}

#main #mainContent .day .postDesc > a {

  display: none;

}

#main #mainContent .topicListFooter {

  width: 100%;

  height: 40px;

  line-height: 40px;

  font-size: 17.6px;

  background-color: #444539;

  text-align: center;

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

}

#main #mainContent .topicListFooter:hover {

  background-color: #393a30;

}

#main #mainContent .topicListFooter a {

  display: inline-block;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}

#main #mainContent .topicListFooter a:link {

  color: #C9CABB;

}

#main #mainContent .topicListFooter a:visited {

  color: #65655e;

}

#main #mainContent .topicListFooter a:active {

  color: #fff;

}

#main #mainContent .topicListFooter a:hover {

  color: #fff;

}

#main #mainContent .topicListFooter .pager {

  color: #65655e;

}

#main #mainContent .topicListFooter .pager > * {

  margin: 0 10px;

}

#main #mainContent #post_detail .post {

  padding: 30px;

  background-color: #F5F6EB;

}

#main #mainContent #post_detail .post .postTitle {

  text-align: center;

  font-size: 28.8px;

}

#main #mainContent #post_detail .post .postTitle > a {

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}

#main #mainContent #post_detail .post .postTitle > a:link {

  color: #C9CABB;

}

#main #mainContent #post_detail .post .postTitle > a:visited {

  color: #65655e;

}

#main #mainContent #post_detail .post .postTitle > a:active {

  color: #fff;

}

#main #mainContent #post_detail .post .postTitle > a:hover {

  color: #a1a296;

}

#main #mainContent #post_detail .post h1 {

  font-size: 28.8px;

  color: #34352C;

  margin: 10px 0;

}

#main #mainContent #post_detail .post h2 {

  font-size: 24px;

  color: #34352C;

  margin: 10px 0;

}

#main #mainContent #post_detail .post h3 {

  font-size: 22.4px;

  color: #34352C;

  margin: 10px 0;

}

#main #mainContent #post_detail .post h4 {

  font-size: 20.8px;

  color: #34352C;

  margin: 10px 0;

}

#main #mainContent #post_detail .post h5 {

  font-size: 19.2px;

  color: #34352C;

  margin: 10px 0;

}

#main #mainContent #post_detail .post p {

  font-size: 16px;

  color: #34352C;

  line-height: 24px;

  margin: 10px 0;

}

#main #mainContent #post_detail .post blockquote {

  border-left: 7px solid #34352C;

  margin: 10px 0;

  padding: 0 10px;

}

#main #mainContent #post_detail .post blockquote p {

  font-size: 14.4px;

  color: #8d8d83;

}

#main #mainContent #post_detail .post code {

  border: 2px solid #F5F6EB;

  background-color: #34352C;

  box-shadow: 0 0 4px #34352C;

  border-radius: 5px;

  color: #EFF0DC;

  padding: 3px 5px;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}

#main #mainContent #post_detail .post code:hover {

  box-shadow: 0 0 8px #34352C;

}

#main #mainContent #post_detail .post .sourceCode {

  font-family: consolas;

}

#main #mainContent #post_detail .post .sourceCode span {

  line-height: 19.2px;

  font-size: 14.4px;

}

#main #mainContent #post_detail .post .sourceCode .hljs {

  display: block;

  overflow-x: auto;

  padding: 1em 2em;

  background: #272822;

  -webkit-text-size-adjust: none;

}

#main #mainContent #post_detail .post .sourceCode .hljs-tag,

#main #mainContent #post_detail .post .sourceCode .hljs-tag .hljs-title,

#main #mainContent #post_detail .post .sourceCode .hljs-keyword,

#main #mainContent #post_detail .post .sourceCode .hljs-literal,

#main #mainContent #post_detail .post .sourceCode .hljs-strong,

#main #mainContent #post_detail .post .sourceCode .hljs-change,

#main #mainContent #post_detail .post .sourceCode .hljs-winutils,

#main #mainContent #post_detail .post .sourceCode .hljs-flow,

#main #mainContent #post_detail .post .sourceCode .nginx .hljs-title,

#main #mainContent #post_detail .post .sourceCode .tex .hljs-special {

  color: #f92672;

}

#main #mainContent #post_detail .post .sourceCode .hljs {

  color: #ddd;

}

#main #mainContent #post_detail .post .sourceCode .hljs .hljs-constant,

#main #mainContent #post_detail .post .sourceCode .asciidoc .hljs-code {

  color: #66d9ef;

}

#main #mainContent #post_detail .post .sourceCode .hljs-code,

#main #mainContent #post_detail .post .sourceCode .hljs-class .hljs-title,

#main #mainContent #post_detail .post .sourceCode .hljs-header {

  color: white;

}

#main #mainContent #post_detail .post .sourceCode .hljs-link_label,

#main #mainContent #post_detail .post .sourceCode .hljs-attribute,

#main #mainContent #post_detail .post .sourceCode .hljs-symbol,

#main #mainContent #post_detail .post .sourceCode .hljs-symbol .hljs-string,

#main #mainContent #post_detail .post .sourceCode .hljs-value,

#main #mainContent #post_detail .post .sourceCode .hljs-regexp {

  color: #bf79db;

}

#main #mainContent #post_detail .post .sourceCode .hljs-link_url,

#main #mainContent #post_detail .post .sourceCode .hljs-tag .hljs-value,

#main #mainContent #post_detail .post .sourceCode .hljs-string,

#main #mainContent #post_detail .post .sourceCode .hljs-bullet,

#main #mainContent #post_detail .post .sourceCode .hljs-subst,

#main #mainContent #post_detail .post .sourceCode .hljs-title,

#main #mainContent #post_detail .post .sourceCode .hljs-emphasis,

#main #mainContent #post_detail .post .sourceCode .hljs-type,

#main #mainContent #post_detail .post .sourceCode .hljs-preprocessor,

#main #mainContent #post_detail .post .sourceCode .hljs-pragma,

#main #mainContent #post_detail .post .sourceCode .ruby .hljs-class .hljs-parent,

#main #mainContent #post_detail .post .sourceCode .hljs-built_in,

#main #mainContent #post_detail .post .sourceCode .django .hljs-template_tag,

#main #mainContent #post_detail .post .sourceCode .django .hljs-variable,

#main #mainContent #post_detail .post .sourceCode .smalltalk .hljs-class,

#main #mainContent #post_detail .post .sourceCode .hljs-javadoc,

#main #mainContent #post_detail .post .sourceCode .django .hljs-filter .hljs-argument,

#main #mainContent #post_detail .post .sourceCode .smalltalk .hljs-localvars,

#main #mainContent #post_detail .post .sourceCode .smalltalk .hljs-array,

#main #mainContent #post_detail .post .sourceCode .hljs-attr_selector,

#main #mainContent #post_detail .post .sourceCode .hljs-pseudo,

#main #mainContent #post_detail .post .sourceCode .hljs-addition,

#main #mainContent #post_detail .post .sourceCode .hljs-stream,

#main #mainContent #post_detail .post .sourceCode .hljs-envvar,

#main #mainContent #post_detail .post .sourceCode .apache .hljs-tag,

#main #mainContent #post_detail .post .sourceCode .apache .hljs-cbracket,

#main #mainContent #post_detail .post .sourceCode .tex .hljs-command,

#main #mainContent #post_detail .post .sourceCode .hljs-prompt {

  color: #a6e22e;

}

#main #mainContent #post_detail .post .sourceCode .hljs-comment,

#main #mainContent #post_detail .post .sourceCode .hljs-annotation,

#main #mainContent #post_detail .post .sourceCode .smartquote,

#main #mainContent #post_detail .post .sourceCode .hljs-blockquote,

#main #mainContent #post_detail .post .sourceCode .hljs-horizontal_rule,

#main #mainContent #post_detail .post .sourceCode .hljs-decorator,

#main #mainContent #post_detail .post .sourceCode .hljs-template_comment,

#main #mainContent #post_detail .post .sourceCode .hljs-pi,

#main #mainContent #post_detail .post .sourceCode .hljs-doctype,

#main #mainContent #post_detail .post .sourceCode .hljs-deletion,

#main #mainContent #post_detail .post .sourceCode .hljs-shebang,

#main #mainContent #post_detail .post .sourceCode .apache .hljs-sqbracket,

#main #mainContent #post_detail .post .sourceCode .tex .hljs-formula {

  color: #75715e;

}

#main #mainContent #post_detail .post .sourceCode .hljs-keyword,

#main #mainContent #post_detail .post .sourceCode .hljs-literal,

#main #mainContent #post_detail .post .sourceCode .css .hljs-id,

#main #mainContent #post_detail .post .sourceCode .hljs-phpdoc,

#main #mainContent #post_detail .post .sourceCode .hljs-dartdoc,

#main #mainContent #post_detail .post .sourceCode .hljs-title,

#main #mainContent #post_detail .post .sourceCode .hljs-header,

#main #mainContent #post_detail .post .sourceCode .hljs-type,

#main #mainContent #post_detail .post .sourceCode .vbscript .hljs-built_in,

#main #mainContent #post_detail .post .sourceCode .rsl .hljs-built_in,

#main #mainContent #post_detail .post .sourceCode .smalltalk .hljs-class,

#main #mainContent #post_detail .post .sourceCode .diff .hljs-header,

#main #mainContent #post_detail .post .sourceCode .hljs-chunk,

#main #mainContent #post_detail .post .sourceCode .hljs-winutils,

#main #mainContent #post_detail .post .sourceCode .bash .hljs-variable,

#main #mainContent #post_detail .post .sourceCode .apache .hljs-tag,

#main #mainContent #post_detail .post .sourceCode .tex .hljs-special,

#main #mainContent #post_detail .post .sourceCode .hljs-request,

#main #mainContent #post_detail .post .sourceCode .hljs-status {

  font-weight: bold;

}

#main #mainContent #post_detail .post .sourceCode .coffeescript .javascript,

#main #mainContent #post_detail .post .sourceCode .javascript .xml,

#main #mainContent #post_detail .post .sourceCode .tex .hljs-formula,

#main #mainContent #post_detail .post .sourceCode .xml .javascript,

#main #mainContent #post_detail .post .sourceCode .xml .vbscript,

#main #mainContent #post_detail .post .sourceCode .xml .css,

#main #mainContent #post_detail .post .sourceCode .xml .hljs-cdata {

  opacity: 0.5;

}

#main #mainContent #post_detail #blog_post_info_block {

  display: none;

}

#main #mainContent #post_detail .postDesc {

  text-align: right;

  font-size: 12.8px;

}

#main #mainContent #post_detail .postDesc > a {

  display: inline-block;

}

#main #mainContent #blog-comments-placeholder {

  background-color: #EFF0DC;

  padding: 20px;

  color: #34352C;

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

}

#main #mainContent #blog-comments-placeholder:hover {

  background-color: #797970;

}

#main #mainContent #blog-comments-placeholder a {

  display: inline-block;

}

#main #mainContent #blog-comments-placeholder a:link {

  color: #C9CABB;

}

#main #mainContent #blog-comments-placeholder a:visited {

  color: #65655e;

}

#main #mainContent #blog-comments-placeholder a:active {

  color: #fff;

}

#main #mainContent #blog-comments-placeholder a:hover {

  color: #fff;

}

#main #mainContent #blog-comments-placeholder .feedback_area_title {

  font-size: 19.2px;

}

#main #mainContent #blog-comments-placeholder .feedbackItem {

  padding: 5px;

}

#main #mainContent #blog-comments-placeholder .feedbackItem .feedbackCon {

  font-size: 12.8px;

  margin: 10px 0;

  padding: 0 10px;

}

#main #mainContent #blog-comments-placeholder .feedbackItem .feedbackListSubtitle {

  font-size: 14.4px;

}

#main #mainContent #blog-comments-placeholder .feedbackItem .comment_vote {

  text-align: right;

  font-size: 12.8px;

}

#main #mainContent #blog-comments-placeholder .feedbackItem .louzhu {

  border: 2px solid #F5F6EB;

  background-color: #34352C;

  box-shadow: 0 0 4px #34352C;

  border-radius: 5px;

  color: #EFF0DC;

  padding: 3px 5px;

}

#main #mainContent #comment_form {

  background-color: #C9CABB;

  padding: 20px;

}

#main #mainContent #comment_form #comment_nav {

  display: none;

}

#main #mainContent #comment_form #ad_t2 {

  display: none;

}

#main #mainContent #comment_form .c_ad_block {

  display: none;

}

#main #mainContent #comment_form #comment_form_container {

  font-size: 12.8px;

  color: #34352C;

}

#main #mainContent #comment_form #comment_form_container div {

  margin: 10px 0;

}

#main #mainContent #comment_form #comment_form_container p {

  margin: 10px 0;

}

#main #mainContent #comment_form #comment_form_container .commentbox_title_right img {

  display: inline-block;

  width: 20px;

  height: 20px;

}

#main #mainContent #comment_form #comment_form_container #commentform_title {

  font-size: 17.6px;

}

#main #mainContent #comment_form #comment_form_container #tbCommentBody {

  width: 400px;

  height: 200px;

  border: 3px solid #34352C;

  box-shadow: 0 0 5px #34352C;

}

@media screen and (max-width: 500px) {

  #main #mainContent #comment_form #comment_form_container #tbCommentBody {

    width: 100%;

  }

}

@media screen and (max-width: 500px) {

  #main #mainContent #comment_form #comment_form_container #tbCommentAuthor {

    width: 100%;

  }

}

#main #mainContent #comment_form #comment_form_container #commentbox_opt a {

  display: none;

}

#main #mainContent #comment_form #comment_form_container #commentbox_opt p {

  display: none;

}

#main #mainContent #comment_form #comment_form_container #btn_comment_submit {

  padding: 5px;

  border: 3px solid #fff;

  background-color: #34352C;

  color: #F5F6EB;

  border-radius: 5px;

  box-shadow: 0 0 5px black;

}

#main #mainContent #comment_form #comment_form_container .login_tips {

  padding: 10px;

  font-size: 12.8px;

  border: 2px solid #fff;

  background-color: #dd8c13;

  box-shadow: 0 0 4px black;

  border-radius: 5px;

  color: #fff;

}

#main #mainContent #comment_form #comment_form_container a {

  display: inline-block;

}

#main #sideBar {

  position: absolute;

  width: 300px;

  height: 100%;

  top: 60px;

  left: initial;

  right: 0;

  bottom: 0;

  position: fixed;

  background-color: #1a1b16;

  border-left: 5px solid #34352C;

  opacity: 0.9;

  transform: translate(280px);

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

  overflow: scroll;

}

#main #sideBar:hover {

  transform: translate(0);

}

@media (max-width: 600px) {

  #main #sideBar {

    position: static;

    width: 100%;

    height: auto;

    transform: translate(0);

    border-left: none;

    overflow: unset;

  }

}

#main #sideBar #sideBarMain > div {

  -webkit-transition: 0.5s;

  -moz-transition: 0.5s;

  -ms-transition: 0.5s;

  transition: 0.5s;

}

#main #sideBar #sideBarMain > div:hover {

  background-color: #3c3d38;

}

#main #sideBar #sideBarMain a {

  display: inline-block;

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

  margin-bottom: 5px;

}

#main #sideBar #sideBarMain a:link {

  color: #C9CABB;

}

#main #sideBar #sideBarMain a:visited {

  color: #65655e;

}

#main #sideBar #sideBarMain a:active {

  color: #fff;

}

#main #sideBar #sideBarMain a:hover {

  color: #fff;

}

#main #sideBar #sideBarMain > div {

  padding: 20px;

  background-color: #24251f;

  color: #fff;

}

#main #sideBar #sideBarMain h3 {

  margin-bottom: 10px;

}

#main #sideBar #sideBarMain #leftcontentcontainer .sidebar-block {

  margin-bottom: 40px;

}

#main #sideBar #sideBarMain #blogCalendar {

  width: 100%;

}

#main #sideBar #sideBarMain #blogCalendar .CalDayHeader {

  background-color: #393a30;

  padding: 5px;

}

#main #sideBar #sideBarMain #blogCalendar tr {

  font-size: 16px;

  height: 24px;

  line-height: 24px;

}

#main #sideBar #sideBarMain #blogCalendar tr > * {

  color: #F5F6EB;

}

#main #sideBar #sideBarMain #blogCalendar tr td {

  -webkit-transition: 0.3s;

  -moz-transition: 0.3s;

  -ms-transition: 0.3s;

  transition: 0.3s;

}

#main #sideBar #sideBarMain #blogCalendar tr td a {

  margin: 0;

}

#main #sideBar #sideBarMain #blogCalendar tr td a u {

  text-decoration: none;

  text-shadow: 0 0 3px #fff;

}

#main #sideBar #sideBarMain #blogCalendar tr td:not([colspan='7']):hover {

  background-color: #535546;

}

#main #sideBar #sideBarMain #blogCalendar .CalTitle {

  width: 100%;

}

#main #sideBar #sideBarMain #blogCalendar .CalTitle .CalNextPrev {

  background: #1f201a;

  border-radius: 100%;

  width: 30px;

  height: 30px;

  text-align: center;

}

#main #sideBar #sideBarMain #blogCalendar .CalTitle td[align="center"]:hover {

  background: none;

}

#main #sideBar #sideBarMain #blogCalendar .CalOtherMonthDay {

  color: #535546;

}

#main #sideBar #sideBarMain #RecentCommentsBlock .recent_comment_title {

  font-size: 16px;

}

#main #sideBar #sideBarMain #RecentCommentsBlock .recent_comment_body {

  font-size: 14.4px;

}

#main #sideBar #sideBarMain #RecentCommentsBlock .recent_comment_author {

  font-size: 12.8px;

  margin-bottom: 15px;

  text-align: right;

}

#footer {

  background-color: #34352C;

  height: 50px;

  line-height: 50px;

  text-align: center;

  color: #F5F6EB;

  font-size: 17.6px;

}
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------


.form:before{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: '';
  background-color: transparent;
  z-index: -1;
}
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

.head-img{
top:10px;
width:120px;
border-radius:100%;
overflow:visible;
box-sizing:border-box;
position:relative;
animation:scales_bs 1s linear infinite;
}