/*
Theme Name:plain
Theme Author:博客吧
Theme Url:http://www.boke8.net/zblog-php-plain.html
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }
html,
body,
div,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ol,
ul,
li { margin: 0; padding: 0; }
body { background-color: #fff; font: 100%/1.75 'Microsoft Yahei', tahoma, Arial; }
a { text-decoration: none; color: #339E67; }
li { list-style: none; }
.clear { clear: both; }
a img { border: none; }
table { background-color: transparent; border-spacing: 0; border-collapse: collapse; font-size: 16px; width: 100%; border-top: solid 1px #e4e4e4; border-left: solid 1px #e4e4e4; box-sizing: border-box; }
table th { background-color: #f9f9f9; text-align: center; box-sizing: border-box; }
table td,
table th { padding: 1%; border: 1px solid #e4e4e4; box-sizing: border-box; }

/*header*/
#header { background-color: #339E67; width: 93.75%; padding: 10px 3.125%; position: sticky; top:0; border-bottom: 2px solid #ddd; opacity: 0.9; z-index: 2; }

/*logo*/
#logo { float: left; width: 170px; }
#logo a { display: block; background: url(images/logo.png) no-repeat left center; background-size: contain; overflow: hidden; position: relative; padding-bottom: 26.471%;}
#logo i {display:block; position: absolute; left:0; top:0; width: 100%; height: 100%; text-indent:-9999em; overflow: hidden;}
/*searchForm*/
#searchForm { float: right; width: 350px; padding: 2px 0; }
#searchForm .form { position: relative; padding-right: 45px; border: 1px solid #27935c; }
#searchForm .submit { height: 100%; width: 45px; background-color: #fff; cursor: pointer; position: absolute; right: 0; top: 0; }
#searchForm input { border: none; }
#searchForm .s { background-color: #fff; opacity: 0.8; font-size: 14px; height: 25px; line-height: 25px; padding: 6px 5%; width: 90%; }

/*nav*/
#nav { width: 250px; background: #F2F2F2; position: fixed; left: 0; top: 67px; height: 100%; border-right: 2px solid #dedede; opacity: 0.8; z-index: 2; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#nav ul { border-bottom: 1px solid #fff; margin-bottom: 67px; }
#nav li { font-size: 16px; line-height: 45px; border-top: 1px solid #fff; border-bottom: 1px solid #dedede; }
#nav li a { color: #111; display: block; padding: 0 2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nav li a:hover { background-color: #fff; }
#nav li ul { border-bottom: none; margin-bottom: 0; border-top: 1px solid #dedede; }
#nav li li { font-size: 14px; }
#nav li li:last-child { border-bottom: none; }
#nav li li a { padding-left: 4em; }
#nav a i.icon-tasks,
#nav a i.icon-desktop,
#nav a i.icon-comments { font-size: 0.85em; }
/*topBtn*/
#topBtn {position:absolute; right:3.125%; top:50%; transform:translateY(-50%); display: none;}
#topBtn span {display: block; float:left; width: 35px; height: 35px; text-align: center; line-height: 35px; font-size:20px; color:#fff; cursor: pointer;}
#topBtn #navbtn {font-size: 24px;}

#nav.display,
#searchForm.display { display: block; }
/*wrapper*/
#bk8-Slides {margin-bottom: 3.5%; overflow:hidden;}
/*wrapper*/
#wrapper { margin-left: 250px; padding: 30px 3.125%; }
.blogitem { overflow: hidden; margin-bottom: 3.5%; }
.blogitem h2 { font-size: 24px; line-height: 1.35em; margin-bottom: 15px; font-weight: normal;}
.blogitem h2 i { color: #F15A5A; }
.blogitem h2 a { color: #333; }
.blogitem h2 a:hover { color: #C83025; }
.blogitem h2 span { background-color: #AACD06; color: #fff; font-size: 0.7em; padding: 0 5px; margin-right: 10px; border-radius: 2px; }
.blogitem .thumbnail { width: 250px; float: left; overflow: hidden; border: 1px solid #ddd; padding: 2px; background-color: #fff; }
.blogitem .thumbnail a { display: block; padding-bottom: 75%; background: no-repeat center center; background-size: cover; }
.blogitem .info { margin-left: 280px; overflow: hidden; }
.blogitem .excerpt { font-size: 16px; line-height: 1.875em; height: 7.5em; color: #555; margin-bottom: 30px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; text-overflow: ellipsis;}
.blogitem .more { float: right; }
.blogitem .more a { background-color: #3ba26d; color: #fff; display: block; padding: 0 15px; height: 30px; line-height: 30px; font-size: 14px; }
.postmeta { border-bottom: 2px solid #e4e4e4; color: #888; margin-bottom: 30px; padding-bottom: 5px; font-size:0; line-height: normal;}
.postmeta span { font-size: 14px; line-height: 2em; padding-right: 15px; display: inline-block; }
.postmeta span a {color: #888;}
.postmeta span a:hover { color: #C83025; }
/*gg*/
.gg { width: 100%; height: auto; margin-bottom: 3.5%; text-align: center; overflow: hidden; }
.gg a { display: block; }
.gg img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
/*gg*/
.entry { font-size: 16px; line-height: 1.875em; color:#333; overflow: hidden;  text-align: justify; }
.entry img {max-width: 100%; height: auto!important; }
.entry p,
.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 { margin-bottom: 1em;}
.entry blockquote {padding:1em 1em 0; margin:0 2em 1em; overflow: hidden; background-color:#f9f9f9; border-radius:5px;}
.entry ul,
.entry ol {margin-bottom: 1em; padding-left:1em; margin-left:2em;}
.entry ul li {list-style: outside disc none;}
.entry ol li {list-style: outside decimal none;}
/*postTitle*/
.postTitle {font-size: 28px; line-height: 1.5em; margin-bottom:15px; }

.singlePage .postTitle {text-align: center;}
/*copyright*/
.copyright { margin-bottom: 2.5%; font-size: 12px; line-height: 2em; background-color: #f1f1f1; padding: 10px 15px; color: #999; }
/*tags*/
.tags { margin-bottom: 2.5%; font-size: 12px; line-height: 2em; color: #34495E; text-align: center; }
.tags a {display:inline-block; background-color: #F04848; color: #fff; height: 24px; line-height: 24px; padding:0 5px; margin: 2px; vertical-align: middle; }
.tags a:hover { background-color: #5CB185; }
/*bxTitle*/
.bxTitle { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 15px; border-bottom: 1px solid #eee; line-height: 1.5em; padding-bottom: 10px;}

.related { margin-bottom: 2.5%; overflow: hidden;}
.related ul {overflow: hidden; width: 102%; display: flex; flex-wrap: wrap;}
.related li {width: 14.666%; padding: 1% 2% 1% 0; font-size: 14px; line-height:2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
.related .thumbnail {margin-bottom: 5px;}
.related .thumbnail a {display: block; padding-bottom: 75%; background: no-repeat center center; background-size: cover;}
.related h4 {font-size: 16px; line-height: 1.875em; white-space: nworap; overflow: hidden; text-overflow: ellipsis; font-weight: normal;}
.related h4 a {color: #333;}
.related h4 a:hover{color: #339E67;}

.warning {text-align: center; font-size:12px; color:#000; line-height: 2em; font-weight: bold; margin-top: 2.5%;}
/*post*/
.post { clear: both; overflow: hidden; padding-bottom: 5%;}
/*commentlist*/
#commentlist ol li { position: relative; clear: both; margin-bottom: 15px; }
#commentlist ol li .gravatar { position: absolute; left: 0; top: 3px; width: 40px; height: 40px; }
#commentlist ol li .gravatar img { display: block; width: 100%; height: auto; }
#commentlist ol li .cmtInfo { padding-left: 45px; }
#commentlist ol li .cmtInfo p { font-size: 0.875em; }
#commentlist ol li .cmtInfo p.time { font-size: 0.75em; color: #666; }
#commentlist ol li .cmtInfo p span { float: right; font-size: 0.75em; }
#commentlist ol li .cmt-con { font-size: 0.75em; margin-top: 10px; }
#commentlist ol li li { margin-left: 35px; margin-top: 15px; margin-bottom: 0; }
/*postbottom*/
.postbottom {margin-left: 50px; margin-bottom: 1.5%; font-size:14px; color:#999; line-height: 2em;}
/*comment*/
#comment .item { overflow: hidden; margin-bottom: 15px; position: relative;}
#comment label {display:block; float:left; font-size: 14px; height: 40px; line-height: 40px;}
#comment label i {font-style: normal; color:#f00; margin-left: 5px;}
#comment .input {margin-left: 50px; overflow: hidden; border: 1px solid #dedede;}
#comment .text {font-family: 'Microsoft Yahei'; height: 28px; line-height: 28px; width: 96%; padding: 5px 2%; border:none; display:block; font-size:14px;}
#comment img {display: block; position:absolute; right:0; height: 100%; width: auto; top:50%; transform: translateY(-50%); background-color: #fff; cursor: pointer;}

#comment textarea.text {height: 150px; resize: vertical; border:none;}
#comment .submit { cursor: pointer; border: none; background-color: #5CB185; color: #fff; width:120px; height: 42px; font-size: 16px; float:right; -webkit-appearance:none; appearance:none;}

/*pagenavi*/
.pagenavi { clear: both; text-align: center; font-size:0; line-height: normal; padding:2.5% 0;}
.pagenavi a,
.pagenavi span.now-page {display: inline-block; font-size:14px; height: 32px; line-height: 32px; margin: 0 10px; color: #aaa; border-bottom: 2px solid #ccc; font-weight: bold; }
.pagenavi a:hover,
.pagenavi span.now-page { color: #339E67; border-color: #339E67; }

/*footer*/
#footer { clear: both; margin-left: 250px; padding: 20px 3.125%; font-size: 14px; line-height: 2em; color: #333; text-align: center; text-transform: uppercase; }

/*friendlinks*/
#friendlinks { overflow: hidden; margin-bottom: 10px; }
#friendlinks ul { font-size: 0; line-height: normal; }
#friendlinks li { display: inline-block; font-size: 14px; padding: 2px 10px; }

/*media*/
@media only screen and (max-width:1280px) {
	#nav {width: 200px;}
	#wrapper {margin-left: 200px; padding-top: 20px; padding-bottom: 20px;}
	.postmeta {margin-bottom: 20px;}
	.postmeta span {font-size:12px; }
	.blogitem h2 {font-size:22px; margin-bottom: 10px;}
	.blogitem .thumbnail {width: 200px;}
	.blogitem .info {margin-left: 220px;}
	.blogitem .excerpt {font-size:14px; line-height: 2em; height: 8em; margin-bottom: 14px;}

	#footer {margin-left: 200px;}

	.postTitle {font-size:24px;}
	.related li {width: 23%;}
	.related h4 {font-size: 14px;}
}
@media only screen and (max-width:1024px) {
	#nav {width: 180px;}
	#nav li a {padding:0 1.5em;}
	#nav li li a {padding-left:3.5em;}
	#wrapper,
	#footer {margin-left: 180px;}
	.blogitem h2 {font-size:20px;}
	.blogitem .thumbnail {width: 170px;}
	.blogitem .info {margin-left: 190px;}
	.blogitem .excerpt {height: 6em; margin-bottom: 19px; -webkit-line-clamp: 3;}
	.related li {width: 31.333%;}
}
@media only screen and (max-width:768px) {
	
	#topBtn {display: block;}
	#searchForm {background-color: rgba(255,255,255,.8); position: absolute; left:0; top: 100%; width:100%; overflow: hidden; display: none;}
	#searchForm .form {margin:8px 3.125%;}
	#searchForm .submit {background-color: #5CB185; color: #fff;}
	
	#nav {width: 100%; top:57px; left:-100%; transition:all .3s; opacity: 0;}
	#nav.open {left:0; opacity: 1;}
	#nav ul {margin-bottom: 57px;}
	#nav li {line-height: 40px;}
	#nav li a {padding:0 3.125%;}

	#wrapper {margin-left: 0; padding: 5% 3.125%; }
	#bk8-Slides,
	.blogitem {margin-bottom: 5%;}
	.blogitem h2 {text-align: center;}
	.blogitem .thumbnail {width: auto; float:none; margin-bottom: 2.5%;}
	.blogitem .info {margin-left: 0;}
	.blogitem .excerpt {height: auto; max-height:10em; margin-bottom: 2%; -webkit-line-clamp: 5;}
	.blogitem .more {float:none; font-size:12px; text-align: center;}
	.postmeta {text-align: center; margin-bottom: 15px; border-bottom-width: 1px;}
	.postmeta span {padding:0 8px; line-height: 1.75em;}
	.pagenavi {height: 28px; line-height: 28px;}

	#footer {margin-left: 0; padding:3% 3.125%; font-size:12px;}
	#friendlinks li {font-size:12px;}

	.bxTitle {font-size:16px; padding-bottom: 5px;}
	#comment .item {margin-bottom:10px;}
	#comment label {float:none; height: auto; line-height: 1.75em; margin-bottom: 5px;}
	#comment img {margin-top: 15px;}
	#comment .input {margin-left: 0;}
	#comment .text {height: 25px; line-height: 25px;}
	#comment textarea.text {height: 90px;}
	#comment .submit {width: 100px; height: 32px; font-size:14px; font-weight: bold;}

	.postbottom {margin-left: 0; margin-bottom: 2.5%;}

	.entry {font-size:14px; line-height: 1.75em;}
	.copyright {margin-bottom: 5%;}

	.postTitle {font-size:20px; text-align: center; margin-bottom: 10px;}
	.related ul {width: 103%;}
	.related li {width: 47%; padding: 1.5% 3% 1.5% 0;}
    /*768*/
    #logo {width: 132px;}
}