﻿/*
    carousel
    CSS specific to the carousel control.
    
*/
.carousel{
    display:block; 
    height:335px; 
    width:700px; 
    position:relative; 
    padding:0; 
    margin-bottom:33px; 
    color:#fff;
}
.ie6 .carousel,
.ie7 .carousel { 
    padding-top:3px; /*to compensate for the fix to the h2 tags below*/
 }
    .carousel li {
        list-style-type: none;list-style-image: none;
                zoom:1;
    }
    .js .carousel li .carousel-cycle,
    .js .carousel li .cycle-nav {
        display: none;
    }
    .carousel li.carousel-itemTselected .carousel-cycle,
    .carousel li.carousel-itemTselected .cycle-nav {
        display: block;
    }
    .carousel li h2{
        width:170px;
    }
    .ie6 .carousel li h2,
    .ie7 .carousel li h2{
        position:relative;  float:left; clear:both;  margin-top:-3px; /*to get rid of gap between elements caused by the ul underneath in the mark up*/
    }
    .carousel li h2 a{
        color:#fff;
        display:block;
        height:41px;
        border-bottom:1px solid #565656;
        padding:24px 10px 1px;
        background:#333;
        text-decoration:none;
    }
    .carousel li h2 a:hover,
    .carousel li.carousel-itemTselected h2 a{
        background:#005dab;
            color:#fff;
    }
    .ie6 .carousel a{
        color:#fff !important; text-decoration:none;
            
    }
        /**Second tier uls containing the cycles**/
        .carousel-cycle{
            position:absolute; 
            padding:0; 
            overflow:hidden;
            right:0; 
            top:0; 
            width:530px; 
            height:335px;
        }
        .no-js .carousel-cycle { 
        overflow-y:scroll;
            
        }
            .carousel-cycle li{
                height:335px; 
                position:absolute; 
                width:100% !important;
                display:none;
             }
             .no-js .carousel-cycle li {
             position:relative; float:left;
                display:block;
             }
            .carousel-cycle img{
                z-index:0; 
                position:absolute; 
                top:0; 
                left:0;
            }
            .carousel-cycle-trans {
                z-index:10; 
                display:block;
                position:absolute;
                bottom:0; 
                left:0; 
                width:100%;
            }
            .ie6 .carousel-cycle-trans {
                background: #005dab;
            }
            .carousel-cycle-content{
                position:absolute;
                padding:12px 0; 
                bottom:0;
                left:0; 
                z-index:20; 
                display:block; 
                width:100%;
                background: url(/cms_images/transblue-005dab-0.8.png) repeat left top;
                background: rgba(0,93,171,0.8);
            }
            .carousel-cycle-content h3, 
            .carousel-cycle-content p { 
                padding:0 150px 4px 15px;
				color: #fff;
            }
            .carousel-cycle-content p{margin-bottom:20px;}

            .carousel-cycle-content .button {
                position:absolute; 
                right:20px; 
                top:33px;
                color:#fff !important;
            }
                .carousel-cycle-content .button span {
                    padding-right: 9px;
                }
                .carousel-cycle-content .button span.btn-l {
                    padding-right: 0;
                    width: 9px;
                }

        .cycle-nav {
            position:absolute; 
            bottom:5px; 
            left:170px; 
            width:530px;
            display:block;
            text-align:center;
            z-index:30;
            padding:0;
        }
        .cycle-nav li{
            position:relative;
            width:12px; 
            height:12px; 
            display:inline-block;
            overflow:hidden;
            zoom:1;
        }
        .ie6 .cycle-nav li,
        .ie7 .cycle-nav li {
            display:inline;
        }
        .cycle-nav a {
            width:12px; 
            height:12px; 
            display:block;
            clip: rect(1px, 1px, 1px, 1px); text-indent:-999px;
			background: url(/cms_images/buttons.png) no-repeat 0 -238px;
        }
        .ie6 .cycle-nav a { background-image:url(/cms_images/buttons.gif)}
        .cycle-nav a:hover, .cycle-nav-selected a {
			background-position:-12px -238px !important;
        }
        /**The items will be navigable by the scroll bar with no js**/
        /*.mo-js .cycle-nav { 
            visibility:hidden;
        }*/

/*
carousel on sector homepages
*/		
.carouselTdescription 
{
    clear:both;    
}	
		
	.carouselTdescription .carousel-itemDescription {
		background: #005dab;
		width: 150px;
		height: 299px;
		padding: 18px 10px;
        font-weight:bold;
        overflow:hidden;
	}
        .carouselTdescription .carousel-cycle-content{
            background:none;
        }
        .carouselTdescription .carousel-cycle-content{
                background: url(/cms_images/transgrey-333333-0.8.png) repeat left top;
                background: rgba(51,51,51,0.8);
        }
		
        .ie6 .carouselTdescription  .cycle-nav a { background: url(/cms_images/buttons.gif) no-repeat -24px -238px; }
        .ie6 .carouselTdescription .cycle-nav a:hover, .ie6 .carouselTdescription .cycle-nav-selected a {
			background-position:-36px -238px !important;
        }
    .ie6 .carouselTdescription .carousel-itemDescription,
    .ie7 .carouselTdescription .carousel-itemDescription 
    {
        position:relative;
        top:-3px; /*to get rid of gap between elements caused by the ul underneath in the mark up*/
    }
	
		.carouselTdescription .carousel-itemDescription h2 {
			color: #fff;
		}
        .carouselTdescription .carousel-itemDescription a {
            color: #fff;
        }
        .carouselTdescription .carousel-itemDescription a:hover {
            color: #FC911A;
        }
		.carouselTdescription .carousel-itemDescription p {
			margin-top: 18px;
		}		
		

/*
    => carouselTside
    smaller cycle in side bar
---------------------------------------------*/
.carouselTside{
    display: block;
    height: 335px;
    width: 220px;
    position: relative;
    padding: 0;
    margin-bottom: 0;
    color: #58595b;
}
    .carouselTside li h2{
    }
    .carouselTside .carousel-cycle{
        position: relative;
        width: 220px;
        height: 335px;
    }
    .carouselTside .cycle-nav{
        position: absolute;
        left: 0;
        width: 220px;
        display: block;
        text-align: center;
        z-index: 30;
        padding: 12px 0 0 0;
        background: rgba(0,93,171,0.8);
        bottom: 0;
        height: 20px;
    }
    .ie7 .carouselTside .cycle-nav,
    .ie8 .carouselTside .cycle-nav{
        background-color:rgb(0, 93, 171);
    }
        .carouselTside .carousel-cycle-content{
            bottom:auto;
            top:16px;
            background:transparent;
            height:300px;
            width:100%;
        }
            .carouselTside .carousel-cycle-content a{
                padding:0 30px 0 15px;
                display:block;
                width:175px;
                height:100%;
                cursor:pointer;
                color:#fff;
                font-weight:bold;
            }