/*
[att=value]	 - The attribute has to have the exact value specified.
[att|=value] - The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”.
[att^=value] - The attribute’s value starts with the specified value.
[att$=value] - The attribute’s value ends with the specified value.
[att~=value] - The attribute’s value needs to be a whitespace separated list of words, and one of the words is exactly the specified value.
[att*=value] - The attribute’s value contains the specified value.
*/
html { font-size: 100%; }
body {
	min-width: 20em !important;
	min-width: 320px;
	margin: 0 auto;
	font: normal 1em/1.5 Helvetica, Arial, sans-serif;
}
.page-content,
*[class*=container-],
.wrapper {
	position: relative;
	margin: 0 auto;
	clear: both;
}

.wrapper,
*[class*=container-] {
	z-index: 1;
	*zoom: 1;
}
.wrapper:before,
.wrapper:after,
*[class*=container-]:before,
*[class*=container-]:after {
	display: table;
	content: '';
	line-height: 0;
	clear: both;
}

.wrapper {
	padding: 1em 0;
	padding: 0.1px 0;
}

.page-content {
	font-size: 0.875em; /* sets to 14px */
	width: 64em;/* weird EMs inconsistency */
	width: 1024px;
	max-width: 100%;
}
/** /
body, .tablet body {
	width: 1024px;
	min-width: 1024px;
}
/**/
.tablet .page-content {
	min-width: 835px;/* OUR BREAKPOINT */
}
.tablet .container-body {
	width: 1024px;
	max-width: 1024px;
}
/**/
.tablet .wrapper,
.mobile .wrapper {
	min-height: 3.6em;
	padding: 0 4.5%;
	width: 91%;
	padding: 0 5%;
	width: 90%
}
/**/
.page-content,
.container-body {
	box-shadow: 0 0 40px 1px rgba(0,0,0, 0.1);
}
.ie8 .page-content {
}
.ie8 .container-body,
.ie8 .container-header {
	border: 1px solid #EEE;
    border-width: 0 1px;
}
.mobile .page-content,
.mobile .container-body {
	box-shadow: none;
}

/*
.page-content .wrapper {
	border:0 solid #888;
	border-width: 0 1px;
	padding: 1em 0;
	padding-right: 1%;
	padding-left: 1%;
	width: 98%;
}
/**/
.container-header {
	z-index: 3;
}
.container-footer {
	z-index: 2;
}
.container-body {
}

.container-body > .wrapper > section {
	margin: 1em auto;
	*zoom: 1;
}
/* CLEARFIX styles */
.container-body > .wrapper > section:before,
.container-body > .wrapper > section:after {
	display: table;
	content: '';
	line-height: 0;
	clear: both;
}

.container-body > .wrapper > section,
.tablet .container-footer > .wrapper,
.landscape .container-footer > .wrapper,
.desktop .container-footer > .wrapper {
	width: 880px;
	width: 62.8571em;
	width: 916px;
	width: 65.4285714em;
	max-width: 100%;
}

/* GRID COLUMNS @llison ============ */

*[class*='col-']:before,
*[class*='col-']:after { clear: both; display: table; content: ''; line-height: 0; }

/* is exactly 'col' or starts with 'col-' */
*[class*="col-"] {
	position: relative;
	list-style: none;
	display: block;
	float: left;
	min-height: 1px;
	padding: 0.1px 0;
	margin: 0 0 0 2%;
	width: 98%;
	*zoom: 1;
/*	font-size: 0.875em; */
}

*[class*="col-"].margin-right,
*[class*="col-"].no-margin,
*[class*="col-"]:first-child {
	margin-left: 0 !important;
}
.col-1_2:nth-child(2n+1),
.col-1_3:nth-child(3n+1),
.col-1_4:nth-child(4n+1),
.col-1_5:nth-child(5n+1),
.col-1_6:nth-child(6n+1) {
	margin-left: 0 !important;
}
*[class*="col-"].margin-left {
	margin-left: 2% !important;
}
*[class*="col-"].margin-right {
	margin-right: 4%;
}

.col-2_4,
.col-1_2 {
	width: 48%;
}
.col-1_3 {
	width: 31.3333%;
	width: 32%;
}
.col-2_3 {
	width: 64.6667%;
	width: 66.1667%;
}
.col-1_4 {
	width: 23%;
	width: 23.5%;
}
.col-3_4 {
	width: 73%;
	width: 74.5%;
}

.col-1_5 {
	width: 18%;
	width: 18.4%;
}
.col-2_5 {
	width: 28%;
	width: 38%;
}
.col-4_5 {
	width: 78%;
}

.col-1_6 {
	width: 14.6666667%;
	width: 15%;/* first-child: margin:0 */
}

.col-1_4.no-margin {
	width: 25%;
}
.col-3_4.no-margin {
	width: 75%;
}
article .col-1_4.no-margin {
	width: 28%;
}
article .col-3_4.no-margin {
	width: 72%;
}
article .col-2_3.no-margin {/* assume has banner*/
	margin-right: 24px;
}

.col-2_3 + .col-1_3.margin-left {
	width: 27.66667%;
}

/**/
*[class|="col"].padded {
	margin:  1em 2%;
	padding: 1em 0;
	width: 96%; /* -4% each col for padding & margin */
}/*
.col-1_3.padded {
	width: 27.333333%;
}*/
.col-1_2.padded,
.col-2_4.padded {
	width: 46%;
}
.col-1_3.padded {
	width: 29.333333%;
}
.col-2_3.padded {
	width: 62.666667%;
}
.col-1_4.padded {
	width: 21%;
}
.col-3_4.padded {
	width: 71%;
}

.col-1_5.padded {
	width: 17%;
}
.col-4_5.padded {
	width: 75%;
}


/* Media Queries // ================================================= */


.tablet article .col-2_3,
.tablet.portrait .col-2_3,
.tablet.portrait .col-3_4,
.tablet.portrait .col-4_5,
.mobile *[class*="col-"] {
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.mobile .grid-blocks > .col-1_2,
.mobile .grid-channels > .col-1_2 {
	width: 48% !important;
	margin-left: 2% !important;
}
.mobile .grid-channels {
	margin-left: 2% !important;
}


@media only screen and (min-width: 321px) {
	.nav-btns {
		margin: 4px;
	}
}

/* MOBILE // to cover iPhone5 landscape */
@media only screen and (max-width: 568px) {

	 div[class|="layout"] section[class|="col"],
header *[class|="col"],
	   *[class|="col"] {
		width: 92%;
		margin-left: 4%;
		margin-right:4%;
		padding: 5px 0;
	}

}