html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
/* custom Font*/
@font-face {
  font-family: "covered_by_your_graceregular";
  font-weight: normal;
  font-style: normal;
  src: url("../font/coveredbyyourgrace-webfont.eot");
  src: url("../font/coveredbyyourgrace-webfont.eot?#iefix") format('embedded-opentype'), url("../font/coveredbyyourgrace-webfont.svg#covered_by_your_graceregular") format('svg'), url("../font/coveredbyyourgrace-webfont.woff") format('woff'), url("../font/coveredbyyourgrace-webfont.ttf") format('truetype');
}
/* icon Font */
@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  src: url("../font/fontawesome-webfont.eot?v=#4.0.3");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=#4.0.3") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=#4.0.3") format("woff"), url("../font/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3") format("svg");
}
@font-face {
  font-family: "fontdiao";
  font-weight: normal;
  font-style: normal;
  src: url("../font/fontdiao.eot");
  src: url("../font/fontdiao.eot?#iefix") format('embedded-opentype'), url("../font/fontdiao.svg#fontdiao") format('svg'), url("../font/fontdiao.woff") format('woff'), url("../font/fontdiao.ttf") format('truetype');
}
/* Public style */
* {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
body {
  background: #ddd;
  font-family: "Helvetica Neue", "Helvetica", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-size: 100%;
  color: #817c7c;
  line-height: 1.5;
  min-height: 100vh;
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
iframe {
  margin-top: 10px;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
  padding-left: 0.3em;
}
sub {
  bottom: -0.25em;
}
a {
  text-decoration: none;
  color: #817c7c;
}
a:hover,
a:focus {
  outline: 0;
  text-decoration: none;
  -webkit-transition: color 0.25s, background 0.5s;
  -moz-transition: color 0.25s, background 0.5s;
  -o-transition: color 0.25s, background 0.5s;
  -ms-transition: color 0.25s, background 0.5s;
  transition: color 0.25s, background 0.5s;
}
a:hover:before {
  -webkit-transition: color 0.25s, background 0.5s;
  -moz-transition: color 0.25s, background 0.5s;
  -o-transition: color 0.25s, background 0.5s;
  -ms-transition: color 0.25s, background 0.5s;
  transition: color 0.25s, background 0.5s;
}
input:focus {
  outline: none;
}
input,
button {
  margin: 0;
  padding: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
h1 {
  font-size: 1.5em;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
::-webkit-input-placeholder {
  color: #fff;
  padding: 2px 0 0 4px;
}
::-moz-placeholder {
  color: #fff;
  padding: 2px 0 0 4px;
}
:-ms-input-placeholder {
  color: #fff;
  padding: 2px 0 0 4px;
}
::-webkit-input-placeholder::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f002";
  padding-right: 4px;
}
::-moz-placeholder:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f002";
  padding-right: 4px;
}
:-ms-input-placeholder::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f002";
  padding-right: 4px;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-search-cancel-button:after {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\f00d';
  color: #fff;
  padding-right: 4px;
}
/* css3 animate */
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  animation-name: fadeIn;
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  -ms-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
body >header {
  width: 100%;
  -webkit-box-shadow: 2px 4px 5px rgba(3,3,3,0.2);
  box-shadow: 2px 4px 5px rgba(3,3,3,0.2);
  background: url("../") center #2ca6cb;
  color: #fff;
}
body >header >div {
  width: 95%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  body >header >div {
    width: 93%;
  }
}
body >header a {
  display: block;
  color: #fff;
}
#imglogo {
  float: left;
  width: 4em;
  height: 4em;
}
@media only screen and (min-width: 768px) {
  #imglogo {
    width: 5em;
  }
}
@media only screen and (min-width: 1024px) {
  #imglogo {
    width: 5.5em;
  }
}
#imglogo img {
  width: 4em;
}
@media only screen and (min-width: 768px) {
  #imglogo img {
    width: 5em;
  }
}
@media only screen and (min-width: 1024px) {
  #imglogo img {
    width: 5.5em;
  }
}
#textlogo {
  float: left;
  width: 60%;
  margin-left: 0.5em;
}
#textlogo h1.site-name {
  width: 86%;
  font-family: "covered_by_your_graceregular";
  font-size: 240%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  #textlogo h1.site-name {
    font-size: 240%;
  }
}
@media only screen and (min-width: 1024px) {
  #textlogo h1.site-name {
    font-size: 280%;
  }
}
#textlogo h2.blog-motto {
  font-size: 0.7em;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  #textlogo h2.blog-motto {
    font-size: 100%;
  }
}
@media only screen and (min-width: 1024px) {
  #textlogo h2.blog-motto {
    font-size: 110%;
  }
}
.navbar {
  position: absolute;
  width: 2em;
  right: 0em;
  top: 0.6em;
  padding: 0.5em;
}
@media only screen and (min-width: 1024px) {
  .navbar {
    display: none;
  }
}
.navbutton::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0c9";
}
.navmobile::before {
  padding-left: 1em;
}
header nav {
  float: left;
  width: 100%;
  font-size: 112.5%;
  max-height: 0.01em;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  -ms-transition: max-height 1s ease-out;
  transition: max-height 1s ease-out;
}
@media only screen and (min-width: 568px) {
  header nav {
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  header nav {
    float: right;
    width: auto;
    margin-top: 1em;
    max-height: none;
  }
}
@media only screen and (min-width: 1024px) {
  header nav ul {
    float: right;
  }
}
@media only screen and (min-width: 1024px) {
  header nav ul li {
    float: left;
  }
}
header nav ul li a {
  padding: 0.2em 0 0.2em 1em;
}
@media only screen and (min-width: 1024px) {
  header nav ul li a {
    padding: 0.2em 1.5em;
  }
}
header nav ul li a:hover {
  background: #1b7f9e;
  color: #e9cd4c;
}
.shownav {
  max-height: 40em;
}
.search {
  padding: 0.1em 0 0 1em;
}
.search input {
  -webkit-appearance: textfield;
  font-size: 0.87em;
  line-height: 1.7;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  width: 80%;
  padding-left: 0.5em;
}
@media only screen and (min-width: 1024px) {
  .search input {
    width: 8em;
    -webkit-transition: 0.5s width;
    -moz-transition: 0.5s width;
    -o-transition: 0.5s width;
    -ms-transition: 0.5s width;
    transition: 0.5s width;
  }
  .search input:focus {
    width: 15em;
  }
}
.search label {
  display: none;
}
/* index layout */
#container {
  position: relative;
  -webkit-flex: 1;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #container {
    width: 96%;
  }
}
@media only screen and (min-width: 1024px) {
  #container {
    width: 94%;
  }
}
@media only screen and (min-width: 1560px) {
  #container {
    width: 82%;
  }
}
#main {
  margin: 1em 0 0;
  line-height: 1.8;
}
@media only screen and (min-width: 1024px) {
  #main {
    margin: 2em 0 0;
    width: 75%;
    float: left;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    -ms-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
  }
}
#main section.post {
  background: #fafafa;
  margin-bottom: 0.125em;
}
#main section.post a {
  display: block;
  border-left: 0.5em solid #ccc;
  -webkit-transition: border-left 0.45s;
  -moz-transition: border-left 0.45s;
  -o-transition: border-left 0.45s;
  -ms-transition: border-left 0.45s;
  transition: border-left 0.45s;
  padding: 0.5em;
}
@media only screen and (min-width: 768px) {
  #main section.post a {
    padding: 1em;
  }
}
#main section.post a:hover {
  border-left: 0.5em solid #2ca6cb;
}
#main section.post a h1 {
  color: #2ca6cb;
  line-height: 2;
}
#main section.post a p {
  color: #817c7c;
}
#main section.post a time {
  color: #817c7c;
  display: block;
  margin: 0.5em 0;
  font-size: 0.9em;
}
#main article.post-expand {
  background: #fafafa;
  margin-bottom: 3.5em;
}
#main article.post-expand .img-logo {
  max-width: 180px;
  max-height: 96px;
  display: block !important;
  margin-right: 0.7em;
  margin-left: 0.7em;
  padding: 0;
  float: right;
  clear: right;
}
#main article.post-expand .img-topic {
  max-width: 300px;
  max-height: 1800px;
  display: block !important;
  margin-left: 0.7em;
  margin-right: 0.7em;
  padding: 0;
  float: right;
  clear: right;
}
#main article.post-expand .article-more-link a {
  display: inline-block;
  line-height: 1em;
  padding: 6px 15px;
  border-radius: 15px;
  background: #ddd;
  color: #817c7c;
  text-decoration: none;
}
#main article.post-expand .article-more-link a:hover {
  background: #2ca6cb;
  color: #fff;
  text-decoration: none;
}
#archive-page section.post a {
  font-size: 0.9em;
  padding: 0.5em !important;
}
@media only screen and (min-width: 768px) {
  #archive-page section.post a time {
    padding-left: 1em;
  }
}
.moveMain {
  margin-left: 10% !important;
}
.unexpand .prev {
  border-left: 0.5em solid #ccc;
}
.unexpand .prev:hover {
  border-left: 0.5em solid #2ca6cb;
}
#page-nav {
  background: #fafafa;
  text-align: center;
  overflow: hidden;
}
#page-nav a {
  display: inline-block;
  padding: 0.5em 1em;
}
#page-nav a {
  color: #2ca6cb;
}
#page-nav a:hover {
  background: #ccc;
  color: #2ca6cb;
}
#page-nav .prev {
  float: left;
  -webkit-transition: border-left 0.5s;
  -moz-transition: border-left 0.5s;
  -o-transition: border-left 0.5s;
  -ms-transition: border-left 0.5s;
  transition: border-left 0.5s;
}
#page-nav .prev span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f053";
  padding-right: 0.5em;
}
#page-nav .next {
  float: right;
}
#page-nav .next span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  padding-left: 0.5em;
}
#page-nav .page-number {
  display: none;
  padding: 0.5em 1em;
}
@media only screen and (min-width: 768px) {
  #page-nav .page-number {
    display: inline-block;
  }
}
#page-nav .current {
  color: #b8b8b8;
  font-weight: bold;
}
#page-nav .space {
  color: #2ca6cb;
}
/* page layout */
@media only screen and (min-width: 1024px) {
  .page {
    margin-left: 10% !important;
  }
}
/* archive layout */
.category-icon:before,
.tag-icon:before,
.archive-icon:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ccc;
  font-size: 100%;
  padding-right: 0.3em;
}
.category-icon:before {
  content: "\f07b";
}
.tag-icon:before {
  content: "\f02c";
}
.archive-icon:before {
  content: "\f187";
}
.archive-title {
  margin: 1em 0;
  padding: 2em;
  background: #fafafa;
  border-left: 0.5em solid #ccc;
}
@media only screen and (min-width: 1024px) {
  .archive-title {
    margin: 2em 0;
    width: 18.5%;
    padding-left: 0.5%;
    float: left;
  }
}
.archive-title h2 {
  width: 90%;
  color: #2ca6cb;
  font-size: 120%;
}
.archive-title a {
  color: #2ca6cb;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
}
.archive-title a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
}
.current {
  color: #ea6753 !important;
}
@media only screen and (min-width: 768px) {
  .archive-part {
    min-height: 200px;
  }
}
@media only screen and (min-width: 1024px) {
  .archive-part {
    float: right;
    margin-left: 2% !important;
  }
}
.archive-part section.post {
  width: 100%;
}
.archive-part section.post time {
  font-size: 1.1em !important;
  float: left;
}
@media only screen and (max-width: 568px) {
  .archive-part section.post time {
    width: 100%;
  }
}
@media only screen and (min-width: 568px) {
  .archive-part section.post time {
    width: 20%;
  }
}
@media only screen and (min-width: 768px) {
  .archive-nav {
    width: 100%;
    float: left;
    margin-top: 1em;
  }
}
/* tags&categories layout */
.all-list-box {
  min-height: 400px;
}
.post,
.page,
.link,
.photo {
  background: #fafafa;
}
.post a,
.page a,
.link a,
.photo a {
  color: #2ca6cb;
}
.post a:hover,
.page a:hover,
.link a:hover,
.photo a:hover {
  color: #ea6753;
}
@media only screen and (min-width: 768px) {
  article header.article-info {
    border-bottom: 1px solid #dbdbdb;
  }
}
article header.article-info >h1 {
  padding: 0.2em 3%;
  font-size: 170%;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-left: 5px solid #2ca6cb;
}
@media only screen and (min-width: 1024px) {
  article header.article-info >h1 {
    font-size: 200%;
    padding-top: 0.3em;
  }
}
article header.article-info >p.article-author {
  padding: 0.3em 4% 0.3em 0;
  text-align: right;
  border-bottom: 1px solid #dbdbdb;
}
@media only screen and (min-width: 768px) {
  article header.article-info >p.article-author {
    float: right;
    border-bottom: none;
  }
}
article header.article-info >p.article-time {
  padding-top: 0.5em;
  font-size: 0.8em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  article header.article-info >p.article-time {
    margin-right: 1em;
    padding-top: 0.1em;
    font-size: 0.9em;
  }
}
article header.article-info >p.article-time:before {
  font-family: "FontAwesome";
  font-size: 130%;
  content: "\f017";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article .article-content {
  padding: 1.5em 4%;
  color: #413f3f;
  font-size: 100%;
}
article .article-content:before,
article .article-content:after {
  content: "";
  display: block;
  clear: both;
}
article .article-content .kb {
  padding: 0.1em 0.6em;
  border: 1px solid #ccc;
  background-color: code-color;
  color: #8f8f8f;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
  border-radius: 3px;
  display: inline-block;
  margin: 0 0.1em;
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  white-space: nowrap;
}
article .article-content h1,
article .article-content h2 {
  font-size: 180%;
  line-height: 1.2em;
  padding-bottom: 0.3em;
  margin-top: 1.5em;
  border-bottom: 2px solid #dbdbdb;
}
article .article-content h3 {
  font-size: 140%;
  line-height: 1em;
  margin-top: 1.3em;
}
article .article-content h4,
article .article-content h5,
article .article-content h6 {
  font-size: 140%;
}
article .article-content h1,
article .article-content h2,
article .article-content h3,
article .article-content h4,
article .article-content h5,
article .article-content h6 {
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article .article-content h1 >code,
article .article-content h2 >code,
article .article-content h3 >code,
article .article-content h4 >code,
article .article-content h5 >code,
article .article-content h6 >code {
  color: #a3a3a3;
}
article .article-content hr {
  border: 1px solid #dbdbdb;
}
article .article-content strong {
  font-weight: bold;
}
article .article-content em {
  font-style: italic;
}
article .article-content acronym,
article .article-content abbr {
  border-bottom: 1px dotted;
}
article .article-content blockquote {
  border-left: 0.2em solid #2ca6cb;
  margin: 0.65em 0 0.65em 1%;
  padding-left: 1%;
  line-height: 1.5;
  font-size: 100%;
  color: #808080;
}
article .article-content blockquote footer {
  background: #fafafa;
  padding: 0;
  margin: 0;
  font-size: 80%;
  line-height: 1em;
}
article .article-content blockquote cite {
  font-style: italic;
  padding-left: 0.5em;
}
article .article-content ul,
article .article-content ol {
  padding-left: 1.5em;
  font-size: 100%;
  padding-top: 0.7em;
}
@media only screen and (min-width: 768px) {
  article .article-content ul,
  article .article-content ol {
    padding-left: 1.5em;
  }
}
article .article-content ul li {
  list-style: disc;
  text-align: match-parent;
}
article .article-content ol li {
  list-style-type: decimal;
}
article .article-content dl dt {
  font-weight: blod;
}
article .article-content ul li>code,
article .article-content ol li>code,
article .article-content p code,
article .article-content strong code,
article .article-content em code,
article .article-content table th>code,
article .article-content table td>code {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  background: #eee;
  color: #d14;
  border: 1px solid #d6d6d6;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 90%;
  white-space: nowrap;
  text-shadow: 0 1px #fff;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
}
article .article-content p {
  line-height: 1.5;
  margin-top: 0.7em;
}
@media only screen and (min-width: 1024px) {
  article .article-content p {
    margin-top: 1em;
  }
}
article .article-content img,
article .article-content video,
article .article-content figure img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  padding-top: 0.5em;
}
@media only screen and (min-width: 1024px) {
  article .article-content img,
  article .article-content video,
  article .article-content figure img {
    padding-top: 0.7em;
  }
}
article .article-content .img-topic,
article .article-content .img-logo {
  display: none;
}
article .article-content .img-center {
  display: block;
  margin: auto;
}
article .article-content .img-shadow {
  -webkit-box-shadow: 0 0 2px 3px #ddd;
  box-shadow: 0 0 2px 3px #ddd;
}
article .article-content figcaption,
article .article-content .caption {
  display: block;
  margin-top: 0.3em;
  color: #808080;
  position: relative;
  font-size: 0.9em;
  padding-left: 1.3em;
}
article .article-content figcaption:before,
article .article-content .caption:before {
  content: '\f040';
  position: absolute;
  font: 0.9em "FontAwesome";
  position: absolute;
  left: 0;
  top: 0.3em;
}
article .article-content .video-container {
  position: relative;
  padding-top: 56%;
  height: 0;
  overflow: hidden;
}
article .article-content .video-container iframe,
article .article-content .video-container object,
article .article-content .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
article .article-content table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 1em;
}
article .article-content table th {
  font-weight: bold;
  border-bottom: 2px solid #dbdbdb;
  padding: 0.5em;
  line-height: 1.3em;
}
article .article-content table td {
  border-bottom: 1px solid #dbdbdb;
  padding: 0.5em;
  line-height: 1.3em;
}
article .article-content .pullquote {
  text-align: left;
  width: 45%;
  margin: 0;
  border: none;
}
article .article-content .left {
  margin-left: 0.5em;
  margin-right: 1em;
  float: left;
}
article .article-content .right {
  margin-right: 0.5em;
  margin-left: 1em;
  float: right;
}
footer.article-footer {
  background: #fafafa;
  padding: 0 4%;
  margin: 0;
  border-top: 1px solid #dbdbdb;
}
.article-share {
  float: right;
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .article-share {
    width: 60%;
  }
}
@media only screen and (min-width: 768px) {
  .article-share {
    width: 16.5em;
  }
}
.article-share .share-jiathis {
  padding: 0.5em 0;
  margin-top: 0.3em;
}
.share span {
  float: right;
  height: 3em;
  width: 1em;
  margin-right: 0.5em;
  position: relative;
  color: #d6d6d6;
}
.share span:before {
  font-family: "FontAwesome";
  content: "\f064";
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.75em;
  margin-left: -0.75em;
}
.share a {
  float: right;
  width: 3em;
  height: 3em;
  display: block;
  position: relative;
}
.share a:before {
  font-size: 1.2em;
  font-family: "FontAwesome";
  text-align: center;
  color: #817c7c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.75em;
  margin-left: -0.75em;
}
.share a:hover:before {
  color: #fff;
}
.article-share-twitter:before {
  content: "\f099";
}
.article-share-twitter:hover {
  background: #00aced;
  text-shadow: 0 1px #008abe;
}
.article-share-facebook:before {
  content: "\f09a";
}
.article-share-facebook:hover {
  background: #3b5998;
  text-shadow: 0 1px #2f477a;
}
.article-share-weibo:before {
  content: "\f18a";
}
.article-share-weibo:hover {
  background: #c64d3e;
  text-shadow: 0 1px #a13c2f;
}
.article-share-qrcode:before {
  font-family: "fontdiao" !important;
  content: "\f132";
}
.article-share-qrcode:hover {
  background: #49ae0f;
  text-shadow: 0 1px #3a8b0c;
}
.article-share-renren:before {
  content: "\f18b";
}
.article-share-renren:hover {
  background: #369;
  text-shadow: 0 1px #29527a;
}
.article-back-to-top:before {
  content: "\f062";
}
.article-back-to-top:hover {
  background: #762c54;
  text-shadow: 0 1px #5e2343;
}
.hoverqrcode {
  background: #fff;
  border: 3px solid #2ca6cb;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
}
.overlay {
  display: none !important;
}
.comments-count {
  color: #d6d6d6;
  margin-top: 0.3em;
  padding: 0.5em 0;
  float: right;
}
.comments-count span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f075";
}
@media only screen and (max-width: 568px) {
  .comments-count {
    float: left;
  }
}
.comments-count-link {
  padding: 0.5em;
  margin: 0 0.3em;
}
.comments-count-link:hover {
  color: #fff !important;
  background: #2ca6cb;
}
.article-tags,
.article-categories {
  padding: 0.5em 0;
  float: left;
/**width 100%**/
}
@media only screen and (max-width: 568px) {
  .article-tags,
  .article-categories {
    margin-right: 1em !important;
  }
}
.article-tags {
  color: #d6d6d6;
}
@media only screen and (max-width: 568px) {
  .article-tags {
    margin-left: 0;
  }
}
.article-tags span {
  position: relative;
  float: left;
  width: 1em;
  height: 2em;
  margin-right: 0.5em;
}
.article-tags span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.6em;
  margin-left: -0.6em;
  content: "\f02c";
}
.article-tags a {
  float: left;
  padding: 0 0.3em;
  margin: 0.3em;
  background: #e6e6e6;
}
.article-tags a:hover {
  color: #fff;
  background: #2ca6cb;
}
.article-categories {
  color: #d6d6d6;
  margin-top: 0.3em;
  margin-right: 3em;
}
.article-categories span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f07b";
}
.article-category-link {
  padding: 0.5em;
  margin: 0 0.3em;
}
.article-category-link:hover {
  color: #fff !important;
  background: #2ca6cb;
}
.article-nav {
  padding: 0 10%;
}
@media only screen and (min-width: 768px) {
  .article-nav {
    padding: 0 4%;
  }
}
.article-nav strong {
  font-size: 1em;
  font-weight: bold;
}
.article-nav a {
  display: block;
  overflow: hidden;
}
.article-nav .prev a:hover,
.article-nav .next a:hover {
  background: #2ca6cb;
  color: #fff;
}
.article-nav .prev {
  width: 100%;
  float: left;
}
.article-nav .prev strong {
  padding-left: 1.8em;
}
.article-nav .prev span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f053";
  padding-right: 0.5em;
}
@media only screen and (min-width: 768px) {
  .article-nav .prev {
    width: 45%;
    float: left;
  }
}
.article-nav .next {
  width: 100%;
  float: left;
  text-align: left;
}
.article-nav .next strong {
  padding-left: 1.5em;
}
.article-nav .next span:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  padding-right: 0.5em;
}
@media only screen and (min-width: 768px) {
  .article-nav .next {
    width: 45%;
    float: right;
    text-align: right;
  }
  .article-nav .next strong {
    padding-right: 1.8em;
  }
  .article-nav .next span:before {
    content: none;
  }
  .article-nav .next span:after {
    font-family: "FontAwesome";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f054";
    padding-left: 0.5em;
  }
}
section.comment {
  padding: 0 4%;
  margin: 1em 0;
}
.toc-article {
  background: #eee;
  margin: 1.6em 0 0 2em;
  padding: 1em;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.toc-article strong {
  padding: 0.3em 0;
}
.toc-article ul li {
  list-style: disc;
  text-align: match-parent;
  margin: 0.5em 0;
}
.toc-article ol li {
  list-style-type: decimal;
  margin: 0.5em 0;
}
#toc {
  line-height: 1.3em;
  font-size: 0.8em;
  float: right;
}
#toc .toc {
  padding: 0;
}
#toc .toc li {
  list-style-type: none;
}
#toc .toc-child {
  padding-left: 1.5em;
  padding-top: 0;
}
#toc.toc-aside {
  display: none;
  width: 13%;
  position: fixed;
  right: 2%;
  top: 320px;
  overflow: hidden;
  line-height: 1.5em;
  font-size: 1em;
  color: #333;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}
#toc.toc-aside strong {
  padding: 0.3em 0;
  color: #817c7c;
}
#toc.toc-aside:hover {
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#toc.toc-aside a {
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
  -ms-transition: color 1s ease-out;
  transition: color 1s ease-out;
}
#toc.toc-aside a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
.active {
  color: #2ca6cb !important;
}
.openaside {
  display: none;
  position: absolute;
  right: 7.5%;
  top: 260px;
}
.openaside a {
  display: block;
  pointer-events: none;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #2ca6cb;
  padding: 0.2em 0.55em;
}
.openaside a::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0c9";
}
.closeaside {
  display: none;
}
.closeaside a {
  color: #2ca6cb;
  pointer-events: none;
}
.closeaside a:hover {
  color: #2ca6cb;
}
.closeaside a::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0c9";
}
@media only screen and (min-width: 1024px) {
  .closeaside {
    display: block;
    position: absolute;
    right: 25px;
    top: 22px;
  }
}
#asidepart {
  background: #fafafa;
  margin: 1em 0 0;
  padding: 0.5em 2% 1em;
}
@media only screen and (min-width: 1024px) {
  #asidepart {
    position: relative;
    float: left;
    width: 18%;
    margin: 2em 0 0 3%;
  }
}
.asidetitle {
  font-size: 1.1em;
  color: #2ca6cb;
  padding: 0 0 0.3125em 0;
  border-bottom: 0.1875em solid #ccc;
}
.asidetitle a {
  color: #2ca6cb;
}
.asidetitle a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
}
@media only screen and (min-width: 768px) {
  .categorieslist {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .categorieslist {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.categorieslist li {
  border-bottom: 1px solid #ccc;
}
.categorieslist li a {
  display: block;
  padding: 0.5em 5%;
}
.categorieslist li a:hover {
  color: #2ca6cb;
}
.tagslist {
  margin: 1em 0 0;
}
@media only screen and (min-width: 768px) {
  .tagslist {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .tagslist {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.tagslist ul {
  padding: 0.5em 0;
}
.tagslist ul li {
  float: left;
}
.tagslist ul li a {
  display: block;
  margin: 0.3125em;
  padding: 0.125em 0.3125em;
  background: #dbdbdb;
}
.tagslist ul li a:hover {
  color: #2ca6cb;
  background: #e6e6e6;
}
.rsspart {
  background: #2ca6cb;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .rsspart {
    float: left;
    width: 45%;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .rsspart {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.rsspart a {
  color: #fff;
  display: block;
  padding: 0.625em 0;
  text-align: center;
}
.rsspart a:hover {
  color: #2ca6cb;
  background: #fafafa;
}
.rsspart a::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 0.5em;
  content: "\f09e";
}
.archiveslist {
  padding-right: 1em;
}
@media only screen and (min-width: 1024px) {
  .archiveslist {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.archiveslist li {
  font-size: 0.8em;
  line-height: 2em;
}
.archiveslist li a {
  padding: 0.5em;
}
.archiveslist li a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  -o-transition: color 0.25s;
  -ms-transition: color 0.25s;
  transition: color 0.25s;
}
.archiveslist .archive-list-count:before {
  content: "(";
}
.archiveslist .archive-list-count:after {
  content: ")";
}
.archive-list {
  padding: 0.5em 0;
}
.archive-float ul {
  padding: 0;
}
.archive-float li {
  float: left;
  margin: 0.3em;
}
@media only screen and (min-width: 1024px) {
  .archive-float li {
    float: none;
  }
}
@media only screen and (min-width: 768px) {
  .tagcloudlist {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .tagcloudlist {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.tagcloudlist .tagcloudlist a {
  padding: 0.2em;
  display: block;
  float: left;
}
.tagcloudlist .tagcloudlist a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  -o-transition: color 0.25s;
  -ms-transition: color 0.25s;
  transition: color 0.25s;
}
.linkslist {
  margin-top: 0.5em;
}
@media only screen and (min-width: 768px) {
  .linkslist {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .linkslist {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.linkslist ul {
  padding: 0.5em 0;
}
.linkslist ul a {
  font-size: 1em;
  line-height: 1.5;
  display: block;
  padding: 0 3%;
}
.linkslist ul a:hover {
  color: #2ca6cb;
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  -o-transition: color 0.25s;
  -ms-transition: color 0.25s;
  transition: color 0.25s;
}
.weiboshow {
  margin-top: 0.5em;
}
@media only screen and (min-width: 768px) {
  .weiboshow {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .weiboshow {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.weiboshow iframe {
  padding: 0.5em 0;
}
.doubanshow {
  margin-top: 0.5em;
}
@media only screen and (min-width: 768px) {
  .doubanshow {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .doubanshow {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.doubanshow div {
  padding: 0.5em 0;
}
.github-card {
  margin-top: 1.5em;
}
@media only screen and (min-width: 768px) {
  .github-card {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@media only screen and (min-width: 1024px) {
  .github-card {
    width: 100%;
    float: none;
    margin: 1em 0 0;
  }
}
.github-card div {
  padding: 0.5em 0;
}
footer {
  margin-top: 1em;
  background: #1f1f1f;
  padding: 0 2% 0.5em;
}
#footer {
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#footer .line {
  width: 100%;
  height: 14em;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #footer .line {
    width: 10em;
    float: left;
    position: relative;
  }
}
#footer .line span {
  display: block;
  width: 0.5em;
  height: 6.25em;
  border-right: 0.125em solid #fff;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  #footer .line span {
    position: absolute;
    left: 3em;
    margin: 0 0 1.5em;
  }
}
.author {
  width: 6.875em;
  height: 6.875em;
  margin: 0 auto;
  background: no-repeat url("../img/author.jpg") left top;
  background-size: 6.875em 6.875em;
  border-radius: 3.4375em;
  -webkit-transition: -webkit-transform 2s ease-out;
  -moz-transition: -moz-transform 2s ease-out;
  -o-transition: -o-transform 2s ease-out;
  -ms-transition: -ms-transform 2s ease-out;
  transition: transform 2s ease-out;
}
.author:hover {
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  -o-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
@media only screen and (min-width: 768px) {
  .author {
    position: absolute;
    top: 6em;
    margin: 0 0 1.5em;
  }
}
.info {
  font-family: "covered_by_your_graceregular";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 150%;
  line-height: 1.3em;
  width: 90%;
  margin: 0 auto;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .info {
    margin: 4.5em 0 2em 0;
    float: left;
    width: 75%;
  }
}
.social-font {
  width: 100%;
  margin: 0 auto;
  float: left;
  padding-left: 3%;
}
@media only screen and (min-width: 568px) {
  .social-font {
    padding-left: 20%;
  }
}
@media only screen and (min-width: 768px) {
  .social-font {
    width: 15em;
    position: absolute;
    right: -2em;
    top: 3em;
  }
}
.social-font a {
  float: left;
  display: block;
  width: 14%;
  color: #fff;
  font-size: 185%;
  padding: 0.5em;
}
@media only screen and (min-width: 1024px) {
  .social-font a {
    padding: 0.3em;
  }
}
.social-font a:hover:before {
  color: #2ca6cb;
}
.icon-weibo:before,
.icon-github:before,
.icon-twitter:before,
.icon-facebook:before,
.icon-stack-overflow:before,
.icon-email:before,
.icon-google_plus:before,
.icon-linkedin:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-weibo:before {
  content: "\f18a";
}
.icon-github:before {
  content: "\f09b";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-stack-overflow:before {
  content: "\f16c";
}
.icon-email:before {
  content: "\f003";
}
.icon-google_plus:before {
  content: "\f0d5";
}
.icon-linkedin:before {
  content: "\f08c";
}
.icon-douban:before {
  font-family: "fontdiao";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f111";
}
.icon-zhihu:before {
  font-family: "fontdiao";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f142";
}
.copyright {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "covered_by_your_graceregular";
  width: 100%;
  color: #fff;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .copyright {
    float: left;
  }
}
.copyright a {
  color: #2ca6cb;
}
.copyright a:hover {
  color: #2ca6cb;
  text-decoration: underline;
}
.cc-license {
  width: 100%;
  float: left;
  text-align: center;
}
.cc-license .cc-opacity {
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  border-bottom: none;
}
.cc-license .cc-opacity:hover {
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
}
.cc-license img {
  display: inline-block;
}
.article-content pre,
.article-content .highlight,
.article-content .highlight pre {
  background: #eee;
  margin: 0.5em 0;
  padding: 0.5em 2%;
  color: #4d4d4c;
  line-height: 1.5;
  font-size: 0.8em;
  -webkit-border-radius: 0.35em;
  border-radius: 0.35em;
  word-wrap: break-word;
}
@media only screen and (min-width: 568px) {
  .article-content pre,
  .article-content .highlight,
  .article-content .highlight pre {
    font-size: 0.9em;
  }
}
.article-content .highlight .gutter pre,
.article-content .gist .gist-file .gist-data .line-numbers {
  color: #999;
  font-size: 0.4em;
}
@media only screen and (min-width: 568px) {
  .article-content .highlight .gutter pre,
  .article-content .gist .gist-file .gist-data .line-numbers {
    font-size: 0.9em;
    line-height: 1.5;
  }
}
.article-content pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
.article-content .highlight {
  overflow: auto;
  font-size: 0.4em;
}
@media only screen and (min-width: 568px) {
  .article-content .highlight {
    font-size: 0.9em;
  }
}
.article-content .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article-content .highlight table {
  margin: 0;
  width: auto;
}
.article-content .highlight td {
  border: none;
  padding: 0;
}
.article-content .highlight figcaption {
  zoom: 1;
  font-size: 0.85em;
  text-align: left;
  color: #8e908c;
  line-height: 1em;
  padding: 0.5em 0;
  margin-bottom: 0.5em;
}
.article-content .highlight figcaption:before,
.article-content .highlight figcaption:after {
  content: "";
  display: table;
}
.article-content .highlight figcaption:after {
  clear: both;
}
.article-content .highlight figcaption a {
  float: right;
}
.article-content .highlight .gutter pre {
  text-align: right;
  padding-right: 1.5em;
}
.article-content .highlight .line {
  height: 20px;
}
.article-content .gist {
  margin: 0.5em 0;
  background: #eee;
  padding: 1em 2%;
  -webkit-border-radius: 0.35em;
  border-radius: 0.35em;
}
.article-content .gist .gist-file {
  border: none;
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  margin: 0;
}
.article-content .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-content .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 1.5em 0 0;
}
.article-content .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-content .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
  background: #eee;
}
.article-content .gist .gist-file .gist-meta {
  background: #eee;
  color: #8e908c;
  font: 0.85em "Georgia", serif;
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
}
.article-content .gist .gist-file .gist-meta a {
  color: #2ca6cb;
  font-weight: normal;
}
.article-content .gist .gist-file .gist-meta a:hover {
  color: #2ca6cb;
}
pre .comment,
pre .title {
  color: #8e908c;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #c82829;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #f5871f;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #718c00;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #718c00;
}
pre .css .hexcolor {
  color: #3e999f;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #4271ae;
}
pre .keyword,
pre .javascript .function {
  color: #8959a8;
}
.gallery {
  overflow: hidden;
  position: relative;
}
.gallery:hover .control {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.gallery img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.gallery .control {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
.gallery .prev,
.gallery .next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}
.gallery .prev:before,
.gallery .next:before {
  position: absolute;
  font: 24px/1 "FontAwesome";
  text-align: center;
  width: 24px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
  color: #fff;
  margin-top: -12px;
  top: 50%;
}
.gallery .prev {
  left: 0;
}
.gallery .prev:before {
  content: '\f053';
  left: 10px;
}
.gallery .next {
  right: 0;
}
.gallery .next:before {
  content: '\f054';
  right: 10px;
}
#totop {
  position: fixed;
  bottom: 5em;
  right: 1em;
  cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  #totop {
    display: none !important;
  }
}
.banner img {
  width: 100%;
  max-width: 100%;
}