tiles-view {
	display: block;
	position: relative;
	height: 100%;
	overflow: hidden;
}

tiles-view .tilesContainer {
	/* .tilesContainer will be 100% of the width of its parent. Each of the columns inside it will be 50% wide. */
	/* If more than two columns are present, they will overflow .tilesContainer. THIS IS DELIBERATE! */
	/* If you need to apply a background or something, do it to tiles-view or the .column elements. */
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 0;
}

tiles-view .column {
	display: inline-block;
	width: 50%;
	height: 100%;
	vertical-align: top;
}

tiles-view .tile {
	display: block;
	position: relative;
	height: 55%;
	/*transform: translateZ(0);*/
	box-sizing: border-box;
}

tiles-view .column:nth-child(odd) .tile:nth-child(odd),
tiles-view .column:nth-child(even) .tile:nth-child(even) {
	height: 45%;
}

tiles-view .tile > .backgroundHighlight {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	/*transform: translateZ(0);*/
	/*transition: opacity 0.3s linear;*/ /* This transition just causes lag, and the lag it causes prevents it from animating anyway */
}

tiles-view .tile > .backgroundHighlight.linked {
	opacity: 0.2;
}

tiles-view .tile.tizenhovered > .backgroundHighlight {
	opacity: 0.5;
}

tiles-view .column .tile {
	border-right: 4px solid;
}

tiles-view .column .tile:nth-child(odd) {
	border-bottom: 4px solid;
}