[class*='col-'] { min-height: 1px; padding: 1rem; float: left; position: relative; } .col-xs-1 { width: 8.33333%; } .col-xs-pull-1 { right: 8.33333%; } .col-xs-push-1 { left: 8.33333%; } .col-xs-offset-1 { margin-left: 8.33333%; } .col-xs-2 { width: 16.66667%; } .col-xs-pull-2 { right: 16.66667%; } .col-xs-push-2 { left: 16.66667%; } .col-xs-offset-2 { margin-left: 16.66667%; } .col-xs-3 { width: 25%; } .col-xs-pull-3 { right: 25%; } .col-xs-push-3 { left: 25%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-4 { width: 33.33333%; } .col-xs-pull-4 { right: 33.33333%; } .col-xs-push-4 { left: 33.33333%; } .col-xs-offset-4 { margin-left: 33.33333%; } .col-xs-5 { width: 41.66667%; } .col-xs-pull-5 { right: 41.66667%; } .col-xs-push-5 { left: 41.66667%; } .col-xs-offset-5 { margin-left: 41.66667%; } .col-xs-6 { width: 50%; } .col-xs-pull-6 { right: 50%; } .col-xs-push-6 { left: 50%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-7 { width: 58.33333%; } .col-xs-pull-7 { right: 58.33333%; } .col-xs-push-7 { left: 58.33333%; } .col-xs-offset-7 { margin-left: 58.33333%; } .col-xs-8 { width: 66.66667%; } .col-xs-pull-8 { right: 66.66667%; } .col-xs-push-8 { left: 66.66667%; } .col-xs-offset-8 { margin-left: 66.66667%; } .col-xs-9 { width: 75%; } .col-xs-pull-9 { right: 75%; } .col-xs-push-9 { left: 75%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-10 { width: 83.33333%; } .col-xs-pull-10 { right: 83.33333%; } .col-xs-push-10 { left: 83.33333%; } .col-xs-offset-10 { margin-left: 83.33333%; } .col-xs-11 { width: 91.66667%; } .col-xs-pull-11 { right: 91.66667%; } .col-xs-push-11 { left: 91.66667%; } .col-xs-offset-11 { margin-left: 91.66667%; } .col-xs-12 { width: 100%; } .col-xs-pull-12 { right: 100%; } .col-xs-push-12 { left: 100%; } .col-xs-offset-12 { margin-left: 100%; } @media screen and (min-width: 48em) { .col-sm-1 { width: 8.33333%; } .col-sm-pull-1 { right: 8.33333%; } .col-sm-push-1 { left: 8.33333%; } .col-sm-offset-1 { margin-left: 8.33333%; } .col-sm-2 { width: 16.66667%; } .col-sm-pull-2 { right: 16.66667%; } .col-sm-push-2 { left: 16.66667%; } .col-sm-offset-2 { margin-left: 16.66667%; } .col-sm-3 { width: 25%; } .col-sm-pull-3 { right: 25%; } .col-sm-push-3 { left: 25%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-4 { width: 33.33333%; } .col-sm-pull-4 { right: 33.33333%; } .col-sm-push-4 { left: 33.33333%; } .col-sm-offset-4 { margin-left: 33.33333%; } .col-sm-5 { width: 41.66667%; } .col-sm-pull-5 { right: 41.66667%; } .col-sm-push-5 { left: 41.66667%; } .col-sm-offset-5 { margin-left: 41.66667%; } .col-sm-6 { width: 50%; } .col-sm-pull-6 { right: 50%; } .col-sm-push-6 { left: 50%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-7 { width: 58.33333%; } .col-sm-pull-7 { right: 58.33333%; } .col-sm-push-7 { left: 58.33333%; } .col-sm-offset-7 { margin-left: 58.33333%; } .col-sm-8 { width: 66.66667%; } .col-sm-pull-8 { right: 66.66667%; } .col-sm-push-8 { left: 66.66667%; } .col-sm-offset-8 { margin-left: 66.66667%; } .col-sm-9 { width: 75%; } .col-sm-pull-9 { right: 75%; } .col-sm-push-9 { left: 75%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-10 { width: 83.33333%; } .col-sm-pull-10 { right: 83.33333%; } .col-sm-push-10 { left: 83.33333%; } .col-sm-offset-10 { margin-left: 83.33333%; } .col-sm-11 { width: 91.66667%; } .col-sm-pull-11 { right: 91.66667%; } .col-sm-push-11 { left: 91.66667%; } .col-sm-offset-11 { margin-left: 91.66667%; } .col-sm-12 { width: 100%; } .col-sm-pull-12 { right: 100%; } .col-sm-push-12 { left: 100%; } .col-sm-offset-12 { margin-left: 100%; } } @media screen and (min-width: 64em) { .col-md-1 { width: 8.33333%; } .col-md-pull-1 { right: 8.33333%; } .col-md-push-1 { left: 8.33333%; } .col-md-offset-1 { margin-left: 8.33333%; } .col-md-2 { width: 16.66667%; } .col-md-pull-2 { right: 16.66667%; } .col-md-push-2 { left: 16.66667%; } .col-md-offset-2 { margin-left: 16.66667%; } .col-md-3 { width: 25%; } .col-md-pull-3 { right: 25%; } .col-md-push-3 { left: 25%; } .col-md-offset-3 { margin-left: 25%; } .col-md-4 { width: 33.33333%; } .col-md-pull-4 { right: 33.33333%; } .col-md-push-4 { left: 33.33333%; } .col-md-offset-4 { margin-left: 33.33333%; } .col-md-5 { width: 41.66667%; } .col-md-pull-5 { right: 41.66667%; } .col-md-push-5 { left: 41.66667%; } .col-md-offset-5 { margin-left: 41.66667%; } .col-md-6 { width: 50%; } .col-md-pull-6 { right: 50%; } .col-md-push-6 { left: 50%; } .col-md-offset-6 { margin-left: 50%; } .col-md-7 { width: 58.33333%; } .col-md-pull-7 { right: 58.33333%; } .col-md-push-7 { left: 58.33333%; } .col-md-offset-7 { margin-left: 58.33333%; } .col-md-8 { width: 66.66667%; } .col-md-pull-8 { right: 66.66667%; } .col-md-push-8 { left: 66.66667%; } .col-md-offset-8 { margin-left: 66.66667%; } .col-md-9 { width: 75%; } .col-md-pull-9 { right: 75%; } .col-md-push-9 { left: 75%; } .col-md-offset-9 { margin-left: 75%; } .col-md-10 { width: 83.33333%; } .col-md-pull-10 { right: 83.33333%; } .col-md-push-10 { left: 83.33333%; } .col-md-offset-10 { margin-left: 83.33333%; } .col-md-11 { width: 91.66667%; } .col-md-pull-11 { right: 91.66667%; } .col-md-push-11 { left: 91.66667%; } .col-md-offset-11 { margin-left: 91.66667%; } .col-md-12 { width: 100%; } .col-md-pull-12 { right: 100%; } .col-md-push-12 { left: 100%; } .col-md-offset-12 { margin-left: 100%; } } @media screen and (min-width: 84em) { .col-lg-1 { width: 8.33333%; } .col-lg-pull-1 { right: 8.33333%; } .col-lg-push-1 { left: 8.33333%; } .col-lg-offset-1 { margin-left: 8.33333%; } .col-lg-2 { width: 16.66667%; } .col-lg-pull-2 { right: 16.66667%; } .col-lg-push-2 { left: 16.66667%; } .col-lg-offset-2 { margin-left: 16.66667%; } .col-lg-3 { width: 25%; } .col-lg-pull-3 { right: 25%; } .col-lg-push-3 { left: 25%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-4 { width: 33.33333%; } .col-lg-pull-4 { right: 33.33333%; } .col-lg-push-4 { left: 33.33333%; } .col-lg-offset-4 { margin-left: 33.33333%; } .col-lg-5 { width: 41.66667%; } .col-lg-pull-5 { right: 41.66667%; } .col-lg-push-5 { left: 41.66667%; } .col-lg-offset-5 { margin-left: 41.66667%; } .col-lg-6 { width: 50%; } .col-lg-pull-6 { right: 50%; } .col-lg-push-6 { left: 50%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-7 { width: 58.33333%; } .col-lg-pull-7 { right: 58.33333%; } .col-lg-push-7 { left: 58.33333%; } .col-lg-offset-7 { margin-left: 58.33333%; } .col-lg-8 { width: 66.66667%; } .col-lg-pull-8 { right: 66.66667%; } .col-lg-push-8 { left: 66.66667%; } .col-lg-offset-8 { margin-left: 66.66667%; } .col-lg-9 { width: 75%; } .col-lg-pull-9 { right: 75%; } .col-lg-push-9 { left: 75%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-10 { width: 83.33333%; } .col-lg-pull-10 { right: 83.33333%; } .col-lg-push-10 { left: 83.33333%; } .col-lg-offset-10 { margin-left: 83.33333%; } .col-lg-11 { width: 91.66667%; } .col-lg-pull-11 { right: 91.66667%; } .col-lg-push-11 { left: 91.66667%; } .col-lg-offset-11 { margin-left: 91.66667%; } .col-lg-12 { width: 100%; } .col-lg-pull-12 { right: 100%; } .col-lg-push-12 { left: 100%; } .col-lg-offset-12 { margin-left: 100%; } }/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in IE and iOS. */ *, ::before, ::after { box-sizing: border-box; } /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /** * Print */ @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300); body { font-family: 'Open Sans', Arial, sans-serif; color: rgba(44,44,44,1); padding-top: 0; background: #e7e5e4; } img { max-width: 100%; } ul { padding-left: 1.5rem; } li { line-height: 1.75; list-style-type: none; } li:before { content: '\2605'; margin-right: 10px; border-bottom: none; display: block; float: left; } a { color: rgba(255, 127, 80, 1); text-decoration: none; border-bottom: 1px solid; } em { font-size: 0.875rem; font-weight: 300; } .content { overflow: hidden; } .page-wrap { max-width: 60rem; margin: 0 auto; } .header { background-color: #666666; } figcaption { display: none; } .caption { display: none; } .header:after { content: ''; display: block; height: calc((1rem + (1.25 - 1) * (100vw - 20em) / (75 - 20)) / 3); background-color: #a1cee7; background-image: repeating-linear-gradient(-30deg, #a1cee7, #a1cee7 10px, #edf3f8 10px, #edf3f8 20px, #a0a3a7 20px, #a0a3a7 30px /* determines size */); box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2); } .header--haz:after { background-color: #feed9b; background-image: repeating-linear-gradient(-30deg, #feed9b, #feed9b 10px, #a0a3a7 10px, #a0a3a7 20px, #edf3f8 20px, #edf3f8 30px, #a0a3a7 30px, #a0a3a7 40px /* determines size */); } body:after { height: calc((1rem + (1.25 - 1) * (100vw - 20em) / (75 - 20)) / 2); box-shadow: none; } .header-wrapper { display: flex; flex-direction: column; align-items: center; } .gsc-control-cse { background: #666; border: 0; } @media screen and (min-width: 730px) { .header-wrapper { flex-direction: row; justify-content: space-between; } } .header-wrapper img { max-width: 360px; } h1[data-label] { font-family: 'Open Sans', Arial, sans-serif; color: #555; text-decoration: none; text-transform: uppercase; font-weight: 800; letter-spacing: -2px; text-shadow: 3px 3px 0px #e7e5e4, 6px 6px 0px rgba(0, 0, 0, 0.2); position: relative; } h2, h3 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-weight: 300; text-transform: uppercase; background-color: #d6d6d6; letter-spacing: .05em; text-shadow: 2px 2px 0px #d6d6d6, 4px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 4px 0px rgba(0,0,0,0.15); padding: 0.5rem; } h2 { color: #555; font-size: 2rem; line-height: 2rem; margin-top: calc((1rem - 1.5rem) + 1.5rem * 2); } h3 { text-shadow: 1px 1px 0px #d6d6d6, 3px 3px 0px rgba(0, 0, 0, 0.2); } .goToTheTop { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; padding: 0 5px; float: right; border: 1px solid rgba(70,130,180,0.3); background-color: rgba(255,255,255,0.6); color: rgba(70,130,180,0.7); transition-duration: 0.2s; transition-property: color, border, background-color; transition-timing-function: ease-out; } .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .goToTheTop:hover { cursor: pointer; color: rgba(70,130,180,1); border: 1px solid rgba(70,130,180,0.6); background-color: rgba(255,255,255,0.9); } .goToTheTop:before { content: '\2191'; margin-right: 5px; position: relative; top: -2px; font-size: 1.25rem; } #TOC { background: rgba(70,130,180,0.1); border: 1px solid rgba(70, 130, 180, 0.2); margin: 1rem 0; } #TOC ul { list-style-type: none; padding-left: 0; } #TOC li { font-size: 0.925rem; line-height: 1.85; padding: 0 0.75rem; } #TOC li:before { content: ''; } #TOC li a { color: rgba(62, 115, 158,1); display: block; padding-left: 0.5rem; border-bottom: 0; } #TOC li a:hover { background: rgba(70,130,180,0.05); color: rgba(255, 127, 80, 1); } #TOC .toc > ul:nth-child(2) > li > a { display: none; } #TOC li.nav-header { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; color: rgba(85, 85, 85, 1); } .main-content p { overflow: hidden; } .controls-wrapper { max-width: 360px; display: flex; align-items: center; } .print-btn { display: none; } @media screen and (min-width: 730px) { .print-btn { display: block; cursor: pointer; } } .home-btn { border-bottom: 0; margin: 0 0.5rem 0 1rem; } input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { box-sizing: content-box; } /** * Navigation */ aside { margin-top: 0; } @media screen and (min-width: 64em) { aside { margin-top: calc((1.5rem - 3rem) + 1.5rem*6); } } aside ul { padding: 0; margin: 0; } header { margin-right: auto; margin-left: auto; /*max-width: 22.5rem;*/ border: 1px solid #c3c3c3; border-bottom: 0; box-shadow: 0 1px 5px 0px rgba(0,0,0,0.15); } /** * Styling top level items */ .nav a, .nav label { padding: 0.5rem; display: block; font-size: 0.75rem; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-weight: 300; text-transform: uppercase; color: #555; border-bottom: 1px solid #c3c3c3; background-color: #d6d6d6; -webkit-transition-property: color, background; transition-property: color, background; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgb(231, 229, 228); background: rgb(85, 85, 85); } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2rem; background: rgb(195, 195, 195); border-bottom: 1px solid rgb(183, 183, 183); } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: rgba(85, 85, 85, 1); } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 4rem; background: rgb(181, 181, 181); border-bottom: 1px solid rgb(169, 169, 169); text-transform: initial; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: rgba(64, 64, 64, 1); } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; box-shadow: inset 0 -1px #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; } /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list li:before { content: initial; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 4000px; } /** * Rotating chevron icon */ .fa.fa-angle-right { text-shadow: 1px 1px 0px #d6d6d6, 3px 3px 0px rgba(0, 0, 0, 0.2); } label > span { float: right; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } @media print { .header, .goToTheTop, aside, iframe { display: none; } h1 { text-shadow: none !important; } h1:after { content: '' !important; } } @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300); body { font-family: 'Open Sans', Arial, sans-serif; color: rgba(44,44,44,1); padding-top: 0; background: #e7e5e4; } img { max-width: 100%; } ul { padding-left: 1.5rem; } li { line-height: 1.75; list-style-type: none; } li:before { content: '\2605'; margin-right: 10px; border-bottom: none; display: block; float: left; } a { color: rgba(255, 127, 80, 1); text-decoration: none; border-bottom: 1px solid; } em { font-size: 0.875rem; font-weight: 300; } .content { overflow: hidden; } .page-wrap { max-width: 60rem; margin: 0 auto; } .header { background-color: #666666; } figcaption { display: none; } .caption { display: none; } .header:after { content: ''; display: block; height: calc((1rem + (1.25 - 1) * (100vw - 20em) / (75 - 20)) / 3); background-color: #a1cee7; background-image: repeating-linear-gradient(-30deg, #a1cee7, #a1cee7 10px, #edf3f8 10px, #edf3f8 20px, #a0a3a7 20px, #a0a3a7 30px /* determines size */); box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2); } .header--haz:after { background-color: #feed9b; background-image: repeating-linear-gradient(-30deg, #feed9b, #feed9b 10px, #a0a3a7 10px, #a0a3a7 20px, #edf3f8 20px, #edf3f8 30px, #a0a3a7 30px, #a0a3a7 40px /* determines size */); } body:after { height: calc((1rem + (1.25 - 1) * (100vw - 20em) / (75 - 20)) / 2); box-shadow: none; } .header-wrapper { display: flex; flex-direction: column; align-items: center; } .gsc-control-cse { background: #666; border: 0; } @media screen and (min-width: 730px) { .header-wrapper { flex-direction: row; justify-content: space-between; } } .header-wrapper img { max-width: 360px; } h1[data-label] { font-family: 'Open Sans', Arial, sans-serif; color: #555; text-decoration: none; text-transform: uppercase; font-weight: 800; letter-spacing: -2px; text-shadow: 3px 3px 0px #e7e5e4, 6px 6px 0px rgba(0, 0, 0, 0.2); position: relative; } h2, h3 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-weight: 300; text-transform: uppercase; background-color: #d6d6d6; letter-spacing: .05em; text-shadow: 2px 2px 0px #d6d6d6, 4px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 4px 0px rgba(0,0,0,0.15); padding: 0.5rem; } h2 { color: #555; font-size: 2rem; line-height: 2rem; margin-top: calc((1rem - 1.5rem) + 1.5rem * 2); } h3 { text-shadow: 1px 1px 0px #d6d6d6, 3px 3px 0px rgba(0, 0, 0, 0.2); } .goToTheTop { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; padding: 0 5px; float: right; border: 1px solid rgba(70,130,180,0.3); background-color: rgba(255,255,255,0.6); color: rgba(70,130,180,0.7); transition-duration: 0.2s; transition-property: color, border, background-color; transition-timing-function: ease-out; } .videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .goToTheTop:hover { cursor: pointer; color: rgba(70,130,180,1); border: 1px solid rgba(70,130,180,0.6); background-color: rgba(255,255,255,0.9); } .goToTheTop:before { content: '\2191'; margin-right: 5px; position: relative; top: -2px; font-size: 1.25rem; } #TOC { background: rgba(70,130,180,0.1); border: 1px solid rgba(70, 130, 180, 0.2); margin: 1rem 0; } #TOC ul { list-style-type: none; padding-left: 0; } #TOC li { font-size: 0.925rem; line-height: 1.85; padding: 0 0.75rem; } #TOC li:before { content: ''; } #TOC li a { color: rgba(62, 115, 158,1); display: block; padding-left: 0.5rem; border-bottom: 0; } #TOC li a:hover { background: rgba(70,130,180,0.05); color: rgba(255, 127, 80, 1); } #TOC .toc > ul:nth-child(2) > li > a { display: none; } #TOC li.nav-header { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; color: rgba(85, 85, 85, 1); } .main-content p { overflow: hidden; } .controls-wrapper { max-width: 360px; display: flex; align-items: center; } .print-btn { display: none; } @media screen and (min-width: 730px) { .print-btn { display: block; cursor: pointer; } } .home-btn { border-bottom: 0; margin: 0 0.5rem 0 1rem; } input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { box-sizing: content-box; } /** * Navigation */ aside { margin-top: 0; } @media screen and (min-width: 64em) { aside { margin-top: calc((1.5rem - 3rem) + 1.5rem*6); } } aside ul { padding: 0; margin: 0; } header { margin-right: auto; margin-left: auto; /*max-width: 22.5rem;*/ border: 1px solid #c3c3c3; border-bottom: 0; box-shadow: 0 1px 5px 0px rgba(0,0,0,0.15); } /** * Styling top level items */ .nav a, .nav label { padding: 0.5rem; display: block; font-size: 0.75rem; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-weight: 300; text-transform: uppercase; color: #555; border-bottom: 1px solid #c3c3c3; background-color: #d6d6d6; -webkit-transition-property: color, background; transition-property: color, background; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgb(231, 229, 228); background: rgb(85, 85, 85); } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2rem; background: rgb(195, 195, 195); border-bottom: 1px solid rgb(183, 183, 183); } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: rgba(85, 85, 85, 1); } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 4rem; background: rgb(181, 181, 181); border-bottom: 1px solid rgb(169, 169, 169); text-transform: initial; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: rgba(64, 64, 64, 1); } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; box-shadow: inset 0 -1px #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; } /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list li:before { content: initial; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 4000px; } /** * Rotating chevron icon */ .fa.fa-angle-right { text-shadow: 1px 1px 0px #d6d6d6, 3px 3px 0px rgba(0, 0, 0, 0.2); } label > span { float: right; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } @media print { .header, .goToTheTop, aside, iframe { display: none; } h1 { text-shadow: none !important; } h1:after { content: '' !important; } } html { box-sizing: border-box; height: 100%; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fluid Typography - https://www.smashingmagazine.com/2016/05/fluid-typography/ */ @media screen and (min-width: 20em) { html { /* Formula - #{$property}: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * (100vw - #{$min-screen-size}) / #{strip-unit($max-screen-size - $min-screen-size)}); */ font-size: calc(1em + (1.25 - 1) * (100vw - 20em) / (75 - 20)); } } @media screen and (min-width: 75em) { html { font-size: 1.25em; } } /* Modular Scale */ h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0.5rem 0; line-height: 1.5; } h1 { font-size: 1.29616rem; } h2 { font-size: 1.21477rem; } h3 { font-size: 1.13849rem; } h4 { font-size: 1.067rem; } h5 { font-size: 1rem; } h6 { font-size: 0.93721rem; } h1 { font-size: 1.29616rem; } @media screen and (min-width: 37.5rem) { h1 { font-size: calc(1.29616rem + 1.86118 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h1 { font-size: 3.15733rem; } } h2 { font-size: 1.21477rem; } @media screen and (min-width: 37.5rem) { h2 { font-size: calc(1.21477rem + 1.15383 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h2 { font-size: 2.36859rem; } } h3 { font-size: 1.13849rem; } @media screen and (min-width: 37.5rem) { h3 { font-size: calc(1.13849rem + 0.6384 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h3 { font-size: 1.77689rem; } } h4 { font-size: 1.067rem; } @media screen and (min-width: 37.5rem) { h4 { font-size: calc(1.067rem + 0.266 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h4 { font-size: 1.333rem; } } h5 { font-size: 1rem; } @media screen and (min-width: 37.5rem) { h5 { font-size: calc(1rem + 0 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h5 { font-size: 1rem; } } h6 { font-size: 0.93721rem; } @media screen and (min-width: 37.5rem) { h6 { font-size: calc(0.93721rem + -0.18702 * ((100vw - 37.5rem) / 42.5)); } } @media screen and (min-width: 80rem) { h6 { font-size: 0.75019rem; } } /* End of Modular Scale */ /* Vertical Rhythm */ p { line-height: 1.5rem; margin-bottom: 1.5rem; } h1 { font-size: 3em; line-height: 1; } h1, h2, h3, h4, h5 { font-weight: 700; margin-bottom: 1.5rem; } h1 { font-size: 3rem; line-height: 3rem; margin-top: calc((1.5rem - 3rem) + 1.5rem*3); } h2 { font-size: 1.5rem; line-height: 1.5rem; padding: 0.25rem; margin-top: calc((1rem - 1.5rem) + 1.5rem*2); } h3 { font-size: 1.25rem; line-height: 1.25rem; padding: 0.25rem; margin-top: calc((1.5rem - 1.25rem) + 1.5rem*2); } h4 { font-size: 1rem; line-height: 1rem; padding: 0.125rem; margin-top: calc((1.5rem - 1rem) + 1.5rem*2); } h5 { font-size: 0.875rem; line-height: 0.875rem; margin-top: calc((1.5rem - 0.875rem) + 1.5rem*2); } /* End of Vertical Rhythm */ /* End of Fluid Typography */