/* $Event Scroller
/******************************/

.content-fragment .latest-col-home h2 { color:#0174A3; font-size: 1em; font-weight:normal; }
.content-fragment .latest-col-home h2 strong { color:#0174A3; font-size: 1.2em; line-height: 1.5em;}


.btn-all-news-articles { text-align:left; width: 120px; height: 24px; background: url('../images/btn-all-news-articles.jpg') 0 0; color: #0373a1; display: block; float: right; font-size: 1em; margin-right: 10px; padding: 7px 0 0 13px; text-decoration: none !important; }
a:hover.btn-all-news-articles { background-position: -133px 0; color: #302b2f; }

.btn-latest-left { width: 30px; height: 31px; background: url('../images/btn-latest-left-white.jpg') 0 0; display: block; float: left; margin-right: 18px; text-indent: -10000px; }
a:hover.btn-latest-left { background-position: -30px 0; }
.btn-latest-right { width: 30px; height: 31px; background: url('../images/btn-latest-right-white.jpg') 0 0; display: block; float: left; margin-left: 8px; text-indent: -10000px; }
a:hover.btn-latest-right { background-position: -30px 0; }

.latest-col { width: 182px; float: left; margin-right: 20px; }
.latest-col-home { width: 182px; float: left; margin-right: 20px; }
.latest-col-last { margin-right: 0px; }
.latest-switcher { clear: both; margin-top: -12px; padding-left: 225px; position: relative; text-align: center; overflow: hidden; zoom: 1; }
.latest-switcher .dot { float: left; margin: 11px 10px 0 0; cursor: pointer; }

/* JQuery Case Studies */

.stepcarousel {
    position: relative; /* leave this value alone */
    overflow: scroll; /* leave this value alone */
    width: 525px; /* Width of Carousel Viewer itself */
    height: 120px; /* Height should enough to fit largest content's height */
    margin: auto; }
.stepcarousel .belt {
    position: absolute; /* leave this value alone */
    left: 0;
    top: 0; }
.stepcarousel .panel {
    width: 165px; /* Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    float: left; /* leave this value alone */
    overflow: hidden; /* clip content that go outside dimensions of holding panel DIV */
    margin: 0 14px 0 0; /* margin around each panel */ }
.stepcarousel .panel-last { margin-right: 0; }
.stepcarousel .panel img { display: block; margin-bottom: 10px; }
.stepcarousel .panel span { display: block; margin: 0 10px; }
.news-box { width: 157px; height: 116px; background: url('../img/bgd-news-panel.jpg') 0 0; color: #c9c9cb; display: block; font-size: 1.4em; font-weight: bold; padding: 4px 4px 0; text-decoration: none; }
a:hover.news-box { background-position: -165px 0; color: #2e2d2b; }

/* jQuery carousel for latest news */

.stepcarousel1 {
    position: relative; /* leave this value alone */
    overflow: scroll; /* leave this value alone */
    width: 590px; /* Width of Carousel Viewer itself */
    height: 230px; /* Height should enough to fit largest content's height */ }
.stepcarousel1 .belt-news { position: absolute; /* leave this value alone */ left: 0; top: 0; }
.stepcarousel2 {
    position: relative; /* leave this value alone */
    overflow: scroll; /* leave this value alone */
    width: 585px; /* Width of Carousel Viewer itself */
    height: 230px; /* Height should enough to fit largest content's height */ }
.stepcarousel2 .belt-news { position: absolute; /* leave this value alone */ left: 0; top: 0; }
