/* 	Generic style sheet for two image fade tables with Gel style selectors
	Developed by Steven Atherton and Steven Connor
*/

div#swapItems{
	border-right:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
	width: 624px;
}
div#swapItems  h1.no-js-head{
	clear: both;
	background-color: #d1700e;
	margin-top: -3px;
}

p.slider-caption{
	display:none;
}
div#compare-carousel{
	border-right:1px solid #cccccc;
	border-top:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
}
div#compare-carousel #carousel{
	height: 81px;
}


div#compare-carousel #carousel li{
	margin: 0;
}
div#compare-carousel li div.borders img:hover{
	cursor: pointer;
}
div#compare-carousel li div.borders img.left{
	position:absolute;
	clip:rect(0px,72px,81px,0px);
	margin-top: 0;
	margin-left: 0;
}
div#compare-carousel li div.borders img.right{
	position:static;
	clip:rect(0px,144px,81px,72px);
	margin-top: 0;
	margin-left: 0;
}

div#fade_wrapper div#fade-controls ul#selector-menu  span{
	display:none; 
 }

div#compare-carousel li.activeComp div.borders{
	width: 136px;
	height: 73px;
	border-top:4px solid #d1700e;
	border-left:4px solid #d1700e;
	border-bottom:4px solid #d1700e;
	border-right:4px solid #d1700e;
}

div#compare-carousel li.activeComp div.borders img.left{
position:absolute;
clip:rect(4px,72px,77px,4px);
margin-top:-4px;
margin-left: -4px;
}
div#compare-carousel li.activeComp div.borders img.right{
position:absolute;
clip:rect(4px,140px,77px,72px);
margin-top:-4px;
margin-left: -4px;
}

div#compare-carousel li.hoverComp div.borders{
	width: 136px;
	height: 73px;
	border-top:4px solid #d1700e;
	border-left:4px solid #d1700e;
	border-bottom:4px solid #d1700e;
	border-right:4px solid #d1700e;
}

div#compare-carousel li.hoverComp div.borders img.left{
position:absolute;
clip:rect(4px,72px,77px,4px);
margin-top:-4px;
margin-left: -4px;
}
div#compare-carousel li.hoverComp div.borders img.right{
position:absolute;
clip:rect(4px,140px,77px,72px);
margin-top:-4px;
margin-left: -4px;
}

/* Set the width of the carousel and the view window to be the same */
div#compare-carousel div#layeredCarousel,
div#compare-carousel div.carousel-light div.carousel-window {
        width: 624px !important;
		height:81px !important;
}


/* Set the prev button to be absolutely positioned to the left of the carousel */
div#compare-carousel div.carousel-light a.carousel-prev {
        background: url(/news/special/technology/11/colour_blindness_slider/controls/gel.png) top left repeat-y;
        left: -2px;
        position: absolute;
        width: 36px;
		height: 83px!important;
		display:none;
}
div

/* Set the next button to be absolutely positioned to the right of the carousel */
div#compare-carousel div.carousel-light a.carousel-next {
        background: transparent url(/news/special/technology/11/colour_blindness_slider/controls/gel.png) top right repeat-y;
        position: absolute;
        right: -101px;
        width: 136px;
		height: 83px!important;
		display:none;
}

div#compare-carousel .carousel-light .carousel-nav span {
background-image:url(/news/special/technology/11/colour_blindness_slider/controls/gel.png);
width: 22px;
left: 8px;
background-position:-112px center;
}
div#compare-carousel div#layeredCarousel div.carousel-light a.carousel-nav.carousel-next span.carousel-arrow {
background-position:-139px center;
}
div#compare-carousel div#layeredCarousel div.carousel-light a.carousel-nav.carousel-prev.carousel-prev-disabled span.carousel-arrow {
        left: 8px;
		width: 23px;
		background-position:-161px center;
}
div#compare-carousel div#layeredCarousel div.carousel-light a.carousel-nav.carousel-next.carousel-next-disabled span.carousel-arrow {
        left: 8px;
		width: 23px;
		background-position:-188px center;
}

div#compare-carousel .caption.full-width {
        display: none;
}
div#compare-carousel .carousel-prev .carousel-arrow {
background-position:-112px center;
}
div#compare-carousel .carousel-prev-disabled .carousel-arrow {
background-position:-161px center;
}
div#compare-carousel .carousel-next-disabled .carousel-arrow {
background-position:-185px center;
}


/* Because the carousel buttons use transparent images, we need to hide the child elements of the links */
div#compare-carousel a.carousel-nav .carousel-label,
div#compare-carousel a.carousel-nav .carousel-background,
div#compare-carousel a.carousel-nav .carousel-top,
div#compare-carousel a.carousel-nav .carousel-bottom {
        visibility: hidden;
}

div#compare-carousel {
	width:624px;
	float:left;
	position: relative;
	top:-14px;
}

div#fade-wrapper {
	/*float: right;*/
}

/* This is the container which just the controls */
div#fade-controls {
	float:left;
	width:624px;
	height:24px;
	background-color: #ededed;
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

div#compare-carousel{
	display:none;
}

 
div#fade_wrapper div#fade-items{
	display:none;
}

div#fade-controls ul li#state2{
	
	float:right;
	margin-right:-2px;


}
/* This is the container which just the tables */
div#fade-tables {
	clear:both;
	margin-bottom: 10px;
	position: relative;
}

/* Overide the blue anchor page style with white for the Gel style fade */
div#fade-controls a {
	font-weight:normal;
	color: #ffffff;
}

/* Embolden the white for the Gel style fade */


/* Position the list items for the menu*/
div#fade-controls ul li{
	float:left;
	background-image:none;
	margin: 0;
	padding: 0;
	font-size: 0.95em;
}

/* The menu title*/
div#fade-title {
	float:left;
	padding: 8px 6px 6px 4px; 
	display:none;
}

/* Style the span which contains the menu label including the left seperator*/
div#fade-controls ul li span{
	background-color:#404040;
	display:block;
	float:left;
	color: #ffffff;
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align:center;
}

/* Overide the left seperator for the first menu item*/
div#fade-controls ul li span.selected a{
	font-weight: bold;
	text-decoration:none;
}

div#fade-controls ul li span.selected {
	background-color:#d1700e;
}
div#fade-controls ul li span.selected:hover{
	background-color:#d1700e;
	text-decoration:underline;
}

div#fade-controls ul li span:hover {
	background-color:#000000;
}
div#fade-items{
	float:left;
	margin-bottom: -355px;
	padding-bottom:16px;
	
}
div#over1,
div#over2{
	position:relative;
	width:624px;
	height:351px;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}
div#over2{
	top: -352px;
}

#compareForm{
border-top:0 solid #DFDFDF;
margin:0 0 0;
position:relative;
width:100%;
padding-top:0;
padding-bottom:0;
}

#compareSlider .slider-trackOff,
#compareSlider .slider-trackOn,
#compareSlider .slider-handle,
#compareSlider .slider-btn-bk,
#compareSlider .slider-btn-fwd  {
  background-image: url(/news/special/technology/11/colour_blindness_slider/controls/compare.png);
}
#compareSlider .slider-btn-bk,
#compareSlider .slider-btn-fwd  {
	display:none;
}
#compareSlider .slider-container {

  padding: 0;
  width:462px;
}
#compareSlider .slider-trackOff,
#compareSlider .slider-trackOn {
  height: 24px;
  margin: 0;
}
#compareSlider .slider-trackOn {
  background-position: 0 -24px;
}
#compareSlider .slider-handle {
  width: 28px;
  height: 23px;
  top: 0;
  background-position: 0 -143px;
}
#compareSlider .slider-active .slider-handle {
  width: 28px;
  height: 23px;
  top: 0;
  background-position: -28px -143px;
}
#compareSlider .slider-disabled .slider-handle {
  background-position: -56px -1144px;
}
#compareSlider .slider-disabled .slider-handle {
  background-position: -56px -143px;
}
#compareSlider .slider-disabled .slider-trackOn {
  background-position: 0 0;
}