@import '../includes/fonts/firasans';
@import '../includes/fonts/roboto';

div#header-wrapper {
	background-color: $red;
	#logo {
		padding-top: 15px;
		@media screen and ($max-mobile-viewport) {
			padding-top: 50px;
		}
		a {
			display:inline-block;
			background: url(img/logo.svg) top center no-repeat;
			background-size: contain;
			height: 60px;
			width: 100%;
			text-indent: -10000px;
			overflow: hidden;
			@media screen and ($max-mobile-viewport) {
				background-position: left;
				height: 50px;
			}
		}
	}
}

#toplinks {
	background: $red;
	color: white;
	& a {
		color: inherit;
	}
}

div#nav {
	font-size: 1.1rem;
	@media screen and ($min-desktop-viewport) {
		text-align: center;
	}
	a {
		font-weight: normal;
	}
	/* first level elements */
	> ul > li {
		& > a {
			text-transform: uppercase;
			border-bottom: 3px dotted transparent;
			padding-bottom: 5px;
			transition: border-bottom 0.2s ease-in-out;
		}
		&.selected > a > span,
		&:hover > a > span {
			border-bottom: 3px dotted white;
			color: white;
			padding-bottom: 5px;
		}
	}
	/* second level elements */
	> ul ul li {
		a::before {
			content: "\f0da";
			font-family: FontAwesome;
			padding-right: 1ex;
		}
		&:hover > a > span {
			border-bottom: 1px solid white;
		}
	}
}

div.gru-nav ul {
	margin-top: 0;
	margin-bottom: 0;
}

%button, %button:hover {
	box-shadow: none;
	text-transform: uppercase;
	font-weight: 700;
	transition: none;
}

div#main-content {
	margin-top: 15px;
}

select, select:focus, select:focus:not([readonly]) {
	background-color: white;
	border-bottom: 1px solid $grey;
}

div.widget div.title {
	color: $grey;
	text-transform: uppercase;
	font-weight: 700;
}

.CheckboxWidget div.title > label {
	color: black;
	font-weight: normal;
	text-transform: none;
}

div.hint {
	color: $grey;
}

div#rub_service {
	background-color: white;
}

ul#evolutions {
	li div.msg, div.evolution-metadata {
		background-color: white;
	}
}

div.timetable-widget {
	span.timetable-cell.selectable {
		&:hover {
			background: lighten($primary-color, 25%);
			outline: 1px solid $primary-color;
		}
		&.on {
			background: $primary-color;
			color: darken($primary-color, 25%);
		}
	}
}

.user-info--separator::after {
	content: "·";
}
