/* hero ------------------------*/ #overview #hero { position:static; width:calc(100% + 70px); height:500px;/*640*/ margin:0 auto 12px; padding:0; overflow:hidden; z-index:1; -webkit-user-select:none;-moz-user-select:none; } /* gallery */ #overview #hero .gallery-view { position:relative; width:5399px; height:640px;/*640*/ } #overview #hero .gallery-view .gallery-content { position:absolute; left:0; top:0; float:left; display:inline; width:1210px; height:640px; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0); } #overview #hero .swapView .gallery-content { position:relative; } #overview #hero .gallery-view .gallery-content img.hero { display:inline; } #overview #hero .gallery-view .gallery-content h1, #overview #hero .gallery-view .gallery-content h2 { display:inline; } #overview #hero .gallery-view .gallery-content h2 { padding-top:2px; } #overview #hero .gallery-view .gallery-new { width:1300px; background:#fff; z-index:2; } /* 1157+(-margin-left)+63 of .gallery-display .hero */ #overview #hero .swapView .gallery-new { background:none; z-index:inherit; } #overview #hero .gallery-view .gallery-new img.hero { float:right; position:relative; } #overview #hero .gallery-view .gallery-new img.hero1 { z-index:2; margin-right:-110px; overflow:hidden; margin-top:0px; } /*(-margin-left)+82 of .gallery-display .hero -----> last used 132px*/ #overview #hero .gallery-view .gallery-new img.hero2 { z-index:1; margin-right:-693px; margin-top:0px; } #overview #hero .gallery-view .gallery-new h1, #overview #hero .gallery-view .gallery-new h2 { float:left; margin:0 0 0 48px; } #overview #hero .gallery-view .gallery-new h1 { padding-top:100px; text-align: left;}/*padding-top:117px;*/ #overview #hero .gallery-view .gallery-new h2 { padding-top:45px; } #overview #hero .gallery-view .gallery-display img.hero { float:left; position:relative; margin-left:50px; margin-top:20px; z-index:2; } #overview #hero .gallery-view .gallery-display h1, #overview #hero .gallery-view .gallery-display h2 { float:right; margin:0 -100px 0 0; } #overview #hero .gallery-view .gallery-display h1 { padding-top:120px;}/*padding-top:117px;*/ #overview #hero .gallery-view .gallery-display h2 { padding-top:45px; } #overview #hero .gallery-view .gallery-allinone { width:1070px; } #overview #hero .gallery-view .gallery-allinone img.hero { position:relative; float:right; margin-right:-40px; z-index:1; } #overview #hero .gallery-view .gallery-allinone h1, #overview #hero .gallery-view .gallery-allinone h2 { float:left; margin-left:174px; margin-right:-50px; } #overview #hero .gallery-view .gallery-allinone h1 { padding-top:206px; } #overview #hero .gallery-view .gallery-wireless { width:1024px; } /* 980+(-margin-left) of gallery-software .hero1 */ #overview #hero .gallery-view .gallery-wireless img.hero { float:left; } #overview #hero .gallery-view .gallery-wireless img.imac { margin:25px 47px 4px; } #overview #hero .gallery-view .gallery-wireless img.keyboard { margin:0 0 0 342px; } #overview #hero .gallery-view .gallery-wireless img.mouse { margin:0 0 0 40px; } #overview #hero .gallery-view .gallery-wireless h1, #overview #hero .gallery-view .gallery-wireless h2 { clear:left; float:left; } #overview #hero .gallery-view .gallery-wireless h1 { padding-top:44px; margin-left:320px; } #overview #hero .gallery-view .gallery-wireless h2 { margin-left:92px; } #overview #hero .gallery-view .gallery-software { width:1025px; } #overview #hero .gallery-view .gallery-software img.hero { position:relative; float:right; margin-top:-66px; } #overview #hero .gallery-view .gallery-software img.hero1 { z-index:3; margin-left:-14px; margin-right:-37px; } #overview #hero .gallery-view .gallery-software img.hero2 { z-index:2; margin-left:-20px; margin-top:-100px; } #overview #hero .gallery-view .gallery-software img.hero3 { z-index:1; margin-left:-42px; } #overview #hero .gallery-view .gallery-software h1, #overview #hero .gallery-view .gallery-software h2 { float:left; width:975px; margin-left:50px; } #overview #hero .gallery-view .gallery-software h1 { padding-top:40px; } #overview #hero .gallery-view .gallery-software h2 { margin-bottom:-58px; } /* gallery navs ------------------------*/ #overview #hero nav { display:none; } /* paddle arrow nav */ .hero-nav li { width:100%; position:absolute; top:0; left:0; z-index:10; _display:none; } .hero-nav li .arrow { position:absolute; display:block; top:0; height:500px; width:107px; padding:0 20px; -moz-opacity:0; opacity:0; filter:alpha(opacity=0); outline:none; z-index:6; cursor:pointer; -webkit-transition: .25s opacity ease-out; -moz-transition: .25s opacity ease-out; -o-transition: .25s opacity ease-out; transition: .25s opacity ease-out; } .hero-nav li .arrow:hover { -moz-opacity:1; opacity:1; filter:alpha(opacity=100); } .hero-nav li .arrow.disabled { display:none; } .hero-nav li .arrow b { display:block; width:61px; height:120px; margin-top:160px; text-indent:-9999px; overflow:hidden; } .hero-nav li .arrow.prev { left:0; } .hero-nav li .arrow.prev b { float:left; background: url(images/arrow_left.png) no-repeat; } .hero-nav li .arrow.next { right:0; } .hero-nav li .arrow.next b { float:right; background:url(images/arrow_right.png) no-repeat; } @media only screen and (max-device-width: 768px) { .hero-nav { display:none; } /* don't show the paddles on iOS, swipe instead */ } /* simple dot nav */ .simple-nav { position:absolute; width:100%; height:15px; bottom:0; left:0; padding:12px 0 13px; overflow:hidden; text-align:center; z-index:4; } .simple-nav li, .simple-nav li a { display:-moz-inline-stack; display:inline-block; *display:inline; zoom:1; } .simple-nav li { position:relative; margin:0 4px; width:11px; height:11px; overflow:hidden; } .simple-nav li.last-dot { margin-right:0; } .simple-nav li a { position:absolute; width:15px; height:45px; top:-2px; left:-2px; outline:none; cursor:pointer; text-indent:-9999px; line-height:0; background: url(images/nav-bullets.png) no-repeat 0 0; behavior:url(/global/scripts/lib/iepngfix.htc); } .simple-nav li a:hover { top:-17px; } .simple-nav li a.active { cursor:default; top:-32px; opacity:1; -moz-opacity:1; }