master

分支 (1)

标签 (1)

管理

管理

master

v1.0

SimpleHomeForEmlog
/
style.css

/*


Theme Name: SimpleHome


Theme URI: http://www.jermey.cn


Author: 四少爷


Author URI: http://www.jermey.cn


Description: this is a personal blog theme, use the responsive design.


Version:2.0


Tags: 主题原作为：Memory；由四少爷进行修改。整理页面DIV标签。整合多说。修改手机版菜单。三栏,响应式,文章置顶,特色图像,无障碍友好,红色,博客,分享,扁平化


License:GNU General Public License v2.0


License URI:http://www.gnu.org/licenses/gpl-2.0.html


*/


@charset "utf-8";


* {margin:0;padding:0;}


body {


	/*点击效果,搭配active使用*/


	-Webkit-tap-highlight-color: rgba(0,0,0,0);


	margin:0;


	padding: 0;


	font: normal 12px "SimSun";


	background: #d9d9d9;


}


img {


	border: none;


}


.left {


	width: 260px;


	height: 100%;


	position: fixed;


	left: 0;


	top:0 ;


	z-index: 9;


}


.left:after {


	content: "";


	width: 60px;


	height: 100%;


	position: fixed;


	background: #262626;


	top: 0;


	left: 260px;


}


#categories {


	width: 50px;


	height: 50px;


	position: absolute;


	top: 10px;


	color: #fff;


	z-index: 999;


	line-height: 50px;


	text-align: center;


	border-radius: 5px;


	font-size: 36px;


	cursor: pointer;


	left: 10px;


	display: none;


}


#categories select{


	position: absolute;


	top: 0;


	left: 0;


	width: 100%;


	opacity: 0;


	height: 100%;


}


.search {


	width: 220px;


	height: 30px;


	line-height: 30px;


	position: relative;


	margin: 0px 20px;


}


.search input[type=text] {


	width: 174px;


	padding: 0 36px 0 10px;


	height: 30px;


	border: none;


	color: #666;


	background: #fff;


	outline: none;


	border-radius: 15px;


}


.search input[type=submit] {


	width: 25px;


	height: 25px;


	border: none;


	background-image: url(images/search_icon.png);


	position: absolute;


	top: 3px;


	right: 3px;


	cursor: pointer;


	border-radius: 50%;


	-webkit-transition: background ease .2s;


	-moz-transition: background ease .2s;


	-o-transition: background ease .2s;


	transition: background ease .2s;


}


.search input[type=submit]:hover {


	-webkit-transition: background ease .2s;


	-moz-transition: background ease .2s;


	-o-transition: background ease .2s;


	transition: background ease .2s;


	-webkit-animation:btn-pudding 1s linear;


	-moz-animation:btn-pudding 1s linear;


	animation:btn-pudding 1s linear;


}


.face-area {


	width: 260px;


	height: 260px;


	position: relative;


	background: url(images/circular_shadow.png) center top no-repeat;


}


.face-img {


	width: 130px;


	height: 130px;


	border-radius: 50%;


	position: absolute;


	left: 65px;


	top: 35px;


	transition: all 0.5s ease-in-out;


	-moz-transition: all 0.5s ease-in-out;


	-webkit-transition: all 0.5s ease-in-out;


	-o-transition: all 0.5s ease-in-out;


}


.face-img img {


	display:block;


	margin:0 auto;


	border:5px solid #fff;


	border-radius:50%;


	-webkit-transition:all .3s ease-in-out;


	-moz-transition:all .3s ease-in-out;


	-o-transition:all .3s ease-in-out;


	transition:all .3s ease-in-out


	-webkit-animation: fly .5s  ease-in-out;


	-moz-animation: fly .5s  ease-in-out;


	-o-animation: fly .5s  ease-in-out;


	animation: fly .5s  ease-in-out;


	animation: fly .5s  ease-in-out;


}


@-webkit-keyframes fly {


	0%{-webkit-transform:scale(0.1) rotate(0deg) rotateX(0deg);}


    100%{-webkit-transform:scale(1) rotate(360deg) rotateX(360deg);}


}


@keyframes fly {


	0%{transform:scale(0.1) rotate(0deg) rotateX(0deg);}


    100%{transform:scale(1) rotate(360deg) rotateX(360deg);}


}


@-moz-keyframes fly {


	0%{-moz-transform:scale(0.1) rotate(0deg) rotateX(0deg);}


    100%{-moz-transform:scale(1) rotate(360deg) rotateX(360deg);}


}


@-o-keyframes fly {


	0%{-o-transform:scale(0.1) rotate(0deg) rotateX(0deg);}


    100%{-o-transform:scale(1) rotate(360deg) rotateX(360deg);}


}


.face-img:hover {


	transform:rotate(360deg);


	-webkit-transform:rotate(360deg);


	-moz-transform:rotate(360deg);


	-ms-transform:rotate(360deg);


	-o-transform:rotate(360deg);


}


.face-name {


	font: normal 24px/30px "Microsoft Yahei";


	color: #fff;


	width: 260px;


	text-align: center;


	height: 30px;


	bottom: 50px;


	position: absolute;


	text-shadow: 2px 2px 0px rgba(0,0,0,0.2);


}


.nav {


	width: 220px;


	position: relative;


	height: auto;


	margin: 30px auto 0 auto;


}


.nav ul {


	list-style: none;


	width: 220px;


	height: auto;


	position: relative;


}


.nav-current {


	margin: 0 !important;


	position: absolute !important;


	z-index: 1 !important;


	top: 0;


	background: #000;


	border-radius: 10px;


}


.nav ul li {


	width: 220px;


	height: 20px;


	line-height: 20px;


	position: relative;


	z-index: 2;


	margin: 15px 0;


	color: #fff;


	cursor: pointer;


	text-align: center;


}


.to-top {


	width: 35px;


	height: 35px;


	position: absolute;


	bottom: 10px;


	z-index: 3;


	border-radius: 50%;


	color: #fff;


	opacity: 0;


	cursor: pointer;


	left: 272px;


	text-align: center;


	transition: all .3s ease-out;


}


.to-top:hover {


	-webkit-animation:btn-pudding 1s linear;


	-moz-animation:btn-pudding 1s linear;


	animation:btn-pudding 1s linear;


	transition: all .3s ease-out;


	-webkit-transition: all .3s ease-out;


	-moz-transition: all .3s ease-out;


	-o-transition: all .3s ease-out;


}


@-webkit-keyframes btn-pudding{0%{-webkit-transform:scale(1.2,0.8)}1%{-webkit-transform:scale(1.18,0.82)}2%{-webkit-transform:scale(1.16,0.84)}3%{-webkit-transform:scale(1.13,0.87)}4%{-webkit-transform:scale(1.1,0.9)}5%{-webkit-transform:scale(1.07,0.93)}6%{-webkit-transform:scale(1.04,0.96)}7%{-webkit-transform:scale(1.01,0.99)}8%{-webkit-transform:scale(0.99,1.01)}9%{-webkit-transform:scale(0.97,1.03)}10%{-webkit-transform:scale(0.95,1.05)}11%{-webkit-transform:scale(0.94,1.06)}12%{-webkit-transform:scale(0.93,1.07)}13%{-webkit-transform:scale(0.93,1.07)}14%{-webkit-transform:scale(0.93,1.07)}15%{-webkit-transform:scale(0.93,1.07)}16%{-webkit-transform:scale(0.94,1.06)}17%{-webkit-transform:scale(0.94,1.06)}18%{-webkit-transform:scale(0.95,1.05)}19%{-webkit-transform:scale(0.96,1.04)}20%{-webkit-transform:scale(0.98,1.02)}21%{-webkit-transform:scale(0.99,1.01)}22%{-webkit-transform:scale(1,1)}23%{-webkit-transform:scale(1,1)}24%{-webkit-transform:scale(1.01,0.99)}25%{-webkit-transform:scale(1.02,0.98)}26%{-webkit-transform:scale(1.02,0.98)}27%{-webkit-transform:scale(1.02,0.98)}28%{-webkit-transform:scale(1.03,0.97)}29%{-webkit-transform:scale(1.03,0.97)}30%{-webkit-transform:scale(1.02,0.98)}31%{-webkit-transform:scale(1.02,0.98)}32%{-webkit-transform:scale(1.02,0.98)}33%{-webkit-transform:scale(1.02,0.98)}34%{-webkit-transform:scale(1.01,0.99)}35%{-webkit-transform:scale(1.01,0.99)}36%{-webkit-transform:scale(1.01,0.99)}37%{-webkit-transform:scale(1,1)}38%{-webkit-transform:scale(1,1)}39%{-webkit-transform:scale(1,1)}40%{-webkit-transform:scale(0.99,1.01)}41%{-webkit-transform:scale(0.99,1.01)}42%{-webkit-transform:scale(0.99,1.01)}43%{-webkit-transform:scale(0.99,1.01)}44%{-webkit-transform:scale(0.99,1.01)}45%{-webkit-transform:scale(0.99,1.01)}46%{-webkit-transform:scale(0.99,1.01)}47%{-webkit-transform:scale(0.99,1.01)}48%{-webkit-transform:scale(0.99,1.01)}49%{-webkit-transform:scale(1,1)}}@-moz-keyframes preload3{0%{-webkit-transform:translateY(80px);opacity:0}100%{-webkit-transform:translateY(0px);opacity:1}}


@keyframes btn-pudding{0%{transform:scale(1.2,0.8)}1%{transform:scale(1.18,0.82)}2%{transform:scale(1.16,0.84)}3%{transform:scale(1.13,0.87)}4%{transform:scale(1.1,0.9)}5%{transform:scale(1.07,0.93)}6%{transform:scale(1.04,0.96)}7%{transform:scale(1.01,0.99)}8%{transform:scale(0.99,1.01)}9%{transform:scale(0.97,1.03)}10%{transform:scale(0.95,1.05)}11%{transform:scale(0.94,1.06)}12%{transform:scale(0.93,1.07)}13%{transform:scale(0.93,1.07)}14%{transform:scale(0.93,1.07)}15%{transform:scale(0.93,1.07)}16%{transform:scale(0.94,1.06)}17%{transform:scale(0.94,1.06)}18%{transform:scale(0.95,1.05)}19%{transform:scale(0.96,1.04)}20%{transform:scale(0.98,1.02)}21%{transform:scale(0.99,1.01)}22%{transform:scale(1,1)}23%{transform:scale(1,1)}24%{transform:scale(1.01,0.99)}25%{transform:scale(1.02,0.98)}26%{transform:scale(1.02,0.98)}27%{transform:scale(1.02,0.98)}28%{transform:scale(1.03,0.97)}29%{transform:scale(1.03,0.97)}30%{transform:scale(1.02,0.98)}31%{transform:scale(1.02,0.98)}32%{transform:scale(1.02,0.98)}33%{transform:scale(1.02,0.98)}34%{transform:scale(1.01,0.99)}35%{transform:scale(1.01,0.99)}36%{transform:scale(1.01,0.99)}37%{transform:scale(1,1)}38%{transform:scale(1,1)}39%{transform:scale(1,1)}40%{transform:scale(0.99,1.01)}41%{transform:scale(0.99,1.01)}42%{transform:scale(0.99,1.01)}43%{transform:scale(0.99,1.01)}44%{transform:scale(0.99,1.01)}45%{transform:scale(0.99,1.01)}46%{transform:scale(0.99,1.01)}47%{transform:scale(0.99,1.01)}48%{transform:scale(0.99,1.01)}49%{transform:scale(1,1)}}


@-moz-keyframes btn-pudding{0%{-moz-transform:scale(1.2,0.8)}1%{-moz-transform:scale(1.18,0.82)}2%{-moz-transform:scale(1.16,0.84)}3%{-moz-transform:scale(1.13,0.87)}4%{-moz-transform:scale(1.1,0.9)}5%{-moz-transform:scale(1.07,0.93)}6%{-moz-transform:scale(1.04,0.96)}7%{-moz-transform:scale(1.01,0.99)}8%{-moz-transform:scale(0.99,1.01)}9%{-moz-transform:scale(0.97,1.03)}10%{-moz-transform:scale(0.95,1.05)}11%{-moz-transform:scale(0.94,1.06)}12%{-moz-transform:scale(0.93,1.07)}13%{-moz-transform:scale(0.93,1.07)}14%{-moz-transform:scale(0.93,1.07)}15%{-moz-transform:scale(0.93,1.07)}16%{-moz-transform:scale(0.94,1.06)}17%{-moz-transform:scale(0.94,1.06)}18%{-moz-transform:scale(0.95,1.05)}19%{-moz-transform:scale(0.96,1.04)}20%{-moz-transform:scale(0.98,1.02)}21%{-moz-transform:scale(0.99,1.01)}22%{-moz-transform:scale(1,1)}23%{-moz-transform:scale(1,1)}24%{-moz-transform:scale(1.01,0.99)}25%{-moz-transform:scale(1.02,0.98)}26%{-moz-transform:scale(1.02,0.98)}27%{-moz-transform:scale(1.02,0.98)}28%{-moz-transform:scale(1.03,0.97)}29%{-moz-transform:scale(1.03,0.97)}30%{-moz-transform:scale(1.02,0.98)}31%{-moz-transform:scale(1.02,0.98)}32%{-moz-transform:scale(1.02,0.98)}33%{-moz-transform:scale(1.02,0.98)}34%{-moz-transform:scale(1.01,0.99)}35%{-moz-transform:scale(1.01,0.99)}36%{-moz-transform:scale(1.01,0.99)}37%{-moz-transform:scale(1,1)}38%{-moz-transform:scale(1,1)}39%{-moz-transform:scale(1,1)}40%{-moz-transform:scale(0.99,1.01)}41%{-moz-transform:scale(0.99,1.01)}42%{-moz-transform:scale(0.99,1.01)}43%{-moz-transform:scale(0.99,1.01)}44%{-moz-transform:scale(0.99,1.01)}45%{-moz-transform:scale(0.99,1.01)}46%{-moz-transform:scale(0.99,1.01)}47%{-moz-transform:scale(0.99,1.01)}48%{-moz-transform:scale(0.99,1.01)}49%{-moz-transform:scale(1,1)}}


.to-top i {


	font-size: 24px;


	line-height: 35px;


	position: relative;


	z-index: 2;


}


.sns-icon {


	width: 35px;


	height: auto;


	position: absolute;


	top: 20px;


	z-index: 3;


	left: 272px;


}


.sns-icon ul{


	width: 35px;


	height: auto;


	list-style: none;


}


.sns-icon ul li {


	width: 35px;


	height: 35px;


	position: relative;


	cursor: pointer;


	margin: 15px 0 0 0;


	transition: all 0.3s ease-in-out;


	-moz-transition: all 0.3s ease-in-out;


	-ms-transition: all 0.3s ease-in-out;


	-o-transition: all 0.3s ease-in-out;


	-webkit-transition: all 0.3s ease-in-out;


}


.sns-icon ul li span {


	display: none;


	width: 100px;


	height: 30px;


	background: #4d4d4d;


	color: #fff;


	border-radius: 5px;


	position: absolute;


	left: 50px;


	line-height: 30px;


	padding: 0px 10px;


}


.sns-icon ul li:hover>span {display:block;}


.sns-icon ul li:hover {


	transform:rotate(360deg);


	-webkit-transform:rotate(360deg);


	-moz-transform:rotate(360deg);


	-ms-transform:rotate(360deg);


	-o-transform:rotate(360deg);


}


.sns-weibo {


	background: url(images/icon_dark.png) 0px 0px no-repeat;


}


.sns-qq {


	background: url(images/icon_dark.png) 0px -35px no-repeat;


}


.sns-weichat {


	background: url(images/icon_dark.png) 0px -70px no-repeat;


}


.icon-category {


	background: url(images/icon_dark.png) 0px -105px no-repeat;


}


.sns-weibo:hover, .sns-weibo-open {


	background: url(images/icon_light.png) 0px 0px no-repeat;


}


.sns-qq:hover {


	background: url(images/icon_light.png) 0px -35px no-repeat;


}


.sns-weichat:hover {


	background: url(images/icon_light.png) 0px -70px no-repeat;


}


.icon-category:hover, .list-open {


	background: url(images/icon_light.png) 0px -105px no-repeat;


}


.container {


	width: auto;


	height: auto;


	margin-left: 340px;


	margin-top: 35px;


}


.article-list {


	width: auto;


	height: auto;


	padding: 0 255px 0 0;


}


.article, .comments {


	width: 100%;


	height: auto;


	border-radius: 5px;


	margin: 0 0 35px 0;


	background: #fff;


	position: relative;


	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);


}


.comments {


	padding: 10px 0 0 0;


}


.article {


	overflow: hidden;


}


.article>h1, .comments>h1 {


	font: normal 18px/40px "Microsoft Yahei";


	background: #fff;


	padding-left: 20px;


	margin: 10px auto;


	color: #000;


	text-overflow:ellipsis; white-space:nowrap; overflow:hidden;


	transition: color .2s ease;


	-moz-transition: color .2s ease;


	-ms-transition: color .2s ease;


	-o-transition: color .2s ease;


	-webkit-transition: color .2s ease;


}


.comments>h1  {


	margin: 0 auto 10px auto;


}


.article>h1:hover {


	transition: color .2s ease;


	-moz-transition: color .2s ease;


	-ms-transition: color .2s ease;


	-o-transition: color .2s ease;


	-webkit-transition: color .2s ease;


}


.article .summary,.article .content, .comments .content {


	width: auto;


	padding: 20px;


	border-top: 1px solid #dee1e0;


	position: relative;


	background: #f4f4f4;


	color: #4d4d4d;


	margin: 0;


	font: normal 16px/30px "Microsoft Yahei";


}


.article .content p a{


	padding: 0 13px 0 0;


	margin: 0 2px 0 0;


	background: url(images/blank-link.gif) right center no-repeat;


}


.article .content p a:hover{


	text-decoration: underline;


}


.comments .content {


	border-radius: 0 0 5px 5px;


}


.article .summary,.article .content, {


	overflow:hidden;


}


.content p {


	margin: 0 0 24px;


}


.aside {


	overflow:hidden;


	color: #4d4d4d;


	margin: 20px;


	font: normal 16px/30px "Microsoft Yahei";


	background: url(images/aside_bg.jpg) #fff;


	position: relative;


	min-height: 120px;


	width: auto;


}


.aside-info {


	color: #fff;


	height: 40px;


	position: relative;


	font: normal 16px/40px "Microsoft Yahei";


	padding: 0 10px;


}


.article-copyright {


	width: auto;


	margin: 10px auto;


	padding: 10px;


	border-top: 1px dashed #ccc;


	border-bottom: 1px dashed #ccc;


	font: normal 12px/30px "Simsun";


}


/* MediaElement */


.mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {


background: rgba(0, 0, 0, 0.5) !important;


}


.mejs-controls .mejs-time-rail span {


    cursor: pointer;


    -webkit-border-radius: 0px 0px 2px 2px;


    -moz-border-radius: 0px 0px 2px 2px;


    border-radius: 0px 0px 2px 2px;


}


.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999 !important; }


.mejs-controls .mejs-time-rail .mejs-time-loaded {


    width: 0;


    background: #cccccc !important;


}


/*


.mejs-controls .mejs-time-rail .mejs-time-current {


    width: 0;


    background: #2B99E6;


}*/


/* Audio for show */


.post-audio-img>a {


	display: inline-block;


	max-width: 100%;


	width: 100%;


}


.post-format-audio .mejs-container {


position: absolute;


bottom: 4px !important;


}


.post-format-audio {


	position: relative;


}


.feature-img {


	width: 100%;


	height: auto;


	margin: 0;


	overflow: hidden;


	position: relative;


}


.feature-img.audio {


	min-height: 30px;


}


/* Common Feature Image*/


.feature-img img {


	max-width: 100%;


	border-radius: 5px 5px 0 0;


	-webkit-transition: 1.5s ease-in;


	-moz-transition: 1.5s ease-in;


	-o-transition: 1.5s ease-in;


	transition: 1.5s ease-in;


	filter: none;


	-webkit-filter: none;


}


.feature-img img:hover {


	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");


	filter: gray;


	-webkit-filter: grayscale(100%);


    -webkit-transform: scale(1.02);


	-webkit-transition: 1.5s ease-in;


	-moz-transition: 1.5s ease-in;


	-o-transition: 1.5s ease-in;


	transition: 1.5s ease-in;


}


.article-info {


	width: auto;


	height: auto;


	line-height: 50px;


	min-height: 50px;


	border-top: 1px solid #dee1e0;


	position: relative;


	color: #bfbfbf;


	margin: 0;


	padding: 0 110px 0 10px;


}


.article-info a,.article-info a:visited {


	color: #bfbfbf !important;


}


.article .content pre {


	border: 1px dashed #ccc;


	padding: 25px 10px 5px 10px;


	word-wrap:break-word;


	word-break: break-all;


	font-size: 12px;


	line-height: 20px;


	margin: 10px 0;


	background: white;


	position: relative;


}


.article .content pre:before {


	content: "CODE";


	width: 60px;


	height:20px;


	line-height: 20px;


	display: block;


	position: absolute;


	top: -1px;


	color: #fff;


	text-align: center;


	font: normal 9px/20px  Arial, Helvetica, sans-serif;


}


.article .content ul {


	list-style-position: inside;


	margin: 10px 0;


}


img.aligncenter {


	display: block;


	margin: 0 auto;


}


.responsive-img {


	width:100%;


	height: auto;


}


.article .content h3,.article .content h1,.article .content h2 {


	margin: 10px 0;


}


.article .content ol {


	padding: 10px;


}


ol,ul {


	list-style-position: inside;


}


.readmore {


	width: 120px;


	text-align: center;


	position: absolute;


	right: 5px;


	bottom: 5px;


	height: 40px;


	line-height: 40px;


	color: #fff !important;


	transition: background .3s ease;


	-moz-transition: background .3s ease;


	-ms-transition: background .3s ease;


	-o-transition: background .3s ease;


	border-radius: 5px;


	-webkit-transition: background .3s ease;


	box-shadow: 0px -1px 0px rgba(0,0,0,0.2) inset, 0px 1px 1px rgba(0,0,0,0.3);


}


.readmore:active {


	transition: background .3s ease;


	-moz-transition: background .3s ease;


	-ms-transition: background .3s ease;


	-o-transition: background .3s ease;


	-webkit-transition: background .3s ease;


}


.readmore:hover {


	transition: background .3s ease;


	-moz-transition: background .3s ease;


	-ms-transition: background .3s ease;


	-o-transition: background .3s ease;


	-webkit-transition: background .3s ease;


}


.footer {


	margin: 5px 20px 10px 20px;


	color: #999;


	font: normal 14px/30px Arial, Helvetica, sans-serif;


}


/* circle loading*/


.circle-loading {


	width: 10px;


	height: 10px;


	z-index: 9999;


	border-radius: 50%;


	position: fixed;


	top: 10px;


	right: 10px;


	animation: loading .5s infinite linear;


	-webkit-animation: loading .5s infinite linear;


	-moz-animation: loading .5s infinite linear;


	-o-animation: loading .5s infinite linear;


}


@keyframes loading {


	form {transform: rotate(0deg);}


	to {transform: rotate(360deg);}


}


@-webkit-keyframes loading {


	form {-webkit-transform: rotate(0deg);}


	to {-webkit-transform: rotate(360deg);}


}


@-moz-keyframes loading {


	form {-moz-transform: rotate(0deg);}


	to {-moz-transform: rotate(360deg);}


}


@-o-keyframes loading {


	form {-o-transform: rotate(0deg);}


	to {-o-transform: rotate(360deg);}


}


/*weibo-show*/


.weibo-show {


	width: 250px;


	height: 100%;


	position: fixed;


	left: 60px;


	top: 0;


	background: #2e2e2e;


	box-shadow: 5px 0px 5px rgba(0,0,0,0.3);


	overflow: hidden;


	z-index: 2;


}


/* list */


.list {


	width: 200px;


	height: 100%;


	position: fixed;


	left: 110px;


	top: 0;


	background: #2e2e2e;


	box-shadow: 5px 0px 5px rgba(0,0,0,0.3);


	overflow: hidden;


	z-index: 2;


}


.list>ul {


	list-style: none;


	width: 200px;


	height: auto;


	line-height: 40px;


	margin-top: 35px;


	font: normal 18px/40px "Microsoft yahei";


	position: absolute;


	left: 0;


}


.list>ul>li {


	width: 160px;


	min-height: 40px;


	position: relative;


	padding: 0px 20px;


	border-bottom: 1px solid #3e3e3e;


	box-shadow: 0 -1px 0 #232323 inset;


	text-shadow: 1px 1px 0 #232323;


	float:left;


	color: #ccc;


}


.children .current-cat a {


	color: #fff !important;


}


.list ul.children {


	list-style: none;


	width: 200px;


	height: auto;


	line-height: 40px;


	font: normal 14px/40px "Microsoft yahei";


	box-shadow: 0px -1px 0 #232323;


	min-height: 1px;


	position: relative;


	left: -20px;


}


.list ul.children li{


	width: 120px;


	min-height: 40px;


	padding: 0px 40px;


	border-bottom: 1px solid #3e3e3e;


	box-shadow: 0 -1px 0 #232323 inset;


	text-shadow: 1px 1px 0 #232323;


	position: relative;


	float:left;


	color: #ccc;


}


.list ul.children li:last-child {


	border: none;


}


.list ul.children li:first-child {


	border-top: 1px solid #3e3e3e;


}


/* sidebar */


.sidebar {


	width: 220px;


	height: auto;


	position: absolute;


	right: 15px;


	top: 35px;


	float:left;


}


.category-list {


	width: 218px;


	border: 1px solid #d5d7d6;


	height: auto;


	margin:0 0 20px 0;


	border-radius: 5px;


	overflow: hidden;


	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);


	list-style: none;


}


.category-list li {


	width: 100%;


	height: 40px;


	line-height: 40px;


	font-size: 14px;


	overflow: hidden;


	text-overflow: ellipsis;


	white-space: nowrap;


	color: #666;


	padding: 0;


	background: #fff;


	font-family: "Microsoft Yahei", "宋体";


	border-bottom: solid 1px #e8e8e8;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.category-list li:last-child {


	box-shadow: 0px -1px 1px rgba(0,0,0,0.2) inset;


}


.category-list a {


	display: block;


	width: auto;


	border-left: 3px solid transparent;


	padding: 0 10px;


	height: 100%;


	color: #666;


	transition: all .6s ease;


	-webkit-transition: all .6s ease;


	-moz-transition: all .6s ease;


	-o-transition: all .6s ease;


}


.category-list a>.fa {


	margin: 0 5px 0 5px;


}


.category-list a>span {


	margin: 0 0 0 10px;


}


.category-list a:hover, .category-list .current-cat a {


	color: #666;


	background: #ececec;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.category-list li:last-child {


	border-bottom: none;


}


.tagcloud a{


	color: #888 !important;


	padding: 5px 10px;


	font-family: inherit;


	display: inline-block !important;


	margin: 0 5px 5px 0;


	list-style: none;


	background-color: #F5F5F5;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.tagcloud a:hover{


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


	color: #fff !important;


}


.widget_latest_comment ul li{ white-space:normal !important; width: auto !important;margin:10px;list-style:none; padding: 0 0 10px; overflow: visible !important; line-height: 16px !important; font-size: 12px !important;}


.widget_latest_comment ul li a.comment_r{line-height: 16px !important; padding: 0 0 6px 0px;}


.widget_latest_comment ul li a{display:block;overflow:hidden;}


.widget_latest_comment ul li{overflow: hidden;border-bottom: dashed 1px #ddd;}


.widget_latest_comment ul li a:hover{color:#282828}


.widget_latest_comment img {


	border-radius: 50%;


	float: left;


	margin: 0 8px 0 0;


}


#wp-calendar {


	width: 100%;


}


.sidebox {


	width: 220px;


	margin: 0 0 20px 0;


	border-radius: 5px;


	overflow:hidden;


	position: relative;


	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);


	background: #fff;


	font-family: "Microsoft Yahei";


}


.sidebox ul {


	width: auto;


	padding: 10px;


	list-style: none;


}


.sidebox ul li {


	width: 100%;


	line-height: 34px;


	overflow: hidden;


	text-overflow:ellipsis;


	font-size: 14px;


    white-space:nowrap;


    overflow:hidden;


	border-bottom: 1px dashed #e1e1e1;


}


.widget_archive li {


}


.sidebox .fa {


	color: #fff;


	position: absolute;


	top: 20px;


	right: 20px;


}


.sidebox>div {


	padding: 10px;


}


.sidebox>h2 {


	padding: 5px 20px;


	font: normal 16px/40px "Microsoft Yahei";


	background: #404a58;


	color: #fff;


	cursor: pointer;


	text-shadow: 2px 2px 0px rgba(0,0,0,0.2);


}


/* common */


.clear {


	clear:both;


}


.sidebar a {


	text-decoration: none;


}


.sidebar a:link {


	color: #666;


}


/*


	分类目录链接


*/


.list a {


	width: 100%;


	height: 100%;


	display: block;


	color: #ccc;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


	text-decoration: none;


}


.list a:link {


color: #ccc;


	text-decoration: none;


}


.list a:visited {color: #ccc;


	text-decoration: none;}


	.list a:hover {color: #fff;


	text-decoration: none;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


	.list a:active{color: #ccc;


	text-decoration: none;}


.nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:active {


	color: #fff;display: block;


	width: 100%;


	height: 100%;


	text-decoration: none;


}


.readmore a, .readmore a:link, .readmore a:visited, .readmore a:hover, .readmore a:active {


	display: block;


	width: 100%;


	height: 100%;


	color: #fff;


	text-decoration: none;


}


.article h1>a {


	text-decoration: none;


	transition: color .3s ease;


	-webkit-transition: color .3s ease;


	-moz-transition: color .3s ease;


	-o-transition: color .3s ease;


}


.article h1>a:link {


	color: #000;


	text-decoration: none;


	transition: color .3s ease;


	-webkit-transition: color .3s ease;


	-moz-transition: color .3s ease;


	-o-transition: color .3s ease;


}


.article h1>a:visited {


	color: #000;


	text-decoration: none;


	transition: color .3s ease;


	-webkit-transition: color .3s ease;


	-moz-transition: color .3s ease;


	-o-transition: color .3s ease;


}


.article h1>a:hover {


	text-decoration: none;


	transition: color .3s ease;


	-webkit-transition: color .3s ease;


	-moz-transition: color .3s ease;


	-o-transition: color .3s ease;


}


.article h1>a:active {


	color: #000;


	transition: color .3s ease;


	-webkit-transition: color .3s ease;


	-moz-transition: color .3s ease;


	-o-transition: color .3s ease;


	text-decoration: none;


}


.pagenavi a,.pagenavi span {


	display: block;


	padding: 10px;


	border-radius: 5px;


	line-height: 20px;


	margin-right: 10px;


	background: transparent;


	float: left;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.pagenavi span, .pagenavi a:hover {


	color:#fff;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.pagenavi {


	margin: 10px 0;


}


.widget .menu {


	width: auto ;


	height: auto ;


	padding: 0;


	margin: 0;


}


.widget .menu li {


	width: auto ;


	display: inline-block ;


	margin: 0 5px 5px 0 ;


	list-style: none ;


	overflow: visible ;


	white-space: normal ;


	line-height: normal;


	font-size: 12px;


	border: none;


}


.widget .menu li a{


	color: #888 !important;


	width: auto;


	height: 100%;


	float:left;


	text-align: center;


	display: block !important;


	padding: 5px 10px;


	background-color: #F5F5F5;


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


}


.widget .menu li a:hover{


	transition: all .3s ease;


	-webkit-transition: all .3s ease;


	-moz-transition: all .3s ease;


	-o-transition: all .3s ease;


	color: #fff !important;


}


.topbtnshow {


	bottom: 30px !important;


	opacity: 1 !important;


}


.topbtnhide {


	bottom: 10px !important;


	opacity: 0 !important;


	cursor: default;


}


.topbtnfadein {


	animation: topbtnfadein .5s ease-out;


	-webkit-animation: topbtnfadein .5s ease-out;


	-moz-animation: topbtnfadein .5s ease-out;


}


.topbtnfadeout {


	animation: topbtnfadeout .5s ease-out;


	-webkit-animation: topbtnfadeout .5s ease-out;


	-moz-animation: topbtnfadeout .5s ease-out;


}


.loading {


	top:0;


	left: 0;


	width: 0;


	position: fixed;


	height: 3px;


	z-index: 999;


}


/* Comments */


#comments-title  i {


	margin-right:3px;


}


#comments-title {


	height:70px;


	background-repeat:repeat-x;


	-webkit-border-top-left-radius:3px;


	-webkit-border-top-right-radius:3px;


	-moz-border-radius-topleft:3px;


	-moz-border-radius-topright:3px;


	border-top-left-radius:3px;


	border-top-right-radius:3px;


	letter-spacing:-1px;


	font-size:26px;


	font-weight:normal;


	padding:20px 0 20px 30px;


	margin:0 0 0 0;


}


#comments p {


	font-size:15px;


	font-size:14px;


	line-height:1.5em;


	margin:.5em 0;


	word-wrap:break-word;


}


.comt {


	padding:20px;


}


#archive #comments {


	padding:0 0 20px 0;


}


#comments .commentlist li {


	width:100%;


	clear:both;


	margin:0;


	padding:0;


	list-style:none;


	list-style:none;


}


#reply-title {


	border-bottom:1px solid rgba(0,0,0,0.13);


	font-size:15px;


	font-weight:normal;


	margin:20px 0 10px 0;


}


#comments .navigation {


	margin-top:10px;


}


#comments .navigation  a {


	olor:#696a52;


	background:#C9CAB8;


	border-radius:3px;


	padding:3px 7px;


}


.comment_list {


	padding:0 10px;


}


.comment-body {


	padding:10px 0 10px 10px;


	position:relative;


	font-size:13.5px;


	min-height:34px;


}


.comment-author {


	position:absolute;


	top:26px;


	left:-8px;


	width:44px;


	height:44px;


	box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;


	border-radius:46px;


	background:rgb(216,216,216);


}


.comment-author img {


	width:32px !important;


	border-radius:32px;


	box-shadow:0 1px 3px rgba(0,0,0,0.22);


	-webkit-transition:.4s all ease-in-out;


	-moz-transition:.4s all ease-in-out;


	-o-transition:.4s all ease-in-out;


	-ms-transition:.4s all ease-in-out;


	transition:.4s all ease-in-out;


	position: absolute;


	left: 6px;


	top: 5px;


}


.comment-body:hover .comment-author img {


	-webkit-transform:rotate(360deg);


	-moz-transform:rotate(360deg);


	-o-transform:rotate(360deg);


	-ms-transform:rotate(360deg);


	transform:rotate(360deg);


}


.name {


	padding-top:1px;


}


.name a {


	font-weight:bold;


	color:#696A52 !important;


}


.name a:hover {


	color:#D32 !important;


}


.comment-head .date {


	font-size:13px;


	position: absolute;


	bottom: 20px;


	left: 25px;


	color: #ccc;


	line-height:1.5em;


	text-shadow: 1px 1px 0px #fff;


}


.comment-head {


	min-height:120px;


	background:#F0F0E3;


	padding:15px 15px 12px 38px;


	border-radius:5px;


	box-shadow:0 1px 2px rgba(0,0,0,.15),0 1px 0 rgba(255,255,255,.75) inset;


}


.comment-entry .wp-smiley {


	margin-top:-2px;


}


.comment-reply-link {


	font-size:13px;


	float:right;


	margin:0px 0px 16px 16px;


	color:#696a52;


	background:#E2E2DB;


	border-radius:3px;


	padding:3px 7px;


}


#comments .children {


	margin-left:28px;


}


.children .depth-8,.children li.depth-8 .children {


	margin-left:0;


}


.children .comment-body {


	min-height:30px;


}


.num {


	float:right;


	color:#BEBEBE;


}


.children #respond {


	margin-left:26px;


}


#respond textarea {


	width:95%;


	padding:5px;


}


#commentform input {


	width:200px;


	padding:5px;


	display:block;


}


#comments input,#comments textarea,#comments button {


	width:100%;


	border: 1px solid #ddd;


}


.author_hide {


	display: none


}


#edit_author {


	cursor: pointer


}


#author_textarea {


	position: relative;


	padding: 5px;


	border: 1px solid #ddd


}


#author_info input {


	font: 12px;


	height: 30px;


	width:200px;


	padding: 3px 10px 0px 10px;


	margin-right: 10px;


	border: 1px solid #ddd;


	outline: none;


}


#author_info label {


	position: relative;


}


#cancel-reply {


	position: absolute;


	right: 0


}


#cancel-reply a {


	text-decoration: none;


	font-size: 12px;


	padding: 5px 5px 5px 20px;


	background: #ddd;


}


#author_info label small {


	color: #777;


	font-size: 14px;


	position: absolute;


	display: block;


	width: 60px;


	top: -30px;


	left: 10px;


}


#submit {


	height:32px;


	width:100px;


	text-align:center;


	text-shadow:0 1px 0 #fff;


	color:#555;


	font-size:14px;


	font-weight:bold;


	border:1px solid #ccc;


	border-bottom-color:#aaa;


	border-bottom-right-radius:3px;


	-webkit-border-bottom-right-radius:3px;


	background-color:#e6e6e6;


	background-repeat:no-repeat;


	background-image:-webkit-gradient(linear,0 0,0 100%,from(#fcfcfc),color-stop(25%,#fcfcfc),to(#e6e6e6));


	background-image:-webkit-linear-gradient(#fcfcfc,#fcfcfc 25%,#e6e6e6);


	background-image:-moz-linear-gradient(top,#fcfcfc,#fcfcfc 25%,#e6e6e6);


	background-image:-ms-linear-gradient(#fcfcfc,#fcfcfc 25%,#e6e6e6);


	background-image:linear-gradient(#fcfcfc,#fcfcfc 25%,#e6e6e6);


	transition:all .15s linear;


	-webkit-transition:all .15s linear;


	-moz-transition:all .15s linear;


	box-shadow:inset 0 0 1px #fff;


}


#submit:hover {


	background-position:0 -15px;


	color:#333;


}


#submit:active {


	-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);


	box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);


}


.form-allowed-tags {


	display:none;


}


.form-submit {


	margin-top:20px !important;


}


.reply {


	padding-bottom:10px;


	font-size:12px;


}


.commentlist li.depth-1 {


	margin-bottom:18px;


	line-height:18px;


}


.comment_list li p {


	clear:both;


	margin-bottom:5px;


}


#commentform input#comment_mail_notify {


	display:inline;


	width:15px;


}


#comment-edit-link {


	display:none;


}


/* weather icon */


.weather-box {


	width: 30px;


	height: 30px;


	position: absolute;


	right: 10px;


	top: 5px;


}


.weather-sunny {


	background: url(images/weather-icon.png) 0 0 no-repeat;


}


.weather-night {


	background: url(images/weather-icon.png) -30px 0 no-repeat;


}


.weather-partly-cloudy {


	background: url(images/weather-icon.png) -60px 0 no-repeat;


}


.weather-cloudy {


	background: url(images/weather-icon.png) -90px 0 no-repeat;


}


.weather-night-cloudy {


	background: url(images/weather-icon.png) -120px 0 no-repeat;


}


.weather-cloudy-day {


	background: url(images/weather-icon.png) -150px 0 no-repeat;


}


.weather-shower {


	background: url(images/weather-icon.png) -180px 0 no-repeat;


}


.weather-rain {


	background: url(images/weather-icon.png) -210px 0 no-repeat;


}


.weather-heavy-rain {


	background: url(images/weather-icon.png) -240px 0 no-repeat;


}


.weather-thunder-shower {


	background: url(images/weather-icon.png) -270px 0 no-repeat;


}


.weather-snow {


	background: url(images/weather-icon.png) -300px 0 no-repeat;


}


.weather-sleet {


	background: url(images/weather-icon.png) -330px 0 no-repeat;


}


.weather-ice-rain {


	background: url(images/weather-icon.png) -360px 0 no-repeat;


}


.weather-heavy-snow {


	background: url(images/weather-icon.png) -390px 0 no-repeat;


}


.weather-haze {


	background: url(images/weather-icon.png) -420px 0 no-repeat;


}


.weather-fog {


	background: url(images/weather-icon.png) -450px 0 no-repeat;


}


.weather-name {


	width: auto;


	position: absolute;


	right: 45px;


	height: 40px;


	top: 0;


}


/* button */


span.button {


	border-radius: 5px;


	color: #fff;


	position: relative;


	box-shadow:  0px -3px 0px rgba(0,0,0,0.1) inset;


	margin-right: 10px;


	display: inline-block;


	-webkit-transform: translateY(0px);


	-webkit-transition: all .3s ease-out


}


span.button a {


	color: #fff !important;


	background: none !important;


	display: block;


	float:left;


	width: auto;


	padding: 3px 15px !important;


	line-height: 30px;


}


span.button a:hover {


	text-decoration: none !important;


}


span.button:hover {


	-webkit-transform: translateY(-3px);


	-webkit-transition: all .2s ease-out


}


.btn-red {


	background: #e84c3d;


}


.btn-orange {


	background: #F39C11;


}


.btn-green {


	background: #27ae61;


}


@keyframes topbtnfadeout {


	from {


		bottom: 30px;


		opacity: 1;


	}


	to {


		bottom: 10px;


		opacity: 0;


	}


}


@-webkit-keyframes topbtnfadeout {


	from {


		bottom: 30px;


		opacity: 1;


	}


	to {


		bottom: 10px;


		opacity: 0;


	}


}


@-moz-keyframes topbtnfadeout {


	from {


		bottom: 30px;


		opacity: 1;


	}


	to {


		bottom: 10px;


		opacity: 0;


		display: none;


	}


}


@keyframes topbtnfadein {


	from {


		bottom: 10px;


		opacity: 0;


	}


	to {


		bottom: 30px;


		opacity: 1;


	}


}


@-webkit-keyframes topbtnfadein {


	from {


		bottom: 10px;


		opacity: 0;


	}


	to {


		bottom: 30px;


		opacity: 1;


	}


}


@-moz-keyframes topbtnfadein {


	from {


		bottom: 10px;


		opacity: 0;


	}


	to {


		bottom: 30px;


		opacity: 1;


	}


}


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


	.container {


		width: auto;


		padding: 0 20px 0 0;


	}


	.article-list {


		width: 100%;


		padding: 0;


	}


	.sidebar {


		display: none;


	}


}


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


	.container {


		margin: 10px;


	}


	#categories {


		display: block;


	}


	.article-list {


		width: 100%;


		padding: 0;


	}


	.left {


		position: static;


		width: 100%;


		height: auto;


		padding: 0 0 20px 0px;


	}


	.search, .face-area {


		margin: 0 auto;


	}


	.face-area {


		height: 210px;


	}


	.face-name {


		bottom: 10px;


	}


	.left .nav,.list,.sidebar,.left>.sns-icon,.left:after,.weibo-show {


		display: none;


	}


	.readmore {


		position: static;


		margin: 5px;


		width: auto;


	}


	.article-info {


		line-height: 50px;


		padding: 0 10px;


	}


	.to-top {


		left: 10px;


		position: fixed;


	}


}


.pjax_loading


{


    background: gray;


    position: fixed;


    left: 0px;


    top: 0px;


    display: none;


    z-index: 20;


    filter: alpha(opacity=60);


    opacity: 0.6 !important;


}