#content { width:980px; padding:0; border:0; margin-bottom:18px; background:none; }
#content .cap.bottom { bottom:0; left:0; background:url(/euro/finalcutexpress/tutorials/images/tutorials_bgbottom20071115.gif) no-repeat 0 100%; }

/* grid */
.grid2colc .column.first { width:274px; margin:0; }
.grid2colc .column.last { width:640px;  padding:0 32px; margin:0; }

/* main, content */
#content #tutorialbrowser { position:relative; padding:0 1px; background:url(/euro/finalcutexpress/tutorials/images/tutorials_bg20071115.gif) repeat-y; }
#content #tutorialbrowser #intro { position:absolute; top:35px; left:280px; }
#content #tutorialbrowser .grid2colc { min-height:488px; _height:494px; }
#content #tutorialbrowser .cap.top { height:42px; margin:0 -1px; position:static; background:url(/euro/finalcutexpress/tutorials/images/tutorials_title20071115.gif) no-repeat;  }
#content #tutorialbrowser .cap.top h2 { float:left; text-indent:-9999px; }
#content #tutorialbrowser .cap.top a.arrow.shortcuts { display:block; float:right; margin:11px 16px 0 0; font-size:11px; font-weight:normal; background-position:100% .6em; _display:inline; }

/* tutorials list
-------------------------------------*/
#main #tutorialbrowser .slider .ACSliderPreviousArrow, #content #tutorialbrowser .slider .ACSliderNextArrow { cursor: pointer; height: 23px; left: 50%; margin-left: -11px; position: absolute; text-indent: -9999px; top: auto; width: 23px; outline: none; z-index: 11; }
#main #tutorialbrowser .slider .ACSliderPreviousArrow { background: transparent url(/euro/finalcutexpress/tutorials/images/arrow_circle_up20071115.gif) no-repeat 0 0; top: 5px; }
#main #tutorialbrowser .slider .ACSliderNextArrow { background: transparent url(/euro/finalcutexpress/tutorials/images/arrow_circle_down20071115.gif) no-repeat 0 0; bottom: 5px; }
#main #tutorialbrowser .slider .ACSliderPreviousArrow:hover, #content #tutorialbrowser .slider .ACSliderNextArrow:hover { background-position: 0 -23px; }
#main #tutorialbrowser .slider .ACSliderPreviousArrow.inactive, #content #tutorialbrowser .slider .ACSliderNextArrow.inactive { background-position: 0 -46px; cursor: default; }
#main #tutorialbrowser .slider .ACSliderMaskDiv { overflow: hidden; }

#main #tutorialbrowser .sliderwrap { float: left; width: 100%; height: 100%; background: url(/euro/finalcutexpress/tutorials/images/slider_bg20071115.gif) repeat-x 50% 50%; }
#main #tutorialbrowser .slider { position: relative; padding:60px 0 35px;  }
#main #tutorialbrowser .slider ul li { display:block; height:26px; line-height:26px; font-size:11px; }
#main #tutorialbrowser .slider ul li.category { padding-left:20px; color:#333; font-weight:bold; height:24px; border-top:1px solid #f7f7f7; border-bottom:1px solid #e3e3e3; }
#main #tutorialbrowser .slider ul li a { display: block; height: 26px; padding-left:47px; color:#666; background:url(/euro/finalcutexpress/tutorials/images/slider_navbg20071115.gif) no-repeat 0 0; text-decoration: none;  outline: none; }
#main #tutorialbrowser .slider ul li a:hover { background-position:0 -26px; }
#main #tutorialbrowser .slider ul li.new a { background-position:0 -52px; }
#main #tutorialbrowser .slider ul li.new a:hover { background-position:0 -78px; }
#main #tutorialbrowser .slider ul li a.visited, 	
#main #tutorialbrowser .slider ul li.new a.visited { background-position:0 -104px; }
#main #tutorialbrowser .slider ul li a.visited:hover { background-position:0 -130px; }
#main #tutorialbrowser .slider ul li a.active, 
#main #tutorialbrowser .slider ul li a.active:hover, 
#main #tutorialbrowser .slider ul li.new a.active { color: #fff; background-position:0 -156px; }

#main #tutorialbrowser .slider .ACSliderPageNav { position: absolute; top: 34px; width: 234px; padding: 0 20px; line-height: 26px; color: #888; font-size:11px; background: #e8e8e8 url(/euro/finalcutexpress/tutorials/images/slider_pagenavbg20071115.gif) repeat-x 0 100%; }
#main #tutorialbrowser .slider .ACSliderMaskDiv { position:relative; height:391px; _height:398px; }


/* quicktime */
#content #quicktimetitle { font-size:14px; font-weight:normal; line-height:18px; color:#666; margin:12px 0 11px; } 
#content #quicktimetitle span { color:#333; }

#content #quicktime { width:640px; height:400px; }
#content #quicktimecontroller { position:relative; width:640px; padding:0; margin:14px 0 0; }
#content #quicktimecontroller div.control { width:10px; height:10px; margin-top:1px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(/euro/global/elements/overlay/overlay_movie_playpause20070807.gif) left top no-repeat; }
#content #quicktimecontroller div.control.pause { background-position:left -10px; }
#content #quicktimecontroller div.sliderPanel { position:absolute; top:0; left:16px; height:12px; width:624px; }
#content #quicktimecontroller div.sliderPanel div.track { position:absolute; left:0; width:624px; height:12px; text-align:left; background:url(/euro/global/elements/overlay/overlay_movie_bgtrack_load20070807.gif) no-repeat; }
#content #quicktimecontroller div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:12px; background:url(/euro/global/elements/overlay/overlay_movie_bgtrack20070807.gif) no-repeat; }
#content #quicktimecontroller div.sliderPanel div.track div.trackProgress { position:absolute; height:12px; }
#content #quicktimecontroller div.sliderPanel div.track div.playHead { position:absolute; top:0; margin:0 1px; width:13px; height:12px; background:url(/global/elements/overlay/overlay_movie_pointer20070807.png) no-repeat; cursor:pointer; behavior:url(/global/scripts/lib/iepngfix.htc); }


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

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

#main .videoHolder { position: absolute; /* top: 25px; 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 img.splash { margin-left:-30px; }

#main .videoHolder .movie-loading { background-image:url(/euro/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 .videoHolder .endState a.replay.pillbutton { color:#fff; text-decoration:none; }
#main .videoHolder .endState a.replay.pillbutton:hover { color:#e7e7e7; }

#main #swap .tutorial { position:absolute; padding:0; /* *width:928px; */ }

#main .videoHolder .controllerPanel .control { background-image:url(/euro/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; }