@charset "UTF-8";
/*!
*
* OU Player light theme. Copyright 2012 The Open University.
* By Peter Devine/LTS 2012-03-08; Re-work by Nick Freear 2012-03-30.
*
*/
/* (Was: oup-mep/css/oup-theme1.css) */

/*PETER: This is the standard linking colour please check before making theme sensitive, I suspect it should remain this colour always. */
a {
	color:#1f536b;
	text-decoration:none;
}
a:hover, a:focus, .error a, #oup-noscript a  {
	text-decoration:underline;
}


/* Bug #1377, Custom player-background colours, etc.
*/
body.bg-black{/* Defaults above. */}
body.bg-white, .bg-white .mejs-container{ background:#fafafa; color:#222; }
body.bg-transparent, .bg-transparent .mejs-container{ background:transparent; color:#111; }
body.bg-beige{ background:#ECEDD8; color:#1a1a1a; /* VLE player */}
body.bg-pale-blue{ background:#EBF4FB; color:#1A1A1A; }


.mejs-container .mejs-controls {
	/*padding-bottom:1px; /*Hmm, 1 pixel or 0? */
	/*background: url(background.png);
	background: rgba(0, 0, 0, 0.7); - Peter: 080312 */
	background: rgb(243,242,242);/* - Peter: 080312 */
	color: #111;
	height: 22px;/* - Peter: 190312*/
}
.mejs-container .mejs-controls  div {
	width:auto;
}


.no-svg .mejs-controls .mejs-button button, .mejs-controls .mejs-button button, button, .mejs-controls .oup-mejs-link a {
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	margin: 0; /*7px 5px;*/
	padding: 0;
	position: static;
	height: 16px;
	width: 16px;
	border: 0;
	/*
	 One of only TWO SPRITE inclusions (see mep-ouplayer.css)
	*/
	background: transparent url('oup-light-sprite.png') no-repeat;
}
.mejs-controls .oup-mejs-link a {
	display:inline-block;
}
.mejs-controls .mejs-button button, .mejs-controls .oup-mejs-button button, .mejs-controls .oup-mejs-link a {
	background-color:#fff;
}

/* PLAY/PAUSE */
.no-svg .mejs-controls .mejs-playpause-button button, .mejs-controls .mejs-playpause-button button  {
	width:22px;
	height:22px;
	background-position:0 0; /* - Peter: 080312 */
}
.no-svg .mejs-controls .mejs-playpause-button.mejs-pause button, .mejs-controls .mejs-playpause-button.mejs-pause button {
	background-position: -72px 0; /* - Peter: 080312 */
	/*background-color:rgb(41,110,143); /* - Peter: 080312 COLOUR*/
	}

/*.mejs-container .mejs-controls .mejs-time {
	color: rgb(40,41,42);
}*/


/* Start: Progress bar */

.mejs-controls .mejs-time-rail {
	width:auto;
	height:4px !important;
	margin-top:0;
	/*width: 200px;*/
	/*padding-top: 5px;*//* - Peter: 190312*/
	position:fixed; /*Needed for firefox. */
	left:22px;
	}

.mejs-controls .mejs-time-rail span {
	display: block;
	position: absolute;
	width: 180px;
	height: 4px;
	/*-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;*//* - Peter: 190312*/
	cursor: pointer;
	}

.mejs-controls .mejs-time-rail .mejs-time-total {
	top:0;
	margin: 0;
	/*margin:5px;*/
	/*background: #333;/* - Peter: 080312 COLOUR*/
	background: rgb(204, 204, 203); /* - Peter: 080312 COLOUR*/
	/*..
	background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 	
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#1E1E1E,endColorstr=#3C3C3C);*/ /* - Peter: 080312*/
	-webkit-border-radius:0;
	border-radius:0;
	filter:none; /*MSIE*/
	}
/*MSIE: until we fix the PNG-transparency make the rail a little darker. */
.ua-msie .mejs-time-rail .mejs-time-total {
	background:rgb(192,192,192);
	}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background:transparent /*rgb(41,110,143)*/ url('mediaplayer-images/oump-21-preroll.png'); /* - Peter: 190312 COLOR - Peter: 190312 PRE-LOADER RAIL GRAPHIC*/
	width: 0;
	/*background-image: url(../oup/images/oump_preroll.png);*/
	/*..
	background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); 	
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#2C7C91,endColorstr=#4EB7D4);/* - Peter: 190312*/
	}

.mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
	/*background: rgb(41,110,143); /* - Peter: 190312 COLOR*/
	/*background: rgba(255,255,255,0.8);
	..
	background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#FFFFFF,endColorstr=#C8C8C8);*//* - Peter: 190312*/
	}

.mejs-container .mejs-controls .mejs-time {
	position:absolute;
	top:0;
	left:26px;
	color:#222;
	margin:0;
}
.mejs-container .mejs-controls .mejs-time span {
	color:#000;
	/*font-size:1.2em;*/
	font-size:12px;
	/*font-size:0.845em;*/
	line-height:12px;
	display:block;
	float:left;
	margin:0 2px;
	width:auto;
}
.mejs-container .mejs-controls .mejs-time .sep, .mejs-container .mejs-controls .mejs-time .mejs-duration {
	color:#888;
}

/* VOLUME */
.mejs-container .mejs-controls .oup-volume-widget {
	width:60px;
	height:16px;
	margin-right:16px;
	position:relative;
	top:4px;
}
.mejs-controls .oup-volume-widget button {
	width:12px; height:12px;
}
/*Browser sniffing - MSIE 8+ is well behaved! (was: ua-gecko) */
.ua-moz .mejs-controls .oup-volume-widget {
	top:-1px;
}
.ua-moz .mejs-controls .oup-volume-widget .oup-display {
	position:relative;
	top:4px;
}
.ua-webkit .mejs-controls .oup-volume-widget {
    top:2px;
}
.ua-webkit .mejs-controls .oup-volume-widget .oup-display {
	position:relative;
	top:-1px;
}
.br-Safari.v-5 .mejs-controls .oup-volume-widget, .br-Safari.v-6 .mejs-controls .oup-volume-widget {
	top:-8px;
}
.br-Safari.v-5 .mejs-controls .oup-volume-widget .oup-display, .br-Safari.v-6 .mejs-controls .oup-display {
	position:relative;
	top:11px;
}
.br-MSIE .mejs-controls .oup-volume-widget {
	position:relative;
	top:3px;
}
.br-MSIE .mejs-controls .oup-volume-widget .oup-display {
	position:relative !important;
	top:-2px !important;
}
.ua-ie7 .mejs-controls .oup-volume-widget .oup-display {
	position:relative;
	top:-4px;
	font-size:1em;
}

.mejs-controls  button.oup-quieter {
	background-position: -268px 0;
	}

.mejs-controls  .oup-quieter:hover {
	background-position: -330px 0;
	}	

.mejs-controls  button.oup-louder {
	background-position: -392px 0;
	margin:0 0px 0 2px;
	}

.mejs-controls  .oup-louder:hover {
	background-position: -454px 0;
	}

.mejs-controls button.oup-mute {			/*.oup-mute added by Peter: 210312*/
	background-position: -144px 0;
	/*background-color:rgb(41,110,143);				/*rgb(41,110,143);190312 - PETER - COLOR*/
	}
.XX-mejs-controls .oup-volume-widget button:hover {
	outline:1px solid #ccc;
	}

.mejs-controls .mejs-unmute button.oup-mute {			/*.oup-mute added by Peter: 210312*/
	background-position: -206px 0;
	/*background-color:rgb(41,110,143);				/*rgb(41,110,143);190312 - PETER - COLOR*/
	}

.X-mejs-controls .mejs-volume-button {
	position: relative;
	}
/* End volume. */


/* Captions button: US/internat. English 'CC' - NO-bug: background should be white. */
.mejs-controls .mejs-captions-button button { background-position:-780px 0;   /*background-color:#fff !important;*/ }
.ouvle-default-blue  .mejs-controls .mejs-captions-button.mejs-on button,
.mejs-controls .mejs-captions-button  :hover { background-position:-846px 0; } /*:hover == -button-off */

/* Captions button: UK English 'S' */
.lang-en-gb  .mejs-controls .mejs-captions-button button{ background-position:-978px 0; }
.lang-en-gb.ouvle-default-blue  .mejs-controls .mejs-captions-button.mejs-on button,
.lang-en-gb  .mejs-controls .mejs-captions-button  :hover{ background-position:-912px 0; }

/* Transcript button. */
.mejs-controls .mejs-transcript-button button { background-position:-648px 0; }
.ouvle-default-blue .mejs-controls .mejs-transcript-button.mejs-on button,
.mejs-controls .mejs-transcript-button  :hover { background-position:-714px 0; }

/* High-definition button --? */
.mejs-controls .mejs-quality-button button{ background-position:-1460px 0; } 
.mejs-controls .mejs-quality-button button:hover{ background-position:-1526px 0; }

/* Popout/new-window button. */
.mejs-controls .mejs-popout-link a{ background-position: -1176px 0;  }
.mejs-controls .mejs-popout-link a:hover{ background-position: -1242px 0;  }

/* Fullscreen button. */
.no-svg .mejs-controls .mejs-fullscreen-button button, .mejs-controls .mejs-fullscreen-button button{ background-position:-516px 0; }
.mejs-controls .mejs-fullscreen-button button:hover{ background-position:-582px 0; }

.mejs-controls .mejs-fullscreen-button.mejs-unfullscreen button {
	background-position: -1724px 0;
	background-color: red;
}
.mejs-controls .mejs-fullscreen-button.mejs-unfullscreen button:hover {
	background-position: -1790px 0;
	/*background-color: rgb(41,110,143);*/
}

/* Options/settings button. */
.mejs-controls .mejs-options-button button{ background-position:-1110px 0; }
.ouvle-default-blue  .mejs-controls .mejs-options-button.mejs-on button,
.mejs-controls .mejs-options-button button:hover{ background-position:-1044px 0; }


/* LtsRedmine:7911 */
.fullscreen-alt-btn.plugin-native .mejs-controls .mejs-fullscreen-button {
    position: absolute;
    top: -32px;
    right:1px;
    /*float: none;
    z-index: 10000;*/
}
.fullscreen-alt-btn.plugin-native .mejs-controls .mejs-fullscreen-button button {
    background: #222;
    color: #fff;
    border: 1px solid #666;
    opacity: .8;
    padding: 3px 0;
    width: auto;
    height:27px;
    min-width: 9em;
    line-height: 1.5em;
    font: 1.1em sans-serif;
    }
.fullscreen-alt-btn.plugin-native.mode-popup .mejs-controls .mejs-fullscreen-button /*button*/ {
    top: -36px;
    padding: 4px;
    }
.fullscreen-alt-btn.plugin-native.mejs-pause .mejs-controls .mejs-fullscreen-button button {
    opacity: 0;
    transition: all .8s 2.5s; /*transition: <property> <duration> <timing-function> <delay>; */
    }
.fullscreen-alt-btn.plugin-native.mejs-pause .mejs-controls .mejs-fullscreen-button :hover,
.fullscreen-alt-btn.plugin-native.mejs-pause .mejs-controls .mejs-fullscreen-button :focus {
    opacity: 1;
    border-color: #aaa;
    transition: all .5s 0;
    }
.fullscreen-alt-btn-ie.br-MSIE .mejs-controls .mejs-fullscreen-button,
.fullscreen-alt-btn.br-MSIE .mejs-controls .mejs-fullscreen-button{ display:none; }



/*
 OUVLE colours, https://gist.github.com/2291035
*/

/* Default blue */
.ouvle-default-blue .mejs-button.mejs-on button, .ouvle-default-blue .oup-mejs-button.mejs-on button,

.ouvle-default-blue .mejs-button button:hover, .ouvle-default-blue .oup-mejs-button button:hover, .ouvle-default-blue .oup-mejs-link :hover,
.ouvle-default-blue .no-svg .mejs-playpause-button button, .ouvle-default-blue .mejs-playpause-button button, .ouvle-default-blue .oup-volume-widget button.oup-mute,
.ouvle-default-blue .mejs-time-rail .mejs-time-loaded {
	background-color:rgb(41,110,143); /* - Peter: 080312 COLOUR*/
}
.ouvle-default-blue .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(41,110,143); /* - Peter: 080312 COLOUR*/
}
/*PETER: This is the standard linking colour please check before making theme sensitive, I suspect it should remain this colour always. */
.mejs-title-panel a	{
	color:#1f536b;
}


/* Orange */
.ouvle-orange .mejs-button button:hover, .ouvle-orange .oup-mejs-button button:hover, .ouvle-orange .oup-mejs-link :hover,
.ouvle-orange .no-svg .mejs-playpause-button button, .ouvle-orange .mejs-playpause-button button, .ouvle-orange .oup-volume-widget button.oup-mute,
.ouvle-orange .mejs-time-rail .mejs-time-loaded {
	background-color:rgb(204, 92, 40);
}
.ouvle-orange .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(204, 92, 40);
}

/* Dark blue */
.ouvle-dark-blue .mejs-button button:hover, .ouvle-dark-blue .oup-mejs-button button:hover, .ouvle-dark-blue .oup-mejs-link :hover,
.ouvle-dark-blue .no-svg .mejs-playpause-button button, .ouvle-dark-blue .mejs-playpause-button button, .ouvle-dark-blue .oup-volume-widget button.oup-mute {
	background-color:rgb(29, 93, 57); /* ?? */
}
.ouvle-dark-blue .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(29, 93, 57);
}
/* Green */
.ouvle-green .mejs-button button:hover, .ouvle-green .oup-mejs-button button:hover, .ouvle-green .oup-mejs-link :hover,
.ouvle-green .no-svg .mejs-playpause-button button, .ouvle-green .mejs-playpause-button button, .ouvle-green .oup-volume-widget button.oup-mute {
	/*background-color:rgb(29, 93, 57);*/
	background-color:rgb(82, 82, 37); /* olive? */
}
.ouvle-green .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(82, 82, 37);
}
/* Grey (not gray) */
.ouvle-grey .mejs-button button:hover, .ouvle-grey .oup-mejs-button button:hover, .ouvle-grey .oup-mejs-link :hover,
.ouvle-grey .no-svg .mejs-playpause-button button, .ouvle-grey .mejs-playpause-button button, .ouvle-grey .oup-volume-widget button.oup-mute {
	background-color:rgb(70, 70, 70);
}
.ouvle-grey .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(70, 70, 70);
}
/* Purple */
.ouvle-purple .mejs-button button:hover, .ouvle-purple .oup-mejs-button button:hover, .ouvle-purple .oup-mejs-link :hover,
.ouvle-purple .no-svg .mejs-playpause-button button, .ouvle-purple .mejs-playpause-button button, .ouvle-purple .oup-volume-widget button.oup-mute {
	background-color:rgb(78, 40, 122);
}
.ouvle-purple .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(78, 40, 122);
}
/* Pink */
.ouvle-pink .mejs-button button:hover, .ouvle-pink .oup-mejs-button button:hover, .ouvle-pink .oup-mejs-link :hover,
.ouvle-pink .no-svg .mejs-playpause-button button, .ouvle-pink .mejs-playpause-button button, .ouvle-pink .oup-volume-widget button.oup-mute {
	background-color:rgb(197, 45, 115);
}
.ouvle-pink .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(197, 45, 115);
}
/* Dark red */
.ouvle-dark-red .mejs-button button:hover, .ouvle-dark-red .oup-mejs-button button:hover, .ouvle-dark-red .oup-mejs-link :hover,
.ouvle-dark-red .no-svg .mejs-playpause-button button, .ouvle-dark-red .mejs-playpause-button button, .ouvle-dark-red .oup-volume-widget button.oup-mute {
	background-color:rgb(100, 24, 52);
}
.ouvle-dark-red .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(100, 24, 52);
}

/* Button normal *-/
.ouvle-button-normal .mejs-button button:hover, .ouvle-button-normal .oup-mejs-button button:hover, .ouvle-button-normal .oup-mejs-link :hover,
.ouvle-button-normal .mejs-playpause-button button, .ouvle-button-normal .oup-volume-widget button.oup-mute {
	background-color:rgb(255, 255, 255);
}*/

/* Colour XY. */
.ouvle-XY .mejs-button button:hover, .ouvle-XY .oup-mejs-button button:hover, .ouvle-XY .oup-mejs-link :hover,
.ouvle-XY .no-svg .mejs-playpause-button button, .ouvle-XY .mejs-playpause-button button, .ouvle-XY .oup-volume-widget button.oup-mute {
	background-color:rgb(41,110,143);
}
.ouvle-XY .mejs-controls .mejs-time-rail .mejs-time-current {
	background:rgb(41,110,143);
}



/* TOOLTIP - why do we need !important ? :(
*/
.mejs-container .mejs-controls .oup-tooltip, .oup-tooltip {
	display:none;
}
.mejs-container .mejs-controls .oup-tooltip.show, .oup-tooltip.show {
	display:block;
	position:fixed;
	float:none;
	background:#fcfcf5; /*#ffd; Yellow*/
	color:#111;
	border:1px solid #aaa;
	border-radius:3px;
	padding:1px 3px;
	font-size:.7em;
	line-height:1.1em;
	height:1em;
	white-space:nowrap;
	z-index:9999;
}
.ctx-Podcast_player .mejs-controls .oup-tooltip.show, .ctx-Podcast_player .oup-tooltip.show {
	padding:4px;
	font-size:.8em;
	line-height:1.2em;
}
.oup.width-large .oup-tooltip.show{ font-size:1.2em; }




.mejs-container .mejs-controls div.mejs-button, .mejs-container .mejs-controls div.oup-mejs-link {
  margin:0 2px;
}
.mejs-container .mejs-controls div.mejs-playpause-button {
  margin:0;
}