/*
	DEVONtechnologies Online Help Stylesheet
	© 2008–2019 DEVONtechnologies, Eric Boehnisch-Volkmann
*/

body { margin: 0px; color: #444; font-size: 10pt; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }

/* Main Container */

#mainbox
{
	background-color: #fff;
	padding-top: 2.6rem;
	padding-bottom: 3rem;
	margin: 0px 5rem 0px 5rem;
}
#mainbox.hasindex { padding-top: 1rem; }
#mainbox-head { margin-bottom: 1em; }
/* #mainbox-body > tbody > tr > td > p:first-of-type.subsection { margin-top: 0em; } */

/* Header and Footer */

#headbar { width: 100%; height: 21px; background-color: #fff; border-bottom: 1px solid #bbb; margin: 0px; }
#headbar > table > tbody > tr > td:nth-of-type(1) { width: 70%; text-align: left; }
#headbar > table > tbody > tr > td:nth-of-type(2) { width: 30%; text-align: right; }

#footbar { width: 100%; background-color: #fff; border-top: 1px solid #bbb; margin-left: 0px; margin-right: 0px; padding-top: 8px; padding-bottom: 8px; }
p.header a, p.footer a { color: #777; font-size: 9pt; line-height: 10pt; font-weight: normal; border-bottom: none; } 
p.header a:hover, p.footer a:hover { color: #328bc8; }
p.header-left { margin: 1px 0px 0px 15px; }
p.header-right { margin: 1px 15px 0px 0px; }
p.footer-left { margin: 0px 0px 0px 15px; }
p.footer-right { margin: 0px 15px 0px 0px; }

/* Sidebar */

td.sidebar { width: 120px; }
td.vertline { background-image: url(../gfx/vertline.png); width: 24px; }
td.vertline-divider { width: 7px; }

/* Quick links */

a.quicklinks { text-decoration: none; border-bottom: 1px #444 dotted; }
a.quicklinks:hover { color: #328bc8; border-bottom: 1px #328bc8 solid; } 
table.quicklinks { float: right; padding-bottom:2em; }
td.quicklinks, a.quicklinks { font-size: 0.75rem; line-height: 1.2rem; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; color: #777777; text-decoration: none; text-align: left; font-weight: normal; } 

/* Content */

h1 { font-size: 1.2rem; margin: 0px; }
h2 { font-size: 1.4rem; font-weight: 600; margin: 0px; }

td { padding: 0px; }

p, ul { margin: 1rem 0em 1rem 0em; }
p
{
	line-height: 1.4rem;
	font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
	text-decoration: none;
}
p:first-child { margin-top: 0px; }
p.image { text-align: center; }
p.image img { max-width: 100%; max-height: 66vh; }
p.sourcecode, code { font-family: Monaco, Courier New; color: #ad5bbf; }
p.sourcecode { word-break: break-all; }
code { font-size: 94%; word-break: break-word; }
p.toc { margin: 0px; padding-top: 4px; padding-bottom: 4px; }

ul { list-style-type: none; padding-left: 1rem; }
li { font-size: 10pt; line-height: 1.4rem; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; text-decoration: none; position: relative; }
li:before:not(.icon)
{
	position: absolute;
	display: block;
	content: '\2022'; /* bullet point, for screen readers */
	text-indent: -999999px; /* move the bullet point out of sight */
	left: -1em;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-image: url('../gfx/icon-bullet.png');
	background-size: 1em 1em;
	background-position: -0.3em .0em;
	top: 0.35em;
}
li.icon { text-indent: -1.5em; margin-left: 0.5em; }
li.icon > img { height: 1em; padding-right: 0.5em; vertical-align: 5%; }
li.icon > img.bullet { vertical-align: -7% }
li.icon > img+b, li.icon > img+em, li.icon > img+a { margin-left: -0.25em; }
li.icon > div { display: inline; margin-left: -0.25em; }

div.container { position: relative; }
p.premium, div.premium, ul.premium, div#mainbox.premium
{
	border-left: 2rem #328bc8 solid;
	margin-left: -5rem;
	padding-left: 3rem;
	min-height: 4rem;
}
ul.premium { padding-left: 4rem; }
div#mainbox.premium { margin-left: 0; border-left-width: 2rem; }
div.premium-label
{
	display: inline-block;
	position: absolute;
	top: 4rem;
	left: -4rem;
	transform: rotate(270deg);
	transform-origin: top left;
	font-size: 0.6rem;
	color: white;
	width: 3.7rem;
	text-align: right;
	letter-spacing: 0.08rem;
	font-weight: bold;
}
div.section > div.premium-label { top: 6.7rem; }
div.section > div.premium-label.hasindex { top: 4.7rem; }
div.premium div.premium-label { left: -0.9rem; }

em { color: #5c84aa; text-decoration: none; font-style: normal; font-weight: 600; }

a { color: #328bc8; text-decoration: none; border-bottom: 1px #328bc8 dotted; } 
a:hover  { /* text-decoration: underline;*/ border-bottom: 1px #328bc8 solid; }
p.subsection { margin-top: 2em; /* color: #328bc8; */ font-weight: 600; text-transform: uppercase; }
td + .subsection { margin-top: 1em; }
span.topic  { font-size: 20pt; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 200; }
span.intro { display:block; font-style:italic; }
span.pname { font-weight: 600; }
span.pname.example {}
span.pname.note {}
span.pname.terminal {}
img.icon { height: 0.9rem; position: relative; bottom: -0.15rem; }

.taskbox, .examplebox, .terminalbox
{
	list-style-type: decimal;
	list-style-position: outside;
	margin-top: 1rem;
	margin-bottom: 1rem; 
	border-radius: 0.5rem;
}
.taskbox { background-color: #f5f5f5; /* outline: solid 1px #ddd; */ }
.examplebox { background-color: #e6ecff; /* outline: solid 1px #c6ccdc; */ }
.terminalbox { background-color: #f5f5f5; /* outline: solid 1px #ddd; */ }
.taskbox td, .examplebox td, .terminalbox td { padding: 0.7rem 0.7rem 0.7rem 0.7rem; }
.taskbox td > p, .examplebox td > p, .terminalbox td > p { margin-bottom: 0; }
.taskbox div.container:last-of-type > p, .examplebox td div.container:last-of-type > p { margin-bottom: 0 }
.terminal-command {}
.terminal-output { color: #666; }

@media (prefers-color-scheme: light)
{
	body, #mainbox, #headbar, #footbar { background-color: #fff; }  /* #f2f2f7 is the popoverBackgroundColor in light mode */
}

@media (prefers-color-scheme: dark)
{
	body, #mainbox, #headbar, #footbar { background-color: #2c2c2e; color: #FFF; }
	#headbar { border-bottom-color: #333; z-index: 1; }
	#footbar { border-top-color: #333; }
	.subsection { color: #FFF; }
	a { filter: brightness(133%); }
	em, code { color: #C06693; }
	img.icon:not(.noinvert) { filter: invert(100); }
	.image > picture > img:not(.selfadjusting) { background-color: #ccc; padding: 1rem; border-radius: 0.5rem; }
	.image > picture > img.selfadjusting { background-color:#000; padding: 1rem; border-radius: 0.5rem; }
	img.versionhistory { filter: none; }
	li.icon > img.bullet:not(.bullet-image) { filter: invert(100%); }
	p.header a, span.footer, span.footer a, a.quicklinks { color: #999; }
	.examplebox, .taskbox { background-color: #222; }
	.terminalbox { background-color: #000; border: 1px solid #999; }
}