/*	This style sheet will be for those pages 
	which are not meant to be wider that 600 pixels and narrower than 256 pixels */

/*	Centered Page layout and structure */

/*	body will contain container
	container will contain other div-s
	the body and container will not have any padding

	other div-s which will contain Semantic tags
	will have paddings */

#body {
	margin: 0;
	padding: 0;
	background-color: #f0f0f0;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	min-width: 320px;
	min-height: 100vh;
}

/* following were id-s and not class-es
   we may again change these back to id-s
*/

.container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 256px;
	max-width: 600px; /* for larger screens */
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
}

.header {
	text-align: left;
	width: 100%;
	min-width: 256px;
	max-width: 600px; /* for larger screens */
	padding-top: 0.1in;
	padding-right: 0.1in;
	padding-bottom: 0.1in;
	padding-left: 0.1in;
}

.main {
	float: left; /* is it required */
	text-align: left;
	width: 100%;
	min-width: 256px;
	max-width: 600px;  /* for larger screens */
	padding-top: 0.1in;
	padding-right: 0.1in;
	padding-bottom: 0.1in;
	padding-left: 0.1in;
}