#guide {

	h1, h2{
		font: $foro;
		font-weight: 100;
		display: block;
		max-width: 910px;
		margin: 0.5rem auto;
		background: white;

		&:after {
			display: none;
		}
	}

	h1 {
		color: $alex-blue;
		font-size: 4em;
		text-align: center;
	}

	h2 {
		font-size: 3em;
		color: $alex-orange;
		margin-left: -3rem;
	}
	button {
		max-width: 320px;
	}
	nav {
		position: fixed;
		top: 0;
		left: 0;
		max-width: 130px;
		padding: 1em;
		background: rgba( 255,255,255,0.5);

		a {
			margin-bottom: 1em;
			font: $foro;
			font-weight: 100;
			display: block;

			&:hover {
				color: $alex-orange;
				background: lighten($alex-blue, 60%);
			}

			&.active {
				background: lighten($alex-blue, 60%);
			}
		}
	}

	.container {
		max-width: 1024px;
		width: 90%;
		margin: 0 auto 2em;
		padding: 0 2em 2em;
		border: 4px solid lighten($alex-blue, 60%);
		background: #fff;

		.label {
			display: block;
			color: $alex-navy;
			font: $foro;
			margin: 3em auto 1em -2em;
			width: auto;
			max-width: 200px;
			background: lighten($alex-blue, 60%);
			padding: 0.25em;

			span {
				font-size: 12px;
				font-style: italic;
				display: block;
			}
		}
	}

	.flex {
		display: flex;
		flex-wrap: wrap;


		div {
			flex: 1 0 30%;
			font-weight: 500;
			font-size: 0.8em;
			line-height: 1.5;
			color: #fff;
			padding: 1em;
			justify-content: space-between;
			margin: 0.5em;

			&.alex-blue {
				background: $alex-blue;
			}

			&.alex-orange {
				background: $alex-orange;
			}

			&.red {
				background: $alex-red;
			}

			&.navy {
				background: $alex-navy;
			}

			&.light-blue {
				background: $alex-light-blue;
				color: $alex-black;
			}

			&.aqua {
				background: $alex-aqua;
				color: $alex-black;
			}

			&.text {
				background: $alex-text;
			}

			&.black {
				background: $alex-black;
			}

			&.light-gray {
				background: $alex-light-gray;
				color: $alex-black;
			}

			&.gray {
				background: $art-gray;
			}

			&.beige {
				background: $art-beige;
				color: $alex-black;
			}

			&.tan {
				background: $art-tan;
				color: $alex-black;
			}

			&.brown {
				background: $art-brown;
			}

			&.graphite {
				background: $art-graphite;
			}

			&.ink {
				background: $art-ink;
			}

			&.slate {
				background: $art-slate;
			}

			&.royal-blue {
				background: $art-royal-blue;
			}

			&.blue {
				background: $art-blue;
			}

			&.cyan {
				background: $art-cyan;
				color: $alex-black;
			}

			&.green {
				background: $art-green;
			}

			&.lime {
				background: $art-lime;
				color: $alex-black;
			}

			&.yellow {
				background: $art-yellow;
				color: $alex-black;
			}

			&.warm-orange {
				background: $art-warm-orange;
			}

			&.orange {
				background: $art-orange;
			}

			&.red {
				background: $art-red;
			}

			&.fuchsia {
				background: $art-fuchsia;
			}

			&.pink {
				background: $art-pink;
				color: $alex-black;
			}

			&.purple {
				background: $art-purple;
			}
		}

		&.flex-6 {
			div {
				flex: 1 0 13%;
			}
		}
	}

	.row {
		margin-bottom: 3%;
	}



	[class^="col-"] {
		height: 20px;

		@each $nth-child, $color in (1: $art-cyan, 2: $art-lime, 3: $art-blue, 4: $art-yellow, 5: $art-green, 6: $art-fuchsia, 7: $art-warm-orange, 8: $art-pink, 9: $art-royal-blue, 10: $art-purple, 11: $art-orange, 12: $art-red) {
			&:nth-child(#{$nth-child}) {
				background: $color;
			}
		}

		.common-configurations & {
			background: $alex-blue;
		}
	}

	[class^="art_"] {
		border: 4px dashed $alex-text;
	}

	.pause-button,
	.play-button {
		float: none;
	}

	.prob-not {
		opacity: 0.5;
		background: $alex-light-gray;
	}

	.common-configurations {
		.row {
			padding-bottom: 1em;

			[class^="col-"] {
				height: 150px;
			}
		}
	}
}

#previewer {

	.art {
		width: 100%;
		margin: 0 auto $outer-margin;
		background: $alex-light-gray;
		border: 10px dashed $alex-text;
		position: relative;
		height: 525px;

		div {
			@include center("both");
			font-weight: 700;
			font-size: 1.5em;
		}
	}

	.options-panel {
		position: fixed;
		width: 320px;
		height: 100%;
		background: $alex-white;
		border-left: 4px solid $alex-text;
		padding: 4em 1em 1em;
		right: 0;
		top: 0;
		overflow-y: auto;

		select {
			font-size: 14px;
		}

		h3 {
			margin-top: 0.5em;
			font-weight: 700;
			color: $alex-blue;
			text-transform: uppercase;
			font-size: 12px;
		}

		#panelToggle {
			height: 0;
			border-left: 1.5em solid $alex-blue;
			width: 0;
			position: absolute;
			left: 0.75em;
			top: 0.75em;
			border-bottom: 0.75em solid transparent;
			border-top: 0.75em solid transparent;
			border-radius: 6px;
			cursor: pointer;

			&:after {
				content: 'hide';
				position: absolute;
				top: 15px;
				left: -19px;
				font-size: 10px;
				color: $alex-text;

				@include small-screen {
					left: -24px;
				}
			}
		}


		&.closed {
			right: calc(-320px + 3em);
			height: 5em;
			background: transparent;
			border-left: none;
			overflow-y: hidden;

			form,
			.toggles {
				display: none;
			}

			#panelToggle {
				height: 0;
				border-right: 1.5em solid $alex-blue;
				border-left: none;
				width: 0;
				position: absolute;
				left: 0.75em;
				top: 0.75em;
				border-bottom: 0.75em solid transparent;
				border-top: 0.75em solid transparent;

				&:after {
					content: 'config';
					left: -8px;

					@include small-screen {
						left: -3px;
					}
				}
			}
		}
	}
	.toggle-input {
		display: block;

		input,
		label {
			display: inline-block;
			padding: 0.25em;
			font-weight: 500;
			font-size: 14px;
		}

		input:checked,
		input:checked + label {
			background: $alex-light-blue;
			color: $alex-blue;
		}
	}
}