/*---------------------------------------------------------
Mediacut - par Vincent Goncalves pour Wokine
---------------------------------------------------------*/

/*---------------------------------------------------------
Formatage des styles prédéfinis
---------------------------------------------------------*/
*{
    padding:0;
    margin: 0;
    font-family:arial, verdana;
}
a:focus, object, object:focus{
    outline:none;
    
}
ul{list-style: none;}

body{
    background: url(images/site/background.jpg) top center no-repeat #d9d9d9;
    text-align: center;
    font-size: 12px;
    color:#000;
}
a{
    color:#3391c0;
    text-decoration: none;
}
.txt-bleu{
    color:#3391c0;   
}
a:hover{
    color:#3391c0;
    text-decoration: underline;
}
table{
    border-collapse: collapse;
    border:none;
}
td{vertical-align: top;}
.clearer{
    clear:both;
    width:100%;
    font-size:0px;
    float:left;
}
/*---------------------------------------------------------
Contour
---------------------------------------------------------*/
#all{
    width:930px;
    text-align: left;
    margin: 0 auto;
}
/*---------------------------------------------------------
Entete : logo
---------------------------------------------------------*/
#header{
    position:relative;
    height:128px;
    width:930px;

    margin:0 auto;
}
#header #logo span{
    display:none;
}
#header #logo{
    position:absolute;
    top:0;
    left:0px;
    width:212px;
    height:128px;
    background: url(images/site/logo.png) no-repeat;
}
* html #header #logo{
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( 
    src="/images/site/logo.png", sizingMethod="scale");
    cursor:pointer;
}


/*---------------------------------------------------------
Entete : Menu
---------------------------------------------------------*/
#menu{
    position:absolute;
    top:0;
    left:212px;
}
#menu li{
    float:left;
}
#menu li a span{
    display:none
}
#menu li a{
    display:block;
    height:39px;
    background-repeat: no-repeat;
    background-position: 22px -39px;
    margin-top:32px;
}
#menu li a.qui-sommes-nous{
    background-image: url(images/menu/qsn.png);
    width:157px;
}
#menu li a.nos-metiers{
    background-image: url(images/menu/nosmetiers.png);
    width:118px;
}
#menu li a.nos-references{
    background-image: url(images/menu/nosreferences.png);
    width:149px;
}
#menu li a.testimonial{
    background-image: url(images/menu/testimonial.png);
    width:126px;
}
#menu li a.besoin-d-une-video{
    background-image: url(images/menu/besoindunevideo.png);
    width:162px;
}
#menu li a:hover, #menu li a.currentpage{
    background-position: 22px 0px;
}
/*---------------------------------------------------------
Footer
---------------------------------------------------------*/
#footer-contour{
    background: url(images/footer/footer.png) top center no-repeat;
    clear: both;
    float:left;
    width:100%;
}
 
#footer{
    text-align: left;
    font-size:11px;
    clear:both;
    height:183px;
    width:930px;
    margin:0 auto;
    color:#343434;
    position:relative;
}
#footer-nos-metiers, #footer-contact, #footer-newsletter, #footer-blog{
    position: absolute;
    top:46px;
    right:50px;   
}
#footer ul{ 
    line-height:15px
}


/*---------------------------------------------------------
Footer - nos metiers
---------------------------------------------------------*/
#footer-nos-metiers{
    left:23px;
    width:130px
}
#footer-nos-metiers a{
    color:#343434
}
/*---------------------------------------------------------
Footer - contactez nous
---------------------------------------------------------*/
#footer-contact{
   left:225px;
   top:40px;
   width:130px 
}
/*---------------------------------------------------------
Footer - newsletter,facebbok,twitter
---------------------------------------------------------*/
#footer-newsletter{
   left:417px;
   top:40px;
   width:200px 
}
#footer-newsletter #form-newsletter{
    height:45px
}
#footer-newsletter li{
    float:left;
    padding:0 10px 0 0 
}
#footer-newsletter a.lien-facebook{
    display:block;
    background: url(images/footer/facebook.jpg);
    height:14px;
    width:66px;
}
#footer-newsletter a.lien-twitter{
    display:block;
    background: url(images/footer/twitter.jpg);
    height:17px;
    width:67px;
}
#footer-newsletter li a span,#footer-blog a span{display:none}
/*---------------------------------------------------------
Footer - blog
---------------------------------------------------------*/
#footer-blog{
   left:785px;
   top:75px;
   width:90px 
}
#footer-blog a{
    display:block;
    background: url(images/footer/le-blog.png);
    height:20px;
    width:90px;
}
/*---------------------------------------------------------
Footer - menu
---------------------------------------------------------*/
#menu-footer{
    position: absolute;
    top: 140px;
    right:0px;
    text-align: right;
}
#menu-footer table{
    float:right;
    clear:both;
}
#menu-footer table td{
    vertical-align: middle;
}
#menu-footer li{
    float:left;
    padding:0 2px
}
#menu-footer ul, #copyright{
    float:left;
}
#menu-footer li a, #menu-footer{
    color:#6a6a6a
}
#wokine{
    clear:both;
    font-size:10px;
    color:#989898;
    vertical-align: middle;
}
#wokine a span{
    display:none;
}
#wokine a{
    display:block;
    float:right;
    height:10px;
    width:15px;
    margin:2px 0 0 5px;
    background: url(images/footer/wokine.gif);
}
/*---------------------------------------------------------
Footer - newsletter
---------------------------------------------------------*/
form .newsletter label{
   display: none;
}
form .newsletter{
    margin:8px 0 0 4px
}
form .newsletter input#myemail{
    width:145px;
    background: none;
    float:left;
    border:none;
    margin:4px 3px 0 0;
    font-size:11px;
}
form .newsletter .fbsubmit{
    float:left;
    background: url(images/footer/ok.jpg);
    width:18px;
    height:22px;
    border:none;
    cursor:pointer;
    padding:1px;
    margin:0 0 0 4px
}
form .newsletter input#myemail.error{
    background: #ebc9c9;
}

/*---------------------------------------------------------
Zone principale
---------------------------------------------------------*/
#large-content{
    clear:both;
    background-position: top center;
}
#large-content .content{
    width:930px;
    margin:40px auto 0 auto;
    text-align: left;
    position: relative;
}
/*---------------------------------------------------------
Zone principale : Accueil
---------------------------------------------------------*/
.box{
    float:left;
    width:250px;
    height:150px;
    background-repeat: no-repeat;
    text-align: left; 
}
.box .content-box{
    font-size: 11px;
    color:#fff;
}
#box-clients{
    background-image: url(images/blocs/nos-clients-parlent-de-nous.png);
    width:241px;
    height:140px;
    cursor: pointer;
}

#box-clients .content-box{padding:43px 85px 5px 16px; }
#box-video{
    background-image: url(images/blocs/besoin-dune-video.png);
    width:243px;
    margin:0 7px;
    height:150px;
    cursor: pointer; 
}
#box-video .content-box{padding:55px 85px 5px 17px; }
#box-blog{
    background-image: url(images/blocs/notre-blog.png);
    width:432px;
    height:136px;
    cursor: pointer;
}
#box-blog .content-box{
    float:right;
    width:235px;
    height:100px;
    overflow: auto;
    padding:20px 10px 0 0;
    margin:5px;
    color:#000
}

#box-blog .content-box a{
    font-weight: bold;
    color:#000;
}
#box-blog .content-box1{
    float:left;
    padding:65px 15px 0 15px;
    width:110px;
    font-size:11px;
}
#box-blog .content-box1 a{
    color:#fff;
}
#box-blog .content-box .date{
    font-weight:bold;
    color:#3392c1; 
    padding:0 0 7px 0
}
#box-blog .content-box .suite{
    font-weight:normal;
    color:#3392c1; 
    font-style: italic;
}
#box-references{
    background-image: url(images/blocs/nos-references.png);
    width:241px;
    height:136px;
    float:left;
    margin:0 8px 0 8px;
    cursor:pointer;
}
#box-references .content-box{
    width:110px;
    height:80px;
    margin:40px 0 0 16px;
    overflow: auto;
}

#contentcaroussel{
    background: url(images/pages/accueil.png) no-repeat bottom center;

}
/*---------------------------------------------------------
Zone principale : videos, references.
---------------------------------------------------------*/
#large-content.references{
    background:url(images/pages/nos-references/nos-references-trans.png) center 70px no-repeat;  
}


 #playlist_wrap{
    height:216px;
    margin:0 0 25px 0;
    position: relative;
    padding:0 0 0 5px;
    background:url(images/pages/nos-references/background-videos.png) top left no-repeat;
}
 #playlist_wrap select{
     position: absolute;
     top:14px;
     width:200px;
     left: 12px;
     font-size: 11px;
     border:1px solid #7b7c80;
 }
#playlist_wrap select option{
   padding:0 1px;
   background: #7b7c80;
   color:#fff
 }
#large-content.references a.player{    
    display:block;
    background:#000;
    width:484px;
    height:272px;
    margin:47px 0 68px 92px;
    cursor: pointer;
}
* html #large-content.references a.player{
    margin-left:93px
}
* +html #large-content.references a.player{
    margin-left:93px
}
#pl {
    height:150px;   
    width:850px;
    margin-top: 65px;
    position:relative;
    overflow:hidden;
    float:left;
}
#pl div.entries {
    position:absolute;
    width:10000em;
}

#pl div.entries a {
    float:left;
    height:103px;
    margin:0px 26px 0px 0px ;
    display:block;
    width:190px;  
    text-align: center;
}

#pl div.entries a img{
    display:inline;
    border: none;
     border:4px solid #c6c6c6;
    text-decoration: none;
}
#pl div.entries a:hover img{
    border:4px solid #aaa9a9;
}

#pl div.entries a.playing img{
    border:4px solid #2583a5;
}

#pl div.entries a.paused img{
   border:4px solid #2583a5;
}
#pl div.entries a span{
    display:block;
    font-size:11px;
}
#pl div.entries a {
    text-decoration:none;
    border:none;
}
#pl div.entries a span.nom-client{
    font-weight:bold;
    color:#277ea9;
    padding:2px 0 0 0;
}
#pl div.entries a span.type-film{
    color:#565656;
}
a.nextPage, a.prevPage {
    display:block;
    width:22px;
    height:23px;
    cursor:pointer;
    margin:110px 10px 30px 5px;
    float:left;
    background:url(images/pages/nos-references/fleche-gauche-nos-ref.png);
}



a.nextPage {
    background:url(images/pages/nos-references/fleche-droite-nos-ref.png);  
}

a.nextPage.disabled, a.prevPage.disabled {
    visibility:hidden;        
}

.description-file{
    position: absolute;
    top:45px;
    left:584px;
    padding:0 0 0 26px;
    background: url(images/pages/nos-references/fleche.png) no-repeat 0 35px  
}
.content-description-file{
    background:#d8d8d8;
    padding:15px;
    width:300px;
    height:130px;
      font-size: 11px;
      overflow: auto;
}
.client-type{
    font-size: 14px;
    font-weight: bold;
    padding:0 0 7px 0;
    color:#277ea9
}
.type-ref{
    font-size: 11px;
    padding:0 0 0 10px;
    color:#000
}
/*---------------------------------------------------------
Zone principale : qui sommes nous
---------------------------------------------------------*/
#all-qui-sommes-nous{
    background:url(images/pages/qui-sommes-nous/qui-sommes-nous.png) center 120px no-repeat;
}
#large-content.qui-sommes-nous{

}
.content-qui-sommes-nous{
    width:430px;
    height:240px;
    overflow: auto;
    margin:15px 0;
}
.content-notre-methodologie{
    margin:15px 0;
}
.table-methodologie{
    width:100%;
    margin:0 0 15px 0;
}
.table-methodologie td{
    padding:0 20px 0 0;
}
.liste-photos-methodologie{
    height:154px;
    background: url(images/pages/qui-sommes-nous/background-nos-references.png) no-repeat;
    width: 100%;
    float: left;
    clear:both;
    margin:0 0 15px 0   
}
.caroussel,.caroussel2 {
   width:900px;
   position: relative;
   margin: 16px 0 0 22px;
}
.caroussel li,.caroussel2 li{
  float:left;
  width:164px;
  padding:0 17px 0 0;
}
.caroussel li img{
    display: block;
    width:152px;
    height:111px;
    border:6px solid #585858
}

.caroussel ul{

}
.carousel-next,.carousel-previous{
    position: absolute;
    display: block;
    top:45px;
    left:-46px;
    cursor: pointer;
    font-size: 0px;
    width:52px;
    height:33px;
    background:url(images/pages/qui-sommes-nous/fleche-gauche-qsn.png) ;
}
.carousel-next span,.carousel-previous span{
    display: none;
}
.carousel-next{
    left:882px;
    background:url(images/pages/qui-sommes-nous/fleche-droite-qsn.png) ;
}
/*---------------------------------------------------------
Zone principale : besoin d'une video
---------------------------------------------------------*/
#all-besoin-video{
    background:url(images/pages/besoin-dune-video/besoin-dune-video.png) center 120px no-repeat;
}
#large-content.besoin-video{
  min-height:450px
}
#content-besoin-video{
    width:400px;
    height:180px;
    overflow: auto;
    margin:15px 0 80px 0;
}
#form-besoin-video .chps-text textarea, #form-besoin-video .chps-simple input{
    background: none;
    border: none;
}
#form-besoin-video{
    float:left;
    width: 100%;
    margin-top:0px
}

#form-besoin-video fieldset{
    float:left;
    border: none;
    margin:0 0 20px 0
}
#form-besoin-video .chps-text{
    background: url(images/form/demande/content.png) no-repeat;
    height:124px;
    width : 489px;
    padding:8px;
    font-size:11px;
    margin:0 30px 0 0;
}
* html #form-besoin-video .chps-text{margin:0 10px 0 0;}
#form-besoin-video .chps-text textarea{
    height:106px;
    overflow: auto;
    width :481px;
    font-size:11px;
}
#form-besoin-video label{
    font-style: italic;
    cursor: pointer;
    color:#979797
}
#form-besoin-video .chps-simple{
    width :376px;
    height:30px;
    margin:0 0 4px 0;
    background: url(images/form/demande/champ.png) no-repeat;
}
#form-besoin-video .chps-simple label{
    width:75px;
    font-size: 11px;
    display:block;
    padding:9px 3px 0 8px;
    float:left;
}
#form-besoin-video .chps-simple input{
    float:left;
    display: block;
    width:280px;
    font-size: 11px;
    padding:2px;
    margin:6px 0 6px 0
}
#form-besoin-video .fbsubmit{
   width :99px;
    height:38px; 
    background: url(images/autres/envoyer-bleu.png) no-repeat;
    display: block;
    cursor: pointer;
    clear:both;
    border: none;
    margin:0px 15px 30px 460px;
}

#form-besoin-video .chps-simple  input.error,#form-besoin-video textarea.error, .form-contact .chp-simple input.error,  .form-contact .chp-simple select.error,.form-contact .chp-text textarea.error{
    background: #ebc9c9;
}


/*---------------------------------------------------------
Zone principale : liste des metiers
---------------------------------------------------------*/
#liste-metiers{
    margin:15px 0 15px 0px;
    background: url(images/pages/nos-metiers/nos-metiers.png) 0px 0;
    height:340px;
    width:937px;
}
#liste-metiers table{
    margin:0 0 0 8px
}
#liste-metiers td{
    padding-top:50px;
    font-size:11px;
}
#liste-metiers td div{
    
}

#liste-metiers td div.m-film{
    width:195px;
    margin-left:18px;
}

#liste-metiers td div.m-produit{
    width:195px;
    margin-left:32px;
}

#liste-metiers td div.m-mail{
    width:195px;
    margin-left:33px;
}

#liste-metiers td div.m-captation{
    width:195px;
    margin-left:34px;
}

#maisaussi{
    width:430px;
    height:137px;
    float:left;
    background: url(images/pages/nos-metiers/mais-aussi.png) top left no-repeat;
}

#maisaussi .content-aussi{
    width:390px;
    overflow: auto;
    margin:50px 0 0 23px;
    height:70px;
    font-size:11px;
    color:#303131;
}
/*---------------------------------------------------------
Zone principale : contact et recrutmeent
---------------------------------------------------------*/
#all-contact{
}
#large-content.contact{
               

    background: url(images/pages/besoin-dune-video2.png)  center 0px no-repeat;

}
.content-contact{
    margin:15px 0;
}
.form-contact label{
    font-weight:bold;
    display:block;
    width:95px;
    text-align:right;
    padding:8px 0 0 0 ;
    float:left
}
.form-contact .chp-simple {
    width:400px; 
    float:left;
    clear:both;
    background: url(images/form/contact/champ.png) no-repeat top right;
    margin:0 0 10px 0
}
.form-contact .chp-simple input,.form-contact .chp-simple select{
    float:right;
    width:270px;
    font-size:11px;
    border:none;
    background: none;
    border:none;
    margin:8px 10px 8px 0
}
.form-contact .chp-text{
    clear:both;
     width:400px; 
     float:left;
      height:134px;
     background: url(images/form/contact/content.png) no-repeat top right;
    
}
.form-contact .chp-text textarea{
    overflow:auto;
     width:270px;
    height:117px;
    float:right;
    border:none;
    font-size:11px;
    background: none;
    margin:8px 10px 0 0
}
.form-contact .submit{
    clear: both;
    float:left;
    width:100%;
    margin:15px 0;
}
.form-contact .fbsubmit{
    clear: both;
    width:59px;
    height:24px;
    background: url(images/autres/envoyer.png);
    border:none;
   cursor:pointer;
   margin:0 0 0 340px;
}

.form-contact .chp-simple select#motif{
    border:1px solid transparent;
     margin-top:6px;
}
#gmap{
    border:8px solid #848484;
    float:left;
    margin:2px 0 0 35px;
}
/*---------------------------------------------------------
Zone principale : testimonial
---------------------------------------------------------*/
#liste-clients{
    margin:20px 0;
}
.one-client{
    width:599px;
    height: 214px;
    background: url(images/pages/testimonial/background-testimonial.png) no-repeat;
    margin:0 0 20px 0;
    position: relative;
}
.content-one-client{
    padding:20px
}
.one-client a{
    border:4px solid #cccccc
}
.one-client img{
    border:none
}

.one-client .titre{
    font-size:14px;
    color:#0d97c3;
    font-weight: bold;
    padding:5px 0 0 0;
}
.one-client .description{
    font-size:11px;
    color:#272727;
}
.one-client .content-client-dire{
    overflow: auto;
    height:170px;
    width:320px;
}
.one-client h4{
    font-size: 18px;
    color:#1d1d1d;
    font-weight: normal;
    padding:0 0 10px 0
}
.content-testimonial{
    padding:10px 0 0 0
}
#liste-logo{
    width:284px;
    margin:25px 0
}
#liste-logo .haut, #liste-logo .bas{
    font-size:0px;
    clear:both;
    height:11px;
    background: url(images/pages/testimonial/clients/haut.png) no-repeat;
}
#liste-logo .bas{
    height:12px;
    background: url(images/pages/testimonial/clients/bas.png) no-repeat;
}
#liste-logo .milieu{
   background: url(images/pages/testimonial/clients/milieu.png) repeat-y; 
   float:left;
   width:100%;
}
#liste-logo li{
    float:left;
    display: block;
    width:142px;
   
    text-align: center;
    padding:5px 0
}
#liste-logo li a,#liste-logo li a img{
    border:none;
    text-decoration: none;
    
}
#liste-logo li a img{
    border: 2px solid #d7d7d7; 
}
.one-client a.myPlayer { 
    display:block; 
    width: 200px; 
    height:110px;  
    position: relative;

} 
.one-client a.myPlayer object{
   
    width:401px;
   height:249px;          
    float:right;
    
}
.one-client .mon_player{
    width:401px;
    position: absolute;
    left:220px;
    height:249px;
    border:9px solid #000000;
    background: #fff;
}
.one-client a.myPlayer .contour{

     width:421px;
      height:225px;
     
    background: url(images/pages/testimonial/fleche.png)  no-repeat  200px 40px;
}


/*---------------------------------------------------------
Zone principale : mentions légales
---------------------------------------------------------*/
.slg-bleu{
    padding:25px 0 15px 0;
    display:block;
}
#large-content.simple  .content{
    margin:0 auto 25px auto
}
#large-content.simple  .content li{
    padding:0 0 0 10px;
    background: url(images/autres/pucebleu.jpg) no-repeat 0 7px;
}
#large-content.simple  .content ul{
    padding:0 0 0 25px
}
/*---------------------------------------------------------
Zone tinyMCE
---------------------------------------------------------*/
.mycontent p, .mycontent ul{
    padding:0 0 15px 0
}


#lecteur{
    position: relative;
}

#lecteur .play{
    position: absolute;
    height:73px;
    top:90px;
    left:300px;
    width:73px;
    display: block;
    background: url(images/autres/play.png);
}

.myPlayer .play{
    position: absolute;
    height:56px;
    top:30px;
    left:75px;
    width:56px;
    display: block;
    background: url(images/autres/play-mini.png);
}



/*---------------------------------------------------------
Caroussel 
---------------------------------------------------------*/
#carousel_playlist .previous , #carousel_playlist .next {
background:url("images/pages/nos-references/fleche-gauche-nos-ref.png") repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
float:left;
height:23px;
width:22px;

position: absolute;
 top:110px;

}
#carousel_playlist .previous{

left:5px
}
#carousel_playlist .next{
left:900px;
}
#carousel_playlist .next {
background:url("images/pages/nos-references/fleche-droite-nos-ref.png") repeat scroll 0 0 transparent;
}
#carousel_playlist{

    
float:left;
height:150px;
margin:65px 0  0 35px;
overflow:hidden;

width:850px;
}
#carousel_playlist a span {
display:block;
font-size:11px;
}
#carousel_playlist a{
   display:block;
float:left;
height:150px;
margin:0 26px 0 0;
text-align:center;
width:190px; 
text-decoration: none;
}


#carousel_playlist li{
    float:left
}
#carousel_playlist img{
    border:4px solid #C6C6C6;
    display:inline;
    text-decoration:none;
}
#carousel_playlist a:hover img{
     border:4px solid #AAA9A9;
}
#carousel_playlist span.nom-client  {
color:#277EA9;
font-weight:bold;
padding:2px 0 0;
}
#carousel_playlist a span.type-film {
color:#565656;
}



.player_testimonial{
   background:url("images/pages/testimonial/fleche.png") no-repeat scroll 200px 40px transparent;
    height:225px;
    width:421px; 
    position: absolute;
    top:0;
    left:30px;
    display: none;
    z-index:9999
    
}
.player_testimonial div{
    
    background:none repeat scroll 0 0 #FFFFFF;
    border:9px solid #000000;
    height:230px;
    left:220px;
    position:absolute;
    width:401px;
}