#navbar {
	background-color: @main-color;
	border: 0 none !important;

	.rem(height, 70);
	width: 100%;

	position: absolute;
	top: 0;
	left: 0;

	.navbar-inner {
		background: transparent !important;
		border: 0 none !important;
		padding: 0;
		margin: 0;
	}
}

.tabbable > .nav-tabs li,
#navbar .nav > li {
	overflow: hidden;
	position: relative;

	> a {
		background: transparent;
		color: @main-color;

		.rem(height, 70);
		padding: 0;
		margin: 0;

		position: relative;
		z-index: 1000;
		white-space: nowrap;
		text-align: right;

		&:active {
			background: darken(@main-color, 15%);
		}

		&:before {
			.font-icon-reset();
			content: @fa-legacy-var-question;
			color: @main-color-text;

			text-align: center;
			.rem(font-size, 32);
			.rem(line-height, 70);

			display: block;
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;

			@media(max-width: 320px) {
				font-size: 10vw !important;
			}
		}
	}
	&#touchui_dropdown_link a:before {
		content: none;
	}
}

#tabs {
	.flex-display();
}

#navbar .navbar-inner .container .nav li#all_touchui_settings {
	width: 200px;
}

#navbar,
#tabs {
	.nav > li,
	&.nav > li {
		.flex(0 0 100%);
		max-width: 7rem;

		@media(max-width: 565px) {
			max-width: 5.5rem;
		}

		@media(max-width: 439px) {
			max-width: 5rem;
		}

		@media(max-width: 400px) {
			max-width: 4.5rem;
		}

		&#touchui_dropdown_link {
			pointer-events: none;
		}
	}
}
