/*
 * the css file is written by ShareQiang
 * for more beautiful blog site
 */

body{
/*background:url('https://images0.cnblogs.com/blog2015/758232/201505/161604115324134.jpg') no-repeat 0 0 #e3e1e2;*/
background:#E3E1E2;
}

#home {
margin: 60px auto 0 auto;
width: 90%;
}


/* 标题动画 */
@keyframes toright
{
0%   {color: #EC195E; left:0px; }
50%  {color: #000; left:200px;}
100% {color: #EC195E; left:0px; }
}
@-moz-keyframes toright
{
0%   {color: #EC195E; left:0px; }
50%  {color: #000; left:200px;}
100% {color: #EC195E; left:0px; }
}
@-webkit-keyframes toright
{
0%   {color: #EC195E; left:0px; }
50%  {color: #000; left:200px;}
100% {color: #EC195E; left:0px; }
}
@-o-keyframes toright
{
0%   {color: #EC195E; left:0px; }
50%  {color: #000; left:200px;}
100% {color: #EC195E; left:0px; }
}

#blogTitle h1{
font-size:370%;
}

#blogTitle h1 a:before,
#blogTitle h1 a:after{
content:'∞';
color:#000;
display:inline-block;
margin-right:10px;
position:relative;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}

#blogTitle h1 a:hover:before{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

#blogTitle h1 a:hover:after{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
}

#blogTitle h1 a{
display:inline-block;
color:#EC195E;
-webkit-text-shadow: 3px 3px 3px #fff;
-moz-text-shadow: 3px 3px 3px #fff;
-ms-text-shadow: 3px 3px 3px #fff;
-o-text-shadow: 3px 3px 3px #fff;
text-shadow: 3px 3px 3px #fff;
position:relative;
animation: toright 5s;
-moz-animation: toright 5s;
-webkit-animation: toright 5s;
-o-animation: toright 5s;
/*
transform: skew(-37deg, 1deg);
-webkit-transform: skew(-37deg, 1deg);
-moz-transform: skew(-37deg, 1deg);
-o-transform: skew(-37deg, 1deg);
-ms-transform: skew(-37deg, 1deg);*/
}

#blogTitle h1 a:hover{
text-decoration:none;
}


/* 导航 */
#navigator{
height:50px;
margin:0;
background:#3299DC;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
-ms-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}

#navigator ul:after{
visibility:hidden;
content:'ShareQiang  小强';
color:#fff;
display:inline-block;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
position: relative; 
left: 100px; 
top: 14px; 
font-size: 18px;
}

#navigator:hover ul:after{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

#navList li{
height:50px;
width:80px;
position:relative;
}
#navList a:link,
#navList a:visited,
#navList a:active,
#navList a{
font-size:16px;
margin:0;
height:50px;
line-height:50px;
display:inline-block;
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
position:absolute;
top:0;
left:0;
}

#navList a:hover{
top:-4px;
height:58px;
line-height:58px;
background:#EC195E;
text-decoration:none;
}

/* 主内容 */
#mainContent{
width:76%
}

#main{
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}


/* 右边栏内容 */
.sidebar-block,#blog-calendar{
display:none;
}


/* 随笔导航置顶部 */
#sidebar_postcategory{
width:100%;
background:#3299DC;
position:fixed;
top:0;
left:0;
z-index:5;
display:block;
margin:0;
}

#sidebar_postcategory h3{display:none;}

#sidebar_postcategory ul{
width:90%;
margin:0 auto;
}

#sidebar_postcategory ul:after{
content:' ';
height:0;
display:block;
clear:both;
}

#sidebar_postcategory li{
position:relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
float:left; 
padding:10px;
margin:0;
/*
transition:All 0.2s ease-in-out;
-webkit-transition:All 0.2s ease-in-out;
-moz-transition:All 0.2s ease-in-out;
-o-transition:All 0.2s ease-in-out;
border-bottom:1px solid transparent;
*/
}

/*
#sidebar_postcategory li:after{
visibility:hidden;
bottom: -15px;
color: #ec195e;
content: "❤";
display: inline-block;
font-size: 16px;
left: 38%;
position: absolute;
}
*/

#sidebar_postcategory li:hover{
color:#000;
background:#fff;
/*
transform:scaleY(1.2);
-webkit-transform:scaleY(1.2);
-moz-transform:scaleY(1.2);
-o-transform:scaleY(1.2);
-ms-transform:scaleY(1.2);
border-bottom:1px solid #EC195E;
*/
}

#sidebar_postcategory li:hover:after{
visibility:visible;
}

#sidebar_postcategory li a{
color:#fff;
font-size:16px;
}

#sidebar_postcategory li:hover a{
color:#000;
}

#sidebar_postcategory li a:hover{
text-decoration:none;
color:#000;
}


/* 日历 */
#blog-calendar table{
border-collapse: collapse;
border-spacing: 0;
border:1px solid #ccc;
}

#blog-calendar table table{border:none;}

#blog-calendar table td{padding:4px 10px;}

#blog-calendar table table td:hover{background:#fff}

#blog-calendar table td:hover{background:#E3E1E2}


/* 文章标题 */
@keyframes ani_title
{
0%   { left:0px; }
100% { left:10px; }
}
@-moz-keyframes ani_title
{
0%   { left:0px; }
100% { left:10px; }
}
@-webkit-keyframes ani_title
{
0%   { left:0px; }
100% { left:10px; }
}
@-o-keyframes ani_title
{
0%   { left:0px; }
100% { left:10px; }
}

#topics .postTitle,
.postTitle,
.entrylistPosttitle{
border-color:#EC195E;
padding:10px 20px 10px 20px;
}

.entrylistPosttitle:before,
.postTitle:before{
content:'∞';
font-size:16px;
color:#000;
display:inline-block;
position:relative;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
margin-right:10px;
}

.entrylistPosttitle:hover:before,
.postTitle:hover:before{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

.postTitle a:link,
.postTitle a:visited,
.postTitle a:active,
.entrylistPosttitle a{
color: #1c7791;
font-size:16px;
position:relative;
margin:0;
}

.postTitle a:hover,
.entrylistPosttitle a:hover{
animation: ani_title 2s;
-moz-animation: ani_title 2s;
-webkit-animation: ani_title 2s;
-o-animation: ani_title 2s;
}


/* 底部 */
#footer{
color:#000;
}


/* 提交内容按钮 */
#btn_comment_submit{
padding:4px 20px; 
height:40px;
width:auto;
color:#fff;
font-size:16px;
cursor:pointer; 
background:#3299DC; 
border:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

#btn_comment_submit:hover{
background:#2CC5EE;
}


/* 文章详细页底部列表 */
#profile_block{
line-height:20px;
}

#profile_block a{
background:#3299DC;
color:#fff;
padding:4px 10px;
}

#profile_block br{margin-bottom:10px;}

#p_b_follow{
padding-top:10px;
}

#p_b_follow a{
background:#EC195E;
color:#fff; 
margin-top:10px;
}

.c_ad_block{
margin-top:30px;
}

.c_ad_block b{
background:#ccc;
padding:8px 20px;
}

.c_ad_block a{
display:inline-block;
border-bottom:1px solid #ccc;
padding:10px 0;
}

.c_ad_block a:hover{
border-color:#3299DC;
text-decoration: none;
}


/* 评论文本域 */
.comment_textarea{
resize:none;
border: 1px solid #ccc;
padding: 0.5em;
width: 500px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

.comment_textarea:focus{
-webkit-box-shadow: 0 5px 12px #ccc;
box-shadow: 2px 3px 8px #ccc;
}


/*代码样式*/
.cnblogs_code{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}


/* 返回顶部 */
#ui_btn_go_top{
width:44px;
height:44px;
line-height:20px;
text-align:center;
position:fixed;
bottom:100px;
right:22px;
background:#3299DC;
color:#fff;
}

#ui_btn_go_top:hover{
text-decoration:none;
background:#EC195E;
}