/**
Stylesheet: black.css
CSS for Slideshow.
Class list: .slideshow, .ss-mini, .ss-small, ss-buttons, .ss-featured, .ss-category
License:
MIT-style license.
Copyright:
Copyright (c) 2013 [Daiv Mowbray](http://www.daivmowbray.com/).
HTML:
Notes:
These next four rules are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
Best to leave the first set of rules as they are, and edit the second set bellow.
*/
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
.slideshow-thumbnails ul {
left: 0; position: absolute; top: 0;
}
/**
HTML:
Notes:
The images div is where the slides are shown. width and height over ride within options
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/
.slideshow-images {
}
.slideshow-images-visible {
opacity: 1;
top: 0;
}
.slideshow-images-prev {
opacity: 0;
top: -100px;
right: -500px;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
visibility: hidden;
}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the captions animation.
*/
.slideshow-captions {
background: #2b2b2b;
top: 20px;
color: #BDBDBD;
text-align: left;
right: 20px;
overflow: hidden;
position: absolute;
padding: 10px;
border: 1px solid #306E59;
z-index: 10000;
font-family: Arial, sans-serif;
line-height: 1.3em;
box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 0px -2px 8px 0px rgba(0,0,0,0.6);
}
.slideshow-captions-hidden {
height: 0;
width: 0;
opacity: 0;
}
.slideshow-captions-visible {
height: 250px;
width: 180px;
opacity: .8;
}
.slideshow-captions h3 {
margin: 6px 6px 0px !important;
padding:0;
line-height: 1.2em;
color:#999 !important;
}
.slideshow-captions p {
margin:4px 6px !important;
}
.slideshow-captions a {
bottom: 10px;
line-height: 1.2em;
margin: 0px 0 0 20px;
padding: 4px 10px;
position: absolute;
right: 10px;
text-decoration: none;
border: 1px solid #CDCDCD;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
background: rgb(241,244,198);
background: -moz-linear-gradient(top, rgba(241,244,198,1) 30%, rgba(219,168,50,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(241,244,198,1)), color-stop(70%,rgba(219,168,50,1)));
background: -webkit-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -o-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -ms-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: linear-gradient(to bottom, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f4c6', endColorstr='#dba832',GradientType=0 );
box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-webkit-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-moz-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
}
/**/
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the controller animation.
*/
html > body .slideshow-controller li {
list-style: none;
}
html > body .entry-content .slideshow-controller li {
list-style: none;
margin: 0;
}
.slideshow-controller {
background: #999;
border: 2px solid #333;
height: 30px;
left: 50%;
margin: -21px 0 0 -119px;
overflow: hidden;
position: absolute;
bottom: 50%;
width: 238px;
z-index: 10100;
border-radius: 20px ;
-moz-border-radius: 20px ;
-webkit-border-radius: 20px ;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
bottom: 100px;
z-index: -10;
}
.slideshow-controller-visible {
opacity: .8;
bottom: 10px;
z-index: 10000;
}
/* control ss-buttons*/
.slideshow-controller a {
background-image: url(images/controller_buttons.png);
cursor: pointer;
display: block;
height: 18px;
overflow: hidden;
position: absolute;
top: 6px;
background-repeat: no-repeat;
}
.slideshow-controller a.active {
}
.slideshow-controller li.first a{
left: 36px;
width: 20px;
background-position: 4px 0; }
.slideshow-controller li.first a.active{
background-position: 4px -18px;}
.slideshow-controller li.last a {
left: 182px;
width: 20px;
background-position: -98px 0; }
.slideshow-controller li.last a.active{
background-position: -98px -18px;}
.slideshow-controller li.next a {
left: 145px;
width: 24px;
background-position: -74px 0;}
.slideshow-controller li.next a.active{
background-position: -74px -18px;}
.slideshow-controller li.pause a {
left: 110px;
width: 20px;
background-position: -37px 0; }
.slideshow-controller li.pause a.active{
background-position: -37px -18px;}
.slideshow-controller li.play a {
background-position: -54px 0; }
.slideshow-controller li.play a.active {
background-position: -54px -18px; }
.slideshow-controller li.prev a {
left: 72px;
width: 24px;
background-position: -16px 0px; }
.slideshow-controller li.prev a.active{
background-position: -16px -18px;}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the loader animation.
*/
.slideshow-loader {
background: url(images/loader.png);
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px 0 0 -15px;
z-index: -10;
}
.slideshow-loader-hidden {
opacity: 0;
z-index: -10;
}
.slideshow-loader-visible {
opacity: .9;
z-index: 10000;
}
/**
HTML:
Notes:
Customize the active / inactive classes to affect the thumbnails animation.
Use the !important keyword to override FX without affecting performance.
*/
.slideshow-thumbnails {
position: absolute;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
html > body .slideshow-thumbnails ul {
text-indent: 0px;
margin: 0;
padding: 0;
width: auto;
}
html > body .slideshow-thumbnails li {
float: left;
list-style: none;
margin: 0px;
padding: 0;
position: relative;
}
html > body .slideshow li:before{
content: "";
}
.slideshow-thumbnails a:link, .slideshow-thumbnails-hidden {
display: block;
padding: 5px;
margin: 5px;
position: relative;
overflow:hidden;
}
.slideshow-thumbnails a:visited:hover, .slideshow-thumbnails a:link:hover {
background-color: #306E59 !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
}
.slideshow-thumbnails-active {
background-color: #306E59;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #306E59;
opacity: .5;
}
/* these are the dynamically inserted thumb strip covers, set to each end*/
.slideshow-thumbnails .overlay {
top: 0px;
height: 100%;
position: absolute;
width: 30px;
z-index: 1000;
}
.slideshow-thumbnails .overlay.a {
left: 0;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(68,68,68,0) 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(99%,rgba(68,68,68,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(68,68,68,0) 99%);
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(68,68,68,0) 99%);
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(68,68,68,0) 99%);
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(68,68,68,0) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00444444',GradientType=1 );
}
.slideshow-thumbnails .overlay.b {
right: 0;
background: -moz-linear-gradient(left, rgba(68,68,68,0) 1%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(68,68,68,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(left, rgba(68,68,68,0) 1%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(left, rgba(68,68,68,0) 1%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(left, rgba(68,68,68,0) 1%,rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(68,68,68,0) 1%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00444444', endColorstr='#000000',GradientType=1 );
}
/**
Notes:
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/
.slideshow {
height: auto;
width: auto;
margin: 0 auto 190px auto;
}
.slideshow-thumbnails {
top: 105%;
height: 100px;
left: 0;
width: 100%;
background-image: url(images/thumb_bg.png);
background-repeat: repeat-x;
background-position: left bottom;
}
.slideshow a img {
border: 0;
padding: 0px;
margin:0px;
}
/**
Short code:
If you were to add a show_class = "ss-mini" to your short code,
you would then add a css class of ss-mini as bellow.
This will add to or over ride the class slideshow above.
*/
/* set for a slideshow of 120 x 120 */
.ss-mini{
border: 2px solid #999;
padding: 5px;
margin: 20px 240px 20px 20px;;
float: left;
}
.slideshow-ss-mini-captions {
width: 320px;
padding: 4px 12px;
color: #f5f5f5;
font-size: 12px;
line-height: 1.3em;
position: absolute;
left: 100%;
bottom: 0;
top: 0;
overflow: hidden;
z-index: 1000;
border-top: 2px solid #999;
background: #cdcdcd;
background: -moz-linear-gradient(top, rgba(205,205,205,1) 0%, rgba(205,205,205,0.99) 1%, rgba(205,205,205,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,205,205,1)), color-stop(1%,rgba(205,205,205,0.99)), color-stop(100%,rgba(205,205,205,0)));
background: -webkit-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: -o-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: -ms-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: linear-gradient(to bottom, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#00cdcdcd',GradientType=0 );
}
.slideshow-ss-mini-captions-hidden {
margin-left: 200px;
opacity: 0;
}
.slideshow-ss-mini-captions-visible {
margin-left: 0px;
opacity: 1;
}
.slideshow-ss-mini-captions h3 {
line-height: 1em;
margin: 10px 0 0px !important;
padding: 0;
}
.slideshow-ss-mini-captions p {
margin:0px !important;
line-height: 1.2em;
padding: 0px;
}
.slideshow-ss-mini-captions a {
margin: 4px 0 0 0;
padding: 4px 10px;
float:right;
text-decoration: none;
border: 1px solid #CDCDCD;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
background: rgb(241,244,198);
background: -moz-linear-gradient(top, rgba(241,244,198,1) 30%, rgba(219,168,50,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(241,244,198,1)), color-stop(70%,rgba(219,168,50,1)));
background: -webkit-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -o-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -ms-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: linear-gradient(to bottom, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f4c6', endColorstr='#dba832',GradientType=0 );
box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-webkit-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-moz-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
}
/*
* ss-small
*/
.ss-small{
margin:20px auto 80px;
border: 2px solid #999;
padding: 5px;
}
.slideshow-ss-small-captions {
padding: 4px 8px 2px;
color: #f5f5f5;
font-size: 12px;
position: absolute;
left: 0;
right: 0;
top: 100%;
bottom: auto;
overflow: hidden;
z-index: 1000;
border-top: 1px solid #333;
background: #cdcdcd;
background: -moz-linear-gradient(top, rgba(205,205,205,1) 0%, rgba(205,205,205,0.99) 1%, rgba(205,205,205,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,205,205,1)), color-stop(1%,rgba(205,205,205,0.99)), color-stop(100%,rgba(205,205,205,0)));
background: -webkit-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: -o-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: -ms-linear-gradient(top, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
background: linear-gradient(to bottom, rgba(205,205,205,1) 0%,rgba(205,205,205,0.99) 1%,rgba(205,205,205,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#00cdcdcd',GradientType=0 );
}
.slideshow-ss-small-captions-hidden {
height: 0px;
opacity: 0;
}
.slideshow-ss-small-captions-visible {
height: 75px;
opacity: 1;
}
.slideshow-ss-small-captions h3 {
margin: 0px!important;
padding:0;
display:inline;
line-height: 1.6em;
}
.slideshow-ss-small-captions p {
margin:4px 6px !important;
display:inline;
padding: 0px;
color: #f5f5f5;
line-height: 1.2em;
}
.slideshow-ss-small-captions a {
bottom: 5px;
line-height: 1.2em;
margin: 0px 10px;
padding: 4px 10px;
position: absolute;
right: 0px;
text-decoration: none;
border: 1px solid #CDCDCD;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
background: rgb(241,244,198);
background: -moz-linear-gradient(top, rgba(241,244,198,1) 30%, rgba(219,168,50,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(241,244,198,1)), color-stop(70%,rgba(219,168,50,1)));
background: -webkit-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -o-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -ms-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: linear-gradient(to bottom, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f4c6', endColorstr='#dba832',GradientType=0 );
box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-webkit-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-moz-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
}
/*
* ss-buttons
*/
.ss-buttons {
padding: 0px;
margin: 0 auto 80px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.ss-buttons .slideshow-images{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.ss-buttons .slideshow-thumbnails{
border: 1px solid #295F41;
top: 105%;
height: 27px;
margin: 0 0 0 30%;
width: 40%;
top: auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.ss-buttons .slideshow-thumbnails li {
margin: 0px;
}
.ss-buttons .slideshow-thumbnails li img {
width: 30px;
height: 15px;
background: #86D0FF;
visibility: visible;
}
.ss-buttons .slideshow-thumbnails .overlay {
top: 0px;
height: 100%;
position: absolute;
width: 20px;
z-index: 1000;
}
.ss-buttons .slideshow-thumbnails-hidden {
border-radius: 5px 5px 5px 5px;
margin: 3px 5px!important;
padding: 3px!important;
}
.slideshow-ss-buttons-captions {
bottom: 0;
top: 0;
color: #666;
right: 0;
left:auto;
overflow: hidden;
position: absolute;
padding: 0 5px 0 30px;
text-indent: 0px;
height: 100%;
width: 0px;
z-index: 2000;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: -moz-linear-gradient(left, rgba(107,107,107,0) 0%, rgba(107,107,107,0.05) 1%, rgba(107,107,107,1) 20%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(107,107,107,0)), color-stop(1%,rgba(107,107,107,0.05)), color-stop(20%,rgba(107,107,107,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(left, rgba(107,107,107,0) 0%,rgba(107,107,107,0.05) 1%,rgba(107,107,107,1) 20%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(left, rgba(107,107,107,0) 0%,rgba(107,107,107,0.05) 1%,rgba(107,107,107,1) 20%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(left, rgba(107,107,107,0) 0%,rgba(107,107,107,0.05) 1%,rgba(107,107,107,1) 20%,rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(107,107,107,0) 0%,rgba(107,107,107,0.05) 1%,rgba(107,107,107,1) 20%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006b6b6b', endColorstr='#000000',GradientType=1 );
}
.slideshow-ss-buttons-captions h3{
color: #FFFFFF;
left: 0px;
line-height: 1.2em;
margin: 0px 0px 15px 10px;
padding: 0px;
position: relative;
text-transform: capitalize;
top: 10px;
}
.slideshow-ss-buttons-captions p {
color: #F5F5F5;
line-height: 1.3em;
margin: 0px 10px 0 15px;
position: relative;
}
.slideshow-ss-buttons-captions a{
border: 1px solid #CDCDCD;
bottom: 10px;
margin: 10px 0px 0 0 ;
padding: 2px 10px;
position: absolute;
right: 20px;
text-decoration: none;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
background: rgb(241,244,198);
background: -moz-linear-gradient(top, rgba(241,244,198,1) 30%, rgba(219,168,50,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(241,244,198,1)), color-stop(70%,rgba(219,168,50,1)));
background: -webkit-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -o-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: -ms-linear-gradient(top, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
background: linear-gradient(to bottom, rgba(241,244,198,1) 30%,rgba(219,168,50,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f4c6', endColorstr='#dba832',GradientType=0 );
box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-webkit-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
-moz-box-shadow: 2px 2px 6px 5px rgba(221,221,221,0.6);
}
.slideshow-ss-buttons-captions-hidden {
opacity: 0;
width: 0px;
}
.slideshow-ss-buttons-captions-visible{
opacity: .8;
width: 220px;
}
/*
* ss-featured
*/
.ss-featured {
background: #000000;
margin: 20px 0 20px 120px;
border: 1px solid #333;
padding:10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.ss-featured .slideshow-images {
border: 1px solid #333;
}
.slideshow-ss-featured-captions {
background: #000;
bottom: 0;
top: 0;
right: auto;
left: 0;
overflow: hidden;
position: absolute;
color: #9F7A40;
font: normal 2.1em;
width: 0px;
z-index: 2000;
border: 20px solid #000;
margin: 0px;
}
.slideshow-ss-featured-captions-hidden {
opacity: 0;
width: 0px;
}
.slideshow-ss-featured-captions-visible {
opacity: .7;
width: 210px;
}
.slideshow-ss-featured-captions h3 {
color: #D6C281;
margin:5px 0;
padding:0;
line-height: 1.3em;
}
.slideshow-ss-featured-captions p {
line-height: 1.3em;
font-size: 1.2em;
}
.slideshow-ss-featured-captions a {
position: absolute;
right: 0px;
bottom: 0px;
margin: 0 0 0 10px;
padding: 3px 10px;
background: #666;
border: 1px solid #10161e;
color: #e9f5ff;
font-size: 1.1em;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.slideshow-ss-featured-captions a:hover {
color:#000;
background: #D6C281 ;
}
.ss-featured .slideshow-thumbnails {
left: -110px;
height: 100%;
width: 100px;
top: -2px;
bottom: auto;
background: #000;
border-right: 5px solid #272727;
border-left: 2px solid #272727;
border-top: 2px solid #272727;
border-bottom: 2px solid #272727;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.ss-featured .slideshow-thumbnails-hidden{
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background-color: #9f7a40 !important;
}
.ss-featured .slideshow-thumbnails-hidden img{
}
.ss-featured .slideshow-thumbnails .overlay, .ss-category .slideshow-thumbnails .overlay {
height: 30px!important;
width: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.01) 99%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(99%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
.ss-featured .slideshow-thumbnails .overlay.b, .ss-category .slideshow-thumbnails .overlay.b {
bottom: 0;
top: auto;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}
/* ss-category class modifications */
.ss-category {
background: #000000;
margin: 10px 220px 10px 10px;
border: 7px solid #333;
padding:10px;
}
.ss-category .slideshow-images{
border: 1px solid #666;
}
.ss-category .slideshow-thumbnails {
left: 100%;
height: 100%;
width: 200px;
top:-7px;
border: 7px solid #333333;
background: #000;
}
.ss-category .slideshow-thumbnails ul {
width: 200px;
height: 1000px;
}
.slideshow-ss-category-captions {
background: #000;
bottom: 0;
color: #cdcdcd;
top: 0;
right: 0;
left:auto;
overflow: hidden;
position: absolute;
text-indent: 0px;
height: 100%;
width: 210px;
z-index: 2000;
}
.slideshow-ss-category-captions h3{
color: #999999;
margin: 10px 0 0 10px;
text-transform: capitalize;
}
.slideshow-ss-category-captions p{
line-height: 1.2em;
padding: 5px 10px;
margin: 0;
}
.slideshow-ss-category-captions a{
float: right;
padding: 5px 20px;
}
.slideshow-ss-category-captions-hidden {
opacity: 0;
width: 0px;
}
.slideshow-ss-category-captions-visible{
opacity: .7;
width: 210px;
}
/*
* ss-head
*/
.ss-head {
color:#666666;
margin: 140px 10px 90px 10px;
border: 2px solid #333;
padding:10px;
}
.ss-head .slideshow-images{
border: 1px solid #333;
}
.ss-head .slideshow-thumbnails {
border: 2px solid #333333;
height: 100px;
left: -2px;
top: -110px;
width: 100%;
}
.ss-head .slideshow-thumbnails .overlay {
height: 100%;
}
.slideshow-ss-head-captions {
bottom: auto;
color: #f5f5f5;
right: 0;
left:0;
top: 101%;
overflow: hidden;
position: absolute;
text-indent: 0px;
width: 100%;
height: 100px;
z-index: 2000;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.01) 99%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(99%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.01) 99%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
.slideshow-ss-head-captions h3{
color:#f5f5f5;
margin: 15px 10px 5px 20px;
padding: 0px;
text-transform: capitalize;
line-height: 1.2em;
}
.slideshow-ss-head-captions p {
margin: 0px 20px;
line-height: 1.2em;
}
.slideshow-ss-head-captions a{
padding: 0px 20px;
float : right;
}
.slideshow-ss-head-captions-hidden {
opacity: 0;
height: 0px;
}
.slideshow-ss-head-captions-visible{
opacity: .8;
height: 100px;
}