/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*

    0.  Includes
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Third Party Elements
    7.  Pagination
    8.  Footer
    9.  Media Queries (Tablet)
    10. Media Queries (Mobile)

 */

/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */

html { height: 100%; max-height: 100%; font-size: 64%;margin: 0; }
body { height: 100%; max-height: 100%; margin: 0;font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'SimSun', 'Droid Sans Fallback', sans-serif; font-size: 1.7rem; line-height: 1.6em; color: #3A4145; background: white; }

::-moz-selection {
 color: #222;
 background: #D6EDFF;
 text-shadow: none;
}
::selection { color: #fff; background: #FF4F93; text-shadow: none; }
h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; }
h1 { font-size: 4.8rem; line-height: 1.2em; letter-spacing: -2px; text-indent: -3px; }
h2 { font-size: 4.2rem; line-height: 1.2em; letter-spacing: -1px; text-indent: -2px; }
h3 { font-size: 3.2rem; }
h4 { font-size: 2.4rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.4rem; }
a { color: #1F85C8; text-decoration: none; transition: color ease 0.3s; outline: none; }
a:hover, a:focus { color: #3498DB; outline: none; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #50585D; }
p, ul, ol, dl { margin: 1.6em 0; }
ol ol, ul ul, ul ol, ol ul { margin: 0.4em 0; }
dl dt { float: left; width: 180px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; margin-bottom: 1em }
dl dd { margin-left: 200px; margin-bottom: 1em }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #efefef; margin: 3.2em 0; padding: 0; }
blockquote { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.0em 0 1.0em 0em; padding: 0 0 0 1.6em; border-left: #ddd 0.4em solid; color: #777; }
blockquote p { margin: 0.8em 0; }
blockquote small { display: inline-block; margin: 0.8em 0 0.8em 1.5em; font-size: 0.9em; color: #ccc; }
blockquote small:before { content: '\2014 \00A0'; }
blockquote cite { font-weight: bold; }
blockquote cite a { font-weight: normal; }
mark { background-color: #ffc336; }
code, tt { padding: 1px 3px; font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; white-space: pre-wrap; border-bottom: 1px solid #e0e0e0; background: #f8f8f8; border-radius: 2px; }
pre { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.2em 0; border-bottom: 1px solid #e4e4e4; width: 100%; padding: 1.62em; font-family: Monaco, Menlo, Consolas, monospace, "Courier New", sans-serif; font-size: 0.85em; line-height: 1.6em; white-space: pre; overflow: auto; background: #f8f8f8; border-radius: 2px; }
pre code, tt { font-size: inherit; white-space: -moz-pre-wrap; white-space: pre-wrap; background: transparent; border: none; padding: 0; }
kbd { display: inline-block; margin-bottom: 0.4em; padding: 1px 8px; border: #ccc 1px solid; color: #666; text-shadow: #fff 0 1px 0; font-size: 0.9em; font-weight: bold; background: #f4f4f4; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),  0 1px 0 0 #fff inset; }
table { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.6em 0; width: 100%; max-width: 100%; background-color: transparent; }
table th, table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top;/* border-top: 1px solid #efefef; */
}
table th { color: #000; }
table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; }
table tbody + tbody { border-top: 2px solid #efefef; }
table table table { background-color: #fff; }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #f6f6f6; }
table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th { background: transparent; }
iframe, .fluid-width-video-wrapper { display: block; margin: 1.6em 0; }
/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe { margin: 0; }
/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Hides shit */
.hidden { text-indent: -9999px; visibility: hidden; display: none; }
/* Creates a responsive wrapper that makes our content scale nicely */
.inner { position: relative; width: 80%; max-width: 700px; margin: 0 auto; }
/* Centres vertically yo. (IE8+) */
.vertical { display: table-cell; vertical-align: middle; }
/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */

/* Big cover image on the home page */
.site-head { position: relative; display: table; width: 100%; height: 60%; text-align: center; color: #fff; background:no-repeat center center; background-size: cover; }
.content { background: #fff;padding: 10px 0 0 0; }
.blog-logo { text-decoration: none; }
/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
.blog-logo img { display: block; max-height: 100px;max-width: 100px; width: auto; margin: 0 auto; line-height: 0; }
/* The details of your blog. Defined in ghost/settings/ */
.blog-title { margin: 10px 0 10px 0; font-size: 5rem; letter-spacing: -1px; font-weight: bold; text-shadow: 0 1px 6px rgba(0,0,0,0.1); }
.blog-description { margin: 0; font-size: 1.8rem; line-height: 1.5em; font-weight: 300; font-family: 'Noto Serif', serif; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
/* Every post, on every page, gets this style on its <article> tag */
.post { position: relative; width: 80%; max-width: 700px; margin: 4rem auto; padding-bottom: 4rem; border-bottom: #EBF2F6 1px solid; word-break: break-word; hyphens: auto; }
/* Add a little circle in the middle of the border-bottom on our .post
   just for the lolz and stylepoints.
.post:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: #fff 0 0 0 5px;
} */
img {max-width: 100%;}
.post .post-header img {margin:1.4rem 0 0 0;}
.post-title { margin: 0; }
.post-title a { text-decoration: none; }
.post-excerpt p { margin: 1.6rem 0 0 0; font-size: 0.9em; line-height: 1.6em; }
.post-meta { display: inline-block; margin: 0 0 5px 0; font-size: 1.5rem; color: #9EABB3; }
.post-meta a { color: #9EABB3; text-decoration: none; }
.post-meta a:hover { color: #2980B9;text-decoration: underline; }
.user-meta { position: relative; padding: 0.3rem 40px 0 100px; min-height: 77px; }
.user-image { position: absolute; top: 0; left: 0; }
.user-name { display: block; font-weight: bold; }
.user-bio { display: block; max-width: 440px; font-size: 1.4rem; line-height: 1.5em; }
.publish-meta { position: absolute; top: 0; right: 0; padding: 4.3rem 0 4rem 0; text-align: right; }
.publish-heading { display: block; font-weight: bold; }
.publish-date { display: block; font-size: 1.4rem; line-height: 1.5em; }
.comments-area { width: 80%; max-width: 700px; margin: 4rem auto; }
#comment h1 a { text-decoration: none; }
/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

/* Insert some mad padding up in the header for better spacing */
.post-template .post-header { padding: 60px 0; text-align: center; }
.post-template .site-head { color: #303538; border-bottom: #ebf2f6 1px solid; background: none !important; }
.post-template .site-head:after { position: absolute; bottom: -5px; left: 50%; display: block; width: 7px; height: 7px; margin-left: -5px; content: ''; border: #e7eef2 1px solid; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #fff; box-shadow: #fff 0 0 0 5px; }
/* Keep large images within the bounds of the post-width */
.post-content img { display: block; max-width: 100%; margin: 0 auto; height: auto; }
/* The author credit area after the post */
.post-footer { position: relative; margin: 4rem 0 0 0; padding: 4rem 0 0 0; border-top: #EBF2F6 1px solid; }
.post-footer h4 { font-size: 1.8rem; margin: 0; }
.post-footer p { margin: 1rem 0; font-size: 1.4rem; line-height: 1.6em; }
/* ==========================================================================
   6. Third Party Elements - Embeds from other services
   ========================================================================== */

/* Hexo: Youtube, other video container */

.video-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; }
/* Hexo: Syntax Highlighter */

figure.highlight { background: #fff; border-radius: 2px; border-bottom: 1px solid #e1e1e1; line-height: 1.45em; font-size: .8em; margin-bottom: 1em; overflow: auto; white-space: pre; word-wrap: normal; }
figure.highlight figcaption { padding: 8px 10px; font-size: .8em; }
figure.highlight table { margin: 0; }
figure.highlight table > tbody > tr > td { padding: 0; background: #fff !important; }
figure.highlight table > tbody > tr > td.gutter { max-width: 30px; width: 30px; text-align: left; color: #999; }
figure.highlight pre { border: none; margin: 0; }
/* Theme: Solarized - Github
 * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html
 */
pre .comment, pre .template_comment, .diff pre .header, pre .javadoc { color: #999; font-style: italic }
pre .keyword, .css .rule pre .keyword, pre .winutils, .javascript pre .title, .nginx pre .title, pre .subst, pre .request, pre .status { color: #4a4a4a; font-weight: bold }
pre .number, pre .hexcolor, .ruby pre .constant { color: #099; }
pre .string, pre .tag pre .value, pre .phpdoc, .tex pre .formula { color: #dd3c2b }
pre .title, pre .id, .coffeescript pre .params, .scss pre .preprocessor { color: #900; font-weight: bold }
.javascript pre .title, .lisp pre .title, .clojure pre .title, pre .subst { font-weight: normal }
pre .class pre .title, .haskell pre .type, .vhdl pre .literal, .tex pre .command { color: #458; font-weight: bold }
pre .tag, pre .tag pre .title, pre .rules pre .property, .django pre .tag pre .keyword { color: #000080; font-weight: normal }
pre .attribute, pre .variable, .lisp pre .body { color: #008080 }
pre .regexp { color: #009926 }
pre .symbol, .ruby pre .symbol pre .string, .lisp pre .keyword, .tex pre .special, pre .prompt { color: #990073 }
pre .built_in, .lisp pre .title, .clojure pre .built_in { color: #0086b3 }
pre .preprocessor, pre .pragma, pre .pi, pre .doctype, pre .shebang, pre .cdata { color: #999; font-weight: bold }
pre .deletion { background: #fdd }
pre .addition { background: #dfd }
.diff pre .change { background: #0086b3 }
pre .chunk { color: #aaa }
/* Github */

.gist table { margin: 0; font-size: 1.4rem; }
.gist .line-number { min-width: 25px; font-size: 1.1rem; }
/* ==========================================================================
   7. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination { position: relative; width: 80%; max-width: 700px; margin: 4rem auto; font-family: 'Open Sans', sans-serif; font-size: 1.3rem; color: #9EABB3; text-align: center; }
.pagination a { color: #9EABB3; }
/* Push the previous/next links out to the left/right */
.older-posts, .newer-posts { position: absolute; display: inline-block; padding: 0 15px; border: #EBF2F6 2px solid; text-decoration: none; border-radius: 30px; transition: border ease 0.3s; }
.older-posts { right: 0; }
.page-number { display: inline-block; padding: 2px 0; }
.newer-posts { left: 0; }
.older-posts:hover, .newer-posts:hover { border-color: #9EABB3; color: #ff8d66; }
/* ==========================================================================
   8. Footer - The bottom of every page
   ========================================================================== */

.site-footer { position: relative; margin: 8rem 0 0 0; padding: 4rem 0; border-top: #EBF2F6 1px solid; font-family: 'Open Sans', sans-serif; font-size: 1.3rem; line-height: 1.7em; color: #BBC7CC; text-align: center; background: #f8f8f8; }
.site-footer a { color: #BBC7CC; text-decoration: underline; }
.site-footer a:hover { color: #50585D; }
.poweredby .icon-ghost { font-weight: 700; text-decoration: none; }
.poweredby .icon-ghost:hover { text-decoration: none; }
.poweredby .icon-ghost:before { font-size: 1rem; margin-right: 0.2em; }
/* The subscribe icon on the footer */
.subscribe { width: 28px; height: 28px; position: absolute; top: -14px; left: 50%; margin-left: -15px; border: #EBF2F6 1px solid; text-align: center; line-height: 2.4rem; border-radius: 50px; background: #fff; transition: box-shadow 0.5s; }
/* The RSS icon, inserted via icon font */
.subscribe:before { color: #D2DEE3; font-size: 10px; position: absolute; top: 9px; left: 9px; font-weight: bold; transition: color 0.5s ease; }
/* Add a box shadow to on hover */
.subscribe:hover { box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; transition: box-shadow 0.25s; }
.subscribe:hover:before { color: #50585D; }
/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip { opacity: 0; display: inline-block; padding: 4px 8px 5px 8px; position: absolute; top: -23px; left: -21px; color: rgba(255,255,255,0.9); font-size: 1.1rem; line-height: 1em; text-align: center; background: #50585D; border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: opacity 0.3s ease, top 0.3s ease; }
/* The little chiclet arrow under the tooltip, pointing down */
.tooltip:after { content: ""; border-width: 5px 5px 0 5px; border-style: solid; border-color: #50585D transparent; display: block; position: absolute; bottom: -4px; left: 50%; margin-left: -5px; z-index: 220; width: 0; }
/* On hover, show the tooltip! */
.subscribe:hover .tooltip { opacity: 1; top: -33px; }

/* ==========================================================================
   9. Media Queries - Smaller than 900px
   ========================================================================== */

@media only screen and (max-width: 900px) {
blockquote { margin-left: 0; }
.site-head { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; min-height: 240px; padding: 15% 0; }
.blog-title { font-size: 4rem; letter-spacing: -1px; }
.blog-description { font-size: 1.7rem; line-height: 1.5em; }
.post { font-size: 0.9em; line-height: 1.6em; }
.post-template .post { padding-bottom: 1rem; }
.post-template .post-header { padding: 40px 0; }
h1 { font-size: 4.8rem; text-indent: -2px; }
h2 { font-size: 4rem; }
h3 { font-size: 3.2rem; }
h4 { font-size: 2.4rem; }
}

/* ==========================================================================
   10. Media Queries - Smaller than 500px
   ========================================================================== */


@media only screen and (max-width: 500px) {
.blog-logo img { max-height: 80px; }
.inner,  .pagination { width: auto; margin-left: 16px; margin-right: 16px; }
.post { width: auto; margin-left: 16px; margin-right: 16px; font-size: 0.8em; line-height: 1.6em; }
.site-head { padding: 10% 0; }
.blog-title { font-size: 3rem; }
.blog-description { font-size: 1.5rem; }
h1, h2 { font-size: 3rem; line-height: 1.1em; letter-spacing: -1px; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2.3rem; }
.post-template .post-header { padding: 30px 0; }
.post-meta { font-size: 1.3rem; }
.post-footer { padding: 4rem 0; text-align: center; }
.post-footer .author { margin: 0 2rem 2rem 0; padding: 0 0 1.6rem 0; border-bottom: #EBF2F6 1px dashed; }
.post-footer .share { position: static; width: auto; }
.post-footer .share a { margin: 1.4rem 0.8rem 0 0.8rem; }
.older-posts,  .newer-posts { position: static; margin: 10px 0; }
.page-number { display: block; }
.site-footer { margin-top: 6rem; font-size: 1.1rem; }
}

.page-navigator .current a{color:#444;background:#EEE;}#comments{padding-top:15px;}
.page-navigator a:hover{background:#EEE;text-decoration:none;}
.page-navigator a{display:inline-block;padding:0 10px;height:30px;line-height:30px;}
.page-navigator li{display:inline-block;margin:0 4px;}
.page-navigator{list-style:none;margin:25px 0;padding:0;text-align:center;}

/* ==========================================================================
   End of file. Media queries should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */