@charset "UTF-8";
/*!
*
* MEP/ OU Player generic/base styles. Copyright 2012 The Open University.
*
*/
/*(Was: oup-mep/css/mep-ouplayer.css) */

/*
 * Generic stuff.
 */
body	{
	margin:0; 
	font:1em Tahoma,"Lucida Grande",Arial,Helvetica,sans-serif;
	background:#000; /*Was #222. */
	color:#eee;
	}
h1 {
	font-size:1.2em;
	margin:0.2em 0;
}
.error {
	color:#a00;
	}
.error em{
	font-style:normal;
	font-weight:bold;
	}


/*Accessibility: at least set a border in high-contrast/ignore colour mode.
*/
.ignore-color button, .ignore-color .oup-mejs-link a {
	border:1px solid #111 !important;
	}
.ignore-color .mejs-playpause-button button {
	margin-top:1px !important;
	}


.mejs-container { 
	position:fixed; /*Not absolute. */
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:auto;
	height:auto;
	/*height:100% !important; /* Why 99% ?? */
	}

.mejs-container .mejs-controls {
	position:fixed; /*Not absolute. */
	/*background: none;*/
	list-style-type: none;
	margin:0;
	padding:0;
	bottom:0;
	left:0;
	overflow:hidden;
	}
/* A bottom 'gutter' for the popup player (18px) */
.mode-popup .mejs-container .mejs-controls {
	padding-bottom:18px;
	}
.jslib-ender .mejs-mediaelement, .jslib-ender #me_flash_0_container,
.jslib-ender video,.jslib-ender audio, .jslib-ender embed,.jslib-ender object,
.jslib-ender .mejs-poster {
	position:fixed;
	width:100%;
	height:100% !important; /*Unfortunate, but necessary given the Ender.js problem with '100%' - see ../views/..body.php */
	}

/*
  Make sure that the poster that Media Element JS adds is centered if it is not as 
  wide as the player (and also is in the same place as any poster added via the video 
  element)
*/
.mejs-poster img {
  margin: 0 auto;
}

.mejs-overlay-play, .mejs-layer {
	position:fixed;
	height:auto !important;
	top:0;
	bottom:22px;
	}
/* Full screen button, only top half works [LtsRedmine:8526] */
.ua-webkit.plugin-flash embed, .ua-moz.plugin-flash embed {
	position:fixed;
	top:0;
	bottom:0;
	}

/* #1417, MSIE 9/IE 9 compatibility bug *--/
.ua-ie9 .mejs-container, ._ua-ie9 video,
.ua-ie7 .mejs-container, ._ua-ie7 video{ position:fixed; width:100% !important; height:100%; }
*/

/* Video offset bug: [Ltsredmine:6932] */
.oup .mejs-video .mejs-mediaelement {
  height:auto;
  bottom:22px;
}
.oup .mejs-video .me-plugin {
  position:fixed;
  height:auto;
  top:-11px;
}
.oup.mode-popup .mejs-video .me-plugin {
  top:-26px;
}
.oup.mode-popup .mejs-video .mejs-mediaelement {
  bottom:40px;
}


/* Error handling.
*/
#oup-noscript, .error {
	position:absolute; 
	background:#f4f4f4;
	color:#222;
	padding:5px;
	top:0;
	border:1px solid #a11;
	border-radius:4px;
	font-size:.96em;
	}
.error p{ margin:.7em 0; }
.mtype-audio .error p{ margin:0; }
.mtype-audio.ctx-Vle_player .error{ padding:0 5px; font-size:.75em; }
.mtype-video #oup-noflash a{ display:block; }
#oup-noscript, #oup-noflash, .error{ z-index:999; }  /* << Put z-index on its own - easier search & compare. */
.mtype-video.ua-moz #oup-noflash{ right:0; }  /* << Leave space for "This plugin is vulnerable..." message - Firefox. */
@media (max-width:50em) {
    .mtype-video.ua-moz #oup-noflash{ width:15.5em; }
    }
#oup-noscript.hide, .error.hide {
	display:none;
	}
.oup.--no-flash .mejs-controls, .--no-flash .mejs-title-panel{ display:none; }


.mejs-container button	{
	padding:0;
	cursor:pointer;
	}

.mejs-container .mejs-controls  div {
	width:auto;
	}

.oup-mejs-button button, .oup-mejs-link a	{ 
	display:block;  
	width:16px; 
	height:16px; 
	}

.mejs-container button:focus, .oup-mejs-link a:focus	{
	outline:1px solid orange !important;
	-moz-outline-radius:3px;
	}

/* Hide multi-language panel. */
.mejs-controls .mejs-captions-button .mejs-captions-selector {
	display:none;
	}

/* Hide unnecessary buttons, particularly in small audio players [iet-it-bugs:1486] */
.no-banner.mtype-audio/*.mode-embed*/ .mejs-transcript-button,
.no-banner.mtype-audio .mejs-options-button {
	display:none;
	}

/* Title panel.
*/
/*.mejs-container .mejs-controls*/ .mejs-title-panel {
	background: #f8f8f8;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.99)), to(rgba(200,200,200,0.99))); /* Saf4+, Chrome */
	background:-webkit-linear-gradient(top, rgba(255,255,255,0.83), rgba(200,200,200,0.9)); /* Chrome 10+, Saf5.1+ */
	background:   -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.85)); /* FF3.6+ */
	background:    -ms-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.85)); /* IE10 */
	background:     -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.85)); /* Opera 11.10+ */
	background:        linear-gradient(rgba(255,255,255,0.99), rgba(200,200,200,0.99));  /* W3C */
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8);

	position:absolute;
	left:0;
	bottom:22px;
	width:100%;
	height:auto;
	}
.mejs-title-panel{ z-index:5; }

/* A bottom 'gutter' for the popup player (22+18px) */
.mode-popup /*.mejs-container .mejs-controls*/ .mejs-title-panel {
	bottom:40px;
}
/*.mejs-container .mejs-controls*/ .mejs-title-panel .logo {
	float:left;
	width:60px;
	height:66px; /*70px*/
	/*margin:0 0 2px;*/
	/*
	  SPRITE inclusion - needs moving!
	*/
	background:transparent url('../../oup_light/css/oup-light-sprite.png') no-repeat 0 -74px;
	}

.mejs-title-panel p, .mejs-title-panel h1 {
	font-weight:normal;
	font-size:1.02em; /*1.2em; Computed: 16px*/
	letter-spacing:-0.01em;
	/*padding:0em 0em 0em 3em;*/
	color:rgb(20,20,20);
	margin:9px 0 0 65px;
	line-height:1.05em; /*1.2em*/
	}

.mejs-title-panel a	{
	margin:9px 0 0 65px; /*.5em; Computed: 9.35px*/
	font-size:.91em; /*1.15em; 1.7em*/
	letter-spacing:-0.01em;
	/*color:#1f536b; 							/*This is the standard linking colour please check before making theme sensitive, I suspect it should remain this colour always*/
	display:block;
	padding:0 0 11px; /*.6em*/
	text-decoration:none;
	}
.mejs-title-panel h1, .mejs-title-panel a {
	white-space:nowrap;
	overflow: hidden;
	text-overflow:ellipsis; /*#1388, truncate too-long titles..*/
	}

.mejs-title-panel a:hover	{
	text-decoration:underline;
	}

/* Title panel in audio player.
*/
.mtype-audio.mode-embed /*.mejs-container .mejs-controls*/ .mejs-title-panel {
	background: #f2f2f2;
	}
.mtype-audio.mode-embed .mejs-title-panel .logo {
	display:none; /* TODO: hide for now! */
	}
.mtype-audio.mode-embed .mejs-title-panel h1, .mtype-audio.mode-embed .mejs-title-panel a {
	font-size: 1.05em; /*1.3em; Computed: 14.3px*/
	margin-left:3px;
	}

/* Title panel: a bit back to front! */
.mtype-video.mejs-pause .mejs-title-panel{ display:none /*!important;*/; }


/* Title panel in narrow players.  @media (max-width: 451px) { }
*/
.width-small .mejs-title-panel h1, .width-small .mejs-title-panel a {
    font-size:.88em; /*1.4em*/
	letter-spacing:-0.013em;
	}
.mtype-audio.mode-embed .mejs-title-panel a, .width-small .mejs-title-panel a {
	font-size:.92em;
	}
.width-small.mtype-video .mejs-title-panel h1 {
    font-weight:bold;
	}
.width-small /*.mejs-container .mejs-controls*/ .mejs-title-panel .logo {
	background-position:0 -80px;
	}

/* Title panel in large players.
*/
.width-large .mejs-title-panel h1, .width-large .mejs-title-panel a {
	font-size:1.4em;
	letter-spacing:0;
	}
.width-large .mejs-title-panel a {
	font-size:1.1em;
	}

body .mejs-container .mejs-controls .mejs-time {
	padding: 0 3px;
	margin: 8px 0 0;
	height: 14px;
	}

/* Only show the progress-bar 'thumb' on keyboard focus. */
.mejs-controls .mejs-time-rail .mejs-time-handle{ display:block; border:none; background:transparent }
.mejs-controls .mejs-time-rail .mejs-time-handle:focus, .mejs-controls .mejs-time-rail:hover .mejs-time-handle[role]{ top:-3px; height:10px; background:#fff; border:1px solid #dd7b00; /*#ff8c00; /*DarkOrange*/ }

.mejs-controls .mejs-time-rail .mejs-time-handle, .mejs-controls .mejs-time-rail .mejs-time-float{ z-index:40; }
.mtype-audio.ctx-Vle_player .mejs-controls .mejs-time-rail .mejs-time-float{
    top:-8px; /*-26px*/ height:10px; /*17px*/ border-color:#999; /*display:none !important*/
}
.mtype-audio.ctx-Vle_player .mejs-controls .mejs-time-rail .mejs-time-float-current{ margin:0 2px; }
.mtype-audio.ctx-Vle_player .mejs-controls .mejs-time-rail .mejs-time-float-corner{ display:none; }

.mejs-controls { 
	/*color:rgb(40,41,42);/* 190312 - PETER*/
	/*margin: 0 5px 0 2px;/* 190312 - PETER*/
	}

.mejs-container .mejs-controls .oup-volume-widget {
	width:60px;
}

.oup-volume-widget .oup-display	{
	display:inline-block; 
	padding:0 4px 0 0px;
	width:14px;
	text-align:right;
	font-size:12px;
	}

.oup-volume-widget button	{
	width:12px; 
	height:12px; 
	border-radius:0; 
	}/* 190312 - PETER*/

.mejs-captions-text{ font-size:1.4em; }
.oup.width-small .mejs-captions-text{ font-size:1.1em; padding:1px 3px; }
.oup.width-large .mejs-captions-text{ font-size:2.3em; }

.oup.width-small .mejs-captions-position-hover{ bottom: 5px; }

/* Options menu panel.
*/
#oup-options.show{
	position:absolute;
	bottom:22px;
	right:0;
	width:194px;
	background:#efefef;
	color:#111;
	padding:5px;
	border:1px solid #bbb;
	border-radius:3px;
	font-size:1.05em;
	line-height:1.2em;
}
#oup-options.show{ z-index:20; }

/* A bottom 'gutter' for the popup player (18+22px) */
.mode-popup #oup-options.show{ bottom:40px; }
.width-large #oup-options.show {
	width:20em;
	font-size:1.25em;
	padding:8px;
	}
.width-small #oup-options.show {
	width:145px;
	font-size:.87em;
	padding:0 5px;
	bottom:15px;
	line-height:.85em;
	}
#oup-options.hide{ display:none; }
.oup-options ul {
	margin:0;
	padding:0;
	list-style:none;
	font-size:.83em;
	}
.oup-options li {
	margin:4px 0;
	}
.oup-options textarea {
	display:block;
	font-size:.8em;
	width:99%;
	height:8.5em;
	}
.width-small .oup-options button {
	margin-top:4px;
	}

/* Transcript panel.
*/
#oup-tscript {
	display:none;
	}
.tscript-show #oup-tscript	{
	display:block;
	position:fixed;
	top:0;
	right:0;
	bottom:22px;
	width:195px;
	border-left:1px solid #ccc;
	background:#f8f8f8;
	color:#222;
	padding:5px;
	overflow-y:scroll;
	}
.tscript-show #oup-tscript{ z-index:10; }

.mode-popup.tscript-show #oup-tscript {
	bottom:40px;
	}
.width-small.tscript-show #oup-tscript {
	bottom:20px;
	width:150px;
	padding:3px;
	font-size:0.8em;
	}
.width-small #oup-tscript p {
	margin:.3em 0;
	}
.width-large.tscript-show #oup-tscript {
	width:19em; /*29em; /*300px*/
	padding:7px;
	font-size:1.35em;
	}

#oup-tscript button, .oup-options button {
	/*background-image: url('csg-4f6b5ebc9c52a.png');								/*background-image added as a test by Peter: 210312*/
	background-position: -1856px 0;
	background-color: rgb(255,255,255);
	float:right;
	width:16px;
	height:16px;
	border:0;	
	}

#oup-tscript button:hover, #oup-options button:hover	{
	/*background-image: url('csg-4f6b5ebc9c52a.png');								/*background-image added as a test by Peter: 210312*/
	background-position: -1922px 0;
	background-color: rgb(41,110,143);
	width:16px;
	height:16px;
	border:0;	
	}

/*#oup-tscript .span	{
	padding:22px 22px 11px 11px;
	font-size:85%;
	line-height:100%;
	overflow:scroll;
	}*/

.tscript-show .mejs-mediaelement, .tscript-show .mejs-layers{
  position:fixed;
  top:0; left:0;
  bottom:23px;
  right:195px;
  width:auto !important;
}


.skin-ouice button {
	border:0;/* 190312 - PETER*/
}


.oup-group{
  position:absolute;
  top:5px;
  right:0;
}
.fullscreen-alt-btn.ua-webkit .mejs-container .mejs-controls .oup-group {
  width: 142px;
}
.oup-group .mejs-button button, .oup-group .oup-mejs-button button, .oup-group .oup-mejs-link a {
	margin:0 2px;
}
.mejs-controls .oup-quality-button button {
	margin-left:1px; /* ?? */
}

#oup-pauser {
  position:absolute;
  z-index:2000;
  top:0; bottom:43px; /*22 + 21px*/
  left:0; right:0;
  background:transparent;
  display:none;
}
.mejs-pause #oup-pauser{ display:block; }
.mode-popup #oup-pauser{ bottom:63px; /*40 + 23px*/ }


/* Changing volume before video is played [Ltsredmine:6912] [Ltsredmine:7672] */
.oup.plugin-flash.no-progress .oup-mute{ background-color:gray; }
.oup.plugin-flash.no-progress .oup-volume-widget .oup-display,
.oup.plugin-flash.no-progress .oup-quieter,
.oup.plugin-flash.no-progress .oup-louder{ display:none; }