.stepcarousel1{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 640px; /*Width of Carousel Viewer itself*/
height: 180px; /*Height should enough to fit largest content's height*/
}

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

.stepcarousel1 .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 8px; /*margin around each panel*/
width: 640px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


/* Carousel 2 */
.stepcarousel2{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 400px; /*Width of Carousel Viewer itself*/
height: 100%; /*Height should enough to fit largest content's height*/
}

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

.stepcarousel2 .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 8px; /*margin around each panel*/
width: 400px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


/* end Carousel 2 */


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



#slider4{
border-color: darkred;
margin-left: 2px;
height: 240px
}

#paginate-slider4{
background-color: darkred;
border-color: darkred;
margin-left: 2px;
}

#paginate-slider4 a img{
width: 40px;
height: 30px;
border: 2px solid gray;
margin-top: 2px;
}

#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid red;
}


#slider5{
border-color: darkred;
margin-left: 2px;
height: 240px
}

#paginate-slider5{
background-color: darkred;
border-color: darkred;
margin-left: 2px;
}

#paginate-slider5 a img{
width: 22px;
height: 18px;
border: 2px solid gray;
margin-top: 2px;
}

#paginate-slider5 a img:hover, #paginate-slider5 a.selected img{
border: 2px solid red;
}


.stepcarouselB{
position: relative; /*leave this value alone*/
border: 1px solid black;
overflow: scroll; /*leave this value alone*/
width: 70px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
}

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

.stepcarouselB .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 1px; /*margin around each panel*/
width: 70px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}



.stepcarouselZ{
BACKGROUND: #FFFFFF; 
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 290px; /*Width of Carousel Viewer itself*/
height: 300px; /*Height should enough to fit largest content's height*/
}

.stepcarouselZ .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
BACKGROUND: #FFFFFF; 
}

.stepcarouselZ .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
/*margin: 15px; margin around each panel*/
width: 280px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
BACKGROUND: #FFFFFF; 
padding-right: 5px; /*margin around each panel*/
padding-top: 5px; /*margin around each panel*/
padding-bottom: 5px; /*margin around each panel*/
padding-left: 5px; /*margin around each panel*/

}


.stepcarouselY{
BACKGROUND: #FFFFFF; 
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 280px; /*Width of Carousel Viewer itself*/
height: 240px; /*Height should enough to fit largest content's height*/
}

.stepcarouselY .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
BACKGROUND: #FFFFFF; 
}

.stepcarouselY .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
/*margin: 15px; margin around each panel*/
width: 270px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
BACKGROUND: #FFFFFF; 
padding-right: 10px; /*margin around each panel*/
padding-top: 5px; /*margin around each panel*/
padding-bottom: 5px; /*margin around each panel*/
padding-left: 5px; /*margin around each panel*/

}

.stepcarouselCCC{
position: relative; /*leave this value alone*/
border: 0px solid black;
overflow: scroll; /*leave this value alone*/
width: 420px; /*Width of Carousel Viewer itself*/
height: 240px; /*Height should enough to fit largest content's height*/
}

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

.stepcarouselCCC .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 420px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}