/**
* The dimensions of the gallery components are gathered here for easy modification.
* Other styles for these elements can be found below.
* Edit this part after having a look at the help file.
*/
.vion-gallery {} /* The dimensions of the main gallery */
.vion-gallery div.slide {}
.vion-gallery div.slide .image-holder {height: 389px; } /* The dimension of your images. */
.vion-gallery div.thumbnails {width:100%; } /* The dimensions of the thumbnail scroller. */
.vion-gallery div.thumbnails ul li img {width:156px; } /* The dimension of your thumbnails. */

/**
* Reset gallery components.
*/
.vion-gallery img,
.vion-gallery h2,
.vion-gallery p,
.vion-gallery ul,
.vion-gallery ul li {
    margin: 0;
    padding: 0;
}

/**
* Styles for the main gallery frame. Edit this to change the background color, 
* paddings etc.
*/
.vion-gallery {
    position: relative;
    overflow: hidden;
}

/**
* Styles for the slides DIV.
*/
.vion-gallery div.slides {
    width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
    float: left;
}

/**
* Styles for the gallery mask.
*/
.vion-gallery div.gallery-mask {
    position: relative;
    width: 100%;
    overflow: hidden; height:389px;
}

/**
* Edit margin-left to adjust the spacing between slides.
*/
.vion-gallery div.slide {
    position: relative;
    float: left;
    margin-left: 10px;
}

/**
* Reset the margin-left for the first slide.
*/
.vion-gallery div.slide:first-child {
    margin-left: 0;
}

    /**
    * Styles for the image-holder. The image background color can be set here.
    */
    .vion-gallery div.slide .image-holder {
        background: #303030;
        opacity: 1; /* Do not edit. */
        filter: alpha(opacity=100); /* Do not edit */
        overflow: hidden;
        cursor: pointer;
    }
    
    /**
    * Set the cursor to default for the selected slide.
    */
    .vion-gallery div.slide.selected .image-holder {
        cursor: default;
    }
    
    /**
    * Styles for the img element.
    */
    .vion-gallery div.slide img {
        opacity: 0; /* Do not edit. */
        filter: alpha(opacity=0); /* Do not edit. */
        float: left;
		height:100%;
    }
    
    /**
    * Styles for the info section.
    */
    .vion-gallery div.slide .info {
        clear: both;
        opacity: 0;
        filter: alpha(opacity=0);
        padding: 20px 20px 20px 0px;
		display:none;
    }

        .vion-gallery div.slide .info h2 {
            font: bold 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
            color: #fff;
            margin-bottom: 5px;
        }

        .vion-gallery div.slide .info p {
            font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
            color: #b3b3b3;
            line-height: 16px;
        }
        
/**
* Styles for the thumbnails section. The dimensions of the thumbnail scroller
* can be found at the top of the styles file. Edit the dimensions if you need
* a different thumbnail size.
*/
.vion-gallery div.thumbnails {
    position: relative;
    clear: both;
    overflow: hidden;
    margin: auto;
    margin-top: 3px;
}

    .vion-gallery div.thumbnails ul {
        position: relative;
        float: left;
        padding: 3px; /* This should be equal to the indicator's border size. See below. */
        list-style: none;
        width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
    }

        .vion-gallery div.thumbnails ul li {
            margin-left: 3px; /* Spacing between the thumbnails. */
            float: left;
            cursor: pointer;
            opacity: 0; /* Do not edit. */
            filter: alpha(opacity=0); /* Do not edit. */
        }

        .vion-gallery div.thumbnails ul li.selected {
            cursor: default;
        }

        .vion-gallery div.thumbnails ul li:first-child {
            margin-left: 0;
        }
        
    /**
    * Styles for the indicator. You can change the border size and color here.
    * See the instructions below.
    */
    .vion-gallery div.thumbnails .indicator {
        position: absolute;
        border: 3px solid #fff; /* Update the padding for the ul above after modifying the size. */
        margin: -3px 0 0 -3px; /* These margins should be equal to the border size. */
        z-index: 1;
    }