<style type="text/css">
body{
font-family: 'Overlock', cursive !important;
background-image: -ms-linear-gradient(bottom, #0FE0E0 0%, #EDEFED 100%);
background-image: -moz-linear-gradient(bottom, #0FE0E0 0%, #EDEFED 100%);
background-image: -o-linear-gradient(bottom, #0FE0E0 0%, #EDEFED 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0FE0E0), color-stop(1, #EDEFED));
background-image: -webkit-linear-gradient(bottom, #0FE0E0 0%, #EDEFED 100%);
background-image: linear-gradient(to top, #0FE0E0 0%, #EDEFED 100%);
}
#container {padding:20px;}
#container ul { list-style: none;padding:0px;}
#container .buttons { margin-bottom: 20px; }

/* LIST VIEW */
#container .list{
width: 620px;
margin-right: 15%;
margin-left: 15%;
}
#container .list li {
background: #F7F7F7;
border-bottom: 1px dotted #CCC;
margin-bottom: 20px;
padding-right: 20px;
height: 125px;
}
#container .list li img{
float: left;
height:125px!important;
width:125px!important;
}
#container ul.list li.alt{ background:gray; }
#container .list li p{
overflow:hidden;
word-wrap:break-word;
width:250px;
}
#container .list li .title{
overflow:hidden;
word-wrap:break-word;
font-size:24px;
}
#container .list li .list-left{
width:300px;
position:absolute;
margin-left: 133px;
padding-left: 3px;
}
#container .list li .list-right{
width:150px;
float:right;
}
#container .list li .price{
float:right;
font-size:42px;
display: block; 
margin-right: 10px; 
text-align: right;
width:100%;
color:#4FAFC2;
}
#container .list li .detail{
float:right;

}

/* GRID VIEW */
#container .grid li { float: left; height: 295px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC;margin: 25px;
    width: 180px; background:#F7F7F7; }
#container .grid li img{height: 154px;width: 181px;}
#container .grid li p{display:none;}
#container .grid li .list-left{text-align:left;font-size:24px;margin-left: 10px;margin-top:10px;}
#container .grid li .icon-group-btn{font-size:14px;}
#container .grid li .list-right{display:block;width:100px;margin-left: 27px;}
#container .grid li .list-right .price{font-size:25px;float:left;;color:#4FAFC2;}
#container .grid li .detail{float:left;margin-left: 84px;}
#container .grid{
width: 620px;
margin-left: 10%;
}

/* SWITCH CONTROLS */
.view-controls-list{
width: 606px;
text-align: right;
margin-right: 15%;
margin-left: 15%;

}
.view-controls-grid{
width: 712px;
text-align: right;
}
#viewcontrols a{
border: thin solid #ABABAB;
padding:10px;
color:black;
cursor:pointer;
}
#viewcontrols a:hover{
color:palevioletred;
}
#viewcontrols .active{
color:palevioletred;
}

/* CART WISHLIST ICON BUTTONS*/
.icon-group-btn a{
	margin: 10px 0; 
	float: left; width: 40px; margin-right: 5px;	
	text-decoration: none;
	transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn a.btn-compare{ margin-right: 0;}
.icon-group-btn a span{ float: left; line-height: 32px; text-decoration: none;}
.icon-group-btn .icon-cart,.icon-group-btn .icon-wishlist,.icon-group-btn .icon-compare{ 
	width: 40px; 
	height: 32px;
	
}
.icon-group-btn .icon-cart{
	background: url('icon-a-w-c.png') #777777 no-repeat  8px 8px;
}
.icon-group-btn .icon-wishlist{
	background: url('icon-a-w-c.png') #777777 no-repeat 8px -66px;
}

.icon-group-btn .icon-compare{
	background: url(icon-a-w-c.png) #777777 no-repeat 7px center;
}
.icon-group-btn .icon-cart-text{
	text-indent: -40px; width: 0; height: 32px;
	font-size:100%; overflow: hidden;
	color: #fff; background:#4FAFC2;
	transition:all 0.4s ease-in-out 0s;
	-o-transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn .icon-wishlist-text{
	text-indent: -40px; width: 0; height: 32px;
	color: #fff; font-size:100%;
	overflow: hidden; background:#4FAFC2;
	transition:all 0.4s ease-in-out 0s;
	-o-transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn .compare-text{
	text-indent: -40px; width: 0; height: 32px;
	color: #fff; background:#4FAFC2; font-size:100%;
	overflow: hidden;
	transition:all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
}
.icon-group-btn a:hover .icon-cart{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat  8px 8px;
}
.icon-group-btn a:hover .icon-cart-text{	
	width: 90px;		
	text-indent: 0;
}
.icon-group-btn a:hover{ width: 130px;}
.icon-group-btn a.btn-wishlist:hover{ width: 151px;}
.icon-group-btn a.btn-compare:hover{ width: 160px; }
.icon-group-btn a:hover .icon-wishlist-text{	
	width: 111px;		
	text-indent: 0;
}
.icon-group-btn a:hover .compare-text{	
	width: 120px;		
	text-indent: 0;
}
.icon-group-btn a:hover .icon-wishlist{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat 8px -66px;
}
.icon-group-btn a:hover .icon-compare{
	background: url(icon-a-w-c.png) #4FAFC2 no-repeat 7px center;
}


</style>