.image-marking {
	display: inline-block;
	position: relative;
	top: 200px;
	width: 44px;
	height: 44px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.image-correct {
	float: left;
	background-image: url("/design/tips/images/check.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-correct {
		background-image: url("/design/tips/images/check_2x.png");
	}
}

.image-incorrect {
	float: right;
	background-image: url("/design/tips/images/x.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-incorrect {
		background-image: url("/design/tips/images/x_2x.png");
	}
}

.image-example {
	width: 721px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.image-formatting {
	height: 462px;
	background-image: url("/design/tips/images/interactivity-formatting-content.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-formatting {
		background-image: url("/design/tips/images/interactivity-formatting-content_2x.png");
	}
}

.image-touch {
	height: 460px;
	background-image: url("/design/tips/images/interactivity-touch-controls.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-touch {
		background-image: url("/design/tips/images/interactivity-touch-controls_2x.png");
	}
}

.image-hit-areas {
	height: 458px;
	background-image: url("/design/tips/images/interactivity-hit-areas.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-hit-areas {
		background-image: url("/design/tips/images/interactivity-hit-areas_2x.png");
	}
}

.image-text-size {
	height: 428px;
	background-image: url("/design/tips/images/readability-text-size.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-text-size {
		background-image: url("/design/tips/images/readability-text-size_2x.png");
	}
}

.image-contrast {
	height: 460px;
	background-image: url("/design/tips/images/readability-contrast.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-contrast {
		background-image: url("/design/tips/images/readability-contrast_2x.png");
	}
}

.image-spacing {
	height: 462px;
	background-image: url("/design/tips/images/readability-spacing.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-spacing {
		background-image: url("/design/tips/images/readability-spacing_2x.png");
	}
}

.image-highres {
	height: 457px;
	background-image: url("/design/tips/images/imagery-high-resolution.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-highres {
		background-image: url("/design/tips/images/imagery-high-resolution_2x.png");
	}
}

.image-distortion {
	height: 414px;
	background-image: url("/design/tips/images/imagery-distortion.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-distortion {
		background-image: url("/design/tips/images/imagery-distortion_2x.png");
	}
}

.image-org {
	height: 458px;
	background-image: url("/design/tips/images/clarity-organization.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-org {
		background-image: url("/design/tips/images/clarity-organization_2x.png");
	}
}

.image-align {
	height: 461px;
	background-image: url("/design/tips/images/clarity-alignment.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-align {
		background-image: url("/design/tips/images/clarity-alignment_2x.png");
	}
}

@media only screen and (max-width: 1068px) {
	.image-marking {
		text-align: center;
		top: -74px;
	}
	.image-correct {
		margin-left: 151px;
	}
	.image-incorrect {
		margin-right: 131px;
	}
	.image-example {
		margin-top: 74px;
	}
}

@media only screen and (max-width: 734px) {
	section.sticky nav.tab-navigation {
		text-align: center;
	}
	.image-marking {
		float: none;
		top: 0;
		margin: 0 50px;
	}
	.image-correct {
		margin-left: 0;
	}
	.image-incorrect {
		margin-right: 0;
	}
	.example-wrap {
		margin-right: auto;
		margin-left: auto;
		width: 280px;
	}
	.image-example {
		margin-top: 24px;
		width: 280px;
	}
	.image-formatting {
		height: 179px;
		background-image: url("/design/tips/images/interactivity-formatting-content-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-formatting {
			background-image: url("/design/tips/images/interactivity-formatting-content-small_2x.png");
		}
	}

	.image-touch {
		height: 179px;
		background-image: url("/design/tips/images/interactivity-touch-controls-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-touch {
			background-image: url("/design/tips/images/interactivity-touch-controls-small_2x.png");
		}
	}

	.image-hit-areas {
		height: 178px;
		background-image: url("/design/tips/images/interactivity-hit-areas-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-hit-areas {
			background-image: url("/design/tips/images/interactivity-hit-areas-small_2x.png");
		}
	}

	.image-text-size {
		height: 166px;
		background-image: url("/design/tips/images/readability-text-size-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-text-size {
			background-image: url("/design/tips/images/readability-text-size-small_2x.png");
		}
	}

	.image-contrast {
		height: 179px;
		background-image: url("/design/tips/images/readability-contrast-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-contrast {
			background-image: url("/design/tips/images/readability-contrast-small_2x.png");
		}
	}

	.image-spacing {
		height: 179px;
		background-image: url("/design/tips/images/readability-spacing-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-spacing {
			background-image: url("/design/tips/images/readability-spacing-small_2x.png");
		}
	}

	.image-highres {
		height: 177px;
		background-image: url("/design/tips/images/imagery-high-resolution-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-highres {
			background-image: url("/design/tips/images/imagery-high-resolution-small_2x.png");
		}
	}

	.image-distortion {
		height: 161px;
		background-image: url("/design/tips/images/imagery-distortion-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-distortion {
			background-image: url("/design/tips/images/imagery-distortion-small_2x.png");
		}
	}

	.image-org {
		height: 178px;
		background-image: url("/design/tips/images/clarity-organization-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-org {
			background-image: url("/design/tips/images/clarity-organization-small_2x.png");
		}
	}

	.image-align {
		height: 179px;
		background-image: url("/design/tips/images/clarity-alignment-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-align {
			background-image: url("/design/tips/images/clarity-alignment-small_2x.png");
		}
	}
}

/* ===== Localized Overrides ===== */
@media only screen and (max-width: 734px) {
	:lang(ja)
		nav.tab-navigation
		ul.tab-navigation-items
		li.tab-navigation-item:not(:last-child) {
		margin-right: 0.45em;
	}
	:lang(ja)
		nav.tab-navigation
		ul.tab-navigation-items
		li.tab-navigation-item:not(:first-child) {
		margin-left: 0.45em;
	}
}