/* 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-wrap; } /** * 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; } .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; } /* Typeplate.com typographic starter pack ================== */ /*! +---------------------------------------------------------------------+ | _ _ _ | | | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ | | | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ | | | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ | | \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| | | |___/ |_| |_| | | | | | | URL: http://typeplate.com | | VERSION: 1.0.1 | | Github: https://github.com/typePlate/typeplate.github.com | | AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) | | LICENSE: Creative Commmons | | http://creativecommons.org/licenses/by/3.0 | | | +---------------------------------------------------------------------+ */ @font-face { font-family: "Ampersand"; src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua"); unicode-range: U+270C; } @font-face { font-family: "Ampersand"; src: local("Georgia"); unicode-range: U+270C; } .ampersand-placeholder { font-family: Verdana, sans-serif; } .breakword { word-wrap: break-word; } .normal-wrap { word-wrap: normal; } .inherit-wrap { word-wrap: auto; } /** * Dropcap Sass @include * Use the following Sass @include with any selector you feel necessary. * @include dropcap(@float: left, @font-size: 4em, @font-family: inherit, @text-indent: 0, @margin: inherit, @padding: inherit, @color: inherit, @lineHeight: 1, @bg: transparent); * * Extend this object into your custom stylesheet. * */ .drop-cap:first-letter { float: left; margin: inherit; padding: inherit; font-size: 4em; font-family: inherit; line-height: 1; text-indent: 0; background: transparent; color: inherit; } html { font: normal 112.5%/1.65 serif; } body { word-wrap: normal; color: #333332; } .tera { font-size: 117px; font-size: 6.5rem; margin-bottom: 0.25384615384615383rem; } .giga { font-size: 90px; font-size: 5rem; margin-bottom: 0.33rem; } .mega { font-size: 72px; font-size: 4rem; margin-bottom: 0.4125rem; } .alpha { font-size: 60px; font-size: 3.3333333333333335rem; margin-bottom: 0.495rem; } .beta { font-size: 48px; font-size: 2.6666666666666665rem; margin-bottom: 0.61875rem; } .gamma { font-size: 36px; font-size: 2rem; margin-bottom: 0.825rem; } .delta { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; } .epsilon { font-size: 21px; font-size: 1.1666666666666667rem; margin-bottom: 1.4142857142857141rem; } .zeta { font-size: 18px; font-size: 1rem; margin-bottom: 1.65rem; } h1 { font-size: 60px; font-size: 3.3333333333333335rem; margin-bottom: 0.495rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } h2 { font-size: 48px; font-size: 2.6666666666666665rem; margin-bottom: 0.61875rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } h3 { font-size: 36px; font-size: 2rem; margin-bottom: 0.825rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } h4 { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } h5 { font-size: 21px; font-size: 1.1666666666666667rem; margin-bottom: 1.4142857142857141rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } h6 { font-size: 18px; font-size: 1rem; margin-bottom: 1.65rem; text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } p { margin: 0 0 1.5em; } p + p { text-indent: 1.5em; margin-top: -1.5em; } abbr, acronym, blockquote, code, dir, kbd, listing, plaintext, q, samp, tt, var, xmp { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none; } pre code { word-wrap: normal; white-space: -moz-pre-wrap; white-space: pre-wrap; } pre { white-space: pre; } code { white-space: pre; font-family: monospace; } /** * Abbreviations Markup * HMTL * * Extend this object into your markup. * */ abbr { font-variant: small-caps; font-weight: 400; text-transform: lowercase; color: #333332; } abbr:hover { cursor: help; } h1, h2, h3, h4, h5, h6 { color: #333332; } /** * Lining Definition Style Markup *
* * Extend this object into your markup. * */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; } .lining dd + dd:before { content: ", "; } .lining dd:before { content: ": "; margin-left: -0.2rem; } /** * Dictionary Definition Style Markup *
* * Extend this object into your markup. * */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt + dt:before { content: ", "; margin-left: -0.2rem; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions, decimal) ". "; } /** * Stats Tab Markup * * * Extend this object into your markup. * */ .stats-tabs { padding: 0; } .stats-tabs li { display: inline-block; margin: 0 0.625rem 0 0; padding: 0 0.625rem 0 0; border-right: 0.125rem solid #cccccc; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 1.5rem; font-weight: bold; } .stats-tabs li a b { display: block; margin: 0.125rem 0 0 0; font-size: 0.875rem; font-weight: normal; } /** * Blockquote Markup *

″″

* * Extend this object into your markup. * */ .cite { display: block; font-size: 0.875em; text-align: right; } /** * Pull Quotes Markup * * * Extend this object into your custom stylesheet. * */ .pull-quote { position: relative; padding: 1em; } .pull-quote:before, .pull-quote:after { height: 1em; opacity: 0.15; position: absolute; font-size: 4em; } .pull-quote:before { content: '“'; top: 0em; left: 0em; } .pull-quote:after { content: '”'; bottom: 0em; right: 0em; } /** * Figures Markup *
Fig. 4.2 | Type Anatomy, an excerpt from Mark Boulton's book"Designing for the Web"
* * Extend this object into your markup. * */ /** * Footnote Markup : Replace 'X' with your unique number for each footnote *

* * Extend this object into your markup. * */ /* Headings ============================================== */ h1, h2, h3, h4, h5, h6 { font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; } h6 { font-weight: 400; } /* Links ================================================= */ a { text-decoration: none; color: #343434; } a:visited { color: #4e4e4e; } a:hover { color: #1a1a1a; } a:focus { outline: thin dotted; color: #343434; } a:hover, a:active { outline: 0; } b, strong { font-weight: 700; } /* Lists ============================================== */ ul li { list-style-type: square; } ol li { list-style-type: upper-roman; } /* Add underline for main links ======================= */ p > a, li > a, em > a, a > em, footer a { text-decoration: none; border-bottom: 1px dotted #b3b3b1; } p > a:hover, li > a:hover, em > a:hover, footer a:hover { text-decoration: none; border-bottom: 1px solid #b3b3b1; } /* Figure caption ===================================== */ figcaption { margin-top: 0.75em; line-height: 1.25; font-size: 18px; font-size: 1rem; margin-bottom: 1.65rem; font-family: 'PT Sans Narrow', sans-serif; counter-increment: captions; } figcaption:before { font-weight: 700; text-transform: uppercase; content: "Figure " counter(captions) ": "; } /* Notice ============================================== */ .notice { margin-top: 1.5em; padding: .5em 1em; text-indent: 0; font-size: 90%; background-color: #ddd; border-left: 10px solid #ccc; } /* Blockquote =========================================== */ blockquote { font-style: italic; margin-left: 0; padding-left: 1em; border-left: 10px solid #ccc; } blockquote p + p { text-indent: 0; margin-top: 0; } /* Footnotes ============================================= */ .footnotes { font-size: 90%; } /* Pygments Syntax highlighting ============================= */ .highlight { background-color: #efefef; font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 80%; color: #333332; margin-bottom: 1.5em; } .highlight pre { margin: 0px; padding: 1em; } .hll { background-color: #ffffcc; } .c { color: #999988; font-style: italic; } /* Comment */ .err { color: #a61717; background-color: #e3d2d2; } /* Error */ .k { color: #000000; font-weight: bold; } /* Keyword */ .o { color: #000000; font-weight: bold; } /* Operator */ .cm { color: #999988; font-style: italic; } /* Comment.Multiline */ .cp { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Preproc */ .c1 { color: #999988; font-style: italic; } /* Comment.Single */ .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */ .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .ge { color: #000000; font-style: italic; } /* Generic.Emph */ .gr { color: #aa0000; } /* Generic.Error */ .gh { color: #999999; } /* Generic.Heading */ .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .go { color: #888888; } /* Generic.Output */ .gp { color: #555555; } /* Generic.Prompt */ .gs { font-weight: bold; } /* Generic.Strong */ .gu { color: #aaaaaa; } /* Generic.Subheading */ .gt { color: #aa0000; } /* Generic.Traceback */ .kc { color: #000000; font-weight: bold; } /* Keyword.Constant */ .kd { color: #000000; font-weight: bold; } /* Keyword.Declaration */ .kn { color: #000000; font-weight: bold; } /* Keyword.Namespace */ .kp { color: #000000; font-weight: bold; } /* Keyword.Pseudo */ .kr { color: #000000; font-weight: bold; } /* Keyword.Reserved */ .kt { color: #445588; font-weight: bold; } /* Keyword.Type */ .m { color: #009999; } /* Literal.Number */ .s { color: #d01040; } /* Literal.String */ .na { color: #008080; } /* Name.Attribute */ .nb { color: #0086b3; } /* Name.Builtin */ .nc { color: #445588; font-weight: bold; } /* Name.Class */ .no { color: #008080; } /* Name.Constant */ .nd { color: #3c5d5d; font-weight: bold; } /* Name.Decorator */ .ni { color: #800080; } /* Name.Entity */ .ne { color: #990000; font-weight: bold; } /* Name.Exception */ .nf { color: #990000; font-weight: bold; } /* Name.Function */ .nl { color: #990000; font-weight: bold; } /* Name.Label */ .nn { color: #555555; } /* Name.Namespace */ .nt { color: #000080; } /* Name.Tag */ .nv { color: #008080; } /* Name.Variable */ .ow { color: #000000; font-weight: bold; } /* Operator.Word */ .w { color: #bbbbbb; } /* Text.Whitespace */ .mf { color: #009999; } /* Literal.Number.Float */ .mh { color: #009999; } /* Literal.Number.Hex */ .mi { color: #009999; } /* Literal.Number.Integer */ .mo { color: #009999; } /* Literal.Number.Oct */ .sb { color: #d01040; } /* Literal.String.Backtick */ .sc { color: #d01040; } /* Literal.String.Char */ .sd { color: #d01040; } /* Literal.String.Doc */ .s2 { color: #d01040; } /* Literal.String.Double */ .se { color: #d01040; } /* Literal.String.Escape */ .sh { color: #d01040; } /* Literal.String.Heredoc */ .si { color: #d01040; } /* Literal.String.Interpol */ .sx { color: #d01040; } /* Literal.String.Other */ .sr { color: #009926; } /* Literal.String.Regex */ .s1 { color: #d01040; } /* Literal.String.Single */ .ss { color: #990073; } /* Literal.String.Symbol */ .bp { color: #999999; } /* Name.Builtin.Pseudo */ .vc { color: #008080; } /* Name.Variable.Class */ .vg { color: #008080; } /* Name.Variable.Global */ .vi { color: #008080; } /* Name.Variable.Instance */ .il { color: #009999; } /* Literal.Number.Integer.Long *//* Gradients ============================================= */ /* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */ /* .rounded(VALUE); ====================================== */ /* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */ /* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */ /* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */ /* .text-shadow(); ======================================== */ /* .opacity(VALUE); ======================================= */ /* .rotate(VALUEdeg); ===================================== */ /* .scale(VALUE); ========================================= */ /* .skew(VALUE, VALUE); =================================== */ /* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ /* .translate(VALUE, VALUE) =============================== */ /* .background-alpha(VALUE VALUE); ======================== */ /* .background-size(VALUE VALUE); ========================= */ /* .background-clip(VALUE); (border-box, padding-box, content-box) */ /* .box-sizing(VALUE); (border-box, padding-box, content-box) */ /* Contain floats ========================================= */ /* For image replacement ================================== */ /* Hide from visual and speaking browsers ================= */ .hidden { display: none; visibility: hidden; } /* Hide but maintain layout =============================== */ /* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ /* .userselect(VALUE) (all, element, none, text) ========== */ /* Hidden but available to speaking browsers ============== */ /* Make visuallyhidden focusable with a keyboard ========== */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position: static; clip: auto; height: auto; width: auto; margin: 0; overflow: visible; } /* Responsive visibility utilities =================================== */ /* For desktops =========================================== */ .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } /* Mobile phones only =====================================*/ @media (max-width: 767px) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } /* Tablets & small desktops only ========================== */ @media (min-width: 768px) and (max-width: 979px) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } } /* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */ /* 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 { content: ""; display: table; } .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 { content: ""; display: table; } .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; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 12px; margin-bottom: 2em; line-height: 1; text-align: center; text-transform: uppercase; vertical-align: middle; border: 4px double #333332; cursor: pointer; *margin-left: .3em; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; } .btn:visited { border: 4px double #4e4e4e; } .btn:hover { border: 4px double #1a1a1a; } .btn:first-child { *margin-left: 0; } .btn-inverse { border: 4px double #ffffff; color: #ffffff; background-color: #000000; } .btn-inverse:visited { color: #ffffff; border-color: #ffffff; } .btn-inverse:hover { color: #ffffff; border-color: #ffffff; } /* 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; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.svg#icomoon') format('svg'); } } /* 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-twitter, .icon-feed, .icon-instagram, .icon-facebook, .icon-google-plus, .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-twitter:before { content: "\e000"; } .icon-feed:before { content: "\e003"; } .icon-instagram:before { content: "\e004"; } .icon-facebook:before { content: "\e001"; } .icon-google-plus:before { content: "\e002"; } .icon-github:before { content: "\e005"; } /* 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 #cccccc; 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 #cccccc; color: #333332; } input:hover, textarea:hover, select:hover { border-color: #808080; } .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: #000000; 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: #808080; } .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 ================================ */ html { background: #ebebeb url(../img/background-light.jpg); font-family: 'PT Serif', serif; font-color: #333332; font-size: 90%; } .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:after { content: "."; } .top-navigation li a { decoration: none; border-bottom: 0 solid transparent; } #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 { content: ""; display: table; } #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 { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; 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: #ebebeb; } .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); } .headline-wrap h1 { font-size: 48px; font-size: 2.6666666666666665rem; margin-bottom: 0.61875rem; } .headline-wrap h2 { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; text-transform: uppercase; } .article-wrap h2 { font-size: 36px; font-size: 2rem; margin-bottom: 0.825rem; } .article-wrap h3 { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; } .byline { clear: both; font-size: 80%; } .article-author-top h4, .article-author-bottom h4 { margin-bottom: 0.5em; } .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 { -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: #1a1a1a; } .toc h3 { margin: 0; padding: 5px 10px; color: #ffffff; } .toc h3:hover { cursor: pointer; } .toc ul { margin: 2px 0 0; padding: 0; background: #4d4d4d; 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 { content: ""; display: table; } .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 { content: ""; display: table; } .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: #000000 url(../img/background-dark.png); } .footer-wrap:before, .footer-wrap:after { display: table; content: ""; } .footer-wrap:after { clear: both; } .footer-wrap:before, .footer-wrap:after { content: ""; display: table; } .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 { font-size: 21px; font-size: 1.1666666666666667rem; margin-bottom: 1.4142857142857141rem; 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 { font-size: 24px; font-size: 1.3333333333333332rem; margin-bottom: 1.2375rem; 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; } .chrome-frame { background: #000; margin: 0 0 2em 0; padding: 10px; text-align: center; color: #ffffff; } .chrome-frame a { color: #ffffff; border-bottom: 1px dotted #ffffff; text-decoration: none; } .chrome-frame a:hover { border-bottom: 1px solid #ffffff; } /* 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-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; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 506; } 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: #000000; -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 white; left: 5px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { border-right: 20px solid white; } .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 white; left: 3px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 20px solid white; } .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; top: -3px; 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: -43px; } /* 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) { .image-grid li { width: 33.333333%; } } /* 600px wide ============================================== */ @media only screen and (min-width: 37.5em) { html { font-size: 95%; } .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 { margin-left: 25%; } .image-wrap:after { left: 25%; } #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) { html { font-size: 100%; } /* Image Grid ============================================== */ .image-grid li { width: 20%; } } /* 992px wide ============================================== */ @media only screen and (min-width: 62em) { html { font-size: 112.5%; } /* 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 img { display: inline; float: left; width: 66.66666666666667%; margin-left: 16.666666666666668%; margin-right: 16.666666666666668%; margin-top: 1em; margin-bottom: 2em; } .image-wrap:after { left: 33.333333333%; } .image-wrap .headline-wrap { margin-left: 33.333333333333336%; } #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) { }