@media screen, projection {

.pageHolder .grid_4 {_overflow:hidden;} 

.component ul {margin:0;}
.component a {border:none;}

.jcarousel-container {
	margin:0px auto;
}

.jcarousel-skin-literature .jcarousel-container-horizontal {
    padding: 5px 40px 0 40px;
}


.jcarousel-skin-literature .jcarousel-item span {
	display									: block;
	font-size								: 11px;
	line-height								: 14px;
	padding-top								: 8px;
}

.jcarousel-skin-literature .jcarousel-item-horizontal { /* Breathing Space */
    margin-right							: 4px;
}


.jcarousel-skin-literature .jcarousel-item-placeholder {
    background								: #fff;
    color									: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-literature .jcarousel-next-horizontal {
    position: absolute;
    top: 138px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;

    background: transparent url(img/next-horizontal.png) no-repeat 0 0;
    _background: transparent url(img/next-horizontal.gif) no-repeat 0 0;
}

.jcarousel-skin-literature .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-literature .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-literature .jcarousel-next-disabled-horizontal,
.jcarousel-skin-literature .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-literature .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
    background:transparent !important;
}

.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:active 
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:active {
    background-color:transparent !important;
}


.jcarousel-skin-literature .jcarousel-prev-horizontal {
    position: absolute;
    top: 138px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(img/prev-horizontal.png) no-repeat 0 0;
    _background: transparent url(img/prev-horizontal.gif) no-repeat 0 0;
    
}

.jcarousel-skin-literature .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-literature .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-literature .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-literature .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-literature .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}



/* HIDE BUTTONS IF ONLY 1 ITEM .nobutton */

.nobutton .jcarousel-prev-disabled-horizontal,.nobutton .jcarousel-next-horizontal{
    cursor							: default;
	visibility						: hidden;
}


/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
 
.jcarousel-container {
    position: relative;
    z-index:0;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 116px;
    height: 192px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-item {text-align:center;}
.jcarousel-item img {width:80px;height:120px;border: #dbdbdb solid 1px !important;}

/*	Set the Clipping properties which means the viewable area for 
	the Carousel window - smaller for a single column larger for a wider column
*/
.pageHolder .jcarousel-clip-horizontal {height:190px;}



.jcarousel-item a {
	--color								: #00aaee;
}

.jcarousel-item a:hover {
	--color								: red !important;
}


/* IE6 FIXES */

.grid_8 .jcarousel-skin-literature .jcarousel-container-horizontal
{
    _padding                            : 5px 38px 0 38px;
}

.grid_8 .jcarousel-clip-horizontal 
{
    _width:360px;
}

.grid_4 .jcarousel-clip-horizontal
{
    _width:116px;
}

.jcarousel-skin-literature .jcarousel-prev-horizontal 
{
    _left:-40px;
}

.jcarousel-skin-literature .jcarousel-next-horizontal 
{
    _right: 10px;
}

/* Template specific */

.homeDownloads
{
    height                              : 260px !important;
    overflow                            : hidden;
}

.wgDownloads {
	height                              : 220px;
	overflow                            : hidden;
}


.nobuttons .jcarousel-skin-literature .jcarousel-next-horizontal,
.nobuttons .jcarousel-skin-literature .jcarousel-prev-horizontal
{
    display:none !important;
}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* this fix not needed as undefined fix below sorts the problem */
/*
.jcarousel-list-horizontal {margin-left:-116px !important; padding-right:116px !important; border: red solid 0px !important;}
.grid_8 .jcarousel-list-horizontal {border: red solid 0px !important;margin-left:-240px !important;}
*/
}





/* ---------- Media Library Downloads shares this css but needs a couple of extra bits ---------- */
div.wgMediaLibraryDownloads .jcarousel-item {
    width: 116px;
    height: 192px;
    overflow: hidden;
}

div.wgMediaLibraryDownloads .jcarousel-item a img.defaultthumb{
   border: 0px none !important;
}

div.wgMediaLibraryDownloads.gridview ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

div.wgMediaLibraryDownloads.gridview ul li{
    display: block;
    width: 130px;
    height: 220px;
    padding: 0px 5px 0px 5px;
    float: left;
    text-align: center;
}

div.wgMediaLibraryDownloads.gridview ul li img{
    border: 1px solid #e5e5e5;
    margin-bottom: 5px;
    width: 100px;
    height: 130px;
    /*height: auto;*/
}

div.wgMediaLibraryDownloads.gridview ul li img.defaultthumb{
    border: 0px none;
}

div.wgMediaLibraryDownloads.gridview ul li a{
    line-height: 1.4em;
}




/* ---------- Lightbox Slider also shares this css but needs a couple of extra bits ---------- */
div.wgMediaLibraryDownloads.lighboxslider .jcarousel-item a img {
    width: 110px;
    height: 110px;
    border: 0px none !important;
}


/* ---------- Undefined carousel items appearing (in chrome) so hide ---------- */
li.jcarousel-item-undefined, li.jcarousel-item-NaN{
	display: none !important;
}

.jcarousel-list {margin-left:0 !important;}


/* ---------- Problems with connection may cause carousel to be hidden. So hide it! ---------- */
li.hidedownload, div.hidealldownloads{
	display: none !important;
}