.g {
	padding: 0.25em;
	overflow: hidden;
}

.g li {
	float: left;
	width: 50%;
	padding: 0.25em;
}

.g img {
	display: block;
}

.g li:nth-child(odd) {
	clear: left;
}

@media screen and (min-width: 40em) {
	.g li {
		width: 33.3333333333333333%;
	}
	.g li:nth-child(3n+1) {
		clear: left;
	}
	.g li:nth-child(odd) {
		clear: none;
	}
}

@media screen and (min-width: 55em) {
	.g li {
		width: 25%;
	}
	.g li:nth-child(4n+1) {
		clear: left;
	}
	.g li:nth-child(3n+1) {
		clear: none;
	}
}

@media screen and (min-width: 72em) {
	.g li {
		width: 20%;
	}
	.g li:nth-child(5n+1) {
		clear: left;
	}
	.g li:nth-child(4n+1) {
		clear: none;
	}
}

@media screen and (min-width: 90em) {
	.g li {
		width: 16.666666666%;
	}
	.g li:nth-child(6n+1) {
		clear: left;
	}
	.g li:nth-child(5n+1) {
		clear: none;
	}
}

/* Link Colours */
.tile a {
	color: #808080;
	text-decoration: none;
}

.tile a:hover,
a:focus {
	color: #005F6B;
}

/* Icon */
img.tile-icon {
	margin-left: auto;
	margin-right: auto;
}

/* Labels */
.tile-label {
    text-align: center;
}

/* Checkerboard */
/* Note: nth-child selector is CSS3. The default styling on li is for graceful degredation on incompatible browsers */
.tile li {
    background-color: #fff
}
.tile li:nth-child(odd) {
    background-color: #fff;
}
.tile li:nth-child(even) {
    background-color: #fff;
}

/* Selected Tile */
li.tile-selected {
    background-color: #00B4CC;
}

.tile-selected a {
    color: white;
}