/*  
  CUSTOM POPSHOPS STYLESHEET

  If you have more than one PopShop on a page 
  make sure to preface your styles with the 
  shop id: #PopShop12345.  For example the 
  table.pspsWrapper would become:
  #PopShop12345 table.pspsWrapper {}

  In order to make the shops compatible with most
  browsers and webpages the products are displayed 
  in a table.  You will still need to control 
  rows and columns using the ShopBuilder.
*/

/*  
  Can use to limit the width of a shop although 
  images, can cause the shop to go wider.
*/
table.pspsWrapper {
  margin: 0 auto;
  border-collapse: collapse;
  /* width: 300px; */
} 

/*
  Can help with the vertical placement of the image
  and text within the table cell, as well as 
  setting the font styles.
*/
table.pspsWrapper td{ 
  vertical-align: top;
  padding: 0;
} 

/*
  General font appearance
*/
table.pspsWrapper a,
table.pspsWrapper td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #363636;
  font-style: normal;
  font-weight: normal;
  text-align: left;
} 


/*
  Link specific styles
*/
table.pspsWrapper a {
  color: #6D9DAB;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
} 

/*    
  Used to control the appearance of the images. Also 
  used to control the image sizes.
*/
table.pspsWrapper a img {
  border: none;
  max-width: 160px;
  max-height: 160px;
  width: expression(this.width > 160 ? 160 : true);
  padding:5px;
  border-right:1px solid #E1E1E1;
  border-bottom:1px solid #E1E1E1;
} 

/*    
  Controls paragraphs that contain the name, price, and description
*/
table.pspsWrapper p {
  margin: 0;
  padding: 3px;
  line-height:120%;
} 

.pspsSalePrice {
	color: red;
}

.pspsDescription {
	font-family: Arial, Helvetica, sans-serif;
}
/*    
  Used to style the containing cell of a product.  This
  cell contains the image, name, price, brand, description.
  This also controls the background color for the cells.
*/
table.pspsWrapper .pspsCell {
  background: #ffffff;
  border: 0px solid #bebebe;
  width: 160px;
  padding: 10px 20px 10px 20px;
  background-color: #fff;
}

/*
  If you want to alternate the placement of images and text within the cell
  then you can uncomment the following styles.
*/
/*table.pspsWrapper .pspsMain {
  padding: 0 10px 10px 0;
  float: left;
}

table.pspsWrapper .pspsAlt { 
  padding: 0 0 10px 10px;
  float: right;
}*/

/*
  Leave this line uncommented if you want the images centered
*/
.pspsMain {
  padding: 0 0 10px 0;
  width: 100%;
  text-align: center;
}


/*
  A wrapper containing any page navigation for the shop.
*/
table.pspsWrapper .pspsPager {
  text-align: center;
  padding: 10px;
}

/*
  Navigation page links
*/
table.pspsWrapper .pspsPager a,
table.pspsWrapper .pspsPager span {
  font-weight: normal;
  text-decoration: none;
  padding: 4px 7px 4px 7px;
  line-height: 100%;
  border: 1px solid #dedede;
}

table.pspsWrapper .pspsPager a:hover {
	background-color: #15a9cd;
	color: #fff;
	border: 1px solid #86b1b3;
}
/*
  The current page in the navigation links
*/
table.pspsWrapper .pspsPager .pspsCurrentPage {
  background-color: none;
  border: none;
  color: #15a9cd;
}

/*
  All pages that are not the current page
*/
table.pspsWrapper .pspsPager .pspsInactivePage {
  color: #aaa;
  border: none;
}  
 
 


/*
  Call to action buttons
*/
table.pspsWrapper .buy_button {
  padding: 5px 4px;
  display: block;
  margin-top: 7px;
  color: #fff;
  border: none;
}

table.pspsWrapper .buy_button, table.pspsWrapper .buy_button:visited {
	background: #222 url(/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	table.pspsWrapper .buy_button:hover											{ background-color: #111; color: #fff; }
	table.pspsWrapper .buy_button:active										{ top: 1px; }
	table.pspsWrapper .buy_button, table.pspsWrapper .buy_button:visited 		{ font-size: 12px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	table.pspsWrapper .buy_button, table.pspsWrapper .buy_button:visited		{ background-color: #2daebf; }
	table.pspsWrapper .buy_button:hover											{ background-color: #007d9a; }
	
	
	/*Reference Only*/
	
	.awesome:hover							{ background-color: #111; color: #fff; }
	.awesome:active							{ top: 1px; }
	.small.awesome, .small.awesome:visited 			{ font-size: 11px; padding: ; }
	.awesome, .awesome:visited,
	.medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }
	
	.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
	.green.awesome:hover						{ background-color: #749a02; }
	.blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
	.blue.awesome:hover							{ background-color: #007d9a; }
	.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
	.red.awesome:hover							{ background-color: #872300; }
	.magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
	.magenta.awesome:hover							{ background-color: #630030; }
	.orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
	.orange.awesome:hover							{ background-color: #d45500; }
	.yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
	.yellow.awesome:hover							{ background-color: #fc9200; }