/* Slideshow */

div#slideshowContainer {
position: relative;
background-color: #ccc;
padding: 5px;
width: 500px;
margin: 25px 0 25px 0;
}

div#slideshowContainer div#caption {
font-size: 11px;
height: 30px;
margin: 5px 5px 0 5px;
width: 490px;
z-index: 3000;
}

div#slideshowContainer div.ctrl-min {
height: 16px;
background-color: #000;
border-top: 1px solid #ccc;
}

div#slideshowContainer div.ctrl-all {
height: 42px;
background-color: #000;
border-top: 1px solid #ccc;
padding: 0 0 0 30px;
}

div#slideshowContainer div.thumbnails {
width: 400px;
margin: 0 auto;
}

div#slideshowContainer div#controls {
position: relative;
text-align: center;
color: #fff;
font-size: 11px;
padding: 4px 0 0 0;
}

div#slideshowContainer div.caption-top {
position: absolute;
top: 0;
left: 0;
color: #fff;
background-color: #333;
padding: 5px;
opacity: .7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

div#slideshowContainer div.caption-bottom {
position: absolute;
bottom: 5px;
left: 0;
color: #fff;
background-color: #333;
padding: 5px;
opacity: .7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

div#slideshowContainer div.caption-bottom-ctrl {
position: absolute;
top: 310px;
left: 0;
color: #fff;
background-color: #333;
padding: 5px;
opacity: .7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

ul.slideshowBox
{
position: relative;
margin: 0;
padding: 0;
background-color: #000;
}

ul.slideshowBox li
{
position: absolute;
z-index: 10;
top: 0;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
text-align:center;
}

.slideshowBox li img
{
height: 100%;
margin: 0;
padding: 0;
}

a.playpause{
position: absolute;
background-color: #999;
height: 20px;
width: 20px;
}

div.ctrl-min a.playpause {
top: 0;
right: 0;
}

div.ctrl-all a.playpause {
top: 13px;
right: 0;
}


ul.slideshowBox li#next{
position: absolute;
left: 60%;
background: transparent url('../../../images/slideshow-player/transparent.gif') no-repeat;
width: 40%;
height: 90%;
}

ul.slideshowBox li#next a {
display: block;
height: 100%;
width: 100%;
}

ul.slideshowBox li#next a:hover {
background: transparent url('../../../images/slideshow-player/right-arrow.png') no-repeat center right;
}

ul.slideshowBox li#previous{
position: absolute;
background: transparent url('../../../images/slideshow-player/transparent.gif') no-repeat;
width: 40%;
height: 90%;
}

ul.slideshowBox li#previous a {
display: block;
height: 100%;
width: 100%;
z-index: 30;
}

ul.slideshowBox li#previous a:hover {
background: transparent url('../../../images/slideshow-player/left-arrow.png') no-repeat center left;
}

a.playpause {
display: block;
width: 20px;
height: 20px;
background: transparent url('../../../images/slideshow-player/play-ctrl.png') no-repeat top left;
}

a.pause {
background-position: 0 0;
}

a.pause:hover {
background-position: -20px 0;
}

a.play {
background-position: 0 -20px;
}

a.play:hover {
background-position: -20px -20px;
}

a.next-arrow {
position: absolute;
display: block;
width: 25px;
height: 14px;
background: transparent url('../../../images/slideshow-player/arrows.png') no-repeat top left;
background-position: 0 0;
}

a.next-arrow:hover {
background-position: -25px 0;
}

div.ctrl-min a.next-arrow {
top: 3px;
left: 35px;
}

div.ctrl-all a.next-arrow {
top: 16px;
right: 25px;
}


a.prev-arrow {
position: absolute;
display: block;
width: 25px;
height: 14px;
background: transparent url('../../../images/slideshow-player/arrows.png') no-repeat top left;
background-position: 0 -14px;
}

a.prev-arrow:hover {
background-position: -25px -14px;
}

div.ctrl-min a.prev-arrow {
top: 3px;
left: 0;
}

div.ctrl-all a.prev-arrow {
top: 16px;
left: 0;
}

.slideshowBox li img
{
height: 100%;
margin: 0;
padding: 0;
}

div#slideshowContainer div#counter {
width: 100px;
margin: 0 auto;
}

div.scrollable div.items img {
border: 1px solid #ccc;
margin: 0 3px 0 3px;
}

.scrollable {
position:relative;
overflow:hidden;
height:37px;
}

.scrollable .items {
width:20000em;
position:absolute;
clear:both;
}

.items div {
float:left;
}

#lrg-links {
font-size: 11px;
padding: 3px 5px 3px 5px;
}

/* single scrollable item */
.scrollable img {
float:left;
width:50px;
height:35px;
opacity: .7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
cursor:pointer;
}

/* active item */
div.scrollable div.items img.active, div.scrollable div.items img.mouseover {
border:1px solid #fff;
position:relative;
cursor:default;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left; 
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url('../../../images/slideshow-player/group-ctrl.png') no-repeat top left;
    display:block;
    width:15px;
    height:15px;
    float:left;
    cursor:pointer;
    font-size:1px;
    margin: 12px 0 0 0;
}

/* right */
a.right                 { background-position: 0 -15px; clear:right; margin-right: 0px;}
a.right:hover       { background-position:-15px -15px; }
a.right:active  { background-position:-30px -15px; } 


/* left */
a.left              { margin-left: 0px; } 
a.left:hover        { background-position:-15px 0; }
a.left:active   { background-position:-30px 0; }

/* up and down */
a.up, a.down        { 
    background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover          { background-position:-15px 0; }
a.up:active         { background-position:-30px 0; }

/* down */
a.down              { background-position: 0 -15px; }
a.down:hover        { background-position:-15px -15px; }
a.down:active   { background-position:-30px -15px; } 


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;       
}