/* Reset */
body{font:16px "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans CJK CN", "Microsoft Yahei",Arial,Helvetica,sans-serif;color:#000;margin:0;}
img{border:none}
h1{font-size:1.8em;line-height: 1.5em;margin: 0;}
h2{font-size:1.3em;line-height: 1.8em;margin:0 0 0.5em;font-weight: bold;}
h1,h2,.clear{clear:both;}
ul, ol{margin:1em 0 1em 2.5em;padding:0;}
ul li{list-style:circle;}
ul li, ol li{margin:0.5em 0;line-height: 1.5em;}
p{margin:.4em 0;line-height: 1.5em;color:#111;}
a{color:#000;text-decoration: underline;padding: 4px 8px;}
a:hover{color:#000;background:#ABD9ED;text-decoration: none;}
code{font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;/* Thank GitHub*/}
acronym{border-bottom: 1px dotted #333;}
.clear{clear: both;}

.section{padding: 0;background: #FFF;}
.content{max-width: 760px; width: auto; margin: 0 auto;padding: 1em 1em;}
.content.block-content{text-align: center;}
.oneline, .oneline li{line-height:2em;}
ul.oneline{margin:0.5em 1em 0;overflow: hidden;float: left;}
.oneline ul.oneline{margin:0 1em 0;}
ul.oneline li{list-style:none none outside;float:left;margin:0 1em 0 0;}
div.oneline > strong{float:left;margin-right: 1em;}
div.oneline{margin-bottom: 1em;overflow: hidden;}

.box{border-radius: 10px;border: 1px solid #3A4BB4;padding: 0.5em 1em;margin-bottom:1em;}
.box.status-archived, .box.status-hidden{background: #EEE;border: 1px solid #192DAB;}
.box:hover{background: #EFF;}
.box .title h2{display: inline;color: #3A4BB4;}
.box .title small{color:#999;margin-left:0.5em;}

.grey{color: #777;}

/* Detail */
/* Color modified from http://www.peise.net/2014/1215/4779.html */
#header.section{background: #ABD9ED;box-shadow: 0 1px;/* border-bottom: 1px solid #B0DBEE; */}
#header .content{padding: 1.5em 1em 0.5em;position: relative;}
#header h1 a{text-decoration: none;padding: 0;}
#social{position: absolute;top: 0px;right: 0px;margin: 0.5em 0;}
#social strong{display: none;}
#social ul{margin-left:0;}
.lang_link{color: #AFA20B;text-decoration: none;}
.lang_link:hover{color: #D4C51C;}
#announcement.section{background: #FFAE00;}
#blog.section, #projects.section{background: #FFF;}
#blog .content{border-bottom: 1px solid #EEE;}
#blog.section h2 a{color: #3A4BB4;}
#projects.section h2 a{color: #499B0A;}
h2 a{color: inherit;padding: 0;margin: inherit;text-decoration: none;}
h2 a:hover{color: inherit; background: inherit;}
#about.section, body{background: #FFF367;}
#about.section{padding-top: 0;}
#about .content{position: relative;overflow:hidden;}
body.index #about .content{min-height: 150px;}
#avatar{position: absolute; top:-5px; right: 2em; height: 128px; width: 128px; background: url("avatar-256.png") no-repeat scroll; background-size: 128px 128px;}
@keyframes swing-z{
  0% {transform: rotate(0);-webkit-transform: rotate(0);}
  25% {transform: rotate(5deg);-webkit-transform: rotate(5deg);}
  75%{transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}
  100% {transform: rotate(0);-webkit-transform: rotate(0);}
}
@keyframes swing-x{
  0% {transform: rotateX(0);-webkit-transform: rotateX(0);}
  50% {transform: rotateX(30deg);-webkit-transform: rotateX(30deg);}
  100% {transform: rotateX(0);-webkit-transform: rotateX(0);}
}
@-webkit-keyframes swing-z{
  0% {-webkit-transform: rotate(0);}
  25% {-webkit-transform: rotate(5deg);}
  75% {-webkit-transform: rotate(-5deg);}
  100% {-webkit-transform: rotate(0);}
}
@-webkit-keyframes swing-x{
  0% {-webkit-transform: rotateX(0);}
  50% {-webkit-transform: rotateX(30deg);}
  100% {-webkit-transform: rotateX(0);}
}

body:not(.with-touch-event) #avatar:hover, #avatar.hover{animation: swing-z 2s ease-in infinite;-webkit-animation: swing-z 2s ease-in infinite;transform-origin: 50% 0;-webkit-transform-origin: 50% 0;}
#avatar.click{animation: swing-x 1.5s ease 3;transform-origin: 0 0;-webkit-animation: swing-x 1.5s ease 3;-webkit-transform-origin: 0 0;}
#recommendation{margin:0.5em 0 1em;}
#recommendation, #recommendation a{color: #777;}

#about .hr{width: 100%;padding: 1px 0;overflow: hidden;text-align:left;}
#about .hr hr{width: 22em;margin-left: 0;border-top: 1px solid #555;border-bottom: medium none;}
#about.hasavatar .content{padding-bottom: 0;}

@media (max-width: 760px){
	body{font-size:14px;}
	.content{width: auto;}

  #header .content{padding-top: 1em;}

  #social > strong{display: inline;}
  #social{position: static;}
  #social li{margin-right: 0.5em;}
	#avatar{display: none;}
	#about.hasavatar{min-height: 100px;background: url("avatar-256.png") no-repeat scroll 95% 30%;background-size: 64px 64px;}

  body.index #ad{display: none;}
}

@media (max-width: 400px){
  #social > strong{display: none;}
}