@charset "utf-8";

/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");*/

/* CSS Document */

body {
 /* font-family: "Lato", sans-serif;*/
	font: 100%/1.4 Calibri, Verdana, Arial, Helvetica, sans-serif;
}



/*------------------*/
/*side navigation bar for desktop display (>600 wide)*/
.sidenav {
	height: 100%;
	width: 200px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
/*	background-color: #111;*/
	background: #eee;
	overflow-x: hidden;
	padding-top: 20px;
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
}

/*hide sidenav on small screens (mobile) */
@media screen and (max-width: 600px) {
  .sidenav {
    display: none;
  }
}
.sidenav h1 {
	font-size: 120%;
	font-weight: bold;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin: 5px;
}

.sidenav h2 {
	font-size: 110%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	margin: 5px;
}

.sidenav h3 {
	font-size: 100%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 22px;
	margin: 5px;
}
/*
.sidenav h4 {
	font-size: 100%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 28px;
	margin: 5px;
}
.sidenav h5 {
	font-size: 80%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 28px;
	margin: 5px;
}
*/


.sidenav a {
	text-decoration: none;
	color: #2196F3;
  	display: block;
}

.sidenav a:hover {
	color: #064579;
}

.sidenav .dropdown-btn {
	font-size: 110%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	margin: 5px;	
}
.sidenav .dropdown-btn.level2 {
	/*
	font-size: 110%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin: 5px;	*/
	padding-left: 25px;
}
/*
.sidenav a, .dropdown-btn
{
	font-size: 110%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 16px;
	margin: 5px;

  text-decoration: none;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;	
}

.sidenav a, .dropdown-btn:hover {

	color: #064579;
}
*/

/* Add an active class to the active dropdown button */
.active {
/*  background-color: red;*/
/*  color: white;*/
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
/*  background-color: #262626;
  padding-left: 8px;
*/  
   
	font-size: 100%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 26px;
	margin: 5px;  
}
.dropdown-container.level2 {
	/*
  display: none; 
	font-size: 100%;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 26px;
	margin: 5px;  
	*/
	padding-left: 36px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
 float: right;
  padding-right: 8px;
  padding-top: 5px;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}




/*-----------------*/
/* general layout for tutorials*/
.main_tutorial {
	margin-left: 200px; /* Same as the width of the sidenav */
	font-size: 12pt; /* Increased text to enable scrolling */
	padding: 0px 10px;
}
/* sidenav hidden on small screens, so expand tutorial*/
@media screen and (max-width: 600px) {
.main_tutorial {
	margin-left: 10px; /* Same as the width of the sidenav */
	font-size: 12pt; /* Increased text to enable scrolling */
	padding: 0px 10px;
}

}
.main_tutorial p {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

.main_tutorial a {
	color: #003399;
	text-decoration: underline;
}

.main_tutorial h1 {
	font-size: 28pt;
	font-weight: bold;
	color: #039;
}

.main_tutorial h2 {
	font-size: 22pt;
	font-weight: bold;
	font-style: italic;
	color: #039;

	margin-top: 1em;
	margin-bottom: 0.5em;
}

.main_tutorial h3 {
	font-size: 18pt;
	font-weight: bold;
	font-style: italic;
	color: #039;

	margin-top: 1em;
	margin-bottom: 0.5em;
}

.main_tutorial h4 {
	font-size: 15pt;
	font-weight: bold;
	color: #039;

	margin-top: 1em;
	margin-bottom: 0.5em;
}

.main_tutorial h5 {
	font-size: 14pt;
	font-style: italic;
	color: #039;

	margin-top: 1em;
	margin-bottom: 0.5em;
}

.main_tutorial h6 {
	font-size: 12pt;
	font-style: italic;
	color: #039;

	margin-top: 1em;
	margin-bottom: 0.5em;
}

.main_tutorial hr {
	border: 1px solid #999; 
	background-color: #999;
}

.indent15 {
	padding-left: 15px;
}
.indent30 {
	padding-left: 30px;
}


/*------------------*/
 /* Style the mobile navigation menu (only visible on narrow screens < 600*/
 /*should come AFTER main_tutorial, since re-styles links*/
.mobile-nav {
  overflow: hidden;
  background-color: #eee;
/*  position: relative;
*/  
  position: -webkit-sticky; /* Safari */  
  position: sticky; 
  top: 0;
  z-index: 1;
}

@media screen and (min-width: 600px) {
	.mobile-nav {
    display: none;		
	}
}
/* Hide the links inside the navigation menu (except for logo/home) */
.mobile-nav #myMobileLinks {
  display: none;
}

/* Style navigation menu links */
.mobile-nav a {
  color: #2196F3;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  display: block;
}

/* Style the hamburger menu */
.mobile-nav a.icon {
  background: #ccc;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.mobile-nav a:hover {
  background-color: #ddd;
  color: #064579;
}



/* Style the active link (or home/logo) */
.mobile-active {
  background-color: #4CAF50;
  background-color: #eee;
  color: white;
}

.mobile-nav h1 {
	font-size: 18pt;
	font-weight: bold;
	color: #039;
	line-height: normal;
	margin: 0px;
}
.mobile-nav h2 {
	font-size: 14pt;
	font-weight: normal;
	color: #039;
	line-height: 1px;
	margin-top: -20px;
	margin-left: 8px;
}
.mobile-nav h3 {
	font-size: 11pt;
	font-weight: normal;
	color: #039;
	line-height: 1px;
	margin-top: -20px;
	margin-left: 16px;
	font-style: normal;
}
.mobile-nav h4 {
	font-size: 9pt;
	font-weight: normal;
	color: #039;
	line-height: 1px;
	margin-top: -20px;
	margin-left: 24px;
	font-style: normal;
}
/*------------------------*/
/* Tooltips modified from https://www.webfx.com/blog/web-design/css-only-tooltips/*/
.tooltip {
	border-bottom: 1px dotted #000000;
	color: #003399;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
.tooltip a {
	text-decoration: none;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);	
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
/*
This positions the tooltip centred below the link text,
BUT if the link is at the edge of the page, the tooltip will be part obscured
	position: absolute; left: 1em; top: 2em; z-index: 99;
*/

/*Position tooltip centred  on the page */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;

	margin-left: 0; 
	width: 250px;
    z-index:999;
}

.tooltip:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left; 
	position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; 
	font-size: 1.2em; 
	font-weight: bold;
	display: block; 
	padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
/*
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
*/



/*
Modal box from:
https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
but the close button does not look good - simplified it
Also added query for mobiles, and vertical scroll
*/
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  
  	font: 100%/1.4 Calibri, Verdana, Arial, Helvetica, sans-serif;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window > div {
  width: 600px;
  position: relative;
  margin: 2% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
  
  max-height: 100%;
  overflow-y: auto;  
}

/* make narrow on mobiles*/
@media screen and (max-width: 600px) {
	.modal-window > div {
	  width: 300px;
	  position: relative;
	  margin: 2% auto;
	  padding: 2rem;
	  background: #fff;
	  color: #444;
	   
	  max-height: 100%;
	  overflow-y: auto;
	}
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
	color: #aaa;
	line-height: 1.4;
	font-size: 140%;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 70px;
	text-decoration: none;
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}
.modal-window h2 {
	font-size: 125%;
	margin-bottom: 5px;
}
/* to reduce the space between heading and para, have to change margins for both, or just takes largest*/
.modal-window p {
	margin-top: 0px;
}

/* --------------*/
/*menu for mobiles. Will only show on screens with width < 600*/

/* general colours etc*/
.red_txt {
	color: red;
}
.blue_txt {
	color: blue;
}

.hint_txt {
	color: #F0F;
	font-weight: normal;
}

.param_file  a {
	color: #090;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;	
	border-bottom: 1px dotted #000000;
}

.param_txt {
	color: #090;
	font-style: italic;
	font-weight: bold;	
}

.legend {
	font-size: 90%;
	color: #36F;
	width: 80%;
}

figure img {
	margin-left: 20px;
	margin-right: 40px;
	margin-bottom: 10px;
/*	float: left;*/
}
figcaption {
	font-size: 90%;
	color: #36F;
	padding:10px;
	width: 80%;
}


.SubList
{
	list-style-type:none; 
}
.ListSubtext
{
	list-style-type:none; 
	padding-left: 15px	
}

.resp-img, video {
	max-width: 100%; 
	height: auto;	
}

aside {
	font-size: 90%;
	line-height: normal;
	padding-left: 30px;
}

.NoList {
	list-style-type: none;
}


.lower25 {
	vertical-align: -25%;
}
.lower15 {
	vertical-align: -15%;
}

.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*used as class for series of images in one fig, will be on 1 line if wide enough, else wraps*/
.fig-seq {
	float: left;
	margin-right: 8px;
	margin-left: 20px;
}

/*for a, b, c etc to left of image in multi-part fig*/
.fig-id {
	float: left;
	line-height: 100px;
	padding-right: 5px;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.PrevNext {
	font-size: 150%; 
	color: #aaa;  
	text-align: center;
}
.PrevNext a {
	color: #36F;  
	text-decoration: none;	
}