.nova-carousel-container {
    border: solid 1px #D9000B;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: relative;
    margin: 11px;
}

.nova-carousel-container h2 {
    font-weight: bold;
    padding: 5px 10px 0;
    margin: 0;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}

.nova-carousel-container p.description {
    padding: 10px;
}

.jcarousel-skin-nova-default .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #D9000B;
    margin: 10px 10px 0 10px;
}

.jcarousel-skin-nova-default .jcarousel-container-horizontal {
    padding: 5px 20px 5px 40px;
}

.jcarousel-skin-nova-default .jcarousel-clip-horizontal {
    height: 130px;
}

.jcarousel-skin-nova-default .jcarousel-item {
    width: 125px;
    height: 130px;
}

/* This value is important. It relates to a jcarousel bug. If it is too low, then lines 618 (setting this.tail) and 153 (setting di var) of jcarousel.js
 conspire to prevent the carousel from realising that it is in the last position, hence resulting in a very small final scroll movement */
.jcarousel-skin-nova-default .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-nova-default .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-nova-default .jcarousel-next-horizontal {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 100%;
    cursor: pointer;
    background-color: #D9000B;
    background-image: url(/Css/Fragments/Carousels/ExternalTeaser/Images/blue-next-horizontal.png);
	background-repeat: no-repeat;
	background-position: 0 54px;
	-moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;    
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
}

.jcarousel-skin-nova-default .jcarousel-next-horizontal:hover {
    background-position: -32px 54px;
}

.jcarousel-skin-nova-default .jcarousel-next-horizontal:active {
    background-position: -64px 54px;
}

.jcarousel-skin-nova-default .jcarousel-next-disabled-horizontal,
.jcarousel-skin-nova-default .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-nova-default .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 54px;
}

.jcarousel-skin-nova-default .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 100%;
    cursor: pointer;
    background-color: #D9000B;
    background-image: url(/Css/Fragments/Carousels/ExternalTeaser/Images/blue-prev-horizontal.png);
	background-repeat: no-repeat;
	background-position: 0 54px;
	-moz-border-radius-topleft: 7px;
    -moz-border-radius-bottomleft: 7px;    
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
}

.jcarousel-skin-nova-default .jcarousel-prev-horizontal:hover {
    background-position: -32px 54px;
}

.jcarousel-skin-nova-default .jcarousel-prev-horizontal:active {
    background-position: -64px 54px;
}

.jcarousel-skin-nova-default .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-nova-default .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-nova-default .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 54px;
}

.jcarousel-skin-nova-default li img {
    cursor: pointer;
    border: solid 3px transparent;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.jcarousel-skin-nova-default li.current img {
    border-color: #D9000B;
}

.jcarousel-skin-nova-default .pageCount {
    margin: 0; 
    padding: 0 0 5px;
    text-align: right;
}


/**
 *  Teaser Panel
 */
 
/* Hides the teaser data if the markup has ben wrapped by the jcarousel scaffolding. What this means is that if JS is not enabled the teaser data will display insitu*/

.jcarousel-container .teaser {
    display: none;
}
  
.nova-externalteaser-teaser-pointer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: transparent url(/Css/Fragments/Carousels/ExternalTeaser/Images/blue-teaser-pointer.gif) no-repeat scroll 0 0;
    width: 19px;
    height: 10px;
}

.nova-externalteaser-teaser {
    border: solid 1px #D9000B;
    height: 96px;
    margin: 7px 10px 10px 10px;
    padding: 5px 10px 10px 10px;
    background: #F0F6F9;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.nova-externalteaser-teaser.withImage {
    height: 152px;
}

.nova-externalteaser-teaser a.repeat img {
    float: left;
    margin: 10px 10px 0 0;
}

.nova-externalteaser-teaser h3 a {
    font-weight: bold;
    color: #000000;
    
}

.nova-externalteaser-teaser p {
    color: #000000;
}