/* --

1.1 Slider
1.2 Slide Deck

-- */


/* ------ 1.1 Slider Basics ----- */
/* Overflow hidden is for 3 slide slider but effects all */
html { overflow-x: hidden; }    
@media screen and (max-width: 978px) {
  html { overflow-x: scroll; }
}
.slider {width: 978px; height:355px; position: relative; z-index:1; font-size:14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; clear:both; }
.slides{width: 978px; height: 355px; position: relative; overflow: hidden;}
.slide{width: 978px; height: 355px; position: absolute; z-index: 100;  margin: 0px; padding-left: 0px;}

/* ------ NUMBER SLIDER ----- */
#number_slider .pager,
.pager{ 
position: absolute; bottom: 0px; right:0px; z-index: 500; height: 26px; border:1px solid #efefef;
}
#number_slider .pager a,
.pager a { 
 background: url('http://www.epson.com/_assets/img/banners/slide-nav.gif') no-repeat; text-decoration:none; color:#02319b; padding-top:6px; font-size:12px; font-weight:bold; text-align:center; display: block; width: 26px; height: 26px; float: left;
}
#number_slider .pager a.activeSlide, #number_slider .pager a.activeSlide:visited, #number_slider .pager a.activeSlide:link,
.pager a.activeSlide, .pager a.activeSlide:visited, .pager a.activeSlide:link {
background-position: -26px 0px; 
}
#number_slider .pager a:hover, #number_slider .pager  a.activeSlide:hover,
.pager a:hover, .pager  a.activeSlide:hover {
background-position: -52px 0px;
}

/* ------ TABBED SLIDER ----- */
#tabbed_slider.pager{
position: absolute; left:0; bottom: 0; border:0; height:auto;
}
#tabbed_slider.pager a{
height:auto; width:auto;
}
#tabbed_slider.pager img {
float:left;
}

/* ------ 3 SLIDE SLIDER ----- */
#threeslide_slider.slider {
	width: 700px;
	height:400px;
  	margin: 0 auto;
}
#threeslide_slider .slides {
	height: 400px;
	width: 700px;
}
#threeslide_slider img{ /* IE7 and up */
  	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png');
}
* html #threeslide_slider img { /* Only IE6 to deal with png */
	position: relative;
   	behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
   	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
   	this.src = "/_assets/img/clear.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
 	this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  	this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
#threeslide_slider .slides#main {
	height: 400px;
}
#threeslide_slider .slide {
	height: auto;
	width: 700px;
}
#threeslide_slider .mask {
	position: absolute;
	width: 700px;
	max-width: 700px;
	z-index: 100;
	top: 0px;
}
#threeslide_slider #mask-left {
	left: -700px;
}
#threeslide_slider #mask-right {
	left: 700px;
}
#threeslide_slider .cover-left, #threeslide_slider .cover-right {
	width:700px;
	height:400px;
	position:absolute;
	top:0px;
	z-index:10000;
}
#threeslide_slider .cover-left {
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(48%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
#threeslide_slider .cover-right {
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 52%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 52%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 52%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 52%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
#threeslide_slider #prev,
#threeslide_slider #next{
	cursor:pointer;
}
#threeslide_slider #prev,
#threeslide_slider #next{
	position:absolute;
	top:0px;
	z-index:60000;
	height:100%;
	width:40px;
	background:url(/_assets/img/clear.gif);
	display:none;
}
#threeslide_slider #prev{
	left:0;
	padding-left:30px;
}
#threeslide_slider #next{
	right:0;
	padding-right:30px;
}
#threeslide_slider #prev img,
#threeslide_slider #next img{
   position: absolute;
    top: 145px;
}
#threeslide_slider #next img{
	left:6px;
}
/* ------ DISABLED JAVASCRIPT BANNER POSITION FOR 700 WIDTH BANNERS THAT START IN MIDDLE ----- */
#threeslide_slider #slide1{left:700px;}
#threeslide_slider #slide2{left:1400px;}
#threeslide_slider #slide3{left:0px;}
#threeslide_slider #slide4{left:2100px;}
#threeslide_slider #slide5{left:2800px;}


/* ------ DISABLED JAVASCRIPT BANNER POSITION FOR 978 WIDTH BANNERS ----- */
#slide1{left:0px;}
#slide2{left:978px;}
#slide3{left:1956px;}
#slide4{left:2934px;}
#slide5{left:3912px;}
#slide6{left:4890px;}
#slide7{left:5868px;}
#slide8{left:6846px;}
#slide9{left:7824px;}
#slide10{left:8802px;}
#slide11{left:9780px;}
#slide12{left:10758px;}
#slide13{left:11736px;}
#slide14{left:12714px;}
#slide15{left:13692px;}
#slide16{left:14670px;}
#slide17{left:15648px;}
#slide18{left:16626px;}
#slide19{left:17604px;}
#slide20{left:18582px;}
#slide21{left:19560px;}
#slide22{left:20538px;}
#slide23{left:21516px;}
#slide24{left:22494px;}
#slide25{left:23472px;}
#slide26{left:24450px;}
#slide27{left:25428px;}
#slide28{left:26406px;}
#slide29{left:27384px;}
#slide30{left:28362px;}
#slide31{left:29340px;}
#slide32{left:30318px;}
#slide33{left:31296px;}
#slide34{left:32274px;}
#slide35{left:33252px;}
#slide36{left:34230px;}
#slide37{left:35208px;}
#slide38{left:36186px;}
#slide39{left:37164px;}
#slide40{left:38142px;}
#slide41{left:39120px;}
#slide42{left:40098px;}
#slide43{left:41076px;}
#slide44{left:42054px;}
#slide45{left:43032px;}
#slide46{left:44010px;}
#slide47{left:44988px;}
#slide48{left:45966px;}
#slide49{left:46944px;}
#slide50{left:47922px;}

/* ------ PAGE SPECIFIC ----- */

/* Estore */
#estore .slider,
	#estore .slides,
	#estore .slide { width: 715px; height:279px;}
#estore #slide2{left:715px;}
#estore #slide3{left:1430px;}
#estore #slide4{left:2145px;}
#estore #slide5{left:2860px;}
#estore #slide6{left:3575px;}
#estore #slide7{left:4290px;}
#estore #slide8{left:5005px;}
#estore #slide9{left:5720px;}
#estore #slide10{left:6435px;}

/* Projectors */	
#projectors .breadcrumbs{
	margin-bottom:9px;
}


/* ------ 1.2 Slide Deck ----- */

#slidedeck_frame { width: 1099px; height: 300px; margin-bottom: 45px; }
#slidedeck_frame dl { margin: 0; }			
.slidedeck dd { background: #f8f8f8; height: 12px; padding: 26px 0px;}
.slidedeck dt { cursor: pointer; height: 40px; }
.slidedeck dt#design-deck { background: url(bg-deck-spines.png) 4px 1px no-repeat; }
.slidedeck dt#design-deck:hover, .slidedeck dt#design-deck.activeSlide { background-position: -308px 1px; }
.slidedeck dt#dev-deck { background: url(bg-deck-spines.png) 4px -40px no-repeat; }
.slidedeck dt#dev-deck:hover, .slidedeck dt#dev-deck.activeSlide { background-position: -308px -40px; }
.slidedeck dt#marketing-deck { background: url(bg-deck-spines.png) 4px -80px no-repeat; }
.slidedeck dt#marketing-deck:hover, .slidedeck dt#marketing-deck.activeSlide { background-position: -308px -80px; }
.slidedeck .activeSlideCorner { margin-left: -2px; background: url(bg-deck-arrow.png); width: 10px; height: 28px; }

.slidedeck .panel { position: absolute; width: 978px; height: 240px; left: 40px; top: 35px; background: url(bg-deck-panel.gif) right top no-repeat;  }
.slidedeck .panel .left { width: 290px; padding-top: 65px; }
.slidedeck .panel .right img { margin-bottom: 10px; }
.slidedeck .panel .right { width: 370px; padding-top: 32px; }
.slidedeck .panel .button { position: absolute; left: -5px; top: 170px; }

.slidedeck .panel-design .left { background: url(bg-deck-design.png) left 5px no-repeat; }
.slidedeck .panel-dev .left { background: url(bg-deck-dev.gif) left 5px no-repeat; }
.slidedeck .panel-marketing .left { background: url(bg-deck-marketing.png) left 5px no-repeat; }