
				
		
		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;
		}
		
		p
		{
			margin: 0;
		}
		
		#navbar_top_inner
		{ 
			/* width commented in ... navbar_top_fixed.css ... because it is controlled here */
			width: 100%;
		}
		
		#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 */
		}
		
		h1.section_header, h2.section_header, h3.section_header
		{
			color: #BD2D0C;
			
			margin: 5px auto 5px 2%; /* top .. right .. bottom .. left */			
			
			font-style: italic;
			/* border: 1px solid orange; */
		}
		
		h2.section_header
		{
			/* border: 1px solid orange; */
			
			margin-bottom: 25px; /* overrides 10px bottom margin from above */
		}
				
		.page_description_content
		{
			width: 95%;
			
			margin: 10px auto 5px auto; /* top .. right .. bottom .. left */
			padding: 0 5px 5px 5px;
			
			border: 1px solid orange;
		}
		
		.text_block
		{	
			font-size: 17px;
			
			font-family: arial;
			
			border: 1px solid green;
			
			padding: 15px;
			
			margin: 10px 5px 0 5px; /* top .. right .. bottom .. left */
		}
		
		ul
		{
			margin: 0;
			
			/* border: 1px solid pink; */
		}
		
		#instruction_bullets li
		{
			color: #CE7403;
			
			font-size: 19px;			
			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		
			font-style: italic;			
		}
		
		#instruction_bullets li span
		{
			color: black;
			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		}
		
		#instruction_text
		{
			font-family: arial;
			font-size: 20px;			
			
			margin-bottom: 10px;			
			
			/* border: 1px solid blue; */
		}
		
		#message_container
		{
			width: 95%;
			margin: 0 auto;
		}
		
		#message_parent
		{
			display: flex;	
			
			border: 1px solid pink;			
			padding: 5px;
			
			margin: 5px auto 5px auto; /* top .. right .. bottom .. left */
		}
		
		#contact_details, #message_description /* https://stackoverflow.com/questions/2034544/textareas-rows-and-cols-attribute-in-css */
		{
			margin: 3px;
			padding: 5px;			
			border: 1px solid orange;
		}
		
		#message_description
		{
			font-size: 17px;
		}
		
		#company_parent
		{
			display: flex;
			flex-wrap: wrap;
			
			justify-content: center;
			
			border: 1px solid blue;			
			padding: 5px;
		}
		
		#company_map, #company_address
		{
			margin: 3px;
			padding: 5px;
			
			/* min-width: 500px; */
			width: 500px;
			
			border: 1px solid green;
		}
		
		#company_address
		{
			width: 500px;
		}
		
		#company_map /* https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container */
		{
			/* flex: 1 0 auto; */ /* the above link could be useful in relation to these "flex: " methods */
			/* flex: 1; */
			
			flex-grow: 1;
			
			min-width: 50%;
			
			min-height: 350px; /* % doesn't work for height here */
		}
		
		iframe
		{
			width: 100%; /* these are indeed needed to make iframe fill div */			
			height: 100%;
		}

		#company_address
		{
			flex-grow: 1;
			
			padding: 50px;
			
			font-family: arial;
			line-height: 1.5;
		}
		
		#address_inner_div
		{
			padding: 25px;			
			border: 1px solid purple;
			
			text-align: center;
		}
		
		#phone_bold
		{
			font-weight: bold;
		}
		
		input[type=text] /* https://www.w3schools.com/css/tryit.asp?filename=trycss_forms */
		{ 
			width: 100%;
			
			padding: 7px 15px;
			margin: 2px 0;
			
			font-size: 15px;
			
			border: 1px solid #ccc;
			border-radius: 3px;
		}
		
		#email_submit_button
		{
			font-size: 20px;
			background-color: #EFECF0;
			
			transition: 0.5s;
		}
		
		#email_submit_button:hover
		{
			color: #1512A7;			
			background-color: #E7F1E4;
			
			text-decoration: underline;
			font-style: italic;
		}
		
		#product_cat_block
		{
			width: 95%;
		}
		
		address
		{
			font-style: normal;
		}	
			
		@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, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner, #message_container
			{
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */
				
				width: 70%;
			}
		}
		
		
