@import "attribution";
@import "abstracts/all";
@import "font-awesome";
@import "typography";
@import "helpers";
@import "reset";




@include scrollbar(14px, #e0e1e2, transparent, 0)

html {
	height: 100%;
}

body{
	background-color: $body-background;
	color: $default-text-color;
	height: 100%;
	overflow: hidden;
	font-family: $normal-font;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	> div#app{
		height: 100%;
	}
}

h1{
	font-family: $heading-font;
}

h1{ font-size: 2.5em }
h2{ font-size: 1.9em }
h3{ font-size: 1.3em }

a{
	color: $primary-color;
	cursor: pointer;
	&:hover{
		color: hover-color($primary-color);
	}
	&:focus{
		color: focus-color($primary-color);
	}
}

main{
	font-size: 14pt;
	height: 100%;
	overflow: auto;
	margin-top: 48px;
	position: absolute;
	width: 100%;
	@include transition(all .2s);
	@include calc(height, '100% - 48px');

	@media only screen and (min-width: $screen-sm) {
		margin-top: 64px;
		@include calc(height, '100% - 64px');
	}

	:local(.mainContent),
	> .main-content{
		max-width: $main-content-max-width;
		padding: 25px;
		margin: auto;
	}
	.content-container {
		margin: 0 -25px;
		padding: 25px;
		background-color: #FFF;
		border-radius: 2px;
		max-width: $main-content-max-width;
		@media (min-width: $main-content-max-width - 50px) {
			margin: auto;
			padding: 10px;
		}
		&.raised {
			@media (min-width: $main-content-max-width - 50px) {
				@include raised(1);
			}
		}
		.content-container-header {
			background: $primary-color;
			color: #FFFFFF;
			margin: -25px -25px 0 -25px;
			padding: 14px 25px;
			font-size: 14pt;
			> * {
				font-size: 14pt;
				line-height: 14pt;
				margin: 0;
				font-weight: normal;
			}
			@media (min-width: $main-content-max-width - 50px) {
				margin: -10px -10px 0 -10px;
				padding: 14px 15px;
				@include border-radius(2px 2px 0 0);
			}
		}
	}
}