    <!-- carousel css -->
    <style type="text/css">
        /* container */
        #carousel a, 
        #carousel a:hover {
            text-decoration: none;
        }
        
        #carousel {
            float: left;
            display: block;
            width: 708px;
            height: 335px;
            background-color: #f0f0f0;
            margin-bottom: 4px;
        }
        
        /* carousel header */
        #carousel .nav {
            position: absolute;
            width: 630px;
            height: 32px;
            box-sizing: border-box;             
            z-index: 1000;
            padding-top: 9px;
            padding-right: 16px;
            text-align: right;
            margin: 0!important;
        }
        
        /* pager */
        #carousel .prev,
        #carousel .next,
        #carousel .pager {
            display: inline-block;
            color: #1478B7;
            font-size: 12px;
            font-weight: bold;
        }
        #carousel .pager a {
            margin: 0 4px;
            border: 6px solid rgba(0,0,0,0);
            border-top-width: 3px;
            border-bottom-width: 3px;
            border-color: none;
            border-radius: 4px;
        }
        #carousel .pager a.selected {
            background-color: white;
            border-color: white;
            color: black;
        }
        
        /* carousel archive */
        #carousel .archive:before {
            content: "IN FOCUS";
            float: left;
            margin-left: 16px;
            font-weight: bold;
            color: #666666;
        }
        #carousel .archive {
            position: absolute;
            box-sizing: border-box;             
            width: 708px;
            background-color: rgba(255,255,255,0.8);
            height: 32px;
            z-index: 999;
            padding-top: 9px;
            overflow: hidden;
            text-align: right;
        }
        #carousel .archive a,
        #carousel .archive a:visited {
            margin-right: 16px;
            margin-top: 9px;
            color: #1478B7;
            font-size: 12px;
            font-weight: bold;
        }
        
        /* slide container */
        #carousel .slides {
            position: absolute;
            width: 200px;
            font-weight: bold;
            z-index: 998;
        }

        /* slide content */        
        #carousel div.slide-content {
            position: absolute;
            top: 54px;
            bottom: 32px;
            width: 350px;
            /* IE patch */
            background-color: rgb(255,255,255);
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
            /* IE patch end */        
            background-color: rgba(255,255,255,0.8);
            padding: 16px;
        }
        #carousel .title {
            font-size: 20px;
            margin-bottom: 16px;
        }
        #carousel .body {
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 16px;
        }
        #carousel .links a {
            display: inline-block;
            margin-right: 16px;
        }
        
        /* slide footer */
        #carousel .footer {
            position: absolute;
            left: -16px;
            width: 708px;
            bottom: -32px;
            height: 32px;
            box-sizing: border-box;
            font-weight: normal;
            color: white;
            padding-top: 9px;
            padding-left: 32px;
            /* IE patch */
            background-color: rgb(0,0,0);
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
            /* IE patch end */        
            background-color: rgba(0,0,0,0.5);
        }
        
        /* right-aligend slides */
        #carousel .right div.slide-content {
            margin-left: 326px;
        }        
        
        #carousel .right .footer {
            margin-left: -326px;
        }        
        
        
        
    </style>
    <!-- /carousel css -->
