/* common to course page using either voo or vdo player */ 
/* use additional video type-specific (voo vs vdo) css sheets for div.video_container and further child styling to make video fill available height or width of page  */
body
{
	padding: 0px;
	margin: 0px;
	font-family: arial;
	font-size: 1em;
	line-height: 1.3em;
	background-color: #CBE7FF;
    -webkit-text-size-adjust: 100%;  /* to stop auto-variation in font-size in iOS Safari iPhone; using 100% vs "none" allows macos/ipados safari to zoom all text as normal; no real affect outside of safari, afaik */
}
div#outer_wrapper
{
		max-width: 1200px;
		margin: 10px auto 0px;
		padding: 20px;
		background-color: #EEEEFF;
}
input[type=password]
{
	font-size: 0.9em;
}
input[type=button], input[type=submit], button
{
	/*background-color: #ddffdd;*/
	cursor: pointer;
	font-size: .9em;
	margin: 5px;
	padding: 3px 6px 3px 6px;
	border-radius: 6px;
	color: #FFFFFF;
	
	background-image: linear-gradient(#00B000, #007000);
    background-color: #009000;
}
button span.resumetime
{
	font-size: .8em;
	color: #DDDDDD;
}
input[type=button]:hover
{
	background-color: #cceecc;
}
.displaynone
{
	display: none;
}
div.viddebugdata
{
	margin: 0px
	pad: 0px;
	font-size: 0.7rem;
	color: #777777;
	word-wrap:break-word; /* forces text to wrap even when no breaks */
}
p
{
	font-size: 1em;
	margin: 15px 15px 15px 15px;
}
p.error-message
{
	padding: 10px;
	margin: 0px;
}
h2.list-title
{
	margin-top: 60px;
}
span
{
	font-size: 1em;
	margin: 5px;
}
p span
{
	margin: 0px;
}
span.completed /*for checkmark*/
{
	color: #009900;
	margin: 0px !important;
	display: inline-block;
	font-size: 1.1rem; /*slightly larger than 1.0rem surrounding text, for emphasis, but with 0 margin fits without causing misalignment*/
	font-weight:bold;
}
div#infoDiv
{
	margin: 10px;
}	
span#info
{
	padding: 2px 4px 2px 4px;
}
p.notice
{
	font-size: 0.8em;
	margin-bottom: 8px;
}
span.title
{
	margin: 3px 0px 0px 0px; /*left 0 ok since title div pad sets left edge, and 0 ensures when span wraps for narrow screen the left edge of all lines will align since wrapped line not affected by left margin*/
	font-weight: bold;
	margin-right: 20px; /* separates end of title text from "Length:" info */
	display:inline-block; /*for margins to work properly*/
}
p.descr
{
	
}

div.vid_header
{
	/*display:none;*/  /*hidden via displaynone class*/
}
div.vid_header span
{
	font-weight: bold;
	background-color: #77FF88;
	padding: 2px 4px 2px 4px;
}
a.anchor
{
	visibility: hidden;
	height:0px;
	margin: 0px;
	padding: 0px;
}
div.hr
{
	border-bottom: solid;
	border-width: 2px;
	border-color: #BBB;
	margin: 10px 5px 10px 5px;
	line-height: 0px;
	clear:both; /* to stay below any floating */
}

span.kc
{
	color: #c80606; 
	/*background-color: #AA5566;*/
	/*padding: 2px 5px 2px 5px;*/
	margin: 3px 5px 0px 0px;
	font-style: italic;
}

span.dur, span.viewed
{
	/*font-weight: bold;*/
	color: #777777;
	font-size: 0.8rem;
	margin: 3px 10px 0px 10px;
	display:inline-block; /*for span margins to work properly*/
}
span.reference
{
	/*font-weight: bold;*/
	color: #666666;
	font-size: 0.85rem;
	margin-left: 0px; /* overrides normal span margin so when wrapping the Length info aligns with left edge of */
}
span.dur, span.viewedtime
{
	white-space: nowrap;
}

span.c_item_id, span.o_item_id, span.seq_id
{
	margin: 3px 0px 0px 0px;
	padding: 0px;
	display: inline-block; /*for margins to work properly*/
}


div.c_item_id_container, div.seq_id_container
{
	float:left; /* contains sequential id letter/number left of title */
}
div.title_container
{
	margin-left:28px; /*insets the title to allow space for sequential id letter/number that floats left of this div*/
}

p.ready_header
{
	font-size: 1.2rem;
}
li
{
	margin: 4px;
}
div#demo_list p
{
	margin-bottom: 15px;
}

/* from home page design */
.outer-header-container
{
width: 100%;
height: 186px;
padding: 0px;
/*background-color: #CBE7FF;*/
text-align: center; /*header image centering*/
/*background: #CBE7FF url(images/ell-earth-header.png) top center no-repeat;8*/
/*background: #CBE7FF url(images/header-image.jpg) top center no-repeat;*/
}

.outer-footer-container
{
clear: both; /* clear to be below floating main and side content */
width: 100%;
height: auto;
padding: 20px 0px 30px 0px;
margin-top: 20px;
margin-bottom: 0px;
background-color: #364245;
color: #dddddd;
text-align: center;
}
.outer-footer-container p
{
font-size: 0.7rem !important;
}
.outer-footer-container a
{
font-size: 0.8rem !important;
color: #dddddd;
margin-right: 5px;
margin-left: 5px;
}
img.header-logo
{
float:left; /* logo to left when not mobile  */ 
}
a img.header-logo
{
float:none !important; /* center logo when group pic disappears - for mobile */ 
}
sup
{
padding-left:2px;
/*vertical-align: top;*/   /* overrides higher super alignment to keep within line height */
font-size: 65%;
vertical-align: top; /* keeps from heightening line as super would do */
}

/*for span that replaces view-video button if video is not authorized*/
span.no-auth-video
{
	background-color: #ff5555;
	padding: 2px 4px 2px 4px;
	color: #ffffff;
}

/* EXPAND/COLLAPSE BLOCK -- "expanded" class in title and expand blocks indicates visible expand block, and lack of "expanded" indicates hidden expand block*/
/*for up/down images for expand/collapse in title block div*/
div.title_block:not(.expanded)
{
	background-image: url(images/arrow-down.png);
}
div.title_block.expanded
{
	background-image: url(images/arrow-up.png);
	background-color: #ffbbbb; /*reddish by default, unless authorized class below makes it blue*/
}
div.vid_block.authorized  div.title_block.expanded
{
	background-color: #cceeff;
}
div.title_block /*common to both expanded and collapsed*/
{
	background-position: 6px 6px; /*desired visual left/top positioning also affected by left and top div padding below*/
	background-repeat: no-repeat;
	padding: 3px 3px 3px 25px;/*left pad insets title to allow space for arrow image, rest if for sizing clickable area*/
	cursor: pointer; /*title container div is clickable to expand*/
	background-color: #ffbbbb; /*reddish by default, unless authorized class below makes it blue*/
	border-style: solid;
	border-width: 2px;
	border-color: #999999;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
div.vid_block.authorized  div.title_block /* "authorized" set by dynamic html js based on vid being in vid list */
{
	background-color: #ccddff;
}
div.title_block:hover  /* not used since hover not compatible with  touch or hybrid touch and mouse devices (hangs after touch) and workarounds are all inconsistent across browsers and use cases */
{
	/*background-color: #ffffff;*/
}
/* for display/not-display of expand_block div (expand_block is constance class name of this div)*/
div.expand_block:not(.expanded)
{
	display: none;
}
div.expand_block.expanded
{
	display: block;
}

/*Progress Display*/
div#progress-block p
{
	font-size: 1rem;
	margin: 5px 5px 5px 5px;
}
div#progress-block p.note
{
	font-size: .8rem;
	color: #666666;
	line-height: 1rem;
}
div#progress-block span.progress-value
{
	font-size: .9em;
	color: #0000AA;
	font-style: italic;
	padding-left: 5px;
	font-weight: bold;
}
div#progress-block
{
	background-color: #ccddff;
	padding: 10px;
}

/* *******************************************************************************  */
/* keep media at bottom to override like specificity above*/
@media screen and (max-width: 800px) 
{
.hide-pic
{
display:none;
}
.main-content
{
float:none;
margin-right: 0px !important;
}
.fluid-content
{
margin-right: 0px !important;
}
.side-content
{
float: none;
width: 100%;
}

a img.header-logo
{
float:none !important; /* center logo when group pic disappears - for mobile */ 
}
.remove-div
{
display:none;
}
.narrow-left
{
float: left !important;
}
.narrow-clear
{
clear: both;
}
p.banner
{
font-size: 1.2rem !important;
}
}

@media screen and (max-width: 480px) 
{
p.banner
{
display: none;
}
div.outer-header-container
{
height: 150px;
}
img.header-logo
{
/*width: 180px !important;*/     /*reduced from 240*/
}
}
/*unique to videojs - customization and integration on course page; player also has its own css files*/

/* FOR REFERENCE ONLY///// for vdo player, to ensure height matches available screen height  */
/*
div.video_container
{

	height:90vh;
	display:none;
}
*/

/*for videojs v5.8.4*/

.video_container
{
	width: 100%;
	max-width: 160vh;
	/*display: none;*/ /* show/noshow via displaynone class set in js*/
	/*height: 90vh;*/  /* not needed is videojs using "fluid" option, and 160vh for width takes care of matching video height to screen height if shallow */
}

/* for custom title bar component */
.video-js .vjs-title-bar 
{
  background: rgba(0, 0, 0, 0.5);
  color: white;
  
  /*
    By default, do not show the title bar.
  */
  display: none;
  font-size: 1rem;/* good size that still fits most all titles on single row even on narrow/mobile portrait */
  padding: .4em 40px .2em 40px; /* left/right pad gives room for corner native controls, like fs exit button in native ios player */ 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/*Only show title bar after playback has begun (so as not to hide the big play button) and only when paused or when the user is interacting with the player.*/
.video-js.vjs-paused.vjs-has-started .vjs-title-bar,
.video-js.vjs-user-active.vjs-has-started .vjs-title-bar
{
  display: block;
}
/* center title text in custom video title bar text */
div#titlebar
{
	text-align: center;
}
/*END title bar component*/


div#iosnativecontainer
{
	display: none;
}
div.vjs-jump-control
{
	/*
	display: flex;
    justify-content: center;
    align-items: center;
	*/
	/*above is alternate method for image centering with no need for wrapper div below*/
	position: relative; /*must be pos relative as parent of absolute .center div below*/
	cursor: pointer;
}
div.center /* intermediate wrapper for centering child icon image; parent custom container div must be position: relative; see https://www.w3schools.com/howto/howto_css_center-vertical.asp */
{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
div.vjs-jump-control img
{
	width: 2.2em; /* matches with upsized standard button adjustment below*/
}

/* SAFARI -- remove visbilility and event width-jumping effects of volume slider when small or if in Safari (due to iOS/ipadOS not supporting volume adjustment by controls and inability to distinguish new ipadOS from macos in user agent */
div.video-js.vjs-layout-small button.rew-button, div.video-js.vjs-layout-small button.fwd-button, div.video-js.vjs-layout-small div.vjs-time-divider, div.video-js.vjs-layout-small div.vjs-duration, div.video-js.vjs-layout-small div.vjs-volume-control
{
	display: none !important;
}
div.vjs-volume-control.is-safari
{
	display: none !important;
}
/* When small, this prevents apparent jump in width of top level volume container that causes seek bar to jump even when volume slider is not displayed -- so 4 3m prevents width jump and constrains to just the width needed to show the remaining mute button */
div.video-js.vjs-layout-small div.vjs-volume-panel
{
	max-width: 4em !important;
}
div.vjs-volume-panel.is-safari
{
	max-width: 4em !important;
}


/* enable display of time/duration values that are display:none by default; default padding left/right is 2em, default min-width is 2em (much wider than divider slash); this oveerides size hide breakpoints in stylesheet via !important on display:block, and this is overriden by specificity of small hide just above */
div.video-js div.vjs-current-time, .video-js div.vjs-time-divider, .video-js  div.vjs-duration
{
	display: block !important;
	padding-left: .3em !important;
	padding-right: .3em !important;
	min-width: .5em !important;
}
/* upsize time/duration values font */
.video-js .vjs-time-control 
{
    font-size: 1.1em;
    line-height: 2.7em;
}

/* upsize control bar standard icon buttons: play, mute, fullscreen (does not effect values, rate, seek bar, or volume bar) */ 
.video-js .vjs-button > .vjs-icon-placeholder:before 
{
    font-size: 2.3em !important; /* default: 1.8 */
    line-height: 1.3 !important; /* default: 1.67 */
}  
/* tweek mute speaker icon size to offset button size adj above; vjs-mute-control class added for specificity to override above */
.video-js .vjs-mute-control.vjs-button > .vjs-icon-placeholder:before
{
	font-size: 2.2em !important;
	line-height: 1.35 !important;
}

/* change to png icons to override font icons for best cross browser compatibility, mainly avoids IE svg and font icon load problems, and allows uniform size change for browser zooming */
/*common to all buttons*/
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button > .vjs-icon-placeholder:before 
{
   content: "";
   display: block;
   background-repeat: no-repeat;
   background-size: 22px 22px;
   background-position: 50% calc(50% - 0px);
   border: none !important;
   box-shadow: none !important;
}
/*specific icons*/
/*play control - paused state (right-triangle) */
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-play-control.vjs-paused .vjs-icon-placeholder:before
{
	background-image: url('images/icpla.png');
}
/*play control - playing state (double bars) */
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-play-control.vjs-playing .vjs-icon-placeholder:before
{
	background-image: url('images/icpau.png');
}
/*mute control - 4 states, 0-3 - speaker icons */
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before
{
	background-image: url('images/icvol0.png');
}
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before
{
	background-image: url('images/icvol1.png');
}
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before
{
	background-image: url('images/icvol2.png');
}
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-mute-control.vjs-vol-3 .vjs-icon-placeholder:before
{
	background-image: url('images/icvol3.png');
}
/*fullscreen control - 2 states, enter/exit; NOTE: button does not have distinguishing classes for the 2 states as above as scss dynamic @extends apparently used, so exit icon is selected by using vjs-fullscreen class of top level player div which is only present when in fullscreen ( ie, div.video-js.vjs-fullscreen )  */
div.video-js  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-fullscreen-control .vjs-icon-placeholder:before
{
	background-image: url('images/icfs.png');
}
div.video-js.vjs-fullscreen  div.vjs-control-bar  button.vjs-control.vjs-button.vjs-fullscreen-control .vjs-icon-placeholder:before
{
	background-image: url('images/icfs-ex.png');
}

/* circle icon representing playhead position */
div.video-js div.vjs-play-progress:before, div.video-js div.vjs-volume-level:before {
    content: "";
	background-image: url('images/iccir.png');
	position: relative;
	height: 12px;
	background-size: 12px 12px;
	background-position: 100% 0%;
    margin-right: -6px;
    margin-top: -4px;
	margin-left: -12px;
	top: 0;
	right: 0;
	display: block;
	background-repeat: no-repeat;
	z-index: 1;
	/*below for getting full playhead circle visibility when at 0 vs left side being clipped.. this creates border and allows bkgnd image to show under that border*/
	border-width: 0px 0px 0px 12px;
    border-style: solid;
    border-color: transparent;
	background-clip: border-box; /*allows background image to show behind order, vs padding or content boxes*/
}
/*add space to left of top level progress/seek bar to offset the neg left margin used for playhead pseudo above*/
div.video-js div.vjs-progress-control
{
	margin-left: 10px; 
}
/* when top level progrss container div hovered, increase size of marker circle to match increase in height/thickness of progress bar */
div.video-js .vjs-progress-control:hover .vjs-progress-holder div.vjs-play-progress:before
{
	/*
	height: 16px;
	background-size: 16px 16px;
	background-position: 100% 0%;
    margin-right: -15px;
    margin-top: -5.5px;
	*/
}

/*override enlarging of play progress/seek bar height on hover - default enlarged is 1.666em, 1em is no change size */
div.video-js .vjs-progress-control:hover div.vjs-progress-holder
{
    font-size: 1em;
}
div.video-js .vjs-progress-control:hover div.vjs-progress-holder div.vjs-mouse-display
{
	font-size: 1.666em;
}

/* add padding to left and right ends of control bar to prevent play and fs icons from getting to close to corners/edges of mobile displays */
div.video-js  div.vjs-control-bar
{
	padding-left: 8px;
	padding-right: 8px;
}

/*custom added buttons for fwd and rew - not overriding anything */
.vjs-button.rew-button .vjs-icon-placeholder:before 
{
    background-image: url(images/icrew10.png);
}
.vjs-button.fwd-button .vjs-icon-placeholder:before 
{
    background-image: url(images/icfwd10.png);
}

/* removes undesired outlines/borders appearing around controls when active/clicked */
div.video-js div:active, div.video-js div:focus, div.video-js button:active, div.video-js button:focus
{
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

/* background color  highlight for vid container div when containing video error messages */
div.containsError
{
		background-color: yellow;
}

/*lighten background of rate menu to contrast more with black video sidbars*/
.vjs-menu-button-popup .vjs-menu ul.vjs-menu-content
{
	overflow: hidden;
	background-color: rgb(107 123 147 / 70%);
}

/*hide time tooltip (on hover) above playhead as it's redundant with always-on current time display and interferes with scrub tooltip time visibility */
 .video-js .vjs-progress-control:hover div.vjs-play-progress div.vjs-time-tooltip
{
	display: none;
}

.video-js button.vjs-audio-button, .video-js div.vjs-audio-button
{
	display: none;
}