/* CSS Normalize =========================================== */ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em; } /* Variables and mixins ==================================== */ /* Links ================================================= */ /* Site wide styles (html, body, global classes) =========== */ /* Selection ============================================= */ ::-moz-selection { background-color: #dadada; color: #343434; text-shadow: none; } ::selection { background-color: #dadada; color: #343434; text-shadow: none; } /* Global Classes ======================================== */ .all-caps { text-transform: uppercase; } .pull-left { float: left; } .pull-right { float: right; } .image-pull-right { float: right; margin-top: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } .unstyled-list { list-style: none; margin-left: 0; padding-left: 0; } .unstyled-list li { list-style-type: none; } /* Global Transition ==================================== */ b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } body { font-family: 'PT Serif', serif; color: #333332; } h1, h2, h3, h4, h5, h6 { font-family: 'PT Sans Narrow', sans-serif; } h1 { font-size: 32px; font-size: 2rem; line-height: 0.8125; margin-bottom: 26px; margin-bottom: 1.625rem; } h2 { font-size: 28px; font-size: 1.75rem; line-height: 0.9286; margin-bottom: 26px; margin-bottom: 1.625rem; } h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.0833; margin-bottom: 26px; margin-bottom: 1.625rem; } h4 { font-size: 18px; font-size: 1.125rem; line-height: 1.4444; margin-bottom: 26px; margin-bottom: 1.625rem; } h5 { font-size: 16px; font-size: 1rem; line-height: 1.625; margin-bottom: 26px; margin-bottom: 1.625rem; } h6 { font-size: 14px; font-size: 0.875rem; line-height: 1.8571; margin-bottom: 26px; margin-bottom: 1.625rem; } a { text-decoration: none; color: #343434; } a:visited { color: #676767; } a:hover { color: #010101; } a:focus { outline: thin dotted; color: #010101; } a:hover, a:active { outline: 0; } figcaption { padding-top: 10px; font-size: 14px; font-size: 0.875rem; line-height: 1.8571; line-height: 1.3; color: #4d4d4b; } .image-credit { display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; display: block; text-align: right; font-size: 12px; font-size: 0.75rem; line-height: 2.1667; line-height: 1.3; font-style: italic; color: #80807e; } .image-credit a { color: #80807e; } .notice { margin-top: 1.5em; padding: .5em 1em; text-indent: 0; font-size: 14px; font-size: 0.875rem; background-color: #ffffff; border: 1px solid #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } blockquote { margin-left: -28px; padding-left: 20px; border-left: 8px solid #333332; font-family: 'PT Serif', serif; font-style: italic; font-size: 24px; font-size: 1.5rem; } .entry-content .footnotes ol, .entry-content .footnotes li, .entry-content .footnotes p { font-size: 14px; font-size: 0.875rem; line-height: 1.8571; margin-bottom: 26px; margin-bottom: 1.625rem; } p { margin: 0 0 1.625rem; } p + p { text-indent: 1.625rem; margin-top: -1.625rem; } tt, code, kbd, samp, pre { font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; } p code, li code { font-size: 12px; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; margin: 0 2px; padding: 0 5px; border: 1px solid #f7f7f7; background-color: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } pre { font-size: 12px; font-size: 0.75rem; line-height: 1.5; overflow-x: auto; } /* Pygments Syntax highlighting ============================= */ .highlight { background-color: #efefef; font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 12px; font-size: 0.75rem; line-height: 2.1667; color: #333332; margin-bottom: 1.5em; /* Comment */ /* Error */ /* Keyword */ /* Operator */ /* Comment.Multiline */ /* Comment.Preproc */ /* Comment.Single */ /* Comment.Special */ /* Generic.Deleted */ /* Generic.Emph */ /* Generic.Error */ /* Generic.Heading */ /* Generic.Inserted */ /* Generic.Output */ /* Generic.Prompt */ /* Generic.Strong */ /* Generic.Subheading */ /* Generic.Traceback */ /* Keyword.Constant */ /* Keyword.Declaration */ /* Keyword.Namespace */ /* Keyword.Pseudo */ /* Keyword.Reserved */ /* Keyword.Type */ /* Literal.Number */ /* Literal.String */ /* Name.Attribute */ /* Name.Builtin */ /* Name.Class */ /* Name.Constant */ /* Name.Decorator */ /* Name.Entity */ /* Name.Exception */ /* Name.Function */ /* Name.Label */ /* Name.Namespace */ /* Name.Tag */ /* Name.Variable */ /* Operator.Word */ /* Text.Whitespace */ /* Literal.Number.Float */ /* Literal.Number.Hex */ /* Literal.Number.Integer */ /* Literal.Number.Oct */ /* Literal.String.Backtick */ /* Literal.String.Char */ /* Literal.String.Doc */ /* Literal.String.Double */ /* Literal.String.Escape */ /* Literal.String.Heredoc */ /* Literal.String.Interpol */ /* Literal.String.Other */ /* Literal.String.Regex */ /* Literal.String.Single */ /* Literal.String.Symbol */ /* Name.Builtin.Pseudo */ /* Name.Variable.Class */ /* Name.Variable.Global */ /* Name.Variable.Instance */ /* Literal.Number.Integer.Long */ } .highlight pre { position: relative; margin: 0; padding: 1em; } .highlight .lineno { padding-right: 24px; color: #b3b3b1; } .highlight .hll { background-color: #ffffcc; } .highlight .c { color: #999988; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .k { color: #000000; font-weight: bold; } .highlight .o { color: #000000; font-weight: bold; } .highlight .cm { color: #999988; font-style: italic; } .highlight .cp { color: #999999; font-weight: bold; font-style: italic; } .highlight .c1 { color: #999988; font-style: italic; } .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } .highlight .gd { color: #000000; background-color: #ffdddd; } .highlight .ge { color: #000000; font-style: italic; } .highlight .gr { color: #aa0000; } .highlight .gh { color: #999999; } .highlight .gi { color: #000000; background-color: #ddffdd; } .highlight .go { color: #888888; } .highlight .gp { color: #555555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaaaaa; } .highlight .gt { color: #aa0000; } .highlight .kc { color: #000000; font-weight: bold; } .highlight .kd { color: #000000; font-weight: bold; } .highlight .kn { color: #000000; font-weight: bold; } .highlight .kp { color: #000000; font-weight: bold; } .highlight .kr { color: #000000; font-weight: bold; } .highlight .kt { color: #445588; font-weight: bold; } .highlight .m { color: #009999; } .highlight .s { color: #d01040; } .highlight .na { color: #008080; } .highlight .nb { color: #0086b3; } .highlight .nc { color: #445588; font-weight: bold; } .highlight .no { color: #008080; } .highlight .nd { color: #3c5d5d; font-weight: bold; } .highlight .ni { color: #800080; } .highlight .ne { color: #990000; font-weight: bold; } .highlight .nf { color: #990000; font-weight: bold; } .highlight .nl { color: #990000; font-weight: bold; } .highlight .nn { color: #555555; } .highlight .nt { color: #000080; } .highlight .nv { color: #008080; } .highlight .ow { color: #000000; font-weight: bold; } .highlight .w { color: #bbbbbb; } .highlight .mf { color: #009999; } .highlight .mh { color: #009999; } .highlight .mi { color: #009999; } .highlight .mo { color: #009999; } .highlight .sb { color: #d01040; } .highlight .sc { color: #d01040; } .highlight .sd { color: #d01040; } .highlight .s2 { color: #d01040; } .highlight .se { color: #d01040; } .highlight .sh { color: #d01040; } .highlight .si { color: #d01040; } .highlight .sx { color: #d01040; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d01040; } .highlight .ss { color: #990073; } .highlight .bp { color: #999999; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .il { color: #009999; } .CodeRay { background-color: #efefef; font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 12px; font-size: 0.75rem; line-height: 2.1667; color: #333332; margin-bottom: 1.5em; } .CodeRay pre { margin: 0px; padding: 1em; } span.CodeRay { white-space: pre; border: 0px; padding: 2px; } table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; } table.CodeRay td { padding: 1em 0.5em; vertical-align: top; } .CodeRay .line-numbers, .CodeRay .no { background-color: #ECECEC; color: #AAA; text-align: right; } .CodeRay .line-numbers a { color: #AAA; } .CodeRay .line-numbers tt { font-weight: bold; } .CodeRay .line-numbers .highlighted { color: #ff0000; } .CodeRay .line { display: block; float: left; width: 100%; } .CodeRay span.line-numbers { padding: 0 24px 0 4px; } .CodeRay .code { width: 100%; } ol.CodeRay { font-size: 10pt; } ol.CodeRay li { white-space: pre; } .CodeRay .code pre { overflow: auto; } .CodeRay .debug { color: white ! important; background: blue ! important; } .CodeRay .annotation { color: #000077; } .CodeRay .attribute-name { color: #ff0088; } .CodeRay .attribute-value { color: #770000; } .CodeRay .binary { color: #509; font-weight: bold; } .CodeRay .comment { color: #998; font-style: italic; } .CodeRay .char { color: #0044dd; } .CodeRay .char .content { color: #0044dd; } .CodeRay .char .delimiter { color: #003399; } .CodeRay .class { color: #458; font-weight: bold; } .CodeRay .complex { color: #A08; font-weight: bold; } .CodeRay .constant { color: teal; } .CodeRay .color { color: #00aa00; } .CodeRay .class-variable { color: #336699; } .CodeRay .decorator { color: #B0B; } .CodeRay .definition { color: #099; font-weight: bold; } .CodeRay .directive { color: #088; font-weight: bold; } .CodeRay .delimiter { color: #000000; } .CodeRay .doc { color: #997700; } .CodeRay .doctype { color: #3344bb; } .CodeRay .doc-string { color: #D42; font-weight: bold; } .CodeRay .escape { color: #666; font-weight: bold; } .CodeRay .entity { color: #800; font-weight: bold; } .CodeRay .error { color: #F00; background-color: #ffaaaa; } .CodeRay .exception { color: #C00; font-weight: bold; } .CodeRay .filename { color: #099; } .CodeRay .function { color: #900; font-weight: bold; } .CodeRay .global-variable { color: teal; font-weight: bold; } .CodeRay .hex { color: #058; font-weight: bold; } .CodeRay .integer { color: #099; } .CodeRay .include { color: #B44; font-weight: bold; } .CodeRay .inline { color: #000000; } .CodeRay .inline .inline { background: #cccccc; } .CodeRay .inline .inline .inline { background: #bbbbbb; } .CodeRay .inline .inline-delimiter { color: #D14; } .CodeRay .inline-delimiter { color: #D14; } .CodeRay .important { color: #f00; } .CodeRay .interpreted { color: #B2B; font-weight: bold; } .CodeRay .instance-variable { color: #008080; } .CodeRay .label { color: #970; font-weight: bold; } .CodeRay .local-variable { color: #996633; } .CodeRay .octal { color: #40E; font-weight: bold; } .CodeRay .predefined-constant { font-weight: bold; } .CodeRay .predefined { color: #369; font-weight: bold; } .CodeRay .preprocessor { color: #579; } .CodeRay .pseudo-class { color: #00C; font-weight: bold; } .CodeRay .predefined-type { color: #074; font-weight: bold; } .CodeRay .reserved, .keyword { color: #000; font-weight: bold; } .CodeRay .key { color: #808; } .CodeRay .key .delimiter { color: #606; } .CodeRay .key .char { color: #80f; } .CodeRay .value { color: #088; } .CodeRay .regexp { background-color: #fff0ff; } .CodeRay .regexp .content { color: #880088; } .CodeRay .regexp .delimiter { color: #440044; } .CodeRay .regexp .modifier { color: #cc22cc; } .CodeRay .regexp .function { color: #404; font-weight: bold; } .CodeRay .string { color: #D20; } .CodeRay .string .string .string { background-color: #ffd0d0; } .CodeRay .string .content { color: #D14; } .CodeRay .string .char { color: #D14; } .CodeRay .string .delimiter { color: #D14; } .CodeRay .shell { color: #dd1144; } .CodeRay .shell .delimiter { color: #dd1144; } .CodeRay .symbol { color: #990073; } .CodeRay .symbol .content { color: #aa6600; } .CodeRay .symbol .delimiter { color: #663300; } .CodeRay .tag { color: #007700; } .CodeRay .tag-special { color: #D70; font-weight: bold; } .CodeRay .type { color: #339; font-weight: bold; } .CodeRay .variable { color: #003366; } .CodeRay .insert { background: #afa; } .CodeRay .delete { background: #faa; } .CodeRay .change { color: #aaf; background: #007; } .CodeRay .head { color: #f8f; background: #550055; } .CodeRay .insert .insert { color: #080; font-weight: bold; } .CodeRay .delete .delete { color: #800; font-weight: bold; } .CodeRay .change .change { color: #66f; } .CodeRay .head .head { color: #f4f; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hidden { display: none; visibility: hidden; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position: static; clip: auto; height: auto; width: auto; margin: 0; overflow: visible; } /* Figures, images, social media, other elements =========== */ hr { display: block; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; } /* Figures and images ==================================== */ article img { max-width: 100%; height: auto; border-width: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } .half { margin: 0 auto; width: 100%; *zoom: 1; } .half:before, .half:after { display: table; content: ""; } .half:after { clear: both; } .half:before, .half:after { display: table; content: ""; line-height: 0; } .half:after { clear: both; } .half img { display: inline; float: left; width: 50%; } .half figcaption { display: inline; float: left; width: 100%; } .third { margin: 0 auto; width: 100%; *zoom: 1; } .third:before, .third:after { display: table; content: ""; } .third:after { clear: both; } .third:before, .third:after { display: table; content: ""; line-height: 0; } .third:after { clear: both; } .third img { display: inline; float: left; width: 33.333333333333336%; } .third figcaption { display: inline; float: left; width: 100%; } /* Buttons ============================================== */ .btn { display: inline-block; margin-bottom: 20px; padding: 8px 20px; font-size: 14px; font-size: 0.875rem; background-color: #111111; color: #ffffff; border: 2px solid #111111 !important; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .btn:visited { color: #ffffff; } .btn:hover { background-color: #ffffff; color: #111111; } .btn:active { -webkit-transform: translate(0, 2px); -moz-transform: translate(0, 2px); -ms-transform: translate(0, 2px); -o-transform: translate(0, 2px); transform: translate(0, 2px); } .author-social { display: block; margin-bottom: 5px; font-size: 14px; font-size: 0.875rem; color: #111111; } .author-social:visited { color: #111111; } .author-social:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .author-social:active { -webkit-transform: translate(0, 2px); -moz-transform: translate(0, 2px); -ms-transform: translate(0, 2px); -o-transform: translate(0, 2px); transform: translate(0, 2px); } /* Well ================================================= */ .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } /* Custom set of Icomoon webfont icons ===================== */ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ .icon-instagram, .icon-facebook, .icon-twitter, .icon-google-plus, .icon-feed, .icon-feed-2, .icon-linkedin, .icon-tumblr, .icon-lastfm, .icon-mail, .icon-github { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-instagram:before { content: "\e004"; } .icon-facebook:before { content: "\e003"; } .icon-twitter:before { content: "\e007"; } .icon-google-plus:before { content: "\e00a"; } .icon-feed:before { content: "\e00b"; } .icon-feed-2:before { content: "\e00c"; } .icon-linkedin:before { content: "\e001"; } .icon-tumblr:before { content: "\e002"; } .icon-lastfm:before { content: "\e005"; } .icon-mail:before { content: "\e006"; } .icon-github:before { content: "\e000"; } /* Standard form controls ================================== */ form { margin: 0 0 5px 0; } form fieldset { margin-bottom: 5px; padding: 0; border-width: 0; } form legend { display: block; width: 100%; margin-bottom: 10px; *margin-left: -7px; padding: 0; color: #333332; border: 0; border-bottom: 1px solid #dddddd; white-space: normal; } form p { margin-bottom: 2.5px; } form ul { list-style-type: none; margin: 0 0 5px 0; padding: 0; } form br { display: none; } label, input, button, select, textarea { vertical-align: baseline; *vertical-align: middle; } input, button, select, textarea { font-family: 'PT Serif', serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } label { display: block; margin-bottom: 1.25px; font-weight: bold; color: #333332; cursor: pointer; } label input, label textarea, label select { display: block; } input, textarea, select { display: inline-block; width: 100%; padding: 4px; margin-bottom: 1.25px; background-color: #ffffff; border: 1px solid #dddddd; color: #333332; } input:hover, textarea:hover, select:hover { border-color: #919191; } .input-mini { width: 60px; } .input-small { width: 90px; } input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0 \9; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="image"] { border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input[type="button"], input[type="reset"], input[type="submit"] { width: auto; height: auto; cursor: pointer; *overflow: visible; } select, input[type="file"] { *margin-top: 4px; } select { width: auto; background-color: #ffffff; } select[multiple], select[size] { height: auto; } textarea { resize: vertical; height: auto; overflow: auto; vertical-align: top; } input[type="hidden"] { display: none; } .radio, .checkbox { padding-left: 18px; font-weight: normal; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; } .radio.inline, .checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; } /* disabled ==================================== */ input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; cursor: not-allowed; } /* focus and active ============================ */ input:focus, textarea:focus { border-color: #111111; outline: 0; outline: thin dotted \9; } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* help text ==================================== */ .help-block, .help-inline { color: #919191; } .help-block { display: block; margin-bottom: 1em; line-height: 1em; } .help-inline { display: inline-block; vertical-align: middle; padding-left: 5px; } /* .form-inline ================================= */ .form-inline input, .form-inline textarea, .form-inline select { display: inline-block; margin-bottom: 0; } .form-inline label { display: inline-block; } .form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; } /* .form-search ================================= */ .form-search input, .form-search textarea, .form-search select { display: inline-block; margin-bottom: 0; } .form-search .search-query { padding-left: 14px; padding-right: 14px; margin-bottom: 0; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } .form-search label { display: inline-block; } .form-search .radio, .form-search .checkbox, .form-inline .radio { padding-left: 0; margin-bottom: 0; vertical-align: middle; } .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"] { float: left; margin-left: 0; margin-right: 3px; } /* Page level layout styles ================================ */ body { background-color: #ffffff; font-family: 'PT Serif', serif; font-color: #333332; } .navigation-wrapper { margin: 0 auto; width: 100%; padding: 2em 0 3em; font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; text-transform: uppercase; } .site-name { margin: 0 auto; width: 100%; display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; margin-bottom: 1em; } .top-navigation { margin: 0 auto; width: 100%; display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; margin-bottom: 1em; } .top-navigation ul { list-style: none; margin: 0; padding: 0; } .top-navigation li { list-style-type: none; display: inline; margin-right: 25px; } .top-navigation li a { decoration: none; border-bottom: 0 solid transparent; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #main { counter-reset: captions; margin: 0 auto; width: 100%; *zoom: 1; clear: both; margin-top: 1em; } #main:before, #main:after { display: table; content: ""; } #main:after { clear: both; } #main:before, #main:after { display: table; content: ""; line-height: 0; } #main:after { clear: both; } #main article { margin: 0 auto; width: 100%; display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; margin-bottom: 2em; } #index { margin: 0 auto; width: 100%; display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; margin-bottom: 2em; } #index article h2 { margin-bottom: 0; } #index article p + p { text-indent: 0; } .image-wrap { position: relative; margin-bottom: 2em; } .image-wrap:after { content: " "; display: block; position: absolute; bottom: -1px; left: 8%; width: 0; height: 0; border: 20px solid transparent; border-bottom-color: #ffffff; } .image-wrap img { width: 100%; height: auto; -ms-interpolation-mode: bicubic; } .image-wrap .headline-wrap { position: absolute; bottom: 25px; margin-left: 8.333333333333334%; } .image-wrap .headline-wrap h1, .image-wrap .headline-wrap h2 { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .byline { clear: both; font-size: 80%; } .article-author-top h3, .article-author-bottom h3 { margin-bottom: 0; } .article-author-top p, .article-author-bottom p { font-size: 80%; font-style: italic; } .article-author-top a, .article-author-bottom a, .article-author-top a:hover, .article-author-bottom a:hover { border-bottom: 0 solid transparent; } .article-author-top img.bio-photo, .article-author-bottom img.bio-photo { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .article-author-top { display: none; } .article-author-bottom .bio-photo { float: left; margin-right: 25px; } .toc { display: none; font-size: 95%; -webkit-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .toc:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .toc header { background: #2b2b2b; } .toc h3 { margin: 0; padding: 5px 10px; color: #ffffff; } .toc h3:hover { cursor: pointer; } .toc ul { margin: 2px 0 0; padding: 0; background: #5e5e5e; line-height: 1; } .toc li { display: block; margin: 0; padding: 0; font-family: 'PT Sans Narrow', sans-serif; border-bottom: 1px solid #808080; } .toc li:last-child { border-bottom: 0 solid transparent; } .toc li a, .toc li a:hover { color: #ffffff; border-bottom: 0 solid transparent; } .toc li a { padding: 10px; display: block; } .toc li ul { margin: 0; border-top: 1px solid #808080; } .image-grid { *zoom: 1; list-style: none; margin: 0 0 1em; padding: 0; } .image-grid:before, .image-grid:after { display: table; content: ""; } .image-grid:after { clear: both; } .image-grid:before, .image-grid:after { display: table; content: ""; line-height: 0; } .image-grid:after { clear: both; } .image-grid li { display: inline; float: left; width: 50%; } .recent-grid { *zoom: 1; list-style: none; margin: 1em 0; } .recent-grid:before, .recent-grid:after { display: table; content: ""; } .recent-grid:after { clear: both; } .recent-grid:before, .recent-grid:after { display: table; content: ""; line-height: 0; } .recent-grid:after { clear: both; } .recent-grid li { display: inline; } .recent-grid li a { border-bottom: 0 solid transparent; } .recent-grid li a:hover { border-bottom: 0 solid transparent; } .recent-grid img { width: 19%; margin-bottom: 1%; } .holder { font-family: 'PT Sans Narrow', sans-serif; } .holder a { cursor: pointer; margin: 0 5px; } .holder a.jp-previous { margin-left: 0; margin-right: 15px; } .holder a.jp-next { margin-left: 15px; margin-right: 0; } .holder a.jp-current { font-weight: bold; } .holder a.jp-current, .holder a.jp-current:hover, .holder a.jp-disabled, .holder a.jp-disabled:hover { cursor: default; background: none; } .holder span { margin: 0 5px; } .footer-wrap { margin: 0 auto; width: 100%; *zoom: 1; clear: both; margin-top: 1em; padding-top: 2em; padding-bottom: 3em; background-color: #111111; } .footer-wrap:before, .footer-wrap:after { display: table; content: ""; } .footer-wrap:after { clear: both; } .footer-wrap:before, .footer-wrap:after { display: table; content: ""; line-height: 0; } .footer-wrap:after { clear: both; } .footer-wrap a, .footer-wrap a:active, .footer-wrap a:visited, .footer-wrap p, .footer-wrap h4, .footer-wrap h5, .footer-wrap h6 { color: #bfbfbf; } .footer-wrap a { border-bottom: 0 solid transparent; } .footer-wrap a:hover { color: #ffffff; border-bottom: 0 solid transparent; } .footer-wrap footer { display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; } .related-articles { display: inline; float: left; width: 83.33333333333334%; margin-left: 8.333333333333334%; margin-right: 8.333333333333334%; } .related-articles h4 { text-transform: uppercase; margin-bottom: 0; } .related-articles li { margin-bottom: 0; color: #ffffff; } .footer-icons li { display: inline-block; padding-right: 5px; } .footer-icons li a { color: #9a9a9a; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .footer-icons li a:hover { text-decoration: none; border-bottom: none; } .footer-icons li a:hover .icon-twitter, .footer-icons li a:hover .icon-twitter-sign { color: #2aa9df; } .footer-icons li a:hover .icon-facebook, .footer-icons li a:hover .icon-facebook-sign { color: #3a5a98; } .footer-icons li a:hover .icon-instagram, .footer-icons li a:hover .icon-instagram-sign { color: #306088; } .footer-icons li a:hover .icon-google-plus, .footer-icons li a:hover .icon-google-plus-sign { color: #b63324; } .footer-icons li a:hover .icon-lastfm, .footer-icons li a:hover .icon-lastfm-sign { color: #d80049; } .footer-icons li a:hover .icon-github { color: #4183c4; } .browser-upgrade { background: #000; margin: 0 0 2em 0; padding: 10px; text-align: center; color: #ffffff; } .browser-upgrade a { color: #ffffff; border-bottom: 1px dotted #ffffff; text-decoration: none; } .browser-upgrade a:hover { border-bottom: 1px solid #ffffff; } #goog-fixurl ul { list-style: none; margin-left: 0; padding-left: 0; } #goog-fixurl ul li { list-style-type: none; } #goog-wm-qt { width: auto; margin-right: 10px; margin-bottom: 20px; padding: 8px 20px; display: inline-block; font-size: 14px; font-size: 0.875rem; background-color: #ffffff; color: #111111; border-width: 2px !important; border-style: solid !important; border-color: #919191; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #goog-wm-sb { display: inline-block; margin-bottom: 20px; padding: 8px 20px; font-size: 14px; font-size: 0.875rem; background-color: #111111; color: #ffffff; border: 2px solid #111111 !important; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #goog-wm-sb:visited { color: #ffffff; } #goog-wm-sb:hover { background-color: #ffffff; color: #111111; } #goog-wm-sb:active { -webkit-transform: translate(0, 2px); -moz-transform: translate(0, 2px); -ms-transform: translate(0, 2px); -o-transform: translate(0, 2px); transform: translate(0, 2px); } /* jQuery Magnific-Popup =================================== */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 502; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 503; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 505; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-inline-holder .mfp-content:after, .mfp-ajax-holder .mfp-content:after { content: ''; display: block; width: auto; height: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom, .image-popup { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 504; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: white; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 506; } button.mfp-close { background: transparent; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; } .mfp-arrow { text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute; top: 0; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; background-color: #111111; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: solid transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { opacity: 0.8; border-top-width: 12px; border-bottom-width: 12px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 20px; border-bottom-width: 20px; } .mfp-arrow-left { left: 0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; border-top-left-radius: 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 12px solid #fff; left: 5px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { border-right: 20px solid #fff; } .mfp-arrow-right { right: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 5px; border-top-left-radius: 5px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 12px solid #fff; left: 3px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 20px solid #fff; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } .mfp-iframe-holder .mfp-close { top: -40px; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .mfp-figure { line-height: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } /* The shadow behind the image */ .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } } @media all and (max-width: 800px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /** * Fade-zoom animation for first dialog */ /* start state */ .mfp-fade .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .mfp-fade.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .mfp-fade.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .mfp-fade.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .mfp-fade.mfp-removing.mfp-bg { opacity: 0; } /* Print =================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; position: static !important; } @page { margin: 0.5cm; } h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; } p { orphans: 3; widows: 3; } pre, blockquote { border: 1px solid #333; page-break-inside: avoid; padding: 1em; } abbr[title]:after { content: " (" attr(title) ")"; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } img { max-width: 100% !important; page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } } /* 480px wide ============================================== */ @media only screen and (min-width: 30em) { .article-author-top, .article-author-bottom { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; } .article-author-top:hover, .article-author-bottom:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .image-grid li { width: 33.333333%; } } /* 600px wide ============================================== */ @media only screen and (min-width: 37.5em) { .site-name { display: inline; float: left; width: 16.666666666666668%; margin-left: 4.166666666666667%; margin-right: 4.166666666666667%; } .top-navigation { display: inline; float: left; width: 75%; margin-left: 0%; margin-right: 0%; } .image-wrap .headline-wrap, .image-wrap:after { left: 25%; } .image-wrap .headline-wrap { margin-left: 0; } .image-credit { display: inline; float: left; width: 75%; margin-left: 0%; margin-right: 0%; } #main article { display: inline; float: left; width: 50%; margin-left: 0%; margin-right: 0%; } #index { display: inline; float: left; width: 50%; margin-left: 0%; margin-right: 0%; } .footer-wrap footer { display: inline; float: left; width: 50%; margin-left: 25%; margin-right: 25%; } .article-author-top { display: block; display: inline; float: left; width: 16.666666666666668%; margin-left: 4.166666666666667%; margin-right: 4.166666666666667%; } .article-author-bottom { display: none; } .toc { display: block; display: inline; float: left; width: 16.666666666666668%; margin-left: 4.166666666666667%; margin-right: 4.166666666666667%; position: fixed; top: 120px; right: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .image-grid li { width: 25%; } .related-articles { display: inline; float: left; width: 50%; margin-left: 25%; margin-right: 25%; } } /* 768px wide ============================================== */ @media only screen and (min-width: 48em) { /* Image Grid ============================================== */ .image-grid li { width: 20%; } } /* 992px wide ============================================== */ @media only screen and (min-width: 62em) { .article-author-top img.bio-photo, .article-author-bottom img.bio-photo { width: 150px; height: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; } /* Image Grid ============================================== */ .image-grid li { width: 16.666666666%; } } /* 1382px wide ============================================= */ @media only screen and (min-width: 86.375em) { .site-name { display: inline; float: left; width: 12.5%; margin-left: 16.666666666666668%; } .top-navigation { display: inline; float: left; width: 66.66666666666667%; } .image-wrap:after { left: 33.333333333%; } .image-wrap .headline-wrap { margin-left: 8.333333333333334%; } .image-credit { display: inline; float: left; width: 70.83333333333334%; } #main article { display: inline; float: left; width: 37.5%; } #index { display: inline; float: left; width: 37.5%; } .related-articles { display: inline; float: left; width: 37.5%; margin-left: 33.333333333333336%; margin-right: 29.166666666666668%; } .footer-wrap footer { display: inline; float: left; width: 37.5%; margin-left: 33.333333333333336%; margin-right: 29.166666666666668%; } .article-author-top { display: inline; float: left; width: 12.5%; margin-left: 16.666666666666668%; } } /* 2x for retina displays ================================== */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { }