$sidebar-layout-border-color: $base-border-color;
$sidebar-layout-border: 1px solid $sidebar-layout-border-color;
$sidebar-layout-section-background: lighten($sidebar-layout-border-color, 10);

.sidebar-layout {
	@include clearfix;
	height: 100%;
	border: $sidebar-layout-border;

	aside {
		height: 100%;
		@include media($medium-screen) {
			@include span-columns(3, block-collapse);
		}
		
		ul {
			height: 100%;
			padding: 1em;
			@include media($medium-screen) {
				padding: 0;
				border-right: $sidebar-layout-border;
			}
		}

		li {
			margin-right: 1em;
			margin-bottom: 1em;
			display: inline-block;
			@include media($medium-screen) {
				margin: 0;
				padding: 1em;
				display: block;
				border-bottom: $sidebar-layout-border;
			}
		}
	}

	.content {
		@include media($medium-screen) {
			@include span-columns(9);	
		}
		background-color: $base-body-color;
		padding: 1em;

		section {
			@include media($medium-screen) {
				@include span-columns(6);	
				@include omega(2n);
			}
			border: $sidebar-layout-border;
			margin-bottom: 1em;
			background-color: $sidebar-layout-section-background;
			padding: 1em;
		}	
	}
}