@import url("//fonts.googleapis.com/css?family=Lato:400,400italic");
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  src: url("font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("font/fontawesome-webfont.woff") format('woff'), url("font/fontawesome-webfont.ttf") format('truetype'), url("font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #eee;
  color: #444;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 14px;
  text-shadow: 0 0 1px transparent;
}
@media screen and (max-width: 1260px) {
  body {
    margin: 0 12px;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 13px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
}
a {
  text-decoration: none;
  color: #258fb8;
}
a:hover {
  text-decoration: underline;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.inner {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1260px) {
  .inner {
    width: 100%;
  }
}
#main-col {
  width: 900px;
}
@media screen and (max-width: 1260px) {
  #main-col {
    width: 100%;
    margin-right: -300px;
  }
}
@media screen and (max-width: 900px) {
  #main-col {
    margin-right: 0;
    float: none;
  }
}
@media screen and (max-width: 1260px) {
  #wrapper {
    margin-right: 300px;
  }
}
@media screen and (max-width: 900px) {
  #wrapper {
    margin-right: 0;
  }
}
#header {
  margin-bottom: 30px;
}
#header #nav-top {
  background: #363636;
  text-shadow: 0 0 1px #fff;
  padding-top: 8px;
  padding-bottom: 5px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 600px) {
  #header #nav-top {
    text-align: center;
  }
}
#header #nav-top a {
  color: #fff;
}
#header #nav-top a:hover {
  color: #258fb8;
  text-decoration: none;
}
#header #nav-top h1 {
  color: #fff;
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1;
}
#header #nav-top h2 {
  font-weight: normal;
  font-size: 0.9em;
  line-height: 1;
  margin-top: 10px;
}
#header #nav-top .main-title {
  margin-left: 25px;
}
@media screen and (max-width: 600px) {
  #header #nav-top .main-title {
    margin: auto;
    float: none;
    text-align: center;
  }
}
#header #nav-top #main-nav {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 2.5em;
  margin-right: 25px;
}
@media screen and (max-width: 600px) {
  #header #nav-top #main-nav {
    margin: auto;
    float: none;
  }
}
#header #nav-top #main-nav ul {
  list-style: none;
}
#header #nav-top #main-nav ul li {
  float: left;
  margin-left: 30px;
}
@media screen and (max-width: 600px) {
  #header #nav-top #main-nav ul li {
    margin-left: 15px;
    margin-right: 15px;
    float: none;
    display: inline;
  }
}
article {
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  background: #fff;
}
article.page {
  padding-left: 20px;
}
article.page .icon {
  display: none;
}
article.post .icon:before {
  content: '\f016';
}
article.photo .icon:before {
  content: '\f030';
}
article.link .icon:before {
  content: '\f0c1';
}
article.link .title a:after {
  content: '\f08e';
  color: #999;
  font: 12px FontAwesome;
  padding-left: 10px;
  vertical-align: super;
}
article .post-content {
  padding: 20px 20px 15px 77px;
  margin-bottom: 28px;
  position: relative;
}
@media screen and (max-width: 600px) {
  article .post-content {
    padding-left: 20px;
  }
}
article .gallery {
  overflow: hidden;
  position: relative;
}
article .gallery:hover .control {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
article .gallery img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
article .gallery .control {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
article .gallery .prev,
article .gallery .next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}
article .gallery .prev:before,
article .gallery .next:before {
  position: absolute;
  font: 24px/1 FontAwesome;
  text-align: center;
  width: 24px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
  color: #fff;
  margin-top: -12px;
  top: 50%;
}
article .gallery .prev {
  left: 0;
}
article .gallery .prev:before {
  content: '\f053';
  left: 10px;
}
article .gallery .next {
  right: 0;
}
article .gallery .next:before {
  content: '\f054';
  right: 10px;
}
article header .icon {
  width: 32px;
  height: 32px;
  margin-right: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
  color: #258fb8;
}
@media screen and (max-width: 600px) {
  article header .icon {
    display: none;
  }
}
article header .icon:before {
  position: absolute;
  font: 32px FontAwesome;
  top: 0;
  left: 0;
  width: 32px;
  text-align: center;
}
article header time {
  color: #999;
  font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 5px;
  display: block;
  line-height: 1;
}
article header .title {
  font-weight: normal;
}
article header .title a {
  color: #444;
}
article header .title a:hover {
  color: #258fb8;
  text-decoration: none;
}
article header div {
  color: #999;
  font-size: 1em;
  line-height: 16px;
}
article header div a {
  color: #999;
}
article header div a:hover {
  color: #258fb8;
  text-decoration: none;
}
article header div a:before {
  font: 1.1em FontAwesome;
  padding-right: 10px;
}
article header div a.comment-link:before {
  content: '\f075';
}
article .entry {
  text-align: justify;
  line-height: 1.6;
}
article .entry p,
article .entry blockquote,
article .entry ul,
article .entry ol,
article .entry dl,
article .entry table,
article .entry iframe,
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6,
article .entry .video-container {
  margin-top: 15px;
}
article .entry blockquote {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-style: italic;
  font-family: "Georgia", serif;
  font-size: 1.2em;
  padding: 0 30px 15px;
  text-align: center;
}
article .entry blockquote footer {
  border-top: none;
  font-size: 0.8em;
  line-height: 1;
  margin: 20px 0 0;
  padding-top: 0;
}
article .entry blockquote footer cite:before {
  content: '—';
  color: #ccc;
  padding: 0 0.5em;
}
article .entry code,
article .entry pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
article .entry code {
  background: #eee;
  color: #666;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 0.9em;
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
article .entry pre {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  overflow: auto;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
article .entry pre code {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
article .entry ul,
article .entry ol,
article .entry dl {
  margin-left: 20px;
}
article .entry ul ul,
article .entry ol ul,
article .entry dl ul,
article .entry ul ol,
article .entry ol ol,
article .entry dl ol,
article .entry ul dl,
article .entry ol dl,
article .entry dl dl {
  margin-top: 0;
}
article .entry h1,
article .entry h2 {
  font-weight: normal;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  padding-top: 60px;
  margin-top: -40px;
}
@media screen and (max-width: 600px) {
  article .entry h1,
  article .entry h2 {
    padding-top: 90px;
    margin-top: -70px;
  }
}
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6 {
  font-weight: normal;
  padding-top: 60px;
  margin-top: -45px;
}
@media screen and (max-width: 600px) {
  article .entry h3,
  article .entry h4,
  article .entry h5,
  article .entry h6 {
    padding-top: 90px;
    margin-top: -75px;
  }
}
article .entry img,
article .entry video {
  max-width: 100%;
  height: auto;
  border: none;
}
article .entry iframe {
  border: none;
}
article .entry .caption {
  display: block;
  margin-top: 5px;
  color: #999;
  position: relative;
  font-size: 0.9em;
  padding-left: 25px;
}
article .entry .caption:before {
  content: '\f040';
  position: absolute;
  font: 1.3em FontAwesome;
  position: absolute;
  left: 0;
  top: 3px;
}
article .entry .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
article .entry .video-container iframe,
article .entry .video-container object,
article .entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
article .entry .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  font-size: 1.5em;
}
article .toc-article {
  float: right;
}
article #toc {
  background: #eee;
  margin: 0 0 0.5em 1.5em;
  padding: 1em;
  border: 2px solid #258fb8;
  line-height: 1em;
  font-size: 0.8em;
}
article #toc strong {
  padding: 0.3em 0;
}
article #toc ol {
  margin-left: 0;
}
article #toc .toc {
  padding: 0;
}
article #toc .toc li {
  list-style-type: none;
}
article #toc .toc-child {
  padding-left: 1.5em;
}
article footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  color: #999;
  font-size: 0.9em;
  line-height: 16px;
  position: relative;
  min-height: 16px;
}
article footer a {
  color: #999;
}
article footer a:hover {
  color: #258fb8;
  text-decoration: none;
}
article footer a:before {
  font: 1.1em FontAwesome;
  padding-right: 10px;
  vertical-align: baseline;
}
article footer a.more-link {
  color: #fff;
  background: #258fb8;
  border: 1px solid #ccc olor-link;
  padding: 0.5em 0.8em 0.6em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}
article footer a.more-link:before {
  content: '\f054';
}
article footer .categories,
article footer .tags {
  position: relative;
  padding-left: 25px;
  display: inline;
  margin: 5px 0;
}
article footer .categories:before,
article footer .tags:before {
  position: absolute;
  font: 1.1em FontAwesome;
}
article footer .categories:before {
  content: '\f07b';
  top: 2px;
  left: 1px;
}
article footer .tags:before {
  content: '\f02b';
  top: 3px;
  left: 2px;
}
article footer .addthis {
  margin-top: 15px;
}
article footer .addthis iframe {
  margin-top: 0;
}
article footer .share-box {
  display: table;
}
article footer .share-link {
  width: 50px;
  height: 20px;
  display: block;
  float: left;
  position: relative;
  color: #999;
  text-shadow: 0 1px #fff;
}
article footer .share-link:before {
  font-size: 20px;
  font-family: FontAwesome;
  padding-right: 0px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  text-align: center;
}
article footer .share-link:hover {
  color: #fff;
}
article footer .share-link.share-weibo:before {
  content: "\f18a";
}
article footer .share-link.share-weibo:hover {
  color: #cb2027;
}
article footer .share-link.share-google:before {
  content: "\f0d5";
}
article footer .share-link.share-google:hover {
  color: #dd4b39;
}
.footer-btn {
  position: fixed;
  right: 36px;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  .footer-btn {
    right: 15px;
  }
}
@media screen and (max-width: 900px) {
  .footer-btn a img {
    width: 36px;
    height: 36px;
  }
}
@media screen and (max-width: 600px) {
  .footer-btn a img {
    width: 32px;
    height: 32px;
  }
}
@media screen and (max-width: 900px) {
  #menu-nav a img {
    height: 24px;
  }
}
@media screen and (max-width: 600px) {
  #menu-nav a img {
    height: 22px;
  }
}
#comment {
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  margin-bottom: 30px;
}
#comment .title {
  font-weight: normal;
  margin-bottom: 15px;
}
#pagination a {
  display: block;
  padding: 5px 10px;
  background: #ddd;
  color: #999;
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px #fff;
  margin-bottom: 50px;
}
#pagination a:hover {
  background: #258fb8;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
}
#pagination .prev:before {
  content: '\f053';
  padding-right: 10px;
  font-family: FontAwesome;
}
#pagination .next:after {
  content: '\f054';
  padding-left: 10px;
  font-family: FontAwesome;
}
.archive-title {
  color: #999;
  font-weight: normal;
  margin-bottom: 30px;
  text-shadow: 0 0 1px #fff;
}
.archive-title:before {
  font-family: FontAwesome;
  content: '\f073';
  padding-right: 15px;
}
.archive-title.tag:before {
  content: '\f02b';
}
.archive-title.category:before {
  content: '\f07b';
}
.archive {
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 50px;
}
.archive article {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.archive article .post-content {
  margin-bottom: 0;
}
#sidebar {
  width: 270px;
  line-height: 1.8em;
}
@media screen and (max-width: 900px) {
  #sidebar {
    float: none;
    width: 100%;
  }
}
#sidebar .widget {
  background: #fff;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  word-wrap: break-word;
  margin-bottom: 30px;
}
#sidebar .widget .title {
  background: #363636;
  color: #fff;
  padding: 15px 20px;
  font-size: 1em;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
}
#sidebar .widget .entry {
  background: #eee;
  font-size: 0.9em;
  padding: 10px 10px;
}
#sidebar .widget ul,
#sidebar .widget ol,
#sidebar .widget dl {
  list-style: none;
}
#sidebar .widget ul ul,
#sidebar .widget ol ul,
#sidebar .widget dl ul,
#sidebar .widget ul ol,
#sidebar .widget ol ol,
#sidebar .widget dl ol,
#sidebar .widget ul dl,
#sidebar .widget ol dl,
#sidebar .widget dl dl {
  list-style: disc;
  margin-left: 20px;
}
#sidebar .search {
  margin-bottom: 30px;
}
#sidebar .search input {
  background: #fff;
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 1em;
  padding: 10px 15px;
  border: 1px solid #ddd;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #999;
}
#sidebar .search input:focus {
  color: #444;
}
#sidebar .tag small {
  margin-left: 5px;
  color: #fff;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #258fb8;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#sidebar .tag span {
  color: #a0c5e8;
  background: #fff;
  margin-right: 5px;
  border: 1px solid #a0c5e8;
  margin-bottom: 5px;
  display: inline-block;
  -webkit-border-radius: 0.75em;
  border-radius: 0.75em;
}
#sidebar .tag span:hover {
  background: #eee;
}
#sidebar .tag span a {
  padding: 0.3em 0.6em 0.4em;
}
#sidebar .tag span a:hover {
  border-color: #ddd;
  text-decoration: none;
}
#sidebar .twitter li {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  font-size: 0.9em;
}
#sidebar .twitter li:last-of-type {
  border-bottom: none;
}
#sidebar .twitter small {
  display: block;
  margin-top: 10px;
  color: #999;
  line-height: 1;
}
#sidebar .tagcloud .entry {
  padding-right: 5px;
}
#sidebar .tagcloud a {
  margin-right: 10px;
  display: inline-block;
}
#footer {
  color: #999;
  margin-bottom: 36px;
  font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px #fff;
  text-align: center;
}
#foot-nav ul {
  list-style: none;
}
#foot-nav ul li {
  display: inline;
  margin-right: 48px;
}
#foot-nav ul li:last-of-type {
  margin-right: 0px;
}
.footer-btn {
  position: fixed;
  right: 36px;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  .footer-btn {
    right: 15px;
  }
}
@media screen and (max-width: 900px) {
  .footer-btn a img {
    width: 36px;
    height: 36px;
  }
}
@media screen and (max-width: 600px) {
  .footer-btn a img {
    width: 32px;
    height: 32px;
  }
}
.social li a {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  text-indent: -9999px;
  margin: 0 15px 15px 0;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  width: 28px;
  height: 28px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
.social li a:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.social li a:last-of-type {
  margin-right: 0px;
}
.weibo {
  background: url("/img/weibo.png") center no-repeat #d52b2a;
  border: 1px solid #d52b2a;
}
.google {
  background: url("/img/google.png") center no-repeat #c83d20;
  border: 1px solid #c83d20;
}
.github {
  background: url("/img/github.png") center no-repeat #afb6ca;
  border: 1px solid #afb6ca;
}
.rss {
  background: url("/img/rss.png") center no-repeat #ef7522;
  border: 1px solid #ef7522;
}
.twitter {
  background: url("/img/twitter.png") center no-repeat #55acee;
  border: 1px solid #55acee;
}
.stackoverflow {
  background: url("/img/stackoverflow.png") center no-repeat #222;
  border: 1px solid #222;
}
.entry .gist {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  line-height: 1.6;
  overflow: auto;
  color: #666;
}
.entry .gist .gist-file {
  border: none;
  font-family: inherit;
  margin: 0;
  font-size: 0.9em;
}
.entry .gist .gist-file .gist-data {
  background: none;
  border-bottom: none;
}
.entry .gist .gist-file .gist-data pre {
  padding: 0 !important;
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
.entry .gist .gist-file .gist-meta {
  background: none;
  color: #999;
  margin-top: 5px;
  padding: 0;
  text-shadow: 0 0 1px #fff;
  font-size: 100%;
}
.entry .gist .gist-file .gist-meta a {
  color: #258fb8;
}
.entry .gist .gist-file .gist-meta a:visited {
  color: #258fb8;
}
figure.highlight {
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  line-height: 1.6;
  overflow: auto;
  position: relative;
  font-size: 0.9em;
}
figure.highlight figcaption {
  color: #999;
  margin-bottom: 5px;
  text-shadow: 0 0 1px #fff;
}
figure.highlight figcaption a {
  position: absolute;
  right: 15px;
}
figure.highlight pre {
  border: none;
  padding: 0;
  margin: 0;
}
figure.highlight table {
  margin-top: 0;
  border-spacing: 0;
}
figure.highlight .gutter {
  color: #999;
  padding-right: 15px;
  border-right: 1px solid #ddd;
  text-align: right;
}
figure.highlight .code {
  padding-left: 15px;
  border-left: 1px solid #fff;
  color: #666;
}
figure.highlight .line {
  height: 20px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #93a1a1;
  font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
  color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}