/*
-----------------------------------------------
WGBH Digital
Martha Speaks mobile video player stylesheet
kal_gieber@wgbh.org
----------------------------------------------- 
*/

/* -------------------------- GENERAL SETTINGS ------------------------- */

video {
	max-width:100%;
	width:100%;
/*	height:25em;	*/
}

/* -------------------------- GENERAL STYLES --------------------------- */


#msm-video-player img, #msm-video-player button, #player-controls ul, #player-controls ul li, #player-controls p {
	margin:0;
	padding:0;
}

#mb-videos button {
/*	background:none;	*/
	border:none;
}

.video-main .hidden {visibility:hidden;}

.video-main .noshow {display:none;}

/* -------------------------- VIDEO PLAYER AREA ------------------------ */

#msm-video-player .video-wrapper {
	width: 100%;
	position: relative;
	height: 0;
}

#msm-video-player .video-wrapper video, #msm-video-player .video-wrapper embed, #msm-video-player .video-wrapper object {
	position: absolute;
	width: 100%;
	height: 100%;
}

.widescreen { padding-bottom: 56.25%; } /* 4x3 would be 75% */

/* fix pbs overlay: */

.video-wrapper > div { margin-top: 0 !important; }
/*.video-wrapper div.overlay img { display: block; margin: 12% auto 12% auto; width: 9.375em; height: 9.375em; }
*/

#msm-video-player {
	width:90%;
	border:4px solid #fff;
	margin: 10px auto 0 auto;
	background-color:#fff;
}

/* -------------------------- VIDEO PLAYER CONTROLS -------------------- */

#msm-video-player button {
	cursor:pointer;
	vertical-align:middle;
}

#msm-video-player button img {
	width:85%;
	padding-top:2px;
}

#player-controls {
	width:99%;
	height:30px;
	background-color:#fff;
	padding:5px 0.5% 0 0.5%;
	overflow:hidden;
}

#player-controls ul {
	list-style: none;
}

#player-controls ul li {
	float:left;
}

#player-controls ul li span {
	display:block;
}

#player-controls ul li button {
    background-color: #40879A;
    width:28px;
    height:28px;
    border-radius: 0.5em;
}

#player-controls .play-area {
	float:left;
	margin-right:4%;
}

#msm-video-player .play-area button img {
	width:80%;
}

#player-controls p {
	font-size:.9em;
	line-height:28px;
	color: #40879A;
}

#player-controls .settings-area {
	float:right;
	margin-left:8px;
}

/* changes the color of the icon font buttons on hover */
#player-controls ul li:hover button {
    background-color: #7BAFBB;
}

#player-controls span.play-pause #icon-pause,
#player-controls span.mute-unmute #icon-unmute,
#player-controls span.toggle-captions #icon-capton,
#player-controls span.play-pause.playing #icon-play,
#player-controls span.mute-unmute.muted #icon-mute,
#player-controls span.toggle-captions.captions-on #icon-captoff
{
	display:none;	
}

#player-controls span.play-pause.playing #icon-pause,
#player-controls span.mute-unmute.muted #icon-unmute,
#player-controls .toggle-captions.captions-on #icon-capton
{
	display:inline;
}

#player-controls .scrubber-area, #player-controls .scrubber-area.fs-enabled {
	margin-right:8px;
	width:33%;
}

#player-controls .scrubber {
	width:100%;
}

#player-controls .scrubber-area .scrubber-track {
    background-color: #ccc;
	height: 4px;
	margin: 12px 0;
    width:100%;
    border-radius: 0.5em;
}

#player-controls .scrubber-area .scrubber-thumb{
	width:10px;
	height:18px;
	position:relative !important;
	top:-7px;
	background-color:#40879A;
    border-radius: 0.3em;
}

/* -------------------------- PLAYLIST - LIST VIEW --------------------- */

.playlist-region {
	width:90%;
	margin:0 auto;
	margin-top:24px;
	float:none;
	overflow:hidden;
}

/*
.playlist-region h2 {
	font-size: 1.35em;	*//* 22/16 *//*
	line-height:28px	
}

.playlist-region .inner-header {
	height:24px;
}
*/

.playlist-region .playlist-block {
	margin-top:10px;
    padding:5px;
    border-radius: 0.5em;	
	background-color:#c4fa82;
}

.playlist-region .plbuttons {
	display:block;
	width:100%;
	height:36px;
	background-color:#fff;
	background-position: center center;
	background-repeat:no-repeat;	
	text-align:center;
	vertical-align:middle;
	padding-top:8px;
	text-indent:-9999px;
	overflow:hidden;	
}

.playlist-region #plbtn-up {
	margin-bottom:10px;
	background-image:url('../i/video/playlist_arrow_up.svg');
}

.playlist-region #plbtn-dn {
	margin-top:6px;
	background-image:url('../i/video/playlist_arrow_down.svg');
}

.playlist-region #plbtn-up.nosvg {
	background-image:url('../i/video/playlist_arrow_up.png');	
}

.playlist-region #plbtn-dn.nosvg {
	background-image:url('../i/video/playlist_arrow_down.png');
}

.playlist-region #plbtn-up:hover {
	background-image:url('../i/video/playlist_arrow_up_over.svg');
}

.playlist-region #plbtn-dn:hover {
	background-image:url('../i/video/playlist_arrow_down_over.svg');
}

.playlist-region #plbtn-up.nosvg:hover {
	background-image:url('../i/video/playlist_arrow_up_over.png');	
}

.playlist-region #plbtn-dn.nosvg:hover {
	background-image:url('../i/video/playlist_arrow_down_over.png');
}

.playlist-region #plbtn-up.bt-inactive:hover {
	background-image:url('../i/video/playlist_arrow_up.svg');
}

.playlist-region #plbtn-dn.bt-inactive:hover {
	background-image:url('../i/video/playlist_arrow_down.svg');
}

.playlist-region #plbtn-up.nosvg.bt-inactive:hover {
	background-image:url('../i/video/playlist_arrow_up.png');	
}

.playlist-region #plbtn-dn.nosvg.bt-inactive:hover {
	background-image:url('../i/video/playlist_arrow_down.png');
}

.playlist-region .plbuttons.bt-inactive {
	cursor:default;
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=45);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.45;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.45;
	
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity:.45;
}

.playlist-region #playlist-cont {
	position:relative;
	overflow:hidden;
}	

.playlist-region #playlist-cont #playlist-column {
	position:absolute;
	top:0;
	width:100%;
	list-style: none;
}

.playlist-region #playlist-column .playlist-item {
	margin:0;
	padding:0;
	margin-bottom:3px;
	color: #595b49;
	font-family: 'Nunito Regular', sans-serif;
	cursor: pointer;
	background: #FFF;
	overflow: hidden;
}

.playlist-region #playlist-column .playlist-item .thumb-container {
	float:left;
	width:40%;
}

.playlist-region #playlist-column .playlist-item .thumb-container img {
	width:100%;
	vertical-align: top;
}

.playlist-region #playlist-column .playlist-item .video-info {
	float:right;
	width:56%;
	margin-right:4px;
}

.playlist-region .playlist-item:hover,
.playlist-region .playlist-item.selected {
	background: #ecfcd9 !important;
}

.playlist-region .playlist-item .video-title {
	font-family: 'Nunito Bold', sans-serif;
	font-size:0.95em;
}

.playlist-region .playlist-item .video-duration {
	font-size:0.8em;
}

.playlist-region .playlist-item p.pl_title {
	padding-bottom:4px;
	line-height:20px;
}

.playlist-region .playlist-item .new-label {
	font-family: 'Nunito Bold', sans-serif;
	color:#595b49;
	font-size:0.8em;
	padding:2px 4px;
	background-color:#9ed45c;
}

.playlist-region .playlist-item .full-label {
	font-family: 'Nunito Bold', sans-serif;
	color:#fff;
	font-size:0.8em;
	padding:2px 4px;
	margin-right:4px;
	background-color:#999;
}

/* NEW EPISODES AND FULL EPISODES */

.playlist-item .new-label, .playlist-item .fullep-label {
  display:none;
}

.playlist-item.new-video .new-label, .playlist-item.episode .fullep-label {
	display:inline;
}


/* -------------------------- RESPONSIVE BREAKPOINTS ------------------- */

/* min 380 */
@media screen and (min-width:23.75em){

	#player-controls .scrubber-area, #player-controls .scrubber-area.fs-enabled {
		width:41%;
	}
	
}

/* min 420 */

@media screen and (min-width:26.25em){

	/* playlists */

	.playlist-region #playlist-column .playlist-item .video-info {
		padding-top:6px;
	}
	
	.playlist-region .playlist-item .video-title {
/*		padding-bottom:0;	*/
		font-size: 1.1em;
	}
	
	.playlist-region .playlist-item .video-duration {
		font-size: .95em;
	}
	
	.playlist-region .playlist-item .new-label {
		font-size: .95em;
	}
	
	.playlist-region .playlist-item .full-label {
		font-size: .95em;
	}

}

/* min 481 */

@media screen and (min-width:30.0625em){

	/* video player */	
	#player-controls {
		height:40px;
	}
	
	#player-controls ul li button {
		width:38px;
		height:38px;
	}
		
	#player-controls p {
		font-size:1.1em;
		line-height:38px;
	}
	
	#player-controls .scrubber-area, #player-controls .scrubber-area.fs-enabled {
		width:41%;
	}
		
	#player-controls .scrubber-area .scrubber-track {
		height: 6px;
		margin: 16px 0;
	}
	
	#player-controls .scrubber-area .scrubber-thumb{
		width:11px;
		height:20px;
		top:-7px;
	}
	
	/* playlists */
	
	.playlist-region {
		width:420px;
	}
	
}

/* min 540 */

@media screen and (min-width:33.75em){

	/* video player */
		
	#msm-video-player {
		width:85%;
	}

}

/* min 600 */

@media screen and (min-width:37.5em){

	/* video player */
		
	#msm-video-player {
		width:75%;
	}

}

/* min 720 */

@media screen and (min-width:45em){

	/* video player */	
	#player-controls {
		height:44px;
	}
	
	#player-controls ul li button {
		width:42px;
		height:42px;
	}
		
	#player-controls p {
		font-size:1.1em;
		line-height:42px;
	}
	
	#player-controls .scrubber-area, #player-controls .scrubber-area.fs-enabled {
		width:48%;
	}
		
	#player-controls .scrubber-area .scrubber-track {
		height: 8px;
		margin: 17px 0;
	}
	
	#player-controls .scrubber-area .scrubber-thumb{
		width:13px;
		height:22px;
		top:-7px;
	}
	
}

/* min 850 */

@media screen and (min-width:53.125em){

	/* video player */	
	#player-controls {
		height:52px;
	}
	
	#player-controls ul li button {
		width:50px;
		height:50px;
	}
		
	#player-controls p {
		font-size:1.2em;
		line-height:50px;
	}
	
	#player-controls .scrubber-area, #player-controls .scrubber-area.fs-enabled {
		width:46%;
	}
		
	#player-controls .scrubber-area .scrubber-track {
		height: 10px;
		margin: 20px 0;
	}
	
	#player-controls .scrubber-area .scrubber-thumb{
		width:14px;
		height:24px;
		top:-7px;
	}
	
	#player-controls .play-area {
		margin-right:2%;
	}
	
	#player-controls .settings-area {
		margin-left:12px;
	}

}

/* min 1080 */

@media screen and (min-width:67.5em){

	#video-cont {
		width:54%;
		float:left;
		padding-left:20px;
	}

	#msm-video-player {
		width: 100%;
	}	

	.playlist-region {
		width:40%;
		float:right;
		padding-right:20px;
		margin-top:0;
	}
	
}

}