@import url(/ca/fr/global/styles/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; }

#productheader h1 a {background-image:url(/ca/fr/findouthow/images/localnav_findouthow20090813.gif);width:261px;}

/* main, content
-------------------------------------*/
#content { clear:both; margin:0; padding:0 2px; background:#f7f7f7 url(/ca/fr/findouthow/images/content_bg20080214.gif) repeat-y; }
#main .maincap { width:984px; height:7px; margin:0; font-size:0; }
#main .maincap.top { position:absolute; z-index:10; background:url(/ca/fr/findouthow/images/content_bgtop.png) no-repeat; behavior:url(/global/scripts/lib/iepngfix.htc); }
#main .maincap.bottom { clear:both; margin-top:-7px; background:url(/ca/fr/findouthow/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(/ca/fr/findouthow/images/content_bggradient20080214.gif) repeat-x 0 100%; }

#main .videoHolder { position: absolute; top: 40px; left: 24px; width:640px; height:450px; padding-bottom:20px; display:inline; }
#main .videoHolder,
#main .videoHolder .movie-loading,
#main .videoHolder .endState { width:640px; height:400px; }

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

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

#main .videoHolder .controllerPanel .control { background-image:url(/ca/fr/findouthow/images/qt_playpause.gif); }
#main .videoHolder .controllerPanel .timeDisplay { color:#ccc; }
#main .videoHolder .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 { position: absolute; top: 20px; left: 713px; width:225px; min-height:463px; _height:463px; 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(/ca/fr/findouthow/images/tutorials_featured_bg.png) no-repeat; _background-image:url(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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 .videoHolder p { padding-top:180px; text-align:center; }
#main #swap .tutorial.clicktoplay .videoHolder 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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/images/subnav_tab_active.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/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(/ca/fr/findouthow/images/subnav_item_bgbottom.gif) no-repeat 0 100%; }
#main #subnav ul li a.active span { background:url(/ca/fr/findouthow/images/subnav_item_bgtop.gif) no-repeat 0 0; }
#main #subnav ul li a.active span span { background:url(/ca/fr/findouthow/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
------------------------*/
#mac #main #swap .tutorial.text { min-height:430px; }
#mac #main #subnav .type#video { clear:both; width:245px; background:transparent url(/ca/fr/findouthow/images/subnav_divider20080214.gif) repeat-y scroll 99% top; }
#mac #main #subnav .type#text { width:730px; _width:720px; }
#mac #main #subnav .type#text.grid3col .column { width:242px; _width:230px; margin:0; }
#mac #main #subnav .type#text.grid3col .column.last { margin-left:10px; }

#photos #main #subnav .type  { background:none; }
#photos #main #subnav .type#text,
#photos #main #subnav .type#video  { width:490px; }
#photos #main #subnav .type#video  { background:url(/ca/fr/findouthow/images/subnav_divider20080214.gif) repeat-y scroll 100% 0; }
#photos #main #subnav .type#text  { clear:none; float:right; *margin-top:60px; }
#photos #main #subnav .grid2col .column { _width:40%; }
#photos #main #MASKED-imageediting-balance img.right { margin-left:20px; }

#movies #main #subnav .type  { background:none; }
#movies #main #subnav .type#text,
#movies #main #subnav .type#video  { width:490px; _clear:both; }
#movies #main #subnav .type#video  { background:url(/ca/fr/findouthow/images/subnav_divider20080214.gif) repeat-y scroll 100% 0; }
#movies #main #subnav .type#text  { clear:none; float:right; *margin-top:60px; }
#movies #main #subnav .type .column { width:49%; }
#movies #main #main #swap .last { width:400px; }
#movies #main #main #swap .imagecol { width:450px; }

#web #main #subnav .type  { background:none; }
#web #main #subnav .type#text,
#web #main #subnav .type#video  { width:490px; _clear:both; }
#web #main #subnav .type#video  { background:url(/ca/fr/findouthow/images/subnav_divider20080214.gif) repeat-y scroll 100% 0; }
#web #main #subnav .type#text  { clear:none; float:right; *margin-top:60px; }
#web #main #subnav .type .column { width:49%; }

#music #main #subnav .type  { background:none; }
#music #main #subnav .type#text,
#music #main #subnav .type#video  { width:490px; _clear:both; }
#music #main #subnav .type#video  { background:url(/ca/fr/findouthow/images/subnav_divider20080214.gif) repeat-y scroll 100% 0; }
#music #main #subnav .type#text  { clear:none; float:right; *margin-top:60px; }
#music #main #subnav .type .column { width:49%; }

#mobileme #main #MASKED-galleryapp .videoHolder { height: 360px; }

/* 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(/ca/fr/findouthow/images/contentfooter_bgmiddle.gif) repeat-y; }
#contentfooter .cap { height:12px; margin:0; font-size:1px; }
#contentfooter .cap.top { background:url(/ca/fr/findouthow/images/contentfooter_bgtop.gif) no-repeat top left; }
#contentfooter .cap.bottom { background:url(/ca/fr/findouthow/images/contentfooter_bgbottom.gif) no-repeat bottom left; }

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

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

#contentfooter h4 { margin:5px 0 .3em; color:#000; }
#contentfooter p { margin-bottom: 2px; }
#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:-32px; 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; } }