style.css

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");
}
/* Public style */
* {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
body {
  background: #ddd;
  font-family: "Microsoft YaHei", "Helvetica Neue", "Helvetica", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-size: 100%;
  color: #817c7c;
  line-height: 1.5;
  min-height: 100%;
}
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: #009fcc;
  color: #fff;
  padding: 1em 0 0.8em;
}
@media only screen and (min-width: 1024px) {
  body >header {
    padding: 1.8em 0 1.5em;
  }
}
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: 75%;
  margin-left: 0.5em;
}
#textlogo h1.site-name {
  width: 86%;
  font-family: "covered_by_your_graceregular";
  font-size: 200%;
  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: 1em;
  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%;
  padding-top: 0.5em;
  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: #fff;
  color: #009fcc;
}
.shownav {
  max-height: 40em;
}
.search {
  padding: 0.1em 0 0 1em;
}
.search input {
  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 {
  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 #009fcc;
}
#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.5em;
}
.moveMain {
  margin-left: 10% !important;
}
#page-nav {
  background: #fafafa;
  text-align: center;
  overflow: hidden;
}
#page-nav a,
#page-nav span {
  display: inline-block;
  padding: 0.5em 1em;
}
#page-nav a {
  color: #2ca6cb;
}
#page-nav a:hover {
  background: #ccc;
  color: #009fcc;
}
#page-nav .prev {
  float: left;
  border-left: 0.5em solid #ccc;
  -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:hover {
  border-left: 0.5em solid #009fcc;
}
#page-nav .next {
  float: right;
}
#page-nav .page-number {
  display: none;
}
@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;
  width: 97%;
  padding: 2em 0 2em 3%;
  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: #009fcc;
  -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: #009fcc !important;
}
@media only screen and (min-width: 768px) {
  .archive-part {
    min-height: 200px;
  }
}
@media only screen and (min-width: 1024px) {
  .archive-part {
    width: 78% !important;
    float: right;
    margin-left: 2% !important;
  }
}
.archive-part section.post {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .archive-part section.post {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 1024px) {
  .archive-part section.post {
    width: 33.333%;
  }
}
@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 {
  background: #fafafa;
}
.post a,
.page a {
  color: #2ca6cb;
}
.post a:hover,
.page a:hover {
  color: #009fcc;
}
@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 #009fcc;
}
@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 {
    float: right;
    margin-right: 1em;
    padding-top: 0.5em;
    font-size: 0.9em;
  }
}
article header.article-info >p.article-time:before {
  font-family: "FontAwesome";
  font-size: 110%;
  content: "\f017";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article .author-right {
  padding: 1.5em 8%;
  line-height: 1.5em;
  font-size: 80%;
  border: solid 1px #ccc;
  background: #ccc;
}
article .article-content {
  padding: 1.5em 4%;
}
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;
}
article .article-content h3,
article .article-content h4,
article .article-content h5,
article .article-content h6 {
  font-size: 140%;
  border-bottom: dashed 1px #999;
}
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: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0.3em 0;
  margin-top: 2em;
  margin-bottom: 0.2em;
}
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 #009fcc;
  margin: 0.65em 0 0.65em 4%;
  padding-left: 1%;
  line-height: 1.5;
  font-size: 110%;
}
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: 2em;
  font-size: 105%;
  background: #ddd;
  color: #555;
}
@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;
  margin: 0;
}
article .article-content ol li {
  list-style-type: decimal;
  margin: 0;
}
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 {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  background: #eee;
  color: #747070;
  border: 1px solid #d6d6d6;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 90%;
  white-space: nowrap;
  text-shadow: 0 1px #fff;
}
article .article-content p {
  font-size: font-size-5;
  line-height: 1.7;
  margin-top: 0.7em;
  margin-bottom: 0.2em;
  color: #333;
}
@media only screen and (min-width: 1024px) {
  article .article-content p {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }
}
article .article-content img,
article .article-content video,
article .article-content figure img {
  max-width: 100%;
  display: block;
  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 figcaption,
article .article-content .caption {
  text-align: center;
  display: block;
  font-size: 0.9em;
  font-weight: blod;
}
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 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
article .article-content table th {
  font-weight: bold;
  border-bottom: 3px solid #dbdbdb;
  padding-bottom: 0.5em;
}
article .article-content table td {
  border-bottom: 1px solid #dbdbdb;
  padding: 10px 0;
}
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 {
  overflow: hidden;
  clear: both;
}
@media only screen and (min-width: 568px) {
}
@media only screen and (min-width: 768px) {
}
.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: 100%;
  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: #eb182c;
  text-shadow: 0 1px #bf1121;
}
.article-share-qrcode:before {
  content: "\f029";
}
.article-share-qrcode:hover {
  background: #49ae0f;
  text-shadow: 0 1px #3a8b0c;
}
.article-back-to-top:before {
  content: "\f062";
}
.article-back-to-top:hover {
  background: #762c54;
  text-shadow: 0 1px #5e2343;
}
.qrcode {
  width: 15em;
  height: 15em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7.5em;
  margin-left: -7.5em;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  position: fixed;
  text-align: center;
  visibility: hidden;
  z-index: 10;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
@media only screen and (min-width: 1024px) {
  .qrcode {
    width: 20em;
    height: 20em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10em;
    margin-left: -10em;
    position: fixed;
  }
}
.qrcode span {
  display: block;
  width: 80%;
  height: 1.5em;
  font-size: 80%;
  float: left;
}
.qrcode span:before {
  content: none;
}
.qrcode a {
  display: block;
  width: 16%;
  height: 1.5em;
  float: left;
}
.qrcode img {
  width: 90%;
  height: 90%;
}
.qrclose:before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f057";
  color: #ccc;
}
.qrclose:hover:before {
  color: #2ca6cb !important;
}
.overlay {
  display: none !important;
}
.overlay:target+.qrcode {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  visibility: visible;
}
.article-tags,
.article-categories {
  padding: 0.5em 0;
  float: left;
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .article-tags,
  .article-categories {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .article-tags,
  .article-categories {
    width: 30%;
  }
}
.article-tags {
  color: #d6d6d6;
}
.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;
}
.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: 0.6em;
}
.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: "\f100";
  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: "\f101";
  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: "\f101";
    padding-left: 0.5em;
  }
}
section.comment {
  padding: 0 4%;
  margin: 1em 0;
}
.toc-article {
  background: #eee;
  margin: 2em 0 0 2em;
  padding: 1em;
}
.toc-article strong {
  padding: 0.3em 0;
  line-height: 1.5em;
}
#toc {
  line-height: 1em;
  font-size: 0.8em;
  float: right;
}
#toc .toc {
  padding: 0;
}
#toc .toc li {
  list-style-type: none;
  line-height: 1.3em;
  background: #eee;
}
#toc .toc-child {
  padding-left: 1.5em;
  background: #eee;
}
#toc.toc-aside {
  display: none;
  width: 13%;
  position: fixed;
  right: 2%;
  top: 320px;
  overflow: hidden;
  line-height: 1.5em;
  font-size: 1em;
  color: #000;
  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: #009fcc;
  -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: #009fcc !important;
}
.openaside {
  display: none;
  position: fixed;
  right: 7.5%;
  top: 260px;
}
.openaside a {
  display: block;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #009fcc;
  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: #009fcc;
}
.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: 2em 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: #009fcc;
  -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: #009fcc;
}
.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: #009fcc;
  background: #e6e6e6;
}
.rsspart {
  background: #009fcc;
  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: #009fcc;
  background: #fafafa;
}
.rsspart a::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 0.5em;
  content: "\f09e";
}
@media only screen and (min-width: 768px) {
  .archiveslist {
    width: 45%;
    float: left;
    margin: 0 5% 0 0;
  }
}
@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: #009fcc;
  -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-link {
  padding: 0.5em;
}
.archiveslist .archive-list-link:hover {
  color: #009fcc;
  -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: #009fcc;
  -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: #009fcc;
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  -o-transition: color 0.25s;
  -ms-transition: color 0.25s;
  transition: color 0.25s;
}
footer {
  margin-top: 1em;
  background: #444;
  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;
  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;
  -webkit-background-size: 6.875em 6.875em;
  -moz-background-size: 6.875em 6.875em;
  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;
  width: 90%;
  font-size: 120%;
  line-height: 2em;
  text-align: center;
  margin: 0 auto;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .info {
    margin: 3em 0 2em 0;
    float: left;
    width: 100%;
  }
}
.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: 18em;
    position: absolute;
    right: -3em;
    top: 3em;
  }
}
.social-font a {
  float: left;
  display: block;
  width: 14%;
  color: #fff;
  font-size: 180%;
  padding: 0.5em;
}
@media only screen and (min-width: 1024px) {
  .social-font a {
    padding: 0.3em;
  }
}
.social-font a:hover:before {
  color: #2ca6cb;
}
.social-font a[title="weibo"]::before,
.social-font a[title="twitter"]::before,
.social-font a[title="github"]::before,
.social-font a[title="facebook"]::before,
.social-font a[title="linkedin"]::before {
  font-family: "FontAwesome";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social-font a[title="weibo"]::before {
  content: "\f18a";
}
.social-font a[title="twitter"]::before {
  content: "\f099";
}
.social-font a[title="github"]::before {
  content: "\f09b";
}
.social-font a[title="facebook"]::before {
  content: "\f09a";
}
.social-font a[title="linkedin"]::before {
  content: "\f08c";
}
.copyright {
  font-family: "Microsoft YaHei", "Helvetica Neue", "Helvetica", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-size: 0.6em;
  width: 100%;
  color: #fff;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .copyright {
    float: left;
  }
}
.copyright a {
  color: #fff;
}
.copyright a:hover {
  color: #2ca6cb;
}
.article-content pre,
.article-content .highlight {
  background: #1d1f21;
  margin: 0.5em 0;
  padding: 1em 2%;
  overflow: auto;
  color: #c5c8c6;
  line-height: 1.5;
  font-size: 100%;
}
.article-content .highlight .gutter pre,
.article-content .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.85em;
  line-height: 1.5;
  font-size: 100%;
}
.article-content pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
.article-content pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.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: #969896;
  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 .gist {
  margin: 0.5em 0;
  background: #1d1f21;
  padding: 1em 2%;
}
.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;
}
.article-content .gist .gist-file .gist-meta {
  background: #1d1f21;
  color: #969896;
  font: 0.85em "Georgia", serif, "Microsoft YaHei";
  padding: 0;
  margin-top: 1em;
  text-shadow: none;
}
.article-content .gist .gist-file .gist-meta a {
  color: #2ca6cb;
  font-weight: normal;
}
.article-content .gist .gist-file .gist-meta a:hover {
  color: #009fcc;
}
pre .comment {
  color: #969896;
}
pre .title,
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .tag .title,
pre .pi,
pre .doctype,
pre .id,
pre .class,
pre .pseudo {
  color: #c66;
}
pre .number,
pre .preprocessor,
pre .pragma,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #de935f;
}
pre .class .title,
pre .rules .attribute {
  color: #f0c674;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .symbol,
pre .cdata {
  color: #b5bd68;
}
pre .css .hexcolor {
  color: #8abeb7;
}
pre .function,
pre .function .title,
pre .decorator,
pre .python .title,
pre .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #81a2be;
}
pre .keyword,
pre .javascript .function {
  color: #b294bb;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.ds-highlight {
  color: #2ca6cb !important;
}
.ds-highlight:hover {
  color: #009fcc !important;
}
.ds-avatar {
  background: #fafafa !important;
}
.ds-avatar img {
  width: 54px !important;
  height: 54px !important;
  border: 2px solid #dbdbdb !important;
  border-radius: 27px !important;
  -webkit-transition: -webkit-transform 0.5s ease-out !important;
  -moz-transition: -moz-transform 0.5s ease-out !important;
  -o-transition: -o-transform 0.5s ease-out !important;
  -ms-transition: -ms-transform 0.5s ease-out !important;
  transition: transform 0.5s ease-out !important;
}
.ds-avatar img:hover {
  -webkit-transform: rotateZ(360deg) !important;
  -moz-transform: rotateZ(360deg) !important;
  -o-transform: rotateZ(360deg) !important;
  -ms-transform: rotateZ(360deg) !important;
  transform: rotateZ(360deg) !important;
  -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;
  box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;
}
.ds-children .ds-avatar img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 15px !important;
  -webkit-transition: -webkit-transform 0.5s ease-out !important;
  -moz-transition: -moz-transform 0.5s ease-out !important;
  -o-transition: -o-transform 0.5s ease-out !important;
  -ms-transition: -ms-transform 0.5s ease-out !important;
  transition: transform 0.5s ease-out !important;
  border: 1px solid #dbdbdb !important;
}
.ds-children .ds-avatar img:hover {
  -webkit-transform: rotateZ(360deg) !important;
  -moz-transform: rotateZ(360deg) !important;
  -o-transform: rotateZ(360deg) !important;
  -ms-transform: rotateZ(360deg) !important;
  transform: rotateZ(360deg) !important;
  -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;
  box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;
}
.ds-replybox img {
  width: 30px !important;
  height: 30px !important;
}
.ds-comment-body {
  padding-left: 80px !important;
}
.ds-children .ds-comment-body {
  padding-left: 60px !important;
}
.ds-post {
  border-top: none !important;
  margin-top: 0.5em !important;
}
.ds-comments {
  padding-bottom: 1em !important;
}
textarea {
  color: #817c7c !important;
  background: #fff !important;
}
textarea::-webkit-input-placeholder {
  color: #817c7c !important;
}
textarea::-moz-placeholder {
  color: #817c7c !important;
}
.article-gallery {
  background: #fafafa;
  position: relative;
}
.article-gallery-photos {
  position: relative;
  overflow: hidden;
}
.article-gallery-img {
  display: none;
  max-width: 100%;
img
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.article-gallery-img:first-child {
  display: block;
}
.article-gallery-img .loaded {
  position: absolute;
  display: block;
}