/* These are the css classes for the responsive css layouts used from Version 6.2.
To use this file, upload to your store root and add a line like this to the <head> section
 <link rel="stylesheet" type="text/css" href="style3.css" />
or copy and paste the classes into your existing css file.
You will also need the following in vsadmin/includes.asp
 usecsslayout=TRUE
or in vsadmin/includes.php
 $usecsslayout=TRUE;
A help page is available here http://www.ecommercetemplates.com/help/css-layouts.asp
This is just a sample file and can be edited to match your current design and layout.
This file use percentage widths. Please read the style notes in the accompanying pdf file for important layout details.
-------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #000;
	font-family: "Playfair Display", serif;
    line-height: 1.8;
}


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


/* ~~Styling for the store generated links~~ */
a.ectlink:link {
}
a.ectlink:visited {
}
a.ectlink:hover, a.ectlink:active, a.ectlink:focus {
	text-decoration: underline;
}


/* ~~ Horizontal rule ~~*/
hr {
	height: 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #000;
}

/* ~~ Table backgrounds for cart, search etc ~~*/

table.cobtbl{
border-collapse: collapse;
background-color: #fff;
  font-size:13px;
  border-bottom: 1px solid #363646;
}

span.cartoption{
  font-size:12px !important;
}

td.cobhdr{
background-color:#eee;
font-size:14px;
color:#666;
text-transform:uppercase;
border-bottom: 1px solid #363646;
}

td.cobll{
background-color: #fff;
color : #333;
}

.checkoutopts{
  padding:6px !important;
  }

.cdforminput{
  width:220px;
}
  
.cdformname, .cdformlastname{
  width:102px;
}

#slastname{
  width:102px;
}

.cdformselect{
  width:230px;
}
  
.addinfo{
    width:231px;
}
    
.cdformcoupon{
      width:144px;
}

span.willpickup{
  font-size:14px !important;
}

td.cdformremember span{
display:none;
}

.rcsproduct{
    border:1px solid #ccc;
    height:220px;
    margin-bottom:6px;
    border-radius:6px;
    background:#fff;
  }


.rcsprodname, .rcsprodprice, .rcslistprice{
  text-align:center;
}

.rcslistprice{
  display:none;
}
p.cstitle {
font-size: 1.2em;
color : #666;
padding:8px;
margin:4px;
}

/*Thanks page*/

/* ~~ Store buttons ~~*/
input.login, input.sccheckout, input.logintoaccount, input.search	{
}


input.login:hover, input.sccheckout:hover, input.logintoaccount:hover, input.search:hover{
}

/* The product page - view all the available classes at http://www.ecommercetemplates.com/help/css-layouts.asp
-------------------------------------*/
div.prodfilter{
	float:left;
	background-color:;
	border: 1px dotted;
	padding:6px;
	color:;
	margin-bottom:10px;
	margin-top:10px;
}

div.prodfilterbar{
	float:left;
	width:100%;
}

div.filtertext{
 	padding:8px;
}

select.prodfilter{
	padding:0px;
	margin:0px;
}

div.checkoutbutton{
}


div.product{
	padding-top:10px;
	width:100%;
	float:left;
	height:100%;
}

div.prodnavigation{
	padding:10px 0px 10px 12px;
	float:left;
	width:100%;
	font-size:0.9em;
}

div.prodimage{
	padding: 6px;
	text-align:center;
}

div.prodimage:hover{
	border: 1px solid #000;
}

div.proddescription{
width:100%;
text-align:center;
}
div.prodname{
width:100%;
margin-top:-7px;
text-align:center;
}
div.prodprice{
	width:100%;
	text-align:center;
}

div.prodcurrency{
	float:left;
	width:100%;
	font-size: 0.7em;
	color:#666;
}

div.pagenums{
	text-align:center;
	float:left;
	padding:20px 0px 20px 0px;
}

.configbutton {
display:none;
margin-top: 0px;
}

div.addtocart {
width: 100%;
text-align: center;
margin-top: 0px;
}


/* The product detail page 
-------------------------------------*/
div.detailprodnavigation{
	width:100%;
}

div.detailcustom2{
float:left;	
width:100%;
margin-top:8px;
margin-bottom:8px;
}

div.detailcustom2{
float:left;	
width:100%;
margin-top:8px;
margin-bottom:8px;
}

div.detailimage{
	width:100%;
	text-align:center;
} 

div.thumbnailimage {
width: 100%;
}


div.detailid {
}

.detailname h1 {
text-align:center;
width: 100%;
font-size: medium;
}

span.detaildiscountsapply{
}

div.detaildiscounts{

}

div.detailmanufacturer{
}

div.detailsku{
}

div.detailinstock{
}

div.detaildescription{
width:100%;
margin-top:5px;
}

div.detailprice{
width:100%;
padding-top:8px;
}

div.detaillistprice{
}

div.detailcurrency{
	padding-top: 6px;
	font-size: 0.7em;
	float:left;
	width:96%;
	color:#666;
	margin-left:10px;
	padding-bottom:20px;
}

div.detailoptions{
 	width:100%;
}

select.detailprodoption{
	width:100%;
}

input.detailprodoption{
	width:100%;
}


div.detailoptiontext{
	width:100%;
	text-align:center;

}

div.detailmultioptiontext{
}

div.previousnext{
	padding-top:20px;
	padding-bottom:6px;
	float:right;
	width:100%;
	text-align:center;
	font-size:0.9em;
	border-top:1px solid #ccc;
}

div.emailfriend{
	padding-top: 10px;
	text-align:center;
	float:right;
	width:100%;
}

td.emfhl{
	background-color:#aaa;
	font-size:1.2em;
	color:#fff;
	font-weight:bold;
}

td.emfll{
	line-height:18px;
}

div.detailquantity{
  width:100%;
}

div.detailquantitytext{
width:60%;
}

div.detailquantityinput{
width:30%;
}

#w0quant{
	height:21px;
	width:50px;
	border:1px solid #ccc;
}

div.detailaddtocart,.detailoutofstock{
	float:left;
	margin-top:0px;
	width:100%;
}

div.detailnotifystock{
	text-align:center;
	padding-top:6px;
	float:left;
	width:98%;
}

div.review{
	margin-top:16px;
	width:90%;
	font-size:0.9em;
}

hr.review{
}

div.reviewprod{
	padding:10px;
}

.buybutton {
display:inline;
text-align: center;
margin-top: 0px;
}

.TabbedPanelsTab {
text-align:center;
width: 100%;
}

/* Mouseover tab */
.TabbedPanelsTabHover {
}

/* Selected tab */
.TabbedPanelsTabSelected {
border-bottom: none;
}

/* The category page 
-------------------------------------*/
div.category{
	width:100%;
	float:left;
	text-align:center;
}

div.category:hover{
	border: 1px solid #000;
}

div.catnavigation{
	padding:10px 0px 10px 12px;
	float:left;
	width:100%;
}

.catnavwrapper{
	background:#fff !important;
	border: 1px solid #fff !important;
}

div.navdesc{
	display:none; /* Removes the text "View all products in all categories */
}

div.catimage{
	width:100%;
	float:left;
}

div.catdesc{
	padding:0px 0px 4px 4px;
}

div.catname{
	padding-left:4px;
}

.catdiscounts, .allcatdiscounts{
	padding-left:10px;
	font-weight:normal;
	font-size:0.9em;
}

div.categorymessage{
	padding-top:0px;
	font-size: 1.0em;
}

p.noproducts{
    padding-top:28px;
    text-align:left !important;
}

-------------------------------------*/
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) 
{

.grid_4{
margin-left:0px;
}

/* ~~ Remove left hand cart column ~~*/
.cobcol1{
	display:none;
}

/* ~~ Modify additional info field on checkout ~~*/


textarea.addinfo{
	width:150px;
}

/*the product page*/

div.product{
	width:100%;
	margin-left:0px;
}

div.prodnavigation{
	padding:10px 0px 10px 10px;
	float:left;
	width:100%
}

/*the detail page*/

.TabbedPanelsTab {
	width:100%;
}

.TabbedPanelsTabHover {
	width:100%;
}

div.detailoptions{
	width:96%;
}

select.detailprodoption{
	width:96%;
}


div.detailquantityinput{
	height:30px;
}

div.detailmultioptiontext{
	width:40%;
}

div.emailfriend{
	display:none; /* ~~ Remove email a friend feature ~~*/
}

div.thumbnailimage{ 
text-align: center;
width: 100%;
}

div.category{
	width:90%;
  	font-size:0.9em;
  	float:left;
}

div.category:hover{
	background-color:#fff;
	border: 5px solid #000;

}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

div.detailimage{
float:left;
width:400px;
margin-left: 35px;
margin-top: 10px;
} 

.detailname h1 {
width: 400px;
float: left;
font-size: 35px;
}

div.detaildescription{
float: left;
margin-left: 35px;
width: 400px;
}

div.detailprice{
float: left;
width: 400px;
margin-left: 35px;
}

div.detailaddtocart, .detailoutofstock{
float: left;
width: 400px;
margin-left: 35px;
}

div.emailfriend{
float: left;
width: 400px;
margin-left: 35px;
}

div.review {
width: 100%;
}

div.checkoutbutton {
float:right;
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}