/*  

  Stylopis pro Fancygallery (prototyp)
  Knihovna pro zobrazovani galerii obrazku.
  Verze z 10. 8. 2010
  Autor: Martin Michalek, michalek@shortcat.cz

  Obsah:
  1) jquery.fancybox.mod_shortcat.css     Shortcat vzhled FancyBoxu
  2) jquery.jcarousel.css                 Zakladni stylopis pro jCarousel
  3) jquery.jcarousel.skin.shortcat.css   Shortcat vizual pro jCarousel
  4) fancygallery.css                     Styly pro FancyGallery, ktere neobsahuje Fancybox Shortcat mod
  
  Z-indexy:
  1110	#fancybox-loading, #fancybox-thumbnails .jcarousel-item .hover-image (FB Gallery mouseover)
  1109	#fancybox-inner:hover (Hover nad obrazkem)
  1108	#fancybox-thumbnails (FB Gallery lista s thumbnaily)
  1108	#fancybox-close
  1107	#fancybox-left, #fancybox-right, #fancybox-left-ico, #fancybox-right-ico
  1102	#fancybox-title
  1101	#fancybox-wrap
  1100	#fancybox-overlay

*/




/* =================================================================
   1) jquery.fancybox.mod_shortcat.css
   Shortcat vzhled FancyBoxu
*/

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 *
 * Version: 1.3.1 (05/03/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

/* Do not show scrollbars when FB is open */
body.fancybox-active {
   overflow: hidden;
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  margin-left: -20px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1104;
  display: none;
}

* html #fancybox-loading {	/* IE6 */
  position: absolute;
  margin-top: 0;
}

#fancybox-loading div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 480px;
  background-image: url('../img/fancybox.png');
}

#fancybox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  z-index: 1100;
  display: none;
}

* html #fancybox-overlay {	/* IE6 */
  position: absolute;
  width: 100%;
}

#fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: none;
}

#fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 20px;
  z-index: 1101;
  display: none;
}

#fancybox-outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFF;
}

#fancybox-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  outline: none;
  overflow: hidden;
}

#fancybox-inner:hover {
  z-index: 1109;
}

#fancybox-hide-sel-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

#fancybox-close {
  position: fixed;
  right: 22px;
  top: 24px;
  width: 37px;
  height: 37px;
  background-image: url('../img/fancy_close.gif');
  background-position: top left;
  cursor: pointer;
  z-index: 1108;
  display: none;
}

#fancybox-close:hover {
  background-position: bottom left;
}

#fancybox_error {
  color: #444;
  font: normal 12px/20px Arial;
  padding: 7px;
  margin: 0;
}

#fancybox-content {
  height: auto;
  width: auto;
  padding: 0;
  margin: 0;
}

#fancybox-img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  line-height: 0;
  vertical-align: top;
  -ms-interpolation-mode: bicubic;
}

#fancybox-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

#fancybox-title {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1102;
}

.fancybox-title-inside {
  padding: 10px 0;
  text-align: center;
  color: #333;
}

.fancybox-title-outside {
  padding-top: 5px;
  color: #FFF;
  text-align: center;
}

.fancybox-title-over {
  color: #FFF;
  text-align: left;
}

#fancybox-title-over {
  padding: 10px;
  background-image: url('../img/fancy_title_over.png');
  display: block;
}

/* Outer title content */

#fancybox-title-wrap {
  position: fixed;
  left: 22px;
  top: 24px;
  width: auto;
  max-width: 400px;
  max-height: 80%;
  overflow-y: auto;
  display: inline-block;
  padding: 8px 10px;
  background-image: url('../img/fancy_title_over.png');
}

#fancybox-title-left,
#fancybox-title-right {
  display: none;
}

#fancybox-title-main {
  color: #fff;
  text-align: left;
  display: block;
  opacity: 1;
}

/* Left and right navigation arrows */

#fancybox-left, 
#fancybox-right {
  position: fixed;
  bottom: 0px;
  height: 100%;
  width: 35%;
  cursor: pointer;
  outline: none;
  background-image: url('../img/blank.gif');
  z-index: 1107;
  display: none;
}

#fancybox-left {
  left: 0px;
}

#fancybox-right {
  right: 0px;
}

#fancybox-left-ico, 
#fancybox-right-ico {
  position: absolute;
  top: 50%;
  left: -9999px;
  width: 61px;
  height: 77px;
  margin-top: -30px;
  cursor: pointer;
  z-index: 1107;
  display: block;
}

#fancybox-left-ico {
  background-image: url('../img/fancy_nav_left.gif');
}

#fancybox-right-ico {
  background-image: url('../img/fancy_nav_right.gif');
}

#fancybox-left:hover, 
#fancybox-right:hover {
  visibility: visible;    /* IE6 */
}

#fancybox-left:hover span {
  left: 0px;
}

#fancybox-right:hover span {
  left: auto;
  right: 0px;
}

/* Shadows are off */

.fancy-bg {
  display: none;
}




/* =================================================================
   2) jquery.jcarousel.css
   Zakladni stylopis pro jCarousel
*/

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}





/* =================================================================
   3) jquery.jcarousel.skin.shortcat.css
   Shortcat vizual pro jCarousel
*/

/* 
Stylesheet for jQuery carousel - Shortcat skin
Author:        Martin Michalek, Studio Shortcat, michalek@shortcat.cz
*/

.jcarousel-skin-shortcat .jcarousel-container {
  top: -2px;
  left: -2px;
  position: relative;
  margin: 0 10px;  
  width: 897px;
}

.jcarousel-skin-shortcat .jcarousel-container-horizontal {
  padding: 0 40px;
  width: auto;
}

.jcarousel-skin-shortcat .jcarousel-clip-horizontal {
    height: 40px;
    width: auto;
}

.jcarousel-skin-shortcat .jcarousel-item,
.jcarousel-skin-shortcat .jcarousel-item img  {
    width: 40px;
    height: 40px;
}

.jcarousel-skin-shortcat .jcarousel-item img  {
    opacity: .5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

.jcarousel-skin-shortcat .jcarousel-item.active img,
.jcarousel-skin-shortcat .jcarousel-item:hover img {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

.jcarousel-skin-shortcat .jcarousel-item-horizontal {
    margin-right: 3px;
}

.jcarousel-skin-shortcat .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-shortcat .jcarousel-next-horizontal {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 33px;
    height: 40px;
    cursor: pointer;
    background: transparent url(../img/fancygallery_next.gif) no-repeat top right;
}

.jcarousel-skin-shortcat .jcarousel-next-horizontal:hover,
.jcarousel-skin-shortcat .jcarousel-next-horizontal.hover,
.jcarousel-skin-shortcat .jcarousel-next-horizontal:active {
    background-position: top right;
}

.jcarousel-skin-shortcat .jcarousel-next-disabled-horizontal,
.jcarousel-skin-shortcat .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-shortcat .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-image: none;
}

.jcarousel-skin-shortcat .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 33px;
    height: 40px;
    cursor: pointer;
    background: transparent url(../img/fancygallery_prev.gif) no-repeat 0 0;
}

.jcarousel-skin-shortcat .jcarousel-prev-horizontal:hover,
.jcarousel-skin-shortcat .jcarousel-prev-horizontal.hover,
.jcarousel-skin-shortcat .jcarousel-prev-horizontal:active {
    background-position: 0 0;
}

.jcarousel-skin-shortcat .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-shortcat .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-shortcat .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-image: none;
}





/* =================================================================
   4) fancygallery.css
   Styly pro FancyGallery, ktere neobsahuje Fancybox Shortcat mod
*/

/* Vrstva s thumbnaily  */
#fancybox-thumbnails {
  position: fixed;
  z-index: 1108;
  bottom: 20px;
  left: 0px;
  width: 100%; 
  height: 40px;
  /* IE7- */
  text-align: left;
  /* IE6 */
  _display: none;
}

/* == Vrstva s thumbnaily v pripade kdy zobrazujeme vetsi obrazek na mouseover == */

#fancybox-thumbnails,
#fancybox-thumbnails .jcarousel-skin-shortcat .jcarousel-clip-horizontal {
  height: 129px; /* 40px maly nahled + 75px mouseover nahled + 4px border + 10px sipka */
}

/* Vetsi obrazek zobrazovany na mouseover */
#fancybox-thumbnails .jcarousel-item .hover-image {
  width: 75px;
  height: 86px;
  padding: 2px;
  position: relative;
  top: -129px;
  left: -20px; 
  display: none;
  background-image: url(../img/fancygallery_thumbnail_hover.gif);
  background-repeat: no-repeat;
}

#fancybox-thumbnails .jcarousel-item .hover-image img {
  width: 75px;
  height: 75px;
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}


#fancybox-thumbnails .jcarousel-item:hover .hover-image {
  display: block;
}

#fancybox-thumbnails .jcarousel-item,
#fancybox-thumbnails .jcarousel-next-horizontal,
#fancybox-thumbnails .jcarousel-prev-horizontal {
  margin-top: 89px; /* 75px mouseover nahled + 4px border + 10px sipka */
}


/* 
Zkousime dostat mouseover ven z rodicovskeho overflow:hidden prvku:
Rodicum nastavime position: static a synovi pak position: absolute.
(Viz http://www.vzhurudolu.cz/test/override-overflow-hidden/)
*/

#fancybox-thumbnails .jcarousel-clip,
#fancybox-thumbnails .jcarousel-list {
  position: static;
}

#fancybox-thumbnails .jcarousel-item .hover-image {
  position: absolute;
  top: auto;
  left: auto;
  margin-top: -129px;
  margin-left: -20px;
  z-index: 1110;
  /* IE7 */
  &margin-top: -90px;
  &margin-left: -58px;
}

#fancybox-thumbnails.scrolling .jcarousel-clip,
#fancybox-thumbnails.scrolling .jcarousel-list {
  position: relative;
}

/* Pokud v titulku fotky zobrazujeme i titulek setu, zmenime jeho barvu */
#fancybox-title-main .set {
  color: #999;
}