/**
 * Copyright (c) 2015 Institut National de l'Audiovisuel, INA
 *
 * This file is part of amalia.js
 *
 * amalia.js is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Redistributions of source code, javascript and css minified versions
 * must retain the above copyright notice, this list of conditions and
 * the following disclaimer.
 *
 * Neither the name of the copyright holder nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * You should have received a copy of the GNU General Public License
 * along with amalia.js. If not, see <http://www.gnu.org/licenses/>
 *
 * amalia.js is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 */
.ajs-plugin.plugin-storyboard {
  display: none;
  color: #FFF;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 98;
  top: 0;
  .thumbnail {
    height: 90px;
    width: 160px;
    background-color: #313131;
    background-position: 0px -90px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 45px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 3px;
    left: 50%;
    border-radius: 2px;
    border: solid #000 2px;
    z-index: 90;
  }
  .filmstrip {
    position: absolute;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    opacity: 0.7;
    z-index: 90;
    -webkit-filter: grayscale(0.3);
    -moz-filter: grayscale(0.3);
    -ms-filter: grayscale(0.3);
    -o-filter: grayscale(0.3);
    .storyboard-thumbnail {
      background-color: #313131;
      background-position: 0px -90px;
      background-repeat: no-repeat;
      position: absolute;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 3px;
      border-radius: 2px;
      border: solid #000 2px;
    }
  }
  .preview-storyboard {
    text-align: center;
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px;
    .thumbnail-overlay {
      height: 100%;
      width: 100%;
      position: relative;
      border: solid #000 2px;
      visibility: visible;
      z-index: 80;
      filter: blur(5px);
      -webkit-filter: blur(3px) grayscale(0.8);
      -moz-filter: blur(3px) grayscale(0.8);
      -ms-filter: blur(3px) grayscale(0.8);
      -o-filter: blur(3px) grayscale(0.8);
    }
  }

}