/* ========== ContentFlow ========== */
.ContentFlow {
    /*width:850px;*/
    top:-85px;
    overflow:visible;
    margin-left:-6px;  
    *top:-115px;
    /**margin-left:-46px;  */
}
/*
.ie .ContentFlow {
    margin-left:-15px;  
}
*/

.ContentFlow .flow {margin-bottom:40px !important;margin-top: -15px !important;}
html>body .ContentFlow .flow { *margin-top:15px !important; }
    /* ----- styling of items ----- */
    .ContentFlow .flow .item {
        overflow:hidden;
        border:8px solid #fff;
        box-shadow:0 0 5px #333;
        cursor: pointer;
    }
    .ContentFlow .flow .item.active {
        border:10px solid #fff;
    }
    .ContentFlow .flow .item.active .content {
        width:441px;
        height:269px;
        padding:0;
    }

        .ContentFlow .flow .item .content {
        }
        .ContentFlow .flow .item .content img {
            width:100%;
            height:100%;
        }
        .ContentFlow .flow .item .caption {
            font:normal 16px tempo;
            text-transform:uppercase;
            background:url(../../../css/img/background/cclflowcaption.png) repeat-x 0 0;
            text-align:left;
			max-height:100%;
			color:white;
			display:block;
			bottom:-6px;
			height:36px;
            /*left:0;*/
            width:100%;
            padding:6px 6px 0;
        }
        .ContentFlow .flow .item .caption h3 {
            font-weight:normal;
            padding-top:2px;
            padding-bottom:6px;
        }
        .ContentFlow .flow .item.active .caption {
            display: block;
            width:435px;
            /*background:url(../../../css/img/background/cclflowcaption.png) repeat-x 0 0;*/
            background:url(../../../css/img/background/cclflowcaptionred.png) repeat-x 0 0;
        }
        .ContentFlow .flow .item .active .blue .caption {
            background:#155087 !important;
            background-image:url() !important;
        }
        
        .ContentFlow .flow .item.active.hover .caption {
            background:url(../../../css/img/background/cclflowcaptionred.png) repeat-x 0 0;
        }
        
        .ContentFlow .flow .item.active.hover .caption.blue {
            background:#155087 !important;
            background-image:url() !important;
        }
        .ContentFlow .flow .item.active .caption h3 {
            background:url(../../../css/img/background/cclflowcaptionred.png) no-repeat 100% -42px;
			height:36px;
        }
        .ContentFlow .flow .item.active.hover .caption h3 {
            background:url(../../../css/img/background/cclflowcaptionred.png) no-repeat 100% -42px;
			height:36px;
        }
        .ContentFlow .flow .item.active.hover .caption .blue h3 {
            background-image:url() !important;
            background:#155087 !important;
        }
        .ContentFlow .flow .item.active .active-caption {
            height:269px !important;
            right:0;
            background:#155087;
            opacity:0.8;
            filter:alpha(opacity=80); 
            font-size:10px;
            font-weight: normal;
            overflow: auto;
            zoom: 1;
        }
        .ContentFlow .flow .item.active .active-caption h3 {
            /*margin-bottom:5px;*/
            font-size:16px;
            background-image: url() !important;
            height:auto;
        }
        .ContentFlow .flow .item.active.hover .active-caption h3 {
            background:none;
            height:auto;
        }
        .ContentFlow .flow .item.active .flag {
            background:url(../../../css/img/flags/flag_coming_soon.png) no-repeat;
            width:96px;
            height:96px;
            position:absolute;
            top:0;
            left:0;
            z-index:300;
        }
        .ContentFlow .flow .item.active .active-caption .explore-btn {
            background:url(../../../css/img/button/explore-btn.png) no-repeat;
            width:87px;
            height:24px;
            margin:10px 0;
        }
        .ContentFlow .flow .item.active .active-caption p {
            display:block;
            margin-bottom:10px;
        }
        .ContentFlow .flow .item .caption p {
            display:none;
            color:#c1e0f5;
            font-family:sans-serif;
            font-size:11px;
            text-transform:none;
            font-weight:normal;
        }
        * html .ContentFlow .flow .item .caption {
            background-image: none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png');
        }
            .ContentFlow .flow .item .caption a,
            .ContentFlow .flow .item .caption a:link,
            .ContentFlow .flow .item .caption a:visited,
            .ContentFlow .flow .item .caption a:active,
            .ContentFlow .flow .item .caption a:hover {
                text-decoration: none;
                color: white;
                font-style: italic;
                font-size: 0.8em;
            }
            .ContentFlow .flow .item .caption a:hover {
                text-decoration: underline;
            }
        
    /* ----- next/prev Buttons ----- */
     .preButton,
     .nextButton {
        position:absolute;
        background:url(../../../css/img/button/cclflownextprev.png) no-repeat;
        width:48px;
        height:80px;
        top:310px;
        cursor:pointer;
        z-index:1000;
        text-indent:-9999em;
    }
    .preButton {
        background-position:0 0;
        left:21px;
    }
    .nextButton {
        background-position:0 -80px;
        right:10px;
    }
    /* ----- scrollbar ----- */
    .ContentFlow .scrollbar {
        width: 50%;
        margin: 0px auto;
        margin-top: 10px;
        height: 16px;
        background: url(img/scrollbar_white.png) left center repeat-x;
        position: relative;
    }

        .ContentFlow .scrollbar .slider {
            width: 16px;
            height: 16px;
            background: url(img/slider_white.png) center center no-repeat;
        }
        
        /* only for IE <= 6 and a alphatransparent slider image */
        * html .ContentFlow .scrollbar .slider {
            background-image: none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');
        }
            .ContentFlow .scrollbar .slider .position {
                top: 120%;
                font-size: 16px;
                font-weight: bold;
                color: silver
            }

    /* ----- global caption ----- */
    .ContentFlow .globalCaption {
        text-align: center;
        font-weight: bold;
        color: white;
        font-size: 14px;
        height: 20px;
        margin: 2em auto;
    }
        .ContentFlow .globalCaption .caption {
        }
            .ContentFlow .globalCaption .caption a,
            .ContentFlow .globalCaption .caption a:link,
            .ContentFlow .globalCaption .caption a:visited,
            .ContentFlow .globalCaption .caption a:active,
            .ContentFlow .globalCaption .caption a:hover {
                text-decoration: none;
                color: white;
                font-style: italic;
                font-size: 0.8em;
            }

            .ContentFlow .globalCaption .caption a:hover {
                text-decoration: underline;
            }

    /* ----- load indicator ----- */
    .ContentFlow .loadIndicator {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: black;
    }
        .ContentFlow .loadIndicator .indicator {
            background: url(img/loader.gif) center center no-repeat;
            width: 100%;
            height: 100%;
        }
        * html .ContentFlow .loadIndicator .indicator {
            height: 100px;
        }

/* ================================= */

