body.no-header {
	.primary-header {
		display: none;
	}
}

@mixin active {
	@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
	@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
}

.primary-header {
	width: 100%;
	height: 36px;
	border-bottom: 1px solid #2c2e33;
	@include linear-gradient(top, #686b76, #54565e);
	font-size: 13px;
	color: #fff;
	@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);

	&.active-tab-courseware #courseware-tab {
		@include active;
	}

	&.active-tab-assets #assets-tab {
		@include active;
	}
	
	&.active-tab-pages #pages-tab {
		@include active;
	}

	&.active-tab-users #users-tab {
		@include active;
	}

	&.active-tab-import #import-tab {
		@include active;
	}

	#import-tab {
		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
	}

	.left {
		width: 750px;
	}

	.class-name {
		max-width: 350px;
		text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	}

	.drop-icon {
		margin-left: 5px;
		font-size: 11px;
	}

	.settings-icon {
		font-size: 18px;
		line-height: 18px;
	}

	a,
	.username {
		float: left;
		display: inline-block;
		height: 29px;
		padding: 7px 15px 0;
		color: #e4e6ee;
	}

	.class-nav,
	.class-nav li {
		float: left;
	}

	a {
		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);

		&:hover {
			background: rgba(255, 255, 255, .1);
		}

	}
}