/* CSS - myBestFloor.com */
* {
  	box-sizing: border-box;
	/* Make it use 100% of the screen space */
		margin: 0;
		padding: 0;
	/**/
}


.row::after {
	content: "";
	clear: both;
	display: table;

	/* WQ-Style */
	margin: 0 auto;
	padding: 0px;
	/* WQ-Style */
}

[class*="col-"] {
	float: left;
	padding: 15px;
}

html {
    font-family: 'Roboto Flex', Verdana, sans-serif;
	font-size  : 1.1em;
    font-weight: normal;
    color      : rgb(32, 32, 32);
}






/* HEADER STYLE */
.header {
	font-family: Consolas, Arial, Verdana, "Lucida Sans", sans-serif;
	font-size: 1.1em;
	padding: 4px;
	background-color: white;
	color           : black;
	overflow        : hidden;    
}
	
	.header a {
		float: left;
		color: black;
		text-align: center;
		padding: 8px;
		text-decoration: none;
		font-size: 18px; 
		line-height: 25px;
	}
	
	.header a.logo {
		font-size: 25px;
		font-weight: bold;
	}
	
	.header a:hover {
		color: black;
	}

	.header a.active {
		background-color: #1E90FF;  /*dodgerblue;*/
		color: black;
	}


	
	.header-right {
		float: left;
		float: none;
	}

	.header-right div.header-menu {
		/*
			border-style: solid; 
			border-width: 1px; 
			border-color: rgb(255, 166, 0);
		*/
		padding: 0 2px;
		margin: 2px;
		float: left;
		clear: right;
		background-color: rgb(0, 77, 139);
		/*background-color: #1589FF;*/
	}

	.header-right div.header-menu:hover {
		background-color: rgb(255, 166, 0);
		font-weight: bolder;
		padding: 0 2px;
	}

	.header-right a {
	    float: none;
	    display: block;
	    width: 100%;
	}

	.header-right a:hover {
		color: black;
		background-color: rgb(255, 166, 0);
	}




	/* MEDIA SCREEN - 600px */	
	@media screen and (max-width: 600px) {
		.header a {
		    float: none;
		    display: block;
			text-align: left;

		}
	  
		.header-right {
			float: none;
		}

		.header-right div.header-menu {
			width: 96%;
		  	padding-left: 10px;
		  	margin-left: 10px;
		  	margin-bottom: 6px;
			font-size: 1.5em;
		}
	}
/* HEADER STYLE */





.page-header {
		/*2023-06-04*/
		/*background-color: orange;*/
	/*width: 98%;*/ 

	text-align: left; 
	padding: 5px;
	padding-left: 10px;
		margin: 5px;
	    box-shadow: 1px 1px 10px 1px #000;
}


h1, h2, h3, h4 {
    clear: left;
	padding-bottom: 10px;
}	
	
p {
	padding-bottom: 20px;
}









/* Single-direction drop shadow */
	hr.style-1 {
	    height: 12px;
	    border: 0;
	    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
	}
	
	hr.style-2 {
	    border: 0;
	    height: 0; /* Firefox... */
	    box-shadow: 0 0 10px 1px black;
	}
	hr.style-2:after {  /* Not really supposed to work, but does */
	    content: "\00a0";  /* Prevent margin collapse */
	}





/* MENU SETTINGS - The blue color used on the Menu items: rgb(0, 77, 139); */
	.menu ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	
	.menu li {
		padding: 8px;
		margin: 5px;
		/* IMPORTANT: The <a href= ""> behavior of adding padding to the bottom of the link, must be investigated.*/
		margin-bottom: -18px;  /* This margin-bottom -18 value was made to compensate the margin-bottom when the <li> is used enclosed in a <a href> */ 
		background-color: rgb(0, 77, 139);
		color: #ffffff;
		font-family: Arial, Verdana, "Lucida Sans", sans-serif;
		font-size: 1.1em;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	}
	
	.menu li:hover {
		color: black;
	    font-weight: bold;
		background-color: rgb(255, 166, 0);
	  	/* WQ 2023-03-18 */
			margin-left: -6px;
			margin-right: -4px;
			padding-left: 18px;
	  	/* WQ 2023-03-18 */
	}
	
	.menu-main a:hover {
		color: black;
		background-color: rgb(255, 166, 0);
	  	/* WQ 2023-03-18 */
			margin-left: -6px;
			margin-right: -4px;
			padding-left: 18px;
	  	/* WQ 2023-03-18 */
	}
/* MENU SETTINGS */




.aside {
	font-size: .9em;
	background-color: rgb(255, 166, 0);
	max-width: 480px;
	padding: 10px;
	text-align: left;  
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.footer {
	min-height      : 30px;
	background-color: rgb(0, 77, 139);  /*#0099cc;*/
	color           : #fff;
	text-align      : center;
	font-size       : .6em;
}


.footer img {
	width: 30px; 
	float: left; 
	padding: 3px;   /*=> Padding also controls indirectly the image size. The Bigger the padding, the smaller the image */
}


/* For mobile phones: */
	[class*="col-"] {
		width: 100%;
		padding-top: 2px; /* To all <divs> */
	}

	@media only screen and (min-width: 600px) {		
		/* For tablets: */
		.col-s-1 {width: 8.33%;}
		.col-s-2 {width: 16.66%;}
		.col-s-3 {width: 25%;}
		.col-s-4 {width: 33.33%;}
		.col-s-5 {width: 41.66%;}
		.col-s-6 {width: 50%;}
		.col-s-7 {width: 58.33%;}
		.col-s-8 {width: 66.66%;}
		.col-s-9 {width: 75%;}
		.col-s-10 {width: 83.33%;}
		.col-s-11 {width: 91.66%;}
		.col-s-12 {width: 100%;}
	}
	
	@media only screen and (min-width: 768px) {
		/* For desktop: */
		.col-1 {width: 8.33%;}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}
	}
/* For mobile phones: */








/* WQ Style - Experiment */
	/* Input & Forms*/
		input {
	   		font-family: 'Roboto Flex', Verdana, sans-serif;
			font-size  : 1em;
		  	width: 100%;
		  	height: 2em;
		  	color: navy;
		 }
	
		textarea {
	   		font-family: 'Roboto Flex', Verdana, sans-serif;
			font-size  : 1em;
			width: 100%;
			max-width: 100%; /* Without this redundant limitation, the text area can grow wider than the form */
			color: navy;
		}
		
		form {
		  width: 100%;
		}
	
		.form1 {
			font-size: .9em;
			background-color: #E5E4E2;
			box-shadow: 5px 6px 8px 4px #888888;
			float: left; 
			text-align: left; 
			padding: 12px;  
			width: 100%;
			border-style: solid; 
			border-width: 1px; 
			border-color: #827B60; 
			}
	
		.form2 {
			font-size: .8em;
			background-color: #E5E4E2;
			box-shadow: 0 0 0 0;
			float: left; 
			text-align: left; 
			padding: 10px;  
			width: 100%;
			margin: 0; 
			border-style: solid; 
			border-width: 1px; 
			border-color: #bbb; 
			margin-bottom: 2em; 
			box-shadow: 0 0 0 0;  
			}
	/* Input & Forms*/


    /* unvisited link */
	    a:link {
	        color: white;
	        padding: 3px;
	        text-decoration: none;
	        font-size: .8em;
	    }
    
    /* visited link */
	    a:visited {
	        color: white;
	    }
    
    /* mouse over link */
	    .footer a:hover {
	        border-radius: 3px;
	        padding: 3px;
	        text-decoration: underline;
	        color: lime;  /*gold;*/
	        /*background-color: orange;*/
	        /*font-weight: bolder;*/
	        /*font-size: larger;*/
	    }

    /* selected link */
	    a:active {
	        color: white;
	    }

	strong {
		font-weight: bold;
		font-size: 1.25em;
		margin-top: 130px;
	}


	/* Free Link*/
		.free-link {
			margin: 0 auto; 
			/*display: table;*/
			clear: both;
			width: 25%; 
	        margin-bottom: 10px;
	        color: blue;
	        /*background-color: rgb(0, 77, 139);*/ 
			text-align: center; 
			font-size: 1.2em; 
		}
		
			.free-link a: {
				/*color: blue;*/
				background-color: rgb(0, 77, 139);			
			}
		
		    .free-link a:hover {
		        color: black;
	    		background-color: rgb(255, 166, 0);
	   		    font-weight: bold;
		        /*text-decoration: underline;*/
		    }
	
		    .free-link a:visited {
		        color: white;
		    }
		    
		    .free-link a:active {
		        color: white;
		    }
	/* Free Link */




/* WQ Style  
	# text-align      : justify;
    # text-justify    : inter-word;
*/
   

    

/* SUBMIT / RESET BUTTONS */
	.submit_button {
		width: 30%;
		min-width: 90px;
		height :45px;
		border: none;
		outline: none;
		color: #fff;
		background-color: #5882FA;
		box-shadow: 4px 4px 5px 0 #888;
	
		font-size: 1.8em;
		font-weight: 900;
		text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		border-radius: 3px;
		margin: 5px;
		
		border-style: solid; 
		border-width: 1px; 
		border-color: #0000FF; 
	}
	
	.submit_button:hover {
		background-color: #2E64FE;
		cursor: pointer;
	}
	
	.submit_button:active {
		margin-left: 10px;
		margin-right: 0px;
		box-shadow: none;
	}
	
	.reset_button {
		width: 30%;
		min-width: 90px;
		height: 45px;
		border: none;
		outline: none;
		color: #fff;
		background-color: #FE9A2E;
		box-shadow: 4px 4px 5px 0 #888;
	
		font-size: 1.8em;
		font-weight: 900;
		text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		border-radius: 3px;
		margin: 5px;
		
		border-style: solid; 
		border-width: 1px; 
		border-color: #B87333; 
	}
	
	.reset_button:hover {
		background-color: #FF8000;
		cursor: pointer
	}
	
	.reset_button:active {
		margin-left: 10px;
		margin-right: 0px;
		box-shadow: none;
	}
/* SUBMIT / RESET BUTTONS */