/**
 * jquery.inaPlayerHtml5.css
 * css player html5 ina.fr 
 *
 *
 * @author DDi, Equipe Developpement
 * @date 2012-01-04
 * @media screen
 * @site www.ina.fr
 */


.inaPlayerGlobal {
	background-color:#000;
	position:relative;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        user-select: none;
}

table {
	border-collapse:collapse;
	border-spacing: 0;
}


/* POLICES
 ****************************************************** */
/* DINWeb-Bold - IE 4?8
@font-face {
	font-family:DINWeb-Bold;
	src:url("http://devpres.ina.fr/bundles/inaplayerplayer/polices/DINWeb-Bold.eot");
}

/* DINWeb-Bold - WOFF-capable browsers 
@font-face {
	font-family:DINWeb-Bold;
	src:url("http://devpres.ina.fr/bundles/inaplayerplayer/polices/DINWeb-Bold.woff") format("woff");
}
*/

/* CONTROLES PLAYER
 ****************************************************** */

/* play overlay
 ------------------------------------------------------ */ 
.playoverlay {
	background:transparent url("/bundles/inaplayerplayer/images/inaHtml5Player/skinsprite.08ADDB.png") no-repeat 0 -84px;
	cursor:pointer;
	height:70px;
	position:absolute;
    width:70px;
    top:40%;
    left:45%;
	z-index:980;
}

.playoverlay:hover, .playoverlay:active {
    background-position:0 -156px;
}

/* fond contr?les player
 ------------------------------------------------------ */ 
.inaPlayerControlBar {
	background:rgba(0, 0, 0, 0.7);
	bottom:0;
    height:35px;
	left:0;
    position:absolute;
    width:100%;
	z-index:901;
}

/* play / pause / replay
 ------------------------------------------------------ */ 
.smp {
	background-image:url("/bundles/inaplayerplayer/images/inaHtml5Player/skinsprite.08ADDB.png");
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
	position:absolute;
}

.smp.play,
.smp.pause,
.smp.replay {
	height:27px;
	left:7px;
	top:4px;
	width:39px;
}

.smp.play {
	background-position:0 0;
}

.smp.play:hover,
.smp.play:active {
	background-position:-40px 0;
}

.smp.pause {
	background-position:0 -28px;
}

.smp.pause:hover,
.smp.pause:active {
	background-position:-40px -28px;
}

.smp.replay {
	background-position:0 -56px;
}

.smp.replay:hover,
.smp.replay:active {
	background-position:-40px -56px;
}

/* time
 ------------------------------------------------------ */ 
.inaPlayerControlBar .time {
	color:#ccc;
	font:normal 13px/35px Arial, "Helvetica Neue", Helvetica, sans-serif;
	left:60px;
	position:absolute;
	top:1px;
	white-space:nowrap;
	text-shadow:1px 1px 1px #000000;
	filter:dropshadow(color=#000000, offx=1, offy=1);
        cursor: default;
}

.inaPlayerControlBar .time.playlist {
	left:120px;
}

.inaPlayerControlBar .time .currentTime {
	color:#fff;
}

/* progress bar
 ------------------------------------------------------ */ 
.video-progress-bar {
	border:solid 1px #757575;
	cursor:pointer;
	display:block;
	height:6px;
	left:150px;
	position:absolute;
	top:14px;
	width:60%;
}

.video-progress-bar.playlist {
	left:200px;
	width:53%;
}

.video-progress-bar .played {
	background-color:#08ADDB;
    display:block;
    height:4px;
	margin:1px;
    position:absolute;
	width:0;
	z-index:12;
}

.video-progress-bar .buffered { 
    background-color:#999;
	display:block;
    height:4px;
	margin:1px;
    position:absolute;
    width:2px;  
	z-index:10;
}

.smp.slider {
	background-position:-287px -1px;
	height:24px;
	position:absolute;
	top:-5px;
	width:21px;
	z-index:13;
}

.slider:hover,
.slider:active {
	background-position:-308px -1px;
}

/* volume
 ------------------------------------------------------ */ 
.smp.volume {
	height:20px;
	right:45px;
	top:10px;
	width:23px;
}

.smp.volume.mute {
    background-position:-196px -2px;
}

.smp.volume.mute:hover,
.smp.volume.mute:active {
    background-position:-220px -2px;
}

.smp.volume.low {
    background-position:-196px -23px;
}

.smp.volume.low:hover,
.smp.volume.low:active {
    background-position:-220px -23px;
}

.smp.volume.med {
    background-position:-196px -44px;
}

.smp.volume.med:hover,
.smp.volume.med:active {
    background-position:-220px -44px;
}

.smp.volume.high {
    background-position:-196px -65px;
}

.smp.volume.high:hover,
.smp.volume.high:active {
    background-position:-220px -65px;
}
 
/* fullscreen
 ------------------------------------------------------ */
.smp.fullscreen {
	height:20px;
	right:7px;
	top:10px;
	width:25px;
}

.smp.fullscreen.off {
	background-position:-144px -2px;
}

.smp.fullscreen.off:hover,
.smp.fullscreen.off:active {
    background-position:-170px -2px;
}
 
.smp.fullscreen.on {
	background-position:-144px -23px;
}

.smp.fullscreen.on:hover,
.smp.fullscreen.on:active {
    background-position:-170px -23px;
}

/* previous / next
 ------------------------------------------------------ */
.smp.navitem {
	height:20px;
	top:10px;
	width:20px;
}

.smp.navitem.previous {
	background-position:-83px -2px;
    left:60px;
}
 
.smp.navitem.previous:hover,
.smp.navitem.previous:active {
    background-position:-104px -2px;
}

.smp.navitem.previous.disabled { 
    background-position:-124px -2px;
}

.smp.navitem.next {
	background-position:-83px -23px;
    left:90px;
}
 
.smp.navitem.next:hover,
.smp.navitem.next:active {
    background-position:-104px -23px;
}

.smp.navitem.next.disabled { 
    background-position:-124px -23px;
}


/* TOOLTIP TIME 
 ****************************************************** */ 
.inaToolTipTime {
    font:12px Arial, "Helvetica Neue", Helvetica, sans-serif;
    position:absolute;
    z-index:1000;
    bottom:34px;
    background:rgba( 0, 0, 0, 0.7);
    padding:4px 6px;
	
}

.inaToolTipTime { 
	border:1px solid #ccc;
} 

.inaToolTipTime:after,
.inaToolTipTime:before { 
	top:100%;
	border:solid transparent;
	content:" "; 
	height:0;
	width:0;
	position:absolute;
	pointer-events:none;
} 

.inaToolTipTime:after { 
	border-color:rgba(0, 0, 0, 0);
	border-top-color:#000000;
	border-width:6px;
	left:50%;
	margin-left:-6px;
} 

.inaToolTipTime:before {
	border-color: rgba(255, 255, 255, 0); 
	border-top-color: #ffffff; 
	border-width:8px; 
	left:50%; 
	margin-left:-8px;
}

.inaToolTipTime span {
    color:#fff;
}


/* BARRE SUPERIEURE - TITRE VIDEO - LOGO INA.FR
 ****************************************************** */
.inaPlayerVideoTitle {
	background:rgba(0, 0, 0, 0.7);
    height:35px;
	left:0;
    position:absolute;
	top:0;
    z-index:900;
    width:100%;
	display:none;
}

.inaPlayerVideoTitle a:last-child {
	background:transparent url("/bundles/inaplayerplayer/images/inaHtml5Player/skinsprite.08ADDB.png") no-repeat -349px 0;
	float:right;
	height:22px;
	margin:7px 10px 0 0;
	width:27px;
	display:block;
}

.inaPlayerVideoTitle a:first-child {     
	color:#ccc;
    float:left;
	font:normal 13px/35px Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin:0 0 0 10px;
	overflow:hidden;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:70%;
	text-shadow:1px 1px 1px #000000;
	filter:dropshadow(color=#000000, offx=1, offy=1);
}

.inaPlayerVideoTitle a:hover {
    color:#08ADDB;
}

/* ANNEE
 ****************************************************** */ 
.inaPlayerAnnee {
	color:#ccc;
	float:left;
    font-family:'DINWeb-Bold',sans-serif;
	font-size:20px;
	left:16px;
	position:absolute;
	top:28px;
	display:none;
        cursor: default;
}


/* BLOC PARTAGE
 ****************************************************** */ 
.inaPlayerBlocPartage {
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	width:100%
}

.inaPlayerBlocPartage.export {
	top:30px;
}

.inaPlayerBlocPartage ul {
	margin:0;
	padding:0;
}

.inaPlayerBlocPartage li {
	display:inline-block;
	list-style:none;
	padding:0 0 0 5px;
	width:75px;
}

.smp.partage {
	height:42px;
	width:75px;
}
 
.smp.partage.export {
    background-position:-266px -42px;
}

/*.smp.partage.export:hover,*/
.smp.partage.export:active {
    background-position:-266px -85px;
}

.smp.partage.fb {
    background-position:-342px -42px;
}

/*.smp.partage.fb:hover,*/
.smp.partage.fb:active {
    background-position:-342px -85px;
}

.smp.partage.twitter {
    background-position:-418px -42px;
}

/*.smp.partage.twitter:hover,*/
.smp.partage.twitter:active {
    background-position:-418px -85px;
}

.smp.partage.download {
    background-position:-494px -42px;
}

/*.smp.partage.download:hover,*/
.smp.partage.download:active {
    background-position:-494px -85px;
}


/* BLOC SLIDESHOW PLAYLIST 
 ****************************************************** */ 
.inaContenuSlide {
    color:#ccc;
    background:rgba( 0, 0, 0, 0.7);
	bottom:35px;
	height:105px;
	position:absolute;
	width:100%;
	z-index:105;
}

/* titre
 ------------------------------------------------------ */
.inaTitlePlaylist {
	display:block;
    font:13px/25px Arial, "Helvetica Neue", Helvetica, sans-serif;
	overflow:hidden;
    padding-left:10px;
	text-overflow:ellipsis;
    white-space:nowrap;
    width:98%;  
}

/* slideshow
 ------------------------------------------------------ */
.slideshow {
	position:absolute;
	left:0;
	top:24px;
	width:100%;
}

/* navigation */
.slideshow .navigation {
	background-image:url("/bundles/inaplayerplayer/images/inaHtml5Player/skinsprite.08ADDB.png");
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
	z-index:250;
}

.slideshow .navigation.leftControl {
	background-position:-71px -85px;
	height:79px;
	position:absolute;
	left:5px;
	top:1px;
	width:43px;
}

.slideshow .navigation.leftControl:hover,
.slideshow .navigation.leftControl:active {
	background-position:-115px -85px;
}

.slideshow .navigation.leftControl.disabled {
	background-position:-159px -85px;
}

.slideshow .navigation.rightControl {
	background-position:-71px -165px;
	height:79px;
	position:absolute;
	right:5px;
	top:1px;
	width:43px;
}

.slideshow .navigation.rightControl:hover,
.slideshow .navigation.rightControl:active {
	background-position:-115px -165px;
}

.slideshow .navigation.rightControl.disabled {
	background-position:-159px -165px;
}

/* contenu slideshow */
.slideshow img {
	border:solid 1px #333;
	height:77px;
	opacity:0.4;
	width:102px;
}

.slideshow .slidesContainer img:hover {
	border:solid 1px #08ADDB;
	opacity:1;
}

.slideshow .slidesContainer li.encours img {
	opacity:1;
	border:solid 1px #08ADDB;
}

.slideshow .slidesContainer {
	left:45px;
	position:relative;
	/*width:87%; dynamique*/
}

.slideshow .slidesContainer ul {
	margin:0;
	padding:0;
}

.slideshow .slidesContainer li {
	list-style:none;
	display:block;
	float:left;
	height:79px;
	margin:0 2px 0 0;
	width:104px;
        background-color: #000;
	
}


/* BLOC TITRE PLAYLIST
 ****************************************************** */ 
.inaTitlePlaylistBottom {
	background:rgba(0, 0, 0, 0.7);
	bottom:0;
	color:#ccc;
	font:normal 13px/35px Arial, "Helvetica Neue", Helvetica, sans-serif;
    height:35px;
	left:0;
	overflow:hidden;
    position:absolute;
	text-overflow:ellipsis;
    white-space:nowrap;
    width:100%;
	z-index:901;
	text-shadow:1px 1px 1px #000000;
	filter:dropshadow(color=#000000, offx=1, offy=1);
}

.inaTitlePlaylistBottom div {
	margin-left:10px;
}


/* BLOC VIDEOS SIMILAIRES
 ****************************************************** */ 
.inaVidSimilaires {
	background:rgba(0, 0, 0, 0.7);
	height:100%;
	position:absolute;
	top:0;
	width:100%;
}

.inaVidSimilaires ul {
	margin:0;
	padding:0;
	position:absolute;
	top:132px;
}

.inaVidSimilaires li {
	list-style:none;
	float:left;
	height:105px;
	margin:0 15px 0 0;
	width:140px;
}

.inaVidSimilaires li:first-child {
	margin-left:7px;	
}

.inaVidSimilaires li:last-child {
	margin:0;	
}

.inaVidSimilaires li img {
	border:solid 1px #333;
	height:105px;
	width:140px;
}

.infoSimilaire {
	background:rgba(0, 0, 0, 0.7);
	border:solid 1px #08ADDB;
	height:105px;
	position:absolute;
	top:0;
	width:140px;
        cursor:pointer;
}

.infoSimilaire td {
	color:#fff;
	font:normal 13px/15px Arial, "Helvetica Neue", Helvetica, sans-serif;
	height:101px;
	padding:2px;
	text-align:center;
	vertical-align:middle;
	width:136px;
}


/* OVERLAY EXPORT
 ****************************************************** */
.exportOverlay {
	position:absolute;
	top:125px;
	width:100%;
} 

.exportOverlay div {
	background:rgba(0, 0, 0, 1);
	border:solid 1px #ccc;
	color:#ccc;
	font-family:'DINWeb-Bold',sans-serif;
	font-size:12px;
	line-height:17px;
	text-transform:uppercase;
	margin:0 auto;
	padding:8px;
	text-align:center;
	width:210px;
	-webkit-border-radius:2px 2px 2px 2px;
	border-radius:2px 2px 2px 2px;
}

/* OVERLAY EXTRAIT BOUTIQUE
 ****************************************************** */
.extraitBoutique {
	position:absolute;
	top:246px;
} 

.extraitBoutique.playlist
{
	top:135px;
} 

.extraitBoutique div
{
	background:rgba(0, 0, 0, 0.7);
	border:solid 1px #ccc;
	border-left:none;
	padding:5px;
	height:50px;
	width:130px;
	-webkit-border-radius:0 2px 2px 0;
	border-radius:0 2px 2px 0;
} 

.extraitBoutique span
{
	color:#ccc;
	float:left;
	font:normal 13px/15px Arial, "Helvetica Neue", Helvetica, sans-serif;
	margin:2px 0 0 4px;
	vertical-align:bottom;
        width: 75px;
} 

.extraitBoutique a
{
	background-image:url("/bundles/inaplayerplayer/images/inaHtml5Player/skinsprite.08ADDB.png");
	background-position:-266px -131px;
	background-repeat:no-repeat;
	cursor:pointer;
	display:block;
	float:right;
	height:50px;
	width:50px;
} 



/* FAIRE TOURNER LE LOADER
 ****************************************************** */
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.blocLoaderjs {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 0.72s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    position: absolute;
    z-index: 902;
    height: 45px;
    width: 45px;
    padding: 0;
    margin: 0;
}
.blocLoaderjs
{
	background: transparent center center;
	bottom: 0;
	height: 45px;
	left: 0;
	position: absolute;
	z-index: 902;
}

div.inaCaption 
{
	bottom: 45px;
	position: absolute;
	width: 100%;
	z-index: 902;
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
	display: block;
}
div.inaCaption .text
{
	padding-left: 10px;
	padding-right: 10px;
}

/* MESSAGE D'ERREUR
 ****************************************************** */

.inaVideoError span
{
    width:580px;
    vertical-align:middle;
    display:inline-block;
    line-height:20px;
    padding-left: 20px;
}