body
		{
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size whis is changeable by user */
			
			font-family: Verdana, sans-serif; /* as stated here: https://www.w3schools.com/css/css_font.asp */
			
			margin: 0;
		}		
		
		ul.breadcrumb
		{
			width: 95%; /* in other files ... the width isn't set here ... because breadcrumbs lives within some other DIV */
			
			padding: 10px 16px;
			
			list-style: none;
			background-color: #eee;
			
			border: 1px solid green;
			margin: 5px auto 6px auto; /* top .. right .. bottom .. left */
		}
		
		ul.breadcrumb li
		{
			display: inline;
			
			font-size: 15px;
		}
		
		ul.breadcrumb li+li:before
		{
			padding: 8px;
			
			color: black;
			
			content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
		}
		
		ul.breadcrumb li a
		{
			color: #0275d8;
			text-decoration: none;
		}
		
		ul.breadcrumb li a:hover
		{
			color: #F29445;
			text-decoration: underline;
		}
		
		ul.breadcrumb li#fixed_text
		{
			color: #74730E;
		}	
		
		h1.section_header, h3.section_header, h4.section_header
		{
			margin: 5px auto 10px 5px; /* top .. right .. bottom .. left */
			
			font-style: italic;
		}
		
		h1.section_header
		{
			font-size: 32px;
			
			/* color: #BD2D0C; */
			color: #CE660F;
			
			margin-left: 20px;
			
			font-style: italic;
		}
		
		h2.section_header
		{
			font-size: 25px;
			
			margin: 5px auto 0 26px; /* top .. right .. bottom .. left */
			
			/* color: #CE660F; */
			color: #B22222;
			/* color: #0000CD; */
		}
		
		h3.section_header
		{	
			margin-top: 20px;
			margin-left: 20px;
			margin-bottom: 7px;
		
			font-size: 20px;
			
			color: green;
		}
		
		h4.section_header
		{	
			margin-left: 20px;
			/* margin-bottom: 7px; */
		
			font-size: 19px;
			
			color: #151A9D;
		}
		
		.set_overlay_to_green
		{
			background-color: green;
		}
		
		.image_overlay_off
		{
			position: fixed;
			
			background-color: green;
			
			left: 0;
			top: 0;
			
			width: 100vw;
			height: 100vh;
						
			opacity: 0;
			
			z-index: -1;
			
			transition: opacity 1.25s;
		}
		
		.image_overlay_on
		{	
			opacity: 0.75;
			
			z-index: 25;
		}
		
		.screenshots
		{
			cursor: zoom-in;
		}
		
		.screenshot_FS
		{
			visibility: hidden;
			
			position: fixed;
			
			max-width: 0vw;
			max-height: 0vw;
			
			/* left: 0 & right: 0 are required ... for margin auto below to work for fixed & absolute position: https://stackoverflow.com/questions/17069435/center-fixed-div-with-dynamic-width-css */
			
			left: 0; 
			right: 0;
			top: 0;
			bottom: 0;
			
			margin-left: auto; /* could just use margin: auto ... but this way is a reminder that top bottom margins are effective as used here */
			margin-right: auto;
			margin-top: auto;
			margin-bottom: auto;
			
			cursor: zoom-out;
			
			transition: 0.5s;
			
			z-index: 5000;
		}
		
		.show_screenshot /* has to work via two classes and not 1 id + 1 class else id overrides this class */
		{
			visibility: visible;			
			
			max-width: 90vw;
			max-height: 95vh;
		}
		
		.vr_action_shot_container
		{
			display: grid;				
			
			/* grid-template-columns: auto; */ /* Make the grid smaller than the container */
			grid-template-columns: 1fr 1fr;
			
			justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
										   /* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */				
			grid-column-gap: 25px;
			grid-row-gap: 25px;

			max-width: 95%;
			
			margin: auto;
			margin-top: 15px;

			/* padding: 2px;
			
			border: 1px dashed red;	*/		
		}

		.vr_action_shot_container img
		{
			/* width: 100%; */
				max-width: 100%; /* % = containing block ... in this case the Grid i.e. 50% the parent division width via: 1fr 1fr */
			
			margin: auto;
			
			/* padding: 2px;
			
			border: 1px solid green; */
		}	

			#vr_basics
			{
				margin-bottom: 20px;
			}
			
			#google_cardboard
			{
				margin-top: 18px;
			}
			
			.one_image
			{
				margin: auto;
				margin-top: 10px;
				
				padding: 2px;
				
				/* line-height: 0; */ /* only required if within div */
				
				border: 1px dashed blue;
			}	
			
			.one_image img
			{
				display: block; /* required for margin-auto to work ... image is: inline-block by default */
				
				max-width: 75%;

				margin: auto;				
				
				/* border: 1px solid green; */
			}
			
			.from_the_wiki
			{
				font-weight: bold;
				color: #0C58AA;
			}
			
			#powered_by_steam
			{
				text-decoration: underline;
			}
		
		#simanic_logo
		{			
			position: relative;
			
			margin: 7px auto 7px auto; /* top .. right .. bottom .. left */
			
			/* border: 1px dashed red; */
		}
		
		#simanic_logo img
		{
			max-width: 65%;
			
			margin: 5px auto 1px 20px; /* top .. right .. bottom .. left */
		}
		
		/* #product_cat_block */ /* width commented in ... navbar_middle_mega.css ... because it is controlled here */
		/* { 
				width: 95%; ... seems not to be used anymore 08-03-2020 ... also commented further down ... see old note further down which states it was used in product detail page
		} */
		
		#navbar_top_inner /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
		{ 
			width: 95%;
		}
		
		.page_description_content
		{
			width: 95%;
			
			margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
			
			border: 1px solid green;
			
			padding: 7px 5px 5px 5px;
		}
		
		.text_block
		{	
			font-size: 14px;
			line-height: 150%;
			
			font-family: arial;
			
			/* border: 1px solid blue; */
			
			margin-top: 10px;
			
			padding: 5px 15px 5px 15px; /* top .. right .. bottom .. left */
		}
		
		p
		{
			margin: 0;			
			margin-bottom: 10px;
		}

		.text_block p:first-of-type
		{
			margin-top: 10px;
		}
		
		.text_block p:last-of-type
		{
			margin-bottom: 0;
		}
		
		.text_block h3:first-of-type
		{
			margin-top: 0;
		}
		
		.text_block ul
		{
			margin: 0;
			
			margin-left: 15px;
			
			/* border: 1px dashed green; */
		}
		
		.text_block li
		{
			color: #CE7403;
			/* margin: 0; */				
			
			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		}
			
		.text_block li span
		{
			color: black;
			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		}

		@media only screen and (min-width: 500px)
		{
			.text_block
			{	
				font-size: 14px;								
			}
		}
		
		@media only screen and (min-width: 768px) /* screens 768px or wider */
		{
			.text_block
			{	
				font-size: 15px;				
			}			
		}

		@media only screen and (min-width: 1200px)
		{
			ul.breadcrumb li
			{
				font-size: 18px;
			}
			
		}
			
		@media only screen and (min-width: 1450px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
		
			#simanic_logo, #navbar_top_inner, .page_description_content, #footer_inner, ul.breadcrumb /*, #product_cat_block ... commented 08-03-2020 ... also see note further up */
			{
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */
				
				width: 70%;
			}
		}