// main: style.scss

#primary {
	padding-bottom: $base*2;
	padding-top: $base*2;
}
#secondary {
	padding-bottom: $base*2;
	padding-top: 0;
	@include for(medium-screens) {
		padding-top: $base*2;
	}
}

.content-area {
	width: 100%;
	float: none;
	@include for(medium-screens) {
		float: left;
	}
}
.sidebar {
	width: 100%;
	float: none;
	@include for(medium-screens) {
		width: percentage( 280px / $grid ); // 300px
		float: left;
	}
}

.no-sidebar .content-area {
	width: 100%;
}

@include for(medium-screens) {
	.left-sidebar .content-area {
		float: right;
		padding-left: 39px;
		border-left: 1px solid $border;
		margin-right: 1px;
		width: percentage( 830px / $grid ); //680px
	}

	.left-sidebar .sidebar {
		padding-right: 39px;
		border-right: 1px solid $border;
		margin-right: -1px;
	}

	.right-sidebar .content-area {
		padding-right: 39px;
		border-right: 1px solid $border;
		width: percentage(830px / $grid ); //680px
	}

	.right-sidebar .sidebar {
		padding-left: 39px;
		border-left: 1px solid $border;
		margin-left: -1px;
	}
}