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: 99.5%;
  vertical-align: baseline;
  line-height: 25px;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
  line-height: 12.5px
}
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: #f5f5f5;
  font-family: "Helvetica Neue", "Helvetica", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-size: 99%;
  color: #817c7c;
  line-height: 1.6;
}
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);
  }
}
@-ms-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: #2ca6cb;
  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: 96%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  body >header >div {
    width: 96%;
  }
}
@media only screen and (min-width: 1280px) {
  body >header >div {
    width: 1228.8px;
  }
}
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: 199%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  #textlogo h1.site-name {
    font-size: 239%;
  }
}
@media only screen and (min-width: 1024px) {
  #textlogo h1.site-name {
    font-size: 279%;
  }
}
#textlogo h2.blog-motto {
  font-size: 0.7em;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  #textlogo h2.blog-motto {
    font-size: 99%;
  }
}
@media only screen and (min-width: 1024px) {
  #textlogo h2.blog-motto {
    font-size: 109%;
  }
}
.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;
}

.shownav {
  max-height: 40em;
}
.search {
  padding: 0.1em 0 0 1em;
}
.search input {
  -webkit-appearance: textfield;
  font-size: 0.87em;
  line-height: 1.8;
  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 */

#main section.post {
  background: #fff;
  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.1;
}
#main section.post a p {
  color: #817c7c;
}
#main section.post a time {
  color: #817c7c;
  display: block;
  margin: 0.5em 0;
  font-size: 0.9em;
}
.moveMain {
  margin-left: 10% !important;
}
#page-nav {
  background: #fff;
  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;
  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 #2ca6cb;
}
#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: 99%;
  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: #fff;
  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: 119%;
}
.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: #2ca6cb !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: #fff;
}
.post a,
.page a {
  color: #2ca6cb;
}
.post a:hover,
.page 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: 149%;
  line-height: 1.6;
  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: 179%;
    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.1em;
    font-size: 0.9em;
  }
}
article header.article-info >p.article-time:before {
  font-family: "FontAwesome";
  font-size: 109%;
  content: "\f017";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article .article-content {
  padding: 0em 0%;
  color: #333;
  font-size: 99%;
}
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;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 0.1em;
  text-shadow: 0 1px 0 #fff;
  line-height: 1.6;
  white-space: nowrap;
}
article .article-content h1,
article .article-content h2 {
  font-size: 159%;
  line-height: 25px;
  padding-bottom: 0.3em;
  margin-top: 1.2em;
  border-bottom: 2px solid #dbdbdb;
}
article .article-content h3,
article .article-content h4,
article .article-content h5,
article .article-content h6 {
  font-size: 129%;
  margin-top: 0.6em;
}
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 4%;
  padding-left: 1%;
  line-height: 1.6;
  font-size: 99%;
}
article .article-content blockquote footer {
  background: #fff;
  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: 100%;
  padding-top: 0.4em;
  line-height: 1.6;
  margin-bottom: 0em;
  padding-bottom: -0.5em;
}
@media only screen and (min-width: 768px) {
  article .article-content ul,
  article .article-content ol {
    padding-left: 1em;
  }
}
article .article-content ul li {
  list-style: disc;
  text-align: match-parent;
  line-height: 1.6;
  margin-bottom: 0px;
  font-size: 100%;
  padding-bottom: -0.5em;
}
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 {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  background: #eee;
  color: #d14;
  border: 1px solid #d6d6d6;
  padding: 0 0px;
  margin: 0 0px;
  font-size: 100%;
  white-space: nowrap;
  padding-bottom: 0em;
  margin-bottom: 0px;
  text-shadow: 0 1px #fff;
  -webkit-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
}
article .article-content p {
  line-height: 1.6;
  margin-top: 0em;
}
@media only screen and (min-width: 1024px) {
  article .article-content p {
    margin-top: 0em;
  }
}
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 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: 90%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 90%;
}
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: #fff;
  padding: 0 4%;
  margin: 0;
  border-top: 1px solid #dbdbdb;
}
.article-share {
  padding: 0.5em 0;
  margin-top: 0.3em;
  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;
  }
}
.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: 99%;
  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;
  -webkit-border-radius: 3px;
  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%;
  }
}
.article-tags {
  color: #d6d6d6;
}
@media only screen and (min-width: 768px) {
  .article-tags {
    width: 40%;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .article-categories {
    width: 20%;
  }
}
.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: #f3f3f3;
  margin: 2em 0 0 0.5em;
  padding: 1em;
  border-radius: 7px 7px 7px 7px;
  box-shadow: 2px 1px 2px #a7a8ad;
}
.toc-article strong {
  padding: 0.3em 0;
}
.toc-article ul li {
  list-style: disc;
  text-align: match-parent;
  margin: 0em 0;
}
.toc-article ol li {
  list-style-type: decimal;
  margin: 0em 0;
}
#toc {
  line-height: 1em;
  font-size: 0.8em;
  float: right;
}
#toc .toc {
  padding: 0;
  line-height: 12.5px
}
#toc .toc li {
  list-style-type: none;
  line-height: 12.5px
}
#toc .toc-child {
  padding-left: 1.5em;
  line-height: 12.5px
}
#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: fixed;
  right: 7.5%;
  top: 260px;
}
.openaside a {
  display: block;
  color: #fff;
  border: 1px solid #fff;
  -webkit-border-radius: 5px;
  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;
}
.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;
  }
}
.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: #fff;
}
.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: #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.6;
  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;
}

.article-content pre,
.article-content .highlight,
.article-content .highlight pre {
  background: #2d2d2d;
  margin: 0.5em 0;
  padding: 0.5em 2%;
  color: #ccc;
  line-height: 1.6;
  font-size: 0.1em;
  -webkit-border-radius: 0.35em;
  -webkit-border-radius: 0.35em;
  border-radius: 0.35em;
}
@media only screen and (min-width: 568px) {
  .article-content pre,
  .article-content .highlight,
  .article-content .highlight pre,
.article-content pre,
.article-content .highlight,
.article-content .highlight pre {
    font-size: 0.95em;
  }
}
.article-content .highlight .gutter pre,
.article-content .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.95em;
  line-height: 1.6;
}
.article-content pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  background: #f5f5f5;
  border: 1px solid #ccc;
}
.article-content pre code {
  color: #333;
  background: none;
  text-shadow: none;
  padding: 0;
}
.article-content .highlight {
  overflow: auto;
}
.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: #999;
  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: #2d2d2d;
  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: #2d2d2d;
  color: #999;
  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: #999;
}
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: #f2777a;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #f99157;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #9c9;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #9c9;
}
pre .css .hexcolor {
  color: #6cc;
}
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: #69c;
}
pre .keyword,
pre .javascript .function {
  color: #c9c;
}
.article-gallery {
  background: #fff;
  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;
}
#totop {
  position: fixed;
  bottom: 5em;
  right: 1em;
  cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  #totop {
    display: none !important;
  }
}

#EntryTag {
    margin-top: 20px;
    font-size: 9pt;
    color: gray;
}

.topicListFooter {
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
    text-shadow: 1px 1px 0 #fff;
    color: #000;
}

#divRefreshComments {
    text-align: right;
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 9pt;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

ul {
    word-break: break-all;
}

li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

a:link {
    color: #2eb1e8;
    text-decoration: none;
}

a:visited {
    color: #2eb1e8;
    text-decoration: none;
}

a:hover {
    color: #f60;
    text-decoration: underline;
}

a:active {
    color: #2eb1e8;
    text-decoration: none;
}

.clear {
    clear: both;
}

#home {
}

#header {
    background: #2ca6cb;
}

#blogTitle {
	height: 150px;
	clear: both;
	width: 94%;
	margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
	#blogTitle {
		height: 150px;
		clear: both;
		width: 94%;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 1280px) {
	#blogTitle {
		height: 150px;
		clear: both;
		width: 1203.2px;
		margin: 0 auto;
	}
}

#blogTitle h1 {
    font-weight: bold;
    font-size: 2em;
    line-height: 2em;
    margin-top: 40px;
    margin-left: 10px;
    float: left;
	width: 182px;
}

#blogTitle h1 a {
    color: #fff;
    text-shadow: 0 0 5px #fff;
    text-decoration: none;
}

#blogTitle h2 {
    color: #ffffff;
    margin-left: 2.5%;
    margin-top: 10px;
    line-height: 1.5em;
    width: 224;
    float: left;
}

@media only screen and (min-width: 470px){
	#blogTitle h2 {
		color: #ffffff;
		margin-left: 0%;
		margin-top: 70px;
		line-height: 1.5em;
		float: left;
	}
}


#blogLogo {
    float: right;
}

#navigator {
    height: 50px;
    clear: both;
    width: 94%;
    margin: 0 auto;
}
@media only screen and (min-width: 1280px) {
	#navigator {
		height: 55px;
		clear: both;
		width: 1203.2px;
		margin: 0 auto;
	}
}

#navList {
    min-height: 20px;
    float: left;
    margin-left: 2.5%;
	width: 100%;
}

#navList li {
    float: left;
}

#navList a {
    position: relative;
    font-weight: bolder;
    display: block;
    height: 22px;
    float: left;
    text-align: center;
    padding: .05em 1em;
    font-size: 1.3em;
}

#navList .aHeaderXML {
    display: none;
}

#navList a:link, #navList a:visited, #navList a:active {
    color: #ffffff;
}

#navList a:hover {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 3px #fff;
}

#navList a:hover:after {
    position: absolute;
    bottom: -20px;
    left: 37%;
    content: "◆";
    color: #d2d8de;
    text-shadow: none;
}

.blogStats {
    float: right;
    color: #ffffff;
    margin-top: 0px;
    margin-right: 2px;
    text-align: right;
	font-size: 0em;
}
@media only screen and (min-width: 768px) {
	#main {
		clear: both;
		width: 98%;
		margin: 10px auto;
	}
}

@media only screen and (min-width: 1024px) {
	#main {
		clear: both;
		width: 96%;
		margin: 10px auto;
	}
}

@media only screen and (min-width: 1280px) {
	#main {
		clear: both;
		width: 1228.8px;
		margin: 10px auto;
	}
}

#main:after {
    content: "";
    clear: both;
}

#mainContent .forFlow {
    float: none;
    width: auto;
}
@media only screen and (min-width: 768px) {
	#mainContent {
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		float: left;
		width: 100%;
	}
}
@media only screen and (min-width: 1024px) {
	#mainContent {
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		float: left;
		width: 75%;
	}
}
@media only screen and (min-width: 1280px) {
	#mainContent {
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		float: left;
		width: 75%;
	}
}



.day {
    color: #666;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fff;
    min-height: 10px;
    _height: 10px;
    margin: 0 5px 20px 80px;
    padding: 5px 5px 5px 15px;
    position: relative;
    border-radius: 7px 7px 7px 7px;
}

.day:after {
    content: "◆";
    color: #fff;
    font-size: 30px;
    position: absolute;
    left: -14px;
    top: 15px;
}

.dayTitle {
    width: 64px;
    height: 64px;
    color: #666;
    font-weight: bold;
    line-height: 1.5em;
    font-size: 110%;
    clear: both;
    text-align: right;
    position: absolute;
    left: -80px;
    top: 20px;
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    text-shadow: 0 0 2px #a7a8ad;
    text-indent: 9px;
}

.postTitle {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5em;
    width: 100%;
    clear: both;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #2eb1e8;
}

.postTitle a:hover {
    color: #f60;
    text-decoration: none;
}

.postCon {
    width: 100%;
    clear: both;
    padding: 10px 0;
    text-indent: 2em;
}

.postDesc {
    float: right;
    width: 100%;
    clear: both;
    text-align: right;
    padding-right: 5px;
    color: #a8b1ba;
    margin-top: 5px;
}

.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #666;
}

.postDesc a:hover {
    color: #f60;
    text-decoration: none;
}

.postSeparator {
    clear: both;
    height: 1px;
    border-top: 1px dotted #666;
    width: 100%;
    clear: both;
    float: right;
    margin: 0 auto 15px auto;
}
#sideBar {
	color: #a8b1ba;
	width: 100%;
	min-height: 200px;
	float: right;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}
@media only screen and (min-width: 768px) {
	#sideBar {
		color: #a8b1ba;
		width: 100%;
		min-height: 200px;
		float: right;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
}

@media only screen and (min-width: 1024px) {
	#sideBar {
		color: #a8b1ba;
		width: 24%;
		min-height: 200px;
		float: right;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
}

@media only screen and (min-width: 1280px) {
	#sideBar {
		color: #a8b1ba;
		width: 24%;
		min-height: 200px;
		float: right;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
}

#sideBar a:link, #sideBar a:visited, #sideBar a:active {
    color: #567286;
}

#sideBar a:hover {
    color: #f60;
    text-decoration: none;
}
.newsItem {
	border-radius: 7px 7px 7px 7px;
	box-shadow: 1px 1px 2px #ffffff;
	background: #ffffff;
	margin: 0 5px 20px;
	padding: 5px;
	text-indent: 2em;
	width: 92%;
	float: none;
	box-shadow: 1px 1px 2px #a7a8ad;
}
@media only screen and (min-width: 768px) {
	.newsItem {
		border-radius: 7px 7px 7px 7px;
		box-shadow: 1px 1px 2px #ffffff;
		background: #ffffff;
		margin: 0px 0px 0px 2.5%;
		padding: 5px;
		text-indent: 2em;
		width: 45%;
		float: left;
		box-shadow: 1px 1px 2px #a7a8ad;
	}
}
@media only screen and (min-width: 1024px) {
	.newsItem {
		box-shadow: 1px 1px 2px #a7a8ad;
		border-radius: 7px 7px 7px 7px;
		box-shadow: 1px 1px 2px #ffffff;
		background: #ffffff;
		margin: 0 5px 20px;
		padding: 5px;
		text-indent: 2em;
		width: 92%;
		float: none;
	}
}

.newsItem .catListTitle {
    display: none;
}

.catListTitle {
    color: #fff;
    font-size: 1.2em;
    border-bottom: 1px solid #dadfe1;
    height: 1.5em;
    line-height: 1.5em;
    background: #2eb1e8;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 5px;
    text-indent: 1em;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
#blog-calendar {
	box-shadow: 1px 1px 2px #a7a8ad;
	background: #ffffff;
	margin: 5px 5px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	padding: 5px;
	width: 92%;
	float: none;
}
@media only screen and (min-width: 768px) {
	#blog-calendar {
		box-shadow: 1px 1px 2px #a7a8ad;
		background: #ffffff;
		margin: 0px 2.5% 0px 0px;
		width: 45%;
		float: right;
		height: 205px;
		padding: 5px;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
	}
}
@media only screen and (min-width: 1024px) {
	#blog-calendar {
		box-shadow: 1px 1px 2px #a7a8ad;
		background: #ffffff;
		margin: 5px 5px;
		padding: 5px;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
		width: 92%;
		float: none;
	}
}
#blog-news {
    background: #ffffff;
    margin: 5px 5px;
}
#calendar {
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #ffffff;
    margin: 20px 5px;
}

#calendar .Cal {
    width: 94%;
    line-height: 1.5em;
    border: none;
    color: #000000;
    background: #ffffff;
    margin: 2%;
}

#calendar table a:link, #calendar table a:visited, #calendar table a:active {
    font-weight: bold;
}

#calendar table a:hover {
    color: #000000;
    text-decoration: none;
    background-color: #ffffff;
}

.CalTodayDay {
    color: #f60;
}
.CalOtherMonthDay {
    color: #E0E0E0;
}

#calendar .CalNextPrev a:link, #calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {
    font-weight: bold;
    color: #000000;
}

.CalDayHeader {
    border-bottom: 1px solid #000000;
}

.CalTitle {
    width: 100%;
    color: #000;
    border-bottom: 1px solid #666;
}

.divRecentComment {
    text-indent: 2em;
    color: #666;
}

#sideBarMain ul {
    line-height: 1.5em;
}

.catListEssay, .catListLink, .catListNoteBook, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListArticleArchive, .catListImageCategory, .mySearch, .catListComment, .catListView, .catListFeedback {
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fafcfd;
    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 {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.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 {
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px;
}

.catListComment .divRecentCommentAticle {
    padding: 5px;
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    line-height: 1.5em;
}

.catListComment .divRecentComment {
    display: none;
}

#topics {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    min-height: 200px;
    padding: 0 0 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    padding: 5px;
    margin: 0 5px 20px 0;
}

#blog-comments-placeholder {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    min-height: 200px;
    padding: 0 0 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    padding: 5px;
    margin: 0 5px 20px 0;
}

#topics .postTitle {
    text-align: center;
    width: 100%;
}

#topics .postTitle a {
    font-size: 1.5em;
    font-weight: bold;
    color: #2eb1e8;
    text-shadow: 0 0 1px #a7a8ad;
    line-height: 1.5em;
}

.postBody {
    padding: 5px;
    line-height: 1.5;
    color: #444;
    margin: 0px 0.5%;
}

#EntryTag a {
    margin-left: 5px;
}

#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
    color: #666;
}

#EntryTag a:hover {
    color: #f60;
}

#topics .postDesc {
    width: 100%;
    text-align: right;
    padding-right: 5px;
    margin-top: 5px;
}

#AjaxHolder_UpdatePanel1 {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px 10px 0;
    padding: 5px;
}

.feedback_area_title {
    display: none;
}

.louzhu {
}

.feedbackListSubtitle {
    color: #666;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
    color: #666;
    font-weight: normal;
}

.feedbackListSubtitle a:hover {
    color: #f60;
    text-decoration: none;
}

.feedbackManage {
    width: 200px;
    text-align: right;
    float: right;
}

.feedbackCon {
    margin: 30px;
    margin-top: 10px;
    position: relative;
}

.feedbackCon:after {
    bottom: -46px;
    color: #ccc;
    content: "”";
    font-family: "黑体";
    font-size: 47px;
    font-weight: bold;
    position: absolute;
    right: -42px;
}

.feedbackCon:before {
    color: #ccc;
    content: "“";
    font-family: "黑体";
    font-size: 47px;
    font-weight: bold;
    left: -43px;
    position: absolute;
    top: -20px;
}

#divRefreshComments {
    text-align: right;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0 #fff;
}

.commentform {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px 10px 0;
    padding: 5px;
}

#AjaxHolder_PostComment_divCommnentArea table tbody tr {
    width: 100%;
    padding: 5px;
}

.commenttb {
    width: 320px;
}

.entrylistTitle, .PostListTitle, .thumbTitle {
    display: none;
}

#myposts, .entrylist, .gallery, #profile {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px 10px 0;
    padding: 5px;
}

.entrylistDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.entrylistItem {
    min-height: 20px;
    _height: 20px;
    margin-bottom: 30px;
    padding-bottom: 5px;
    width: 100%;
}

.entrylistPosttitle {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #666;
    line-height: 1.5em;
    padding-left: 5px;
}

.entrylistPosttitle a:hover {
    text-decoration: none;
}

.entrylistPostSummary {
    margin-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
}

.entrylistItemPostDesc {
    text-align: right;
    color: #666;
}

.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
    color: #666;
}

.entrylistItemPostDesc a:hover {
    color: #f60;
}

.entrylist .postSeparator {
    clear: both;
    width: 100%;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
}

.pager {
    text-align: right;
    margin-right: 10px;
}

.PostList {
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px;
    color: #999;
}

.pfl_feedback_area_title {
    text-align: right;
    line-height: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
}

.pfl_feedbackItem {
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
}

.pfl_feedbacksubtitle {
    width: 100%;
    border-bottom: 1px dotted #666;
    height: 1.5em;
}

.pfl_feedbackname {
    float: left;
}

.pfl_feedbackManage {
    float: right;
}

.pfl_feedbackCon {
    color: #000;
    padding-top: 5px;
    padding-bottom: 5px;
}

.pfl_feedbackAnswer {
    color: #f40;
    text-indent: 2em;
}

.tdSentMessage {
    text-align: right;
}

.errorMessage {
    width: 300px;
    float: left;
}

.mySearch {
    padding-bottom: 2px;
}
@media only screen and (min-width: 768px) {
	.mySearch {
		padding-top: 250px;
		padding-bottom: 2px;
		background: #f5f5f5;
		box-shadow: 1px 1px 2px #f5f5f5;
	}
}
@media only screen and (min-width: 1024px) {
	.mySearch {
		border-radius: 7px 7px 7px 7px;
		box-shadow: 1px 1px 2px #a7a8ad;
		background: #fafcfd;
		margin: 20px 5px;
		padding-top: 0px;
	}
}

.mySearch div {
    padding: 5px;
}

.input_my_zzk {
    width: 150px;
}

.divPhoto {
    border: 1px solid #ccc;
    padding: 2px;
    margin-right: 10px;
}

.thumbDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}

#footer {
    text-align: center;
    min-height: 15px;
    _height: 15px;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #fff;
}

.personInfo {
    margin-bottom: 20px;
}

.pages {
    text-align: right;
}

#green_channel {
    width: auto;
}

#cnblogs_post_body p,
#cnblogs_post_body div{
    line-height: 25px;
}
.toc-number{
    font-size: 0%;
}