#container { width:984px; }
.column { display:inline; }

/* content header, navigation
-------------------------------------*/
#productheader { border:none; }


/* main, content
-------------------------------------*/
#content { clear:both; width:980px; margin:0 0 18px; padding:0; background:#F7F7F7 url(/euro/finalcutserver/images/content_bg20080214.gif) repeat-y scroll 0 0; }
#content .cap { width:984px; height:7px; margin:0 -2px; font-size:0; }
#content .cap.top { left:0; margin-bottom:0; background:url(/euro/finalcutserver/images/content_stroke_bgtop20080206.png) no-repeat 0 0; behavior:url(/global/scripts/lib/iepngfix.htc); }
#content .cap.bottom { clear:both; margin-top:-7px; background:url(/euro/finalcutserver/images/content_stroke_bgbottom20080206.gif) no-repeat; }
#content .grid2col {padding-top: 0px; }

/* links */
a { text-decoration:none; color:#08c; }
a:hover { text-decoration:underline; }

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

/* quicktime controller */
#main .ACQuicktimeController { position:relative; width:640px; height:12px; padding:0; margin:30px 0 0 0; }
#main .ACQuicktimeController div.control { position:relative; width:10px; height:10px; top:1px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(/euro/finalcutserver/images/overlay_movie_playpause20080206.gif) left top no-repeat; }
#main .ACQuicktimeController div.control.pause { background-position:left -10px; }
#main .ACQuicktimeController div.sliderPanel { position:absolute; top:0; left:16px; height:12px; width:624px; }
#main .ACQuicktimeController div.sliderPanel div.track { position:absolute; left:0; width:624px; height:12px; text-align:left; background:url(/euro/finalcutserver/images/overlay_movie_bgtrack20080206.gif) no-repeat; }
#main .ACQuicktimeController div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:12px; background:url(/euro/finalcutserver/images/overlay_movie_bgtrack_load20080206.gif) no-repeat; }
#main .ACQuicktimeController div.sliderPanel div.track div.trackProgress { position:absolute; height:12px; }
#main .ACQuicktimeController div.sliderPanel div.track div.playHead { position:absolute; top:0; margin:0 1px; width:13px; height:12px; background:url(/euro/finalcutserver/images/overlay_movie_pointer20080206.png) no-repeat; cursor:pointer; behavior:url(/global/scripts/lib/iepngfix.htc); }

/* pill buttons */
#content 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; }
#content 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 */
#content a.pillbutton, x:-moz-any-link, x:default { display:inline-block; width:auto; } /* firefox3 reset */
#content a.pillbutton span,
#content a.pillbutton b { display:block; width:auto; padding:15px 0; text-align:left; }
#content a.pillbutton span { padding-right:8px; padding-left:25px; background:url(/euro/global/elements/buttons/pillbevel_leftcap.png) no-repeat 0 50%; _background-image:url(/euro/global/elements/buttons/pill_leftcap.gif); }
#content a.pillbutton b { position:absolute; width:43px; top:0; right:0; text-indent:-9999px; background:url(/euro/global/elements/buttons/pillbevel_rightcap.png) no-repeat 0 50%; _background-image:url(/euro/global/elements/buttons/pill_rightcap.gif); }
#content a.pillbutton:hover,
#content a.pillbutton:focus { color:#e6e6e6; text-decoration:none; }

/* swapper styles
---------------------------------*/
/* default state */
#main #swap { position:relative; height:500px; margin-top:-7px; padding:26px 20px 0; background:#454545 url(/euro/finalcutserver/tutorials/images/swapbg20080206.gif) repeat-x scroll 0 0; }

#main #swap div.tutorial { position:absolute; width:940px; height:500px; }
#main #swap div.tutorial h2.tutorials { width:86px; height:23px; margin:-3px 22px; text-indent:-9999px; background:url(/euro/finalcutserver/tutorials/images/title20080206.gif) no-repeat 0 0; }

#main #swap div.tutorial .movie { float:left; position:relative; width:640px; height:360px; margin:50px 0 0 20px; display:block; }
#main #swap div.tutorial .movie img { position:absolute; top:-32px; left:0; }
#main #swap div.tutorial .movie .moviePanel { width:640px; height:360px; }

#main #swap div.tutorial .movie .movie-loading { background:url(/euro/global/elements/quicktime/qt_loading640x360.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:160px 0; text-align:center; color:#333; font:26px "Myriad Pro", "MyriadPro", "Lucida Grande", "Lucida Sans Unicode", arial, verdana, sans-serif; font-weight:500; background:url(/euro/global/elements/quicktime/qt_download640x360.jpg) no-repeat; }
#main #swap div.tutorial .movie a.quicktime-download:hover { text-decoration:none; color:#08c; }

#main #swap div.tutorial .endState { width:640px; height:180px; padding-top:180px; 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:360px; }
#main #swap div.tutorial .movie .controllerPanel .movie-loading { background:none; }

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

/* click to play state */
#main #swap div.tutorial.clicktoplay .movie p { padding-top:148px; text-align:center; }

#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 { background-color:#F7F7F7; }
#main #subnav h2 { border-right:1px solid #C8C8C8; margin-bottom:0.6em; background:#FFFFFF url(/euro/finalcutserver/tutorials/images/subnav_header_bg20080206.gif) repeat-x scroll 0 0; color:#595959; font-size:14px; font-weight:normal; height:36px; line-height:36px; text-indent:29px;}

#main #subnav div#swap-list { clear:both; position:relative; height:353px; padding-bottom:2em; }
#main #subnav div#swap-list div.tabswap { position:absolute; top:0; width:100%; }

#main #subnav .column { display:inline; margin:0 !important; float:left !important; }
#main #subnav .column .grid3col { width:1100px; }
#main #subnav .column .grid4col { width:980px; }
#main #subnav .grid2col { width:550px; }

#main #subnav h3 { clear:both; margin:0 0 1em 26px; color:#333; font-weight:normal; font-size:14px; line-height:1.3em; }
#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 .category { clear:both; width:230px; margin:0 5px; font-size:11px; line-height:1.3em; }
#main #subnav .category h4,
#main #subnav .category h5 { margin-left:21px; }
#main #subnav .category ul { padding-bottom:2em; }
#main #subnav .category ul li { margin:0 0 .1em; padding:0 0 2px 0; }
#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 10px 2px 22px; }
#main #subnav .category ul li a.visited span span { background:url(/euro/finalcutserver/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(/euro/finalcutserver/tutorials/images/subnav_item_bgbottom20080206.gif) no-repeat 0 100%; }
#main #subnav .category ul li a.active span { background:url(/euro/finalcutserver/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(/euro/finalcutserver/tutorials/images/subnav_item_play20080206.gif) no-repeat 3px 2px; }