html
{
	font-size: calc(10pt + 0.5vh);
	color: black;
	font-family: -apple-system, Helvetica, sans-serif;
	scroll-behavior: smooth;
}

body
{
	font-family: -apple-system, Helvetica, sans-serif;
	margin-top: 0;
	margin-left: 2.5%;
	margin-right: 2.5%;
	text-align: left;
	/* color: #333333; */
	/* background-color: #F8F8F8; */
	color: #D6D6D6;
	background-color: #1E1E1E;
}

:root {
	--link-color: lightBlue;
	--property-color: #1BCCCC;
	--class-color: #F7D358;
	--function-color: #F7819F;
	--null-color: #B4ECBF;
}

h1
{
	font-family: -apple-system, Helvetica, sans-serif;
	font-size: 1.5rem;
	/* text-align: left; */
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	break-after:avoid-column;
}

h2
{
	font-family: -apple-system, Helvetica, sans-serif;
	font-size: 1.25rem;
	/* text-align: left; */
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	margin-top: 5vh;
	break-after:avoid-column;
}

h3 
{
	font-size: 1.0rem;
	/* text-align: left; */
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	margin-top: 3vh;
	break-after:avoid-column;
}

li
{
	margin-bottom: 0.5rem;
}

img
{
	display: block;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	break-inside: avoid-column;	
}

a
{
	/* color:#588FDC; */
	/* color:#d78b15; */
	color: var(--link-color);
	text-decoration: none;
	font-weight: 500;
}

#main {column-fill: auto;}

#main h1:first-of-type {
	margin-top: 0;
}

#main .propertyEnum {
	font-style: italic;
	color: var(--property-color);
	font-weight: 600;
}

#main .classEnum {
	font-style: normal;
	color: var(--class-color);
	font-weight: 600;
}

#main .methodEnum {
	font-style: normal;
	color: var(--function-color);
	font-weight: 600;
}

#main .nullEnum {
	font-style: normal;
	color: var(--null-color);
	font-weight: 600;
}

#main .read-only {
	font-style: italic;
	font-weight: 400;
}

#main .parameterName {
	font-style: italic;
	font-weight: 400;
}

#main dt {
	font-weight: bold;
}

#main p {
	break-inside:avoid-column;
}

#main ul.smaller-list li {
	break-inside: avoid-column;
}

#main div.script-explanation p {
	font-size: 90%;
	break-inside: avoid-column;
}

#main div.no-break-wrapper {
	break-inside: avoid-column;
}

#main table.video-wrap {
	break-inside:avoid-column;
}

#main div.script-explanation p {
	font-size: 90%;
}

#main code {
	counter-increment: line;
	tab-size: 3;
	/* These create the wrap-under */
	display: inline-block;
	padding-left: 100px;
	text-indent: -100px;
	word-break: break-word;
}

#main code:before {
	content: counters(line, ".", decimal-leading-zero);
	-webkit-user-select: none;
	text-align: right;
	padding-right: 10px;
	color: crimson;
}

#main button {
	-webkit-user-select: none;
	user-select: none;
}

/* CALLOUTS */
#main  p.caption-callout {
    text-indent: -24px;
    margin-left: 50px;
    margin-right: 24px;
}

#main  p.caption-callout-secondary {
    text-indent: -29px;
    margin-left: 76px;
    margin-right: 24px;
}

#main  p.image-caption {
    margin: 0 0px 12px 0px;
    color: #FFF !important;
    background-color: #000;
    padding: 8px;
    width: 100%;
    font-family: 'Helvetica', Geneva, Verdana, Arial, sans-serif;
    font-size: 12pt !important;
}

#main span.numeric-callout {
    color: white;
    font-weight: bold;
    background-color: #EF2F24;
    padding: 0 1px 1px 2px;
    font-size: 75%;
    position: relative;
    top: -2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#main span.numeric-callout-blue {
    color: white;
    font-weight: bold;
    background-color: #050E7D;
    padding: 0 1px 1px 2px;
    font-size: 75%;
    position: relative;
    top: -2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* DO THIS TABLE */
#main table.do-this {
    /* background-color: #eee; */
    margin-bottom: 18px;
    padding: 12px;
    width: 100%;
    margin-top: 1em;
    break-inside:avoid-column;
    /* background-color:lightBlue; */
}
#main table.do-this td.leftside {
    width: 140px;
    vertical-align: text-top;
    margin-top:0;
    padding-top:22px;
    background-color: #39F;
}
#main table.do-this td.rightside {
	padding-left:12px;
	padding-top:0.25em;
	padding-right:10px;
	color:white;
	/* background-color:lightBlue; */
}
#main table.do-this
{
	/* background-color: #b050fc; */
	background-color: #333;
	border-collapse: collapse;
	border: 4px solid gray;
}
#main table.do-this tr td p {
    /* color: black; */
    color: white;
}
#main span.do-this
{
	/* background-color: #369; */
	background-color: #39F;
	/* #333; */
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	margin-right: 8px;
	font-size: 22px;
}
#main table.javascript-table {
    font-family: Menlo, monspace;
}
#main span.inline-code
{
	font-family:Menlo,monospace;
	font-size: 90%;
	color:orange;
	padding-left:0.5em;
	padding-right:0.5em;
	background-color:#333;"
}

#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #333;
	color: white;
	text-align: center;
	column-span: all;
}
#footer p
{
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 12px;
	font-size: x-small;
	color: #D6D6D6;
	font-family: -apple-system, Helvetica, sans-serif;
	font-style: normal;
}


pre {
	font-family: Menlo, monospace;
	color: #222222;
	background-color: #f0f0f0;
	padding: 1rem;
	font-size: 85%;
	tab-size: 3;
	border-color: gray;
	border-style: solid;
	border-width: 4px;
	
	white-space: pre-wrap;  
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;	
	break-inside: avoid-column;
	
	counter-reset: line;	
}

pre span.script-title {
	font-family: -apple-system, Helvetica, sans-serif;
	font-weight: bold;
	color: #777777;
	font-size: 120%;
	display:block;
}

pre button {
	text-transform: uppercase;
}
.script-content {display:none;}

@media screen and (orientation:portrait){
	html {font-size: calc(10pt + 0.5vh);}
	/* #nav-table {display:inline;} */
}

@media screen and (orientation:landscape){
	html {font-size: calc(10pt + 0.5vw);}
	/* #nav-table {display:inline;} */
}

@media only screen and (max-width: 680px){
	#title-bar {display: none;}
}

@media only screen and (min-width: 1300px){
	html {font-size: calc(10pt + 0.5vh);}
	body {
		column-count: 2;
		column-gap: 4rem;
		column-rule-style: solid;
	}
	body {
		overflow: auto;
	}
	nav {
		column-span: all;
	}
	#nav-table {
		column-span: all;
	}
}

#nav-table
{
	display: block;
	background-color: #555555;
	width: 105%;
	box-sizing: border-box;
	position: sticky;
	position: -webkit-sticky;
	margin-left: -2.5%;
	top: 0;
	right: 0;
	margin-bottom: 2vh;
	z-index: 1000;
}

#nav-icon {
	color: white;
	font-size: 1.5rem;
}
#help-icon {
	color: white;
	font-size: 1.5rem;
}
#invert-icon {
	color: white;
	font-size: 1.5rem;
	margin-right: 24px;
}
#page-header {
	color: white;
	font-size: 1.25rem;
}
#help-content {
/* 
	width:90vw;
	height:90vh;
	font-family: -apple-system, Helvetica, sans-serif;
 */
}
			
#current-page {
	color:yellow;
	font-weight: bold;
}