* {
	box-sizing:border-box;
}

body {
	background:#92bde7;
	color: #000;
	line-height:1.6;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:13px;
	margin-left:1em;
	margin-right:1em;
	margin-top:100px; /* This makes the body shift Down by 90px from top. 60px is taken by header. So, there is a sapce of 40px [100-60] as margin on top. */
	margin-bottom:60px; /* This makes the body shift Up by 60px from bottom. 40px is taken by footer. So, there is a sapce of 20px [60-40] as margin at bottom. */
	overflow-y:scroll;/* This reserves the space for scroll bar therefore avoids the movement/nudging of text in header and nav-bar whenever an overflow of display occurs. */
}

ul {
	list-style:none;
	padding:0;
}

h4 {
	margin:3px;
	padding:3px;
}

textarea {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:13px;
}

table {
	border:3px solid gray;
	background-color:#ffffe6;
	border-radius:5px;
	margin-left:auto;
	margin-right:auto;
}

th {
	border:2px solid gray;
	background-color:orange;
	border-radius:2.5px;
	text-align:center;
	padding:4px;
}

td {
	border:1px solid gray;
	border-radius:2.5px;
	text-align:center;
	padding:4px;
}

.add {
	background-color:#ffffe6;
}

#heading {
	height:50px;
	width:100%;
	position:fixed;
	z-index:20; /* Since overlapping of elements occurs with above 'position' property, z-index property is requie with a higher stack order number, say 20 is used. */
	top:0px;
	background:#92bde7;
}

#heading {
	text-align:center;
}

#heading span {
	color:#fff
}

#nav-bar {
	height:50px;
	width:100%;
	position:fixed;
	z-index:20; /* Since overlapping of elements occurs with above 'position' property, z-index property is requie with a higher stack order number, say 20 is used. */
	top:50px;
	background:#92bde7;
}

#nav-bar li {
	font-weight:bold;
	list-style:none;
	margin-top:8px;
}

#nav-bar a {
	font-weight:bold;
	color:#fff;
	text-decoration:none;
}

#nav-bar {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

#sub1, #sub2, #sub3 {
	justify-self:center; /*To align part2 &3 Div sections to left aligh within the grid */
}

#sub3 ul{
	list-style-type:none; /* This makes the bullets before the li items disappear. */
	margin:0;
	padding:0;
	/*background-color:#fff;*/
}

#sub3 ul li a {
	text-decoration:none;
	/*color:#92bde7;*/
	padding-bottom:8px;
	text-align:center;
	display:block;
	width:80px;
}

#sub3 ul ul li a{
	padding:2px;
	/*color:#92bde7;*/
	color:#1a5276;
}

#sub3 ul ul li a:hover {
	background-color:#fff;
	padding:2px;
	margin:0px;
	/*border:1px solid #c9e6ff;*/
	/*border:1px solid #000;*/
}

#sub3 ul ul {
	background-color:#c9e6ff;
	padding-bottom:10px;
	position:absolute;
	visibility:hidden;  /*This makes the drop-down menu to disappear or hidden. This together with 'position:relative;' above makes the Level-2 li items appear as vertical-drop-down-list.*/
	/*display:none;  has the same effect as above visibility:hidden; property! */
}

#sub3 ul li:hover ul {
	visibility:visible; /* This makes Level-2 ul items visible only when mouse is hovered over Level-1 <li> item. */
	/*display:block;  has the same effect as above visibility:visible; property! */
}

#foot-bar {
	height:40px;
	width:100%;
	position:fixed;
	z-index:20; /* Since overlapping of elements occurs with above 'position' property, z-index property is requie with a higher stack order number, say 20 is used. */
	bottom:0px;
	background:#92bde7;
}

#foot-bar p {
	text-align:center;
	font-weight:bold;
	color:#fff
}

.wrapper {
	box-shadow:0 0 20px 0 rgba(72,94,116,0.7);
}

.wrapper > * {
	padding:1em;
}

/*
 * SMALL SCREENS
 *
 * Following media query means that below code is in effect only if the screen size
 * of the device is smaller than 900px.
 *
 */

@media(max-width:900px) {

	body {
		margin-top:180px;
	}

	#heading {
		height:90px;
		font-size:10px;
	}

	#nav-bar {
		top:90px;
		height:90px;
	}

	#nav-menu {
		display:grid;
		grid-template-columns:1fr 1fr;
	}

	#pwd {
		grid-column:1/3;
	}

	#nav-menu {
		background:#c9e6ff;
	}

	.container1{
		max-width:340px;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
		text-align:center;
	}

	.container2 {
		max-width:auto;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
		text-align:left;
	}

	.nav-sub ul li {
		margin-top:16px;
		margin-bottom:16px;
	}

	.one-column-form p{
		padding:10px;
		width:auto;
	}
}

/*
 * LARGE SCREENS
 *
 * Following media query means that below code is in effect only if the screen size
 * of the device is bigger than 700px.
 *
 */

@media(min-width:900px) {

	.part {
		display:grid;
		grid-template-columns:1fr 5fr;
	}

	.part1 {
		grid-row:1/5;/* This makes the part1 Div section to streach vertically all across part2 & 3 */
	}

	.part2 {
		justify-self:left; /*To align part2 &3 Div sections to left aligh within the grid */
	}

	.part3 {
		justify-self:left; /*To align part2 &3 Div sections to left aligh within the grid */
	}

	#nav-menu {
		background:#c9e6ff;
		position:fixed;
	}

	.container1 {
		max-width:170px;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
	}

	.container2{
		max-width:auto;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
	}

	.two-column-form form {
		display:grid;
		grid-template-columns:1fr 1fr;/* fr meaning Fraction */
		grid-gap:15px;
		width:auto;
	}

	.nav-sub ul li {
		display:inline;
		margin-left:5px;
		margin-right:5px;
	}
}

/* NAVIGATION MENU STYLES */

#nav-menu ul li:hover {
	background-color:#f9feff;
}

#nav-menu ul li a {
	text-decoration:none;
	display:block;/* This makes the finger-pointer to be effected across the rectangular box that sourrounds the text link, without which the finger-pointer would only appear when hovered over just the text. */
	padding:1px;
	font-weight:bold;
	color:#1a5276;
}

#nav-menu h4 {
	margin:0px;
	padding:0px;
}

#pwd ul li {
	display:block;
}

#pwd a {
	text-decoration:none;
	color:#871010;
}

.nav-back ul li a,
.nav-sub ul li a {
	background:#c9e6ff;
	text-decoration:none;
	text-align:center;
	padding:5px;
	color:#000;
	text-transform:uppercase;
	border:1px solid #c9e6ff;
	cursor:default;/* changes the cursor from hand Pointer to defaut Arrow */
}

.nav-back ul li a:hover,
.nav-sub ul li a:hover {
	background:#92bde7;
	color:#fff;
	border:1px solid #92bde7;
}

.nav-back ul li a {
	position:relative; top:8px;
}

/* MESSAGE BOX STYLES */

.msg-show {
	background:#f9feff;
}

.msg-show p {
	color:red;
	font-size:12px;
}

/* FORM STYLES */

.login-form form {
	text-align:center;
}

.login-form form button {
	background:#c9e6ff;
	padding:5px;
	width:200px;
	margin-top:15px;
	text-transform:uppercase;
}

.login-form form input {
	border:1px solid #c9e6ff;/*This removes the depth or 3D swell of the button and makes it flush to background */
	width:200px;
	padding:5px;
}

/* .one-column-form form datalist,
.two-column-form form datalist  */

.one-column-form form select, 
.two-column-form form select {
	background:#c9e6ff;
	/* border:1px solid #c9e6ff; */
	border: none;
	padding:5px;
	width:100%;
	/* margin-top:15px;  */
	margin-top:5px;
}

.one-column-form form button,
.two-column-form form button {
	background:#c9e6ff;
	padding:5px;
	width:100%;
	margin-top:20px;
	text-transform:uppercase;
}

.one-column-form form input[type="date"],
.two-column-form form input[type="date"] {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:13px;
}

.one-column-form form input[type="date"],
.two-column-form form input[type="number"] {
	width:40%;
}

/* FORM STYLES - COMMON ATTRIBUTES */

.two-column-form form p,
.one-column-form form p {
	margin:0; /* To remove the default Paragraph margin */
}

.two-column-form,
.login-form,
.one-column-form {
	background:#f9feff;
}

.login-form form label,
.two-column-form form label,
.one-column-form form label {
	display:block; /* To make Labels come on top of input text boxes */
}

.login-form button:hover,
.one-column-form form button:hover,
.two-column-form form button:hover {
	background:#92bde7;
	color:#fff;
}

.one-column-form form input, .two-column-form form input,
.one-column-form form textarea, .two-column-form form textarea,
.one-column-form datalist, .two-column-form datalist,
.one-column-form button, .two-column-form button,
.login-form button {
	border:1px solid #c9e6ff;/*This removes the depth or 3D swell of the button and makes it flush to background */
	width:90%;/* This makes the horizontal width of Text-Box auto adjust @ 90% of its container width */
	padding:5px;
	margin-top: 5px;
}

.one-column-form form input:hover, .two-column-form form input:hover,
.one-column-form form textarea:hover, .two-column-form form textarea:hover,
.one-column-form datalist:hover, .two-column-form datalist:hover,
.one-column-form button:hover, .two-column-form button:hover,
.login-form button:hover {
	border:1px solid #92bde7;
}