@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
a { text-decoration:none; outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0); }
body {
    background: #eee none repeat scroll 0 0;
    color: #000;
    font: 14px/1.8 tahoma,arial,sans-serif;
    min-height: 101%;
    font-family: 'Microsoft yahei';
}
#header {
    background: #54c3db none repeat scroll 0 0;
    min-height: 160px;
}

#navigator {
    clear: both;
    color: #fff;
    height: 30px;
    width: 1000px;
    padding-bottom: 15px;
}
#navList {
    margin-left: 10px;
}
#navList a:link, #navList a:visited, #navList a:active {
    color: #fff;
}
#navList a {
    font-size: 1.1em;
    font-weight: 500;
    color: #fff;
}
#navList a:hover {
    color: #8789c4;
}
#navList a:hover::after {
    bottom: -5px;
    color: #8789c4;
    content: "◆";
    left: 2px;
    position: absolute;
    text-shadow: none;
}
#main {
    width: auto;
    margin: 0 auto;
    position: relative;
    padding-right: 220px;
   padding-left:25px;
}
#mainContent .day::after {
    color: #fff;
    content: "";
    font-size: 30px;
    left: -14px;
    position: absolute;
    top: 15px;
}
.day {
    padding: 5px 5px 5px 20px;
    border-radius: 0;
    margin: 0 0px 20px 0px;
}
.dayTitle {
    background: #40afc7 none repeat scroll 0 0;
    border-radius: 2px;
    box-shadow: none;
    clear: both;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    height: auto;
    left:8px;
    line-height: 18px;
    position: absolute;
    text-align: left;
    text-indent: 0px;
    text-shadow: none;
    top: -5px;
    width: 96px;
    padding: 8px 0 8px 2px;
}
.day .dayTitle{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}
.day .dayTitle:hover{
  background-color:#54c3db;
}

a:link {
    color: #666;
    text-decoration: none;
}
a:visited {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #666;
    text-decoration: underline;
}
a:active {
    color: #666;
    text-decoration: none;
}
.dayTitle a:link {
    color: #fff;
    text-decoration: none;
}
.dayTitle a:visited {
    color: #fff;
    text-decoration: none;
}
.dayTitle a:hover {
    color: #fefcbf;
    text-decoration:none;
}
.dayTitle a:active {
    color: #fff;
    text-decoration: none;
}
#mainContent {
    float: none;
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
    width: 100%;
    word-break: break-all;
}
.catListTitle {
    font-family: 'Microsoft yahei';
    background: #40afc7 none repeat scroll 0 0;
    border-bottom: 1px solid #dadfe1;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #fff;
    font-size: 1.2em;
    height: 1.5em;
    line-height: 1.5em;
    padding: 5px;
    text-indent: 1em;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.catListTitle:hover{
   background-color:#54c3db;
}
.catListEssay, .catListLink, .catListNoteBook, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListArticleArchive, .catListImageCategory, .mySearch, .catListComment, .catListView, .catListFeedback ,.catListArticleCategory{
    background: #fff none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 20px 5px;
}
.catListEssay ul, .catListLink ul, .catListNoteBook ul, .catListNoteBook ul, .catListTag ul, .catListPostCategory ul, .catListPostArchive ul, .catListArticleArchive ul, .catListImageCategory ul, .mySearch ul, .catListComment ul, .catListView ul, .catListFeedback ul,.catListArticleCategory ul{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListArticleArchive ul li, .catListImageCategory ul li, .mySearch ul li, .catListComment ul li, .catListView ul li, .catListFeedback ul li,.catListArticleCategory ul li {
    border-bottom: none;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px 10px;
}

.catListComment ul li.recent_comment_body {
    color: #8bb39b;
    padding: 0 10px 0 26px;
}
.catListComment ul li.recent_comment_author{
    color: #8bb39b;
    border:none;
    padding: 0 10px;
    border-bottom: 1px dashed #eee;
}
#blog-calendar {
    background: #fff none repeat scroll 0 0;
    
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px;
    padding: 5px;
}
.postTitle {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5em;
    margin-top: 30px;
    margin-bottom: 15px;
}

.newsItem {
    margin: 0 5px 10px;
    background: #8789c4 none repeat scroll 0 0;
    border-radius:0px;
    box-shadow: 1px 1px 2px #8789c4;
}

#sideBar {
    width: 200px;
   position: absolute;
   right: 3px;
   top: 0px;
   float:none;

}
#sideBarMain .newsItem{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
#sideBarMain .newsItem:hover{
background-color:#9597d3;
}
.catListEssay, .catListLink, .catListNoteBook, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListArticleArchive, .catListImageCategory, .mySearch, .catListComment, .catListView, .catListFeedback, .catListArticleCategory {
    margin: 10px 5px;
}
.catListPostArchive, .catListArticleArchive, .catListFeedback, .catListComment{
   display:none;
}
 .mySearch{
    margin: 20px 5px 10px;
}

#blog-news {
    color:#fff;
}

#sideBar #blog-news a:link, #sideBar #blog-news a:visited, #sideBar #blog-news a:active {
    color: #fff;
}
#sideBar #blog-news a:hover{
   color:#d9abb6;
}
#sideBar a:link, #sideBar a:visited, #sideBar a:active {
    color: #666;
}
 #sideBar a:hover{
     color:#40afc7;
}
#blogTitle h1 a{
    color: #40afc7;
    text-decoration: none;
    text-shadow: 0 0 5px #fff;
}
#blogTitle h1 a:hover{
color:#54c3db;
}
#blogTitle h1{
    float: none;
    font-size: 4em;
    font-weight: bold;
    line-height: 4em;
    margin: 0 auto;
    text-align: center;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}
#blogTitle h1 a:hover::before {
    content: "";
    border:3px solid #40afc7;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-83px;
    margin-top:-83px;
    width:166px;
    height:166px;
    border-radius:100px;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#topics .postTitle a {
    color: #666;
    text-shadow:none;
}
div.commentform textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'Microsoft yahei';
    font-size: 12px;
    height: 120px;
    padding: 5px;
    padding-left:2%;
    padding-right:2%;
    width: 96%;
    margin:0 auto;
}
.comment_btn {
    border:0 none;
    -webkit-appearance: none;
    background-color: #e88d54;
    color: #fff;
    border-radius:2px;
    height: 26px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    width: 68px;
}
.comment_btn:hover{
    background-color:#f69a61;
}
.commentbox_title {
    margin-top: 10px;
    width: 100%;
}

#blogTitle h2 {
    margin-left: 0;
    margin-top: 0px;
}
.input_my_zzk {
    width: 94px;
    padding-left:3px;
    padding-right:3px;
    line-height:20px;
    border:1px solid #ddd;
    border-radius:2px;
}

input.btn_my_zzk {
    border:0 none;
    -webkit-appearance: none;
    background-color: #8789c4;
    min-width: 58px;
    color: #fff;
    border-radius:2px;
    cursor:pointer;
}

input.btn_my_zzk:hover{
    background-color:#9597d3;
}
.blogStats {
    color: #2a7e84;
    margin-right:10px;
}
div.commentform input.author, div.commentform input.email, div.commentform input.url {
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius:2px;
    width: 120px;
}
#topics {
    padding: 10px;
    border-radius: 0;
}
.postTitle a:hover {
    color: #40afc7;
}
 .postCon a:hover {
    color: #40afc7;
}
.c_ad_block{
   display:none;
}

#ad_t2{
   display:none;
}
#blog-comments-placeholder{
    background: #fff none repeat scroll 0 0;
    border-radius: 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px 10px 0;
    overflow: hidden;
}
.feedbackItem{
    overflow: hidden;
    padding: 0 10px;
}

.feedbackCon::before {
    font-size: 32px;
    left: -40px;
    top: -12px;
}
.feedbackCon::after {
    bottom: -34px;
    font-size: 32px;
    right: -34px;
}
#sideBar {
    color: #8bb39b;
}
.postDesc {
    color: #8bb39b;
}
.entrylistPosttitle a:hover,.entrylistPostSummary a:hover{
     color:#40afc7;
}
.PostList a:hover{
     color:#40afc7;
}
.commentform {
    padding: 10px 20px;
}

.entrylistPosttitle {
    border-bottom: 1px dashed #ddd;
}
.postBody {
    line-height: 1.8;
}
#cnblogs_post_body p, #cnblogs_post_body div {
    line-height: 1.8 !important;
}

#cnblogs_post_body h1 {
    font-size: 20px;
    color: #666;
}
#cnblogs_post_body h2 {
    font-size: 18px;
    color: #666;
}
#cnblogs_post_body h3 {
    font-size: 16px;
    color: #666;
}
#cnblogs_post_body h4 {
    font-size: 14px;
    color: #666;
}
#cnblogs_post_body h5 {
    font-size: 13px;
    color: #666;
}
#cnblogs_post_body h6 {
    font-size: 12px;
    color: #666;
}
#cnblogs_post_body img {
    max-width: 800px;
}

#mainContent .forFlow {
    padding-top: 10px;
}
#sideBarMain{
   padding-top: 14px;
}
.postDesc a:hover {
    color: #40afc7;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs{
font-size: 14px !important;
padding: 20px !important;
}
.cnblogs-markdown code, .cnblogs-post-body code{
border:0 !important;
}
@media (max-width: 1024px){
    .day .dayTitle{display:none}
    .day {margin: 0 5px 20px;}
}
@media (max-width: 1000px){
    #navigator{width:100%;}
}

@media (max-width: 800px){
    #sideBar {display:none;}
    #main { width: 100%;padding-left:0;padding-right:0;}
}
@media (max-width: 768px){
  #navigator {
    height: 60px;
  }
   #navList {
     float: none; 
   }
   .blogStats {
     float: none; 
   }
   div#mainContent {
      width: 100%;
   }
   div.commentform textarea.comment_textarea {
    width: 96%;
   }
   div#green_channel {
       width: 268px;
    }
  div #green_channel a {
    margin-right: 1px;
   }
}
@media (max-width: 414px){
    #navList { margin-left: 0px;}
    #header #navigator { width: 85%;}
    #navList a { padding: 0.05em 0.5em;}
    
}