Блок товаров

<div class="el_offerItem_xxxxxx col">
	<div class="wrapperInner">
		<div class="imageBlock image-flex">
			<a class="el" href="/offer/"><img src="offer.png" alt=""></a>
		</div>
		<p class="title"><a href="/offer/" title="Наименование товара">Наименование товара</a></p>
		<div class="priceBlock">
			<p class="priceLine">
				<span class="priceOld"><span>456.27</span> грн.</span>
				<span class="price"><span>432.49</span> грн.</span>
			</p>
 
 
			<form method="POST" enctype="multipart/form-data" onsubmit="CartOfferAction.add(this); return false;">
				<input type="hidden" name="offerModAmount" value="1" />
				<input type="hidden" name="offerModId" value="1" />
				<button  class="btn addToCartButton" title="Купить товар">Купить</button>
			</form>
		</div>
		<div class="rateBlock clearfix">
			<a href="/offer/#tab=2" title="Отзывы (0)">
				<div class="rateStar smallStar clearfix">
					{% spaceless %}
						<div class="starsPassive">
							<div>
								<i class="fa fa-star-o"></i>
								<i class="fa fa-star-o"></i>
								<i class="fa fa-star-o"></i>
								<i class="fa fa-star-o"></i>
								<i class="fa fa-star-o"></i>
							</div>
						</div>
						<div class="starsActive" style="width: 45%;">
							<div>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						</div>
					{% endspaceless %}
				</div>
			</a>
		</div>
	</div>
</div>

.el_offerItem_xxxxxx
{
}
.el_offerItem_xxxxxx .wrapperInner
{
	border: 1px solid #2091C9;
	border-radius: 3px;
	padding: 15px;
	height: 100%;
}
.el_offerItem_xxxxxx .imageBlock
{
	padding-bottom: 100%; /* Высота блока с изображением товара указывается в зависимости от дизайна */
}
.el_offerItem_xxxxxx .title
{
	margin-top: 15px;
	height: 45px;
	overflow: hidden;
	text-align: center;
}
.el_offerItem_xxxxxx .title a
{
	font-size: 1.4rem;
	color: #4fad25;
}
.el_offerItem_xxxxxx .title a:hover
{
	text-decoration: underline;
	color: #5bcc28;
}
.el_offerItem_xxxxxx .priceBlock
{
	margin-top: 15px;
	text-align: center;
}
.el_offerItem_xxxxxx .priceBlock .priceLine
{
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}
.el_offerItem_xxxxxx .priceBlock .priceLine span.priceOld
{
	font-size: 1.3rem;
	text-decoration: line-through;
	color: #C5C5C5;
}
.el_offerItem_xxxxxx .priceBlock .priceLine span.price
{
	color: #2091C9;
}
.el_offerItem_xxxxxx .priceBlock .addToCartButton
{
	margin-top: 15px;
	display: inline-block;
	border: 1px solid #2091C9;
	background-color: #23B6EC;
	border-radius: 3px;
	padding: 0px 15px;
	line-height: 28px;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	color: #FFFFFF;
}
.el_offerItem_xxxxxx .priceBlock .addToCartButton:hover
{
	background-color: #2091C9;
}
 
.el_offerItem_xxxxxx .rateBlock
{
	margin-top: 15px;
	text-align: center;
}
.el_offerItem_xxxxxx .rateBlock > a
{
	display: inline-block;
}