@charset "utf-8";
/* CSS Document */

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 590px; /*Width of Carousel Viewer itself*/
height:350px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow:hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 590px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:350px;
background:#FFFFFF;
text-align:left;
}

.hero { width:190px; height:350px; float:left;}
.hero-nav { width:165px; height:350px; float:left; background-color:#FFFFFF; text-align:center;}
.hero-cover { width:25px; height:350px; float:right; background-image:url(../images/hero-cover.jpg); }
.hide {	display: none;}

h6 .hero-thumb {padding:0px 30px; margin:0px;}
#hero-name {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.3em; margin-bottom:10px; color:#005e9f; text-align:center;}

ul .list-hero { list-style:url(../images/product-hero/hero-nav/hero-bullet.jpg); text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; 
				 font-size:0.8em; color:#005e9f; text-align:left; margin-left:-15px; line-height: 1.5em;}