/*top*/
.top {width:38%; height:400px; float:right; background-color:#fff; margin-bottom:0px; overflow:hidden;}
.top h3,.hots h3,.content h3,.widget h3 {border-left:3px solid #72288b; padding-left:15px; margin:20px 0; font-weight:normal; font-size:1.25em;}
.top ul,.widget .bloggerinfo {padding:0 18px;}
.top ul li {border-bottom:1px solid #eee; padding-bottom:15px; margin-bottom:15px;}
.top ul li.last {border-bottom:none; margin-bottom:0;}
.top h4 {font-size:1.125em; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.top p,.hots ul li p {font-size:0.875em; color:#555; overflow:hidden;}
.top p {height:48px;}
.hots ul li p {height:72px;}

/*section*/
.section {padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #eee;}
.section h4 {font-weight:normal; font-size:1.25em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:15px;}
.section .thumbnail {float:left; width:200px; padding-right:25px; position:relative;}
.section .thumbnail span {position:absolute; left:0; top:0; padding:0 5px; font-size:0.75em; background:rgba(71,150,216,.7); color:#fff;}
.section .thumbnail img {height:150px;}
.section .excerpt p {font-size:0.875em; color:#555; height:72px; overflow:hidden;}

@media only screen and (max-width:1200px){

	.top {width:340px;  height:auto;}
	.top h4 {margin-bottom:9px;}
	.top ul li {padding-bottom:10px; margin-bottom:10px;}

}
@media only screen and (max-width:1060px){

	.top {width:300px; height:auto;}
	.top h4 {font-size:1em;}

}
@media only screen and (max-width:980px){

	.top-other .icon-menu {display:block;}

@media only screen and (max-width:860px){

	.top {width:368px;  height:auto;}

}
@media only screen and (max-width:800px){

	.top {width:47%; height:auto;}

@media only screen and (max-width:747px){

	.top {width:100%; float:none; height:auto;}
	.top ul {padding:0 18px 10px;}
	.top p {height:auto;}

}
@media only screen and (max-width:640px){	

	.section h4,.postmeta {margin-bottom:5px;}
	.section .thumbnail {width:160px; height:121px; padding-top:5px; padding-right:15px;}
	.section .thumbnail img {height:121px;}

}
@media only screen and (max-width:540px){

	.section h4 {font-size:1.125em;}

}
@media only screen and (max-width:480px) {

	.top-other ul li {line-height:40px;}
	.top-other ul li .social-share {top:40px;}

	.section h4 {font-size:1em;}
	.section .thumbnail {width:120px; height:90px; padding-right:8px;}
	.section .thumbnail img {height:90px;}

}
@media only screen and (max-width:420px) {
	.related-pic ul li .thumbnail {height:134px;}
	.comment-form .input,.comment-form .submit {float:none; clear:both;}
	
}
@media only screen and (max-width:360px) {
	.widget .follow img {width:100px; height:100px;}
	.related-pic ul li .thumbnail {height:113px;}
}
@media only screen and (max-width:320px) {
	.search-form .s {width:78%;}
	.related-pic ul li .thumbnail {height:99px;}
}
.pagess {clear: both;margin: 20px;overflow: hidden;margin-left: 0px;text-align: center;font-size:12px}
.pagess ul a { display:inline-block;border: 1px solid #ccc;padding: 2px 9px;margin: 0 3px;line-height: 20px;background: #fff;color:#999}
.pagess ul a:hover{ background:#ccc; color:#fff;border: 1px solid #ccc}
.pagess ul a:hover{color:#fff;}
.pagess ul b {display: inline-block;border: 1px solid #ccc;padding: 2px 9px;margin: 0 3px;background: #ccc;color: #fff;}
.pagess ul b {color: #fff;}
.pagess ul a{color:#999}
.pagess ul a:hover {color: #fff;}