body { width: 100%; } body:before, body:after { content: ""; display: table; } body:after { clear: both; } 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; } input, button { margin: 0; padding: 0; } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } html, body, #container { height: 100%; } body { background: #eee; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-text-size-adjust: 100%; } .outer { max-width: 920px; margin: 0 auto; padding: 0 20px; } .outer:before, .outer:after { content: ""; display: table; } .outer:after { clear: both; } .inner { display: inline; float: left; width: 97.77777777777777%; margin: 0 1.111111111111111%; } .left, .alignleft { float: left; } .right, .alignright { float: right; } .clear { clear: both; } #container { position: relative; } .mobile-nav-on { overflow: hidden; } #wrap { height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -ms-transition: 0.2s ease-out; transition: 0.2s ease-out; z-index: 1; background: #eee; } .mobile-nav-on #wrap { left: 280px; } .article-date, .article-category-link, .archive-year { text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 1em; margin-left: 5px; line-height: 1em; text-shadow: 0 1px #fff; font-weight: bold; } .article-inner, .archive-article-inner { background: #fff; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; border: 1px solid #ddd; border-radius: 3px; } .article-entry h1 { font-size: 2em; } .article-entry h2 { font-size: 1.5em; } .article-entry h3 { font-size: 1.3em; } .article-entry h4 { font-size: 1.2em; } .article-entry h5 { font-size: 1em; } .article-entry h6 { font-size: 1em; color: #999; } .article-entry hr { border: 1px dashed #ddd; } .article-entry strong { font-weight: bold; } .article-entry em, .article-entry cite { font-style: italic; } .article-entry sup, .article-entry sub { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } .article-entry sup { top: -0.5em; } .article-entry sub { bottom: -0.2em; } .article-entry small { font-size: 0.85em; } .article-entry acronym, .article-entry abbr { border-bottom: 1px dotted; } .article-entry ul, .article-entry ol, .article-entry dl { margin: 0 20px; line-height: 1.6em; } .article-entry ul ul, .article-entry ol ul, .article-entry ul ol, .article-entry ol ol { margin-top: 0; margin-bottom: 0; } .article-entry ul { list-style: disc; } .article-entry ol { list-style: decimal; } .article-entry dt { font-weight: bold; } #header { height: 300px; position: relative; border-bottom: 1px solid #ddd; } #header:before, #header:after { content: ""; position: absolute; left: 0; right: 0; height: 40px; } #header:before { top: 0; background: -webkit-linear-gradient(rgba(0,0,0,0.2), transparent); background: -moz-linear-gradient(rgba(0,0,0,0.2), transparent); background: -ms-linear-gradient(rgba(0,0,0,0.2), transparent); background: linear-gradient(rgba(0,0,0,0.2), transparent); } #header:after { bottom: 0; background: -webkit-linear-gradient(transparent, rgba(0,0,0,0.2)); background: -moz-linear-gradient(transparent, rgba(0,0,0,0.2)); background: -ms-linear-gradient(transparent, rgba(0,0,0,0.2)); background: linear-gradient(transparent, rgba(0,0,0,0.2)); } #header-outer { height: 100%; position: relative; } #header-inner { position: relative; overflow: hidden; } #banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("") center #000; background-size: cover; z-index: -1; } #header-title { text-align: center; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; } #logo, #subtitle { text-decoration: none; color: #fff; font-weight: 300; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } #logo { font-size: 40px; line-height: 40px; letter-spacing: 2px; } #subtitle { font-size: 16px; line-height: 16px; letter-spacing: 1px; } #subtitle-wrap { margin-top: 16px; } #main-nav { float: left; margin-left: -15px; } .nav-icon, .main-nav-link { float: left; color: #fff; opacity: 0.6; text-decoration: none; text-shadow: 0 1px rgba(0,0,0,0.2); -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; transition: opacity 0.2s; display: block; padding: 20px 15px; } .nav-icon:hover, .main-nav-link:hover { opacity: 1; } .nav-icon { text-align: center; font-size: 14px; width: 14px; height: 14px; padding: 20px 15px; position: relative; cursor: pointer; } .main-nav-link { font-weight: 300; letter-spacing: 1px; } @media screen and (max-width: 479px) { .main-nav-link { display: none; } } #main-nav-toggle { display: none; } @media screen and (max-width: 479px) { #main-nav-toggle { display: block; } } #sub-nav { float: right; margin-right: -15px; } #search-form-wrap { position: absolute; top: 15px; width: 150px; height: 30px; right: -150px; opacity: 0; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -ms-transition: 0.2s ease-out; transition: 0.2s ease-out; } #search-form-wrap.on { opacity: 1; right: 0; } @media screen and (max-width: 479px) { #search-form-wrap { width: 100%; right: -100%; } } .search-form { position: absolute; top: 0; left: 0; right: 0; background: #fff; padding: 5px 15px; border-radius: 15px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.3); } .search-form-input { border: none; background: none; color: #555; width: 100%; font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; outline: none; } .search-form-input::-webkit-search-results-decoration, .search-form-input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-form-submit { position: absolute; top: 50%; right: 10px; margin-top: -7px; font: 13px ForkAwesome; border: none; background: none; color: #bbb; cursor: pointer; } .search-form-submit:hover, .search-form-submit:focus { color: #777; } .article { margin: 50px 0; } .article-inner { overflow: hidden; } .article-meta:before, .article-meta:after { content: ""; display: table; } .article-meta:after { clear: both; } .article-date { float: left; } .article-category { float: left; line-height: 1em; color: #ccc; text-shadow: 0 1px #fff; margin-left: 8px; } .article-category:before { content: "\2022"; } .article-category-link { margin: 0 12px 1em; } .article-header { padding: 20px 20px 0; } .article-title { text-decoration: none; font-size: 2em; font-weight: bold; color: #555; line-height: 1.1em; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; } a.article-title:hover { color: #258fb8; } .article-entry { color: #555; padding: 0 20px; } .article-entry:before, .article-entry:after { content: ""; display: table; } .article-entry:after { clear: both; } .article-entry p, .article-entry table { line-height: 1.6em; margin: 1.6em 0; } .article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6 { font-weight: bold; } .article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6 { line-height: 1.1em; margin: 1.1em 0; } .article-entry a { color: #258fb8; text-decoration: none; } .article-entry a:hover { text-decoration: underline; } .article-entry ul, .article-entry ol, .article-entry dl { margin-top: 1.6em; margin-bottom: 1.6em; } .article-entry img, .article-entry video { max-width: 100%; height: auto; display: block; margin: auto; } .article-entry iframe { border: none; } .article-entry table { width: 100%; border-collapse: collapse; border-spacing: 0; } .article-entry th { font-weight: bold; border-bottom: 3px solid #ddd; padding-bottom: 0.5em; } .article-entry td { border-bottom: 1px solid #ddd; padding: 10px 0; } .article-entry blockquote { font-family: Georgia, "Times New Roman", serif; margin: 1.6em 20px; text-align: center; } .article-entry blockquote footer { font-size: 14px; margin: 1.6em 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .article-entry blockquote footer cite:before { content: "—"; padding: 0 0.5em; } .article-entry .pullquote { text-align: left; width: 45%; margin: 0; } .article-entry .pullquote.left { margin-left: 0.5em; margin-right: 1em; } .article-entry .pullquote.right { margin-right: 0.5em; margin-left: 1em; } .article-entry .caption { color: #999; display: block; font-size: 0.9em; margin-top: 0.5em; position: relative; text-align: center; } .article-entry .video-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; } .article-entry .video-container iframe, .article-entry .video-container object, .article-entry .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; } .article-more-link a { display: inline-block; line-height: 1em; padding: 6px 15px; border-radius: 15px; background: #eee; color: #999; text-shadow: 0 1px #fff; text-decoration: none; } .article-more-link a:hover { background: #258fb8; color: #fff; text-decoration: none; text-shadow: 0 1px #1e7293; } .article-footer { font-size: 0.85em; line-height: 1.6em; border-top: 1px solid #ddd; padding-top: 1.6em; margin: 0 20px 20px; } .article-footer:before, .article-footer:after { content: ""; display: table; } .article-footer:after { clear: both; } .article-footer a { color: #999; text-decoration: none; } .article-footer a:hover { color: #555; } .article-tag-list-item { float: left; margin-right: 10px; } .article-tag-list-link:before { content: "#"; } .article-comment-link { float: right; } .article-comment-link:before { padding-right: 8px; } .article-share-link { cursor: pointer; float: right; margin-left: 20px; } .article-share-link:before { padding-right: 6px; } #article-nav { position: relative; } #article-nav:before, #article-nav:after { content: ""; display: table; } #article-nav:after { clear: both; } @media screen and (min-width: 768px) { #article-nav { margin: 50px 0; } #article-nav:before { width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; content: ""; border-radius: 50%; background: #ddd; -webkit-box-shadow: 0 1px 2px #fff; box-shadow: 0 1px 2px #fff; } } .article-nav-link-wrap { text-decoration: none; text-shadow: 0 1px #fff; color: #999; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 50px; text-align: center; display: block; } .article-nav-link-wrap:hover { color: #555; } @media screen and (min-width: 768px) { .article-nav-link-wrap { width: 50%; margin-top: 0; } } @media screen and (min-width: 768px) { #article-nav-newer { float: left; text-align: right; padding-right: 20px; } } @media screen and (min-width: 768px) { #article-nav-older { float: right; text-align: left; padding-left: 20px; } } .article-nav-caption { text-transform: uppercase; letter-spacing: 2px; color: #ddd; line-height: 1em; font-weight: bold; } #article-nav-newer .article-nav-caption { margin-right: -2px; } .article-nav-title { font-size: 0.85em; line-height: 1.6em; margin-top: 0.5em; } .article-share-box { position: absolute; display: none; background: #fff; -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.2); box-shadow: 1px 2px 10px rgba(0,0,0,0.2); border-radius: 3px; margin-left: -145px; overflow: hidden; z-index: 1; } .article-share-box.on { display: block; } .article-share-input { width: 100%; background: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0 15px; color: #555; outline: none; border: 1px solid #ddd; border-radius: 3px 3px 0 0; height: 36px; line-height: 36px; } .article-share-links { background: #eee; } .article-share-links:before, .article-share-links:after { content: ""; display: table; } .article-share-links:after { clear: both; } .article-share-twitter, .article-share-facebook, .article-share-pinterest, .article-share-linkedin { width: 50px; height: 36px; display: block; float: left; position: relative; color: #999; text-shadow: 0 1px #fff; } .article-share-twitter:before, .article-share-facebook:before, .article-share-pinterest:before, .article-share-linkedin:before { font-size: 20px; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; text-align: center; } .article-share-twitter:hover, .article-share-facebook:hover, .article-share-pinterest:hover, .article-share-linkedin:hover { color: #fff; } .article-share-twitter:hover { background: #00aced; text-shadow: 0 1px #008abe; } .article-share-facebook:hover { background: #3b5998; text-shadow: 0 1px #2f477a; } .article-share-pinterest:hover { background: #cb2027; text-shadow: 0 1px #a21a1f; } .article-share-linkedin:hover { background: #0077b5; text-shadow: 0 1px #005f91; } .article-gallery { background: #000; position: relative; } .article-gallery-photos { position: relative; overflow: hidden; } .article-gallery-img { display: none; max-width: 100%; } .article-gallery-img:first-child { display: block; } .article-gallery-img.loaded { position: absolute; display: block; } .article-gallery-img img { display: block; max-width: 100%; margin: 0 auto; } #comments { background: #fff; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; padding: 20px; border: 1px solid #ddd; border-radius: 3px; margin: 50px 0; } #comments a { color: #258fb8; } .archives-wrap { margin: 50px 0; } .archives:before, .archives:after { content: ""; display: table; } .archives:after { clear: both; } .archive-year-wrap { margin-bottom: 1em; } .archives { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } @media screen and (min-width: 480px) and (max-width: 767px) { .archives { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media screen and (min-width: 768px) { .archives { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } .archive-article { -webkit-column-break-inside: avoid; page-break-inside: avoid; overflow: hidden; break-inside: avoid-column; } .archive-article-inner { padding: 10px; margin-bottom: 15px; } .archive-article-title { text-decoration: none; font-weight: bold; color: #555; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; line-height: 1.6em; } .archive-article-title:hover { color: #258fb8; } .archive-article-footer { margin-top: 1em; } .archive-article-date { color: #999; text-decoration: none; font-size: 0.85em; line-height: 1em; margin-bottom: 0.5em; display: block; } #page-nav { margin: 50px auto; background: #fff; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; border: 1px solid #ddd; border-radius: 3px; text-align: center; color: #999; overflow: hidden; } #page-nav:before, #page-nav:after { content: ""; display: table; } #page-nav:after { clear: both; } #page-nav a, #page-nav span { padding: 10px 20px; line-height: 1; height: 2ex; } #page-nav a { color: #999; text-decoration: none; } #page-nav a:hover { background: #999; color: #fff; } #page-nav .prev { float: left; } #page-nav .next { float: right; } #page-nav .page-number { display: inline-block; } @media screen and (max-width: 479px) { #page-nav .page-number { display: none; } } #page-nav .current { color: #555; font-weight: bold; } #page-nav .space { color: #ddd; } #footer { background: #262a30; padding: 50px 0; border-top: 1px solid #ddd; color: #999; } #footer a { color: #258fb8; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer-info { line-height: 1.6em; font-size: 0.85em; } .article-entry pre, .article-entry .highlight { background: #2d2d2d; margin: 0 -20px; padding: 15px 20px; border-style: solid; border-color: #ddd; border-width: 1px 0; overflow: auto; color: #ccc; line-height: 22.400000000000002px; } .article-entry .highlight .gutter pre, .article-entry .gist .gist-file .gist-data .line-numbers { color: #666; font-size: 0.85em; } .article-entry pre, .article-entry code { font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; } .article-entry code { background: #eee; text-shadow: 0 1px #fff; padding: 0 0.3em; } .article-entry pre code { background: none; text-shadow: none; padding: 0; } .article-entry .highlight pre { border: none; margin: 0; padding: 0; } .article-entry .highlight table { margin: 0; width: auto; } .article-entry .highlight td { border: none; padding: 0; } .article-entry .highlight figcaption { font-size: 0.85em; color: #999; line-height: 1em; margin-bottom: 1em; } .article-entry .highlight figcaption:before, .article-entry .highlight figcaption:after { content: ""; display: table; } .article-entry .highlight figcaption:after { clear: both; } .article-entry .highlight figcaption a { float: right; } .article-entry .highlight .gutter { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .article-entry .highlight .gutter pre { text-align: right; padding-right: 20px; } .article-entry .highlight .line { height: 22.400000000000002px; } .article-entry .highlight .line.marked { background: #515151; } .article-entry .gist { margin: 0 -20px; border-style: solid; border-color: #ddd; border-width: 1px 0; background: #2d2d2d; padding: 15px 20px 15px 0; } .article-entry .gist .gist-file { border: none; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; margin: 0; } .article-entry .gist .gist-file .gist-data { background: none; border: none; } .article-entry .gist .gist-file .gist-data .line-numbers { background: none; border: none; padding: 0 20px 0 0; } .article-entry .gist .gist-file .gist-data .line-data { padding: 0 !important; } .article-entry .gist .gist-file .highlight { margin: 0; padding: 0; border: none; } .article-entry .gist .gist-file .gist-meta { background: #2d2d2d; color: #999; font: 0.85em -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; text-shadow: 0 0; padding: 0; margin-top: 1em; margin-left: 20px; } .article-entry .gist .gist-file .gist-meta a { color: #258fb8; font-weight: normal; } .article-entry .gist .gist-file .gist-meta a:hover { text-decoration: underline; } pre .comment, pre .title { color: #999; } pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { color: #f2777a; } pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { color: #f99157; } pre .class, pre .ruby .class .title, pre .css .rules .attribute { color: #9c9; } pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { color: #9c9; } pre .css .hexcolor { color: #6cc; } pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { color: #69c; } pre .keyword, pre .javascript .function { color: #c9c; } @media screen and (max-width: 479px) { #mobile-nav { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: #191919; border-right: 1px solid #fff; } } @media screen and (max-width: 479px) { .mobile-nav-link { display: block; color: #999; text-decoration: none; padding: 15px 20px; font-weight: bold; } .mobile-nav-link:hover { color: #fff; } }