<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px;
overflow: scroll; /*leave this value alone*/
width: 850px; /*Width of Carousel Viewer itself*/
height: 285px; /*Height should enough to fit largest content's height*/
}
.slide2{
	height: 150px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 850px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<title>$SITE_NAME$</title>
<link type="text/css" rel="StyleSheet" href="[CSS_URL]" />
<script type='text/javascript' src='/js/jquery00.js'></script>
<script type="text/javascript" src="/js/stepcaro.js"></script>
</head>
<body style="background: #fff url(/images/bg.jpg) fixed left top">
<!-- <header> -->
<div class="top">
<div class="wrap">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products Page</a></li>
</ul>
<form action="$HOME_PAGE_LINK$search" name="seatchform" method="get">
<input class="text" type="text" name="s" id="s" size="20" value="" />
<button>go</button>
</form>
<div class="clear"></div>
</div>
<!-- wrap -->
</div>
<!-- top -->
<div class="header wrap">
<div class="logo">
<a href="$HOME_PAGE_LINK$">Pro100uCoz.ru</a>
<h2>  uCoz</h2>
</div>
<!-- logo -->
<div class="banner">
<a href="www.sitydream.ru"><img src="/images/majalahk.jpg" width="468" height="60" /></a>
</div>
<!-- banner -->
<div class="clear"></div>
</div>
<div class="out long">
<div class="in">
<div class="menu wrap">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

<div class="sign">
<a href="$REGISTER_LINK$">Register</a> |
<a href="$REMINDER_LINK$">Sign In</a>
</div><!-- sign -->
<div class="clear"></div>
</div>
</div>
<div style="display:none;"> <a href="http://worldtemplates.net/ucoz"> ucoz</a> .   <a href="http://mp3albom.net/alternative">  .</a> <a href="http://postroyforum.com"> </a></div>
</div>
<div class="cumic wrap">
<div class="cumb">
</div>
<div class="icon">
<a target="_blank" href=""><img height="39" width="58" src="/images/rss00000.png"/></a>
<a target="_blank" href=""><img height="35" width="52" src="/images/mail0000.png"/></a>
<a target="_blank" href=""><img height="42" width="51" src="/images/tweet000.png"/></a>
</div>
<div class="clear"></div>
</div>
<div class="out wrap">
<div class="in">
 
<script type="text/javascript">

function slideSwitch() {
 var $active = $('#slideshow IMG.active');

 if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 var $next = $active.next().length ? $active.next()
 : $('#slideshow IMG:first');


 $active.addClass('last-active');

 $next.css({opacity: 0.0})
 .addClass('active')
 .animate({opacity: 1.0}, 1000, function() {
 $active.removeClass('active last-active');
 });
}

$(function() {
 setInterval( "slideSwitch()", 5000 );
});

</script>

<style type="text/css">

#slideshow {
 position:relative;
 height:350px;
}

#slideshow IMG {
 position:absolute;
 top:0;
 left:0;
 z-index:8;
 opacity:0.0;
}

#slideshow IMG.active {
 z-index:10;
 opacity:1.0;
}

#slideshow IMG.last-active {
 z-index:9;
}

</style>
<div id="slideshow">
 <img src="/slyder/slyd1.jpg" alt="Slideshow Image 1" class="active" />
 <img src="/slyder/slyd2.jpg" alt="Slideshow Image 2" />
 <img src="/slyder/slyd3.jpg" alt="Slideshow Image 3" />
 <img src="/slyder/slyd4.jpg" alt="Slideshow Image 4" />
</div>

<div class="clear"></div>
</div>
</div>

<div class="out wrap outslide">
<div class="in">
<script type="text/javascript">

stepcarousel.setup({
 galleryid: 'mygallery2', //id of carousel DIV
 beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
 panelclass: 'panel', //class of panel DIVs each holding content
 autostep: {enable:false, moveby:1, pause:3000},
 panelbehavior: {speed:500, wraparound:false, persist:true},
 defaultbuttons: {enable: true, moveby: 1, leftnav: ['/images/navl.png', -15, 60], rightnav: ['/images/navr.png', -5, 60]},
 statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
 contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

<div id="mygallery2" class="stepcarousel slide2">

<h3>Shop by Genre</h3>
<div class="belt">
<div class="panel" style="">
<ul class="genre">
 <li><a href="#"><img src="/images/timthumb_004.png" width="120" height="120" /> <span>Melayu</span></a></li>
 <li><a href="#"><img src="/images/timthumb_012.png" width="120" height="120" /> <span>Metal</span></a></li>
 <li><a href="#"><img src="/images/timthumb_014.png" width="120" height="120" /> <span>Rock</span></a></li>
 <li><a href="#"><img src="/images/timthumb_015.png" width="120" height="120" /> <span>dangdut</span></a></li>
</ul>
</div>

</div>
</div>
<div class="clear"></div>

</div>
</div>
<div class="clear"></div>

<!-- </header> -->

<!-- <middle> -->
<div class="wrap col2">
<div class="mainbar">
<div class="out">
<div class="in">

[BODY]

<div class="clear"></div>
<div class="prevnext">
<div class="pagination"></div>
</div>
</div>
</div>    
</div>

<div class="sidebar">
<!-- <container> -->

<!-- <block> -->
<div id="shopping-cart" class="out widget_wp_shopping_cart">
<div class="in"><h3>TITLE</h3>    
<div id='sliding_cart' class='shopping-cart-wrapper' >
<div class="cart">
CONTENT
<div class="clear"></div>	
<div class="clear"></div>
</div>    
</div>
</div>
</div>
<!-- </block> -->

<!-- </container> -->
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- </middle> -->

<!-- <footer> -->
<div class="clear"></div>
</div><!-- wrap -->
<br />
<div class="out long">
<div class="in">
<div class="foot wrap">
<div class="desc">

<a href="http://demo.icreativelabs.com/dangdoot_free">Dangdoot</a>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum auctor libero ut fermentum. Aenean sed augue ac neque iaculis eleifend sit amet ut nisi. Pellentesque vel elit quis magna sagittis adipiscing pharetra non dolor. </p>
</div><!-- desc -->
<ul class="feed">
<li>
<a href="" target="_blank"><img src="/images/rss20000.png" width="43" height="29" /></a><br />
RSS FEED<br />
</li>
<li><a href="" target="_blank">
<img src="/images/mail2000.png" width="39" height="29" /></a><br />
EMAIL<br />
</li>
<li><a href="" target="_blank">
<img src="/images/tweet200.png" width="35" height="29" /></a><br />
TWITTER<br />
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="bot wrap">
$POWERED_BY$   |   <a href="www.sitydream.ru"> Sitydream.ru</a>   |   <a href="http://pro100ucoz.ru/">uCoz</a>
</div>
<!-- </footer> -->
</body>
</html>

<!-- <popup> -->
<table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%">
<tr><td style="background:#D4DFF7;" align="center"><b>[TITLE]</b></td></tr>
<tr><td align="center" style="background:#F4F4F4;padding:5px;">[BODY]</td></tr>
</table>
<!-- </popup> -->
