/**
* @stylesheet environment-default.css Default
* @parent ux.environments
* Most assessment content (i.e., most discrete items and SBTs) is delivered in the default environment, which consists of a one- or two-column layout. In both layouts,
* * Stem and stimulus text is aligned to the left side of the column in which it appears.
* * Standalone media is centered in the column in which it appears.
* * If content is taller than the window height, a single vertical scrollbar will appear.
* * At the default zoom level, there are no horizontal scrollbars.
**/

/**
* @styles 0-env-default-single Single-column
* Single-column items show the stimulus, stem, and response area stacked on top of one another. For readability, the column is centered, and its width is approximately 66% of the content area. Images may take up to the full width of the column.
*
* _Demo is shown at 67% actual size. To see a full-size demo, click <a href="../../demos/environment-default/single-column-full.html" target="_blank">here</a>._
* @iframe ../../demos/environment-default/single-column.html 400
**/

/**
* @styles 1-env-default-two Two-column
* Two-column layouts typically present the stimulus on the left and the stem and response on the right, though placement can be switched if needed for a given item. Column widths are set by parameters in the item content. Available widths are 30/70, 40/60, 50/50, 60/40, or 70/30.
*
* A drop shadow border between the two columns helps to differentiate them. The border’s height matches that of the tallest column.
* * In cases where the stimulus is emphasized (e.g., in discrete items), the border faces right.
* * In cases where the task is emphasized (e.g., in most SBTs), the border faces left.
*
* _Demo is shown at 67% actual size. To see a full-size demo, click <a href="../../demos/environment-default/two-column-full.html" target="_blank">here</a>._
* @iframe ../../demos/environment-default/two-column.html 400
**/

html, body { height: 100%; }

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
}

#contentarea {
	flex: 1;
	overflow: auto;
	padding: 1em 0; }
#contentarea.full-height {
	display: flex;
	padding: 0; }

.content-container {
	display: flex;
	margin: 0 auto;
	max-width: 59em;
	width: 100%; }
#contentarea.full-height .content-container {
	max-width: 100%;
}
.content-container.disabled {
	pointer-events: none; }

.col {
	flex: 0 0 auto;
	padding: 0 1.39em;
	position: relative; }
#contentarea.full-height .col {
	overflow: auto; }

.col-single {
	margin: 0 auto;
	max-width: 41.39em;
	width: 100%;
}

.col-divider-right {
	box-shadow: 0.5em 0 0.83em -0.61em #888;
	z-index: 2;
}

.col-divider-left {
	box-shadow: -1em 0 1.5em -1.1em rgba(0, 0, 0, 0.22);
}

.col-30 { width: 30%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }
.col-70 { width: 70%; }