body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* ================== This is the Top Bar configuration ================ */

.topnav {
	position: fixed; 	/* Fixes the bar to a specific part of the screen */
	top: 0px; 			/* Sets position from top */
    z-index: 1;         /* Fixes the topnav above other items */
	height: 46px; 		/* determines the bar height*/
	overflow: hidden; 	/* overflow-x property specifies scroll, hidden, auto or                 visible whether to clip the content, add a scroll bar, 
						or display overflow content of a block-level element,
						when it overflows at the left and right edges. */
	background-color: #5B2C6F;   /* This sets the colour of the Side Nav bar as                         #5B2C6F  */
	width: 100%; 				/* determines the bar width*/
}

 .topnav a {
	float: right;		/* specifies how an element should float. Absolute                      positioned elements ignores the float property. */
	display: block;		/* specifies the display behavior (the type of rendering                 box) of an element. */
	color: white;		/* This sets the colour of the font used for the Top Nav                 bar */
	height: 46px;		/* Sets the height of the Nav Bar */
	width: 100px;		/* Sets the width for the text links in the Bar */
	text-align: center;	/* Set the text alignment for different <div> elements -                 center, left,right, justify. */
	padding: 14px 4px 4px 4px;	/* to generate space around an element's                    content, inside of any defined borders - top, right,                    bottom, left in that order in px */
	text-decoration: none;	/* Set different text decorations for <h1>, <h2>,                   and <h3> param = overline, line-through, underline,                     underline overline */
	font-size: 12px;	/* Sets the font size for text in the Top Nav bar */ 
}

.topnav a:hover {		/* used to select elements when you mouse over them. */
	background-color: #2196F3;	/* This sets the colour #f1f1f1 [off white] of                          the hover used in the Top Nav bar */
	color: white;		/* Sets the font size for text when in HOVER in the Top                 Nav bar */ 
}


.topnav a[text] { 		/*NOT SURE WHAT THIS IS FOR*/
	font: arial; 		/* sets the margin area on the left side of an element.                 */
	color: white; 		/* This sets the colour of the font used in the Top Nav                 bar */
}


.topnav input[type=text] {
	padding: 6px;		/* sets the space above, from right, below, left, */
	margin-top: 6px;	/* sets the margin area on the left side of an                          element. */
	font-size: 13px;	/* This sets the size of the font used in the Top                       Nav bar */
	border: none;		/* to specify the style, width, and color of an                         element's border eg.all sides, bottom, rounded etc. */
	color: black;		/* sets text colour */
	width: 150px;		/* sets the width of the font area in the Top Nav bar */
}

/* the following sets up the Login button and container */
.topnav .login-container { 	/* THIS IS NOT CURRENTLY USED, BUT is used to                               provide a Login Container. */
	float: left; 			/* This sets the container to the right hand side of                     the Top Nav bar */
	height: 35px; 		/* determines the bar height*/
	top: 0;
}
.topnav .login-container .button {
	float: right;		/* This sets the button to the right hand side of the Top Nav bar */
	padding: 6px 10px;	/* sets the space above, from right, below, left,  */
	margin-top: 2px;	/* sets the margin area on the TOP of an element. */
	margin-right: 26px;	/* sets the right margin of an element. */
	background-color: blue;		/*this is the Home BUTTON color*/
	color: white;		/* Set the text-color */
	font-size: 15px;	/* This sets the size of the font used in the Login button in the Top Nav bar */
	border: none;		/* to specify the style, width, and color of an element's border eg.all sides, bottom, rounded etc. */
	cursor: pointer;	/* specifies the mouse cursor - a hand - to be displayed */
}
/* this determines the color change to the button when hovering */
.topnav .login-container button:hover {
	background-color: red;	/* sets the colour when the button is hovered over*/
}

@media screen and (max-width: 600px) {
  .topnav .login-container {
    float: none;
  }

.topnav a, .topnav input[type=text], .topnav .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  
}

.sticky {
  position: -webkit-sticky;		/* Safari */
  position: sticky;				/* Sticks a box to a specific part of the screen */
  top: 0;						/* determines the point on which the bar sticks */
  border: solid #4CAF50;
  overflow: hidden;
  background-color: #e9e9e9;
  height: 39px; 				/* this sets the depth of the box */
  width: 100%;
}


/* ==================  End of Topnav General settings ================ */

/* ==================  Second Level Topnav settings ================= */
h2 { 
    color: white;
    margin-left: 280;
    margin-right: 200;
    text-align: center;
    font-family: arial,helvetica,sans-serif;
    font-size: 15px;
}

.topnav2 {
	position: fixed; 	/* Fixes the bar to a specific part of the screen */
	top: 44px; 			/* Sets position from top */
    z-index: 1;         /* Fixes the topnav above other items */
	height: 50px; 		/* determines the bar height*/
	overflow: hidden; 	/* overflow-x property specifies scroll, hidden, auto or                 visible whether to clip the content, add a scroll bar, 
						or display overflow content of a block-level element,
						when it overflows at the left and right edges. */
	background-color: #5B2C6F;   /* This sets the colour of the Side Nav bar as                         #5B2C6F  */
	width: 100%; 				/* determines the bar width*/
}

 .topnav2 a {
	float: right;		/* specifies how an element should float. Absolute                      positioned elements ignores the float property. */
	display: block;		/* specifies the display behavior (the type of rendering                 box) of an element. */
	color: white;		/* This sets the colour of the font used for the Top Nav                 bar */
	height: 30px;		/* Sets the height of the Nav Bar */
	width: 100px;		/* Sets the width for the text links in the Bar */
	text-align: center;	/* Set the text alignment for different <div> elements -                 center, left,right, justify. */
	padding: 14px 4px 4px 4px;	/* to generate space around an element's                    content, inside of any defined borders - top, right,                    bottom, left in that order in px */
	text-decoration: none;	/* Set different text decorations for <h1>, <h2>,                   and <h3> param = overline, line-through, underline,                     underline overline */
	font-size: 12px;	/* Sets the font size for text in the Top Nav bar */ 
}

.topnav2 a:hover {		/* used to select elements when you mouse over them. */
	background-color: #2196F3;	/* This sets the colour #f1f1f1 [off white] of                          the hover used in the Top Nav bar */
	color: white;		/* Sets the font size for text when in HOVER in the Top                 Nav bar */ 
}


.topnav2 a[text] { 		/*NOT SURE WHAT THIS IS FOR*/
	font: arial; 		/* sets the margin area on the left side of an element.                 */
	color: white; 		/* This sets the colour of the font used in the Top Nav                 bar */
}


.topnav2 input[type=text] {
	padding: 6px;		/* sets the space above, from right, below, left, */
	margin-top: 40px;	/* sets the margin area on the left side of an                          element. */
	font-size: 13px;	/* This sets the size of the font used in the Top                       Nav bar */
	border: none;		/* to specify the style, width, and color of an                         element's border eg.all sides, bottom, rounded etc. */
	color: black;		/* sets text colour */
	width: 150px;		/* sets the width of the font area in the Top Nav bar */
}

/* the following sets up the Login button and container */
.topnav2 .login-container { 	/* THIS IS NOT CURRENTLY USED, BUT is used to                               provide a Login Container. */
	float: left; 			/* This sets the container to the right hand side of                     the Top Nav bar */
	height: 35px; 		/* determines the bar height*/
	top: 0;
}
.topnav2 .login-container .button {
	float: right;		/* This sets the button to the right hand side of the Top Nav bar */
	padding: 6px 10px;	/* sets the space above, from right, below, left,  */
	margin-top: 2px;	/* sets the margin area on the TOP of an element. */
	margin-right: 26px;	/* sets the right margin of an element. */
	background-color: blue;		/*this is the Home BUTTON color*/
	color: white;		/* Set the text-color */
	font-size: 15px;	/* This sets the size of the font used in the Login button in the Top Nav bar */
	border: none;		/* to specify the style, width, and color of an element's border eg.all sides, bottom, rounded etc. */
	cursor: pointer;	/* specifies the mouse cursor - a hand - to be displayed */
}
/* this determines the color change to the button when hovering */
.topnav .login-container button:hover {
	background-color: red;	/* sets the colour when the button is hovered over*/
}

/* ====================  End of Second Level Topnav settings  =============== */

/* ====================  Third Level Topnav settings =================== */
.topnav3 {
	position: fixed; 	/* Fixes the bar to a specific part of the screen */
	top: 96px; 			/* Sets position from top */
    z-index: 1;         /* Fixes the topnav above other items */
	height: 35px; 		/* determines the bar height*/
	overflow: hidden; 	/* overflow-x property specifies scroll, hidden, auto or                 visible whether to clip the content, add a scroll bar, 
						or display overflow content of a block-level element,
						when it overflows at the left and right edges. */
	background-color: lightgrey;   /* This sets the colour of the Side Nav bar as                         #5B2C6F  */
	width: 100%; 				/* determines the bar width*/
}

 .topnav3 a {
	float: right;		/* specifies how an element should float. Absolute                      positioned elements ignores the float property. */
	display: block;		/* specifies the display behavior (the type of rendering                 box) of an element. */
	color: white;		/* This sets the colour of the font used for the Top Nav                 bar */
	height: 35px;		/* Sets the height of the Nav Bar */
	width: 100px;		/* Sets the width for the text links in the Bar */
	text-align: left;	/* Set the text alignment for different <div> elements -                 center, left,right, justify. */
	padding: 14px 4px 4px 4px;	/* to generate space around an element's                    content, inside of any defined borders - top, right,                    bottom, left in that order in px */
	text-decoration: none;	/* Set different text decorations for <h1>, <h2>,                   and <h3> param = overline, line-through, underline,                     underline overline */
	font-size: 12px;	/* Sets the font size for text in the Top Nav bar */ 
}

.topnav3 a:hover {		/* used to select elements when you mouse over them. */
	background-color: #2196F3;	/* This sets the colour #f1f1f1 [off white] of                          the hover used in the Top Nav bar */
	color: white;		/* Sets the font size for text when in HOVER in the Top                 Nav bar */ 
}


.topnav3 a[text] { 		/*NOT SURE WHAT THIS IS FOR*/
	font: arial; 		/* sets the margin area on the left side of an element.                 */
	color: white; 		/* This sets the colour of the font used in the Top Nav                 bar */
}


.topnav3 input[type=text] {
	padding: 6px;		/* sets the space above, from right, below, left, */
	margin-top: 0px;	/* sets the margin area on the left side of an                          element. */
	font-size: 13px;	/* This sets the size of the font used in the Top                       Nav bar */
	border: none;		/* to specify the style, width, and color of an                         element's border eg.all sides, bottom, rounded etc. */
	color: black;		/* sets text colour */
	width: 150px;		/* sets the width of the font area in the Top Nav bar */
}

/* the following sets up the Login button and container */
.topnav3 .login-container { 	/* THIS IS NOT CURRENTLY USED, BUT is used to                               provide a Login Container. */
	float: left; 			/* This sets the container to the right hand side of                     the Top Nav bar */
	height: 35px; 		/* determines the bar height*/
	top: 0;
}
.topnav3 .login-container .button {
	float: right;		/* This sets the button to the right hand side of the Top Nav bar */
	padding: 6px 10px;	/* sets the space above, from right, below, left,  */
	margin-top: 2px;	/* sets the margin area on the TOP of an element. */
	margin-right: 26px;	/* sets the right margin of an element. */
	background-color: blue;		/*this is the Home BUTTON color*/
	color: white;		/* Set the text-color */
	font-size: 15px;	/* This sets the size of the font used in the Login button in the Top Nav bar */
	border: none;		/* to specify the style, width, and color of an element's border eg.all sides, bottom, rounded etc. */
	cursor: pointer;	/* specifies the mouse cursor - a hand - to be displayed */
}
/* this determines the color change to the button when hovering */
.topnav .login-container button:hover {
	background-color: red;	/* sets the colour when the button is hovered over*/
}

/* ================ End of Third Level Topnav settings ================= */