/*
Stylesheet for Harnesslink Slide Gallery
Author:     YS Edward Hsiao
Date:       2007-11-08
Web:        http://www.harnesslink.com
            copyright @ Harnesslink Limited
*/
.detailsBorder {
    left:0px;
    top:0px;
    z-index:9999;
    filter:alpha(opacity=75);
    -moz-opacity:75;
    opacity:.75;
    background-color:#000;
    position:absolute;
    display:none;
    overflow:hidden;
}
.details { 
    color:#000;
    text-align:center;
    display:none;
    position: absolute;
    width: 60%;
    height: 60%;
    padding: 15px;
    z-index:10000;
    background-color: #fff;
    overflow: hidden;
}

.details .header {
    color:#000;
    font-size:12px;width:100%;
    text-align:center;
    font-size:14px;
    line-height:1.5;
    margin:5px;
    height:30px;
    width:100%; 
}

.details .media {
    display:block;
}

.details .extra {
    color:#000;
    padding:5px;
    margin-top:10px;
    border:1px solid #000;
    text-align:center;
    width: 100%;
    height:auto;
    overflow: auto;    
}

.details .media .next {
    text-transform:uppercase;
    color:#000;
    width:40px;
    height:20px;
    font-size:14px;
    background-color:#e9e9e9;
    border:1px solid #333;
    position:absolute;
    right:2%;
    cursor:pointer; 
}

.details .loader {
    display:none;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    color:#fff;
    background-color:#2252a5;
    border:1px solid #fff;
    width:110px;
    height:15px;
    position:absolute;
}

.details .image {
    margin:20px 35px 20px 35px;
}

.details .media .previous {
    text-transform:uppercase;
    color:#000;
    width:40px;
    height:20px;
    font-size:14px;
    background-color:#e9e9e9;
    border:1px solid #333;
    position:absolute;
    left:2%;
    cursor:pointer;
}

/* gallrey */
.gallery {
    margin: 10px auto;
    width:100%;
    height:100%;
}

.gallery #selector{
    text-align:center;
    padding-top:5px;
}

.gallery #selector a{
    font-size:14px;
    padding:0px 10px;
    width:15px;
    background:#ddd;
    color:#000;
}
.gallery #selector a:hover {
    background-color:#fff;
}

.gallery #selector .selected {
    font-weight:bold;
}

.gallery #ss {
    white-space:nowrap;
    float:right;
}

.gallery a {
    text-decoration:none;
}

.gallery .container {
    position:relative;
    float:left;
    overflow:hidden;
    margin:5px 13px 2px 13px;
}

.gallery ul li {
    list-style-type:none;
}

.gallery .description, .gallery .mi_title, .gallery  .mi_caption, .gallery .mi_description, .gallery .ecommerce, .gallery .hi_res,  .gallery .information  {
    display:none;
}
.gallery .popup {
    display:none;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    color:#fff;
    background-color:#2252a5;
    border:1px solid #fff;
    width:110px;
    height:14px;
    position:absolute;
}

.gallery .container ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.item_title * {
    vertical-align:middle;
}

.gallery .container .item_title{
    font-size:12px;
    width:100%;
    height:24px;
    font-weight:bold;
    text-align:center;
    display:block;
    margin : 0 auto;
}

.gallery li.thumbnail {
    margin:0px;
    width:180px;
    height:180px;
}

/* slides */

.slideshow {
    margin:10px auto;
    position:relative;
    width:500px;
    height:500px;
}

.slideshow .sstitle {
    position:absolute;
    text-align:center;
    color:#000;
    top:20px;
    left:35px;
    background-color:#e9e9e9;
    border:1px solid #ddd;
    text-align:center;
    width:85%;
    height:65px;
    overflow:auto;
}

.slideshow .ssdescription {
    position:absolute;
    color:#000;
    bottom:5px;
    left:30px;
    text-align:center;
    width:90%;
    height:90px;
    overflow:auto;
}

.slideshow .destext {
    background-color:#e9e9e9;
    height:auto;
    border:1px solid #ddd;
}

.slideshow .header {
    display:block;
    position:static;
    text-align:center;
    width:100%;
}

.slideshow .header .ss_selector {
    position:relative;
    float:left;

}
.slideshow .header .auto {
    margin-left:20px;
    float:left;
}

.slideshow .header .ga {
    width:70px;
    float:right;
    position:relative;
    background-color:#ddd;
}
.slideshow .header .ga a{
    text-decoration:none;
    width:15px;
    background:#ddd;
    color:#000;
}

.slideshow .header .ga a:hover {
    background:#fff;
    color:#000;
}

.slideshow .window {
    position:absolute;
}

.slideshow .next{
    position:absolute;
    line-height:1.5;
    right:0;
    height:auto;
    text-align:center;
    background-color:#ddd;
}
.slideshow .next a{
    text-decoration:none;
    padding:10px 10px;
    width:15px;
    background:#ddd;
    color:#666;
}

.slideshow .next a:hover {
    background:#fff;
    color:#666666;
}

.slideshow .previous {
    line-height:1.5;
    position:absolute;
    left:0;
    height:auto;
    text-align:center;
    background-color:#ddd;
}
.slideshow .previous a{
    text-decoration:none;
    padding:10px 10px;
    width:15px;
    background:#ddd;
    color:#666666;
}

.slideshow .previous a:hover {
    background:#fff;
    color:#666;
}

.slideshow .loader {
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    color:#fff;
    background-color:#2252a5;
    border:1px solid #fff;
    width:110px;
    height:auto;
    position:absolute;
    display:none;
}

/* slides scroll bar */
.scrollDiv {
    width:500px;
    margin:0 auto;
}

.scrollContainer {
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 65px;
    width:500px;
    border:1px solid #ccc;
    float:left;
}

.scroll {
    height: 65px;
    text-align:left;
}