@import url(http://images.apple.com/global/styles/blackout.css);
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/*--- for base ---*/
#main { width: 980px; }
#main p.intro { color: #888; }
.sosumi { color: #888; }
a.anchor { background: url(/global/elements/arrows/downarrow_08c.gif) no-repeat 100% 60%; padding-right: 10px; text-align: right; white-space: nowrap; }

.sosumi { clear: both; margin-bottom: 0; margin-top: 18px; padding: 0 22px; }
ul.sosumi { margin:18px auto 0; width:950px; padding:0; }
.sosumi li { line-height: 14px; margin-bottom: 0 !important; padding-bottom: 5px; }


/*--- productheader ---*/
#productheader { border: 0; }
#productheader h2 { background: url(/ilife/images/product_title_20100727.png) no-repeat; width: 104px; }
#productheader ul li a { color: #333; margin-left: 30px; }
#productheader ul li a:hover { color: #08c !important; }

body.iphoto 		#productheader li#pn-iphoto a,
body.imovie 		#productheader li#pn-imovie a,
body.garageband 	#productheader li#pn-garageband a,
body.video-showcase	#productheader li#pn-showcase a { color: #999; }

body#iphoto 		#productheader li#pn-iphoto a,
body#imovie 		#productheader li#pn-imovie a,
body#garageband 	#productheader li#pn-garageband a,
body#video-showcase	#productheader li#pn-showcase a,
body.iphoto 		#productheader li#pn-iphoto a:hover,
body.imovie 		#productheader li#pn-imovie a:hover,
body.garageband 	#productheader li#pn-garageband a:hover,
body.video-showcase	#productheader li#pn-showcase a:hover { color: #999 !important; cursor: default; }

/*--- layout ---*/
html { background-color: #f7f7f7; }
body { background-color: transparent; }

/* --- app styles --- */
.app #hero { background: #fff url(/ilife/images/hero_bg_20100727.png) repeat-x 0 100%; height: 446px; width: 980px; -webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-radius-topleft: 4px; }
.app.imovie #hero { background: transparent url(/ilife/imovie/images/hero_20101020.png) no-repeat 100% 0; }
.app.iphoto #hero { background: transparent url(/ilife/iphoto/images/hero_20101020.png) no-repeat 100% 0; }
.app.garageband #hero { background: transparent url(/ilife/garageband/images/hero_20101020.png) no-repeat 100% 0; }

.app #hero .hero-content { display: block; height: 446px; *position: absolute; *top: 0; *left: 0; width: 100%; z-index: 0; }
.app #hero .movie,
.app #hero .moviePanel,
.app #hero .endState { height: 575px; margin: 0 auto; top: 0; width: 848px; }
.app #hero .endState { background: url(/global/elements/quicktime/qt_endstate848x480.jpg) no-repeat 0 0; }
.app #hero .pillbutton { margin-top: 25%; }
.app #hero .video { padding-top: 15px; }
.app #hero .video .close { background: url(/global/elements/buttons/close.png) no-repeat 0 0; color: #888; margin-left: 65px; margin-top: 3px; padding-left: 16px; }

.app #hero h1 { font-size: 0; line-height: 0; margin-left: 39px; margin-bottom: 15px; padding-top: 67px; *position: relative; z-index: 1; }
.app #hero .intro { color: #707070; font-size: 16px; line-height: 21px; margin-left: 45px; margin-bottom: 14px; *position: relative; width: 295px; z-index: 1; }
.app #hero-image { position: absolute; right: 0; top: 0; z-index: 0; }


.app .nav-container { position:relative; }
.app #app-nav { top:-73px; left:0; background: url(/ilife/images/app_nav_bg_20100727.jpg) no-repeat 0% 0%; height:470px; color: #959595; font-size: 20px; height: 68px; padding: 5px 0 0 154px; *position: relative; width: 826px; z-index: 99999; position:absolute; _position:relative; _left:auto; _right:auto; }
.app #app-nav.alt { background-position: 50% 100%; }
.app #app-nav li { color: #252525; float: left; line-height: 68px; text-align: center; width: 337px; z-index:999999; }
.app #app-nav a { color: #555; display: block; text-shadow: #fff 0 1px 0; text-decoration: none; }
.app #app-nav a:hover { color: #08c; }




.app.whatsnew .section { clear: left; float: left; }
.app.whatsnew .section,
.app.whatis #scroll-nav { background: url(/ilife/images/section_border_20100727.png) no-repeat 50% 100%; border: none; font-size: 14px; padding: 60px 104px 40px; width: 772px; }
.app.whatsnew .section.last-section { background: none; }
.app.whatsnew .section h2 { font-size: 28px; letter-spacing: -1px; }

.app.whatis #scroll-nav,
.app.whatsnew #scroll-nav { padding: 45px 40px 40px; width: 900px; _padding-top:0;}
.app #scroll-nav a { color: #000; font-size: 12px; text-decoration: none; width: 165px; }
.app #scroll-nav a .more { background: url(/global/elements/arrows/downarrow_08c.gif) no-repeat 100% 50%; color: #08c; padding-right: 10px; white-space: nowrap; }
.app #scroll-nav a:hover .more { text-decoration: underline; }
.app #scroll-nav strong { display: block; font-size: 13px; margin-top: -10px; *position: relative; z-index: 1; }

.app #bottom-nav { background: url(/ilife/images/bottomnav_bg_20100727.png) repeat-x 0 100%; border-top: 1px solid #e5e5e5; float: left; padding: 0 33px; width: 914px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; }
.app #bottom-nav li { float: left; width: 33%; }
.app #bottom-nav #left { text-align: left; }
.app #bottom-nav #app-switch { text-align: center; }
.app #bottom-nav #right { float: right; text-align: right; }
.app #bottom-nav a { font-size: 16px; line-height: 50px; }
.app #bottom-nav #left a { background: url(/global/elements/arrows/lessarrow_big_08c.gif) no-repeat 0 60%; padding-left: 12px; }
.app #bottom-nav #app-switch a,
.app #bottom-nav #right a { background: url(/global/elements/arrows/morearrow_big_08c.gif) no-repeat 100% 60%; padding-right: 12px; }

/*.app.whatis #scroll-nav { margin-left: 0; padding-top: 0; }*/
.app.whatis .section { border-bottom: 1px solid #e5e5e5; clear: left; float: left; padding: 50px 50px 75px; position: relative; width: 880px; z-index: 0; }
.app.whatis .section.last-section { padding-bottom: 0; border-bottom:0; }

.app.whatis .link-to-top { margin-bottom: 0; position: absolute; right: 32px; bottom: 8px; }
.app.whatis .link-to-top .scrollToAnchor { background: url(/global/elements/arrows/uparrow_08c.gif) no-repeat 100% 50%; padding-right: 12px; }

.app.whatis .section .title { clear: left; float: left; margin-right: 20px; width: 224px; }
.app.whatis .section .title .section-icon {  }
.app.whatis .section .title h2 { font-size: 28px; line-height: 32px; letter-spacing: -1px; }
.app.whatis .section .title .intro { color: #666; line-height: 20px; }
.app.whatis .section .title .flushleft { margin-left: -50px; position: relative; z-index: 0; }

.app.whatis .section .meat { float: left; margin-top: -4px; position: relative; width: 380px; }
.app.whatis .section .meat h3 { font-size: 16px; }

.app.whatsnew .section .aside,
.app.whatis .section .aside { background: #f5f5f5; background: transparent -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), color-stop(0.5,#f4f4f4), to(#f5f5f5)); clear: right; float: right; margin-bottom: 1.5em; padding: 14px 14px 0; position: relative; width: 199px; z-index: 1; -webkit-box-shadow: inset rgba(0,0,0,0.3) 0 0 3px; -moz-box-shadow: inset rgba(0,0,0,0.3) 0 0 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; }
.app.whatsnew .section .aside img,
.app.whatis .section .aside img { margin: 0 -14px -5px; position: relative; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; }
.app.whatsnew .section .aside { margin: 0 0 0 20px; width: 170px; }

.app.whatis #organize-photos .hero-image { position:relative; top:41px; left:-12px; }
.app.whatis #retouch .hero-image { position:relative; top:36px; left:2px; }
.app.whatis #share .hero-image { position:relative; top:31px; left:-13px; }
.app.whatis #slideshows .hero-image { position:relative; top:11px; left:2px; }
.app.whatis #books .hero-image { position:relative; left:-50px; }
.app.whatis #organize-photos .hero-image,
.app.whatis #retouch .hero-image,
.app.whatis #share .hero-image,
.app.whatis #slideshows .hero-image,
.app.whatis .hero-image { _margin-right: -104px; }

.app.whatis .section .across { margin: 0 -50px; position: relative; z-index: 0; }

/* -- hero callouts -- */
#hero #hero-callout { float: left; margin-left: 45px; position: relative; width: 295px; z-index: 1; }
#hero #hero-callout a { display: block; float: left; }
#hero #hero-callout img { float: left; border: 6px solid #fff; margin-right: 15px; -webkit-box-shadow: rgba(0,0,0,0.25) 0 1px 4px; -moz-box-shadow: rgba(0,0,0,0.25) 0 1px 4px; }
#hero #hero-callout .more { background: url(/global/elements/arrows/morearrow_08c.gif) no-repeat 100% 90%; display: block; float: left; padding: 32px 8px 0 0; text-align: left; width: 110px; }

/* -- callouts -- */
#main .callout { background: #f9f9f9 url(/ilife/images/callout_bg_20100727.png) repeat-x 0 100%; margin: 0 35px 1.5em 0; padding: 12px 17px 18px; width: 170px; -webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 3px, inset rgba(0,0,0,0.1) 0 -1px 5px; -moz-box-shadow: rgba(0,0,0,0.4) 0 1px 3px, inset rgba(0,0,0,0.1) 0 -1px 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; }
#main .callout.right { float: right; margin: 0 0 1.5em 35px; }
#main .callout h4 { font-size: 14px; font-weight: normal; padding-bottom: 7px; }
#main .callout .thumb { border: 5px solid #fff; *border:0; float: left; margin-right: 8px; margin-bottom:10px; outline: 1px solid #ddd; }
#main .callout .thumb img { float: left; *border:1px solid #ddd; *padding:5px; }
#main .callout p { color: #555; font-size: 12px; margin-bottom: 0; clear:both; }

#main .column.last .callout { margin-top: 10px; }

/* --- audio --- */
a.controller { padding: 0; }
a.audioLink { background:transparent none repeat scroll 0 0; float: left; padding-left: 0; z-index: 1; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; }
a.audioLink img { margin-right: 6px; vertical-align: middle; }
a.audioLink { background: transparent none repeat scroll 0 0; float: left; padding-left: 0; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; }
a.controller + a.audioLink { line-height: 28px; }

/* circular controller */
body > .controllerPanel { width:28px; z-index:5; }
.ACQuicktimeCircularController { position:absolute; left:1px; _left:-50px; width:28px; height:28px; margin-top:1px; overflow:hidden; }
.ACMediaCircularController { position:absolute; left:0px; _left:-50px; width:28px; height:28px; margin-top:0px; overflow:hidden; }
.ACQuicktimeCircularController .control{ position:absolute; top:7px; left:5px; margin:0; width:18px; height:18px; overflow:hidden; text-align:center; text-indent:-999px; background-image:none; }
.controllerPanel .ACMediaCircularController .control{ position:absolute; top:6px; left:5px; margin:0; width:18px; height:18px; overflow:hidden; text-align:center; text-indent:-999px; background-image:none; }
.ACQuicktimeCircularController .background, .ACMediaCircularController .background { position:absolute; width:64px; height:28px; left:-36px; top:0; background-image:url(/ilife/images/circular_controller_parts_20100727.png) !important; background-image:expression(none) !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/ilife/images/circular_controller_parts_20100727.png', sizingMethod='crop'); }
.ACQuicktimeCircularController .control.play .background, .ACMediaCircularController .control.play .background { left:0; top:-6px; }
.ACQuicktimeCircularController .control.pause .background, .ACMediaCircularController .control.pause .background { left:-18px; top:-6px; }
.ACQuicktimeCircularController canvas { left:1px; top:2px; width:26px; height:26px; position: absolute;}
.ACMediaCircularController canvas { left:1px; top:1px; width:26px; height:26px; position: absolute;}
#main .controllerPanel .ACMediaCircularController .control.play, #main .controllerPanel .ACMediaCircularController .control.pause { background-image: none; }


/* -- captions -- */
#main .caption { font-size: 12px; }
#main .carousel-item .caption { font-weight: normal; margin: 0; opacity: 0; margin-top: -33px; text-align: center; width: 100%; -webkit-transition: opacity 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: opacity 0.2s ease-out; -moz-transition-delay: 0s; }
#main .carousel-item.active .caption { opacity: 1; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; }

/* aside specific styles */
.app.whatis .section .aside a.controller { padding: 0; }
.app.whatis .section .aside a.audioLink { background:transparent none repeat scroll 0 0; float: left; padding-left: 0; z-index: 1; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; }
.app.whatis .section .aside a.audioLink img { margin: 0 6px 0 0; vertical-align: middle; }
.app.whatis .section .aside a.audioLink { background: transparent none repeat scroll 0 0; float: left; padding-left: 0; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; }
.app.whatis .section .aside a.controller + a.audioLink { line-height: 28px; }

/* -- overview -- */
#overview #hero { background: #fff url(/ilife/images/overview_bg_hero_20100727.png) repeat-x 0 100%; border: 1px solid #fff; height: 671px; position: relative; text-align: center; width: 978px; }
#overview #hero h1 { font-size: 0; margin: 0; padding-top: 44px; }
#overview #hero .intro { color: #7d7d7d; font-size: 20px; margin: 0; line-height: 28px; }
#overview #hero .hero-image { float: left; margin: 0 0 0 49px; position: relative; z-index: 0; }
#overview #hero .caption { clear: left; color: #707070; font-size: 13px; }
#overview #hero-bg { margin: 13px 0 0 11px; }
#overview #hero-ilifebox { position: absolute; top: 320px; left: 0; }

#overview #hero-swap { /*width: 567px;*/width: 661px; height: 367px; margin-bottom: -367px; position: relative; left: 160px; *left: 3px; top: 45px; }
#overview #hero-swap .hero { position: absolute; left: 0; top: 0; }
#overview #hero #hero-swap .caption { margin: 0; position: absolute; top: 440px; text-align: center; width: 661px; }

#overview #hero #hero-nav { overflow:hidden; list-style: none outside; height: 15px; margin: -5px auto 0; position: absolute; bottom: 20px; left: 420px; width: 140px; }
#overview #hero #hero-nav .nav-item { display: block; float: left; height: 15px; margin-right: 5px; text-indent: -9999px; width: 15px; }
#overview #hero #hero-nav .hero-trigger { background: url(/ilife/images/gallerynav_dots_20100727.png) no-repeat 100% 0; display: block; height: 15px; width: 15px; }
#overview #hero #hero-nav .nav-item .hero-trigger:active, 
#overview #hero #hero-nav .nav-item .hero-trigger.active { background-position: 0 0; }

#overview #coming-soon-badge { position: absolute; top: -1px; left: -1px; }
#overview #feature-buckets { margin-top: 1.5em; }
#overview #feature-buckets h3,
#overview #feature-buckets h4 { font-size: 12px; line-height: 18px; margin-bottom: 0; }
#overview #feature-buckets h3 { font-size: 16px; margin-bottom: 4px; }
#overview #feature-buckets .column { background: #fff url(/ilife/images/overview_bucket_bg_20100727.png) repeat-x 0 100%; border-right: 1px solid #e6e6e6; color: #000; display: block; min-height: 355px; margin: 0; padding: 20px 25px 0; position: relative; text-decoration: none; width: 276px; *height: 383px; }
#overview #feature-buckets .column:hover { background: url(/ilife/images/overview_bucket_bg_hover_20100727.png) repeat-x 0 0; }
#overview #feature-buckets .column.last { border: none; width: 276px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; -o-border-radius-topright: 4px; }
#overview #feature-buckets .column.first { -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -o-border-radius-topleft: 4px; }
#overview #feature-buckets .feature-image { position: absolute; bottom: 0; left: 5px; }
#overview #feature-buckets .more { background: url(/global/elements/arrows/morearrow_08c.gif) no-repeat 100% 60%; color: #08c; padding-right: 8px; }
#overview #feature-buckets .column:hover .more { text-decoration: underline; }

#overview #feature-buckets .bucket-callout { background: url(/ilife/images/bucket_callout_bg_20100727.png) repeat-x 0 100%; border: 1px solid #fff; border-width: 0 1px 1px; clear:both; height:51px; width: 978px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; }
#overview #feature-buckets .bucket-callout p { margin: 18px 0 0 75px; color:#222; width: 640px; float:left; }
#overview #feature-buckets .bucket-callout a { display:block; float:left; margin-right:18px; margin-top:13px; padding-bottom:5px; color:#222;;}
#overview #feature-buckets .bucket-callout a.right-border { border-right:1px solid #dbdbdb; margin-right:0; padding-right:15px; }
#overview #feature-buckets .bucket-callout a.left-border { border-left:1px solid #fff; padding-left:15px }
#overview #feature-buckets .bucket-callout a:hover { text-decoration:none; color:#08c; }
#overview #feature-buckets .bucket-callout img { margin-bottom:-10px; }

#overview #strip { background: #fff url(/ilife/images/overview_bg_buystrip_20100727.png) repeat-x 0 100%; margin: 1.5em auto 0; position: relative; width: 980px; }
#overview #strip .column.first h3 {left: 330px; position: absolute; top: 10px; width: 280px;
}
#overview #strip .column h3 { padding-top: 10px; }
#overview #strip .column.first { padding: 5px 20px 16px 0; width: 419px; }
#overview #strip .column.first .left { margin-top: 7px; }
#overview #strip .column.first ul li { padding-bottom: 5px;}
#overview #strip .column.first ul li .upgradenows{ margin: 0;}
#overview #strip .column.last { border-left: 1px solid #e6e6e6; padding: 9px 0 17px 0; width: 326px; }
#overview #strip .column.last .left { margin: 18px 16px 0 0; }
#overview #strip .column.last .last { margin-bottom: 5px; }
#overview #strip #uptodate { position: absolute; left: 0; bottom: 0; }
#overview #strip .upgradenows { margin-left: 130px; margin-top: 4px; }
#overview #strip .column.first ul { left: 330px; position: absolute; top: 70px; width: 310px;
}
#overview #strip ul { font-size: 11px; }


/*--- iLife-specific Buy Now Promo ---*/
#promofooter #promos li.buy { position: relative; float: left; width: 244px; padding-right: 1px; margin-top: -17px; }
#promofooter #promos li.buy p { padding:0 13px; font-size:11px; line-height:1.4em; color:#777; }
#promofooter #promos li.buy a.buynow { margin-top:8px; }
#promofooter #promos li.buy a.upgradenows { margin-top:35px; margin-left:100px;}
#promofooter #promos li.buy .box { position:absolute; right:20px; top:70px; left:75px;}
#promofooter #promos li.buy ul li.view { position:absolute; top:152px; left:81px;}
#promofooter #promos li.buy ul li.downloadnow { position:absolute; font-size:11px; line-height:16px; top:32px; left:16px; padding-right: 10px; }
#promofooter #promos li.buy ul { list-style: none; font-size: 11px; line-height: 16px; color: #777; margin: 22px 0 0; }
#promofooter #promos li.buy ul li.shop { position:absolute; font-size:11px; line-height:16px; width:173px; height:17px; top:47px; left:16px; }
#promofooter #promos li.buy ul li span { color:#333; }
#promofooter #promos li.buy .button a { margin: 9px 0 0; }
#promofooter #promos li.buy .product { position: absolute; top: 15px; left: 135px; }



/*--- Buy Now ---*/
#buy-now #main { background: none; padding: 0; }
#buy-now .content { padding: 20px 50px; font-size: 14px; line-height: 20px; }
#buy-now .content .grid2col .column { padding-top: 26px; width: 45%; }
#buy-now .content .grid2col .column h2 { letter-spacing: -1px; line-height: 32px; }
#buy-now .content .grid2col .column h3 { font-size: 1em; margin-bottom: 0; line-height: 20px; }
#buy-now .content .grid2col .column .more { margin-top: 4px; display: block; float: left; }
#buy-now .content .grid2col .column .buynows { margin: -15px 0 10px -2px; _position: relative; }
#buy-now .content .grid2col .column img.centered { display: block; margin: 0 auto 14px; }
#buy-now .content .grid2col .column.first { border-right: 1px solid #e5e5e5; padding-right: 5%; }
#buy-now .content .grid2col .column.last img.centered { margin-left: -20px; _position: relative; }
#buy-now .content .grid2col .column.last .buynows { margin-bottom: 25px; }
#buy-now .content hr { border: none; *border: 1px transparent solid; border-top: 1px #e5e5e5 solid; margin: 0 0 15px; }
#buy-now .snow-leopard { display: none !important; }
#buy-now.snow-leopard .snow-leopard { display: block !important; }
#buy-now.snow-leopard .non-snow-leopard { display: none !important; }