@font-face {
  font-family: 'montserratregular';
  src: url('../font/montserrat-webfont.woff2') format('woff2'),url('../font/montserrat-webfont.woff') format('woff');
}

@font-face {
  font-family: 'petala_proitalic';
  src: url('../font/petala_pro_italic-webfont.woff2') format('woff2'),url('../font/petala_pro_italic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'geometria_lightlight';
  src: url('../font/geometria-webfont.woff2') format('woff2'),url('../font/geometria-webfont.woff') format('woff');
}

@font-face {
  font-family: 'sourcecodepro_regular';
  src: url('../font/sourcecodepro-regular.woff2') format('woff2'),url('../font/sourcecodepro-regular.woff') format('woff');
}

.hidden {
  display: none;
}

::selection {
  color: #fff;
  background: #eb7350;
}

::-webkit-input-placeholder {
  color: #ddd;
  letter-spacing: 0;
}

::-moz-placeholder {
  color: #ddd;
  letter-spacing: 0;
}

:-ms-input-placeholder {
  color: #ddd !important;
  letter-spacing: 0;
}

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #eaeaea;
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb:vertical {
  border-radius: 3px;
  background: #eaeaea;
}

.scrollbar::-webkit-scrollbar-thumb:vertical:hover {
  background: #fee2b2;
}

@keyframes animelike {
  0%,100% {transform: scale(.9);}
  50% {transform: scale(1);}
}

@keyframes animelikehalo {
  0% {transform: scale(1);opacity: .8;}
  100% {transform: scale(1.7);opacity: 0;}
}

@keyframes waiting {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes loading {
  0%,80% {transform: scale(1);opacity: 1;}
  45% {transform: scale(.1);opacity: .7;}
}

@keyframes itemtip {
  2% {transform: translate(4px,0);}
  4% {transform: translate(7px,0);}
  6% {transform: translate(-2px,0);}
  8% {transform: translate(-7px,0);}
  10% {transform: translate(-1px,0);}
  12% {transform: translate(-2px,0);}
  14% {transform: translate(1px,0);}
  16% {transform: translate(-8px,0);}
  18% {transform: translate(-5px,0);}
  20% {transform: translate(9px,0);}
  22% {transform: translate(-5px,0);}
  24% {transform: translate(6px,0);}
  26% {transform: translate(2px,0);}
  28% {transform: translate(2px,0);}
  30% {transform: translate(-5px,0);}
  32% {transform: translate(-7px,0);}
  34% {transform: translate(10px,0);}
  36% {transform: translate(1px,0);}
  38% {transform: translate(-2px,0);}
  40% {transform: translate(4px,0);}
  42% {transform: translate(-8px,0);}
  44% {transform: translate(5px,0);}
  46% {transform: translate(9px,0);}
  48% {transform: translate(6px,0);}
  50% {transform: translate(-9px,0);}
  52% {transform: translate(7px,0);}
  54% {transform: translate(-9px,0);}
  56% {transform: translate(-7px,0);}
  58% {transform: translate(-8px,0);}
  60% {transform: translate(3px,0);}
  62% {transform: translate(-7px,0);}
  64% {transform: translate(6px,0);}
  66% {transform: translate(-4px,0);}
  68% {transform: translate(-2px,0);}
  70% {transform: translate(6px,0);}
  72% {transform: translate(-9px,0);}
  74% {transform: translate(7px,0);}
  76% {transform: translate(2px,0);}
  78% {transform: translate(-8px,0);}
  80% {transform: translate(2px,0);}
  82% {transform: translate(2px,0);}
  84% {transform: translate(-4px,0);}
  86% {transform: translate(-7px,0);}
  88% {transform: translate(4px,0);}
  90% {transform: translate(-6px,0);}
  92% {transform: translate(-8px,0);}
  94% {transform: translate(-3px,0);}
  96% {transform: translate(4px,0);}
  98% {transform: translate(-8px,0);}
  0%,100% {transform: translate(0,0);}
}

div.load {
  width: 42px;
  height: 14px;
  margin: 0 auto;
  padding: 3px 0;
}

div.load > span {
  display: inline;
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 2px;
  background: #ccc;
  animation: loading .75s cubic-bezier(.2,.68,.18,1.08) infinite;
  animation-fill-mode: both;
}

div.load > span:nth-child(1) {
  animation-delay: -.24s;
}

div.load > span:nth-child(2) {
  animation-delay: -.12s;
}

div.load > span:nth-child(3) {
  animation-delay: 0s;
}

section.adshow {
  display: inline;
  float: right;
  width: 638px;
  margin: 0 0 15px 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
}

.adshow > img,
.adshow > a > img {
  display: block;
  width: 100%;
  user-select: none;
}

img.smiley {
  width: 16px;
  height: auto;
  max-height: none;
  margin: 0 3px;
  vertical-align: text-top;
}

small.size10,
small.size11 {
  display: inline;
  float: left;
  font-size: 12px;
}

small.size10 {
  transform: scale(.84);
}

small.size11 {
  transform: scale(.92);
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  color: #404040;
  font: normal 12px/24px 'lucida grande','lucida sans unicode',helvetica,arial,verdana,sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #e5e5e5;
  cursor: default;
}

html.load {
  cursor: progress;
}

html:not(.dfwriting) {
  background-image: url(../img/background.svg);
  background-position: 50% -100px;
  background-repeat: repeat-x;
}

html:not(.dfwriting).simple {
  background-position: 50% -245px;
}

body {
  width: 900px;
  margin: 0 auto;
}

body::after {
  display: block;
  clear: both;
  content: '';
}

html.dfwriting > body > *:not([data-ws]) {
  visibility: hidden;
}

#catbox {
  display: none;
  width: 166px;
  height: 71px;
  padding: 6px 0 0;
  background: url(../img/publish.catbox.svg) no-repeat;
  user-select: none;
}

#catbox.on {
  display: block;
}

#catbox > p {
  width: 144px;
  height: 50px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-top: 0 none;
  background: #efefef;
}

#catbox > p > input,
#catbox > p > label {
  display: inline;
  float: left;
  height: 16px;
  padding: 2px;
  border: 0 none;
}

#catbox > p > input {
  width: 60px;
  color: #888;
  font: normal 11px/16px 'microsoft yahei',stheiti,simhei,tahoma;
  outline: none;
  background: #fff;
}

#catbox > p > input[id$=description] {
  width: 96px;
  margin: 10px 0 0;
}

#catbox > p > input[id$=submit] {
  float: right;
  width: 30px;
  margin: 10px 0 0;
  box-sizing: content-box;
  cursor: pointer;
}

#catbox > p > label {
  width: 16px;
  padding: 2px 0;
  background: url(../img/ico.hide.svg) 50% 5px no-repeat;
}

#facebox {
  display: none;
  overflow: hidden;
  user-select: none;
}

#facebox.on {
  display: block;
}

#facebox > ul {
  padding: 7px 0 0 7px;
  border: 1px solid #d9d9d9;
  border-top: 0 none;
  border-bottom: 0 none;
  background: #efefef;
  overflow: hidden;
}

#facebox > ul > li {
  display: inline;
  float: left;
  width: 18px;
  height: 18px;
  margin: 0 7px 7px 0;
  padding: 5px;
  border-radius: 3px;
  background: #fafafa;
  cursor: pointer;
}

#facebox > ul > li:nth-child(5n+1) {
  clear: left;
}

#facebox > ul > li > img {
  width: 18px;
  height: 18px;
  background-size: cover;
}

#facebox > div {
  height: 24px;
  padding: 0 7px;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #e0e0e0;
  font-family: 'petala_proitalic',arial;
  color: #bfbfbf;
  text-align: right;
  background: #efefef;
  overflow: hidden;
}

#facebox > div > a {
  color: #bfbfbf;
  text-decoration: none;
}