.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow: scroll; /*leave this value alone*/
width:  531px;
height: 233px; /*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:  531px;
height: 233px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel .stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
CLEAR: left;
position:absolute;
bottom:200px;
right:10px;
z-index:1;
}
.stepcarousel .stripTransmitter ul { /* the auto-generated set of links */
position: relative;
float:left;
list-style-type: none;
}
.stepcarousel .stripTransmitter li{ /* in this list too, each LI is arranged horizontally */
list-style-type: none;
width: 19px;
float:left;
margin:1;
}
.stepcarousel .stripTransmitter a{ /* the links. */
font-size:11px;
border:1px solid #d7d7d7;
text-align: center;
padding:0px 0 0 0;
background: #fff;
color: #F06733;
text-decoration: none;
display: block;
}
.stepcarousel .stripTransmitter a:hover { /* hover */
background: #F06733;
color: #fff;
}
.stepcarousel .stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #F06733;
color: #fff;
}

.stepcarousel_main{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow: hidden; /*leave this value alone  scroll*/
width:  846px; /*846*/
height: 162px; /*Height should enough to fit largest content's height*/ /*162*/
}

.stepcarousel_main .belt{
position: absolute; /*leave this value alone*/
float: left; /*leave this value alone*/
left: 0px;
width:884px;
top: 0px;
}
.stepcarousel_main .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:  221px;
height: 162px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


.stepcarousel_main .stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
CLEAR: left;
position:absolute;
bottom:3px;
left:10px;
z-index:100;
}
.stepcarousel_main .stripTransmitter ul { /* the auto-generated set of links */
position: relative;
float:left;
list-style-type: none;
}

.stepcarousel_main .stripTransmitter li{ /* in this list too, each LI is arranged horizontally */
list-style-type: none;
width: 15px;
float:left;
margin:2;
}
.stepcarousel_main .stripTransmitter a{ /* the links. */
font-size:11px;
border:1px solid #d7d7d7;
text-align: center;
padding:0px 0 0 0;
background: #fff;
color: #F06733;
text-decoration: none;
display: block;
}
.stepcarousel_main .stripTransmitter a:hover { /* hover */
background: #F06733;
color: #fff;
}
.stepcarousel_main .stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #F06733;
color: #fff;
}



.best_s{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow: scroll; /*leave this value alone*/
width:  100px;
height: 100px; /*Height should enough to fit largest content's height*/
}

.best_s .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.best_s .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: 100px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.text_counsel{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow: scroll; /*leave this value alone*/
width:  275px;
height: 396px; /*Height should enough to fit largest content's height*/
}
.text_counsel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.text_counsel .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:  275px;
height: 132px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}





.stepcarousel_sub{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow: scroll; /*leave this value alone*/
width:  170px;
height: 135px; /*Height should enough to fit largest content's height*/
}

.stepcarousel_sub .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel_sub .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:  170px;
height: 135px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel_sub .stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
CLEAR: left;
position:absolute;
bottom:5px;
left:5px;
z-index:1;
}
.stepcarousel_sub .stripTransmitter ul { /* the auto-generated set of links */
position: relative;
float:left;
list-style-type: none;
}
.stepcarousel_sub .stripTransmitter li{ /* in this list too, each LI is arranged horizontally */
list-style-type: none;
width: 15px;
float:left;
margin:1;
}
.stepcarousel_sub .stripTransmitter a{ /* the links. */
font-size:11px;
border:1px solid #d7d7d7;
text-align: center;
padding:0px 0 0 0;
background: #fff;
color: #F06733;
text-decoration: none;
display: block;
}
.stepcarousel_sub .stripTransmitter a:hover { /* hover */
background: #F06733;
color: #fff;
}
.stepcarousel_sub .stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #F06733;
color: #fff;
}




.side_step{
position: relative; /*leave this value alone*/
border: 0px solid gray;
overflow:hidden; /*clip content that go outside dimensions of holding panel DIV*/
width:  900px;
height: 220px; /*Height should enough to fit largest content's height*/
}

.side_step .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.side_step .panel{
position: absolute; /*leave this value alone*/
width:130px;
margin:0px;
}

.side_step .stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
CLEAR: left;
position:absolute;
top:5px;
left:5px;
z-index:1;
}
.side_step .stripTransmitter ul { /* the auto-generated set of links */
position: relative;
float:left;
list-style-type: none;
}
.side_step .stripTransmitter li{ /* in this list too, each LI is arranged horizontally */
list-style-type: none;
width: 15px;
float:left;
margin:1;
}
.side_step .stripTransmitter a{ /* the links. */
font-size:11px;
border:1px solid #d7d7d7;
text-align: center;
padding:2px 0 0 0;
background: #fff;
color: #F06733;
text-decoration: none;
display: block;
}
.side_step .stripTransmitter a:hover { /* hover */
background: #F06733;
color: #fff;
}
.side_step .stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background: #F06733;
color: #fff;
}