/*

		   hgsafarigrid.css
		---------------------

  This stylesheet has been created by Snowbody Cortes for HG Safari Grid (HGS Grid).
  
  Free to use or modify for non-commercial uses.
  If you want to use for a commercial project, contact Snowbody Cortes.

  Current version:	06
  
  Version history:
  	00		initial version.
  	01		flexbox for divs with text+image, 2 images, 2 text columns.
  	02		homepage styles integration.
  	03		webp background image, footer text resized for mobile.
  	04		<pre> for single and double column.
  	05		highlighting for map areas.
  	06		readonly text.
  
*/

		body {
			background-image: url('hgsafari_background.webp');
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			font-family: Helvetica, sans-serif;	/*"Arial Black", Helvetica, sans-serif;*/
			/*font-size: 16px;*/
			color: white;
		}
		.header_div {
			/*border:1px solid #FF0000;*/	/*for debugging*/
			text-align: center;
		}
		.header_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 70%;
			height: auto;
		}
		.small_button {
			border: none;
			color: white;
			padding: 6px 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 12px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 6px;  /* rounded button */
		}
		.button {
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 12px;  /* rounded button */
		}
		.green_filled {background-color: #04AA6D;} /* Green (valid) */
		.red_filled {background-color: #AA046D;} /* Red (not valid) */
		.text_input {
			border: 2px solid green;
			color: green;
			padding: 8px 32px;
			text-align: left;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			background-color: #C0C0C0; /* Light Gray */
		}
		.text_readonly {
			border: 2px solid green;
			color: green;
			padding: 8px 32px;
			text-align: left;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			background-color: #C0C0C0; /* Light Gray */
			cursor:not-allowed;
		}
		a:link {
			text-decoration: none;
			color: #9eff73;
		}
		a:visited {
			text-decoration: none;
			color: #abc4a0;
		}
		a:hover {
			text-decoration: underline;
			color: #23c492;
		}
		.footer_div {
			/*border:1px solid #FF0000;*/	/*for debugging*/
			width: 100%;		/* use the whole page width */
			text-align: center;	/* to center the slots group */
		}
		.footer_slot_div {
			/*border:1px solid #00FF00;*/	/*for debugging*/
			max-width: 15%;		/* to limit the slot width (up to 5 slots) */
			padding: 6px 10px;	/* to create some space in between the slots */
			display: inline-block;	/* to put the slots on a single row */
		}
		.footer_p {
			/*border:1px solid #0000FF;*/	/*for debugging*/
			text-align: center;	/* to center the text in the slot */
		}
		.footer_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 70%;	/* to limit the image width inside the slot width */
			height: auto;	/* to mantain the proportions */
		}
		/*---------*/
		.image_div {
			width: 40%;
			height: auto;
			margin:15px;
		}
		.full_img {
			/*border:1px solid #FFFF00;*/	/*for debugging*/
			width: 100%;
			height: auto;
			/*display: inline-block;*/
		}
		.under_img_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: center;
			font-size: 80%;		/* a little smaller than normal size */
		}
		.session_div {
			border:2px solid #9F9F9F;
			text-align: center;
		}
		.blockseq_div {
			/*border: 1px solid #ffff00;*/	/* for debugging */
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: auto;
		}
		.block_div {
			/*border: 1px solid #00ffff;*/	/* for debugging */
			width: 100%;
			height: auto;
		}
		.block_pre {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			margin: 10px;
		}
		.block_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			margin: 10px;
		}
		.border_3d {
			/*display: inline-block;*/
  			border: 1px solid #000000;
  			box-shadow: 2px 2px 5px #000000;
  			border-radius: 8px;
  			/*margin: 15px;*/
  			/*margin: 15px 15px 0px 15px;*/	/* thin bottom margin */
		}
		.transp20 {
			filter: opacity(80%);
		}
		.float_left {
	 		float: left;
		}
		.float_right {
		 	float: right;
		}
		.float_center {
			width: 60%;
			margin: auto;
		}
		.twoimages_div {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			width: 47%;
			height: auto;
			margin:10px;
		}
		.twotexts_pre {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			width: 47%;
			margin: 10px;
		}
		.twotexts_p {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
			text-align: left;
			width: 47%;
			margin: 10px;
		}
		.text_3d {
  			text-shadow: 2px 2px 5px #000000;
		}
                .touchmap_div {
			/*border:1px solid #00FFFF;*/	/*for debugging*/
                	position: relative;
			width: 60%;
			height: auto;
			/*margin:15px;*/
                }
                .toucharea_div {
  			/*border: 1px solid yellow;*/	/*for debugging*/
			/*background-color: rgba(0, 0, 0, .25);*/	/*for debugging*/
			position: absolute;
			left: 0%; top: 0%; width: 100%; height: 100%;	/* default: the whole image */
		}
		.toucharea_div:hover {
  			border: 1px dashed yellow;
			background-color: rgba(0, 0, 0, .25);
			cursor: url(Open.png),auto;
		}
		@media screen and (max-width: 600px) {
			/* mobile device in portrait mode */
			.image_div {
				width: 60%;	/* make the image larger */
			}
			.twoimages_div {
				width: 80%;	/* make the image larger */
			}
			.twotexts_pre {
				font-size: 60%;		/* smaller than normal size */
			}
			.twotexts_p {
				width: 40%;	/* make the two columns small */
			}
	                .touchmap_div {
				width: 90%;	/* make the mapimage larger */
			}
			.footer_p {
				font-size: 80%;		/* a little smaller than normal size */
			}
			.text_readonly {
				font-size: 80%;		/* a little smaller than normal size */
			}
		}
		/*---------*/
		.menu_button {
  			border: none;
  			color: white;
  			padding: 15px 32px;
  			text-align: center;
  			text-decoration: none;
  			display: inline-block;
  			font-size: 16px;
  			margin: 4px 2px;
  			cursor: pointer;
		}
		.menu_button2 {
			background-color: #80808000; /* Transparent */
		}
		.menu_button3 {
			background-color: #00C0C060; /* Light blue */
		}