div.mediabg {
width:235px;
height:180px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.mediabg .mediatitle {
height:25px;
background:rgba(0,0,0,0.5);
border-radius:3px 3px 0px 0px;
-moz-border-radius:3px 3px 0px 0px;
-webkit-border-radius:3px 3px 0px 0px;
}
.mediabg .mediatitle a{
color:#fff;
font-size:13px;
padding-top:5px;
display:inline-block;
height:20px;
width:100%;
}
.mediabg .mediatitle a:hover{
text-shadow:0px 0px 5px #fff, 0px 0px 5px #fff;
}
.mediabg .hover-container {
height:130px;
}
.hcbackground {
height:130px;
background:rgba(0,0,0,0.5);
}
.mediabg .mediabottom {
height:25px;
background:rgba(0,0,0,0.5);
border-radius:0px 0px 3px 3px;
-moz-border-radius:0px 0px 3px 3px;
-webkit-border-radius:0px 0px 3px 3px;
margin-bottom:0px;
}

.mediabg .mediabottom .lrating {
float:left;
margin-top:5px;
margin-left:5px;
}

.mediabg .mediabottom .medialength {
float:right;
width:55px;
color:#fff;
font-size:13px;
margin-top:5px;
margin-right:5px;
}

<div class="mediabg" style="background-image: url($SCREEN_URL$);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$SCREEN_URL$',sizingMethod='scale');">
<div class="mediatitle">
<a href="$ENTRY_URL$"><?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>...<?else?>$TITLE$<?endif?></a>
</div>
<div class="hover-container">
<div class="hcbackground" style="display:none;"></div>
</div>
<div class="mediabottom">
<div class="lrating"></div>
<div class="medialength">$DURATION$</div>
</div>
</div>