html { height:auto; overflow:hidden; }


/*#figbody { margin:auto; margin-top:8px; }*/

#vid { 
	margin:8px; 
	margin-bottom:0px;  /* margin will be 0 all around for phone */
	border:none; 
	background-color:black; 
	padding:0; 
	text-align:center;
}

p.caption { margin:8px; margin-top:6px; }
p.caption { line-height:17px; }
p.caption { clear:none; padding:0px; }

body {
	--videowidth:640px; /* set in JS to the video native size */
	--ctrlwidth:260px; /* set in JS based on which controls are shown */
	--captheight:51px; /* set in JS when the window resizes */
	--ctrlheight:30px; /* constant */
	--subheight:30px; /* constant */
	--margins:calc(8px + 8px + 6px); /* constant: top, bottom, and caption gap */
}

#thevideo {
	width:100%;
	height:auto;
	max-height:calc(100vh - var(--ctrlheight) - var(--subheight) - var(--captheight) - var(--margins));
}



.fullscreen #thevideo {
	max-height:calc(100vh - var(--ctrlheight) - var(--subheight));
}
.fullscreen #vid {
	margin:0px;
	margin-bottom:4px;
}

.phone #vid {
	margin:0px; 
}


/************************* controls in video windows *************************/

button:focus:not(:focus-visible) {
	outline: none !important; /* MAY fix the yucky border in Windows Chrome/Edge */
}


/* video container and video */
#vid, #vid * { cursor:default; }
#thevideo { 
	background-color:black; 
	margin:0; 
	margin-bottom:-3px;  /* -3px because WK and FF add 3px below the video for unknown reason */
}
#subtitles { 
	background-color:black; 
	color:#ddd; 
	height:30px; 
	margin:3px 0px -1px; 
	padding:0px; 
	font-size:18px; 
	text-align:center; 
	font-family:'Helvetica'; 
}
#subtitles.hidden { display:none; }

/* controls */
#videocontrols { 
	height:30px; 
	background-color:#222; 
	vertical-align:top; 
	/* margins to center it if the width is less than 100% */
	/* width:calc(var(--videowidth) * var(--howevermuchitwasmagnified)); actual height / native height */
	margin-left:auto;
	margin-right:auto;
	width:100%;
	XXmax-width:1200px;
}
#videocontrols * { 
	display:inline-block; 
	position:relative; 
	vertical-align:top; 
	color:#ccc; 
	font-family:'Arial'; 
	font-size:13px; 
}
#seek {
	width:calc(100% - var(--ctrlwidth)); 
}
#volume { width:60px; }

.slidertrack { 
	border:1px solid #666; border-radius:4px; background:#444;
	height:8px; 
}
.slidertrack.off, .slidertrack.off span {
	background:#222; border:1px solid #666; 
}
/* the next line must specify #videocontrols so that position:absolute overrides position:relative in #videocontrols * above */
#videocontrols .slidertrack canvas, #videocontrols .slidertrack span { /* canvas is for step ticks, which are not used here */
	position:absolute; top:-3px;
}
/* .slidertrack span is the thumb control for seek and volume */
.slidertrack span {
	border:1px solid #ddd; border-radius:6px; background:#fff;
	height:12px; width:18px; 
}
.slidertrack.round span { width:12px; }
.slidertrack span.down { background:#eee; }
.slidertrack span.off { background:#888; border-color:#888; }
/* control area and shared content */
/* style and content */
#seek { background:#222; } /* it will fill as loading progresses */
#videocontrols button { background-color:transparent; border:none; height:28px; width:28px; overflow:hidden; padding:6px 0px 0px 3px; margin-top:1px; }
#videocontrols button[disabled] { opacity:0.5; }
#videocontrols button:after { content:url('../styles/videocontrols.png'); position:relative; }
#play:after { top:-2px; left:3px; }
#play.pause:after { top:-31px; left:3px; }
#sound:after { top:-62px; left:0px; }
#sound.off:after {top:-91px; left:0px; }
#voice:after { top:-121px; left:1px; }
#voice.off:after { top:-151px; left:1px; }
#full:after { top:-181px; left:2px; }
#full.on:after { top:-211px; left:2px; }
/* placement */
#play { margin-left:1px; }
#seek { margin:11px 0px 0px 5px; } 
#volume { margin-right:3px; margin-top:11px; }
#videotime { text-align:right; width:46px; margin-top:8px; margin-right:8px; }
#full { margin-left:-2px; }
/* fix button placement problem in mozilla */
@-moz-document url-prefix() {
	#vid #subtitles { margin-top:5px; margin-bottom:-5px; }
}



@media screen and (max-width:767px), (max-height:480px) {
	#subtitles { font-size:13px; }
	p.caption { font-size:13px; }
	#figbody, #vid { margin:0px; }
	body { --margins:calc(0px + 8px + 6px); }
}


/* this works but I'm not sure I want to do it
See https://stackoverflow.com/questions/32252337/how-to-style-text-tracks-in-html5-video-via-css
padding and border radius have no effect
*/
/*
#thevideo::cue {
	background-color:black;
	opacity:0.5;
	color:yellow;
	overflow:visible;
	position:100%;
	font-size:0.75em;
	padding-left:6px;
	padding-right:6px;
	border-radius:4px;
}
*/





/************ the stuff below was to use #seeker (range input) to control the seek and volume *******/

#seeker {
	width:calc(100% - var(--ctrlwidth)); 
}


/***************** still need to do this for Edge **************/

input[type='range'] {
	-webkit-appearance:none;
	background:none; /* needed for FireFox, doesn't adversely affect others */
	margin-top:7px; 
}
input[type='range']:focus {
	outline:none; /* for Chrome on Windows; see if this works It does */
}

input[type='range']::-webkit-slider-runnable-track {
	height:8px;
	border-radius:4px;
	border:1px solid #888;
	margin: 4px 0px 0px 5px;
	background: none;
}
#seeker::-webkit-slider-runnable-track {
	/* this is what I want to change during loading, but I can't seem to target it via JS */
	background: linear-gradient(to right, rgb(68, 68, 68) 0%, rgb(68, 68, 68) 100%, rgb(34, 34, 34) 100%, rgb(34, 34, 34) 100%);
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance:none;
	margin-top:-3px; /* or it's below the track! */
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}
#volume::-webkit-slider-thumb {
	height: 12px;
	width: 12px;
}
#seeker::-webkit-slider-thumb {
	height: 12px;
	width: 18px;
}
input[type='range']:disabled::-webkit-slider-runnable-track {
	border-color:#666;
	background:#222;
}
input[type='range']:disabled::-webkit-slider-thumb, 
input[type='range']:disabled:active::-webkit-slider-thumb {
	border-color:#666;
	background:#222;
}
input[type='range']:active::-webkit-slider-thumb {
	border-color:#aaa;
	background:#eee;
}


input[type='range']::-moz-range-track {
	height:8px;
	border-radius:4px;
	border:1px solid #888;
	background: none;
}
#seeker::-moz-range-track {
	/* this is what I want to change during loading, but I can't seem to target it via JS */
	background: linear-gradient(to right, rgb(68, 68, 68) 0%, rgb(68, 68, 68) 100%, rgb(34, 34, 34) 100%, rgb(34, 34, 34) 100%);
}
input[type=range]::-moz-range-thumb {
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}
#volume::-moz-range-thumb {
	height: 12px;
	width: 12px;
}
#seeker::-moz-range-thumb {
	height: 12px;
	width: 18px;
}
input[type='range']:disabled::-moz-range-track {
	border-color:#666;
	background:#222;
}
input[type='range']:disabled::-moz-range-thumb, 
input[type='range']:disabled:active::-moz-range-thumb {
	border-color:#666;
	background:#222;
}
input[type='range']:active::-moz-range-thumb {
	border-color:#aaa;
	background:#eee;
}
input[type='range']::-moz-focus-outer {
	border:0;
}

/*
Edge:thumb is too high on the track (or upper/lower fill is too low, more likely); thumb is 2px too large (set to 13)
Edge:vertical spacing is much too large; try setting the track height?
IE11 (dont' support?):thumb OK, spacing even larger than Edge, top/mid/low ticks are visible
*/
input[type='range']::-ms-track {
	background:transparent;
	border-color:transparent;
	border-width:5px 0;
	height:15px; 
	color:transparent; 
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper {
	border-radius:3px;
	height:5px;
	border:1px solid #888; 
	border-top-color:#747474;
	border-bottom-color:#aeaeae;
	background:linear-gradient(180deg,#a8a8a8,#d0d0d0);
	margin-top:-6px; 
}
input[type='range']::-ms-thumb {
	border:1px solid #888;
	width:13px;
	height:13px;
	border-radius:50%;
	border-top-color:#969696;
	border-bottom-color:#818181;
	background:linear-gradient(180deg,#f0f0f0,#ededed);
}
input[type='range']:disabled::-ms-fill-lower,
input[type='range']:disabled::-ms-fill-upper {
	border-color:#c8c8c8;
	border-top-color:#bababa;
	border-bottom-color:#d7d7d7;
	background:linear-gradient(180deg,#ddd,#eee);
}
input[type='range']:disabled::-ms-thumb, 
input[type='range']:disabled:active::-ms-thumb {
	border-color:#c5c5c5;
	border-top-color:#ccc;
	border-bottom-color:#c0c0c0;
	background:linear-gradient(180deg,#f9f9f9,#f4f4f4);
}
input[type='range']:active::-ms-thumb {
	border-color:#7a7a7a;
	border-top-color:#848484;
	border-bottom-color:#707070;
	background:linear-gradient(180deg,#d9d9d9,#d0d0d0);
}
input[type='range']::-ms-tooltip {display:none;}