<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide Panel</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://poddon-prof.ru/_swf/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$(this).toggleClass("active");
if($(this).hasClass("active")){$("#panel").animate({"margin-top": "0px"}, "slow");
} else {$("#panel").animate({"margin-top": "-165px"}, "slow");}
return false;
});
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #000000;
margin-top:-165px;
text-align: center;
padding:30px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: #754c24;
}
.btn-slide {
background: #754c24;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
</head>
<body>
<div id="panel">
<div id="audioplayer529">><script type="text/javascript">var flashvars = {"st":"http://poddon-prof.ru/_swf/audio13-947.txt","pl":"http://poddon-prof.ru/_swf/playlist_audio13-529.txt"};var params = {bgcolor:"#000000", allowScriptAccess:"always",id:"audioplayer529"}; new swfobject.embedSWF("http://poddon-prof.ru/_swf/uppod.swf", "audioplayer529", "329", "103", "9.0.115.0", false, flashvars, params);</script>
</div></div>
<p class="slide"><a href="#" class="btn-slide">Плеер</a></p>
</body>
</html>