/* lists */
#main ul,
#main ul li { margin:0; padding:0; }
#main dl dt { display:inline; float:left; font-weight:bold; }
#main dl dd { margin:0 0 18px 30px; }

/* swapper styles
---------------------------------*/
/* default state */
#main #swap { position:relative; height:526px; }

#main #swap div.tutorial { position:absolute; width:902px; height:500px; padding:26px 39px 0; background:#454545 url(/sg/aperture/includes/tutorials/images/swapbg20080206.gif) repeat-x; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; }
#main #swap div.tutorial h2.tutorials { width:86px; height:23px; margin:0; text-indent:-9999px; background:url(/sg/aperture/includes/tutorials/images/title20080206.gif) no-repeat; }

#main #swap div.tutorial .movie { float:left; position:relative; width:640px; height:400px; margin:10px 0 0 0; display:inline; }
#main #swap div.tutorial .movie img { position:absolute; top:0; left:0; }
#main #swap div.tutorial .movie .moviePanel { width:640px; height:400px; }

#main #swap div.tutorial .movie .movie-loading { background:url(/global/elements/quicktime/qt_loading640x400.gif) no-repeat; }
#main #swap div.tutorial .movie .movie-loading object,
#main #swap div.tutorial .movie .movie-loading embed { width:2px; height:2px; }

#main #swap div.tutorial .movie a.quicktime-download { display:block; height:40px; padding:180px 0; text-indent: -99999px; color:#333; font:26px "Lucida Grande", "Lucida Sans Unicode", arial, verdana, sans-serif; font-weight:500; background:url(/global/elements/quicktime/download_quicktime_640x400.jpg) no-repeat; }
#main #swap div.tutorial .movie a.quicktime-download:hover { text-decoration:none; color:#08c; }

#main #swap div.tutorial .movie a.gallery { display:block; position:absolute; display:block; right:0; bottom:0; padding-right:26px; background:url(/sg/aperture/includes/tutorials/images/icon_gallery20080206.gif) no-repeat right 3px; color:#fff; text-align:right; text-decoration:none; }
#main #swap div.tutorial .movie a.gallery:hover { color:#a9e2ff; background-position:right -72px; }

#main #swap div.tutorial .endState { width:640px; height:400px; padding-top:0; text-align:center; }
#main #swap div.tutorial .endState img { position:absolute; top:0; left:0; }

#main #swap div.tutorial .movie .controllerPanel { position:absolute; display:block; top:400px; left:0; background:none; }
#main #swap div.tutorial .movie .controllerPanel .movie-loading { background:none; }

/* featured nav */
#main #swap div.tutorial .featured { float:right; width:225px; margin:-21px 0 0 0; display:inline; font-size:11px; line-height:1.4em; }
#main #swap div.tutorial .featured h2 { margin:0 0 .8em; font-weight:normal; font-size:14px; color:#999; }
#main #swap div.tutorial .featured ul { padding-bottom:.3em; }
#main #swap div.tutorial .featured ul li { padding:0 0 8px; }
#main #swap div.tutorial .featured ul li a { display:block; height:50px; padding:5px 10px; color:#fff; text-decoration:none; cursor:pointer; background:url(/sg/aperture/includes/tutorials/images/featured_bg20080206.png) no-repeat; _background-image:url(/sg/aperture/includes/tutorials/images/featured_bg20080206.gif); }
#main #swap div.tutorial .featured ul li a img { float:right; margin:5px 1px 5px 10px; background:#fff; }
#main #swap div.tutorial .featured ul li a strong { color:#fff; display:block; min-height:2.8em; _height:2.8em; margin-bottom:.2em; }
#main #swap div.tutorial .featured ul li a i { font-style:normal; color:#acacac; }
#main #swap div.tutorial .featured ul li a i.app { float:right; }
#main #swap div.tutorial .featured ul li a span { display:none; margin:.2em 0 0 -1px; padding-left:18px; color:#acacac; background:url(/sg/aperture/includes/tutorials/images/featured_nowplaying20080206.gif) no-repeat 0 50%; }
#main #swap div.tutorial .featured ul li a:hover { background-position:0 -60px; }
#main #swap div.tutorial .featured ul li a.active,
#main #swap div.tutorial .featured ul li a.active:hover { text-decoration:none; outline:none; cursor:default; background-position:0 -120px; }
#main #swap div.tutorial .featured ul li a.active i { display:none; }
#main #swap div.tutorial .featured ul li a.active span { display:block; }

/* related galleries */
#main #swap div.tutorial div.gallery { display:none; }
#main #swap div.gallery { display:block; position:absolute; width:806px; height:461px; top:0; left:0; padding:70px 87px 0; color:#666; background:url(/sg/aperture/includes/tutorials/images/gallery_bg20080206.gif) 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; color:#c2c2c2; }
#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(/sg/aperture/includes/tutorials/images/icon_video20080206.gif) no-repeat 100% 50%; }

/* click to play state */
#main #swap div.tutorial.clicktoplay .movie p { padding-top:175px; text-align:center; }
#main #swap div.tutorial.clicktoplay .movie img { border: 1px solid #373737; }

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

/* bottom part (tutorial nav)
---------------------------------*/
#main #subnav { padding-bottom:1em; zoom:1; }
#main #subnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

#main #subnav .grid4col { display:inline; float:left; width:960px; padding:0 10px; }
#main #subnav .grid4col .column { width:230px; padding-top:10px; margin-left:13px; }

#main #subnav h2 { margin:0 -10px .45em; height:36px; line-height:36px; text-indent:29px; color:#595959; font-size:14px; font-weight:normal; background:#fff url(/sg/aperture/includes/tutorials/images/subnav_header_bg20080206.gif) repeat-x; }
#main #subnav h3,
#main #subnav h4 { margin:0 0 .3em 22px; }
#main #subnav h3 { font-weight:normal; }
#main #subnav h3 span,
#main #subnav h4 span { display:none; }

#main #subnav .category { width:230px; font-size:11px; line-height:1.3em; }
#main #subnav .category ul { padding-bottom:1em; }
#main #subnav .category ul li { padding-bottom:3px; }
#main #subnav .category ul li a { display:block; text-decoration:none; }
#main #subnav .category ul li a span { display:block; color:#7d7d7d; }
#main #subnav .category ul li a span span { padding:3px 5px 2px 22px; }
#main #subnav .category ul li a.visited span span { background:url(/sg/aperture/includes/tutorials/images/subnav_item_check20080206.gif) no-repeat 5px 6px; }

#main #subnav .category ul li a:hover span span { color:#08c; text-decoration:underline; }

#main #subnav .category ul li a.active { color:#000; outline:none; cursor:default; background:#e0e0e0 url(/sg/aperture/includes/tutorials/images/subnav_item_bgbottom20080206.gif) no-repeat 0 100%; }
#main #subnav .category ul li a.active span { background:url(/sg/aperture/includes/tutorials/images/subnav_item_bgtop20080206.gif) no-repeat 0 0; }
#main #subnav .category ul li a.active span span { color:#000; text-decoration:none; outline:none; cursor:default; background:url(/sg/aperture/includes/tutorials/images/subnav_item_play20080206.gif) no-repeat 3px 2px; }