﻿
#imageSliderWrapper, #imageSliderWrapper div {
    box-sizing:content-box;
} 


#imageSliderWrapper {/*margin-left:60px;padding:40px;*/width:500px;height:600px;/*background:url(outerFrame.gif);*/position:relative;
                     margin:0 auto;/*aligned to center */
}

#imageSliderLargeImage 
{
    width:500px;height:510px;/*border:1px solid #E9E9E9;*//*margin-bottom:16px;*/position:relative;overflow:hidden;
   /*black background usually gives a better visual effect during image transition.*/
}

#imageSliderLargeImage img {position:absolute; top:0; left:0;}

#imageSliderLargeImage .description  
{
    position:absolute; left:0; 
    z-index:4;
    width:440px;
    _width:500px;/*IE 6 hack*/
    padding:10px 30px;
    color:White;
    background-color: rgba(0, 0, 0, 0.3); 
    /*background-color: transparent\9; IE6, IE7, IE8 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000); /*IE 5.5 - 7*/  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000)"; /*IE 8*/
    /*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; IE 8*/  
	display:none;
}

#imageSlider 
{
    /*width:502px;*/width:420px;height:auto;
    padding:0;/*Note: never change this value other than 0 */
    background-color:#EEE; 
    overflow:hidden;
    position:relative;
    text-align:center;
}

/*--------div.item is each slides. It is the child div nodes of #imageSlider, and the wrapper of each slide image--------*/
#imageSlider .item 
{
    border:1px solid #DDD; 
    background-color:#FFF;
    width:97px;
	height:76px;
	overflow:hidden;
    padding:0;
    margin:2.6px;
    color:Black;
    line-height:30px;
}

#imageSlider img 
{
    /*width:100px; height:100px;*/width:100%;height:auto;
}

#imageSlider .description 
{
    display:none;
}


/*-----------navigation buttons----------------*/
.navPrev, .navPlay, .navPause, .navNext 
{
    width:18px; height:25px; position:absolute; top:540px; 
    background:transparent url(navbuttons.gif); 
    display:inline-block; z-index:5; cursor:pointer;
}
.navPause,.navPlay {display:none;} .navPrev {background-position:0 -75px;left:5px;} .navNext {background-position:0 -50px;left:395px;}

.navPrev, .navPlay, .navPause, .navNext 
{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

        
/*-------------navigation bullets------------*/

/* Note: When "ScrollAllInView" was set to true in the Javascript, the navBullets won't be displayed.*/

.navBullets
{
    display:none;
}

.navBullets div.focus {background-position:0 -10px;}