@charset "UTF-8";
/* CSS Document */
/* stylesheet for bookstore listings */

/* the Guava Stylesheet has an optional carousel instead of the "Meat and Three" structure */

/* side listings */

.storebox {
	max-width: 95%;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
	background-color: white;
	/* background-color: #FCC; */
	padding: 1%;
}

.storeboxSmall {
	border-style: solid;
	border-color: #CCC;
	border-width: 1px;
	/* background-color: #FCF; */
	padding: 1%;
}

.bookpic { 
	/* background-color: #FF9; */
	text-align: center;
	/* if in doubt, remove the max-width and padding-left below */
	max-width: 80%;
	padding-left: 15%;
}

.bookpicSmall {
	/* background-color: #FC9; */
	text-align: center;
}

.title {
	/* background-color: #FC6; */
	margin: 1%;
	clear: both;
}

.titleSmall {
	/* background-color: #FF9; */
	margin: 3%;
	/* clear: both; */
}

.marketingCopy {
	margin: 3%;
	padding: 0% 0% 0% 3%;
	/* background-color: #CF9; */
}
	
.button1 {
	text-align: right;
	/* float: left;
	/* clear: right; */
	/* background-color: #9FF; */
}

.button1Small {
	/* background-color: #9F9; */
	/* float: left; */
	text-align: center;
}

.button2Small {
	/* background-color: #9FF; */
	/* float: right; */
	text-align: center;
}
	
.imageLayoutHelper {
	width: 99%;
	/* background-color: #FCF; */
}

.textBox {
	/* background-color: #FC9; */
}
	
.imageBox {
	/* background-color: #FF9; */
	float: right;
	margin: 8px;

}
	
	/* basic color mix for CSS experiments

css pink: #F9C;
css orange: #FC9;
css yellow: #FF9;
css green: #CF9;
css blue: #CFF;
css indigo: #CCF;
css violet: #D9F;
css light grey: #DDD;
css mid grey: #999;
css black: #000;
css white: FFF;

*/
	
.bookRack {
	max-width: 90%;
	border-style: invisible;
	border-width: 1px;
	border-color: #F9C;
}

.bookSpot {
	width: 32%;
	border-style: invisible;
	border-width: 1px;
	border-color: #F9C;
	display: inline-block;
	text-align: center;
}
	
	/* "Meat & Three" setup for the specific book page */
	
.plate {
	border-style: invisible;
	border-width: 1px;
	border-color: #DDD;
	/* background-color: #F9C; */
	width:inherit;
	padding: 1px;
	overflow: hidden;
	/* The overflow: hidden variable is what prevents marketing copy from crowding into the "meat and three sides" divs and looking gross. */
}

.meat {
	border-style: invisible;
	border-width: 1px;
	border-color: #DDD;
	width: 70%;
	/* background-color: #FC9; */
	float: left;
	padding: inherit;
	text-align: center;
}

.sideDishes {
	border-style: invisible;
	border-width: 1px;
	border-color: #DDD;
	width: 29%;
	/* background-color: #FF9; */
	padding: inherit;
	float: right;
}

.sideDish1 {
	border-style: solid;
	border-width: 1px;
	border-color: #DDD;
	padding: inherit;
	/* background-color: #DDD; */
}

.sideDish2 {
	border-style: solid;
	border-width: 1px;
	border-color: #DDD;
	padding: inherit;
	/* background-color: #DDD; */
}
	
.sideDish3 {
	border-style: solid;
	border-width: 1px;
	border-color: #DDD;
	padding: inherit;
	/* background-color: #DDD; */
}

/* Alternate Carousel for images */

.meatSliders {
  width: 100%;
  max-width: 450px;
  /* max-height: 598px; comment out the height for now; see .slides img below */
  overflow: hidden;
  margin: 0 auto;
}

.slides {
  display: flex;
  transition: transform 0.8s ease-in-out;
}

.slides img {
    width: 100%;
    height: auto;
  flex-shrink: 0;
}