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

/* FONTS
-------------------------------------------------------------- */

@font-face {
    font-family: 'Nunito Bold';
    src: url('font/Nunito-Bold.ttf') format('truetype');    
}

@font-face {
    font-family: 'Nunito Regular';
    src: url('font/Nunito-Regular.ttf') format('truetype');    
}

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

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

.martha-video-container {
	width:980px;
	height:690px;
	margin:25px 0 0 30px;
	background:url('../i/TV-BG.png') right top no-repeat;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0
}
  
/* -------------------------- GENERAL STYLES --------------------------- */


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

.martha-video-container button {
	border:none;
}

.martha-video-container .hidden {visibility:hidden;}

.martha-video-container .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; }
/*
KEEP THIS COMMENTED OUT FOR NOW
.video-wrapper div.overlay img { display: block; margin: 12% auto 12% auto; width: 9.375em; height: 9.375em; }
*/

#msm-video-player {
	width:440px;
}


#video-cont {
	float:left;
	margin:20px 0 0 80px;
	background-color:#565656;
	width:442px;
	height:313px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	padding:20px 20px 0 20px;
	box-shadow:10px 10px 0 0 rgba(0, 0, 0, 0.3);
}

#video-player {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* -------------------------- 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:40px;
	padding:10px 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:38px;
    height:38px;
    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:.8em;
	line-height:37px;
	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:15px;
	width:42%;
}

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

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

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

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

.playlist-region {
	float:left;
	width:310px;
	overflow:hidden;
}

/*   PLAYLIST HEADER  */

.inner-header {
	position:relative;
    font-family: 'Nunito Bold',sans-serif;
	height:46px;
	padding:8px 5px 8px 5px;
    text-align: center;
	overflow:hidden;
}

.inner-header h2 {
	font-size: 1.75em;	/* 28/16 */
	line-height:46px;
	background-color:#c4fa82;
	color:#594b9f;
	}
	
.inner-header img {
	position:absolute;
}

.inner-header img.r-indent {
	width:98%
}

.inner-header .border_top { top:0; left:5px; }
.inner-header .border_left { top:4px; left:0; }
.inner-header .border_right { top:4px; right:0; }
.inner-header .border_bottom { bottom:0; left:5px; }
	
/* END PLAYLIST HEADER STYLES */

.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;
	height:61px;
	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.8em;
}

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

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

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

.playlist-region .playlist-item .full-label {
	font-family: 'Nunito Bold', sans-serif;
	color:#fff;
	font-size:0.7em;
	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;
}