/* 
 * Based on the SMACSS development pattern, all layout-rules 
 * are defined here. It defines how elements are layed out on
 * the page, the basic grids with its units and how they 
 * adapt to different viewports.
 * 
 * @see http://smacss.com/book/type-layout
 * 
 * Table of content:
 * - YAML rule normalization
 * - content wrapper class
 * - accessibility helper class
 * 
 * @project Avinash 2.0
 * @date 2012-06-15
 * @author Niklas Zillinger, Sapient GmbH
 * @licensor Unilever
 * @site miscellaneous
 */

/*
 * normalizing YAML style-rules, which are
 * causing problems on mobile devices
 */
.ym-wrapper {
	width: 100%;
}
.ym-gbox {
	padding: 0;
}
.ym-gr {
	margin-left: 0;
}
.ym-grid > li {
	display: inline-block;
}
.ym-grid.l-two > [class*="ym-g"]{
	width: 50%;
}
.ym-grid.l-three > [class*="ym-g"]{
	width: 33.333%;
}
.ym-grid.l-four > [class*="ym-g"]{
	width: 25%;
}
.ym-grid.l-five > [class*="ym-g"]{
	width: 20%;
}

/* 
 * ajust the ym-equalize behaviour for
 * responsive grids (switch to 1 column layout)
 */
@media screen and (max-width: 40.563em) {
	.ym-equalize.l-responsive-grid,
	.ym-equalize.l-responsive-grid > [class*="ym-g"] {
		display: block;
	}
	.ym-equalize.l-responsive-grid > [class*="ym-g"] > [class*="ym-gbox"] {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

/* 
 * styles for rich-content wrapper
 * @subsection   =rich-content 
*/
.l-rich-content {
	padding: 1em;
}

/** 
 * Hide for both screenreaders and browsers: 
 * css-discuss.incutio.com/wiki/Screenreader_Visibility 
 * The no-js-away class allows the hiding of specific js-dependent 
 * elements from screenreaders if js isn't activated
 */
.no-js .no-js-away,
.away {
	display: none;
	visibility: hidden;
}

/** 
 * Hide only visually, but have it available for screenreaders: 
 * www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden 
 */
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: -1px;
	border: 0;
	padding: 0;
	clip: rect(0 0 0 0);
}
.hide { visibility: hidden;}