/* ALL BELTS THE SAME */
.stepcarousel .belt, 
.topstories_stepcarousel .belt, 
.stepcarousel_imagegallery .belt,
.eelife_stepcarousel .belt,
.stepcarousel_threecol .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

/*HOMEPAGE* ***1*** & edtraining landing*/
#gallerybutton, #ajax-loader {
position: relative; /*leave this value alone*/
width: 550px; /*Width of Carousel Viewer itself*/
margin-top:30px;
margin-left:auto;
margin-right:auto;
}
#gallerybutton.doubleprong, #ajax-loader.doubleprong {
width: 440px; /*Width of Carousel Viewer itself*/
}
#gallerybutton.eelifecat, #ajax-loader.eelifecat {
width: 260px; /*Width of Carousel Viewer itself*/
}
#ajax-loader { text-align:center; margin-top:60px; }
.stepcarousel{
position: absolute; /*leave this value alone*/
float:left;
overflow: scroll; /*leave this value alone*/
width: 510px; /*Width of Carousel Viewer itself*/
height: 155px; /*Height should enough to fit largest content's height*/
text-align:center;
margin-left:20px;
*margin-left:0px;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
/*overflow: hidden; clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
width: 170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:155px;
color:White;
text-align:center;
font-weight:bold;
font-size:10px;
}
/*New&Analysis Top Stories Webpart* ***2***/
.topstories_stepcarousel{
position: absolute; /*leave this value alone*/
float:left;
overflow: scroll; /*leave this value alone*/
width: 500px; /*Width of Carousel Viewer itself*/
height: 120px; /*Height should enough to fit largest content's height*/
text-align:center;
margin-left:20px;
*margin-left:0px;
}

.topstories_stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0 5px 0 5px; /*margin around each panel*/
width: 500px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:150px;
text-align:left;
}
/*New&Analysis Homepage Image Gallery Webpart* ***3***/
.stepcarousel_imagegallery{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 515px; /*Width of Carousel Viewer itself*/
height: 100px; /*Height should enough to fit largest content's height*/
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.stepcarousel_imagegallery .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0 5px 0 5px; /*margin around each panel*/
width: 97px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:100px;
color:White;
text-align:center;
font-weight:bold;
font-size:10px;
}
/* 3 Column Carousel */
.stepcarousel_threecol {
position: absolute; /*leave this value alone*/
float:left;
overflow: scroll; /*leave this value alone*/
width: 400px; /*Width of Carousel Viewer itself*/
height: 155px; /*Height should enough to fit largest content's height*/
text-align:center;
margin-left:20px;
*margin-left:0px;
}
.stepcarousel_threecol .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0 0 0 0; /*margin around each panel*/
width: 200px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:155px;
color:White;
text-align:center;
font-weight:bold;
font-size:10px;
}
.eelife_stepcarousel {
position: absolute; /*leave this value alone*/
width: 220px; /*Width of Carousel Viewer itself*/
height: 155px; /*Height should enough to fit largest content's height*/
margin-left:auto;
margin-right:auto;
text-align:center;
float:left;
margin-left:20px;
*margin-left:0px;
}
.eelife_stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0 0 0 0; /*margin around each panel*/
width: 220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:155px;
color:Black;
text-align:center;
font-weight:bold;
font-size:12px;
}
div.showme {position:absolute; top:0px;	margin:0px; width:134px; height:70px; display:none; float:left; z-index:52; left:0; margin-left:13px; }
div.shadeTitle { background-image:url(../Content/Images/Misc/shadeTitle.png); width:100%; height:30px;}
div.shadeBody { background-image:url(../Content/Images/Misc/shadeBody.png); width:100%; height:40px; color:White;}
div.shadeTitle  {color:White; font-weight:bold; font-size:12px;}
.CarouselMainText { width:134px; padding-left:13px; line-height:1.2em;}
.CarouselText {line-height:1.2em;}
.CaourselMainText2Tier {width:134px; padding-left:33px;line-height:1.2em;}
.CarouselMainText a, .CaourselMainText2Tier a, div.shadeTitle a, div.shadeBody a { color:White;}