/* The body tag style provides the default style for text on the site. */

body {
	font-size:		medium;
	font-family:		Verdana, Helvetica, Arial, sans-serif;
	line-height:		1.6em;
}

/* The header tag style implements the use of the banner image and configures it to resize to the browser window. */

header {
	background-image: 	url('Images/MJNR-site-banner-image.jpg');
	background-repeat: 	no-repeat;
	background-size: 	cover;
	background-position: 	center;
	width: 			100%;
	height:			195px;
}

/* The p tag's bannerText class is used for the text under the banner and other places where bold extra large centered text is needed.
   This overrides that default body style defined above.	*/

p.bannerText {
	font-size:		xx-large;
	text-align:		center;
	font-weight:		bold;
}	

/* Used for text that needs to be centered, but not extra extra large and bold. */

p.contactText {
	font-size:		x-large;
	text-align:		center;
}

/* ======================================>  TABLE FORMATS  <==================================== */	

/* 1. Invisible table (Default). ------------------------------------------------- */

/* Format an invisible table to organize tablular data for display without lines.  This table tag style and the th and td
   tag styles that follow configure the table center on the page and allow those tables to resize with the browser space available. */

table {
	margin-top:		0;
	margin-bottom: 		0;
	margin-left:		auto;
	margin-right:		auto;
}

td, th {
	padding:		10px;
}

td.tableHeader {				/* Not working as expected, needs investigation */
	text-align:		left;
}

/* 2. Styled-data-table --------------------------------------------------------- */

/* This set of styles provides alternating row background colors, small 3D border effect. */
/* Set the table to the styled-data-table class to use this formatting.                   */

.styled-data-table {
    	border-collapse: 	collapse;
   	 margin: 		25px 0;
    	font-size: 		0.9em;
    	font-family: 		sans-serif;
    	min-width: 		400px;
    	box-shadow: 		0 0 20px rgba(0, 0, 0, 0.15);
	margin-left:		auto;
	margin-right:		auto;

}

.styled-data-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}


.styled-data-table th,
.styled-data-table td {
    padding: 12px 15px;
}

.styled-data-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-data-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-data-table tbody tr:last-of-type {
    border-bottom: 2px solid #c5d5f0;
}


/* This class of the "a" tag is used to style the download my CV link on the homepage as a button. */

a.downloadButton {
	border-radius: 		20px;
	padding:		10px 20px;
	font-weight: 		bold;
	color: 			000000;
	background-color:	#D3D3D3;
	text-decoration:	none;
	font-family:		Ariel, Helvitica, sans-serif;
}

/* This div is used to center the Download my CV button on the homepage. */

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

/* These styles are for the navigation system. */

 /* Styles for the nav tag contents */

  nav {
    background-color: #c5d5f0;
    margin:			0px 0px 0px 0px;
    list-style-type:	none;
    padding:		0px 0px 0px 0px;

  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  li {
    position: relative;
  }

  nav > ul > li {
    padding: 8px 16px;
    line-height: 24px;
    cursor: pointer;
  }

/* These styles are for the navigation system. */

ul.nav {
	background-color: 	#c5d5f0;
	margin:			0px 0px 0px 0px;
	list-style-type:	none;
	padding:		10px 0px 10px 0px;
}

ul.nav li {
	display:		inline;
	padding:		5px 10px 5px 10px;
}

/*  ul.nav li a:link, ul li a:visited { */
nav > li a:link, ul li a:visited {

	color:			#112e5e;
	border-bottom:		none;
	font-weight:		bold;
}

ul.nav li.selected {
	background-color:	#e3e3e1;
}


  nav > ul > li:hover {
    background-color: #c5d5f0;
  }

  /* Dropdown menu */
  li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    background-color: #c5d5f0;
    min-width: 160px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  ul li a {
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
  }


  li ul li a {
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
  }

  li ul li:hover {
    background-color: deepskyblue;
  }

  li:hover > ul {
    display: block;
  }