<article class="post-item" itemtype="http://schema.org/Article" data-sorting="14050613">
  <meta content="$ENTRY_URL$" itemprop="url">
  <meta content="$DATE$ $TIME$" itemprop="datePublished">
  <meta content="UserComments:$COMMENTS_NUM$" itemprop="interactionCount">
  <div class="<?if(river)?>river<?else?>mini<?endif?>">  
  <div class="poster-block">
  <div class="corner">$RATED$</div>
  <a href="$ENTRY_URL$"><img src="$SCREEN_URL$" width="230" height="150"/></a>
  <div class="section">
  <a href="/publ/">Jaunumi</a>
  </div>
  </div>
  <h3 class="title">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </h3>
  <div class="text" itemprop="description">
$MESSAGE$
  </div>
  <div class="info">
  <time class="time-ago"><span>$DATE$ - $TIME$</span></time>
  <span class="author">iesūtīja: $USERNAME$</span>
  </div>
  </div>
</article>
   
  <script>
   
  $('.river div.text').each(function() {
  if($(this).text().length > 380) {
  var text = $(this).text().substr(0,376);
  $(this).text(text+'...');
  }  
  });
  </script>

<style>
  /*Post Items*/
.post-item {
margin:0 30px 0 0;
display:inline-block
}

.post-item.edge {
margin-right:0!important
}

.post-item .mini {
width:229px;
height:400px;
float:left;
margin:0 0 10px
}

.post-item .mini .poster-block {
width:230px;
height:150px;
overflow:hidden;
border-radius:.3em;
-o-border-radius:.3em;
-webkit-border-radius:.3em;
box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
-o-box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
-webkit-box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
position:relative;
z-index:1
}

.post-item .mini .poster-block .poster-img {
margin:0 auto;
display:block;
height:150px;
min-width:250px;
position:relative;
z-index:10
}

.post-item .mini .poster-block .corner {
width:34px;
height:34px;
text-align:center;
background:rgba(255,255,255,.5);
position:absolute;
top:7px;
right:7px;
z-index:20;
font:14px/35px 'Cuprum Bold';
border:2px solid #FFF;
color:#FFF;
border-radius:50%;
-o-border-radius:50%;
-webkit-border-radius:50%;
box-shadow:0 2px 2px -1px rgba(0,0,0,0.4);
-o-box-shadow:0 2px 2px -1px rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,0.4)
}

.post-item .mini .poster-block .section {
position:absolute;
bottom:7px;
left:7px;
z-index:20;
padding:3px 1px 2px;
font-weight:700;
border-bottom:2px solid #FF9D00
}

.post-item .mini .poster-block .section a:link,  
.post-item .mini .poster-block .section a:visited{
color:#FFF
}

.post-item .mini .title {
height:45px;
overflow:hidden;
margin:10px 0 5px;
padding:0 0 5px;
display:block;
font:18px/20px 'Cuprum Bold';
letter-spacing:0;
color:#26282C;
text-shadow:0 1px 0 rgba(255,255,255,.7);
transition:all .2s ease;
-webkit-ransition:all .2s ease;
-o-transition:all .2s ease
}

.post-item .mini .title:hover {
box-shadow: 0 2px 0 #FFA100;
}

.post-item .mini .title a:link, .post-item .mini .title a:visited{
color:#26282C
}

.post-item .mini .title a:hover{
color:#000
}

.post-item .mini .text {
color:#4B4B4B;
height:137px;
overflow:hidden;
display:inline-block;
font-size:13px;
line-height:1.5;
word-wrap:break-word;
text-align:justify
}

.post-item .mini .info {
margin:5px 0 0;
padding:5px 0 0;
border-top:1px solid #E0E0E0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
-o-box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
color:#acacaf
}

.post-item .mini .info .author {
float:right;
display:inline-block;
font-size:11px
}

.post-item .mini .info .time-ago {
display:inline-block
}

.post-item .river {
width:749px;
min-height:200px;
height:100%;
margin:0 0 30px;
border-bottom:1px dashed #D0D0D0
}

.post-item .river .poster-block {
float:right;
width:250px;
height:150px;
overflow:hidden;
border-radius:.3em;
-o-border-radius:.3em;
-webkit-border-radius:.3em;
box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
-o-box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
-webkit-box-shadow:0 2px 0 rgba(255,255,255,.0), 0 2px 3px -2px rgba(0,0,0,.7);
position:relative;
z-index:1
}

.post-item .river .poster-block .poster-img {
height:150px;
min-width:250px;
position:relative;
z-index:10;
transition:all .2s ease;
-webkit-ransition:all .2s ease;
-o-transition:all .2s ease
}

.post-item .river .poster-block .poster-img:hover {
opacity:.9
}

.post-item .river .poster-block .corner {
width:34px;
height:34px;
text-align:center;
background:rgba(255,255,255,.5);
position:absolute;
top:7px;
right:7px;
z-index:20;
font:14px/34px 'Cuprum Bold';
border:2px solid #FFF;
color:#FFF;
border-radius:50%;
-o-border-radius:50%;
-webkit-border-radius:50%;
box-shadow:0 2px 2px -1px rgba(0,0,0,0.4);
-o-box-shadow:0 2px 2px -1px rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,0.4)
}

.post-item .river .poster-block .section {
position:absolute;
bottom:7px;
left:7px;
z-index:20;
padding:3px 1px 2px;
border-bottom:2px solid #FF9D00
}

.post-item .river .poster-block .section a:link,  
.post-item .river .poster-block .section a:visited{
color:#FFF
}

.post-item .river .title {
width:490px;
margin:10px 0 5px;
display:inline-block;
padding:0 0 5px;
font:23px 'Cuprum Bold';
letter-spacing:0;
color:#26282C;
text-shadow:0 1px 0 rgba(255,255,255,.7);
transition:all .2s ease;
-webkit-ransition:all .2s ease;
-o-transition:all .2s ease
}

.post-item .river .title:hover {
box-shadow: 0 2px 0 #FFA100;
}

.post-item .river .title a:link, .post-item .river .title a:visited{
color:#26282C
}

.post-item .river .title a:hover{
color:#000
}

.post-item .river .text {
float:left;
width:490px;
display:inline-block;
height:100%;
font-size:14px;
line-height:1.5;
word-wrap:break-word;
text-align:justify
}

.post-item .river .text:before,.post-item .river .text:after {
content:' ';
display:table
}

.post-item .river .text:before {
content:' ';
display:table;
clear:both
}

.post-item .river .info:before {
content:' ';
display:table;
clear:both
}

.post-item .river .info {
margin:10px 0 0;
height:50px;
line-height:50px;
color:#acacaf
}

.post-item .river .info .author {
float:right;
display:inline-block;
font-size:11px
}

.post-item .river .info .time-ago {
display:inline-block
  }</style>

<li id="mini" class="icon-th">BIG</li>
  <li id="river" class="icon-th-list">MINI</li>