/**
 * Origin
 */
body {
  background: #333;
  margin-bottom: 40px;
  height: 100%;
  font-size: 16px;
  font-family: "Lato Regular", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
:focus {
    outline:none;
}

/**
 * Back to top button
 */
#top-button {
  position: fixed;
  right: 60px;
  bottom: 20px;
  border: 1px solid #5d5d5d;
  border-radius: 3px;
  display: block;
  padding: 10px;
  color: #ddd;
  z-index: 9999;
}
#top-button:hover {
  background: #ddd;
  color: #333;
}

/**
 * Code Column
 */
.code-column {
  background-color: #333;
  color: #fff;
  word-wrap: break-word;
}
.code-column h6 {
  color: #ddd;
  margin: 0.2em 0;
}
.code-column h4 {
  color: #fff;
  margin: 10px 0;
}
.code-column h4 a, .code-column h6 a {
  padding-left: 3px;
  color: #fff;
}
.code-column h4 a:hover {
  color: #ddd;
  text-decoration: underline;
}
.highlight {
  background-color: orange;
  color: #888;
}
section.cmd-description.focus-code {
  display: none;
  width: 80%;
  margin: 0 auto;
}

/**
 * Google pretty code
 */

pre {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
  padding: 5px;
  font-size: 90%;
  color: #e9e4e5;
  line-height: 1.5em;
  margin: 0.2em 0;
  border: 0;
  white-space: pre-wrap;
}
pre .pln {
  color: #e9e4e5;
}
pre .str {
  color: #ffa0a0;
}
pre .kwd {
  color: #4bb1b1;
}
pre .com {
  color: #87ceeb;
  display: block;
}
pre .com + .pln {
  white-space: normal;
}
pre .typ {
  color: #98fb98;
}
pre .lit {
  color: #cd5c5c;
}
pre .pun, pre .opn, pre .clo {
  color: #ffffff;
}
pre .tag {
  color: #4bb1b1;
}
pre .atn {
  color: #ef7c61;
}
pre .atv {
  color: #bcd42a;
}
pre .dec, pre .var {
  color: #660066;
}
pre .fun {
  color: #ff0000;
}
pre code {
  font-family: Monaco, Consolas, "Lucida Console", monospace;
}
pre .prettyprint {
  border: 0 !important;
}

/**
 * Sidebar
 */

.sidebar {
  height: 100%;
  margin-top: 10px;
  padding-bottom: 20px;
  position: fixed;
  overflow:auto;
}
.sidebar-title {
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 0;
  color: #fa503a;
  text-align: center;
}
button.check-all-button {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
ul {
  list-style-type: none;
  margin-top: 20px;
  margin-left: 10px;
}
ul.sidebar-menu li {
  float: left;
  margin: 3px;
  font-size: 13px;
}
.sidebar-bottom li i {
  display: inline-block;
  width: 20px;
}
ul.sidebar-bottom {
  margin-left: -10px;
  text-align: center;
}
ul.sidebar-bottom a {
  color: #D6D6D6;
  font-size: 15px;
}
ul.sidebar-bottom a:hover {
  color: rgb(255, 255, 255);
  font-size: 15px;
}
hr.horizonal-line {
  width: 90%;
  border-bottom: 1px dashed #8c8b8b;
}
li.social-icon a:hover {
  color: none;
}
.sidebar-menu a {
  color: #ffa0a0;
  border-radius: 4px;
  border: 1px solid #ffa0a0;
  padding: 2px 4px;
}
.sidebar-menu a.active-link {
  color: #F7332D;
}
.mobile-cmd-cell a.active-link {
  color: #F7332D;
}
.sidebar-menu a:hover {
  color: #F7332D;
}
.avatar {
    width: 19px;
    height: 19px;
    margin-right: 3px;
    margin-bottom: -3px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-size: cover;;
    background-image: url('../images/avatar.jpg');
    display: inline-block;
}

/**
 * Sidebar icon
 */
.social-icon {
  color:#FFF;
  margin-top: 15px;
}
ul.sidebar-bottom li.social-icon a:hover {
  color: inherit;
}
ul.sidebar-bottom li.social-icon a i {
  margin-left: 15px;
  font-size: 20px;
}

/**
 * Container
 */
 .row.full-width {
   width: 100%;
   max-width: 100%;
   margin-top: 8px;
 }
section.cmd-description {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
  padding-left: 7px;
  padding-right: 7px;
}
.comments-toggle .icon-eye-close {
  position: fixed;
  right: 60px;
  top: 25px;
  font-size: 24px;
  z-index: 999999;
  color: #CCCCCC;
}
.wrapper-container {
  overflow-x: visible;
}

/**
 * Masonry
 */
.grid-item {
  float: left;
  width: 32%;
  margin-left: 10px;
}

/**
 * Media
 */
@media screen and (max-width: 80em) {
  .sidebar {
    position: inherit;
    padding-bottom: 0;
  }
  .grid {
    margin-right: 15px;
  }
  .grid-item {
    width: 100%;
  }
  #top-button {
    display: none;
  }
  .comments-toggle .icon-eye-close {
    display: none;
  }
  section.cmd-description.focus-code {
    width: 100%;
  }
}

/**
 * Canvas
 */
.off-canvas.sidebar-canvas {
  background-color: #333;
  overflow-y: visible;
}
.off-canvas.sidebar-canvas ul {
  margin-top: 15px;
}
.sidebar-canvas a {
  color: #FF7A7A;
}


@media (max-width:1440px) {
  #top-button {
    right: 40px;
  }
  .comments-toggle .icon-eye-close {
    right: 40px;
  }
}

/**
 * Flags
 */
.languages-flag {
    margin-top: 10px;
    color: gray;
}
.languages-flag a {
    margin: 0 .3em;
}
 i.flag:not(.icon),i.flag:not(.icon):before {
     display: inline-block;
     width: 16px;
     height: 11px
 }

i.flag:not(.icon) {
     line-height: 11px;
     vertical-align: baseline;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden
 }

i.flag:not(.icon):before {
     content: '';
     background: url('../images/flags.png') -108px -1976px no-repeat
 }

i.flag.china:before,i.flag.cn:before {
    background-position: 0 -1196px
}

i.flag.gb:before,i.flag.united.kingdom:before {
    background-position: -36px -26px
}

.button.alert {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #d23838;
}