/*=============================================================== 
 THIS SECTION IS THE DEFAULT SETUP, FOR SCREENS 800+PX WIDE 
 ================================================================ */

	.listing_container { /* The container which holds everything, and which is the immediate parent to the flex_container */
		background-color: ghostwhite;
		background-repeat: repeat;
		background-size: auto;
		font-family: times, serif;
		height: auto;
		width: 100vw;
	}
		
	.flex_container { /* The container which holds and puts the left_side_container and the right_side_container side-by-side */
		display: flex;
		flex-wrap: nowrap;
		width: 100vw;
	}
	
	.left_side_container { /* Sets the layout and display parameters for the left_side_container, which contains the menu link buttons and other information */
		float: left;
		margin-left: 5px;   
		max-width: 225px;
		min-height: auto;
		min-width: 170px;
		width: 25vw;
	}
		
	.right_side_container { /* Sets the layout and display parameters for the right_side_container, which holds the listing pictures and information */
		float: right;
		min-height: 100%;
		width: 70vw;
	}
		
	.flex-header { /* The container which holds and places the logo_container and the flex_header side-by-side at the top */
		height: 75px;
		width: 100vw;
	}

	.list_pic_container { /* Sets the layout parameters for the listing picture container */
		display: flex; /* Tells the container to hold multiple columns */
		flex-wrap: nowrap; /* Tells the container to arrange the columns side-by-side, rather than top-to-bottom */
		height: auto;
		width: 100%;

	}
		
	.list_pic { /* Sets the layout parameters for the listing pictures */
		height: auto;
		margin-right: 1vw;
		width: 100%;
	}
		
	.odd_row { /* Sets the parameters for the odd-numbered table rows */
		background-color: #e6eeff;
		text-align: left;
	}	
	
	.even_row { /* Sets the parameters for the even-numbered table rows */
		background-color: #b3ccff;
		text-align: left;
	} 
	
	.description_container {
		max-width: 750px;
		text-align: justify;
		width: 100%;
	}	
	
	.top_menu_container { /* Div to hold the top menu */
		display: none; /* Hides the top menu when the screen is at least 800 px wide */
	}

	.left_menu_link:hover { /* Causes the menu buttons to expand leftward when hovered over */
		background-color: navy;
		#border-style: inset;
		color: yellow;
		width: 95%;
	}	
	
	.left_menu_link:hover a {
		color: yellow;
	}
	
	.left_menu_link { /* Used to create and display the menu buttons */
		background-color: #e6eeff;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		#border-style: outset;
		float: right;
		height: 20px;
		margin-bottom: 1px;
		min-width: 160px;
		padding-right: 10px;
		text-align: right;
		transition: width 0.15s;
		width: 80%;
	}	
	
	.left_menu_heading { /* Used to create non-linked menu subcategory headings for user convenience */
		background-color: #99bbff;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		#border-style: outset;
		float: right;
		font-size: large;
		height: 25px;
		margin-bottom: 1px;
		min-width: 160px;
		padding-left: 10px;
		padding-top: 4px;
		text-align: left;
		text-transform: uppercase;
		width: 80%;
	}
		
	.top_menu_link { /* Hides the top menu when the display is at least 800px wide */
		display: none;
	}
	
	.no_bullet { /* Ensures that the list items used to create the menu links do not have bullet points */
		font-style: plain;
		list-style-type: none;
	}
	
	.ul, .li {
		list-style-type: none;
	}
	
	.top_bar { /* Used to create and display a bar at the top of the page */
		background-image: linear-gradient(azure, lavender);
		border-radius: 16px;
		#border-style: outset;
		color: yellow;
		font-size: clamp(1rem, 4vw, 3rem);
		height:8px;
		margin-left: 2vw;
		margin-right: 2vw;
		margin-top: 4vh;
		margin-bottom: 4vh;
		padding: none;	
		width: 96%;
	}
		
	.side_bar { /* Used to create and display a separation bar between the left_side_container and the right_side_container */
		background-color: lavender;
		border-radius: 16px;
		#border-style: outset;
		height: auto;
		#margin-left: 10px;
		margin-right: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		padding: none;	
		text-align: center;
		width: 8px;
	}

	.bottom_bar { /* Used to create and display a bar at the bottom of the page */
		background-image: linear-gradient(lavender, azure);
		border-radius: 16px;
		#border-style: outset;
		height:8px;
		margin-left: 2vw;
		margin-right: 2vw;
		margin-top: 20px;
		margin-bottom: 20px;
		padding: none;
		width: 96%;
	}
	
	.logo_container { /* Container to hold the logo image */
		float: left;
		height: 15vw;
		max-width: 225px;
		min-width: 170px;
		width: 25vw;
	}
	
	img.logo { /* Used to set the properties of the logo image */
		height: clamp(50px, 25vw, 150px); /* Set a fixed height for the image */
		object-fit: contain; /* Image fills the container, cropping if necessary */
		padding-left: 20px;
		padding-bottom: 20px;
		padding-top: 15px;
		width: 100%; /* Set width of image to 100% of its container */
	}
	
	.store_name_container { /* Container to hold the store_name and slogan containers at the top of the right_side_container */
		height: 150px;
		padding-top: 15px;
		width: 75vw;
	}
	
	.store_name { /* Container to hold the name of the store - Matt's Stamps - at the top of the store_name_container */
		font-size: clamp(2rem, 6vw, 3rem);
		font-weight: bold;
		margin-top: 15px; /* Used to push the store name down enough to align with the logo image */
		text-align: center;
		text-transform: uppercase;
	}
	
	.slogan { /* Container to hold the store slogan, directly below the store name */
		font-size: clamp(1rem, 2.5vw, 2rem);
		font-style: italic;
		text-align: center;
	}
	
	.contact_link { /* Used to highlight the "contact us" inline link */
		color: navy;
	}
	
	.bold_words { /* Adds emphasis by changing words to bold and uppercase */
		font-weight: bold;
		text-transform: uppercase;
	}
	
	.emphasis { /* Adds emphasis to words by underlining them */
		text-decoration-line: underline;
	}
	
	a.link { /* Sets display properties for menu link items */
		color: black;
		margin-left: 5px;
		text-decoration-line: none;
	}
	
	p	{ /* Sets display parameters for paragraphs */
		font-family: times, serif;		
		font-size: clamp(1rem, 1.5vw, 2rem);
	}
	
	caption { /* Sets display properties for captions */
		font-size: clamp(1.2rem, 1.5vw, 2rem);
	}
	
	table { /* Sets display properties for tables */
		max-width: 100%;
		table-layout: fixed;
	}
	
	th	{ /* Sets display properties for table header rows */
		background-color: #99bbff;
		font-size: clamp(1rem, 1vw, 2rem);
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: center;
	}
	
	td	{ /* Sets display properties for table cell data items */
		font-size: clamp(1rem, 1vw, 2rem);
		padding-left: 10px;
		padding-right: 10px;
		text-align: center;

	}

	label	{
		text-decoration: underline;
		font-weight: bold;
		font-family: times, serif;		
		font-size: clamp(1rem, 1.5vw, 2rem);
	}

	summary	{
		font-family: times, serif;		
		font-size: clamp(1rem, 1.5vw, 2rem);
	}

	policies_container: {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}
	
	.catval {
		width: 100%;
		font-size: clamp(1rem, 1vw, 2rem);
		font-weight: bold;
		background-color: lightpink;
	}