.animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
}

/*
  改自 gitter.im scroller效果
  https://cdn02.gitter.im/_s/543e5ec/styles/router-app.css
*/
/* ::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background-color:rgba(100,100,100,.1)}
::-webkit-scrollbar-thumb{-webkit-border-radius:6px;border-radius:6px;background:rgba(100,100,100,.2);margin-right:1px;-webkit-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}
:hover::-webkit-scrollbar-thumb{background:rgba(100,100,100,.4);margin-right:1px;-webkit-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.1)}
 */
/* touch箭头提示 */
@-webkit-keyframes ani_arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@-moz-keyframes ani_arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@-ms-keyframes ani_arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@keyframes ani_arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
.arrow {
  z-index: 9;
  position: absolute;
  width: 50px;
  height: 30px;
}
.arrow:before {
  width: 21px;
  height: 12px;
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  background-image: url(arrow_up.png);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-animation: ani_arrow 1.2s ease-in 0s infinite;
  animation: ani_arrow 1.2s ease-in 0s infinite
}
.arrow.bottom {
  bottom: 4px;
  left: 50%;
  margin-left: -25px;
}
.arrow.right {
  right: 4px;
  top: 50%;
  margin-top: -15px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f8f8f8;
  color: #fff;
}
.light {
  color: #000;
}
img {
  max-width: 100%;
  /* 暂时应对某些图片在dark下看不清 +arbitrary没支持指定light */
  background-color: rgba(255,255,255,.5);
}
a {
  color: rgb(160,230,255);
}
.light a {
  color: rgb(30,80,170);
}
* {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

pre {
  word-break: break-all;
}
code {
  background: #232323;
  color: #e6e1dc;
  -webkit-border-radius: 6px; /* 同scroller圆角 */
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 2px;
}
pre code, pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: .5em;
  margin: 0;
}

body>main {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

section {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  font-family: "Microsoft Yahei";
  font-size: 175%;
  word-break: break-word;
}

section>div {
  -webkit-transform-origin: top;
  transform-origin: top;
  padding: 1px; /* hack */
  /*box-sizing: content-box;*/
  width: 100%;
}

/* 微信分享holder */
body>img {
  position: absolute;
  left: -9999px;
  top: -999px;
}