
/*----- movie overlays -----*/
.overlaypanel .controllerPanel { display:none; }

#main .videooverlay { display:none; }

.overlaypanel.designvideo img.overlayPanelShadowImage { top:-4.6%; left:-3.1%; width:106.2%; height:109.2%; }

.videooverlay { position:relative; width:640px; height:440px; margin:0; padding:30px 50px; }

.videooverlay h2 { margin:0 0 .2em; }

.videooverlay .controllerPanel { display:block; position:absolute; width:640px; bottom:50px; margin:0; padding:0; }
.videooverlay .controllerPanel div.control { position:relative; width:10px; height:10px; margin-top:1px; text-indent:-999px; cursor:pointer; overflow:hidden; background:url(../images/overlay_movie_playpause20070807.gif) left top no-repeat; }
.videooverlay .controllerPanel div.control.pause { background-position:left -10px; }
.videooverlay .controllerPanel div.sliderPanel { position:absolute; top:0; left:16px; height:12px; width:624px; }
.videooverlay .controllerPanel div.sliderPanel div.track { position:absolute; left:0; width:624px; height:12px; text-align:left; background:url(../images/overlay_movie_bgtrack_load20070807.gif) no-repeat; }
.videooverlay .controllerPanel div.sliderPanel div.track div.loadedProgress { position:absolute; top:0; height:12px; background:url(../images/overlay_movie_bgtrack20070807.gif) no-repeat; }
.videooverlay .controllerPanel div.sliderPanel div.track div.trackProgress { position:absolute; height:12px; }
.videooverlay .controllerPanel div.sliderPanel div.track div.playHead { position:absolute; top:0; margin:0 0px; width:11px; height:12px; background:url(../images/bento/qt_pointer20090106.png) no-repeat; cursor:pointer; behavior:url(/js/iepngfix.htc); }

.overlaypanel.trackpad img.overlayPanelShadowImage { display:block; height:118%; left:-4.44%; overflow:visible; position:absolute; top:-8.9%; width:109%; z-index:0; } 
.trackpad .videooverlay { height: 440px; padding-top: 50px; }
.trackpad .videooverlay h2 { margin-top: -25px; }
.trackpad .videooverlay .moviePanel { height: 360px; }
.trackpad .videooverlay .controllerPanel { bottom: 25px; }

.overlaypanel .endState { width:640px; height:200px; padding-top:160px; text-align:center; background:url(../images/overlay_movie_endstate_640x360.jpg) no-repeat 0 0; }



