/*
    _____
   / ___ \
  / / _ \ \
  \ \(_)/ /
   \_   _/
    |   |   Equipe web ONF /
    |_|_|   NFB web team  / 2009
    =====
  */
 /* :: CSS Document - Style defenitions for thumbnails */
 /* :: v2.0 > v3.0 (.vg3) */
 /* :: more style modifier in norm-userhub.css */
 
 /*
 *
 * vignette : basic legacy style
 * vg3 : modern vignette
 * vig-cover : pochette de download basic
 * vig-store :pochette dans digital store
 *
 *
 */
 
 .vignette {width:240px; margin:9px 0; float:left; text-align:center; padding:9px 0; height:20em}
     .vg3 {height:32em}
 .vignette .inner{width:206px; margin:0 auto; border:1px solid transparent; color:#fff;padding-bottom:1.5em; position:relative}
     .vg3 .inner{height:31em;padding: 0 9px 18px;
                 -webkit-transition:border-color 0.2s ease-in;
                 -moz-transition:border-color  0.2s ease-in;
                 -o-transition:border-color  0.2s ease-in;
                 transition:border-color  0.2s ease-in;
 
     }
 
     .page-section-pnl .vignette .inner{border:1px solid transparent;}
     .page-section-tab-pnl .vignette .inner{border:1px solid transparent;}
 
 
 /*.vignette .inner:hover{ border:1px solid #ffcc66;} 
     .vg3 .inner:hover {border-top:3px solid #fc6;background-image:none;}*/
     /*.exo-fr .inner:hover{border-color: #80d4ff}*/
 .vignette .playing{border:1px solid #c00;}
 
 .vignette .vis{display:block;position:relative;} /* used in card ?? */
 .vignette .visual{width:204px;height:115px;margin:1px auto 8px;background-color:#012;font-style:italic;color:#999;}
 .vignette  a:focus img{outline:1px dotted #ff9900}
 .vignette img{margin:0;}
 
 .vignette .p-overlay {position:absolute;top:0;left:0;z-index:10;width:204px;height:80px;background:url(/medias/nfb_tube_static/styles/imgs/play-overlay-tmb.png) 77px 32px no-repeat}
     .vg3 .p-overlay {top:42px;left:8px}
     .vg3 .inner:hover .p-overlay {display:block;top:40px;left:8px}
 .vignette .infos, .vignette .meta{font: normal 1.2em/1.5em Arial, Helvetica, FreeSans,serif;text-align:left;padding:0 3px}
 .vignette .infos a:focus,.vignette .infos a:hover{text-decoration:underline;color:#F90}
 .vignette .over-title{color:#ccc;margin-top:18px}
 .vignette .title{font-size:1.1666em;font-weight:normal;text-indent:20px;margin-bottom:1.2857em}
 
 .vignette .title a{font-weight:normal;}
     .vignette .infos .film, .vignette .infos .site, .vignette .chapter-title{text-indent:0}
     .vignette .infos .pl,
     .vignette .infos .resume,
     .vignette .infos .download,
     .vignette .infos .more,
     .vignette .infos .play{background-image:url(/medias/nfb_tube_static/styles/imgs/norm-img-strip2.png);background-repeat: no-repeat;text-indent:20px ;min-height:1px}
     .vignette .infos .pl{background-position:-217px -522px}
     .vignette .infos .resume{background-position:0 -1204px}
     .vignette .infos .download{background-position:0 -1096px}
     .vignette .infos .more{background-position:0 -1149px}
     .vignette .infos .play{ background-position:0 -721px}/*?*/
     .vignette .infos .actions{margin:1.5em 0}
     .vignette .infos .more{font-size:inherit}
 .vignette .description{margin-bottom:1.8em}
 .vignette .creator,
 .vignette .running-time,
 .vignette .prod-year{display:inline;font-size:0.9166em;line-height:1.6363em}
 .vignette .creator{color:#ccc}
 
 .vignette .running-time{white-space:nowrap}
     .vignette .add2pl em{padding-left:12px;font-style:normal;background:url(/medias/nfb_tube_static/styles/imgs/norm-img-strip2.png) left no-repeat}
 .vignette .guest{font-size:1.8em}
 .vignette .guest a{font-weight:normal}
 
 
 /*.exo-fr .title a{color: #80d4ff}*/
 
 
 /* :: meta*/
 .vignette .meta{position:absolute;z-index:12;top:4px;right:0px;text-align:left;line-height: 14px}
     .vg3 .meta {border-top:3px solid #4d4d4d;min-height:19px }
         /*.vg3 .bg-grey .meta {border-top:3px solid #4d4d4d }    */
     .vg3 .inner:hover .meta{border-top:1px solid #000}
         .vg3 .bg-grey:hover .meta{border-top:1px solid #333}
         .vg3 .bg_d-grey:hover .meta{border-top:1px solid #242424}
     .vg3 .meta img{vertical-align:middle;margin-right:5px;cursor:help}
 .meta .entry-format{}
 .meta .entry-avail{vertical-align: middle}
 .meta .entry-type{}
 .meta .entry-date{font-size:0.9166em}
 .meta .entry-status{color:#fff;background-color:#090;font-style:normal;padding:0 4px;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
 .meta .entry-educ{background-color: #0088c1;font-size: 10px}

/*.meta i{font-size:14px;background: #478a46;padding: 1px;color:#fff;border-radius: 2px;}*/
.meta i{font-size:14px;background: rgba(55,55,55,0.75);padding: 1px;color:#fff;border-radius: 2px;}

 /* :: ratings and warnings  see also  js-plugins.css  */
     .rating-warning, .ttip{cursor:help}
.wrng{width:24px;height:24px;position:absolute;top:4px;left:4px;z-index:20;text-align: left;}
.wrng i{font-size: 16px;color: #DA2F2F;
  text-shadow:
   -1px -1px 0 rgba(255,255,255,0.8),
    1px -1px 0 rgba(255,255,255,0.8),
    -1px 1px 0 rgba(255,255,255,0.8),
     1px 1px 0 rgba(255,255,255,0.8);
  }
.wrng i:hover{color: #f7b045;  
    text-shadow:
   -1px -1px 0 #960,  
    1px -1px 0 #960,
    -1px 1px 0 #960,
     1px 1px 0 #960;}
 
     .wrng a{color:#990000;display:block;width:39px;height:39px;background:url(/medias/nfb_tube_static/styles/imgs/norm-img-strip6.png) left -1116px no-repeat;}
         .vg3 .wrng{top:38px;left:10px}
         .vg3 .inner:hover .wrng{top:36px}
 
/*style of the warning text on roll over*/
.wrng i[data-title]:hover:after {
  content: attr(data-title);
  padding: 8px;
  color: #533625;
  text-shadow: 0 0 0;
  position: absolute;
  left: 22px;
  top: 100%;
  width:140px;
  z-index: 20;
  font-size: 11px;
  font-family: sans-serif;
  font-weight: bold
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-color: #f7b045;
  background-color: rgba(247, 176, 69, 0.8);
}



 /* :: format icons (sub-title, video description)*/
     .format-icons{position:absolute;top:98px;right:4px;text-align:right;padding: 0 0;border-radius: 2px}
     .format-icons{  text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;}
.format-icons{font-size: 16px;color:#000;line-height: 0.8}
/*.format-icons i{background: rgba(250,250,250,0.5);padding: 0 2px;border-radius: 2px}*/

     .vignette .format-icons img{width:auto;height:auto;cursor:help}
     .vg3 .format-icons{position:absolute;top:132px;right:14px;text-align:right}
     .vg3 .inner:hover .format-icons {top:130px;right:14px;}
 
 /* :: drop down action menu (.vg3)*/
     .actions{position:absolute;top:0;right:5px;z-index:21;}
     .vg3 .inner:hover .actions {top:5px;}
 
     .actions-menu{display:none;}
 
     .actions-switch{padding:13px 5px 5px}
     .vg3 .inner:hover .actions-switch{padding:6px 5px 5px}
     .actions-switch:hover .actions-menu{display:block}
     .actions-menu{height:318px;position:absolute;top:0;right:0;width:214px;background:#fff url(/medias/nfb_tube_static/styles/imgs/thumbnails_ico-strip.png) 98% -1874px no-repeat;text-align:left;padding:0 0 0;}
        .no-arrow{background:#fff no-repeat;}
 
     .actions-menu li{font:normal 1.4em/3.9285em Arial;}
     .actions-menu .cue{padding-left:16px;color:#666;font:italic 1.2em/3em Arial;}
         .actions-menu .licence {position: absolute;bottom:0px;left:0px;right:0px;border-top:1px solid #bbb;}
     .actions-menu li:hover {background-color:#eeffdd;}
     .actions-menu li.deact:hover {background-color:#fff;}
     .actions-menu .cue:hover{background-color:transparent;}
     .actions-menu li a, .actions-menu li .deact {color:#690;display:block;padding-left:42px;border-top:1px solid #bbb;}
        .vig-cover .actions-menu li a, .vig-cover .actions-menu li .deact{padding-left:16px;padding-right:36px;}
      .actions-menu li.last a, .actions-menu li.last .deact{border-bottom:1px solid #bbb;}
      .actions-menu li .deact{color:#ccc}
      .actions-menu li:hover a {border-top:1px solid #bbb;text-decoration:underline}
  
  
          .actions-menu .download a{background-position:16px -260px}
          .actions-menu .add2list a{background-position:16px -307px}
          .actions-menu .share a{background-position:16px -353px}
          .actions-menu .ed-plus a{background-position:16px -401px}
            .vig-cover .download-mobile a{background-position:90% -809px}
            .vig-cover .download-sd a{background-position:90% -750px}
            .vig-cover .download-hd a{background-position:90% -693px}
  
          .actions-menu .play .deact{background-position:16px -443px;}
          .actions-menu .download .deact{background-position:16px -490px}
          .actions-menu .add2list .deact{background-position:16px -537px}
          .actions-menu .share .deact{background-position:16px -583px}
          .actions-menu .ed-plus .deact{background-position:16px -631px}
            .vig-cover .download-mobile .deact{background-position:90% -979px}
            .vig-cover .download-sd .deact{background-position:90% -921px}
            .vig-cover .download-hd .deact{background-position:90% -862px}
          /* :: upgrade to hd */
          .vig-cover li.download-upgrade span{line-height:1.2857em;padding:9px 0}
            .vig-cover li.download-upgrade:hover{background-color:transparent;}
          .vig-cover li.download-upgrade span a{font-size:12px;display:inline;border:none;padding-left:0;background-image:none}
          .actions-menu li.last span a{border:none}
  
          /* :: delete downloaded film */
          .vig-cover li.delete{position:absolute;bottom:0;font-size:12px}
          .vig-cover li.delete:hover{background-color:transparent;}
          .vig-cover li.delete a{color:red;background-image:none;border-top:0}
  
                           /* CSS3 drop down animation*/
                          .actions-menu{
                            display:block;
                            height:0;
                            overflow:hidden;
                            -webkit-transition: height 0.2s linear;
                            -moz-transition: height 0.2s linear;
                            -o-transition: height 0.2s linear;
                          }
  
                          .actions-switch:hover .actions-menu{
                             height:318px;
                           }
  
  /* :: Playlist Thumbnail Mosaik (4 pictures mosaik)*/
      .playlist-wrap { display:block; width:204px; height:124px; padding:1px 0 0 0; margin:0 0 0 3px;overflow:hidden; text-decoration:none; }
      .playlist-wrap .img1, .playlist-wrap .img2, .playlist-wrap .img3, .playlist-wrap .img4 {width:97px; height:55px; float:left;border:0;background-color:#336}
          .playlist-wrap .img1 {margin:0 5px 5px 0;}
          .playlist-wrap .img2 {margin:0 0 5px 0;}
          .playlist-wrap .img3 {margin:0 5px 0 0;}
          .playlist-wrap .img4 {margin:0 0 0 0;}
  
  /* :: Thumbnail Modifier | extends .vignette */
      .v-collapsed{height:auto;}
      .v-collapsed .inner{background-color:#000;padding-bottom:0}
      .v-collapsed .visual{margin-bottom:0}
      .v-collapsed .infos{position:absolute;top:18px;background:url(/medias/nfb_tube_static/styles/imgs/black75pct.png) left top repeat;width:200px}
  
      .v-expanded{display:block;float:none;width:auto;height:auto;text-align:left;margin:1.8em 0;padding:0}
      .v-expanded .inner{width:auto;height:auto;background-color:#000;min-height:117px}
      .v-expanded .visual{float:left;margin:9px 18px 0 9px;}
      .v-expanded .infos{padding-left:0;margin-right:9px}
      .v-expanded .infos, .v-expanded .edit-tools{margin-left:231px}
      .v-expanded .description{margin-top:1.8em}
          .v-expanded .description textarea{width:98%;font-size:14px;line-height:18px;}
      .v-expanded .title{margin-top:1em}
      .v-expanded .tools{}
  
  /* --> see also norm-userhub.css */
  
      /* used in add film to playlist via ajax in user hub */
      .vig-mini .visual{height:54px;width:96px}
      .vig-mini .infos, .vig-mini .edit-tools{margin-left:123px}
      .vig-mini .inner{min-height:54px}
  
      /* used in the oscars section*/
      .vig-xxsm .inner{min-height:36px;padding-bottom:0}
      .vig-xxsm .p-overlay {z-index:10;width:84px;height:36px;background:url(/medias/nfb_tube_static/styles/imgs/play-overlay-sm-tmb.png) 50% 50% no-repeat}
      .vig-xxsm .visual{height:36px;width:64px;margin-top:0}
      .vig-xxsm .infos, .vig-mini .edit-tools{margin-left:91px}
      .vig-xxsm .title{margin-top:0}
  
      /* used in edu. guide listing */
      .guide .visual{width:92px; height:auto;padding-right:3px}
  
  /*medium descriptions (like in playlist)*/
      .vig-mediumtext {height:32.4em}
  
  /*longer descriptions (like in expert playlist)*/
      .vig-longtext {height:39.6em}
  
  /*External website listing*/
      .vig-site {height:30.6em}
      .vig-site img.visual {width:204px; height:153px;} /* external site imgs */
  
  /*inline message vignette*/
      .vig-message{font-size:1.2em;line-height:1.5em}
      .vig-message .inner{background-color:#333;}
      .vig-message .copy{padding:26px 20px 0;text-align:left}
  
      .message-tip{height:36px;position:absolute;bottom:18px;left:20px;line-height:36px;background:url(/medias/nfb_tube_static/styles/imgs/norm-img-strip6.png) left -450px no-repeat;padding-left:36px}
  /*Contact sheet layout for image gallery*/
      .img-gallery {height:auto}
      .img-gallery .visual{margin: 3px 0 0;width:auto;}
  
  
      /*voir film-list : ligne 1118 | conflict ? */
      .filmlist{margin:1.8em 20px;font-size:1.2em}
      .filmlist li{margin-bottom:18px}
      .filmlist a:hover {text-decoration:underline;}
      .filmlist .title{font-size:1.1666em;padding-bottom:2px}
      .filmlist .running-time, .filmlist .prod-year, .filmlist .creator{font-size:0.9166em;display:inline;line-height:1.8em}
  
  /* cover de film telechargeable*/
      .vig-cover{height:45em}
      .vig-cover .inner{height:44em}
      .vig-cover .visual{height:auto}
      .vig-cover .format-icons{top:312px}
       .vig-cover .inner:hover .format-icons {top:312px;right:14px;}
      .vig-cover .title{margin-bottom:0;margin-top:1.2857em}
      /*.vig-cover .inner:hover .actions-menu{height:340px;}*/
  
  
   /* film telechargeable, menu ouvert sur le cote*/
      .vig-open-menu{width:460px}
      .vig-open-menu .inner{width:206px;padding-right:230px}
      .vig-open-menu .meta{width:422px}
      .vig-open-menu .actions-menu{display:block;background-image:none;height:340px}
  
      .vig-open-menu .actions {top:7px;right:9px}
      .vig-open-menu .format-icons{right:240px}
        .vig-open-menu .inner:hover .format-icons{right:240px}
      .vig-open-menu .inner:hover .actions {top:5px;}
  
  /* vignette de rental */
      .rental-expired img, .rental-expired .infos{opacity: 0.5}
      .rental-expired .inner:hover{border-color: #999}
  
  /* extend vig-cover | pochette de film dans digi store*/
  /* voir aussi >> norm-ie-all.css pour hack ie*/
      .vig-store{height:36em}
      .vig-store .inner{height:35em}
      .vig-store .wrng{top:40px}
                            /*CSS3 drop down animation*/
      .vig-store .inner .infos{background-color:#212121;background-color:rgba(0,0,0,0.8);opacity:0;position:absolute;top:29px;left:10px;width:198px;height:306px;overflow:hidden;z-index: 205;
                            -webkit-transition: opacity 0.2s ease-in;
                            -moz-transition: opacity 0.2s ease-in;
                            -o-transition: opacity 0.2s ease-in;
                            transition: opacity 0.2s ease-in;
                              filter:alpha(opacity = 0);
      }
      .vig-store .infos h3,.vig-store .infos ul{margin:10px;}
  
      .vig-store .meta{
          border-top:0px;
          position:relative;
          height:28px
      }
      .vig-store .bg-grey:hover .meta {
          border-top: 0px solid #333;
      }
      .vig-store .buy-link{position:absolute;bottom:18px;left:10px;text-align: center;width:178px;}
  
      .vig-store .inner:hover .infos{
          background-color:rgba(0,0,0,0.8);
          opacity:1;
          filter:alpha(opacity = 100);
       }
  
  .simple-button{background: #99cc00;color:#030;text-decoration:none;display:inline-block;border: 1px solid #690;border-radius: 6px;padding:0.5em;box-shadow: 0px 0px 0px #000}
  .simple-button{-webkit-transition:all 0.2s ease-in;
                  -moz-transition:all 0.2s ease-in;
                  -o-transition:all 0.2s ease-in;
                  transition:all 0.2s ease-in;
                  }
  .simple-button b {font-weight:normal;font-size:14px}
  .vig-store .infos .simple-button:hover{color:#000;background: #cf3;text-decoration:none;}


/* hacks and fixes*/

.wrng a.rating-warning {font-size:1px;}
#tooltip h3{font-size:10px;}

/* OVERLAY ICONS ARE IN => board-ui-buttons.css */