/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010-2011 Happyworm Ltd 
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 4.0 (jPlayer 2.1.0)
 * Date: 1st September 2011
 */

div.jp-audio, div.jp-video {
	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */
	font-size: 1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect sthe size in the demos ZIP */
	font-family: Verdana, Arial, sans-serif;
	line-height: 1.6;
	color: #666;
	background-color: #eee;
	position: relative;
}
div.jp-audio {width: 420px;}

/* Player settings */
#jp_container_ft.jp-video-147p{width: 262px;}
div.jp-video-192p {width: 341px;}
div.jp-video-268p {width: 543px;}
div.jp-video-295p {width: 525px;}
div.jp-video-251p {width: 445px;}
div.jp-video-371p {width: 660px;}
div.jp-video-509p {width: 904px;}

div.jp-video-147p div.jp-progress{left: 40px; top : 11px;width: 175px;height:8px;z-index: 100;}
div.jp-video-192p div.jp-progress {width: 130px;}
div.jp-video-268p div.jp-progress {width: 330px;}
div.jp-video-251p div.jp-progress {width: 232px;}
div.jp-video-295p div.jp-progress {width: 308px;}
div.jp-video-371p div.jp-progress {width: 446px;}
div.jp-video-509p div.jp-progress {width: 593px;}
div.jp-video-full div.jp-progress {width: 640px;}
#jp_container_ba.jp-video-full div.jp-progress {width: 76% !important;}

div.jp-video-147p div.jp-video-play {height: 147px;}
div.jp-video-192p div.jp-video-play {height: 192px;}
div.jp-video-268p div.jp-video-play {height: 268px;}
div.jp-video-295p div.jp-video-play {height: 295px;}
div.jp-video-371p div.jp-video-play {height: 371px;}
div.jp-video-509p div.jp-video-play {height: 509px;}
div.jp-video-full div.jp-video-play {height: 100%;z-index: 1000;}

/* jp-video-147p => FT Mobile */
div.jp-video-295p div.jp-current-time{top:2px;}
div.jp-video-147p .jp-full-screen{display:none !important;}
div.jp-video-147p div.jp-current-time{right:-9px;}

div.jp-video-full {
	/* Rules for IE6 (full-screen) */
	width: 480px;
	height: 270px;
	/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
	position: static !important;
	position: relative
}
div.jp-video-full div.jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important;
	position: relative; /* Rules for IE6 (full-screen) */
	overflow: hidden;
	z-index: 1000;
}
div.jp-video-full div.jp-gui {
	position: fixed !important;
	position: static; /* Rules for IE6 (full-screen) */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
div.jp-video-full div.jp-interface {
	position: absolute !important;
	position: relative; /* Rules for IE6 (full-screen) */
	bottom: 0;
	left: 0;
	z-index: 1000;
}
div.jp-interface {
	position: relative;
	background-color: #292826;
	width: 100%;
	height: 30px;
}

.bannerVideo div.jp-interface {
    display:none;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 60px;
}
    .jp-video-desk:hover div.jp-interface,.jp-video-desk:hover .closeVideo{
        display:block;
    }

/* @group CONTROLS */
div.jp-controls-holder {
	height: 30px;
	margin: 0 auto;
	position: relative;
}
.bannerVideo div.jp-controls-holder {
	height: 60px;
}

div.jp-interface ul.jp-controls {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
div.jp-video div.jp-type-single ul.jp-controls {
	margin-left: 5px;
	margin-top: 0px;
	float: none;
	width: auto;
}
div.jp-video div.jp-type-playlist ul.jp-controls {
	width: 134px;
	margin-left: 172px;
}
div.jp-video ul.jp-controls, div.jp-interface ul.jp-controls li {
	display: inline;
	float: left;
	margin-top: 2px;
}
div.jp-interface ul.jp-controls a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}
a.jp-play, a.jp-pause {
	width: 25px;
	height: 25px;
}

.bannerVideo a.jp-play, .bannerVideo a.jp-pause {
    margin:3px 0 0 14px;
	width: 50px;
	height: 50px;
}

a.jp-play {
	background: url(../img/jplayer.vp.skin.png) 0 0 no-repeat;
}
a.jp-play:hover {
	background-position: -23px 0;
}
	.de a.jp-play:hover, .at a.jp-play:hover {
		background-position: -46px 0;
	}
a.jp-pause {
	background: url(../img/jplayer.vp.skin.png) 0 -23px no-repeat;
	display: none;
}
a.jp-pause:hover {
	background: url(../img/jplayer.vp.skin.png) -23px -23px no-repeat;
}
	.de a.jp-pause:hover, .at a.jp-pause:hover {
		background-position:  -46px -23px;
	}

.bannerVideo a.jp-play {
	background: url(../img/hme_playerIcon.png) 0 0 no-repeat;
}
.bannerVideo a.jp-play:hover {
	background-position: 0 -46px;
}
	.de .bannerVideo a.jp-play:hover, .at .bannerVideo a.jp-play:hover {
		background-position: 0 -92px;
	}
.bannerVideo a.jp-pause {
	background: url(../img/hme_playerIcon.png) -46px 0 no-repeat;
	display: none;
}
.bannerVideo a.jp-pause:hover {
	background-position: -46px -46px;
}
.de .bannerVideo a.jp-pause:hover, .at .bannerVideo a.jp-pause:hover {
	background-position: -46px -92px;
}
/* @end */

/* @group progress bar */
div.jp-progress {
	background-color: #ddd;
}
div.jp-video div.jp-progress {
	position: absolute;
	left: 40px; top: 10px;
	height: 10px;
    z-index:100;
}
.bannerVideo div.jp-video div.jp-progress {
	position: absolute;
	left:80px; top: 29px;
	height: 4px;
    border-radius:5px;
}
div .jp-current-time, div .jp-duration {
	margin-top: 10px;
	margin-left: 40px;
	width: 70%;
}
div.jp-seek-bar {
	background: url(../img/jplayer.vp.skin.png) 0 -202px repeat-x;
	width: 0;
	height: 100%;
	cursor: pointer;
}
div.jp-play-bar {
	background: url(../img/jplayer.vp.skin.png) 0 -218px repeat-x;
	width: 0;
	height: 100%;
}
	.de div.jp-play-bar, .at div.jp-play-bar {
		background-position: 0 -191px;
	}


.bannerVideo div.jp-play-bar {
    position:relative;
	background: url(../img/hme_playerIcon.png) 0 -149px repeat-x;
	width: 0;
	height: 100%;
}
	.de .bannerVideo div.jp-play-bar, .at .bannerVideo div.jp-play-bar {
		background-position: 0 -156px;
	}
.bannerVideo div.jp-play-bar .cursor{
    position:absolute;
    right:-12px;top:-12px;
    width:25px;
    height:25px;
	background:url(../img/hme_playerIcon.png) -223px -11px no-repeat;
}
    .bannerVideo div.jp-play-bar .cursor:hover{
	    background-position: -223px -58px;
    }
    .de .bannerVideo div.jp-play-bar .cursor:hover,.at .bannerVideo div.jp-play-bar .cursor:hover{
	    background-position: -223px -104px;
    }

/* @group volume controls */
a.jp-mute, a.jp-unmute, a.jp-volume-max {
	width: 20px;
	height: 15px;
	margin-top: 12px;
}
div.jp-video a.jp-mute, div.jp-video a.jp-unmute, div.jp-video a.jp-volume-max {
	position: absolute;
	top: 8px;
	right: 140px;
	margin-top: 0;
}

.bannerVideo div.jp-video a.jp-mute, .bannerVideo div.jp-video a.jp-unmute, .bannerVideo div.jp-video a.jp-volume-max {
    width:50px;
    height:50px;
	position: absolute;
	top: 5px;
	right: 155px;
	margin-top: 0;
}
div.jp-video a.jp-volume-max {
	left: 134px;
}
a.jp-mute {
	background: url(../img/jplayer.vp.skin.png) 0 -70px no-repeat;
}
a.jp-mute:hover {
	background: url(../img/jplayer.vp.skin.png) -23px -70px no-repeat;
}
a.jp-unmute {
	background: url(../img/jplayer.vp.skin.png) 0 -84px no-repeat;
	display: none;
}
a.jp-unmute:hover {
	background: url(../img/jplayer.vp.skin.png) -23px -84px no-repeat;
}

.bannerVideo a.jp-mute {
	background: url(../img/hme_playerIcon.png) -92px 0 no-repeat;
}
.bannerVideo a.jp-mute:hover {
	background: url(../img/hme_playerIcon.png) -92px -46px no-repeat;
}
.bannerVideo a.jp-unmute {
	background: url(../img/hme_playerIcon.png) -138px 0 no-repeat;
	display: none;
}
.bannerVideo a.jp-unmute:hover {
	background: url(../img/hme_playerIcon.png) -138px -46px no-repeat;
}
div.jp-volume-bar {
	position: absolute;
	overflow: hidden;
	background: url(../img/jplayer.vp.skin.png) 0 -250px repeat-x;
	width: 46px;
	height: 5px;
	cursor: pointer;
}
div.jp-video div.jp-volume-bar {
	top: 13px;
	right: 85px;
}
div.jp-volume-bar-value {
	background: url(../img/jplayer.vp.skin.png) 0 -256px repeat-x;
	width: 0;
	height: 5px;
}
	.de div.jp-volume-bar-value, .at div.jp-volume-bar-value {
		background-position: 0 -263px;
	}
		
/* Volum Home */
.bannerVideo #volumBloc{
    display:block;
    position:absolute;
    right:84px; top:5px;
    width:122px;
    height:50px;
    letter-spacing:-.28em;
}
.bannerVideo #volumBloc #mute{
    display:inline-block;
    margin:0 16px 0 0;
    width:50px;
    height:50px;
    text-decoration:none;
	background: url(../img/hme_playerIcon.png) -92px 0 no-repeat;
    letter-spacing:normal;
}
.bannerVideo #volumBloc #mute:hover {
	background: url(../img/hme_playerIcon.png) -92px -46px no-repeat;
}
    .de .bannerVideo #volumBloc #mute:hover, .at .bannerVideo #volumBloc #mute:hover {
	    background: url(../img/hme_playerIcon.png) -92px -92px no-repeat;
    }
.bannerVideo #volumBloc.muted #mute{
	background: url(../img/hme_playerIcon.png) -138px 0 no-repeat;
}
    .bannerVideo #volumBloc.muted #mute:hover {
	    background: url(../img/hme_playerIcon.png) -138px -46px no-repeat;
    }
    .de .bannerVideo #volumBloc.muted #mute:hover, .at .bannerVideo #volumBloc.muted #mute:hover {
	    background: url(../img/hme_playerIcon.png) -138px -92px no-repeat;
    }
.bannerVideo #volumBloc #volumTable{
    letter-spacing:-.25em;
}
.bannerVideo #volumBloc #volumTable,.bannerVideo #volumBloc #volumTable li{
    display:inline-block;
    vertical-align:top;
}
    .bannerVideo #volumBloc #volumTable li {
        margin:15px 1px 0;
        letter-spacing:normal;
    }
.bannerVideo #volumBloc #volumTable li a{
    display:block;
    width:4px;
    height:20px;
    background:#fff;
    border-radius:2px;
    text-decoration:none;
}
        .bannerVideo #volumBloc #volumTable li a:hover {
            background:#e855a5;
        }
        .bannerVideo #volumBloc #volumTable li a.actif{
            background:#ec008c;
        }
        .de .bannerVideo #volumBloc #volumTable li a:hover, .at .bannerVideo #volumBloc #volumTable li a:hover{
            background:#9767a1;
        }
        .de .bannerVideo #volumBloc #volumTable li a.actif, .at .bannerVideo #volumBloc #volumTable li a.actif{
            background:#791380;
        }
.bannerVideo .jp-video-play{
    display:none !important;
}
.bannerVideo .closeVideo{
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    text-indent: -10000px;
    cursor:pointer;
    z-index:2;
}
.bannerVideo .closeVideo span{
    display:block;
    margin: 6px 6px 0 14px;
    width: 30px;
    height: 30px;
    background: url(../img/hme_playerIcon.png) -256px -10px no-repeat;
}
.bannerVideo .closeVideo:hover span{
	background: url(../img/hme_playerIcon.png) -256px -56px no-repeat;
}
.de .bannerVideo .closeVideo:hover span, .at .bannerVideo .closeVideo:hover span{
	background: url(../img/hme_playerIcon.png) -256px -102px no-repeat;
}
/* @end */

/* @group current time and duration */
div.jp-current-time, div.jp-duration {
	width: 60px;
	font-size: .64em;
	font-style: oblique;
}
div.jp-current-time {
	line-height: 1em;
	position: absolute;
	right: 30px;
	width: 40px;
}
div.jp-duration {
	float: right;
	display: inline;
	text-align: right;
	display: none !important;
}

div.jp-video div.jp-current-time {
	margin-left: 20px;
}
div.jp-video div.jp-duration {
	margin-right: 20px;
}

div.jp-video-play {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	cursor: pointer;
	background-color: rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}

a.jp-video-play-icon {
	position: relative;
	display: block;
	width: 112px;
	height: 100px;
	margin-left: -56px;
	margin-top: -50px;
	left: 50%;
	top: 50%;
	background: url(../img/jplayer_playBt.png) 0 0 no-repeat;
	text-indent: -9999px;
	outline: none;
}
	.de a.jp-video-play-icon, .at a.jp-video-play-icon {
		background-image: url(../img/jplayer_playBt_DE.png);
	}
div.jp-video-play:hover a.jp-video-play-icon {
	background: url(../img/jplayer_playBt.png) 0 -100px no-repeat;
}
	.de div.jp-video-play:hover a.jp-video-play-icon, .at div.jp-video-play:hover a.jp-video-play-icon {
		background-image: url(../img/jplayer_playBt_DE.png);
	}
div.jp-jplayer audio, div.jp-jplayer {
	width: 0;
	height: 0;
	left:0;
}
div.jp-jplayer {
	background-color: #000;
}

/* @group TOGGLES */

/* The audio toggles are nested inside jp-time-holder */

ul.jp-toggles {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;
}

div.jp-video ul.jp-toggles {
	right:6px;
	top:2px;
	position:absolute;
}
.bannerVideo div.jp-video ul.jp-toggles {
	right:25px;
	top:5px;
	position:absolute;
}

ul.jp-toggles li {
	display: block;
}

ul.jp-toggles li a {
	display: block;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	line-height: 100%; /* need this for IE6 */
}


.bannerVideo ul.jp-toggles li a {
	display: block;
	width: 36px;
	height: 50px;
	text-indent: -9999px;
	line-height: 100%; /* need this for IE6 */
}

a.jp-full-screen {
	background: url(../img/jplayer.vp.skin.png) 0 -46px no-repeat;
	margin-left: 20px;
}
a.jp-full-screen:hover {
	background: url(../img/jplayer.vp.skin.png) -23px -46px no-repeat;
}
	.de a.jp-full-screen:hover, .at a.jp-full-screen:hover {
		background-position: -46px -46px;
	}
a.jp-restore-screen {
	background: url(../img/jplayer.vp.skin.png) 0 -46px no-repeat;
	margin-left: 20px;
}
    *a.jp-restore-screen, {
        margin: -18px 0 0 20px;
    }

a.jp-restore-screen:hover {
	background: url(../img/jplayer.vp.skin.png) -23px -46px no-repeat;
}
	.de .jp-restore-screen:hover, .at .jp-restore-screen:hover {
		background-position: -46px -46px;
	}

.bannerVideo a.jp-full-screen,.bannerVideo a.jp-restore-screen {
	background: url(../img/hme_playerIcon.png) -184px 0 no-repeat;
	margin-left: 20px;
}
.bannerVideo a.jp-full-screen:hover,.bannerVideo a.jp-restore-screen:hover {
	background-position: -184px -46px;
}
    .de .bannerVideo a.jp-full-screen:hover,.de a.jp-restore-screen:hover,
    .at .bannerVideo a.jp-full-screen:hover,.at a.jp-restore-screen:hover {
	    background-position: -184px -92px;
    }
/* @end */

/* @group NO SOLUTION error feedback */

.jp-no-solution {
	position: absolute;
	width: 390px;
	margin-left: -202px;
	left: 50%;
	top: 10px;
	padding: 5px;
	font-size: .8em;
	background-color: #eee;
	border: 2px solid #009be3;
	color: #000;
	display: none;
}
.jp-no-solution a {
	color: #000;
}
.jp-no-solution span {
	font-size: 1em;
	display: block;
	text-align: center;
	font-weight: bold;
}
/* @end */

.touchDevice .bannerVideo #volumBloc{
        display:none;
    }
    .touchDevice div.jp-video-509p div.jp-progress,.touchDevice div.jp-video-509p div.jp-progress{width: 740px;}
    .touchDevice .bannerVideo a.jp-full-screen:hover, .touchDevice .bannerVideo a.jp-restore-screen:hover{
        background-position: -184px 0;
    }
    
    .touchDevice .bannerVideo ul.jp-toggles li:first-child{
        display:none;
        width:36px;
        height:50px;
    }
    .touchDevice .bannerVideo ul.jp-toggles li a.jp-full-screen{
        line-height:auto;
        margin:0;
    }
    .touchDevice .bannerVideo .closeVideo:hover span{
	    background: url(../img/hme_playerIcon.png) -256px -10px no-repeat;
    }