/*!
* @file
* @brief    sigplus Image Gallery Plus image slider stylesheet
* @author   Levente Hunyadi
* @version  1.2.8
* @remarks  Copyright (C) 2009-2010 Levente Hunyadi
* @remarks  Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
* @see      http://hunyadi.info.hu/projects/sigplus
*/

/*
* User-definable image gallery stylesheet rules.
* Rules in this section should be changed as needed.
*/

/* image slider */
div.imageSlider {
margin:16px !important;
border:0 none transparent !important;
padding:0 !important;
}

td > div.imageSlider {
margin:0px !important;
}

/* regular viewport */
div.imageSlider > div.imageSliderViewport {
margin:4px !important;
padding:0 !important;
overflow:hidden !important;
}

/* images */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li img {
margin:0 !important;
border:0 none transparent !important;
padding:2px !important;
}

/* images (an example with margin, border and padding) */
div.example div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li img {
margin:4px !important;
border:thin solid gray !important;
padding:2px !important;
}

/* images on mouse hover (an example) */
div.example div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li a:hover img {
margin:4px !important;
border:thin solid red !important;
padding:2px !important;
}

/* image captions */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer {
display:inline-block !important;
position:relative !important;
margin:0 !important;
padding:0 !important;
z-index:1;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer > .imageCaption {
display:inline-block !important;
position:absolute !important;
background-color:black !important;  /* fall-back setting, overridden for IE */
background-color:rgba(0,0,0,0.6) !important;  /* overridden for IE */
color:white !important;
height:30% !important;
left:0 !important;
bottom:0 !important;
text-align:center !important;
overflow:hidden !important;
visibility:hidden !important;
z-index:1;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer:hover > .imageCaption {
visibility:visible !important;
}

/* buttons inside caption */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer > .imageCaption > div.buttons {
display:block !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer > .imageCaption > div.buttons > a {
background:transparent none no-repeat center center !important;
display:inline-block !important;
height:16px !important;
width:16px !important;
margin:2px !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer > .imageCaption > div.buttons > a.metadata {
background-image:url(camera.png) !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li .imageCaptionContainer > .imageCaption > div.buttons > a.download {
background-image:url(disk.png) !important;
}

/*
* Generic image gallery stylesheet rules.
* Normally, no changes should be made to rules in this section.
*/

div.imageGalleryHidden {
display:none;
}

/* image gallery alignment */
div.imageGalleryLeft {
text-align:left !important;
}

div.imageGalleryCenter {
float:none !important;
clear:both !important;
margin:0 auto !important;
text-align:center !important;
}

div.imageGalleryRight {
text-align:right !important;
}

div.imageGalleryLeftFloat {
float:left !important;
}

div.imageGalleryRightFloat {
float:right !important;
}

div.imageGalleryLeftClear {
margin:0 auto 0 0 !important;
}

div.imageGalleryRightClear {
margin: 0 0 0 auto !important;
}

/* viewport to scrollable area */
div.imageSlider > div.imageSliderScrollableViewport {
position:relative !important;
}

/* area inside viewport */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea {
border-spacing:0 !important;
margin:0 !important;
padding:0 !important;
}

/* scrollable area inside viewport */
div.imageSlider > div.imageSliderViewport > div.imageSliderScrollableViewportArea {
position:absolute !important;
}

/* slider ribbon */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul {
border-spacing:0 !important;
list-style-type:none !important;
list-style-image:none !important;
margin:0 !important;
padding:0 !important;
}

/* items on slider ribbon */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li {
border-spacing:0 !important;
background:transparent none no-repeat scroll 0 0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
text-align:center !important;
vertical-align:middle !important;  /* centered vertical alignment for images */
}

/* anchor to full-size image */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li a:focus {
outline:none !important;
}

/* centered alignment for images */
div.imageSlider > div.imageSliderViewport > div.imageSliderViewportArea > ul > li div.imageSliderAlignment {
margin:0 auto !important;
padding:0 !important;
vertical-align:inherit !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaFlow > ul > li {
display:inline-block !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaRow {
display:table !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaRow > ul {
display:table-row !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaRow > ul > li {
display:table-cell !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaColumn > ul {
display:table !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaColumn > ul > li {
display:table-row !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaColumn > ul > li > div.imageSliderAlignment {
display:table-cell !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaMatrix > ul {
text-align:left !important;
}

div.imageSlider > div.imageSliderViewport > div.imageSliderViewportAreaMatrix > ul > li {
display:inline-block !important;
}