<!-- JampPanel-->
<style type="text/css">
#JampPanel_1:hover, #JampPanel_2:hover {
	margin-right: -20px;
}
#JampPanel_1, #JampPanel_1 .container, #JampPanel_2, #JampPanel_2 .container {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border: 1px solid #FE2323;
	background-color: #F0F0F0;
	box-shadow: 0px 5px 5px #626262;
	-webkit-box-shadow: 0px 5px 5px #626262;
	-khtml-box-shadow: 0px 5px 5px #626262;
	-moz-box-shadow: 0px 5px 5px #626262;
}
#JampPanel_1, #JampPanel_2 {
	opacity: 0.86;
	position: fixed;
	z-index: 1200;
	height: 190px;
	margin-right: -202px;
	background: #F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 4px 2px no-repeat;
	transition-duration: 0.33s;
	-webkit-transition-duration: 0.33s;
	-moz-transition-duration: 0.33s;
	-o-transition-duration: 0.33s;
	width: 230px;
}
#JampPanel_1 {
	top: 8px;
	right: 0;
}
#JampPanel_2 {
	top: 210px;
	right: 0;
}
#JampPanel_1 .container, #JampPanel_2 .container {
	padding: 12px;
	height: 400px;
	width: 100%;
	margin: -1px 0 0 30px;
}
#Zaslonyalka {
	/*прикрывает область тени на стыке уха с container*/
position: absolute;
	height: 190px;
	width: 14px;
	background-color: #F0F0F0;
	margin: -12px 0 0 -18px;
}
</style>
<div id="JampPanel_1">
	<div class="container">
<div id="Zaslonyalka">
</div>
Ваш контент </div>
</div>
<div id="JampPanel_2">
	<div class="container">
<div id="Zaslonyalka">
</div>
Ваш контент </div>
</div>
<!--End//JampPanel-->

<!-- Выдвижная боковая панель -->
<style media="screen" type="text/css">
#slideout_1, #slideout_2 {
	z-index: 2000;
	position: fixed;
	width: 250px;
	min-height:150px;
	padding: 12px 0 0 40px;
	background:url(http://s1.uploads.ru/i/gk5wH.png) left top no-repeat;
	margin-right:-250px;
	text-align: center;
	border: double 1px red;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
#slideout_1 {
	top: 10px;
	right: 0;
}
#slideout_2 {
	top: 240px;
	right: 0;
}
#slideout_inner_1, #slideout_inner_2 {
	margin-left: 250px;
	overflow-y: auto;
	color: #d4a43e;
	background: #010101;
	border-style: double;
	width: 180px;
	padding: 15px;
	max-height: 500px;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	text-align: left;
	-webkit-border-radius: 0 0 05px;
	-moz-border-radius: 0 0 0 5px;
	border-radius: 0 0 0 5px;
}
#slideout_inner_1 textarea, #slideout_inner_2 textarea {
	width: 180px;
	height: 150px;
	margin-bottom: 30px;
	border-style: double;
}

#slideout_1:hover #slideout_inner_1, #slideout_2:hover #slideout_inner_2 {
	margin-left: 0;

}
#slideout_1:hover, #slideout_2:hover {
	right: 217px;
}

</style>
<div id="slideout_1">
	<div id="slideout_inner_1">
текст </div>
</div>
<div id="slideout_2">
	<div id="slideout_inner_2">
текст </div>
</div>
<!-- End --></div>
</div>