- Add full video support:

- Add video player in track page, - Add video download in track page, - Now support mp4 and webm video format, - Fix video support in play page, - Minor bug fixes.
- Add skins directory structure,
2016-05-05 16:17:29 +00:00 · 2015-12-16 23:27:14 +00:00 · 2015-12-16 23:24:12 +00:00
4 changed files with 1239 additions and 241 deletions
--- a/html/lmbrowse.php
+++ b/html/lmbrowse.php
@ -1,8 +1,8 @@
 <?
 // $RCSfile: lmbrowse.php,v $
-// $Revision: 1.17 $
+// $Revision: 1.19 $
 // $Name:  $
-// $Date: 2015/12/04 16:07:30 $
+// $Date: 2016/05/05 16:17:29 $
 // $Author: agibert $

 /*
@ -1392,7 +1392,7 @@ xmlns:dc=\"http://purl.org/dc/elements/1.1/\"

    if( "{$news_tab[$i]["name"]}" != "")
    {
-      echo "    <enclosure url=\"{$news_tab[$i]["aimg"]}\" length=\"".filesize(".{$news_tab[$i]["rimg"]}")."\" type=\"picture/png\" />
+      echo "    <enclosure url=\"{$news_tab[$i]["aimg"]}\" length=\"".filesize("{$news_tab[$i]["rimg"]}")."\" type=\"picture/png\" />
    <link>{$news_tab[$i]["alink"]}</link>
    <description>{$news_tab[$i]["alink"]}</description>
 ";
@ -1866,7 +1866,7 @@ function lmb_track_info_get( $play_type, $play_id, $play_priority, $track_id)
    $min   = intval( $total / 60);
    $sec   = $total - $min * 60;

-    $track_info["length"]        = "{$min}' {$sec}\"";
+    $track_info["length"]        = sprintf( '%02d\' %02d"', $min, $sec);
    $track_info["duration"]      = "PT{$min}M{$sec}S";
    $track_info["safe_creative"] = $tab[10];

@ -1874,6 +1874,15 @@ function lmb_track_info_get( $play_type, $play_id, $play_priority, $track_id)
    $replace_tab = array( "/mp3-192/", ".mp3");

    $track_info["url"]           = "/".str_replace( $search_tab, $replace_tab, "${track_file}");
+
+    if( file_exists( "{$play_path}/.hide" ))
+    {
+	$track_info["hide"]       = "y";
+    }
+    else
+    {
+	$track_info["hide"]       = "n";
+    }
  }

  return( $track_info);
@ -2044,7 +2053,14 @@ function lmb_tracklist_microdata( $play_type, $play_id, $play_priority)
  for( $i = 0; $i < $tracks_nb; $i++)
  {
    echo "                                    <div itemprop=\"tracks\" itemscope=\"itemscope\" itemtype=\"http://schema.org/MusicRecording\">
-                                      <meta itemprop=\"name\"     content=\"{$track_list_info[$i]["title"]} ({$track_list_info[$i]["mix"]})\"/>
+                                      <meta itemprop=\"name\"     content=\"{$track_list_info[$i]["title"]}";
+
+    if( "{$track_list_info[$i]["mix"]}" != "")
+    {
+	echo " ({$track_list_info[$i]["mix"]})";
+    }
+
+    echo "\"/>
                                      <meta itemprop=\"byArtist\" content=\"{$track_list_info[$i]["artist"]}\"/>
                                      <meta itemprop=\"inAlbum\"  content=\"{$track_list_info[$i]["album"]}\"/>
                                      <meta itemprop=\"author\"   content=\"{$track_list_info[$i]["composer"]}\"/>
@ -2294,7 +2310,7 @@ function lmb_coverlist( $play_type, $play_id, $play_priority, $skin_path)
 /* Video File Tab Get                                                                                                 */
 /*--------------------------------------------------------------------------------------------------------------------*/

-function lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $video_id, $mode)
+function lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $video_id, $video_codec, $mode)
 {
  global  $lmb_url_post;

@ -2302,7 +2318,7 @@ function lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $video_id
  $play_path  = lmb_play_path_get( $play_type, $play_id, $play_priority);
  $video_path = "{$play_path}/videos";

-  $cmd  = "ls {$video_path}/{$video_id}-*-*-*.avi | sed -e 's/.*{$play_id}-.*-//' -e 's/.avi$//' | sort -rn";
+  $cmd  = "ls {$video_path}/{$video_id}* | sed -e 's/.*-//' -e 's/\..*$//' | grep -v icon | grep -v poster | sort -rnu";
  exec( $cmd, $video_format_tab);

  $file_tab = array();
@ -2310,7 +2326,8 @@ function lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $video_id
  for( $i = 0; $i < count($video_format_tab); $i++)
  {
    $video_format = "{$video_format_tab[$i]}";
-    $file_url     = "{$video_path}/{$video_id}-*-{$video_format}.avi";
+    $file_url     = "{$video_path}/{$video_id}-{$video_format}.{$video_codec}";
+

    if( count( glob( "{$file_url}")))
    {
@ -2323,9 +2340,56 @@ function lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $video_id
      }
      else
      {
-	$tab                     = glob( "{$file_url}");
-	$file_tab[$i]["url"]     = "{$tab[0]}";
+	$file_tab[$i]["url"]     = "{$file_url}";
+	$size_tab                = lmb_size_convert( filesize( "{$file_tab[$i]["url"]}"));
+      }

+      $file_tab[$i]["format"]  = "{$video_format}";
+      $file_tab[$i]["size"]    = "{$size_tab["size"]}";
+      $file_tab[$i]["unit"]    = "{$size_tab["unit"]}";
+    }
+  }
+
+  return( $file_tab);
+}
+
+
+
+/*--------------------------------------------------------------------------------------------------------------------*/
+/* Video File Tab Get                                                                                                 */
+/*--------------------------------------------------------------------------------------------------------------------*/
+
+function lmb_video_file_tab_get2( $play_type, $play_id, $play_priority, $video_id, $video_codec, $mode)
+{
+  global  $lmb_url_post;
+
+
+  $play_path  = lmb_play_path_get( $play_type, $play_id, $play_priority);
+  $video_path = "{$play_path}/videos";
+
+  $cmd  = "ls {$video_path}/{$video_id}* | sed -e 's/.*-//' | grep -v icon | grep -v poster | sort -rn";
+  exec( $cmd, $video_format_tab);
+
+  $file_tab = array();
+
+  for( $i = 0; $i < count($video_format_tab); $i++)
+  {
+    $video_format = "{$video_format_tab[$i]}";
+    $file_url     = "{$video_path}/{$video_id}-{$video_format}";
+
+
+    if( count( glob( "{$file_url}")))
+    {
+      if( $mode == "MULTI")
+      {
+	$file_tab[$i]["url"] = "{$lmb_url_post}?page=download&amp;type={$play_type}&amp;id={$play_id}&amp;priority={$play_priority}&amp;dtype=video&amp;vformat={$video_format}";
+
+	$file_size           = lmb_download_videos( $play_type, $play_id, $play_priority, $video_format, "SIZE");
+	$size_tab            = lmb_size_convert( $file_size);
+      }
+      else
+      {
+	$file_tab[$i]["url"]     = "{$file_url}";
 	$size_tab                = lmb_size_convert( filesize( "{$file_tab[$i]["url"]}"));
      }

@ -2352,10 +2416,10 @@ function lmb_videolist( $play_type, $play_id, $play_priority, $skin_path)

  ob_start();

-  $cmd="ls {$video_path}/*-icon.png | sed -e 's/-icon.png$//' -e 's/.*\///'";
-  exec($cmd, $video_tab);
+  $cmd="ls {$video_path}/* | sed -e 's/.*\.//' | grep -v \"png\" | sort -ru";
+  exec($cmd, $codec_tab);

-  if( count($video_tab) == 0 || ( file_exists( "{$video_path}/.hide" ) && ! lmb_admin_is()))
+  if( count( $codec_tab) == 0 || ( file_exists( "{$video_path}/.hide" ) && ! lmb_admin_is()))
  {
    echo "			                <tr class=\"videos2\" style=\"height: 60px\"><td class=\"videos1\"></td><td class=\"videos2\">&nbsp;&nbsp;</td></tr>
 			                <tr class=\"videos1\" style=\"height: 110px\"><td class=\"videos1\"><div class=\"sprite-unknown-cover-96\"></div></td><td class=\"videos2\">&nbsp;No video found...&nbsp;</td></tr>
@ -2364,44 +2428,67 @@ function lmb_videolist( $play_type, $play_id, $play_priority, $skin_path)
  }
  else
  {
-    $height = max( 110, ( ( 220 - 30) / count($video_tab)));
-
-    $file_tab  = lmb_video_file_tab_get( $play_type, $play_id, $play_priority, "*", "MULTI");
-
-    $entry_tag = "
-			                <tr class=\"videos0\" style=\"height: 30px\">
-			                  <td class=\"videos2\" colspan=\"4\" style=\"text-align: left;\">&nbsp;&nbsp;All the Videos&nbsp;</td>
+    $codec_nb = count( $codec_tab);
+    $title_tag = "			                  <td class=\"videos2\" rowspan=\"{$codec_nb}\" colspan=\"3\" style=\"text-align: left;\">&nbsp;&nbsp;All the Videos&nbsp;</td>
 ";

-    lmb_file_entry_print( $file_tab, "videos5", "videos6", $entry_tag, count( $file_tab));
+    $file_tab   = array();
+    $max_file_nb = 0;
+
+    foreach( $codec_tab as $codec)
+    {
+      $file_tab[ $codec] = lmb_video_file_tab_get( $play_type, $play_id, $play_priority, "*", "{$codec}", "MULTI");
+      $max_file_nb        = max( $max_file_nb, count( $file_tab[ $codec]));
+    }
+
+    foreach( $codec_tab as $codec)
+    {
+      $entry_tag    = "			                <tr class=\"videos0\" style=\"height: 30px\">
+${title_tag}                                          <td class=\"videos4\">&nbsp;</td>
+                                                      <td class=\"videos4\">&nbsp;{$codec}&nbsp;</td>
+";
+
+      lmb_file_entry_print( $file_tab[ $codec], "videos5", "videos6", "{$entry_tag}", $max_file_nb);
+
+      $title_tag = "";
+    }
+
+
+    $cmd="ls {$video_path}/* | grep -v -- -icon | grep -v -- -poster | sed -e 's/-[0-9][0-9]*p//' -e 's/.*\///' | sort -u";
+    exec($cmd, $video_tab);
+
+    $height = max( 86, ( ( 220 - 30 * $codec_nb) / count($extra_tab)));

    for( $i = 0; $i < count($video_tab); $i++)
    {
-      $tab          = explode( "-", $video_tab[$i]);
-
+      $tab               = explode( ".", "{$video_tab[$i]}");
      $video_id          = "{$tab[0]}";
+      $video_codec       = "{$tab[1]}";
+
+      $tab               = explode( "-", "{$video_id}");
+
+      $video_subid       = "{$tab[0]}";
      $video_track       = "{$tab[1]}";
      $video_mix         = "{$tab[2]}";

      $video_track_name  = ucwords( str_replace( "_", " ", "{$video_track}"));
      $video_mix_name    = ucwords( str_replace( "_", " ", "{$video_mix}"));

-      $video_file        = "{$video_id}-{$video_track}-{$video_mix}";
-
      /* Video Entry */

-      $file_tab  = lmb_video_file_tab_get( $play_type, $play_id, $play_priority, $i+1, "MONO");
+      $file_tab  = lmb_video_file_tab_get( $play_type, $play_id, $play_priority, "{$video_id}", "{$video_codec}", "MONO");

      $css_row   = $i % 2 + 1;

      $entry_tag = "			                <tr class=\"videos{$css_row}\" style=\"height: {$height}px\">
-			                  <td class=\"videos1\"><a href=\"{$file_tab[0]["url"]}\"><img class=\"button-item\" src=\"{$video_path}/{$video_file}-icon.png\" alt=\"\"/></a></td>
-			                  <td class=\"videos2\">&nbsp;{$video_id}&nbsp;</td>
+			                  <td class=\"videos1\"><a href=\"{$file_tab[0]["url"]}\"><img class=\"button-item\" src=\"{$video_path}/{$video_id}-icon.png\" alt=\"\"/></a></td>
+			                  <td class=\"videos2\">&nbsp;{$video_subid}&nbsp;</td>
 			                  <td class=\"videos3\">&nbsp;{$video_track_name}&nbsp;</td>
 			                  <td class=\"videos4\">&nbsp;{$video_mix_name}&nbsp;</td>
+			                  <td class=\"videos4\">&nbsp;{$video_codec}&nbsp;</td>
 ";

-      lmb_file_entry_print( $file_tab, "videos5", "videos6", "{$entry_tag}", count( $file_tab));
+      lmb_file_entry_print( $file_tab, "videos5", "videos6", "{$entry_tag}", $max_file_nb);
    }
  }

@ -2439,8 +2526,8 @@ function lmb_extra_file_tab_get( $play_type, $play_id, $play_priority, $extra_id
    if( "{$extra_format}" != "icon")
    {
      $file_url = "{$extra_path}/{$play_id}-{$extra_id}-{$extra_format}.png";
-      $file_tag = "{$file_tag}<td class=\"extras5\">";
-
+//      $file_tag = "{$file_tag}<td class=\"extras5\">";
+//    echo ("EI: {$extra_id} FMT: {$extra_format} FU: $file_url\n");
      if( count( glob( "{$file_url}")))
      {
 	if( $mode == "MULTI")
@ -2463,7 +2550,7 @@ function lmb_extra_file_tab_get( $play_type, $play_id, $play_priority, $extra_id
    }
  }

-    return( $file_tab);
+  return( $file_tab);
 }


@ -2831,7 +2918,7 @@ function lmb_tracklist_body( $skin_path)
  $size   = $track_nb + 1;
  $height = 220/$size;

-  for( $i = 0, $row = 1; $i < $track_nb; $i++, $row++)
+  for( $i = 0, $row = 1; $i < $track_nb; $i++)
  {
    $css_row    = ($row+1)%2+1;

@ -2844,15 +2931,31 @@ function lmb_tracklist_body( $skin_path)
    $track_mix      = "{$track_info_list[$i]["mix"]}";
    $track_length   = "{$track_info_list[$i]["length"]}";
    $track_album    = "{$track_info_list[$i]["album"]}";
+    $track_hide     = "{$track_info_list[$i]["hide"]}";

    $play_url       = "{$lmb_url_post}?page=play&amp;type={$play_type}&amp;id={$play_id}&amp;priority={$play_priority}";
    $track_url      = "{$lmb_url_post}?page=track&amp;type={$play_type}&amp;id={$play_id}&amp;priority={$play_priority}&amp;tid={$track_id}";

+    $path = lmb_playtype_path_get( $play_type);

-    echo "			                <tr class=\"tracks{$css_row}\" style=\"height: {$height}px;\">";
+    if( "{$track_hide}" == "y")
+    {
+	$hide_flag="*";
+    }
+    else
+    {
+	$hide_flag="";
+    }

-    echo "<td class=\"tracks1\">&nbsp;{$row}&nbsp;</td><td class=\"tracks2\">&nbsp;<div class=\"link-item\"><a href=\"{$track_url}\">{$track_title}</a></div>&nbsp;</td><td class=\"tracks3\">&nbsp;<div class=\"link-item\"><a href=\"{$track_url}\">{$track_mix}</a></div>&nbsp;</td><td class=\"tracks3\">&nbsp;{$track_length}&nbsp;</td><td class=\"tracks3\">&nbsp;{$play_type_name}&nbsp;</td><td class=\"tracks3\">&nbsp;<div class=\"link-item\"><a href=\"{$play_url}\">{$track_album}</a></div>&nbsp;</td></tr>
+    if( ( "{$track_hide}" == "n") || lmb_admin_is())
+    {
+
+	echo "			                <tr class=\"tracks{$css_row}\" style=\"height: {$height}px;\">";
+
+	echo "<td class=\"tracks1\">&nbsp;{$row}&nbsp;</td><td class=\"tracks2\">&nbsp;<div class=\"link-item\"><a href=\"{$track_url}\">{$track_title}{$hide_flag}</a></div>&nbsp;</td><td class=\"tracks3\">&nbsp;<div class=\"link-item\"><a href=\"{$track_url}\">{$track_mix}</a></div>&nbsp;</td><td class=\"tracks3\">&nbsp;{$track_length}&nbsp;</td><td class=\"tracks3\">&nbsp;{$play_type_name}&nbsp;</td><td class=\"tracks3\">&nbsp;<div class=\"link-item\"><a href=\"{$play_url}\">{$track_album}</a></div>&nbsp;</td></tr>
 ";
+	$row++;
+    }
  }

  $data = ob_get_contents();
@ -3118,11 +3221,12 @@ function lmb_jplayer_insert( $play_type, $play_id, $play_priority, $track_id, $t
 			                      <tbody>
 			                        <tr style=\"background-color:#222222; height: 75px;\">
                                                  <td style=\"vertical-align: middle; padding: 10px 0px 0px 0px;\">
-                                                    <audio controls autoplay style=\"width: 90%; \">
+
+                                                    <audio controls autoplay style=\"width: 90%;\">
                                                      <source src=\"http://{$lmb_url_pre}/{$track_file_ogg}\" type=\"audio/ogg\">
                                                      <source src=\"http://{$lmb_url_pre}/{$track_file_mp3}\" type=\"audio/mpeg\">
 Your browser does not support the audio element.
-                                                    </audio> 
+                                                    </audio>
                                                  </td>
 			                        </tr>
 			                        <tr style=\"background-color:#222222; height: 25px;\">
@ -3246,7 +3350,7 @@ To play the media you will need to either update your browser to a recent versio


 /*--------------------------------------------------------------------------------------------------------------------*/
-/* Track Introduction                                                                                                  */
+/* Track Introduction                                                                                                 */
 /*--------------------------------------------------------------------------------------------------------------------*/

 function lmb_track_intro( $play_type, $play_id, $play_priority, $track_id, $track_name, $track_mix, $skin_path)
@ -3284,7 +3388,7 @@ function lmb_track_intro( $play_type, $play_id, $play_priority, $track_id, $trac
 			                    <table class=\"list\" border=\"0\" cellpadding=\"0\" cellspacing=\"10\" style=\"\">
 			                      <tbody>
 			                        <tr class=\"info0\" style=\"height: 0px;\">
-			                          <td class=\"info0\">Informations</td>
+			                          <td class=\"info0\">Information</td>
 			                        </tr>
                                                <tr>
                                                  <td>
@ -3367,6 +3471,137 @@ echo "			                          </td>



+/*--------------------------------------------------------------------------------------------------------------------*/
+/* Track Video                                                                                                        */
+/*--------------------------------------------------------------------------------------------------------------------*/
+
+function lmb_track_video( $play_type, $play_id, $play_priority, $track_id, $track_name, $track_mix, $skin_path)
+{
+  global  $lmb_cookie_tab;
+  global  $lmb_url_pre;
+
+
+  $play_path    = lmb_play_path_get( $play_type, $play_id, $play_priority);
+  $cover_path   = "{$play_path}/covers/{$play_id}-cover";
+  $logo_path    = "{$play_path}/logos/{$play_id}-logo";
+  $track_path   = "{$play_path}/tracks";
+  $video_path   = "{$play_path}/videos";
+
+  $video_res_cookie     = "video_res";
+  $prefix_url           = "{$lmb_url_post}?cookie_id={$video_res_cookie}&cookie_value=";
+  $query_string         = preg_replace( "/cookie_id={$video_res_cookie}&cookie_value=[^&]*&/", "", "{$_SERVER['QUERY_STRING']}");
+  $video_res_1080p_url  = htmlentities( "{$prefix_url}1080p&{$query_string}");
+  $video_res_720p_url   = htmlentities( "{$prefix_url}720p&{$query_string}");
+  $video_res_360p_url   = htmlentities( "{$prefix_url}360p&{$query_string}");
+
+  $video_res            = $lmb_cookie_tab[$video_res_cookie];
+
+  $video_res_tab = array();
+
+  if( "{$video_res}" == "")
+  {
+      $video_res    = "1080p";
+  }
+
+  switch("{$video_res}")
+  {
+    case "1080p":
+    {
+        $video_res_1080p_class = "link-item-disabled";
+        $video_res_720p_class  = "link-item";
+        $video_res_360p_class  = "link-item";
+
+	break;
+    }
+
+    case "720p":
+    {
+        $video_res_1080p_class = "link-item";
+        $video_res_720p_class  = "link-item-disabled";
+        $video_res_360p_class  = "link-item";
+
+	break;
+    }
+
+    case "360p":
+    {
+        $video_res_1080p_class = "link-item";
+        $video_res_720p_class  = "link-item";
+        $video_res_360p_class  = "link-item-disabled";
+
+	break;
+    }
+  }
+
+  if( "{$track_mix}" == "")
+  {
+      $video_file_base = "{$track_id}-{$track_name}";
+  }
+  else
+  {
+      $video_file_base = "{$track_id}-{$track_name}-{$track_mix}";
+  }
+
+   $video_file_ogv  = "{$video_path}/{$video_file_base}-{$video_res}.ogv";
+  $video_file_webm  = "{$video_path}/{$video_file_base}-{$video_res}.webm";
+   $video_file_mp4  = "{$video_path}/{$video_file_base}-{$video_res}.mp4";
+       $poster_file = "{$video_path}/{$video_file_base}-poster.png";
+
+  if( file_exists( "{$video_file_mp4}"))
+  {
+    echo "			<tr>
+";
+    ob_start();
+
+    echo "			                <tr class=\"videos2\" style=\"height: 5px;\">
+			                  <td></td>
+			                  <td></td>
+			                  <td></td>
+			                </tr>
+			                <tr class=\"videos2\">
+			                  <td class=\"videos5\" style=\"width: 5px;\"></td>
+			                  <td class=\"videos2\">
+                                            <video class=\"link-item-big\" style=\"width: 100%; padding: 0px;\" controls  poster=\"http://{$lmb_url_pre}/$poster_file\">
+                                              <source src=\"http://{$lmb_url_pre}/{$video_file_mp4}\"  type=\"video/mp4\">
+                                              <source src=\"http://{$lmb_url_pre}/{$video_file_webm}\" type=\"video/webm\">
+                                              <source src=\"http://{$lmb_url_pre}/{$video_file_ogv}\"  type=\"video/ogg\">
+Your browser does not support the video tag.
+                                            </video> 
+                                          </td>
+			                  <td class=\"videos5\" style=\"width: 5px; \"></td>
+                                        </tr>
+			                <tr style=\"background-color:#222222; height: 25px;\">
+			                  <td class=\"videos5\" style=\"width: 5px;\"></td>
+                                          <td style=\"horizontal-align: left; vertical-align: middle;\">
+	  <div style=\"font-size: 12px;\"><a rel=\"nofollow\" class=\"{$video_res_1080p_class}\" href=\"{$video_res_1080p_url}\">1080p</a>&nbsp;<a rel=\"nofollow\" class=\"{$video_res_720p_class}\" href=\"{$video_res_720p_url}\">720p</a>&nbsp;<a rel=\"nofollow\" class=\"{$video_res_360p_class}\" href=\"{$video_res_360p_url}\">360p</a></div> 
+                                          </td>
+			                  <td class=\"videos5\" style=\"width: 5px;\"></td>
+                                        </tr>
+                                        <tr>
+
+			                  <td class=\"videos5\" style=\"width: 5px; \"></td>
+                                        </tr>
+			                <tr class=\"videos2\" style=\"height: 5px;\">
+			                  <td></td>
+			                  <td></td>
+			                  <td></td>
+			                </tr>
+";
+
+
+    $data = ob_get_contents();
+    ob_end_clean();
+
+    lmb_make_tab( "video", "videos", "r", "/{$logo_path}-1-128.png", $data, $skin_path);
+
+    echo "			</tr>
+			<tr><td><br/><br/><br/><br/><br/></td></tr>
+";
+  }
+}
+
+
+
 /*--------------------------------------------------------------------------------------------------------------------*/
 /* Track Download                                                                                                     */
 /*--------------------------------------------------------------------------------------------------------------------*/
@ -3382,7 +3617,6 @@ function lmb_track_download( $play_type, $play_id, $play_priority, $track_id, $t

  $file_tag   = lmb_track_file_tag_get( $play_type, $play_id, $play_priority, $track_id);

-
  echo "			<tr><td><br/></td></tr>
 			<tr>
 			  <td colspan=\"3\">
@ -3397,7 +3631,21 @@ function lmb_track_download( $play_type, $play_id, $play_priority, $track_id, $t
 			                  <td class=\"title_r\" colspan=\"5\">Download&nbsp;</td>
 			                </tr>
 			                <tr class=\"row3\">{$file_tag}</tr>
-			              </tbody>
+			                <tr class=\"row4\">";
+
+  $file_tab  = lmb_video_file_tab_get( $play_type, $play_id, $play_priority, "{$track_id}-{$track_name}-{$track_mix}", "mp4", "MONO");
+
+  if( count( $file_tab) != 0 && ( ! file_exists( "{$video_path}/.hide" ) || lmb_admin_is()))
+  {
+      for( $i = 0; $i < count($file_tab); $i++)
+      {
+	  $file_tab[$i]["format"]  = "mp4 {$file_tab[$i]["format"]}";
+      }
+
+      lmb_file_entry_print( $file_tab, "tracks7", "tracks6", "{$entry_tag}", 4);
+  }
+
+  echo "			              </tbody>
 			            </table>
                                    <br/>
 			            <table class=\"list\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
@ -3516,6 +3764,9 @@ function lmb_track_body( $play_type, $play_id, $play_priority, $track_id, $skin_
  /* --- Introduction --- */
  lmb_track_intro( $play_type, $play_id, $play_priority, $track_id, $track_name, $track_mix, $skin_path);

+  /* --- Introduction --- */
+  lmb_track_video( $play_type, $play_id, $play_priority, $track_id, $track_name, $track_mix, $skin_path);
+
  /* --- Download --- */
  lmb_track_download( $play_type, $play_id, $play_priority, $track_id, $track_name, $track_mix, $skin_path);
 }
@ -3632,7 +3883,7 @@ function lmb_download_covers( $play_type, $play_id, $play_priority, $cover_forma
 function lmb_download_videos( $play_type, $play_id, $play_priority, $video_format, $mode)
 {
  $play_dir  = lmb_play_path_get( $play_type, $play_id, $play_priority);
-  $file_list = "videos/*-{$video_format}.avi";
+  $file_list = "videos/*-{$video_format}.mp4";

  return( lmb_download_file( $play_dir, $file_list, $mode, "{$play_id}-{$video_format}"));
 }
--- a/html/skins/black/default.css
+++ b/html/skins/black/default.css
@ -1,3 +1,6 @@
+@import url("/skins/black/sprites.css");
+@import url("/skins/black/sprites-rep.css");
+
 html, body
 {
  height: 99%;
@ -144,6 +147,31 @@ tr.news2



+tr.twitter0,
+tr.twitter1,
+tr.twitter2
+{ 
+  font-family:      verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
+}
+
+tr.twitter0
+{ 
+  height:           10px;
+  background-color: #222222;
+  color:            #FFFFFF;
+  font-family:      verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
+  font-size:        24px;
+  font-weight:      bold;
+}
+
+tr.twitter1
+{ 
+  height:           10px;
+  background-color: #333333;
+}
+
+
+
 tr.about0,
 tr.about1,
 tr.about2
@ -460,21 +488,36 @@ td.border
 }

 td.menu-bg
+td.menu-item,
+td.menu-left,
+td.menu-right
 { 
  vertical-align:        top;
-  text-align:            center;
  height:                20px;
+}
+
+td.menu-bg
+{ 
+  text-align:            center;
  background-color:      transparent;
-  background-image:      url(/images/menu-bg.png);
+  background-image:      url(/skins/black/images/menu-bg.png);
  background-repeat:     repeat-x;
  background-attachment: scroll; 
 }

 td.menu-item
 { 
-  vertical-align: top;
  text-align:     center;
-  height:         20px;
+}
+
+td.menu-left
+{ 
+  text-align:     right;
+}
+
+td.menu-right
+{ 
+  text-align:     left;
 }

 td.body
@ -489,7 +532,7 @@ td.line-bg
  text-align:            center;
  height:                20px;
  background-color:      transparent;
-  background-image:      url(/images/line-m.png);
+  background-image:      url(/skins/black/images/line-m.png);
  background-repeat:     repeat-x;
  background-attachment: scroll; 
 }
@ -607,7 +650,7 @@ td.news00

 td.news01
 { 
-  width:            20px;
+  width:            10px;
 }

 td.news1
@ -637,6 +680,42 @@ td.news4



+td.twitter0,
+td.twitter00,
+td.twitter01,
+td.twitter1
+{ 
+  vertical-align:   middle;
+  text-align:       center;
+  font-family:      verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
+  font-size:        14px;
+}
+
+td.twitter0
+{ 
+  width:            96px;
+  background-color: #222222;
+}
+
+td.twitter00
+{ 
+  width:            10px;
+  background-color: #000000;
+}
+
+td.twitter01
+{ 
+  width:            20px;
+  background-color: #222222;
+}
+
+td.twitter1
+{ 
+  text-align:       center;
+  font-size:        16px;
+}
+
+
 td.about0,
 td.about00,
 td.about01,
@ -768,7 +847,7 @@ td.play2

 td.play3
 { 
-  text-align:     left;
+  text-align:     center;
  height:         30px;
 }

@ -778,6 +857,8 @@ td.play4
  text-align:     right;
  height:         30px;
  font-size:      12px;
+  padding-right:  10px;
+  padding-left:   10px;
 }


@ -808,6 +889,15 @@ td.text_r
  font-size:        16px;
 }

+td.title
+{
+}
+
+td.subtitle
+{
+}
+
+
 td.title_l
 { 
  vertical-align:   middle;
@ -1237,6 +1327,7 @@ td.links2
  text-align:       left;
  font-family:      verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  font-size:        14px;
+  height:           24px;
 }

 td.links0
@ -1480,77 +1571,74 @@ img.menu-item

 a:link
 {
-  color:#6644FF;
+  color: #6644FF;
 }

 a:visited
 {
-  color:#FF00FF;
+  color: #FF00FF;
 }

 a:hover
 {
-  color:#FF2222;
+  color: #FF2222;
+  color: #101010;
 }

 a:active
 {
-  color:#0066FF;
+  color: #0066FF;
 }



-a.jp-on,
-a.jp-off
+a.button-item
 {
-  -webkit-transition:  all 0.5s ease;
-  -moz-transition:     all 0.5s ease;
+  display: inline-block;
 }

-
-
-a.jp-on:hover,
-a.jp-off:hover
+.link-item,
+.link-item-disabled,
+.normal-item,
+.link-item-disabled
 {
-   /*Glow*/
-
-  -webkit-box-shadow:  0px 0px 20px rgba(255,255,255,0.3);
-  -moz-box-shadow:     0px 0px 20px rgba(255,255,255,0.3);
-  box-shadow:          0px 0px 20px rgba(255,255,255,0.3);
+  display:          inline-block;
+  background-color: transparent;
+  border:           0px;
+  border-radius:    5px;
+  padding:          1px 5px 3px 5px;
+  color:            white;
+  font-family:      verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
 }



-a.jp-on
+.link-item:hover
 {
-  background-color: #4a3a55;
+  background-color: #777777;
+  background-color: white;
+  border:           0px;
+  border-radius:    5px;
+  padding:          1px 5px 3px 5px;
+  color:            black;
 }



-a.jp-off
-{
-}
-
-
-
-a.menu-home_page,
-a.menu-about,
-a.menu-discography,
-a.button-w3c-html,
-a.button-w3c-css,
-a.button-rx3,
-a.button-safe_creative,
-a.button-stats
+a.button-item,
+div.button-item,
+.link-item,
+img.button-item,
+img.button-item-big,
+input.login,
+input.logout
 { 
-  border:              0px solid;
-  background-repeat:   no-repeat;
-  display:             block;

  /*Transition*/

  -webkit-transition:  all 0.5s ease;
  -moz-transition:     all 0.5s ease;
+  transition:          all 0.5s ease;
 /*   o-transition:        all 0.5s ease; */

  /*Reflection*/
@ -1559,14 +1647,12 @@ a.button-stats
 */
 }

-a.menu-home_page:hover,
-a.menu-about:hover,
-a.menu-discography:hover,
-a.button-w3c-html:hover,
-a.button-w3c-css:hover,
-a.button-rx3:hover,
-a.button-safe_creative:hover,
-a.button-stats:hover
+a.button-item:hover,
+div.button-item:hover,
+.link-item:hover,
+img.button-item:hover,
+input.login:hover,
+input.logout:hover
 { 
   /*Glow*/

@ -1582,116 +1668,34 @@ a.button-stats:hover



-a.menu-home_page,
-a.menu-about,
-a.menu-discography,
-a.menu-home_page:hover,
-a.menu-about:hover,
-a.menu-discography:hover
-{
-  height:              20px;
+img.button-item-big:hover
+{ 
+   /*Glow*/
+
+  -webkit-box-shadow:  0px 0px 50px rgba(255,255,255,0.8);
+  -moz-box-shadow:     0px 0px 50px rgba(255,255,255,0.8);
+  box-shadow:          0px 0px 50px rgba(255,255,255,0.8);
+
+   /*Reflection*/
+/*
+  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
+*/
 }

-a.menu-home_page
+a.link-item-disabled
 {
-  background-image:    url("/images/menu-home_page-on.png");
-}
-
-a.menu-home_page:hover
-{
-  background-image:    url("/images/menu-home_page-hi.png");
-}
-
-a.menu-about
-{
-  background-image:    url("/images/menu-about-on.png");
-}
-
-a.menu-about:hover
-{
-  background-image:    url("/images/menu-about-hi.png");
-}
-
-a.menu-discography
-{
-  background-image:    url("/images/menu-discography-on.png");
-}
-
-a.menu-discography:hover
-{
-  background-image:    url("/images/menu-discography-hi.png");
+  display:          inline-block;
+  border:           0px;
+  border-radius:    5px;
+  padding:          1px 5px 3px 5px;
+  background-color: #707070;
+  color: white;
+  pointer-events: none;
+  cursor: default;
 }



-a.button-w3c-html,
-a.button-w3c-css,
-a.button-rx3,
-a.button-safe_creative,
-a.button-stats,
-a.button-w3c-html:hover,
-a.button-w3c-css:hover,
-a.button-rx3:hover,
-a.button-safe_creative:hover,
-a.button-stats:hover
-{
-  height:              26px;
-}
-
-a.button-w3c-html
-{
-  background-image:    url("/images/button-w3c-html-on.png");
-}
-
-a.button-w3c-html:hover
-{
-  background-image:    url("/images/button-w3c-html-hi.png");
-}
-
-a.button-w3c-css
-{
-  background-image:    url("/images/button-w3c-css-on.png");
-}
-
-a.button-w3c-css:hover
-{
-  background-image:    url("/images/button-w3c-css-hi.png");
-
-}
-
-a.button-rx3
-{
-  background-image:    url("/images/button-rx3-on.png");
-}
-
-a.button-rx3:hover
-{
-  background-image:    url("/images/button-rx3-hi.png");
-
-}
-
-a.button-safe_creative
-{
-  background-image:    url("/images/button-safe_creative-on.png");
-}
-
-a.button-safe_creative:hover
-{
-  background-image:    url("/images/button-safe_creative-hi.png");
-
-}
-
-a.button-stats
-{
-  background-image:    url("/images/button-stats-on.png");
-}
-
-a.button-stats:hover
-{
-  background-image:    url("/images/button-stats-hi.png");
-
-}
-


 /*--------------------------------------------*/
@ -1703,62 +1707,20 @@ input.password
  border:           0px solid;;
  background-color: #222222;
  color:            #FFFFFF;
+  vertical-align: top;
 }

 input.login,
 input.logout
 {
-  border:           0px solid;;
+  border:           0px solid;
  width:            32px;
  height:           26px;
-
-  /*Transition*/
-
-  -webkit-transition:  all 0.5s ease;
-  -moz-transition:     all 0.5s ease;
-}
-
-input.login:hover,
-input.logout:hover
-{
-   /*Glow*/
-
-  -webkit-box-shadow:  0px 0px 20px rgba(255,255,255,0.3);
-  -moz-box-shadow:     0px 0px 20px rgba(255,255,255,0.3);
-  box-shadow:          0px 0px 20px rgba(255,255,255,0.3);
-}
-
-input.login
-{ 
-  background-image: url("/images/button-login-on.png");
-}
-
-input.login:hover
-{ 
-  background-image: url("/images/button-login-hi.png");
-}
-
-input.logout
-{ 
-  background-image:    url("/images/button-logout-on.png");
-}
-
-input.logout:hover
-{ 
-  background-image:    url("/images/button-logout-hi.png");
+  background-color: transparent;
 }



-td.title
-{
-  background-image: url(/images/title-4.png);
-}
-
-td.subtitle
-{
-}
-

 /*
@font-face
@ -1803,3 +1765,17 @@ td.subtitle
 {
  font-size:      30px;
 }
+
+
+
+/*--------------------------------------------*/
+/* Audio                                      */
+/*--------------------------------------------*/
+
+audio
+{ 
+  border:           0px solid;;
+  background-color: #888888;
+  color:            #FFFFFF;
+}
+
--- a/html/skins/black/sprites-rep.css
+++ b/html/skins/black/sprites-rep.css
@ -0,0 +1,29 @@
+/* glue: 0.11.1 hash: 9c5b34e88f */
+/* LMBrowser Template 1.0 */
+
+.sprite-title_line-m,
+.sprite-menu-bg,
+.sprite-bottom_line-m {
+    background-image: url('/skins/black/images/sprites-rep.png');
+    background-repeat: repeat-x;
+    background-attachment: scroll; 
+    margin: auto;
+}
+
+.sprite-title_line-m {
+    background-position: 0 0;
+    width: 10px;
+    height: 70px;
+}
+
+.sprite-menu-bg {
+    background-position: 0 -70px;
+    width: 10px;
+    height: 20px;
+}
+
+.sprite-bottom_line-m {
+    background-position: 0 -90px;
+    width: 10px;
+    height: 20px;
+}
--- a/html/skins/black/sprites.css
+++ b/html/skins/black/sprites.css
@ -0,0 +1,742 @@
+/* glue: 0.11.1 hash: ea118dad0e */
+/* LMBrowser Template 1.0 */
+
+.sprite-lm-logo2-border-220,
+.sprite-lm-logo1-border-220,
+.sprite-tab-history-r,
+.sprite-tab-history-l,
+.sprite-tab-twitter-r,
+.sprite-tab-twitter-l,
+.sprite-tab-covers-r,
+.sprite-tab-covers-l,
+.sprite-tab-tracks-r,
+.sprite-tab-tracks-l,
+.sprite-tab-extras-r,
+.sprite-tab-extras-l,
+.sprite-tab-oldies-r,
+.sprite-tab-oldies-l,
+.sprite-tab-videos-r,
+.sprite-tab-videos-l,
+.sprite-tab-lyrics-r,
+.sprite-tab-lyrics-l,
+.sprite-tab-welcome-r,
+.sprite-tab-welcome-l,
+.sprite-tab-about-r,
+.sprite-tab-about-l,
+.sprite-border-right,
+.sprite-tab-news-r,
+.sprite-tab-news-l,
+.sprite-tab-info-r,
+.sprite-tab-info-l,
+.sprite-menu-home_page-on:hover,
+.sprite-menu-home_page-on,
+.sprite-menu-home_page-off,
+.sprite-menu-discography-on:hover,
+.sprite-menu-discography-on,
+.sprite-menu-discography-off,
+.sprite-menu-about-on:hover,
+.sprite-menu-about-on,
+.sprite-menu-about-off,
+.sprite-border-top,
+.sprite-border-left,
+.sprite-border-bottom,
+.sprite-unknown-cover-96,
+.sprite-lm-logo2-96,
+.sprite-lm-logo1-96,
+.sprite-button-rx3-on:hover,
+.sprite-button-rx3-on,
+.sprite-button-donate,
+.sprite-title_line-r,
+.sprite-title_line-l,
+.sprite-bottom_line-r,
+.sprite-bottom_line-l,
+.sprite-border-top-right,
+.sprite-border-top-left,
+.sprite-border-bottom-right,
+.sprite-border-bottom-left,
+.sprite-tab-lp-r,
+.sprite-tab-lp-l,
+.sprite-tab-ep-r,
+.sprite-tab-ep-l,
+.sprite-button-w3c-rss-on:hover,
+.sprite-button-w3c-rss-on,
+.sprite-button-w3c-html-on:hover,
+.sprite-button-w3c-html-on,
+.sprite-button-w3c-css-on:hover,
+.sprite-button-w3c-css-on,
+.sprite-button-stats-on:hover,
+.sprite-button-stats-on,
+.sprite-button-safe_creative-on:hover,
+.sprite-button-safe_creative-on,
+.sprite-button-rss-on:hover,
+.sprite-button-rss-on,
+.sprite-button-logout-on:hover,
+.sprite-button-logout-on,
+.sprite-button-login-on:hover,
+.sprite-button-login-on,
+.sprite-menu-end,
+.sprite-menu-begin,
+.sprite-icon-zynaddsubfx-16x16,
+.sprite-icon-xsynth-16x16,
+.sprite-icon-wsynth-16x16,
+.sprite-icon-whysynth-16x16,
+.sprite-icon-vintagesynth-16x16,
+.sprite-icon-twitter-16x16,
+.sprite-icon-safecreative-16x16,
+.sprite-icon-rosegarden-16x16,
+.sprite-icon-povray-16x16,
+.sprite-icon-phasex-16x16,
+.sprite-icon-obligement-16x16,
+.sprite-icon-myspace_old-16x16,
+.sprite-icon-myspace-16x16,
+.sprite-icon-med-16x16,
+.sprite-icon-linuxsampler-16x16,
+.sprite-icon-lastfm-16x16,
+.sprite-icon-jannepikkarainen-16x16,
+.sprite-icon-hexter-16x16,
+.sprite-icon-gplus-16x16,
+.sprite-icon-gimp-16x16,
+.sprite-icon-facebook-16x16,
+.sprite-icon-dssi-16x16,
+.sprite-icon-dpaint-16x16,
+.sprite-icon-distrho-16x16,
+.sprite-icon-digikam-16x16,
+.sprite-icon-calf-16x16,
+.sprite-icon-audacity-16x16,
+.sprite-icon-ardour-16x16,
+.sprite-icon-ams-16x16,
+.sprite-icon-amigafuture-16x16 {
+    background-image: url('/skins/black/images/sprites.png');
+    background-repeat: no-repeat;
+    margin: auto;
+}
+
+.sprite-lm-logo2-border-220 {
+    background-position: 0 0;
+    width: 220px;
+    height: 220px;
+}
+
+.sprite-lm-logo1-border-220 {
+    background-position: -220px 0;
+    width: 220px;
+    height: 220px;
+}
+
+.sprite-tab-history-r {
+    background-position: 0 -220px;
+    width: 56px;
+    height: 219px;
+}
+
+.sprite-tab-history-l {
+    background-position: -56px -220px;
+    width: 56px;
+    height: 219px;
+}
+
+.sprite-tab-twitter-r {
+    background-position: -112px -220px;
+    width: 57px;
+    height: 212px;
+}
+
+.sprite-tab-twitter-l {
+    background-position: -169px -220px;
+    width: 57px;
+    height: 212px;
+}
+
+.sprite-tab-covers-r {
+    background-position: -226px -220px;
+    width: 56px;
+    height: 207px;
+}
+
+.sprite-tab-covers-l {
+    background-position: -282px -220px;
+    width: 56px;
+    height: 207px;
+}
+
+.sprite-tab-tracks-r {
+    background-position: -338px -220px;
+    width: 56px;
+    height: 202px;
+}
+
+.sprite-tab-tracks-l {
+    background-position: -440px 0;
+    width: 56px;
+    height: 202px;
+}
+
+.sprite-tab-extras-r {
+    background-position: -440px -202px;
+    width: 56px;
+    height: 202px;
+}
+
+.sprite-tab-extras-l {
+    background-position: -496px 0;
+    width: 56px;
+    height: 202px;
+}
+
+.sprite-tab-oldies-r {
+    background-position: -496px -202px;
+    width: 56px;
+    height: 191px;
+}
+
+.sprite-tab-oldies-l {
+    background-position: -552px 0;
+    width: 56px;
+    height: 191px;
+}
+
+.sprite-tab-videos-r {
+    background-position: -552px -191px;
+    width: 56px;
+    height: 189px;
+}
+
+.sprite-tab-videos-l {
+    background-position: -608px 0;
+    width: 56px;
+    height: 189px;
+}
+
+.sprite-tab-lyrics-r {
+    background-position: -608px -189px;
+    width: 56px;
+    height: 188px;
+}
+
+.sprite-tab-lyrics-l {
+    background-position: 0 -439px;
+    width: 56px;
+    height: 188px;
+}
+
+.sprite-tab-welcome-r {
+    background-position: -394px -220px;
+    width: 43px;
+    height: 184px;
+}
+
+.sprite-tab-welcome-l {
+    background-position: -56px -439px;
+    width: 43px;
+    height: 184px;
+}
+
+.sprite-tab-about-r {
+    background-position: -99px -439px;
+    width: 56px;
+    height: 169px;
+}
+
+.sprite-tab-about-l {
+    background-position: -155px -439px;
+    width: 56px;
+    height: 169px;
+}
+
+.sprite-border-right {
+    background-position: -211px -439px;
+    width: 35px;
+    height: 140px;
+}
+
+.sprite-tab-news-r {
+    background-position: -246px -439px;
+    width: 56px;
+    height: 138px;
+}
+
+.sprite-tab-news-l {
+    background-position: -302px -439px;
+    width: 56px;
+    height: 138px;
+}
+
+.sprite-tab-info-r {
+    background-position: -358px -439px;
+    width: 56px;
+    height: 138px;
+}
+
+.sprite-tab-info-l {
+    background-position: -414px -439px;
+    width: 56px;
+    height: 138px;
+}
+
+.sprite-menu-home_page-on:hover {
+    background-position: -470px -439px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-home_page-on {
+    background-position: -470px -459px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-home_page-off {
+    background-position: -470px -479px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-discography-on:hover {
+    background-position: -470px -499px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-discography-on {
+    background-position: -470px -519px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-discography-off {
+    background-position: -470px -539px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-about-on:hover {
+    background-position: -211px -579px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-about-on {
+    background-position: -339px -579px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-menu-about-off {
+    background-position: -467px -579px;
+    width: 128px;
+    height: 20px;
+}
+
+.sprite-border-top {
+    background-position: 0 -627px;
+    width: 128px;
+    height: 35px;
+}
+
+.sprite-border-left {
+    background-position: -664px 0;
+    width: 35px;
+    height: 128px;
+}
+
+.sprite-border-bottom {
+    background-position: -128px -627px;
+    width: 128px;
+    height: 35px;
+}
+
+.sprite-unknown-cover-96 {
+    background-position: -699px 0;
+    width: 96px;
+    height: 96px;
+}
+
+.sprite-lm-logo2-96 {
+    background-position: -699px -96px;
+    width: 96px;
+    height: 96px;
+}
+
+.sprite-lm-logo1-96 {
+    background-position: -699px -192px;
+    width: 96px;
+    height: 96px;
+}
+
+.sprite-button-rx3-on:hover {
+    background-position: -699px -288px;
+    width: 96px;
+    height: 26px;
+}
+
+.sprite-button-rx3-on {
+    background-position: -699px -314px;
+    width: 96px;
+    height: 26px;
+}
+
+.sprite-button-donate {
+    background-position: -699px -340px;
+    width: 74px;
+    height: 21px;
+}
+
+.sprite-title_line-r {
+    background-position: -699px -361px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-title_line-l {
+    background-position: -699px -431px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-bottom_line-r {
+    background-position: -699px -501px;
+    width: 70px;
+    height: 20px;
+}
+
+.sprite-bottom_line-l {
+    background-position: -699px -521px;
+    width: 70px;
+    height: 20px;
+}
+
+.sprite-border-top-right {
+    background-position: -699px -541px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-border-top-left {
+    background-position: 0 -662px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-border-bottom-right {
+    background-position: -70px -662px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-border-bottom-left {
+    background-position: -140px -662px;
+    width: 70px;
+    height: 70px;
+}
+
+.sprite-tab-lp-r {
+    background-position: -210px -662px;
+    width: 56px;
+    height: 69px;
+}
+
+.sprite-tab-lp-l {
+    background-position: -266px -662px;
+    width: 56px;
+    height: 69px;
+}
+
+.sprite-tab-ep-r {
+    background-position: -322px -662px;
+    width: 56px;
+    height: 69px;
+}
+
+.sprite-tab-ep-l {
+    background-position: -378px -662px;
+    width: 56px;
+    height: 69px;
+}
+
+.sprite-button-w3c-rss-on:hover {
+    background-position: -699px -611px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-w3c-rss-on {
+    background-position: -731px -611px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-w3c-html-on:hover {
+    background-position: -763px -611px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-w3c-html-on {
+    background-position: -664px -128px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-w3c-css-on:hover {
+    background-position: -664px -154px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-w3c-css-on {
+    background-position: -664px -180px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-stats-on:hover {
+    background-position: -664px -206px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-stats-on {
+    background-position: -664px -232px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-safe_creative-on:hover {
+    background-position: -664px -258px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-safe_creative-on {
+    background-position: -664px -284px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-rss-on:hover {
+    background-position: -664px -310px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-rss-on {
+    background-position: -664px -336px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-logout-on:hover {
+    background-position: -664px -362px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-logout-on {
+    background-position: -664px -388px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-login-on:hover {
+    background-position: -664px -414px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-button-login-on {
+    background-position: -664px -440px;
+    width: 32px;
+    height: 26px;
+}
+
+.sprite-menu-end {
+    background-position: -773px -340px;
+    width: 16px;
+    height: 20px;
+}
+
+.sprite-menu-begin {
+    background-position: -769px -361px;
+    width: 16px;
+    height: 20px;
+}
+
+.sprite-icon-zynaddsubfx-16x16 {
+    background-position: -769px -381px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-xsynth-16x16 {
+    background-position: -769px -397px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-wsynth-16x16 {
+    background-position: -769px -413px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-whysynth-16x16 {
+    background-position: -769px -431px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-vintagesynth-16x16 {
+    background-position: -769px -447px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-twitter-16x16 {
+    background-position: -769px -463px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-safecreative-16x16 {
+    background-position: -769px -479px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-rosegarden-16x16 {
+    background-position: -769px -501px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-povray-16x16 {
+    background-position: -769px -521px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-phasex-16x16 {
+    background-position: -769px -541px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-obligement-16x16 {
+    background-position: -769px -557px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-myspace_old-16x16 {
+    background-position: -769px -573px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-myspace-16x16 {
+    background-position: -769px -589px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-med-16x16 {
+    background-position: -699px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-linuxsampler-16x16 {
+    background-position: -715px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-lastfm-16x16 {
+    background-position: -731px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-jannepikkarainen-16x16 {
+    background-position: -747px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-hexter-16x16 {
+    background-position: -763px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-gplus-16x16 {
+    background-position: -779px -637px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-gimp-16x16 {
+    background-position: -664px -466px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-facebook-16x16 {
+    background-position: -680px -466px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-dssi-16x16 {
+    background-position: -664px -482px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-dpaint-16x16 {
+    background-position: -680px -482px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-distrho-16x16 {
+    background-position: -664px -498px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-digikam-16x16 {
+    background-position: -680px -498px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-calf-16x16 {
+    background-position: -664px -514px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-audacity-16x16 {
+    background-position: -680px -514px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-ardour-16x16 {
+    background-position: -664px -530px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-ams-16x16 {
+    background-position: -680px -530px;
+    width: 16px;
+    height: 16px;
+}
+
+.sprite-icon-amigafuture-16x16 {
+    background-position: -664px -546px;
+    width: 16px;
+    height: 16px;
+}