path: root/static/css/style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
/* icon Font */
@font-face{font-family:"FontAwesome";font-style:normal;font-weight:normal;src:url("../font/fontawesome-webfont.eot?v=#4.0.3");src:url("../font/fontawesome-webfont.eot?#iefix&v=#4.0.3") format("embedded-opentype"),url("../font/fontawesome-webfont.woff?v=#4.0.3") format("woff"),url("../font/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"),url("../font/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3") format("svg")}
/* Public style */
*{-webkit-margin-before:0;-webkit-margin-after:0}
body{background:#ddd;font-family:"Helvetica Neue","Helvetica","Microsoft YaHei","WenQuanYi Micro Hei",Arial,sans-serif;font-size:100%;color:#817c7c;line-height:1.5}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em;padding-left:.3em}
sub{bottom:-.25em}
a{text-decoration:none;color:#817c7c;}
a:hover,a:focus{outline:0;text-decoration:none;-webkit-transition:color 0.25s, background 0.5s;-moz-transition:color 0.25s, background 0.5s;-o-transition:color 0.25s, background 0.5s;-ms-transition:color 0.25s, background 0.5s;transition:color 0.25s, background 0.5s}
a:hover:before{-webkit-transition:color 0.25s, background 0.5s;-moz-transition:color 0.25s, background 0.5s;-o-transition:color 0.25s, background 0.5s;-ms-transition:color 0.25s, background 0.5s;transition:color 0.25s, background 0.5s}
input:focus{outline:none}
input,button{margin:0;padding:0;}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}
h1{font-size:1.5em}
.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.clearfix{zoom:1}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
::-webkit-input-placeholder{color:#fff;padding:2px 0 0 4px}
::-moz-placeholder{color:#fff;padding:2px 0 0 4px}
:-ms-input-placeholder{color:#fff;padding:2px 0 0 4px}
::-webkit-input-placeholder::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f002";padding-right:4px}
::-moz-placeholder:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f002";padding-right:4px}
:-ms-input-placeholder::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f002";padding-right:4px}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-search-cancel-button:after{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\f00d';color:#fff;padding-right:4px}
/* css3 animate */
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes fadeIn{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}
100%{opacity:1;-ms-filter:none;filter:none}
}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;-ms-animation-name:fadeIn;animation-name:fadeIn}
.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;-ms-animation-name:fadeOut;animation-name:fadeOut}
@-moz-keyframes fadeInDown{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}@-webkit-keyframes fadeInDown{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}@-o-keyframes fadeInDown{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}@-ms-keyframes fadeInDown{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}@keyframes fadeInDown{0%{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-ms-filter:none;filter:none;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}body >header{width:100%;-webkit-box-shadow:2px 4px 5px rgba(3,3,3,0.2);box-shadow:2px 4px 5px rgba(3,3,3,0.2);background:#ea6753;color:#fff;padding:1em 0 .8em;}
@media only screen and (min-width: 1024px){body >header{padding:1.8em 0 1.5em}
}body >header >div{width:95%;margin:0 auto;position:relative;overflow:hidden;}
@media only screen and (min-width: 1024px){body >header >div{width:93%}
}body >header a{display:block;color:#fff}
#imglogo{float:left;width:4em;height:4em;}
@media only screen and (min-width: 768px){#imglogo{width:5em}
}@media only screen and (min-width: 1024px){#imglogo{width:5.5em}
}#imglogo img{width:4em;}
@media only screen and (min-width: 768px){#imglogo img{width:5em}
}@media only screen and (min-width: 1024px){#imglogo img{width:5.5em}
}#textlogo{float:left;width:75%;margin-left:.5em;}
#textlogo h1.site-name{width:86%;font-size:200%;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
@media only screen and (min-width: 768px){#textlogo h1.site-name{font-size:240%}
}@media only screen and (min-width: 1024px){#textlogo h1.site-name{font-size:280%}
}#textlogo h2.blog-motto{font-size:.7em;font-weight:normal;}
@media only screen and (min-width: 768px){#textlogo h2.blog-motto{font-size:100%}
}@media only screen and (min-width: 1024px){#textlogo h2.blog-motto{font-size:110%}
}.navbar{position:absolute;width:2em;right:0;top:1em;padding:.5em;}
@media only screen and (min-width: 1024px){.navbar{display:none}
}.navbutton::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f0c9"}
.navmobile::before{padding-left:1em}
header nav{float:left;width:100%;font-size:112.5%;padding-top:.5em;max-height:.01em;-webkit-transition:max-height 1s ease-out;-moz-transition:max-height 1s ease-out;-o-transition:max-height 1s ease-out;-ms-transition:max-height 1s ease-out;transition:max-height 1s ease-out;}
@media only screen and (min-width: 568px){header nav{width:50%}
}@media only screen and (min-width: 1024px){header nav{float:right;width:auto;margin-top:1em;max-height:none}
}@media only screen and (min-width: 1024px){header nav ul{float:right}
}@media only screen and (min-width: 1024px){header nav ul li{float:left}
}header nav ul li a{padding:.2em 0 .2em 1em;}
@media only screen and (min-width: 1024px){header nav ul li a{padding:.2em 1.5em}
}header nav ul li a:hover{background:#dd2c11;color:#e9cd4c}
.shownav{max-height:40em}
.search{padding:.1em 0 0 1em;}
.search input{line-height:1.8;font-size:15px;border:1px solid #fff;color:#fff;background:transparent;width:80%;padding-left:.5em;}
@media only screen and (min-width: 1024px){.search input{width:8em;-webkit-transition:0.5s width;-moz-transition:0.5s width;-o-transition:0.5s width;-ms-transition:0.5s width;transition:0.5s width}
.search input:focus{width:15em}
}.search label{display:none}
/* index layout */
#container{width:95%;margin:0 auto;overflow:hidden;}
@media only screen and (min-width: 768px){#container{width:96%}
}@media only screen and (min-width: 1024px){#container{width:94%}
}@media only screen and (min-width: 1560px){#container{width:82%}
}#main{margin:1em 0 0;line-height:1.8;}
@media only screen and (min-width: 1024px){#main{margin:2em 0 0;width:75%;float:left;-webkit-transition:margin 0.5s ease-out;-moz-transition:margin 0.5s ease-out;-o-transition:margin 0.5s ease-out;-ms-transition:margin 0.5s ease-out;transition:margin 0.5s ease-out}
}#main section.post{background:#fafafa;margin-bottom:.125em;}
#main section.post a{display:block;border-left:.5em solid #ccc;-webkit-transition:border-left 0.45s;-moz-transition:border-left 0.45s;-o-transition:border-left 0.45s;-ms-transition:border-left 0.45s;transition:border-left 0.45s;padding:.5em;}
@media only screen and (min-width: 768px){#main section.post a{padding:1em}
}#main section.post a:hover{border-left:.5em solid #ea6753}
#main section.post a h1{color:#2ca6cb;line-height:2}
#main section.post a p{color:#817c7c}
#main section.post a time{color:#817c7c;display:block;margin:.5em 0;font-size:.5em}
.moveMain{margin-left:10% !important}
#page-nav{background:#fafafa;text-align:center;overflow:hidden;}
#page-nav a,#page-nav span{display:inline-block;padding:.5em 1em}
#page-nav a{color:#2ca6cb;}
#page-nav a:hover{background:#ccc;color:#ea6753}
#page-nav .prev{float:left;border-left:.5em solid #ccc;-webkit-transition:border-left 0.5s;-moz-transition:border-left 0.5s;-o-transition:border-left 0.5s;-ms-transition:border-left 0.5s;transition:border-left 0.5s;}
#page-nav .prev:hover{border-left:.5em solid #ea6753}
#page-nav .next{float:right}
#page-nav .page-number{display:none;}
@media only screen and (min-width: 768px){#page-nav .page-number{display:inline-block}
}#page-nav .current{color:#b8b8b8;font-weight:bold}
#page-nav .space{color:#2ca6cb}
/* page layout */
@media only screen and (min-width: 1024px){.page{margin-left:10% !important}
}/* archive layout */
.category-icon:before,.tag-icon:before,.archive-icon:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#ccc;font-size:100%;padding-right:.3em}
.category-icon:before{content:"\f07b"}
.tag-icon:before{content:"\f02c"}
.archive-icon:before{content:"\f187"}
.archive-title{margin:1em 0;width:97%;padding:2em 0 2em 3%;background:#fafafa;border-left:.5em solid #ccc;}
@media only screen and (min-width: 1024px){.archive-title{margin:2em 0;width:18.5%;padding-left:.5%;float:left}
}.archive-title h2{width:90%;color:#2ca6cb;font-size:120%}
.archive-title a{color:#2ca6cb;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;-o-transition:color 0.5s;-ms-transition:color 0.5s;transition:color 0.5s;}
.archive-title a:hover{color:#ea6753;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;-o-transition:color 0.5s;-ms-transition:color 0.5s;transition:color 0.5s}
.current{color:#ea6753 !important}
@media only screen and (min-width: 768px){.archive-part{min-height:200px}
}@media only screen and (min-width: 1024px){.archive-part{width:78% !important;float:right;margin-left:2% !important}
}.archive-part section.post{width:100%;}
@media only screen and (min-width: 768px){.archive-part section.post{float:left;width:50%}
}@media only screen and (min-width: 1024px){.archive-part section.post{width:33.333%}
}@media only screen and (min-width: 768px){.archive-nav{width:100%;float:left;margin-top:1em}
}/* tags&categories layout */
.all-list-box{min-height:400px}
.post,.page{background:#fafafa;}
.post a,.page a{color:#2ca6cb;}
.post a:hover,.page a:hover{color:#ea6753}
@media only screen and (min-width: 768px){article header.article-info{border-bottom:1px solid #dbdbdb}
}article header.article-info >h1{padding:.2em 3%;font-size:170%;line-height:1.5;word-wrap:break-word;word-break:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-left:5px solid #ea6753}
@media only screen and (min-width: 1024px){article header.article-info >h1{font-size:200%;padding-top:.3em}
}article header.article-info >p.article-author{padding:.3em 4% .3em 0;text-align:right;border-bottom:1px solid #dbdbdb;}
@media only screen and (min-width: 768px){article header.article-info >p.article-author{float:right;border-bottom:none}
}article header.article-info >p.article-time{padding-top:.5em;font-size:.8em;text-align:center;}
@media only screen and (min-width: 768px){article header.article-info >p.article-time{float:right;margin-right:1em;padding-top:.1em;font-size:.9em}
}article header.article-info >p.article-time:before{font-family:"FontAwesome";font-size:130%;content:"\f017";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
article .article-content{padding:1.5em 4%;}
article .article-content .kb{padding:.1em .6em;border:1px solid #ccc;background-color:code-color;color:#8f8f8f;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;border-radius:3px;display:inline-block;margin:0 .1em;text-shadow:0 1px 0 #fff;line-height:1.5;white-space:nowrap}
article .article-content h1,article .article-content h2{font-size:180%;line-height:1.2em}
article .article-content h3,article .article-content h4,article .article-content h5,article .article-content h6{font-size:140%}
article .article-content h1,article .article-content h2,article .article-content h3,article .article-content h4,article .article-content h5,article .article-content h6{color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:.3em 0;margin:.5em 0;}
article .article-content h1 >code,article .article-content h2 >code,article .article-content h3 >code,article .article-content h4 >code,article .article-content h5 >code,article .article-content h6 >code{color:#a3a3a3}
article .article-content hr{border:1px solid #dbdbdb}
article .article-content strong,article .article-content em{font-weight:bold}
article .article-content acronym,article .article-content abbr{border-bottom:1px dotted}
article .article-content blockquote{border-left:.2em solid #ea6753;margin:.65em 0 .65em 4%;padding-left:1%;line-height:1.5;font-size:110%;}
article .article-content blockquote footer{background:#fafafa;padding:0;margin:0;font-size:80%;line-height:1em}
article .article-content blockquote cite{font-style:italic;padding-left:.5em}
article .article-content ul,article .article-content ol{padding-left:2em;font-size:105%;}
@media only screen and (min-width: 768px){article .article-content ul,article .article-content ol{padding-left:3em}
}article .article-content ul li{list-style:disc;text-align:match-parent;margin:.5em 0}
article .article-content ol li{list-style-type:decimal;margin:.5em 0}
article .article-content dl dt{font-weight:blod}
article .article-content ul li>code,article .article-content ol li>code,article .article-content p code,article .article-content strong code,article .article-content em code{font-family:Monaco,Menlo,Consolas,Courier New,monospace;background:#eee;color:#747070;border:1px solid #d6d6d6;padding:0 5px;margin:0 2px;font-size:90%;white-space:nowrap;text-shadow:0 1px #fff}
article .article-content p{font-size:105%;line-height:1.7;margin:.7em 0;}
@media only screen and (min-width: 1024px){article .article-content p{margin:1.2em 0}
}article .article-content img,article .article-content video,article .article-content figure img{max-width:100%;display:block;margin:auto;height:auto;vertical-align:middle;padding-top:.5em;}
@media only screen and (min-width: 1024px){article .article-content img,article .article-content video,article .article-content figure img{padding-top:.7em}
}article .article-content figcaption,article .article-content .caption{text-align:center;display:block;font-size:.9em;font-weight:blod}
article .article-content .video-container{position:relative;padding-top:56%;height:0;overflow:hidden;}
article .article-content .video-container iframe,article .article-content .video-container object,article .article-content .video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;margin-top:0}
article .article-content table{width:100%;border-collapse:collapse;border-spacing:0;}
article .article-content table th{font-weight:bold;border-bottom:3px solid #dbdbdb;padding-bottom:.5em}
article .article-content table td{border-bottom:1px solid #dbdbdb;padding:10px 0}
article .article-content .pullquote{text-align:left;width:45%;margin:0;border:none}
article .article-content .left{margin-left:.5em;margin-right:1em;float:left}
article .article-content .right{margin-right:.5em;margin-left:1em;float:right}
footer.article-footer{background:#fafafa;padding:0 4%;margin:0;border-top:1px solid #dbdbdb}
.article-share{float:right;width:100%;}
@media only screen and (min-width: 568px){.article-share{width:60%}
}@media only screen and (min-width: 768px){.article-share{width:40%}
}.share span{float:right;height:3em;width:1em;margin-right:.5em;position:relative;color:#d6d6d6;}
.share span:before{font-family:"FontAwesome";content:"\f064";font-size:1em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1.5em;height:1.5em;position:absolute;top:50%;left:50%;margin-top:-.75em;margin-left:-.75em}
.share a{float:right;width:3em;height:3em;display:block;position:relative;}
.share a:before{font-size:100%;font-family:"FontAwesome";text-align:center;color:#817c7c;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1.5em;height:1.5em;position:absolute;top:50%;left:50%;margin-top:-.75em;margin-left:-.75em}
.share a:hover:before{color:#fff}
.article-share-twitter:before{content:"\f099"}
.article-share-twitter:hover{background:#00aced;text-shadow:0 1px #008abe}
.article-share-facebook:before{content:"\f09a"}
.article-share-facebook:hover{background:#3b5998;text-shadow:0 1px #2f477a}
.article-share-weibo:before{content:"\f18a"}
.article-share-weibo:hover{background:#eb182c;text-shadow:0 1px #bf1121}
.article-share-qrcode:before{content:"\f029"}
.article-share-qrcode:hover{background:#49ae0f;text-shadow:0 1px #3a8b0c}
.article-back-to-top:before{content:"\f062"}
.article-back-to-top:hover{background:#762c54;text-shadow:0 1px #5e2343}
.qrcode{width:15em;height:15em;position:absolute;top:50%;left:50%;margin-top:-7.5em;margin-left:-7.5em;background:#fff;border:2px solid #ccc;-webkit-border-radius:3px;border-radius:3px;display:inline-block;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);position:fixed;text-align:center;visibility:hidden;z-index:10;-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;-ms-transition:opacity 0.5s;transition:opacity 0.5s;}
@media only screen and (min-width: 1024px){.qrcode{width:20em;height:20em;position:absolute;top:50%;left:50%;margin-top:-10em;margin-left:-10em;position:fixed}
}.qrcode span{display:block;width:80%;height:1.5em;font-size:80%;float:left;}
.qrcode span:before{content:none}
.qrcode a{display:block;width:16%;height:1.5em;float:left}
.qrcode img{width:90%;height:90%}
.qrclose:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f057";color:#ccc}
.qrclose:hover:before{color:#2ca6cb !important}
.overlay{display:none !important}
.overlay:target+.qrcode{opacity:1;-ms-filter:none;filter:none;visibility:visible}
.article-tags,.article-categories{padding:.5em 0;float:left;width:100%;}
@media only screen and (min-width: 568px){.article-tags,.article-categories{width:50%}
}@media only screen and (min-width: 768px){.article-tags,.article-categories{width:30%}
}.article-tags{color:#d6d6d6;}
.article-tags span{position:relative;float:left;width:1em;height:2em;margin-right:.5em;}
.article-tags span:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1.2em;height:1.2em;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.6em;content:"\f02c"}
.article-tags a{float:left;padding:0 .3em;margin:.3em;background:#e6e6e6;}
.article-tags a:hover{color:#fff;background:#2ca6cb}
.article-categories{color:#d6d6d6;margin-top:.3em;}
.article-categories span:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f07b"}
.article-category-link{padding:.5em;margin:0 .3em;}
.article-category-link:hover{color:#fff !important;background:#2ca6cb}
.article-nav{padding:0 10%;}
@media only screen and (min-width: 768px){.article-nav{padding:0 4%}
}.article-nav strong{font-size:.6em}
.article-nav a{display:block;overflow:hidden}
.article-nav .prev a:hover,.article-nav .next a:hover{background:#2ca6cb;color:#fff}
.article-nav .prev{width:100%;float:left;}
.article-nav .prev strong{padding-left:1.8em}
.article-nav .prev span:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f100";padding-right:.5em}
@media only screen and (min-width: 768px){.article-nav .prev{width:45%;float:left}
}.article-nav .next{width:100%;float:left;text-align:left;}
.article-nav .next strong{padding-left:1.5em}
.article-nav .next span:before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f101";padding-right:.5em}
@media only screen and (min-width: 768px){.article-nav .next{width:45%;float:right;text-align:right}
.article-nav .next strong{padding-right:1.8em}
.article-nav .next span:before{content:none}
.article-nav .next span:after{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f101";padding-left:.5em}
}section.comment{padding:0 4%;margin:1em 0}

.toc-article{background:#eee;margin:2em 0 0 .5em;padding:1em 1em 1em 2.5em;line-height:1em;font-size:.8em;float:right;}

#TableOfContents { margin: 1em 0 0 0; }
#TableOfContents ul { list-style-type:decimal; margin: 0; padding: 0 25px;  }
#TableOfContents ul li { list-style-type:decimal; }
#TableOfContents > ul { padding: 0; }
#TableOfContents > ul > li > ul { padding: 0; }

#toc{line-height:1em;font-size:.8em;float:right;}
#toc .toc{padding:0;}
#toc .toc li{list-style-type:none}
#toc .toc-child{padding-left:1.5em}
#toc.toc-aside{display:none;width:13%;position:fixed;right:2%;top:320px;overflow:hidden;line-height:1.5em;font-size:1em;color:#333;opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);-webkit-transition:opacity 1s ease-out;-moz-transition:opacity 1s ease-out;-o-transition:opacity 1s ease-out;-ms-transition:opacity 1s ease-out;transition:opacity 1s ease-out;}
#toc.toc-aside strong{padding:.3em 0;color:#817c7c}
#toc.toc-aside:hover{-webkit-transition:opacity 0.3s ease-out;-moz-transition:opacity 0.3s ease-out;-o-transition:opacity 0.3s ease-out;-ms-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out;opacity:1;-ms-filter:none;filter:none}
#toc.toc-aside a{-webkit-transition:color 1s ease-out;-moz-transition:color 1s ease-out;-o-transition:color 1s ease-out;-ms-transition:color 1s ease-out;transition:color 1s ease-out;}
#toc.toc-aside a:hover{color:#ea6753;-webkit-transition:color 0.3s ease-out;-moz-transition:color 0.3s ease-out;-o-transition:color 0.3s ease-out;-ms-transition:color 0.3s ease-out;transition:color 0.3s ease-out}
.active{color:#ea6753 !important}
.openaside{display:none;position:fixed;right:7.5%;top:260px;}
.openaside a{display:block;color:#fff;border:1px solid #fff;-webkit-border-radius:5px;border-radius:5px;background:#ea6753;padding:.2em .55em;}
.openaside a::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f0c9"}
.closeaside{display:none;}
.closeaside a{color:#ea6753;}
.closeaside a:hover{color:#2ca6cb}
.closeaside a::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f0c9"}
@media only screen and (min-width: 1024px){.closeaside{display:block;position:absolute;right:25px;top:22px}
}#asidepart{background:#fafafa;margin:1em 0 0;padding:.5em 2% 1em;}
@media only screen and (min-width: 1024px){#asidepart{position:relative;float:left;width:18%;margin:2em 0 0 3%}
}.asidetitle{font-size:1.1em;color:#2ca6cb;padding:0 0 .3125em 0;border-bottom:.1875em solid #ccc;}
.asidetitle a{color:#2ca6cb;}
.asidetitle a:hover{color:#ea6753;-webkit-transition:color 0.5s;-moz-transition:color 0.5s;-o-transition:color 0.5s;-ms-transition:color 0.5s;transition:color 0.5s}
@media only screen and (min-width: 768px){.categorieslist{width:45%;float:left;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.categorieslist{width:100%;float:none;margin:1em 0 0}
}.categorieslist li{border-bottom:1px solid #ccc;}
.categorieslist li a{display:block;padding:.5em 5%;}
.categorieslist li a:hover{color:#ea6753}
.tagslist{margin:1em 0 0;}
@media only screen and (min-width: 768px){.tagslist{width:45%;float:left;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.tagslist{width:100%;float:none;margin:1em 0 0}
}.tagslist ul{padding:.5em 0}
.tagslist ul li{float:left;}
.tagslist ul li a{display:block;margin:.3125em;padding:.125em .3125em;background:#dbdbdb;}
.tagslist ul li a:hover{color:#ea6753;background:#e6e6e6}
.rsspart{background:#ea6753;width:100%;}
@media only screen and (min-width: 768px){.rsspart{float:left;width:45%;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.rsspart{width:100%;float:none;margin:1em 0 0}
}.rsspart a{color:#fff;display:block;padding:.625em 0;text-align:center;}
.rsspart a:hover{color:#ea6753;background:#fafafa}
.rsspart a::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-right:.5em;content:"\f09e"}
@media only screen and (min-width: 768px){.archiveslist{width:45%;float:left;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.archiveslist{width:100%;float:none;margin:1em 0 0}
}.archiveslist li{font-size:.8em;line-height:2em;}
.archiveslist li a{padding:.5em;}
.archiveslist li a:hover{color:#ea6753;-webkit-transition:color 0.25s;-moz-transition:color 0.25s;-o-transition:color 0.25s;-ms-transition:color 0.25s;transition:color 0.25s}
.archiveslist .archive-list-count:before{content:"("}
.archiveslist .archive-list-count:after{content:")"}
.archive-list{padding:.5em 0}
.archive-float ul{padding:0}
.archive-float li{float:left;margin:.3em;}
@media only screen and (min-width: 1024px){.archive-float li{float:none}
}@media only screen and (min-width: 768px){.tagcloudlist{width:45%;float:left;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.tagcloudlist{width:100%;float:none;margin:1em 0 0}
}.tagcloudlist .tagcloudlist a{padding:.2em;display:block;float:left;}
.tagcloudlist .tagcloudlist a:hover{color:#ea6753;-webkit-transition:color 0.25s;-moz-transition:color 0.25s;-o-transition:color 0.25s;-ms-transition:color 0.25s;transition:color 0.25s}
.linkslist{margin-top:.5em;}
@media only screen and (min-width: 768px){.linkslist{width:45%;float:left;margin:0 5% 0 0}
}@media only screen and (min-width: 1024px){.linkslist{width:100%;float:none;margin:1em 0 0}
}.linkslist ul{padding:.5em 0;}
.linkslist ul a{font-size:1em;line-height:1.5;display:block;padding:0 3%;}
.linkslist ul a:hover{color:#ea6753;-webkit-transition:color 0.25s;-moz-transition:color 0.25s;-o-transition:color 0.25s;-ms-transition:color 0.25s;transition:color 0.25s}
footer{margin-top:1em;background:#1f1f1f;padding:0 2% .5em}
#footer{width:95%;margin:0 auto;overflow:hidden;position:relative;}
#footer .line{width:100%;height:14em;margin:0 auto;}
@media only screen and (min-width: 768px){#footer .line{width:10em;float:left;position:relative}
}#footer .line span{display:block;width:.5em;height:6.25em;border-right:.125em solid #fff;margin:0 auto;}
@media only screen and (min-width: 768px){#footer .line span{position:absolute;left:3em;margin:0 0 1.5em}
}.author{width:6.875em;height:6.875em;margin:0 auto;-webkit-border-radius:3.4375em;border-radius:3.4375em;-webkit-transition:-webkit-transform 2s ease-out;-moz-transition:-moz-transform 2s ease-out;-o-transition:-o-transform 2s ease-out;-ms-transition:-ms-transform 2s ease-out;transition:transform 2s ease-out;}
.author:hover{-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);transform:rotateZ(360deg)}
@media only screen and (min-width: 768px){.author{position:absolute;top:6em;margin:0 0 1.5em}
}.info{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:150%;line-height:1.3em;width:90%;margin:0 auto;color:#fff;}
@media only screen and (min-width: 768px){.info{margin:4.5em 0 2em 0;float:left;width:75%}
}.social-font{width:100%;margin:0 auto;float:left;padding-left:3%;}
@media only screen and (min-width: 568px){.social-font{padding-left:20%}
}@media only screen and (min-width: 768px){.social-font{width:18em;position:absolute;right:-3em;top:3em}
}.social-font a{float:left;display:block;width:14%;color:#fff;font-size:180%;padding:.5em;}
@media only screen and (min-width: 1024px){.social-font a{padding:.3em}
}.social-font a:hover:before{color:#2ca6cb}
.social-font a[title="weibo"]::before,.social-font a[title="twitter"]::before,.social-font a[title="github"]::before,.social-font a[title="facebook"]::before,.social-font a[title="linkedin"]::before{font-family:"FontAwesome";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.social-font a[title="weibo"]::before{content:"\f18a"}
.social-font a[title="twitter"]::before{content:"\f099"}
.social-font a[title="github"]::before{content:"\f09b"}
.social-font a[title="facebook"]::before{content:"\f09a"}
.social-font a[title="linkedin"]::before{content:"\f08c"}
.copyright{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;color:#fff;text-align:center;}
@media only screen and (min-width: 768px){.copyright{float:left}
}.copyright a{color:#fff;}
.copyright a:hover{color:#2ca6cb}
.article-content code, .entry pre { font-family: Hack, monospace; font-size: 14px; }
.article-content pre { margin: 10px 0 15px 0; border: 1px solid #ddd; line-height: 19px; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.ds-highlight{color:#2ca6cb !important;}
.ds-highlight:hover{color:#ea6753 !important}
.ds-avatar{background:#fafafa !important;}
.ds-avatar img{width:54px !important;height:54px !important;border:2px solid #dbdbdb !important;-webkit-border-radius:27px !important;border-radius:27px !important;-webkit-transition:-webkit-transform 0.5s ease-out !important;-moz-transition:-moz-transform 0.5s ease-out !important;-o-transition:-o-transform 0.5s ease-out !important;-ms-transition:-ms-transform 0.5s ease-out !important;transition:transform 0.5s ease-out !important;}
.ds-avatar img:hover{-webkit-transform:rotateZ(360deg) !important;-moz-transform:rotateZ(360deg) !important;-o-transform:rotateZ(360deg) !important;-ms-transform:rotateZ(360deg) !important;transform:rotateZ(360deg) !important;-webkit-box-shadow:inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;box-shadow:inset 0 -1px 0 rgba(51,51,51,0.2) sf !important}
.ds-children .ds-avatar img{width:30px !important;height:30px !important;-webkit-border-radius:15px !important;border-radius:15px !important;-webkit-transition:-webkit-transform 0.5s ease-out !important;-moz-transition:-moz-transform 0.5s ease-out !important;-o-transition:-o-transform 0.5s ease-out !important;-ms-transition:-ms-transform 0.5s ease-out !important;transition:transform 0.5s ease-out !important;border:1px solid #dbdbdb !important;}
.ds-children .ds-avatar img:hover{-webkit-transform:rotateZ(360deg) !important;-moz-transform:rotateZ(360deg) !important;-o-transform:rotateZ(360deg) !important;-ms-transform:rotateZ(360deg) !important;transform:rotateZ(360deg) !important;-webkit-box-shadow:inset 0 -1px 0 rgba(51,51,51,0.2) sf !important;box-shadow:inset 0 -1px 0 rgba(51,51,51,0.2) sf !important}
.ds-replybox img{width:30px !important;height:30px !important}
.ds-comment-body{padding-left:80px !important}
.ds-children .ds-comment-body{padding-left:60px !important}
.ds-post{border-top:none !important;margin-top:.5em !important}
.ds-comments{padding-bottom:1em !important}
textarea{color:#817c7c !important;background:#fff !important;}
textarea::-webkit-input-placeholder{color:#817c7c !important}
textarea::-moz-placeholder{color:#817c7c !important}
.article-gallery{background:#fafafa;position:relative}
.article-gallery-photos{position:relative;overflow:hidden}
.article-gallery-img{display:none;max-width:100%;imgdisplay:block;max-width:100%;margin:0 auto}
.article-gallery-img:first-child{display:block}
.article-gallery-img .loaded{position:absolute;display:block}