/* D4.2 */
#pun-ulinks .container {
  padding-top: 14px;
  height: 27px;
  border: none;
  text-align: center;
  font-weight: bold;
  width: 800px;
  }

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 650;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
</head>

<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
 <div class="slide">
      <p><table> <tr> <td> 
<b><center>ВРЕМЯ И ПОГОДА</b><br><br><b>Год:</b> 1992<br>
<b>Месяц: </b>февраль<br>
<b>Погода: </b> +10 - +20  Солнце периодически радует глаз, однако, погода портится порой и заставляет всех рядиться в куртки.  Туманы и дожди часто навещают город.
</center>
</a>
 </td>
<td><b><center>НОВОСТИ ИГРЫ</b><br><br>
</center><center>Февраль. Город готовится к предстоящему празднику, который готов вырваться на улицы , как только весна напомнит о себе первыми числами марта. 
Марди Гра является самым значимым праздником Нового Орлеана. Скоро тысячи туристов заполонят улицы города, чтобы побывать на самом масштабном празднике года.
<br>Цвета праздника: золотой, сиреневый и зеленый. Символ: бусы... много-много бус.
</center>
 </a>
 </td> </table>
        <p>
      </div>

<div class="slide">
<p>
<table> <tr> 
<td> 
<b><center>АДМИНИСТРАЦИЯ</b><br><br>
<a id="ollib" alt="OLLI" href="http://timeofmylife.rusff.ru/profile.php?id=2"></a>
<a id="rayb" alt="RAY" href="http://timeofmylife.rusff.ru/profile.php?id=5"></a>
<a id="yenb" alt="YEN" href="http://timeofmylife.rusff.ru/profile.php?id=4"></a>
</center>
</a>
 </td>
<td><b><center>ДОБРО ПОЖАЛОВАТЬ НА ФОРУМ </b><br>
</center><CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=10">Сюжет</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=40#p323">Акт 1. Фотография крадет душу</a></CENTER>
<CENTER><a href=http://timeofmylife.rusff.ru/viewtopic.php?id=41#p325">Action I</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=3">Правила форума</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=12">Новый Орлеан</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=14">Кросс</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=15">Эланы</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=11">Морфеи</a></CENTER>
<CENTER><a href="http://timeofmylife.rusff.ru/viewtopic.php?id=32#p61">Шаблон заявки</a></CENTER>
</center>
 </a>
 </td> </table>
        <p>
      </div>


<div class="slide">
      <p><center>
<table> <tr> <td> 
 
<center>
<a href='http://cradleofsand.ru/'>
<img src="http://imgs.su/tmp/1294429521.jpg"
alt='Колыбель песков'></a>

<a href="http://forum-top.ru/vote/269" title="Поддержать форум на Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_3.gif" alt="Поддержать форум на Forum-top.ru" /></a>

<a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=14195' target='_blank'><img src="http://palantir.in/count.php?id=14195&cid=counter2007_19.png" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></a>


 <td> 
<b>Доброго времени суток, дамы и господа</b><br>Игра на форуме уже началась<br><br>
Рейтинг NC-17 (NC-21). Регистрируясь, Вы должны помнить о том, что мы не несем ответственность за Вашу психику.  
<br><br>
Мы рады, что Вы обратили свое внимание на нас. Надеемся, что Вам понравится сама идея и Вы решите у нас остаться не только в качестве гостя. <br><br>
Мы только открылись и полны планов и идей. Каждый день жизни форума<br>  для нас очень важен. Вы можете помочь нам, если согласитесь пополнить ряды админ-состава и стать модератором, квестоплетом, гейм мастером или пиарщиком. 

</td></tr>
</table></center>

</table>
        <p>
      </div>



    </div>
  </div>
  <!-- Slideshow HTML -->

/* Выскальзывающая панель */
#toppanel {
    position: absolute;  
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
	width: 100%;
	height: 270px;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
}

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

#panel p {
	margin: 5px 0;
	padding: 0;
}

#panel a {
	text-decoration: none;
	color: #15ADFF;
}

#panel a:hover {
	color: white;
}

#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}

#panel .content .left {
	width: 280px;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #333;
}

#panel .content .right {
	border-right: 1px solid #333;
}


#slideshow {
    height: 200px;
    line-height: 15px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    position: relative;
    width: 750px;
}
#slideshow #slidesContainer {
    height: 220px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    width: 650px;
}
#slideshow #slidesContainer .slide {
    height: 220px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 700px;
}
.control {
    cursor: pointer;
    display: block;
    height: 200px;
    position: absolute;
    text-indent: -1000px;
    width: 100px;
}
#leftControl {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://forumstatic.ru/files/0010/70/5a/32620.png");
    background-origin: padding-box;
    background-position:ffffff;
    background-repeat: no-repeat;
    background-size: auto auto;
    left: -36px;
    top: 45px;
}
#rightControl {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://forumstatic.ru/files/0010/70/5a/91834.png");
    background-origin: padding-box;
    background-position:ffffff;
    background-repeat: no-repeat;
    background-size: auto auto;
    right: -30px;
    top: 45px;
}
.slide h2, .slide p {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
}
.slide h2 {
    letter-spacing: 15px;
}
.slide img {
    margin-bottom: 0;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 0;
}