/* Copyright 2015-2018, Mathscribe, Inc. */


/* curve.js classes: */

input.no-spinner::-webkit-inner-spin-button
					{ -webkit-appearance: none }
input.no-spinner::-webkit-outer-spin-button
					{ -webkit-appearance: none; margin: 0 }

.ui-keyboard div	{ font-size: 1.1em }	/* override @media rules */
.ui-keyboard-button	{ width: auto; min-width: 2em; height: auto; min-height: 2em }

.ma-param-eq		{ white-space: nowrap }

.ma-slider-param .ui-slider
					{ margin: 0.33em 1em }
.ma-slider-param .ma-param-eq
					{ text-align: center; font-size: 1.1em }

.ma-grid-label		{ font: 80% serif }	/* (numeric) grid labels */
.ma-graphs			{ position: relative }	/* must be a positioned element */
.ma-no-trace		{ margin-left: auto; margin-right: auto }
.ma-graphs canvas	{ cursor: crosshair }
.ma-graph-handle	{ position: absolute; width: 1px; height: 100%; top: 0;
						background-color: #BBB; cursor: crosshair }
.ma-graph-handle:focus	{ background-color: #999 }
.ma-trace			{ font-size: 0.9em; margin-top: 1em; text-align: left }
.ma-indeps-vals		{ margin-top: 0.5em }
.ma-deps-vals		{ margin-top: 1em; min-width: 10em }

@media only screen and (max-device-width: 1024px) {
	.ma-grid-label		{ font-family: Helvetica, sans-serif }
	.ui-keyboard-input-current
						{ -webkit-appearance: none }	/* iOS Safari work-around */
	button:focus, input[type="button"]:focus
						{ box-shadow: 1px 1px 10px #00f; -webkit-appearance: none }
							/* same as .ui-keyboard-input-current */
}


/* planeGeom.js & model3D.js classes: */

.geom-box, .box3d	{ margin: 1.6em auto; }
.geom-angle-label	{ font-size: 0.75em }


/*  lab.css:  styles consistent with a mathematical lesson, exercises, or test.  */


/* ----------- Layout ----------- */

header nav, .flex-wrapper
					{ display: -ms-flexbox; display: -webkit-flex; display: flex;
						-ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;
						-ms-flex-pack: distribute; -webkit-justify-content: space-around;
							justify-content: space-around }
header nav			{ -ms-flex-align: center; -webkit-align-items: center; align-items: center;
						margin: -8px -8px 1em -8px; padding: 0.5em }
header ul			{ margin: 0; padding: 0; line-height: 1.6 }
header li			{ display: inline; margin: 0 20px; white-space: nowrap }
header img			{ height: 1.5em; vertical-align: top; border: none }
header a			{ text-decoration: none }
@media only screen and (max-device-width: 1024px) {
	header li			{ display: list-item }
}

body.intro			{ font-size: 1.1em; line-height: 1.3 }

.course-links		{ counter-reset: chapter }
.course-links h2:before
					{ counter-increment: chapter; content: "Chapter " counter(chapter) ": " }
.course-links ol	{ counter-reset: item; list-style-type: none }
.course-links li:before
					{ counter-increment: item;
						content: counter(chapter) "." counter(item) ". \A0" /* ".  " */ }
.chapters			{ counter-reset: item }
.chapters div:before
					{ counter-increment: item; content: counter(item) ". " }

.course #model		{ position: fixed; z-index: 10; padding: 16px; width: 500px }
.course h2			{ margin-bottom: 0.5em }
.course-links ol	{ margin-top: 0 }
.course-links li, .chapters div
					{ margin: 0.5em }
.chapters			{ float: right; padding: 0.5em; border: 2px solid; border-radius: 1em;
						margin: 0.5em }
.chapters h2		{ margin-top: 0.5rem; text-align: center }

#lab-model			{ position: fixed; overflow: auto; width: 500px; padding: 8px 0 8px 8px;
						left: 0; top: 0; bottom: 0; /* text-align: center */ }
#lab-model:after	{ content: ""; display: block; height: 8em }
#lab-help-pane		{ position: fixed; width: 400px; padding: 8px; left: 0; bottom: 0;
						display: none }
.exercises, .test	{ text-align: center; padding-bottom: 8em }
#bottom-model		{ margin-top: 1em }

.ma-model .ma-graphs
					{ margin-right: auto }	/* for Firefox? */
.exercises .ma-model .ma-graphs, .test .ma-model .ma-graphs
					{ margin-left: auto }
.ma-model > * + *	{ margin-top: 1em }
.ma-formulas		{ line-height: 1.5em }	/* to reduce jiggling during param sliding */
.ma-formulas .ma-block
					{ margin-top: 0; margin-bottom: 0 }
.ma-params			{ text-align: center }
.ma-slider-param, .ma-control-param
					{ display: inline-block; width: 232px; vertical-align: bottom;
						margin: 0.5em 0 }
.ma-control-param	{ font-size: 1.1em }

.grid-arith			{ text-align: center }
.grid-arith > * + *	{ margin-top: 1em }
.grid-arith .ma-block
					{ margin-top: 0; margin-bottom: 0 }
.labels-arith-grid	{ margin-left: auto; margin-right: auto; position: relative }
.pies-ops			{ font-size: 2em }
.proper-fraction-pie1, .improper-fraction-pies
					{ margin: 10px; vertical-align: middle }
.improper-fraction-pies
					{ white-space: nowrap }

.ma-dot-plot, .ma-histogram, .ma-box-plot
					{ position: relative; margin-left: auto; margin-right: 10% }
.exercises .ma-dot-plot, .exercises .ma-histogram, .exercises .ma-box-plot,
.test .ma-dot-plot, .test .ma-histogram, .test .ma-box-plot
					{ margin-right: auto }
* + .ma-dot-plot, * + .ma-histogram, * + .ma-box-plot
					{ margin-top: 1em }

#lab-text			{ margin-left: 500px; padding: 0 0 8em 8px; min-width: 350px }

h1					{ margin-top: 0 }
h1, .highlight, .highl /* .highl here for e.g. Firefox 15 quad5 */
					{ text-align: center }
ul.highlight, ol.highlight, .highlight ul, .highlight ol
					{ text-align: left }
.highlight > ul, .highlight > ol
					{ margin-top: 0; margin-bottom: 0 }
span.highl			{ display: inline-block } /* to allow room for the padding & border */
textarea			{ width: 95% }
.start-check		{ text-align: left; font-style: italic; background-color: #EEE }
.start-check + .ma-block
					{ margin-top: 0; margin-bottom: 0 }
.or-col				{ background-color: #DDD }
hr					{ margin: 1em 10% }
.next-question		{ text-align: center; margin: 1em 0 }
math, fmath			{ white-space: nowrap }

.qa, .qa1, .wide10, .wide70, .wide90
					{ border-collapse: collapse; margin-top: 1em }
.qa > tbody > tr > td:first-child,
.qa1 > tbody > tr:first-child > td:first-child
					{ padding: 1px 15px 1px 0px }
.wide10 > tbody > tr > td:first-child	{ padding: 1px 15px 1px 0px }
.wide70 > tbody > tr > td:first-child	{ padding: 1px 15px 1px 0px }
.wide90 > tbody > tr > td:first-child	{ padding: 1px 15px 1px 0px }
/* Classes qa, qa1, wide10, wide70, and wide90 should apply to a <table> with 2 columns. Then
	lab.js will set the answer column’s min-width to 40%, 40%, 90%, 30%, or 10% respectively of
	the table’s parent’s width, and then give any remaining width to the question column. We
	don’t give the table a 100% width using css, because we want the answer column initially
	laid out tightly. */
.wide10 > tbody > tr, .wide90 > tbody > tr
					{ vertical-align: top }
p + table, hr + table, h1 + table, h2 + table
					{ margin-top: 0 !important }
	/* for Firefox < 10, see http://www.fiveminuteargument.com/margin-collapse-tables */

table.data-table	{ float: left; margin-right: 15px }

table.first-col-left > tbody > tr > td:first-child
					{ text-align: left }
table.spaced		{ border-collapse: separate; border-spacing: 0.5em 1em }

mtable.tight > mtr > mtd, fmath span.tight > table > tbody > tr > td
					{ padding: 0.5ex 0 !important }

table.columns		{ width: 100% }
table.columns > tbody > tr > td
					{ vertical-align: top }

.profile td:first-child
					{ white-space: nowrap }
.profile td			{ vertical-align: baseline; padding: 0.5em 0.1em }

#review-skip input	{ font-size: medium; vertical-align: middle }

mtr.sum-bottom > mtd, tr.sum-bottom > td
					{ border-bottom: solid thin !important }
mtr.sum-bottom > mtd:first-child, tr.sum-bottom > td:first-child
					{ border-bottom: none !important }


/* ----------- Fonts ----------- */

h1, h2, h3, h4, h5, h6, nav
					{ font-family: Arial, Helvetica, sans-serif }
input				{ font: 1em monospace /* for "-" */ }

.cc-stds, .hint		{ font-style: italic }
kbd, .button		{ font-style: normal; font-weight: bold }
.course-links li > a:first-child, .definition
					{ font-weight: bold }

th mi, th mo, th mn, th mtext,
h1 mi, h1 mo, h1 mn, h1 mtext,
h2 mi, h2 mo, h2 mn, h2 mtext
					{ font-weight: bold }

.small-text			{ font-size: small }


/* ----------- Colors and Backgrounds ----------- */

body				{ background-color: hsl(60, 80%, 99%) }
#lab-model, #lab-help-pane, #model, nav, header, footer
					{ background-color: ghostwhite }	/* #F8F8FF hsl(240, 100%, 99%) */
.exercises #model	{ background-color: transparent }

header a:hover		{ color: hsl(196, 100%, 50%); }
header a			{ transition: color 1s; }

.cc-stds			{ display: none; background-color: #EEE }

.grid-arith .ma-grid-label
					{ color: #777 }

h1, .highlight, .highl
					{ background-color: #7FDDFF }	/* hsl(196, 100%, 75%) */
h1, .highlight		{ padding: 2px }
.highl				{ padding: 1px; border: thin solid #777 }
.next-todo			{ background-color: #FFF700 }
table.data-table	{ background-color: #FFE0FF }
.temp-highlight		{ background-color: #DFF7FF }

.red				{ color: red }
.blue				{ color: blue }
.green				{ color: green }
.purple				{ color: #990099 }	/* different from CSS purple */
.orange				{ color: #FF9900 }	/* different from CSS orange */
.brown				{ color: #993300 }	/* different from CSS brown */
.black				{ color: black }	/* e.g., to override an inherited color class */
.bold-black			{ color: black; font-weight: bold }

/* inequalities: */
.pink				{ color: #E1E }	/* for fill #F0F alpha 0.3 */
.light-blue			{ color: #0AA }	/* for fill #0DD alpha 0.3 */
.dark-blue			{ color: #12D }
.yellow-text		{ color: #CB0 }	/* for fill #DD0 alpha 0.3 */
.olive				{ color: #680 }

.grid-green			{ color: #0A3 }	/* for fill #0F3 alpha 0.3 (mode "lighten") */
.grid-pink			{ color: #C1A }	/* for fill #F0C alpha 0.3 (mode "lighten") */
.gray				{ color: #777 }	/* for fill #808080 alpha 0.6 */

.dot-plot-green		{ color: #00CC00 }	/* for fill #00D500 */

.area-red			{ color: #C11 }	/* for fill red (#F00) alpha 0.3, e.g. in drawPolygon() */

select				{ background-color: white }

.correct			{ background-color: #F8EEFF }
.wrong				{ background-color: #FFDD99 }
.num-correct		{ color: #80F }
.num-wrong			{ color: #F80 }
.happy-face			{ font-size: 2em; color: #80F }

a.definition:link	{ color: #0044CC }
a.definition:visited
					{ color: #800080 }

.error				{ color: red; font-weight: bold }
.free				{ background-color: yellow; font-weight: bold }