body {
background:url(../images/bg-noise.png?background=d4c46800&noise=e815e8&density=59&opacity=25 );
}

main {
	margin:20px auto;
	width:80%;
	max-width:800px;
	min-width: 450px;
	min-height: 500px;
	border:1px solid #000;
	padding:0 ;
	position: relative;
	font-family: "Arial", san-serif; 
	background:#FFD2DB;
}

div#stage {
	display:block;
	padding:30px 0;
}

/* THE WINE LIST */ 

div#data_area {
	background:#cec0c2;
	display: none;
}



.fiveCols {  /* the List's block that holds columns (#column_headings), and each list item (listItem) visible content area  */ 
	display:flex;
	flex-flow: row nowrap; 
	justify-content: flex-start;
	margin:2px 2%;
}

div#column_headings {
  
}

div#column_headings.fiveCols h3 {
	font-size:.8rem;
	text-transform: uppercase;
	cursor: pointer; 
}

/* now the list and the items */ 

div#data_list {
	overflow: hidden;
}

div#data_area,div#data_list {
	margin:0;
	padding:0;
}

div.listItem {
	border:1px solid #777;
	height:40px;
	overflow: hidden;
    font-size:.84rem;
    margin-bottom:8px;
    position: relative; /* because will move on button click 'remove' or 'like' */ 


/*background: rgba(241,231,103,1);
background: -moz-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
background: -webkit-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -o-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: -ms-linear-gradient(left, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=1 );
*/

background: rgba(76,76,76,1);
background: -moz-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(44,44,44,1) 22%, rgba(89,89,89,1) 37%, rgba(71,71,71,1) 62%, rgba(0,0,0,1) 81%, rgba(17,17,17,1) 89%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(22%, rgba(44,44,44,1)), color-stop(37%, rgba(89,89,89,1)), color-stop(62%, rgba(71,71,71,1)), color-stop(81%, rgba(0,0,0,1)), color-stop(89%, rgba(17,17,17,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(44,44,44,1) 22%, rgba(89,89,89,1) 37%, rgba(71,71,71,1) 62%, rgba(0,0,0,1) 81%, rgba(17,17,17,1) 89%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(44,44,44,1) 22%, rgba(89,89,89,1) 37%, rgba(71,71,71,1) 62%, rgba(0,0,0,1) 81%, rgba(17,17,17,1) 89%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(44,44,44,1) 22%, rgba(89,89,89,1) 37%, rgba(71,71,71,1) 62%, rgba(0,0,0,1) 81%, rgba(17,17,17,1) 89%, rgba(19,19,19,1) 100%);
background: linear-gradient(to right, rgba(76,76,76,1) 0%, rgba(44,44,44,1) 22%, rgba(89,89,89,1) 37%, rgba(71,71,71,1) 62%, rgba(0,0,0,1) 81%, rgba(17,17,17,1) 89%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );

color:#fff;


}


div.listItem:hover {
	height: 124px;
	/* blue */ 
	background: rgba(183,222,237,1);
	background: -moz-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 12%, rgba(33,180,226,1) 63%, rgba(183,222,237,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(183,222,237,1)), color-stop(12%, rgba(113,206,239,1)), color-stop(63%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
	background: -webkit-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 12%, rgba(33,180,226,1) 63%, rgba(183,222,237,1) 100%);
	background: -o-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 12%, rgba(33,180,226,1) 63%, rgba(183,222,237,1) 100%);
	background: -ms-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 12%, rgba(33,180,226,1) 63%, rgba(183,222,237,1) 100%);
	background: linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 12%, rgba(33,180,226,1) 63%, rgba(183,222,237,1) 100%);
		transition: height 1.2s;
	color:#000;

}

div.listItem div.fiveCols {
	height:40px;

}

/* these are the text fields in the visible part of record set (color is denoted via border) */ 

grape,territory,vineyard,price{
	font-weight: 300; 

	padding:0;
	margin:0;
	width:25%;
}

.fiveCols vineyard,h3.vineyard {
	width:25%;
} 

grape, h3.grape {
	width:25%;
}

.fiveCols price,h3.price {
	width:10%;
}

.fiveCols color,h3.color {
	width:15%;
	
}

 color {
	border-left:24px solid red; /* default red wine */ 
}

color.white {   /* if not red, gets class white */ 
	border-color:rgb(242, 232, 232);
}

territory, h3.territory {
	width:20%;
}

 /* moreInfo holds the fields: vintage year, alchohol perc, corked or not */
div.listItem div.moreInfo { 
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	opacity:0;
	margin-left:-50px;
	transition:opacity 1s, margin 1.4s;
}

div.listItem:hover div.moreInfo {
	opacity:1;
	margin-left:0px;

}

/* the bottommost section of an Item.. via the JS is appended buttons */ 
div.listItem div.buttonSet {
	display:flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	position: relative;
	left:250px;
	transition:left 1.8s;
	margin:12px 10px 12px 0;
	border-radius: 4px;

}

div.listItem:hover div.buttonSet {
	left:0px;

}

div.buttonSet button {
	padding:8px;
}


/* END OF WINE LIST */ 

/* WINE GUIDANCE - descriptions and status info via our guides "Clarence and Claire" */ 


#branding_and_guide {

	width:100%;
	height: 260px;
	background:#fff;
    position: -webkit-sticky;
    position: sticky;
    left:0;
    top:0;
    z-index: 30; 
	-webkit-box-shadow: 10px 17px 13px 0px rgba(0,0,0,0.58);
	-moz-box-shadow: 10px 17px 13px 0px rgba(0,0,0,0.58);
	box-shadow: 10px 17px 13px 0px rgba(0,0,0,0.58);
}

#branding_and_guide h1 {
	text-align: center;
	margin:0px;

}

div#guidance {
   padding:8px 12px; 
   height:200px;
   margin:0 auto;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   overflow: hidden;

}

div#guidance div.inWaiting {  /* various content blocks are hidden by default. shown when needed */ 
	display:none;
}

div.speakingInTurn { /* the 2 guides quotes back and forth, akin to texting */ 
	display: flex;
	justify-content: space-between;
}



div#guidance p {
  font-size:.88rem;
  padding:8px 7px;
    border-radius:8px;

}

p.clarenceSays {
	position:relative;
	left:-800px;
    background:#D2F2FF;
    margin-right:10px; /* assure there's space before claire */ 
	max-width:58%;
}

div.revealed p.clarenceSays.first {
  animation-name: revealingClarence;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div.revealed p.clarenceSays.second {
  animation-name: revealingClarence;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 4s; 
}

p.claireSays {
  margin-top:30px;
  position: relative;
  left:800px;
  width:40%;

    background:#F4D0FD;
}

div.revealed p.claireSays.first {
animation-name: revealingClaire;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 1.5s; /* wait until Clarence is through */ 
  animation-fill-mode: forwards;
}

div.revealed p.claireSays.second {
animation-name: revealingClaire;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-delay: 5.5s; /* wait until Clarence is through */ 
  animation-fill-mode: forwards;
}

@keyframes revealingClarence {
  from {
  	left: -800px;
  }
  to {
  	left: 0px;
  }
}

@keyframes revealingClaire {
  from {
  	left: 800px;
  }
  to {
  	left: 0px;
  }
}


/* the pre-LIST ... loading... what to expect */

#list_pointers {
	margin:8px auto;
	padding:20px;
	width:86%;
	text-align:center;
	font-size:.8rem;
	display: none;
}

a#show_the_list {
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px;
	background: #648cef;
	border-radius: 8px;
	color: white;
	margin: 20px auto;
	display: block;
	height:40px;
	width:180px;
	font-size:.8rem;
	font-weight: 500; 
	transition: font-size 1s;
}

a#show_the_list:hover {
  font-size:.9rem;
  font-weight:800;
}

div#data_loading {
	display:none;
	text-align:center;
	min-height: 300px;
}

div#data_loading.inView  {
	display:block;


}

div#data_loading.inView h2 {
	display:block;
   animation-name: bulgingLoad;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  height:50px;

}

div#box_of_wine { /* note: future, we can use CLIP to draw Glass */ 
  border:1px solid #000;
  width:200px;
  height: 200px;
  position: relative;
 transform: rotate(180deg); /* so the wine is at bottom */ 
 margin:0 auto;
}

div#box_of_wine wine {
	background:red;
	height:10%;
	display: block;
}

div#data_loading.inView div#box_of_wine wine  {
	
   animation-name: risingWine;
  animation-duration: 9s;
  animation-iteration-count: 1;
animation-fill-mode: forwards;
}


@keyframes risingWine {
	from {
		height:10%;
	}
	to {
		height:90%;
	}
}

@keyframes bulgingLoad {
  0%,100% {
  	font-size:1rem;
  }
  50% {
  	font-size:1.2rem;
  }
}
/* end of pre-LIST */