/* grid */
.column { display:inline; }
.grid3cola .column { width:582px; margin-left:15px; }
.grid3cola .column.first,
.grid3cola .column.last { width:185px; }
.grid3cola .grid3col .column { width:32%; margin-left:13px; }

/* main, content */
body { background:url(images/blank.gif) fixed; }
#content { padding:1.6em 0 0; margin-bottom:-1.6em; }

#main { font-size:11px; line-height:14px; }
#main .sidebar { font-size:11px; line-height:14px; }

#main h3 { margin-bottom:.3em; color:#000; font-size:13px; font-weight:normal; line-height:14px; word-spacing:-.1em; }
#main h4 { margin-bottom:.3em; color:#000; font-size:11px; line-height:14px; }
#main strong { color:#000; }
#main p,
#main ul { margin-bottom:.7em; }

#main a:link,
#main a:visited { text-decoration:none; }
#main a:hover { text-decoration:underline; }

#main .more { padding-right:9px; white-space:nowrap; background:url(images/morearrow_blue.gif) 100% .4em no-repeat; zoom:1; }


/* boxes */
#main .relative {
	position:relative;
	width: 200px;
}
#main .separator { margin:0 -3px; padding:.7em 3px 0; border-top:1px solid #c8c8c8; }

#main .box { margin-bottom:1.6em; color:#666; background:#fdfdfd url(images/box_980_bg.png) repeat-y; }
#main .column .box { background:url(images/box_582_bg.png) repeat-y; }
#main .sidebar .box { background:url(images/box_184_bg.png) repeat-y; }

#main .box .padder { padding:0 15px .6em; }

#main .box .boxcap { clear:both; position:absolute; width:100px; height:5px; left:0; z-index:100; font-size:1px; behavior:url(/global/scripts/lib/iepngfix.htc); }

#main .box .boxcap.captop { top:0; background-image:url(images/box_980_captop.png); }
#main .column .box .boxcap.captop { background-image:url(images/box_582_captop.png); }
#main .sidebar .box .boxcap.captop { background-image:url(images/box_184_captop.png); }

#main .box .boxcap.capbot { bottom:0; _bottom:13px; _position:static; _margin-top:-5px; background-image:url(images/box_980_capbottom.png); }
#main .column .box .boxcap.capbot { position:absolute; background-image:url(images/box_582_capbottom.png); }
#main .sidebar .box .boxcap.capbot { position:absolute; background-image:url(images/box_184_capbottom.png); }

#main .box h2 { float:none !important; margin:0; padding:4px 0 2px 12px; color:#fff; font-size:12px; font-weight:normal; border-bottom:1px solid #6c7b94; background:#72839d url(images/boxtopblue.gif) repeat-x; }
#main .box h2 a { display:block; width:100%; color:#fff; background:url(images/boxtop_linkarrow.gif) 97.5% 40% no-repeat; }
#main .box h2 a:hover { text-decoration:none; }
#main .sidebar .box h2 { width:172px; }

#main .box h2.drawer-handle { position:relative; color:#333; cursor:default; border:#939393; background:#939393 url(images/boxtopgray.gif) repeat-x; }
#main .box h2.drawer-handle.open { color:#fff; cursor:pointer; border-color:#72839d; background:#72839d url(images/boxtopblue.gif) repeat-x; }

/* drawers */
#main ul.drawers { margin:0; overflow:hidden; }
#main ul.drawers li { overflow:hidden; }
#main .slider .drawer-content { display:block; height:auto; overflow:hidden; }

/* why mac
---------------------------*/
#main #whymac { min-height:425px; _height:423px; }
#main #whymac ul { float:left; margin:0 -8px .7em 0; _zoom:1; }
#main #whymac ul li { float:left; margin:0 8px .7em 0; }
#main #whymac ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

#main #whymac #getamac img { margin-bottom: 4px; margin-left: -14px; margin-right: -14px; }
#main #whymac #getamac p { margin-right:-4px; }

#main #whymac #dotmac { clear:both; padding-top:1em; *padding-top:4px; }

#main #whymac #whichmac img { margin-top: 11px; margin-left: -3px; margin-right: -6px; }

/* showcase
---------------------------*/
#main #showcase { height:425px; }
#main #showcase .leadpromo { clear:both; margin-bottom:12px; margin-top: 0px; }
#main #showcase .leadpromo img { _margin-bottom:-3px; }
#main #showcase .promo.last { _width:184px !important; _float:right !important; }

/* latest
---------------------------*/
#main #latest { min-height:425px; _height:423px; overflow:hidden; }
#main #latest .padder { min-height:352px; _height:350px; padding-bottom:0; }

/* where to buy */
#main #latest #wheretobuy .separator { margin-top:18px; padding-top:16px; }

#main #latest #wheretobuy #buyonline { margin-top:0; border:none; }
#main #latest #wheretobuy #buyonline p { margin-right:15px; }

#main #latest #wheretobuy #shopretail { }

#main #latest #wheretobuy #findreseller form .search-wrapper { display:none; }
#main #latest #wheretobuy #findreseller form .search-wrapper,
#main #latest #wheretobuy #findreseller form input.prettysearch { width:150px; }
#main #latest #wheretobuy #findreseller form .search-wrapper input.prettysearch { width:120px; *margin-left:23px; }
#main #latest #wheretobuy .open #findreseller form .search-wrapper { display:block; }

/* hot news */
#main #latest #hotnews ul.stories { margin:0; }
#main #latest #hotnews ul.stories li.story { margin:0; padding:14px 3px 4px; border-top:1px solid #c8c8c8; }
#main #latest #hotnews ul.stories li.story h3 { font-size:11px; line-height:14px; font-weight:bold; }
#main #latest #hotnews ul.stories li.story.leadstory { border:none; }

/* mac@work */
#main #latest #macatwork img.across { margin:1.4em 0 0 -1px; }
#main #latest #macatwork h3 { margin-bottom:.7em; }

#main #latest #macatwork ul { margin-top:1em; margin-bottom:0; }
#main #latest #macatwork ul li { padding:6px 3px; *padding:4px 3px 3px; }
#main #latest #macatwork ul li h3 { margin-bottom:0; _zoom:1; }
#main #latest #macatwork ul li h3 a.more { display:block; text-align:left; background:url(images/morearrow2.gif) no-repeat 100% 1px; }
#main #latest #macatwork ul li h3 a.more:hover { background-position:100% -99px; }

/* videos
---------------------------*/
#main #findouthow { background:#f7f7f7 url(images/findouthow_bg.gif) repeat-x; }
#main #findouthow .gradient { background:url(images/box_980_bg.png) repeat-y; }
#main #findouthow .padder { padding-left:24px; padding-right:1px; }
#main #findouthow h4 { margin:0; padding:.9em 0 .7em; color:#666; font-size:11px; font-weight:normal; }

#main #findouthow .grid3cola { width:auto; }
#main #findouthow .grid3cola .column { width:560px; margin-left:22px; }
#main #findouthow .grid3cola .column.first { width:151px; margin-left:11px !important; }
#main #findouthow .grid3cola .column.last { width:183px; }

/* buttons */
#main #findouthow ul#videoplaylist { margin:-4px 0 0 -13px; padding:0 0 1px; font-size:12px; font-weight:normal; line-height:15px; word-spacing:-.1em; }

#main #findouthow ul#videoplaylist li.button { position:relative; min-height:10.5em; height:auto; _height:10.5em; padding-bottom:6px; text-align:center; zoom:1; background:url(images/button_bg20080403.gif) no-repeat 50% 0; }
#main #findouthow ul#videoplaylist li.button a { display:block; padding:7px 15px 0; color:#666; cursor:pointer; }
#main #findouthow ul#videoplaylist li.button a span { display:none; position:absolute; z-index:10; color:#fff; text-shadow:#000 0 1px 5px; }
#main #findouthow ul#videoplaylist li.button a img { display:block; margin:4px auto 20px; border:1px solid #ddd; }

#main #findouthow ul#videoplaylist li.button a:hover { color:#000; text-decoration:none; }

#main #findouthow ul#videoplaylist li.button.active { background-image:url(images/button_bgactive20080403.gif); }
#main #findouthow ul#videoplaylist li.button.active a { color:#000; cursor:default; outline:none; }
#main #findouthow ul#videoplaylist li.button.active a span { display:block; width:100%; height:28px; left:0; top:31px; text-indent:-9999px; background:url(images/button_nowplaying20080403.png) no-repeat 0 0; }
#main #findouthow ul#videoplaylist li.button.active a span { _background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/button_nowplaying20080403.png', sizingMethod='crop'); }
#main #findouthow ul#videoplaylist li.button.active a img { opacity:.5; -moz-opacity:.5; filter:alpha(opacity=50); }
#main #findouthow.loading ul#videoplaylist li.button.active a span { display:none; }

/* hide the poster */
#main #findouthow .posterFrame { display:none; }

/* quicktime block */
#main #findouthow.loading h4.nowplaying { visibility:hidden; }
#main #findouthow h4.nowplaying { visibility:visible; }

#main #findouthow #quicktime { position:relative; width:560px; }
#main #findouthow #quicktime object { position:absolute; bottom:0; right:0; width:560px; }

#main #findouthow .moviesize16x9,
#main #findouthow .moviesize16x9 object,
#main #findouthow .moviesize16x9 .endstate { height:316px; }
#main #findouthow .moviesize16x10,
#main #findouthow .moviesize16x10 object,
#main #findouthow .moviesize16x10 .endstate { height:351px; }

#main #findouthow.loading #quicktime { position:relative; }
#main #findouthow.loading #quicktime object { bottom:-2px; width:2px; height:2px; }
#main #findouthow.loading #quicktime img { position:absolute; }

/* pill buttons */
#main #findouthow #quicktime ul { padding-top:155px; }
#main #findouthow #quicktime .pillbutton { display:block; min-height:3em; margin:0 auto 1em; padding-right:43px; text-align:center; font-size:15px; line-height:1.3em; }
#main #findouthow #quicktime .pillbutton a { display:inline-block; position:relative; color:#fff; text-decoration:none; outline:none; }
#main #findouthow #quicktime .pillbutton a span,
#main #findouthow #quicktime .pillbutton a b { display:inline-block; width:auto; padding:15px 0; text-align:left; outline:none; cursor:pointer; }
#main #findouthow #quicktime .pillbutton a span { padding-right:8px; padding-left:25px; background:url(images/pillbevel_leftcap.png) no-repeat 0 50%; }
#main #findouthow #quicktime .pillbutton a span { _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pillbevel_leftcap.png', sizingMethod='crop'); } /* for IE6 since the behavior was breaking everything */
#main #findouthow #quicktime .pillbutton a b { position:absolute; width:43px; top:0; right:-43px; text-indent:-9999px; background:url(images/pillbevel_rightcap.png) no-repeat 0 50%; }
#main #findouthow #quicktime .pillbutton a b { _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pillbevel_rightcap.png', sizingMethod='crop'); } /* for IE6 since the behavior was breaking everything */
#main #findouthow #quicktime .poster .pillbutton a b,
#main #findouthow #quicktime .pillbutton a.replay b { _right:-44px; } /* again, IE6 seems to be dumb when the button is narrow */
#main #findouthow #quicktime .pillbutton a b, x:-moz-any-link { top:inherit; margin-top:-15px; } /* this is for firefox because it's dumb when it comes to inline-block */
#main #findouthow #quicktime .pillbutton a b, x:-moz-any-link, x:default { top:0; margin-top:0; } /* this is to reset IE7 because it was reading the above */
#main #findouthow #quicktime .pillbutton a:hover { color:#e6e6e6; }

/* end states */
#main #findouthow #quicktime .endstate { background:#000; }
#main #findouthow #quicktime .endstate img { top:0; opacity:.7; -moz-opacity:.7; filter:alpha(opacity=70); }

/* controller */
#main #findouthow .ACQuicktimeController { visibility:hidden; position:relative; width:470px; padding:6px 0; }
#main #findouthow .ACQuicktimeController.active { visibility:visible; }

#main #findouthow .ACQuicktimeController div.control { width:18px; height:18px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(images/playpause_light.gif) 6px 0 no-repeat; }
#main #findouthow .ACQuicktimeController div.control.pause { background-position:6px -18px; }

#main #findouthow .ACQuicktimeController div.sliderPanel { position:absolute; width:532px; height:9px; top:12px; left:24px; }
#main #findouthow .ACQuicktimeController div.sliderPanel div.track { position:absolute; left:0; width:532px; height:6px; text-align:left; border:1px solid #aaa; background:#ccc; }
#main #findouthow .ACQuicktimeController div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:6px; background:#aaa; overflow:hidden; }
#main #findouthow .ACQuicktimeController div.sliderPanel div.track div.trackProgress { position:absolute; height:6px; background:#fff; overflow:hidden; background-color:#fff; }
#main #findouthow .ACQuicktimeController div.sliderPanel div.track div.playHead { position:absolute; top:-7px; margin-left:-4px; width:11px; height:13px; cursor:pointer; background-image:url(images/pointer_light.gif); }

/* foh nav */
#main #findouthow .fohnav h4 { padding-left:10px; border-left:1px solid #e9e9e9; }

#main #findouthow .fohnav ul { min-height:405px; _height:405px; margin:-5px 0; padding-bottom:2px; font-size:14px; font-weight:normal; border-left:1px solid #e9e9e9; }
#main #findouthow .fohnav ul li { padding-bottom:1px; margin-bottom:-2px; background:url(images/fohnav_separator.gif) no-repeat 12px 0; }
#main #findouthow .fohnav ul li a { clear:both; display:block; min-height:25px; _height:25px; padding:25px 10px 19px; _padding-bottom:14px; color:#333; background:url(images/morearrow2.gif) no-repeat 164px 27px; }
#main #findouthow .fohnav ul li a img { float:left; margin:-8px 4px 0 -1px; }
#main #findouthow .fohnav ul li a em { color:#c5c5c5; font-style:normal; }

#main #findouthow .fohnav ul li#fohnav-music a img { margin-top:-14px; }

#main #findouthow .fohnav ul li.top { background:none; }

#main #findouthow .fohnav ul li a:hover { color:#000; position:relative; text-decoration:none; border-color:#f1f1f1; background-color:#f1f1f1; background-position:164px -173px; _border-color:#e9e9e9; }
#main #findouthow .fohnav ul li a:hover em { color:#bababa; }


/* retail
---------------------------*/
#main #retail { clear:both; background-color:#f7f7f7; }
#main #retail h2 { margin-bottom:1.2em; }
#main #retail h3 { margin-top:.3em; }
#main #retail img.left { margin-bottom:1em; }


/* footer
---------------------------*/
#globalfooter p.sosumi { float:right; color:#999; margin-top:-2.8em; }