@charset "utf-8";
/* CSS Document */

/*
	z-index index
	---------
	  1	....	.screen	 
	  2	....	.pop-up-menu
	 10	....	#top-menu
	 90	....	.ui-resizable-handle" (this value set by jQuery)
	 91	....	.sidebar-minimizer-button
	 92 ....	#workspace-window-options-menu
	 99 ....	.sidebar-dimmer
	100	....	#screen-dimmer
	101	....	#modal-windows
	102 ....	#animation-wrapper-at-end-of-document-body
	103 ....	#shadow-top, #shadow-bottom, #shadow-left, #shadow-right (for
				creating a spotlight effect)
*/


/*	***************************************************************************
	HTML elements
*/

body {
	width: 100vw;
	height: 100vh;
	margin: 0; /*
		Otherwise, Firefox gives it an 8-pixel margin on all sides.
	*/
	overflow: hidden; /*
		prevents scroll bars from appearing when windows or columns are
		inserted in the Workspace screen
	*/
	font-family: "Times New Roman", times, serif;
}

div {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}

input[type=text] {
	display: block;
	box-sizing: border-box;
	width: 100%;	
}

label {
	display: block;
	margin-bottom: 2px;	
}

select {
	display: block;
	box-sizing: border-box;
	width: 100%;
}

table {
	border-collapse: collapse;
}

td, th {
	padding: 10px;
	border: 1px solid #CCC;
	text-align: left;
}

textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
}


/*	***************************************************************************
	Classes and IDs
*/

#add-choices-to-menu-via-text-area {
	width: 400px;
	position: relative; /* allow absolute positioning of children */
}

#add-new-item--error-messages {
	margin-top: 25px;
}

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

.additional-controls {
	display: none;
	border: 1px solid transparent;
}

.align-items-center {
	align-items: center;
}

.align-right {
	text-align: right;
}

#all-screens {
	overflow: hidden;
	display: none /* will be changed with JavaScript */
	/* height set by "globalVariable_setPixelMeasurements" */
}

#animation-wrapper-at-end-of-document-body > * {
	position: absolute;
	z-index: 102;	
}

#back-up-collection_backup-notes {
	height: 150px;
}

#blueprint-construction-zone {
	flex: 1 1 0px;
	display: flex;
	flex-direction: row;
	align-items: flex-start; /*
		Keep the outline of collapsed editing modules from extending to the
		bottom of the construction zone when another editing module is expanded
	*/
	overflow-x: hidden; /*
		Keep the editing modules contained in the construction-zone window.
		(I tried using the traditional horizontal scroll bar, but it looked
		awkward sitting on top of the blue footer, so I created custom scroll
		buttons.)
	*/
	padding: 25px 15px;
}

#blueprint-construction-zone:after {
	
	/*	replaces right padding, which browsers unfortunately fail to respect
		in a horizontal-overflow situation, as demonstrated here:
		https://www.brunildo.org/test/overscrollback.html
	*/
	content: "";
	display: table;
	width: 10px;
	height: 10px;
}

#blueprint-construction-zone-and-side-scrollers {
	display: flex;
	flex-direction: row;
	min-height: 50px;
	border: 1px solid black;
}

#blueprint-construction-zone-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 9px 10px;
	background-color: blue;
	color: white;
}

#blueprint-construction-zone-header {
	padding: 10px;
	background-color: blue;
	color: white;	
}

#blueprints-screen .main-column {
	overflow-y: auto;
}

#blueprints-screen .main-column.overflow-hidden {
	overflow: hidden;
}

.blueprint-module-editor {
	width: 200px;
	margin: 0 10px;
	padding: 10px;
	background-color: white;
	border: 1px solid #CCC;
}

.blueprint-module-editor.connected-to-target-menu {
	border-color: red;
}

.blueprint-module-editor.connected-to-target-menu .connected-menu-label {
	color: red;
}

.blueprint-module-editor-expander-button {
	float: right;
	margin-top: -15px;
	padding: 0 5px 2px 5px;
	background-color: #999;
	color: white;
}

.blueprint-module-editor-expander-button:hover {
	cursor: pointer;
}

#blueprint-module-insertion-buttons {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.blueprint-module-inheritance-labeled-checkbox {
	margin-top: 5px;
}

.blueprint-module-insertion-button {
	flex: 0 1 auto;
	cursor: pointer;
	margin-left: 20px;
	margin-right: 20px;
}

.blueprint-module-insertion-button:first-child {
	margin-left: 0;
}

.blueprint-module-prototype .hide-if-prototype {
	display: none;
}

.blueprint-module-type-indicator {
	margin: 10px 0;
	border: 1px solid #999;
	color: #999;
	padding: 5px 10px;
	text-align: center;
}

.blueprint-selector:hover,
.blueprint-selector.selected:hover {
	color: white;
	background-color: blue;
}

.blueprint-selector.selected {
	color: black;
	background-color: #B2B2FF; /* blue faded to 30% opacity */
}

.bottom-padding-replacement {
	/* See Dan's Notes, "Bottom Padding." */
	width: 100%;
	height: 25px;
}

.boxed {
	border: 1px solid #777;
	padding: 10px;
}

.boxed-menu {
	border: 1px solid black;
	min-height: 150px;
}

.broken {
	color: #FF0000 !important;
}

.button-row button {
	margin-right: 10px;
}

.button-row button:last-child {
	margin-right: 0;
}

.centered {
	text-align: center;
}

.center-contents-vertically-and-horizontally {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.choice-glider {
	display: flex;
	flex-direction: row;
	border: 1px solid #999;
	color: black;
	background-color: white;
	margin: 10px 0;
	padding-right: 10px;
	overflow-x: hidden; /* needed for IE */
}

.choice-glider-module.optional {
	display: none;
}

.choice-glider-module.containing-color-picker {
	flex: none;
	width: 110px;
	padding-top: 5px;
	text-align: center;
}

.choice-glider-module.containing-module-preview {
	flex: 1 1 0px;
	height: 30px;
	margin: 5px 0;
	padding: 7px 10px 0;
	cursor: default;
}

.choice-glider-module.containing-text-input {
	flex: 1 1 0px;
	padding: 10px;
}

#choices {
	min-height: calc(100% - 20px); /*
		This extends the "droppable" zone for choices to the bottom of the
		window when there aren't enough choice gliders to fill the window.
		The 20px adjustment is necessary because of margin collapse. (Choice
		gliders have top and bottom margins of 10px each. With a min-height
		of 100%, the browser would try to try to fit 10px of top margin,
		the 100% min-height, and 10px of bottom margin all in the available
		space, resulting in "overflow." Another way to prevent the margin
		collapse would be a 1px transparent border, but that would make
		alignment with the header slightly more complicated.)
	*/
}

#choices.no-minimum-height {
	min-height: auto;
}

#choices .animation-wrapper:first-child {
	margin-top: 10px;
}

#choices .animation-wrapper:last-child {
	margin-bottom: 10px;
}

#choices .animation-wrapper .choice-glider {
	margin-top: -1px; /* pull up to overlap with top border */
	margin-bottom: -1px; /* pull up bottom border to overlap */
}

#choices-text-area {
	height: 250px;
}

#choices-window {
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
}

#choices-window.showing-optional-column .choice-glider-module.optional,
.showing-optional-column .choice-glider-module.optional {
	display: block;
}

#choices-window-body {
	flex: 1 1 0px;
	border: 1px solid green;
	margin: 0 25px 25px 25px;
	padding: 0 10px;
	background-color: #CCC;
	overflow-y: auto;
}

#choices-window-header {
	flex: none;
	display: flex;
	flex-direction: row;
	margin: 0 25px;
	padding: 0 10px;
	background-color: green;
}

#choices-window-header .header-container {
	flex: 1 1 0px;
	overflow-x: hidden;
}

#choices-window-header .right-padding-replacement {
	flex: none;
}

#choices-window-header .header-container .choice-glider {
	flex: 1 1 0px;
	background-color: inherit;
	color: white;
	margin-top: 8px;
	margin-bottom: 6px;
	border: 1px solid transparent; /*
		override the light-grey border that real choice gliders have
	*/
}

#choices-window-header .header-container .choice-glider .choice-glider-module {
	padding-top: 0;
	padding-bottom: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

#choices-window-header .header-container .choice-glider .choice-glider-module.containing-text-input {
	padding-left: 13px; /*
		This makes the "Choice" heading (or the "Menu Shows" and "Item Shows" headings) align more
		pleasingly with the text inputs in the gliders below.
	*/
	padding-right: 7px; /*
		Left and right padding must add up to 20px to maintain proper alignment with the
		choice gliders below the header bar.
	*/
}

#choices-window-header .header-container .choice-glider .choice-glider-module.containing-module-preview {
	height: auto;
	margin-top: 0;
}

#choices-window-zero-menus-message {
	display: none;
}

#choose-blueprint-for-fixed-header li span:hover,
#choose-blueprint-for-footer-button li span:hover {
	text-decoration: underline;
}

#choose-blueprint-for-fixed-header .variable-wording {
	margin-bottom: 5px;
}

.clearfix:after {
	/*	See:
		https://css-tricks.com/snippets/css/clear-fix/
	*/
	content: "";
	display: table;
	clear: both;
}

.clearing {
	clear: both;
}

.click-to-customize {
	width: 200px;
	opacity: 0.5;
	cursor: pointer;
	text-align: center;
}

#code-inspection-area {
	/*	I found the pixel measurements below (110px, 220px) by trial and
		error. They make the <textarea> approximately as large as possible
		without overflowing the surrounding modal window (which would result
		in an unwanted second set of scroll bars). */
	width: calc(100vw - 110px);
	height: calc(100vh - 220px);
}

#collection-settings-sidebar .academic-advising.credit-hour-counting-options .wide-version-only {
	display: none;
}

.collection {
	min-height: 100%;
	font-size: 16px;
	padding-top: 15px;
	padding-bottom: 15px;
}

#collection-action-buttons {
	margin-top: 2em;
}

#collection-action-buttons p {
	text-align: center;
}

#collection-action-buttons p:last-child {
	margin-bottom: 0;
}

.collection-drag-out-options .labeled-radio-button:last-child {
	margin-bottom: 0;
}

#collection-editing-panel {
	height: 100%;
}

#collection-editing-window-body {
	overflow-y: auto;
	background-color: #CCC;
	border: 1px solid black;
}

#collection-editor-footer {
	padding: 5px 0;
}

.collection-error-message {
	font-size: 20px;
}

.collection-loading-message {
	width: 100%;
	padding: 25px;
	font-size: 24px;
	text-align: center;
}

.collection-locking-options .labeled-checkbox:last-child {
	margin-bottom: 0;
}

#collection-or-folder-title-input {
	width: 100%;
	max-width: 500px;
	font-size: 24px;
}

#collection-settings-sidebar .folder-changer-box {
	margin-right: 0;
}

#collection-settings-sidebar .folder-changer-button {
	display: none;
}



#collection-title-headline {
	font-size: 32px;
}

.column {
	float: left;
	height: 100%;
}

.column-contractor-bar {
	width: 25px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	cursor: pointer;
	text-align: center;
}

#container-for-top-menu-and-all-screens {
	height: 100vh;
}

#controls-for-specific-module-types {
	box-sizing: border-box;
	min-width: 420px;
	border: 1px solid #777;
	border-radius: 5px;
	padding: 10px 20px;
	margin-bottom: 20px;
}

#create-account-panel input {
	width: 250px;
}

#create-account-panel label {
	float: left;
	width: 100px;
}

#create-new-blueprint {
	width: 400px;
}

#create-new-blueprint-module .default-choice-selector {
	float: left;
	margin-right: 20px;
}

#create-new-blueprint-module input[type=text],
#create-new-blueprint-module select {
	width: 200px;
}

#create-new-blueprint-module input.heading-input {
	width: 100%;
}

#create-new-collection_drag-out-options {
	margin-top: 40px;
}

#create-new-folder {
	width: 350px;
}

#create-new-workspace {
	width: 250px;
}

.custom-checkbox {
	width: 21px;
	height: 21px;
	border: 1px solid black;
	margin-right: 10px;
}

.custom-checkbox.checked {
	background-image: url("images/check-mark.png");
	background-position: center;
}

.custom-field-set {
	border: 1px solid #AAA;
	padding: 20px;
	margin: 25px 0;
}

.custom-field-set p:first-child {
	margin-top: 0;
}

.custom-field-set.footer-editing-area {
	margin-bottom: 0;
}

.custom-field-set .labeled-control:first-child {
	margin-top: 0;
}

#default-choice-selector {
	min-width: 200px;
}

.delete-collection_collection-title {
	font-weight: bold;
}

.delete-stacked-module {
	margin-left: 10px;
	padding: 0 10px;
	border: 1px solid #777;
	border-radius: 3px;
	background-color: #E1E1E1;
	cursor: default;
}

.delete-stacked-module:hover {
	background-color: #CCC;
}

.delete-stacked-module img {
	position: relative;
	top: 3px;
}

.dialog-buttons {
	clear: both;
	float: right;
	margin-top: 25px;
}

#drop-down-menu-for-menu-setting {
	position: static; /* override "absolute" in .drop-down-menu */
}

#drop-down-menu-for-menu-setting ul {
	position: absolute;
	margin-top: -11px;
	margin-left: 4px;
	padding: 5px 0;
	border: 1px solid black;
	background-color: white;
}

#drop-down-menu-for-menu-setting ul li {
	padding: 5px 10px;
}

#drop-zone-for-menu-item-deletion {
	width: 100%;
	padding-top: 20px;
	margin-top: -20px;
	padding-bottom: 20px;
	margin-bottom: -20px;
}

#edit-collection-footer-button {
	margin-top: 2px;
}

#edit-collection-header-button {
	position: relative;
	top: 25px;
	margin-left: 25px;
}

#edit-footer-buttons {
	width: 600px;
}

#edit-footer-buttons .insert-collection-title {
	margin-left: 0.2em;
}

#edit-selected-blueprint {
	float: right;
}

.empty-collection-message {
	font-size: 20px;
	padding-top: 10px;
}

.faded {
	opacity: 0.3;
}

.file-navigator .collection-div {
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.file-navigator .collection-div.inactive {
	cursor: default;
}

.file-navigator .collection-div .collection-icon {
	flex: none;
	padding-right: 5px;
}

.file-navigator .collection-div .collection-title {
	flex: 1 1 auto;
	padding-right: 5px;
}

.file-navigator .expander-collapser-arrow {
	cursor: pointer;
}

.file-navigator .expander-collapser-arrow,
.file-navigator .folder-icon {
	width: 1.5em;
}

.file-navigator .expander-collapser-arrow,
.file-navigator .folder-icon-and-title {
	padding: 4px 10px 4px 5px; /*
		assign top and bottom padding here, not in the .folder-top-line class,
		to protect visible padding for the selected (highlighted) folder
	*/
}

.file-navigator .folder-div.closed > .folder-contents {
	display: none;
}

.file-navigator .folder-div .folder-contents .child-folders {
	margin-left: 1.5em;
}

.file-navigator .folder-div .folder-contents .collections {
	margin-top: 3px;
	margin-left: 3.25em;
}

.file-navigator .folder-div .folder-icon-and-title {
	cursor: pointer;
}

.file-navigator .folder-div.faded .folder-icon-and-title {
	cursor: default;
}
	
.file-navigator .folder-div.selected > .folder-top-line > .folder-icon-and-title {
	background-color: blue;
	color: white;
}

.file-navigator .folder-div.no-children > .folder-top-line > .expander-collapser-arrow {
	cursor: default;
}

.file-navigator.in-folder-picker {
	padding: 10px 15px 10px 15px;
}

.file-navigator.in-workspace-window .collection-div:hover .collection-title {
	text-decoration: underline;
}

.file-navigator.in-workspace-window .collection-div.inactive:hover .collection-title {
	text-decoration: none;
}

.file-navigator.on-collections-screen {
	padding: 10px;
	min-height: 100%;
}

.file-navigator.on-collections-screen .collection-div .collection-icon {
	margin-left: -5px;
	padding-left: 5px;
}

.file-navigator.on-collections-screen .collection-div .collection-icon,
.file-navigator.on-collections-screen .collection-div .collection-title {
	padding-top: 5px;
	padding-bottom: 2px;
}
	
.file-navigator.on-collections-screen:not(.drag-in-progress) .collection-div:hover .collection-icon,
.file-navigator.on-collections-screen:not(.drag-in-progress) .collection-div:hover .collection-title {
	/*	Why do I apply this styling to the collection div's children rather
		than the collection div itself? Because the latter does not extend the
		background color far enough in a horizontal-overflow situation.
	*/
	background-color: orange;
}

.file-navigator.on-collections-screen .collection-div.selected .collection-icon,
.file-navigator.on-collections-screen .collection-div.selected .collection-title {
	/*	Why do I apply this styling to the collection div's children rather
		than the collection div itself? Because the latter does not extend the
		background color far enough in a horizontal-overflow situation.
	*/
	background-color: blue;
	color: white;
}

.file-navigator.on-collections-screen .collection-div.selected .collection-title {
	padding-right: 5px;
}

.file-navigator.on-collections-screen .folder-icon-and-title:hover {
	background-color: orange;
}

.file-navigator.showing-folders-only .collections {
	display: none;
}

#first-name,
#last-name {
	max-width: 250px;
}

.fixed-height {
	flex: none;
}

.fixed-width {
	flex: none;
}

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

.flex-container-row {
	display: flex;
	flex-direction: row;
}

.flex-container-column.frozen,
.flex-container-row.frozen {
	display: block;
}

.flex-expand-to-fill-available-height {
	flex: 1 0 auto;
}

.flex-expand-to-fill-available-width {
	flex: 1 0 auto;
}

.flex-expand-to-fill-available-height.with-flex-bug-fix,
.flexible-height.with-flex-bug-fix,
.flex-shrink-height-if-needed.with-flex-bug-fix {
	flex-basis: 100%; /* fix bugs in Chrome and IE 11 */
	min-height: 0; /* fix bugs in Firefox and Edge */	
}

.flex-expand-to-fill-available-width.with-flex-bug-fix,
.flexible-width.with-flex-bug-fix,
.flex-shrink-width-if-needed.with-flex-bug-fix {
	flex-basis: 100%; /* fix bugs in Chrome and IE 11 */
	min-width: 0; /* fix bugs in Firefox and Edge */	
}

.flex-item-with-fixed-height {
	flex: none;
}

.flex-item-with-fixed-width {
	flex: none;
}

.flex-item-with-content-based-flexible-height {
	flex: 1 1 auto;
}

.flex-item-with-content-based-flexible-width {
	flex: 1 1 auto;
}

.flex-item-with-flexible-height {
	flex: 1 1 0px; /*
		Items with this class will grow or shrink to fill the available height
		irrespective of the height of their content. See Figure 7 in the W3C
		flexbox spec (https://www.w3.org/TR/css-flexbox-1/) for a useful
		illustration. Note that "0px" is used for the flex-basis instead of
		simply "0" because Internet Explorer doesn't handle a unitless 0
		correctly. */
}

.flex-item-with-flexible-width {
	flex: 1 1 0px; /* see note for .flex-item-with-flexible-height above */
}

.flex-shrink-height-if-needed {
	flex: 0 1 auto;
}

.flex-shrink-width-if-needed {
	flex: 0 1 auto;
}

.flexible-height {
	flex: 1 1 auto;
}

.flexible-width {
	flex: 1 1 auto;
}

.floating-indicator {
	position: absolute;
	padding: 5px 10px;
	color: white;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.folder-changer-box,
.header-level-changer-box {
	padding: 5px 7px;
	border: 1px solid #AAA;
	margin-right: 10px;
	cursor: pointer;
}

.folder-changer-box:hover,
.header-level-changer-box:hover {
	padding: 5px 7px;
	background-color: #E5E5FF;
}

.folder-changer-box .folder-title,
.header-level-changer-box .entity-title {
	margin-left: 5px;
}

.folder-changer-controls {
	margin-bottom: 2em;	
}

#folder-editing-panel {
	padding: 25px;
	overflow-y: auto;
	background-color: #F2F2FF;
	min-height: calc(100% - 50px); /*
		extend background color to bottom of screen if it's a tall screen and
		there's extra room
	*/	
}

#folder-editing-panel .folder-changer-box,
#folder-editing-panel .footer-editing-area,
#folder-editing-panel .header-editing-area {
	background-color: white;
}

#folder-editor-footer {
	padding: 10px;
	border: 1px solid #777;
	background-color: #333;
}

#folder-picker {
	width: 600px;
}

#folder-picker .file-navigator .collection-div {
	cursor: default;
}

#folder-picker .file-navigator .collection-div:hover .collection-title {
	text-decoration: none;
}

#folder-picker_add-folder {
	margin-top: 1em;
	margin-bottom: 2em;
	padding-left: 1em;
}

.folder-title input[type=text] {
	width: 100%;
}

.footer-button {
	padding: 2px 8px;
	margin: 0 5px;
	border: 1px solid #777;
	border-radius: 3px;
	background-color: #E1E1E1;
	cursor: default;
}

.footer-button:hover {
	background-color: #CCC;
}

.footer-button-blueprint-checkbox-container {
	align-items: center;
	padding: 8px 10px;
}

.footer-button-blueprint-checkbox-container:hover {
	background-color: #FFF2C3;
}

#footer-button-blueprint-checkboxes {
	min-height: 75px;
	margin-bottom: 25px;
}

#footer-button-blueprint-checkboxes.no-minimum-height {
	min-height: auto;
}

.footer-buttons {
	margin-left: 10px;
	overflow-x: hidden;
}

.footer-buttons button {
	margin-right: 10px;
}

.footer-buttons button:last-child {
	margin-right: 0;
}

#footer-preview {
	padding: 10px;
	border: 1px solid #777;
}

.full-width {
	width: 100%;
}

#gettysburg-address {
	max-width: 800px;
}

.green-background {
	background-color: green;	
}

.grey-heading-bar {
	font-size: 18px;
	background-color: #777;
	color: white;
	padding: 5px 10px;
}

.grid-layout-two-equal-columns {
	display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-layout-two-equal-columns > div {
	margin: 25px;
}

.hanging-indent {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.header-module {
	float: left;
	padding: 8px 10px; /* left and right padding must be same as .module */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-module {
	cursor: default; /* Avoid the "text" cursor; header item can be grabbed here. */
}

.header-preview {
	background-color: #333;
	color: white;
	margin-bottom: 25px;
}

.header-preview .header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.header-preview .header .header-module {
	float: none;
}

#heading-for-controls-for-specific-module-types {
	margin-top: 25px;
	margin-bottom: 5px;
}

.hidden {
	display: none;
}

.hidden-via-opacity {
	opacity: 0;
}

.hidden-via-visibility {
	visibility: hidden;
}

.horizontal-divider {
	width: 100%;
	text-align: center;
	cursor: pointer;
	/* height set by "globalVariable_setPixelMeasurements" */	
}

.horizontal-menu {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.horizontal-menu li {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

.horizontal-menu li:first-child {
	padding-left: 0;
}

.horizontal-menu li:last-child {
	padding-right: 0;
}

.horizontal-menu li a:hover {
	cursor: pointer;
}

.horizontal-menu.with-pipes li {
	border-right: 1px solid black;
}

.horizontal-menu.with-pipes li:last-child {
	border-right: none;
}

.horizontal-overflow-hidden {
	overflow-x: hidden;
}

.horizontal-rule-with-words-in-the-middle {
	/*	See: https://stackoverflow.com/questions/5214127 */
	width: 100%; 
	text-align: center; 
	border-bottom: 1px solid #AAA; 
	line-height: 0.1em;
	margin: 2em 0;
} 

.horizontal-rule-with-words-in-the-middle span { 
	background-color: white; 
	padding: 0 10px;
}

.hyperlink {
	cursor: pointer;
	text-decoration: underline;
	color: blue;
}

.hyperlink:hover {
	cursor: pointer;
}

#incredible-shrinking-placeholder {
	width: 150px;
}

.item {
	width: 100%;
	display: flex;
	flex-direction: row;
	border-style: solid;
	/* border width will be set by "globalVariable_setPixelMeasurements" */
	margin-top: 10px;
	margin-bottom: 10px;
	white-space: nowrap;
	/*	Color, background color, and border color will be overwritten as
		needed based on an item's blueprint. */
	color: black;
	background-color: white;
	border-color: black;
	background-clip: padding-box; /*
		This ensures that the window body's color, not the item's background
		color, shows through the item's border if the user sets that border
		to "transparent."
	*/
}

.item,
.blueprint-module-editor,
.choice-glider,
.collection-div,
.folder-div,
.footer-button {
	/*	When an element is being dragged via Sortable JS, prevent text outside
		that element from getting highlighted as the cursor sweeps across the
		screen. (This is a new problem that I first encountered in July 2024.
		I'm not sure what happened to change the plug-in's behavior.)

		See: https://github.com/SortableJS/Sortable/issues/997
	*/
	user-select: none; 
}

.item.large-top-margin:not(:first-child) {
	margin-top: 30px;
}

.item.large-bottom-margin:not(:last-child) {
	margin-bottom: 30px;
}

.item.extra-large-top-margin:not(:first-child) {
	margin-top: 50px;
}

.item.extra-large-bottom-margin:not(:last-child) {
	margin-bottom: 50px;
}

.item.xxl-top-margin:not(:first-child) {
	margin-top: 70px;
}

.item.xxl-bottom-margin:not(:last-child) {
	margin-bottom: 70px;
}

.item > .module,
.item > .module-stack {
	flex: none;
}

.item-editor-error-messages {
	color: red;
}

.item-editor-input-fields {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border: 1px solid #999;
	border-radius: 5px;
	padding: 24px 12px 0 12px;
}

.jumbotron {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 36px;
	padding: 50px;
}

.labeled-checkbox,
.labeled-radio-button {
	margin-top: 1em;
	margin-bottom: 1em;
}

.labeled-checkbox label,
.labeled-radio-button label,
.align-with-radio-button-label {
	margin-left: 1.5em;
}

.labeled-checkbox input,
.labeled-radio-button input {
	float: left;
}

.labeled-control {
	margin-top: 1em;
	margin-bottom: 1em;
}
	
.left-padding-replacement,
.right-padding-replacement {
	padding: 5px 0;
}

#login-panel input {
	width: 200px;
}

#login-panel label {
	float: left;
	width: 100px;
}

.main-column {
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative; /*
		allows bottom-feeding trash-can div to be absolutely positioned
		inside it
	*/	
}

#menu-deletion-unconnected .menu-title {
	font-weight: bold;
}

#menu-of-blueprints {
	border: 1px solid blue;
}

.menu-of-collections {
	list-style: none;
}

.menu-of-collections li {
	margin-bottom: 0.25em;
}

.menu-of-collections a:hover {
	background-color: #777;
	color: white;
}

.menu-of-standard-fixed-headers select {
	width: auto;
}

#menu-preview {
	display: inline;
	width: auto;
	min-width: 200px;
	margin-top: 5px;
}

#menu-preview-container {
	margin: 25px 0;
	text-align: center;
}


#menu-preview-container label {
	font-weight: bold;
}


.menu-selector:hover,
.menu-selector.selected:hover {
	color: white;
	background-color: green;
}

.menu-selector.selected {
	background-color: #B2D9B2; /* green faded to 30% opacity */
}

#menu-title-input-for-existing-menu {
	width: 100%;
}

#menu-title-input-for-new-menu {
	width: 100%;
}

#menus-screen .main-column #everything-above-choices-window {
	flex: none;
	padding: 25px 25px 0 25px;
}

#modal-windows {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	z-index: 101;
	display: none; /*
		ensures that child divs (modal windows) don't display for a brief
		moment on initialization; will be overridden by jQuery "show"
	*/
}

#modal-windows > form,
#modal-windows > div {
	padding: 25px 25px 0 25px;
	border: 2px solid #AAA;
	border-radius: 5px;
	background-color: white;
	max-width: calc(100% - 100px);
	max-height: calc(100% - 65px);
	overflow: auto;
}

#modal-windows > form > :first-child,
#modal-windows > div > :first-child {
	/*	The top element inside the modal window should be separated from the
		window's top border only by the window's top padding, not by any
		additional margin of its own. */
	margin-top: 0;
}

#modal-windows > form:after,
#modal-windows > div:after,
#modal-windows > form.flex-container-column > :last-child:after {
	/*	The styling below clears any floats that may be in place at the bottom
		of the dialog box (e.g., floating "OK" and "Cancel" buttons). It also
		replaces the bottom padding of the dialog box. (If I simply set the
		"padding-bottom" on the dialog box to 25px like you'd expect, certain
		browsers would fail to respect that bottom padding when the dialog box
		went into a vertical-overflow situation. For more information on the
		padding-bottom problem, see my Stack Overflow contribution:
		
		http://stackoverflow.com/questions/13471910	
	*/
	content: "";
	display: block;
	clear: both;
	height: 25px;
}

#modal-windows #blueprint-settings {
	width: 350px;
}

#modal-windows #create-new-menu-form {
	width: 250px;
}

#modal-windows #edit-item,
#modal-windows #edit-item-in-series {
	width: auto;
}

#modal-windows #login-panel {
	width: 310px;
}

#modal-windows #notify-user-of-option-to-undo-menu-data-type-change {
	width: 600px;
}

#modal-windows #notify-user-that-data-type-change-has-been-undone-or-redone {
	width: 600px;
}

.module {
	/*	Left and right padding are set dynamically by the JavaScript function
		"globalVariable_setPixelMeasurements." */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.module.red-bordered {
	padding: 3px 8px; /* shrinks padding to make room for 2px border */
}

.module-content {
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default; /* Avoid the "text" cursor; item is grabbable here. */		
}


.module-editor {
	padding-bottom: 15px;
	border: 1px solid transparent;
}

.module-editor input[type=text],
.module-editor select,
.module-editor .placeholder-for-counter {
	width: 150px;
	min-height: 22px;
}

.module-editor-container {
	margin: 0 12px;
	padding-bottom: 25px;
}

.module-editor-container .add-module-to-stack {
	border: 1px solid transparent;
	padding-bottom: 15px;
}

.new-folder-title-input {
	min-width: 158px;
}

#new-choice-text-input {
	display: inline-block;
	margin-right: 5px;
	width: 200px;
}

.new-window-instructions {
	padding: 0 25px;
}

#no-blueprint-modules-message {
	width: 100%; /* facilitates horizontal centering of child */
}

.no-bottom-margin {
	margin-bottom: 0;
}

.no-module-selected .hide-if-no-module-selected {
	display: none;
}

.no-module-selected .show-only-if-no-module-selected {
	display: block;
}

.overflow-hidden {
	overflow: hidden;
}

.pad-beneath {
	padding-bottom: 20px;
}

.padded {
	padding: 25px;
}

.padded-top-and-bottom {
	padding: 25px 0;
}

.pop-up-menu {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
}

.pop-up-menu a,
.pop-up-menu li {
	cursor: pointer;
}

.pop-up-menu li:hover {
	text-decoration: underline;
}

.pop-up-menu ul {
	list-style: none;
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
}

#preview-headline {
	margin-top: 35px;
	margin-bottom: 10px;
}

.preview-of-affected-items {
	border: 1px solid #777;
	padding: 15px 25px;
	overflow-y: auto;
}

#preview-of-creating-a-new-item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#preview-window {
	border: 1px solid #777;
	background-color: #EEE;
	overflow-y: auto;
	padding: 25px;
	min-height: 150px;
}

#preview-window > div > p {
	margin-top: 0;
}

#preview-window-tabs ul li.selected {
	position: relative;
	top: 1px; /*
		bumps the tab down to cover the top border of the panel beneath it;
		this makes the tab look continuous with the panel
	*/
	border: 1px solid #777;
	background-color: #EEE;
	border-bottom: 1px solid #EEE;
}

.pseudo-button {
	cursor: pointer;
}

.pseudo-hyperlink {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.red {
	color: red;
}

.red-bordered {
	/*
		also see:
		.module.red-bordered
	*/
	border: 2px dashed red;
}

.relatively-positioned {
	position: relative;
}

.reloading-message {
	font-size: 24px;
	color: #333;
}

#reloading-message-for-menu-choices-table {
	padding-top: 25px;
}

#rename-collection {
	width: 500px;
}

.saving-message {
	font-size: 24px;
}

.screen {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.screen.non-flex {
	display: block;
}

#screen-dimmer {
	/*	borrowed from:
		http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
	*/
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
	opacity: 0.7;
    z-index: 100;
	display: none; /* jQuery will override this setting when needed. */
}

.scroll-in-case-of-vertical-overflow {
	overflow-y: auto;
}

.scroll-box {
	overflow-y: auto;
	border: 1px solid #777;
}

.select-blueprint-button {
	position: relative;
	top: 10px;
	margin-left: 5px;
	font-size: 12px;
}

.selected-blueprint-for-adding-new-item {
	margin-left: 5px;
}

.show-only-if-no-module-selected,
.show-only-if-direct-input,
.show-only-if-multiple-choice {
	display: none;
}

.sidebar {
	flex: none;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.sidebar.right {
	width: 325px;
}

.sidebar.right .sidebar-content {
	overflow-y: auto;
}

.sidebar .ui-resizable-e {
	width: 25px;
	right: 0;
}

.sidebar-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 25px;
	overflow: hidden; /* needed to force wrapping in IE */
}

.sidebar-footer {
	flex: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.sidebar-footer .footer-button {
	padding-top: 5px;
}

.sidebar-header {
	flex: none;
	padding: 10px;
}

.sidebar-header.on-blueprints-screen {
	background-color: blue;
	color: white;
}

.sidebar-header.on-collections-screen {
	background-color: #D96D00;
	color: white;
}

.sidebar-header.on-menus-screen {
	background-color: green;
	color: white;
}

.sidebar-header.on-workspaces-screen {
	background-color: orange;
	color: white;
}

.sidebar-header h3 {
	margin: 0;
}

.sidebar-minimizer-button {
	padding: 25px 0; /* expand clickable area vertically */
	width: 100%;
	cursor: pointer;
	text-align: center;	
	z-index: 91; /* higher than jQuery resizable handle */
}

.sidebar-minimizer-button:hover {
	background-color: #777;
}

.sidebar-minimizer-button.cover-entire-resizing-bar {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.sidebar-resizing-bar {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 100%;
	background-color: #999;
	color: white;
}

.sidebar-window-body {
	overflow-y: auto;
	flex: 1 1 0px;
}

.sidebar-window-body.on-blueprints-screen {
	border: 1px solid blue;
}

.sidebar-window-body.on-collections-screen {
	border: 1px solid #D96D00;
	background-color: #F4E9FF;
}

.sidebar-window-body.on-menus-screen {
	border: 1px solid green;
	min-height: 200px;
}

.sidebar-window-body.on-workspaces-screen {
	border: 1px solid orange;
}

.side-by-side > div {
	float: left;
	margin-right: 50px;
}

.side-by-side > div:last-child {
	margin-right: 0;
}

.side-scroller {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
	background-color: #CCC;
	width: 25px;
	cursor: pointer;
}

.side-scroller.scroller-in-action {
	background-color: #100040;
	color: white;
}

.smart-right-floating-button {
	/*	Buttons of this class float to the right. At narrow screen widths,
		they keep a respectful distance (10px) from the element to their
		left. At VERY narrow screen widths, they bump the element to their
		left to its own line, below, and keep a respectful distance (10px)
		from the top of that element. */
	display: block;
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}

.sortable-drag {
	opacity: 1 !important; /*
		override the inline style that Sortable JS gives to the dragged element
		to make it partly transparent
	*/
}

.sortable-drag.hovering-over-folder {
	opacity: 0.2 !important; /* override the style above */
}

.sortable-ghost {
	visibility: hidden;
}

.sp-palette {
	/*	This puts space between the bottom of the Spectrum color palette and
		the buttons/links beneath it. */
	margin-bottom: 25px;
}

.sp-preview img.color-inheritance-indicator {
	display: none;
}

.sp-preview.showing-inherited-color img.color-inheritance-indicator {
	display: inline;
}

.spaced-hyperlinks {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.spaced-hyperlinks a {
	/*	same declarations as .pseudo-hyperlink class */
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.spaced-hyperlinks > li {
	margin-bottom: 10px;
}

.spectrum-more-link {
	color: #d93f3f; /* same color as Spectrum "cancel" link */
	font-size: 14px;
	text-decoration: none;
}

.spectrum-more-link:hover {
	text-decoration: underline;
	cursor: pointer;
}

.spotlight-shadow {
	position: absolute;
	background-color: black;
	z-index: 103;
	display: none; /* will be shown with jQuery when needed */
}

#spotlight-shadow-bottom {
	left: 0;
	right: 0;
	bottom: 0;
}

#spotlight-shadow-left {
	left: 0;
}

#spotlight-shadow-right {
	right: 0;
}

#spotlight-shadow-top {
	top: 0;
	left: 0;
	right: 0;
}

.tabs {
	/* This class can be applied to a <ul> element to create <li> tabs. */
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding-left: 0;	
}

.tabs li {
	flex: 0 1 auto;
	padding: 10px 20px;
	margin-right: 10px;
}

.tabs li:hover {
	cursor: pointer;
	text-decoration: underline;
}

.tabs li:last-child {
	margin-right: 0;
}

#template-for-menu-items-reloading-message {
	display: none;
}

#templates {
	display: none;
}

#temporary-workspace-window {
	border: 1px solid gold;
	margin: 10px;
}

#title-of-open-menu {
	margin-bottom: 0;
	margin-right: 15px;
}

#top-menu {
	background-color: black;
	color: cyan;
	padding: 10px 20px;
	z-index: 10;
}

#top-menu .current-screen {
	color: white;
	cursor: default;
	text-decoration: underline;
}

#top-menu nav {
	float: right;
	/*
	margin-top: 10px;
	margin-bottom: 10px;
	*/
}

#top-menu nav a:hover {
	text-decoration: underline;
}

#top-menu-logged-in {
	/*	Hide initially; display as needed with jQuery.) */
	display: none;
}

.trash-zone {
	display: none;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 150px;
	background-color: black;
	background-image: url("images/trash-can-with-oscar-the-grouch.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.truncate-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	
}

.ui-resizable-handle {
	z-index: 8 !important; /*
		I don't want the "resizing" cursor to appear above one of my modal
		windows. Note that the "!important" rule is needed to override inline
		styling that jQuery ui applies automatically (style="z-index: 90").
	*/
}

ul.radio-buttons {
	list-style: none;
	padding-left: 1.5em;
	text-indent: -1.5em;
}

ul.radio-buttons label {
	display: inline;
}

ul.radio-buttons li {
	margin-bottom: 0.5em;
}

.underlined {
	text-decoration: underline;
}

.user-button {
	margin-left: 20px;
	margin-right: 20px;
}

.user-button:first-child {
	margin-left: 0;
}

.vertical-divider {
	float: left;
	height: 100%;
	cursor: pointer;
	/* width set by "globalVariable_setPixelMeasurements" */
}

.vertical-menu li {
	padding: 10px;
}

.vertical-menu {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.vertical-menu li:hover {
	cursor: pointer;
}

.waiting-message {
	text-align: center;
	font-size: 48px;
}

#waiting-on-menu-creation {
	position: absolute; /*	display right on top of the other div that's hidden via visibility setting */
	width: calc(100% - 50px); /* subtract left and right padding */
	height: calc(100% - 50px); /* subtract top and bottom padding */
	font-size: 24px;
}

#workspace {
	height: 100%; /*
		Makes the workspace columns fill the available screen height. This is
		essential in certain layouts (for example, a workspace with a single
		window that contains just a couple of items).
	*/
	margin-right: 1px; /*
		This seems to fix a quirk in jQuery UI: Occasionally, in circumstances
		I don't understand, a dragged item is allowed to extend just a couple
		of pixels beyond the right edge of the browser window, causing the
		whole workspace to "bounce" slightly to the left.
	*/
	position: relative; /*
		Allows ww-menus to be absolutely positioned inside the workspace. This
		ensures that ww-menus will wrap text as needed to stay inside the
		left and right boundaries of the workspace.
	*/
	overflow: hidden;
}

#workspace .file-navigator {
	padding-top: 0;
}

.workspace-selector:hover,
.workspace-selector.selected:hover {
	color: white;
	background-color: orange;
}

.workspace-selector.selected {
	color: black;
	background-color: #FFE4B2; /* orange faded to 30% opacity */
}

#workspace-window-options-menu {
	background-color: white;
	border: 1px solid black;
	padding: 15px;
	overflow: auto;
	z-index: 92;
}

#workspace-window-options-menu h2 {
	font-size: 20px;
	margin-bottom: 5px;
}

#workspace-window-options-menu li {
	margin-bottom: 7px;
}

#workspace-window-options-menu li:hover {
	text-decoration: underline;
}

#workspace-window-options-menu ul {
	clear: right;
	padding: 0 20px;
}

.ww {
	position: relative; /*
		so that each workspace window's footer editor can be absolutely
		positioned inside it
	*/
}

.ww .ww-secondary-header {
	display: none;
}

.ww.with-secondary-header .ww-secondary-header {
	display: flex;
}

.ww-body {
	/*	Left and right padding are set dynamically by the
		"globalVariable_setPixelMeasurements" function. */
	overflow-y: auto;
	background-color: #CCC;
}

.ww-footer {
	align-items: center;
	/*	The standard height for all footers is set by the
		"globalVariable_setPixelMeasurements" function. */
}

.ww-menu-button-container {
	padding: 0 10px;
}

.ww-menu-button-container.bottom-left {
	padding-top: 3px; /*
		makes the gear button appear vertically centered to the eye
	*/
}

.ww-menu-button-container.menu-active {
	background-color: #CCC;
	padding-top: 5px;
	margin-top: -5px;
	padding-bottom: 5px;
	margin-bottom: -5px;
}

.ww-menu-button-container.menu-active.bottom-left {
	padding-top: 8px; /*
		keep gear icon from "twitching" when clicked
	*/
}

.ww-primary-header {
	/*	Height is set by the "globalVariable_setPixelMeasurements"
		function. */
	padding: 5px 0;
}

.ww-resizing-frame .ww-footer {
	border-top: 1px solid black;
}

.ww-title {
	font-size: 24px;
	padding-left: 10px;
	padding-right: 10px;
}

#zero-blueprints-message {
	padding: 25px;
}