/*
Theme Name:moyublog.com
*/
article, aside, details, figcaption, figure, footer, header, main, nav, section {display:block;}
div,html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {margin:0; padding:0;}
body {background-color:#F1F1F1; font:100%/1.5em "Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif;}
a {text-decoration:none;}
li {list-style:none;}
.clear {clear:both;}
a img {border:none;}
/*gold*/
.inner {width:1200px; margin:0 auto; height:auto; position:relative;}
.page-bg {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:4; display:none;}
.topad {margin:23px; overflow:hidden;}
.allBtm {width:1200px; margin:23px auto; overflow:hidden;}
.topad img,.allBtm img {display:block; width:100%; height:auto;}
/*topbar*/
#topbar {background-color:#222; height:28px; line-height:28px; font-family:'SimSun'; overflow:hidden;}
#topbar ul li {float:left; font-size:0.75em; padding-right:20px; transition:all 0.4s ease 0s;}
#topbar ul li a {color:#D5D5D5;}
#topbar ul li a:hover {color:#fff;}
#topbar ul li#login,#topbar ul li#reg {float:right; padding-right:0; padding-left:15px;}
.weixin {background-color:#fff; position:fixed; width:200px; height:230px; left:50%; top:50%; margin:-100px 0 0 -100px; display:none; z-index:4;}
.weixin p {text-align:center;}
.weixin img {width:200px; height:200px; display:block;}
/*header*/
#header {background-color:#fff; padding-top:15px;}
#header .logo {float:left; width:220px; height:34px; overflow:hidden; margin-bottom:15px; display:inline;}
#header .logo img {height:34px; width:auto; max-width:100%; display:block;}
#header .menu {float:left;}
#header .menu ul li {float:left; line-height:34px; padding:0 6px; position:relative; transition:all 0.4s ease 0s;}
#header .menu ul li a {display:block; color:#333; padding:0 6px 10px;}
#header .menu ul li a:hover,#header .menu ul li a.on {color:#2689FF; border-bottom:4px solid #2689FF;}
.current-menu-item{color:#2689FF; border-bottom:4px solid #2689FF;}
#header .menu ul li.current a {font-weight:bold;  border-bottom:4px solid #2689FF;}
#header .menu ul li ul {position:absolute; width:150%; left:0; top:44px; background-color:#fff; z-index:3; padding:5px 0; display:none; border-top:4px solid #2689FF}
#header .menu ul li li {float:none; display:block; padding:0; line-height:1.5em; text-align:center; font-size:1em;}
#header .menu ul li li a {padding:5px 0;}
#header .menu ul li li a:hover {border:none;}
#header .menu ul li.current li a {font-weight:normal; border:none;}
.nav-btn {position:absolute; right:40px; top:5px; width:63px; height:28px; line-height:25px; overflow:hidden; cursor:pointer; display:none;}
.nav-btn span {background-color:#2689FF; width:11px; height:11px; float:left; border:1px solid #fff; border-radius:2px;}
.nav-btn strong {float:right; font-size:1em; color:#2689FF;}
#nav {display:none;}
#nav .menu ul li a{display:block; background-color:#fff; margin:5px 0; padding:5px 10px; color:#000;}
#nav .menu ul li a:hover {background-color:#2689FF; color:#fff;}
#nav .menu ul li li a {padding:5px 10px 5px 30px;}
/*search-form*/
.search-form {float:right; height:34px; position:relative;}
.search-form .s {height:22px; border:1px solid #ddd; padding:5px 35px 5px 5px; border-radius:3px; width:210px;}
.search-form .submit,.search-btn {position:absolute; right:0; top:1px; width:34px; height:34px; background:url(../image/search-btn.png) no-repeat center center; border:none; cursor:pointer;}
.search-form .s:focus,#login-page .login-form .text:focus {border:1px solid #2689FF; box-shadow:0 0 3px #2689FF;}
.search-btn {display:none;}
.search-bg {position:fixed; left:50%; top:50%; z-index:5; width:252px; height:34px; margin:-17px 0 0 -126px; display:none;}
.search-bg .search-form {display:block;}
/*breadcrumb*/
#breadcrumb {padding-top:10px; margin-top:18px; overflow:hidden;}
#breadcrumb span {font-size:0.875em; color:#444;}
#breadcrumb span a {color:#444;}
#breadcrumb h1 {float:left; font-size:1.75em; color:#555; font-weight:normal; line-height:1em; margin-bottom:10px;margin-right:30px; display:inline;}
#breadcrumb p {float:left; margin-bottom:10px; display:inline; color:#777; background:url(../image/block_l.png) no-repeat left 0px; padding-left:25px; margin-top:2px;}
#breadcrumb p span {background:url(../image/block_r.png) no-repeat right 0; display:block; width:25px; height:28px; float:right;}
/*container*/
#container {margin-top:18px; overflow:hidden;}
/*sidebar*/
.sidebar {background-color:#fff; width:320px; float:right;}
.widget {margin-bottom:15px; overflow:hidden;}
.widget h3,.related-pic h3,.related-post h3,.comment-list h3 {border-left:3px solid #2689FF; margin:15px 0; padding-left:20px; font-size:1em;}
.widget img {width:auto; max-width:100%; height:auto;}
.widget ul,#divSearchPanel div,#divContorPanel div,#divCalendar table {padding:0 23px;}
.widget ul li {font-size:0.875em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:url(../image/post.png) no-repeat left center; padding-left:20px; line-height:2em;}
.widget ul li.new-cmts,.widget ul li.post-thumb {font-size:1em; white-space:normal; background:none; padding-left:0; line-height:1.5em;}
.widget .new-cmts p {margin-bottom:15px;}
.widget .new-cmts .title {font-size:0.875em; font-weight:bold;}
.widget .new-cmts .title a,.post-box h2 a,.post-blog h2 a,.widget ul li a {color:#222;}
.widget .new-cmts .title a:hover,.post-box h2 a:hover,.post-blog h2 a:hover {color:#555;}
.widget .new-cmts .cont,.post-box .cont {font-size:0.75em; padding:10px; color:#555; background-color:#F1F1F1; position:relative; font-family:'SimSun';}
.post-box .cont img {width:auto; max-width:100%; height:auto;}
.widget .new-cmts .cont span,.post-box .cont span {border-bottom:9px solid #F1F1F1; border-left:9px solid transparent; border-right:9px solid transparent; display:block; position:absolute; top:-9px; left:10%;}
.widget .new-cmts .author {font-size:0.75em; text-align:right; color:#555;}
.widget ul li.post-thumb {font-size:0.875em; padding:10px 0;}
.widget .post-thumb .thumb {width:80px; height:auto; float:left; margin-right:10px; display:inline;}
.widget .post-thumb p.time {text-align:right; font-size:0.875em; color:#888;}
.widget input[type="text"] {width:60%; height:35px; line-height:35px; border:1px solid #ddd; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:0 2%;}
.widget input[type="submit"] {height:35px; width:17%; background:#F04848; border:none; color:#fff; cursor:pointer; border-radius:3px;}
#tbCalendar caption a {color:#000;}
#tbCalendar caption {height:40px; padding:0 10px; line-height:40px;}
#divSearchPanel div{text-align:center;}
#divSearchPanel div,#divContorPanel div {font-size:0.875em;}
#divTags ul {overflow:hidden;}
#divTags ul li {float:left; background:none; font-size:0.75em; margin:5px 0; display:inline;}
#divTags ul li a {display:block; float:left; background:#2689FF; color:#fff; padding:2px 4px; border-radius:2px;}
#divTags ul li a:hover {background:#222; color:#fff;}
#tbCalendar {width:100%;}
#tbCalendar caption {font-weight:bold;}
#tbCalendar thead,#tbCalendar tbody {background:#fff;}
#tbCalendar td {border:none;}
#tbCalendar thead tr th{padding:10px 0;}
#tbCalendar tbody tr td {padding-bottom:10px;}
#tbCalendar tbody tr td a {background:#F04848; color:#fff; padding:2px; font-size:0.75em; border-radius:5px;}
#divLinkage ul,#divCatalog ul,#divFavorites ul {overflow:hidden;}
#divLinkage ul li,#divCatalog ul li,#divFavorites ul li {background:none; float:left; width:50%; padding-left:0; margin:5px 0; text-align:center;}
#divLinkage ul li a,#divCatalog ul li a,#divFavorites ul li a {display:block; background:#efefef; color:#666; width:95%; margin:0 auto;}
#divCatalog ul li a:hover {background:#2689FF; color:#fff;}
#divMisc ul li {background:none; padding-left:0; margin:5px auto; text-align:center;}
#divMisc ul li a {display:block;}
#divMisc ul li img {display:block; margin:0 auto;}
#divStatistics ul li,#divAuthors ul li,span.cp-hello,span.cp-login,span.cp-vrs {background:none; border-left:4px solid #F15A5A; background:#efefef; color:#666; margin:5px 0;}
span.cp-hello,span.cp-login,span.cp-vrs {display:block; padding:5px 10px; margin:0;}
/*main*/
.main {float:left; width:850px; background-color:#fff; overflow:hidden; transition:width 0.3s ease-in 0s;display: flex;
flex-wrap: wrap;}
.post-box {float:left; width:379px; margin:23px;}
.post-box .thumbnail {width:100%; height:auto; overflow:hidden; margin-bottom:15px; position:relative; max-height:253px;}
.post-box .thumbnail a {display:block;}
.post-box h2 {font-size:1.125em; margin-bottom:15px; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.post-box .info h2 a {color:#222; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:17em; float:left; padding-right:10px;}
.post-box .info h2 a:hover {color:#555;}
.post-box .thumbnail img,.widget .post-thumb .thumb img {display:block; width:100%; height:auto;}
.post-box .thumbnail img:hover {opacity:0.9;}
/*post*/
.post {padding:23px 0;}
.post h2,.post h1.title {border-left:3px solid #2689FF; padding-left:20px; font-size:1.5em; color:#333; line-height:2em; margin-bottom:15px;}
.post .postmeta {padding:0 23px; font-size:0.75em; color:#777; margin-bottom:15px;}
.post .postmeta span {margin-right:15px;}
.post .postmeta span a {color:#777;}
.post .postmeta span a:hover {text-decoration:underline;}
.post .entry {padding:0 23px;}
.post .entry img {width:auto; max-width:100%; height:auto;}
.post .entry a {color:#2689FF;}
.post .entry a:hover {text-decoration:underline;}
.post .entry p {margin-bottom:20px; line-height:1.75em;}
.post .entry blockquote {overflow:hidden; margin-bottom:20px; padding:15px 15px 0; background-color:#f1f1f1; border-radius:3px;}
.post .entry ul,.post .entry ol {margin-bottom:20px; padding-left:2em;}
.post .entry ul li {list-style:inside disc none; padding:5px 0;}
.post .entry ol li {list-style:inside decimal none; padding:5px 0;}
.post .copyright {font-size:0.875em; background-color:#F2F2F2; margin:0 23px 15px;; text-align:center; padding:5px 0; color:#777;}
.post .tags {padding:0 23px; font-size:0.875em; margin-bottom:15px; overflow:hidden;}
.post .tags span {display:block; padding:2px 8px 2px 8px; background:url(../image/tags.png) no-repeat left center; padding-left:25px; color:#444; float:left;}
.post .tags a {display:block; float:left; background-color:#F3F3F3; padding:2px 8px; color:#666; border-radius:3px; margin-left:10px; font-size:0.875em; margin-bottom:5px;}
.post .tags a:hover {background-color:#2689FF; color:#fff;}
.post .share {text-align:center;}
.post .share span {background-color:#60C8C7; display:inline-block; width:60px; height:60px; border-radius:50%; margin:15px; transition:all 0.4s ease 0s;}
.post .share span.qzone {background-color:#FBB700;}
.post .share span.weibo {background-color:#E84B39;}
.post .share span.tencent {background-color:#3199DC;}
.post .share a {display:block; width:100%; height:100%; background:url(../image/share-round.png) no-repeat; transition:all 0.4s ease 0s;}
.post .share span.qzone a{background-position:-231px -76px;}
.post .share span.qzone a:hover {background-position:-231px -8px;}
.post .share span.weibo a{background-position:-90px -76px;}
.post .share span.weibo a:hover {background-position:-90px -8px;}
.post .share span.tencent a{background-position:-300px -76px;}
.post .share span.tencent a:hover {background-position:-300px -8px;}
/*related*/
.bx-wrapper {position:relative; margin:0 auto;}
.bx-controls {position:absolute; right:0; top:-39px;}
.bx-controls a {font-size:0.875em; color:#555; margin-left:5px; background-color:#2689FF; color:#fff; padding:2px 5px; border-radius:2px;}
.related-pic,.related-post {background-color:#fff; margin-bottom:15px;}
.related-post ul {overflow:hidden; padding:0 23px;}
.related-pic ul {padding:0 23px;}
.related-pic ul li {float:left; width:193.5px; display:inline; padding-bottom:15px;}
.related-pic ul li .thumbnail {margin-bottom:15px; max-height:181px; overflow:hidden;}
.related-pic ul li .thumbnail a {display:block; overflow:hidden;}
.related-pic ul li img {display:block; width:100%; height:auto;transition:transform 0.4s ease 0s;}
.related-pic ul li img:hover {opacity:0.7; transform:scale(1.4,1.4); transition:transform 0.4s ease 0s;}
.related-pic ul li p {font-size:0.875em; line-height:1.5em;}
.related-pic ul li p a,.related-post ul li a {color:#222;}
.related-pic ul li p a:hover,.related-post ul li a:hover {color:#3199DC;}
.related-post h3 {margin-bottom:15px;}
.related-post ul li {font-size:0.875em; line-height:2em;}
/*comment-list*/
.comment-list .title {overflow:hidden;}
.comment-list .title h3 {font-size:0.875em; float:left;}
.comment-list .title span {float:left; padding:15px; font-size:0.875em; color:#666;}
.comment-list .title span.gocmt {float:right; padding:15px 23px 15px 0;}
.comment-list .title span.gocmt a {background-color:#2689FF; color:#fff; padding:4px 8px; border-radius:2px;}
.comment-list ol {padding:0 23px;}
.comment-list ol ol {padding:0;}
.comment-list li {position:relative; overflow:hidden; border-top:1px solid #eee; padding-top:10px; margin-bottom:10px;}
.comment-list li .gravatar {position:absolute; left:0; top:15px; width:48px; height:48px;}
.comment-list li .gravatar img {width:100%; height:100%; display:block;}
.comment-list li .cmt-info {padding-left:60px;}
.comment-list li .cmt-info a {color:#2689FF;}
.comment-list li .author {margin-bottom:5px;}
.comment-list li .cmt-cont {font-size:0.875em; color:#333; margin-bottom:5px;}
.comment-list li .cmt-meta {font-size:0.75em; color:#888;}
.comment-list li .cmt-meta span.reply {float:right;}
.comment-list li .cmt-meta span.reply a {color:#2689FF;}
.comment-list li li {margin-left:65px; margin-top:15px;}

/*pagenavi*/
.pagenavi {clear:both; overflow:hidden; padding:0 23px; text-align:center; margin-bottom:15px; font-size:0.875em;}
.pagenavi a,.pagenavi span.now-page {padding:4px 8px; color:#888; margin:0 5px;}
.pagenavi a:hover,.pagenavi span.now-page {background-color:#2689FF; color:#fff;border-radius:3px; }
/*footer*/
#footer {background-color:#222; padding:30px 0; margin-top:18px;text-align:center; color:#d4d4d4;}
.friendlinks ul {padding:5px 0;}
.friendlinks ul li {display:inline; font-size:0.875em; padding:0 5px;}
.friendlinks ul li a {color:#d4d4d4;}
.friendlinks ul li a:hover {color:#fff; text-decoration:underline;}
.copyright {font-size:0.75em;}
.copyright a {color:#d4d4d4;}
.post .copyright a {color:#777;}
/*screen width*/
@media only screen and (max-width:1280px){
	.inner {
		width:93.75%;
	}
	.main {
		width:70.833333%;
	}
	.sidebar {
		width:26.666667%;
	}
	.post-box {
		width:44.588235%;
		margin:23px 2.705882%;
	}
	.comment-list li li {
		margin-left:7.647059%;
	}
}
@media only screen and (max-width:1180px){
	.search-form {
		display:none;
	}
	.search-btn {
		display:block;
	}
}
@media only screen and (max-width:960px){
	#header .logo {
		width:170px;
	}
	#header .menu ul li {
		font-size:0.875em;		
	}
}
@media only screen and (max-width:800px){
	#header .menu,
	.sidebar {
		display:none;		
	}	
	.nav-btn {
		display:block;
	}
	.main,
	.sidebar {
		float:none;
		width:100%;		
	}
}
@media only screen and (max-width:480px) {
	#topbar ul li {
		padding-right:3%;
	}
	#topbar ul li#login,
	#topbar ul li#reg {
		padding-left:2%;
	}
	.post-box {
		width:90.416667%;
		margin:23px 4.791667%;
		float:none;
		display:block;
		clear:both;
	}
	.post .share span {
		margin:15px 3.125%;
	}
	#comment .text {
		width:70%;
	}
}
@media only screen and (max-width:360px) {
	.comment-list li .gravatar {
		display:none;
	}
	.comment-list li .cmt-info {
		padding-left:0;
	}
}
.chapter-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #d48b3b;
    border: 1px solid #ffffff;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.chapter-btn:hover {
    background-color: #0056b3;
    border-color: #003d80;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.chapter-btn:active {
    background-color: #003d80;
    transform: translateY(1px);
}