<style type="text/css" rel="stylesheet">
#bo1xe {margin:10px; font-size:13px; color:#f9f9f9;}
#bo2xe {margin:5px; font-size:19px; color:#f1f1f1;}
#bonxe {position:relative; width:325px; height:325px; z-index:1; overflow:hidden; margin:5px; border:5px solid #cdcdcd; background:#131313;}
#bonxe img {position:absolute; width:325px; height:325px; z-index:2;}
</style>

<script type="text/javascript">$(function(){$("#bonxe").hover(function(){$(this).find("img").stop().animate({top:-325},500);},function(){$(this).find("img").stop().animate({top:0},500);});});</script>

<div id="bonxe">
<img src="$IMG_URL1$">
<div id="bo1xe">
<b id="bo2xe"><a href="$ENTRY_URL$">$TITLE$</a></b>
<p>$BRIEF$</p>
</div></div>

<style>/* Materialu izskats */
.vidnews {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:0.9;}
.vidnews:hover {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:1;}
.imgbigload {display: block;box-shadow: 0px 0px 15px rgba(0,0,0,0.04);border-radius:5px; background-size: cover; position: relative; margin: 0; background-size: cover; width: 640px; height: 480px;}
.imgbigload:hover {box-shadow: 0px 0px 15px rgba(0,0,0,0.04);}
.loaddates {background:#333;padding-left:10px;padding-right:10px;position: absolute; bottom: 10px; left: 20px; color:#fff; font-size: 14px; }
.loadsave {opacity:0.5;border-radius:5px;position: absolute; bottom: 10px; left: 10px; background: #333; padding: 3px 15px; font-size: 13px; }
.loadsave:hover {opacity:0,9;background: #444;border-radius:5px;}
.loadsave a {color:#fff; }

.title1 a {color: #fff;text-shadow: 0 1px 2px #222;}
.title1 a:hover {color: #efefef;text-shadow: 0 1px 2px #222;}
.title1 {margin-bottom: 12px;padding-left: 5px;font-size: 17px;line-height: 1.333;font-weight: bold;color: #444;padding: 20px;}

.brief1 {opacity: 8.1;position: absolute;transition: all 0.7s ease 0s;background-color: rgba(0, 0, 0, 0.85);width: 100%;height: 100%;border-radius:5px;}
.brief1:hover {opacity: 0;}
.brief1 a {color:#fff;}
/* end */</style>

<div style="width:100%;float:left;">
<div class="vidnews">
<div class="imgbigload" style="background-image: url('$IMG_URL1$'); margin: 15px 0;">
<div class="brief1" style="cursor:pointer;" onclick="location.href='$ENTRY_URL$'"> <p style="color: rgb(255, 255, 255); padding: 57px;"><span style="font-size:19pt"><?substr($MESSAGE$,0,200)?></span></p></div>
<div class="loadnames"> <div class="title1 textadapr" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?></div> </div>
</div>
</div>
</div>

<style>

figure{
position:relative
}
figcaption{
position:absolute;
top:0;
left:0;
}

.primerfigursstt{
position:relative;
display:inline-block;
}
.primerfigurssttC{
opacity:5;
position:absolute;
top:0;
left:0;
background: rgba(0,0,0,.5);
width:540px;
height:500px;
color:#fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
font: 11px Tahoma;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.primerfigursstt:hover .primerfigurssttC{
opacity: 3 !important;
}
</style>

<center><div class="box-news"> <br><br>$MODER_PANEL$<br><BR><div>

<BR><BR><BR><BR><BR>
<center>
<figure class="primerfigursstt">
<img src="$IMG_URL1$" style="width:539px;height:500px;"> </a>
<figcaption class="primerfigurssttC">
<div style="padding:10px;">
<div style="font:bold 28px Tahoma"><BR><BR><BR><BR><BR><BR><BR><center>$MESSAGE$</center><BR><BR><BR></div>

</div>
</figcaption>
</figure> </center>

<center><BR><b><a href="$ENTRY_URL$">Nr.$TITLE$</b></a><BR><BR>

<iframe height="20" width="84" frameborder="0" src="http://www.draugiem.lv/say/ext/like.php?title=$CATEGORY_NAME$ atziņas&url=http://Tavsweb.lv/$ENTRY_URL$&titlePrefix=Tava web nosaukums"></iframe>

<BR></center> <BR>

<div class="data-news"><a href="$ENTRY_URL$" class="poshytips button-more" title="Tālāk"></a><center>Kategorija: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></center></div>
<BR><BR></div> <BR></div>
<br><BR><BR>
<style>

/* Atzinas */
.news-info {
overflow: hidden;
}
.news-info > .left {
float: left;
margin-right: 15px;
}
.news-info > .left + .right {
margin-left: 565px;
}
.news-info .image {
float: left;
padding: 10px 10px 0 10px;
margin: 0 0 -4px 0;
text-align: center;
position: relative;
z-index: 0;
border-left: 5px solid #d2d2ce;
border-top: 5px solid #d2d2ce;
border-right: 5px solid #d2d2ce;
}
.news-info .image img {
border: 5px solid #d2d2ce;
padding: 0;
}
.news-info .data-news {
clear: both;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;
margin: -8px 0 20px 0;
}
.news-info .data-news .info-news {
margin: 0 10px 10px 10px;
text-align: center;
overflow: auto;
background: #f8f8f8;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;

}
.news-info .description {
padding: 0;
margin-bottom: 15px;
line-height: 20px;
color: #3333333;
}
.news-info .review {
color: #4D4D4D;
border: 1px solid #d2d2ce;
padding: 8px;
line-height: 20px;
}
.box-news-images {
width: 100%;
overflow: hidden;
text-align: center;
}
.box-news-images > div {
position: relative;
width: 570px;
display: inline-block;
vertical-align: top;
margin: 0;
text-align: center;
background: #eee;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
margin: 13px 4px 0 4px;
}
.box-news-images > div:hover {
background: #e2e2e2;
}
.box-news-images .image {
width: 100%;
border: 1px solid #d2d2ce;
background: #FFFFFF;
}
.box-news-images .image img {
opacity: .8;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.box-news-images .image img:hover {
opacity: 1;

}
.product-list .top {
padding-top: 10px;
}
.product-list .data-news {
height: 28px;
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
border-bottom: 1px solid #d2d2ce;
margin-bottom: 0;
background: #f8f8f8;
float: left;
clear: both;
}

.product-grid a.button-more, .box-news a.button-more {
background: #f8f8f8 url('http://i.imgur.com/neR1bF4.png') no-repeat right center;
width: 30px;
height: 28px;
display: block;
float: right;
}
/* box-news */
.box-news {

}
.box-news > div {
position: relative;
width: 624px;
display: inline-block;
vertical-align: top;
margin: 0;
text-align: center;
background: #eee;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
margin: 13px 4px 0 4px;
float: left;
}
.box-news > div:hover {
background: #e2e2e2;
}
#column-left .box-news > div {
width: 624px;
margin: 13px 0 0 0;
}
#column-right .box-news > div {
width: 624px;
margin: 13px 0 0 0;
}
#column-left + #content .box-news > div {
width: 624px;
}
#column-right + #content .box-news > div {
width: 624px;
}
#column-left + #column-right + #content .box-news > div {
width: 624px;
}
.box-news .image {
display: block;
margin-bottom: 0px;
position: relative;
border: 1px solid #d2d2ce;
background: #FFFFFF;
}
.box-news .image img {
width: 622px;
height: 622px;
position: relative;
padding: 0;
z-index: 5;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.box-news .image img:hover {
opacity: 0.1;
}
.box-news .description-image{
position: absolute;
margin: 7px;
padding: 10px;
text-align: left;
color: #222222;
top: 0;
left: 0;
z-index: 1;
}
.box-news .description {
height: 530px;
background: #F3F3F3;
padding: 7px;
overflow: hidden;
border: 1px solid #d2d2ce;
text-align: left;
color: #222222;
}
.box-news .name {
border-left: 1px solid #d2d2ce;
border-right: 1px solid #d2d2ce;
height: 30px;
padding: 5px;
}
.box-news .name a {
color: #333;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
text-decoration: none;
display: block;
clear: both;
}
.box-news .data-news {
height: 28px;
border: 1px solid #d2d2ce;
background: #f8f8f8;
}
.box-news .data-news .info {
float: right;
}

</style>