@import url(../css/blackout.css);

.column { display:inline; }
#main .hide { display:none; }

/* content header, navigation
-------------------------------------*/

/* product nav 
#productheader h2 a { width: 186px; text-indent: 0; }

body#mac #productheader #pn-mac a,
body#photos #productheader #pn-photos a,
body#movies #productheader #pn-movies a,
body#web #productheader #pn-web a,
body#music #productheader #pn-music a,
body#iwork #productheader #pn-iwork a,
body#mobileme #productheader #pn-mobileme a { color: #999 !important; cursor: default; }*/

/* main, content
-------------------------------------*/
#content { clear:both; margin:0; padding:0 2px; background:#f7f7f7 url(../images/content_bg20080214.gif) repeat-y; }
#main .maincap { width:1000px; height:7px; margin:0; font-size:0; }
#main .maincap.top { position:absolute; z-index:10; background:url(../images/content_bgtop.png) no-repeat; behavior:url(/site/js/iepngfix.htc); }
#main .maincap.bottom { clear:both; margin-top:-7px; background:url(../images/content_bgbottom.gif) no-repeat; }

/* lists */
#main ul,
#main ul li { margin:0; padding:0; }

/* swapper styles
---------------------------------*/

#main #tutorial-container { position:relative; height:515px; margin-bottom:-42px; padding:0 16px; z-index:1; background:#54585a url(../images/content_bggradient20080214.gif) repeat-x 0 100%; }

#main .video { float:left; position:relative; width:640px; height:450px; margin:19px 0 0 20px; padding-bottom:20px; display:inline; }
#main .video,
#main .video .movie-loading,
#main .video .endState { width:640px; height:400px; }

#main .video .movie-loading { background-image:url(/site/overlays/images/qt_loading640x400.gif) repeat 0 0; }
#main .video .endState { width:640px; height:220px; padding-top:180px; text-align:center; background:none; }
#main .video .endState img { position:absolute; top:0; left:0; }

#main #swap { position:relative; height:497px; padding:0 16px; z-index:1; background:#54585a url(../images/content_bggradient20080214.gif) repeat-x 0 0; }
#main #swap .tutorial { position:absolute; padding:0; *width:928px; }

#main .video .controllerPanel .control { background-image:url(../images/qt_playpause.gif); }
#main .video .controllerPanel .timeDisplay { color:#ccc; }
#main .video .controllerPanel .timeDisplay a { color:#ccc; }

.controllerPanel .ACQuicktimeController.ccAvailable { _width:522px !important; _margin-top:6px; _margin-bottom:-6px; _left:0px; }
.cc .controllerPanel .captioningToggle { _margin:0; _left:auto; _right:-595px; }
#toto { _margin-top:-10px; }
.cc #toto { _margin-top:-13px; }

/* featured nav */
#main #swap .featured { float:right; width:225px; min-height:463px; _height:463px; margin:17px 0 0 43px; display:block; font-size:11px; line-height:1.4em; }
#main #swap .featured h2 { margin:0 0 .8em; padding:0 0 0 4px; font-weight:normal; font-size:15px; color:#bbb; }
#main #swap .featured ul { padding-bottom:.3em; }
#main #swap .featured ul li { padding:0 0 6px; }
#main #swap .featured ul li a { display:block; height:50px; padding:5px 10px; color:#fff; text-decoration:none; cursor:pointer; background:url(../images/tutorials_featured_bg.png) no-repeat; _background-image:url(../images/tutorials_featured_bg.gif); }
#main #swap .featured ul li a img { float:right; margin:5px 1px 5px 10px; background:#fff; }
#main #swap .featured ul li a strong { display:block; min-height:2.8em; _height:2.8em; margin-bottom:.2em; color:#fff; }
#main #swap .featured ul li a i { font-style:normal; color:#acacac; }
#main #swap .featured ul li a i.app { float:right; }
#main #swap .featured ul li a span { display:none; margin:.2em 0 0 -1px; padding-left:18px; color:#acacac; background:url(../images/tutorials_featured_nowplaying.gif) no-repeat 0 50%; }
#main #swap .featured ul li a:hover { background-position:0 -60px; }
#main #swap .featured ul li a.active,
#main #swap .featured ul li a.active:hover { text-decoration:none; outline:none; cursor:default; background-position:0 -120px; }
#main #swap .featured ul li a.active i { display:none; }
#main #swap .featured ul li a.active span { display:block; }

/* related galleries */
#main #swap .tutorial.text { width:840px; padding:50px 70px 0; min-height:482px; margin-left:-16px; color:#666; background:#fff url(../images/content_bgwhite20080214.gif) repeat-x scroll 0 100%; }
#main #swap .tutorial.text img { margin-left:50px; }
#main #swap .tutorial.text img.center { display:block; margin-left:auto; margin-right:auto; }
#main #swap .tutorial.text img.across { margin-left:auto; margin-right:auto; }
#main #swap .tutorial.text img.flushtop { margin-top:-49px; }
#main #swap .tutorial.text img.right { margin-left:50px; }
#main #swap .tutorial.text img.flushright { float:right; margin-right:-71px; }
#main #swap .tutorial.text img.left { margin-right:50px; }
#main #swap .tutorial.text img.flushleft { float:left; margin-left:-70px; }
#main #swap .tutorial.text .prelist { padding-bottom:.6em; margin-bottom:0; }
#main #swap .tutorial.text ul,
#main #swap .tutorial.text ol { padding:0 0 1em 1em; margin-bottom:0; }
#main #swap .tutorial.text ul.square { padding-left:2em; }
#main #swap .tutorial.text ul li,
#main #swap .tutorial.text ol li { padding:0 0 .6em; }
#main #swap .tutorial.text dt { font-weight:bold; color:#000; }
#main #swap .tutorial.text dd { padding:0 0 .6em; }
#main #swap .tutorial.text li p.first { margin-top:20px; }
#main #swap .tutorial.text li p { margin-bottom:5px; }
#main #swap .tutorial.text p.indent { margin-left:18px; }

/* related galleries (page specific) */
#main #swap .tutorial.text.multitouch img { position:absolute; bottom:1px; right:140px; }
#main #swap .tutorial.text.keyboardshortcuts ul.first { padding-bottom:0; }
#main #swap .tutorial.text.freezingtable img { margin-top:-19px; }
#main #swap .tutorial.text.datecalculations img { margin-left:19px; }
#main #swap .tutorial.text.viewingformulas img,
#main #swap .tutorial.text.pagethumbnails img, 
#main #swap .tutorial.text.quicklynavigating img { position:absolute; top:0; right:0; }
#main #swap .tutorial.text.trackingbubbles img { position:absolute; right:0; }

/* galleries */
#main #swap .tutorial a.gallery { position:absolute; bottom:-24px; left:499px; width:116px; padding-right:26px; color:#fff; background:url(../images/icon_gallery.gif) no-repeat right 1px; }
#main #swap .tutorial a.gallery:hover { color:#a9e2ff; background-position:right -74px; }
#main #swap .tutorial a.gallery-back { position:absolute; top:430px; right:290px; padding-right:26px; background:url(../images/icon_video.gif) no-repeat 100% 50%; }

/* related galleries */
#main #swap .tutorial div.gallery { display:none; }
#main #swap div.gallery { position:absolute; width:806px; height:418px; top:0; left:0; padding:70px 87px 0; color:#666; background:url(../images/tutorials_gallery_bg20080214.png) no-repeat; }
#main #swap div.gallery .caption { width:225px; margin-bottom:3.6em; }
#main #swap div.gallery .caption h2 { margin:0 0 .3em; font-size:18px; color:#000; }
#main #swap div.gallery .caption h3 { margin:0 0 .6em; }
#main #swap div.gallery .nav { width:225px; }
/*#main #swap div.gallery .nav li { display:inline; }*/
#main #swap div.gallery .nav li a img { display:block; float:left; margin:0 20px 10px 0; padding:3px; border:1px solid #fff; }
#main #swap div.gallery .nav li a.active img { border-color:#ccc; }
#main #swap div.gallery .swapimage { position:absolute; top:55px; right:60px; width:550px; height:370px; border:1px solid #ccc; }
#main #swap div.gallery a.swap-gallery-back { position:absolute; bottom:40px; right:290px; padding-right:26px; background:url(../images/icon_video.gif) no-repeat 100% 50%; }

#main #swap .tutorial.text div.gallery { display:block; height:446px; padding:50px 87px 0 67px; background:none; }
#main #swap .tutorial.text div.gallery .swapimage { position:absolute; top:50px; right:50px; width:400px; height:300px; border:1px solid #ccc; }
#main #swap .tutorial.text div.gallery .caption { width:400px; }
#main #swap .tutorial.text div.gallery .caption h2 {margin-bottom:18px; }
#main #swap .tutorial.text div.gallery .nav { width:400px; margin:330px 0 12px 19px; }

/* click to play state */
#main #swap .tutorial.clicktoplay .video p { padding-top:180px; text-align:center; }
#main #swap .tutorial.clicktoplay .video img { position:absolute; top:0; left:0; }

#main #swap .tutorial.clicktoplay a.controllerPanel { cursor:default; text-decoration:none; }

#main #swap .tutorial.clicktoplay .featured ul li a.active { cursor:pointer; }
#main #swap .tutorial.clicktoplay .featured ul li a.active i { display:block; }
#main #swap .tutorial.clicktoplay .featured ul li a.active span { display:none; }

/* subnav list styles
---------------------------------*/
#main #subnav { padding:1.3em 0 12px; border-top:1px solid #fff; background:url(../images/subnav_bg.gif) repeat-x 0 0; }
#main #subnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
#main #subnav .column { display:inline; margin:0 !important; float:left !important; }
#main #subnav .grid3col .column { width:325px; }

#main #subnav .type { float:left; display:inline; }

#main .tabs #subnav { margin-top:-7px; padding-top:0; border:none; background:url(../images/subnav_bg_tab.gif) repeat-x 0 0; zoom:1; }
#main .tabs #subnav h2.tab { display:inline; *clear:none; }
#main .tabs #subnav h2.tab a { position:relative; float:left; width:145px; margin:0 -40px 1em 30px; padding:16px 14px 9px; z-index:15; outline:none; color:#666; text-align:center; font-size:15px; font-weight:normal; cursor:pointer; outline:none; moz-outline:none; background:url(../images/subnav_tab.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/findouthow/images/subnav_tab.png'); }
#main .tabs #subnav h2.tab.active a { color:#000; background:url(../images/subnav_tab_active.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/subnav_tab_active.png'); }
/*#main .tabs #subnav h2.tab a span.new { display:block; width:145px; margin:-16px -14px -9px; padding:16px 14px 9px; text-align:center; background:url(../images/subnav_tab_new.png) no-repeat; behavior:url(/global/scripts/lib/iepngfix.htc); }*/

#main .tabs #subnav div.tabswap { display:none; }
#main .tabs #subnav div.tabswap.active { display:block; }

#main #subnav .column { display:inline; margin:0 !important; float:left !important; }

#main #subnav .grid2col,
#main #subnav .grid2cola,
#main #subnav .grid2colb,
#main #subnav .grid4col { clear:both; margin-bottom:1em; background:url(../images/subnav_divider20080214.gif) repeat-y 50% top; }
#main #subnav .grid4col { background:none; }

#main #subnav .grid2col .grid2col { background:none; }
#main #subnav .grid2col .grid2col.column { width:490px; }

#main #subnav .grid2cola { background-position:725px top; }
#main #subnav .grid2cola .column.first { width:730px; }
#main #subnav .grid2cola .column.last { width:245px; }

#main #subnav .grid2colb { background-position:240px top; }
#main #subnav .grid2colb .column.first { width:245px; }
#main #subnav .grid2colb .column.last { width:730px; }

#main #subnav .grid2col .grid2col .column,
#main #subnav .grid2cola .grid3col .column,
#main #subnav .grid2colb .grid3col .column,
#main #subnav .grid4col .column { width:240px; }

#main #subnav .category { clear:both; width:240px; margin:0 5px 0 0; font-size:11px; line-height:1.3em; }

#main #subnav h2 { clear:both; font-size:14px; font-weight:normal; line-height:1.3em; margin:0 0 1em 26px; }
#main #subnav h3 { clear:both; margin:0 0 1em 26px; font-weight:normal; font-size:14px; line-height:1.3em; }
#main #subnav h3 span { display:none; }
#main #subnav h4 { margin:0 0 .3em 26px; font-size:12px; line-height:1.3em; }
#main #subnav h5 { font-weight:bold; margin:0 0 .3em 26px; font-size:11px; line-height:1.3em; }

#main #subnav ul { padding:0 20px 2em 5px; font-size:11px; line-height:1.3em; }
#main #subnav ul li { display:inline; }
#main #subnav ul li a { display:block; width:230px; margin:0 0 .1em; padding:0 0 2px 0; color:#777; }
#main #subnav ul li a span { display:block; padding:2px 0 0; }
#main #subnav ul li a span span { display:block; padding:1px 10px 0 21px; }
#main #subnav ul li a:hover { color:#08c; text-decoration:none; }
#main #subnav ul li a.visited span span { background:url(../images/subnav_item_check.gif) no-repeat 5px 3px; }
#main #subnav ul li a.active { color:#000; text-decoration:none; outline:none; cursor:default; background:#e0e0e0 url(../images/subnav_item_bgbottom.gif) no-repeat 0 100%; }
#main #subnav ul li a.active span { background:url(../images/subnav_item_bgtop.gif) no-repeat 0 0; }
#main #subnav ul li a.active span span { background:url(../images/subnav_item_play.gif) no-repeat 3px 0; }
#main #subnav ul li a {_width:225px;}
#main #subnav ul {_padding-right:5px;}
#main #subnav .category {_width:230px;}


/* page specific
------------------------*/
#main #swap .tutorial.text { min-height:430px; }
#main #subnav .type#video { clear:both; width:245px; background:transparent url(../images/subnav_divider20080214.gif) repeat-y scroll 99% top; }
#main #subnav .type#text { width:730px; _width:720px; }
#main #subnav .type#text.grid3col .column { width:242px; _width:230px; margin:0; /*FMI*/background:transparent url(../images/subnav_divider20080214.gif) repeat-y scroll 99% top;}
#main #subnav .type#text.grid3col .column.last { margin-left:10px;/*FMI*/background:transparent url(none) repeat-y scroll 99% top; }



/* don't show quicktime stuff */
#main #subnav .poster,
#main #subnav .endstate,
#main #subnav .gallery,
#main #subnav .itunes,
#main #subnav .content { display:none !important; }


/* contentfooter
------------------
#contentfooter { clear:both; width:984px; margin:18px auto 0; color:#666; background:url(../images/contentfooter_bgmiddle.gif) repeat-y; }
#contentfooter .cap { height:12px; margin:0; font-size:1px; }
#contentfooter .cap.top { background:url(../images/contentfooter_bgtop.gif) no-repeat top left; }
#contentfooter .cap.bottom { background:url(../images/contentfooter_bgbottom.gif) no-repeat bottom left; }

#contentfooter .gradient { margin:0 2px; background:url(../images/contentfooter_bggradient.gif) repeat-x top; position:relative; }

#contentfooter .grid2col { background:url(../images/contentfooter_bgseparator.png) repeat-y center; _background-image:url(../images/contentfooter_bgseparator.gif); }
#contentfooter .grid2col .column { display:block; width:426px; padding:0 32px; margin:0 !important; }

#contentfooter h4 { margin:1em 0 .3em; color:#000; }
#contentfooter p { margin-bottom:1em; }
#contentfooter img { position:relative; }
#contentfooter img.right { margin-bottom:-9px; _margin-bottom:-21px; }
#contentfooter img.flushtop { margin-top:-11px; }
#contentfooter img.flushright { margin-right:-33px; }
#contentfooter a.arrow { position:relative; }


#contentfooter #cf-guidedtours img.right { margin-top:7px; margin-right:-29px; margin-left:-5px; }
#contentfooter #cf-retail h3 img { margin-right:-20px; }
#contentfooter #cf-retail img.right { margin-left:10px; }
-------------------*/

/* print */
@media print { #contentfooter { display:none; } }

#text .column{min-height:295px;}
#main #swap .tutorial.text div.gallery .column{display: block;width:100px}
#main #swap .tutorial.text div.gallery .column.last{float:right;}
#main #swap .tutorial.text.charting div.gallery .nav {
margin:-35px 0px;

}

/*--CHARTING--*/
#main #swap .tutorial.text.charting div.gallery .nav li{display:block; margin-bottom: 5px;}
#main #swap .tutorial.text.charting div.gallery .nav li a {
display:block;
/*float:left;*/
text-align:center;
width:80px;

}
#main #swap .tutorial.text.charting div.gallery .swapimage {
border:1px solid #CCCCCC;
height:463px;
position:absolute;
right:0px;
top:14px;
width:691px;
}
#main #swap .tutorial.text.charting div.gallery .nav {
width:100px;
}
#main #swap .charting div.gallery .nav li a img {
border:0px solid #FFFFFF;
display:block;
float:none;
margin:0px;
padding:2px 2px 2px 10px;
}
#main #swap .tutorial.text.charting{width:856px;}


#main #swap .tutorial.text.charting div.gallery .nav li a {  width:97px; height:71px; margin:0 10px 0 0; padding:6px; font-size:11px; line-height:1.3em; text-decoration:none; background:url(/site/images/overlays/overlay_thumbbg_image20090106.png) no-repeat 0 0; }

#main #swap .tutorial.text.charting div.gallery .nav li a.active { outline:none; cursor:default; background-image:url(/site/images/overlays/overlay_thumbbg_image_active20090106.png); }
#main #swap .tutorial.text.charting div.gallery .nav li a i { display:block; margin-top:0px; text-align:center; color:#797c80; font-style:normal; }
#main #swap .tutorial.text.charting div.gallery .nav li a:hover i { color:#08c; }
#main #swap .tutorial.text.charting div.gallery .nav li a.active i { color:#000; font-weight:bold; }
#main #swap .tutorial.text.charting {
min-height:450px;
}
/*--Top Ten--*/

#main #swap .tutorial.text.topten{width:986px;padding:50px 10px 0 0px;}
#main #swap .tutorial.text.topten {min-height:450px;}

#main #swap .tutorial.text.topten  div.gallery{width:886px;}
#main #swap .tutorial.text.topten div.gallery .swapimage {border:1px solid #CCCCCC;height:463px;position:absolute;right:5px;top:14px;width:691px;}

#main #swap .tutorial.text.topten div.gallery ol.nav {margin:-35px 0px 0px 20px;width:225px;font-size: 1em;}
#main #swap .tutorial.text.topten div.gallery {background:transparent none repeat scroll 0 0;display:block;height:446px;padding:50px 87px 0 15px;}
#main #swap .tutorial.text.topten div.gallery .nav li a.active{color:#000 !important;}
/*--PHP--*/

#main #swap .tutorial.text.php{width:986px;padding:50px 10px 0 0px;}
#main #swap .tutorial.text.php {min-height:450px;}

#main #swap .tutorial.text.php  div.gallery{width:886px;}
#main #swap .tutorial.text.php div.gallery .swapimage {border:1px solid #CCCCCC;height:463px;position:absolute;right:5px;top:14px;width:691px;}

#main #swap .tutorial.text.php div.gallery ol.nav {margin:-35px 0px 0px 20px;width:225px;font-size: 1em;}
#main #swap .tutorial.text.php div.gallery {background:transparent none repeat scroll 0 0;display:block;height:446px;padding:50px 87px 0 15px;}
#main #swap .tutorial.text.php div.gallery .nav li a.active{color:#000 !important;}