تالار میدوری

<style type="text/css">
#wrap {width:580px; height:440px; background: #c5d99f; border:5px solid #e0ebcb; position:relative; margin:30px auto 20px auto;
-o-border-radius: 20px;
-icab-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#slide {padding:370px 0 0 0; margin:0; list-style:none; width:480px; height:30px; overflow:hidden; position:absolute; left:48px; top:29px;}
#slide b {float:left;}
#slide span {position:absolute; left:0; top:0; height:360px; width:480px; background:#fff url(loading.gif) no-repeat 220px center; 
border:1px solid #698639; border-color:#698639 #e0ebcb #e0ebcb #698639;}
#slide b.overlay {display:block; width:490px; height:370px; background:transparent; position:absolute; top:-5px; left:-5px;}
#slide i {display:block; float:left; margin-right:5px; display:inline; width:20px; height:20px; background:url(button.gif); 
color:#000; line-height:19px; font-family:arial, sans-serif; font-style:normal; font-size:11px; text-align:center; cursor:pointer;}
#slide b img {display:block; border:0; position:absolute; top:0; left:-1px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#title {width:131px; height:132px; background:url(star.png); position:absolute; left:5px; top:-30px; z-index:30;}
* html #title {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='star.png', sizingMethod='crop');}
#slide i:hover {background-position:0 -20px; color:#fff;}
#slide .p1:hover img {left:-1px;}
#slide .p2:hover img {left:-481px;}
#slide .p3:hover img {left:-961px;}
#slide .p4:hover img {left:-1441px;}
#slide .p5:hover img {left:-1921px;}
#slide .p6:hover img {left:-2401px;}
#slide .p7:hover img {left:-2881px;}
#slide .p8:hover img {left:-3361px;}
#slide .p9:hover img {left:-3841px;}
#slide .p10:hover img {left:-4321px;}
}
</style>
    <div id="wrap">
	   <div id="slide">
			 <b class ="p1" aria-haspopup="true"><i>1</i>
				<b class ="p2"><i>2</i>
				    <b class ="p3"><i>3</i>
					   <b class ="p4"><i>4</i>
				    <b class ="p5"><i>5</i>
				    <b class ="p6"><i>6</i>
				    <b class ="p7"><i>7</i>
				    <b class ="p8"><i>8</i>
				    <b class ="p9"><i>9</i>
		  <b class ="p10"><i>10</i><span><img src="composite.jpg" alt=""></span></b>
				    </b>
				    </b>
				    </b>
				    </b>
				    </b>
				    </b>
				    </b>
				</b>
			 </b>
			 <b class ="overlay"></b>
	   </div> <!-- end slide -->
	   <div id="title"></div>
    </div> <!-- end wrap -->