/* hero
------------------------*/
#overview #hero { position:relative; width:644px; height:400px; margin:0 auto 12px; padding:0; overflow:hidden; z-index:1; -webkit-user-select:none; }

/* hero cap masks */
#overview #hero .maincap { display:none; position:absolute; left:0; width:644px; height:4px; line-height:0; font-size:1px; z-index:5; }
#overview #hero.capped .maincap { display:block; }
#overview #hero .maincap.top { top:0; background:url(../images/overview_captop20110426.png) no-repeat 0 0; }
#overview #hero .maincap.bot { bottom:0; background:url(../images/overview_capbot20110426.png) no-repeat 0 0; }

/* gallery */
#overview #hero .gallery-view { position:relative; width:5399px; height:400px; }

#overview #hero .gallery-view .gallery-content { position:absolute; left:0; top:0; float:left; display:inline; width:644px; height:400px; -webkit-transform:translateZ(0); }
#overview #hero .swapView     .gallery-content { position:relative; }
#overview #hero .gallery-view .gallery-content img { position:static; display:block; behavior:url(iepngfix.htc); }
#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:644px; 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:0px; } /*(-margin-left)+82 of .gallery-display .hero */
#overview #hero .gallery-view .gallery-new img.hero2 { z-index:1; margin-right:-200px; }
#overview #hero .gallery-view .gallery-new h1,
#overview #hero .gallery-view .gallery-new h2 { float:left; margin:0 -400px 0 20px; }
#overview #hero .gallery-view .gallery-new h1 { padding-top:20px; }
#overview #hero .gallery-view .gallery-new h2 { padding-top:70px; }

#overview #hero .gallery-view .gallery-display img.hero { float:left; position:relative; margin-left:-20px; margin-top:0px; z-index:2; }
#overview #hero .gallery-view .gallery-display h1,
#overview #hero .gallery-view .gallery-display h2 { float:right; margin-right:50px; }
#overview #hero .gallery-view .gallery-display h1 { padding-top:20px; }

#overview #hero .gallery-view .gallery-allinone { width:644px; }
#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:-190px; }
#overview #hero .gallery-view .gallery-software img.hero1 { z-index:3; margin-left:-160px; margin-right:380px; }
#overview #hero .gallery-view .gallery-software img.hero2 { z-index:2; margin-left:-160px; }
#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:20px; }
#overview #hero .gallery-view .gallery-software h1 { padding-top:20px; }
#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:560px; 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; 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:40px; height:80px; margin-top:170px; text-indent:-9999px; overflow:hidden; behavior:url(scripts/ie7pngfix.htc); }

.hero-nav li .arrow.prev { left:0; }
.hero-nav li .arrow.prev b { float:left; background:url(../images/heronav_prev20110426.png) no-repeat; }

.hero-nav li .arrow.next { right:0; }
.hero-nav li .arrow.next b { float:right; background:url(../images/heronav_next20110426.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/simplenav20110426.png) no-repeat 0 0; behavior:url(iepngfix.htc); }
.simple-nav li a:hover { top:-17px; }
.simple-nav li a.active { cursor:default; top:-32px; opacity:1; -moz-opacity:1; }