@import url(http://images.apple.com/global/styles/blackout.css);

/* iwork */
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(/iwork/images/content_top_20090106.png) no-repeat; }
.maincap.bottom { bottom: 0; background: url(/iwork/images/content_bottom_20090106.png) no-repeat; }
#main { width: 980px; padding: 0 2px; background: url(/iwork/images/content_bg20090106.png) repeat-y; }
#main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#content { padding: 0 50px 36px; }
.replaced { display: block; height: 10px; outline: none; overflow: hidden; text-indent: -9999px; width: 10px;  background: no-repeat 0 0; }

img.flushleft { float:left; margin-left: -50px !important; position: relative; }
img.flushright { float:right; margin-right: -50px !important; position: relative; }

a.anchor { background: url(/global/elements/arrows/downarrow_08c.gif) no-repeat 100% 60%; padding-right: 10px; text-align: right; white-space: nowrap; }
#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; }

/* productheader */
#productheader { border: 0; }
#productheader h2 { background: url(/iwork/images/productheader-title-20090106.png) no-repeat; margin-top: 1px; margin-left: 8px; width: 129px; }
#productheader ul li a { color: #333; margin-left: 30px; }
#productheader ul li a:hover { color: #08c !important; }

body.keynote		#productheader li#pn-keynote	a,
body.numbers		#productheader li#pn-numbers	a,
body.pages			#productheader li#pn-pages		a,
body.tutorials		#productheader li#pn-tutorials	a,
body.resources		#productheader li#pn-resources	a { color: #999; }

body#whatis.keynote			#productheader li#pn-keynote	a,
body#whatis.numbers			#productheader li#pn-numbers	a,
body#whatis.pages			#productheader li#pn-pages		a,
body#tutorials.tutorials	#productheader li#pn-tutorials	a,
body#resources.resources	#productheader li#pn-resources	a { color: #999 !important; cursor: default; }

/* what nav */
img.newbadge { position: absolute; top: 3px; right: 4px; }

#whatnav { background: url(/iwork/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; width: 174px; height: 56px; background-repeat: no-repeat; 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 .95em 0 .2em; }
#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%; }

/*whatlink*/
#content p.whatlink a { background: url(/global/elements/arrows/morearrow_big_08c.gif) no-repeat 100% 50%; padding-right: 15px; _position:relative; _zoom:1; }

/* hero */
#hero p.intro { color: #888; font-weight: normal; font-size: 14px; line-height: 19px; margin-bottom: 21px; }

.anchorlist { clear: both; padding-top: 1em; padding-bottom: 1.6em; border-top: 1px solid #e4e4e4; }
.anchorlist .column { position: relative; text-align: left; }
.anchorlist .column h4 a { color: #333; }
.anchorlist .column h4 a:hover { color: #08c; text-decoration:none; }
.anchorlist .column p { margin-bottom: 0; }

.whatsnew #hero,
.whatis #hero { background: url(/iwork/images/what-hero-bg-20090106.gif) repeat-x 0 -20px; min-height: 331px; padding:0 50px;position:relative; width:880px; }

/* content defaults */
.whatsnew #content,
.whatis #content { background: url(/iwork/images/what-content-bg-20090106.gif) repeat-x 0 1px; }

#content h2 { font-size: 22px; font-weight: normal; line-height: 26px; margin: 0 0 0.4em; }

/*--- callout ---*/
#main .callout { position: relative; float: left; width: 365px; padding: 14px 15px 18px 14px; background: #f0f3f5 url(/iwork/images/callout-bg-20090106.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; }
#main .callout:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#main .callout a.thumb { display: block; position: relative; float: left; margin: 8px 10px 0 8px; padding:4px 4px 0; background: url(/iwork/images/callout-thumb-bg-20090106.png) no-repeat left top; }
#main .callout a.thumb img { position: relative; top: -9px; left: -9px; padding: 6px 7px; z-index: 2; background: url(/iwork/images/callout-thumb-bg-20090106.png) no-repeat left top; }
#main .callout a.thumb span.play { cursor: pointer; display: block; position: absolute; width: 97px; height: 71px; top: 0; left: 0; z-index: 3; background: url(/iwork/images/overlay_thumb_play20090106.png) no-repeat 0 0; behavior: url(/global/scripts/lib/iepngfix.htc); }
#main .callout h3 { margin-left: 137px; margin-top: 0.3em; font: 16px "Myriad Pro", "MyriadPro", "Lucida Grande", "Lucida Sans Unicode", helvetica, arial, verdana, sans-serif; font-weight: normal; _margin-left: 148px; }
#main .callout p { line-height: 1.3; margin-bottom: 0; margin-left: 137px !important; width: auto !important; _margin-left: 148px !important; }
#main .callout h3 + p { margin-bottom: 8px; }
#main .callout h3 { margin-bottom:0.1em; }
#main .callout img.left { margin-bottom: 0; }
#main .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); }
#main .callout p a.more { *display:inline; *white-space:normal; *text-align:left; }

/* overview */
#overview #content { padding: 46px 0 0; text-align:left; }

#overview #hero { padding-bottom: 13px; text-align: center; background:url(/iwork/images/overview_herobg20090106.png) no-repeat 50% 320px; }
#overview #hero h1 { margin-bottom: 3px; *margin-bottom: 15px; }
#overview #hero .hero { display: block; clear: both; position: relative; margin: 0 -15px; }

#overview #content .grid4col { background: url(/iwork/images/overview_gradientbg20090106.gif) repeat-x left top; border-top: 1px solid #e7e7e7; margin: 0; width: 980px; }
#overview #content .grid4col .column { border-left: 1px solid #e7e7e7; margin: 0; padding: 22px 32px 131px; width: 179px; }
#overview #content .grid4col .column h3 { font:19px "Myriad Pro", "MyriadPro", "Lucida Grande", "Lucida Sans Unicode", helvetica, arial, verdana, sans-serif; font-weight: normal; _font-size:16px; }
#overview #content .grid4col .column h3 a { color:#333; }
#overview #content .grid4col .column h3 a:hover { text-decoration:none; color:#08c; }
#overview #content .grid4col .column p { margin-bottom:0; }
#overview #content .grid4col .column img.bottom { position:absolute; bottom:0; }

#overview #content .grid4col .column#pages { border: none; }
#overview #content .grid4col .column#pages img.bottom { left:0; }
#overview #content .grid4col .column#numbers img.bottom { left:244px; }
#overview #content .grid4col .column#keynote img.bottom { bottom: 3px; left:506px; z-index: 1; }

#overview #content .grid4col .column#iworkcom { background: #fff; min-height: 260px; width: 206px; padding: 22px 10px 0 32px; position: relative; }
#overview #content .grid4col .column#iworkcom a#iworkcom_comp { position: absolute; top: 45px; right: 10px; }
#overview #content .grid4col .column#iworkcom img.bottom { right:0; }
#overview #content .grid4col .column#iworkcom h3 { display: inline; margin-top: 5px; *font-size: 16px; }
#overview #content .grid4col .column#iworkcom h3.iwork_beta { display: inline-block; margin-top: 36px; padding-top: 6px; background: url(/iwork/images/overview-iworkcom-beta-20090106.png) no-repeat right top; *display: inline; *background-position: 100% 5%;}
#overview #content .grid4col .column#iworkcom p { margin-right: 110px; *margin-bottom: 36px;  }
#overview #content .grid4col .column#iworkcom p.iwork_beta { *margin-bottom: 0; }
#overview #content .grid4col a#iworkcom_screen { position: absolute; bottom: -2px; right: 0; *bottom: 0; }

#overview #content .grid4col .shadow { background: url(/iwork/images/overview-bucket-gradient-20090106.png) no-repeat left top; height: 100%; position: absolute; left: 0; top: 0; width: 12px; /**display: block; */_display: none; behavior: url(/global/scripts/lib/iepngfix.htc); }

/* overview strips */
#strips { margin-top: 13px; }
#strips .column { min-height: 11em; _height:11em; padding: 0 30px; position: relative; width: 427px; }
#strips .column .capbottom { background: url(/iwork/images/buynow-capbottom-20090106.png) no-repeat left bottom; height: 7px; margin-bottom:-7px; position: absolute; bottom: 0; left:0; width: 487px; }
#strips h3 { margin: -3px -30px 0.2em; padding: 35px 30px 0; }
#strips .column p { margin-bottom: 0; }

#strips #trialstrip p { position: relative; z-index: 3; }
#strips #trialstrip .trial_badge { background: url(/iwork/images/badge-freetrial.png) no-repeat left top; height: 65px; position: absolute; top: 0px; right: 0px; width: 74px; z-index: 2; behavior: url(/global/scripts/lib/iepngfix.htc); _right: 0; }

#strips #buynowstrip { position:relative; zoom:1; }
#strips #buynowstrip img.left { margin: 25px 30px 0 -15px; }
#strips #buynowstrip p { float: left; width: 235px; font-size:11px; line-height: 16px; }
#strips #buynowstrip a.buynow { background: url(/iwork/images/button-buynow.png) no-repeat left top; height: 24px; width: 85px; }
#strips #buynowstrip h3 { padding-left: 133px; padding-top: 35px; }

/* overview callout ---*/
#main .callout.overview { width:121px; padding:0; margin-left:6px; border:0; zoom: 1; background:none; }
#main .callout.overview a.thumb { top: -9px; left: -9px; float: none; margin:0; padding:0; background: url(/iwork/images/overview-thumb-bg-20090106.png) no-repeat left top; _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/iwork/images/overview-thumb-bg-20090106.png', sizingMethod='crop'); cursor: pointer; }
#main .callout.overview a.thumb img { top:0; left:0; display:block; padding:9px; background:none; }
#main .callout.overview a.thumb span.text { position:relative; display:block; width:160px; margin-left:-20px; text-align:center; }
#main .callout.overview a.thumb:hover span.text { text-decoration:underline; }
#main .callout.overview a.thumb span.play { position: absolute !important; top:9px; left:9px; margin:0; }

/* iwork everywhere ---*/
#everywhere { width: 918px; margin-top: 15px; padding: 25px 33px 0 33px; }
#everywhere h3 { padding-top: 8px; margin-bottom: 8px; }
#everywhere h4 { margin-bottom: 4px; font-size: 14px; font-weight: normal; }
#everywhere img.left { margin: 0 18px 0 0; }
#everywhere span { display: block; margin-bottom: 2px; }
#everywhere ul { display: inline; }
#everywhere ul li { display: inline; padding-right: 5px; margin-right: 1px; border-right: 1px solid #8c8c8c; *padding-right: 2px; *margin-right: 5px; }
#everywhere ul li.last { border: none; }
#everywhere .column { width: 241px; margin-left: 35px; font-size: 11px; line-height: 14px; color: #666; text-align: center; }
#everywhere .column.first { width: 370px; font-size: 12px; line-height: 18px; color: #333; text-align: left; }
#everywhere .column.last { width: 235px; }
#everywhere .column img { margin-bottom: -4px; }
#everywhere .column p { margin-bottom: 25px; }
#everywhere .column.first p { margin-bottom: 43px; }


/* system requirements */
#requirements #content h1 { padding-top: 1em; }

/* resources */
#resources #content { padding-left: 30px; padding-right: 30px; }
#resources #content h1 { color: #000; font-weight: normal; padding-top: 1em; margin-bottom: 0em; }
#resources #content h2 { background: none; font-size: 18px; color: #333; font-weight: normal; border-top: 1px solid #bcbcbc; padding-top: 11px; margin-bottom: 0.8em; margin-top: 2em; }
#resources #content .column h2 { clear: none; }
#resources #content .column h4,
#resources #content .column p { position: relative; z-index: 3;}
#resources #content select { width:90%; margin:-.6em 0 2em; }
#resources #content .column ul.piped { margin-bottom:1.5em; }
#content .grid3col .column { width: 280px; margin-left: 40px; }

#resources img.reflected { margin-bottom: -10px; position: relative; z-index: 2; }
#resources img#instore { margin-left: -7px; margin-bottom: 18px; position: relative; }

#content .grid3col .sidebar { width: 272px; font-size: 12px; color: #333; padding-top: 35px; }
#content .sidebar .sidebox { position: relative; background: #f2f2f2 url(/iwork/images/sidebox_topcap20080206.gif) no-repeat 0 0; width:222px; padding:18px 25px 5px; margin-bottom:18px; }
#content .sidebar .sidebox .bottomcap { clear: both; position: absolute; bottom:0; left:0; background:#f2f2f2 url(/iwork/images/sidebox_bottomcap20080206.gif) no-repeat 0 100%; padding:0; margin:0; width:272px; height:3px; }
#content .sidebar .sidebox h3 { font-size: 18px; font-weight: normal; margin-bottom: .6em; margin-top:0; color: #333; line-height: 1.2em; }
#content .sidebar .sidebox h4 { font-size: 12px; color: #333; }
#content .sidebar .sidebox hr { clear:both; border:0; height:2px; width:272px; margin:18px -25px; background:url(/iwork/images/sidebox_rule20080206.gif) repeat-x 0 0; }

#content .sidebar .sidebox form { margin-top: 18px; margin-bottom: 18px; }
#content .sidebar .sidebox form label { clear:left; display:block; float:left; margin:2px 0 0 ; width:25%; }
#content .sidebar .sidebox form select { border: 1px solid #bdbdbd; color: #444; height: 21px; margin:0 0 1em; width:75%; }
#content .sidebar .sidebox form input.submit { margin:3px 0 0 150px; }

/* download trial */
#download #content { background: url(/iwork/download-trial/images/trial-bg-20090106.gif) repeat-x 0 320px; padding: 55px 50px; }
#download .iwork h1 { background: url(/iwork/download-trial/images/trial-title-20090106.png) no-repeat left top; height: 77px; margin-bottom: 0; width: 275px; }
#download p.intro { color: #888; font-weight: normal; font-size: 14px; margin-bottom: 36px; width: 325px; }
#download img.flushright { margin-top: 54px; }
#download p.sosumi.last { margin-top: 11px; }
#download p.sosumi { position:relative; top:-50px; _top:0; width:520px; _width:auto; z-index:3; float:left; clear:none; margin-top:0; padding:0 10px;  }

#download .ipad { width: 870px; padding: 32px 55px 36px; background: #fff none; }
#download .ipad img { margin: 0 -15px 0 -18px ; position: relative; }
#download .ipad h1 { font-size: 25px; line-height: 33px; }
#download .ipad p { font-size: 14px; line-height: 22px; }
#download .ipad .grid2col { background: url(/iwork/download-trial/images/div_20100403.gif) repeat-y 435px 0; }
#download .ipad .column { width: 385px; }

/* download thank you */
#thankyou .grid2cola .column.first { width: 575px; }
#thankyou .grid2cola .column.last { border-left: 1px solid #e7e7e7; padding: 1em 0 0 20px; width: 230px; }

#thankyou #content { padding: 55px 50px; width: 880px; }
#thankyou #content h1 { background: url(/iwork/download-trial/images/thanks-title-20090106.png) no-repeat left top; height: 40px; margin-bottom: 0; width: 390px; }
#thankyou #content p.intro { color: #888; font-weight: normal; font-size: 14px; margin-bottom: 36px; }
#thankyou #content h2,
#thankyou #content h3 { color: #000; font-size: 14px; font-weight: bold; }

#thankyou #content .grid3col { margin-top: 3em; }
#thankyou #content .grid3col .column { border: none; padding: 0; width: 28%; }
#thankyou #content .grid3col .column h3 { margin-top: -12px; position: relative; }

#thankyou #get_more h2 { margin-bottom: 3em; }
#thankyou #get_more ul { float: left; width: 100%; }
#thankyou #get_more li { float: left; margin-bottom: 1em; width: 100%; }
#thankyou #get_more li a.right { float: right; margin: 2px 0 16px 20px; }

/*---- New  - Redesigned pages ----*/
.new #main { width:980px !important; }
.new .anchorlist a.block { display:block; }
.new .anchorlist a.block:hover h4 { color:#08c; }
.new .anchorlist a.block, .new .anchorlist a.block:hover h4, .new .anchorlist a.block:hover p { text-decoration:none; }
.new .anchorlist a.block p { color:#333; }

.new.pages .anchorlist .column { margin-left:1.3%; }
.new.pages .anchorlist .column.middle { margin-right:1.3%; }


/*--- system requirements ---*/
body#systemrequirements #content { padding-top: 36px; padding-bottom: 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 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 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; }

/*--- iWork-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: 26px 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; }

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

/*--- 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; padding-bottom: 12px; 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 .buynows,
#buy-now .content .grid2cola .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 p { width: 340px; }
#buy-now .content .grid2col .column.first img.right { margin-left: 0px; margin-right: -15px; _position: relative; }
#buy-now .content .grid2col .column.last { border-left: 1px solid #e5e5e5; padding-left: 5%; padding-bottom: 0; }
#buy-now .content .grid2col .column.last p { margin-bottom: 0; }
#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; }

#buy-now .for-ipad { padding: 2em 0 0; margin: 2em 0 0; border-top: 1px solid #e5e5e5; }
#buy-now .for-ipad .column.first img.right { margin: -3em 0 0 0; }