Skip to content

Instantly share code, notes, and snippets.

@frippz

frippz/styles.css

Last active February 16, 2017 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frippz/688bdb96234cd7526422661e53ee0150 to your computer and use it in GitHub Desktop.
Save frippz/688bdb96234cd7526422661e53ee0150 to your computer and use it in GitHub Desktop.
Download ZIP
Binhs lekplats CSS
Raw
styles.css
/* stylelint-disable at-rule-empty-line-before */
/**
* CSS Resets
*
* Resets so that we start of with the same styles cross-browser
*/
/**
* HTML5 elements legacy reset
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
margin: 0;
padding: 0;
}
/**
* Reset body & html spacing
*/
body,
html {
margin: 0;
padding: 0;
}
/**
* Reset box sizing
*/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/**
* Variables
*/
:root {
/* Default background and body text */
/* Link colors */ /* Used on dark background */
/* Header */
/* Article */
/* Background colors */
/* Fluff */
/* Box colors */
/* Text colors */
/* Highlights */
/* Colorized text */
/* Table colors */
/* Borders */
}
/**
* Responsive helpers
*
* Define custom media attributes with default breakpoints for a variety of
* viewport sizes.
*/
/* stylelint-disable at-rule-empty-line-before */
/* Small devices (landscape phones, 544px and up) */
/* 544px */
/* Medium devices (tablets, 768px and up) */
/* 768px */
/* Large devices (desktops, 992px and up) */
/* 992px */
/* Extra large devices (large desktops, 1200px and up) */
/* 1200px */
/**
* Typography
*/
@media screen {
/**
* The lobotomized owl (https://goo.gl/yb5iHw)
*/
.gca-article * + * {
margin-top: 1.5rem;
}
/**
* Fonts & sizes
* Base size set to browser default (usually 16px)
*/
html {
font: 100%/1.7 "Open Sans", sans-serif;
font-weight: normal;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-size: 0.875rem; /* 14px (if base size is indeed 16px) */
}
/**
* Generic article typography
*/
.gca-article {
word-spacing: 0.20em;
min-height: 60vh;
}
/**
* Headings
*/
.gca-article h1,
.gca-article h2,
.gca-article h3,
.gca-article h4,
.gca-article h5,
.gca-article h6,
.gca-article .title,
.gca-article .sub-title {
font-family: "Libre Baskerville", serif;
font-weight: bold;
line-height: 1.25;
margin: 1.5em 0 0.4em;
}
.gca-article h1:first-child,
.gca-article h2:first-child,
.gca-article h3:first-child,
.gca-article h4:first-child,
.gca-article h5:first-child,
.gca-article h6:first-child,
.gca-article .title:first-child,
.gca-article .sub-title:first-child {
margin-top: 0;
}
.gca-article h1 + p,
.gca-article h2 + p,
.gca-article h3 + p,
.gca-article h4 + p,
.gca-article h5 + p,
.gca-article h6 + p,
.gca-article .title + p,
.gca-article .sub-title + p,
.gca-article p:first-child {
margin-top: 0;
}
.gca-article h1 {
font-size: 2.4em;
}
.gca-article h2 {
font-size: 2.4em;
}
.gca-article h3 {
font-size: 2.15em;
}
.gca-article h4 {
font-size: 1.85em;
}
.gca-article h5 {
font-size: 1.55em;
}
.gca-article h6 {
font-size: 1.3em;
}
.gca-article .title,
.gca-article .sub-title {
font-size: 1.28em;
font-feature-settings: "c2sc";
font-variant: small-caps;
}
.gca-article .sub-title {
font-weight: normal;
}
/**
* Generic styling
*
* TODO Make this section more generic to get rid of repetetive prefixes
*/
.gca-article ul,
.gca-article ol {
margin-bottom: 0;
padding-left: 2.3em;
}
.gca-article ul {
list-style: disc;
}
.gca-article ol {
list-style: decimal;
}
.gca-article li + li {
margin-top: 0.5em;
}
/**
* Paragraphs
*/
.gca-article p {
margin-bottom: 0;
}
/* Indented paragraphs */
.indent {
text-indent: 1em;
}
.indent + .indent {
margin-top: 0;
}
.indent a {
text-indent: 0;
}
.remove-bottom-margin + p {
margin-top: 0;
}
.indent + .remove-bottom-margin {
margin-top: 1.5rem;
}
.indent {
text-indent: 1.25em;
}
.ingress {
font-size: 1.2em;
}
/**
* Text styles
*/
/* Typewriter */
.typewriter-text {
font-family: "Cutive Mono", serif;
font-size: 1.15em;
}
.typewriter-text.medium {
font-size: 1.3em;
}
.typewriter-text.large {
font-size: 1.54em;
}
/* Handwritten */
.handwritten {
font-family: "Caveat", cursive;
font-size: 1.94em;
}
.handwritten.medium {
font-size: 2.06em;
}
.handwritten.large {
font-size: 2.28em;
}
/* Code */
.code {
font-family: "Inconsolata", monospace;
font-size: 1.15em;
}
.code.medium {
font-size: 1.3em;
}
.code.large {
font-size: 1.5em;
}
/**
* Colorized text
*/
.red-text {
color: #b71c1c;
}
.green-text {
color: #287d2a;
}
.blue-text {
color: #154d92;
}
.gray-text {
color: #666;
}
.white-text {
color: #fff;
}
.black-text {
color: #333;
}
/**
* Blockquotes
*/
.gca-article blockquote {
font-family: "Libre Baskerville", serif;
font-style: italic;
font-size: 1.15em;
padding-left: 1.5em;
border-left: 3px solid rgba(0, 0, 0, .1);
margin-left: 1em;
}
.gca-article blockquote .quote-source {
color: #575757;
font-family: "Open Sans", sans-serif;
font-size: 0.9em;
font-style: normal;
margin-top: 0.85em;
display: block;
}
/**
* Content images
*/
.image {
display: flex;
align-items: flex-start;
}
.image.side-by-side {
display: inline-flex;
vertical-align: top;
margin-top: 0;
}
/* Caption text */
.image figcaption {
margin-top: 0;
font-size: 0.9em;
text-align: left;
}
.image .caption-large {
font-size: 1em;
}
.image.caption-above {
flex-direction: column-reverse;
}
.image.caption-above img {
flex: 0 0 auto;
margin-top: 0.28em;
}
.image.caption-right {
flex-direction: row;
flex-grow: 1;
}
.image.caption-right img {
margin-right: 0.6em;
}
.image.caption-below {
flex-direction: column;
}
.image.caption-below img {
flex: 0 0 auto;
margin-bottom: 0.28em;
}
.image.caption-left {
flex-direction: row-reverse;
}
.image.caption-left img {
margin-left: 0.6em;
}
.image.caption-left figcaption,
.image.caption-right figcaption {
flex: 1;
margin-top: 0;
}
.image figcaption.top {
align-self: flex-start;
}
.image figcaption.center {
-ms-grid-row-align: center;
align-self: center;
}
.image figcaption.bottom {
align-self: flex-end;
}
.image img {
max-width: 100%;
width: 0;
margin: 0;
}
/**
* Line break
*/
.gca-article br {
margin: 0;
}
/**
* Math related typography
*/
/* Math list */
.math-list {
counter-reset: list;
padding: 0;
}
.math-list > li {
list-style: none;
}
.math-list > li::before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
font-weight: bold;
margin-left: -1.15em;
}
/* Math comments */
.math-comment {
background: #fff;
border: 1px dashed #ccc;
font-style: italic;
padding: 0.714em;
display: inline-block;
}
}
/* END @media screen */
/**
* Base rules
*
* Base rules are the defaults. They are almost exclusively single element
* selectors but it could include attribute selectors, pseudo-class selectors,
* child selectors or sibling selectors. Essentially, a base style says that
* wherever this element is on the page, it should look like this.
*
* https://smacss.com/book/type-base
*/
@media all {
/**
* Body styling
*/
html,
body {
background: #eee;
color: #222;
/* Juciebox sets a style tag on body with width and
height, to override that !important is needed */
height: 100% !important;
width: 100% !important;
}
/**
* Links
*/
:link,
:visited {
color: #006ec3;
}
a:hover,
a:focus,
a:active {
color: #154d92;
}
/**
* Emphasis
*/
b,
strong {
font-weight: bold;
}
i,
em {
font-style: italic;
}
/**
* Horizontal rule
*/
hr {
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
/**
* General button styles
*/
button {
border: 0;
background: transparent;
color: currentColor;
cursor: pointer;
font-size: inherit;
text-align: left;
margin: 0;
padding: 0;
}
/**
* Responsive images
*/
img {
max-width: 100%;
height: auto;
border: 0;
}
/**
* Inline frame element
*/
iframe {
border: 0;
}
/**
* SVG defaults (same as body color)
*/
svg {
fill: #222;
}
/* Clearfix */
.clearfix::after {
content: "";
display: block;
clear: both;
}
}
/* END @media all */
/**
* Layout rules
*
* Layout rules divide the page into sections. Layouts hold one or more modules
* together.
*
* https://smacss.com/book/type-layout
*/
@media screen {
body.disable-scroll {
/**
* Needs to be important as juicebox leaves styles in the body after
* entering and exiting fullscreen.
*/
overflow: hidden !important;
}
.disable-scroll.article-modal main,
.disable-scroll.article-modal .article-view {
/* Reset the z-index when e.g. simulations open in modal */
z-index: auto;
}
#app {
/* Reset lobotomized owl for #app wrapper */
margin-top: 0;
height: 100%;
}
/**
* Main
*/
main {
padding: 1.25rem 0 3.85rem;
position: relative;
min-height: 100%;
display: flex;
justify-content: center;
z-index: 0;
}
/**
* Images
*/
img.block-image {
display: block;
}
img.side-by-side {
display: inline-block;
margin-top: 0;
vertical-align: top;
}
/**
* Article View
*/
.article-view {
flex: 1 0 auto;
max-width: 100%;
position: relative;
z-index: 0;
}
/**
* Article
*/
[role="article"] {
background: #fff;
max-width: 37.5rem;
word-break: break-word;
margin: 0 auto;
}
/* Space multiple articles */
[role="article"] + [role="article"] {
margin-top: 2rem;
}
/* Article section */
.article-section,
.article-footer {
position: relative;
padding: 2.5rem 1rem;
}
}
@media (min-width: 34em) {
/* Main */
main {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
/* Article section */
.article-section,
.article-footer {
padding: 1rem 2.5rem 2.5rem;
}
}
/* END @media (--small-viewport) */
@media (min-width: 48em) {
main {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
}
/* END @media (--medium-viewport) */
@media (min-width: 62em) {
[role="article"] {
max-width: 60rem;
}
/* Cell column layouts */
.cell {
float: left;
overflow-y: hidden;
overflow-x: auto;
}
.cell:first-child:not(.cell-full) {
padding-right: 1.875rem;
}
.cell:nth-child(2) {
margin-top: 0;
padding-left: 1.875rem;
}
/* Cell column sizes */
.cell-small {
width: 37.5%;
}
.cell-large {
width: 62.5%;
}
.cell-medium {
width: 50%;
}
.cell-full {
float: none;
width: 100%;
}
/* Cells spanning several rows */
.cell.cell-span {
float: right;
}
}
/* END @media (--large-viewport) */
@media (min-width: 75em) {
/**
* Main
*/
main {
padding-bottom: 1.25rem;
}
}
/* END @media (--extra-large-viewport) */
/*
* State rules
*
* State rules are ways to describe how our modules or layouts will look when in
* a particular state. Is it hidden or expanded? Is it active or inactive? They
* are about describing how a module or layout looks on screens that are smaller
* or bigger. They are also about describing how a module might look in
* different views like the home page or the inside page.
*
* https://smacss.com/book/type-state
*/
@media screen {
/**
* Hidden elements (both visually and for AT:s)
*/
[hidden] {
display: none;
}
/**
* Visually hidden (still visible to AT:s)
*/
.at-only {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
.link-disabled {
opacity: 0.2;
pointer-events: none;
cursor: default;
}
/* Floating images/figures */
img.align-left,
figure.align-left {
float: left;
clear: left;
margin: 0.6em;
margin-left: 0;
}
img.align-center,
figure.align-center {
margin-left: auto;
margin-right: auto;
}
img.align-right,
figure.align-right {
float: right;
clear: right;
margin: 0.6em;
margin-right: 0;
}
/**
* Miscellaneous
*/
.highlighted {
background-color: #ff8;
}
}
/* END @media screen */
/**
* Modules
*
* Modules are the reusable, modular parts of our design. They are the callouts,
* the sidebar sections, the product lists and so on.
*
* https://smacss.com/book/type-module
*/
/* stylelint-disable at-rule-empty-line-before */
.spinner {
-ms-grid-row-align: center;
align-self: center;
margin: 6rem auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
width: 3rem;
height: 3rem;
opacity: 0;
will-change: opacity;
animation: spinner-opacity 300ms linear;
animation-delay: 700ms;
animation-fill-mode: forwards;
}
.spinner::after,
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
}
.spinner::before {
border: 0.25rem solid rgba(0, 0, 0, .1);
}
.spinner::after {
border: 0.25rem solid transparent;
border-left: 0.25rem solid rgba(0, 0, 0, .5);
transform: translateZ(0);
will-change: transform;
animation: spinner 1.1s infinite linear;
}
@keyframes spinner-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/**
* boxes.css
* Handles box styling on cells and components
*/
@media screen {
[class^="box-"],
[class*=" box-"] {
padding: 2rem;
}
/* Standard box */
.box-standard {
border: 1px solid #ccc;
color: #333;
}
/* Fact */
.box-fact {
background-color: #575757;
color: #fff;
}
.box-fact a {
color: #deeffc;
}
.box-fact .highlighted {
color: #222;
}
.box-fact .highlighted a {
color: #006ec3;
}
/* Informtion */
.box-information {
background-color: #f4f4ed;
color: #333;
}
/* Practice */
.box-practice {
background-color: #deeffc;
color: #333;
}
/* Summary */
.box-summary {
background-color: #e6f2e1;
color: #333;
}
/* Example */
.box-example {
background-color: #ede8f3;
color: #333;
}
/* Help */
.box-help {
background-color: #f9f1cd;
color: #333;
}
/* Warning */
.box-warning {
background-color: #ac1a1a;
color: #fff;
}
.box-warning a {
color: #deeffc;
}
.box-warning .highlighted {
color: #222;
}
.box-warning .highlighted a {
color: #006ec3;
}
}
/* END @media screen */
/**
* Breadcrumbs
*/
@media screen {
.breadcrumbs {
display: inline-block;
display: flex;
padding: 0 0.5rem;
align-items: center;
overflow: hidden;
}
.breadcrumbs > .crumb {
display: inline-block;
vertical-align: top;
text-decoration: none;
padding: 0 0.5rem;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
overflow: hidden;
color: #006ec3;
}
.breadcrumbs > a:first-child,
.breadcrumbs > a:last-child {
flex-shrink: 0;
}
.breadcrumbs > a:hover {
text-decoration: underline;
}
.breadcrumbs > span {
display: inline-block;
}
.breadcrumbs > *:not(:last-child) {
display: none;
}
}
/* END @media screen */
@media (min-width: 34em) {
.breadcrumbs > .crumb,
.breadcrumbs > .divider {
display: inline-block;
}
}
/* END @media (--small-viewport) */
@media screen {
.book {
height: 100%;
padding-top: 3rem;
}
}
/* END @media screen */
/**
* Header
*/
@media screen {
.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
}
.header-nav {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
display: flex;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0%);
will-change: transform;
}
.header-nav[data-hidden="true"] {
/* Move it an additional 15% so the drop shadow doesn't show as well */
transform: translateY(-115%);
}
.header-nav-list {
display: inline-block;
font-size: 0.875rem;
display: flex;
margin: 0;
padding: 0;
}
.header-nav-item {
display: inline-block;
vertical-align: top;
flex: 1 1 auto;
}
/**
* Header nav links
*/
.header-nav-link {
border-left: 1px solid #d6d6d6;
display: block;
text-decoration: none;
color: #333;
padding: 0 0.75rem;
height: 3rem;
align-items: center;
cursor: pointer;
white-space: nowrap;
}
.header-nav-link > svg {
display: inline-block;
vertical-align: middle;
}
.header-nav-link > span {
display: none;
margin-left: 0.5rem;
}
.header-nav-link:hover {
background-color: #f5f5f5;
color: #000;
}
.header-nav-link:focus {
outline: 0;
background-color: #e6f7ff;
color: #000;
}
.header-nav a svg {
fill: #333;
}
.breadcrumbs {
flex: 1 1 auto;
border-left: 1px solid #d6d6d6;
}
/* Header dashboard */
.header-dashboard {
display: none;
}
.toc-slide-in.header-nav-link {
cursor: auto;
}
}
/* END @media screen */
@media (min-width: 48em) {
.header-nav-link > span {
display: inline-block;
vertical-align: middle;
}
.header-dashboard {
display: block; /* Display the dashboard link */
}
.toc-slide-in .slide-in-window {
position: absolute;
left: 0;
top: 4.25rem;
height: calc(100vh - 8.25rem) !important;
}
}
/* END @media (--medium-viewport) */
/**
* Logotype
*/
@media screen {
.logo {
width: 1.5rem;
box-sizing: content-box;
flex: 0 0 auto;
}
.logo-fullsize {
display: none;
}
}
/* END @media screen */
@media (min-width: 48em) {
.logo {
width: 5rem;
}
.logo-fullsize {
display: block;
}
.logo-small {
display: none;
}
}
/* END @media (--medium-viewport) */
.slide-in-input {
position: absolute;
opacity: 0;
z-index: 2;
}
/**
* Slide in toggle button
*/
.slide-in-btn {
display: block;
cursor: pointer;
float: right;
display: flex;
align-items: center;
justify-content: center;
}
.slide-in-input:checked {
right: 0;
}
.slide-in-input:checked ~ .slide-in-window .slide-in-btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-left: 1px solid rgba(0, 0, 0, .2);
height: 3rem;
padding: 0 0.75rem;
}
/* Button focus state */
.slide-in-input:focus ~ .slide-in-window .slide-in-btn {
background-color: #e6f7ff;
}
.slide-in-open-icon {
display: block;
}
.slide-in-input:checked ~ .slide-in-window .slide-in-open-icon {
display: none;
}
.slide-in-close-icon {
display: none;
}
.slide-in-input:checked ~ .slide-in-window .slide-in-close-icon {
display: block;
}
.slide-in-btn svg {
fill: #666;
display: block;
}
/**
* Slide in window
*/
.slide-in-input:checked ~ .slide-in-window {
position: absolute;
left: 0;
right: 0;
height: 100vh;
max-height: 100vh;
z-index: 1;
}
/**
* Slide-in content container
*/
.slide-in-content {
display: none;
height: 100%;
}
.slide-in-input:checked ~ .slide-in-window .slide-in-content {
display: block;
}
/**
* Underlay
*/
.slide-in-underlay {
position: fixed;
display: block;
width: 100vw;
height: 105vh;
top: 0;
left: 0;
background: #333;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0, 0, 0.3, 1);
pointer-events: none;
z-index: 1;
box-sizing: content-box;
padding-bottom: 100%;
}
.slide-in-input:checked ~ .slide-in-underlay {
opacity: 0.7;
pointer-events: auto;
}
@media (min-width: 48em) {
/**
* Slide in toggle button
*/
.slide-in-btn {
background: #fff;
cursor: pointer;
border: 1px solid #d6d6d6;
padding: 0.75rem;
position: absolute;
top: 0;
border-left: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
right: 1px;
transform: translateX(100%);
}
.slide-in-input:checked {
right: auto;
}
.slide-in-input:checked ~ .slide-in-window .slide-in-btn {
transform: translateX(0%);
border-radius: 0;
}
[data-align-right="true"] .slide-in-btn {
border-left: 1px solid #d6d6d6;
border-right: 0;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
right: auto;
left: 1px;
transform: translateX(-100%);
}
/**
* Slide in window
*/
.slide-in-window {
left: auto;
right: auto;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0, 0, 0.3, 1);
}
[data-align-right="true"] .slide-in-window {
transform: translateX(100%);
}
.slide-in-input:checked ~ .slide-in-window {
right: auto;
transform: translateX(0%);
}
[data-align-right="true"] .slide-in-content {
border-left: 1;
border-right: 0;
}
}
/* END @media (--medium-viewport) */
/**
* The Table of content sidebar will push content to the side instead of
* overlaying on Chromebooks or larger viewports.
*/
@media (min-width: 85em) {
body.slide-in-left-visible {
overflow: auto !important;
}
.slide-in-left-visible .slide-in-window {
transition: none;
}
.slide-in-left-visible main,
.slide-in-left-visible .paging {
margin-left: 20vw;
}
}
/* END @media (min-width: 85.375) */
/**
* Table of contents
*/
@media screen {
/* Tabs */
.toc-tablist {
flex-shrink: 0;
height: 100%;
display: flex;
padding: 0;
margin: 0;
}
.toc-tab {
height: 100%;
margin: 0;
padding: 0 1rem;
border-left: 1px solid #ccc;
flex-shrink: 0;
cursor: pointer;
display: flex;
align-items: center;
}
.toc-tab:hover {
background-color: #f5f5f5;
}
.toc-tab:focus {
background-color: #e6f7ff;
outline: 0;
}
.toc-tab[aria-controls="toc-student-tab"][aria-selected="true"] svg {
fill: #45bdab;
}
.toc-tab[aria-controls="toc-teacher-tab"][aria-selected="true"] svg {
fill: #e62;
}
.toc-tab svg {
display: block;
fill: #666;
}
.toc-title span {
overflow: hidden;
white-space: nowrap;
padding: 0 1rem;
text-overflow: ellipsis;
text-transform: uppercase;
flex-grow: 1;
}
/* END Tabs */
.toc {
display: block;
display: flex;
flex-direction: column;
background-color: #fff;
font-size: 0.875rem; /* 14px */
color: #333;
width: 100%;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
max-height: 100%;
max-width: 100%;
}
.toc-title {
height: 3rem;
display: flex;
align-items: center;
font-weight: 600;
flex-shrink: 0;
margin-right: 3rem;
}
.toc-list {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: 1px solid #d6d6d6;
}
.toc-list,
.toc-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.toc-top-chapter > button,
.toc-chapter-btn {
display: block;
cursor: pointer;
margin: 0;
width: 100%;
padding: 1rem 0.875rem; /* 16px 14px */
border-bottom: 1px solid #f2f2f2;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.toc-top-chapter > button[aria-expanded="true"],
.toc-chapter-btn[aria-expanded="true"] {
font-weight: 600;
}
.toc-top-chapter > button svg,
.toc-chapter-btn svg {
vertical-align: text-bottom;
margin-right: 0.25rem;
margin-left: -0.25rem;
fill: #666;
}
.toc-chapter-btn:focus,
.toc-chapter-btn:hover,
.toc li a:focus,
.toc li a:hover {
outline: 0;
background-color: #e6f7ff;
color: #000;
}
.toc-top-chapter > button {
background-color: #f2f2f2;
border-bottom: 1px solid #d6d6d6;
}
.toc-top-chapter > button[aria-selected="true"] .toc-chapter-icon-expand {
display: none;
}
.toc-top-chapter > button[aria-selected="true"] .toc-chapter-icon-collapse {
display: block;
}
.toc li a:focus,
.toc-top-chapter button:focus {
outline: dotted 1px #333;
outline-offset: -1px;
}
.js .toc-chapter[data-collapsed="true"] {
display: none;
}
.no-js .toc-list [hidden] {
display: block;
}
.toc-list [data-level="2"] button {
padding-left: 1rem;
}
.toc-list [data-level="2"] a,
.toc-list [data-level="3"] button {
padding-left: 2.25rem;
}
.toc-list [data-level="3"] a,
.toc-list [data-level="4"] button {
padding-left: 3.5rem;
}
.toc-list [data-level="4"] a {
padding-left: 4.75rem;
}
.toc li a {
display: block;
padding: 1rem; /* 16px */
text-decoration: none;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #f2f2f2;
}
.toc-list li a[aria-selected="true"] {
background: #f9f1cd;
}
}
@media (min-width: 48em) {
.toc {
width: 24.625rem; /* 330px */
}
}
/* END @media (--medium-viewport) */
/**
* The Table of content sidebar will push content to the side instead of
* overlaying on Chromebooks or larger viewports.
*/
@media (min-width: 85em) {
.toc {
width: 20vw;
max-width: 24.625rem;
}
.toc-slide-in .slide-in-underlay {
display: none;
}
}
/* END @media (min-width: 85.375) */
@media screen {
.component-wrapper {
margin-bottom: 1.429rem;
}
.htmlcomponent-header {
position: relative;
padding-right: 1.8rem;
}
.htmlcomponent-header .permalink {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
height: 1em;
}
.htmlcomponent-header:hover .permalink {
visibility: visible;
}
}
/* END @media screen */
@media screen {
/* Reset the owl for the entire article header */
.article-header * + * {
margin-top: 0;
}
.article-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 2.875rem;
padding: 0 1rem;
border-bottom: 1px solid #eee;
}
.article-info,
.article-tools {
display: flex;
}
/* Article tools */
.article-tools > * {
margin-left: 0.5rem;
}
.article-tools button {
cursor: pointer;
}
/* Article difficulty type */
.article-header .article-difficulty-type {
display: none;
}
.article-difficulty-type.turquoise svg {
fill: #4abdab;
}
.article-difficulty-type.blue svg {
fill: #60abed;
}
.article-difficulty-type svg {
position: relative;
top: -1px;
margin-right: 0.25rem;
}
.article-difficulty-type svg:last-of-type {
margin-right: 0.5rem;
}
/* ReadSpeaker toggle */
.readspeaker-toggle {
/* position: relative; */
}
/* Article subject */
.article-header .article-subject {
display: none;
}
.article-subject svg {
position: relative;
top: 2px;
fill: #4abdab;
margin-right: 0.4rem;
}
}
@media (min-width: 34em) {
.article-header .article-difficulty-type,
.article-header .article-subject {
display: block;
}
.article-tools .permalink-dialog {
left: auto;
right: 0;
}
}
/**
* Pagination
*/
@media screen {
.paging {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: transparent;
word-break: break-word;
}
.paging-center {
margin: 0 auto;
max-width: 40rem;
display: flex;
justify-content: space-between;
}
.paging-transition {
will-change: opacity;
}
.paging-transition-appear,
.paging-transition-enter {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
.paging-transition-appear.paging-transition-appear-active,
.paging-transition-enter.paging-transition-enter-active {
opacity: 1;
}
.paging svg {
display: inline-block;
fill: currentColor;
vertical-align: middle;
}
.paging-button:link,
.paging-button:visited {
color: currentColor;
}
.paging-button {
display: block;
flex: 0 0 50%;
padding: 1em 0.5rem;
text-align: center;
border-top: 1px solid #eee;
background-color: #fff;
}
.paging-button:last-child {
border-left: 1px solid #eee;
}
.paging-button.link-disabled {
opacity: 1;
}
.paging-button.link-disabled svg {
opacity: 0.2;
}
}
/* END @media screen */
@media (min-width: 34.0625em) {
.paging {
padding: 0 1.25rem;
}
.paging-center {
max-width: 37.5rem;
}
}
@media (min-width: 45em) {
.paging-button:focus {
color: inherit;
}
.paging {
bottom: 50%;
transform: translateY(50%);
z-index: 0;
padding: 0;
}
.paging-center {
max-width: 43.5rem;
}
.paging-button {
padding: 0.25rem;
flex: 0 1 auto;
border-radius: 50%;
border: none;
margin: 0 0.5rem;
}
.paging-button:hover {
box-shadow: 0 5px 8px -2px rgba(0, 0, 0, .2);
}
.paging-button:active {
box-shadow: 0 1px 8px -2px rgba(0, 0, 0, .3);
}
}
@media (min-width: 62em) {
.paging-center {
max-width: 66rem;
}
}
/**
* Permalink and permalink dialog
*/
@media screen {
.permalink {
margin-top: 0;
position: relative;
}
.permalink-link::after {
/* Cover the permalink with a pseudo-element so the SVG can't be clicked (bug fix for Edge) */
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.permalink-label {
cursor: pointer;
}
.js .permalink-label a {
pointer-events: none;
}
.permalink-icon {
vertical-align: middle;
}
.permalink-dialog {
resize: none;
display: block;
visibility: hidden;
position: absolute;
width: 22rem;
height: 5.5rem;
right: 0;
z-index: 10;
top: 100%;
max-width: 90vw;
margin: 0 5%;
/* Add a negative margin to improve usability when hovering headlines */
margin-top: -3px;
padding: 0.5rem;
border: 8px solid #eee;
background: #fff;
outline: 1px solid #e6e6e6;
outline-offset: 0;
font-size: 0.875rem;
box-shadow: 1px 3px 5px rgba(0, 0, 0, .2);
font-family: "Open Sans", sans-serif;
word-break: break-all;
}
}
/**
* Article pagination
*/
@media screen {
.article-pager {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 100%;
max-width: 38rem;
margin: 3rem auto;
}
.article-page-link {
flex: 1;
line-height: 1.5;
padding: 0.15em 0;
margin: 0 0.25em 0 0;
text-align: center;
background-color: #eaeaea;
color: #666;
}
.article-page-link[aria-selected="true"] {
background-color: #45bdab;
color: #fff;
}
.article-pager .article-page-link:first-child {
border-radius: 1.25rem 0 0 1.25rem;
}
.article-pager .article-page-link:last-child {
border-radius: 0 1.25rem 1.25rem 0;
margin: 0;
}
a.article-page-link {
text-decoration: none;
}
.hidden-page {
display: none;
}
}
.overview {
position: fixed;
background-color: rgba(0, 0, 0, .85);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.overview-close-btn {
height: 3rem;
width: 3rem;
text-align: center;
background-color: #333;
position: absolute;
right: 0;
top: 0;
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-close-btn:hover {
background-color: #444;
}
.overview-close-btn:focus {
outline: 1px dotted #fff;
outline-offset: 2px;
}
.overview-close-btn svg {
fill: #fff;
opacity: 0.75;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-close-btn:hover svg {
opacity: 1;
}
.overview-nav {
text-align: center;
color: #fff;
}
.overview-nav-btn {
font-size: 1.125rem;
line-height: 1.75;
margin: 1.5rem 0.5rem 0;
}
.overview-nav-btn:focus {
outline: 1px dotted #fff;
outline-offset: 2px;
}
.overview-nav-btn[aria-selected="true"] {
border-bottom: 3px solid #fcb723;
}
.overview-nav-btn[disabled] {
opacity: 0.2;
cursor: not-allowed;
}
.overview-tab-panel {
margin: 3rem auto 1rem;
max-width: 45rem;
}
/**
* Article card
*/
@media screen {
.article-card .card-content {
background-color: #66baab;
display: flex;
align-items: center;
}
.article-card-info {
display: block;
background: #fff;
opacity: 0.75;
height: 6rem;
width: 100%;
padding-left: 0.75rem;
padding-right: 0.75rem;
overflow: hidden;
border-bottom: 1rem solid rgba(255, 255, 255, .75);
}
.article-card-tags {
display: flex;
align-items: center;
height: 2rem;
font-size: 0.625rem;
font-weight: normal;
}
.article-card-tags .article-subject svg {
height: 10px;
width: 10px;
margin-right: 0.2rem;
}
.article-card-tags .article-difficulty-type {
margin-right: 0.5rem;
}
.article-card-tags .article-difficulty-type svg {
width: 0.375rem;
height: 0.375rem;
}
}
@media screen {
.article-difficulty-type,
.article-subject {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article-difficulty-type {
margin-right: 1rem;
}
}
@media screen {
.chapter-header {
width: 100%;
background-color: #e7e7e7;
align-items: center;
padding: 0.25rem;
height: 3rem;
border-radius: 2px;
}
.chapter-header[aria-expanded="true"] {
cursor: default;
background-color: #fff;
font-weight: bold;
}
.chapter-header:focus,
.chapter-header:hover {
background: #fff;
}
.chapter-header:focus {
outline: 1px dotted #fff;
outline-offset: 2px;
}
.chapter-header-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 1rem;
display: inline-block;
vertical-align: middle;
}
.chapter-header-image {
width: 2.5rem;
height: 100%;
background-color: #66baab;
display: inline-block;
vertical-align: middle;
}
}
.card {
position: relative;
padding-bottom: 75%;
width: 100%;
min-width: 10rem;
min-height: 7.5rem;
border-radius: 0.25rem;
overflow: hidden;
display: block;
text-decoration: none;
color: inherit;
}
.card:focus,
.card:hover {
color: #000;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, .5);
}
.card:focus {
outline: 1px dotted #fff;
outline-offset: 2px;
}
.card-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 0.25rem;
}
.card .card-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 0.25rem;
}
.card:focus .card-content::before,
.card:hover .card-content::before {
opacity: 0.2;
}
/**
* Chapter card
*/
@media screen {
.chapter-card .card-content {
background-color: #66baab;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chapter-card-background {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.chapter-card-meta {
margin: auto;
background-color: rgba(255, 255, 255, .85);
color: #444;
width: 3.75rem;
height: 3.75rem;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.625rem;
transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.chapter-card:focus .chapter-card-meta,
.chapter-card:hover .chapter-card-meta {
transform: scale(1.1);
}
.chapter-card-total-articles {
margin-top: 0.25rem;
font-size: 1.5rem;
line-height: 1;
}
.chapter-card-title {
position: relative;
background-color: #fff;
padding: 0.75rem 0.75rem 1.5rem;
border-radius: 0 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.graphical-toc {
width: 100%;
padding: 0 1rem;
}
.graphical-toc .chapter-header {
margin-top: 0.5rem;
}
.graphical-toc-cards {
list-style: none;
padding: 0;
margin: 0.5rem -0.375rem;
display: flex;
flex-wrap: wrap;
}
.graphical-toc-cards > li {
width: 33.333%;
padding: 0.375rem;
}
.graphical-toc .card[aria-selected="true"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 0.25rem;
box-shadow: inset 0 0 0 2px #fcb723;
}
/*
* Vendor styles
*
* Custom styles and overrides for external libs
*/
/* stylelint-disable at-rule-empty-line-before */
/**
* Questbox
*/
/* Reset lobotomized owl for every questbox element */
.qb-exercise * + * {
margin-top: 0;
}
/**
* ReadSpeaker
*
* Custom styling for ReadSpeaker widget
*/
@media screen {
.readspeaker-toggle {
position: relative;
}
.readspeaker-toggle .readspeaker-container {
display: none;
position: fixed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 10;
}
.readspeaker-container a[target="_blank"] {
background: none;
}
.readspeaker-container .rsbtn_dl {
display: none;
}
.readspeaker-container .rsbtn {
display: block;
}
.readspeaker-container .draggable-anchor {
background: transparent url("/laromedel/ReadSpeaker2.5/img/rs_button.png") no-repeat 0 0;
height: 1.9em;
width: 2.5em;
position: absolute;
left: -2.2em;
top: 0;
cursor: move;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid rgba(0, 0, 0, .3);
z-index: 2;
}
.draggable-anchor svg {
fill: rgba(0, 0, 0, .3);
width: 1.2em;
}
}
img.gallery {
cursor: pointer;
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
box-sizing: border-box; }
.pswp img {
max-width: none; }
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open {
display: block; }
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing; }
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.pswp__container,
.pswp__zoom-wrap {
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0; }
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.pswp__zoom-wrap {
position: absolute;
width: 100%;
transform-origin: left top;
/* for open/close transition */
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg {
will-change: opacity;
/* for open/close transition */
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
transition: none; }
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden; }
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden; }
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0; }
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden; }
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222; }
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0; }
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC; }
.pswp__error-msg a {
color: #CCC;
text-decoration: underline; }
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/*
1. Buttons
*/
/* <button> css reset */
.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: 0.75;
transition: opacity 0.2s;
box-shadow: none; }
.pswp__button:focus,
.pswp__button:hover {
opacity: 1; }
.pswp__button:active {
outline: none;
opacity: 0.9; }
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0; }
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
opacity: 1; }
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url('/laromedel/photoswipe-skin/default-skin.png') 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url('/laromedel/photoswipe-skin/default-skin.svg'); }
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none; } }
.pswp__button--close {
background-position: 0 -44px; }
.pswp__button--share {
background-position: -44px -44px; }
.pswp__button--fs {
display: none; }
.pswp--supports-fs .pswp__button--fs {
display: block; }
.pswp--fs .pswp__button--fs {
background-position: -44px 0; }
.pswp__button--zoom {
display: none;
background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom {
display: block; }
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0; }
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden; }
/*
Arrow buttons hit area
(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background: none;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute; }
.pswp__button--arrow--left {
left: 0; }
.pswp__button--arrow--right {
right: 0; }
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content: '';
top: 35px;
background-color: rgba(0, 0, 0, .3);
height: 30px;
width: 32px;
position: absolute; }
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px -44px; }
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px -44px; }
/*
2. Share modal/popup and links
*/
.pswp__counter,
.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.pswp__share-modal {
display: block;
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
transition: opacity 0.25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__share-modal--hidden {
display: none; }
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #FFF;
top: 56px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
transform: translateY(6px);
transition: transform 0.25s;
-webkit-backface-visibility: hidden;
will-change: transform; }
.pswp__share-tooltip a {
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px; }
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000; }
.pswp__share-tooltip a:first-child {
/* round corners on the first/last list item */
border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in {
opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip {
transform: translateY(0); }
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
padding: 16px 12px; }
a.pswp__share--facebook:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6px solid transparent;
border-bottom-color: #FFF;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none; }
a.pswp__share--facebook:hover {
background: #3E5C9A;
color: #FFF; }
a.pswp__share--facebook:hover:before {
border-bottom-color: #3E5C9A; }
a.pswp__share--twitter:hover {
background: #55ACEE;
color: #FFF; }
a.pswp__share--pinterest:hover {
background: #CCC;
color: #CE272D; }
a.pswp__share--download:hover {
background: #DDD; }
/*
3. Index indicator ("1 of X" counter)
*/
.pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 13px;
line-height: 44px;
color: #FFF;
opacity: 0.75;
padding: 0 10px; }
/*
4. Caption
*/
.pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px; }
.pswp__caption small {
font-size: 11px;
color: #BBB; }
.pswp__caption__center {
text-align: left;
max-width: 420px;
margin: 0 auto;
font-size: 13px;
padding: 10px;
line-height: 20px;
color: #CCC; }
.pswp__caption--empty {
display: none; }
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
visibility: hidden; }
/*
5. Loading indicator (preloader)
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
*/
.pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
transition: opacity 0.25s ease-out;
will-change: opacity;
direction: ltr; }
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px; }
.pswp__preloader--active {
opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn {
/* We use .gif in browsers that don't support CSS animation */
background: url('/laromedel/photoswipe-skin/preloader.gif') 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active {
opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn {
background: none;
opacity: 0.75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0; }
.pswp--css_animation .pswp__preloader__cut {
/*
The idea of animating inner circle is based on Polymer ("material") loading indicator
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
*/
position: relative;
width: 7px;
height: 14px;
overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut {
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #FFF;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0; }
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
left: auto;
top: auto;
margin: 0;
float: right; } }
@keyframes clockwise {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes donut-rotate {
0% {
transform: rotate(0); }
50% {
transform: rotate(-140deg); }
100% {
transform: rotate(0); } }
/*
6. Additional styles
*/
/* root element of UI */
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550; }
/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%; }
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
-webkit-backface-visibility: hidden;
will-change: opacity;
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible; }
.pswp__top-bar,
.pswp__caption {
background-color: rgba(0, 0, 0, .5); }
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, .3); }
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0; }
/*
pswp__ui--hidden class is added when controls are hidden
e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
/* Force paint & create composition layer for controls. */
opacity: 0.001; }
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none; }
.pswp__element--disabled {
display: none !important; }
.pswp--minimal--dark .pswp__top-bar {
background: none; }
.pswp__img {
background: #fff;
}
/* Shared components */
/* stylelint-disable at-rule-empty-line-before */
/**
* Expandable Box
*/
@media screen {
.expandable {
transition: 0.2s height ease;
border: 1px solid #ccc;
background-color: #fff;
}
.expandable-header-btn {
display: block;
line-height: inherit;
width: 100%;
margin: 0;
}
.expandable-header-btn:hover {
cursor: pointer;
}
.expandable-header-btn:focus {
outline: 1px solid #006ec3;
outline-offset: -1px;
}
.expandable-header {
display: flex;
align-items: stretch;
width: 100%;
margin: 0;
text-decoration: none;
transition: 0.2s background-color ease;
}
.expandable-icon-container {
background: #f5f5f5;
display: inline-block;
vertical-align: middle;
display: flex;
flex: 0 0 auto;
border-right: 1px solid #ccc;
}
.expandable-icon {
height: 1.5rem;
width: 1.5rem;
-ms-grid-row-align: center;
align-self: center;
margin: 0 1.25rem;
}
.expandable-icon-container ~ .expandable-title-container {
width: calc(100% - 9rem);
}
.expandable-title-container {
display: inline-block;
vertical-align: middle;
width: calc(100% - 4rem);
flex: 1 0 auto;
padding: 1rem 1.25rem;
margin: 0;
}
.expandable-title {
font-family: "Open Sans", sans-serif;
font-size: 1.14em;
font-weight: 600;
color: #006ec3;
}
.expandable-description {
font-weight: 300;
font-style: italic;
margin-top: 0;
color: #666;
}
.expandable-toggle {
display: inline-block;
vertical-align: middle;
-ms-grid-row-align: center;
align-self: center;
fill: #006ec3;
margin: 0 1.25rem;
transform: rotate(0);
transition: 0.2s transform linear;
will-change: transform;
}
.expandable-toggle:hover {
fill: #154d92;
}
.expandable-area {
margin: 0;
border-top: 1px solid #ccc;
overflow-x: auto;
padding: 1.25rem;
}
.js .expandable-area {
visibility: hidden;
height: 0;
padding: 0 1.25rem;
}
/**
* State changes
*/
.expandable.is-expanded .expandable-area {
visibility: visible;
height: auto;
padding: 1.25rem;
}
.expandable.is-expanded .expandable-header {
background-color: #f5f5f5;
}
.expandable.is-expanded .expandable-toggle {
transform: rotate(-180deg);
}
.expandable.is-animating {
position: relative;
overflow: hidden;
}
.expandable.is-animating .expandable-area {
visibility: visible;
}
}
/* END @media screen */
/**
* AppBox Component
*/
@media screen {
/* Appbox uses content-box and we use border-box. */
.appbox * {
/* AppBox generates its own styling and add padding that we don't want */
padding: 0;
box-sizing: content-box;
}
.appbox[data-contexdisplay="modal"] img {
width: 100%;
}
.appbox-modal-background {
margin: 0;
}
.appbox-modal-background * + * {
margin-top: 0;
}
}
/**
* Audio Component
*/
@media screen {
audio {
width: 100%;
max-width: 400px;
margin: 0.5rem 0;
}
audio::-internal-media-controls-download-button {
display: none;
}
}
.gca-component-header svg {
display: inline-block;
vertical-align: text-bottom;
margin-right: 0.5em;
fill: rgba(0, 0, 0, .2);
float: left;
}
.gca-component-header {
font-weight: 600;
font-size: 1rem;
margin: 0;
margin-bottom: 0.75rem;
}
.gca-component-content {
margin-top: 0; /* Reset owl */
}
/**
* Presentation Component
*/
@media screen {
.presentation-embed {
margin: 0;
position: relative;
padding-bottom: 75%; /* 4:3 aspect ratio */
height: 0;
}
.presentation-embed iframe {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.presentation-error-message {
display: none;
position: absolute;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
}
/**
* Simulation Component
*/
@media screen {
/* Reset the owl for the entire simulation component */
.simulation-component .gca-component-content * + * {
margin-top: 0;
}
.simulation-inline-container {
background: #333;
padding: 0.5rem;
}
.simulation-modal {
background: #333;
}
.simulation-inline {
position: relative;
padding-bottom: 75%; /* 4:3 aspect ratio */
height: 0;
}
.simulation-inline.fullScreen,
.simulation-modal.fullScreen {
background: rgba(51, 51, 51, .85);
position: fixed;
overflow: auto;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
z-index: 9999;
}
.simulation-inline iframe {
/* width and min-width is needed for iframe width 100% on iPhone */
width: 1px;
min-width: 100%;
}
.simulation-modal.fullScreen iframe {
width: 100%;
}
.simulation-inline iframe,
.simulation-modal.fullScreen iframe {
border: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
opacity: 1;
}
.simulation-inline.fullScreen iframe,
.simulation-modal.fullScreen iframe {
padding-top: 5rem;
padding-bottom: 5rem;
}
/* The iframes are hidden with opacity 0 to get this to work on iPhone and iPads */
.simulation-modal iframe {
opacity: 0;
width: 1px;
height: 1px;
position: absolute;
}
.simulation-modal .simulation-fullScreen-button,
.simulation-modal.fullScreen .simulation-placeholder {
display: none;
}
.simulation-inline.fullScreen .simulation-fullScreen-button,
.simulation-modal.fullScreen .simulation-fullScreen-button {
margin: 1rem;
display: block;
}
.simulation-fullScreen-button {
position: absolute;
cursor: pointer;
z-index: 1;
background: #fff;
background: rgba(255, 255, 255, .9);
border: 1px solid #ccc;
margin-top: 0.5rem;
margin-right: 0.5rem;
width: 2.5em;
height: 2.5em;
top: 0;
right: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.simulation-fullScreen-button:hover {
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.simulation-fullScreen-button svg {
fill: #222;
}
.simulation-placeholder {
position: relative;
}
.simulation-placeholder.default {
background: #333;
}
.simulation-placeholder img {
width: 100%;
display: block;
}
.simulation-placeholder > svg {
fill: #444;
width: 100%;
height: 100%;
padding: 3rem;
max-height: 18rem;
max-width: 18rem;
margin: 0 auto;
display: block;
}
.simulation-play-btn {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: block;
transition: background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.simulation-play-btn svg {
width: 100%;
height: 100%;
max-width: 6rem;
max-height: 6rem;
padding: 0;
margin: 0 auto;
display: block;
transition: transform 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.simulation-play-btn:hover {
background: rgba(0, 0, 0, .35);
}
.simulation-play-btn:hover svg {
transform: scale(1.1);
}
}
/**
* Video Component
*/
@media screen {
.video-embed {
position: relative;
height: 0;
margin: 0;
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.juicebox-component {
border: 8px solid #222;
background-color: #222;
min-height: 200px; /* Arbitrary min-height so it looks better on load */
}
/**
* MathML
*/
/* Reset owl for MathML */
.gca-article .mjx-chtml * + *,
.gca-article math * + *,
.gca-article math + math {
margin-top: 0;
}
/**
* Tables
*/
/* Variables */
:root {
/* Tables */
}
@media screen {
.gca-article table {
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
.gca-article table,
.gca-article th,
.gca-article td {
border: 0;
}
.gca-article th,
.gca-article td {
padding: 0.75rem 0.6rem 0.75rem 0;
vertical-align: top;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.gca-article caption,
.gca-article th {
font-weight: bold;
text-align: left;
}
.gca-article thead th {
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
/* Outside border */
.gca-article .frame {
border: 1px solid rgba(0, 0, 0, .2);
}
/* Zebra stripes */
.gca-article .striped {
border: 1px solid rgba(0, 0, 0, .2);
}
.gca-article .striped td,
.gca-article .striped th {
padding: 0.75rem 0.6rem;
}
.gca-article .striped tr:nth-child(even) td,
.gca-article .striped tr:nth-child(even) th {
background-color: rgba(0, 0, 0, .07);
}
/* Horizontal lines */
.gca-article .lines tr,
.gca-article .lines th {
border-bottom: 1px rgba(0, 0, 0, .2) solid;
}
/* Cell borders */
.gca-article .borders td,
.gca-article .borders th {
border: 1px rgba(0, 0, 0, .2) solid;
padding: 0.75rem 0.6rem;
}
/* Outside borders + inside lines */
.gca-article .frame.lines th,
.gca-article .frame.lines td {
padding: 0.75rem 0.6rem;
}
}
/* END @media screen */
/**
* Link icons
*
* NOTE Contains legacy selectors for backwards compatibility (marked below)
*/
@media screen {
/**
* Link background properties
*/
a[type], /* NOTE Legacy */
a[href$=".doc"],
a[href$=".docx"],
a[href$=".xls"],
a[href$=".xlsx"],
a[href$=".ppt"],
a[href$=".pptx"],
a[class$="-component-link"],
a[target="_blank"] {
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 1em;
padding-left: 1.4em;
}
/* External links */
a[target="_blank"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTloLTE0di0xNGg3di0yaC03Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3ptLTUtMTZ2MmgzLjU5bC05LjgzIDkuODMgMS40MSAxLjQxIDkuODMtOS44M3YzLjU5aDJ2LTdoLTd6IiBmaWxsPSIjNDQ0Ii8+PC9zdmc+");
}
/* Don't show icon on link */
a.no-link-icon {
background: none;
padding-left: 0;
}
/* Other file */
a[type="other"], /* NOTE Legacy */
a[type="pdf"], /* NOTE Legacy */
a.file-link-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiAyYy0xLjEgMC0xLjk5LjktMS45OSAybC0uMDEgMTZjMCAxLjEuODkgMiAxLjk5IDJoMTIuMDFjMS4xIDAgMi0uOSAyLTJ2LTEybC02LTZoLTh6bTcgN3YtNS41bDUuNSA1LjVoLTUuNXoiIGZpbGw9IiM0NDQiLz48L3N2Zz4=");
}
/* Word document */
a[type="word"], /* NOTE Legacy */
a[href$=".doc"],
a[href$=".docx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMSAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMiA1LjRjLjIuMi40LjYuNC44bC4yLjYuMi40djE1YzAgLjIgMCAuNC0uMi44cy0uMi40LS40LjZjLS4yLjItLjQuNC0uNi40aC0xNy44Yy0uMiAwLS40IDAtLjgtLjJzLS40LS4yLS42LS40Yy0uMi0uMi0uNC0uNC0uNC0uNiAwLS4yLS4yLS40LS4yLS44di0yMC4yYzAtLjIgMC0uNC4yLS44bC40LS40cy40LS40LjYtLjRsLjgtLjJoMTJzLjIgMCAuNC4yLjQuMi42LjJsLjguNi42LjRzLjIuNC40LjZsLjYuNi42LjYuNi42LjYuNmMuMi4yLjQuNC40LjYgMCAuMi40LjIuNi40em0tLjYgMTYuOHYtMTQuNmgtNS40cy0uMiAwLS4yLS4ybC0uMi0uMnYtNS42aC0xMnYyMWgxOGMtLjItLjItLjItLjItLjItLjR6bS02LTExdi0yLjJoNGwtMyAxMmgtMi40bC0xLjYtNy4yLTEuOCA3LjJoLTIuNmwtMi42LTEyaDIuNmwxLjQgNy40IDEuOC03LjRoMi40bDEuNiA3LjQgMS4yLTUuMmgtMXptMy40LTcuMmMtLjIgMC0uNC0uMi0uNi0uNGwtLjQtLjRjLS4yLS4yLS40LS4yLS40LS40bC0uNC0uNHYzLjZoMy42bC0uNC0uNHMtLjItLjQtLjQtLjRjLS4yLS4yLS4yLS40LS40LS40cy0uNC0uNi0uNi0uOHoiIGZpbGw9IiM0NDQiLz48L3N2Zz4=");
}
/* Excel document */
a[type="excel"], /* NOTE Legacy */
a[href$=".xls"],
a[href$=".xlsx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMSAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgOWgtMy4ybC0yLjIgMy40LTIuMi0zLjRoLTMuMmwzLjggNS44LTQuNCA2LjJoNi4ydi0yaC0xLjRsMS4yLTEuOCAyLjYgMy44aDMuNGwtNC40LTYuMiAzLjgtNS44em0zLjgtNC40bC0zLjQtMy40Yy0uNi0uNi0yLjItMS4yLTMuMi0xLjJoLTExLjJjLTEgMC0yIC44LTIgMS44djIwLjRjMCAxIC44IDEuOCAxLjggMS44aDE3LjRjMSAwIDEuOC0uOCAxLjgtMS44di0xNC40Yy4yLTEtLjQtMi40LTEuMi0zLjJ6bS00LjYtMi40Yy4yIDAgLjIuMi4yLjJsMy40IDMuNC4yLjJoLTMuOHYtMy44em00LjQgMjBjMCAuMi0uMi40LS40LjRoLTE3LjJjLS4yIDAtLjQtLjItLjQtLjR2LTIwLjRjMC0uMi4yLS40LjQtLjRoMTEuNnY2aDZ2MTQuOHoiIGZpbGw9IiM0NDQiLz48L3N2Zz4=");
}
/* PowerPoint document */
a[type="powerpoint"], /* NOTE Legacy */
a[href$=".ppt"],
a[href$=".pptx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMiAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuOCA0LjhsLTMuNC0zLjRjLS44LS44LTIuMi0xLjQtMy4yLTEuNGgtMTEuNGMtMSAwLTEuOC44LTEuOCAxLjh2MjAuNGMwIDEgLjggMS44IDEuOCAxLjhoMTcuNGMxIDAgMS44LS44IDEuOC0xLjh2LTE0LjJjLjItMS4yLS40LTIuNi0xLjItMy4yem0tNC44LTIuNmMuMiAwIC4yLjIuMi4ybDMuNCAzLjQuMi4yaC0zLjh2LTMuOHptNC42IDIwYzAgLjItLjIuNC0uNC40aC0xNy40Yy0uMiAwLS40LS4yLS40LS40di0yMC40YzAtLjIuMi0uNC40LS40aDExLjh2Nmg2djE0Ljh6bS01LjQtOC40YzAgMS0uNCAxLjgtMSAyLjQtLjguNi0xLjggMS0yLjggMWgtMXYzLjRoLTEuNnYtOS40aDIuNmMxIDAgMiAuMiAyLjYuNi42LjIgMS4yIDEuMiAxLjIgMnptLTQuOCAxLjhoLjhjLjggMCAxLjQtLjIgMS44LS40LjQtLjIuNi0uNi42LTEuMnMtLjItMS0uNC0xLjJjLS40LS40LTEtLjQtMS42LS40aC0xdjMuMmgtLjJ6IiBmaWxsPSIjNDQ0Ii8+PC9zdmc+");
}
/* Image */
a[type="picture"], /* NOTE Legacy */
.image-viewer-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTl2LTE0YzAtMS4xLS45LTItMi0yaC0xNGMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnptLTEyLjUtNS41bDIuNSAzLjAxIDMuNS00LjUxIDQuNSA2aC0xNGwzLjUtNC41eiIgZmlsbD0iIzQ0NCIvPjwvc3ZnPg==");
}
/* Video component */
a[type="video"], /* NOTE Legacy */
.video-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgM2gtMThjLTEuMTEgMC0yIC44OS0yIDJ2MTJjMCAxLjEuODkgMiAyIDJoNXYyaDh2LTJoNWMxLjEgMCAxLjk5LS45IDEuOTktMmwuMDEtMTJjMC0xLjExLS45LTItMi0yem0wIDE0aC0xOHYtMTJoMTh2MTJ6bS01LTZsLTcgNHYtOHoiIGZpbGw9IiM0NDQiLz48L3N2Zz4=");
}
/* Audio component */
a[type="audio"], /* NOTE Legacy */
.audio-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjNDQ0Ij48cGF0aCBkPSJNMyA5djZoNGw1IDV2LTE2bC01IDVoLTR6bTEzLjUgM2MwLTEuNzctMS4wMi0zLjI5LTIuNS00LjAzdjguMDVjMS40OC0uNzMgMi41LTIuMjUgMi41LTQuMDJ6bS0yLjUtOC43N3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNGgtMjR6IiBmaWxsPSJub25lIi8+PC9zdmc+");
}
/* AppBox */
.appBox-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgNy41di01LjVoLTZ2NS41bDMgMyAzLTN6bS03LjUgMS41aC01LjV2Nmg1LjVsMy0zLTMtM3ptMS41IDcuNXY1LjVoNnYtNS41bC0zLTMtMyAzem03LjUtNy41bC0zIDMgMyAzaDUuNXYtNmgtNS41eiIgZmlsbD0iIzQ0NCIvPjwvc3ZnPg==");
}
/* QuestBox */
.questBox-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtNC4xOGMtLjQyLTEuMTYtMS41Mi0yLTIuODItMi0xLjMgMC0yLjQuODQtMi44MiAyaC00LjE4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnptLTcgMGMuNTUgMCAxIC40NSAxIDFzLS40NSAxLTEgMS0xLS40NS0xLTEgLjQ1LTEgMS0xem0tMiAxNGwtNC00IDEuNDEtMS40MSAyLjU5IDIuNTggNi41OS02LjU5IDEuNDEgMS40Mi04IDh6IiBmaWxsPSIjNDQ0Ii8+PC9zdmc+");
}
/* Simulation component */
.simulation-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0aC0yNHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTguOTkgMTEuNWMuMzQgMCAuNjcuMDMgMSAuMDdsLjAxLTExLjU3LTIwIDIwaDExLjU2Yy0uMDQtLjMzLS4wNy0uNjYtLjA3LTEgMC00LjE0IDMuMzYtNy41IDcuNS03LjV6bTMuNzEgNy45OWMuMDItLjE2LjA0LS4zMi4wNC0uNDkgMC0uMTctLjAxLS4zMy0uMDQtLjQ5bDEuMDYtLjgzYy4wOS0uMDguMTItLjIxLjA2LS4zMmwtMS0xLjczYy0uMDYtLjExLS4xOS0uMTUtLjMxLS4xMWwtMS4yNC41Yy0uMjYtLjItLjU0LS4zNy0uODUtLjQ5bC0uMTktMS4zMmMtLjAxLS4xMi0uMTItLjIxLS4yNC0uMjFoLTJjLS4xMiAwLS4yMy4wOS0uMjUuMjFsLS4xOSAxLjMyYy0uMy4xMy0uNTkuMjktLjg1LjQ5bC0xLjI0LS41Yy0uMTEtLjA0LS4yNCAwLS4zMS4xMWwtMSAxLjczYy0uMDYuMTEtLjA0LjI0LjA2LjMybDEuMDYuODNjLS4wMi4xNi0uMDMuMzItLjAzLjQ5IDAgLjE3LjAxLjMzLjAzLjQ5bC0xLjA2LjgzYy0uMDkuMDgtLjEyLjIxLS4wNi4zMmwxIDEuNzNjLjA2LjExLjE5LjE1LjMxLjExbDEuMjQtLjVjLjI2LjIuNTQuMzcuODUuNDlsLjE5IDEuMzJjLjAyLjEyLjEyLjIxLjI1LjIxaDJjLjEyIDAgLjIzLS4wOS4yNS0uMjFsLjE5LTEuMzJjLjMtLjEzLjU5LS4yOS44NC0uNDlsMS4yNS41Yy4xMS4wNC4yNCAwIC4zMS0uMTFsMS0xLjczYy4wNi0uMTEuMDMtLjI0LS4wNi0uMzJsLTEuMDctLjgzem0tMy43MSAxLjAxYy0uODMgMC0xLjUtLjY3LTEuNS0xLjVzLjY3LTEuNSAxLjUtMS41IDEuNS42NyAxLjUgMS41LS42NyAxLjUtMS41IDEuNXoiIGZpbGw9IiM0NDQiLz48L3N2Zz4=");
}
/* Presentation */
.presentation-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgOHY4bDUtNC01LTR6bTktNWgtMTRjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTE0YzAtMS4xLS45LTItMi0yem0wIDE2aC0xNHYtMTRoMTR2MTR6IiBmaWxsPSIjNDQ0Ii8+PC9zdmc+");
}
/* Timeline */
.timeline-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzkgMTljLTIuMDUgMC0zLjgxIDEuMjMtNC41OCAzaC01Ljg0Yy0uNzctMS43Ny0yLjUzLTMtNC41OC0zcy0zLjgxIDEuMjMtNC41OCAzaC01Ljg0Yy0uNzctMS43Ny0yLjUzLTMtNC41OC0zLTIuNzcgMC01IDIuMjMtNSA1czIuMjMgNSA1IDVjMi4wNSAwIDMuODEtMS4yMyA0LjU4LTNoNS44NGMuNzcgMS43NyAyLjUzIDMgNC41OCAzczMuODEtMS4yMyA0LjU4LTNoNS44NGMuNzcgMS43NyAyLjUzIDMgNC41OCAzIDIuNzcgMCA1LTIuMjMgNS01cy0yLjIzLTUtNS01eiIgZmlsbD0iIzQ0NCIvPjwvc3ZnPg==");
}
/**
* Icons for dark backgrounds
*/
/* External links */
.box-fact a[target="_blank"],
.box-warning a[target="_blank"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMTloLTE0di0xNGg3di0yaC03Yy0xLjExIDAtMiAuOS0yIDJ2MTRjMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3ptLTUtMTZ2MmgzLjU5bC05LjgzIDkuODMgMS40MSAxLjQxIDkuODMtOS44M3YzLjU5aDJ2LTdoLTd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}
/* Other file */
.box-fact a[type="other"], /* NOTE Legacy */
.box-fact a[type="pdf"], /* NOTE Legacy */
.box-fact a.file-link-icon,
.box-warning a[type="other"], /* NOTE Legacy */
.box-warning a[type="pdf"], /* NOTE Legacy */
.box-warning a.file-link-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNiAyYy0xLjEgMC0xLjk5LjktMS45OSAybC0uMDEgMTZjMCAxLjEuODkgMiAxLjk5IDJoMTIuMDFjMS4xIDAgMi0uOSAyLTJ2LTEybC02LTZoLTh6bTcgN3YtNS41bDUuNSA1LjVoLTUuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}
/* Word document */
.box-fact a[type="word"],
.box-fact a[href$=".doc"],
.box-fact a[href$=".docx"],
.box-warning a[type="word"],
.box-warning a[href$=".doc"],
.box-warning a[href$=".docx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMSAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMiA1LjRjLjIuMi40LjYuNC44bC4yLjYuMi40djE1YzAgLjIgMCAuNC0uMi44cy0uMi40LS40LjZjLS4yLjItLjQuNC0uNi40aC0xNy44Yy0uMiAwLS40IDAtLjgtLjJzLS40LS4yLS42LS40Yy0uMi0uMi0uNC0uNC0uNC0uNiAwLS4yLS4yLS40LS4yLS44di0yMC4yYzAtLjIgMC0uNC4yLS44bC40LS40cy40LS40LjYtLjRsLjgtLjJoMTJzLjIgMCAuNC4yLjQuMi42LjJsLjguNi42LjRzLjIuNC40LjZsLjYuNi42LjYuNi42LjYuNmMuMi4yLjQuNC40LjYgMCAuMi40LjIuNi40em0tLjYgMTYuOHYtMTQuNmgtNS40cy0uMiAwLS4yLS4ybC0uMi0uMnYtNS42aC0xMnYyMWgxOGMtLjItLjItLjItLjItLjItLjR6bS02LTExdi0yLjJoNGwtMyAxMmgtMi40bC0xLjYtNy4yLTEuOCA3LjJoLTIuNmwtMi42LTEyaDIuNmwxLjQgNy40IDEuOC03LjRoMi40bDEuNiA3LjQgMS4yLTUuMmgtMXptMy40LTcuMmMtLjIgMC0uNC0uMi0uNi0uNGwtLjQtLjRjLS4yLS4yLS40LS4yLS40LS40bC0uNC0uNHYzLjZoMy42bC0uNC0uNHMtLjItLjQtLjQtLjRjLS4yLS4yLS4yLS40LS40LS40cy0uNC0uNi0uNi0uOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}
/* Excel document */
.box-fact a[type="excel"], /* NOTE Legacy */
.box-fact a[href$=".xls"],
.box-fact a[href$=".xlsx"],
.box-warning a[type="excel"],
.box-warning a[href$=".xls"],
.box-warning a[href$=".xlsx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMSAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgOWgtMy4ybC0yLjIgMy40LTIuMi0zLjRoLTMuMmwzLjggNS44LTQuNCA2LjJoNi4ydi0yaC0xLjRsMS4yLTEuOCAyLjYgMy44aDMuNGwtNC40LTYuMiAzLjgtNS44em0zLjgtNC40bC0zLjQtMy40Yy0uNi0uNi0yLjItMS4yLTMuMi0xLjJoLTExLjJjLTEgMC0yIC44LTIgMS44djIwLjRjMCAxIC44IDEuOCAxLjggMS44aDE3LjRjMSAwIDEuOC0uOCAxLjgtMS44di0xNC40Yy4yLTEtLjQtMi40LTEuMi0zLjJ6bS00LjYtMi40Yy4yIDAgLjIuMi4yLjJsMy40IDMuNC4yLjJoLTMuOHYtMy44em00LjQgMjBjMCAuMi0uMi40LS40LjRoLTE3LjJjLS4yIDAtLjQtLjItLjQtLjR2LTIwLjRjMC0uMi4yLS40LjQtLjRoMTEuNnY2aDZ2MTQuOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}
/* PowerPoint document */
.box-fact a[type="powerpoint"], /* NOTE Legacy */
.box-fact a[href$=".ppt"],
.box-fact a[href$=".pptx"],
.box-warning a[type="powerpoint"], /* NOTE Legacy */
.box-warning a[href$=".ppt"],
.box-warning a[href$=".pptx"] {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMiAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuOCA0LjhsLTMuNC0zLjRjLS44LS44LTIuMi0xLjQtMy4yLTEuNGgtMTEuNGMtMSAwLTEuOC44LTEuOCAxLjh2MjAuNGMwIDEgLjggMS44IDEuOCAxLjhoMTcuNGMxIDAgMS44LS44IDEuOC0xLjh2LTE0LjJjLjItMS4yLS40LTIuNi0xLjItMy4yem0tNC44LTIuNmMuMiAwIC4yLjIuMi4ybDMuNCAzLjQuMi4yaC0zLjh2LTMuOHptNC42IDIwYzAgLjItLjIuNC0uNC40aC0xNy40Yy0uMiAwLS40LS4yLS40LS40di0yMC40YzAtLjIuMi0uNC40LS40aDExLjh2Nmg2djE0Ljh6bS01LjQtOC40YzAgMS0uNCAxLjgtMSAyLjQtLjguNi0xLjggMS0yLjggMWgtMXYzLjRoLTEuNnYtOS40aDIuNmMxIDAgMiAuMiAyLjYuNi42LjIgMS4yIDEuMiAxLjIgMnptLTQuOCAxLjhoLjhjLjggMCAxLjQtLjIgMS44LS40LjQtLjIuNi0uNi42LTEuMnMtLjItMS0uNC0xLjJjLS40LS40LTEtLjQtMS42LS40aC0xdjMuMmgtLjJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}
/* Image */
.box-fact a[type="picture"], /* NOTE Legacy */
.box-fact .image-viewer-component-link,
.box-warning a[type="picture"], /* NOTE Legacy */
.box-warning .image-viewer-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgMTl2LTE0YzAtMS4xLS45LTItMi0yaC0xNGMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnptLTEyLjUtNS41bDIuNSAzLjAxIDMuNS00LjUxIDQuNSA2aC0xNGwzLjUtNC41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
/* Video component */
.box-fact a[type="video"], /* NOTE Legacy */
.box-fact .video-component-link,
.box-warning a[type="video"], /* NOTE Legacy */
.box-warning .video-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgM2gtMThjLTEuMTEgMC0yIC44OS0yIDJ2MTJjMCAxLjEuODkgMiAyIDJoNXYyaDh2LTJoNWMxLjEgMCAxLjk5LS45IDEuOTktMmwuMDEtMTJjMC0xLjExLS45LTItMi0yem0wIDE0aC0xOHYtMTJoMTh2MTJ6bS01LTZsLTcgNHYtOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}
/* Audio component */
.box-fact a[type="audio"], /* NOTE Legacy */
.box-fact .audio-component-link,
.box-warning a[type="audio"], /* NOTE Legacy */
.box-warning .audio-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMyA5djZoNGw1IDV2LTE2bC01IDVoLTR6bTEzLjUgM2MwLTEuNzctMS4wMi0zLjI5LTIuNS00LjAzdjguMDVjMS40OC0uNzMgMi41LTIuMjUgMi41LTQuMDJ6bS0yLjUtOC43N3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNGgtMjR6IiBmaWxsPSJub25lIi8+PC9zdmc+");
}
/* AppBox */
.box-fact .appBox-component-link,
.box-warning .appBox-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTUgNy41di01LjVoLTZ2NS41bDMgMyAzLTN6bS03LjUgMS41aC01LjV2Nmg1LjVsMy0zLTMtM3ptMS41IDcuNXY1LjVoNnYtNS41bC0zLTMtMyAzem03LjUtNy41bC0zIDMgMyAzaDUuNXYtNmgtNS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
/* QuestBox */
.box-fact .questBox-component-link,
.box-warning .questBox-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM2gtNC4xOGMtLjQyLTEuMTYtMS41Mi0yLTIuODItMi0xLjMgMC0yLjQuODQtMi44MiAyaC00LjE4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnptLTcgMGMuNTUgMCAxIC40NSAxIDFzLS40NSAxLTEgMS0xLS40NS0xLTEgLjQ1LTEgMS0xem0tMiAxNGwtNC00IDEuNDEtMS40MSAyLjU5IDIuNTggNi41OS02LjU5IDEuNDEgMS40Mi04IDh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}
/* Simulation component */
.box-fact .simulation-component-link,
.box-warning .simulation-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCAwaDI0djI0aC0yNHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTguOTkgMTEuNWMuMzQgMCAuNjcuMDMgMSAuMDdsLjAxLTExLjU3LTIwIDIwaDExLjU2Yy0uMDQtLjMzLS4wNy0uNjYtLjA3LTEgMC00LjE0IDMuMzYtNy41IDcuNS03LjV6bTMuNzEgNy45OWMuMDItLjE2LjA0LS4zMi4wNC0uNDkgMC0uMTctLjAxLS4zMy0uMDQtLjQ5bDEuMDYtLjgzYy4wOS0uMDguMTItLjIxLjA2LS4zMmwtMS0xLjczYy0uMDYtLjExLS4xOS0uMTUtLjMxLS4xMWwtMS4yNC41Yy0uMjYtLjItLjU0LS4zNy0uODUtLjQ5bC0uMTktMS4zMmMtLjAxLS4xMi0uMTItLjIxLS4yNC0uMjFoLTJjLS4xMiAwLS4yMy4wOS0uMjUuMjFsLS4xOSAxLjMyYy0uMy4xMy0uNTkuMjktLjg1LjQ5bC0xLjI0LS41Yy0uMTEtLjA0LS4yNCAwLS4zMS4xMWwtMSAxLjczYy0uMDYuMTEtLjA0LjI0LjA2LjMybDEuMDYuODNjLS4wMi4xNi0uMDMuMzItLjAzLjQ5IDAgLjE3LjAxLjMzLjAzLjQ5bC0xLjA2LjgzYy0uMDkuMDgtLjEyLjIxLS4wNi4zMmwxIDEuNzNjLjA2LjExLjE5LjE1LjMxLjExbDEuMjQtLjVjLjI2LjIuNTQuMzcuODUuNDlsLjE5IDEuMzJjLjAyLjEyLjEyLjIxLjI1LjIxaDJjLjEyIDAgLjIzLS4wOS4yNS0uMjFsLjE5LTEuMzJjLjMtLjEzLjU5LS4yOS44NC0uNDlsMS4yNS41Yy4xMS4wNC4yNCAwIC4zMS0uMTFsMS0xLjczYy4wNi0uMTEuMDMtLjI0LS4wNi0uMzJsLTEuMDctLjgzem0tMy43MSAxLjAxYy0uODMgMC0xLjUtLjY3LTEuNS0xLjVzLjY3LTEuNSAxLjUtMS41IDEuNS42NyAxLjUgMS41LS42NyAxLjUtMS41IDEuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
}
/* Presentation */
.box-fact .presentation-component-link,
.box-warning .presentation-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgOHY4bDUtNC01LTR6bTktNWgtMTRjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTE0YzAtMS4xLS45LTItMi0yem0wIDE2aC0xNHYtMTRoMTR2MTR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}
/* Timeline */
.box-fact .timeline-component-link,
.box-warning .timeline-component-link {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzkgMTljLTIuMDUgMC0zLjgxIDEuMjMtNC41OCAzaC01Ljg0Yy0uNzctMS43Ny0yLjUzLTMtNC41OC0zcy0zLjgxIDEuMjMtNC41OCAzaC01Ljg0Yy0uNzctMS43Ny0yLjUzLTMtNC41OC0zLTIuNzcgMC01IDIuMjMtNSA1czIuMjMgNSA1IDVjMi4wNSAwIDMuODEtMS4yMyA0LjU4LTNoNS44NGMuNzcgMS43NyAyLjUzIDMgNC41OCAzczMuODEtMS4yMyA0LjU4LTNoNS44NGMuNzcgMS43NyAyLjUzIDMgNC41OCAzIDIuNzcgMCA1LTIuMjMgNS01cy0yLjIzLTUtNS01eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
/**
* NOTE Legacy inline icon support
*/
img.inline-icon {
height: 1em;
display: inline-block;
padding-right: 0.25em;
vertical-align: middle;
}
}
/* END @media screen */
/**
* 7-Gy-Vux.css
*/
@media screen {
/**
* Sans serif
*/
/* Headings */
.gca-article h1,
.gca-article h2,
.gca-article h3,
.gca-article h4,
.gca-article h5,
.gca-article h6,
.gca-article .sub-title {
font-weight: 400;
}
.ingress {
font-size: 1.14em;
font-weight: 600;
}
.gca-article small,
.math-comment,
.image figcaption,
.text-small {
font-size: 0.92em;
}
.image .caption-large {
font-size: 1.15em;
}
.book-overview-content {
height: 92%;
}
.book-overview-header .header-menu a {
padding-bottom: 0.7rem;
}
.book-overview-header .close {
top: 1.5%;
}
/**
* Serif
*/
.serif {
font-family: "Libre Baskerville", serif;
}
.serif .ingress {
font-size: 1.22em;
}
.serif .indent {
text-indent: 1.15em;
}
.serif .math-comment {
font-family: "Libre Baskerville", serif;
}
}
/* END @media screen */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment