/*
Template Name:techblog
Version:1.0
Author:博客吧
Author Url:https://www.boke8.net/zblog-techblog.html
*/
* { -webkit-tap-highlight-color: transparent; word-wrap: break-word; }
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: #F2F2F2; font: 100%/1.75em 'Microsoft Yahei', Arial, tahoma; }
a { text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; color: #FF4228; }
input { -webkit-appearance: none; border: 0; }
input:focus { outline: none; }
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 #ddd; border-left: solid 1px #ddd; box-sizing: border-box; }
table th { background-color: #f9f9f9; text-align: center; box-sizing: border-box; }
table td,
table th { padding: 6px 10px; border: 1px solid #ddd; box-sizing: border-box; }

/*gold*/
.inner { width: 93.75%; margin: 0 auto; }
.thumbnail img,
.ggad img { width: 100%; height: auto; display: block; margin: 0 auto; }
.mb20 { margin-bottom: 2%; }
.muziang {background-color:#fff;box-shadow:0px 0px 5px #ddd;border:1px solid #eee;padding:3.125%;position:fixed;left:6.875%;top:50%;transform:translateY(-50%);border-radius:5px;width:80%;text-align:center;}
/*header*/
.header { width: 100%; background-color: #293742; margin-bottom: 10px;}

/*website*/
.website { font-size: 18px; color: #eee; line-height: 38px; float: left; }
.website h1 { font-size: 1em; }
.website a { color: #eee; }

/*mobile*/
.mobile { overflow: hidden; font-size: 0.875em; color: #eee; line-height: 17px; padding-top: 10px; cursor: pointer; display: none; float: right; }
.mobile .btn { float: left; overflow: hidden; height: 17px; padding-right: 10px; }
.mobile .btn i { display: block; font-style: normal; height: 3px; width: 25px; background-color: #eee; margin-bottom: 4px; }

/*nav*/
#nav { float: right; }
#nav li { float: left; display: inline-block; color: #eee; font-size: 16px; line-height: 38px; margin-left: 30px; position: relative;}
#nav li a { color: #eee; }
#nav li ul {position: absolute; left: -10%; top: 100%; width: 120%; background-color: #293742; display: none; padding: 5px 0;}
#nav li li {float: none; display: block; text-align: center; font-size: 14px; margin-left: 0; line-height: 24px; padding:5px 0;}
/*breadcrumb*/
.breadcrumb { margin-bottom: 10px; font-size: 12px; color: #999; font-family: 'Simsun'; }
.breadcrumb a { color: #999; }

/*container*/
.container { overflow: hidden; background-color: #fff; border: 1px solid #eee; padding: 30px 0; margin-bottom: 30px; }

/*sidebar*/
.sidebar { width: 205px; float: left; padding: 0 15px 0 30px; }

/*slides*/
#slides {margin-bottom: 20px; overflow:hidden;}
/*logo*/
.logo { border: 1px solid #eee; padding: 1px; }
.logo img { width: 100%; height: auto; display: block; }

/*widget*/
.widget { clear: both; margin-bottom: 25px; }
.widget h3 { font-weight: normal; font-size: 1.125em; color: #FF4228; margin-bottom: 15px; }
.widget li { font-size: 14px; line-height: 1.75em; padding: 10px 0; border-bottom: 1px solid #eee; text-align: justify; }
.widget li a { color: #666; }
.widget li a:hover { color: #333; text-decoration: underline; }
.widget .textwidget { font-size: 14px; line-height: 1.75em; color: #666; }
.widget .textwidget a {color: #0C75B6;}
/*widget*/
#divTags ul { overflow: hidden; }
#divTags li { float: left; padding: 0 5px 5px 0; border-bottom: none;}
#divTags li a { display: block; border-radius: 3px; height: 28px; line-height: 28px; font-size: 12px; padding: 0 10px; background-color: #f9f9f9; }

.custom_widget img { width: auto; display: block; max-width: 100%; height: auto; }
/*blogger*/
#blogger .avatar {margin-bottom: 10px;}
#blogger .avatar img {display: block; width: 100%; height: auto;}
#blogger h3 { font-size: 14px; line-height: 1.5em; font-weight: bold; text-align: center; }



.divComments img { width: 36px; height: 36px; display: block; float: left; padding-top: 3px; padding-right: 5px; }
.divComments li { clear: both; overflow: hidden; line-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; font-size: 0.875em; }
.divComments span { display: block; color: #333; }

#divSearchPanel form {position: relative; margin-right: 45px; border: 1px solid #eee;}
#divSearchPanel input[type='submit'] { height: 36px; width: 45px; background-color: #293742; color: #fff; border: none; cursor: pointer; position: absolute; left:100%; top: -1px; }
#divSearchPanel input[type='text'] { padding: 5px 5%; width: 90%; height: 24px; line-height: 24px; font-size: 14px;}


/*main*/
.main { margin-left: 250px; overflow: hidden; padding: 0 30px 0 15px; }

/*section*/
.section { overflow: hidden; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.section h2 { font-size: 24px; line-height: 1.35em; margin-bottom: 15px; }
.section h2 span { background-color: #FF4228; font-size: 12px; color: #fff; padding: 0px 5px; margin-right: 5px; display: inline-block; height: 22px; line-height: 22px; border-radius: 3px; vertical-align: middle; }
.section h2 a { color: #333; display: inline-block; vertical-align: middle;}
.section h2 a:hover,
.section .postmeta a:hover { color: #FF4228; }
.section .thumbnail { float: right; width: 150px; height: auto; max-height: 150px; overflow: hidden; padding-left: 20px; }
.section .excerpt { font-size: 16px; line-height: 1.875em; color: #555; margin-bottom: 10px; }
.postmeta { font-size: 12px; line-height: 1.5em; color: #888; }
.postmeta i { padding: 0 7px; font-style: normal; }
.postmeta a { color: #888; }

/*post*/
.post h1.post-title { font-size: 1.5em; font-weight: normal; color: #333; margin-bottom: 10px; }
.post h1.post-title.page-title { margin-bottom: 30px; text-align: center; }

/*entry*/
.entry { color: #333; font-size: 16px; line-height: 1.875em; padding: 2% 0; overflow: hidden; }
.entry code { background-color: #F9F2F4; color: #c7254e; margin: 0 3px; padding: 0 3px; }
.entry img { max-width: 100%; height: auto; }
.entry p,
.entry table,
.entry pre.prettyprint { margin-bottom: 2%; }
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 { margin-bottom: 2%; }
.entry h2 { font-size: 18px; line-height: 1.35em; }
.entry h3 { font-size: 16px; line-height: 1.5em; }
.entry a { color: #FF4228; text-decoration: underline; }
.tags a { color: #838790; }
.entry a:hover,
.tags a:hover { text-decoration: underline; color: #FF4228; }
.entry blockquote { overflow: hidden; margin: 0 2em 2%; background-color: #f9f9f9; padding: 2%; border: 1px dotted #ddd; border-radius: 5px; }
.entry blockquote p { color: #777; font-style: italic; font-size: 14px; margin-bottom: 0; }
.entry ul,
.entry ol { margin-bottom: 2%; overflow: hidden;margin-left: 2em; }
.entry ul li { list-style: outside disc none; margin-left: 1em;}
.entry ol li { list-style: outside decimal none; margin-left: 1em; }
.entry pre ol,
.entry pre ul { padding-left: 0; }

/*tags*/
.tags { overflow: hidden; font-size: 16px; color: #2B9EE5; }
.tags a { margin-left: 10px; }

/*postnavi*/
.postnavi { overflow: hidden; }
.postnavi a { color: #666; }
.postnavi .post_navi_left { float: left; text-align: left; width: 45%; }
.postnavi .post_navi_right { float: right; text-align: right; width: 45%; }
.postnavi p { font-size: 0.875em; color: #888; }
.postnavi i { font-style: normal; font-weight: normal; font-family: '宋体'; }
.postnavi p.post_navi_title { font-size: 0.75em; font-weight: bold; }
/*boxTitle*/
.boxTitle { font-size: 18px; color: #666; border-left: 3px solid #888; line-height: 1.125em; padding-left: 15px; font-weight: normal; margin-bottom: 15px; }
/*related*/
.related { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.related h3 { border-left-color: #FF4228;}
.related li { padding: 5px 0; font-size: 14px; overflow: hidden; }
.related li a { color: #5788aa; display: block; float: left; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related li a:hover { color: #FF4228; }
.related li span { float: right; font-size: 0.75em; color: #999; }
/*commentslist*/
#commentslist { margin-top: 30px; }
#commentslist h3 { margin-bottom: 30px; }
#commentslist h3 span { font-size: 0.875em; margin-left: 10px; }
#commentslist li { margin-bottom: 25px; overflow: hidden; }
#commentslist .avatar { width: 42px; height: 42px; overflow: hidden; border-radius: 50%; float:left; }
#commentslist .avatar img { width: 100%; height: auto; display: block; border-radius: 50%; }
#commentslist .info {margin-left: 60px; overflow: hidden;}
#commentslist .meta { font-size: 12px; color: #555; overflow: hidden; margin-bottom: 10px; line-height: 18px;}
#commentslist .meta span {display: block; float: left;}
#commentslist .meta .user {font-weight: bold; font-size: 16px; padding-right: 10px;}
#commentslist .meta .date { float: right; color: #999;}

#commentslist .meta .reply a { color: #8EC1F4; border: 1px solid #8EC1F4; padding: 0 5px; border-radius: 2px; display: block; height: 18px; line-height: 18px;}
#commentslist .meta .reply a:hover { background-color: #8EC1F4; color: #fff; }
#commentslist .text { font-size: 14px; color: #333; }
#commentslist li li { margin-left: 60px; margin-top: 15px; overflow: hidden; border: 1px solid #DEE4E9; padding: 15px; margin-bottom: 0; }
#commentslist li li .info { margin-left: 0; }
#commentslist li li .avatar { display: none; }
#commentslist li li li { margin-left: 0; }

/*comment*/
#comment {overflow: hidden;}
#comment .three {width: 103%; overflow: hidden;}
#comment .three .item {float: left; padding-right: 3%; width: 30.333%;}
#comment .item {overflow: hidden; padding-bottom:10px;}
#comment label { display: block; font-size: 14px; color: #555; }
#comment .input { border: 1px solid #959595; border-radius: 2px; overflow: hidden;}
#comment .text {font-size: 14px; line-height: 24px; padding: 5px 2%; width: 96%; display: block;}
#comment textarea.text { width: 99%; height: 120px; border: none; resize: vertical; padding-left: 0.5%; padding-right: 0.5%;}
#comment .submit { background-color: #959595; font-size: 14px; color: #fff; padding: 0 20px; border-radius: 5px; display: block; float: right; cursor: pointer; height: 35px;}
/*cancel-reply*/
#cancel-reply { height: 35px; width: 82px; text-align: center; line-height: 35px; background-color: #FE6B63; color: #fff; display: block; border-radius: 5px; float: left; font-size: 14px; }
/*pagenavi*/
.pagenavi { overflow: hidden; font-size: 0; line-height: normal;}
.pagenavi a,
.pagenavi .now-page { display: inline-block; font-size: 14px; color: #666; border: 1px solid #dedede; margin: 2px 5px 2px 0; padding: 0 12px; height:32px; line-height: 32px; }
.pagenavi .now-page { color: #FF4228; font-weight: bold; border-color: #FF4228; }

/*footer*/
.footer { width: 100%; height: auto; background-color: #f6f6f6; padding: 50px 0; border-top: 1px solid #eee; }
.footer p { font-size: 0.75em; color: #888; text-align: center; }
.footer a { color: #888; }

/*reward*/
#reward { text-align: center; color: #000; }
#reward .text p { margin-bottom: 15px; font-size: 16px; line-height: 2em; font-weight: bold; color: #2B9EE5; }
#reward .text a { display: block; width: 120px; height: 38px; line-height: 38px; color: #fff; font-size: 18px; border-radius: 3px; background-color: #367bf0; margin: 0 auto; font-weight: normal; }
#reward .text a:hover { opacity: .85; }
#popup { display: none; position: fixed; left: 50%; top: 50%; margin-left: -160px; transform: translateY(-50%); z-index: 9; background-color: #fff; width: 310px; border: 5px solid rgba(0, 0, 0, .7); border-radius: 5px; }
#popup ul { overflow: hidden; padding: 2% 2.5%; }
#popup li { float: left; width: 45%; padding: 2.5%; text-align: center; }
#popup li img { display: block; width: 100%; height: 100%; }
#popup li p { padding: 3px 0; font-size: 14px; line-height: 1.25em; color: #353535; }
#popup .close { width: 20px; height: 20px; background-color: rgba(0, 0, 0, .85); color: #fff; border-radius: 50%; text-align: center; line-height: 19px; font-size: 16px; position: absolute; right: -23px; top: -23px; cursor: pointer; }

/*screen width*/
@media only screen and (max-width:1024px) {
	/*1024*/
	.mobile { display: block; }
	/*1024*/
	#nav {position: fixed; left: -100%; width: 100%; height: 100%; top: 38px; background-color: #293742; z-index: 9; float: none; border-top: 1px solid #999; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: left .3s;}
	#nav.show {left: 0;}
	#nav ul {padding: 20px 0; margin-bottom: 38px;}
	#nav li {display: block; float: none; margin: 0 3.125%;}
	#nav li a {display: block; padding: 5px 0; margin-right: 48px;}
	#nav li ul {position: static; width: auto; left: auto; top: auto; margin-bottom: 0;}
	#nav li li {text-align: left;}
	#nav li li a {margin-right: 0; padding-left: 2em;}
	#nav em {position: absolute; width: 48px; height: 48px; right: 0; top: 0;}
	#nav em:after {content: ''; display: block; width: 7px; height: 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); position: absolute; left: 50%; top: 50%; margin: -5.5px 0 0 -5.5px; z-index: 2;}
}
@media only screen and (max-width:1000px) {
	.container { padding: 20px 0; }
	.sidebar { padding: 0 10px 0 20px; }
	.main { padding: 0 20px 0 10px; margin-left: 235px;}
}
@media only screen and (max-width:900px) {
	.header { margin-bottom: 10px; }
	.container { margin-bottom: 20px; }
	.sidebar { display: none; }
	.main { margin-left: 0; padding: 0 20px; }
	.footer { padding: 30px 0; }
}
@media only screen and (max-width:768px) {
	.section h2 { font-size: 18px; line-height: 1.5em; }
	.section .excerpt { font-size: 14px; line-height: 2em; }

	/*768*/
	#comment .three {width: auto;}
	#comment .three .item {float: none; width: auto; padding-right: 0;}
	#comment .text,
	#comment textarea.text {padding-left: 3%; padding-right: 3%; width: 94%;}
	#comment .submit {padding: 0 10px; height: 32px;}
	#cancel-reply {height: 32px; line-height: 32px; width: 76px;}
	/*768*/
	#commentslist .avatar {width: 30px; height: 30px;}
	#commentslist .info {margin-left: 40px;}
	#commentslist li li {margin-left: 40px;}
	/*768*/
	.pagenavi {text-align: center;}
	.pagenavi a,
	.pagenavi .now-page {height: 26px; line-height: 26px; padding: 0 9px;}
}
@media only screen and (max-width:480px) {
	.section .thumbnail { display: none; }
	.entry blockquote { margin: 15px 1em; }
	.entry ul,
	.entry ol { padding-left: 1em; }
	.related li a { width: auto; float: none; }
	.related li span { display: none; }
	.postnavi .post_navi_left,
	.postnavi .post_navi_right { float: none; text-align: left; width: auto; }
}