@charset 'utf-8';

/* class="row" element styles
*/
div.row			{         
	clear:		both;      /* displays the row only when margins are clear of previously floated columns */
	height:		calc(var(--purchase-height) * .5);
	margin-top:	1vw;
}
/* Applies "float" attribute to all grid definitions
*/
div[class^="col-"]	{  /* [class^="col-"] means match all <div> elements whose class attributes      */
    float:   left;         /* start with "col-" floats every column on the left                          */
}

/* Grid definitions.
*/
div[class^="col-1-4"] 		{
	width: 			24%;
	text-align:		center;
	font-family:		Verdana, Times, sans-serif;
	font-size:		2vw;
	font-weight:		bold;
}
div[class^="col-"] a		{
	color:			black;
	text-decoration:	none;
}
div[class^="col-"] > a:hover	{
	color:			#CC1302;
}
.col-1-4t1			{
	color:			yellow;
	padding-top:		8vw;
}
.col-1-4t2			{
	color:			gray;
	padding-top:		4vw;
}

div[class^="col-"] > img	{
	width:			12vw;
	height:			auto;
 	margin-top:		5%;
	margin-left:		5%;
	opacity:		1;
}
.notation			{
	position:		absolute;
	top:			53vw;
	left:			24%;
}
.notation > p			{
	color:			yellow;
	font-size:		2vw;
}
.notation  a			{
	text-decoration:	none;
	color:			red;
}
.notation  a:hover		{
	color:			DarkOrange;
}

.purchasing	{
	position:	absolute;
	top:		calc(var(--menubar-height)   + calc(var(--mb-border-width) * 2) +
			     var(--titlecard-height) + var(--trending-title-height)     +
			     calc(var(--trend-container-height) * var(--num-trend-containers)) + calc(var(--trend-border-width) * 4));
	left:		0;
	width:		var(--trend-container-width);
	height:		var(--trending-title-height);
	clear:		both;
	float:		left;
	text-align:	center;
	font-size:	var(--trending-title-font-size);
	line-height:	calc(var(--trending-title-height) + .5vw);
	vertical-align: middle;
 	border:		var(--trend-border-width) solid gray;
	border-radius:	var(--trending-bradius);
	background-image:	linear-gradient(270deg,
				rgba(250,128,114,.75) 0%,  /* Salmon  */
		 		rgba(191,52,117,1) 50%,  
				rgba(250,128,114,.75) 100%);
}
.purchase-container {
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2)         +
			     var(--titlecard-height) + calc(var(--trending-title-height) * 2) +
			    (var(--trend-container-height) * var(--num-trend-containers))     + calc(var(--trend-border-width) * 6));
	left:			0;
	clear:			both;
	float:			left;
	width:			var(--trend-container-width);
	height:			var(--purchase-height);
	margin:			0;
	padding:		0;
 /*	background-image: 	url("../img/contextbg.jpg");
	background-repeat: 	no-repeat; */
	background-color:		#C4B3B1;
 	border:			var(--trend-border-width) solid gray;
	border-radius:		var(--purchase-bradius);
}