body.term {
	#content {
		padding-left: 0;
		padding-right: 0;

		h1 {
			font-size: fsize(5);
			@include media($phone) {
				font-size: fsize(3);
			}
		}

		// longer duration to load everything in background nicely
		transition: opacity 0.25s ease-in;
	}
}

#screen {
	white-space: nowrap;
	background: #111213;
	padding: 6px;
	display: inline-block;
	border: 2px solid #3983CD;

	font-size: 20px; // some font heights cause visual glitches with some font renderers. This should be configurable.
	font-family: $screen-stack;

	span {
		white-space: pre;
	}

	> span {
		position: relative;
		cursor: pointer;

		&::before {
			content: " ";
		}

		> span {
			position:absolute;
			left: 0;
			z-index: 1;
		}
	}

	&.noselect {
		@include noselect();
	}
}

#action-buttons {
	margin-top: 10px;
	white-space: nowrap;

	button {
		margin: 0 3px;
		padding: 8px 5px;
		min-width: 62px;
		cursor: pointer;
		font-weight: bold;

		&:focus {
			outline: 0 none !important;
		}
	}
}

#term-nav {
	padding-top: 1.5em;
	text-align: center;

	a {
		padding: 0 dist(-2);
		text-decoration: underline;

		&, &:visited, &:link {
			color: #336085;
		}

		&:hover {
			color: #5abfff;
		}
	}

	.icn-keyboard {
		text-decoration: none;
		font-size: 150%;
		vertical-align: middle;
	}
}

#term-wrap {
	text-align: center;
}

// Dummy input field used to open android keyboard
#softkb-input {
	position: absolute;
	top: -9999px;
}

// Tango
.theme-0 {
	$term-colors:
			#111213, #CC0000, #4E9A06, #C4A000, #3465A4, #75507B, #06989A, #D3D7CF,
			#555753, #EF2929, #8AE234, #FCE94F, #729FCF, #AD7FA8, #34E2E2, #EEEEEC;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors, $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Linux
.theme-1 {
	$term-colors:
			#000000, #aa0000, #00aa00, #aa5500, #0000aa, #aa00aa, #00aaaa, #aaaaaa,
			#555555, #ff5555, #55ff55, #ffff55, #5555ff, #ff55ff, #55ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors, $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// xterm
.theme-2 {
	$term-colors:
			#000000, #cd0000, #00cd00, #cdcd00, #0000ee, #cd00cd, #00cdcd, #e5e5e5,
			#7f7f7f, #ff0000, #00ff00, #ffff00, #5c5cff, #ff00ff, #00ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// rxvt
.theme-3 {
	$term-colors:
			#000000, #cd0000, #00cd00, #cdcd00, #0000cd, #cd00cd, #00cdcd, #faebd7,
			#404040, #ff0000, #00ff00, #ffff00, #0000ff, #ff00ff, #00ffff, #ffffff;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Ambience
.theme-4 {
	$term-colors:
			#2e3436, #cc0000, #4e9a06, #c4a000, #3465a4, #75507b, #06989a, #d3d7cf,
			#555753, #ef2929, #8ae234, #fce94f, #729fcf, #ad7fa8, #34e2e2, #eeeeec;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Solarized
.theme-5 {
	$term-colors:
			#073642, #dc322f, #859900, #b58900, #268bd2, #d33682, #2aa198, #eee8d5,
			#002b36, #cb4b16, #586e75, #657b83, #839496, #6c71c4, #93a1a1, #fdf6e3;
	@for $i from 1 through length($term-colors) {
		$c: nth($term-colors,  $i);
		.fg#{$i - 1} { color: $c; }
		.bg#{$i - 1} { background-color: $c; }
	}
}

// Attributes
.bold {
	font-weight: bold !important;
}

.faint span { // content of faint is wrapped in span
	opacity: 0.6;
}

.italic {
	font-style: italic;
}

.under {
	text-decoration: underline;
}

.strike {
	text-decoration: line-through;
}

.underline.strike {
	text-decoration: underline line-through;
}

.blink-hide .blink {
	color: transparent;
}
//

.Row.color-preview {
	font-family: monospace;
	font-size: 16pt;
	display: block;
	margin-bottom: 0;

	padding-left: $form-label-w;

	@include media($phone) {
		padding-left: 0;
		font-size: 14pt;
	}

	.colorprev {
		display:block;
		margin: 0;
		cursor: pointer;
	}
}

#color-example {
	display: inline-block;
	padding: 5px;
}