/* ================  Google fonts to be imported for the website ================*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC|Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');
@import url('https://fonts.googleapis.com/css?family=Yrsa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cantata+One&display=swap');

html{
	background-image:url("images/background.jpg");	
}


body{
	background-color: white ;
	width:960px;
	margin:auto;  /* to center the main body */
	font-family: 'Heebo', sans-serif;
}

.home header{
	background-image:url("images/homebackimage.jpg");
	background-repeat: no-repeat;
	height:720px;
}


header p{
    font-family: 'Cantata One', serif;
	font-size:5em;	
    text-align: center;		
	margin-top: 150px;
	color:black;
	text-shadow: 2px 2px 8px white;  /* adds shadow to the title */
 	
	}
/* =============== Navigation Bar ================== */
nav{
	background-image:url("images/banner.jpg");
    font-family: 'Poppins', sans-serif;
	font-size:1.5em;
	font-weight:Bold;
	background-size:100% 100%;
}

nav ul{
	list-style-type:none; /* removes bullet points from navigation items */
	margin:0;
	padding:0;
	overflow: hidden; /* makes sure that long link names don't cause issues */
}

nav li{
	float:left;
	border-top:1px solid white;	
	border-bottom:1px solid white;
	border-left:1px solid white;
	width:238.75px; 
	/* needs to be adjusted for your page - width of parent element minus borders divided by number of links */
}

nav li:last-child{
	border-right:1px solid white;
}

nav li a {
    display: block;
	color: black ;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none; /* removes underline from all links */
}

nav li:hover:not(.active) {           /* needed to ensure active page link isn't affected if mouse goes over it */
    background-color:white;
	opacity: 0.5;
}

.active{
    background-color:#DFE1E2;
	opacity: 3;
}
/* ========================== Main Section ========================= */
section {
	padding: 21px;
	text-align: justify;
}

.image_left {
	float: right;
	margin-left: 21px;
}

.image_left img {
	width: 259px;
}

.image_left p {
	margin-top: 0;
}

.mapouter{
	position:relative; 
	text-align:right;
	height:505px;
	width:632px;
	margin-top:30px;
	}
.gmap_canvas {
	overflow:hidden;
	background:none!important;  /* ============  this will make sure that there is no background and can't be overridden ===================*/
	height:505px;
	width:632px;
	}
	
/* ======================== Footer ======================== */
	
footer p{
	margin: 0;
	font-size: 0.8em;
	text-align: center;
	font-family: 'Noto Sans SC', sans-serif;
    font-family: 'Poppins', sans-serif;
}

footer {
	border-top:1px solid black;	
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	padding: 7px;
	margin: 0 20px 0 20px;
}
	
.clear {
	clear: both;  /* this clears the floats: so it stops that element from floating */
}

/* ======================== Table Styling ======================== */

table {
  border-collapse: collapse;    /* to remove the little gap between each cell */                                         
  margin-top: 24px; 
  width: 100%;
}

table, th, td {
  border: 1px solid black;
  color: black;
}

th, td {
  padding: 15px;
  text-align: center;
  font-family: 'Yrsa', serif;
  border-bottom: 1px solid black;
}

tr:hover {background-color: SkyBlue;} /* when you hover over white rows it makes them that color */
tr:nth-child(even) {background-color: LightGrey;} /* to shade every second row that color */

th {
  background-color: DimGrey;
  color: white;
}
th#adjusted {
  width: 84px;
}

.sources {
	color: black;
	font-family: 'Cantata One', serif;
	font-size: 0.74em;
	text-align: center;
}

/* ======================== Ref Page ======================== */

.ref img {  /* makes all the images the same width etc */
	width: 104px;
	margin-right: 14px;
	margin-bottom: 20px;
}

.ref .left {
	float: left;
}

.ref {
	text-align: left;
}
.source {
	font-style: italic;
}
/* ======================== Pollution Facts Page ======================== */
.pie_chart {
	text-align: center;
}

/* ======================== River Stages Page ======================== */

.sub-head {
	text-decoration: underline;
	font-style: italic;
}

.explanation {
	border-top:1px solid black;	
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black;
	padding: 7px;
}

.explanation p {
	margin: 0px;
}