* updated kskin integration (still mostly broken)
authorMichael Dale <dale@users.mediawiki.org>
Wed, 19 Aug 2009 09:07:58 +0000 (09:07 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Wed, 19 Aug 2009 09:07:58 +0000 (09:07 +0000)
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/skins/kskin/styles.css

index 6e4d5f7..cf1b78c 100644 (file)
@@ -47,7 +47,7 @@ loadGM({
        "mv_generic_missing_plugin" : "You browser does not appear to support the following playback type :  <b>$1<\/b><br \/>Visit the <a href=\"http : \/\/commons.wikimedia.org\/wiki\/Commons : Media_help\">Playback Methods<\/a> page to download a player.<br \/>",
        "mv_for_best_experience" : "For a better video playback experience we recommend : <br \/><b><a href=\"http : \/\/www.mozilla.com\/en-US\/firefox\/upgrade.html?from=mwEmbed\">Firefox 3.5<\/a>.<\/b>",
        "mv_do_not_warn_again" : "Dissmiss for now.",
-       "players" : "Players"
+       "playerselect" : "Players"
 });
 
 var default_video_attributes = {
@@ -115,6 +115,13 @@ var ctrlBuilder = {
                  'options':true,
                  'borders':true
        },
+       menu_items:[
+               'playerselect',
+               'download',
+               'share', 
+               'credits',
+       ],      
+       default_menu_item:'download',
        getControls:function( embedObj ){
                js_log('f:controlsBuilder:: opt:');
                this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
@@ -144,9 +151,7 @@ var ctrlBuilder = {
                                        js_log('not enough space for control component:' + i);
                                }
                        }
-               }
-               //add the options menu
-               o+=this.components['mv_embedded_options'].o( embedObj );
+               }               
                return o;
        },
         /*
@@ -300,9 +305,53 @@ var ctrlBuilder = {
                $j('#' + embedObj.id + ' .j-scrubber').prepend( ctrlBuilder.getMvBufferHtml() );
 
 
-               //options menu
-               $tp.find('.k-menu').hide();
-               $tp.find('.k-options').click(function(){
+               //adds options and bindings: (we do this onClick for faster vidoe tag startup times)  
+               var addMvOptions = function(){
+                       if($j('#' + embedObj.id + ' .k-menu').length != 0 )
+                               return false;
+                               
+                       $j('#' + embedObj.id).prepend( ctrlBuilder.components['mv_embedded_options'].o( embedObj ) );
+                       
+                       //by default its hidden:
+                       $tp.find('.k-menu').hide();
+                       
+                       //output menu-items: 
+                       for(i=0; i < ctrlBuilder.menu_items.length ; i++){
+                       $tp.find('.k-player-btn').click(function(){ 
+                               $target = $j('#' + embedObj.id  + ' .k-menu-screens .menu-player'); 
+                               //gennerate the menu if not already done:
+                               if( $target.children().length == 0 ) 
+                                               embedObj.selectPlaybackMethod();
+                                       
+                                       //now slide in the item:
+                                       if( $target.is(':visible') )
+                                                $target.slideOut("fast");
+                                       else
+                                                $target.slideIn("fast");
+                                                
+                           return false;
+                               });     
+                       }               
+                       $tp.find('.k-download-btn').click(function(){
+                               embedObj.showVideoDownload();
+                   return false;
+                       });
+       
+                       $tp.find('.k-share-btn').click(function(){
+                               embedObj.showEmbedCode();
+                           return false;
+                       });
+                       $tp.find('.k-credits-btn').click(function(){
+                               //@@todo show credits menu screen;
+                               return false;           
+                       });
+               }       
+               
+               //options menu display:                 
+               $tp.find('.k-options').click(function(){      
+                       if($j('#' + embedObj.id + ' .k-menu').length == 0 )
+                               addMvOptions();
+                                                                       
                        var $ktxt = $j(this).find('.ui-icon-k-menu');
                        var $kmenu = $tp.find('.k-menu');
                        if( $kmenu.is(':visible') ){
@@ -316,28 +365,7 @@ var ctrlBuilder = {
                                });
                                $tp.find('.play-btn-large').fadeOut('fast');
                        }
-        });
-
-
-               //videoOptions:
-        $tp.find('.k-player-btn').click(function(){
-                       embedObj.selectPlaybackMethod();
-            return false;
-               });
-
-               $tp.find('.k-download-btn').click(function(){
-                       embedObj.showVideoDownload();
-            return false;
-               });
-
-               $tp.find('.k-share-btn').click(function(){
-                       embedObj.showEmbedCode();
-            return false;
-               });
-               $tp.find('.k-credits-btn').click(function(){
-                       //@@todo show credits menu screen;
-            return false;
-               });
+        });    
 
                //volume binding:
                $tp.find('.k-volume').unbind().btnBind().click(function(){
@@ -414,25 +442,23 @@ var ctrlBuilder = {
                                var o= '' +
                                '<div class="k-menu ui-widget-content" ' +
                                        'style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' +
-                                               '<ul class="k-menu-bar">' +
-                                                       '<li class="k-players-btn"><a href="#player" title="'+ gM('players') +'">'+ gM('players') +'</a></li>' +
-                                                       '<li class="k-download-btn"><a href="#player" title="'+ gM('download')+'">'+gM('download')+'</a></li>' +
-                                                       '<li class="k-share-btn"><a href="#player" title="'+ gM('share')+'">'+gM('share')+'</a></li>' +
-                                                       '<li class="k-credits-btn"><a href="#credits" title="'+ gM('credits')+'">'+gM('credits')+'</a></li>' +
-                                               '</ul>' +
-                                               '<div class="k-menu-screens" style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' +
-                                                       '<div class="k-screen k-players">' +
-                                                               '<h2>' + gM('chose_player')+'</h2>' +
-                                                       '</div>' +
-                                                       '<div class="k-screen k-download">' +
-                                                               '<h2>' + gM('download_clip')+'</h2>' +
-                                                       '</div>' +
-                                                       '<div class="k-screen k-players">' +
-                                                               '<h2>' + gM('share_this_video') + '</h2>' +
-                                                       '</div>' +
-                                                       '<div class="k-screen k-players">' +
-                                                               '<h2>' + gM('video_credits') + '</h2>' +
-                                                       '</div>' +
+                                               '<ul class="k-menu-bar">';                                              
+                                                       //output menu item containers: 
+                                                       for(i=0; i < ctrlBuilder.menu_items.length; i++){               
+                                                               var mk = ctrlBuilder.menu_items[i];                             
+                                                               o+= '<li class="k-' + mk + '-btn">' +
+                                                                               '<a href="#" title="' + gM( mk ) +'">' + gM( mk ) +'</a></li>';
+                                                       }                                                       
+                                               o+='</ul>' +
+                                               //we have to substract the width of the k-menu-bar
+                                               '<div class="k-menu-screens" style="width:' + ( embedObj.playerPixelWidth() -75) +
+                                                       'px; height:' + (embedObj.playerPixelHeight() - ctrlBuilder.height) + 'px;">';
+                                               
+                                               //output menu item containers: 
+                                               for(i=0; i < ctrlBuilder.menu_items; i++){                                                      
+                                                       o+= '<div class="menu-' + ctrlBuilder.menu_items[i] + '"></div>';
+                                               }
+                                                                                                                                       
                                                '</div>' +
                                        '</div>';
                                return o;
@@ -2086,13 +2112,14 @@ embedVideo.prototype = {
                 });
                 return false; //onclick action return false
        },
-       selectPlaybackMethod:function(){
+       selectPlaybackMethod:function( target ){
                //get id (in case where we have a parent container)
                var this_id = (this.pc!=null)?this.pc.pp.id:this.id;
 
                var _this=this;
 //             var out= '<span style="color:#FFF;background-color:black;"><blockquote style="background-color:black;">';
                var out= '';
+               out+='<h2>' + gM('chose_player') + '</h2>';
                var _this=this;
                //js_log('selected src'+ _this.media_element.selected_source.url);
                $j.each( this.media_element.getPlayableSources(), function(source_id, source){
@@ -2115,23 +2142,13 @@ embedVideo.prototype = {
 
                        if (default_player)
                        {
-//                             out += '<img src="'+image_src+'"/>';
-                                out+='<div class="k-screen k-players">' +
-                                     ' <h2>Choose Video Player</h2>' +
-                                     ' <ul>';
-//                             if( ! is_selected )
-//                                     out+='<a href="#" class="sel_source" id="sc_' + source_id + '_' + default_player.id +'">';
-//                             out += source.getTitle()+ (is_selected?'</a>':'') + ' ';
-
+                               out+=' <ul>';
                                //output the player select code:
                                var supporting_players = embedTypes.players.getMIMETypePlayers( source.getMIMEType() );
-//                             out+='<div id="player_select_list_' + source_id + '" class="player_select_list"><ul>';
+
                                for(var i=0; i < supporting_players.length ; i++){
                                        if( _this.selected_player.id == supporting_players[i].id && is_selected ){
-//                                             out+='<li style="border-style:dashed;margin-left:20px;">'+
-//                                                        '<img border="0" width="16" height="16" src="' + mv_skin_img_path + 'plugin.png">' +
-//                                                        supporting_players[i].getName() +
-                                            out+='<li>' + supporting_players[i].getName() +'</li>';
+                                               out+='<li>' + supporting_players[i].getName() +'</li>';
                                        }else{
                                                //else gray plugin and the plugin with link to select
 //                                             out+='<li style="margin-left:20px;">'+
@@ -2139,9 +2156,9 @@ embedVideo.prototype = {
 //                                                                     '<img border="0" width="16" height="16" src="' + mv_skin_img_path + 'plugin_disabled.png">'+
 //                                                                     supporting_players[i].getName() +
 //                                                             '</a>'+
-                                            out+='<li>' +
-                                                 '<a href="#" id="dc_' + source_id + '_' + supporting_players[i].id +'">' +
-                                                 supporting_players[i].getName() + '</a><li>';
+                        out+='<li>' +
+                             '<a href="#" id="dc_' + source_id + '_' + supporting_players[i].id +'">' +
+                             supporting_players[i].getName() + '</a><li>';
                                        }
                                 }
                                 out+='</ul></div>';
@@ -2149,7 +2166,7 @@ embedVideo.prototype = {
                                out+= source.getTitle() + ' - no player available';
                });
 //             out+='</blockquote></span>';
-               this.displayHTML(out);
+               $j(target).html(out);
 
                //set up the click bindings:
                $j('.sel_source').each(function(){
index e2108e8..58ed9cf 100644 (file)
@@ -2,62 +2,62 @@
 /* player styles */\r
 .k-player { width:400px; height:340px; position:relative;} /* inline via jq */\r
 .k-player * { padding:0; margin:0;} /* inline via jq */\r
- .k-edit-bar { }\r
-  .k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}\r
+.k-edit-bar { }\r
+.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}\r
 \r
- .k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */\r
- .k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}\r
-  .k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}\r
-  .k-timer { margin-top:2px;}\r
-  .k-volume-slider { width:26px;}\r
-  .k-control-bar .k-options { width:50px; height:22px; margin-top:-2px; border: solid 1px #aaa; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;}\r
-   span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}\r
- .k-menu { width:400px; height:300px; background:#181818; position:absolute; top:0; left:0; display:none} /* h, w, top inline via jq top:15px*/\r
-  ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */\r
-  .k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}\r
-   .k-menu-bar li a:hover { background-position: -1px -110px;}\r
-   .k-menu-bar li.k-download-btn a { background-position: -51px -141px;}\r
-    .k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;}\r
-   .k-menu-bar li.k-share-btn a { background-position: -51px -172px;}\r
-    .k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}\r
-   .k-menu-bar li.k-credits-btn a { background-position: -51px -203px;}\r
-    .k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;}\r
+.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */\r
+.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}\r
+.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}\r
+.k-timer { margin-top:2px;}\r
+.k-volume-slider { width:26px;}\r
+.k-control-bar .k-options { width:50px; height:22px; text-transform:uppercase; margin-top:-2px; border: solid 1px #aaa; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;}\r
+span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}\r
+.k-menu { z-index:1; width:400px; height:300px; background:#181818; position:absolute;opacity:0.9;filter:alpha(opacity=90); top:0px; left:0px; display:none} /* h, w, top inline via jq top:15px*/\r
+ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */\r
+.k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}\r
+.k-menu-bar li a:hover { background-position: -1px -110px;}\r
+.k-menu-bar li.k-download-btn a { background-position: -51px -141px;}\r
+.k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;}\r
+.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}\r
+.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}\r
+.k-menu-bar li.k-credits-btn a { background-position: -51px -203px;}\r
+.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;}\r
  \r
 .k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */\r
-   .k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}\r
-   .k-menu-screens p { margin: 6px 0;}\r
-   .k-menu-screens a { ;}\r
-    .k-menu-screens a img { border:none;}\r
-   .k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}\r
+.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}\r
+.k-menu-screens p { margin: 6px 0;}\r
+.k-menu-screens a { ;}\r
+.k-menu-screens a img { border:none;}\r
+.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}\r
 \r
 .k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}\r
- .k-edit-screen div { }\r
- .k-edit-screen a { color:#7BB8FC;}\r
-  .k-edit-screen a img { border:none;}\r
+.k-edit-screen div { }\r
+.k-edit-screen a { color:#7BB8FC;}\r
+.k-edit-screen a img { border:none;}\r
 \r
 /* end player */\r
 \r
 .k-slide-window { overflow:hidden;}\r
-.k-screen.k-credits ul { float:left;}\r
-.k-screen.k-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}\r
- .k-screen.k-credits li a { padding:0; background:none;}\r
- .k-screen.k-credits li img { float:left; background:blue;}\r
- .k-screen.k-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}\r
+.k-menu-screens .menu-credits ul { float:left;}\r
+.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}\r
+.k-menu-screens .menu-credits li a { padding:0; background:none;}\r
+.k-menu-screens .menu-credits li img { float:left; background:blue;}\r
+.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}\r
  \r
- a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} \r
-  a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}\r
-  a:hover.k-prev-credit { background-position: 0px -238px;}\r
-  a:hover.k-next-credit { background-position: 0px -260px;}\r
+a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} \r
+a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}\r
+a:hover.k-prev-credit { background-position: 0px -238px;}\r
+a:hover.k-next-credit { background-position: 0px -260px;}\r
   \r
- .k-logo { margin:8px 0 0 1px; display:block;}\r
+.k-logo { margin:8px 0 0 1px; display:block;}\r
  \r
- .k_field_wrap { border: solid 1px #444; margin-bottom:7px;}\r
- .k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}\r
-  .k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}\r
+.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}\r
+.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}\r
+.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}\r
   \r
-  .k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}\r
-   .k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}\r
-   .k-screen.k-share div.ui-state-highlight a:hover { }\r
+.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}\r
+.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}\r
+.k-screen.k-share div.ui-state-highlight a:hover { }\r
   \r
 .k-menu-screens li { height:14px; margin-bottom:6px;}\r
 .k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}\r
@@ -66,9 +66,6 @@
 \r
 .k-options.ui-state-hover { color:blue;}\r
 \r
-.k-players { display:none}\r
-.k-credits { display:nones}\r
-\r
 .ui-state-default .ui-icon, .ui-state-hover .ui-icon { background: url(images/ksprite.png) no-repeat 0 -48px;}\r
 .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}\r
 .ui-state-hover .ui-icon-play { background-position: -16px 0;}
 .ui-state-hover .ui-icon-pause { background-position: -16px -17px;}
 
  \r
- .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */\r
- .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}\r
- .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}\r
- .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}\r
-\r
- .k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}\r
- .k-control-bar .ui-slider-handle { width:8px; height:8px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}\r
- .k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;}
- .k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}\r
+.ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */\r
+.ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}\r
+.ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}\r
+.ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}\r
+
+.k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}\r
+.k-control-bar .ui-slider-handle { width:8px; height:8px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}\r
+.k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;}
+.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}\r
  \r
- .k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}\r
- .k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}\r
- .k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}\r
- .k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  \r
-\r
- .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */\r
- .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }\r
+.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}\r
+.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}\r
+.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}\r
+.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  \r
 \r
- .k-volume.ui-state-hover { margin-left:6px; }\r
+.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */\r
+.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }\r
 \r
- /* move to ie css */\r
- .k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}\r
- span.ui-icon-volume-on { *margin-left:0 !important;}\r
- .ui-state-hover.k-volume { *margin-left:0 !important;}\r
- span.ui-icon-k-menu { *margin-top:3px;}\r
- .k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}\r
- /* end css */\r
+.k-volume.ui-state-hover { margin-left:6px; }\r
 \r
- /* debug only ! */\r
- .k-menu-screens { display:none;}\r
- /* end debug */\r
+/* move to ie css */\r
+.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}\r
+span.ui-icon-volume-on { *margin-left:0 !important;}\r
+.ui-state-hover.k-volume { *margin-left:0 !important;}\r
+span.ui-icon-k-menu { *margin-top:3px;}\r
+.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}\r
+/* end IE css */\r