body {
	width: 100%;
}

body:before, body:after {
	content: "";
	display: table;
}

body:after {
	clear: both;
}

@font-face {
	font-family: 'FontAwesome';
	src: url("fonts/fontawesome-webfont.eot");
	src: url("fonts/fontawesome-webfont.eot?#iefix")
		format("embedded-opentype"), url("fonts/fontawesome-webfont.woff")
		format("woff"), url("fonts/fontawesome-webfont.ttf")
		format("truetype"),
		url("fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"),
		url("fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
	font-weight: normal;
	font-style: normal;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
	tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	line-height: 1;
	color: #000;
	background: #fff;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	vertical-align: middle;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

a img {
	border: none;
}

ol {
	list-style: decimal;
	padding-left: 20px;
}

ul {
	list-style: none;
}

input, button {
	margin: 0;
	padding: 0;
}

input::-moz-focus-inner, button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

@font-face {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	src: url("fonts/fontawesome-webfont.eot?v=#4.0.3");
	src: url("fonts/fontawesome-webfont.eot?#iefix&v=#4.0.3")
		format("embedded-opentype"),
		url("fonts/fontawesome-webfont.woff?v=#4.0.3") format("woff"),
		url("fonts/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"),
		url("fonts/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3")
		format("svg");
}

html, body, #container {
	height: 100%;
}

body {
	font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
	font-size: 16px;
	background: #fff;
	color: rgba(0, 0, 0, 0.6);
	-webkit-overflow-scrolling: touch;
}

h1, h2, h3 {
	display: block;
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size: 1.1em;
}

h4, h5, h6 {
	font-size: 1em;
}

a {
	text-decoration: none;
	outline-width: 0;
	color: #258fb8;
	outline: none;
}

input[type=checkbox], input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin: 0;
	cursor: pointer;
	vertical-align: bottom;
	background: #fff;
	border: 1px solid #dcdcdc;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

input[type=checkbox]:active, input[type=radio]:active {
	border-color: #c6c6c6;
	background: #ebebeb;
}

input[type=checkbox]:hover {
	border-color: #c6c6c6;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type=radio] {
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	width: 15px;
	height: 15px;
}

input[type=checkbox]:checked, input[type=radio]:checked {
	background: #fff;
}

input[type=radio]:checked::after {
	content: '';
	display: block;
	position: relative;
	top: 3px;
	left: 3px;
	width: 7px;
	height: 7px;
	background: #666;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

input[type=checkbox]:checked::after {
	display: block;
	position: absolute;
	top: -6px;
	left: -5px;
}

input[type=checkbox]:focus {
	outline: none;
	border-color: #4d90fe;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.clearfix {
	*zoom: 1;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.inner {
	width: 1000px;
	margin: 0 auto;
}

.hide {
	display: none;
}

@media screen and (max-width: 1040px) {
	.inner {
		width: 100%;
	}
}

#container {
	position: relative;
	min-height: 100%;
}

#container #mobile-nav {
	display: none;
}

#container #mobile-nav .overlay {
	height: 110px;
	position: absolute;
	width: 100%;
	background: #4d4d4d;
}

#container #mobile-nav .overlay.fixed {
	position: fixed;
	height: 42px;
	z-index: 99;
}

#container #mobile-nav #header {
	padding: 10px 0 0 0;
}

#container #mobile-nav #header .profilepic {
	display: block;
	position: relative;
	z-index: 100;
}

#container #mobile-nav #header .header-menu {
	height: auto;
	margin: 10px;
}

#container #mobile-nav #header .header-menu ul {
	text-align: center;
	cursor: default;
}

#container #mobile-nav #header .header-menu li {
	display: inline-block;
	margin: 3px;
}

#container .left-col {
	background: #fff;
	width: 300px;
	position: fixed;
	opacity: 1;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	height: 100%;
}

#container .left-col .overlay {
	width: 100%;
	height: 180px;
	background: url(../images/user_bg.jpg) no-repeat #000;
	position: absolute;
	opacity: 0.5;
}

#container .left-col .intrude-less {
	width: 76%;
	text-align: center;
	margin: 112px auto 0;
}

#container .mid-col {
	position: absolute;
	right: 0;
	min-height: 100%;
	background: #eaeaea;
	left: 300px;
	width: auto;
}

@media screen and (max-width: 800px) {
	#container .left-col {
		display: none;
	}
	#container .mid-col {
		left: 0;
	}
	#container #header .header-nav {
		position: relative;
	}
	#container .header-author.fixed {
		position: fixed;
		top: -13px;
		width: 100%;
		color: #ddd;
	}
	#container .overlay .slider-trigger {
		position: absolute;
		z-index: 101;
		bottom: 0;
		left: 0;
		width: 42px;
		height: 42px;
	}
	#container .overlay .slider-trigger:hover {
		background: #444;
	}
	#container .overlay .slider-trigger:before {
		color: #ddd;
		content: "\f00b";
		font: 16px FontAwesome;
		width: 16px;
		height: 16px;
		margin-left: 9px;
		margin-top: 14px;
		display: block;
	}
	#container .article-header {
		border-left: none;
		padding: 0;
		border-bottom: 1px dotted #ddd;
	}
	#container .article-header h1 {
		margin-bottom: 10px;
	}
	#container .header-subtitle {
		padding: 0 24px;
	}
	#container .article-info-index.article-info {
		padding-top: 10px;
		margin: 0;
		border-top: 1px solid #ddd;
	}
	#container .article-info-post.article-info {
		margin: 0;
		padding-top: 10px;
		border: none;
	}
	#container .article-more-link a {
		float: right;
	}
	#container #viewer-box .viewer-box-l {
		font-size: 14px;
	}
	#container .article {
		padding: 10px;
		margin: 10px;
		font-size: 14px;
	}
	#container .article .article-entry {
		padding-left: 0;
		padding-right: 0;
		padding-top: 10px;
	}
	#container .article .article-title {
		font-size: 18px;
		max-width: 185px;
		display: block;
		margin: 0;
	}
	#container .article .article-meta {
		width: auto;
		height: 30px;
		margin-top: -5px;
		position: ralative;
	}
	#container .article .article-meta .article-date {
		font-size: 12px;
		-webkit-border-radius: 0;
		border-radius: 0;
		color: #666;
		background: none;
		height: auto;
		padding: 0;
		margin: 0;
		width: 100%;
		text-align: left;
		margin-left: 10px;
	}
	#container .article .article-meta .article-date time {
		width: auto;
		float: right;
		margin-right: 10px;
	}
	#container .article .article-meta .article-tag-list {
		margin-top: 7px;
		position: absolute;
		right: 10px;
		top: 0;
	}
	#container .article .article-meta .article-tag-list:before {
		float: left;
		margin-top: 1px;
		left: 0;
	}
	#container .article .article-meta .article-tag-list .article-tag-list-item
		{
		float: left;
		padding-left: 0;
		width: auto;
		max-width: 83px;
	}
	#container .article .article-meta .article-category {
		margin-top: 7px;
		position: absolute;
		right: 10px;
		top: -30px;
	}
	#container .article .article-meta .article-category:before {
		float: left;
		margin-top: 1px;
		left: 15px;
	}
	#container .article .article-meta .article-category .article-category-link
		{
		max-width: 83px;
		width: auto;
		padding-left: 10px;
	}
	#container .article .article-nav-link-wrap {
		margin: 5px 0;
	}
	#container .article .article-nav-link-wrap strong {
		float: left;
		margin-right: 5px;
	}
	#container .article #article-nav-older {
		float: none;
		display: block;
	}
	#container .share {
		padding: 3px 10px;
	}
	#container .duoshuo {
		padding: 0 13px;
	}
	#container #disqus_thread {
		padding: 0 13px;
	}
	#container #mobile-nav {
		display: block;
	}
	#container #page-nav .extend {
		opacity: 1;
	}
	#container .instagram .open-ins {
		left: 2px;
		top: -30px;
		color: #aaa;
	}
	#container .info-on-right {
		float: initial;
	}
	#container .archives-wrap {
		margin: 10px 10px 0px;
		padding: 10px;
	}
	#container .archives-wrap .archive-article-title {
		font-size: 14px;
	}
	#container .archives-wrap .archive-year-wrap {
		position: relative;
		padding: 0 0 0 0;
	}
	#container .archives-wrap .archive-year-wrap a {
		padding: 0 0 0 0;
	}
	#container .archives-wrap .article-meta .archive-article-date {
		font-size: 12px;
		margin-right: 10px;
		margin-top: -5px;
	}
	#container .archives-wrap .article-meta .article-tag-list-link {
		font-size: 12px;
	}
	#container .archives .archive-article {
		padding: 10px 0;
		margin-left: 0;
	}
	#container #footer .footer-left {
		float: initial;
		margin-bottom: 10px;
	}
	#container #footer .footer-right {
		float: initial;
	}
}

.header-author {
	text-align: center;
	font-family: Roboto, "Roboto", serif;
	font-size: 30px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#header {
	width: 100%;
}

#header a {
	color: #696969;
}

#header a:hover {
	color: #b0a0aa;
}

#header .profilepic {
	text-align: center;
	display: block;
	border: 5px solid #fff;
	-webkit-border-radius: 300px;
	border-radius: 300px;
	width: 128px;
	height: 128px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: #88acdb;
	-webkit-transition: all 0.2s ease-in;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	text-align: center;
}

#header .profilepic img {
	width: 20%;
	height: 20%;
	-webkit-border-radius: 300px;
	border-radius: 300px;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in;
}

#header .profilepic img.show {
	width: 100%;
	height: 100%;
	opacity: 1;
}

#header .header-subtitle {
	text-align: center;
	color: #999;
	font-size: 14px;
	line-height: 25px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#header .header-menu {
	font-weight: 300;
	line-height: 31px;
	cursor: pointer;
	text-transform: uppercase;
	float: none;
	height: 150px;
	margin-left: -12px;
	text-align: center;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}

#header .header-menu li {
	cursor: default;
}

#header .header-menu li a {
	font-size: 14px;
	min-width: 300px;
}

#header .switch-area {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 500px;
	font-size: 14px;
}

#header .switch-area .switch-wrap {
	-webkit-transition: -webkit-transform 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-in;
	-ms-transition: -ms-transform 0.3s ease-in;
	transition: transform 0.3s ease-in;
	position: relative;
}

#header .turn-left {
	-webkit-transform: translate(-100%, 0);
	-moz-transform: translate(-100%, 0);
	-ms-transform: translate(-100%, 0);
	transform: translate(-100%, 0);
}

#header .header-nav {
	width: 100%;
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-in;
	-ms-transition: -ms-transform 0.3s ease-in;
	transition: transform 0.3s ease-in;
}

#header .header-nav .social {
	margin-right: 15px;
	margin-top: 10px;
	text-align: center;
}

#header .header-nav .social a {
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	zoom: 1;
	*display: inline;
	text-indent: -9999px;
	margin: 0 8px 15px 8px;
	opacity: 0.7;
	width: 28px;
	height: 28px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#header .header-nav .social a:hover {
	opacity: 1;
}

#header .header-nav .social a:last-of-type {
	margin-right: 0;
}

#header .header-nav .social a.weibo {
	background: url("../images/weibo.png") center no-repeat #aaf;
	border: 1px solid #aaf;
}

#header .header-nav .social a.weibo:hover {
	border: 1px solid #aaf;
}

#header .header-nav .social a.rss {
	background: url("../images/rss.png") center no-repeat #ef7522;
	border: 1px solid #ef7522;
}

#header .header-nav .social a.rss:hover {
	border: 1px solid #cf5d0f;
}

#header .header-nav .social a.github {
	background: url("../images/github.png") center no-repeat #afb6ca;
	border: 1px solid #afb6ca;
}

#header .header-nav .social a.github:hover {
	border: 1px solid #909ab6;
}

#header .header-nav .social a.facebook {
	background: url("../images/facebook.png") center no-repeat #3b5998;
	border: 1px solid #3b5998;
}

#header .header-nav .social a.facebook:hover {
	border: 1px solid #2d4373;
}

#header .header-nav .social a.google {
	background: url("../images/google.png") center no-repeat #c83d20;
	border: 1px solid #c83d20;
}

#header .header-nav .social a.google:hover {
	border: 1px solid #9c3019;
}

#header .header-nav .social a.twitter {
	background: url("../images/twitter.png") center no-repeat #55cff8;
	border: 1px solid #55cff8;
}

#header .header-nav .social a.twitter:hover {
	border: 1px solid #24c1f6;
}

#header .header-nav .social a.linkedin {
	background: url("../images/linkedin.png") center no-repeat #005a87;
	border: 1px solid #005a87;
}

#header .header-nav .social a.linkedin:hover {
	border: 1px solid #006b98;
}

#header .header-nav .social a.zhihu {
	background: url("../images/zhihu.png") center no-repeat #0078d8;
	border: 1px solid #0078d8;
}

#header .header-nav .social a.zhihu:hover {
	border: 1px solid #0078d8;
}

#header .header-nav .social a.douban {
	background: url("../images/douban.png") center no-repeat #06c611;
	border: 1px solid #06c611;
}

#header .header-nav .social a.douban:hover {
	border: 1px solid #06c611;
}

#header .header-nav .social a.mail {
	background: url("../images/mail.png") center no-repeat #005a87;
	border: 1px solid #005a87;
}

#header .header-nav .social a.mail:hover {
	border: 1px solid #006b98;
}

#header .switch-part {
	width: 100%;
	position: absolute;
}

#header .switch-part1 {
	left: 0;
}

#header .switch-part2 {
	left: 100%;
	top: 20px;
	overlay-x: hidden;
	overflow-y: auto;
	max-height: 200px;
}

#header .switch-part3 {
	left: 200%;
	line-height: 30px;
}

#header .switch-part3 .switch-friends-link {
	margin-right: 9px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 5px;
}

#header .switch-part3 .switch-friends-link:hover {
	background: #88acdb;
	color: #fff;
}

#header .switch-part4 {
	left: 300%;
	text-align: left;
	line-height: 30px;
}

.duoshuo {
	padding: 0 40px;
}

#disqus_thread {
	padding: 0 40px;
}

.archives-wrap {
	position: relative;
	margin: 0 30px;
	padding-right: 60px;
	border-bottom: 1px solid #eee;
	background: #fff;
}

.archives-wrap:first-child {
	margin-top: 30px;
}

.archives-wrap:last-child {
	margin-bottom: 80px;
}

.archives-wrap .archive-year-wrap {
	line-height: 35px;
	width: 200px;
	position: absolute;
	padding-top: 15px;
	font-size: 1.8em;
}

.archives-wrap .archive-year-wrap a {
	color: #666;
	font-weight: bold;
	padding-left: 48px;
}

.archives {
	position: relative;
}

.archives .article-info {
	border: none;
}

.archives .archive-article {
	margin-left: 200px;
	padding: 20px 0;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #fff;
	position: relative;
}

.archives .archive-article:first-child {
	border-top: none;
}

.archives .archive-article:last-child {
	border-bottom: none;
}

.archives .archive-article-title {
	font-size: 16px;
	color: #333;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

.archives .archive-article-title:hover {
	color: #657b83;
}

.archives .archive-article-title span {
	display: block;
	color: #a8a8a8;
	font-size: 12px;
	line-height: 14px;
	height: 7px;
	padding-left: 2px;
}

.archives .archive-article-title span:before {
	display: inline-block;
	content: "“";
	font-family: serif;
	font-size: 30px;
	float: left;
	margin: 4px 4px 0 -12px;
	color: #c8c8c8;
}

.archive-article-inner .archive-article-header {
	position: relative;
}

.archive-article-inner .article-meta {
	position: relative;
	float: right;
	margin-top: -10px;
	color: #555;
	background: none;
	text-align: right;
	width: auto;
}

.archive-article-inner .article-meta .article-date time {
	color: #aaa;
}

.archive-article-inner .article-meta .archive-article-date,
	.archive-article-inner .article-meta .article-tag-list {
	margin-right: 30px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	color: #666;
	font-size: 14px;
}

.archive-article-inner .article-meta .archive-article-date {
	cursor: default;
	font-size: 12px;
	margin-bottom: 5px;
	margin-top: -10px;
}

.archive-article-inner .article-meta .archive-article-date time:before {
	content: "\f017";
	color: #999;
	position: relative;
	margin-right: 10px;
	font: 16px FontAwesome;
}

.archive-article-inner .article-meta .article-category:before {
	float: left;
	margin-top: 1px;
	left: 15px;
}

.archive-article-inner .article-meta .article-category .article-category-link
	{
	width: auto;
	max-width: 83px;
	padding-left: 10px;
}

.archive-article-inner .article-meta .article-tag-list {
	margin-top: 0px;
}

.archive-article-inner .article-meta .article-tag-list:before {
	left: 15px;
}

.archive-article-inner .article-meta .article-tag-list .article-tag-list-item
	{
	display: inline-block;
	width: auto;
	max-width: 83px;
	padding-left: 8px;
	font-size: 12px;
}

.body-wrap {
	margin-bottom: 80px;
}

.article {
	margin: 30px;
	position: relative;
	border: 1px solid #ddd;
	background: #fff;
	-webkit-transition: all 0.2s ease-in;
}

.article.show {
	visibility: visible;
	-webkit-animation: cd-bounce-1 0.6s;
	-moz-animation: cd-bounce-1 0.6s;
	-webkit-animation: cd-bounce-1 0.6s;
	-moz-animation: cd-bounce-1 0.6s;
	-ms-animation: cd-bounce-1 0.6s;
	animation: cd-bounce-1 0.6s;
}

.article.hidden {
	visibility: hidden;
}

.article img {
	max-width: 100%;
}

@
-webkit-keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-webkit-transform: scale(1);
}

60%
{
opacity


:

 

1;
-webkit-transform


:

 

scale


(1
.01


);
}
100%
{
-webkit-transform


:

 

scale


(1);
}
}
@
-moz-keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-moz-transform: scale(1);
}

60%
{
opacity


:

 

1;
-moz-transform


:

 

scale


(1
.01


);
}
100%
{
-moz-transform


:

 

scale


(1);
}
}
.article-index {
	margin-left: 200px;
	padding: 15px 0;
	margin-right: 75px;
}

.article-index .brief {
	display: block;
	color: #a8a8a8;
	font-size: 12px;
	line-height: 14px;
	height: 7px;
	padding-left: 2px;
}

.article-index .brief:before {
	display: inline-block;
	content: "“";
	font-family: serif;
	font-size: 30px;
	float: left;
	margin: 4px 4px 0 -12px;
	color: #c8c8c8;
}

.article-title {
	color: #696969;
	margin-left: 0px;
	font-weight: 300;
	line-height: 35px;
	margin-bottom: 20px;
	font-size: 26px;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

.article-title:hover {
	color: #b0a0aa;
}

.article-inner {
	position: relative;
	margin-bottom: 20px;
}

.article-header {
	border-left: 5px solid;
	padding: 15px 0px 15px 25px;
}

.article-info.info-on-right {
	margin: 10px 0 0 0;
	float: right;
}

.article-info-index.article-info {
	padding-top: 20px;
	margin: 30px 30px 0 30px;
	border-top: 1px solid #ddd;
}

.article-info-post.article-info {
	padding: 0;
	border: none;
	margin: -30px 0 20px 30px;
}

.article-entry {
	line-height: 1.8em;
	padding-right: 30px;
	padding-left: 30px;
}

.article-entry p {
	margin-top: 10px;
}

.article-entry p code, .article-entry li code {
	padding: 1px 3px;
	margin: 0 3px;
	background: #ddd;
	border: 1px solid #ccc;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console",
		"Courier New", monospace;
	word-wrap: break-word;
	font-size: 14px;
}

.article-entry blockquote {
	background: #ddd;
	border-left: 5px solid #ccc;
	padding: 15px 20px;
	margin-top: 10px;
	border-left: 5px solid #657b83;
	background: #f6f6f6;
}

.article-entry blockquote p {
	margin-top: 0;
}

.article-entry em {
	font-style: italic;
}

.article-entry ul li:before {
	content: "";
	width: 6px;
	height: 6px;
	border: 1px solid #999;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #aaa;
	display: inline-block;
	margin-right: 10px;
	float: left;
	margin-top: 12px;
}

.article-entry ul, .article-entry ol {
	font-size: 14px;
	margin: 10px 0px;
}

.article-entry li ul, .article-entry li ol {
	margin-left: 30px;
}

.article-entry li ul li:before, .article-entry li ol li:before {
	content: "";
	background: #dedede;
}

.article-entry h1 {
	margin-top: 30px;
}

.article-entry h2 {
	margin-top: 20px;
	font-weight: 300;
	color: #574c4c;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6
	{
	margin-top: 20px;
	font-weight: 300;
	color: #574c4c;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.article-entry video {
	max-width: 100%;
}

.article-entry strong {
	font-weight: bold;
}

.article-entry .caption {
	display: block;
	font-size: 0.8em;
	color: #aaa;
}

.article-entry hr {
	height: 0;
	margin-top: 20px;
	margin-bottom: 20px;
	border-left: 0;
	border-right: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #fff;
}

.article-entry pre {
	font-size: 1/0.9em;
	line-height: 1.5;
	margin-top: 10px;
	padding: 5px 15px;
	overflow-x: auto;
	color: #657b83;
	font-size: 10px;
	border: 1px solid #ccc;
	text-shadow: 0 1px #444;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console",
		"Courier New", monospace;
}

.article-entry pre code {
	font-size: 14px;
}

.article-entry table {
	width: 100%;
	border: 1px solid #dedede;
	margin: 15px 0;
	border-collapse: collapse;
}

.article-entry table tr, .article-entry table td {
	height: 35px;
}

.article-entry table thead tr {
	background: #f8f8f8;
}

.article-entry table tbody tr:hover {
	background: #efefef;
}

.article-entry table td, .article-entry table th {
	border: 1px solid #dedede;
	padding: 0 10px;
}

.article-entry figure table {
	border: none;
	width: auto;
	margin: 0;
}

.article-entry figure table tbody tr:hover {
	background: none;
}

.article-meta {
	width: 150px;
	font-size: 14;
	text-align: right;
	position: absolute;
	right: 0;
	top: 23px;
	text-align: center;
	z-index: 1;
}

.article-meta time {
	color: #aaa;
}

.article-meta time:before {
	color: #999;
	content: "\f073";
	font: 17px FontAwesome;
	margin-right: 10px;
}

.article-more-link {
	margin-top: 5px;
	text-align: right;
}

.article-more-link a {
	background: #4d4d4d;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px 4px;
	line-height: 16px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-ms-transition: background 0.3s;
	transition: background 0.3s;
}

.article-more-link a:hover {
	background: #3c3c3c;
}

.article-more-link a.hidden {
	visibility: hidden;
}

#article-nav {
	margin: 80px 0 30px 0;
	padding-bottom: 10px;
}

#article-nav .article-nav-link-wrap {
	margin: 0px 30px 0px 30px;
	font-size: 14px;
	color: #333;
}

#article-nav .article-nav-link-wrap .article-nav-title {
	display: inline-block;
	font-size: 12px;
	color: #aaa;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

#article-nav .article-nav-link-wrap strong {
	background: #ddd;
	color: #fff;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	width: 15px;
	height: 15px;
	display: inline-block;
	text-align: center;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-ms-transition: background 0.3s;
	transition: background 0.3s;
}

#article-nav .article-nav-link-wrap:hover strong {
	background: #4d4d4d;
}

#article-nav .article-nav-link-wrap:hover .article-nav-title {
	color: #4d4d4d;
}

#article-nav #article-nav-older {
	float: right;
}

@
-moz-keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

60%
{
opacity


:

 

1;
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
-o-transform


:

 

scale


(1
.01


);
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
transform


:

 

scale


(1
.01


);
}
100%
{
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
-o-transform


:

 

scale


(1);
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
transform


:

 

scale


(1);
}
}
@
-webkit-keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

60%
{
opacity


:

 

1;
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
-o-transform


:

 

scale


(1
.01


);
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
transform


:

 

scale


(1
.01


);
}
100%
{
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
-o-transform


:

 

scale


(1);
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
transform


:

 

scale


(1);
}
}
@
-o-keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

60%
{
opacity


:

 

1;
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
-o-transform


:

 

scale


(1
.01


);
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
transform


:

 

scale


(1
.01


);
}
100%
{
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
-o-transform


:

 

scale


(1);
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
transform


:

 

scale


(1);
}
}
@
keyframes cd-bounce-1 { 0% {
	opacity: 0;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

60%
{
opacity


:

 

1;
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
-o-transform


:

 

scale


(1
.01


);
-webkit-transform


:

 

scale


(1
.01


);
-moz-transform


:

 

scale


(1
.01


);
-ms-transform


:

 

scale


(1
.01


);
transform


:

 

scale


(1
.01


);
}
100%
{
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
-o-transform


:

 

scale


(1);
-webkit-transform


:

 

scale


(1);
-moz-transform


:

 

scale


(1);
-ms-transform


:

 

scale


(1);
transform


:

 

scale


(1);
}
}
.archives-wrap {
	position: relative;
	margin: 0 30px;
	border-bottom: 1px solid #eee;
	background: #fff;
	display: block;
	overflow: hidden;
}

.archives-wrap:first-child {
	margin-top: 30px;
}

.archives-wrap:last-child {
	margin-bottom: 80px;
	padding-bottom: 40px;
}

.archives-wrap .archive-year-wrap {
	line-height: 25px;
	width: 200px;
	position: absolute;
	padding-top: 22px;
	font-size: 1.8em;
}

.archives-wrap .archive-year-wrap a {
	color: #666;
	font-weight: bold;
	padding-left: 48px;
	display: block;
}

.archives {
	position: relative;
}

.archives .article-info {
	border: none;
}

.archives .archive-article {
	margin-left: 200px;
	padding: 25px 0;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #fff;
	position: relative;
}

.archives .archive-article:first-child {
	border-top: none;
}

.archives .archive-article:last-child {
	border-bottom: none;
}

.archives .archive-article-title {
	font-size: 20px;
	font-weight:bold;
	color: #333;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

.archives .archive-article-title:hover {
	color: #657b83;
}

.archives .archive-article-title span {
	display: block;
	color: #a8a8a8;
	font-size: 12px;
	line-height: 14px;
	height: 7px;
	padding-left: 2px;
}

.archives .archive-article-title span:before {
	display: inline-block;
	content: "“";
	font-family: serif;
	font-size: 30px;
	float: left;
	margin: 4px 4px 0 -12px;
	color: #c8c8c8;
}

.archive-article-inner .archive-article-header {
	position: relative;
}

.archive-article-inner .article-meta {
	position: relative;
	float: right;
	margin-top: -10px;
	color: #555;
	background: none;
	text-align: right;
	width: auto;
}

.archive-article-inner .article-meta .article-date time {
	color: #aaa;
}

.archive-article-inner .article-meta .archive-article-date,
	.archive-article-inner .article-meta .article-tag-list {
	margin-right: 30px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	color: #666;
	font-size: 14px;
}

.archive-article-inner .article-meta .archive-article-date {
	cursor: default;
	font-size: 15px;
	margin-bottom: 5px;
	margin-top: -10px;
}

.archive-article-inner .article-meta .archive-article-date time:before {
	content: "\f017";
	color: #999;
	position: relative;
	margin-right: 10px;
	font: 16px FontAwesome;
}

.archive-year-wrap a.archive-article-date time:before {
  content: "\f073";
  color: #999;
  position: relative;
  margin-right: 10px;
  font: 1.2em FontAwesome;
}

.archive-article-inner .article-meta .article-category:before {
	float: left;
	margin-top: 1px;
	left: 15px;
}

.archive-article-inner .article-meta .article-category .article-category-link
	{
	width: auto;
	max-width: 83px;
	padding-left: 10px;
}

.archive-article-inner .article-meta .article-tag-list {
	margin-top: 0px;
}

.archive-article-inner .article-meta .article-tag-list:before {
	left: 15px;
}

.archive-article-inner .article-meta .article-tag-list .article-tag-list-item
	{
	display: inline-block;
	width: auto;
	max-width: 83px;
	padding-left: 8px;
	font-size: 12px;
}

.article-entry pre, .article-entry .highlight {
	background: #272822;
	margin: 30px 0;
	padding: 10px 10px;
	overflow: auto;
	color: #4c4c4c;
	line-height: 22.400000000000002px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.article-entry .highlight .gutter pre, .article-entry .gist .gist-file .gist-data .line-numbers
	{
	color: #666;
}

.article-entry pre, .article-entry code {
	font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas,
		monospace;
}

.article-entry code {
	background: #eee;
	padding: 0 0.3em;
	border: none;
}

.article-entry pre {
	color: #fff;
}

.article-entry pre code {
	background: none;
	text-shadow: none;
	padding: 0;
	color: #fff;
}

.article-entry .highlight pre {
	border: none;
	margin: 0;
	padding: 0;
}

.article-entry .highlight table {
	margin: 0;
	width: auto;
}

.article-entry .highlight td {
	border: none;
	padding: 0;
}

.article-entry .highlight figcaption {
	font-size: 0.85em;
	color: highlight-comment;
	line-height: 1em;
	margin-bottom: 1em;
}

.article-entry .highlight figcaption:before, .article-entry .highlight figcaption:after
	{
	content: "";
	display: table;
}

.article-entry .highlight figcaption:after {
	clear: both;
}

.article-entry .highlight figcaption a {
	float: right;
}

.article-entry .highlight .gutter pre {
	text-align: right;
	padding-right: 20px;
}

.article-entry .highlight .gutter pre .line {
	text-shadow: none;
}

.article-entry .highlight .line {
	font-size: 15px;
	height: 15px;
}

.article-entry .gist {
	margin: 0 -20px;
	border-style: solid;
	border-color: #ddd;
	border-width: 1px 0;
	background: #272822;
	padding: 15px 20px 15px 0;
}

.article-entry .gist .gist-file {
	border: none;
	font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas,
		monospace;
	margin: 0;
}

.article-entry .gist .gist-file .gist-data {
	background: none;
	border: none;
}

.article-entry .gist .gist-file .gist-data .line-numbers {
	background: none;
	border: none;
	padding: 0 20px 0 0;
}

.article-entry .gist .gist-file .gist-data .line-data {
	padding: 0 !important;
}

.article-entry .gist .gist-file .highlight {
	margin: 0;
	padding: 0;
	border: none;
}

.article-entry .gist .gist-file .gist-meta {
	background: #272822;
	color: highlight-comment;
	font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-shadow: 0 0;
	padding: 0;
	margin-top: 1em;
	margin-left: 20px;
}

.article-entry .gist .gist-file .gist-meta a {
	color: #258fb8;
	font-weight: normal;
}

.article-entry .gist .gist-file .gist-meta a:hover {
	text-decoration: underline;
}

pre .comment {
	color: #75715e;
}

pre .keyword, pre .function .keyword, pre .class .params {
	color: #66d9ef;
}

pre .tag, pre .doctype, pre .params, pre .function {
	color: #fff;
}

pre .css ~ * .tag, pre .title, pre .at_rule, pre .at_rule .keyword, pre .preprocessor,
	pre .preprocessor .keyword {
	color: #f92672;
}

pre .attribute, pre .built_in, pre .class, pre .css ~ * .class, pre .function .title
	{
	color: #a6e22e;
}

pre .value, pre .string {
	color: #e6db74;
}

pre .number {
	color: #7163d7;
}

pre .id, pre .css ~ * .id {
	color: #fd971f;
}

#footer {
	font-size: 12px;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console",
		"Courier New", monospace;
	text-shadow: 0 1px #fff;
	position: absolute;
	bottom: 30px;
	opacity: 0.6;
	width: 100%;
	text-align: center;
}

#footer .outer {
	padding: 0 30px;
}

.footer-left {
	float: left;
}

.footer-right {
	float: right;
}

.share {
	padding: 0px 75px 30px 40px;
	margin-bottom: 15px;
}

.back_home {
	float: right;
}

.back_home a {
	font-weight: bold;
	margin-left: 10px;
}

.back_home a:hover {
	color: #6e6e6e;
}

#page-nav {
	text-align: center;
	margin-top: 30px;
}

#page-nav .page-number {
	width: 20px;
	height: 20px;
	background: #4d4d4d;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
	color: #fff;
	line-height: 20px;
	font-size: 12px;
	margin: 0 3px 30px;
}

#page-nav .page-number:hover {
	background: #5e5e5e;
}

#page-nav .current {
	background: #88acdb;
	cursor: default;
}

#page-nav .current:hover {
	background: #88acdb;
}

#page-nav .extend {
	color: #4d4d4d;
	margin: 0 27px;
	opacity: 0;
}

#page-nav .extend:hover {
	color: #5e5e5e;
}

#page-nav:hover .extend {
	opacity: 1;
}

#post-instagram {
	padding: 30px;
}

#post-instagram .article-entry {
	padding-right: 0;
}

.instagram {
	position: relative;
	min-height: 500px;
}

.instagram .open-ins {
	display: block;
	padding: 10px 0;
	position: absolute;
	right: 28px;
	top: -75px;
	color: #333;
}

.instagram .open-ins:hover {
	color: #657b83;
}

.instagram .year {
	display: inline;
}

.instagram .album h1 em {
	font-style: normal;
	font-size: 14px;
	margin-left: 10px;
}

.instagram .album ul {
	min-height: 149px;
	padding-top: 17px;
	border-bottom: 1px solid #ddd;
	list-style: none;
}

.instagram .album li {
	position: relative;
	display: inline-block;
	min-width: 157px;
	margin: 0;
}

.instagram .album li:before {
	display: none;
}

.instagram .album div.img-box {
	position: relative;
	margin: 0 20px 10px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 1px
		rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 1px
		rgba(255, 255, 255, 0.1);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 1px
		rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 1px
		rgba(255, 255, 255, 0.1);
}

.instagram .album div.img-box .img-bg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0px;
	width: 100%;
	margin: -5px;
	padding: 5px;
	background: rgba(204, 204, 204, 0.8);
	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px
		rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px
		rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px
		rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
	-webkit-transition: all 0.15s ease-out 0.1s;
	-moz-transition: all 0.15s ease-out 0.1s;
	-o-transition: all 0.15s ease-out 0.1s;
	-webkit-transition: all 0.15s ease-out 0.1s;
	-moz-transition: all 0.15s ease-out 0.1s;
	-ms-transition: all 0.15s ease-out 0.1s;
	transition: all 0.15s ease-out 0.1s;
	opacity: 0.2;
	cursor: pointer;
	display: block;
}

.instagram .album div.img-box .img-bg:hover {
	opacity: 0;
}

.instagram .album div.img-box img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 600px) {
	.instagram .album ul {
		margin-left: 0;
		padding: 0;
		text-align: center;
	}
	.instagram .album li {
		max-width: 300px;
	}
	.instagram .album div.img-box {
		margin: 0;
	}
}

.switch-btn {
	margin-left: 74px;
	margin-top: 23px;
	position: relative;
	width: 70px;
	text-align: center;
}

.switch-btn .tips-box {
	position: relative;
}

.switch-btn .tips-box .tips-arrow {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid #000;
	opacity: 0.8;
	position: absolute;
	top: -6px;
	left: 30px;
}

.switch-btn .tips-box .tips-inner {
	padding: 5px 8px 4px 8px;
	background-color: #000;
	color: #fff;
	width: 80px;
	text-align: center;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	opacity: 0.8;
	position: absolute;
	z-index: 99;
	left: -13px;
}

.switch-btn .tips-box .tips-inner li {
	padding: 4px 0;
	cursor: pointer;
	font-size: 13px;
	color: #ddd;
}

.switch-btn .tips-box .tips-inner li:hover {
	background: #111;
}

.switch-btn .icon {
	height: 32px;
	width: 32px;
	background: #cecece;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding: 10px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
	cursor: pointer;
}

.switch-btn .icon-ctn {
	width: 34px;
	height: 34px;
	position: relative;
	overflow: hidden;
}

.switch-btn .icon-ctn .birdhouse {
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-style: solid;
	border-color: transparent transparent #4d4d4d transparent;
	border-width: 0 16px 14px;
}

.switch-btn .icon-ctn .birdhouse:after {
	content: '';
	position: absolute;
	top: 12px;
	left: -12px;
	border-style: solid;
	border-color: #4d4d4d transparent transparent transparent;
	border-width: 100px 12px;
}

.switch-btn .icon-ctn .birdhouse_holes {
	width: 12px;
	height: 12px;
	background: #ddd;
	position: absolute;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	left: 10px;
	top: 8px;
}

.switch-btn .icon-ctn .birdhouse_holes:after {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	background: #ccc;
	bottom: -8px;
	left: 4px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
}

.switch-btn .icon-ctn .ribbon {
	width: 12px;
	height: 20px;
	background: #333;
	margin: 2px 0 0 10px;
}

.switch-btn .icon-ctn .ribbon:after {
	content: '';
	position: absolute;
	left: 10px;
	top: 16px;
	width: 0;
	height: 0;
	border: solid #333;
	border-color: transparent #333 transparent #333;
	border-width: 6px 6px 8px 6px;
}

.switch-btn .icon-ctn .loopback_l {
	width: 10px;
	height: 5px;
	border-style: solid;
	border-width: 0px 3px 3px 3px;
	border-color: #333;
	-webkit-border-radius: 0 0 50px 50px;
	border-radius: 0 0 50px 50px;
	position: absolute;
	top: 16px;
	left: 1px;
}

.switch-btn .icon-ctn .loopback_l:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: transparent transparent transparent #333;
	bottom: 7px;
	left: 5px;
}

.switch-btn .icon-ctn .loopback_l:after {
	content: '';
	width: 5px;
	height: 5px;
	border-style: solid;
	border-width: 3px 0 0 3px;
	border-color: #333;
	-webkit-border-radius: 50px 0 0 0;
	border-radius: 50px 0 0 0;
	position: absolute;
	left: -3px;
	bottom: 5px;
}

.switch-btn .icon-ctn .loopback_r {
	width: 10px;
	height: 5px;
	border-style: solid;
	border-width: 3px 3px 0 3px;
	border-color: #333;
	-webkit-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	position: absolute;
	top: 8px;
	right: 2px;
}

.switch-btn .icon-ctn .loopback_r:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px;
	border-color: transparent #333 transparent transparent;
	top: 7px;
	right: 5px;
}

.switch-btn .icon-ctn .loopback_r:after {
	content: '';
	width: 5px;
	height: 5px;
	border-style: solid;
	border-width: 0 3px 3px 0;
	border-color: #333;
	-webkit-border-radius: 0 0 50px 0;
	border-radius: 0 0 50px 0;
	position: absolute;
	left: 5px;
	top: 5px;
}

.switch-btn .icon-ctn .user {
	width: 12px;
	height: 14px;
	background: #333;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	margin-left: 10px;
	margin-top: 2px;
}

.switch-btn .icon-ctn .user:before {
	content: '';
	width: 0px;
	height: 0px;
	position: absolute;
	top: 17px;
	left: 0px;
	border-style: solid;
	border-color: transparent transparent #333 transparent;
	border-width: 0 16px 6px 16px;
}

.switch-btn .icon-ctn .user:after {
	content: '';
	width: 8px;
	height: 5px;
	background: #333;
	position: absolute;
	margin-top: 13px;
	margin-left: -4px;
}

.switch-btn .icon-ctn .shoulder {
	width: 32px;
	height: 6px;
	background: #333;
	position: absolute;
	bottom: 6px;
}

#header .tagcloud a {
	color: #fff;
}

.tagcloud a {
	display: inline-block;
	text-decoration: none;
	font-weight: normal;
	font-size: 10px;
	color: #fff;
	height: 18px;
	line-height: 18px;
	float: left;
	padding: 0 5px 0px 10px;
	position: relative;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
	margin: 7px 9px 5px 8px;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console",
		"Courier New", monospace;
}

.tagcloud a:hover {
	opacity: 0.8;
}

.tagcloud a:before {
	content: " ";
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0;
	left: -18px;
	border: 9px solid transparent;
}

.tagcloud a:after {
	content: " ";
	width: 4px;
	height: 4px;
	background-color: #fff;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 7px;
	left: 2px;
}

.tagcloud a.color1 {
	background: #ff945c;
}

.tagcloud a.color1:before {
	border-right-color: #ff945c;
}

.tagcloud a.color2 {
	background: #f5c7b7;
}

.tagcloud a.color2:before {
	border-right-color: #f5c7b7;
}

.tagcloud a.color3 {
	background: #ba8f6c;
}

.tagcloud a.color3:before {
	border-right-color: #ba8f6c;
}

.tagcloud a.color4 {
	background: #cfb7c4;
}

.tagcloud a.color4:before {
	border-right-color: #cfb7c4;
}

.tagcloud a.color5 {
	background: #7b5d5f;
}

.tagcloud a.color5:before {
	border-right-color: #7b5d5f;
}

.user a.color1 {
  background: #ff945c;
}
.user a {
  display: inline-block;
  text-decoration: none;
  font-weight: normal;
  font-size: 10px;
  color: #fff;
  height: 18px;
  line-height: 18px;
  float: left;
  padding: 0 5px 0px 5px;
  position: relative;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  margin: 7px 9px 5px 8px;
  font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
}
.user a:hover {
	opacity: 0.8;
}
.user a:before {
	content: " ";
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0;
	left: -18px;
	border: 9px solid transparent;
}
.user a.color1:before {
  border-right-color: #ba8f6c;
}
.user a.color1 {
	background: #ba8f6c;
}

.article-tag-list .article-tag-list-item {
	float: left;
}

.article-tag {
	float: left;
}

.article-tag .article-tag-list {
	float: left;
}

.article-tag:before {
	float: left;
	color: #999;
	content: "\f06c";
	font: 16px FontAwesome;
	float: left;
	margin-right: 10px;
	margin-top: 9px;
}

.article-tag:after {
	float: left;
	content: "";
	margin-right: 20px;
	margin-top: 9px;
	float: left;
}

.article-category {
	float: left;
}

.article-category:before {
	float: left;
	color: #999;
	content: "\f02d";
	font: 16px FontAwesome;
	float: left;
	margin-right: 10px;
	margin-top: 9px;
}

.article-category:after {
	float: left;
	content: "";
	margin-right: 20px;
	margin-top: 9px;
	float: left;
}

.article-author {
	float: left;
}

.article-author:before {
	float: left;
	color: #999;
	content: "\f007";
	font: 16px FontAwesome;
	float: left;
	margin-right: 10px;
	margin-top: 9px;
}

.article-author:after {
	float: left;
	content: "";
	margin-right: 20px;
	margin-top: 9px;
	float: left;
}

.article-seminar {
	float: left;
}

.article-seminar:before {
	float: left;
	color: #999;
	content: "\f085";
	font: 16px FontAwesome;
	float: left;
	margin-right: 10px;
	margin-top: 9px;
}

.article-seminar:after {
	float: left;
	content: "";
	margin-right: 20px;
	margin-top: 9px;
	float: left;
}

.article-pop-out {
	float: left;
}

.article-pop-out:before {
	float: left;
	color: #999;
	content: "\f08d";
	font: 16px FontAwesome;
	float: left;
	margin-right: 10px;
	margin-top: 9px;
}

.article-pop-out:after {
	float: left;
	content: "";
	margin-right: 20px;
	margin-top: 9px;
	float: left;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

::-webkit-scrollbar-button:start:increment, ::-webkit-scrollbar-button:end:decrement
	{
	display: none;
}

::-webkit-scrollbar-corner {
	display: block;
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}

::-webkit-scrollbar-track:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-button:start {
	width: 10px;
	height: 10px;
	background: url("../img/scrollbar_arrow.png") no-repeat 0 0;
}

::-webkit-scrollbar-button:start:hover {
	background: url("../img/scrollbar_arrow.png") no-repeat -15px 0;
}

::-webkit-scrollbar-button:start:active {
	background: url("../img/scrollbar_arrow.png") no-repeat -30px 0;
}

::-webkit-scrollbar-button:end {
	width: 10px;
	height: 10px;
	background: url("../img/scrollbar_arrow.png") no-repeat 0 -18px;
}

::-webkit-scrollbar-button:end:hover {
	background: url("../img/scrollbar_arrow.png") no-repeat -15px -18px;
}

::-webkit-scrollbar-button:end:active {
	background: url("../img/scrollbar_arrow.png") no-repeat -30px -18px;
}

#viewer {
	position: fixed;
	z-index: 1000000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

#viewer-box {
	width: 100%;
	height: 100%;
	position: relative;
	color: #ccc;
	-webkit-transform: translate3d(-100%, 0, 0);
	-webkit-transition: -webkit-transform 0.25s ease-in-out;
}

#viewer-box .viewer-box-l {
	background: rgba(20, 20, 20, 0.9);
	width: 80%;
	height: 100%;
	float: left;
}

#viewer-box .viewer-box-l .viewer-box-wrap {
	margin: 20px 10px 0px 20px;
}

#viewer-box .viewer-box-l .viewer-title {
	line-height: 32px;
}

#viewer-box .viewer-box-l .viewer-title:before {
	content: "";
	width: 6px;
	height: 6px;
	border: 1px solid #999;
	-webkit-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #aaa;
	display: inline-block;
	margin-right: 10px;
}

#viewer-box .viewer-box-l .viewer-div {
	border-bottom: 1px dotted #666;
	padding-bottom: 13px;
	line-height: 20px;
}

#viewer-box .viewer-box-l .viewer-div:last-child {
	border-bottom: none;
}

#viewer-box .viewer-box-l .viewer-div .switch-friends-link {
	line-height: 20px;
}

#viewer-box .viewer-box-r {
	background: rgba(0, 0, 0, 0);
	width: 20%;
	height: 100%;
	float: right;
}

#viewer-box.anm-swipe {
	-webkit-transform: translate3d(0, 0, 0);
}

#viewer-box.anm-swipe .viewer-box-r {
	background: rgba(0, 0, 0, 0);
}

.hide {
	display: none;
}

#viewer-box .viewer-list {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

#header .header-menu li.on a{
	font-weight: bolder;
	border-bottom: 2px #696969 solid;
}

.link:before{
	position:absolute;
  	left: 60px;
	color: #999;
	content: "{";
	font: 36px FontAwesome;
	float: left;
	margin-top: 5px;
}

#menu ul {
    margin-left: 25px;
}

.menu_home:before{
	position:absolute;
  	left: 70px;
	color: #999;
	content: "\f015";
	font: 16px FontAwesome;
	float: left;
	margin-top: 7px;
}

.menu_share:before{
	position:absolute;
  	left: 70px;
	color: #999;
	content: "\f09e";
	font: 16px FontAwesome;
	float: left;
	margin-top: 7px;
}

.menu_index:before{
	position:absolute;
  	left: 70px;
	color: #999;
	content: "\f0a0";
	font: 16px FontAwesome;
	float: left;
	margin-top: 7px;
}

.menu_favorite:before{
	position:absolute;
  	left: 70px;
	color: #999;
	content: "\f08d";
	font: 16px FontAwesome;
	float: left;
	margin-top: 7px;
}

.menu_message:before{
	position:absolute;
  	left: 70px;
	color: #999;
	content: "\f0a2";
	font: 16px FontAwesome;
	float: left;
	margin-top: 7px;
}

.fenye{color: #2A7AD2;margin-top: 30px;padding-top: 0px; text-align: center; margin: 30px 0 40px;}
.fenye a{display: inline-block;color: #428bca;display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;border: 1px solid #ddd;margin: 0 2px;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;vertical-align: middle;}
.fenye .this{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;border: 1px solid #428bca;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;vertical-align: middle;}
.fenye a:hover{text-decoration: none;border: 1px solid #428bca;}