.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: 735px) {
	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: 735px) {
	: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;
	}
}