/*=============================================================== 
 THIS SECTION IS THE SETUP FOR SCREENS **LESS THAN** 800PX WIDE 
 ================================================================ */
  
@media screen and (max-width: 799px) {
	body {
		.left_side_container {
			display: none;
		}
		
		.top_menu_flex_container {
			display: flex;
			flex-wrap: nowrap;
			min-height: 50px;
            width: 100%;
		}
		
		.top_menu_container { /* Div to hold the top menu */
			display: inline-block;
			padding-left: auto;
			padding-right: auto;
			position: relative;
			width: 96vw;
			height: auto;
			min-height: 8wv;
		}
		
		.top_menu_container:hover .top_menu_heading {
			background-color: navy;
			color: yellow;
		}	
		
		.top_menu_container:hover .top_menu_link { /* This controls the behavior of the top_menu_container div when the top menu link items are hovered over */
			display: block; /* This makes the hidden top menu dropdown list appear when the heading is hovered over */
		}
		
		.top_menu_heading { /* Sets the parameters for the top menu heading items */
			background-color: 99bbff;
			border: none;
            border-style: outset;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			color: black;
			float: left;
			font-family: times, serif;
			font-size: clamp(.5rem, 2vw, 1rem);
			height: 100%;
			width: 100%;
			padding: 1vw;
			position: relative;
			text-align: center;
			text-transform: uppercase;
			z-index: 1;
		}
		
		.top_menu_heading:hover { /* Defines the behavior of the top menu heading items when hovered over */
			display: block;
		}
		
		.top_menu_link { /* These are the top menu dropdown menu items */
			background-color: #f1f1f1;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			display: none;
			min-width: 160px;
			position: absolute;
			top: 100%;
			z-index: 1;
            border: 2px solid lightblue;
		}
		
		.top_menu_link a { /* This sets the display formatting for the top menu dropdown links */
			color: black;
			display: block;
			padding: 12px 16px;
			text-decoration: none;
		}
		
		.top_menu_link a:hover { /* Defines the behavior of the top menu dropdown link items when hovered over */
			background-color: #ddd;
		}
		
		.right_side_container {
			padding-left: 2vw;
			padding-right: 2vw;
		}
		
		.side_bar {
			display: none;
		}
		
		.logo_container { /* Container to hold the logo image */
			display: none;
		}
		
		.flex-header { /* The container which holds and places the logo_container and the flex_header side-by-side at the top */
			height: 50px;
			width: 98vw;
		} 
		
		.flex_container { /* The container which holds and puts the left_side_container and the right_side_container side-by-side */
			display: flex;
			width: 98wv;
		}
		
		.right_side_container { /* Sets the layout and display parameters for the right_side_container, which holds the listing pictures and information */
			padding: 2wv;
			width: 96vw;
		}
			
		.store_name_container { /* Container to hold the store_name and slogan containers at the top of the right_side_container */
			width: 96vw;
		}
		
		.store_name { /* Container to hold the name of the store - Matt's Stamps - at the top of the store_name_container */
			flex-wrap: nowrap;
			font-size: clamp(3rem, 4vw, 5rem);
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			width: 96vw; /* Set width of image */
		}
			
		.slogan { /* Container to hold the store slogan, directly below the store name */
			font-size: clamp(1rem, 4vw, 2rem);
			font-style: italic;
			text-align: center;
			width: 96vw; /* Set width of image */
		}
			
		.list_pic_container { /* Sets the layout parameters for the listing picture container */
			display: flex; /* Tells the container to hold multiple columns */
			flex-wrap: wrap; /* Tells the container to arrange the columns top-to-bottom, rather than side-by-side */
			height: auto;
			width: 100%;
		}
			
		.list_pic { /* Sets the layout parameters for the listing pictures */
			height: auto;
			margin: auto;
			width: 90%;
		}	
		
		.top_bar, .bottom_bar { /* Used to create and display a bar at the top of the page */
			display: none;
		}
		
		p { /* Sets display parameters for paragraphs */
		font-family: times, serif;		
		font-size: clamp(1rem, 1vw, 2rem);
		width: 92vw;
		}
		
		caption {
			text-align: center;
		}
		
		th {
			font-size: clamp(.75rem, 1.5vw, 1rem);
		}
		
		td {
			font-size: clamp(.75rem, 2vw, 1rem);
		}
		

		#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10 {
			display: inline-block;
			position: relative;
		}
		
		#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10 a:hover {
			background-color: #ddd;
		}
		
		#b1:hover #l1 {display: block;}
		#b2:hover #l2 {display: block;}
		#b3:hover #l3 {display: block;}
		#b4:hover #l4 {display: block;}
		#b5:hover #l5 {display: block;}
		#b6:hover #l6 {display: block;}
		#b7:hover #l7 {display: block;}
		#b8:hover #l8 {display: block;}
		#b9:hover #l9 {display: block;}
		#b10:hover #l10 {display: block;}
	
		}
	
		label	{
		text-decoration: underline;
		font-weight: bold;
		font-family: times, serif;		
		font-size: clamp(.75rem, 1vw, 2rem);
		}

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

}