<script src="js/cufon-yui.js" type="https://forumstatic.ru/files/0011/fb/fd/57044.js"></script>
    <script src="https://forumstatic.ru/files/0011/fb/fd/75403.js" type="text/javascript"></script>

 <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/CompactNewsPreviewer/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                //caching
        //next and prev buttons
        var $cn_next	= $('#cn_next');
        var $cn_prev	= $('#cn_prev');
        //wrapper of the left items
        var $cn_list 	= $('#cn_list');
        var $pages    = $cn_list.find('.cn_page');
        //how many pages
        var cnt_pages	= $pages.length;
        //the default page is the first one
        var page    = 1;
        //list of news (left items)
        var $items     = $cn_list.find('.cn_item');
        //the current item being viewed (right side)
        var $cn_preview = $('#cn_preview');
        //index of the item being viewed. 
        //the default is the first one
        var current    = 1;
        
        /*
        for each item we store its index relative to all the document.
        we bind a click event that slides up or down the current item
        and slides up or down the clicked one. 
        Moving up or down will depend if the clicked item is after or
        before the current one
        */
        $items.each(function(i){
        	var $item = $(this);
        	$item.data('idx',i+1);
        	
        	$item.bind('click',function(){
            var $this     = $(this);
            $cn_list.find('.selected').removeClass('selected');
            $this.addClass('selected');
            var idx    	= $(this).data('idx');
            var $current 	= $cn_preview.find('.cn_content:nth-child('+current+')');
            var $next    = $cn_preview.find('.cn_content:nth-child('+idx+')');
            
            if(idx > current){
            	$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                $(this).css({'top':'310px'});
            	});
            	$next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
            }
            else if(idx < current){
            	$current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
                $(this).css({'top':'310px'});
            	});
            	$next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
            }
            current = idx;
        	});
        });
        
        /*
        shows next page if exists:
        the next page fades in
        also checks if the button should get disabled
        */
        $cn_next.bind('click',function(e){
        	var $this = $(this);
        	$cn_prev.removeClass('disabled');
        	++page;
        	if(page == cnt_pages)
            $this.addClass('disabled');
        	if(page > cnt_pages){ 
            page = cnt_pages;
            return;
        	}	
        	$pages.hide();
        	$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
        	e.preventDefault();
        });
        /*
        shows previous page if exists:
        the previous page fades in
        also checks if the button should get disabled
        */
        $cn_prev.bind('click',function(e){
        	var $this = $(this);
        	$cn_next.removeClass('disabled');
        	--page;
        	if(page == 1)
            $this.addClass('disabled');
        	if(page < 1){ 
            page = 1;
            return;
        	}
        	$pages.hide();
        	$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
        	e.preventDefault();
        });
        
            });
        </script>

<div class="cn_wrapper">
    	<div id="cn_preview" class="cn_preview">
        <div class="cn_content" style="top:5px;">
        	<img src="https://forumstatic.ru/files/0011/fb/fd/96489.jpg" alt=""/>
        	<h1>Polaroid Photobar Gallery with jQuery</h1>
        	<span class="cn_date">28/09/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>In this tutorial we are going to create an image gallery with a Polaroid look.
            We will have albums that will expand to sets of slightly rotated thumbnails
            that pop out on hover.</p>
        	<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/fullpageimagegallery.jpg" alt=""/>
        	<h1>Full Page Image Gallery with jQuery</h1>
        	<span class="cn_date">08/09/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>In this tutorial we are going to create a stunning full page gallery with
            scrollable thumbnails and a scrollable full screen preview.
            </p>
        	<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/collapsingsitenavigation.jpg" alt=""/>
        	<h1>Collapsing Site Navigation with jQuery</h1>
        	<span class="cn_date">06/09/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            Today we will create a collapsing menu that contains vertical
            navigation bars and a slide out content area. When hovering
            over a menu item, an image slides down from the top and a
            submenu slides up from the bottom.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/thumbnailsnavigation.jpg" alt=""/>
        	<h1>Thumbnails Navigation Gallery with jQuery</h1>
        	<span class="cn_date">29/07/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            In this tutorial we are going to create an extraordinary
            gallery with scrollable thumbnails that slide out from a
            navigation. We are going to use jQuery and some CSS3
            properties for the style.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/musicportfoliotemplate.jpg" alt=""/>
        	<h1>Music Portfolio Template</h1>
        	<span class="cn_date">26/07/2010</span>
        	<span class="cn_category">Development</span>
        	<p>
            Today we want to share a music portfolio template with you.
            The idea is to create an artist portfolio with a discography
            line up and HTML5 audio player jPlayer.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/26/music-portfolio-template/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/relatedpostsslideouts.jpg" alt=""/>
        	<h1>Related Posts Slide Out Boxes</h1>
        	<span class="cn_date">21/07/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            The main idea is to show a fixed list at the right side
            of the screen with some thumbnails sticking out. When
            the user hovers over the items, they slide out.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/LatestTweetsTooltip.jpg" alt=""/>
        	<h1>Latest Tweets Tooltip with jQuery</h1>
        	<span class="cn_date">20/07/2010</span>
        	<span class="cn_category">Development</span>
        	<p>
            If you have a news website, it might be interesting
            for you to allow your users to see the latests tweets
            about a topic. Here is a jQuery plugin for showing the
            latest tweets about a certain word or phrase.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/20/latest-tweets-tooltip/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/slidedownbox.jpg" alt=""/>
        	<h1>Slide Down Box Menu with jQuery and CSS3</h1>
        	<span class="cn_date">16/07/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            In this tutorial we will create a unique sliding box
            navigation. The idea is to make a box with the menu
            item slide out, while a thumbnail pops up.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/MinimalisticSlideshowGallery.jpg" alt=""/>
        	<h1>Minimalistic Slideshow Gallery with jQuery</h1>
        	<span class="cn_date">05/07/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            In today’s tutorial we will create a simple and
            beautiful slideshow gallery that can be easily
            integrated in your web site.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/imagehighlight.jpg" alt=""/>
        	<h1>Image Highlighting and Preview with jQuery</h1>
        	<span class="cn_date">04/07/2010</span>
        	<span class="cn_category">Tutorials</span>
        	<p>
            In this tutorial we will show you how to highlight
            and preview images that are integrated in an
            article or spread over a page.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/" target="_blank" class="cn_more">Read more</a>
        </div>
        <div class="cn_content">
        	<img src="images/photodesk.jpg" alt=""/>
        	<h1>Interactive Photo Desk</h1>
        	<span class="cn_date">01/07/2010</span>
        	<span class="cn_category">Development</span>
        	<p>
            In this little experiment we created an interactive photo
            desk that provides some “realistic” interaction possibilities
            for the user.
        	</p>
        	<a href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/" target="_blank" class="cn_more">Read more</a>
        </div>
    	</div>
    	<div id="cn_list" class="cn_list">
        <div class="cn_page" style="display:block;">
        	<div class="cn_item selected">
            <h2>Polaroid Photobar Gallery with jQuery</h2>
            <p>Tutorial on how to create a gallery in polaroid style</p>
        	</div>
        	<div class="cn_item">
            <h2>Full Page Image Gallery with jQuery</h2>
            <p>Another tutorial on how to make a full page image gallery with some jQuery</p>
        	</div>
        	<div class="cn_item">
            <h2>Collapsing Site Navigation with jQuery</h2>
            <p>This tutorial shows how to create a stylish sliding site navigation</p>
        	</div>
        	<div class="cn_item">
            <h2>Thumbnails Navigation Gallery</h2>
            <p>This gallery will show images in a scrollable menu navigation</p>
        	</div>
        </div>
        <div class="cn_page">
        	<div class="cn_item">
            <h2>Music Portfolio Template</h2>
            <p>A template for a music portfolio website with an HTML5 audio player</p>
        	</div>
        	<div class="cn_item">
            <h2>Related Posts Slide Out Boxes</h2>
            <p>Show users more of your articles with these slide out boxes</p>
        	</div>
        	<div class="cn_item">
            <h2>Latest Tweets Tooltip with jQuery</h2>
            <p>A Plugin for showing the latest tweets with a certain word in your article</p>
        	</div>
        	<div class="cn_item">
            <h2>Slide Down Box Menu with jQuery and CSS3</h2>
            <p>A menu with a nice effect</p>
        	</div>
        </div>
        <div class="cn_page">
        	<div class="cn_item">
            <h2>Minimalistic Slideshow Gallery</h2>
            <p>A compact image gallery for your website</p>
        	</div>
        	<div class="cn_item">
            <h2>Image Highlighting and Preview</h2>
            <p>Highlight and preview images that are integrated in an article</p>
        	</div>
        	<div class="cn_item">
            <h2>Interactive Photo Desk</h2>
            <p>Creating a photo desk with some real world interaction</p>
        	</div>
        </div>
        <div class="cn_nav">
        	<a id="cn_prev" class="cn_prev disabled"></a>
        	<a id="cn_next" class="cn_next"></a>
        </div>
    	</div>
    </div>

*{
	margin:0;
	padding:0;
}
body{
	background:#ddd;
	font-family:"Myriad Pro","Trebuchet MS", sans-serif;
	font-size:12px;
}
.cn_wrapper{
	margin:90px auto 0px auto;
	width:500px;
	height:300px;
	position:relative;
	color:#fff;
	overflow:hidden;
	padding:5px;
	text-shadow:1px 1px 1px #000;
	border:1px solid #111;
	background-color:#333;
	-moz-box-shadow:1px 1px 4px #222;
	-webkit-box-shadow:1px 1px 4px #222;
	box-shadow:1px 1px 4px #222;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.cn_wrapper h1{
	font-size:20px;
	text-transform:uppercase;
}
.cn_wrapper h2{
	font-size:12px;
	border-bottom:1px solid #000;
	padding-bottom:4px;
	text-transform:uppercase;
}
.cn_preview, .cn_list{
	width:250px;
	height:300px;
	position:absolute;
	top:2px;
	left:6px;
}
.cn_preview{
	left:255px;
}
.cn_content{
	border:1px solid #444;
	top:310px;/*5*/
	left:5px;
	width:219px;
	padding:10px;
	position:absolute;
	background-color:#101010;
	height:275px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.cn_content img{
	width:215px;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
}
.cn_date{
	position:absolute;
	bottom:30px;
	right:8px;
	font-size:11px;
}
.cn_category{
	position:absolute;
	bottom:30px;
	left:8px;
	font-size:11px;
	padding:1px 3px;
	background:#ccc;
	border:1px solid #ddd;
	color:#000;
	text-shadow:-1px 0px 1px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.cn_content p{
	height:57px;
	margin-top:2px;
	overflow:hidden;
}
a.cn_more{
	position:absolute;
	padding: 4px 0px;
	left:0px;
	bottom:0px;
	width:236px;
	color:#fff;
	text-align:center;
	font-size:12px;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #011c44;
	text-transform:uppercase;
	text-decoration: none;
	border:1px solid #4c7ecb;
	outline:none;
	cursor:pointer;
	background-color: #1951A5;
	background-image:
    -moz-linear-gradient(
    	top,
    	rgba(255,255,255,0.25),
    	rgba(255,255,255,0.05)
    );
	background-image:
    -webkit-gradient(
    	linear,
    	left top,
    	left bottom,
    	color-stop(0, rgba(255,255,255,0.25)),
    	color-stop(1, rgba(255,255,255,0.05))
    );
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-border-bottom-left-radius: 5px;
	-border-bottom-right-radius: 5px;
	-moz-box-shadow:1px 1px 3px #111;
	-webkit-box-shadow:1px 1px 3px #111;
	box-shadow:1px 1px 3px #111;
}
a.cn_more:hover{
	color: #011c44;
	text-shadow: 1px 1px 1px #ccdffc;
}
.cn_item{
	border:1px solid #090909;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	height:49px;
	color:#fff;
	padding:5px;
	margin:6px 5px 0px 0px;
	text-shadow:1px 1px 1px #000;
	background:#2b2b2b;
	background:
    -webkit-gradient(
    	linear,
    	left top,
    	left bottom,
    	from(#171717),
    	to(#2b2b2b)
    );
	background:
    -moz-linear-gradient(
    	top,
    	#171717,
    	#2b2b2b
    );
	-moz-box-shadow:1px 1px 3px #111;
	-webkit-box-shadow:1px 1px 3px #111;
	box-shadow:1px 1px 3px #111;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.cn_item:hover, .selected{
	border-color:#4c7ecb;
	background-color: #1951A5;
	background-image:
    -moz-linear-gradient(
    	top,
    	rgba(255,255,255,0.25),
    	rgba(255,255,255,0.05)
    );
	background-image:
    -webkit-gradient(
    	linear,
    	left top,
    	left bottom,
    	color-stop(0, rgba(255,255,255,0.25)),
    	color-stop(1, rgba(255,255,255,0.05))
    );
}
.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{
	border-color:#2C5FAC;
}
.cn_item:hover p,
.cn_list .selected p,
.cn_item:active p{
	border-color:#527CBB;
}
.cn_item:active {
	color: #011c44;
	text-shadow: 1px 1px 1px #ccdffc;
}
.cn_list p{
	height:29px;
	padding-top:2px;
	overflow:hidden;
	border-top:1px solid #333;
}
.cn_nav{
	width:55px;
	height:24px;
	position:absolute;
	bottom:0px;
	left:94px;
}
a.cn_next, a.cn_prev{
	float:left;
	height:23px;
	width:23px;
	background-color:#212121;
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
	outline:none;
	border:1px solid #111;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
a.cn_next{
	background-image:url(https://forumstatic.ru/files/0011/fb/fd/22416.png);
}
a.cn_prev{
	margin-right:5px;
	background-image:url(https://forumstatic.ru/files/0011/fb/fd/92466.png);
}
.cn_nav a:hover{
	background-color:#101010;
}
.cn_nav a:active{
	margin-top:1px;
	background-color:#000;
}
.cn_nav a.disabled{
	opacity:0.5;
}
.cn_page{
	display:none;
}