@import '../style/variables';

html, body, .container {
	height: 100%;
	margin: 0;
	font-size: 100%;
  	line-height: 1.5;
	font-family: Helvetica, sans-serif;
	color: #333;
}

a {
	text-decoration: none;
	color: @color-primary;
}

pre {
	tab-size: 2;
}

.app {
	display: flex;
	height: 100%;

	.nav {
		flex: 0 0 200px;
		border-right: 1px solid @color-light-gray;
		padding: 10px;
		background: white;
		overflow: auto;
		z-index: 10;

		@media @smartphone {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			border-bottom: 1px solid @color-light-gray;
			border-right: none;
		}
	}

	&.menuExpanded .nav {
		@media @smartphone {
			bottom: 0;
		}
	}

	.main {
		padding: 10px;
		display: flex;
		width: 100%;
		overflow: auto;
		@media @smartphone {
			margin-top: 45px;
		}
	}
}