

		* {
			box-sizing: border-box; /* might not be needed here */
		} /* ................ Slide-show Banner ... Using radio buttons */

		body {
			font-family: Verdana, sans-serif; margin: 0
		}

		/* Drop-down content (hidden by default) */
		.dropdown_content, .dropdown_content_2, .dropdown_content_3, .dropdown_content_4, .dropdown_content_5
		{
			visibility: hidden;
				overflow: hidden; /* Important ... see note in: navbar_middle_mega.html about the mobile menu retraction issue ... now fixed! */
								  /* when the issue was happening ... commenting this "hidden" allowed the Menu to remain. You could see the */
								  /* BROWN background Menu color instantly become "0" height when swiping the screen */
			transition: 0.5s;

			position: absolute;

			color: white;
			background-color: #7B7751; /* furthest back background ... effectively color between flex columns */

			width: 100%;
			left: 0; /* this is indeed needed ... else the menu starts off level with the "Products" button */

			padding: 2px;

			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}

		.row {
			display: flex;
			flex-wrap: wrap;
		}

		.column {
			/* width: 33.33%; */
			width: 400px;
			flex-grow: 1;

			padding: 15px;
			margin: 5px;

			background-color: #c8c8c8; /* Colour of main drop-down background */
			border: 2px solid red;
		}

		.column a {
			/* color: black; */		/* ........... THESE ARE NOW ALL SET DIRECTLY ... Example: within the header tags below */
			/* font-size: 17px; */
			/* text-decoration: none; */
			/* text-align: left; */
		}

		.column a:hover {
			/* background-color: #ddd; */
		}

			.prod_list_block
			{
				/* margin-bottom: 20px; */
				margin-top: 6px;
				border: 1px solid yellow;
				padding: 5px;
			}

				.prod_list_block > ul /* one level deep ... so: "inner_sub_list" doesn't get given a border */
				{
					color: #CE7403;
					border: 1px solid #125A6A;

					margin: 0;

					line-height: 1.5; /* list-style: none; */ /* gets rid of bullet points */
				}

				ul.inner_sub_list
				{
					margin-bottom: 5px;

					padding-left: 15px;
					line-height: 1.40;
				}

				#individual_parts
				{
					color: #2A38B0;
				}

				.h3_fake
				{
          display: block; /* in HTML I'm using <span> because <div> would mess up the structure... but these spans need to behave like block elements */

					color: #6C0C64;
						/* border: 1px solid red; */
					font-family: arial;
					font-size: 18px;
          font-weight: bold;

					margin-top: 22px; /* set margin for header ... because default is quite large */
					margin-bottom: 0;
				}

        .column .h3_fake:first-of-type /* .column ... from testing ... not actually needed here */
				{
					margin-top: 3px; /* set margin for header ... because default is quite large */
				}

				.h4_fake
				{
          display: block; /* in HTML I'm using <span> because <div> would mess up the structure... but these spans need to behave like block elements */

					color: #1A6939;
					font-family: arial;
					font-size: 17px;
          font-weight: bold;

					margin: 13px auto 0 12px; /* top .. right .. bottom .. left */
					padding: 0;
				}

				.h4_fake.beneath_h3
				{
					margin-top: 9px;
				}

				.h5_fake, .h6_fake /* headers are block elements */
				{
					font-family: tahoma, Helvetica, arial, sans-serif;
					font-size: 16px;
					font-weight: normal; /* lighter */

					margin: 0 0 0 0; /* set margin 0 for header ... because default is quite large */
					margin-left: 2px; /* margin from the <li> to the header within it ... default is almost large enough for my liking */

					/* border: 1px solid #125A6A; */
					/* padding: 2px; */
				}

				.h6_fake
				{
					font-size: 14px;
				}
				.h5_fake /* 03-06-2024... made smaller here because I'm adding more items to he menu which is taking up more space */
				{
					font-size: 14px;
				}

				.h5_fake a, .h6_fake a
				{
					color: #09468b; /* color needs to be set here via: "h5 a" ... however font-size can be set here ... or as above via: "h5" */
					/* color: #0F0F13; */ /* had once decided to simply keep this the same color as when visited ... which is set below */

					transition: 0.05s;
				}

				.h5_fake a:link, .h6_fake a:link /* a:link = unvisited links Only! ... links are inline elements */
				{
					color: #0F0F13;

					/* margin-left: 25px; */ /* margin from the bullet of the List they're within ... top .. right .. bottom .. left */
					text-decoration: none; /* makes sure text doesn't end up underlined */
				}

        .user_guide_links a {
          color: #8A6C08;
        }
        .user_guide_links a:link {
          color: #8A6C08;
        }

				.h5_fake a:hover, .h6_fake a:hover /* a:link = unvisited links Only! ... links are inline elements */
				{
					color: #5F0203;
					background-color: #DCE4DB;
				}