Created
July 30, 2023 09:03
-
-
Save WynterAC/0bd1f7ae219252b03e3608949e39a9a5 to your computer and use it in GitHub Desktop.
DT CSS Centrion with float and TOC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-size: 100%; | |
| font-family: Helvetica Neue, sans-serif; | |
| font-weight: 200; | |
| line-height: 1.7em; | |
| padding: 1em; | |
| margin: auto; | |
| max-width: 42em; | |
| } | |
| .TOC { | |
| position: static; | |
| top: 3ch; | |
| bottom: 3ch; | |
| background-color: #fefefe; | |
| padding: 0.8em; | |
| border: 1px solid #ffffff; | |
| } | |
| /* The text of the table of content | |
| Use a slightly smaller font | |
| */ | |
| .TOC ul { | |
| font-size: 0.85em; | |
| font-family: "Helvetica Neue", sans-serif; | |
| font-weight: 180; | |
| } | |
| /* Add a heading to the table of content | |
| heading is "Table of content" | |
| same font as for headlines (see below) | |
| */ | |
| .TOC::before { | |
| content: "Table of Content"; | |
| font-family: “Helvetica Neue”, sans serif; | |
| font-size: 1em; | |
| font-weight: 250; | |
| } | |
| html { | |
| font-family: Arial Unicode MS, sans-serif; | |
| -webkit-text-size-adjust: 100%; | |
| -moz-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 20; | |
| } | |
| /* HTML5 display definitions */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| vertical-align: baseline; | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| /* Links */ | |
| a { | |
| background: transparent; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| /* Text-level semantics */ | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| b, | |
| strong { | |
| font-weight: 300; | |
| } | |
| dfn { | |
| font-style: italic; | |
| } | |
| mark { | |
| background: yellow; | |
| color: black; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| /* Embedded content */ | |
| img { | |
| border: 0; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /* Grouping content */ | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| hr { | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| pre { | |
| overflow: auto; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: "Arial Unicode MS", sans-serif; | |
| font-size: 1em; | |
| } | |
| /* Forms */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; | |
| font: inherit; | |
| margin: 0; | |
| } | |
| button { | |
| overflow: visible; | |
| text-transform: none; | |
| } | |
| select { | |
| text-transform: none; | |
| } | |
| button, | |
| html input[type="button"] { | |
| -webkit-appearance: button; | |
| -moz-appearance: button; | |
| appearance: button; | |
| cursor: pointer; | |
| } | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| -moz-appearance: button; | |
| appearance: button; | |
| cursor: pointer; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| button::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input { | |
| line-height: normal; | |
| } | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| padding: 0; | |
| } | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-appearance: textfield; | |
| appearance: textfield; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| } | |
| fieldset { | |
| border: 1px solid silver; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| } | |
| textarea { | |
| overflow: auto; | |
| } | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| /* Tables */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0.5; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| .ctn-container .ctn-grid-1, | |
| .ctn-container .ctn-grid-2, | |
| .ctn-container .ctn-grid-3, | |
| .ctn-container .ctn-grid-4, | |
| .ctn-container .ctn-grid-5, | |
| .ctn-container .ctn-grid-6, | |
| .ctn-container .ctn-grid-7, | |
| .ctn-container .ctn-grid-8, | |
| .ctn-container .ctn-grid-9, | |
| .ctn-container .ctn-grid-10, | |
| .ctn-container .ctn-grid-11, | |
| .ctn-container .ctn-grid-12, | |
| .ctn-container .ctn-grid-13, | |
| .ctn-container .ctn-grid-14, | |
| .ctn-container .ctn-grid-15, | |
| .ctn-container .ctn-grid-16, | |
| .ctn-container .ctn-grid-17, | |
| .ctn-container .ctn-grid-18, | |
| .ctn-container .ctn-grid-19, | |
| .ctn-container .ctn-grid-20, | |
| .ctn-container .ctn-grid-21, | |
| .ctn-container .ctn-grid-22, | |
| .ctn-container .ctn-grid-23, | |
| .ctn-container .ctn-grid-24 { | |
| padding: 0px 7.5px; | |
| padding: 0rem 0.4688rem; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-box-flex: 0; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| } | |
| .ctn-container { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| height: 100%; | |
| margin: 0 auto; | |
| max-width: 1100px; | |
| padding: 0; | |
| } | |
| .ctn-container .ctn-grid-1 { | |
| -ms-flex-preferred-size: 4.1667%; | |
| flex-basis: 4.1667%; | |
| max-width: 4.1667%; | |
| } | |
| .ctn-container .ctn-push-1 { | |
| margin-left: 4.1667%; | |
| } | |
| .ctn-container .ctn-grid-2 { | |
| -ms-flex-preferred-size: 8.3333%; | |
| flex-basis: 8.3333%; | |
| max-width: 8.3333%; | |
| } | |
| .ctn-container .ctn-push-2 { | |
| margin-left: 8.3333%; | |
| } | |
| .ctn-container .ctn-grid-3 { | |
| -ms-flex-preferred-size: 12.5%; | |
| flex-basis: 12.5%; | |
| max-width: 12.5%; | |
| } | |
| .ctn-container .ctn-push-3 { | |
| margin-left: 12.5%; | |
| } | |
| .ctn-container .ctn-grid-4 { | |
| -ms-flex-preferred-size: 16.6667%; | |
| flex-basis: 16.6667%; | |
| max-width: 16.6667%; | |
| } | |
| .ctn-container .ctn-push-4 { | |
| margin-left: 16.6667%; | |
| } | |
| .ctn-container .ctn-grid-5 { | |
| -ms-flex-preferred-size: 20.8333%; | |
| flex-basis: 20.8333%; | |
| max-width: 20.8333%; | |
| } | |
| .ctn-container .ctn-push-5 { | |
| margin-left: 20.8333%; | |
| } | |
| .ctn-container .ctn-grid-6 { | |
| -ms-flex-preferred-size: 25%; | |
| flex-basis: 25%; | |
| max-width: 25%; | |
| } | |
| .ctn-container .ctn-push-6 { | |
| margin-left: 25%; | |
| } | |
| .ctn-container .ctn-grid-7 { | |
| -ms-flex-preferred-size: 29.1667%; | |
| flex-basis: 29.1667%; | |
| max-width: 29.1667%; | |
| } | |
| .ctn-container .ctn-push-7 { | |
| margin-left: 29.1667%; | |
| } | |
| .ctn-container .ctn-grid-8 { | |
| -ms-flex-preferred-size: 33.3333%; | |
| flex-basis: 33.3333%; | |
| max-width: 33.3333%; | |
| } | |
| .ctn-container .ctn-push-8 { | |
| margin-left: 33.3333%; | |
| } | |
| .ctn-container .ctn-grid-9 { | |
| -ms-flex-preferred-size: 37.5%; | |
| flex-basis: 37.5%; | |
| max-width: 37.5%; | |
| } | |
| .ctn-container .ctn-push-9 { | |
| margin-left: 37.5%; | |
| } | |
| .ctn-container .ctn-grid-10 { | |
| -ms-flex-preferred-size: 41.6667%; | |
| flex-basis: 41.6667%; | |
| max-width: 41.6667%; | |
| } | |
| .ctn-container .ctn-push-10 { | |
| margin-left: 41.6667%; | |
| } | |
| .ctn-container .ctn-grid-11 { | |
| -ms-flex-preferred-size: 45.8333%; | |
| flex-basis: 45.8333%; | |
| max-width: 45.8333%; | |
| } | |
| .ctn-container .ctn-push-11 { | |
| margin-left: 45.8333%; | |
| } | |
| .ctn-container .ctn-grid-12 { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; | |
| max-width: 50%; | |
| } | |
| .ctn-container .ctn-push-12 { | |
| margin-left: 50%; | |
| } | |
| .ctn-container .ctn-grid-13 { | |
| -ms-flex-preferred-size: 54.1667%; | |
| flex-basis: 54.1667%; | |
| max-width: 54.1667%; | |
| } | |
| .ctn-container .ctn-push-13 { | |
| margin-left: 54.1667%; | |
| } | |
| .ctn-container .ctn-grid-14 { | |
| -ms-flex-preferred-size: 58.3333%; | |
| flex-basis: 58.3333%; | |
| max-width: 58.3333%; | |
| } | |
| .ctn-container .ctn-push-14 { | |
| margin-left: 58.3333%; | |
| } | |
| .ctn-container .ctn-grid-15 { | |
| -ms-flex-preferred-size: 62.5%; | |
| flex-basis: 62.5%; | |
| max-width: 62.5%; | |
| } | |
| .ctn-container .ctn-push-15 { | |
| margin-left: 62.5%; | |
| } | |
| .ctn-container .ctn-grid-16 { | |
| -ms-flex-preferred-size: 66.6667%; | |
| flex-basis: 66.6667%; | |
| max-width: 66.6667%; | |
| } | |
| .ctn-container .ctn-push-16 { | |
| margin-left: 66.6667%; | |
| } | |
| .ctn-container .ctn-grid-17 { | |
| -ms-flex-preferred-size: 70.8333%; | |
| flex-basis: 70.8333%; | |
| max-width: 70.8333%; | |
| } | |
| .ctn-container .ctn-push-17 { | |
| margin-left: 70.8333%; | |
| } | |
| .ctn-container .ctn-grid-18 { | |
| -ms-flex-preferred-size: 75%; | |
| flex-basis: 75%; | |
| max-width: 75%; | |
| } | |
| .ctn-container .ctn-push-18 { | |
| margin-left: 75%; | |
| } | |
| .ctn-container .ctn-grid-19 { | |
| -ms-flex-preferred-size: 79.1667%; | |
| flex-basis: 79.1667%; | |
| max-width: 79.1667%; | |
| } | |
| .ctn-container .ctn-push-19 { | |
| margin-left: 79.1667%; | |
| } | |
| .ctn-container .ctn-grid-20 { | |
| -ms-flex-preferred-size: 83.3333%; | |
| flex-basis: 83.3333%; | |
| max-width: 83.3333%; | |
| } | |
| .ctn-container .ctn-push-20 { | |
| margin-left: 83.3333%; | |
| } | |
| .ctn-container .ctn-grid-21 { | |
| -ms-flex-preferred-size: 87.5%; | |
| flex-basis: 87.5%; | |
| max-width: 87.5%; | |
| } | |
| .ctn-container .ctn-push-21 { | |
| margin-left: 87.5%; | |
| } | |
| .ctn-container .ctn-grid-22 { | |
| -ms-flex-preferred-size: 91.6667%; | |
| flex-basis: 91.6667%; | |
| max-width: 91.6667%; | |
| } | |
| .ctn-container .ctn-push-22 { | |
| margin-left: 91.6667%; | |
| } | |
| .ctn-container .ctn-grid-23 { | |
| -ms-flex-preferred-size: 95.8333%; | |
| flex-basis: 95.8333%; | |
| max-width: 95.8333%; | |
| } | |
| .ctn-container .ctn-push-23 { | |
| margin-left: 95.8333%; | |
| } | |
| .ctn-container .ctn-grid-24 { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| max-width: 100%; | |
| } | |
| .ctn-container .ctn-push-24 { | |
| margin-left: 100%; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:first-of-type, | |
| .ctn-container .ctn-row .ctn-first, | |
| .ctn-container .ctn-row .ctn-start { | |
| padding-left: 0; | |
| } | |
| .ctn-container .ctn-row .ctn-middle { | |
| padding: 0px 7.5px; | |
| padding: 0rem 0.4688rem; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:last-of-type, | |
| .ctn-container .ctn-row .ctn-last, | |
| .ctn-container .ctn-row .ctn-end { | |
| padding-right: 0; | |
| } | |
| .ctn-row { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| display: -webkit-box; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-flex: 0; | |
| -ms-flex: 0 1 auto; | |
| flex: 0 1 auto; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: normal; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| height: 100%; | |
| } | |
| @media screen and (max-width: 1100px) { | |
| .ctn-container { | |
| width: 100%; | |
| } | |
| } | |
| @media screen and (max-width: 941px) { | |
| .ctn-container .ctn-grid-1, | |
| .ctn-container .ctn-grid-2, | |
| .ctn-container .ctn-grid-3, | |
| .ctn-container .ctn-grid-4, | |
| .ctn-container .ctn-grid-5, | |
| .ctn-container .ctn-grid-6, | |
| .ctn-container .ctn-grid-7, | |
| .ctn-container .ctn-grid-8, | |
| .ctn-container .ctn-grid-9, | |
| .ctn-container .ctn-grid-10, | |
| .ctn-container .ctn-grid-11, | |
| .ctn-container .ctn-grid-12, | |
| .ctn-container .ctn-grid-13, | |
| .ctn-container .ctn-grid-14, | |
| .ctn-container .ctn-grid-15, | |
| .ctn-container .ctn-grid-16, | |
| .ctn-container .ctn-grid-17, | |
| .ctn-container .ctn-grid-18, | |
| .ctn-container .ctn-grid-19, | |
| .ctn-container .ctn-grid-20, | |
| .ctn-container .ctn-grid-21, | |
| .ctn-container .ctn-grid-22, | |
| .ctn-container .ctn-grid-23, | |
| .ctn-container .ctn-grid-24 { | |
| padding-left: 10px !important; | |
| padding-left: 0.625rem !important; | |
| padding-right: 10px !important; | |
| padding-right: 0.625rem !important; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| max-width: 100%; | |
| } | |
| .ctn-container .ctn-push-1, | |
| .ctn-container .ctn-push-2, | |
| .ctn-container .ctn-push-3, | |
| .ctn-container .ctn-push-4, | |
| .ctn-container .ctn-push-5, | |
| .ctn-container .ctn-push-6, | |
| .ctn-container .ctn-push-7, | |
| .ctn-container .ctn-push-8, | |
| .ctn-container .ctn-push-9, | |
| .ctn-container .ctn-push-10, | |
| .ctn-container .ctn-push-11, | |
| .ctn-container .ctn-push-12, | |
| .ctn-container .ctn-push-13, | |
| .ctn-container .ctn-push-14, | |
| .ctn-container .ctn-push-15, | |
| .ctn-container .ctn-push-16, | |
| .ctn-container .ctn-push-17, | |
| .ctn-container .ctn-push-18, | |
| .ctn-container .ctn-push-19, | |
| .ctn-container .ctn-push-20, | |
| .ctn-container .ctn-push-21, | |
| .ctn-container .ctn-push-22, | |
| .ctn-container .ctn-push-23, | |
| .ctn-container .ctn-push-24 { | |
| margin-left: 0; | |
| } | |
| .ctn-container .ctn-tablet-1 { | |
| -ms-flex-preferred-size: 8.3333%; | |
| flex-basis: 8.3333%; | |
| max-width: 8.3333%; | |
| } | |
| .ctn-container .ctn-t-push-1 { | |
| margin-left: 8.3333%; | |
| } | |
| .ctn-container .ctn-tablet-2 { | |
| -ms-flex-preferred-size: 16.6667%; | |
| flex-basis: 16.6667%; | |
| max-width: 16.6667%; | |
| } | |
| .ctn-container .ctn-t-push-2 { | |
| margin-left: 16.6667%; | |
| } | |
| .ctn-container .ctn-tablet-3 { | |
| -ms-flex-preferred-size: 25%; | |
| flex-basis: 25%; | |
| max-width: 25%; | |
| } | |
| .ctn-container .ctn-t-push-3 { | |
| margin-left: 25%; | |
| } | |
| .ctn-container .ctn-tablet-4 { | |
| -ms-flex-preferred-size: 33.3333%; | |
| flex-basis: 33.3333%; | |
| max-width: 33.3333%; | |
| } | |
| .ctn-container .ctn-t-push-4 { | |
| margin-left: 33.3333%; | |
| } | |
| .ctn-container .ctn-tablet-5 { | |
| -ms-flex-preferred-size: 41.6667%; | |
| flex-basis: 41.6667%; | |
| max-width: 41.6667%; | |
| } | |
| .ctn-container .ctn-t-push-5 { | |
| margin-left: 41.6667%; | |
| } | |
| .ctn-container .ctn-tablet-6 { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; | |
| max-width: 50%; | |
| } | |
| .ctn-container .ctn-t-push-6 { | |
| margin-left: 50%; | |
| } | |
| .ctn-container .ctn-tablet-7 { | |
| -ms-flex-preferred-size: 58.3333%; | |
| flex-basis: 58.3333%; | |
| max-width: 58.3333%; | |
| } | |
| .ctn-container .ctn-t-push-7 { | |
| margin-left: 58.3333%; | |
| } | |
| .ctn-container .ctn-tablet-8 { | |
| -ms-flex-preferred-size: 66.6667%; | |
| flex-basis: 66.6667%; | |
| max-width: 66.6667%; | |
| } | |
| .ctn-container .ctn-t-push-8 { | |
| margin-left: 66.6667%; | |
| } | |
| .ctn-container .ctn-tablet-9 { | |
| -ms-flex-preferred-size: 75%; | |
| flex-basis: 75%; | |
| max-width: 75%; | |
| } | |
| .ctn-container .ctn-t-push-9 { | |
| margin-left: 75%; | |
| } | |
| .ctn-container .ctn-tablet-10 { | |
| -ms-flex-preferred-size: 83.3333%; | |
| flex-basis: 83.3333%; | |
| max-width: 83.3333%; | |
| } | |
| .ctn-container .ctn-t-push-10 { | |
| margin-left: 83.3333%; | |
| } | |
| .ctn-container .ctn-tablet-11 { | |
| -ms-flex-preferred-size: 91.6667%; | |
| flex-basis: 91.6667%; | |
| max-width: 91.6667%; | |
| } | |
| .ctn-container .ctn-t-push-11 { | |
| margin-left: 91.6667%; | |
| } | |
| .ctn-container .ctn-tablet-12 { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| max-width: 100%; | |
| } | |
| .ctn-container .ctn-t-push-12 { | |
| margin-left: 100%; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:first-of-type, | |
| .ctn-container .ctn-row .ctn-first, | |
| .ctn-container .ctn-row .ctn-start { | |
| padding-left: 0; | |
| } | |
| .ctn-container .ctn-row .ctn-middle { | |
| padding: 0px 7.5px; | |
| padding: 0rem 0.4688rem; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:last-of-type, | |
| .ctn-container .ctn-row .ctn-last, | |
| .ctn-container .ctn-row .ctn-end { | |
| padding-right: 0; | |
| } | |
| } | |
| @media screen and (max-width: 601px) { | |
| .ctn-container .ctn-grid-1, | |
| .ctn-container .ctn-grid-2, | |
| .ctn-container .ctn-grid-3, | |
| .ctn-container .ctn-grid-4, | |
| .ctn-container .ctn-grid-5, | |
| .ctn-container .ctn-grid-6, | |
| .ctn-container .ctn-grid-7, | |
| .ctn-container .ctn-grid-8, | |
| .ctn-container .ctn-grid-9, | |
| .ctn-container .ctn-grid-10, | |
| .ctn-container .ctn-grid-11, | |
| .ctn-container .ctn-grid-12, | |
| .ctn-container .ctn-grid-13, | |
| .ctn-container .ctn-grid-14, | |
| .ctn-container .ctn-grid-15, | |
| .ctn-container .ctn-grid-16, | |
| .ctn-container .ctn-grid-17, | |
| .ctn-container .ctn-grid-18, | |
| .ctn-container .ctn-grid-19, | |
| .ctn-container .ctn-grid-20, | |
| .ctn-container .ctn-grid-21, | |
| .ctn-container .ctn-grid-22, | |
| .ctn-container .ctn-grid-23, | |
| .ctn-container .ctn-grid-24, | |
| .ctn-container .ctn-tablet-1, | |
| .ctn-container .ctn-tablet-2, | |
| .ctn-container .ctn-tablet-3, | |
| .ctn-container .ctn-tablet-4, | |
| .ctn-container .ctn-tablet-5, | |
| .ctn-container .ctn-tablet-6, | |
| .ctn-container .ctn-tablet-7, | |
| .ctn-container .ctn-tablet-8, | |
| .ctn-container .ctn-tablet-9, | |
| .ctn-container .ctn-tablet-10, | |
| .ctn-container .ctn-tablet-11, | |
| .ctn-container .ctn-tablet-12 { | |
| padding-left: 10px !important; | |
| padding-left: 0.625rem !important; | |
| padding-right: 10px !important; | |
| padding-right: 0.625rem !important; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| max-width: 100%; | |
| } | |
| .ctn-container .ctn-push-1, | |
| .ctn-container .ctn-push-2, | |
| .ctn-container .ctn-push-3, | |
| .ctn-container .ctn-push-4, | |
| .ctn-container .ctn-push-5, | |
| .ctn-container .ctn-push-6, | |
| .ctn-container .ctn-push-7, | |
| .ctn-container .ctn-push-8, | |
| .ctn-container .ctn-push-9, | |
| .ctn-container .ctn-push-10, | |
| .ctn-container .ctn-push-11, | |
| .ctn-container .ctn-push-12, | |
| .ctn-container .ctn-push-13, | |
| .ctn-container .ctn-push-14, | |
| .ctn-container .ctn-push-15, | |
| .ctn-container .ctn-push-16, | |
| .ctn-container .ctn-push-17, | |
| .ctn-container .ctn-push-18, | |
| .ctn-container .ctn-push-19, | |
| .ctn-container .ctn-push-20, | |
| .ctn-container .ctn-push-21, | |
| .ctn-container .ctn-push-22, | |
| .ctn-container .ctn-push-23, | |
| .ctn-container .ctn-push-24, | |
| .ctn-container .ctn-t-push-1, | |
| .ctn-container .ctn-t-push-2, | |
| .ctn-container .ctn-t-push-3, | |
| .ctn-container .ctn-t-push-4, | |
| .ctn-container .ctn-t-push-5, | |
| .ctn-container .ctn-t-push-6, | |
| .ctn-container .ctn-t-push-7, | |
| .ctn-container .ctn-t-push-8, | |
| .ctn-container .ctn-t-push-9, | |
| .ctn-container .ctn-t-push-10, | |
| .ctn-container .ctn-t-push-11, | |
| .ctn-container .ctn-t-push-12 { | |
| margin-left: 0; | |
| } | |
| .ctn-container .ctn-mobile-1 { | |
| -ms-flex-preferred-size: 16.6667%; | |
| flex-basis: 16.6667%; | |
| max-width: 16.6667%; | |
| } | |
| .ctn-container .ctn-m-push-1 { | |
| margin-left: 16.6667%; | |
| } | |
| .ctn-container .ctn-mobile-2 { | |
| -ms-flex-preferred-size: 33.3333%; | |
| flex-basis: 33.3333%; | |
| max-width: 33.3333%; | |
| } | |
| .ctn-container .ctn-m-push-2 { | |
| margin-left: 33.3333%; | |
| } | |
| .ctn-container .ctn-mobile-3 { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; | |
| max-width: 50%; | |
| } | |
| .ctn-container .ctn-m-push-3 { | |
| margin-left: 50%; | |
| } | |
| .ctn-container .ctn-mobile-4 { | |
| -ms-flex-preferred-size: 66.6667%; | |
| flex-basis: 66.6667%; | |
| max-width: 66.6667%; | |
| } | |
| .ctn-container .ctn-m-push-4 { | |
| margin-left: 66.6667%; | |
| } | |
| .ctn-container .ctn-mobile-5 { | |
| -ms-flex-preferred-size: 83.3333%; | |
| flex-basis: 83.3333%; | |
| max-width: 83.3333%; | |
| } | |
| .ctn-container .ctn-m-push-5 { | |
| margin-left: 83.3333%; | |
| } | |
| .ctn-container .ctn-mobile-6 { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| max-width: 100%; | |
| } | |
| .ctn-container .ctn-m-push-6 { | |
| margin-left: 100%; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:first-of-type, | |
| .ctn-container .ctn-row .ctn-first, | |
| .ctn-container .ctn-row .ctn-start { | |
| padding-left: 0; | |
| } | |
| .ctn-container .ctn-row .ctn-middle { | |
| padding: 0px 7.5px; | |
| padding: 0rem 0.4688rem; | |
| } | |
| .ctn-container .ctn-row [class*="ctn-grid"]:last-of-type, | |
| .ctn-container .ctn-row .ctn-last, | |
| .ctn-container .ctn-row .ctn-end { | |
| padding-right: 0; | |
| } | |
| } | |
| .ctn-full { | |
| -ms-flex-line-pack: stretch; | |
| align-content: stretch; | |
| } | |
| .ctn-top { | |
| -webkit-box-align: start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| } | |
| .ctn-middle { | |
| -webkit-box-align: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| } | |
| .ctn-bottom { | |
| -webkit-box-align: end; | |
| -ms-flex-align: end; | |
| align-items: flex-end; | |
| } | |
| .ctn-space { | |
| -ms-flex-pack: distribute; | |
| justify-content: space-around; | |
| } | |
| .ctn-between { | |
| -webkit-box-pack: justify; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| } | |
| .ctn-first { | |
| -webkit-box-ordinal-group: 0; | |
| -ms-flex-order: -1; | |
| order: -1; | |
| } | |
| .ctn-last { | |
| -webkit-box-ordinal-group: 2; | |
| -ms-flex-order: 1; | |
| order: 1; | |
| } | |
| .ctn-reverse { | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-direction: reverse; | |
| -ms-flex-direction: row-reverse; | |
| flex-direction: row-reverse; | |
| } | |
| .ctn-start { | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| } | |
| .ctn-end { | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| } | |
| .ctn-center { | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| -webkit-box-pack: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| @media screen and (max-width: 941px) { | |
| .ctn-tablet-first { | |
| -webkit-box-ordinal-group: 0; | |
| -ms-flex-order: -1; | |
| order: -1; | |
| } | |
| .ctn-tablet-last { | |
| -webkit-box-ordinal-group: 2; | |
| -ms-flex-order: 1; | |
| order: 1; | |
| } | |
| .ctn-tablet-start { | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| .ctn-tablet-end { | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| .ctn-tablet-center { | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| } | |
| @media screen and (max-width: 601px) { | |
| .ctn-mobile-first { | |
| -webkit-box-ordinal-group: 0; | |
| -ms-flex-order: -1; | |
| order: -1; | |
| } | |
| .ctn-mobile-last { | |
| -webkit-box-ordinal-group: 2; | |
| -ms-flex-order: 1; | |
| order: 1; | |
| } | |
| .ctn-mobile-start { | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| .ctn-mobile-end { | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| .ctn-mobile-center { | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| -webkit-box-ordinal-group: initial; | |
| -ms-flex-order: initial; | |
| order: initial; | |
| } | |
| } | |
| .ctn-container:before, | |
| .cf:before, | |
| .clearfix:before, | |
| .callout:before, | |
| .red-callout:before, | |
| .blue-callout:before, | |
| .purple-callout:before, | |
| .green-callout:before, | |
| .orange-callout:before, | |
| .alert-expand:before, | |
| .ctn-container:after, | |
| .cf:after, | |
| .clearfix:after, | |
| .callout:after, | |
| .red-callout:after, | |
| .blue-callout:after, | |
| .purple-callout:after, | |
| .green-callout:after, | |
| .orange-callout:after, | |
| .alert-expand:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .ctn-container:after, | |
| .cf:after, | |
| .clearfix:after, | |
| .callout:after, | |
| .red-callout:after, | |
| .blue-callout:after, | |
| .purple-callout:after, | |
| .green-callout:after, | |
| .orange-callout:after, | |
| .alert-expand:after { | |
| clear: both; | |
| } | |
| .clear { | |
| clear: both; | |
| } | |
| .btn, | |
| .small-btn, | |
| .large-btn, | |
| .full-btn, | |
| .blue-btn, | |
| .red-btn, | |
| .purple-btn, | |
| .orange-btn, | |
| .green-btn, | |
| .dark-grey-btn, | |
| .blue-btn-bdr, | |
| .red-btn-bdr, | |
| .purple-btn-bdr, | |
| .orange-btn-bdr, | |
| .green-btn-bdr, | |
| .dark-grey-btn-bdr { | |
| text-decoration: none; | |
| } | |
| .btn, | |
| .small-btn, | |
| .large-btn, | |
| .full-btn, | |
| .blue-btn, | |
| .red-btn, | |
| .purple-btn, | |
| .orange-btn, | |
| .green-btn, | |
| .dark-grey-btn, | |
| .blue-btn-bdr, | |
| .red-btn-bdr, | |
| .purple-btn-bdr, | |
| .orange-btn-bdr, | |
| .green-btn-bdr, | |
| .dark-grey-btn-bdr, | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"], | |
| button { | |
| cursor: pointer; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| p, | |
| li, | |
| blockquote, | |
| .btn, | |
| .small-btn, | |
| .large-btn, | |
| .full-btn, | |
| .blue-btn, | |
| .red-btn, | |
| .purple-btn, | |
| .orange-btn, | |
| .green-btn, | |
| .dark-grey-btn, | |
| .blue-btn-bdr, | |
| .red-btn-bdr, | |
| .purple-btn-bdr, | |
| .orange-btn-bdr, | |
| .green-btn-bdr, | |
| .dark-grey-btn-bdr, | |
| .red-badge, | |
| .blue-badge, | |
| .purple-badge, | |
| .orange-badge, | |
| .green-badge, | |
| .red-badge-lt, | |
| .blue-badge-lt, | |
| .purple-badge-lt, | |
| .orange-badge-lt, | |
| .green-badge-lt, | |
| .red-badge-bdr, | |
| .blue-badge-bdr, | |
| .purple-badge-bdr, | |
| .orange-badge-bdr, | |
| .green-badge-bdr, | |
| label, | |
| input, | |
| select, | |
| textarea, | |
| legend, | |
| input[type="search"], | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"], | |
| button, | |
| table { | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| color: #333333; | |
| font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", | |
| Helvetica, Arial, "Lucida Grande", sans-serif; | |
| font-smoothing: antialiased; | |
| font-style: normal; | |
| font-weight: 300; | |
| line-height: 1.5; | |
| text-align: left; | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| font-size: 2.25rem; | |
| } | |
| h2 { | |
| font-size: 22px; | |
| font-size: 1.875rem; | |
| } | |
| h3 { | |
| font-size: 20px; | |
| font-size: 1.625rem; | |
| } | |
| h4 { | |
| font-size: 18px; | |
| font-size: 1.375rem; | |
| } | |
| h5 { | |
| font-size: 16px; | |
| font-size: 1.25rem; | |
| } | |
| h6 { | |
| font-size: 15px; | |
| font-size: 1.125rem; | |
| } | |
| p { | |
| font-size: 14px; | |
| font-size: 1rem; | |
| } | |
| ul, | |
| ol { | |
| margin-left: 16px; | |
| margin-left: 1rem; | |
| padding-left: 16px; | |
| padding-left: 1rem; | |
| } | |
| li { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| padding-left: 8px; | |
| padding-left: 0.5rem; | |
| margin: 0; | |
| } | |
| a { | |
| -webkit-transition: color 120ms linear; | |
| transition: color 120ms linear; | |
| } | |
| blockquote { | |
| margin-left: 18px; | |
| margin-left: 1.125rem; | |
| padding-left: 16px; | |
| padding-left: 1rem; | |
| border-left: 5px solid #ededed; | |
| position: relative; | |
| } | |
| blockquote .byline { | |
| display: block; | |
| font-weight: 300; | |
| text-align: right; | |
| } | |
| blockquote .byline:before { | |
| margin-right: 8px; | |
| margin-right: 0.5rem; | |
| content: "-"; | |
| display: inline-block; | |
| } | |
| blockquote.quote { | |
| padding-left: 32px; | |
| padding-left: 2rem; | |
| border-left: none; | |
| margin-left: 0; | |
| } | |
| blockquote.quote:before, | |
| blockquote.quote:after { | |
| font-size: 72px; | |
| font-size: 4.5rem; | |
| content: '"'; | |
| line-height: 0; | |
| position: absolute; | |
| } | |
| blockquote.quote:before { | |
| left: 0; | |
| top: 20px; | |
| } | |
| blockquote.quote:after { | |
| bottom: -20px; | |
| right: 0; | |
| } | |
| strong { | |
| font-weight: 320; | |
| } | |
| em { | |
| font-style: italics; | |
| } | |
| big, | |
| .text-large { | |
| font-size: 120%; | |
| } | |
| small, | |
| .text-small { | |
| font-size: 75%; | |
| } | |
| .text-muted { | |
| color: #cccccc; | |
| } | |
| .btn, | |
| .small-btn, | |
| .large-btn, | |
| .full-btn, | |
| .blue-btn, | |
| .red-btn, | |
| .purple-btn, | |
| .orange-btn, | |
| .green-btn, | |
| .dark-grey-btn, | |
| .blue-btn-bdr, | |
| .red-btn-bdr, | |
| .purple-btn-bdr, | |
| .orange-btn-bdr, | |
| .green-btn-bdr, | |
| .dark-grey-btn-bdr { | |
| -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| font-size: 14px; | |
| font-size: 1rem; | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| padding: 8px 16px; | |
| padding: 0.5rem 1rem; | |
| background: #ededed; | |
| border: none; | |
| color: #000000; | |
| display: inline-block; | |
| font-weight: normal; | |
| outline: 0; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| zoom: 1; | |
| -webkit-transition: background 120ms linear; | |
| transition: background 120ms linear; | |
| } | |
| .btn:hover, | |
| .small-btn:hover, | |
| .large-btn:hover, | |
| .full-btn:hover, | |
| .blue-btn:hover, | |
| .red-btn:hover, | |
| .purple-btn:hover, | |
| .orange-btn:hover, | |
| .green-btn:hover, | |
| .dark-grey-btn:hover, | |
| .blue-btn-bdr:hover, | |
| .red-btn-bdr:hover, | |
| .purple-btn-bdr:hover, | |
| .orange-btn-bdr:hover, | |
| .green-btn-bdr:hover, | |
| .dark-grey-btn-bdr:hover { | |
| background-color: #cccccc; | |
| color: #000000; | |
| } | |
| .blue-btn-bdr, | |
| .red-btn-bdr, | |
| .purple-btn-bdr, | |
| .orange-btn-bdr, | |
| .green-btn-bdr, | |
| .dark-grey-btn-bdr { | |
| background-color: transparent; | |
| border: 1px solid #999999; | |
| } | |
| .small-btn { | |
| font-size: 10px; | |
| font-size: 0.625rem; | |
| padding: 6px 12px; | |
| padding: 0.375rem 0.75rem; | |
| } | |
| .large-btn { | |
| font-size: 18px; | |
| font-size: 1.125rem; | |
| padding: 8px 36px; | |
| padding: 0.5rem 2.25rem; | |
| } | |
| .full-btn { | |
| padding: 10px 0px; | |
| padding: 0.625rem 0rem; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .inline-btn { | |
| margin: 0; | |
| } | |
| .blue-btn { | |
| background-color: #2971b2; | |
| color: #ffffff; | |
| } | |
| .blue-btn:hover { | |
| background-color: #1f5789; | |
| color: #ffffff; | |
| } | |
| .red-btn { | |
| background-color: #e04646; | |
| color: #ffffff; | |
| } | |
| .red-btn:hover { | |
| background-color: #d02323; | |
| color: #ffffff; | |
| } | |
| .purple-btn { | |
| background-color: #553a99; | |
| color: #ffffff; | |
| } | |
| .purple-btn:hover { | |
| background-color: #402c74; | |
| color: #ffffff; | |
| } | |
| .orange-btn { | |
| background-color: #fe9300; | |
| color: #ffffff; | |
| } | |
| .orange-btn:hover { | |
| background-color: #cb7500; | |
| color: #ffffff; | |
| } | |
| .green-btn { | |
| background-color: #4a742c; | |
| color: #ffffff; | |
| } | |
| .green-btn:hover { | |
| background-color: #324f1e; | |
| color: #ffffff; | |
| } | |
| .dark-grey-btn { | |
| background-color: #555555; | |
| color: #ffffff; | |
| } | |
| .dark-grey-btn:hover { | |
| background-color: #000000; | |
| color: #ffffff; | |
| } | |
| .blue-btn-bdr { | |
| border-color: #2971b2; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #2971b2; | |
| } | |
| .blue-btn-bdr:hover { | |
| background-color: #2971b2; | |
| color: #ffffff; | |
| } | |
| .red-btn-bdr { | |
| border-color: #e04646; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #e04646; | |
| } | |
| .red-btn-bdr:hover { | |
| background-color: #e04646; | |
| color: #ffffff; | |
| } | |
| .purple-btn-bdr { | |
| border-color: #553a99; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #553a99; | |
| } | |
| .purple-btn-bdr:hover { | |
| background-color: #553a99; | |
| color: #ffffff; | |
| } | |
| .orange-btn-bdr { | |
| border-color: #fe9300; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #fe9300; | |
| } | |
| .orange-btn-bdr:hover { | |
| background-color: #fe9300; | |
| color: #ffffff; | |
| } | |
| .green-btn-bdr { | |
| border-color: #4a742c; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #4a742c; | |
| } | |
| .green-btn-bdr:hover { | |
| background-color: #4a742c; | |
| color: #ffffff; | |
| } | |
| .dark-grey-btn-bdr { | |
| border-color: #555555; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| color: #555555; | |
| } | |
| .dark-grey-btn-bdr:hover { | |
| background-color: #555555; | |
| color: #ffffff; | |
| } | |
| .red-badge, | |
| .blue-badge, | |
| .purple-badge, | |
| .orange-badge, | |
| .green-badge, | |
| .red-badge-lt, | |
| .blue-badge-lt, | |
| .purple-badge-lt, | |
| .orange-badge-lt, | |
| .green-badge-lt, | |
| .red-badge-bdr, | |
| .blue-badge-bdr, | |
| .purple-badge-bdr, | |
| .orange-badge-bdr, | |
| .green-badge-bdr { | |
| margin: 10px 0px; | |
| margin: 0.625rem 0rem; | |
| padding: 5px 8px; | |
| padding: 0.3125rem 0.5rem; | |
| font-size: 11px; | |
| font-size: 0.6875rem; | |
| background-color: #cccccc; | |
| clear: both; | |
| color: #555555; | |
| cursor: pointer; | |
| display: inline-block; | |
| line-height: 1.5; | |
| } | |
| .red-badge-bdr, | |
| .blue-badge-bdr, | |
| .purple-badge-bdr, | |
| .orange-badge-bdr, | |
| .green-badge-bdr { | |
| background-color: transparent; | |
| border: 1px solid #cccccc; | |
| } | |
| .red-badge { | |
| background-color: #e04646; | |
| color: #ffffff; | |
| } | |
| .blue-badge { | |
| background-color: #2971b2; | |
| color: #ffffff; | |
| } | |
| .purple-badge { | |
| background-color: #553a99; | |
| color: #ffffff; | |
| } | |
| .orange-badge { | |
| background-color: #fe9300; | |
| color: #ffffff; | |
| } | |
| .green-badge { | |
| background-color: #4a742c; | |
| color: #ffffff; | |
| } | |
| .red-badge-lt { | |
| background-color: #ef9d9d; | |
| color: #333333; | |
| } | |
| .blue-badge-lt { | |
| background-color: #8fbce5; | |
| color: #333333; | |
| } | |
| .purple-badge-lt { | |
| background-color: #a895d7; | |
| color: #333333; | |
| } | |
| .orange-badge-lt { | |
| background-color: #ffbe65; | |
| color: #333333; | |
| } | |
| .green-badge-lt { | |
| background-color: #95c970; | |
| color: #333333; | |
| } | |
| .red-badge-bdr { | |
| border-color: #e04646; | |
| color: #e04646; | |
| } | |
| .blue-badge-bdr { | |
| border-color: #2971b2; | |
| color: #2971b2; | |
| } | |
| .purple-badge-bdr { | |
| border-color: #553a99; | |
| color: #553a99; | |
| } | |
| .orange-badge-bdr { | |
| border-color: #fe9300; | |
| color: #fe9300; | |
| } | |
| .green-badge-bdr { | |
| border-color: #4a742c; | |
| color: #4a742c; | |
| } | |
| .btn-expand { | |
| background-color: transparent; | |
| cursor: pointer; | |
| display: block; | |
| } | |
| .btn-expand:after { | |
| padding: 2px 6px 3px 6px; | |
| padding: 0.125rem 0.375rem 0.1875rem 0.375rem; | |
| background: #ffffff; | |
| border: 1px solid #cccccc; | |
| border-radius: 25px; | |
| color: #000000; | |
| font-weight: bold; | |
| line-height: 1; | |
| position: absolute; | |
| right: 1em; | |
| text-align: center; | |
| top: 0.5em; | |
| -webkit-transition: 0.5s ease-in-out; | |
| transition: 0.5s ease-in-out; | |
| } | |
| .btn-expand:hover:after { | |
| background: #ffffff; | |
| color: #999999; | |
| } | |
| .callout, | |
| .red-callout, | |
| .blue-callout, | |
| .purple-callout, | |
| .green-callout, | |
| .orange-callout { | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| padding: 16px; | |
| padding: 1rem; | |
| background-color: #efefef; | |
| border-left: 5px solid #cccccc; | |
| display: block; | |
| } | |
| .callout h1, | |
| .callout h2, | |
| .callout h3, | |
| .red-callout h1, | |
| .blue-callout h1, | |
| .purple-callout h1, | |
| .green-callout h1, | |
| .orange-callout h1, | |
| .red-callout h2, | |
| .blue-callout h2, | |
| .purple-callout h2, | |
| .green-callout h2, | |
| .orange-callout h2, | |
| .red-callout h3, | |
| .blue-callout h3, | |
| .purple-callout h3, | |
| .green-callout h3, | |
| .orange-callout h3 { | |
| margin-top: 0px; | |
| margin-top: 0rem; | |
| margin-bottom: 10px; | |
| margin-bottom: 0.625rem; | |
| color: #555555; | |
| } | |
| .callout p, | |
| .red-callout p, | |
| .blue-callout p, | |
| .purple-callout p, | |
| .green-callout p, | |
| .orange-callout p { | |
| margin: 10px 0px; | |
| margin: 0.625rem 0rem; | |
| color: #555555; | |
| } | |
| .red-callout { | |
| background-color: #ffe3e1; | |
| border-left-color: #cc583a; | |
| } | |
| .red-callout h1, | |
| .red-callout h2, | |
| .red-callout h3 { | |
| color: #cc583a; | |
| } | |
| .blue-callout { | |
| background-color: #dddfff; | |
| border-left-color: #272d7f; | |
| } | |
| .blue-callout h1, | |
| .blue-callout h2, | |
| .blue-callout h3 { | |
| color: #272d7f; | |
| } | |
| .purple-callout { | |
| background-color: #ffdcfc; | |
| border-left-color: #7f4d7b; | |
| } | |
| .purple-callout h1, | |
| .purple-callout h2, | |
| .purple-callout h3 { | |
| color: #7f4d7b; | |
| } | |
| .green-callout { | |
| background-color: #dfffe4; | |
| border-left-color: #277f35; | |
| } | |
| .green-callout h1, | |
| .green-callout h2, | |
| .green-callout h3 { | |
| color: #277f35; | |
| } | |
| .orange-callout { | |
| background-color: #ffefdd; | |
| border-left-color: #fe9300; | |
| } | |
| .orange-callout h1, | |
| .orange-callout h2, | |
| .orange-callout h3 { | |
| color: #fe9300; | |
| } | |
| .alert { | |
| padding: 10px 18px; | |
| padding: 0.625rem 1.125rem; | |
| border-left: none; | |
| border-radius: 4px; | |
| -webkit-box-shadow: 0 0 8px #cccccc; | |
| box-shadow: 0 0 8px #cccccc; | |
| position: relative; | |
| } | |
| .btn-expand:after { | |
| content: "+"; | |
| } | |
| .btn-expand.open:after { | |
| -webkit-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transition: 0.5s ease-in-out; | |
| transition: 0.5s ease-in-out; | |
| } | |
| .alert-expand { | |
| margin-bottom: 16px; | |
| margin-bottom: 1rem; | |
| padding: 0px 16px; | |
| padding: 0rem 1rem; | |
| background: #ffffff; | |
| border-left: 1px solid #cccccc; | |
| display: none; | |
| } | |
| .alert-expand.expanded { | |
| display: block; | |
| } | |
| label, | |
| input, | |
| select, | |
| textarea, | |
| legend { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| outline: none; | |
| outline-offset: 0; | |
| } | |
| label { | |
| margin-bottom: 24px; | |
| margin-bottom: 1.5rem; | |
| display: block; | |
| } | |
| fieldset { | |
| margin-bottom: 24px; | |
| margin-bottom: 1.5rem; | |
| border: none; | |
| padding: 0; | |
| } | |
| fieldset label { | |
| margin: 0; | |
| } | |
| legend { | |
| margin: 0px 0px 8px 0px; | |
| margin: 0rem 0rem 0.5rem 0rem; | |
| font-weight: bold; | |
| } | |
| input { | |
| margin: 8px 0px 16px 0px; | |
| margin: 0.5rem 0rem 1rem 0rem; | |
| padding: 4px; | |
| padding: 0.25rem; | |
| -webkit-appearance: textfield; | |
| -moz-appearance: textfield; | |
| appearance: textfield; | |
| border: 1px solid #cccccc; | |
| border-radius: 0; | |
| display: block; | |
| margin: 0; | |
| -webkit-transition: border-color 150ms linear; | |
| transition: border-color 150ms linear; | |
| width: 100%; | |
| } | |
| input:focus { | |
| border-color: #2971b2; | |
| } | |
| input[type="search"] { | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| outline: none; | |
| outline-offset: 0; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| display: inline-block; | |
| width: auto; | |
| } | |
| input[type="checkbox"] { | |
| margin-right: 4px; | |
| margin-right: 0.25rem; | |
| -webkit-appearance: checkbox; | |
| -moz-appearance: checkbox; | |
| appearance: checkbox; | |
| } | |
| input[type="radio"] { | |
| margin-right: 8px; | |
| margin-right: 0.5rem; | |
| -webkit-appearance: radio; | |
| -moz-appearance: radio; | |
| appearance: radio; | |
| } | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| font-size: 16px; | |
| font-size: 1rem; | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| padding: 8px 16px; | |
| padding: 0.5rem 1rem; | |
| background: #ededed; | |
| border: none; | |
| color: #000000; | |
| display: inline-block; | |
| font-weight: normal; | |
| outline: 0; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| zoom: 1; | |
| display: block; | |
| } | |
| .ctn-field-required { | |
| color: #e04646; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin-left: 5px; | |
| } | |
| .ctn-field-error { | |
| border-color: #e04646; | |
| } | |
| .ctn-field-warning { | |
| border-color: #fe9300; | |
| } | |
| .ctn-field-success { | |
| border-color: #4a742c; | |
| } | |
| textarea { | |
| margin: 8px 0px; | |
| margin: 0.5rem 0rem; | |
| padding: 8px; | |
| padding: 0.5rem; | |
| border: 1px solid #cccccc; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| height: auto; | |
| line-height: 1.7em; | |
| width: 100%; | |
| } | |
| textarea:focus { | |
| border-color: #2971b2; | |
| } | |
| select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| border: 1px solid #cccccc; | |
| border-radius: 0; | |
| display: block; | |
| padding: 6px 24px 6px 8px; | |
| width: auto; | |
| } | |
| button { | |
| -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| font-size: 16px; | |
| font-size: 1rem; | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| padding: 8px 16px; | |
| padding: 0.5rem 1rem; | |
| background: #ededed; | |
| border: none; | |
| color: #000000; | |
| display: inline-block; | |
| font-weight: normal; | |
| outline: 0; | |
| text-decoration: none; | |
| vertical-align: middle; | |
| zoom: 1; | |
| display: block; | |
| } | |
| .ctn-submit-btn { | |
| background-color: #2971b2; | |
| color: #ffffff; | |
| } | |
| .ctn-cancel-btn { | |
| background-color: #e04646; | |
| color: #ffffff; | |
| } | |
| .ctn-search-block input[type="search"] { | |
| padding: 5px 5px 7px 5px; | |
| padding: 0.3125rem 0.3125rem 0.4375rem 0.3125rem; | |
| border-right: none; | |
| display: inline; | |
| float: left; | |
| width: 85%; | |
| } | |
| .ctn-search-block .ctn-search-submit { | |
| padding: 10px 0px; | |
| padding: 0.625rem 0rem; | |
| background-color: #2971b2; | |
| border: 1px solid #2971b2; | |
| border-left: none; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| color: #ffffff; | |
| display: inline; | |
| float: left; | |
| line-height: 1.7em; | |
| text-align: center; | |
| width: 15%; | |
| } | |
| .ctn-search-block .ctn-search-submit:hover { | |
| background-color: #1f5789; | |
| } | |
| .helmet-1 { | |
| margin-top: 16px; | |
| margin-top: 1rem; | |
| } | |
| .sandal-1 { | |
| margin-bottom: 16px; | |
| margin-bottom: 1rem; | |
| } | |
| .armor-1 { | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| } | |
| .helmet-2 { | |
| margin-top: 32px; | |
| margin-top: 2rem; | |
| } | |
| .sandal-2 { | |
| margin-bottom: 32px; | |
| margin-bottom: 2rem; | |
| } | |
| .armor-2 { | |
| margin: 32px 0px; | |
| margin: 2rem 0rem; | |
| } | |
| .helmet-3 { | |
| margin-top: 48px; | |
| margin-top: 3rem; | |
| } | |
| .sandal-3 { | |
| margin-bottom: 48px; | |
| margin-bottom: 3rem; | |
| } | |
| .armor-3 { | |
| margin: 48px 0px; | |
| margin: 3rem 0rem; | |
| } | |
| .helmet-4 { | |
| margin-top: 64px; | |
| margin-top: 4rem; | |
| } | |
| .sandal-4 { | |
| margin-bottom: 64px; | |
| margin-bottom: 4rem; | |
| } | |
| .armor-4 { | |
| margin: 64px 0px; | |
| margin: 4rem 0rem; | |
| } | |
| .helmet-5 { | |
| margin-top: 80px; | |
| margin-top: 5rem; | |
| } | |
| .sandal-5 { | |
| margin-bottom: 80px; | |
| margin-bottom: 5rem; | |
| } | |
| .armor-5 { | |
| margin: 80px 0px; | |
| margin: 5rem 0rem; | |
| } | |
| .pad-helmet-1 { | |
| padding-top: 16px; | |
| padding-top: 1rem; | |
| } | |
| .pad-sandal-1 { | |
| padding-bottom: 16px; | |
| padding-bottom: 1rem; | |
| } | |
| .pad-armor-1 { | |
| padding: 16px 0px; | |
| padding: 1rem 0rem; | |
| } | |
| .pad-helmet-2 { | |
| padding-top: 32px; | |
| padding-top: 2rem; | |
| } | |
| .pad-sandal-2 { | |
| padding-bottom: 32px; | |
| padding-bottom: 2rem; | |
| } | |
| .pad-armor-2 { | |
| padding: 32px 0px; | |
| padding: 2rem 0rem; | |
| } | |
| .pad-helmet-3 { | |
| padding-top: 48px; | |
| padding-top: 3rem; | |
| } | |
| .pad-sandal-3 { | |
| padding-bottom: 48px; | |
| padding-bottom: 3rem; | |
| } | |
| .pad-armor-3 { | |
| padding: 48px 0px; | |
| padding: 3rem 0rem; | |
| } | |
| .pad-helmet-4 { | |
| padding-top: 64px; | |
| padding-top: 4rem; | |
| } | |
| .pad-sandal-4 { | |
| padding-bottom: 64px; | |
| padding-bottom: 4rem; | |
| } | |
| .pad-armor-4 { | |
| padding: 64px 0px; | |
| padding: 4rem 0rem; | |
| } | |
| .pad-helmet-5 { | |
| padding-top: 80px; | |
| padding-top: 5rem; | |
| } | |
| .pad-sandal-5 { | |
| padding-bottom: 80px; | |
| padding-bottom: 5rem; | |
| } | |
| .pad-armor-5 { | |
| padding: 80px 0px; | |
| padding: 5rem 0rem; | |
| } | |
| table { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| margin: 16px 0px; | |
| margin: 1rem 0rem; | |
| background: #ffffff; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| color: #555555; | |
| width: 100%; | |
| } | |
| thead, | |
| tfoot { | |
| text-align: left; | |
| } | |
| thead th, | |
| thead td, | |
| tfoot th, | |
| tfoot td { | |
| padding: 10px 12px; | |
| padding: 0.625rem 0.75rem; | |
| background-color: #cccccc; | |
| color: #ffffff; | |
| font-weight: bold; | |
| line-height: 1.7em; | |
| vertical-align: middle; | |
| } | |
| tbody tr, | |
| tbody td { | |
| padding: 8px 12px; | |
| padding: 0.5rem 0.75rem; | |
| } | |
| tbody tr.odd { | |
| background-color: #ffffff; | |
| } | |
| tbody tr.even { | |
| background-color: #efefef; | |
| } | |
| @media only screen and (max-width: 601px) { | |
| .ctn-table-wrapper { | |
| margin-bottom: 1rem; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .ctn-table-wrapper .ctn-responsive-table { | |
| overflow: scroll; | |
| overflow-y: hidden; | |
| } | |
| } | |
| .black-table thead th, | |
| .black-table thead td, | |
| .black-table tfoot th, | |
| .black-table tfoot td { | |
| background-color: #000000; | |
| } | |
| .black-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .black-table tbody.even { | |
| background-color: #555555; | |
| } | |
| .red-table thead th, | |
| .red-table thead td, | |
| .red-table tfoot th, | |
| .red-table tfoot td { | |
| background-color: #e04646; | |
| } | |
| .red-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .red-table tbody.even { | |
| background-color: #d02323; | |
| } | |
| .blue-table thead th, | |
| .blue-table thead td, | |
| .blue-table tfoot th, | |
| .blue-table tfoot td { | |
| background-color: #2971b2; | |
| } | |
| .blue-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .blue-table tbody.even { | |
| background-color: #1f5789; | |
| } | |
| .green-table thead th, | |
| .green-table thead td, | |
| .green-table tfoot th, | |
| .green-table tfoot td { | |
| background-color: #4a742c; | |
| } | |
| .green-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .green-table tbody.even { | |
| background-color: #324f1e; | |
| } | |
| .purple-table thead th, | |
| .purple-table thead td, | |
| .purple-table tfoot th, | |
| .purple-table tfoot td { | |
| background-color: #553a99; | |
| } | |
| .purple-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .purple-table tbody.even { | |
| background-color: #402c74; | |
| } | |
| .orange-table thead th, | |
| .orange-table thead td, | |
| .orange-table tfoot th, | |
| .orange-table tfoot td { | |
| background-color: #fe9300; | |
| } | |
| .orange-table tbody.odd { | |
| background-color: #ffffff; | |
| } | |
| .orange-table tbody.even { | |
| background-color: #cb7500; | |
| } | |
| .left-float { | |
| float: left; | |
| } | |
| .right-float { | |
| float: right; | |
| } | |
| .visible { | |
| visibility: display; | |
| } | |
| .not-visible { | |
| visibility: hidden; | |
| } | |
| /** All the following styles apply only to the printed version, i.e. PDF **/ | |
| @media only print { | |
| /* Reduce the font size a bit, the default is too large */ | |
| body { | |
| font-size: 0.9em; | |
| } | |
| /* Move to table of content more to the left since it will appear on its own | |
| page */ | |
| .TOC { | |
| left: 10ch; | |
| } | |
| /* Create a page break before every h2 element _but_ the very first */ | |
| body > h2:not(:first-child) { | |
| break-before: page; | |
| } | |
| /* Prevent page breaks immediately after h2 and and h3 headings */ | |
| h3, | |
| h2 { | |
| break-after: avoid; | |
| } | |
| /* Prevent page breaks in the middle of tables, figures and code samples */ | |
| table, | |
| pre, | |
| figure { | |
| break-inside: avoid; | |
| } | |
| /* Ensure that there are at least three lines of text | |
| at the top and bottom of each page */ | |
| p { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| /* Add the link target to links | |
| but only for links inside normal paragraphs. | |
| That makes sure that the link targets do not appear in the table of content */ | |
| p a::after { | |
| content: " (" attr(href) " )"; | |
| color: #9999ff; | |
| } | |
| } | |
| /* Enable smooth scrolling */ | |
| @media screen and (prefers-reduced-motion: no-preference) { | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| } | |
| /* Style the button */ | |
| .top-link { | |
| transition: all 0.25s ease-in-out; | |
| position: fixed; | |
| bottom: 0; | |
| right: 0; | |
| display: inline-flex; | |
| color: #000000; | |
| cursor: pointer; | |
| size: 2.5em; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 2.5em 2.5em 0; | |
| border-radius: 50%; | |
| padding: 0.25em; | |
| width: 3.5em; | |
| height: 3.5em; | |
| background-color: #f9f9f9; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment