ui-style.css

:root {
	--OLSKDecorBackgroundDeep: default;
	--OLSKDecorBackgroundDeepEdge: default;

	--OLSKDecorPadding: 10px;
	--OLSKDecorContainerPadding: 10px;
	--OLSKCommonContainerMaxWidth: 420px;

	--OLSKCommonFontFamily: 'Lucida Grande', sans-serif;
	--OLSKCommonFontSize: 10.5pt;

	--OLSKCommonHeadingFontFamily: 'Helvetica Neue';
	--OLSKCommonQuoteFontFamily: 'Georgia', serif;

	--OLSKDecorBackgroundDark: #eeeeee;
	--OLSKDecorForegroundLight: #ddd;
	--OLSKCommonBackground: white;
	--OLSKCommonForeground: black;
	--OLSKDecorFormBlendBackground: var(--OLSKCommonBackground);
	--OLSKDecorFormBlendBorderColor: var(--OLSKCommonForeground);
	--OLSKDecorFormBlendBorder: 1px solid var(--OLSKDecorFormBlendBorderColor);

	--OLSKDecorBorderColor: var(--OLSKCommonForeground);
	--OLSKDecorBorder: 1px solid var(--OLSKDecorBorderColor);
	--OLSKCommonBorderColor: rgba(0, 0, 0, 0.3);
	--OLSKCommonBorder: 1px solid var(--OLSKCommonBorderColor);

	--OLSKCommonEdgeBorder: 1px solid var(--OLSKDecorForegroundLight);

	--OLSKCommonInteractiveFill: hsl(0, 0%, 90%);

	--OLSKChunkHeadingBorderColor: #cccccc;
	--OLSKChunkHeadingBackground: #e9e9e9;

	--OLSKCommonInputPadding: 5px;

	--OLSKSharedPadding: 4px;
	--OLSKBorderRadius: 5px;

	--OLSKSectionSpacing: 2em;

	--OLSKCollectionItemsLocusColorDefault: #e6e6e6;
	--OLSKCollectionItemsLocusColorActive: #1a81ff;
	--OLSKCollectionItemsLocusColorActiveInverse: white;

	
	--OLSKCodeBackground: #eeeeee;
	--OLSKCodeForeground: #333;

	--OLSKStickyHeaderTop: 0;
}

html, body {
	height: 100vh;
}

body {
	background: var(--OLSKDecorBackgroundDeep);
}

/* OLSKCommonEdge */

.OLSKCommonEdgeTop {
	border-top: var(--OLSKCommonEdgeBorder);
}

.OLSKCommonEdgeRight {
	border-right: var(--OLSKCommonEdgeBorder);
}

.OLSKCommonEdgeBottom {
	border-bottom: var(--OLSKCommonEdgeBorder) !important;
}

/* OLSKDecorFixed */

.OLSKDecorFixed {
	--OLSKDecorFixedSecondaryHeight: 53px;
}

@media screen and (min-width: 760px) {

.OLSKDecorFixed {
	--OLSKDecorFixedSecondaryHeight: 41px;
}

}

@media screen and (max-width: 760px) {

.OLSKDecorFixedHeader {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	z-index: 2;
}

}

.OLSKDecorFixedSecondary {
	margin-top: var(--OLSKDecorFixedSecondaryHeight);
}

.OLSKDecorFixedSecondary .OLSKStickyHeader {
	top: var(--OLSKDecorFixedSecondaryHeight);
	z-index: 1;
}

/* OLSKStickyHeader */

.OLSKStickyHeader {
	position: -webkit-sticky;
	position: sticky;
	top: var(--OLSKStickyHeaderTop);
}

/* OLSKViewport */

@media screen and (min-width: 760px) {

	.OLSKViewport {
		height: 100%;
		
		/* OLSKViewportFlexbox:Parent */
		display: flex;
		flex-direction: column;
	}

}

@media screen and (min-width: 764px) {

	.OLSKViewport {
		width: 90%;
		max-width: 920px;
		margin: auto;
		height: 90%;
		position: relative;
		top: 4%;

		padding: 10px;
		padding-bottom: 2px;
		border-radius: 5px;
		border: 1px solid var(--OLSKDecorBackgroundDeepEdge);

		background: var(--OLSKCommonBackground);
	}

}

@media screen and (max-width: 760px) {

.OLSKViewport {
	min-height: 100vh;

	/* OLSKViewportGrid:Parent */
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 100%;
}

.OLSKMobileViewInactive {
	display: unset !important;

	position: absolute;
	left: -200vw;
}

.OLSKMobileViewInactive:last-child {
	left: unset;
	top: 0;
	right: 110vw;
}

.OLSKMobileViewHeader {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.OLSKMobileViewFooter {
	position: sticky;
	bottom: 0;
}

}

/* OLSKViewportContent */

@media screen and (min-width: 760px) {

.OLSKViewportContent {
	--OLSKViewportMasterWidth: 300px;
	/* Chrome/Firefox scroll flexbox child */
	overflow: auto;

	/* OLSKViewportFlexbox:Child */
	flex-grow: 1;

	/* OLSKViewportContentFlexbox:Parent */
	display: flex;
}

.OLSKViewportContent .OLSKViewportMaster {
	/* OLSKViewportContentFlexbox:Child */
	flex-basis: var(--OLSKViewportMasterWidth);
	flex-shrink: 0;
}

.OLSKViewportContent .OLSKViewportDetail {
	/* OLSKViewportContentFlexbox:Child */
	flex-grow: 1;
}

}

/* OLSKVisibility */

@media screen and (min-width: 760px) {

.OLSKVisibilityMobile {
	display: none !important;
}

.OLSKVisibilityDesktopScreenreader {
	display: unset !important;

	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

}

/* OLSKToolbar */

.OLSKToolbar {
	--OLSKToolbarButtonSize: 20px;
	--OLSKToolbarMinHeight: 32px;
	--OLSKToolbarElementSpacing: 2px;

	min-height: var(--OLSKToolbarMinHeight);
	padding: var(--OLSKSharedPadding);

	background: var(--OLSKCommonBackground);

	/* Firefox header spacing */
	line-height: 0;

	/* OLSKToolbarFlexbox:Parent */
	display: flex; 
	align-items: center;
}

@media screen and (max-width: 760px) {

.OLSKToolbar {
	--OLSKToolbarButtonSize: 24px;
	--OLSKToolbarMinHeight: 44px;
}

}

.OLSKViewport .OLSKToolbar {
	/* OLSKViewportFlexbox:Child */
	flex-shrink: 0;
}

.OLSKIsLoading .OLSKToolbar * {
	visibility: hidden;
}

.OLSKToolbarJustify {
	/* OLSKToolbarFlexbox:Parent */
	justify-content: space-between;
}

.OLSKToolbarFlexible {
	/* OLSKToolbarFlexbox:Child */
	flex-grow: 1;
}

/* OLSKToolbarElementGroup */

.OLSKToolbarElementGroup {
	margin: 0 var(--OLSKToolbarElementSpacing);
}

.OLSKToolbarElementGroup button {
	margin: 0 var(--OLSKToolbarElementSpacing);
}

@media screen and (max-width: 760px) {

.OLSKToolbarElementGroup button {
	--OLSKToolbarElementSpacing: 8px;
}

}

/* OLSKToolbarButton */

.OLSKToolbarButton {
	display: inline-block;
	width: var(--OLSKToolbarButtonSize);
	height: var(--OLSKToolbarButtonSize);
}

.OLSKToolbarButton > *, .OLSKToolbarButton svg {
	width: inherit;
	height: inherit;
}

.OLSKToolbarButton:disabled {
	opacity: 0.3;
}

.OLSKDecorTappable {
	cursor: pointer;

	/* DisableTextSelection */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.OLSKDecorTextVisual {
	cursor: default;

	/* DisableTextSelection */
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.OLSKDecorButtonNoStyle {
	background: none;
	border: none !important;
	padding: 0;
}

.OLSKMobileSafariSmoothScrolling {
	-webkit-overflow-scrolling: touch;
}

/* OLSKNarrow */

.OLSKNarrow {
	/* OLSKNarrowFlexbox:Parent */
	display: flex;
	flex-direction: column;
}

.OLSKNarrowToolbar {
	/* OLSKNarrowFlexbox:Child */
	flex-shrink: 0;
}

.OLSKNarrowBody {
	overflow: auto;
	
	/* OLSKNarrowFlexbox:Child */
	flex-grow: 1;
}

.OLSKNarrowBody .OLSKCollection {
	flex-shrink: 0;
}

.OLSKNarrowBody .OLSKCollectionItemLocus {
	background: var(--OLSKCollectionItemsLocusColorDefault);
}

@media screen and (min-width: 760px) {

.OLSKNarrowFocused .OLSKCollectionItemLocus {
	background: var(--OLSKCollectionItemsLocusColorActive);
	color: var(--OLSKCollectionItemsLocusColorActiveInverse);
}

}

/* OLSKDecor */

.OLSKDecor {
	padding: var(--OLSKDecorContainerPadding);

	background: var(--OLSKCommonBackground);
	font-family: var(--OLSKCommonFontFamily);
	font-size: var(--OLSKCommonFontSize);
	color: var(--OLSKCommonForeground);
}

.OLSKDecorCapped {
	max-width: var(--OLSKCommonContainerMaxWidth);

	margin: auto;
}

.OLSKDecorNoTopPad {
	padding-top: 0;
}

.OLSKDecorOutline {
	--OLSKDecorCappedBorder: 1px solid var(--OLSKDecorBackgroundDeepEdge);

	border-right: var(--OLSKDecorCappedBorder) !important;
	border-left: var(--OLSKDecorCappedBorder) !important;
}

@media (max-width: 450px) {
	.OLSKDecorOutline {
		border: none;
	}
}

.OLSKDecor h1, .OLSKDecor h2, .OLSKDecor h3, .OLSKDecor h4 {
	font-family: var(--OLSKCommonHeadingFontFamily);
}

.OLSKDecor h1 {
	padding-bottom: var(--OLSKSharedPadding);
	border-bottom: var(--OLSKDecorBorder);

	margin-top: var(--OLSKSectionSpacing);

	font-size: calc(var(--OLSKCommonFontSize) * 1.8);
}

.OLSKDecor h2 {
	font-size: calc(var(--OLSKCommonFontSize) * 1.3);
}

.OLSKDecor ul, .OLSKDecor ol {
	padding-left: 30px;
}

.OLSKDecor img:not(* img) {
	max-width: calc(100% - var(--OLSKDecorPadding) * 2);

	border: var(--OLSKDecorBorder);
	border-width: var(--OLSKDecorPadding);
	border-color: var(--OLSKDecorForegroundLight);
	border-radius: var(--OLSKBorderRadius);
}

.OLSKDecor blockquote {
	margin-left: 0;
	padding-left: var(--OLSKDecorPadding);
	border-left: var(--OLSKDecorBorder);

	font-style: oblique;
	font-family: var(--OLSKCommonQuoteFontFamily);
	font-size: calc(var(--OLSKCommonFontSize) * 0.9);
}

.OLSKDecor hr {
	height: 1px;
	border: none;

	background: var(--OLSKDecorBorderColor);
}

.OLSKDecor table {
	width: 100%;
	border-collapse: collapse;

	margin: calc(var(--OLSKSectionSpacing) / 2) 0;
}

.OLSKDecor table tr td {
	padding: var(--OLSKSharedPadding);
	border-top: var(--OLSKDecorBorder);
	border-color: var(--OLSKDecorForegroundLight);
}

/* form */

.OLSKDecor input, .OLSKDecor button, .OLSKDecorPress, .OLSKDecor input[type="submit"], .OLSKDecor textarea, .OLSKDecorInput {	
	display: inline-block;
	padding: var(--OLSKCommonInputPadding);
	border: var(--OLSKCommonBorder);
	border-radius: var(--OLSKBorderRadius);
	
	color: inherit;
}

.OLSKDecor input[type="text"], .OLSKDecor input[type="email"], .OLSKDecor textarea, .OLSKDecorInput {	
	/* OLSKMobileSafariRemoveDefaultInputStyle */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.OLSKDecor button, .OLSKDecorPress, .OLSKDecor input[type="submit"] {
	background: var(--OLSKCommonInteractiveFill);
}

.OLSKDecor a {	
	color: var(--OLSKCommonLinkColor);
}

a.OLSKDecorPress {
	text-decoration: none;
}

.OLSKDecorPressCall {
	padding: calc(var(--OLSKSharedPadding) * 2.5) calc(var(--OLSKSharedPadding) * 4);
	border: 2px solid var(--OLSKCommonForeground) !important;
	
	font-family: var(--OLSKCommonHeadingFontFamily);
	font-weight: bold;
	font-size: calc(var(--OLSKCommonFontSize) * 1.1);
	color: var(--OLSKCommonForeground);
	background: none !important;
}

.OLSKDecorPressCallInverted {
	border:  none !important;
	background: black !important;
	color: white !important;
}

.OLSKDecorPressDestroy {
	border-color: #800002 !important;
	background: #ffefef !important;
	color: #800002 !important;
}

.OLSKDecor code {
	display: inline-block;
	padding: var(--OLSKSharedPadding);
	border-radius: var(--OLSKBorderRadius);

	background: var(--OLSKCodeBackground);
	color: var(--OLSKCodeForeground);
}

.OLSKDecor :disabled {
	opacity: 0.5;
}

/* OLSKDecorTitle */

.OLSKDecorTitle {
	font-weight: bold;
	font-family: var(--OLSKCommonHeadingFontFamily);
	font-size: calc(var(--OLSKCommonFontSize) * 2);
}

/* OLSKDecorNotice */

.OLSKDecorNotice {
	padding: var(--OLSKDecorPadding);
	border: var(--OLSKDecorBorder);

	margin: calc(var(--OLSKDecorPadding) * 2) 0;
}

.OLSKDecorNotice p:first-child {
	margin-top: 0;
}

.OLSKDecorNotice p:last-child {
	margin-bottom: 0;
}

.OLSKCommonAlert {
	padding: var(--OLSKDecorPadding);

	background: var(--OLSKDecorBackgroundDark);
}

/* OLSKDecorCompareTable */

.OLSKDecorCompareTable th, .OLSKDecorCompareTable td {
	padding: 10px !important;
	vertical-align: top;
}

.OLSKDecorCompareTable td:first-child {
	width: 45%;
}

.OLSKDecorCompareTable td:not(:first-child) {
	text-align: center;
}

.OLSKDecorCompareTable tr:nth-child(2n) {
	background: hsl(0, 0%, 95%);
}

.OLSKDecorCompareTable small {
	display: block;

	margin-top: 8px;
}

/* OLSKDecorAction */

.OLSKDecorAction {
	text-align: center;
	background: #ddd !important;
	border: none !important;
}

.OLSKDecorAction :first-child {
	display: block;
	
	font-size: calc(var(--OLSKCommonFontSize) * 2.5);
}

.OLSKDecorAction * {
	margin: 10px !important;
}

/* OLSKCommonTie */

.OLSKCommonTie {
	display: block;

	margin: 40px 0;
	
	text-align: center;
}

.SWARLink {
	opacity: 0.5;
}

/* OLSKCommonRootLink */

.OLSKCommonRootLink {
	width: 70px;
	display: block;

	margin: 30px auto;
}

.OLSKCommonRootLink img {
	width: inherit;
}

/* OLSKCommonCard */

.OLSKCommonCard {
	display: flex;
	align-items: center;
}

.OLSKCommonCard > img, .OLSKCommonCard > a img {
	--OLSKCommonCardImageSize: 70px;

	width: var(--OLSKCommonCardImageSize);
	min-width: var(--OLSKCommonCardImageSize);

	margin-right: calc(var(--OLSKSharedPadding) * 2);
}

.OLSKCommonCard > :last-child > :nth-child(1) {
	display: block;
	
	font-weight: bold;
	font-family: var(--OLSKCommonHeadingFontFamily);
}

/* OLSKCommonCrownCard */

.OLSKCommonCrownCard {
	margin: var(--OLSKSectionSpacing) 0;
}

.OLSKCommonCrownCard > :last-child > :nth-child(1) {
	font-size: calc(var(--OLSKCommonFontSize) * 2.5);
}

.OLSKCommonCrownCard > :last-child > :nth-child(2) {
	font-style: oblique;
}

/* OLSKCommonCrownCardMini */

.OLSKCommonCrownCardMini > img {
	--OLSKCommonCardImageSize: 32px;

	margin-right: var(--OLSKSharedPadding);
}

/* OLSKLanding */

.OLSKLanding {
	margin: calc(var(--OLSKSectionSpacing) * 2) 0;
}

.OLSKLandingHeading {
	font-size: calc(var(--OLSKCommonFontSize) * 3);
}

.OLSKLandingBlurb {
	font-size: calc(var(--OLSKCommonFontSize) * 1.2);

	opacity: 0.5;
}

/* OLSKCommonFeatureCard */

.OLSKCommonFeatureCard {
	margin: calc(var(--OLSKSectionSpacing) / 2) 0;
}

.OLSKCommonFeatureCard > img {
	--OLSKCommonCardImageSize: 54px;
}

.OLSKCommonFeatureCard > :last-child > :nth-child(1) {
	font-family: unset;
}

/* OLSKTestimonialListItem */

.OLSKTestimonialListItem {
	padding: var(--OLSKDecorPadding);

	margin: calc(var(--OLSKSectionSpacing) / 2) 0;

	background: var(--OLSKDecorBackgroundDark);
}

.OLSKTestimonialListItemAuthor {
	font-size: calc(var(--OLSKCommonFontSize) * 0.8);
}

/* OLSKCommonWhatIsIt */

.OLSKCommonWhatIsIt {	
	font-weight: bold;
}

/* OLSKCommonVideoList */

.OLSKCommonVideoList {
	max-width: 350px;
}

.OLSKCommonVideoListItem {
	--OLSKCommonVideoBorderWidth: 13;
	--OLSKCommonVideoWide: 1440;
	--OLSKCommonVideoHigh: 800;
	
	padding-top: calc(((var(--OLSKCommonVideoHigh) + var(--OLSKCommonVideoBorderWidth) * var(--OLSKCommonVideoBorderWidth)) / (var(--OLSKCommonVideoWide) + var(--OLSKCommonVideoBorderWidth) * var(--OLSKCommonVideoBorderWidth))) * 100.00%);
	border: calc(var(--OLSKCommonVideoBorderWidth) * 1px) var(--OLSKDecorForegroundLight) solid;
	border-radius: var(--OLSKBorderRadius);

  position: relative;

  overflow: hidden;
}

.OLSKCommonVideoListItem iframe {
	border: none;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.OLSKCommonVideoListItemMobile {
	--OLSKCommonVideoWide: 750;
	--OLSKCommonVideoHigh: 1334;
}

.OLSKCommonVideoListItemSquare {
	--OLSKCommonVideoWide: 730;
	--OLSKCommonVideoHigh: 540;
}

/* OLSKDecorFormBlend */

.OLSKDecorFormBlend input, .OLSKDecorFormBlend button:not(.OLSKDecorButtonNoStyle), .OLSKDecorFormBlend .OLSKDecorPress, .OLSKDecorFormBlend input[type="submit"], .OLSKDecorFormBlend textarea, .OLSKDecorFormBlend .OLSKDecorInput {	
	border: var(--OLSKDecorFormBlendBorder);
	
	background: var(--OLSKDecorFormBlendBackground);
	color: var(--OLSKCommonForeground);
}

.OLSKDecorFormBlend input::placeholder, .OLSKDecorFormBlend textarea::placeholder, .OLSKDecorFormBlend .OLSKDecorInput::placeholder {	
	color: var(--OLSKDecorForegroundLight);
}

/* OLSKDecorBigForm */

.OLSKDecorBigForm p:nth-child(1) {
	margin-top: 0;
}

.OLSKDecorBigForm input[type=text], .OLSKDecorBigForm input[type=email], .OLSKDecorBigForm input[type=url], .OLSKDecorBigForm input[type=tel], .OLSKDecorBigForm textarea {
	width: 90%;
	padding: calc(var(--OLSKSharedPadding) * 2);
}

/*.OLSKCommonForm input[type=text] {
	line-height: 1.7;
}*/

.OLSKDecorBigForm textarea {
	min-height: 200px;
}

.OLSKDecorBigForm hr {
	width: 90%;

	margin: 0;

	opacity: 0.5;
}

/* OLSKDecorX */

.OLSKDecorX a:not([href*="http"]):before {
  content: "[[";
  
  opacity: 0.5;
}

.OLSKDecorX a:not([href*="http"]):after {
  content: "]]";
  
  opacity: 0.5;
}

.OLSKDecorX a[href*="http"]:after {
  content: "◱";

  display: inline-block;

  margin-left: 3px;

  opacity: 0.5;
  text-decoration: none;
}

.OLSKDecorX * {
 max-width: 100%;
}

/* OLSKDecorSilentLink */

.OLSKDecorSilentLink:after {
 content: unset !important;
}

.OLSKDecorSilentLink img {
 border: none !important;
}

/* OLSKDecorGlossary */

.OLSKDecorGlossary {
	padding: 30px;
	border-radius: 8px;

	margin: 50px 0;

	background: hsl(0, 0%, 96%);
	color: hsl(0, 0%, 20%);
}

.OLSKDecorGlossary :first-child {
	margin-top: 0;
}

.OLSKDecorGlossary :last-child {
	margin-bottom: 0;
}

.OLSKDecorGlossary dt {
	font-weight: bold;
}

.OLSKDecorGlossary dd {
	margin: 10px 0;
}

/* OLSKCollection */

.OLSKIsLoading .OLSKCollection {
	visibility: hidden;
}

.OLSKCollectionChunkHeading {
	padding: 6px;
	outline: var(--OLSKChunkHeadingBorderColor) solid 1px;

	font-weight: bold;
	color: var(--OLSKCommonForeground);
	background: var(--OLSKChunkHeadingBackground);
}

.OLSKCollectionItemStash .OLSKCollectionItemStashStatus {
	background: var(--OLSKCommonForeground);
}

.OLSKCollectionItemStashStatus {
	--OLSKCollectionItemStashStatusSize: 23px;
	
	display: block;
	width: var(--OLSKCollectionItemStashStatusSize);
	height: var(--OLSKCollectionItemStashStatusSize);
	border: 1px solid var(--OLSKCommonForeground);
	border-radius: calc(var(--OLSKCollectionItemStashStatusSize) / 2 + 1px);

	margin: 10px;
	margin-right: 0;

	display: flex;
	align-items: center;
	justify-content: center;
}

.OLSKCollectionItemStashStatusImage * {
	stroke: var(--OLSKCommonBackground);
}

/* OLSKBanner */

.OLSKBanner {
	--OLSKBannerForeground: black !important;

	padding: 8px;

	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	
	background: #f3f3f3;
	border-top: 1px solid #ccc;
	text-align: center;

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 1;
}

.OLSKBanner * {
	color: var(--OLSKBannerForeground) !important;
}

.OLSKBannerLink {
	text-decoration: none;
	font-weight: normal;
	
	display: flex;
	align-items: center;
}

@media screen and (max-width: 760px) {

	.OLSKBanner {
		padding: 4px;

		display: flex;
		align-items: center;
		text-align: center;
	}

}

/* OLSKDecorModule */

.OLSKDecorModule {
	--OLSKDecorModuleForeground: #333 !important;

	padding: 10px 20px;
	border-radius: 5px;
	border: 1px solid #bbb;

	margin: 80px 0;

	background: #ccc;
}

.OLSKDecorModule * {
	color: var(--OLSKDecorModuleForeground);
	border-color: var(--OLSKDecorModuleForeground);
}

.OLSKDecorModule a, .OLSKDecorModule .OLSKDecorPressCall {
	border-color: var(--OLSKDecorModuleForeground) !important;
	color: var(--OLSKDecorModuleForeground) !important;
}

/* ROCOGazette */

.ROCOGazette {
	--OLSKDecorModuleForeground: white !important;
	
	border-color: black;

	background: #333;
}

.ROCOGazette * {
	color: white;
	border-color: white !important;
}

.ROCOGazette input[type="email"]  {
	background: var(--OLSKDecorModuleForeground) !important;
	border-color: var(--OLSKDecorModuleForeground) !important;
	color: black !important;
}

.ROCOGazette input::placeholder  {
	color: grey !important;
}

/* OLSKJar */

.OLSKJar {
	--OLSKDecorModuleForeground: #333 !important;
	text-align: center;
}

.OLSKJar a  {
	background: var(--OLSKDecorModuleForeground);
	color: white !important;
}

/* OSFeedbox */

.OSFeedbox {
	--OLSKDecorModuleForeground: #733132 !important;
	padding: 10px 0;
	border-color: #f3e5e5;

	background: #fffff1;
}

.OSFeedbox h2, .OSFeedbox a  {
	margin: 8px;
}

.OSFeedbox sup {
	font-weight: lighter;
	font-size: 70%;
}

.OSFeedbox sup a {
	margin: unset;
}

.OSFeedbox hr  {
	background: var(--OLSKDecorModuleForeground) !important;
	height: 0.5;
	margin: 8px;
	opacity: 0.3;
}

.OSFeedboxList a {
	display: block;
	width: 90%;

	margin-bottom: 2px;

	font-size: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

.OSFeedboxList p {
	margin: 0 8px;

	font-size: 85%;
	opacity: 0.6;
}

/* ROCOStandardView */

.ROCOStandardView {
	display: flex;
	flex-direction: column;
}

.ROCOStandardViewHead {
	/* ROCOStandardViewFlexbox:Child */
	flex-shrink: 0;
}

.ROCOStandardViewBody {
	/* ROCOStandardViewFlexbox:Child */
	flex-grow: 1;

	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 760px) {

	.ROCOStandardViewBody {
		overflow: auto;
	}

}

.OLSKJar {
	display: none;
}

.OLSKDecorBlink {
	animation: blink-animation 1s steps(5, start) infinite;
	-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}