/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/
.mobile .noMobile {
  display: none !important;
}
html:not(.mobile) .mobileOnly {
  display: none !important;
}
html,
body {
  height: 100%;
}
body {
  font-size: 17px;
  line-height: 1.6;
}
.postImg {
  margin: 1.5em auto;
  display: block;
  width: 600px;
  max-width: 100%;
  box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.postImgFull {
  width: auto;
}
.postImgHero {
  margin-bottom: 2em;
}
.blog header {
  margin-bottom: 12px;
}
.blog #topBar {
  margin-bottom: 0;
}
p + p,
ul + p {
  margin-top: 1em;
}
.postCategories > span:first-child {
  margin: 0 4px;
}
#disqus_thread {
  padding-bottom: 60px;
}
.postContent ul,
.postExcerpt ul,
.postContent table,
.postExcerpt table {
  position: relative;
}
.postContent table,
.postExcerpt table {
  padding: 0 0 0 20px !important;
}
.postContent ul,
.postExcerpt ul {
  list-style-type: none;
  padding: 0;
  padding-left: 6px;
  margin-top: 0.5em;
}
.postContent ul li,
.postExcerpt ul li {
  padding: 3px 0 3px 20px !important;
}
.postContent ul li:before,
.postExcerpt ul li:before {
  content: '\2022';
  color: #ddd;
  float: left;
  margin-left: -25px;
  font-size: 24px;
  line-height: 1;
}
.postContent ul ul,
.postExcerpt ul ul {
  border-left: 1px solid #eee;
  padding-left: 20px;
}
.postContent ol,
.postExcerpt ol {
  padding-left: 20px;
  margin: 1em 0;
}
.postContent ol li,
.postExcerpt ol li {
  padding: 3px 0;
}
.postContent tr,
.postExcerpt tr {
  vertical-align: top;
}
.linkChangelog {
  padding-top: 3em;
  padding-bottom: 1px;
}
@media screen and (max-width: 920px) {
  .postContent > .demo img {
    margin-left: 10px;
    margin-right: 10px;
  }
  .postContent li,
  .postExcerpt li {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .postContent td,
  .postExcerpt td {
    padding: 2px 0;
  }
  .postHeader:before {
    width: 6px !important;
  }
}
@media screen and (min-width: 921px) {
  .postContent li,
  .postExcerpt li {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
}
a:not(.linkButton) {
  color: #09d;
}
/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/
.posts {
  list-style-type: none;
  margin-bottom: 2em;
}
.posts > hr {
  margin: 60px 0;
}
.post {
  position: relative;
}
/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/
.container {
  position: relative;
  min-height: 100vh;
  background: white;
}
.post:first-child .postHeader {
  padding-top: 60px;
}
 > .post {
  min-height: calc(100vh - 50px - 40px);
}
.headerContent {
  margin: 0 auto;
  line-height: 35px;
  text-align: center;
}
.title {
  font-size: 150%;
}
.title a {
  color: black;
  font-weight: bold;
}
.title a:hover {
  color: #2bbeff;
}
.title img {
  height: 90px;
}
.hb {
  cursor: pointer;
}
.hb,
.social-links div {
  cursor: pointer;
}
.headerButtons {
  float: right;
}
.headerButtons a {
  float: left;
  margin-left: 40px;
  text-align: right;
}
.header a.extra {
  color: #aaa;
  margin-left: 1em;
}
.header a.extra:hover {
  color: #000;
}
#home {
  clear: both;
}
.meta {
  color: #aaa;
}
.footer {
  max-width: 920px;
  margin: 0 auto;
  clear: both;
  color: #666;
  border-top: 1px solid #e3e3e3;
  margin-top: 2em;
  padding: 0.5em 0;
  overflow: hidden;
  text-align: center;
}
.footer .contact {
  float: left;
  margin-right: 3em;
}
.footer .contact a {
  color: #8085C1;
}
.footer .rss {
  margin-top: 1.1em;
  margin-right: -0.2em;
  float: right;
}
.footer .rss img {
  border: 0;
}
/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/
.post {
  background: white;
}
.post pre {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .4em;
}
.post pre code {
  border: none;
}
/* terminal */
.post pre.terminal {
  border: 1px solid #000;
  background-color: #333;
  color: #FFF;
}
.post pre.terminal code {
  background-color: #333;
}
.postHeader {
  position: relative;
  text-align: center;
}
.postHeader:not(.withImage) {
  margin-bottom: 4em;
}
.postHeader.withImage {
  margin-bottom: 2em;
}
.postMetadata {
  font-size: 85%;
  margin-bottom: 8px;
}
.postMetadata * {
  color: #aaa !important;
}
.postMetadata a:hover {
  color: #222 !important;
}
.pagination {
  margin-top: 3em;
  margin-bottom: 3em;
  text-align: center;
}
.pagination > * {
  display: inline-block;
  border: 1px solid #ccc;
  width: 32px;
  line-height: 30px;
  margin: 0 6px;
  color: #777;
  border-radius: 3px;
}
.pagination > *.selected {
  font-weight: bold;
  border-color: #09d;
  color: inherit;
}
#social {
  margin-top: 64px;
  margin-bottom: 32px;
}
#social > * {
  display: inline !important;
  margin-right: 10px;
}
#shareFB {
  position: relative;
  top: -6px;
}
#shareTwitter {
  width: 80px !important;
}
.readMore {
  cursor: pointer;
}
.postFooter {
  height: 30px;
  margin-top: 40px;
}
.indexPost + .indexPost {
  margin-top: 55px;
}
#smallAbout {
  display: none;
}
.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex {
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flatlist {
  list-style-type: none;
}
.gray {
  color: #666;
}
.complete {
  color: #d6d6d6 !important;
}
.ml10 {
  margin-left: 10px;
}
.ipdate {
  width: 115px;
  float: left;
  font-weight: bold;
}
.iptitle {
  font-weight: bold;
}
.tag {
  color: #09d;
  font-weight: bold;
}
.date {
  color: #a30;
  font-weight: bold;
}
.contact {
  color: #2a6;
  font-weight: bold;
}
.demo {
  border: 0;
}
.p0 {
  color: #f30;
}
.p1 {
  color: #fa0;
}
.p2 {
  color: #fd3;
}
.pStar {
  background: #ffb;
  padding: 5px;
}
.search {
  white-space: nowrap;
  overflow: hidden;
  margin-right: 3px;
}
.search.border {
  border: 1px solid #eaeaea;
  border-radius: 4px;
  padding: 3px 5px 4px 5px;
  margin: 0 3px;
}
.searchList img {
  vertical-align: middle;
}
.searchList img:not(:first-child) {
  margin-left: 4px;
}
.b {
  font-weight: bold;
}
code {
  background: #F6F8FA;
  padding: 4px 8px;
  margin: 0 2px;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
  border: 1px solid #e2e7eb;
  border-radius: 2px;
}