<style type="text/css">
.hoverbox  
 {  
  cursor: default;  
  list-style: none;  
margin-left:40px;
 }  

 .hoverbox a  
 {  
  cursor: default;
margin-left:-10px;
 }  

 .hoverbox a .preview  
 {  
  display: none;  
 }  

 .hoverbox a:hover .preview  
 {  
  display: block;  
  position: absolute;  
  top: 0px;  
  left: -24px;  
  z-index: 1;  
 }  

 .hoverbox img  {
  color:inherit;  
  padding: 0px;  
  vertical-align: top;  
 }  

 .hoverbox li  
 {  
  background: #eaf8fe;  
  color: inherit;  
  display: inline;  
  float: left;  
  margin: 3px;  
  padding: 3px;  
  position: relative;  
 }  

 .hoverbox .preview  
 {  
  border-color:;  
 }
</style>









<style type="text/css">
#pun-category1.category h2 {
 background: url(http://savepic.org/2180355.png) no-repeat top center;
 height: 100px; font-size: 0 !important;
}
#pun-category2.category h2 {
background: url(картинка 2 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}
#pun-category3.category h2 {
background: url(картинка 3 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}
#pun-category4.category h2 {
background: url(картинка 4 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}
#pun-category5.category h2 {
background: url(картинка 5 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}
#pun-category6.category h2 {
background: url(картинка 6 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}
#pun-category7.category h2 {
background: url(картинка 7 категории) no-repeat top center;
height: 38px;
font-size: 0 !important;
}

#pun-stats h2 {
   background-image : url(картинка для саттистики);
</style>


<style>
#pun-navlinks {
margin-top:-65px; text-align: center;
}
</style>

<style>
#pun-ulinks .container {
margin-top:-17px; text-align: center;
}
</style>

<style>
#pun-title table tbody tr .title-logo-tdr {
position: absolute!important;
display:block!important;
top: 0px;
z-index: 100;
left: 50%;
margin-left:-70px;

}
</style>


<div style="width:365px;text-align:center;height:190px; position: absolute; top: 100px; margin-left: 360px;">
<b>- администрация -</b><br>

<ul class="hoverbox"> 
  <li> 
  <a href="http://itsjuilliardschool.rolka.su/profile.php?id=20"> 
  <img src="http://xmages.net/storage/10/1/0/6/4/upload/0a5c814b.png" /> 
  <img class="preview" src="http://xmages.net/storage/10/1/0/e/1/upload/ce09a54d.png" /> 
  </a> </li> </ul>



<ul class="hoverbox"> 
  <li> 
  <a href="http://itsjuilliardschool.rolka.su/profile.php?id=5"> 
  <img src="http://xmages.net/storage/10/1/0/a/e/upload/a71ec494.png" /> 
  <img class="preview" src="http://xmages.net/storage/10/1/0/a/e/upload/e8eebebc.png" /> 
  </a> </li></ul>

<ul class="hoverbox"> 
  <li> 
  <a href="http://itsjuilliardschool.rolka.su/profile.php?id=3"> 
  <img src="http://xmages.net/storage/10/1/0/a/e/upload/a42d880d.png" /> 
  <img class="preview" src="http://xmages.net/storage/10/1/0/a/e/upload/97c985ff.png" /> 
  </a> </li></ul>

<ul class="hoverbox"> 
  <li> 
  <a href="http://itsjuilliardschool.rolka.su/profile.php?id=4"> 
  <img src="http://xmages.net/storage/10/1/0/a/e/upload/d67e090e.png" /> 
  <img class="preview" src="http://xmages.net/storage/10/1/0/a/e/upload/00463719.png" /> 
  </a> </li> </ul>

<ul class="hoverbox"> 
  <li> 
  <a href="http://itsjuilliardschool.rolka.su/profile.php?id=9"> 
  <img src="http://xmages.net/storage/10/1/0/a/e/upload/62a6f914.png" /> 
  <img class="preview" src="http://xmages.net/storage/10/1/0/a/e/upload/45a78a9e.png" /> 
  </a> </li></ul>

<div style="overflow-y:scroll;width:365px;height:100px;">
So sorry for the late update of these pictures. You may have already seen them in our gallery but if not then make sure you check them out now!

    We’ve got some amazing new pictures for you of a photoshoot Vanessa did for http://lifewithoutandy.com. If you’ve seen the first set and loved those then we’re sure you’ll love these ones too. Vanessa looks like she’s having an amazing time in this photoshoot.<br>So sorry for the late update of these pictures. You may have already seen them in our gallery but if not then make sure you check them out now!

    We’ve got some amazing new pictures for you of a photoshoot Vanessa did for http://lifewithoutandy.com. If you’ve seen the first set and loved those then we’re sure you’ll love these ones too. Vanessa looks like she’s having an amazing time in this photoshoot.

</div></div>



<style>
#pun {background-image: url("http://savepic.org/2125437.png"); background-repeat: repeat;}
</style>

<style type="text/css">
.punbb .main .container,
.punbb td.tc3,
.punbb .section .container,punbb td.tc2,.punbb td.tcr,#pun .tc2, #pun-title .title-logo, #pun-title table, #pun-main h1,#pun-stats h2, 
#pun th, #pun-main .post h3 span, #pun-main .post h3, #pun-navlinks .container, #pun-main .post-body, 
#pun-main .formal textarea  {background-color: transparent; }
</style>

<style>
body {background-color: #f1f0da; background-image: url("http://xmages.net/storage/10/1/0/1/9/upload/8800fe2f.png"); background-repeat: no-repeat; background-position
:  top center;}
</style>

<style type="text/css">
#pun-title table {background-image : url("http://xmages.net/storage/10/1/0/1/9/upload/c802682b.png");
background-repeat : no-repeat; height : 400px;
}
</style>

<style>
#pun-main h2 {background-color: transparent;}
</style>

<style type="text/css">
#pun-title .title-logo span {display: none;}
</style>

<style>	
#menu span {
padding: 7px 0px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 950px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 450px;
text-align: center;
font-size: 12px;
width: 950px;
}

.submenutext {
display: none; 
height: 60px;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

<center><table style="width: 200px;">
 <tbody>
  <tr>
   <td>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Кнопка 1</span>
<span alt="#sm2" style="cursor: pointer;">Кнопка 2</span>
<span alt="#sm3" style="cursor: pointer;">Кнопка 3</span>
<span alt="#sm4" style="cursor: pointer;">Кнопка 4</span>
<span alt="#sm5" style="cursor: pointer;">Кнопка 5</span>
           </b>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>

<!--сама таблица1-->

<style type="text/css">
<!--
.стиль4 {
	font-size: 14px;
	color: #3f2d1f;
	font-style: italic;
}
.стиль6 {
	font-size: 17px;
	font-weight: bold;
	color: #EEC591;
	font-style: italic;
}
.стиль7 {
	color: #3f2d1f;
	font-size: 17px;
	font-style: italic;
}
-->
</style>
</head>

<body>
<table width="100%" border="0">
  <tr>
    <td><img src="https://forumupload.ru/uploads/000f/75/32/44-1-f.png" ></td>
    <td><p align="center" class="стиль7"><u>Объявление:</u></p>
      <p align="center" class="стиль6">&nbsp;</p>
      <p align="center" class="стиль7">Приветсвие и тра-та-та </p>
    <p align="center" class="стиль4">&nbsp;</p>
    <p align="center" class="стиль7"><u></u></p>
    <p align="center" class="стиль6">&nbsp;</p>
    <p align="center" class="стиль4"></p>
<br>
<p align="center" class="стиль7"><u></u></p>
<p align="center" class="стиль4"></p>
<br>
<p align="center" class="стиль7"></p>

</td>
  </tr>
</table>
</body>
<!--конец таблицы1-->

</div>
     <div id="sm2" class="submenutext"><br /><br />

Контент 2-й кнопки
</div>
     <div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
     <div id="sm4" class="submenutext"><br /><br />
Контент 4-й кнопки
</div>
     <div id="sm5" class="submenutext"><br /><br />
Контент 5-й кнопки
</div>

</div>
   </td>
</tr>
 </tbody>
</table></center>