Antikythera/style.css

/*
Theme Name: Antikythera
Author: Chris Punches
Description: Derp
Version: 0.0.1
Tags: Bagira
*/

@charset "utf-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0;
    color: #1a1a1a;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}

header{
    text-align:center;
    position: center;
}

.header_title_logo {
    color: #FFFFFF;
    text-shadow: 2px 2px 5px blue;
}

.header_subtitle_logo {
    color: white;
    text-shadow: 2px 2px 5px red;
}

.logoGlow {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
.logoGlow:hover {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(255,255,255,0.5));
}

audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent
}
a:active,a:hover{
    outline:0
}
abbr[title]{
    border-bottom:1px dotted
}
b,strong{
    font-weight:700
}
dfn{
    font-style:italic
}
h1{
    font-size:2em;
    margin:.67em 0
}
mark{
    background:#ff0;
    color:#000
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup{
    top:-.5em
}
sub{
    bottom:-.25em
}
img{
    border:0
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:1em 40px
}
hr{
    box-sizing:content-box;
    height:0
}
pre{
    overflow:auto
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
button,input,optgroup,select,textarea{
    color:inherit;
    font:inherit;
    margin:0
}
button{
    overflow:visible
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
input{
    line-height:normal
}
input[type=checkbox],input[type=radio]{
    box-sizing:border-box;
    padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    height:auto
}
input[type=search]{
    -webkit-appearance:textfield;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
fieldset{
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}
legend{
    border:0;
    padding:0
}
textarea{
    overflow:auto
}
optgroup{
    font-weight:700
}
table{
    border-collapse:collapse;
    border-spacing:0
}
td,th{
    padding:0
}
*{
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    outline:0;
    margin:0;
    padding:0
}
html{
    height:100%;
    max-height:100%;
    font-size:62.5%;
    -webkit-tap-highlight-color:transparent
}
body{
    height:100%;
    max-height:100%;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    font-size:1.8rem;
    line-height:1.5em;
    color:#414141;
    -webkit-font-feature-settings:'kern' 1;
    -moz-font-feature-settings:'kern' 1;
    -o-font-feature-settings:'kern' 1;
    text-rendering:geometricPrecision;
//    background-image: url('images/background.jpg');
//    -moz-background-size: 100% 100%;
//    -o-background-size: 100% 100%;
//    -webkit-background-size: 100% 100%;
//    background-size: 100% 100%;
}
::-moz-selection{
    background:#d6edff
}
::selection{
    background:#d6edff
}
h1,h2,h3,h4,h5,h6{
    -webkit-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    -moz-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    -o-font-feature-settings:'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    text-rendering:geometricPrecision;
    margin:0 0 .4em 0
}
h1{
    font-size:1.8em
}
h2{
    font-size:1.6em
}
h3{
    font-size:1.4em
}
h4{
    font-size:1.2em
}
h5{
    font-size:1em
}
h6{
    font-size:1em
}
a{
    color:#414141;
    text-decoration:none;
    transition:all .24s ease;
    text-shadow: 1px 1px 1px #FFFFFF;
}
a:hover{
    text-decoration:none
}
pre{
    tab-size:2;
    -moz-tab-size:2;
    -o-tab-size:2;
    -webkit-tab-size:2
}
::-webkit-input-placeholder{
    color:#b5b5b5;
    font-weight:300
}
:-moz-placeholder{
    color:#b5b5b5;
    font-weight:300
}
::-moz-placeholder{
    color:#b5b5b5;
    font-weight:300
}
:-ms-input-placeholder{
    color:#b5b5b5;
    font-weight:300
}
.clearfix{
    zoom:1;
    list-style: none;
}
.clearfix:after,.clearfix:before{
    content:" ";
    display:table
}
.clearfix:after{
    clear:both
}

.my-menu-item {
    text-align: left;
    width: 100%;
}

.hidden{
    text-indent:-9999px;
    visibility:hidden;
    display:none
}
.vertical{
    display:table-cell;
    vertical-align:middle
}
.right{
    float:right
}
.left{
    float:left
}
body.bio-open .site-sidebar{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
body.bio-open .site-wrapper{
    -webkit-transform:translate3d(-280px,0,0);
    transform:translate3d(-280px,0,0)
}
body.bio-open .site-wrapper .overlay{
    opacity:1;
    visibility:visible
}
.site-wrapper{
    position:relative;
    min-height:100%;
    overflow:hidden;
    transition:all .24s ease;
    z-index:10
}
.site-wrapper .overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:"";
    opacity:0;
    background-color:rgba(0,0,0,.5);
    transition:all .24s ease;
    visibility:hidden;
    z-index:9999
}
.dark-btn{
    display:inline-block;
    background:rgba(0,0,0,.3);
    border:1px solid #000;
    padding:0 15px;
    font-size:13px;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    text-align:center;
    color:#c2c2c2;
    width: 100%;
}

.dark-btn:hover{
    color:#f5f5f5;
    background-color:#009688
}
.dark-btn .icon{
    margin-right:5px;
    font-size:16px;
    vertical-align:middle;
    line-height:44px
}
.dark-btn .text{
    vertical-align:middle;
    line-height:44px
}
#loading-bar-wrapper{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    overflow:visible;
    z-index:999
}
#loading-bar{
    position:relative;
    width:0;
    height:2px;
    background-color:rgba(255,156,10,.8);
    transition:all .5s ease
}
.tomorrow-comment,pre .comment,pre .title{
    color:#8e908c
}
.tomorrow-red,pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title{
    color:#c82829
}
.tomorrow-orange,pre .built_in,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor{
    color:#f5871f
}
.tomorrow-yellow,pre .class,pre .css .rules .attribute,pre .ruby .class .title{
    color:#eab700
}
.tomorrow-green,pre .header,pre .inheritance,pre .ruby .symbol,pre .string,pre .value,pre .xml .cdata{
    color:#718c00
}
.tomorrow-aqua,pre .css .hexcolor{
    color:#3e999f
}
.tomorrow-blue,pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword{
    color:#4271ae
}
.tomorrow-purple,pre .javascript .function,pre .keyword{
    color:#8959a8
}
pre code{
    display:block;
    background:#fff;
    color:#4d4d4c;
    line-height:1.5;
    border:1px solid #ccc;
    padding:10px
}
.site-header{
    position:relative;
    width:100%;
    overflow:hidden;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    padding:20px
}
.site-header .square{
    position:center;
    display:block;
    font-weight:400;
    cursor:pointer;
    overflow:hidden
}
.site-header .square.logo{
    float:left
}
.site-header .square.me{
    position:fixed;
    top:20px;
    right:20px;
    visibility:visible;
    opacity:1;
    transition:all .24s;
    z-index:65535
}
.site-header .square.me.active{
    opacity:0;
    visibility:hidden
}
.site-header .square span{
    display:block;
    float:left;
    width:30px;
    height:30px;
    line-height:30px;
    vertical-align:middle;
    text-align:center;
    transition:all .24s;


}

.container
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.item
{
    border-radius: 3px;
}

.site-header .square span.b{
    background:#414141;
    color:#fff
}
.site-header .square span.b:hover{
    background:#000
}
.site-header .square span.w{
    background:0 0;
    color:#414141
}
.site-header .square span.w:hover{
    background:#fff
}
#main{
    position:relative;
    width:100%;
    padding:20px 0;
}
#main .page-header{
    text-align:center;
    margin-bottom:20px;
    color:#8e8e8e;
    font-size:15px
}
.post-list{
    position:relative;
    list-style:none;
    margin:0 auto;
    width:1280px;
    opacity:0;
    transition:opacity .4s
}
@media (max-width:1300px){
    .post-list{
        width:960px
    }
}
@media (max-width:960px){
    .post-list{
        width:640px
    }
}
@media (max-width:640px){
    .post-list{
        width:100%;
        padding:0 20px
    }
}
.post-list.show{
    opacity:1;
    word-wrap:break-word;

}
.post-list>li{
    position:relative;
    float:left;
    width:300px;
    height:300px;
    margin:0 10px 20px 10px;
    word-wrap:break-word;

}
@media (max-width:640px){
    .post-list>li{
        width:100%;
        margin:0 0 20px 0
    }
}
.post-list>li .post-link{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    border:3px solid #414141;
    padding:20px;
    color: #8e8e8e;
}

// hover over article border color
.post-list>li .post-link:hover{
    border-color: #d371ff;
       text-shadow: 2px 2px 5px blue;

   }

.post-list>li .post-link:hover .post-title{
    color: #FFFFFF;
    text-shadow: 2px 2px 5px blue;
    word-wrap:break-word;

}

.post-list>li .post-link:hover .post-meta{
    background: #d371ff;
}

.post-list>li .post-title{
    position:absolute;
    bottom:15px;
    left:15px;
    padding-right:50px;
    text-align:left;
    font-size:20px;
    font-weight:500;
    transition:all .24s;
    text-shadow: 2px 2px 5px blue;
    word-wrap:break-word;
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
//    word-break: break-all;
    overflow: auto;
}
.post-list>li .post-meta{
    position:absolute;
    top:0;
    right:0;
    background:#414141;
    padding:2px 14px 2px 10px;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    font-size:14px;
    font-weight:700;
    color:#fff;
    transition:all .24s;

}

.post-item {
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-color: rgba(26,26,25,0.7);
    word-wrap:break-word;

}

.post-item:hover {
    background-color: rgba(255,255,255,0.4);
    box-shadow: 0px 5px 10px red;
    word-wrap:break-word;

}
.treat-block{
    margin:30px auto;
    width:100%
}
.treat-block.treat-block-footer{
    max-width:728px
}
.treat-block.treat-block-footer img{
    width:100%
}
.article{
    position:relative;
    width:100%;
    max-width:1040px;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 5px 10px red;
}
@media (max-width:768px){
    .article{
        padding:20px
    }
}
.article .article-header{
    padding:20px 0 40px 0
}
@media (max-width:768px){
    .article .article-header{
        padding:0 0 40px 0
    }
}
.article .article-header h1{
    font-size:2em;
    line-height:1.2;
    margin-bottom:0
}
@media (max-width:768px){
    .article .article-header h1{
        font-size:1.5em
    }
}
.article .article-meta{
    font-size:14px;
    color:#9b9b9b;
    padding-left:1px
}
.article-entry,.post-excerpt{
    position:relative;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    font-size:16px;
    color:#393a3a;
    padding-bottom:30px
}
.article-entry a,.post-excerpt a{
    color: #4139f5;
}
.article-entry a:hover,.post-excerpt a:hover{
    color:#f08f00;
    background:rgba(255,152,0,.1)
}
.article-entry a:active,.post-excerpt a:active{
    background:rgba(255,152,0,.2);
    color:#fff
}
.article-entry h1,.article-entry h2,.article-entry h3,.article-entry h4,.article-entry h5,.article-entry h6,.post-excerpt h1,.post-excerpt h2,.post-excerpt h3,.post-excerpt h4,.post-excerpt h5,.post-excerpt h6{
    position:relative;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    font-weight:700;
    margin:40px auto 30px auto
}
@media (max-width:768px){
    .article-entry h1,.article-entry h2,.article-entry h3,.article-entry h4,.article-entry h5,.article-entry h6,.post-excerpt h1,.post-excerpt h2,.post-excerpt h3,.post-excerpt h4,.post-excerpt h5,.post-excerpt h6{
        left:15px
    }
}
.article-entry h1::before,.article-entry h2::before,.article-entry h3::before,.article-entry h4::before,.article-entry h5::before,.article-entry h6::before,.post-excerpt h1::before,.post-excerpt h2::before,.post-excerpt h3::before,.post-excerpt h4::before,.post-excerpt h5::before,.post-excerpt h6::before{
    position:absolute;
    left:-20px;
    top:0;
    color:#4caf50;
    font-weight:400
}
.article-entry p,.post-excerpt p{
    margin-bottom:20px;
    line-height:1.75em
}
.article-entry figure,.post-excerpt figure{
    width:100%;
    font-size:13px;
    margin:20px 0;
    padding:10px 15px;
    background:#f9f9f9;
    overflow:auto
}
.article-entry figure td.gutter,.post-excerpt figure td.gutter{
    padding-right:10px;
    color:#969696;
    font-size:12px;
    border-right:1px solid #ececec
}
.article-entry figure td.code,.post-excerpt figure td.code{
    padding-left:10px
}
.article-entry ol,.article-entry ul,.post-excerpt ol,.post-excerpt ul{
    margin:20px 0 20px 0;
//    padding-left:30px;
    list-style: none;
    width: 100%;
}
.article-entry img,.post-excerpt img{
    display:block;
    border:none;
    max-width:100%;
    height:auto
}
.article-entry blockquote,.post-excerpt blockquote{
    position:relative;
    width:100%;
    margin:20px 0;
    padding:0 20px;
    border-left:4px solid #4caf50
}
.article-entry pre,.post-excerpt pre{
    white-space:pre
}
.article-entry pre code,.post-excerpt pre code{
    color:#414141;
    padding:0 0 0 30px;
    margin:0;
    font-size:1em;
    background:0 0;
    border:0;
    white-space:inherit
}
.article-entry pre figure,.post-excerpt pre figure{
    margin:0
}
.article-entry code,.post-excerpt code{
    color:#008c7f;
    padding:3px 5px;
    margin:0 2px;
    border-radius:2px;
    white-space:nowrap;
    font-size:.8em;
    background:#f9f9f9
}
@media (max-width:768px){
    .article-entry,.post-excerpt{
        font-size:16px
    }
    .article-entry h1,.article-entry h2,.article-entry h3,.post-excerpt h1,.post-excerpt h2,.post-excerpt h3{
        margin:30px 0
    }
    .article-entry h4,.article-entry h5,.article-entry h6,.post-excerpt h4,.post-excerpt h5,.post-excerpt h6{
        margin:20px 0
    }
    .article-entry h1,.post-excerpt h1{
        font-size:1.5em
    }
    .article-entry h2,.post-excerpt h2{
        font-size:1.4em
    }
    .article-entry h3,.post-excerpt h3{
        font-size:1.3em
    }
    .article-entry h4,.post-excerpt h4{
        font-size:1.2em
    }
    .article-entry h5,.post-excerpt h5{
        font-size:1.1em
    }
    .article-entry h6,.post-excerpt h6{
        font-size:1em
    }
    .article-entry figure,.post-excerpt figure{
        font-size:13px;
        line-height:1.6em
    }
}
.article-tags{
    margin-bottom:30px
}
.article-tags .tag-link{
    position:relative;
    padding:4px 10px 4px 20px;
    margin-right:5px;
    font-size:14px;
    background:#f9f9f9;
    border-radius:2px
}
.article-tags .tag-link:hover{
    background:#414141;
    color:#fff
}
.article-tags .tag-link::before{
    position:absolute;
    top:0;
    left:7px;
    content:"#"
}
#comments{
    position:relative;
    padding:30px 0
}
.site-sidebar{
    position:fixed;
    top:0;
    right:0;
    width:280px;
    height:100%;
    padding:20px;
    background-image:url('images/sidebar-bg.png');
    background-repeat:repeat;
    background-size:102px 102px;
    text-align:center;
    overflow:hidden;
    -webkit-transform:translate3d(280px,0,0);
    transform:translate3d(280px,0,0);
    transition:all .24s ease;
    z-index:1
}
.site-sidebar .sidebar-switch{
    width:200px;
    margin:0 auto 20px auto;
    opacity:0;
    visibility:hidden;
    transition:all .24s ease
}
.site-sidebar .sidebar-switch.show{
    opacity:1;
    visibility:visible
}
.site-sidebar .sidebar-switch .dark-btn{
    display:block;
    float:left;
    width:100px;
    margin-left:-1px;
    cursor:pointer
}
.site-sidebar .sidebar-switch .dark-btn.active{
    color:#f5f5f5;
    background-color:#009688
}
.site-sidebar .sidebar-switch .dark-btn .icon{
    line-height:30px
}
.site-sidebar .sidebar-switch .dark-btn .text{
    line-height:30px
}
.site-bio{
    position:relative;
    opacity:0;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    transition:all .24s ease
}
.site-bio.show{
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.site-bio .window-nav{
    width:125px;
    padding:0 0 0 15px;
    text-align:left
}
.site-bio .shortcuts{
    padding:0 5px
}
.site-bio .shortcuts .bk{
    margin-bottom:5px
}
.site-bio .about-me{
    padding:12px 5px 15px 5px;
    background:rgba(0,0,0,.1);
    border:1px solid #000000;
    transition:background .24s,border-color .24s
}
.site-bio .about-me:hover{
    background:rgba(0,0,0,.2);
    border-color:#1a1a1a
}
.site-bio .about-me .avatar{
    display:block;
    width:96px;
    height:96px;
    margin:4px auto;
    background:rgba(0,0,0,.3);
    border-radius:50%;
    border:1px solid #000;
    padding:3px;
    overflow:hidden
}
.site-bio .about-me .avatar img{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%
}
.site-bio .about-me .dark-btn{
    padding:5px 15px
}
.site-bio .about-me .dark-btn:hover{
    background-color:#009688
}
.site-bio .about-me .dark-btn .icon{
    margin-right:0
}
.site-bio .about-me .info{
    color:#a9a9a9;
    margin-top:10px;
    line-height:140%;
    padding:0 15px;
    font-size:13px
}
.site-bio .social{
    position:relative;
    margin:15px 0;
    padding:0
}
.site-bio .social a{
    display:inline-block;
    color:#fff;
    font-size:14px;
    text-transform:uppercase;
    text-align:center;
    line-height:46px;
    vertical-align:middle;
    width:46px;
    height:46px;
    background-color:rgba(0,0,0,.3);
    border:1px solid #000;
    margin:5px 2px
}
.site-bio .social a.feed:hover{
    background-color:#ff9800
}
.site-bio .social a.github:hover{
    background-color:#467cc2
}
.site-bio .social a.twitter:hover{
    background-color:#55acee
}
.site-bio .social a.facebook:hover{
    background-color:#3765a3
}
.site-bio .social a.google:hover{
    background-color:#db4437
}
.site-bio .social a.dribbble:hover{
    background-color:#ed699c
}
.site-bio .social a.pinterest:hover{
    background-color:#bc1725
}
.site-bio .social a.weibo:hover{
    background-color:#f8712a
}
.site-bio .social a.tumblr:hover{
    background-color:#35465c
}
.site-bio .social a.instagram:hover{
    background-color:#3f729b
}
.site-bio .social a.linkedin:hover{
    background-color:#0077b5
}
.site-bio .social a.behance:hover{
    background-color:#1769ff
}
.site-bio .social a:hover{
    background:#009688
}
.site-bio .social a:hover .icon{
    color:rgba(245,245,245,.7)
}
.site-bio .social a .avatar,.site-bio .social a .icon{
    transition:all .24s
}
.site-bio .social a .avatar{
    display:block;
    width:30px;
    height:30px;
    margin:7px;
    border-radius:50%
}
.site-bio .social a .icon{
    font-size:18px;
    color:#a9a9a9;
    line-height:46px
}
.site-toc{
    position:relative;
    padding:12px 10px 15px 10px;
    background:rgba(0,0,0,.1);
    border:1px solid #262626;
    max-height:450px;
    overflow:auto;
    opacity:0;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    transition:all .24s ease
}
.site-toc.show{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    opacity:1
}
.site-toc>ol{
    text-align:left;
    list-style:none
}
.site-toc>ol li a{
    color:#e6e6e6;
    font-size:15px
}
.site-toc>ol li a:hover{
    color:#009688
}
.site-toc>ol li ol{
    list-style:none;
    padding-left:15px
}
#u-search{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:60px 20px;
    z-index:999999
}
@media (max-width:680px){
    #u-search{
        padding:0
    }
}
#u-search .modal{
    position:fixed;
    height:80%;
    width:100%;
    max-width:640px;
    left:50%;
    top:0;
    margin:64px 0 0 -320px;
    background:#fff;
    box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
    z-index:3
}
@media (max-width:680px){
    #u-search .modal{
        box-shadow:none;
        max-width:none;
        top:0;
        left:0;
        margin:0;
        height:100%
    }
}
#u-search .modal .modal-ajax-content{
    opacity:0;
    visibility:hidden;
    transition:all .36s
}
#u-search .modal .modal-ajax-content.loaded{
    opacity:1;
    visibility:visible
}
#u-search .modal .modal-header{
    position:relative;
    width:100%;
    height:50px;
    background-color:#33475a;
    z-index:3
}
#u-search .modal .modal-header .btn-close{
    display:block;
    position:absolute;
    width:50px;
    height:50px;
    top:0;
    right:0;
    color:#fff;
    cursor:pointer;
    text-align:center;
    line-height:50px;
    vertical-align:middle;
    font-size:18px;
    transition:all .24s;
    z-index:2
}
#u-search .modal .modal-header .btn-close:hover{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg)
}
#u-search .modal .modal-header .modal-loading{
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:2px;
    background:0 0;
    z-index:1
}
#u-search .modal .modal-header .modal-loading .modal-loading-bar{
    display:block;
    position:relative;
    width:0;
    height:100%;
    background:#ffb74d;
    transition:width .24s
}
#u-search .modal .modal-header #u-search-modal-form{
    position:relative;
    width:100%;
    height:100%;
    z-index:2
}
#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input{
    width:100%;
    padding:0 50px 0 40px;
    font-size:15px;
    line-height:50px;
    vertical-align:middle;
    color:#fff;
    border:none;
    background:0 0;
    transition:background-color .24s;
    font-weight:thin;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    box-shadow:none
}
#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input:focus{
    background-color:#3c546a
}
#u-search .modal .modal-header #u-search-modal-btn-submit{
    position:absolute;
    top:0;
    left:0;
    padding-left:5px;
    padding-top:2px;
    background:0 0;
    border:none;
    width:40px;
    height:50px;
    vertical-align:middle;
    font-size:20px;
    color:#fff;
    z-index:2
}
#u-search .modal .modal-footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    padding:0 15px;
    background:#fff;
    border-top:1px solid #dadada
}
#u-search .modal .modal-footer .logo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    z-index:0
}
#u-search .modal .modal-footer .logo a{
    display:inline-block
}
#u-search .modal .modal-footer .logo.google img{
    height:24px;
    margin-top:13px
}
#u-search .modal .modal-footer .logo.baidu img{
    height:22px;
    margin-top:14px
}
#u-search .modal .modal-footer .logo img{
    position:relative;
    display:inline-block;
    width:auto;
    height:18px;
    margin-top:16px
}
#u-search .modal .modal-footer .modal-error{
    position:relative;
    float:left;
    vertical-align:middle;
    line-height:50px;
    font-size:13px;
    z-index:1
}
#u-search .modal .modal-footer .modal-metadata{
    position:relative;
    float:left;
    vertical-align:middle;
    line-height:50px;
    font-size:13px;
    z-index:1
}
#u-search .modal .modal-footer .nav{
    position:relative;
    display:block;
    float:right;
    vertical-align:middle;
    font-size:13px;
    font-weight:500;
    line-height:50px;
    color:#828282;
    cursor:pointer;
    z-index:1
}
#u-search .modal .modal-footer .nav:hover{
    color:#414141
}
#u-search .modal .modal-footer .nav.btn-next{
    margin-left:10px
}
#u-search .modal .modal-footer .nav .icon{
    font-size:12px
}
#u-search .modal .modal-body{
    position:absolute;
    padding:64px 40px 80px 40px;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch
}
@media (max-width:680px){
    #u-search .modal .modal-body{
        padding:60px 20px 80px 20px
    }
}
#u-search .modal .modal-body .modal-results{
    list-style:none
}
#u-search .modal .modal-body .modal-results li{
    border-bottom:1px solid #e6e8ea
}
#u-search .modal .modal-body .modal-results li:last-child{
    border-bottom:none
}
#u-search .modal .modal-body .modal-results .result{
    position:relative;
    display:block;
    padding:15px 30px 15px 0;
    text-decoration:none
}
#u-search .modal .modal-body .modal-results .result:hover .digest,#u-search .modal .modal-body .modal-results .result:hover .icon{
    color:#414141
}
#u-search .modal .modal-body .modal-results .result .title{
    display:inline-block;
    max-width:100%;
    color:#2196f3;
    font-size:15px;
    font-weight:700;
    background:#f1f8fe;
    padding:1px;
    border-bottom:1px solid #e6e8ea;
    margin-bottom:2px;
    line-height:110%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
#u-search .modal .modal-body .modal-results .result .digest{
    display:block;
    font-size:13px;
    line-height:140%;
    color:#8e8e8e;
    transition:color .24s
}
#u-search .modal .modal-body .modal-results .result .digest em{
    font-weight:700
}
#u-search .modal .modal-body .modal-results .result .icon{
    position:absolute;
    top:50%;
    right:0;
    margin-top:-4px;
    font-size:11px;
    color:#828282
}
#u-search .modal-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    z-index:1
}
#footer{
    position:relative;
    padding:20px 20px 40px 20px;
    font-size:14px;
    overflow:hidden;
    text-align:center;
    opacity:0;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    transition:all .4s;
    z-index:3
}
#footer.show{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    opacity:1
}
#footer a{
    color:#828282
}
#footer a:hover{
    background:rgba(255,152,0,.2);
    color:#ff9800
}
.search{
    position:relative;
    width:100%;
    max-width:728px;
    margin:0 auto 20px auto;
    z-index:2
}
.search #searchform{
    position:relative;
    display:block;
    width:100%
}
.search #searchform #u-search-btn-submit{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:36px;
    height:36px;
    background:0 0;
    color:#fff;
    border:0;
    text-align:center;
    font-size:18px
}
.search #searchform #u-search-btn-submit span{
    line-height:36px
}
.search #searchinput{
    width:100%;
    padding:0 10px;
    line-height:36px;
    height:36px;
    font-size:14px;
    font-family:futura-pt,Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3",Microsoft JhengHei,WenQuanYi Micro Hei,"Microsoft YaHei",sans-serif;
    border:none;
    border-radius:0!important;
    background:#414141;
    color:#fff;
    box-sizing:border-box;
    transition:all .24s ease
}
.search #searchinput:focus{
    background:#000
}
#page-nav{
//    position:relative;
    width:100%;
//    max-width:728px;
//    margin:20px auto 0 auto;
    transition:all .4s;
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
    opacity:0;
    text-align:center
}
#page-nav.show{
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
#page-nav a,#page-nav span{
    display:inline-block;
    padding:0 10px;
    margin:5px 0;
    height:30px;
    min-width:30px;
    line-height:30px;
    font-size:14px;
    text-transform:uppercase;
    vertical-align:middle;
    text-align:center;
    transition:all .24s;
    border-bottom:1px solid transparent
}
#page-nav span.current{
    background:#ececec;
    border-bottom:1px solid #c6c6c6;
    color:#414141
}
#page-nav span.space{
    background:#fff;
    color:#414141
}
#page-nav a{
    background:#fff;
    color:#414141
}
#page-nav a:hover{
    background:#f1f1f1;
    color:#000
}

.legal {
    font-size: 24px;
    color: #FFFFFF;
    text-shadow: 2px 2px 5px red;
}

.legal:hover {
    color: #FFFFFF;
    font-size: 24px;
    text-shadow: 2px 2px 5px blue;
}

ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; }
ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:1%; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { border:5px solid #d5d5d5; left:7px; position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; }
ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li div.reply { background:#999; border:1px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px;  text-align:center; width: 100%; }
ol.commentlist li div.reply:hover { background:#c30; border:1px solid #c00; width: 100%; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li { }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}


.featured-image {
    width: 100%;
}

#submit {
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px;
    text-decoration: none;
    box-shadow: 0px 1px 3px #666666;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 3px #666666;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
    background: -moz-linear-gradient(top, #006ad4, #003366);
    width: 100%;
    background:#c30; border:1px solid #c00; width: 100%;
}

#submit:hover {
    width: 100%;
    color: #000;
    background:#fff; border:1px solid #c00; width: 100%;

}

#respond {
    background: #ececec;
    padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
    width: 100%;
}


#respond input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
    width: 100%;
}

.article-entry pre {
//    white-space: pre-wrap;
//    white-space: -moz-pre-wrap;
//    white-space: -pre-wrap;
//    white-space: -o-pre-wrap;
//    word-wrap: break-word;
    line-height: 140%;
    padding: 20px;
    background: #3d3d3d;
    font-size: 1.0em;
    color: #FFF;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

.white-box {
    width: 90%;
    background: #fff;
    padding: 20px;
}

.previous {
    float: left;
}
.next {
    float: right;
}