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

div#header-wrapper {
	border-top: 4px solid $footer-background;
}

div#header {
	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
	padding: 0;
	#logo {
		background: url('img/logo.png') center right no-repeat;
		height: 2em;
		padding: 1em 0 0 0;
		font-size: 4.615rem;
		line-height: 60px;
		font-weight: bold;
		margin: 0 20px;
		font-family: Roboto, sans-serif;
	}
}

div#nav {
	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	margin: 0 auto;
	padding-bottom: 2ex;
	border-radius: 0;
	> ul {
		margin: 0 10px;
		> li {
			&.selected a {
				background: transparent;
				&::after {
					background: $nav-item-hover-background;
				}
			}
			&:first-child > a {
				border-radius: 0;
			}
			> a {
				border-bottom: 4px solid $nav-item-hover-background;
				margin: 0 10px 10px 0;
				font-weight: normal;
				&::after {
					content: "";
					background: transparent;
					width: 0.8em;
					height: 0.8em;
					transform: rotate(-45deg);
					margin: -0.7em calc(50% - 0.4em);
					border-radius: 0 1em 0 0;
					display: block;
					@media screen and ($max-mobile-viewport) {
						display: none;
					}
				}
				&:hover {
					&::after {
						background: $nav-item-hover-background;
					}
				}
			}
			a {
				font-weight: normal;
			}
		}
	}
}

div#main-content-wrapper {
	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
}

div#content {
	padding: 1em;
}

#toplinks {
	border: 0;
	background: $footer-background url('img/icon_engrenage_header.png') 0.7em 1ex no-repeat;
	border-radius: 0 0 0 1em;
	right: 0;
	a, span {
		color: #fff;
	}
}
