@charset "utf-8";
/* CSS Document 
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto: 100,400,900');
@import url('https://fonts.googleapis.com/css2?family=Anton');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:400,700');*/
* {
    box-sizing: border-box;
}


body {
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    /*font-family: "Courier New", "monospace";*/
}

/* links */
a {
	color: #ffffff;
}
a:link{color: #ffffff; text-decoration:none;}
a:visited{color:#ffffff; font-weight:bold;}
a:hover{color:#ffffff; font-weight:bold; text-decoration:underline;}
a:active{color: #ffffff; font-weight: bold; text-decoration: underline;}

/* links for white background content */
a.contained:link {color:#1477AF; font-weight: bold; text-decoration: none;}
a.contained:visited {color:#1477AF; font-weight: bold; text-decoration: none;}
a.contained:hover { color:#1477AF;; font-weight: bold; text-decoration: underline;}

/* links for coloured background content */
a.coloured:link {color:#55788c;}
a.coloured:visited {color:#55788c; font-weight: normal;}
a.coloured:hover {color:#55788c; font-weight: normal;}

h3 {
    font-size: 22px;
}

h2, h3 {
	margin: 0;
	padding: 0;
}


.el54 {
    grid-area: subTitle;
    text-align: center;
    margin: 0;
}

.smallfont {
	font-size: 18px;
}

.leftfont {
    text-align: left;
}

.bluefont {
    color:#1477AF;
    display: block;
    text-align: center;
}

.boldfont {
    font-weight: bold;
}

.greenfont {
    color:#305115;
    display: block;
    text-align: center;
}

#wide_select {
    width: 15rem;
    margin-top: 1rem;
}

/*HOME, RESEARCH, PUBLICATIONS BUTTON LINKS ON TOP MENU*/
.dropbtn {
    display: block;
    cursor: pointer;
    margin: 0 0.6rem;
    color: #ffffff;
    font-weight: bold;
    background-color: #55788c;
    border: none;
    font-size: larger;
}

.dropbtn:hover, .dropbtn:focus {
    text-decoration: underline;
}

.dropdown-content {
    display: none;
    position:absolute;
    min-width: 360px;
    overflow: auto;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    top: 15rem;
    font-size: 16px;
    border: solid thin black;
    background:rgba(49, 70, 82,.8);
    border-radius: 5px;
}

.dropdown-content a {
    color: #fff;
    padding: 10px 0 0 25px;
    text-decoration: none;
    display: block;
    
}

.dropdown-content a:hover {
    text-decoration: underline;
}

.dropdown-content select {
    width: 5rem;
    margin: 1.2rem 0.5rem;
	
}

.show {
    display: block;
}

/* BANNER */
.el1 {
	background: white;
	grid-area: header-left;
  	border-radius: 5px;
}

.el5 {
	background: white;
	grid-area: header-right;
	/*padding: 0;*/
  	border-radius: 5px;
}

.el13 {
	background: white;
	grid-area: header-centre;
	/*padding: 1rem;*/
  	border-radius: 5px;
}

.el14 {
	background: white;
	grid-area: header-centre;
	/*padding: 1rem;*/
  	border-radius: 5px;
}

/* SIDE AREA - RIGHT */
.el7 {
	background: white;
	grid-area: side;
	padding: 0 0 0 1rem;
  	border-radius: 15px;
    grid-column-start: 4;
    display: block;
}

/*link dividing line*/
.el22 {
	background: #CF578F;
	grid-area: divide;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.1rem;
	margin: 50px 0;
}

/*formatting*/
.centered {
	text-align: center;
	display: block;
	/*background-color:inherit;
	font-weight: bold;*/
}

.centered_white {
	text-align: center;
	display: block;
	font-weight: bold;
	color: #fff;
}

.centered_white_margin {
	text-align: center;
	display: block;
	/*background-color:inherit;*/
	font-weight: bold;
	color: #000;
	margin: 0 0.6rem;
    font-size: larger;
    text-decoration: none;
}

.centered_img	{
	display: block;
	margin-left: auto;
	margin-right: auto;
    background-color: transparent;
    margin-bottom: 0;
    padding-bottom: 0;
}

.white_font {
	color:#ffffff;
    font-weight: bold;
    font-size: larger;
    font-style: italic;
}

.green_font {
    color: #EBF7E1;
    font-weight: bold;
    font-size: larger;
    font-style: italic;
}

.makeDarkRed	{
    color: #BF423A;
}

.emphasis	{
	font-size: 1.5rem;
	font-weight: bold;
}

/*BUTTON*/
.btn {
	color: #000;
	font-weight: bold;
	margin: 0 1em;
	padding: 0.2em 0.5em;
}

.button {
    background: #000;
    color: white;
    font: inherit;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.button:hover,
.button:active {
    background: white;
    color: #0e4f1f;
    border: thin black solid;
}

.button:focus {
    outline: none;
}

.button[disabled] {
	cursor: not-allowed;
	border: #a1a1a1;
	background: #ccc;
	color: #a1a1a1;
}

/*PUBS*/
.article-container {
    padding: 30px;
}

.article-box {
    background-color:#EBF7E1;
    border-radius: 15px;
    padding: 20px;
    margin: 10px 0;
    width: 100%;
    
}

/*.subtitle-box {
    background-color:#EBF7E1;
    border-radius: 15px;
    border: thin black solid;
    margin-bottom: 1rem;
    margin-top: 8rem;
    padding: 20px;
    font-size: 1rem;
    }*/

/* MOBILE */
@media (max-width: 40rem)
/*@media (max-width: 380px)    
@media only screen and (min-width: 300px)*/
{
    .dropbtn {
        display: none;
    }
    
	.el1 {
        display: block;
		padding-top: 2rem;
        margin-top: 2rem;
	}
	
	.el2 {
	  display: none;
	}
	
	.el4 {
	  display: none;
	}

	.centered {
		font-size: 1rem;
	}
	
	.centered_white {
		font-size: 0.8rem;
	}
	
	.centered_white_margin {
		font-size: 0.8rem;
	}
    
    .wide-margin {
        margin: 0;
    }
}

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px)
{
.el1 {
    margin-left: 10rem;
    }   
    
.el2 {
	  display: none;
	}
    
    .el4 {
        display: none;
    }
.wide-margin {
    margin: 0;
    }
	
	.el13 {
		margin: 2rem 0rem; 
	}

}

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px)
{

.mobile-nav {
	  display: none;
}

.mobile-nav__items {
	display: none;	
}

.toggle-button {
	display: none;
}
    
.container {
    margin: 20px auto;
    width: 95%;
    }
 
.el1 {
    margin-left: 0;
    }
    
.dropdown-content {
    width: 95%;
    background:rgba(49, 70, 82,.8);
    top: 12rem;
    }
.el13 {
		margin: 0rem; 
	}

/*TOP MENU*/   
.el2 {
	background: #55788c;
	grid-area: mnu;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.4rem;
    font-size: 14px;
    width: 100%;
    }
    
/*FOOTER*/
.el4 {
    background:#E9E9E9;
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 5px;
	width: 100%;
    font-size: smaller;
    }
    
.wide-margin {
    margin: 0 auto;
    }
    
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
/*DESKTOP*/
    
.show {
    display: block;
}
    
.dropdown-content {
    width: 90%;
    background:rgba(49, 70, 82,.8);
    top: 15rem;
    }
    
/*TOP MENU BAR*/
.el2 {
	background: #55788c;
	grid-area: mnu;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.4rem;
    font-size: 14px;
    width: 100%;
    }
    
/*FOOTER*/
.el4 {
    background:#E9E9E9;
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 5px;
	width: 100%;
    font-size: smaller;
    }
    
/*hide the mobile menu*/
.mobile-nav {
	  display: none;
	}

.mobile-nav__items {
	display: none;
	}

.toggle-button {
	display: none;
	}

.auto_margins {
    display: block;
    margin: 0 auto;
}

/*FOOTER*/
.el4 {
    background:#E9E9E9;
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 5px;
	/*position: fixed;
	bottom: 0;*/
	width: 100%;
    /*font-size: smaller;*/
    }
}

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
.dropdown-content {
    width: 90%;
    }
    
}


@media only screen and (min-width: 1430px) {
.dropdown-content {
    width: 90%;
    }
    

.wide-margin {
    margin: 0 300px;
} 

}
/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}