/* =============================================================================
   Layout
   ========================================================================== */

body {
	font-size : 76%;
}

/* 12px in most modern browsers - used as basis of layout and typography.
 * Calculate em based dims as: target dim(px) / container dim(px) = result in em
 */

#body-container,
#header-above {
	margin  : 0 auto;
	padding : 0;
}

#load-first,
#footer-above {
	float : left;
}

#footer-above {
	width : 100%;
}

.main-only #content-main {
	float : left;
	width : 100%;
}

.main-only #load-first {
	width : 100%;
}

.alpha-1-main #load-first {
	width : 100%;
}

.alpha-1-main #content-main {
	float : right;
	width : 81%;
}

.alpha-1-main #column-group-alpha {
	float : left;
	width : 19%;
}

.alpha-2-main #load-first {
	width : 100%;
}

.alpha-2-main #content-main {
	float : right;
	width : 62%;
}

.alpha-2-main #column-group-alpha {
	float : left;
	width : 38%;
}

.main-beta-1 #content-main {
	float : left;
	width : 100%;
}

.main-beta-1 #load-first {
	width : 81%;
}

.main-beta-1 #column-group-beta {
	float : right;
	width : 19%;
}

.main-beta-2 #content-main {
	float : left;
	width : 100%;
}

.main-beta-2 #load-first {
	width : 62%;
}

.main-beta-2 #column-group-beta {
	float : right;
	width : 38%;
}

.alpha-1-main-beta-1 #load-first {
	width : 81%;
}

.alpha-1-main-beta-1 #content-main {
	float : right;
	width : 74.2%;
}

.alpha-1-main-beta-1 #column-group-alpha {
	float : left;
	width : 25.8%;
}

.alpha-1-main-beta-1 #column-group-beta {
	float : right;
	width : 19%;
}

.alpha-2-main-beta-1 #load-first {
	width : 81%;
}

.alpha-2-main-beta-1 #content-main {
	float : right;
	width : 62%;
}

.alpha-2-main-beta-1 #column-group-alpha {
	float : left;
	width : 38%;
}

.alpha-2-main-beta-1 #column-group-beta {
	float : right;
	width : 19%;
}

.alpha-1-main-beta-2 #load-first {
	width : 62%;
}

.alpha-1-main-beta-2 #content-main {
	float : right;
	width : 65.5%;
}

.alpha-1-main-beta-2 #column-group-alpha {
	float : left;
	width : 34.5%;
}

.alpha-1-main-beta-2 #column-group-beta {
	float : right;
	width : 38%;
}

.alpha-2-main-beta-2 #load-first {
	width : 62%;
}

.alpha-2-main-beta-2 #content-main {
	float : right;
	width : 38%;
}

.alpha-2-main-beta-2 #column-group-alpha {
	float : left;
	width : 62%;
}

.alpha-2-main-beta-2 #column-group-beta {
	float : right;
	width : 38%;
}

/* =============================================================================
   spacing rules
   ========================================================================== */

.gutter {
	margin : 10px;
}

header .gutter {
	margin-top : 0;
}

footer .gutter {
	margin-bottom : 0;
}

#column-group-alpha .gutter {
	margin : 0 10px 0 0;
}

#column-group-beta .gutter {
	margin : 0 0 0 10px;
}

/* =============================================================================
   dynamic module widths
   ========================================================================== */

.count-1 {
	float : left;
	width : 100%;
}

.count-2 {
	float : left;
	width : 50%;
}

.count-3 {
	float : left;
	width : 33.3%;
}

.count-4 {
	float : left;
	width : 25%;
}

.count-5 {
	float : left;
	width : 20%;
}

.count-6 {
	float : left;
	width : 16.6%;
}

/* =============================================================================
   column widths 
   ========================================================================== */

.cols-1 {
	display : block;
	float   : none !important;
	margin  : 0 !important;
}

.cols-2 .item {
	width   : 47.8%;
	padding : 1%;
}

.cols-3 .item {
	width   : 30.9%;
	padding : 1%;
}

.cols-4 .item {
	width   : 22.4%;
	padding : 1%;
}

.cols-5 .item {
	width   : 18.1%;
	padding : 1%;
}

.cols-6 .item {
	width   : 14.8%;
	padding : 1%;
}

.cols-2 .item,
.cols-3 .item,
.cols-4 .item,
.cols-5 .item,
.cols-6 .item {
	float : left;
}

.column-1,
.items-more {
	clear : both;
}