html{
	height:100%;
}

body{
	background-color:#000;
	text-align:center;
	font-size:11pt;
	font-family:Verdana;
	color:#DDD;
	padding:0px;
	margin:0px;
	display:flex;
	flex-direction:column;
	height:100vh;
	height:100dvh; /* mobile browsers with dynamic toolbars */
	overflow-y:auto;
	overflow-x:hidden;
}

#whole{
	flex:1 1 auto;
	min-height:240px; /* don't collapse entirely on tiny windows; body scrolls instead */
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden; /* clips the unscaled 900x481 layout box; the transform keeps the visual inside */
	background-image:url(index.jpg);
	background-position:center;
	background-repeat:repeat-y;
	/* background-size is set by JS to (natural width * scale) so the
	   border art stays lined up with the scaled player edges */
	background-color:#000;
}

#bg{
	/* Player keeps its original fixed 900x481 layout; JS applies
	   transform:scale() to fit the window while preserving the ratio. */
	flex:none;
	width:900px;
	height:481px;
	transform-origin:center center;
	text-align:center;
	padding:0px;
}

#player{
	width:900px;
	height:481px;
	text-align:center;
	padding:0px;
	margin:0px;
}

#player_jwplayer_playlistcomponent_slider {
  width:5px;
}

a img{
	border:0px;
}

.bar{
	flex:0 0 auto;
	height:25px;
	padding-top:5px;
	background-image:url(b.jpg);
}

#footer{
	flex:0 0 auto;
	text-align:center;
	padding:5px 20px;
	max-width:720px;
	margin:0 auto;
}

a{
	font-size:11pt;
	font-family:Georgia;
	color:#DDD;
	font-weight:bold;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
	color:#FFF;
}