/**
 * CSS for PSMRC ShopSuey storefront catalog index
 */

/* category name */
main > div > h3[CategoryID] {
	margin-left: 25px;
}
 
	/* category name icon */
	main > div > h3[CategoryID] > span.category-icon {
		display: inline-block;
		position: absolute;
		
		transform-origin: 7.5px 7.5px;
	}

		/* category name icon when open */
		main > div > h3[CategoryID].show > span.category-icon {
			margin: 19px 0px 0px -45px;
			transform: rotate(-90deg);
		}

		/* category name icon when closed */
		main > div > h3[CategoryID]:not(.show) > span.category-icon {
			margin: 12px 0px 0px 0px;
			transform: rotate(90deg);
		}

		/* icon element */
		main > div > h3[CategoryID] > span.category-icon > i.fa {
			transform: scaleY(1.15);
			font-size: 20px;
		}
		
		/* adjustment for second icon elmnt */
		main > div > h3[CategoryID] > span.category-icon > i.fa:nth-of-type(2) {
			margin-left: -15px;
		}

/* "select store" link container */
main > div > div[CategoryID] > div.pricelist > div.select-store {
	margin: -10px 0px 15px 45px;
}

	/* "select store" individual link */
	div.select-store > a,
	.products-select-store > a {
		display: inline-block;
		margin: auto 15px auto 15px;
	}
		
/* categories in thumbs mode */
main div[CategoryID].show.thumbs {
	margin: 0px 0px 35px 25px;
}
 
	/* thumbnails mode: show thumbnails */
	main div[CategoryID].show.thumbs * {
		display: inline-block;
		visibility: visible;
		opacity: 1;
		transition: all 0.1s linear 0s;
	}
 
	/* thumbnails mode: show thumbnails */
	main div[CategoryID].thumbs:not(.show) * {
		display: none;
		visibility: none;
		height: 0px;
		opacity: 0;
		transition: all 0.1s linear 0s;
	}
	
	/* product photo on catalog index */
	main div[CategoryID] > div.thumb {
		display: inline-block;
		width: 265px;
		height: 175px;
		padding: 10px 10px 35px 10px;
		margin: 5px 2px 5px 2px;
		
		background: #D8CDBC;
	}
		
		/* grid photo border wrapper and link */
		main div[CategoryID] > div.thumb > a {
			display: inline-block;
			border: 1px solid rgba(0,0,0,.5);
			width: 265px;
			height: 175px;
		
			overflow: hidden;
			transition: all 0.5s ease 0s;
		}
		
			/* hover on link */
			main div[CategoryID] > div.thumb > a:hover {
				box-shadow: 2px 2px 20px rgba(0,0,0,.35);
				transition: all 0.15s ease 0s;
			}
			
			/* image in link */
			main div[CategoryID] > div.thumb > a > img {
				width: 280px;
				height: auto;
			}
			
			/* caption */
			main div[CategoryID] > div.thumb > span.caption {
				position: absolute;
				display: block;
				margin-top: 180px;
				width: 255px;
				height: 14px;
				padding: 7px 5px;
				text-align: center;
				
				color: rgba(0,0,0,.85);
				font-size: 14px;
				text-shadow: 1px 1px 0px rgba(255,255,255,.2);
				
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				
				z-index: 2;
			}
				
			/* when no image available */
			main div[CategoryID] > div.thumb > .photo > .nopic {
				display: table-cell;
				width: 275px;
				height: 175px;
				
				vertical-align: middle;
				text-align: center;
				
				font-family: Corbel, Calibri, Arial;
				color: rgba(0, 0, 0, 0.35);
				background: white none repeat scroll 0% 0%;
			}
			
	/* thumbnails mode: hide pricelists */
	main div[CategoryID].show.thumbs > div.pricelist {
		display: none;
		visibility: hidden;
		height: 0px;
		opacity: 0;
		transition: all 0.1s linear 0s;
	}

/* categories in pricelists mode */
main div[CategoryID].show.pricelists {
	
}

	/* pricelist mode: show pricelist */
	main div[CategoryID].show.pricelists > div.pricelist {
		display: block;
		visibility: visible;
		height: auto;
		opacity: 1;
		transition: all 0.1s linear 0s;
	}
		
		/* pricelist mode: show pricelists when category open */
		main div[CategoryID].pricelists.show * {
			
		}
		
		/* pricelist mode: hide pricelists when category closed */
		main div[CategoryID].pricelists:not(.show) * {
			display: none;
		}

	/* thumbnails mode: hide thumbnails */
	main div[CategoryID].show.pricelists > div.thumb,
	main div[CategoryID].show.pricelists > div.thumb * {
		display: none;
		visibility: hidden;
		height: 0px;
		opacity: 0;
		transition: all 0.1s linear 0s;
	}