Изменение цвета корзины, при добавлении товара

[Elnor]

Здравствуйте! есть два вопроса по изменению корзины, очень надеюсь на вашу помощь!

 

1)Как изменить цвет корзины при добавлении товара через css? сейчас изменяется фон корзины при наведении курсора, как сделать так что бы фон изменялся при добавлении товара?

2) Как добавить картинку в блок с корзиной, пробовал добавить вот этот модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10605 но картинка выезжает за пределы блока.

Нужно что бы картинка была слева от текста, но не выезжала за пределы блока

 

Вот мой сайт, что бы понимать как выглядит корзина: http://elnorshop.ru/index.php?route=common/home

И css код отвечающий за корзину:

 

 

 

#header #cart {
min-width: 300px;
}
#header #cart .heading {
float: right;
cursor:pointer;
/*padding-left: 14px;
padding-right: 14px;*/
padding:10px 200px 10px 10px;
border:2px solid #000000;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
background: #FFF url(../image/cart-button-bg.png) 0 100% repeat-x;
position: relative;
z-index: 1;
}
#header #cart .heading:before{
content:'.';
text-indent:-9999px;
position:absolute;
height:18px;
width:13px;
right:17px;
top:50%;
margin-top:-9px;
background:url(../image/cart-ico.png) 0 0 no-repeat;
}
#header #cart .heading:hover{
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
}
#header #cart .heading:hover:before{
background-position:0 100%;
}

#header #cart .heading h4 {
color: #000000;
text-shadow: #FFFFFF 1px 1px 1px;
font-size: 20px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #FFFFFF;
text-shadow: #535758 1px 1px 1px;
text-decoration: none;
background:none;
}
#header #cart .heading a span {
/*background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;*/
font-size:15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
/*padding: 8px;*/
padding:12px;
min-height: 150px;
/*border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;*/
border:2px solid #000000;
-webkit-border-radius:0 3px 3px 3px;
-moz-border-radius:0 3px 3px 3px;
border-radius:0 3px 3px 3px;
background: #FFFFFF;
-webkit-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
-moz-box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
box-shadow:0 1px 5px 0px rgba(0,0,0, .1);
}

#header #cart.active .heading {
/*margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;*/
background: #FFF url(../image/cart-button-bg1.png) 0 100% repeat-x;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#header #cart.active .content {
display: block;
}
#header #cart .cart {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
#header #cart .cart td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
#header #cart .cart .image {
width: 1px;
}
#header #cart .cart .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
#header #cart .cart .name small {
color: #666;
}
#header #cart .cart .quantity {
text-align: right;
}
#header #cart .cart td.total {
text-align: right;
}
#header #cart .cart .remove {
text-align: right;
}
#header #cart .cart .remove img {
cursor: pointer;
}
#header #cart table.total {
border-collapse: collapse;
padding: 5px;
float: right;
clear: left;
margin-bottom: 5px;
}
#header #cart table.total td {
color: #000;
}
#header #cart .content .checkout {
text-align: right;
clear: both;
}
#header #cart .content .checkout a{

}
#header #cart .content .checkout a {
display: inline-block;
padding:0 9px;
background: url('../image/buttons.png') 0 0 repeat-x;
text-decoration: none;
cursor: pointer;
height:25px;
line-height:25px;
font-size:13px;
font-weight:bold;
color:#fff;
text-shadow:0 -1px 0px #0c72bd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
border:none;
}
#header #cart .content .checkout a:visited{
color:#fff;
}
#header #cart .content .checkout a:hover {
/*background: url('../image/button-left-active.png') top left no-repeat;*/
background-position:0 -25px;
color:#fff;
}
#header #cart .content .checkout a:active{
background-position:0 -50px;
-webkit-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
-moz-box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
box-shadow:inset 0 1px 3px 0px rgba(0,0,0, .2);
}
*+ html #header #cart .content .checkout a{display:inline; zoom:1;}


#header #cart .empty {
padding-top: 50px;
text-align: center;
 

[Elnor]

Неужели проблема неразрешима?