body {
	margin: 0px;
	background-position: left top;
	background-size: 800px 600px;
	height: 600px;
	overflow:hidden;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    -webkit-touch-callout: none;
}
/* overflow hidden breaks scrolling on android */
/* windows open at 645px height, so media test for full height */
@media (max-device-height:645px) {
	body {
		overflow:visible;
	}
}

#page_container {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	height: 600px;
	background-image: url('buttons/InterMinBackground.jpg');
	background-repeat: no-repeat;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
#screenShot {
	position: absolute;
	width: 800px;
	height: 600px;
	left: 0px;
	top: 0px;
	border: 0px;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
	-moz-user-select: none;			/* firefox not inherited */
	pointer-events: none;			/* prevents dragging firefox and others i.e. surface? */
}
/* ====================== navigation buttons ======================= */
#tocButton {
	position: absolute;
	height: 35px;
	width: 180px;
	left: 0px;
	bottom: 0px;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
#nextFrameButton {
	position: absolute;
	height: 35px;
	width: 35px;
	right: 100px;
	bottom: 0px;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
#previousFrameButton {
	position: absolute;
	height: 35px;
	width: 35px;
	right: 260px;
	bottom: 0px;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
#chapterMenuButton {
	position: absolute;
	height: 35px;
	width: 100px;
	right: 0px;
	bottom: 0px;
}
/* quiz correct and try again in the same place in all quiz frames */
#correctButton {
	position: absolute;
	height: 35px;
	width: 100px;
	right: 0px;
	top: 565px;
	visibility: hidden;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
#tryAgainButton {
	position: absolute;
	height: 35px;
	width: 100px;
	right: 0px;
	top: 565px;
	visibility: hidden;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
.pointerCursor {
	cursor: pointer;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}
img {
	border: none;
	max-width: 100%;
	height: auto;
	/* for retina (high pixel density) displays */
	image-rendering:-moz-crisp-edges;           /* Firefox                        */
	image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
	image-rendering:crisp-edges;                /* CSS3 Proposed                  */
	-ms-interpolation-mode:bicubic;             /* IE8+                           */
}
video {
	border: none;
	max-width: 100%;
	height: 100%;
	touch-action: manipulation;		/* stops double-tap zoom but allows pinch scroll  */
}

/* video slider issues in Safari 10 */
/* https://www.linkedin.com/pulse/creating-custom-html5-video-player-all-its-excess-baggage-campbell */
/* and https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a */
video::-webkit-media-controls-start-playback-button {
	display: none !important;
	opacity: 0;
}

video::-webkit-media-controls-current-time-display {
    display: none !important;
}

video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

video::-webkit-media-controls-mute-button {
    display: none !important;
}

video::-webkit-media-controls-volume-slider {
    display: none !important;
}

video::-webkit-media-controls-volume-slider-container {
    display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}
video::-moz-media-controls-current-time-display {
    display: none !important;
}

video::-moz-media-controls-time-remaining-display {
    display: none !important;
}