/*
vbWrapper
	vbContainer -- Videoplayer, Controls, Navigation
		vbVideoContainer
			-video1.stage-video
			-video2.stage-video
			-....
		vbNavbar
			vbControls
	vbTextBox
*/	

#vbWrapper{
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	background-color:#888;/*#005DAA;*/
	}
	
/*vid + player*/
#vbContainer{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	align-self: center;
	overflow:hidden;
	box-sizing: border-box;
}

/*video area */
#vbVideoContainer{
  max-height:100vh;
	position:relative;
	top:0 px;
	left:0 px;
	overflow: hidden;
	box-sizing: border-box;
	
}

/*https://stackoverflow.com/questions/50512426/full-width-html5-video-with-max-height-issues*/
.stage-video{
	max-width:100%;
	max-height:100%;
	height:100%;
	margin:0;
	position:relative;
	}

#vbTextBox {
	height:auto;
	position:absolute;
	overflow:auto;
	top:10px;
	z-Index:5;
	font-Family:Arial, sansserif;
	font-Size:14px;
	color:#222; 
	background-Color:#ffffff;
	text-Align:left;
	box-sizing: border-box;
	/*display:flex;
	overflow:hidden;*/
}

#vbTextBox * {
	/*max-width:40%;
	display:block;*/
}

/*step navigation & video controls*/
#vbNavbar {
	width:100%;
	z-index: 220;
	position: absolute;
	display:flex;
	justify-content: space-around;
	background-image:url('./bg-line.svg');
	background-position: center;
	background-repeat: repeat-x, no-repeat;
	background-color:#005DAA;
	top:90%;
}

#vbNavbar Button{
	margin:4px 4px;
	font-size:1.1em;
	min-width:0.5em;
	border-radius:32px;
	border-color:#AECB36;
	border-style:solid;
	border-width:4px;
	font-weight:bold;
	background:#AECB36;
	color:#fff;
}

#vbNavbar Button:hover{
	background:#fff;
	color:#728f00;
	}
	
#vbNavbar Button.active {
	border-color:#fff;
}

/*play button*/
#vbNavbar #vbButtonPlay:hover{
	background:#84992C;
	border-color:#B6DF0B;
}

#vbControls{
	position: absolute;
	top: -82px;
	text-align:center;
}

#vbControls button p{
	min-width:3em;
}

@keyframes fadein {
  from {
   opacity: 0.0;
  }

  to {
   opacity: 1.0;
  }
}

@keyframes fadeout {
  from {
   opacity: 1.0;
  }

  to {
   opacity: 0.0;
  }
}