#mini_bask_container
		{
			position: relative;
			
			width: 100%;
			
			background-color: #2d5c52;
			
			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
			
			/* border: 2px solid orange; */ /* Important ... !!!!! Enable! This! to see the: ... Outer! Division ... to help understand layout !!!!! */					
			/* padding: 3px; */
			
					z-index: 60; /* 30; */
		}
		
		#mini_bask_price_parent
		{
			display: flex;
			justify-content: space-between;
			
			position: relative;
			font-size: 0.94em;
			
			/* padding: 3px 3px; */ /* vertical ... horizontal */				 
			
			/* border: 1px solid blue; */
		}
		
		nav /* controls the spread of the buttons */
		{
			/* border: 1px solid yellow; */
			
			flex-grow: 0.5;
		}
		
		.dropbtn:hover
		{
			cursor: cell;
		}
		
		#site_info_buttons_div
		{		
			display: flex;
			
			flex-wrap: wrap;
			
			justify-content: space-around;
		
			color: white;
			
			text-decoration: none;
		}
		
		.site_info_buttons
		{
			display: block;
			
			padding: 5px;
		
			color: white;
			
			margin-top: 0;
			margin-bottom: 0;
			
			font-size: 14px;
			
			text-decoration: none;
			
			/* border: 1px solid pink; */ /* #2d5c52; */
			border: 1px solid #2d5c52;
		}
		
		.site_info_buttons:hover
		{
			background-color: #6a936a;
			
			border: 1px solid orange;
		}
		
		#mini_basket /* Note ... JS is used to trigger: "mini_basket" ... because "mini_basket" is NOT! within "mini_basket_price" */
		{
			overflow: hidden; /* "overflow: hidden" is required ... else the entire div content (apart from background color) is still visible ... however ... when more than 2 to 3 items in the basket ... its 100% height which is actually 100% of its: banner image parent element (in the case of homepage) is simply not enough height ... therefore use: 1) scroll ... or 2) auto ... BUT!!! auto is set in JS which: "stops scroll bar displaying ... during mini basket: 0 to 100% height transition" */					
				
			max-height: 0;
			
			position: absolute;	
			
			background-color: orange;
		
			right: 0;							
			transition: 0.5s;
			
			border: none; /* set in ... mini_basket_container.php */					
		}
		
		.mini_bask_item_title
		{
			/* padding: 3px 9px; */ /* vertical ... horizontal */					
			
			font-style: italic;
			text-align: center;					
			padding: 3px 9px; /* vertical ... horizontal */
		}
		
		

		@media only screen and (min-width: 600px)
		{
			.site_info_buttons
			{
				font-size: 15px;
				
				padding: 6px;
			}
		}
		
		@media only screen and (min-width: 768px)
		{
			.site_info_buttons
			{
				font-size: 16px;
				
				padding: 7px;
			}
		}
		
		@media only screen and (min-width: 992px)
		{
			.site_info_buttons
			{
				font-size: 17px;
				
				padding: 8px;
			}
		}
		
		@media only screen and (min-width: 1200px)
		{
			.site_info_buttons
			{
				font-size: 18px;
				
				padding: 9px;
			}
		}
		
		@media only screen and (min-width: 1450px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
		
			#mini_bask_container 
			{
				width: 70%;
			}					
		}