#content .hide { display:none; }

/* pill buttons */
a.pillbutton { display:inline-block; position:relative; padding-right:43px; font-size:15px; line-height:1.3em; color:#fff; text-decoration:none; outline:none; z-index:2; }
a.pillbutton, x:-moz-any-link { display:block; width:14em; margin:0 auto; } /* this is for firefox2 because it's dumb when it comes to inline-block */
a.pillbutton, x:-moz-any-link, x:default { display:inline-block; width:auto; } /* firefox3 reset */
a.pillbutton span,
a.pillbutton b { display:block; width:auto; padding:15px 0; text-align:left; }
a.pillbutton span { padding-right:8px; padding-left:25px; background:url(/ca/global/elements/buttons/pillbevel_leftcap.png) no-repeat 0 50%; _background-image:url(/ca/global/elements/buttons/pill_leftcap.gif); }
a.pillbutton b { position:absolute; width:43px; top:0; right:0; text-indent:-9999px; background:url(/ca/global/elements/buttons/pillbevel_rightcap.png) no-repeat 0 50%; _background-image:url(/ca/global/elements/buttons/pill_rightcap.gif); }
a.pillbutton:hover,
a.pillbutton:focus { color:#e6e6e6; text-decoration:none; }

/* resetting the FOH styles
------------------------*/

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

#content .movie { float:left; position:relative; width:640px; margin:19px 0 0 20px; display:inline; }
#content .movie .moviePanel { width:640px; height:400px; }

#content .clicktoplay .moviePanel { height:220px; padding-top:180px; text-align:center; }
#content .clicktoplay .moviePanel img { position:absolute; top:0; left:0; }
#content .clicktoplay a.controllerPanel { cursor:default; }

#content .movie .moviePanel.movie-loading { background:url(/ca/iwork/images/qt_loading20090106.gif) no-repeat 0 50%; }
#content .movie .moviePanel.movie-loading object,
#content .movie .moviePanel.movie-loading embed { width:2px; height:2px; }
#content .movie .controllerPanel.movie-loading .ACQuickTimeController { display:none; }

#content .movie .endState { width:640px; height:220px; padding-top:180px; text-align:center; background:url(/ca/findouthow/images/qt_endstate.jpg) no-repeat; }

/* featured (right) nav */
#content #featurednav { position:relative; float:right; width:225px; min-height:463px; _height:463px; margin:17px 20px 0 0; display:inline; font-size:11px; line-height:1.4em; }
#content #featurednav h2 { margin:0 0 .8em; padding:0 0 0 4px; font-weight:normal; font-size:15px; color:#bbb; }
#content #featurednav ul { padding-bottom:1px; }
#content #featurednav ul li { padding:0 0 6px; }

#content #featurednav ul li a { display:block; height:50px; padding:5px 10px; color:#fff; text-decoration:none; cursor:pointer; background:url(/ca/findouthow/images/tutorials_featured_bg.png) no-repeat; _background-image:url(/ca/findouthow/images/tutorials_featured_bg.gif); }
#content #featurednav ul li a img { float:right; margin:5px 1px 5px 10px; background:#fff; }
#content #featurednav ul li a strong { display:block; min-height:2.8em; _height:2.8em; margin-bottom:.2em; }
#content #featurednav ul li a i { font-style:normal; color:#acacac; }
#content #featurednav ul li a i.app { float:right; }
#content #featurednav ul li a span { display:none; margin:.2em 0 0 -1px; padding-left:18px; color:#acacac; background:url(/ca/findouthow/images/tutorials_featured_nowplaying.gif) no-repeat 0 50%; }

#content #featurednav ul li a:hover { background-position:0 -60px; }

#content #featurednav ul li a.active,
#content #featurednav ul li a.active:hover { text-decoration:none; outline:none; cursor:default; background-position:0 -120px; }
#content #featurednav ul li a.active i { display:none; }
#content #featurednav ul li a.active span { display:block; }

#content #MASKED-clicktoplay #featurednav ul li a.active i { display:block; }
#content #MASKED-clicktoplay #featurednav ul li a.active span { display:none; }


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

#main #subnav .grid3col .column { width:325px; padding-top:20px; }

#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; margin:0 0 .1em; padding:0 0 2px 0; color:#7d7d7d; }
#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/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/findouthow/images/subnav_item_bgbottom.gif) no-repeat 0 100%; }
#main #subnav ul li a.active span { background:url(/ca/findouthow/images/subnav_item_bgtop.gif) no-repeat 0 0; }
#main #subnav ul li a.active span span { background:url(/ca/findouthow/images/subnav_item_play.gif) no-repeat 3px 0; }

#main #subnav .grid3col ul li a.active { background-image:url(/ca/findouthow/images/subnav_grid3col_item_bgbottom.gif); }
#main #subnav .grid3col ul li a.active span { background-image:url(/ca/findouthow/images/subnav_grid3col_item_bgtop.gif); }
#main #subnav .grid3col ul li a.active span span { background-image:url(/ca/findouthow/images/subnav_item_play.gif); }