/* ~~ This the css file for the Responsive Design of Virtual Lifestyle from Ecommerce Templates.

The first section correponds to the maximum width version of 980 pixels ~~ */



@charset "utf-8";

body {

	font: 100%/1.5 Arial, serif;

	background: #eee;

	margin: 0;

	padding: 0;

	color: #000;

}



a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */

	border: none;

}



/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {

	color: #42413C;

	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */

}

a:visited {

	color: #6E6C64;

	text-decoration: underline;

}

a:hover, a:active, a:focus { 

	text-decoration: underline;

}



/* ~~ This fixed width container surrounds all other divs ~~ */

.container {

	width: 980px;

	background: #FFFFFF;

	margin: 0 auto; 

	background: url(../images/bg.jpg);

}



/* ~~ The header section ~~ */

.header {

	

}



.topbar{

	width:940px;

	height:24px;

	margin-left:20px;

	background:#EFECE0;

}



.topbarleft{

	width: 450px;

	float: left;

	margin-left: 10px;

	font-size: 0.9em;

}



.topbarright{

	width: 450px;

	float: right;

	margin-right: 10px;

	text-align: right;

	font-size: 0.9em;

}



.topbar2{

	width:940px;

	height:96px;

	margin-left:20px;

	background:#F9F9F4;

border-bottom:1px solid #D7D1C9;

}



.logo{

	width: 396px;

	float: left;

	margin-left: 10px;
	
	margin-right: 0px;

}



.topoffers, {

	width: 50px;

	float: right;

	margin-right: 2px;

	text-align: right;

	padding-top:17px;

}


.topoffers1 {

	width: 175px;

	float: left;

	margin-right: 2px;

	text-align: right;

	padding-left:14px;

}


.topoffers2{

	width: 160px;

	float: right;

	margin-right: 0px;

	text-align: right;

	padding:10px 2px 0px 0px;

}


.topoffers3{

	width: 175px;

	float: left;

	margin-right: 0px;
	
	margin-left: 0px;

	text-align: right;

	padding:;

}



/* ~~ The top nav bar ~~ */

.width_wrapper { max-width:930px; margin:0 auto;}



.topNav_wrapper {min-height:52px; font-weight:bold}



.basket { float:right; background:url(../images/cart_icon.png) no-repeat 0 3px; margin-top:14px; padding:5px 5px 5px 25px}

.basket a { color:#000; font-size:13px; color:#000; text-transform:uppercase; text-decoration:none;}

.searchBox { float:right; width:160px; position:relative; margin:16px 6px 6px 0px;}

.searchBox form { margin:0px; padding:0px;}

.searchBox Input.search_look { margin:0px; padding:3px 25px 3px 3px; color:#646464; border:1px solid #e5e5e5;  width:100%; height:22px; line-height:22px; z-index:1; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

  -moz-box-sizing: border-box;    /* Firefox, other Gecko */

  box-sizing: border-box;         /* Opera/IE 8+ */}

.searchBox .search_btn { margin:0px; padding:0px; width:25px; height:22px; background:url(../images/search_icon.png) no-repeat center 2px; position:absolute; right:0px; top:0px; text-indent:-9999px; cursor:pointer; border:none;}





/* ~~ Bottom of header ~~ */

.headerbtm{

	width:940px;

	height: 6px;

	background: #D7D1C9;

	margin-left:20px;

}



/* ~~ Left content ~~ */

.sidebar1 {

	float: left;

	width: 170px;

	padding-bottom: 10px;

	padding-left:14px;

}



/* ~~ Main content ~~ */

.content {

	padding: 10px 0px 0px 20px;

	width: 578px;

	float: left;

	font-size: 0.8em;

}

.contentwide {

	padding: 10px 0px 0px 10px;

	width: 77%;

	float: left;

	font-size: 0.8em;

}

.contentwideproductdetail {

	padding: 10px 0px 0px 20px;

	width: 75%;

	float: left;

	font-size: 0.8em;

}

/* ~~ Left menu ~~ */

.cat {

	clear: both;

	width: 160px;

	padding-top: 10px;

	padding-left: 10px;

	clear: both;

}

.cattop {

	width: 160px;

	padding-left: 10px;

	padding-top: 4px;

	height: 21px;

	color: #666;

	font-size: 0.8em;

	font-weight: bold;

	background: url(../images/cattop.gif);

	background-repeat: repeat-y;

}

.cat ul {

	padding: 0;
	
	margin: 0;
	
}

.cat li {

	display: block;
	width: 154px;
	padding-left: 4px;
	padding-top: 0px;
	height: 21px;
	color: #333;
	font-size: 0.8em;
	font-weight: normal;
	border-bottom:1px solid #D7D1C9;
	border-right:1px solid #D7D1C9;
  	border-left:1px solid #D7D1C9;

}

.cat li a {

	display: block; 

	text-decoration: none;

	color: #333;

}

.cat li a:hover {

	color: #C6202C;

	background:#F1EEE5;

}



/* ~~ Right content ~~ */

.sidebar2 {

	float: left;

	width: 174px;

	padding:10px 8px 0px 8px;

}



.colrighttop {

	padding-left: 6px;

	margin-bottom:0px;

	width: 154px;

	padding-top: 3px;

	height: 22px;

	font-size: 0.9em;

	font-weight: bold;

	background:#F1EEE5;

	color:#95030D;

}



/* ~~ Content header ~~ */

.content h2 {

	font-size: 1.4em;

	font-weight: bold;

	background: #F3F0E9;

	padding-left: 10px;

	width: 554px;

	padding-top: 3px;

	padding-bottom: 3px;

	clear: both;

	margin-top:0px;

	margin-left:6px;

	color: #333;

  border-bottom: 1px solid #98020D;

}



.contentwide h2 {

	font-size: 1.4em;

	font-weight: bold;

	background: #F3F0E9;

	padding-left: 10px;

	width: 95%;

	padding-top: 3px;

	padding-bottom: 3px;

	clear: both;

	margin-top:0px;

	margin-left:6px;

	color: #333;

  border-bottom: 1px solid #98020D;

}



/* ~~ Home page products ~~ */

.ProductCover {

	clear: both;

	margin-left:0px;

}



.productboxoriginal {

	border:1px solid #D7D1C9;
	float: left;
	width: 220px;
	height: 220px;
	margin: 4px 10px 4px 10px;
	height: 100%;

}



.productboxoriginal:hover{

  border: 1px solid #960107;

}



.productbox {
    padding: 6px;
    width: 240;
    height: 100%;
    float: left;
	margin: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

.productbox:hover{
	border: 1px solid #999;
  	border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	transition: opacity 0.3s ease-in-out;
}



.brandbox {
    padding: 6px;
    width: 240;
    height: 100%;
    float: left;
	margin: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

.brandbox:hover{
	border: 1px solid #999;
  	border-radius: 5px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	transition: opacity 0.3s ease-in-out;
}

    

.productpic {

	clear: both;

	width: 150px;

	padding-left: 15px;

	padding-top: 10px;

	height: 170px;

}

.productpic img {

	width: 150px;

	height: 170px;

}

.ProductName {

	text-align: center;

	padding-top: 15px;

	color: #172934;

	font-size: 12px;

	font-weight: bold;

}

.hmprice {

	float: left;

	clear: both;

	width: 60px;

	text-align: left;
	
	vertical-align: top;

	padding-top: 10px;

	padding-left: 6px;

	color: #E2202B;

	font-weight:bold;

}





/* ~~ The footer styles ~~ */

.footer {

	padding: 10px;

	background: url(../images/bgftr.jpg);

	position: relative;

	clear: both; 

	height:190px;

}





.foo2{

	float:left;

	width:22%;

	padding: 6px;

	border-right: 1px dotted #666;

	color: #666;

	padding:0 10px 10px 10px;

	line-height:1.9em;

    font-size:0.8em;

}



.foo3{

	color: #666;

	float:left;

	width:22%;

	padding:0 6px 6px 6px;

	border-right: 1px dotted #666;

	line-height:1.9em;

    font-size:0.8em;

}



div.foo1{

	float:left;

	width:22%;

	padding: 0 0 0 4px;

	border-right: 1px dotted #666;

	font-size:0.8em;

	margin-left:20px;

  	line-height:1.9em;

}



div.fb{

	float:left;

	width:24%;

	font-size:0.8em;

	line-height:1.9em;

    padding-left:4px;

}



p.foothead{

	font-weight:bold; 

	text-align:left;  

	border-bottom:solid 1px #666;

	margin: 10px;

	color:#950000;

	line-height:25px;

	font-size:1.3em;

  width:90%;

}



div.btmlft{

	float:left;

	margin-left:20px;

	width:400px;

	font-size:0.8em;

}



div.btmrght{

	float:right;

	width:400px;

	text-align:right;

	margin-right:20px;

    font-size:0.8em;

}



.social {

	padding-top: 10px;

}

.social img {

	float: left;

	width: auto;

	margin: 3px 5px 0px 18px;

}

/* ~~ Miscellaneous float/clear classes ~~ */

.fltrt { 

	float: right;

	margin-left: 8px;

}

.fltlft { 

	float: left;

	margin-right: 8px;

}

.clearfloat { 

	clear:both;

	height:0;

	font-size: 1px;

	line-height: 0px;

}



/* ~~ Horizontal rule ~~ */

hr {

	height: 0;

	border-width: 2px 0 0 0;

	border-style: solid;

	border-color: #000;

}





/* This is the first breakpoint and is for screen sizes between 772 and 980 pixels. 

If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below

-------------------------------------*/

@media screen and (max-width: 980px) {

  

.container {

	width: 772px;

	background-image:none;

	background:#fff;

	border-left:1px solid #D7D1C9;

	border-right:1px solid #D7D1C9;

}



.content{



}

  

.topbar, .topbar2{

	width:772px;

	margin-left:0px;

}



.topbarleft{

	width: 350px;

}



.topbarright{

	width: 350px;

}

  

.topoffers {

	display:none;

}



.topoffers1, .topoffers2{

}



  .navbar{

	width:772px;

	margin-left:0px;

}



.searchinput {

	width: 178px;

}



.headerbtm{

	width:772px;

	margin-left:0px;

}



.sidebar1 {

	padding-left:4px;

}

  

.sidebar2 {

	display:none;

}



.footer {

	padding: 2px;

	background-image: none;

	background-color:#EFEDE0;

	border-top: 1px solid #ccc;

 	height:440px;

}



div.foo1, div.foo2{

  width:43%;

  }



div.foo3{

  width:43%;

  margin-left:12px;

}



div.fb{

  width:43%;

}

  

.foo2{

    border-right: 0px;

}



.foo3{

    clear:left;

}

}

  

/* This is the second breakpoint and is for screen sizes between 468 and 758 pixels. 

If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below

*/

@media screen and (max-width:758px) {



.searchBox { float: right; margin: 15px 4px 0 10px; position: relative;}

.basket { background: url("../images/cart_icon.png") no-repeat scroll 0 3px rgba(0, 0, 0, 0); float: left; margin-left:4px;margin-right: 5px; margin-top: 14px; padding: 5px 5px 5px 25px;}

	

.container {

	width: 468px;

}



.topbar, .topbar2{

	width:468px;

	margin-left:0px;

}



div.nosearchresults{

	width:460px;

}



.topbarleft{

	display:none;

}



.topbarright{

	width: 460px;

}



.logo{

	width:272px;

	margin-right:0px;

}



.topoffers1 {

	display: none;

}



.navbar{

	width:468px;

	margin-left:0px;

}



.nav{

	display:none;

}



.searchinput {

	width: 416px;

	margin-left:4px;

}



.headerbtm{

	width:468px;

	margin-left:0px;

}



.mainpic{

	display:none;

}



.sidebar1{

	display:none;

}



.content {

	padding: 2px;

	width: 464px;

  	background-color:#fff;

}



.content h2 {

	width: 453px;

	margin-left:0px;

}

  

.productbox {
float: left;
margin: 0 18px 7px 12px;
width: 93%;
}


.productpic {

	padding-left: 28px;

}







div.btmlft{

	margin-left:20px;

	width:428px;

	font-size:0.8em;

}



div.btmrght{

	float:left;

	width:428px;

	margin-left:20px;

	margin-right:0px;

}



}





/* This is the third breakpoint and is for smartphones. 

If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below

*/

@media screen and (max-width:400px) {

	

.container {

	width: 308px;

}



.topbar, .topbar2{

	width:308px;

	margin-left:0px;

}



.topbarleft{

	display:none;

}



.topbarright{

	width: 308px;

	font-size:0.8em;

}



.logo{

	width:272px;

	margin:0px;

}



.topoffers2  {

	display:none;

}



.navbar{

	width:308px;

	margin-left:0px;

}





.searchinput {

	width: 256px;

	margin-left:4px;

}



.headerbtm{

	width:308px;

	margin-left:0px;

}



.content {

	padding: 2px;

	width: 304px;

  	background-color:#fff;

}



.content h2 {

	width: 293px;

	margin-left:0px;

}



div.nosearchresults{

	width:300px;

}



p.foothead{

	margin: 0px;

	line-height:20px;

	font-size:1em;

}



div.footer{

  height:620px;

}



div.foo1, div.foo2, div.foo3{

  width:95%;

    border-right: 0px;

  }



div.foo2{

  margin-left:12px;

}



div.fb{

  width:95%;

}

  



div.btmlft{

	margin-left:4px;

	width:300px;

	font-size:0.8em;

}



div.btmrght{

	width:300px;

	margin-left:0px;

}



.productbox {

	width: 276px;

}



.productpic {

	width: 276px;

	padding-left: 0px;

	height: 102px;

  	text-align: center;

}



.hmprice {

	width: 50px;

	padding-left: 76px;

}

.menu-item {
  background: #fff;
  width: 180px; 
  height: 30px;
}