/*--- for base ---*/
h1, h2, h3, h4, h5, h6 { color: #000; }
#main p { color: #333; }
#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; }
.sosumi li { line-height: 14px; margin-bottom: 0 !important; padding-bottom: 5px; }


/*--- productheader ---*/
#productheader { border: 0; }
#productheader h2 { background: url(/ilife/images/product_title_20090106.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.iweb	 		#productheader li#pn-ilife a,
body.idvd	 		#productheader li#pn-idvd a,
body.tutorials		#productheader li#pn-tutorials a,
body.resources		#productheader li#pn-resources 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#iweb	 		#productheader li#pn-ilife a,
body#idvd	 		#productheader li#pn-idvd a,
body#tutorials		#productheader li#pn-tutorials a,
body#resources		#productheader li#pn-resources a { color: #999 !important; cursor: default; }


/*--- layout ---*/
html { background-color: #f7f7f7; }
body { margin: 0 auto; background-color: transparent; width: 984px; }
.maincap { position: absolute; width: 984px; height: 7px; left: 0; font-size: 1px; behavior: url(/global/scripts/lib/iepngfix.htc); }
.maincap.top { top: 0; background: url(/ilife/images/content_top_20090106.png) no-repeat; }
.maincap.bottom { bottom: 0; background: url(/ilife/images/content_bottom_20090106.png) no-repeat 0 100%; }
#main { width: 980px; padding: 0 2px; background: url(/ilife/images/content_bg_20090106.png) repeat-y; }
#main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

img.newbadge { position: absolute; top: 1px; right: 2px; }

#whatnav { background: url(/ilife/images/what_shadow_20090106.png) no-repeat 0 100%; padding-top: 1px; position: relative; zoom: 1; height:110px; }
#whatnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#whatnav h2 { margin: 0 auto; height: 56px; background: no-repeat 50% 0; text-indent: -9999px; overflow: hidden; }
#whatnav ul { text-align: center; font-size: 16px; margin-top: 10px; position:absolute; top:54px; left:356px; }
#whatnav ul li { display: block; float: left; height:20px; line-height:20px; padding-left:.75em; /*padding-bottom:12px;*/ }
#whatnav ul li a { display:block; border: none; color: #777; margin: 2px .75em 0 .25em; }
#whatnav ul li a:hover { color: #08c; text-decoration: none; }

body.whatis #whatnav ul li#wn-whatis { border-right: 1px solid #ccc; }
body.whatsnew #whatnav ul li { border-left: 1px solid #ccc; }
body.whatsnew #whatnav ul li#wn-whatis { border-left: 0; }

body.whatis #whatnav ul li#wn-whatis a, 
body.whatsnew #whatnav ul li#wn-whatsnew a { color: #000; cursor: default; padding: 0 0 25px 0; background: url(/iwork/images/what_arrow_20090106.png) no-repeat 50% 100%; z-index:3; }

#content { padding: 0 50px 36px; }
#content h3 { margin-bottom: 9px; font-size: 22px; line-height: 30px; font-weight: normal; }
#content h4 { font-size: 12px; }
#content #hero h1 { margin-bottom: 9px; }
p.intro { font-size: 14px; line-height: 20px; font-weight: normal; }

/*--- content gradient ---*/
#content div.hr { width: 980px; height: 247px; font-size: 1px; margin: 0 -50px -225px; position: relative; background: url(/ilife/images/content_gradient_20090106.png) repeat-x 0 0; }
#content div.hr hr { display: none; }

/*--- river ---*/
#content .row { position: relative; padding-top: 27px; zoom: 1; }
#content .row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#content .row.left p { margin-right: 465px; }
#content .row.right p { margin-left: 465px; }

#content .row img { margin-bottom: 0; }
#content img.left,
#content img.flushleft { float: left; margin: 2px 50px 16px 0; }
#content img.right,
#content img.flushright { float: right; margin: 2px 0 16px 50px; }
#content img.flushleft { margin-left: -50px; margin-right: 0; position: relative; }
#content img.flushright { margin-left: 0; margin-right: -50px; position: relative; }
#content img.flushboth { margin: 2px -50px 16px; }

#content .grid2col { position: relative; }
#content .grid2col .column { width: 415px; }

body.whatis #content .grid2col, 
body.whatsnew #content .grid2col { padding-top: 18px; }

#content p.backtotop { clear: both; text-align: right; margin-bottom: 0; padding-bottom: 18px; }
#content p.backtotop a { background: url(/global/elements/arrows/uparrow_08c.gif) no-repeat 100% 50%; padding-right: 10px; text-align: right; }
#content p.morelink { clear: both; position: relative; text-align: center; font-size: 18px; margin: -36px auto 0; width: 50%; }
#content p.morelink a { background-image: url(/global/elements/arrows/morearrow_big_08c.gif); padding-right: 15px; }


/*--- callout ---*/
#content .callout { float: left; _float: none; position: relative; width: 365px; padding: 14px 15px 18px 14px; background: #f0f3f5 url(/ilife/images/callout_bg20090106.gif) repeat-x left top; border: 1px solid #dcdcdc; border-width: 2px 1px 1px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; zoom: 1; }
#content .callout:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#content .callout a.thumb { display: block; position: relative; float: left; margin: 8px 10px 0 8px; padding: 4px; background: url(/ilife/images/callout_thumbbg20090106.png) no-repeat left top; }
#content .callout a.thumb img { position: relative; top: -9px; left: -9px; padding: 6px 7px; z-index: 2; background: url(/ilife/images/callout_thumbbg20090106.png) no-repeat left top; }
#content .callout a.thumb span.play { display: block; position: absolute; width: 97px; height: 71px; top: 0; left: 0; z-index: 3; background: url(/ilife/images/overlay_thumb_play20090106.png) no-repeat 0 0; behavior: url(/global/scripts/lib/iepngfix.htc); }
#content .callout a.more { white-space: normal; text-align: left; }
#content .callout h4 { margin-left: 137px; margin-top: 0.3em; font: 16px "Myriad Pro", "MyriadPro", "Lucida Grande", "Lucida Sans Unicode", arial, verdana, sans-serif; font-weight: normal; }
#content .callout p { line-height: 1.3; margin-bottom: 0; margin-left: 137px !important; margin-right: 0 !important; width: auto !important; }
#content .callout h4 + p { margin-bottom: 8px; }
#content .callout img.left { margin-bottom: 0; }
#content .callout .enlarge { display: block; position: absolute; top: -12px; left: -12px; width: 22px; height: 21px; z-index: 4; background: url(/global/elements/buttons/icon-enlarge.png) no-repeat left top; behavior: url(/global/scripts/lib/iepngfix.htc); }

/*--- guidedtour ---*/
body.guidedtour #content { padding-top:50px; padding-bottom:45px; }
body.guidedtour #content h1 { margin-bottom:35px; text-align:center; }
body.guidedtour #content .watchlinks { float:left; margin-left:30px; width:200px; }
body.guidedtour #content .watchlinks.watch { margin-left:210px; _display:inline; }
body.guidedtour #content .watchlinks h3 { margin-bottom:0; border-bottom:1px solid #eff0f1; padding-bottom:5px; text-align:center; color:#999; font-size:1em; line-height:18px; font-weight:bold; }
body.guidedtour #content .watchlinks ul { padding:5px 12px 3px; }
body.guidedtour #content .watchlinks ul li { text-align:center; }
body.guidedtour #content .watchlinks ul li.left { float:left; }
body.guidedtour #content .watchlinks ul li.right { float:right; }
body.guidedtour #content #hero { clear:both; margin:0 -50px; padding-top:4px; width:980px; min-height:390px; _height:390px; text-align:center; background:url(/ilife/images/guidedtour_herobg20090106.png) repeat-x 0 14px; }
body.guidedtour p#gtpromo { text-align:center; }
body.guidedtour p#gtpromo a img { padding-right:14px; background:#fff; }

body#ilife-guidedtour #content { padding-bottom:60px; }
body#ilife-guidedtour #content #hero { padding-top:33px; min-height:250px; _height:250px; background-position:0 -45px; }
body#ilife-guidedtour #content .grid2col { padding:0 110px; width:660px; }
body#ilife-guidedtour #content .grid2col .column { width:200px; }
body#ilife-guidedtour #content h2 { margin-bottom:34px; text-align:center; }
body#ilife-guidedtour #content .watchlinks { margin-left:0; }


/*--- system requirements ---*/
body#systemrequirements #content { padding-top: 36px; }
body#systemrequirements #content h1 { font-weight: normal; }


/*--- generic promo footer ---*/
#promofooter { margin-top: 18px; padding-top: 17px; background: url(/promos/images/promofooter_top.png) no-repeat; zoom: 1; _background-image: url(/promos/images/promofooter_top.gif); }
#promofooter #promos { width: 980px; margin-bottom: 0; padding: 0 2px 4px; background: url(/promos/images/promofooter_bottom.png) no-repeat 0 100%; zoom: 1; _background-image: url(/promos/images/promofooter_bottom.gif); }
#promofooter #promos:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; }
#promofooter #promos li.promo { position: relative; float: left; width: 244px; min-height: 15em; _height: 15em; padding-right: 1px; margin-top: -16px; }
#promofooter #promos li.promo a { color: #777; }
#promofooter #promos li.promo:hover a { color:#08c; text-decoration: none; }

#promofooter #promos img { display: block; }
#promofooter #promos img.badge { position:absolute; top:0; right:0; }

#promofooter #promos h4 a, 
#promofooter #promos p a, 
#promofooter #promos ul { display: block; padding-left: 15px; padding-right: 12px; text-align: left; }

#promofooter #promos h4 a { font-size: 18px; font-weight: normal; padding-top: 16px; }
#promofooter #promos p { margin-bottom: 0; }
#promofooter #promos p a { font-size: 11px; line-height: 1.4em; }
#promofooter #promos p a strong { font-weight:normal; color:#333; }
#promofooter #promos a.image { height: 180px; position: absolute; bottom: 0; z-index: 100; }

#promofooter #promos .promo.left p a { width: 105px; }
#promofooter #promos .promo.right p a { width: 105px; left: 121px; }

#promofooter #promos li.buy { position: relative; float: left; width: 244px; padding-right: 1px; margin-top: -17px; }


/*--- iLife-specific Buy Now Promo ---*/
#promofooter #promos li.buy p { padding:0 13px; font-size:11px; line-height:1.4em; color:#777; }
#promofooter #promos li.buy ul { list-style: none; font-size: 11px; line-height: 16px; color: #777; margin: 9px 0 9px 0; }
#promofooter #promos li.buy ul li.shop { margin-right: 75px; }
#promofooter #promos li.buy ul li span { color:#333; }
#promofooter #promos li.buy .button a { padding: 9px 0 0; }
#promofooter #promos li.buy .product { position: absolute; top: 15px; left: 135px; }