/* CS1 Background and text colours
-------------------------------------------------------------*/
body {
background: #012928 url(--) no-repeat top center;
}
/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: transparent;
  color: #04201c;
  }
/* CS1.8 */
#pun-navlinks .container {
  background-color: transparent;
  color: #04201c;
  }
.offline li.pa-online strong {
  font-weight: normal
  }
/* CS2 Border colours
-------------------------------------------------------------*/
/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: transparent;
  }
/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent;
  }
/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent;
  }
/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;
  }
/* CS2.5 */
.punbb th {
  border-color: transparent;
  }
/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: transparent;
  }
#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent;
  }
#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent;
  }
.punbb .divider {
  border-color: transparent;
  }
.punbb .formal fieldset .post-box, .punbb .info-box {
  border-color: transparent;
  }
li.pa-online {
  border-left-color: #d1a454;
  }
/* CS3 Links
-------------------------------------------------------------*/
/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #04201c;
  }
.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #00613f;
  }
/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #00613f;
  }
/* CS3.3 */
#pun-navlinks a {
  color: #7b7961;
  text-decoration: none
  }
/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #7b7961;
  text-decoration: underline
  }
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #7b7961;
  }
/* CS4 Post status icons
-------------------------------------------------------------*/
#pun-main .category Div.icon {
float: none;
display: block;
border-style: none none none none;
height: 50px; width: 50px; 
background-repeat : no-repeat; 
background-position: top center; 
background-color : transparent;
}
#pun-main .category table div.tclcon {margin-right : 40px;}
#pun-main table div.tclcon {padding-left: 35px; }
Div.icon {background: url(http://i1284.photobucket.com/albums/a57 … 75a149.png) no-repeat;}
TR.inew Div.icon {
background: url(http://i1284.photobucket.com/albums/a57 … 44dad5.png) no-repeat;}
TR.isticky Div.icon {
background: url(http://s1.uploads.ru/t/30bxO.png) no-repeat;}
TR.iclosed Div.icon {
background: url(http://s1.uploads.ru/t/ZKyIq.png) no-repeat;}
TR.iredirect Div.icon {
background: url(http://s1.uploads.ru/t/ZKyIq.png) no-repeat;}
#pun-about p.container {
background-image : url(http://s1.uploads.ru/cz1Xx.png); 
background-position : center top; 
background-repeat : no-repeat; 
height : 53px;
width: 950px; 
margin-left: -12px;}
div#pun-about { margin-bottom: -40px;
}
Настройки
HTML-верх
<style type="text/css">
#pun-title .title-logo {background-image : url(http://hpmysterynight.mybb.ru/files/001 … /36002.png);
background-repeat : no-repeat; height : 132px;
}
</style>
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>
<div id="html-header">
<style type="text/css">
li#navawards {display: none;}
</style>
<style>
.lastedit {display:none;}
</style>
<!-- JampPanel-->
<style>
#JampPanel:hover{
margin-right:15px;
}
#JampPanel,#JampPanel .container{
}
#JampPanel {
position:fixed;z-index:1200;
height:293px;top:14px;right:0;margin-right:-261px;
background: url(http://s58.radikal.ru/i161/1305/be/8c050ae268fb.png) 
-7px 66px no-repeat;
width:309px;
}
#JampPanel .container{
background: url(http://s53.radikal.ru/i140/1305/77/8a9e80bbb6cb.png);
padding:0px;
height:500px;
width:100%;margin:-1px 0 0 40px;
}
</style>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka></div>
<div style="position: absolute;
left: 84px;
top: 10px;
width: 221px;
"> <p style="font-size:9px">
<br>
<br>
<center><b>Смешанная система игры. </b></center>
<br><br><b>Игровая неделя и погода:</b> 2 - 8 сентября 2003 год.<br> Погода над Магической Британией стоит отрадная - яркое солнце освещает сухие разветвленные дороги, а теплый осенний ветер теребит пока еще зеленые листья деревьев. Студенты готовятся к новому учебному году, работники Магического Лондона с лучезарными улыбками принимают своих клиентов и посетителей, и никто не подозревает о том, что грядут глобальные перемены, способные перевернуть весь устоявшийся уклад размеренной и спокойной жизни.
<center><br><br>Разыскиваются:<br></CENTER>
&#10070; Главный модератор - графическое оформление и тех обслуживание форума  <br>
&#10070; Модератор (2) - пиар<br>
</p>
<br><br>
</span></span></p><br>
</li>
</ul></center>
</div>
  </div>
</div>
<!--End//JampPanel-->
</div>
<style type="text/css">
.pa-adnote{ text-align: center;}
.pa-from{ text-align: center;}
.pa-reg{ text-align: center;}
.pa-posts{ text-align: center;}
.pa-reputation{ text-align: center;}
.pa-sex{ text-align: center;}
.pa-icq{ text-align: center;}
.pa-ip{ text-align: center;}
.pa-online{ text-align: center;}
.pa-age{ text-align: center;}
.pa-mailagent{ text-align: center;}
.pa-reg { text-align: center;}
.pa-avatar, .pa-title, .pa-author { text-align: center;}
.pa-time-visit{ text-align: center;}
.pa-last-visit{ text-align: center;}
.pa-fld1{ text-align: center;}
.pa-fld2{ text-align: center;}
.pa-fld3{ text-align: center;}
</style>
<style>
#pun-title .title-logo {display : none;}
</style>
<style>
#pun-ulinks .container{text-align: center}
</style>
<style type="text/css"> #pun-main .quote-box, #pun-main .code-box {color: #1e3930; background-image:url("http://s1.uploads.ru/t/u57bl.png");}</style>
<style>
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>
<style> 
.category h2 span{
display: none;}
#pun-category1 h2 {
background-image: url(http://s017.radikal.ru/i432/1305/8a/115396ce1616.png) !important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
#pun-category2 h2 {
background-image: url(http://s006.radikal.ru/i215/1305/e8/8f83426024ee.png)!important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
#pun-category3 h2 {
background-image: url(http://s020.radikal.ru/i713/1305/f3/0ecf3533852c.png)!important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
#pun-category4 h2 {
background-image: url(http://s019.radikal.ru/i618/1305/1a/f76756aa67f3.png)!important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
#pun-category5 h2 {
background-image: url(http://s018.radikal.ru/i503/1305/6d/428a9ea68fab.png)!important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
#pun-category6 h2 {
background-image: url(http://s56.radikal.ru/i154/1305/d0/796899a4ae24.png)!important;
background-repeat: no-repeat; 
background-position: top center;
height:80px;} 
</style>
<style>#slideshow {
margin:600px;
width:400px;
height: 150px;
margin-left: 180px;
position:relative;
line-height: 10px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:250px;
  height: 100px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:300px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:100px;
}
/** 
* Slideshow controls style rules.
*/
.control {
  display:block;
  width: 100px;
  height: 163px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 45px;
  left: 20px;
  background:transparent url(http://s018.radikal.ru/i523/1305/e5/a1de5e2c9679.png) no-repeat 0 0;
}
#rightControl {
  top: 45px;
  right: -70px;
  background:transparent url(http://i1284.photobucket.com/albums/a57 … 8a8943.png) no-repeat 0 0;
}
/*Style rules for Demo page */
* {
  margin:0;
  padding:0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:center;
  margin:0 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 300;
  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>
<div style="width: 300px; height:100px; text-align: justify;  border: none; font-family: arial; font-size: 11px; line-height: 2px; margin: 1px;   position: absolute; margin-left: 50px; top: 40px; ">
<div id="pageContainer">
  <!-- Slideshow HTML -->
   <div id="slideshow">
    <div id="slidesContainer">
     
      
     <div class="slide">
        <p> <table><tr><td><a href="ССЫЛКА">
<img src='http://s019.radikal.ru/i604/1305/2e/224e962f1f73.png'
onmouseover="this.src='http://i047.radikal.ru/1305/26/d0ca5a8eaeb3.png'"
onmouseout="this.src='http://s019.radikal.ru/i604/1305/2e/224e962f1f73.png'" border=0>  
<a href="ССЫЛКА">
<img src='http://s019.radikal.ru/i617/1305/51/1863521d6839.png'
onmouseover="this.src='http://s019.radikal.ru/i644/1305/97/9286df043ca5.png'"
onmouseout="this.src='http://s019.radikal.ru/i617/1305/51/1863521d6839.png'" border=0></td></tr></table> </p>
      </div>
     <div class="slide">
        <p> <table><tr><td><a href="ССЫЛКА">
<img src='http://s018.radikal.ru/i522/1305/6f/e1c391b48002.png'
onmouseover="this.src='http://i017.radikal.ru/1305/04/518d930ec5c7.png'"
onmouseout="this.src='http://s018.radikal.ru/i522/1305/6f/e1c391b48002.png'" border=0>
<a href="ССЫЛКА">
<img src='http://s019.radikal.ru/i613/1305/92/6764abd4ed5c.png'
onmouseover="this.src='http://s018.radikal.ru/i512/1305/8d/132f2379ba95.png'"
onmouseout="this.src='http://s019.radikal.ru/i613/1305/92/6764abd4ed5c.png'" border=0></td></tr></table></p>
      </div>
<div class="slide">
        <p>  <table><tr><td>
         <a href="ССЫЛКА">
<img src='http://s017.radikal.ru/i425/1305/12/bd75a43a47dd.png'
onmouseover="this.src='http://s41.radikal.ru/i092/1305/a6/5063362f46cb.png'"
onmouseout="this.src='http://s017.radikal.ru/i425/1305/12/bd75a43a47dd.png'" border=0>
<a href="ССЫЛКА">
<img src='http://s006.radikal.ru/i213/1305/22/f36e7b964598.png'
onmouseover="this.src='http://s47.radikal.ru/i116/1305/51/2417444c86a6.png'"
onmouseout="this.src='http://s006.radikal.ru/i213/1305/22/f36e7b964598.png'" border=0></td></tr></table></p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->
</div></div>