// =============================================================================
// Layouts
// =============================================================================

#content,
#footer {
	position: relative;
	padding: @gutterWidth @gutterWidth @gutterWidth;
	background: @white ~"url(images/content-orange-line.png)" repeat-x;
	border-radius: 0 0 5px 5px;
	box-shadow: 1px 1px 10px fade(@black, 10%);
}

#main {
	position: relative;
	width: @mainWidth;
	float: left;
}

#sidebar-primary,
#sidebar-secondary {
	width: @sideWidth;
	float: right;
}

#sidebar-secondary {
	clear: right;
}

/* =============================================================================
   Layout:  Footer
   ========================================================================== */

#footer {
	position: relative;
	padding-top: @gutterWidth;
	margin: @gutterWidth 0;
	background-color: #f8fafb;
	text-shadow: 1px 1px 0 @white;

	.footer-content {
		margin-top: 10px;
	}

	.copyright,
	.credit {
		width: 50%;
		margin: 0;
	}

	.copyright {
		float: left;
	}

	.credit {
		float: right;
		text-align: right;
	}
}

/**
 * Footer Widget Area
 */
#sidebar-subsidiary {
	clear: both;
	margin-top: @smallGutterWidth;

	/* Two columns */
	&.two-col .widget-area {
		float: left;
		width: 48%;
		margin-right: 4%;
	}

	&.two-col .widget-area + .widget-area {
		margin-right: 0;
	}

	/* Three columns */
	&.three-col .widget-area {
		float: left;
		width: 31%;
		margin-right: 3.5%;
	}

	&.three-col .widget-area + .widget-area + .widget-area {
		margin-right: 0;
	}
}

/* =============================================================================
   Layout:  Theme Layouts
   ========================================================================== */

// Set the width of the three column layouts
@three-col-main-width: 500px;
@three-col-sidebar-width: @three-col-main-width / 2 - @smallGutterWidth; // 225px

/**
 * One column layout
 *
 * The first selector makes sure that the theme layout on the front page
 * don't get overwritten in the Theme Customizer preview
 */
body.page-template-template-front-page #main,
.layout-1c #main {
	float: none;
	width: 100%;
}

/**
 * Two columns
 */
.layout-2c-r {
	#main {
		float: right;
	}

	#sidebar-primary,
	#sidebar-secondary {
		float: left;
		clear: left;
		margin-left: -(@smallGutterWidth - 10px);
	}
}

/**
 * Three columns
 */
.layout-3c-c,
.layout-3c-r,
.layout-3c-l {
	#sidebar-primary,
	#sidebar-secondary {
		clear: none;
		width: @three-col-sidebar-width;
	}
}

.layout-3c-l,
.layout-3c-r {
	#main {
		width: @three-col-main-width;
	}
}

/* Three columns, center */
.layout-3c-c {
	#main {
		float: left;
		width: @three-col-main-width;
  		margin-left: @three-col-main-width / 2;
	}

	#sidebar-primary {
		float: left;
		margin-left: -(@three-col-main-width + @three-col-sidebar-width + @gutterWidth); // -765px
	}

	#sidebar-secondary {
		float: right;
		margin-right: -(@smallGutterWidth - 10px);
	}
}

/* Three columns, left */
.layout-3c-l {
	#main {
		float: left;
	}

	#sidebar-primary,
	#sidebar-secondary {
		float: left;
		margin-left: @smallGutterWidth;
	}

	#sidebar-primary {
		margin-left: @gutterWidth;
	}

	#sidebar-secondary {
		margin-right: -(@smallGutterWidth - 10px);
	}
}

/* Three columns, right */
.layout-3c-r {
	#main {
		float: right;
	}

	#sidebar-primary,
	#sidebar-secondary {
		float: left;
		margin-right: @smallGutterWidth;
	}

	#sidebar-primary {
		margin-left: -(@smallGutterWidth - 10px);
	}
}