
/*
SimpleYouTubePlayer
by John E Maddox
*/

/* === media list === */

/* BOF For demo, centers video list on screen */

#mList {
  /*max-width: 295px;*/
  margin: auto;
}
 @media screen and (orientation: landscape) and (min-width: 801px) {

#mList {
  /*max-width: 600px;*/
}
}

/* EOF demo */


#mList A {
	/*margin:0 0 30px;
	width: 295px;
	height: 165px;*/
	/*line-height: 155px;  match height
	color: #FFF; */
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	/*border: 1px solid #000;
	display: inline-table;*/
	/*-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover !important;
	background-repeat:no-repeat;
	opacity: 0.3;*/
}
#mList p {
	margin: 0 0 5px 0;
}
/* media list title overlay */


#mList A DIV {
  visibility: visible;
  background: rgba(0, 0, 0, .8);
}

/* On hover actions */


#mList A:hover DIV { visibility: hidden; }

/*#mList A:hover { border: 1px solid #F00; }*/

/* === popup media player === */

/* background overlay */

#mPlayer {
  display: none;
  background: rgba(0, 0, 0, .8);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 20;
  left: 0;
  top: 0;
}
#mPlayer a.modalCloseImg {background:url(../images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
/* video player */

#mPlayer DIV {
  position: fixed;
  background: #000;
  width: 640px; /* width of YouTube Player */
  height: 360px; /* height of YouTube Player */
  left: calc(50vw - 320px); /* 280 is .5(560), centers x axis*/
  top: calc(50vh - 180px); /* 157 is .5(315), centers y axis*/
}
