<script type="text/javascript" src="http://www.baijs.nl/tinycircleslider/js/jquery.tinycircleslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<style type="text/css">
.mybb_bs { 
  position: absolute;
  z-index: 100000 !important;
  top: -63px !important;
  left: 30%;
}

#pun {
  position: relative;
  top: 35px;
}

#pun-title table {
  height: 450px;
  background: url(http://savepic.net/1179716.jpg);
}

.title-logo span {
  display: none;
}

#rotatescroll {
  height:450px; 
  position: relative; 
  width: 820px; 
  margin: 0 auto -450px auto;
}
#rotatescroll .viewport {
  height: 450px; 
  position: relative; 
  margin: 0 auto; 
  overflow: hidden; 
  width: 100%; 
}
#rotatescroll .overview { 
  position: absolute; 
  width: 798px; 
  list-style: none; 
  margin: 0; 
  padding: 0;  
  left: 0; 
  top: 0;
}
#rotatescroll .overview li {
  height: 300px; 
  width: 900px; 
  float: left; 
  position: relative;
}
#rotatescroll .overlay {
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 300px; 
  width:300px;
}
#rotatescroll .thumb {
  position: absolute;
  top: -3px; 
  cursor: pointer; 
  left: 137px; 
  width: 26px;
  z-index: 200;  
  height: 26px;
}
#rotatescroll .dot {
  display: none; 
  height: 12px; 
  width: 12px; 
  position: absolute; 
  left: 155px; 
  top: 3px; 
  z-index: 100;
}
#rotatescroll .dot span {
  display: none;
}
</style>

<div id="rotatescroll">
  <div class="viewport">
   <ul class="overview">
<li><img rel="group" src="http://savepic.net/1241309.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1204236.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1195020.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1239055.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1182765.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1215503.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1209359.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1193999.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1237006.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1218561.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1205249.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1196033.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1191937.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1220608.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1206272.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1189888.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1179648.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1243139.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1234947.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1227779.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1217539.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1236994.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1208322.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1226778.jpg" alt="header" /></li>
<li><img rel="group" src="http://savepic.net/1211418.jpg" alt="header" /></li>
  </ul>
 </div>
 <div class="dot"></div>
 <div class="overlay"></div>
 <div class="thumb"></div>
</div>

<script type="text/javascript">
document.getElementById("title-logo-tdr").innerHTML = "<div class='mybb_bs'>" + document.getElementById("title-logo-tdr").innerHTML + "</div>";
</script>

	<!-- OPEN ROTATE UI -->
	<div id="rotatescroll3">
	<div class="viewport">
<ul class="overview">
	<li><a rel="group" href="http://www.baijs.nl/tinycircleslider/images/hdr1.jpg"><img src="http://www.baijs.nl/tinycircleslider/images/hdr1.jpg"></a></li>
	<li><a rel="group" href="http://www.baijs.nl/tinycircleslider/images/hdr2.jpg"><img src="http://www.baijs.nl/tinycircleslider/images/hdr2.jpg"></a></li>
	<li><a rel="group" href="http://www.baijs.nl/tinycircleslider/images/hdr3.jpg"><img src="http://www.baijs.nl/tinycircleslider/images/hdr3.jpg"></a></li>
	<li><a rel="group" href="http://www.baijs.nl/tinycircleslider/images/hdr4.jpg"><img src="http://www.baijs.nl/tinycircleslider/images/hdr4.jpg"></a></li>	                             
</ul>
	</div>


<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
	</div>
	<!-- CLOSE ROTATE UI -->
	
	
<script type="text/javascript">
var Website = {
	run: function(){
var oCircleslider3 = $('#rotatescroll3');
if(oCircleslider3.length > 0){
	oCircleslider3.tinycircleslider({ lightbox: true, snaptodots: true, radius: 184, hidedots: false});
	$('a', oCircleslider3).fancybox();
}

Cufon.replace('h2, h1, a.download');

var oCon = document.getElementById('mcon');
var oLink = document.createElement('a');
var oText = document.createTextNode("me"); 
var sPart0 = 'ma';
var sPart1 = 'ilto:wie';
var sPart2 = 'ringen';
var sPart3 = '@gm';	
var sPart4 = 'ail.com';
oLink.href = sPart0+sPart1+sPart2+sPart3+sPart4;
oCon.appendChild(oLink);
oLink.appendChild(oText);

	}
};

//Initialize
$(document).ready(function(){
	Website.run();
});
</script>