/* Common (shared between pages: register, upcoming, live, archive, etc.) */

	/* Genaric classes */
		.elipsis {
			width: 18px;
			position: relative;
			top: 2px;
			opacity: 0.5;
		}

		.iconBadge {
			display: none;
			position: absolute;
			top: 0px; right: 0px;
		}

	/* Modals */
		.modal.fade .modal-content {
			transform: scale(0.7);
			transition: all 0.2s;
		}

		.modal.fade.in .modal-content, .modal.fade.show .modal-content {
			transform: scale(1);
		}

		#setup.modal-open #mainWrapper {
			filter: blur(1px);
			transition: all 0.2s ease-in-out;
		}

		.modal .modal-header.alert {
			margin-bottom: 0;
		}

		/* Warning Modal */
			#warningModal #warningsList {
				list-style: disc;
			}

	/* Loading */
		#loading {
			position: fixed;
			top: 0; right: 0; bottom: 0; left: 0;
			z-index: 9999;
			background: #FFF url(../../images/icons/loading.svg) no-repeat center;
			background-size: 100px;
		}

	/* Wrapper & Constrainment  */
		#mainWrapper {
			width: 100%; min-width: 320px; /*max-width: 1920px;*/
			min-height: 100%;
			position: relative;
			overflow: hidden;
			background: #F6F6F6;
			background: -webkit-linear-gradient(top, #F6F6F6 0%,#EEEEEE 100%) fixed;
			background: -moz-linear-gradient(top, #F6F6F6 0%, #EEEEEE 100%) fixed;
			background: linear-gradient(to bottom, #F6F6F6 0%,#EEEEEE 100%) fixed;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#EEEEEE',GradientType=0);
		}

		@media (min-width: 1921px) {
			#mainWrapper {
				border-left: 1px solid #CCC;
				border-right: 1px solid #CCC;
			}
		}

		.constrainment {
			max-width: 100%;
			position: relative;
			margin-left: auto;
			margin-right: auto;
		}

	/* Header */
		#header { /* Note: Do not set width. Doing so will interfere with the negative magins needed for this div. */
			min-height: 100px; /* Using min-height because images may not strictly be 100px in height, and I don't want to warp/down-scale the image. */
			position: relative;
			background-repeat: no-repeat;
			margin-left: -15px; margin-right: -15px;
			padding-left: 12px; padding-right: 12px;
		}

		@media (min-width: 768px) {
			#header {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		#header.centered { /* JavaScript adds/removes this class based on the image's width. So, the image will only be centered if there's enough room for it. */
			background-position-x: center;
		}

		#accountImage {
			max-width: 320px;
			height: 100px;
			display: block;
		}

		@media (min-width: 768px) {
			#accountImage {
				margin-left: 30px;
				margin-right: 30px;
			}
		}

	/* Navigation */
		/* Note: This section's CSS is complex. It depends on mobile-first bootstap practices, scoping via custom attributes/javascript doing it's thing, floaty floats, and whatever else. See JS function 'handleMenu'. Also, the following CSS mostly applies to the 'frame' page, but is also needed for the registration page. I didn't want to split up this code since it's complicated. */

		/* Base styles */
			#navigation {
				position: relative;
				z-index: 1; /* Needed because .light may overlay this. */
				background-color: #FFF;
				border-top: 1px solid #CCC;
				border-bottom: 1px solid #CCC;
				margin-left: -15px; margin-right: -15px;
				padding-left: 12px; padding-right: 12px;
			}

			@media (min-width: 768px) {
				#navigation {
					padding-left: 15px;
					padding-right: 15px;
				}
			}

			#navigationConstrainment {
				line-height: 0; /* Removing white-space. Another option here would be display: flex; but it's more prone to cross-browser issues */
			}

			#menusWrapper {
				width: 100%;
				position: relative;
				display: inline-block;
				line-height: 1.42857143; /* Restoring line-height to bootstrap spec */
			}

			#menusWrapper form {
				display: block;
			}

			#navigation ul {
				margin-bottom: 0;
				padding-left: 0;
			}

			#navigation li {
				float: left;
			}

			#navigation a, #navigation button {
				display: inline-block;
				position: relative;
				color: #333;
				font-size: 17px;
				padding: 8px 12px;
			}

			#navigation a:hover, #navigation button:hover {
				cursor: pointer;
				text-decoration: none;
			}

			#mainMenu, #sideMenu {
				display: inline-block;
				float: left;
			}

			#sideMenu {
				position: absolute;
				top: 0; right: 0;
			}

			#mainMenuList, #settingsList {
				width: 100%;
				display: none;
				float: left;
			}

			#mainMenuList li, #mainMenuList li a, #mainMenuList li button, #otherSubMenu li, #otherSubMenu li a, #otherSubMenu li button {
				width: 100%;
			}

			#mainMenuList a, #mainMenuList button, #otherSubMenu a, #otherSubMenu button {
				opacity: 0;
				transition: opacity .2s ease-in-out;
			}

		/* Settings */
			#settingsList .settingLabel {
				display: inline;
				margin: 0 18px 0 0;
			}

			#settingsList .settingToggle {
				float: right;
				pointer-events: none; /* Prevents the on click event from firing more than once (on child elements). */
				margin-top: 3px;
			}

			#fullScreenSwitch .glyphicon-fullscreen {
				top: 2px;
			}

			#lightsSwitch .fa-lightbulb {
				margin-left: 3px;
			}

		/* Toggles */
			.onOffToggle {
				width: 32px;
				position: relative;
			}

			.onOffToggle-checkbox {
				display: none;
			}

			.onOffToggle-label {
				height: 18px;
				line-height: 18px;
				display: block;
				overflow: hidden;
				background-color: #666;
				border: 1px solid #CCC;
				border-radius: 22px;
				transition: background-color 0.2s ease-in-out;
				cursor: pointer;
				margin: 0;
				padding: 0;
			}

			.onOffToggle-label:before {
				content: "";
				width: 22px;
				display: block;
				position: absolute;
				top: 0; right: 18px; bottom: 0;
				background-color: #FFF;
				border: 1px solid #CCC;
				border-radius: 22px;
				transition: all 0.2s ease-in-out 0s;
				margin: -2px;
			}

			.onOffToggle-checkbox:checked + .onOffToggle-label:before {
				right: 0;
			}

		/* Return button */
			#navigation #returnButton {
				display: none;
				clear: both;
				font-size: 13px;
			}

		/* State-dependent styles */
			/* Hamburger */
				#navigation[mode="hamburger"] #mainMenu {
					width: 100%;
				}

				#navigation[mode="hamburger"] #mainMenuList[expansion="expanded"] {
					display: block;
				}

				#navigation[mode="hamburger"] #mainMenuList[expansion="expanded"] a {
					opacity: 1;
				}

			/* Inline (auto-collapsed by JS) */
				#navigation.rendering { /* See handleNavItems() in eventsProcessor */
					width: 2500px;
				}

				#navigation.rendering #menusWrapper {
					visibility: hidden;
				}

				#navigation[mode="inline"] #mainMenuExpansionButton, #navigation[mode="inline"] #returnButton {
					display: none;
				}

				#navigation[mode="inline"] #mainMenuList {
					display: inline-block;
				}

				#navigation[mode="inline"] #mainMenuList li, #navigation[mode="inline"] #mainMenuList a {
					width: auto;
				}

				/* Main menu hover animations */
				#navigation[mode="inline"] #mainMenuList a {
					opacity: 1;
					vertical-align: middle;
					transform: perspective(1px) translateZ(0);
					transition-property: color;
					transition-duration: 0.2s;
				}

				#navigation[mode="inline"] #mainMenuList a::before {
					width: 0;
					height: 2px;
					content: "";
					position: absolute;
					right: 50%; bottom: 0; left: 50%;
					z-index: -1;
					transition-property: left, right;
					transition-duration: 0.2s;
					transition-timing-function: ease-in-out;
				}

				#navigation[mode="inline"] #mainMenuList a:hover::before, #navigation[mode="inline"] #mainMenuList a:focus::before, #navigation[mode="inline"] #mainMenuList a:active::before, #navigation[mode="inline"] #mainMenuList li.active a::before {
					width: auto;
					right: 0; left: 0;
				}

			/* Other sub-menus */
				#settingsList[expansion="expanded"] {
					display: inline-block;
				}

				#settingsList[expansion="expanded"] a {
					opacity: 1;
				}

				#navigation[mode="inline"] #otherSubMenu {
					width: auto;
					position: absolute;
					top: 100%; right: 0;
					box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
					z-index: 1;
					margin-top: 1px; /* Correcting for 1px border */
				}

				#navigation[mode="inline"] #otherSubMenu li {
					float: none; /* Helps with width: auto; above */
				}

				#navigation[mode="inline"] #settingsList[expansion="expanded"] {
					background-color: #FFF;
					border: 1px solid #CCC;
					border-top: none;
				}

	/* Content */
		#content {
			position: relative;
			overflow: hidden;
			margin-bottom: 92px; /* Making room for footer (height of footer + 6px). */
			margin-left: -15px; margin-right: -15px;
		}

		@media (min-width: 768px) {
			#content {
				margin-bottom: 54px; /* Making room for footer (height of footer + 6px). */
				padding-left: 15px; padding-right: 15px;
			}
		}

		#content a {
			cursor: pointer;
		}

		#contentCanvas {
			position: relative;
			background-color: #FFF;
			border: 1px solid #CCC;
			border-top: none;
			padding: 6px 9px 28px 9px;
		}

		#setup:not([pageId="frame"]) #contentCanvas { /* Should be used on any page which doesn't use adjustConstraintment() */
			min-height: 360px; /* Fallback */
			min-height: 60vh;
		}

		#setup:not([pageId="frame"]) #contentCanvas #splashContentWrapper, #setup:not([pageId="frame"]) #contentCanvas #registrationForms {
			min-height: 360px;
		}

		@media (min-width: 768px) {
			#setup:not([pageId="frame"]) #contentCanvas { /* Should be used on any page which doesn't use adjustConstraintment() */
				min-height: 540px; /* Fallback */
				min-height: 70vh;
			}

			#setup:not([pageId="frame"]) #contentCanvas #splashContentWrapper, #setup:not([pageId="frame"]) #contentCanvas #registrationForms {
				min-height: 540px;
			}
		}

		/* Related to splash and registration pages. */
			h2.eventHeading {
				font-size: 20px;
			}

			h2.eventHeading:not(#accessCodeHeading):not(#registrationHeading):not(#loginHeading) {
				margin-top: 24px;
			}

			h2.eventHeading span {
				margin-bottom: 6px;
			}

			h2.eventHeading span.eventDate {
				font-size: 15px;
			}

			h2.eventHeading span.eventTitle, h2.eventHeading span.eventDate {
				display: block;
			}

			@media (min-width: 768px) {
				h2.eventHeading span.eventDate {
					font-size: inherit;
				}

				h2.eventHeading span.eventTitle, h2.eventHeading span.eventDate {
					display: inline;
					font-size: 20px;
				}
			}

			p.eventSubHeading {
				color: #666;
				margin-bottom: 24px;
			}

		/* check boxes and radio buttons (shared by Registration and Live Feedback - Moderator View) */
			.checkboxWrapper, .radioWrapper {
				height: 36px;
				position: relative;
				display: inline-block;
				background-color: #FFF;
				border: 1px solid #CCC;
				padding: 6px 12px;
			}

			.checkboxWrapper .checkbox-inline, .radioWrapper .radio-inline {
				color: #333;
				vertical-align: initial;
			}

			.has-success .checkboxWrapper, .has-success .radioWrapper {
				border-color: #3C763D;
			}

			.has-error .checkboxWrapper, .has-error .radioWrapper {
				border-color: #A94442;
			}

		/* Tab content */
			#contentCanvas > .tab-pane {
				width: 100%;
				position: relative;
			}

			#contentCanvas > .tab-pane.active {
				display: inline-block;
			}

		/* Components */
			.component {
				position: relative;
			}

			/* System test table */
				#tests  {
					margin-bottom: 6px;
				}

				#tests .testsHeading {
					text-align: center;
					margin: 1rem auto;
				}

				#tests .ellipsis {
					width: 1rem;
					position: relative;
					top: 0.2rem;
					margin-right: 0.33rem;
				}

				#testsTable {
					background-color: #FFF;
					margin-bottom: 0;
				}

				#testsTable tr.testFail {
					color: #A94442;
				}

				#testsTable td {
					white-space: normal;
				}

				#testsTable .testStatus {
					width: 62px;
					text-align: center;
				}

				#testsTable .testRecommendation {
					display: none;
					width: 50%;
				}

				@media (min-width: 768px) {
					#testsTable .testRecommendation {
						display: table-cell;
					}
				}

				#testsTable .statusIcon {
					width: 28px;
				}

				#testsTable .resultIcon {
					display: none;
					width: 28px;
					margin-right: 0.33rem;
				}

				@media (min-width: 768px) {
					#testsTable .resultIcon {
						display: inline-block;
					}
				}

		/* Bottom Text (User Guide | Copyright) */
			#bottomText {
				position: absolute;
				bottom: 0; right: 0;
				font-size: 13px;
				opacity: 0.67;
				margin-right: 12px;
			}

	/* Footer */
		#footer {
			height: 86px; /* Not really needed, except to help with matching the margin-bottom of #content */
			position: absolute; /* Positioning at bottom, regardless of content height */
			right: 0; bottom: 0; left: 0;
			text-align: center;
			white-space: nowrap;
			background-color: #FFF;
			border-top: 1px solid #CCC;
			padding-left: 12px; padding-right: 12px;
		}

		@media (min-width: 768px) {
			#footer {
				height: 48px;
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		#footerCanvas {
			margin-bottom: 6px;
		}

		#footer a, #footer button {
			position: relative;
			color: #333;
		}

		#footerMenu button {
			padding: 6px 18px;
		}

		/* #footerLightsButton CSS in frameStyles */

		#footerMenu, #mediary {
			margin-top: 4px;
			margin-bottom: 4px;
		}

		#mediary {
			font-size: 0;
		}

		#mediaryLink {
			display: inline-block;
		}

		#mediaryImage {
			height: 36px;
		}

	/* Other */
		/* Beta Elements */
			.betaElement.hiddenBetaElement {
				display: none !important;
			}

		/* Enabled attribute */
			[enabled="false"] {
				display: none !important;
			}

		/* User selection */
			#header, #navigation, #footer {
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
			}